/* Self-hosted Google Fonts — auto-generated */

@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url('assets/fonts/fraunces-italic-latin-ext-6NUG8FyLNQOQZAnv9ZwNjucMAkn8xNi7emAe9nioTfd_uw.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url('assets/fonts/fraunces-italic-latin-6NUG8FyLNQOQZAnv9ZwNjucMAkn8xNi7emAe9nimTfc.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('assets/fonts/fraunces-normal-latin-ext-6NUI8FyLNQOQZAnv9bYEvCeYdG9Ea92uemAO_0ikVfM.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('assets/fonts/fraunces-normal-latin-6NUI8FyLNQOQZAnv9bYEvCeYdG9Ea92uemAO8Uik.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('assets/fonts/inter-normal-latin-ext-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('assets/fonts/inter-normal-latin-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/inter-normal-latin-ext-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/inter-normal-latin-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/inter-normal-latin-ext-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/inter-normal-latin-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/inter-normal-latin-ext-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/inter-normal-latin-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* =============================================================
   Clínica Diago Muñoz — Editorial Light Cream (cream + sage + ink)
   ============================================================= */

/* 1. Tokens
   ----------------------------------------------------------- */
:root {
  /* Palette — cream warm + sage medical + ink */
  --bg:        #f5f0e6;   /* warm cream */
  --bg-2:      #ebe2d2;   /* sand */
  --bg-3:      #e1d6c1;   /* deeper sand for hairlines */
  --paper:     #fbf8f1;
  --ink:       #1a1a1a;   /* near-black */
  --ink-soft:  #2a2a2a;
  --ink-mute:  #6b6660;
  --ink-fade:  rgba(26,26,26,0.45);

  --accent:     #304636;  /* deep sage — quiet medical green */
  --accent-2:   #5a7160;  /* lighter sage */
  --accent-warm:#c08a5a;  /* warm terracotta hint, used very sparingly */

  --line:      rgba(26,26,26,0.12);
  --line-soft: rgba(26,26,26,0.06);

  --sans:    "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif:   "Fraunces", "Times New Roman", Georgia, serif;

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-soft:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  --container-pad: clamp(1.25rem, 4vw, 3rem);
  --section-pad-y: clamp(5rem, 11vw, 9rem);

  --radius-sm: 6px;
  --radius:    14px;
  --radius-lg: 24px;
}

@property --halo {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 50%;
}

/* 2. Reset & base
   ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; tab-size: 2; overflow-x: clip; scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  /* isolation: isolate creates a new stacking context here, so any z-index
     used inside (e.g., .subhero::before at z-index: -1) is confined to the
     body — it cannot fall behind the body's cream background. */
  isolation: isolate;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; line-height: 1.05; letter-spacing: -0.02em; font-weight: 400; }
em { font-style: italic; }
::selection { background: var(--accent); color: var(--bg); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: fixed; top: -100px; left: 1rem;
  padding: .6rem 1rem; background: var(--ink); color: var(--bg);
  z-index: 9999; border-radius: 8px; font-weight: 500;
}
.skip-link:focus { top: 1rem; }

/* 3. Utilities
   ----------------------------------------------------------- */
.container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.kicker {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}
.kicker-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}

.num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ink-mute);
  letter-spacing: 0.02em;
  margin-bottom: 1.75rem;
  display: inline-block;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--line);
  min-width: 14ch;
}
.num-center { display: block; margin: 0 auto 2rem; text-align: center; }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.5rem;
}

/* 4. Typography
   ----------------------------------------------------------- */
.huge {
  font-family: var(--serif);
  font-weight: 350;
  font-size: clamp(2.4rem, 6vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  max-width: 18ch;
  margin-bottom: 1.5rem;
  font-variation-settings: "opsz" 144, "SOFT" 50;
}
.huge em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  color: var(--accent);
}
.huge-center { margin-inline: auto; text-align: center; max-width: 16ch; }
/* Wider variant: spans the parent container width instead of the default
   18ch column. Used by the gyne service pages' SEO H2 so the title can
   breathe across the full body width below the hero. */
.huge.huge-wide { max-width: none; }

.lead {
  font-family: var(--serif);
  font-weight: 350;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 48ch;
  margin-bottom: 2rem;
  font-variation-settings: "opsz" 36;
}
.lead-center { margin-inline: auto; text-align: center; }

/* Reveal — base hidden, .is-visible reveals */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Per Adrian Saenz skill: H1 + H2 are present from the first paint, not
   faded in. Only the remaining .reveal[data-split] elements (a single H3 in
   the CTA block) keep the wrapper visible — the split animates child spans. */
.reveal[data-split] {
  opacity: 1;
  transform: none;
}

/* Split word animation */
.split-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.6em);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.split-word.is-in { opacity: 1; transform: none; }

/* 5. Buttons
   ----------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.55rem;
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  border-radius: 999px;
  transition: transform .35s var(--ease-out), background .35s var(--ease-out), color .35s var(--ease-out), box-shadow .35s var(--ease-out);
  will-change: transform;
}
.btn svg { transition: transform .35s var(--ease-out); }
.btn:hover svg { transform: translateX(3px); }

.btn-primary {
  background: var(--ink);
  color: var(--bg);
  box-shadow: 0 1px 0 var(--ink);
}
.btn-primary:hover {
  background: var(--accent);
  color: var(--bg);
  box-shadow: 0 10px 30px -10px rgba(48,70,54,0.5);
  transform: translateY(-2px);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1.25px solid var(--ink);
}
.btn-ghost:hover {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
  transform: translateY(-2px);
}

/* 6. Splash
   ----------------------------------------------------------- */
.splash {
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  /* Safety: hide automatically at 4.5s even if JS fails */
  animation: splashSafety .01s 4.5s forwards;
}
.splash.is-out {
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transition: opacity .8s var(--ease-out), clip-path 1s var(--ease-in);
}
@keyframes splashSafety {
  to { opacity: 0; pointer-events: none; clip-path: inset(0 0 100% 0); }
}
.splash-inner {
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  animation: splashFade 1.6s var(--ease-out) both;
}
.splash-logo {
  display: block;
  height: clamp(100px, 20vw, 180px);
  width: auto;
}
.splash-label {
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
@keyframes splashFade {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: none; }
}

/* 7. Nav
   ----------------------------------------------------------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 1.25rem var(--container-pad);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2rem;
  transition: background .4s var(--ease-out), backdrop-filter .4s var(--ease-out), padding .4s var(--ease-out);
}
.nav.is-scrolled {
  background: rgba(245,240,230,0.86);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-bottom: 1px solid var(--line);
  padding-block: 0.85rem;
}

.nav-brand {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.nav-logo {
  display: block;
  height: clamp(38px, 4vw, 52px);
  width: auto;
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
.nav-logo:hover { opacity: 0.78; }
.nav.is-scrolled .nav-logo {
  height: clamp(34px, 3.4vw, 44px);
}

.nav-links {
  display: flex;
  justify-content: center;
  gap: clamp(1rem, 3vw, 2.4rem);
}
.nav-links a {
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--ink-soft);
  position: relative;
  padding-block: 0.4rem;
  transition: color .3s var(--ease-out);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--accent);
  transition: right .4s var(--ease-out);
}
.nav-links a:hover { color: var(--accent); }
.nav-links a:hover::after { right: 0; }

.nav-cta {
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 500;
  padding: 0.7rem 1.3rem;
  background: var(--ink);
  color: var(--bg);
  border-radius: 999px;
  transition: background .3s var(--ease-out), transform .3s var(--ease-out);
}
.nav-cta:hover { background: var(--accent); transform: translateY(-1px); }

/* Dropdown menu inside the top nav */
.nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav-dropdown-trigger {
  display: inline-flex !important;
  align-items: center;
  gap: 0.32rem;
}
.nav-dropdown-chevron {
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  opacity: 0.5;
  transition: transform .35s var(--ease-out), opacity .35s var(--ease-out);
}
.nav-dropdown:hover .nav-dropdown-chevron,
.nav-dropdown:focus-within .nav-dropdown-chevron {
  transform: rotate(180deg);
  opacity: 1;
}

.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -8px);
  margin-top: 0.5rem;
  min-width: 360px;
  background: rgba(251, 248, 241, 0.97);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out), visibility .35s var(--ease-out);
  box-shadow: 0 30px 60px -30px rgba(26,26,26,0.22), 0 0 0 1px var(--line-soft);
  z-index: 200;
  pointer-events: none;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
/* Invisible bridge between trigger and menu so the dropdown stays open on hover */
.nav-dropdown::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 0.6rem;
}

.nav-dropdown-menu a {
  padding: 0.65rem 0.85rem !important;
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--ink-soft);
  border-radius: var(--radius-sm);
  transition: background .25s var(--ease-out), color .25s var(--ease-out), padding-left .25s var(--ease-out);
  line-height: 1.3;
  border-bottom: 0;
}
.nav-dropdown-menu a::after { display: none !important; }
.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus {
  background: var(--bg-2);
  color: var(--accent);
  padding-left: 1.1rem !important;
}
.nav-dropdown-menu-section {
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: 0.75rem 0.85rem 0.35rem;
  margin-top: 0.3rem;
  border-top: 1px solid var(--line-soft);
}
.nav-dropdown-menu-section:first-child {
  margin-top: 0;
  border-top: 0;
  padding-top: 0.35rem;
}

/* Indented sub-items inside a dropdown (e.g. children of Regenerativa) */
.nav-dropdown-menu a.nav-dropdown-sub {
  padding-left: 1.7rem !important;
  position: relative;
  color: var(--ink-mute);
}
.nav-dropdown-menu a.nav-dropdown-sub::before {
  content: "";
  position: absolute;
  left: 0.9rem;
  top: 50%;
  width: 8px;
  height: 1px;
  background: var(--accent);
  opacity: 0.6;
}
.nav-dropdown-menu a.nav-dropdown-sub:hover,
.nav-dropdown-menu a.nav-dropdown-sub:focus {
  padding-left: 2rem !important;
  color: var(--accent);
}

/* Mobile (sidebar): collapsible accordion — main sections show on burger open,
   each one expands its subsections only when tapped (handled in main.js). */
@media (max-width: 959px) {
  .nav-dropdown { width: 100%; flex-direction: column; align-items: stretch; }
  .nav-dropdown::after { display: none; }

  /* Trigger row: full-width tap target with chevron right-aligned */
  .nav-dropdown-trigger {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0.55rem 0 !important;
    gap: 0.6rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-dropdown-trigger::after { display: none !important; }

  /* Chevron visible on mobile to signal expandability */
  .nav-dropdown-chevron {
    display: block;
    width: 13px;
    height: 13px;
    opacity: 0.55;
    transition: transform .35s var(--ease-out), opacity .3s var(--ease-out);
  }
  .nav-dropdown.is-open .nav-dropdown-chevron {
    transform: rotate(180deg);
    opacity: 1;
  }

  /* Submenu collapsed by default */
  .nav-dropdown-menu {
    position: static;
    transform: none !important;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none;
    min-width: 0;
    gap: 0;
    border-left: 1px solid var(--line);
    margin: 0 0 0 0.85rem;
    padding: 0 0 0 0.9rem;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: max-height .4s var(--ease-out), opacity .3s var(--ease-out), visibility .4s var(--ease-out), margin-top .35s var(--ease-out), margin-bottom .35s var(--ease-out), padding-top .35s var(--ease-out), padding-bottom .35s var(--ease-out);
  }

  /* Expanded state */
  .nav-dropdown.is-open .nav-dropdown-menu {
    max-height: 720px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    margin-top: 0.5rem;
    margin-bottom: 0.6rem;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
  }

  .nav-dropdown-menu a {
    font-family: var(--sans) !important;
    font-size: 0.92rem !important;
    padding: 0.5rem 0 !important;
    color: var(--ink-mute);
    line-height: 1.3;
  }
  .nav-dropdown-menu a:hover,
  .nav-dropdown-menu a:focus {
    padding-left: 0 !important;
    color: var(--accent);
  }
  .nav-dropdown-menu-section {
    padding: 0.6rem 0 0.25rem;
    border-top: 0;
    margin-top: 0.4rem;
  }
  /* JS-injected overview link — points to the section landing page so users
     can still reach it from the mobile accordion (where the trigger only
     expands the submenu). */
  .nav-dropdown-menu .nav-dropdown-overview {
    color: var(--accent) !important;
    font-family: var(--serif) !important;
    font-size: 0.95rem !important;
    font-style: italic;
    padding: 0.4rem 0 0.55rem !important;
    border-bottom: 1px solid var(--line-soft);
    margin-bottom: 0.25rem;
  }
}
/* Desktop: keep the overview hidden — the trigger anchor already navigates there */
@media (min-width: 960px) {
  .nav-dropdown-menu .nav-dropdown-overview { display: none; }
}

.nav-burger { display: none; width: 36px; height: 36px; position: relative; }
.nav-burger span {
  position: absolute; left: 8px; right: 8px;
  height: 1.5px;
  background: var(--ink);
  transition: transform .35s var(--ease-out), opacity .35s var(--ease-out), top .35s var(--ease-out);
}
.nav-burger span:nth-child(1) { top: 14px; }
.nav-burger span:nth-child(2) { top: 22px; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { top: 17px; transform: rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { top: 17px; transform: rotate(-45deg); }

/* 8. Hero
   ----------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(7rem, 14vw, 11rem) var(--container-pad) clamp(3rem, 6vw, 5rem);
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  z-index: 0;
}
.hero-bg img {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  object-position: center center;
  transform: scale(1.02);
  /* 100vh (not dvh) on purpose: iOS Safari's URL bar shows/hides on scroll,
     which changes dvh and forces object-fit: cover to re-fit the image — the
     visible result is the photo zooming/shifting mid-scroll. Pinning to vh
     keeps the box constant; the bottom may extend behind the URL bar, but
     object-fit: cover compensates so the visible crop never moves. */
}
.hero-tint {
  position: absolute; inset: 0;
  /* Cream halo behind the title — denser at the center for legibility, fades
     to fully transparent so the photo keeps its colour everywhere else. */
  background:
    radial-gradient(ellipse 56% 56% at 26% 42%,
      rgba(245,240,230,0.62) 0%,
      rgba(245,240,230,0.30) 55%,
      rgba(245,240,230,0.06) 85%,
      rgba(245,240,230,0)    100%),
    linear-gradient(180deg,
      rgba(245,240,230,0.16) 0%,
      rgba(245,240,230,0)    22%,
      rgba(245,240,230,0)    78%,
      rgba(245,240,230,0.20) 100%);
}
@media (max-width: 959px) {
  /* On smaller viewports the title spans the full width — wider, denser halo. */
  .hero-tint {
    background:
      radial-gradient(ellipse 95% 55% at 50% 35%,
        rgba(245,240,230,0.60) 0%,
        rgba(245,240,230,0.30) 60%,
        rgba(245,240,230,0.06) 100%),
      linear-gradient(180deg,
        rgba(245,240,230,0.20) 0%,
        rgba(245,240,230,0.04) 35%,
        rgba(245,240,230,0.04) 70%,
        rgba(245,240,230,0.24) 100%);
  }
}
.hero-grain {
  position: absolute; inset: 0;
  opacity: 0.06;
  mix-blend-mode: multiply;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='2'/><feColorMatrix values='0 0 0 0 0   0 0 0 0 0   0 0 0 0 0   0 0 0 0.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
}

.hero-title {
  font-family: var(--serif);
  font-weight: 350;
  font-size: clamp(3rem, 9vw, 8rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
  max-width: 14ch;
  margin-bottom: 2rem;
  font-variation-settings: "opsz" 144, "SOFT" 60;
}

/* Brand title — must stay on a single line, kept within the cream halo so it
   doesn't overlap the DM logo painted on the back wall of the photo. */
.hero-title.hero-title-oneline {
  font-size: clamp(2rem, 5.6vw, 5rem);
  max-width: none;
  white-space: nowrap;
  letter-spacing: -0.025em;
  color: #0a0a0a;
  text-shadow: 0 1px 0 rgba(245,240,230,0.5), 0 0 14px rgba(245,240,230,0.35);
}
@media (max-width: 539px) {
  /* On phones the brand may need to break into two lines to remain legible */
  .hero-title.hero-title-oneline {
    font-size: clamp(2rem, 9vw, 3.4rem);
    white-space: normal;
    text-wrap: balance;
  }
}
.hero-title em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  color: var(--accent);
}

.hero-sub {
  font-family: var(--serif);
  font-weight: 350;
  font-style: italic;
  font-size: clamp(1.1rem, 1.6vw, 1.45rem);
  line-height: 1.4;
  max-width: 38ch;
  color: var(--ink);
  margin-bottom: 2.4rem;
  font-variation-settings: "opsz" 36, "SOFT" 100;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-bottom: 4rem;
}

.hero-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  max-width: 720px;
}
.hero-meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.hero-meta-label {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.hero-meta-value {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--ink);
}

.hero-scroll {
  position: absolute;
  right: var(--container-pad);
  bottom: 2rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.hero-scroll-line {
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, transparent, var(--ink-mute));
  animation: scrollLine 2.2s var(--ease-out) infinite;
}
@keyframes scrollLine {
  0%, 100% { transform: scaleY(0.5); transform-origin: top; opacity: 0.4; }
  50% { transform: scaleY(1); opacity: 1; }
}

/* 9. Sections base
   ----------------------------------------------------------- */
.section {
  padding-block: var(--section-pad-y);
  position: relative;
  z-index: 1;
  /* Default cream background so any plain `<section class="section">` (legal,
     sitemap, etc.) reliably covers the fixed subhero photo. More specific
     section classes (gradients, paper-tinted blocks, etc.) override this. */
  background: var(--bg);
}
.section + .section { border-top: 1px solid var(--line-soft); }

/* Crumb bar (between subhero and first section on inner pages) also needs to
   sit above the fixed hero photo so it doesn't visually merge with it. */
.page-crumb-bar {
  position: relative;
  z-index: 1;
  background: var(--bg);
}

.section-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head-center { text-align: center; }
.section-head-center .num { margin-inline: auto; display: block; }
.section-head-center .huge,
.section-head-center .lead {
  margin-inline: auto;
  text-align: center;
}
.section-head-center .huge { max-width: 22ch; }
.section-head-center .lead { max-width: 54ch; }

/* 10. Manifesto
   ----------------------------------------------------------- */
.section-manifesto { background: var(--bg); }

.manifesto-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4rem);
}
@media (min-width: 960px) {
  .manifesto-grid { grid-template-columns: 280px 1fr; }
}

.manifesto-meta { position: sticky; top: 100px; align-self: start; }
.manifesto-figure {
  margin-top: 1.5rem;
  aspect-ratio: 3/4;
  overflow: hidden;
  border-radius: var(--radius);
}
.manifesto-figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: saturate(0.92);
  transition: transform 1.2s var(--ease-out);
}
.manifesto-figure:hover img { transform: scale(1.03); }

/* Variant: show the brand logo (transparent PNG) instead of a photo. The logo
   fills the whole rounded paper box edge-to-edge — no inner padding. */
.manifesto-figure-logo {
  aspect-ratio: 1/1;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
}
.manifesto-figure-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  object-position: center !important;
  padding: 0;
  filter: none !important;
}
.manifesto-figure-logo:hover img { transform: none; }

.figure-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.4rem 1.2rem 1rem;
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.25;
  color: var(--bg);
  background: linear-gradient(to top, rgba(26,26,26,0.78), transparent);
  font-variation-settings: "opsz" 36, "SOFT" 60;
}
.figure-caption span {
  display: inline-block;
  margin-top: 0.2rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-style: normal;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bg-2);
  opacity: 0.85;
}
.manifesto-figure { position: relative; }

.manifesto-body { max-width: 720px; }
.manifesto-text { margin-bottom: 3rem; }
.manifesto-text p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: 1.1rem;
  max-width: 56ch;
}

.pillars {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
@media (min-width: 720px) {
  .pillars { grid-template-columns: repeat(3, 1fr); gap: 2.2rem; }
}
.pillars li {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.pillar-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--accent);
  font-variation-settings: "opsz" 36, "SOFT" 100;
}
.pillars h3 {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 400;
}
.pillars p {
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 1.55;
}

/* 11. Specialty sections (Neurology / Gynecology)
   ----------------------------------------------------------- */
.section-specialty { background: var(--bg); }
.section-neurology  { background: linear-gradient(180deg, var(--bg) 0%, var(--paper) 100%); }
.section-gyne       { background: linear-gradient(180deg, var(--paper) 0%, var(--bg) 100%); }

.specialty-head { max-width: 720px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }

.specialty-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (min-width: 960px) {
  .specialty-grid { grid-template-columns: 360px 1fr; }
  .specialty-grid-reverse { grid-template-columns: 1fr 360px; }
  .specialty-grid-reverse .specialty-figure { order: 2; }
}

.specialty-figure {
  position: sticky;
  top: 100px;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 3/4;
}
.specialty-figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
.specialty-figure:hover img { transform: scale(1.04); }
.specialty-figure figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.2rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--bg);
  background: linear-gradient(to top, rgba(26,26,26,0.7), transparent);
}

.services {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 720px) {
  .services { grid-template-columns: repeat(2, 1fr); }
}
.services li {
  padding: 1.5rem 1.5rem 1.5rem 0;
  border-top: 1px solid var(--line);
  position: relative;
  transition: background .35s var(--ease-out), padding .35s var(--ease-out);
}
@media (min-width: 720px) {
  .services li:nth-child(odd)  { padding-right: 2rem; border-right: 1px solid var(--line); }
  .services li:nth-child(even) { padding-left: 2rem; }
}
.services li:hover { background: var(--paper); padding-left: 1.5rem; }
@media (min-width: 720px) {
  .services li:nth-child(odd):hover { padding-left: 0.4rem; }
  .services li:nth-child(even):hover { padding-left: 2.4rem; }
}

/* Services items as clickable links (used on home Neuro + Gyne grids) */
.services li a.srv-link {
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative;
}
.services li a.srv-link::after {
  content: "→";
  position: absolute;
  right: 0;
  top: 0.4rem;
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--accent);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
.services li:hover a.srv-link::after {
  opacity: 1;
  transform: translateX(0);
}
.services li:focus-within {
  background: var(--paper);
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.srv-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--accent);
  display: block;
  margin-bottom: 0.4rem;
  font-variation-settings: "opsz" 36, "SOFT" 100;
}
.services h3 {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 400;
  margin-bottom: 0.35rem;
  letter-spacing: -0.015em;
}
.services p {
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.5;
}

/* Parent / sub-children visual hierarchy (used for "Ginecología regenerativa"
   and its three protocols on the home services list). */
.services li.srv-parent .srv-parent-mark {
  display: inline-block;
  margin-left: 0.4rem;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--accent);
  vertical-align: middle;
}
.services li.srv-child {
  background: rgba(48, 70, 54, 0.035);
}
.services li.srv-child .srv-link-sub {
  padding-left: 1.5rem;
  border-left: 2px solid rgba(48, 70, 54, 0.28);
}
@media (min-width: 720px) {
  .services li.srv-child:nth-child(odd) .srv-link-sub  { margin-left: 0; }
  .services li.srv-child:nth-child(even) .srv-link-sub { margin-left: 0; }
}
.services li.srv-child .srv-num {
  color: var(--accent);
  opacity: 0.85;
}
.services li.srv-child .srv-sub-tag {
  display: block;
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.85;
  margin: 0 0 0.45rem;
}
.services li.srv-child h3 {
  font-size: 1.08rem;
}

/* 12. Team
   ----------------------------------------------------------- */
.section-team {
  background:
    radial-gradient(ellipse at 50% 0%, var(--paper) 0%, var(--bg) 60%);
}

.team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 720px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}

.doctor-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.4rem);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .5s var(--ease-out);
  /* Anchor reset when the whole card is an <a> */
  text-decoration: none;
  color: inherit;
}
.doctor-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -30px rgba(26,26,26,0.18);
  border-color: var(--accent);
}
.doctor-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* "Ver perfil completo →" footer inside the linkable card */
.doctor-cta {
  margin-top: auto;
  padding-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--accent);
  border-top: 1px solid var(--line-soft);
  align-self: stretch;
  transition: color .35s var(--ease-out);
}
.doctor-cta-arrow {
  font-family: var(--serif);
  font-size: 1.1rem;
  line-height: 1;
  transition: transform .35s var(--ease-out);
}
.doctor-card:hover .doctor-cta { color: var(--ink); }
.doctor-card:hover .doctor-cta-arrow { transform: translateX(4px); color: var(--accent); }

.doctor-photo {
  aspect-ratio: 4/5;
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, var(--bg-2), var(--bg-3));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.doctor-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(255,255,255,0.55), transparent 55%),
    radial-gradient(ellipse at 70% 80%, rgba(48,70,54,0.12), transparent 60%);
}
/* When a real photo is provided, it covers the placeholder gradient */
.doctor-photo img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: 2;
  transition: transform 1s var(--ease-out);
}
.doctor-card:hover .doctor-photo img { transform: scale(1.03); }

.doctor-initials {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(5rem, 14vw, 9rem);
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--ink);
  position: relative;
  z-index: 1;
  font-variation-settings: "opsz" 144, "SOFT" 50;
}
.doctor-initials em {
  font-style: italic;
  color: var(--accent);
  font-variation-settings: "opsz" 144, "SOFT" 100;
}

.doctor-body { display: flex; flex-direction: column; gap: 0.9rem; }
.doctor-spec {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.doctor-name {
  font-family: var(--serif);
  font-weight: 350;
  font-size: clamp(1.65rem, 3vw, 2.3rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144, "SOFT" 60;
}
.doctor-name em {
  font-style: italic;
  color: var(--accent);
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: 0.7em;
  display: inline-block;
  margin-right: 0.2em;
}
.doctor-bio {
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 1.55;
}
.doctor-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
}
.doctor-tags li {
  font-family: var(--sans);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
}

.team-note {
  margin-top: 2.5rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--ink-mute);
}
.team-note code {
  font-family: "JetBrains Mono", "SF Mono", Menlo, monospace;
  font-size: 0.8rem;
  padding: 0.1em 0.4em;
  background: var(--bg-2);
  border-radius: 4px;
}

/* 13. Visit
   ----------------------------------------------------------- */
.section-visit { background: var(--bg); }

.visit-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 720px) {
  .visit-grid { grid-template-columns: repeat(3, 1fr); }
}

.visit-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 2.5vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.visit-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 40px -25px rgba(26,26,26,0.15);
}
.visit-label {
  font-family: var(--sans);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.visit-value {
  font-family: var(--serif);
  font-size: 1.4rem;
  line-height: 1.25;
  color: var(--ink);
  font-variation-settings: "opsz" 36, "SOFT" 60;
}
.visit-value em {
  font-style: italic;
  color: var(--accent);
  font-variation-settings: "opsz" 36, "SOFT" 100;
}
.visit-fine {
  font-size: 0.85rem;
  color: var(--ink-mute);
  margin-top: 0.4rem;
}
.visit-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--accent);
  margin-top: 0.5rem;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid var(--accent);
  align-self: flex-start;
  transition: gap .35s var(--ease-out), color .35s var(--ease-out);
}
.visit-link:hover { gap: 0.7rem; color: var(--ink); border-color: var(--ink); }

.contact-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.contact-list li {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.contact-key {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.contact-value {
  font-family: var(--serif);
  font-size: 1.08rem;
  color: var(--ink);
  position: relative;
  display: inline-block;
  padding-block: 0.1rem;
  transition: color .3s var(--ease-out);
}
.contact-value:hover { color: var(--accent); }

.visit-figure {
  margin-top: 2rem;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 21/9;
  position: relative;
}
.visit-figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.7) brightness(1.02);
  transition: transform 1.4s var(--ease-out);
}
.visit-figure:hover img { transform: scale(1.03); }
.visit-figure figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.4rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--bg);
  background: linear-gradient(to top, rgba(26,26,26,0.7), transparent);
}

/* 14. CTA section
   ----------------------------------------------------------- */
.section-cta {
  background:
    radial-gradient(ellipse at center, var(--paper) 0%, var(--bg) 70%);
  text-align: center;
}

.cta-actions {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 720px) {
  .cta-actions { grid-template-columns: repeat(3, 1fr); }
}

.cta-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 4vw, 3rem) 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  text-align: center;
  transition: transform .5s var(--ease-out), background .5s var(--ease-out), color .5s var(--ease-out), border-color .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.cta-card:hover {
  transform: translateY(-6px);
  border-color: var(--accent);
  box-shadow: 0 30px 60px -30px rgba(48,70,54,0.35);
}
.cta-card-accent {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.cta-card-accent:hover {
  background: var(--accent);
  border-color: var(--accent);
}

.cta-label {
  font-family: var(--sans);
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.75;
}
.cta-value {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  font-weight: 400;
  line-height: 1.2;
  word-break: break-word;
}
/* Email values are longer than phone numbers; shrink the type so the address
   fits on a single line inside the cta-card and the ".com" doesn't wrap. */
.cta-card[href^="mailto:"] .cta-value {
  font-size: clamp(0.95rem, 1.35vw, 1.15rem);
  letter-spacing: -0.005em;
  word-break: normal;
  overflow-wrap: normal;
  white-space: nowrap;
}
.cta-fine {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.88rem;
  color: inherit;
  opacity: 0.65;
  margin-top: 0.4rem;
}

/* 15. Footer
   ----------------------------------------------------------- */
.footer {
  position: relative;
  z-index: 1;
  background: var(--accent);
  color: var(--bg-2);
  padding: clamp(3rem, 6vw, 5rem) 0 1.5rem;
}
.footer a { color: var(--bg-2); transition: color .3s var(--ease-out); }
.footer a:hover { color: var(--bg); }

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(245,240,230,0.18);
}
@media (min-width: 720px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 3rem; }
}

.footer-brand {
  font-family: var(--serif);
  font-size: 1.4rem;
  margin-bottom: 0.8rem;
}
.footer-brand em { color: var(--bg); font-style: italic; }
.footer-logo {
  display: block;
  height: clamp(72px, 9vw, 110px);
  width: auto;
  margin-bottom: 1.2rem;
}
.footer-small {
  font-size: 0.88rem;
  line-height: 1.5;
  opacity: 0.7;
}
.footer-label {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 0.7rem;
}
.footer p { font-size: 0.9rem; line-height: 1.55; }

.footer-bottom {
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  font-family: var(--sans);
  font-size: 0.78rem;
  opacity: 0.5;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* 16. Responsive nav (mobile)
   ----------------------------------------------------------- */
@media (max-width: 959px) {
  .nav-links {
    position: fixed;
    top: 0; right: 0;
    width: min(100%, 340px);
    height: 100vh;
    height: 100dvh;
    background: var(--paper);
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0.2rem;
    padding: 5rem 1.8rem 2rem;
    transform: translateX(100%);
    transition: transform .5s var(--ease-out);
    box-shadow: -20px 0 40px -20px rgba(26,26,26,0.2);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .nav-links > a,
  .nav-links .nav-dropdown-trigger {
    font-size: 1.15rem;
    font-family: var(--serif);
    font-weight: 400;
    color: var(--ink);
    border-bottom: 1px solid var(--line-soft);
  }
  .nav-links > a {
    padding: 0.85rem 0;
  }
  .nav-links > a::after { display: none; }
  .nav.is-menu-open .nav-links { transform: none; }
  .nav-burger { display: block; z-index: 1100; }

  /* CTA inside the open mobile sidebar — inline, right after the last
     dropdown (Equipo). Injected from main.js so the original header CTA
     stays hidden on mobile and the menu owns the call to action. */
  .nav-cta { display: none; }
  .nav-mobile-cta {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin-top: 1.25rem;
    padding: 0.95rem 1.4rem;
    background: var(--ink);
    color: var(--bg) !important;
    border-radius: 999px;
    font-family: var(--sans);
    font-size: 0.95rem;
    font-weight: 500;
    text-align: center;
    border-bottom: 0 !important;
    transition: background .3s var(--ease-out), transform .3s var(--ease-out);
  }
  .nav-mobile-cta:hover,
  .nav-mobile-cta:focus-visible {
    background: var(--accent);
    transform: translateY(-1px);
  }
}
/* Hide the injected mobile CTA on desktop — the header keeps its own */
@media (min-width: 960px) {
  .nav-mobile-cta { display: none !important; }
}

@media (max-width: 539px) {
  .hero-scroll { display: none; }
  .doctor-name {
    font-size: clamp(1.1rem, 5vw, 1.5rem);
    text-wrap: balance;
  }
  .footer-bottom { font-size: 0.72rem; }
}

/* 17. Inner pages — additional components
   ----------------------------------------------------------- */

/* Active nav state */
.nav-links a.is-active {
  color: var(--accent);
}
.nav-links a.is-active::after {
  right: 0;
  background: var(--accent);
}

/* Sub-hero (smaller hero for inner pages) — clinic photo as background.
   Same halo strategy as the home hero so the title sits on a readable patch
   while the chairs and DM logo of the photo remain visible elsewhere. */
.subhero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: clamp(7rem, 14vw, 11rem) var(--container-pad) clamp(3rem, 6vw, 5rem);
  overflow: hidden;
  /* No background: the clinic photo lives on .subhero::before (z-index: -1)
     and only shows here. Subsequent .section blocks have z-index: 1 and an
     opaque cream background so they paint over the fixed photo as you scroll. */
  background: transparent;
  border-bottom: 1px solid var(--line);
}

/* Clinic photo: pinned to the viewport. Sits at z-index: -1 so it can only
   be visible in the .subhero (which is transparent); every other section
   has z-index: 1 and an opaque cream background, so the photo never bleeds
   into the body content even on long pages. */
.subhero::before {
  content: "";
  position: fixed;
  top: 0; left: 0;
  /* Constant 100vh box (not dvh) so iOS Safari's dynamic URL bar can't resize
     the pseudo on scroll — that resize was triggering background-size: cover
     to recalculate and producing the visible zoom/shift while scrolling. */
  width: 100vw;
  height: 100vh;
  background: url("assets/img/recepcion-1600.jpg") center center / cover no-repeat;
  z-index: -1;
  pointer-events: none;
  transform: scale(1.02);
}
@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
  .subhero::before {
    background: image-set(
      url("assets/img/recepcion-1600.webp") type("image/webp"),
      url("assets/img/recepcion-1600.jpg") type("image/jpeg")
    ) center center / cover no-repeat;
  }
}
@media (max-width: 720px) {
  .subhero::before {
    background-position: 40% center;
    transform: scale(1.12);
  }
}

/* Grain texture sits between the bg photo and the title for a subtle film
   feel. Absolute so it scrolls away with the subhero, leaving subsequent
   sections clean. */
.subhero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0   0 0 0 0 0   0 0 0 0 0   0 0 0 0.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.04;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.subhero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
}
.subhero-crumb {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* Breadcrumb bar — sits between the subhero photo and the first content
   section, so the hero stays clean (title + buttons only). */
.page-crumb-bar {
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg);
  padding: 0.8rem 0;
}
.page-crumb-bar .subhero-crumb {
  margin: 0;
}
@media (max-width: 539px) {
  .page-crumb-bar {
    padding: 0.7rem 0;
  }
  .page-crumb-bar .subhero-crumb {
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    gap: 0.4rem;
  }
}
.subhero-crumb a {
  color: var(--ink-mute);
  border-bottom: 1px solid transparent;
  transition: color .3s var(--ease-out), border-color .3s var(--ease-out);
}
.subhero-crumb a:hover { color: var(--accent); border-color: var(--accent); }
.subhero-crumb-sep { opacity: 0.5; }
.subhero-eyebrow {
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.25rem;
}
.subhero-title {
  font-family: var(--serif);
  font-weight: 350;
  font-size: clamp(2.4rem, 5.8vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.025em;
  max-width: 17ch;
  margin-bottom: 1.5rem;
  font-variation-settings: "opsz" 144, "SOFT" 60;
  color: #0a0a0a;
  text-shadow: 0 1px 0 rgba(245,240,230,0.5), 0 0 14px rgba(245,240,230,0.35);
}
.subhero-title em {
  font-style: italic;
  color: var(--accent);
  font-variation-settings: "opsz" 144, "SOFT" 100;
}

/* Variant for short H1s that should stay on a single line on mobile (e.g.
   "Reserva tu cita."). Tighter font-size on narrow screens. */
.subhero-title-tight {
  white-space: nowrap;
  max-width: none;
}
@media (max-width: 539px) {
  .subhero-title-tight {
    font-size: clamp(2rem, 8vw, 3rem);
    letter-spacing: -0.02em;
  }
}
.subhero-lead {
  font-family: var(--serif);
  font-weight: 350;
  font-style: italic;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  line-height: 1.45;
  color: var(--ink);
  max-width: 44ch;
  margin-bottom: 2rem;
  font-variation-settings: "opsz" 36, "SOFT" 100;
}
.subhero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  max-width: 720px;
}
.subhero-meta div {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.subhero-meta span:first-child {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.subhero-meta span:last-child {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--ink);
}

/* Process steps */
.section-process { background: var(--bg); }

/* Editorial banner between the section-head and the process-grid. Used by
   the neurology "Cómo es la primera visita" section to ground the topic
   visually before the 3-step list. */
.process-banner {
  margin: clamp(2rem, 4vw, 3.5rem) auto clamp(2.5rem, 5vw, 4rem);
  max-width: 920px;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  box-shadow: 0 30px 80px -45px rgba(26, 26, 26, 0.3);
}
.process-banner img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  object-position: center;
}
.process-banner figcaption {
  margin: 1rem auto 0;
  max-width: 56ch;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(0.92rem, 1.4vw, 1.05rem);
  color: var(--ink-soft);
  font-variation-settings: "opsz" 36, "SOFT" 50;
}
/* The caption needs to flow below the rounded image, not be cropped by the
   figure's overflow:hidden. We move it OUT of the rounded crop. */
.process-banner {
  overflow: visible;
}
.process-banner > img {
  border-radius: var(--radius);
  overflow: hidden;
}
@media (max-width: 720px) {
  .process-banner img { aspect-ratio: 16 / 10; }
}

.process-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  counter-reset: step;
}
@media (min-width: 720px) {
  .process-grid { grid-template-columns: repeat(3, 1fr); }
}

.process-step {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  position: relative;
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.process-step:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 40px -25px rgba(26,26,26,0.15);
}
.process-step-num {
  counter-increment: step;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--accent);
  display: block;
  margin-bottom: 0.8rem;
  font-variation-settings: "opsz" 36, "SOFT" 100;
}
.process-step-num::before {
  content: "Paso " counter(step) " — ";
}
.process-step h3 {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2vw, 1.55rem);
  font-weight: 400;
  margin-bottom: 0.75rem;
  letter-spacing: -0.015em;
}
.process-step p {
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 1.55;
}

/* Symptoms / signs list */
.section-symptoms {
  background:
    linear-gradient(180deg, var(--bg) 0%, var(--paper) 100%);
}
.symptoms-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (min-width: 960px) {
  .symptoms-wrap { grid-template-columns: 1fr 1.2fr; }
}
.symptoms-intro h2 { max-width: 18ch; }

.symptoms-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  /* Drop the first row of dashes so it doesn't visually sit above the
     eyebrow "02 — Cuándo consultar" on the left column. The offset matches
     the eyebrow's height + its margin-bottom so the first dash aligns
     roughly with the start of the huge H2. */
  margin-top: clamp(2.2rem, 4.5vw, 3.5rem);
}
@media (max-width: 720px) {
  .symptoms-list { margin-top: 0; }
}
.symptoms-list li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--line);
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.35;
  color: var(--ink);
  transition: padding .35s var(--ease-out), color .35s var(--ease-out);
  font-variation-settings: "opsz" 36, "SOFT" 60;
}
.symptoms-list li:last-child { border-bottom: 1px solid var(--line); }
.symptoms-list li:hover { padding-left: 0.5rem; color: var(--accent); }
.symptoms-list li::before {
  content: "—";
  color: var(--accent);
  font-style: italic;
  flex-shrink: 0;
  font-variation-settings: "opsz" 36, "SOFT" 100;
}

/* Service detail cards (long form for service pages) */
.section-services-detail { background: var(--bg); }
.services-detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
}
@media (min-width: 720px) {
  .services-detail { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1280px) {
  .services-detail { grid-template-columns: repeat(3, 1fr); }
}

.svc-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 2.4vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  position: relative;
  transition: transform .45s var(--ease-out), border-color .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.svc-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent-2);
  box-shadow: 0 28px 50px -30px rgba(48,70,54,0.25);
}
.svc-card-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.88rem;
  color: var(--accent);
  font-variation-settings: "opsz" 36, "SOFT" 100;
}
.svc-card h3 {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.svc-card p {
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.55;
}

.svc-card-doppler {
  background:
    linear-gradient(180deg, var(--paper) 0%, var(--bg-2) 100%);
  border-color: var(--bg-3);
}

/* Service card as link (with hover arrow) */
.svc-card-link {
  text-decoration: none;
  color: inherit;
  position: relative;
  padding-bottom: 3.2rem;
  cursor: pointer;
}
.svc-card-arrow {
  position: absolute;
  right: 1.4rem;
  bottom: 1.2rem;
  font-family: var(--serif);
  font-size: 1.4rem;
  color: var(--accent);
  transition: transform .4s var(--ease-out);
  line-height: 1;
}
.svc-card-link:hover .svc-card-arrow { transform: translateX(5px); }
.svc-card-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* FAQ accordion */
.section-faq { background: var(--bg); }
.faq-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (min-width: 960px) {
  .faq-wrap { grid-template-columns: 1fr 1.6fr; }
}
.faq-list {
  display: flex;
  flex-direction: column;
}
.faq-item {
  border-top: 1px solid var(--line);
  padding-block: 0;
  transition: background .4s var(--ease-out);
}
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item[open] { background: var(--paper); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 1.4rem 0.5rem 1.4rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
  transition: color .3s var(--ease-out), padding .3s var(--ease-out);
  font-variation-settings: "opsz" 36, "SOFT" 60;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "";
  flex-shrink: 0;
  width: 18px; height: 18px;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
  transition: transform .4s var(--ease-out), background-size .4s var(--ease-out);
  color: var(--accent);
}
.faq-item[open] summary::after {
  transform: rotate(180deg);
  background-size: 100% 1.5px, 0 100%;
}
.faq-item summary:hover { color: var(--accent); padding-left: 0.5rem; }
.faq-item[open] summary { color: var(--accent); padding-left: 0.5rem; }
.faq-answer {
  padding: 0 0.5rem 1.4rem;
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 64ch;
}
.faq-answer p + p { margin-top: 0.7rem; }

/* SEO-aware heading variants used on city landing pages:
   - prose-h2-small : a real <h2> that targets a city keyword but is rendered as a
     small kicker so it doesn't compete visually with the H1.
   - prose-display  : a large visually prominent line that is NOT an <h> tag,
     so its keywords don't outrank the H1/H2 in search engine eyes. */
.prose-h2-small {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1rem;
  line-height: 1.35;
}
.prose-display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 1.5rem;
  font-variation-settings: "opsz" 144, "SOFT" 60;
  max-width: 22ch;
}
.prose-display em {
  font-style: italic;
  color: var(--accent);
  font-variation-settings: "opsz" 144, "SOFT" 100;
}

/* Check-list (used on location pages — itemised value props) */
.check-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem;
  margin: 1rem 0 1.5rem;
  padding: 0;
}
.check-list li {
  position: relative;
  padding-left: 1.7rem;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 14px;
  height: 8px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
  border-radius: 1px;
}

/* Areas served — mix of clickable city links and static city tags */
.areas-label {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 1.5rem 0 0.8rem;
}
.areas-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0;
  padding: 0;
}
.areas-list li {
  font-family: var(--sans);
  font-size: 0.88rem;
  border-radius: 999px;
  transition: background .35s var(--ease-out), color .35s var(--ease-out), border-color .35s var(--ease-out), transform .35s var(--ease-out);
}
/* Clickable city — has its own dedicated landing page */
.areas-list li:not(.areas-list-static) {
  background: var(--paper);
  border: 1px solid var(--accent);
}
.areas-list li:not(.areas-list-static) a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1.05rem;
  color: var(--accent);
  font-weight: 500;
}
.areas-list li:not(.areas-list-static) a span {
  transition: transform .35s var(--ease-out);
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1;
}
.areas-list li:not(.areas-list-static):hover {
  background: var(--accent);
  transform: translateY(-2px);
}
.areas-list li:not(.areas-list-static):hover a { color: var(--bg); }
.areas-list li:not(.areas-list-static):hover a span { transform: translateX(3px); }

/* Static city tag — area we attend but no dedicated landing yet */
.areas-list-static {
  padding: 0.5rem 1.05rem;
  border: 1px solid var(--line);
  color: var(--ink-soft);
}

/* Hide AI-generator watermarks at the bottom-right of generated artwork.
   Most images we use in prose figures, service-aside figures, home-page
   specialty figures and gyne banners are AI-generated and ship with a small
   "Gemini" mark on the bottom-right. We scale the image up from the top-left
   so that the bottom and right ~8% are pushed out of the figure's overflow box. */
.prose-figure img,
.prose-aside .manifesto-figure img,
.specialty-figure img,
.content-banner img {
  transform-origin: top left;
  transform: scale(1.08);
}
.prose-figure:hover img,
.specialty-figure:hover img,
.content-banner:hover img {
  transform: scale(1.10);
}

/* Gallery — the clinic's spaces (home page section "La consulta") */
.section-gallery { background: var(--bg); }
.gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 720px) {
  .gallery-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
  }
  .gallery-item-wide {
    grid-column: 1 / -1;
    aspect-ratio: 21/9;
  }
}
.gallery-item {
  position: relative;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--bg-2);
  box-shadow: 0 20px 50px -30px rgba(26,26,26,0.18);
}
.gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s var(--ease-out);
}
.gallery-item:hover img { transform: scale(1.04); }
.gallery-item figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1rem 1.2rem 0.9rem;
  font-family: var(--serif);
  font-size: 0.95rem;
  font-style: italic;
  color: var(--bg);
  background: linear-gradient(to top, rgba(26,26,26,0.72), transparent);
  font-variation-settings: "opsz" 36, "SOFT" 60;
}

/* Inline figures inside .prose-body (auxiliary images that decorate a long
   article without taking over the layout). Optionally with a 2-col collage. */
.prose-figure {
  margin: clamp(1.75rem, 3.5vw, 2.5rem) 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-2);
  box-shadow: 0 20px 50px -30px rgba(26,26,26,0.16);
}
.prose-figure img {
  width: 100%;
  display: block;
  height: auto;
  transition: transform 1.2s var(--ease-out);
}
.prose-figure:hover img { transform: scale(1.02); }
.prose-figure figcaption {
  padding: 0.7rem 1rem 0.85rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--ink-mute);
  line-height: 1.45;
  background: var(--paper);
  border-top: 1px solid var(--line-soft);
}

.prose-collage {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.8rem;
  margin: clamp(1.75rem, 3.5vw, 2.5rem) 0;
}
@media (min-width: 540px) {
  .prose-collage { grid-template-columns: 1fr 1fr; }
}
.prose-collage .prose-figure {
  margin: 0;
}
.prose-collage .prose-figure img {
  aspect-ratio: 4/5;
  object-fit: cover;
}

/* Banner figure used at the top of a long-form prose section (e.g. gyne service
   pages that don't have a prose-aside). */
.content-banner {
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  max-width: 820px;
  aspect-ratio: 16/9;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 20px 50px -30px rgba(26,26,26,0.18);
}
.content-banner img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s var(--ease-out);
}
.content-banner:hover img { transform: scale(1.03); }

/* Long-form prose section */
.prose-section { background: var(--bg); }
.prose-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (min-width: 960px) {
  .prose-wrap { grid-template-columns: 280px 1fr; }
  /* Doctor profile pages: wider left column so the portrait matches the
     size of the Equipo cards on the home page. */
  .prose-wrap:has(.prose-aside-portrait) {
    grid-template-columns: clamp(360px, 36vw, 460px) 1fr;
  }
}
.prose-aside { align-self: start; }
.prose-body { max-width: 720px; }

/* Doctor profile portrait aside: sticky on desktop so the portrait stays
   visible alongside the long-form bio. */
@media (min-width: 960px) {
  .prose-aside-portrait {
    position: sticky;
    top: 100px;
  }
}

/* Doctor portraits on profile pages match the cards on the home Equipo
   section: 4/5 aspect, cover crop at center-top, rounded corners. Higher
   specificity overrides the default .manifesto-figure rules and the
   watermark-hiding scale. */
.prose-aside.prose-aside-portrait .manifesto-figure {
  aspect-ratio: 4/5;
  max-height: none;
  overflow: hidden;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--bg-2), var(--bg-3));
}
.prose-aside.prose-aside-portrait .manifesto-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transform: none;
  filter: none;
}
.prose-aside.prose-aside-portrait .manifesto-figure:hover img { transform: scale(1.03); }

/* Mobile-only doctor portrait: a fresh image instance shown centred in the
   viewport, never cropped, with rounded corners. On desktop it stays hidden
   and the regular sticky aside portrait takes over. */
.doctor-mobile-portrait { display: none; }
@media (max-width: 720px) {
  .doctor-mobile-portrait {
    display: block;
    margin: 0 auto clamp(1.5rem, 4vw, 2.5rem);
    max-width: 100%;
    text-align: center;
  }
  .doctor-mobile-portrait img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    max-height: 80svh;
    width: auto;
    height: auto;
    border-radius: var(--radius);
    object-fit: contain;
  }
  /* Hide the regular aside portrait on mobile ONLY when the section provides
     a dedicated mobile portrait (doctor profile pages: diana, guillermo). The
     :has() scope means other pages with .prose-aside-portrait (gyne service
     pages, neuro service pages) keep their portrait visible on mobile. */
  .prose-section:has(.doctor-mobile-portrait) .prose-aside-portrait { display: none; }
}
.prose-body h3 {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  font-weight: 400;
  margin: 2.5rem 0 1rem;
  letter-spacing: -0.015em;
}
.prose-body h3:first-child { margin-top: 0; }

/* Sub-heading inside .prose-body. Visually pulled apart from H3 with a
   sage accent and a touch more weight, so the eye reads the hierarchy at a
   glance (H3 = neutral section title; H4 = labeled block within it). */
.prose-body h4 {
  font-family: var(--serif);
  font-size: clamp(1.08rem, 1.7vw, 1.3rem);
  font-weight: 500;
  color: var(--accent);
  margin: 2rem 0 0.75rem;
  letter-spacing: -0.01em;
  font-variation-settings: "opsz" 36, "SOFT" 60;
}

/* Local-SEO headings on service pages.
   - .seo-prose-h2 is the page's main section heading ("Diagnóstico y tratamiento
     de X en Burriana"), visible and prominent.
   - .seo-subsection-head pairs a friendly display title with a real H2 below it
     ("Migraña" + "Especialista en migraña en Castellón"), so the SEO line is in
     the page but reads as a small label without taking over the layout. */
/* Top-of-article section heading: visually equal to .huge so the reader sees
   a clear "this is the main section" beat above the first body block. */
.seo-prose-h2 {
  font-family: var(--serif);
  font-weight: 350;
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 1.8rem;
  max-width: 22ch;
  font-variation-settings: "opsz" 144, "SOFT" 50;
}
.seo-prose-h2 em {
  font-style: italic;
  color: var(--accent);
  font-variation-settings: "opsz" 144, "SOFT" 100;
}

/* Subsection: visible display title sits clearly above the body but below
   the main section heading. */
.seo-subsection-head {
  margin: clamp(2.4rem, 4.5vw, 3.5rem) 0 1rem;
}
.seo-subsection-display,
.prose-body p.seo-subsection-display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: 0;
  max-width: 24ch;
  font-variation-settings: "opsz" 144, "SOFT" 60;
}
.seo-subsection-h2 {
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0.35rem 0 0;
  line-height: 1.5;
}
@media (max-width: 539px) {
  .seo-subsection-h2 {
    font-size: 0.68rem;
    letter-spacing: 0.12em;
  }
}
.prose-body p {
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: 1rem;
  max-width: 60ch;
}
.prose-body p em { color: var(--accent); }

/* In-prose CTA: a single .btn wrapped in a <p class="prose-cta-row"> so it
   sits flush with the surrounding paragraph rhythm but stretches to fit a
   long keyword-rich anchor text (e.g. local-SEO landing pages). */
.prose-body p.prose-cta-row {
  max-width: none;
  margin: 1.5rem 0 2rem;
}

/* Full-width banner image between sections (e.g. neurology landings show a
   reflex-hammer photo between the "primera consulta" steps and the
   "atención cercana" block). Tighter vertical padding than a normal
   .section so the image reads as a punctuation mark, not a stand-alone
   block. */
.section-image-banner {
  padding-block: clamp(1.5rem, 4vw, 3rem);
}
.section-image-banner .image-banner-figure {
  margin: 0 auto;
  max-width: 1280px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-2);
  box-shadow: 0 20px 50px -30px rgba(26,26,26,0.16);
}
.section-image-banner .image-banner-figure img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 1.4s var(--ease-out);
}
.section-image-banner .image-banner-figure:hover img { transform: scale(1.02); }

/* Visual subtitle sitting directly below an H2 in .prose-body. Looks like a
   deck line — NOT a heading element, so the outline stays H2 → real H3 below
   without an extra H3 stealing weight. */
.prose-body p.h3-subtitle {
  font-family: var(--serif);
  font-weight: 350;
  font-size: clamp(1.2rem, 1.8vw, 1.45rem);
  line-height: 1.35;
  color: var(--ink-soft);
  margin: 0 0 0.4rem;
  max-width: none;
  font-variation-settings: "opsz" 36, "SOFT" 60;
}

/* Small real H3: same semantic weight as other H3s but visually compact —
   used right under an H2 + deck pair to introduce a bullet list or short
   block without competing with the H2. */
.prose-body h3.h3-small {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0.6rem 0 1rem;
}
.prose-pull {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  line-height: 1.3;
  color: var(--ink);
  margin: 2rem 0;
  padding-left: 1.5rem;
  border-left: 2px solid var(--accent);
  max-width: 38ch;
  font-variation-settings: "opsz" 36, "SOFT" 100;
}

/* CTA mini band */
.section-cta-mini {
  background:
    radial-gradient(ellipse at center, var(--paper) 0%, var(--bg) 70%);
  text-align: center;
}
.cta-mini-actions {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: center;
}

/* Pedir-cita-first CTA — primary booking button, then talk options below */
.cta-primary-row {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: flex;
  justify-content: center;
}
.btn-large {
  font-size: 1rem;
  padding: 1.05rem 2rem;
}
.cta-talk {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line-soft);
}
.cta-talk-title {
  font-family: var(--serif);
  font-weight: 350;
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--ink);
  margin-bottom: clamp(1.4rem, 3vw, 2rem);
  font-variation-settings: "opsz" 144, "SOFT" 60;
}
.cta-talk-title em {
  font-style: italic;
  color: var(--accent);
  font-variation-settings: "opsz" 144, "SOFT" 100;
}
.cta-talk .cta-actions {
  margin-top: 0;
}

/* Google Reviews — EmbedSocial widget framing */
.section-reviews {
  background: linear-gradient(180deg, var(--bg) 0%, var(--paper) 60%, var(--bg) 100%);
}
.reviews-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 960px) {
  .reviews-grid.is-dual { grid-template-columns: repeat(2, 1fr); }
}
.reviews-block {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 2.5vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.reviews-eyebrow {
  font-family: var(--sans);
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.4rem;
}
.reviews-title {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.15;
  margin-bottom: 0.3rem;
  font-variation-settings: "opsz" 36, "SOFT" 60;
}
.reviews-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ink-mute);
  margin-bottom: 0.5rem;
}
.reviews-frame {
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 0.4rem;
  min-height: 300px;
  overflow: hidden;
  position: relative;
}
.reviews-frame .embedsocial-hashtag {
  display: block;
  width: 100%;
  min-height: 280px;
}

/* Google Maps iframe — editorial framing */
.map-embed {
  margin: 0;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-2);
  aspect-ratio: 16 / 9;
  box-shadow: 0 20px 50px -30px rgba(26,26,26,0.18);
}
@media (max-width: 720px) {
  .map-embed { aspect-ratio: 4 / 3; }
}
.map-embed iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  filter: saturate(0.92);
}
.map-actions {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  justify-content: flex-start;
}
.map-actions .btn { padding: 0.65rem 1.1rem; font-size: 0.85rem; }

.map-figcaption {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ink-mute);
  margin-top: 0.9rem;
  text-align: left;
}

/* Doctoralia booking frame */
.section-booking { background: var(--bg); }

.booking-frame {
  margin-top: clamp(2rem, 4vw, 3rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1rem, 2.5vw, 2rem);
  min-height: 420px;
  position: relative;
}

/* The widget injects its own iframe / DOM — let it breathe full width inside the frame */
.booking-frame > a[data-zl-widget-facility] {
  display: block;
  width: 100%;
}
.booking-frame iframe {
  width: 100% !important;
  border: 0 !important;
  display: block;
}

.booking-fallback {
  text-align: center;
  padding: 2rem;
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--ink-soft);
}
.booking-fallback a {
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
}

.booking-fine {
  margin-top: 1.5rem;
  font-size: 0.88rem;
  color: var(--ink-mute);
  text-align: center;
  max-width: 56ch;
  margin-inline: auto;
}
.booking-fine a {
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  transition: color .3s var(--ease-out);
}
.booking-fine a:hover { color: var(--ink); border-color: var(--ink); }

.booking-note {
  margin-top: 2.5rem;
  font-size: 0.92rem;
  color: var(--ink-mute);
  text-align: center;
  max-width: 64ch;
  margin-inline: auto;
  line-height: 1.6;
}
.booking-note strong { color: var(--ink); font-weight: 500; }

/* Active state on nav CTA when on reserva page */
.nav-cta.is-active {
  background: var(--accent);
  color: var(--bg);
}

/* Related services grid (bottom of each service page) */
.section-related {
  background: linear-gradient(180deg, var(--paper) 0%, var(--bg) 100%);
}
.related-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.7rem;
}
@media (min-width: 540px) { .related-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .related-grid { grid-template-columns: repeat(3, 1fr); } }

.related-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.2rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
  transition: transform .4s var(--ease-out), border-color .4s var(--ease-out), background .4s var(--ease-out);
}
.related-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  background: var(--paper);
}
.related-eyebrow {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.related-card h3 {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
  max-width: 22ch;
}
.related-arrow {
  position: absolute;
  right: 1.2rem;
  bottom: 1rem;
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--accent);
  transition: transform .35s var(--ease-out);
}
.related-card:hover .related-arrow { transform: translateX(4px); }

/* =============================================================
   Cookie consent — modal + persistent pill
   ============================================================= */

.cc-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 1rem;
}
.cc-modal.is-open { display: flex; }

.cc-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(26,26,26,0.42);
  backdrop-filter: blur(4px) saturate(120%);
  -webkit-backdrop-filter: blur(4px) saturate(120%);
  animation: ccFade 0.4s var(--ease-out);
}
@keyframes ccFade { from { opacity: 0; } to { opacity: 1; } }

.cc-panel {
  position: relative;
  width: 100%;
  max-width: 560px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.4rem);
  box-shadow: 0 40px 80px -30px rgba(26,26,26,0.32);
  animation: ccRise 0.5s var(--ease-out);
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
}
@keyframes ccRise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}
@media (min-width: 720px) {
  .cc-modal { align-items: center; padding: 2rem; }
}

.cc-panel-head { margin-bottom: 1.4rem; }
.cc-eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.7rem;
}
.cc-panel h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 0.8rem;
  color: var(--ink);
  font-variation-settings: "opsz" 144, "SOFT" 60;
}
.cc-lede {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.cc-lede a {
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  transition: color .3s var(--ease-out);
}
.cc-lede a:hover { color: var(--ink); border-color: var(--ink); }

.cc-categories {
  margin: 0 0 1.4rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
.cc-cat {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.cc-cat-text { flex: 1; }
.cc-cat-label {
  display: block;
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 0.25rem;
  font-variation-settings: "opsz" 36, "SOFT" 60;
}
.cc-cat-locked {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-left: 0.5rem;
  vertical-align: middle;
}
.cc-cat-desc {
  display: block;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ink-mute);
}

.cc-switch {
  position: relative;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  margin-top: 4px;
}
.cc-switch input {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  cursor: pointer;
  margin: 0;
  z-index: 2;
}
.cc-switch.is-locked input { cursor: not-allowed; }
.cc-switch-track {
  position: absolute;
  inset: 0;
  background: var(--bg-3);
  border-radius: 999px;
  transition: background .3s var(--ease-out);
}
.cc-switch-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: var(--paper);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  transition: transform .3s var(--ease-out);
}
.cc-switch input:checked + .cc-switch-track {
  background: var(--accent);
}
.cc-switch input:checked + .cc-switch-track::after {
  transform: translateX(20px);
}
.cc-switch.is-locked input + .cc-switch-track {
  background: var(--accent-2);
  opacity: 0.65;
}

.cc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: flex-end;
}
.cc-btn {
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 500;
  padding: 0.75rem 1.3rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background .3s var(--ease-out), color .3s var(--ease-out), border-color .3s var(--ease-out), transform .3s var(--ease-out);
}
.cc-btn:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.cc-btn-ghost { color: var(--ink-soft); }
.cc-btn-primary {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.cc-btn-primary:hover { background: var(--accent); border-color: var(--accent); transform: translateY(-1px); }

/* Persistent round button bottom-left (cookie icon only) */
.cc-pill {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 8500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  font-family: var(--sans);
  font-size: 0;
  line-height: 0;
  color: var(--accent);
  background: rgba(251, 248, 241, 0.92);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 10px 30px -15px rgba(26,26,26,0.2);
  transition: transform .3s var(--ease-out), background .3s var(--ease-out), color .3s var(--ease-out), border-color .3s var(--ease-out);
}
.cc-pill:hover,
.cc-pill:focus-visible {
  transform: translateY(-2px);
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.cc-pill svg { display: block; width: 22px; height: 22px; }
@supports (padding: env(safe-area-inset-bottom)) {
  .cc-pill {
    bottom: calc(1rem + env(safe-area-inset-bottom));
    left: calc(1rem + env(safe-area-inset-left));
  }
}

body.cc-modal-open { overflow: hidden; }

/* =============================================================
   Legal pages — long-form prose typography
   ============================================================= */
.legal-prose h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.45rem, 2.5vw, 1.9rem);
  margin: 3rem 0 1rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variation-settings: "opsz" 144, "SOFT" 50;
}
.legal-prose h2:first-child { margin-top: 0; }
.legal-prose h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  margin: 2.2rem 0 0.8rem;
  letter-spacing: -0.015em;
  color: var(--accent);
}
.legal-prose h4 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  margin: 1.8rem 0 0.7rem;
  color: var(--ink);
  text-transform: none;
}
.legal-prose p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: 1rem;
  max-width: 70ch;
}
.legal-prose p em { color: var(--accent); }
.legal-prose ul {
  margin: 0 0 1.5rem 1.3rem;
  padding: 0;
}
.legal-prose ul li {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: 0.6rem;
  max-width: 68ch;
}
.legal-prose strong { color: var(--ink); font-weight: 500; }
.legal-prose a {
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  transition: color .3s var(--ease-out);
}
.legal-prose a:hover { color: var(--ink); border-color: var(--ink); }

/* Button overrides: when a CTA button is embedded inside legal-prose (e.g.
   the final "Reserva tu primera consulta" in EMSELLA), the .legal-prose a
   rule above would force sage-green text + underline. Buttons keep their
   own light text + no underline. */
.legal-prose .btn { border-bottom: none; }
.legal-prose .btn-primary,
.legal-prose .btn-primary:hover { color: var(--bg); border-color: transparent; }
.legal-prose .btn-ghost { color: var(--ink); border-color: var(--line); }
.legal-prose .btn-ghost:hover { color: var(--bg); border-color: var(--accent); }
.legal-prose .updated-date {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.5rem 1rem;
  background: var(--bg-2);
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--ink-soft);
  border-radius: var(--radius-sm);
}

/* View transitions for cross-page navigation */
@view-transition { navigation: auto; }
@keyframes fadeOutUp { to { opacity: 0; transform: translateY(-10px); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } }
::view-transition-old(root) { animation: fadeOutUp 0.45s var(--ease-in); }
::view-transition-new(root) { animation: fadeInUp 0.55s var(--ease-out); }

/* 18. Reduced motion — gate only INTRUSIVE animations
   ----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-scroll-line { animation: none; }
  .splash-inner { animation: none; }
  .hero-bg img { transform: none; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

/* =============================================================
   19. Mobile editorial overrides (max-width: 720px)
   Clean hero/subhero — only title + main buttons over a full-height
   photo. Secondary text (kicker, lede, breadcrumb, meta) is hidden
   in this viewport. Sticky figures collapsed to a thin top band so
   the prose remains legible.
   ============================================================= */
@media (max-width: 720px) {

  /* ----- HERO (homepage): full-height photo, only title + actions ----- */
  .hero {
    min-height: 100vh;
    min-height: 100svh;
    padding-top: clamp(5rem, 16vw, 7rem);
    padding-bottom: clamp(2.5rem, 6vw, 4rem);
    align-items: center;
  }
  .hero-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
  }
  .hero .kicker,
  .hero .hero-meta,
  .hero-scroll {
    display: none !important;
  }
  .hero-title { margin-bottom: 1rem; }
  .hero-sub {
    font-size: 0.98rem;
    line-height: 1.45;
    margin-bottom: 1.5rem;
    max-width: 32ch;
  }
  .hero-actions { margin-bottom: 0; gap: 0.7rem; }

  /* On phones, shift the framing slightly left so the boucle chair and
     wooden slats are visible alongside the reception. Scale a touch larger
     than desktop for stronger presence in the smaller viewport. */
  .hero-bg img {
    object-position: 40% center;
    transform: scale(1.12);
  }

  /* ----- SUBHERO (inner pages): match the home hero — full-height photo,
     clean title + actions, all secondary text hidden in mobile viewport.
     Transparent so the .subhero::before fixed photo (z-index: -1) shows
     through; subsequent .section blocks have opaque cream backgrounds. */
  .subhero {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding-top: clamp(5rem, 16vw, 7rem);
    padding-bottom: clamp(2.5rem, 6vw, 4rem);
    background: transparent;
  }
  .subhero-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
  }
  .subhero-crumb,
  .subhero-eyebrow,
  .subhero-meta {
    display: none !important;
  }
  .subhero-title { margin-bottom: 1rem; }
  .subhero-lead {
    font-size: 0.98rem;
    line-height: 1.45;
    margin-bottom: 1.5rem;
    max-width: 36ch;
  }

  /* Hero actions on subpages share the .hero-actions class — keep them tight */
  .subhero .hero-actions { margin-bottom: 0; gap: 0.7rem; }

  /* Service-page aside: NOT sticky on mobile — image flows above the prose body.
     Kept compact so it doesn't dominate the viewport. */
  .prose-aside .num { display: none; }
  .prose-aside .manifesto-figure {
    margin-top: 0;
    aspect-ratio: 16/10;
    max-height: 260px;
    border-radius: var(--radius);
  }
  /* Mobile: unified right-only bleed pattern for both gyne and neuro service
     pages. The figure starts at the container's left edge with rounded left
     corners, and extends out only to the viewport's right edge (square right
     corners). Creates the asymmetric magazine-style "photo bleeds out one
     side" composition. */
  .prose-aside.prose-aside-portrait .manifesto-figure {
    width: calc(100% + var(--container-pad));
    margin-left: 0;
    margin-right: calc(-1 * var(--container-pad));
    margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
    border-radius: var(--radius) 0 0 var(--radius);
    aspect-ratio: 4 / 5;
    min-height: 0;
    max-height: 90svh;
  }
  .prose-aside.prose-aside-portrait .manifesto-figure img {
    width: 100%;
    height: 100%;
    max-height: 90svh;
    object-fit: cover;
    object-position: center;
    position: static;
    inset: auto;
  }

  /* Homepage specialty figures: flow naturally above the services list (no
     sticky band on mobile). Landscape framing keeps them compact. */
  .specialty-figure {
    position: static;
    aspect-ratio: 16 / 10;
    height: auto;
    min-height: 0;
    max-height: none;
    margin-bottom: 1.25rem;
    background: var(--bg);
  }

  /* Manifesto block on the homepage — also non-sticky on mobile. Constraints
     are scoped to the logo variant so the doctor/service portrait figures
     (which use .prose-aside.prose-aside-portrait .manifesto-figure for the
     right-edge bleed) keep their full-bleed mobile layout intact. */
  .manifesto-meta {
    position: static;
    top: auto;
  }
  .manifesto-meta .num { display: none; }
  .manifesto-figure-logo {
    margin: 0 auto 1rem;
    aspect-ratio: 1 / 1;
    height: auto;
    min-height: 0;
    max-height: none;
    max-width: 70%;
    border-radius: var(--radius-lg);
  }

  /* ----- General mobile polish ----- */
  .section { padding-block: clamp(3rem, 9vw, 5rem); }
  .map-actions .btn { width: 100%; justify-content: center; }
  .cta-actions { gap: 0.7rem; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 0.4rem; }

  /* Burger button keeps a comfortable tap target; lines align to the right
     edge of the button for a tighter, more deliberate icon. */
  .nav-burger { width: 44px; height: 44px; }
  .nav-burger span {
    left: auto;
    right: 6px;
    width: 22px;
  }
  .nav-burger span:nth-child(1) { top: 17px; }
  .nav-burger span:nth-child(2) { top: 25px; }
  .nav-burger[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
  .nav-burger[aria-expanded="true"] span:nth-child(2) { top: 21px; transform: rotate(-45deg); }
}

/* ============== GINECOLOGÍA REGENERATIVA — feature block ==============
   On the gyne hub page (ginecologia-obstetricia.html), the regenerative
   subspecialty deserves visual prominence over the standard service grid.
   Sage-tinted background, larger cards with a top accent rule, and a wider
   container so the block reads as a flagship offering. */
.section-regenerativa-feature {
  background:
    radial-gradient(ellipse at top center, rgba(48, 70, 54, 0.06), transparent 70%),
    var(--paper);
  border-top: 1px solid rgba(48, 70, 54, 0.18);
  border-bottom: 1px solid rgba(48, 70, 54, 0.18);
}
.section-regenerativa-feature .section-head-feature {
  text-align: center;
  margin-inline: auto;
}
.section-regenerativa-feature .section-head-feature .num {
  display: inline-block;
}
.section-regenerativa-feature .section-head-feature .huge {
  margin-inline: auto;
  text-align: center;
  max-width: 24ch;
}
.section-regenerativa-feature .section-head-feature .lead {
  margin-inline: auto;
  max-width: 64ch;
  text-align: center;
}

.services-detail-regenerativa {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2vw, 1.4rem);
  max-width: 1180px;
  margin: 0 auto;
}
@media (min-width: 720px) {
  .services-detail-regenerativa { grid-template-columns: repeat(3, 1fr); }
}

.svc-card.svc-card-feature {
  position: relative;
  background: var(--bg);
  border: 1px solid rgba(48, 70, 54, 0.22);
  padding: clamp(2rem, 3.5vw, 2.6rem);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
  border-radius: var(--radius);
  box-shadow: 0 28px 60px -45px rgba(48, 70, 54, 0.35);
  transition:
    transform .45s var(--ease-out),
    box-shadow .45s var(--ease-out),
    border-color .45s var(--ease-out);
}
.svc-card.svc-card-feature::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent);
  border-radius: var(--radius) var(--radius) 0 0;
  transform-origin: left center;
  transform: scaleX(0.18);
  transition: transform .55s var(--ease-out);
}
.svc-card.svc-card-feature:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 36px 70px -40px rgba(48, 70, 54, 0.5);
}
.svc-card.svc-card-feature:hover::before { transform: scaleX(1); }
.svc-card.svc-card-feature .svc-card-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--accent);
  letter-spacing: 0.04em;
  margin-bottom: 0.85rem;
}
.svc-card.svc-card-feature h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.1vw, 1.6rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 0.85rem;
  color: var(--ink);
  font-variation-settings: "opsz" 144, "SOFT" 50;
}
.svc-card.svc-card-feature p {
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 1.5rem;
  flex: 1;
}
.svc-card.svc-card-feature .svc-card-arrow {
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--accent);
  align-self: flex-start;
  transition: transform .35s var(--ease-out);
}
.svc-card.svc-card-feature:hover .svc-card-arrow { transform: translateX(6px); }

.regenerativa-cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid rgba(48, 70, 54, 0.15);
}
.regenerativa-cta .btn {
  max-width: 100%;
}
.regenerativa-cta .btn span {
  display: inline-block;
  max-width: 100%;
}
@media (max-width: 640px) {
  .regenerativa-cta {
    margin-top: clamp(2.5rem, 6vw, 3.5rem);
    padding-top: clamp(1.75rem, 4vw, 2.25rem);
  }
  .regenerativa-cta .btn {
    width: 100%;
    padding: 0.95rem 1.25rem;
    font-size: 0.92rem;
    line-height: 1.3;
    white-space: normal;
    text-align: center;
  }
  .regenerativa-cta .btn span {
    white-space: normal;
  }
}
.regenerativa-note {
  text-align: center;
  margin: clamp(1.5rem, 2.5vw, 2rem) auto 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.02rem;
  color: var(--ink-soft);
  max-width: 56ch;
}

/* ============== BEFORE / AFTER (EMSELLA) ==============
   Side-by-side editorial comparison block. Two cards with subtle "Antes" /
   "Después" tags, soft shadow and sage accent on the "después" side. */
.section-before-after { background: var(--paper); }
.before-after {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2vw, 1.6rem);
  max-width: 1080px;
  margin: 0 auto clamp(1.75rem, 3vw, 2.5rem);
}
.ba-card {
  position: relative;
  margin: 0;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 24px 60px -40px rgba(26, 26, 26, 0.25);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.ba-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 32px 70px -40px rgba(26, 26, 26, 0.35);
}
.ba-card.ba-after {
  border-color: rgba(48, 70, 54, 0.35);
  box-shadow: 0 26px 60px -36px rgba(48, 70, 54, 0.4);
}
.ba-image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--paper);
}
.ba-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s var(--ease-out);
}
.ba-card:hover .ba-image img { transform: scale(1.03); }
.ba-tag {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  padding: 0.4rem 0.85rem;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid var(--line);
  box-shadow: 0 8px 20px -12px rgba(26, 26, 26, 0.25);
}
.ba-tag-success {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.ba-stats {
  list-style: none;
  margin: 0 auto clamp(1rem, 2vw, 1.5rem);
  padding: 0;
  max-width: 1080px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(48, 70, 54, 0.18);
  border: 1px solid rgba(48, 70, 54, 0.18);
  border-radius: var(--radius);
  overflow: hidden;
}
.ba-stats li {
  background: var(--bg);
  padding: clamp(1.2rem, 2.5vw, 1.8rem);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.ba-stat-figure {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.85rem, 3.2vw, 2.6rem);
  line-height: 1;
  color: var(--accent);
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144, "SOFT" 50;
}
.ba-stat-label {
  font-family: var(--sans);
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--ink-soft);
}
.ba-disclaimer {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-style: italic;
  color: var(--ink-soft);
  line-height: 1.55;
}
@media (max-width: 720px) {
  .before-after { grid-template-columns: 1fr; }
  .ba-stats { grid-template-columns: 1fr; }
}

/* ============== COMPARISON TABLE (EMSELLA vs other options) ============== */
.section-comparison { background: var(--bg); }
.comparison-wrap {
  max-width: 1100px;
  margin: 0 auto clamp(1rem, 2vw, 1.5rem);
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.comparison-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-family: var(--sans);
  background: var(--paper);
}
.comparison-table thead th {
  text-align: left;
  padding: 1.1rem 1.2rem;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(48, 70, 54, 0.18);
}
.comparison-table tbody td {
  padding: 1.15rem 1.2rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.comparison-table tbody td:first-child {
  font-family: var(--serif);
  font-size: 1.04rem;
  color: var(--ink);
  white-space: nowrap;
  min-width: 180px;
}
.comparison-table tbody tr:last-child td { border-bottom: none; }
.comparison-table tr.comparison-table-highlight td {
  background: rgba(48, 70, 54, 0.05);
  color: var(--ink);
  font-weight: 500;
}
.comparison-table tr.comparison-table-highlight td:first-child {
  color: var(--accent);
}
.comparison-note {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
  font-family: var(--sans);
  font-size: 0.9rem;
  font-style: italic;
  color: var(--ink-soft);
  line-height: 1.55;
}

/* ============== VIDEO EMBED (responsive 16:9 wrapper) ============== */
.video-embed {
  position: relative;
  width: 100%;
  margin: clamp(1.5rem, 3vw, 2rem) 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink);
  box-shadow: 0 24px 60px -40px rgba(26, 26, 26, 0.4);
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ============== Prose-figure wide variant ==============
   Decorative banner at the top of each gyne service page body. Aspect-ratio
   crop turns square sources into a calm landscape banner instead of a
   towering square. */
.prose-figure.prose-figure-wide {
  margin: clamp(1.5rem, 3vw, 2rem) auto;
  max-width: 760px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius);
}
.prose-figure.prose-figure-wide img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
.prose-figure.prose-figure-wide figcaption {
  margin-top: 0.7rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--ink-soft);
  font-style: italic;
  text-align: center;
}

/* ============== Gyne sidebar layout ==============
   The 4 gyne service pages (general, obstetricia, menopausia, regenerativa)
   render their initial image in a sticky left-hand sidebar alongside the full
   body text — same pattern as the neurology service pages. We reuse
   .prose-wrap + .prose-aside-portrait so the existing grid + sticky rules
   apply, and add a gyne-specific tweak to handle the square source images. */
/* Opaque cream background so the gyne service-page body sits cleanly over
   the fixed subhero photo (which is pinned at z-index: -1 and would
   otherwise show through this section's prose). */
.section-gyne-body { background: var(--bg); }

.section-gyne-body .prose-aside-portrait .manifesto-figure {
  aspect-ratio: 4 / 5;
  margin-top: 0;
}
.section-gyne-body .prose-aside-portrait .manifesto-figure img {
  object-position: center;
}
/* Gyne service pages inherit the unified mobile pattern from the global
   .prose-aside.prose-aside-portrait .manifesto-figure rule (right-only bleed
   with rounded left corners). No mobile-specific override needed — the
   global hide rule at line 2288 was already scoped via :has(.doctor-mobile-portrait). */

/* ============== Prose-figure feature (centered prominent) ==============
   Used by the laser page to display the two protocol infographics in a
   centered, prominent way. Adds editorial framing (subtle paper background,
   border, generous padding) so the graphics feel deliberate, not just
   inline images. */
.prose-figure.prose-figure-feature {
  margin: clamp(2rem, 4vw, 3rem) auto;
  max-width: 760px;             /* aligns with the prose column */
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 2.5vw, 2rem) clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
  box-sizing: border-box;
  overflow: visible !important; /* override .prose-figure { overflow: hidden } */
  box-shadow: none;             /* override .prose-figure box-shadow */
}
.prose-figure.prose-figure-feature img {
  max-width: 100%;
  width: auto;
  height: auto;
  max-height: 70vh;
  display: block;
  margin: 0 auto;
  border-radius: 6px;
  box-shadow: none !important;            /* no shadow bleeding outside the frame */
  transition: none !important;            /* no animation */
  transform: none !important;             /* never scale */
}
.prose-figure.prose-figure-feature:hover img {
  transform: none !important;
}
.prose-figure.prose-figure-feature figcaption {
  margin: 1rem auto 0;
  padding: 0;                   /* override .prose-figure figcaption padding */
  background: none;             /* override the paper background */
  border-top: none;             /* override the hairline that splits image/caption */
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--ink-soft);
  font-style: italic;
  line-height: 1.55;
  text-align: center;
  max-width: 56ch;
  overflow: visible;
}
/* Portrait variant: narrower so the tall infographic doesn't tower over the
   text column, but still readable. */
.prose-figure.prose-figure-feature.prose-figure-portrait {
  max-width: 520px;
}

/* ============== Numbered list inside legal-prose ============== */
.legal-prose ol.numbered-list {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
  counter-reset: emsella;
  display: grid;
  gap: 1rem;
}
.legal-prose ol.numbered-list li {
  counter-increment: emsella;
  position: relative;
  padding: 0.95rem 1.2rem 0.95rem 3.4rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.legal-prose ol.numbered-list li::before {
  content: counter(emsella, decimal-leading-zero);
  position: absolute;
  left: 1.2rem;
  top: 0.95rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--accent);
  font-variation-settings: "opsz" 36, "SOFT" 100;
}

/* ============== GYNE BODY (editorial type ramp for service pages) ==============
   The gyne service pages put body copy inside .legal-prose (which is sized for
   long-form legal prose). For service pages we want a stronger editorial
   ramp — the section-head's huge H2 spans the container, and the H3 sub-titles
   are noticeably bigger than the default .legal-prose H3. */
.section-gyne-body .section-head {
  max-width: none;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.section-gyne-body .legal-prose {
  /* Single content column for body text AND images on gyne service pages.
     760px is wide enough to feel generous on desktop, narrow enough to keep
     long-form paragraphs readable, and lets the inline figures align edge
     to edge with the prose. */
  max-width: 760px !important;
}
/* Body H2s in gyne service pages match the huge editorial style of the
   page's main SEO H2 (e.g. "Tratamiento de incontinencia urinaria con
   EMSELLA en Burriana."). They use the same Fraunces clamp, the same
   sage italic for <em>, and span the prose column width. */
.section-gyne-body .legal-prose h2 {
  font-family: var(--serif);
  font-weight: 350;
  font-size: clamp(2.4rem, 6vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: clamp(3.5rem, 7vw, 5.5rem) 0 1.6rem;
  color: var(--ink);
  max-width: none;
  font-variation-settings: "opsz" 144, "SOFT" 50;
}
.section-gyne-body .legal-prose h2:first-child { margin-top: 0; }
.section-gyne-body .legal-prose h2 em {
  font-style: italic;
  color: var(--accent);
  font-variation-settings: "opsz" 144, "SOFT" 100;
}
.section-gyne-body .legal-prose h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: clamp(2.5rem, 4vw, 3.2rem) 0 1rem;
  color: var(--ink);
  font-variation-settings: "opsz" 144, "SOFT" 50;
}
.section-gyne-body .legal-prose h3:first-child { margin-top: 0; }
.section-gyne-body .legal-prose p {
  font-size: 1.04rem;
  line-height: 1.65;
}

/* ============== INTRO NEUROLOGÍA (consulta privada) ============== */
.prose-section.section-intro-neuro .section-head {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
/* Override the default manifesto-figure top margin so the portrait aligns
   with the first bullet, not 1.5rem below it. */
.section-intro-neuro .prose-aside .manifesto-figure,
.section-intro-gyne .prose-aside .manifesto-figure { margin-top: 0; }

/* Two-photo strategy: the desktop figure uses the anchored crop (3:4 with
   center-top + scale to hide watermark) which can clip the face on phones.
   So the desktop figure hides on phones, and a second figure shows the full,
   uncropped photo only on phones. */
.intro-photo-mobile { display: none !important; }
@media (max-width: 720px) {
  .intro-photo-desktop { display: none !important; }
  .intro-photo-mobile {
    display: block !important;
    margin: 0 0 clamp(1.25rem, 3vw, 1.75rem);
    overflow: visible;            /* allow caption to flow below image */
    border-radius: 0;
  }
  .intro-photo-mobile img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    border-radius: var(--radius);
  }
  /* Caption sits below the image, in normal flow — no absolute overlay.
     We override the default .figure-caption (which is absolute + gradient)
     for this mobile context only. */
  .intro-photo-mobile .figure-caption {
    position: static;
    background: none;
    padding: 0.85rem 0 0;
    text-align: center;
    color: var(--ink);
    font-family: var(--serif);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.3;
    font-variation-settings: "opsz" 36, "SOFT" 50;
  }
  .intro-photo-mobile .figure-caption span {
    display: block;
    margin-top: 0.25rem;
    font-family: var(--sans);
    font-size: 0.72rem;
    font-style: normal;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    opacity: 1;
  }
}
.huge.huge-display {
  /* Same scale as the rest of the editorial H2s; just a tag-agnostic display. */
  font-family: var(--serif);
}
.prose-head-h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.15rem, 1.8vw, 1.55rem);
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--accent);
  margin: 1.1rem 0 0;
  max-width: 38ch;
  font-variation-settings: "opsz" 36, "SOFT" 30;
}
.intro-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
}
.intro-features li {
  display: grid;
  grid-template-columns: 3rem 1fr;
  align-items: baseline;
  gap: 1.1rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(48, 70, 54, 0.14);
}
.intro-features li:first-child { padding-top: 0; }
.intro-features li:last-child { border-bottom: none; padding-bottom: 0; }
.intro-feature-num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--accent);
  letter-spacing: 0.05em;
  font-variation-settings: "opsz" 36, "SOFT" 100;
}
.intro-features li p {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1rem, 1.35vw, 1.12rem);
  line-height: 1.45;
  color: var(--ink);
  font-weight: 400;
  font-variation-settings: "opsz" 36, "SOFT" 30;
}
.intro-features li p strong {
  font-weight: 600;
  color: var(--ink);
}
.intro-features-after {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(48, 70, 54, 0.18);
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.intro-features-before {
  margin: 0 0 1.25rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid rgba(48, 70, 54, 0.18);
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ============== MAPA DEL SITIO ============== */
.sitemap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3.5rem);
  max-width: 1100px;
  margin-inline: auto;
}
.sitemap-section { min-width: 0; }
.sitemap-eyebrow {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.25rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(48, 70, 54, 0.15);
}
.sitemap-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sitemap-list li {
  margin: 0 0 0.55rem;
}
.sitemap-list li a {
  display: inline-block;
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 400;
  color: var(--ink);
  text-decoration: none;
  line-height: 1.4;
  border-bottom: 1px solid transparent;
  transition: color .3s var(--ease-out), border-color .3s var(--ease-out);
}
.sitemap-list li a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.sitemap-list-sub {
  padding-left: 1.1rem;
  position: relative;
}
.sitemap-list-sub::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7rem;
  width: 0.65rem;
  height: 1px;
  background: rgba(48, 70, 54, 0.4);
}
.sitemap-list-sub a {
  font-size: 0.95rem;
  color: rgba(31, 36, 33, 0.78);
}

/* ============== EDITORIAL PROSE (location pages) ==============
   Shared editorial body typography used by section 03 and section 04
   of the location pages (e.g. /neurologo-en-castellon). Both sections
   use a prose-wrap with a sticky portrait aside on the left and the
   text body on the right. The body paragraphs and check-list items
   render in Fraunces light (weight 350) to match the .lead paragraph
   tone, so the H2 → lead → body → bullets flow seamlessly. */
.section-prose-editorial .prose-body p,
.section-doctor-intro .prose-body p {
  font-family: var(--serif);
  font-weight: 350;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 1.1rem;
  max-width: 60ch;
}
.section-prose-editorial .prose-body p:last-child,
.section-doctor-intro .prose-body p:last-child {
  margin-bottom: 0;
}
.section-prose-editorial .prose-body p em,
.section-doctor-intro .prose-body p em { color: var(--accent); font-style: italic; }
.section-prose-editorial .prose-body p strong,
.section-doctor-intro .prose-body p strong { font-weight: 500; color: var(--ink); }
.section-prose-editorial .prose-body .check-list,
.section-doctor-intro .prose-body .check-list {
  margin-top: clamp(1rem, 2.5vw, 1.5rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.section-prose-editorial .prose-body .check-list li,
.section-doctor-intro .prose-body .check-list li {
  font-family: var(--serif);
  font-weight: 350;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.5;
  color: var(--ink-soft);
}
/* Push the bio text down so it begins below the top of the portrait,
   creating an asymmetric, editorial composition where the image dominates
   the upper half. Desktop only — on mobile the image stacks above the text
   and no offset is needed. */
@media (min-width: 960px) {
  .section-doctor-intro .prose-body {
    padding-top: clamp(3rem, 8vw, 6rem);
  }
}
/* ============== Visible NAP block in Ubicación section ==============
   Editorial address card placed above the embedded map. Provides a
   crawlable, copy-pasteable NAP (Name, Address, Phone) — Google reads
   this for local SEO even before parsing the JSON-LD. */
.visit-address {
  display: block;
  font-style: normal;
  max-width: 760px;
  margin: clamp(1.5rem, 3vw, 2.5rem) auto clamp(1.5rem, 3vw, 2.25rem);
  padding: clamp(1.4rem, 2.5vw, 2rem) clamp(1.5rem, 3vw, 2.25rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
  font-family: var(--serif);
}
.visit-address-label {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-family: var(--sans);
  font-weight: 500;
  margin: 0 0 0.85rem;
}
.visit-address-line {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 0.55rem;
  font-weight: 350;
}
.visit-address-line:last-child { margin-bottom: 0; }
.visit-address-line a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease, color 200ms ease;
}
.visit-address-line a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.doctor-intro-cta {
  margin-top: clamp(1.25rem, 3vw, 2rem);
}
.doctor-intro-cta .btn-ghost {
  gap: 0.6rem;
}
@media (max-width: 720px) {
  .doctor-intro-cta .btn-ghost {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}