/* ============================================================
   DR. ALEJANDRO VIDAL POMBO — Estilos globales (cabecera, footer)
   y landing. Cargado en todo el sitio desde functions.php.
   ============================================================ */

/* ============================================================
   DESIGN TOKENS
============================================================ */
:root {
    --bg:          #F6F8FB;
    --bg-white:    #FFFFFF;
    --text:        #1F2937;
    --text-mid:    #5F6673;
    --text-soft:   #8A8F9C;
    --accent:      #263F78;
    --accent-dark: #1F2A44;
    --accent-pale: #EEF3FF;
    --border:      #E3E7EF;
    --border-mid:  #CDD4E1;

    --sans:  'DM Sans', system-ui, sans-serif;
    --serif: 'Lora', Georgia, serif;

    --w:       1280px;
    --pad:     clamp(20px, 5vw, 64px);
    --section: clamp(64px, 8vw, 112px);
    --nav-h:   68px;

    --radius-pill: 100px;
    --radius-md:   12px;
    --radius-sm:   8px;
}

/* ============================================================
   RESET & BASE (limitado para no pisar el resto del tema)
============================================================ */
.av-site *, .av-site *::before, .av-site *::after { box-sizing: border-box; }
.av-site { font-family: var(--sans); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; }
.av-site img { display: block; max-width: 100%; }
.av-site a { color: inherit; text-decoration: none; }

.wrap {
    max-width: var(--w);
    margin: 0 auto;
    padding: 0 var(--pad);
}

/* ============================================================
   REVEAL ON SCROLL
============================================================ */
.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ============================================================
   BOTONES
============================================================ */
.btn-primary {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--sans); font-size: 14px; font-weight: 500;
    color: #fff !important; background: var(--accent);
    padding: 11px 24px; border-radius: var(--radius-pill);
    border: none; cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
}
.btn-primary svg { transition: transform 0.2s ease; }
.btn-primary:hover { background: var(--accent-dark); transform: translateY(-2px); color: #fff !important; }
.btn-primary:hover svg { transform: translateX(3px); }
.btn-ghost-line {
    display: inline-flex; align-items: center;
    font-family: var(--sans); font-size: 14px; font-weight: 400;
    color: var(--text-mid); padding-bottom: 2px;
    border-bottom: 1px solid var(--border-mid);
    transition: color 0.2s, border-color 0.2s; white-space: nowrap;
}
.btn-ghost-line:hover { color: var(--text); border-color: var(--text); }
a.link-arrow {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--sans); font-size: 14px; font-weight: 500;
    color: var(--accent); background: none; border: none;
    transition: color 0.2s ease; white-space: nowrap;
}
.link-arrow-text { border-bottom: 1px solid var(--border-mid); padding-bottom: 3px; transition: border-color 0.2s ease; }
.link-arrow svg { transition: transform 0.2s ease; }
a.link-arrow:hover { color: var(--accent-dark); }
.link-arrow:hover .link-arrow-text { border-color: var(--accent); }
.link-arrow:hover svg { transform: translateX(3px); }

/* ============================================================
   NAVIGATION — sticky (funciona en todas las páginas)
============================================================ */
.nav {
    position: sticky;
    top: 0;
    z-index: 200;
    height: var(--nav-h);
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}
.nav-inner {
    max-width: var(--w); margin: 0 auto;
    padding: 0 clamp(16px, 5vw, 64px);
    height: 100%;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.nav-brand { flex-shrink: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.2; }
.nav-brand-name { font-family: var(--serif); font-size: 15px; font-weight: 500; color: var(--accent); letter-spacing: 0.01em; }
.nav-brand-title { font-size: 10px; font-weight: 400; color: var(--text-soft); letter-spacing: 0.08em; text-transform: uppercase; }
.nav-brand-full  { display: none; }
.nav-brand-short { display: block; }
.nav-menu { display: none; flex: 1; align-items: center; justify-content: flex-end; gap: 0; }
.nav-links { display: flex; align-items: center; gap: 0; list-style: none; margin-right: 20px; margin-bottom: 0; padding: 0; }
.nav-links > li { margin: 0; }
.nav-links > li > a {
    position: relative; display: block;
    font-size: 13.5px; font-weight: 400; color: var(--text-mid);
    padding: 8px 14px; transition: color 0.2s ease; white-space: nowrap;
}
.nav-links > li > a::after {
    content: ''; position: absolute; left: 14px; right: 14px; bottom: 4px;
    height: 1.5px; background: var(--accent);
    transform: scaleX(0); transform-origin: left center; transition: transform 0.28s ease;
}
.nav-links > li > a:hover { color: var(--text); }
.nav-links > li > a:hover::after { transform: scaleX(1); }
.nav-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.nav-cta {
    display: inline-flex; align-items: center;
    font-family: var(--sans); font-size: 13px; font-weight: 500;
    color: #fff !important; background: var(--accent);
    padding: 8px 18px; border-radius: var(--radius-pill);
    transition: background 0.2s ease, transform 0.2s ease; white-space: nowrap;
}
.nav-cta:hover { background: var(--accent-dark); transform: translateY(-2px); color: #fff !important; }
.hamburger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 40px; height: 40px; padding: 8px; border-radius: 6px;
    background: none; border: none; cursor: pointer;
    transition: background 0.15s; flex-shrink: 0;
}
.hamburger:hover { background: var(--accent-pale); }
.hamburger span { display: block; width: 20px; height: 1.5px; background: var(--text); border-radius: 2px; transition: transform 0.25s, opacity 0.25s; transform-origin: center; }
.hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.mobile-menu {
    display: none; position: fixed; inset: var(--nav-h) 0 0 0; z-index: 190;
    background: var(--bg-white); border-top: 1px solid var(--border);
    overflow-y: auto; padding: 8px var(--pad) 40px; flex-direction: column;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
    display: block; font-size: 15.5px; font-weight: 400; color: var(--text-mid);
    padding: 14px 0; border-bottom: 1px solid var(--border); transition: color 0.15s;
}
.mobile-menu a:hover { color: var(--text); }
.mobile-menu a:last-of-type { border-bottom: none; }
@media (min-width: 1100px) {
    .nav-brand-full  { display: block; }
    .nav-brand-short { display: none; }
    .nav-menu    { display: flex; }
    .hamburger   { display: none; }
    .nav-right .nav-cta { display: none; }
}

/* ===========================================================
   HERO
========================================================== */
/* HERO — imagen de fondo (trencadis de la Ciutat de les Arts). En TODOS los
   tamanos la imagen va FIJA al viewport y las secciones siguientes la van
   tapando al hacer scroll (el contenido "sube" sobre la imagen). El texto se
   ancla abajo, sobre el cielo. Movil/tablet usan dvh para llenar la pantalla
   sin franja blanca y mantener el CTA visible; tipografia comprimida en movil.
   Escritorio (>=1100px): igual que antes. */

/* Base = movil */
.hero { position: relative; min-height: 100vh; min-height: 100lvh; background: #cfe0f3; }
.hero-bg, .hero-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh; z-index: 0; }
.hero-bg { z-index: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: left center; }
.hero-overlay { z-index: 1; pointer-events: none; background: none; }
.hero-content { position: relative; z-index: 2; width: 100%; max-width: var(--w); min-height: 100vh; min-height: 100lvh; margin: 0 auto;
    padding: 0 var(--pad); padding-bottom: 100px; padding-bottom: calc(100lvh - 100svh + 80px);
    display: flex; flex-direction: column; justify-content: flex-end; }
.hero-content > * { max-width: 600px; }
.hero-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.hero-h1 { font-family: var(--serif); font-size: clamp(28px, 7.8vw, 38px); font-weight: 500; line-height: 1.08; letter-spacing: -0.02em; color: #1C2536; margin-bottom: 12px; }
.hero-sub { font-size: 14px; font-weight: 400; color: #1C2536; line-height: 1.45; max-width: 480px; margin-bottom: 16px; }
.hero-actions { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.hero-actions .btn-primary { font-size: 14px; padding: 12px 28px; }
.hero-actions .btn-ghost-line { color: #1C2536; }
.hero ~ section, .hero ~ div, .site-footer { position: relative; z-index: 5; }

/* Movil: alinear 'Sobre el Dr. Vidal' con el texto de 'Pedir cita' (en columna) */
@media (max-width: 767px) {
    .hero-actions .btn-ghost-line { margin-left: 28px; }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1099px) {
    .hero-eyebrow { margin-bottom: 14px; }
    .hero-h1 { font-size: clamp(40px, 5.2vw, 54px); margin-bottom: 18px; }
    .hero-sub { font-size: 17px; line-height: 1.6; margin-bottom: 26px; max-width: 520px; }
    .hero-content { padding-bottom: 150px; padding-bottom: calc(100lvh - 100svh + 120px); }
    .hero-actions { flex-direction: row; align-items: center; gap: 14px; }
}

/* Escritorio: como antes */
@media (min-width: 1100px) {
    .hero { min-height: 100svh; height: 100svh; }
    .hero-bg, .hero-overlay { height: 100svh; }
    .hero-bg img { object-position: center 32%; }
    .hero-overlay { background: radial-gradient(70% 60% at 24% 64%, rgba(246,249,253,0.60) 0%, rgba(246,249,253,0.22) 46%, rgba(246,249,253,0) 72%); }
    .hero-content { min-height: 100svh; padding: 0 64px 23vh; }
    .hero-eyebrow { margin-bottom: 16px; }
    .hero-h1 { font-size: clamp(40px, 8vw, 60px); margin-bottom: 20px; }
    .hero-sub { font-size: clamp(16px, 1.9vw, 18px); line-height: 1.7; margin-bottom: 34px; }
    .hero-actions { flex-direction: row; align-items: center; gap: 14px; }
}

/* ===========================================================
   SECTION SHARED
============================================================ */
.s-header { margin-bottom: 48px; max-width: 540px; }
.s-header h2:not(.section-label) { font-family: var(--sans); font-size: clamp(26px, 3vw, 40px); font-weight: 300; line-height: 1.15; letter-spacing: -0.025em; margin-bottom: 14px; }
.s-header h2:not(.section-label) strong { font-weight: 600; }
/* Título visual de sección que NO es encabezado H2 (mismo aspecto que .s-header h2) */
.s-header-title { font-family: var(--sans); font-size: clamp(26px, 3vw, 40px); font-weight: 300; line-height: 1.15; letter-spacing: -0.025em; margin-bottom: 14px; }
.s-header-title strong { font-weight: 600; }
.s-header p { font-family: var(--serif); font-size: 17px; color: var(--text-mid); line-height: 1.7; }
.section-label { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); margin-top: 0; margin-bottom: 18px; display: block; }

/* ============================================================
   SECTION — CONSULTA
============================================================ */
.s-consulta { padding: clamp(56px, 6vw, 88px) 0; background: var(--bg); border-top: 1px solid var(--border); }
.consulta-grid { display: grid; gap: 40px; }
.consulta-label { font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 16px; }
.consulta-left h2 { font-family: var(--sans); font-size: clamp(24px, 2.8vw, 34px); font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; color: var(--text); margin-bottom: 18px; }
.consulta-left p { font-size: 15px; font-weight: 300; color: var(--text-mid); line-height: 1.8; max-width: 380px; }
.feature-item { display: grid; grid-template-columns: 28px 1fr; gap: 14px; padding: 14px 0; align-items: start; }
.feature-num { font-size: 10.5px; font-weight: 500; letter-spacing: 0.06em; color: var(--accent); padding-top: 4px; opacity: 0.8; }
.feature-body h3 { font-family: var(--sans); font-size: 14.5px; font-weight: 500; color: var(--text); letter-spacing: -0.01em; margin-bottom: 4px; line-height: 1.35; }
.feature-body p { font-size: 13.5px; color: var(--text-soft); line-height: 1.65; font-weight: 300; }
@media (min-width: 768px) {
    .consulta-grid { grid-template-columns: 42% 52%; gap: 0 8%; align-items: start; }
    .consulta-left { padding-top: 22px; }
}

/* ============================================================
   SECTION — PRIMERA VISITA
=========================================================== */
.s-visita { padding: var(--section) 0; background: var(--bg-white); }
.steps { display: grid; gap: 0; margin-top: 56px; }
.step { padding: 28px 0; border-top: 1px solid var(--border); }
.step:first-child { border-top: none; padding-top: 0; }
.step-num { display: block; font-size: 12px; font-weight: 500; letter-spacing: 0.1em; color: var(--accent); margin-bottom: 12px; }
.step-bar { width: 28px; height: 2px; background: var(--accent); margin-bottom: 18px; }
.step h3 { font-family: var(--sans); font-size: 16px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; margin-bottom: 10px; }
.step p { font-size: 14.5px; font-weight: 300; color: var(--text-mid); line-height: 1.75; }
@media (min-width: 768px) {
    .steps { grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 64px; }
    .step { padding: 0 40px; border-top: none; border-left: 1px solid var(--border); }
    .step:first-child { padding-left: 0; border-left: none; }
    .step:last-child { padding-right: 0; }
}

/* ===========================================================
   SECTION — CUÁNDO CONSULTAR
=========================================================== */
.s-cuando { padding: var(--section) 0; background: var(--bg); }
.cuando-grid { display: grid; gap: 40px; }
.cuando-copy .section-label { margin-bottom: 18px; }
.cuando-copy h2 { font-family: var(--sans); font-size: clamp(24px, 2.8vw, 34px); font-weight: 300; line-height: 1.2; letter-spacing: -0.025em; color: var(--text); margin-bottom: 20px; }
.cuando-copy p { font-size: 15px; font-weight: 300; color: var(--text-mid); line-height: 1.8; margin-bottom: 14px; max-width: 460px; }
.cuando-copy p:last-child { margin-bottom: 0; }
.cuando-list { list-style: none; margin: 0; padding: 0; }
.cuando-list li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; font-size: 14.5px; color: var(--text); line-height: 1.6; }
.cuando-list li::before { content: ''; flex-shrink: 0; width: 10px; height: 1px; background: var(--accent); margin-top: 0.78em; }
@media (hover: hover) and (min-width: 768px) {
    .cuando-list li { transition: transform 0.25s ease, color 0.25s ease; }
    .cuando-list li:hover { transform: translateX(5px); color: var(--accent); }
}
@media (min-width: 768px) {
    .cuando-grid { grid-template-columns: 1fr 1fr; gap: 0 8%; align-items: start; }
    .cuando-copy { padding-top: 4px; }
    .cuando-list { padding-top: 82px; } /* fallback; landing.js lo alinea (punto intermedio, -10px) */
}

/* ============================================================
   SECTION — SOBRE MÍ
============================================================ */
.s-especialista { padding: var(--section) 0; background: var(--bg-white); }
.especialista-grid { display: grid; gap: 48px; }
.especialista-img-wrap { border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4/5; background: var(--bg-white); box-shadow: 0 2px 24px rgba(17,24,39,0.06); }
.especialista-img-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.especialista-name { font-family: var(--sans); font-size: clamp(24px, 2.8vw, 36px); font-weight: 300; line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 18px; }
.especialista-name strong { font-weight: 600; }
.especialista-copy p { font-family: var(--serif); font-size: 16px; color: var(--text-mid); line-height: 1.8; margin-bottom: 14px; }
.creds { margin-top: 28px; }
.cred { display: flex; gap: 14px; align-items: flex-start; padding: 13px 0; border-bottom: 1px solid var(--border); }
.cred:first-child { border-top: 1px solid var(--border); }
.cred-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex-shrink: 0; margin-top: 8px; }
.cred-text { font-size: 14px; color: var(--text-soft); line-height: 1.5; }
.cred-text strong { color: var(--text); font-weight: 500; display: block; margin-bottom: 1px; }
.especialista-cta { margin-top: 32px; }
@media (min-width: 768px) {
    .especialista-grid { grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
}

/* ============================================================
   SECTION — SERVICIOS / PATOLOGÍAS
=========================================================== */
.s-patologias { padding: var(--section) 0; background: var(--bg-white); }
.patologias-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 48px; }
.pat-item { background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 26px 26px 28px; }
.pat-num { display: block; font-size: 12px; font-weight: 500; letter-spacing: 0.08em; color: var(--accent); margin-bottom: 14px; }
.pat-name { font-family: var(--sans); font-size: 17px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; margin-bottom: 8px; }
.pat-desc { font-size: 14px; font-weight: 300; color: var(--text-mid); line-height: 1.65; }
@media (min-width: 640px) { .patologias-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (min-width: 1024px) { .patologias-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; } }
@media (hover: hover) and (min-width: 768px) {
    .pat-item { transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
    .pat-item:hover { transform: translateY(-4px); box-shadow: 0 6px 22px rgba(17,24,39,0.07); border-color: var(--border-mid); }
}

/* ===========================================================
   SECTION — UBICACIÓN
=========================================================== */
.s-ubicacion { padding: var(--section) 0; background: var(--bg); }
.ubicacion-grid { display: grid; gap: 48px; }
.ubicacion-info h2 { font-family: var(--sans); font-size: clamp(22px, 2.5vw, 32px); font-weight: 300; letter-spacing: -0.02em; margin-bottom: 16px; }
.ubicacion-info h2 strong { font-weight: 600; }
.ubicacion-info > p { font-family: var(--serif); font-size: 16px; color: var(--text-mid); line-height: 1.75; margin-bottom: 14px; }
.ubicacion-info > p:last-of-type { margin-bottom: 32px; }
.ubicacion-info > p a { color: var(--accent); border-bottom: 1px solid var(--border-mid); transition: border-color 0.2s ease, color 0.2s ease; }
.ubicacion-info > p a:hover { color: var(--accent-dark); border-color: var(--accent); }
.ubicacion-data { display: flex; flex-direction: column; gap: 16px; }
.ubicacion-row { display: flex; gap: 14px; }
.u-label { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); padding-top: 2px; min-width: 70px; flex-shrink: 0; }
.u-val { font-size: 15px; color: var(--text); line-height: 1.55; display: flex; flex-direction: column; align-items: flex-start; }
.u-address { display: block; }
.link-arrow--sm { display: inline-flex; margin-top: 14px; font-size: 13px; gap: 6px; }
.ubicacion-map { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border); aspect-ratio: 4/3; }
.ubicacion-map iframe { width: 100%; height: 100%; border: none; display: block; }
@media (min-width: 768px) {
    .ubicacion-grid { grid-template-columns: 5fr 7fr; gap: 56px; align-items: start; }
}

/* ============================================================
   SECTION — FAQ
============================================================ */
.s-faq { padding: var(--section) 0; background: var(--bg-white); }
.faq-grid { display: grid; gap: 40px; }
.faq-grid h2 { font-family: var(--sans); font-size: clamp(24px, 2.8vw, 36px); font-weight: 300; line-height: 1.2; letter-spacing: -0.02em; }
.faq-grid h2 strong { font-weight: 600; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:first-child { border-top: 1px solid var(--border); }
.faq-heading { margin: 0; font: inherit; font-weight: inherit; }
.faq-q { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 20px 0; font-family: var(--sans); font-size: 15.5px; font-weight: 500; color: var(--text); letter-spacing: -0.01em; line-height: 1.45; transition: transform 0.2s ease, color 0.2s ease; }
@media (hover: hover) { .faq-q:hover { transform: translateX(3px); color: var(--accent-dark); } }
.faq-q:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.faq-icon { position: relative; flex-shrink: 0; width: 16px; height: 16px; margin-top: 3px; }
.faq-icon::before, .faq-icon::after { content: ''; position: absolute; top: 50%; left: 50%; width: 14px; height: 1.5px; background: var(--accent); transform: translate(-50%, -50%); transition: transform 0.25s ease, opacity 0.25s ease; }
.faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-q[aria-expanded="true"] .faq-icon::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }
.faq-panel { overflow: hidden; max-height: 0; transition: max-height 0.3s ease; }
.faq-a { font-size: 15px; font-weight: 300; color: var(--text-mid); line-height: 1.75; padding: 0 40px 22px 0; }
@media (prefers-reduced-motion: reduce) { .faq-q, .faq-panel, .faq-icon::before, .faq-icon::after { transition: none; } }
@media (min-width: 768px) {
    .faq-grid { grid-template-columns: 1fr 1.6fr; gap: 72px; align-items: start; }
}

/* ===========================================================
   SECTION — CONTACTO
=========================================================== */
.s-contacto { padding: var(--section) 0; background: var(--bg-white); border-top: 1px solid var(--border); }
.contacto-cta { max-width: 600px; margin: 0 auto; text-align: center; }
.contacto-cta h2 { font-family: var(--sans); font-size: clamp(26px, 3.2vw, 40px); font-weight: 300; line-height: 1.15; letter-spacing: -0.025em; color: var(--text); margin-bottom: 14px; }
.contacto-cta > p { font-size: 16px; font-weight: 300; color: var(--text-mid); line-height: 1.7; margin-bottom: 32px; }
.btn-cta-final { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sans); font-size: 15px; font-weight: 500; color: #fff !important; background: var(--accent); padding: 14px 32px; border-radius: var(--radius-pill); transition: background 0.2s ease, transform 0.2s ease; }
.btn-cta-final svg { transition: transform 0.2s ease; }
.btn-cta-final:hover { background: var(--accent-dark); transform: translateY(-2px); color: #fff !important; }
.btn-cta-final:hover svg { transform: translateX(3px); }
.contacto-alt { max-width: 760px; margin: 56px auto 0; padding-top: 48px; border-top: 1px solid var(--border); text-align: center; }
.contacto-alt-label { font-size: 13px; font-weight: 500; color: var(--text-soft); margin-bottom: 24px; }
.contacto-cards { display: grid; grid-template-columns: 1fr; gap: 16px; text-align: left; }
.contacto-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 24px 26px; transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }
.contacto-card:hover { border-color: var(--border-mid); transform: translateY(-3px); box-shadow: 0 6px 20px rgba(17,24,39,0.06); }
.contacto-card-label { font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.contacto-card-value { font-size: 18px; font-weight: 500; color: var(--text); letter-spacing: -0.01em; margin-bottom: 6px; display: inline-block; overflow-wrap: anywhere; transition: color 0.2s ease; }
a.contacto-card-value:hover { color: var(--accent); }
.contacto-card-note { font-size: 13px; font-weight: 300; color: var(--text-soft); line-height: 1.5; }
@media (min-width: 600px) { .contacto-cards { grid-template-columns: 1fr 1fr; } }

/* ===========================================================
   FOOTER GLOBAL
=========================================================== */
.site-footer { background: var(--bg); border-top: 1px solid var(--border); padding: 32px 0; }
.footer-inner { display: flex; flex-direction: column; gap: 16px; }
.footer-brand { font-size: 14px; font-weight: 600; color: var(--text); }
.footer-brand em { font-style: normal; color: var(--accent); }
.footer-links { display: flex; gap: 16px; list-style: none; flex-wrap: wrap; margin: 0; padding: 0; }
.footer-links a { font-size: 13px; color: var(--text-soft); transition: color 0.2s; }
.footer-links a:hover { color: var(--text); }
.footer-copy { font-size: 12px; color: var(--text-soft); }
@media (min-width: 768px) {
    .footer-inner { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ===========================================================
   CONTENEDOR DE PÁGINAS INTERNAS (blog, sobre mí, legales)
   para que el contenido herede tipografía y respire.
=========================================================== */
.av-page { padding: var(--section) 0; background: var(--bg-white); }
.av-page .entry-content { max-width: 760px; margin: 0 auto; }
.av-page h1 { font-family: var(--serif); font-size: clamp(28px, 4vw, 44px); font-weight: 500; color: var(--text); line-height: 1.15; margin-bottom: 24px; }


/* Barra de administracion de WordPress: el menu sticky no debe quedar tapado (solo usuarios conectados) */
body.admin-bar .nav { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .nav { top: 46px; } }


/* =============================================================
   AFINADO DEL RESTO DE LA WEB (blog, entradas, internas)
   La PALETA y el LAYOUT (sin barra lateral, artículos relacionados)
   se gestionan en el Personalizador de Blocksy. Aquí solo afinamos
   componentes concretos. Reglas acotadas, sin !important de paleta.
   ============================================================ */

/* Tarjetas del blog: se usa el estilo nativo de Blocksy (revertido) */

/* Títulos de entrada en DM Sans (la fuente nativa de títulos es serifa) */
.entry-title { font-family: var(--sans) !important; font-weight: 600 !important; letter-spacing: -0.02em !important; line-height: 1.2 !important; }
.entry-title a { color: var(--text) !important; transition: color .2s ease; }
.entry-title a:hover { color: var(--accent) !important; }

/* "leer más" -> enlace discreto con flecha (estilo del hero "Sobre el Dr. Vidal") */
.entry-button, a.entry-button, .entry-card .ct-button-ghost {
    display: inline-flex !important; align-items: center; gap: 6px;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--border-mid) !important;
    border-radius: 0 !important;
    padding: 0 0 2px !important;
    color: var(--text-mid) !important;
    font-weight: 400 !important;
    transition: color .2s ease, border-color .2s ease !important;
}
.entry-button:hover, a.entry-button:hover, .entry-card .ct-button-ghost:hover {
    color: var(--text) !important; border-color: var(--text) !important; background: transparent !important;
}

/* Contenido de entrada: jerarquía de títulos en sans, lectura cðmoda */
.single-post .entry-content h2, .single-post .entry-content h3, .single-post .entry-content h4,
.page:not(.home) .entry-content h2, .page:not(.home) .entry-content h3 {
    font-family: var(--sans); letter-spacing: -0.015em;
}
.single-post .entry-content p, .page:not(.home) .entry-content p { line-height: 1.8; }

/* Cita (blockquote) coherente con la landing */
.entry-content blockquote {
    border-left: 3px solid var(--accent);
    background: var(--accent-pale);
    border-radius: var(--radius-sm);
    padding: 16px 22px;
}

/* Artículos relacionados (Blocksy) -> títulos en sans */
.ct-related-posts .entry-title, [class*="related"] .entry-title { font-family: var(--sans) !important; }

/* Inputs (búsqueda, 404, formularios) coherentes */
input[type="search"], input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
.wp-block-search__input, textarea {
    border-radius: var(--radius-sm); border: 1px solid var(--border-mid);
}
.wp-block-search__button { border-radius: var(--radius-sm); }

/* Títulos de hero/página/archivo (entradas, internas, archivo, búsqueda, 404) en DM Sans */
.page-title, h1.page-title, .ct-hero-title, .entry-header .page-title,
.archive .page-title, .search .page-title, .error404 .page-title {
    font-family: var(--sans) !important;
    letter-spacing: -0.02em !important;
}

/* ============================================================
   BARRA LATERAL (blog y entradas)
============================================================ */
.ct-sidebar .wp-block-heading, .ct-sidebar .widget-title {
    font-family: var(--sans); font-size: 17px; letter-spacing: -0.01em;
}

/* H1 de bloques Stackable sin fuente definida (p. ej. /sobre-mi/) */
.stk-block-heading__text { font-family: var(--sans) !important; letter-spacing: -0.02em !important; }

/* ============================================================
   BARRA LATERAL — "Más artículos del blog" (shortcode)
============================================================ */
.av-mas-articulos .av-mas-titulo { font-family: var(--sans); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); margin: 0 0 16px; }
.av-mas-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.av-mas-lista li { margin: 0; }
.av-mas-lista a { display: flex; align-items: center; gap: 12px; }
.av-mas-thumb, .av-mas-thumb img { width: 52px; height: 52px; border-radius: var(--radius-sm); object-fit: cover; flex: none; display: block; }
.av-mas-thumb { background: var(--border); overflow: hidden; }
.av-mas-post-titulo { font-family: var(--sans); font-size: 14px; font-weight: 500; line-height: 1.45; color: var(--text); transition: color .2s ease; }
.av-mas-lista a:hover .av-mas-post-titulo { color: var(--accent); }

/* ============================================================
   CTA FINAL DE ENTRADA — ancho completo, antes del footer
   (lo imprime footer.php solo en entradas individuales)
============================================================ */
.av-cta-final { background: var(--bg); border-top: 1px solid var(--border); margin-top: clamp(40px, 6vw, 72px); padding: clamp(56px, 9vw, 104px) 0; text-align: center; }
.av-cta-final-title { font-family: var(--sans); font-size: clamp(24px, 3.2vw, 32px); font-weight: 600; letter-spacing: -0.02em; color: var(--text); margin: 0 0 14px; }
.av-cta-final-text { font-family: var(--sans); font-size: clamp(15px, 1.8vw, 16.5px); color: var(--text-mid); line-height: 1.7; max-width: 580px; margin: 0 auto 30px; }
.av-cta-final .btn-primary { font-size: 15px; padding: 13px 30px; }

/* ============================================================
   CABECERA: pegada arriba, fondo sólido y por encima de todo
============================================================ */
.nav { z-index: 600; top: 0; margin-top: 0; }
@media (max-width: 1099px) { .nav { background: #ffffff; } }
/* Admin bar de WP: en móvil (<=600px) la barra es absolute y se va al
   hacer scroll, así que la cabecera debe quedar en top:0 */
@media screen and (max-width: 600px) { body.admin-bar .nav { top: 0; } }
html, body { margin-top: 0; }

/* ============================================================
   PÁGINA "SOBRE MÍ" (plantilla page-sobre-mi.php)
============================================================ */
.sm-hero { padding: clamp(56px, 9vw, 110px) 0 clamp(28px, 4vw, 48px); }
.sm-hero h1 { font-family: var(--sans); font-size: clamp(34px, 5vw, 48px); font-weight: 600; letter-spacing: -0.025em; color: var(--text); margin: 0 0 12px; }
.sm-hero-sub { font-family: var(--sans); font-size: clamp(15.5px, 2vw, 18px); color: var(--text-mid); line-height: 1.6; max-width: 640px; margin: 0; }

.sm-layout-wrap { padding: clamp(8px, 2vw, 20px) 0 clamp(56px, 8vw, 96px); }
.sm-layout { display: flex; flex-direction: column; gap: 32px; }

/* Foto profesional */
.sm-photo img { width: min(220px, 62%); border-radius: var(--radius-md); border: 1px solid var(--border); box-shadow: 0 10px 30px rgba(31, 42, 68, 0.08); display: block; }

/* Bloques de contenido */
.sm-block { margin-bottom: clamp(40px, 6vw, 64px); scroll-margin-top: calc(var(--nav-h) + 20px); }
.sm-block:last-child { margin-bottom: 0; }
.sm-block .section-label { margin-bottom: 14px; }
.sm-section-title { font-family: var(--sans); font-size: clamp(23px, 2.8vw, 29px); font-weight: 600; letter-spacing: -0.02em; color: var(--text); margin: 0 0 22px; }
.sm-block > p { font-family: var(--sans); font-size: 16px; line-height: 1.85; color: var(--text-mid); margin: 0 0 16px; max-width: 660px; }
.sm-block > p:last-child { margin-bottom: 0; }
.sm-block strong { color: var(--text); font-weight: 600; }

/* Trayectoria: subsecciones con listas de guion (estilo "Cuándo pedir cita") */
.sm-tray-block { margin-bottom: clamp(26px, 3.5vw, 40px); }
.sm-tray-block:last-child { margin-bottom: 0; }
.sm-tray-block h3 { font-family: var(--sans); font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--accent); margin: 0 0 10px; }
.sm-tray-list { list-style: none; margin: 0; padding: 0; max-width: 660px; }
.sm-tray-list li { position: relative; padding: 0 0 14px 22px; font-family: var(--sans); font-size: 15.5px; line-height: 1.6; color: var(--text-mid); margin: 0; }
.sm-tray-list li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.sm-tray-list strong { color: var(--text); font-weight: 600; }
.sm-anyo { color: var(--text-soft); white-space: nowrap; }

/* Cómo entiendo la consulta: cita editorial en cursiva */
.sm-cita { position: relative; font-family: var(--serif); font-style: italic; font-size: clamp(19px, 2.4vw, 25px); line-height: 1.62; color: var(--accent-dark); border: none; background: none; margin: 8px 0 44px; padding: 38px 0 0; max-width: 620px; }
.sm-cita::before { content: "\201C"; position: absolute; top: -0.18em; left: -0.06em; font-family: var(--serif); font-size: clamp(4rem, 8vw, 6rem); line-height: 1; color: var(--accent); opacity: 0.13; pointer-events: none; }
@media (max-width: 640px) { .sm-cita { padding-top: 30px; } .sm-cita::before { font-size: 3.4rem; } }

/* Divulgación */
.sm-divulgacion-link { margin-top: 4px; }

@media (min-width: 1024px) {
    .sm-layout { display: grid; grid-template-columns: 300px 1fr; gap: clamp(48px, 6vw, 80px); align-items: start; }
    .sm-aside { position: sticky; top: calc(var(--nav-h) + 28px); }
    .sm-photo img { width: 100%; }
}


/* ============================================================
   SOBRE EL AUTOR (sidebar de entradas, bajo "Más artículos")
============================================================ */
.av-autor { margin-top: 36px; padding-top: 26px; border-top: 1px solid var(--border); }
.av-autor-nombre { font-family: var(--sans); font-size: 14.5px; font-weight: 600; color: var(--text); margin: 0 0 2px; }
.av-autor-rol { font-family: var(--sans); font-size: 13.5px; color: var(--text-soft); margin: 0 0 14px; }
.av-autor-link { font-size: 13.5px; }
.av-autor-link .link-arrow-text { border-bottom-color: transparent; }
.av-autor-link:hover .link-arrow-text { border-bottom-color: var(--accent); }

/* ============================================================
   BANNER DE COOKIES (Complianz) — abajo-derecha y mas compacto.
   Solo en >=601px; en movil se deja como estaba (se ve bien).
============================================================ */
@media (min-width: 601px) {
    #cmplz-cookiebanner-container .cmplz-cookiebanner {
        left: auto !important;
        right: 24px !important;
        bottom: 24px !important;
        transform: scale(0.88);
        transform-origin: bottom right;
    }
}

/* ============================================================
   PANTALLAS GRANDES (monitores 24-27"+). Ensancha el contenedor
   y sube el tamano de letra para mantener la proporcion del
   portatil a mayor escala. No afecta a portatiles (<1500px).
============================================================ */
@media (min-width: 1500px) {
    :root { --w: 1480px; }
    .hero-h1 { font-size: 68px; }
    .hero-sub { font-size: 20px; max-width: 600px; }
    .hero-eyebrow { font-size: 12px; }
    .s-header { max-width: 600px; }
    .s-header h2:not(.section-label), .s-header-title { font-size: 46px; }
    .consulta-left h2 { font-size: 40px; }
    .consulta-left p { font-size: 16.5px; max-width: 420px; }
    .feature-body h3 { font-size: 16px; }
    .feature-body p { font-size: 15px; }
    .step h3 { font-size: 18px; }
    .step p { font-size: 16px; }
    .cuando-copy h2 { font-size: 40px; }
    .cuando-copy p { font-size: 16.5px; max-width: 520px; }
    .especialista-name { font-size: 42px; }
    .ubicacion-info h2 { font-size: 38px; }
    .faq-grid h2 { font-size: 42px; }
    .contacto-cta h2 { font-size: 46px; }
}
@media (min-width: 2000px) {
    :root { --w: 1640px; }
}

/* === Cabecera del indice del blog (H1 + intro) — anadido SEO === */
.av-blog-head{margin:0 0 34px;padding-bottom:22px;border-bottom:1px solid var(--border,#E3E7EF)}
.av-blog-h1{font-family:'DM Sans',system-ui,sans-serif;font-weight:600;font-size:clamp(28px,3.6vw,40px);line-height:1.15;letter-spacing:-.01em;color:var(--accent-dark,#1F2A44);margin:0 0 10px}
.av-blog-sub{font-family:'DM Sans',system-ui,sans-serif;font-size:16px;line-height:1.6;color:var(--text-soft,#5F6673);margin:0;max-width:640px}
@media(max-width:767px){.av-blog-head{margin-bottom:24px;padding-bottom:18px}}

/* === Retoque estetico cabecera del blog === */
.av-blog-eyebrow{display:block;margin:0 0 14px}
.av-blog-head{margin:0 0 42px;padding-bottom:28px}
.av-blog-h1{font-size:clamp(30px,4vw,44px);line-height:1.12;letter-spacing:-.02em;margin:0 0 14px}
.av-blog-sub{font-size:16.5px;line-height:1.65;max-width:600px;text-wrap:balance}
@media(max-width:767px){.av-blog-head{margin-bottom:28px;padding-bottom:20px}}

/* === Tarjetas de contacto a 3 columnas (pagina Contacto) === */
.contacto-card{text-align:center}
.contacto-cards--tres{grid-template-columns:1fr}
@media(min-width:920px){.contacto-cards--tres{grid-template-columns:repeat(3,1fr)}}
.contacto-cards--tres .contacto-card-value{word-break:normal}
.contacto-card-value--email{white-space:nowrap;font-size:clamp(13px,1.1vw,15px);letter-spacing:-.01em}
.contacto-card--destacada{background:var(--accent,#263F78);border-color:var(--accent,#263F78)}
.contacto-card--destacada .contacto-card-label{color:rgba(255,255,255,.72)}
.contacto-card--destacada .contacto-card-value{color:#fff}
.contacto-card--destacada .contacto-card-note{color:rgba(255,255,255,.72)}

/* Linea de colegiado en Sobre mi */
.sm-colegiado{font-size:14px;color:var(--text-soft,#5F6673);margin-top:-2px}



/* ============================================================
   COOKIES: modal centrado + fondo desenfocado, estilo referencia
   (eyebrow, título serif, separadores finos, categoría necesaria
   con "SIEMPRE ACTIVO" junto al título, interruptores alineados a
   la derecha y más grandes, descripciones con margen para el
   interruptor, Aceptar/Rechazar en una línea + Guardar debajo,
   hover de marca, enlaces).
============================================================ */
#cmplz-cookiebanner-container { background: rgba(18,25,40,.22) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; }

/* Centrar el modal */
@media (min-width:601px){ html #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-center{ left:50%!important; right:auto!important; top:50%!important; bottom:auto!important; transform:translate(-50%,-50%)!important; max-width:480px!important; } }
@media (max-width:600px){ html #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-center{ left:50%!important; right:auto!important; top:50%!important; bottom:auto!important; transform:translate(-50%,-50%)!important; width:calc(100% - 32px)!important; max-width:400px!important; } }

/* Eyebrow + título serif (más grande) a la izquierda */
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-center .cmplz-title::before{ content:"AVISO DE COOKIES"; display:block; font-family:'DM Sans',system-ui,sans-serif; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#8A8F9C; margin-bottom:10px; }
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-center .cmplz-header{ justify-items:start !important; text-align:left !important; }
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-center .cmplz-title{ grid-column:1 / -1 !important; justify-self:start !important; width:100% !important; text-align:left !important; font-family:'Lora',Georgia,serif !important; font-size:25px !important; line-height:1.18 !important; }

/* Enlaces dentro del mensaje */
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-center .cmplz-body a,
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-center .cmplz-message a{ color:#263F78 !important; text-decoration:underline !important; text-underline-offset:2px; }

/* Tamaños de letra legibles (intro = descripciones = 14.5px) */
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-center .cmplz-body{ font-size:14.5px !important; line-height:1.5 !important; }
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-center .cmplz-category-title{ font-size:16px !important; }
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-center .cmplz-category .cmplz-category-header{ padding-top:0 !important; padding-bottom:0 !important; min-height:0 !important; }

/* Descripciones */
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-center .cmplz-description{ display:block !important; max-height:none !important; overflow:visible !important; font-size:14.5px !important; line-height:1.5 !important; color:#5F6673; margin-top:5px !important; padding-right:16px !important; }
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-center .cmplz-categories{ width:100% !important; max-width:100% !important; }
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-center .cmplz-category-toggle{ display:none !important; }

/* Categorías sin fondo gris, separadas por línea fina */
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-center .cmplz-category{ background:transparent !important; border:0 !important; border-top:1px solid #E3E7EF !important; border-radius:0 !important; padding:15px 0 14px !important; margin:0 !important; }

/* Cabeceras en fila, interruptor a la derecha */
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-center .cmplz-category .cmplz-category-header{ display:flex !important; align-items:center !important; gap:8px !important; grid-template-columns:none !important; }
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-center .cmplz-category-header > .cmplz-banner-checkbox{ margin-left:auto !important; }

/* Categoría necesaria */
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-center .cmplz-always-active{ color:#8A8F9C !important; font-size:10px !important; font-weight:600 !important; text-transform:uppercase !important; letter-spacing:.08em !important; flex:1 1 auto !important; display:flex !important; align-items:center !important; gap:8px !important; white-space:nowrap !important; }
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-center .cmplz-always-active .cmplz-banner-checkbox{ order:2 !important; margin-left:auto !important; }
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-center .cmplz-always-active .cmplz-label{ display:block !important; cursor:default !important; }
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-center .cmplz-always-active,
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-center .cmplz-always-active .cmplz-banner-checkbox,
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-center .cmplz-always-active .cmplz-label,
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-center .cmplz-always-active input.cmplz-consent-checkbox{ pointer-events:none !important; cursor:default !important; }

/* Interruptor: gris (off) / azul (on) + más grande */
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-center .cmplz-banner-checkbox .cmplz-label{ transform:scale(1.35); transform-origin:right center; }
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-center .cmplz-banner-checkbox input.cmplz-consent-checkbox + .cmplz-label::before{ background-color:#CDD4E1 !important; }
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-center .cmplz-banner-checkbox input.cmplz-consent-checkbox:checked + .cmplz-label::before{ background-color:#263F78 !important; }

/* Botones: Aceptar y Rechazar en una línea, Guardar debajo; línea gris encima */
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-center .cmplz-buttons{ display:flex !important; flex-direction:row !important; flex-wrap:wrap !important; align-items:stretch !important; gap:10px !important; border-top:1px solid #E3E7EF !important; padding-top:16px !important; margin-top:2px !important; }
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-center .cmplz-buttons .cmplz-btn{ box-sizing:border-box !important; margin:0 !important; padding:13px 20px !important; font-size:14.5px !important; text-align:center !important; justify-content:center !important; }
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-center .cmplz-buttons .cmplz-btn.cmplz-deny{ width:auto !important; flex:1 1 calc(50% - 5px) !important; order:1 !important; }
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-center .cmplz-buttons .cmplz-btn.cmplz-accept{ width:auto !important; flex:1 1 calc(50% - 5px) !important; order:2 !important; }
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-center .cmplz-buttons .cmplz-btn.cmplz-save-preferences{ width:100% !important; flex:1 1 100% !important; order:3 !important; }
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-center .cmplz-buttons .cmplz-btn.cmplz-view-preferences{ order:4 !important; }

/* Hover de botones */
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-center .cmplz-btn{ transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease !important; }
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-center .cmplz-btn.cmplz-accept:hover{ background:#1F2A44 !important; border-color:#1F2A44 !important; transform:translateY(-1px); box-shadow:0 6px 16px -6px rgba(31,42,68,.5); }
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-center .cmplz-btn.cmplz-deny:hover{ background:#EEF3FF !important; border-color:#263F78 !important; color:#263F78 !important; }
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-center .cmplz-btn.cmplz-view-preferences:hover,
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-center .cmplz-btn.cmplz-save-preferences:hover{ color:#263F78 !important; }
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-center .cmplz-category:hover .cmplz-banner-checkbox:not(.cmplz-always-active) .cmplz-label{ opacity:.85; }


/* === Cookies: colores de botones de marca (producción) === */
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-center .cmplz-btn.cmplz-accept{ background:#263F78 !important; border:1px solid #263F78 !important; color:#fff !important; }
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-center .cmplz-btn.cmplz-deny{ background:transparent !important; border:1px solid #CDD4E1 !important; color:#1F2A44 !important; }
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-center .cmplz-btn.cmplz-save-preferences{ background:transparent !important; border:0 !important; color:#5F6673 !important; }


/* === Cookies: ajustes finales (29/06/2026) === */
/* Intro al mismo tamaño que las descripciones de categoría */
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-center .cmplz-message, #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-center .cmplz-message p{ font-size:14.5px !important; line-height:1.5 !important; }
/* La descripción de cada categoría no invade la columna del interruptor */
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-center .cmplz-description{ padding-right:56px !important; }
/* Botones tipo píldora, como "Pedir cita" */
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-center .cmplz-buttons .cmplz-btn{ border-radius:100px !important; }

/* ============================================================
   Feedback y afordancia de las tarjetas de servicio (.pat-item)
   flecha fija abajo-derecha + pulsacion :active
============================================================ */
.pat-item { position: relative; -webkit-tap-highlight-color: transparent; }
a.pat-item::after { content: "\2192"; position: absolute; right: 24px; bottom: 24px; color: var(--accent); font-size: 18px; line-height: 1; transition: transform 0.18s ease; }
a.pat-item:hover::after { transform: translateX(4px); }
.pat-item:active { transform: scale(0.98); border-color: var(--accent); box-shadow: 0 2px 10px rgba(17,24,39,0.06); }
a.pat-item:active::after { transform: translateX(4px); }