/* ---------- Tokens ---------- */
:root{
  /* === ACENTO CORAL (único color de acento del sistema) === */
  --coral:        #C97B73;   /* primary — CTAs, italics, dropcaps, hover */
  --coral-deep:   #B26A62;   /* hover/pressed */
  --coral-ink:    #9D5A53;   /* deep, ink-on-light, errores form */
  --coral-soft:   #E8A5A0;   /* tints secundarios */
  --rose-soft:    #F6E3E1;   /* fondos muy claros */

  /* === SUPERFICIES === */
  --cream:        #FAF6F1;   /* fondo de página por defecto */
  --cream-warm:   #F2ECE3;   /* fondo cálido para sección CTA */

  /* === INK (texto) === */
  --ink:          #1A1A1A;
  --ink-60:       rgba(26,26,26,.62);
  --ink-40:       rgba(26,26,26,.40);
  --ink-14:       rgba(26,26,26,.14);
  --ink-08:       rgba(26,26,26,.08);
  --line:         rgba(26,26,26,.12);

  /* === HERO (texto sobre foto oscura) === */
  --hero-fg:      #F4EFE9;   /* cream cálido para texto sobre dark photo */
  --hero-italic:  #C97B73;   /* italics coral en slogan */

  /* === ALIAS DE COMPATIBILIDAD ===
     Mantener para que el CSS antiguo no se rompa hasta que se migre.
     Todo lo que era azul en la marca ahora es coral. */
  --blue:           var(--coral);
  --blue-deep:      var(--coral-deep);
  --blue-ink:       var(--coral);
  --color-blue-ink: var(--coral);

  /* === EDITORIAL DARK SECTIONS ===
     Independiente del color de marca. La sección de testimonios es NEGRO
     (efecto Carmen González) y NO debe migrar al coral aunque cambie la marca.
     Decisión arquitectónica del 29 abr — ver decisions/log.md. */
  --color-section-dark:      #141414;
  --color-section-dark-card: #1F1F1F;

  /* === UTILITY === */
  --wa:           #25D366;   /* WhatsApp green — único verde permitido */

  /* === TIPOGRAFÍA === */
  --serif:        "Playfair Display", "Iowan Old Style", Georgia, serif;
  --logo-serif:   "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --sans:         "DM Sans", -apple-system, "Segoe UI", Inter, system-ui, sans-serif;

  /* === LAYOUT === */
  --max:          1280px;
  --pad:          clamp(20px, 5vw, 64px);
  --radius:       4px;
  --radius-lg:    10px;

  /* === EASING === */
  --ease:         cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft:    cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body{
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
button{ font: inherit; color: inherit; cursor: pointer; }
a{ color: inherit; text-decoration: none; }
input, select, button, textarea{ font: inherit; color: inherit; }

h1,h2,h3,h4{
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.05;
}

::selection{ background: var(--coral); color: var(--cream); }

/* ---------- Utility ---------- */
.container{
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}
.eyebrow{
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-60);
  font-weight: 500;
}
/* Reveal-on-scroll DESACTIVADO — todo aparece directamente. */
.reveal{ opacity: 1; transform: none; transition: none; }
.reveal-delay-1, .reveal-delay-2, .reveal-delay-3, .reveal-delay-4{ transition-delay: 0; }

/* ---------- Nav ---------- */
.nav{
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 253, 248, 0.94);
  backdrop-filter: saturate(1.3) blur(16px);
  -webkit-backdrop-filter: saturate(1.3) blur(16px);
  border-bottom: 1px solid var(--ink-08);
  transition: border-color .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
}
.nav.is-scrolled{
  background: rgba(255, 253, 248, 0.98);
  box-shadow: 0 1px 24px rgba(26, 26, 26, 0.06);
}
.nav-inner{
  display:flex; align-items:center; justify-content: space-between;
  height: 78px;
}
.logo{
  display: inline-flex; align-items: center;
  line-height: 1;
  text-decoration: none;
  /* Área clickeable invisible mientras no haya logo entregado por Alfonso.
     Permite volver al home haciendo clic en la esquina izquierda del header. */
  min-width: 100px;
  min-height: 40px;
}
.logo img{
  display:block;
  width: auto;
}
.footer .logo img{ filter: brightness(0) invert(1); opacity: .92; height: 56px; width: auto; }
/* Wordmark texto en footer: la variante --invert (5.6) lo gestiona via clase
   modificadora. Esta regla legacy se mantiene para compatibilidad si algún
   otro footer usa solo .logo-wordmark sin modifier. */
.footer .logo-wordmark{ color: var(--cream); font-size: 38px; }
.footer .logo:hover .logo-wordmark{ color: var(--coral); }

/* Wordmark de texto temporal — placeholder hasta que Alfonso entregue el logo
   oficial. Cuando llegue, este selector queda inocuo (porque .logo tendrá
   <img> en vez de <span class="logo-wordmark">). */
.logo-wordmark{
  font-family: var(--serif);
  font-style: normal;
  font-weight: 500;
  font-size: 32px;
  letter-spacing: 0.04em;
  color: var(--coral);
  line-height: 1;
  transition: color 200ms var(--ease-soft);
}
.logo:hover .logo-wordmark{ color: var(--coral-deep); }
.nav-links{
  display:flex; gap: 38px; align-items:center;
  font-family: var(--sans);
  font-size: 14px; color: var(--ink);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.nav-links a{
  position: relative;
  transition: color .3s var(--ease);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 0;
  white-space: nowrap;
}
.nav-links a .chev{ width: 10px; height: 10px; opacity: .6; transition: transform .35s var(--ease); }
.nav-links a:hover .chev{ transform: translateY(2px); }
.nav-links a:hover{ color: var(--coral); }
/* Sin underline animado en hover (regla del brief — limpieza editorial) */
.nav-links a::after{ display: none; }

/* Mega-menu dropdown (CSS-only, accesible con teclado via focus-within) */
.nav-item{ position: relative; }
.nav-item.has-dropdown > .nav-trigger{ cursor: pointer; }
.dropdown{
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px);
  min-width: 260px;
  background: #fff;
  border: 1px solid rgba(26,26,26, 0.1);
  border-radius: 14px;
  box-shadow: 0 20px 56px rgba(26,26,26, 0.18), 0 4px 12px rgba(26,26,26, 0.06);
  padding: 10px;
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .25s var(--ease), transform .35s var(--ease), visibility 0s linear .25s;
  z-index: 200;
}
.nav-item.has-dropdown:hover > .dropdown,
.nav-item.has-dropdown:focus-within > .dropdown{
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}
.nav-item.has-dropdown:hover > .nav-trigger .chev,
.nav-item.has-dropdown:focus-within > .nav-trigger .chev{ transform: rotate(180deg); }
.dropdown a{
  display: block;
  padding: 10px 14px;
  font-family: var(--sans);
  font-size: 13.5px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  border-radius: 8px;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.dropdown a::after{ display: none; }  /* sin subrayado animado dentro del dropdown */
.dropdown a:hover{
  background: rgba(201,123,115, 0.08);
  color: var(--coral);
}

.nav-right{ display:flex; align-items:center; gap: 20px; }
.nav-phone{
  font-family: var(--sans);
  font-size: 15px; color: var(--ink); font-weight: 600;
  display:flex; align-items:center; gap: 10px;
  white-space: nowrap;
  transition: color .3s var(--ease);
}
.nav-phone:hover{ color: var(--coral); }

/* Botón "Pedir cita" del nav — outline coral, hover fill (scope .nav-right
   para no afectar al .btn global usado en formularios y otros sitios). */
.nav-right .btn{
  background: transparent;
  /* A11y: coral-ink (#9D5A53) sobre cream (#FAF6F1) = ratio 5.4:1 (AA OK).
     Antes con --coral (#C97B73) el ratio era 3.0:1 (falla AA). */
  color: var(--coral-ink);
  border: 1px solid var(--coral-ink);
  padding: 10px 20px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  border-radius: 999px;
  box-shadow: none;
  white-space: nowrap; /* evita que "Pedir cita →" rompa en 2 líneas si el nav se aprieta */
  transition: background 200ms var(--ease-soft),
              color 200ms var(--ease-soft),
              border-color 200ms var(--ease-soft),
              transform 200ms var(--ease-soft);
}
.nav-right .btn:hover{
  background: var(--coral-ink);
  color: var(--cream);
  border-color: var(--coral-ink);
  transform: none;
  box-shadow: none;
}
.nav-right .btn .btn-arrow{ transition: transform 200ms var(--ease-soft); }
.nav-right .btn:hover .btn-arrow{ transform: translateX(2px); }

.wa-ic{
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--wa);
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  box-shadow: 0 2px 8px -2px rgba(37,211,102,.45);
}
.wa-ic svg{ width: 16px; height: 16px; color: #fff; }
.btn{
  display: inline-flex; align-items:center; gap: 10px;
  padding: 12px 22px;
  /* A11y: coral-ink (#9D5A53) cumple WCAG AA con texto blanco (ratio 5.6:1)
     mientras que el coral pálido (--blue alias → #C97B73) fallaba (3.0:1). */
  background: var(--coral-ink); color: #fff;
  font-size: 14px; font-weight: 500; letter-spacing: 0.01em;
  border-radius: 999px; border:0;
  transition: transform .5s var(--ease), background .3s var(--ease), box-shadow .5s var(--ease);
  box-shadow: 0 1px 0 rgba(26,26,26,.15);
}
.btn:hover{ background: var(--coral-deep); transform: translateY(-1px) scale(1.02); box-shadow: 0 10px 24px -10px rgba(201,123,115,.5); }
.btn-ghost{
  background: transparent; color: var(--coral-ink);
  border: 1px solid var(--coral-ink);
}
.btn-ghost:hover{ background: var(--coral-ink); color: #fff; border-color: var(--coral-ink); }
.btn-arrow{ display:inline-block; transition: transform .5s var(--ease); }
.btn:hover .btn-arrow{ transform: translateX(3px); }

.nav-burger{ display:none; background: transparent; border: 0; width: 40px; height: 40px; align-items:center; justify-content:center; }
.nav-burger span{ display:block; width: 22px; height: 1.5px; background: var(--ink); position:relative; }
.nav-burger span::before,.nav-burger span::after{ content:""; position:absolute; left:0; width:22px; height:1.5px; background: var(--ink); transition: transform .4s var(--ease); }
.nav-burger span::before{ top:-7px; } .nav-burger span::after{ top: 7px; }

/* ---------- Hero ---------- */
.hero{
  padding: clamp(24px, 4vw, 56px) 0 clamp(60px, 10vw, 120px);
  position: relative;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}
.hero-kicker{
  display:flex; align-items:center; justify-content: space-between;
  gap: 24px;
  padding-bottom: 40px;
  margin-bottom: 48px;
  border-bottom: 1px solid var(--ink-14);
}
.hero-kicker .left{
  display:inline-flex; align-items: center; gap: 14px;
  font-family: var(--logo-serif); font-style: italic; font-weight: 400;
  color: var(--coral); font-size: 24px;
  letter-spacing: -0.01em;
}
.hero-kicker .left::before{
  content:""; width: 10px; height: 10px; border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 4px rgba(201,123,115,.2);
}
.hero-kicker .right{
  font-family: var(--sans);
  font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-60);
}
.hero-copy .eyebrow{ display:inline-flex; align-items:center; gap: 10px; margin-bottom: 28px; }
.hero-copy .eyebrow::before{ content:""; width: 28px; height: 1px; background: var(--blue); }
.hero h1{
  font-size: clamp(56px, 8.4vw, 104px);
  line-height: 0.98;
  font-weight: 400;
  margin-bottom: 28px;
}
.hero h1 .accent{ font-style: italic; color: var(--blue); font-weight: 400; }

/* ---------- H1 de paginas de tratamiento (jerarquia: main + sub ciudades) ---------- */
/* Specificidad reforzada con .hero para ganar a `.hero h1` que va a 104px. */
.hero h1.h1-tratamiento{
  font-family: var(--serif);
  font-size: clamp(42px, 5.6vw, 72px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.028em;
  text-transform: none;
  color: var(--ink);
  margin: 0 0 28px;
  text-wrap: balance;
  /* No partir palabras como TRATAMIENTO -> TRATA-MIENTO. text-wrap:balance ya
     reparte las lineas; los guiones automaticos solo creaban ruido visual. */
  hyphens: manual;
  -webkit-hyphens: manual;
  overflow-wrap: break-word;
}
.hero h1.h1-tratamiento .accent{
  font-style: italic;
  color: var(--blue);
  font-weight: 400;
  white-space: nowrap;
  display: inline-block;
}
@media (max-width: 600px){
  .hero h1.h1-tratamiento .accent{ white-space: normal; }
}
.hero h1.h1-tratamiento .h1-sub{
  display: block;
  font-family: var(--serif);
  font-size: clamp(18px, 1.8vw, 24px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--ink-60);
  margin-top: 8px;
  text-transform: none;
}

/* ---------- Body prose: H2 preguntas, H3 subsecciones, p, ul/li ---------- */
/* Ajustes de legibilidad: columna 62ch, line-height 1.85, margenes mas
   generosos entre parrafos y alrededor de H2/H3 para que respire. */
.body-prose .section-q{
  font-family: var(--serif);
  font-size: clamp(24px, 2.3vw, 32px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 12px;   /* aire vertical lo gestiona ahora .treatment-section */
  text-transform: none;
  max-width: 62ch;
  position: relative;
}
.body-prose .section-q:first-child{ margin-top: 0; }
.body-prose .section-q::after{
  /* Dash coral sutil debajo del H2: separador visual sin romper ritmo */
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  background: var(--coral);
  margin-top: 16px;
  border-radius: 1px;
}

.body-prose .section-h3{
  font-family: var(--serif);
  font-size: clamp(19px, 1.7vw, 23px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 44px 0 14px;
  text-transform: none;
  max-width: 62ch;
}

.body-prose .prose-p{
  font-family: var(--sans);
  font-size: clamp(17px, 1.1vw, 19px);
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 8px;
  max-width: 62ch;
  font-weight: 400;
}
/* Si un parrafo va inmediatamente despues de un H2/H3, acercarlo un pelin */
.body-prose .section-q + .prose-p,
.body-prose .section-h3 + .prose-p{
  margin-top: 4px;
}

.body-prose .prose-ul{
  list-style: none;
  padding-left: 0;
  margin: 10px 0 14px;
  max-width: 62ch;
}
.body-prose .prose-li{
  font-family: var(--sans);
  font-size: clamp(17px, 1.1vw, 19px);
  line-height: 1.7;
  color: var(--ink);
  padding-left: 28px;
  margin-bottom: 14px;
  position: relative;
  max-width: 62ch;
}
.body-prose .prose-li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  width: 14px;
  height: 1px;
  background: var(--coral);
}

.body-prose strong{
  font-weight: 600;
  color: var(--ink);
}

/* Enlaces inline dentro del body editorial (refuerzo 3 jun 2026 — feedback Aurea:
   cursiva + subrayado mas grueso + coral mas opaco para que se distingan claramente
   como hiperenlaces clicables). !important para garantizar override del global "a". */
.body-prose .prose-p a[href^="/"],
.body-prose .prose-li a[href^="/"]{
  color: var(--coral-ink) !important;
  font-style: italic !important;
  font-weight: 500 !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1.5px !important;
  text-underline-offset: 3px !important;
  text-decoration-color: var(--coral-ink) !important;
  transition: color .2s ease, text-decoration-color .2s ease;
}
.body-prose .prose-p a[href^="/"]:hover,
.body-prose .prose-li a[href^="/"]:hover{
  color: var(--coral-deep);
  text-decoration-color: var(--coral-deep);
}
.body-prose .prose-p a[href^="/"] strong,
.body-prose .prose-li a[href^="/"] strong{
  color: inherit;
  font-style: italic;
}

/* ============================================================
   HUB EXPLICATIVO — pagina hub de Acido Hialuronico
   (recuperado de la web antigua, 2 jun 2026)
   Estilos pareados con .body-prose pero scope independiente
   porque el hub vive en su propio source PHP y no usa .prose-p.
   ============================================================ */
/* IMPORTANTE: `section.hub-explicativo` (specificity 0,1,1) gana a la regla
   global `.section { padding: clamp(80,10vw,140) 0 }` (specificity 0,1,0)
   que estaba metiendo 140px arriba y abajo.
   3 jun 2026 — ajuste final: 24 -> 48 top, 32 -> 64 bottom (Aurea: muy apretado). */
section.hub-explicativo{
  padding-top: 88px !important;
  padding-bottom: 64px !important;
}
.hub-explicativo{
  padding-top: 88px;
  padding-bottom: 64px;
}
.hub-explicativo .container{
  max-width: 760px;            /* lectura editorial, no full-width */
}
.hub-explicativo h2{
  font-family: var(--serif);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 40px 0 16px;
  clear: both;                 /* evita hueco enorme tras figures flotadas */
}
.hub-explicativo h2:first-child{ margin-top: 0; }
/* Palabras destacadas en los H2 (3 jun 2026, feedback Aurea: dar color a los H). */
.hub-explicativo h2 em{
  font-style: italic;
  color: var(--coral);
}
/* Negritas en cuerpo del hub: tinta oscura + un poquito mas peso. */
.hub-explicativo p strong,
.hub-explicativo li strong{
  font-weight: 600;
  color: var(--ink);
}
.hub-explicativo p{
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  margin: 0 0 18px;
}
.hub-explicativo ol,
.hub-explicativo ul{
  margin: 0 0 18px 1.4em;
  padding: 0;
}
.hub-explicativo li{
  font-size: 17px;
  line-height: 1.7;
  margin: 0 0 10px;
}
.hub-explicativo .hub-zonas-sub{
  margin-top: 8px;
  list-style-type: lower-alpha;
}
.hub-explicativo .hub-figure{
  margin: 4px 0 16px;
  border-radius: 12px;
  overflow: hidden;
}
.hub-explicativo .hub-figure img{
  display: block;
  width: 100%;
  height: auto;
}
@media (min-width: 720px){
  .hub-explicativo .hub-figure--left{
    float: left;
    max-width: 42%;
    margin: 4px 24px 12px 0;
  }
  .hub-explicativo .hub-figure--right{
    float: right;
    max-width: 42%;
    margin: 4px 0 12px 24px;
  }
}
/* Anchors inline del hub: cursiva + subrayado para inequivocamente clicables.
   !important para garantizar override del global "a". */
.hub-explicativo a[href^="/"]{
  color: var(--coral-ink) !important;
  font-style: italic !important;
  font-weight: 500 !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1.5px !important;
  text-underline-offset: 3px !important;
  text-decoration-color: var(--coral-ink) !important;
  transition: color .2s ease, text-decoration-color .2s ease;
}
.hub-explicativo a[href^="/"]:hover{
  color: var(--coral-deep);
  text-decoration-color: var(--coral-deep);
}
.hub-explicativo a[href^="/"] strong{ color: inherit; font-style: italic; }
/* Forzar clear al final del bloque para que el grid siguiente no quede con hueco */
.hub-explicativo::after{
  content: "";
  display: block;
  clear: both;
}

/* Imagenes intercaladas en el body editorial (figures de tratamiento) */
.body-prose .prose-figure{
  margin: 4px 0 12px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(26,26,26, 0.08);
  max-width: 100%;
}
.body-prose .prose-figure img{
  display: block;
  width: 100%;
  height: auto;
  /* Sin max-height/object-fit: escalan proporcionalmente (no se recorta nada).
     El tamano se controla via max-width del figure flotado (issue 2, 27 may). */
}
@media (min-width: 900px){
  .body-prose .prose-figure--right{
    float: right;
    max-width: 280px;
    margin-left: 32px;
    margin-right: 0;
  }
  .body-prose .prose-figure--left{
    float: left;
    max-width: 280px;
    margin-right: 32px;
    margin-left: 0;
  }
  /* H2/H3 tras una figure flotante rompen el flujo para que no se solapen.
     NOTA: .prose-ul ya no rompe — las bullets fluyen junto a la imagen
     (mejor visual: evita el "aire muerto" entre el "Sus beneficios son:" y la lista
     cuando la imagen está flotada a la derecha). */
  .body-prose .section-q,
  .body-prose .section-h3{
    clear: both;
  }
}
@media (max-width: 899px){
  .body-prose .prose-figure--right,
  .body-prose .prose-figure--left{
    float: none;
    max-width: 100%;
    margin: 24px 0;
  }
}

/* ============================================================
   IDEA 1 — Eyebrow editorial antes de cada H2 del cuerpo
   "— 02   PROCEDIMIENTO" en serif uppercase con tracking
   ============================================================ */
.body-prose .section-eyebrow{
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin: 56px 0 14px;
  padding: 0;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-40, rgba(20,20,20,.55));
}
.body-prose .section-eyebrow .num{
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--coral, #C97B73);
  text-transform: none;
  font-weight: 500;
}
.body-prose .section-eyebrow .lbl{
  flex: 0 0 auto;
}
/* Primera section-eyebrow: menos margin top (no hay seccion previa) */
.body-prose .section-eyebrow:first-child,
.body-prose > .section-eyebrow:first-of-type{
  margin-top: 0;
}
/* H2 que va inmediatamente despues del eyebrow: pegar */
.body-prose .section-eyebrow + .section-q{
  margin-top: 0;
}
@media (min-width: 900px){
  .body-prose .section-eyebrow{
    clear: both;
  }
}

/* ============================================================
   IDEA 2 — Pull quote editorial (frase destacada en serif italic)
   ============================================================ */
.body-prose .prose-pullquote{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.35;
  color: var(--blue-ink, #1A1A1A);
  max-width: 64ch;
  margin: 36px auto 32px;
  padding: 24px 0 24px 28px;
  border-left: 2px solid var(--coral, #C97B73);
  position: relative;
}
.body-prose .prose-pullquote .pq-mark{
  font-family: var(--serif);
  color: var(--coral, #C97B73);
  font-size: 1.1em;
  font-style: normal;
  margin: 0 4px;
  opacity: 0.8;
}
@media (min-width: 900px){
  .body-prose .prose-pullquote{
    clear: both;
  }
}

/* ============================================================
   IDEA 3 — Sello "Est. 2009 · 15 anos" en el hero
   ============================================================ */
.hero-est-badge{
  display: inline-block;
  padding: 6px 14px;
  margin-bottom: 18px;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink, #1a1a1a);
  border: 1px solid currentColor;
  border-radius: 999px;
  opacity: 0.78;
}

/* ============================================================
   IDEA B — Marquee silencioso (ticker editorial bajo el hero)
   Tira horizontal con ciudades + atributos. Loop lento (80s).
   Decorativo, oculto a lectores de pantalla, respeta reduce-motion.
   ============================================================ */
.marquee{
  overflow: hidden;
  padding: 16px 0;
  border-top: 1px solid var(--ink-14);
  border-bottom: 1px solid var(--ink-14);
  background: var(--cream);
  position: relative;
}
.marquee-track{
  display: flex;
  width: max-content;
  animation: marquee-scroll 80s linear infinite;
  will-change: transform;
}
.marquee-group{
  display: inline-flex;
  align-items: center;
  gap: 28px;
  padding-right: 28px;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-40);
  white-space: nowrap;
}
.marquee-group .dot{
  color: var(--coral);
  opacity: 0.7;
  font-size: 14px;
  letter-spacing: 0;
}
@keyframes marquee-scroll{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation: none; }
}

/* ============================================================
   IDEA 4 — Bloque "Filosofia clinica" con cita del medico
   Fondo oscuro azul-tinta: crea el "momento dramatico" tipo
   capitulo de revista premium (Wellness by Myhra, Hales).
   ============================================================ */
.medico-cita-section{
  padding: 96px 0;
  background: var(--blue-ink);
  position: relative;
}
.medico-cita{
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  padding: 0 16px;
}
.medico-cita-eyebrow{
  display: inline-block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 24px;
}
.medico-cita-quote{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(24px, 2.8vw, 38px);
  line-height: 1.35;
  color: var(--cream);
  margin: 0 0 28px;
  padding: 0;
  letter-spacing: -0.005em;
}
.medico-cita-quote em{
  font-family: var(--serif);
  font-style: italic;
  color: var(--coral);
}
.medico-cita-quote .mq-mark{
  font-style: normal;
  color: var(--coral);
  margin: 0 4px;
  font-size: 0.9em;
  opacity: 0.9;
}
.medico-cita-firma{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.medico-cita-firma::before{
  content: "";
  display: block;
  width: 36px;
  height: 1px;
  background: var(--coral);
  margin: 0 auto 14px;
  opacity: 0.8;
}
.firma-nombre{
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--cream);
  letter-spacing: -0.005em;
}
.firma-meta{
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(243, 235, 220, 0.55);
}

/* Citas de medicos — cursiva elegante tipo revista */
.body-prose .cita-medico{
  font-family: var(--serif);
  font-style: italic;
  color: var(--blue-ink);
  font-weight: 400;
}

/* Enumeraciones descriptivas (X, Y y/o Z) — cursiva sutil para dar ritmo */
.body-prose .enum{
  font-style: italic;
  color: var(--ink);
}

/* Bullet implicito (parrafos que en el copy original empezaban con "- ") */
.body-prose .prose-bullet{
  padding-left: 32px;
  position: relative;
}
.body-prose .prose-bullet .bullet-dot{
  position: absolute;
  left: 8px;
  top: 0;
  color: var(--coral);
  font-size: 1.3em;
  line-height: 1.85;
  font-weight: 700;
}

/* Accent alternante (keyword destacada en H2 de seccion) */
.body-prose .section-q .accent{
  font-style: normal;
  font-weight: 600;
}
.body-prose .section-q .accent-blue{ color: var(--blue); }
.body-prose .section-q .accent-coral{ color: var(--coral-deep); }

/* Drop cap — primer parrafo del body (anchor principal, escalado) */
.body-prose .prose-p.first-prose::first-letter{
  font-family: var(--serif);
  font-size: 4.6em;
  font-weight: 500;
  float: left;
  line-height: 0.88;
  margin-right: 12px;
  margin-top: 6px;
  color: var(--blue-ink);
}
/* Drop caps seccionales — primer parrafo despues de cada H2 (eco coral, mas pequeno).
   Solo desktop: en movil queda abigarrado. Excluye listas, bullets, blockquotes y
   parrafos que empiezan con sublabel (RESULTADOS:, EFECTOS ADVERSOS:, etc). */
@media (min-width: 900px){
  .body-prose .section-q + .prose-p:not(.first-prose):not(.prose-bullet):not(.has-sublabel):not(.has-enum-num)::first-letter{
    font-family: var(--serif);
    font-style: italic;
    font-size: 3.2em;
    font-weight: 500;
    float: left;
    line-height: 0.9;
    margin: 4px 10px 0 0;
    color: var(--coral-deep);
  }
}

/* Sublabel: subtítulo editorial dentro de una sección (no es eyebrow autónomo).
   Renderizado en Playfair italic coral medium, con dash coral lateral, claramente
   jerárquico bajo el H2 de la sección. Decisión 29 abr (Aurea): los sublabels
   "RESULTADOS" / "EFECTOS ADVERSOS" se confundían con eyebrows de sección a la
   altura — ahora se ven como sub-h3 inequívocos. */
.body-prose .prose-sublabel{
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--coral);
  margin: 0 0 10px;
  position: relative;
  padding-left: 22px;
}
.body-prose .prose-sublabel::before{
  /* Dash coral lateral — "vincula" visualmente el subtítulo con su párrafo */
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 14px;
  height: 1px;
  background: var(--coral);
}
.body-prose .prose-p.has-sublabel{
  margin-top: 28px; /* antes 18px — más respiro entre subsecciones */
}

/* Items numerados (1., 2., 3., 4.) — numero en serif italic, tono "cremita coraleño"
   (coral diluido) para que la "L" azul del parrafo introductor sea protagonista
   visual y los numeros queden subordinados. Float left para drop-cap; flow-root
   en el <p> aisla floats entre items consecutivos. */
.body-prose .prose-p.has-enum-num{
  display: flow-root;
  margin-top: 14px;
}
.body-prose .enum-num{
  float: left;
  font-family: var(--serif);
  font-style: italic;
  font-size: 2.4em;
  line-height: 0.9;
  font-weight: 500;
  color: rgba(178,106,98, 0.45); /* coral-deep al 45% — cremita coraleño */
  margin: 0 14px 0 0;
  letter-spacing: -0.02em;
}
/* Drop-cap del parrafo introductor de una seccion con items numerados:
   pasa a azul (--blue) — ancla protagonista del bloque numerado. */
@media (min-width: 900px){
  .body-prose .prose-p.intro-enum-section::first-letter{
    color: var(--blue);
  }
}
.body-prose .enum-num .enum-num-fig{
  font-style: italic;
}
.body-prose .enum-num .enum-num-dot{
  font-style: normal;
}
@media (max-width: 600px){
  .body-prose .prose-p.first-prose::first-letter{
    font-size: 3.2em;
    margin-right: 8px;
  }
}

/* Placeholder si la imagen del hero falla (sin fallback a Unsplash).
   3 jun 2026: ELIMINADO `min-height: 400px` — expandia el contenedor
   verticalmente y rompia el `max-width: 380px` + `aspect-ratio: 1/1` del
   contenedor .hero-image (regla mas abajo). Si la imagen falla queda el
   gradient encima del contenedor cuadrado de 380px. */
.hero-image img{
  background: linear-gradient(135deg, var(--cream-warm) 0%, var(--coral) 100%);
}

/* Un pelin mas de aire vertical en la seccion completa del body editorial */
.tratamiento-body{ padding-bottom: clamp(72px, 10vw, 140px); }
.hero-sub{
  font-size: clamp(18px, 1.5vw, 22px);
  color: var(--ink-60);
  max-width: 34ch;
  line-height: 1.45;
  margin-bottom: 52px;
}
.hero-cta-row{ display:flex; flex-wrap: wrap; gap: 14px; align-items:center; margin-bottom: 72px; }
.hero-meta{
  display:grid;
  grid-template-columns: repeat(3, auto);
  gap: clamp(24px, 4vw, 56px);
  padding-top: 28px;
  border-top: 1px solid var(--ink-14);
  max-width: 540px;
}
.hero-meta .n{ font-family: var(--serif); font-size: 40px; font-weight: 500; line-height: 1; letter-spacing: -0.02em; }
.hero-meta .l{ font-size: 12px; color: var(--ink-60); letter-spacing: .08em; text-transform: uppercase; margin-top: 8px; }

.hero-image{
  position: relative;
  /* 3 jun 2026 (3a iteracion, Aurea: "se ve mas grande"):
     - cuadrado 1/1 vuelve (predecible y compacto)
     - max-width 380px para que no domine el hero
     - margin-left: auto para alinear a la derecha (no quedar centrada en hueco) */
  aspect-ratio: 1/1;
  max-width: 380px;
  margin-left: auto;
  background: var(--rose-soft);
  overflow: hidden;
  border-radius: 12px;
}
/* Override puntual por variant (3 jun 2026, Aurea): punto medio iterado.
   - 380px era pequeño, sin tope era enorme, 450px parece el sweet spot. */
/* Tamaño grande para TODAS las paginas blefaroplastia: la raiz canonica y
   las 3 ciudades. Selector por contencion del slug. */
.hero-image[data-variant*="blefaroplastia"]{
  max-width: 500px;
}
/* Override para todas las variants de "aumento-de-labios" (raiz + 4 ciudades):
   la imagen labios.webp es 900x600 (3:2) y el contenedor cuadrado la recortaba
   y aumentaba la sensacion de zoom. Pasamos contenedor a 3:2 = sin recorte. */
.hero-image[data-variant^="raiz__aumento-de-labios-"],
.hero-image[data-variant*="__aumento-de-labios-tratar-labios-labio-ruso"]{
  aspect-ratio: 3/2;
  max-width: 420px;
}
.hero-image img{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;  /* prioriza la cara: no decapita por arriba */
}
/* hero zoom-in DESACTIVADO por performance */
.hero-image::after{
  content:"";
  position:absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(250,246,241,0) 55%, rgba(26,26,26,.22)),
    linear-gradient(160deg, rgba(201,123,115,.08), rgba(250,246,241,0) 45%);
  pointer-events: none;
}
.hero-badge{
  position: absolute;
  bottom: 22px; right: 22px;
  display:flex; flex-direction: column; gap: 4px;
  padding: 16px 22px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 10px;
  box-shadow: 0 12px 30px -12px rgba(26,26,26,.25), 0 2px 6px -2px rgba(26,26,26,.08);
}
.hero-badge .loc{
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--blue);
  font-weight: 600;
}
.hero-badge .price{
  font-family: var(--serif);
  font-size: 20px;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -0.01em;
  display: inline-flex; align-items: baseline;
}
.hero-badge .price b{ color: var(--coral-deep); font-weight: 500; font-size: 18px; }

/* Badge rotator — alterna entre N estados con fade infinito (sin JS).
   Patrón grid: ambos .state ocupan la misma celda → altura del más alto.
   Reutilizable en cualquier badge con múltiples precios (mesoterapia, etc.). */
.badge-rotator{ display: grid; }
.badge-rotator > .state{
  grid-area: 1 / 1;
  display: flex; flex-direction: column; gap: 4px;
  animation: badge-rotator-fade-a 8s ease-in-out infinite;
}
.badge-rotator > .state:nth-child(2){ animation-name: badge-rotator-fade-b; }
.badge-rotator .sub{
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-60);
  margin-top: 2px;
}
@keyframes badge-rotator-fade-a{
  0%, 45% { opacity: 1; }
  50%, 95% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes badge-rotator-fade-b{
  0%, 45% { opacity: 0; }
  50%, 95% { opacity: 1; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
  .badge-rotator > .state{ animation: none; }
  .badge-rotator > .state:nth-child(2){ display: none; }
}

/* Pricing table — 2 cards lado a lado para tratamientos con sesión + bono.
   Reutilizable. Card destacada con .pricing-card--featured. */
.pricing-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 28px 0 8px;
  max-width: 720px;
}
.pricing-card{
  display: flex; flex-direction: column;
  padding: 32px 28px 28px;
  background: var(--cream-warm);
  border: 1px solid var(--ink-08);
  border-radius: 14px;
  position: relative;
}
.pricing-card--featured{
  background: var(--rose-soft);
  border-color: var(--coral);
}
.pricing-card--featured::before{
  content: "Más valor";
  position: absolute;
  top: 14px; right: 14px;
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--coral-deep);
  background: rgba(255,255,255,.7);
  padding: 5px 10px;
  border-radius: 100px;
  font-weight: 600;
}
.pricing-eyebrow{
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-60);
  font-weight: 500;
}
.pricing-amount{
  font-family: var(--serif);
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-top: 14px;
  display: inline-flex; align-items: baseline; gap: 4px;
}
.pricing-amount em{
  font-style: italic;
  font-weight: 400;
  font-size: 0.45em;
  color: var(--coral-deep);
}
.pricing-note{
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-60);
  margin-top: 10px;
  letter-spacing: .01em;
}
@media (max-width: 600px){
  .pricing-grid{ grid-template-columns: 1fr; gap: 14px; max-width: 100%; }
  .pricing-card{ padding: 24px 22px 22px; }
  .pricing-amount{ font-size: 52px; }
}

.hero-locations{
  position: absolute;
  left: var(--pad); bottom: -14px;
  display:flex; gap: 22px; color: var(--ink-40); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  z-index: 2;
}

/* marquee tape */
.tape{
  background: var(--ink);
  color: var(--cream);
  overflow: hidden;
  padding: 18px 0;
  margin-top: 30px;
}
.tape-track{
  display:flex; gap: 64px; width: max-content;
  animation: slide 42s linear infinite;
}
.tape-item{
  display:inline-flex; align-items:center; gap: 16px;
  font-family: var(--serif); font-size: 22px; font-style: italic; font-weight: 400;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.tape-item::before{ content:"✦"; color: var(--coral); font-style: normal; }
@keyframes slide{ to { transform: translateX(-50%); } }

/* ---------- Section header ---------- */
.section{ padding: clamp(80px, 10vw, 140px) 0; position: relative; }
.section-head{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-bottom: clamp(48px, 6vw, 80px);
  align-items: end;
}
.section-head h2{
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 400;
  line-height: 1.02;
  max-width: 16ch;
}
.section-head h2 em{ color: var(--coral-ink); font-style: italic; font-weight: 400; }
.section-head .side{ color: var(--ink-60); font-size: 17.5px; line-height: 1.55; max-width: 42ch; padding-bottom: 8px; }
.section-head .side .num{
  display:block; font-family: var(--serif); font-size: 14px; color: var(--ink); margin-bottom: 12px; letter-spacing: .04em;
}
/* Eyebrow ("01 · Destacados", "02 · Cuadro médico"): más grande y en coral
   para dar peso a la jerarquía secundaria. Sobreescribe el color ink-60
   del .editorial-eyebrow global solo dentro de section-head. */
.section-head .side .editorial-eyebrow{
  font-size: 12.5px;
  letter-spacing: 0.36em;
  /* A11y: coral-ink (#9D5A53) cumple WCAG AA sobre cream (#FAF6F1, ratio 5.4:1);
     el coral (#C97B73) fallaba en texto pequeño (3.0:1). */
  color: var(--coral-ink);
}
.section-head .side .editorial-eyebrow::before{
  background: var(--coral-ink);
  width: 42px;
}

/* ---------- Treatments ---------- */
.treatments{
  background: var(--cream);
}
.treatments-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr); /* 3 cols × 2 filas = 6 cards (decisión 29 abr: 2+2+2 por categoría) */
  gap: 0;
  border-top: 1px solid var(--ink-14);
}
.tcard{
  position: relative;
  padding: 32px 28px 36px;
  border-right: 1px solid var(--ink-14);
  border-bottom: 1px solid var(--ink-14);
  background: transparent;
  transition: transform .7s var(--ease), background .5s var(--ease);
  display:flex; flex-direction: column;
  min-height: 460px;
  cursor: pointer;
}
/* Bordes derechos: ocultar en última columna de cada fila (cada 3 cards) */
.tcard:nth-child(3n){ border-right: 0; }
.tcard:hover{
  transform: translateY(-8px);
  background: var(--cream-warm);
  box-shadow: 0 40px 50px -30px rgba(26,26,26,.15);
  z-index: 2;
}
.tcard-img{
  aspect-ratio: 1/1;
  background: var(--rose-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 28px;
  position: relative;
}
.tcard-img::after{
  content:""; position:absolute; inset: 0;
  background: linear-gradient(180deg, transparent, rgba(201,123,115,.1));
  opacity: 0; transition: opacity .6s var(--ease);
}
.tcard:hover .tcard-img::after{ opacity: 1; }
.tcard-img img{ width:100%; height:100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.tcard:hover .tcard-img img{ transform: scale(1.06); }
.tcard-img .idx{
  position:absolute; top: 14px; left: 14px;
  font-family: var(--serif); font-size: 13px; color: var(--cream);
  background: rgba(26,26,26,.72);
  padding: 4px 10px; border-radius: 999px; letter-spacing: .02em;
}
.tcard h3{
  font-size: 26px; font-weight: 400; line-height: 1.1;
  margin-bottom: 8px;
  font-family: var(--serif); letter-spacing: -0.02em;
}
.tcard .price{
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-60);
  margin-bottom: auto;
}
.tcard .price b{ color: var(--blue); font-weight: 600; font-size: 17px; }
.tcard .more{
  display: inline-flex; align-items:center; gap: 10px;
  margin-top: 28px;
  font-size: 13px; letter-spacing: .04em; color: var(--ink);
  border-top: 1px solid var(--ink-14);
  padding-top: 20px;
  transition: color .4s var(--ease), gap .5s var(--ease);
}
.tcard:hover .more{ color: var(--blue); gap: 16px; }
.tcard .more svg{ width: 18px; height: 10px; transition: transform .5s var(--ease); }
.tcard:hover .more svg{ transform: translateX(4px); }

/* ---------- Doctoras ---------- */
.doctors{
  background: var(--cream-warm);
}
.doc-stack{ display: grid; gap: clamp(60px, 8vw, 120px); }
.doc-row{
  display:grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}
.doc-row.reverse{ grid-template-columns: 1.1fr .9fr; }
.doc-row.reverse .doc-img{ order: 2; }
.doc-img{
  aspect-ratio: 4/5;
  background: var(--rose-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}
.doc-img img{ width:100%; height:100%; object-fit: cover; }
.doc-img.placeholder{
  display:flex; align-items:center; justify-content: center;
  background: linear-gradient(160deg, #E6D5CC 0%, #C9B4A7 100%);
  color: var(--cream);
}
.doc-img.placeholder::after{
  content:""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(255,255,255,.4), transparent 50%),
    radial-gradient(ellipse at 70% 70%, rgba(201,123,115,.15), transparent 60%);
}
.doc-img.placeholder .initials{
  position: relative; z-index: 1;
  font-family: var(--logo-serif); font-size: clamp(120px, 18vw, 220px); font-style: italic; font-weight: 300;
  color: rgba(255,255,255,.75);
  letter-spacing: -0.04em;
}
.doc-img.placeholder .ph-tag{
  position: absolute; z-index: 1;
  bottom: 20px; left: 20px;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  background: rgba(26,26,26,.35);
  padding: 6px 12px; border-radius: 999px;
  backdrop-filter: blur(4px);
}
.doc-meta{ max-width: 520px; }
.doc-meta .eyebrow{ margin-bottom: 20px; display:block; }
.doc-meta h3{
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 400;
  line-height: 1;
  margin-bottom: 22px;
}
.doc-meta h3 .italic{ font-style: italic; color: var(--blue); }
.doc-role{
  font-size: 11.5px; letter-spacing: .22em; color: var(--ink-60); text-transform: uppercase;
  padding-bottom: 22px; border-bottom: 1px solid var(--ink-14); margin-bottom: 24px;
}
.doc-facts{
  display:grid; gap: 16px;
  font-size: 15.5px;
  color: var(--ink);
}
.doc-facts li{
  display:flex; gap: 14px;
  list-style: none;
  padding: 0;
}
.doc-facts li::before{
  content:""; flex: 0 0 auto;
  width: 6px; height: 6px; background: var(--blue);
  border-radius: 50%;
  margin-top: 10px;
}
.doc-facts ul{ list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }

/* ---------- CTA Form (rose-soft — momento puntual del journey, decisión Aurea) ---------- */
.cta{
  background: var(--rose-soft);
  /* Padding compacto vs el clamp del .section global, para que rose-soft no
     domine la página. Treatments y Equipo aportan padding propio arriba. */
  padding: clamp(80px, 10vw, 140px) 0;
}
.cta-wrap{
  display:grid;
  grid-template-columns: 45fr 55fr; /* 45% texto / 55% form (decisión brief) */
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.cta-copy{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.cta-copy .editorial-eyebrow{ margin-bottom: 28px; }
.cta-copy h2{
  font-family: var(--serif);
  font-size: clamp(40px, 4.5vw, 64px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}
.cta-copy p{
  font-family: var(--sans);
  color: var(--ink-60);
  font-size: 16px;
  line-height: 1.55;
  max-width: 36ch;
  margin: 24px 0 0;
}
.cta-bullets{
  list-style: none;
  padding: 0;
  margin: 36px 0 0;
  display: grid;
  gap: 14px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
}
.cta-bullets li{
  display: flex;
  gap: 14px;
  align-items: baseline;
}
.cta-bullets li::before{
  /* Dash coral tipográfico (em-dash visual) */
  content: "—";
  color: var(--coral);
  font-family: var(--serif);
  font-weight: 400;
  flex: 0 0 auto;
  line-height: 1;
}

/* --- Form card --- */
.form-card{
  background: var(--cream);
  padding: clamp(32px, 5vw, 48px);
  border-radius: var(--radius-lg);
  /* Sombra suave (no dramática) — el card se siente flotando, sin grito */
  box-shadow: 0 12px 32px -16px rgba(26,26,26,.18);
}
.form-card-eyebrow{
  /* Override del .editorial-eyebrow global: aquí sí va en coral (no ink-60) */
  color: var(--coral);
  margin-bottom: 14px;
}
.form-card-eyebrow::before{
  background: var(--coral); /* línea fina coral, no ink */
}
.form-card-title{
  font-family: var(--serif);
  font-size: clamp(22px, 2.5vw, 28px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 32px;
}
.fgrid{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px 18px; }
.field{ display:flex; flex-direction: column; gap: 6px; }
.field.full{ grid-column: 1 / -1; }
.field label{
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-60);
}
.field input, .field select{
  height: 48px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink-14);
  border-radius: 0;
  padding: 4px 0;
  font-size: 15.5px;
  color: var(--ink);
  outline: none;
  transition: border-color .3s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.field select{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%231A1A1A' stroke-width='1.25'/></svg>");
  background-repeat: no-repeat;
  background-position: right 4px center;
  padding-right: 24px;
  color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{ border-bottom-color: var(--coral); }
.field input::placeholder, .field textarea::placeholder{ color: var(--ink-40); }
.field textarea{
  width: 100%;
  min-height: 120px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink-14);
  border-radius: 0;
  padding: 10px 0;
  font-size: 15.5px;
  color: var(--ink);
  outline: none;
  transition: border-color .3s var(--ease);
  resize: vertical;
  font-family: inherit;
}
.field.legal{ font-size: 13px; color: var(--ink-60); margin-top: 22px; padding-top: 4px; }
.field.legal .check{
  display: inline-flex; align-items: flex-start; gap: 10px;
  cursor: pointer;
}
.field.legal .check input[type="checkbox"]{
  /* Revertir el estilo de input-subrayado (.field input) que la ocultaba:
     appearance:none + border:0 + height:48px + background:transparent. */
  -webkit-appearance: auto;
  appearance: auto;
  width: 18px;
  height: 18px;
  min-width: 18px;
  background: initial;
  border: initial;
  border-radius: 0;
  margin-top: 2px;
  accent-color: var(--blue);
  flex: 0 0 auto;
  cursor: pointer;
}
.field.legal a{ color: var(--blue); border-bottom: 1px solid var(--ink-14); }
.field.legal a:hover{ color: var(--coral); border-bottom-color: var(--coral); }
.btn-big{ padding: 18px 32px !important; font-size: 15.5px !important; width: 100%; justify-content: center; }
.form-footer{
  margin-top: 28px;
  display:flex; justify-content: space-between; align-items:center;
  gap: 16px; flex-wrap: wrap;
}
/* Submit del form-card: pill coral con texto cream (override del .btn global). */
.form-card .btn{
  background: var(--coral);
  color: var(--cream);
  border: 0;
  border-radius: 999px;
  padding: 14px 28px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  box-shadow: none;
  transition: background 200ms var(--ease-soft), transform 200ms var(--ease-soft);
}
.form-card .btn:hover{
  background: var(--coral-deep);
  color: var(--cream);
  transform: translateY(-1px);
  box-shadow: 0 8px 16px -8px rgba(178,106,98,.4);
}
.form-card .micro{
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-40); /* más sutil que el ink-60 antiguo */
  letter-spacing: 0.02em;
}

/* ---------- Testimonial ---------- */
.testimonial{
  background: var(--cream);
  text-align: center;
  position: relative;
}
.testimonial .qmark{
  font-family: var(--serif);
  font-size: clamp(160px, 20vw, 280px);
  color: var(--rose-soft);
  line-height: 1;
  height: .45em;
  overflow: hidden;
  margin-bottom: 24px;
}
.testimonial blockquote{
  max-width: 22ch;
  margin: 0 auto;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(30px, 4.2vw, 56px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}
.testimonial .who{
  margin-top: 48px;
  display:inline-flex; align-items:center; gap: 16px;
  font-size: 13px; letter-spacing: .1em;
}
.testimonial .who .avatar{
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(140deg, var(--blue), var(--coral));
  display:flex; align-items:center; justify-content: center;
  font-family: var(--serif); font-style: italic; color: #fff; font-size: 18px;
}
.testimonial .who span b{ display:block; font-weight: 500; letter-spacing: 0; font-size: 14px; font-family: var(--serif); font-style: normal; color: var(--ink); }
.testimonial .who span em{ font-style: normal; color: var(--ink-60); letter-spacing: .16em; text-transform: uppercase; font-size: 11px; }

/* ---------- Centros ---------- */
.centers{
  background: var(--ink);
  color: var(--cream);
}
.centers h2{ color: var(--cream); }
.centers .section-head .side{ color: rgba(250,246,241,.6); }
.centers .section-head .num{ color: var(--cream); }
.center-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid rgba(250,246,241,.12);
}
.center{
  padding: 32px 28px 44px;
  border-right: 1px solid rgba(250,246,241,.12);
  border-bottom: 1px solid rgba(250,246,241,.12);
  position: relative;
  transition: background .5s var(--ease), transform .7s var(--ease);
  cursor: pointer;
}
.center:last-child{ border-right: 0; }
.center:hover{ background: rgba(201,123,115,.08); transform: translateY(-6px); }
.center .num{
  font-family: var(--serif); color: var(--coral); font-size: 13px; letter-spacing: .04em;
  margin-bottom: 48px;
}
/* A11y: el card de centro ahora usa <h3> en lugar de <h4> para mantener el
   heading-order H2→H3 (antes saltaba H2→H4). El estilo visual es identico. */
.center h3,
.center h4{
  font-family: var(--serif); font-size: 38px; line-height: 1; font-weight: 400;
  margin-bottom: 14px;
  letter-spacing: -0.02em;
}
.center .addr{
  /* A11y: subir contraste sobre fondo --ink (#1A1A1A). .55 daba ratio
     ~4.2:1 que es borderline; .7 sube a ~6:1 con margen. */
  color: rgba(250,246,241,.7); font-size: 13.5px; line-height: 1.5; margin-bottom: 28px;
}
.center .link{
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--cream);
  display:inline-flex; align-items:center; gap: 10px;
}
.center .link svg{ width: 14px; height: 10px; transition: transform .5s var(--ease); }
.center:hover .link svg{ transform: translateX(4px); }
.center:hover .link{ color: var(--blue); }

/* ============================================================================
   FOOTER BLURB — cierre editorial antes del footer
   ============================================================================ */
.footer-blurb{
  background: var(--cream);
  padding: clamp(80px, 10vw, 140px) 0;
  text-align: center;
}
.footer-blurb .container{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.footer-blurb .editorial-eyebrow{
  margin-bottom: 36px;
}
.footer-blurb-text{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 800px;
  margin: 0 auto;
  text-wrap: balance;
}

/* ============================================================================
   FOOTER — fondo ink, 4 columnas + bottom bar
   ============================================================================ */
footer.footer{
  background: var(--ink);
  color: var(--cream);
  padding: 80px clamp(20px, 5vw, 64px) 40px;
}
footer.footer .container{
  /* el footer ya tiene padding horizontal propio en el padding-shorthand */
  padding-left: 0;
  padding-right: 0;
}
.footer-grid{
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: clamp(28px, 4vw, 64px);
  margin-bottom: 64px;
}
.footer-col{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.footer .logo{
  color: var(--cream);
  min-width: 0;
  min-height: 0;
}
.logo-wordmark--invert{
  color: var(--cream);
  font-size: 48px;
  letter-spacing: 0.04em;
}
.logo:hover .logo-wordmark--invert{ color: var(--coral); }
.footer-tagline{
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  color: rgba(250,246,241,.6);
  margin: 28px 0 0;
  max-width: 32ch;
}
.footer-h5{
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(250,246,241,.6);
  margin: 0 0 18px;
  font-weight: 500;
}
.footer-h5--mt{ margin-top: 32px; }
.footer-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
  font-family: var(--sans);
  font-size: 14px;
}
.footer-list a{
  color: var(--cream);
  text-decoration: none;
  transition: color 0.3s var(--ease);
}
.footer-list a:hover{ color: var(--coral); }
.footer-wa-link{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.footer-wa-link .wa-ic{
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--wa);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.footer-wa-link .wa-ic svg{
  width: 13px;
  height: 13px;
  color: #fff;
}

/* Bottom bar */
.footer-bottom{
  padding: 24px 0 0;
  border-top: 1px solid rgba(244,239,233,.10);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.02em;
  /* A11y: cream a .7 opacidad sobre --ink (#1A1A1A) da ratio ~7.5:1.
     Antes a .4 daba ~3.5:1 → falla WCAG AA. */
  color: rgba(244,239,233,.7);
}
.footer-bottom a{
  color: rgba(244,239,233,.7);
  text-decoration: none;
  transition: color 0.3s var(--ease);
}
.footer-bottom a:hover{ color: var(--cream); }
.footer-bottom-links{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.footer-bottom-links .sep{
  opacity: 0.6;
}

/* Responsive: 1 columna en mobile */
@media (max-width: 768px){
  .footer-grid{
    grid-template-columns: 1fr;
    gap: 40px;
    margin-bottom: 40px;
  }
  .footer-bottom{
    flex-direction: column;
    align-items: flex-start;
  }
}

.fb-link{
  display:inline-flex; align-items:center; gap: 10px;
  color: rgba(250,246,241,.85); font-size: 14px;
}
.fb-link svg{ width: 16px; height: 16px; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px){
  .hero-grid{ grid-template-columns: 1fr; gap: 48px; }
  .hero-image{ aspect-ratio: 1/1; max-width: 100%; }
  .section-head{ grid-template-columns: 1fr; gap: 20px; }
  .treatments-grid{ grid-template-columns: repeat(2, 1fr); }
  .tcard{ border-right: 1px solid var(--ink-14); min-height: 420px; } /* reset borde para que aplique nth-child correcto a 2 cols */
  .tcard:nth-child(3n){ border-right: 1px solid var(--ink-14); } /* anula la regla desktop de 3 cols */
  .tcard:nth-child(2n){ border-right: 0; } /* última de cada fila en grid 2 cols */
  .center-grid{ grid-template-columns: repeat(2,1fr); }
  .center:nth-child(2){ border-right: 0; }
  .cta-wrap{ grid-template-columns: 1fr; }
  .doc-row, .doc-row.reverse{ grid-template-columns: 1fr; }
  .doc-row.reverse .doc-img{ order: 0; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px){
  :root{ --pad: 22px; }
  .nav-links, .nav-phone{ display: none; }
  .nav-burger{ display: inline-flex; }
  .nav-right{ gap: 8px; flex-shrink: 0; }
  .nav-right .btn{ padding: 8px 14px; font-size: 13px; }
  .nav-inner{ height: 64px; gap: 12px; }
  .logo{ flex-shrink: 0; display: inline-flex; min-width: 70px; min-height: 32px; }
  .logo-wordmark{ font-size: 26px; }
  .hero h1{ font-size: 56px; line-height: .98; }
  .hero-sub{ font-size: 17px; }
  .hero-meta{ grid-template-columns: 1fr 1fr; gap: 24px; }
  .hero-meta .n{ font-size: 30px; }
  .tape-item{ font-size: 18px; }
  .treatments-grid{ grid-template-columns: 1fr; }
  .tcard{ border-right: 0; min-height: auto; }
  .fgrid{ grid-template-columns: 1fr; }
  .center-grid{ grid-template-columns: 1fr; }
  .center{ border-right: 0; }
  .footer-grid{ grid-template-columns: 1fr; gap: 32px; }
  .testimonial blockquote{ font-size: 28px; }
  .form-footer{ flex-direction: column; align-items: stretch; }
  .form-footer .btn{ justify-content: center; }
}

/* ---------- Tratamiento (paginas) ---------- */
.tratamiento-hero{ padding: clamp(28px, 5vw, 60px) 0 clamp(20px, 3vw, 36px); }
.tratamiento-hero .hero-sub{ margin-bottom: 44px; }

/* Hero sin .hero-meta (ej: Radiesse con price=null) — sin las 3 stats, la copy
   queda corta vs la imagen 4/5 (alta). El grid centraba ambas y dejaba ~250px
   de aire muerto entre copy y body. Tres ajustes con :has() solo en este caso:
   - margin-bottom CTAs: 0 (eliminado el reservado para stats)
   - align-items: start (copy se pega arriba, no flota al medio)
   - aspect-ratio imagen: 1/1 (cuadrada, recorta ~140px de altura) */
.tratamiento-hero .hero-grid:not(:has(.hero-meta)){
  align-items: start;
}
.tratamiento-hero .hero-grid:not(:has(.hero-meta)) .hero-cta-row{
  margin-bottom: 0;
}
.tratamiento-hero .hero-grid:not(:has(.hero-meta)) .hero-image{
  aspect-ratio: 1/1;
}

.tratamiento-body{
  background: var(--cream);
  /* top reducido — antes 56px max, ahora 36px (objetivo: ~50-70px de aire entre stats y H2) */
  padding: clamp(20px, 3vw, 36px) 0 clamp(72px, 10vw, 140px);
  /* flow-root contiene los floats internos (.prose-figure--right/--left) para que
     no invadan la siguiente seccion (testimonios). Sin esto, una figure flotada
     al final del body se proyectaba sobre el bloque de testimonios. */
  display: flow-root;
}
.body-prose{
  max-width: 760px;
  margin: 0 auto;
}
.body-prose p{
  font-family: var(--sans);
  font-size: clamp(17px, 1.15vw, 19px);
  line-height: 1.7;
  color: var(--ink);
  margin: 0 0 22px;
  font-weight: 400;
}

/* ---------- Paso 5: centro.php ---------- */
.centro-info{ padding: clamp(56px, 8vw, 100px) 0; }
.centro-grid{
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(40px, 6vw, 72px);
  align-items: start;
}
.centro-datos{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex; flex-direction: column; gap: 18px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
}
.centro-datos li{
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ink-08);
}
.centro-datos li:last-child{ border-bottom: 0; }
.centro-datos strong{
  display: block;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 6px;
}
.centro-datos a{ color: var(--ink); border-bottom: 1px solid var(--ink-14); }
.centro-datos a:hover{ color: var(--blue); border-bottom-color: var(--blue); }
.centro-datos .hday{ display: inline-block; margin-right: 18px; }
.centro-mapa iframe,
.centro-mapa .mapa-placeholder{ box-shadow: 0 20px 48px rgba(26,26,26,.08); }

/* ---------- Paso 5: lista de tratamientos dentro del centro ---------- */
.tratamientos-en-ciudad{ padding: clamp(56px, 8vw, 100px) 0; background: var(--cream-warm); }
.tratamientos-lista{
  display: flex; flex-direction: column;
  border-top: 1px solid var(--ink-14);
}
.trat-row{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 22px 8px;
  border-bottom: 1px solid var(--ink-14);
  transition: background .35s var(--ease), padding-left .35s var(--ease);
}
.trat-row:hover{
  background: rgba(255,255,255,.5);
  padding-left: 22px;
}
.trat-name{
  font-family: var(--serif);
  font-size: clamp(20px, 2.3vw, 28px);
  line-height: 1.15;
  color: var(--ink);
  font-weight: 400;
}
.trat-meta{
  display: flex; align-items: center; gap: 18px;
  font-size: 13px; letter-spacing: .08em;
  color: var(--blue);
  white-space: nowrap;
}
.trat-precio{
  padding: 6px 12px;
  background: rgba(201,123,115, 0.12);
  color: var(--coral);
  border-radius: 999px;
  font-weight: 500;
}
.trat-arrow{
  font-size: 18px;
  transition: transform .4s var(--ease);
}
.trat-row:hover .trat-arrow{ transform: translateX(6px); }

/* ---------- Paso 5: listado-tratamientos-ciudad.php (grid tarjetas) ---------- */
.tratamientos-grid-section{ padding: clamp(48px, 7vw, 96px) 0; }
.cards-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.trat-card{
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--ink-08);
  border-radius: 16px;
  overflow: hidden;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s var(--ease);
  min-height: 360px;
}
.trat-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 24px 56px rgba(26,26,26,.08);
  border-color: var(--ink-14);
}
.trat-card-img{
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--cream-warm);
}
.trat-card-img img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease);
}
.trat-card:hover .trat-card-img img{ transform: scale(1.04); }
.trat-card-body{
  padding: 22px 22px 24px;
  display: flex; flex-direction: column; gap: 14px;
  flex: 1;
}
.trat-card-title{
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.2;
  color: var(--ink);
  font-weight: 400;
  margin: 0;
  letter-spacing: -0.01em;
}
.trat-card-meta{
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  font-size: 12.5px;
  letter-spacing: .06em;
  color: var(--blue);
}

/* ---------- Paso 5: cross-link entre centros ---------- */
.otros-centros{ padding: clamp(48px, 7vw, 96px) 0; }
.otros-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.otro-centro{
  padding: 28px 28px 32px;
  background: #fff;
  border: 1px solid var(--ink-08);
  border-radius: 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 6px 16px;
  align-items: center;
  transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.otro-centro:hover{
  transform: translateY(-3px);
  border-color: var(--coral);
  box-shadow: 0 18px 40px rgba(26,26,26,.06);
}
.otro-ciudad{
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--coral);
  grid-column: 1;
}
.otro-nombre{
  font-family: var(--serif);
  font-size: 22px;
  color: var(--ink);
  line-height: 1.1;
  grid-column: 1;
}
.otro-arrow{
  grid-column: 2; grid-row: 1 / span 2;
  font-size: 22px; color: var(--blue);
  transition: transform .4s var(--ease);
}
.otro-centro:hover .otro-arrow{ transform: translateX(6px); color: var(--coral); }

/* Responsive Paso 5 */
@media (max-width: 1024px){
  .centro-grid{ grid-template-columns: 1fr; }
  .cards-grid{ grid-template-columns: repeat(2, 1fr); }
  .otros-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  .cards-grid{ grid-template-columns: 1fr; }
  .trat-row{ grid-template-columns: 1fr; gap: 10px; }
}

/* ---------- Paso 6: contacto (grid de 4 centros con mapas) ---------- */
.contacto-form-section{ padding: clamp(56px, 8vw, 100px) 0; background: var(--cream-warm); }
.centros-contacto{ padding: clamp(56px, 8vw, 100px) 0; }
.centros-contacto-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
.centro-contacto-card{
  background: #fff;
  border: 1px solid var(--ink-08);
  border-radius: 16px;
  padding: 26px;
  display: flex; flex-direction: column; gap: 18px;
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.centro-contacto-card:hover{
  border-color: var(--ink-14);
  box-shadow: 0 18px 44px rgba(26,26,26,.07);
}
.centro-header .centro-ciudad{
  display: inline-block;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--coral);
}
.centro-header .centro-nombre{
  font-family: var(--serif);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 400; line-height: 1.15;
  color: var(--ink);
  margin: 6px 0 0 0;
}
.centro-mapa-wrap{ overflow: hidden; border-radius: 12px; }
.centro-direccion p{
  font-size: 15px; line-height: 1.55;
  color: var(--ink);
  margin: 0;
}
.centro-links{ margin-top: auto; }
.centro-link{
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; letter-spacing: .08em;
  color: var(--blue);
  font-weight: 500;
  text-transform: none;
  transition: color .3s var(--ease), gap .3s var(--ease);
}
.centro-link:hover{ color: var(--coral); gap: 12px; }

/* ---------- Paso 6: paginas legales (aviso_legal + cookies) ---------- */
.pagina-legal-hero{ padding: clamp(40px, 6vw, 80px) 0 clamp(20px, 3vw, 40px); }
.pagina-legal-body{ padding: clamp(32px, 5vw, 72px) 0 clamp(72px, 9vw, 120px); }
.legal-prose{
  max-width: 780px;
  margin: 0 auto;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.75;
}
.legal-prose h2{
  font-family: var(--serif);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 400;
  margin: 48px 0 18px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.legal-prose h2:first-child{ margin-top: 0; }
.legal-prose h3{
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 32px 0 10px;
}
.legal-prose p{ margin: 0 0 18px; }
.legal-prose a{ color: var(--blue); border-bottom: 1px solid var(--ink-14); }
.legal-prose a:hover{ color: var(--coral); border-bottom-color: var(--coral); }
.legal-prose code{
  background: var(--cream-warm);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.legal-prose ul{ padding-left: 22px; margin: 0 0 18px; }
.legal-prose ul li{ margin-bottom: 8px; }
.legal-prose strong{ font-weight: 600; color: var(--ink); }

@media (max-width: 900px){
  .centros-contacto-grid{ grid-template-columns: 1fr; }
}

/* ---------- Mobile menu panel (burger) ---------- */
.mobile-menu{
  position: fixed; top: 0; left: 0; right: 0;
  max-height: calc(100vh - 0px);
  background: rgba(255, 253, 248, 0.98);
  backdrop-filter: saturate(1.3) blur(18px);
  -webkit-backdrop-filter: saturate(1.3) blur(18px);
  padding: 90px 22px 40px;
  transform: translateY(-100%);
  transition: transform .5s cubic-bezier(0.16, 1, 0.3, 1);
  overflow-y: auto;
  z-index: 40;
  visibility: hidden;
  pointer-events: none;
}
body.nav-open .mobile-menu{
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
}
.mobile-nav{ display: flex; flex-direction: column; gap: 4px; max-width: 560px; margin: 0 auto; }
.mobile-group{
  border-bottom: 1px solid var(--ink-08);
  padding: 4px 0;
}
.mobile-group summary{
  padding: 16px 4px;
  font-size: 14px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--blue);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  display: flex; justify-content: space-between; align-items: center;
}
.mobile-group summary::-webkit-details-marker{ display: none; }
.mobile-group summary::after{
  content: "+";
  font-size: 22px;
  color: var(--ink-60);
  transition: transform .3s var(--ease);
}
.mobile-group[open] summary::after{ content: "−"; }
.mobile-sublist{
  display: flex; flex-direction: column;
  padding: 4px 4px 14px;
}
.mobile-sublist a{
  padding: 10px 0;
  font-size: 15px;
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
}
.mobile-sublist a:hover{ color: var(--coral); }
.mobile-direct{
  padding: 18px 4px;
  font-size: 14px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--blue);
  font-weight: 500;
  border-bottom: 1px solid var(--ink-08);
}
.mobile-direct:hover{ color: var(--coral); }
.mobile-footer{
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 28px;
  padding: 4px;
}
.mobile-footer .mobile-tel{
  font-family: var(--sans);
  font-size: 22px; font-weight: 500;
  color: var(--blue);
}
.mobile-footer .mobile-email{
  font-size: 14px;
  color: var(--ink-60);
}
/* Burger animado cuando abierto */
body.nav-open .nav-burger span{ background: transparent; }
body.nav-open .nav-burger span::before{ transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-burger span::after{ transform: translateY(-7px) rotate(-45deg); }
/* Bloquear scroll del body cuando el menu esta abierto */
body.nav-open{ overflow: hidden; }

/* El panel solo aplica en mobile (el burger solo aparece ahi) */
@media (min-width: 769px){
  .mobile-menu{ display: none; }
}


/* ============================================================
   FLOATING CTAs (WhatsApp + Sticky "Pedir cita")
   ============================================================ */

/* ----- WhatsApp flotante ----- */
.whatsapp-float{
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 998;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.35);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  animation: wa-pulse 2.5s ease-in-out infinite;
}
.whatsapp-float:hover{
  transform: scale(1.08);
  animation: none;
  box-shadow: 0 6px 24px rgba(37, 211, 102, 0.5);
}
.whatsapp-float svg{
  width: 32px;
  height: 32px;
  fill: white;
}
@keyframes wa-pulse{
  0%, 100% { box-shadow: 0 4px 16px rgba(37, 211, 102, 0.35); }
  50%      { box-shadow: 0 4px 16px rgba(37, 211, 102, 0.35), 0 0 0 12px rgba(37, 211, 102, 0.12); }
}

/* ----- Sticky CTA "Reservar cita" ----- */
.sticky-cta{
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(200%);
  z-index: 997;
  background: var(--blue);
  color: var(--cream);
  padding: 12px 20px;
  border-radius: 100px;
  box-shadow: 0 8px 32px rgba(26,26,26, 0.25);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  max-width: calc(100vw - 120px);
}
.sticky-cta.visible{
  transform: translateX(-50%) translateY(0);
}
.sticky-cta-inner{
  display: flex;
  align-items: center;
  gap: 14px;
}
.sticky-cta-msg{
  font-size: 14px;
  font-family: var(--serif);
  font-style: italic;
  color: rgba(243, 235, 220, 0.85);
  white-space: nowrap;
}
.sticky-cta-btn{
  background: var(--cream);
  color: var(--blue-deep);
  padding: 9px 18px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sticky-cta-btn:hover{
  background: white;
  transform: scale(1.02);
}
.sticky-cta-arrow{
  transition: transform 0.3s var(--ease);
}
.sticky-cta-btn:hover .sticky-cta-arrow{
  transform: translateX(3px);
}
.sticky-cta-close{
  background: transparent;
  border: none;
  color: var(--cream);
  font-size: 22px;
  cursor: pointer;
  opacity: 0.5;
  line-height: 1;
  padding: 0 4px;
  transition: opacity 0.3s;
}
.sticky-cta-close:hover{ opacity: 1; }

/* Ocultar el CTA cuando el usuario esta sobre #contacto o llega al footer */
.sticky-cta.hide-near-form{
  transform: translateX(-50%) translateY(200%);
}

/* ----- Mobile: WhatsApp compacto + sticky sin texto ----- */
@media (max-width: 700px){
  .sticky-cta{
    bottom: 16px;
    padding: 10px 14px;
    left: 16px;
    right: 92px; /* deja hueco al WhatsApp */
    transform: translateY(200%);
    max-width: calc(100vw - 108px);
  }
  .sticky-cta.visible{
    transform: translateY(0);
  }
  .sticky-cta.hide-near-form{
    transform: translateY(200%);
  }
  .sticky-cta-msg{ display: none; } /* solo boton en mobile */
  .sticky-cta-btn{
    padding: 9px 16px;
    font-size: 13px;
    flex: 1;
    justify-content: center;
  }
  .whatsapp-float{
    width: 54px;
    height: 54px;
    bottom: 16px;
    right: 16px;
  }
  .whatsapp-float svg{
    width: 28px;
    height: 28px;
  }
}

/* ============================================================
   IDEA 9 — Indices con grid de tratamientos
   tratamientos.php (3 secciones) y acido-hialuronico (1 seccion)
   Auto-generado desde tratamientos.json. Tarjetas con hover suave.
   ============================================================ */

/* Hero del indice — ligeramente mas estrecho, sin imagen.
   padding-top reducido en 2 pasadas (3 jun 2026): 120 -> 64 -> 32px.
   Feedback Aurea: "parece que no has hecho nada" -> recorte mas agresivo. */
.indice-hero{
  padding-top: clamp(16px, 2vw, 28px);
  /* padding-bottom reducido 56 -> 20 (3 jun, feedback Aurea: mucho aire bajo CTAs). */
  padding-bottom: 20px;
}
.hero-grid-narrow{
  max-width: 880px;
  margin: 0 auto;
}
.hero-grid-narrow .hero-copy{
  text-align: left;
}
/* IMPORTANTE: usamos selector reforzado `.hero h1.h1-indice` (specificity 0,2,2)
   para GANAR a `.hero h1.h1-tratamiento` (linea 342) que tambien aplica porque
   el HTML tiene <h1 class="h1-tratamiento h1-indice">. Sin este refuerzo, el H1
   de los hubs se quedaba en 72px (clamp 42-5.6vw-72) en lugar de los 44px deseados. */
.hero h1.h1-indice{
  font-size: clamp(26px, 3vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 500;
  margin: 0 0 28px;
}
.h1-indice em{
  font-family: var(--serif);
  font-style: italic;
  color: var(--coral);
}

/* ----------------------------------------------------------------------
   Hero fullwidth de los indices (tratamientos.php + acido-hialuronico)
   - Sustituye a .hero-grid-narrow en las 2 paginas indice
   - 1 columna alineada a la izquierda. NO 2-cols (no hay imagen)
   - H1 escala mas grande aprovechando el ancho del container
   - Asimetria editorial intencional: la copy ocupa ~78% del container,
     deja respirar a la derecha (regla CLAUDE.md: el grid se rompe a proposito)
   ---------------------------------------------------------------------- */
.hero--fullwidth{
  grid-template-columns: 1fr;
  max-width: 100%;
  margin: 0;
  align-items: start;
  gap: 0;
  /* respirar la entrada — transicion suave al cargar */
  transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.hero--fullwidth .hero-copy{
  max-width: 78%;
  text-align: left;
}
.hero--fullwidth .hero-sub{
  max-width: 60ch;
}
@media (max-width: 980px){
  .hero--fullwidth .hero-copy{ max-width: 100%; }
}

/* Override del H1 de hubs fullwidth (Acido / Facial / Corporal).
   3 jun 2026: ajuste final pedido por Aurea = 97px en desktop. */
.hero--fullwidth h1.h1-tratamiento.h1-indice{
  font-size: clamp(40px, 7.6vw, 97px);
  line-height: 1.0;
  letter-spacing: -0.03em;
  margin: 0 0 28px;
  text-wrap: balance;
}
.hero--fullwidth h1.h1-tratamiento.h1-indice em{
  font-family: var(--serif);
  font-style: italic;
  color: var(--coral);
  font-weight: 400;
}
.hero--fullwidth h1.h1-tratamiento.h1-indice .h1-sub{
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(16px, 1.6vw, 22px);
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--ink-60);
  margin-top: 8px;
}
@media (max-width: 720px){
  .hero--fullwidth h1.h1-tratamiento.h1-indice{
    font-size: clamp(24px, 6vw, 36px);
    margin-bottom: 16px;
  }
  .hero--fullwidth h1.h1-tratamiento.h1-indice .h1-sub{
    font-size: clamp(14px, 3.6vw, 18px);
  }
}

/* Anchors bajo el hero del indice general */
.indice-anchors{
  display: block;
  background: var(--cream);
  padding: 28px 0;
  border-bottom: 1px solid var(--ink-08);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-60);
}
.indice-anchors > .container{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.indice-anchors a{
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color .28s cubic-bezier(0.16, 1, 0.3, 1),
              border-color .28s cubic-bezier(0.16, 1, 0.3, 1);
}
.indice-anchors a:hover,
.indice-anchors a:focus-visible{
  color: var(--blue);
  border-bottom-color: var(--blue);
  outline: none;
}
.indice-anchors .dot{
  color: var(--ink-40);
}

/* Section head del grid */
.grid-section{
  padding: 96px 0;
  scroll-margin-top: 88px; /* anclas no se ocultan tras el nav sticky */
}
.grid-section + .grid-section{
  border-top: 1px solid var(--ink-14);
}
.grid-section-head{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 24px;
  margin-bottom: 56px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--ink-14);
}
.grid-eyebrow{
  grid-column: 1 / -1;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 16px;
}
.grid-h2{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0;
}
.grid-h2 em{
  font-style: italic;
  /* A11y: coral-ink en lugar de coral pálido para texto sobre cream. */
  color: var(--coral-ink);
}
.grid-counter{
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-60);
  white-space: nowrap;
  padding-bottom: 6px;
}

/* Grid responsivo */
.treatment-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
@media (max-width: 980px){
  .treatment-grid{ grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 640px){
  .treatment-grid{ grid-template-columns: 1fr; gap: 20px; }
  .grid-section-head{ grid-template-columns: 1fr; }
  .grid-counter{ justify-self: start; }
  .grid-section{ padding: 64px 0; }
}

/* Tarjeta */
.treatment-card{
  position: relative;
  background: var(--cream-warm, #FAF6F1);
  border: 1px solid var(--ink-14);
  border-radius: 2px;
  overflow: hidden;
  transition:
    transform .28s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow .28s cubic-bezier(0.16, 1, 0.3, 1),
    border-color .28s cubic-bezier(0.16, 1, 0.3, 1);
}
.treatment-card:hover,
.treatment-card:focus-within{
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 18px 38px -22px rgba(26,26,26, .35),
              0 8px 18px -16px rgba(26,26,26, .18);
  border-color: var(--blue);
}
.treatment-card .card-link{
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.card-image{
  position: relative;
  /* 3 jun 2026: reducido 4/3 -> 3/2 (feedback Aurea: cards demasiado grandes).
     Mantiene 3 columnas y mismo ancho; las imagenes y por tanto las cards bajan
     ~12% de altura. Afecta a tratamientos.php + 3 hubs + listados ciudad. */
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--ink-14);
}
.card-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .6s cubic-bezier(0.16, 1, 0.3, 1);
}
.treatment-card:hover .card-image img,
.treatment-card:focus-within .card-image img{
  transform: scale(1.04);
}
.card-body{
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 22px 20px;
  gap: 10px;
}
.card-eyebrow{
  font-family: var(--serif);
  font-style: italic;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--ink-40);
}
.card-title{
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.18;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0;
}
.card-teaser{
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-60);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-foot{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--ink-14);
  font-family: var(--sans);
  font-size: 12.5px;
  letter-spacing: 0.04em;
}
.card-price{
  color: var(--ink);
  font-weight: 500;
}
.card-cta{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--blue);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
}
.card-cta svg{
  width: 16px;
  height: auto;
  transition: transform .28s cubic-bezier(0.16, 1, 0.3, 1);
}
.treatment-card:hover .card-cta svg,
.treatment-card:focus-within .card-cta svg{
  transform: translateX(4px);
}
.treatment-card .card-link:focus-visible{
  outline: none;
}
.treatment-card:focus-within{
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

/* Empty state (no debe ocurrir, pero por si acaso) */
.grid-empty{
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-60);
  text-align: center;
  padding: 32px 0;
}



/* ============================================================================
   TESTIMONIOS — sala oscura editorial (negro Carmen González) + carrusel
   ============================================================================
   Sistema escalable: el JS calcula slidesPerView por viewport y genera dots.
   Cuando el JSON tenga N testimonios, el carrusel los rota todos.
   prefers-reduced-motion: oculta dots, no rota, scroll horizontal manual.

   IMPORTANTE: usa --color-section-dark (NO --blue-ink) para ser independiente
   del color de marca. Si la paleta cambia a turquesa, esta sección no se toca.
   ============================================================================ */
.testimonios-dark{
  background: var(--color-section-dark);
  color: var(--cream);
  padding: clamp(72px, 10vw, 120px) 0;
  overflow: hidden;
  position: relative;
}
.testimonios-dark .container{
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

/* --- Header --- */
.testimonios-head{
  text-align: center;
  margin-bottom: clamp(40px, 6vw, 72px);
}
.testimonios-head .eyebrow{
  display: inline-block;
  color: var(--coral);
  letter-spacing: .26em;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.testimonios-h2{
  font-family: var(--serif);
  font-weight: 500; /* refinado 5.4: era 400 — más peso editorial sobre fondo negro */
  font-size: clamp(40px, 5vw, 72px); /* refinado 5.4: era clamp(36, 5.2, 64) */
  line-height: 1.05; /* refinado 5.4: era 1.08 */
  letter-spacing: -.02em;
  color: var(--cream);
  max-width: 880px;
  margin: 0 auto;
}
.testimonios-h2 em{
  font-style: italic;
  color: var(--coral);
}

/* --- Carrusel --- */
.testimonios-carousel{
  position: relative;
  margin-inline: calc(var(--pad) * -1); /* tira hacia los bordes para que el track respire */
  padding-inline: var(--pad);
  overflow: hidden;
}
.testimonios-track{
  display: flex;
  gap: 24px;
  transition: transform 720ms var(--ease);
  will-change: transform;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.testimonios-track.is-dragging,
.testimonios-track.is-dragging .testimonio-card{
  transition: none;
  cursor: grabbing;
}

/* --- Card --- */
.testimonio-card{
  flex: 0 0 calc((100% - 48px) / 3); /* 3 cards desktop, gap 24px */
  background: var(--color-section-dark-card);
  border: 1px solid rgba(255,255,255,.08); /* separación sutil sobre negro sin chillar */
  border-radius: 16px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
  outline: none;
  cursor: grab;
}
.testimonio-card:hover,
.testimonio-card:focus-visible{
  transform: translateY(-4px) scale(1.015);
  box-shadow: 0 18px 42px rgba(0,0,0,.55);
  border-color: rgba(255,255,255,.14);
}
.testimonio-card:focus-visible{
  outline: 2px solid var(--coral);
  outline-offset: 4px;
}

.testimonio-card .stars{
  color: var(--coral);
  font-size: 16px;
  letter-spacing: 2px;
  line-height: 1;
}

.testimonio-card .texto{
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.62;
  color: var(--cream);
  margin: 0;
  position: relative;
  /* Limita a ~6 líneas para que las cards mantengan altura comparable */
  display: -webkit-box;
  -webkit-line-clamp: 7;
  line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1; /* empuja al autor abajo */
}
.testimonio-card .texto .quote-mark{
  font-style: normal;
  color: var(--coral);
  font-size: 1.25em;
  line-height: 0;
  display: inline;
  margin: 0 .05em;
  vertical-align: -.05em;
}

.testimonio-card .autor{
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.testimonio-card .avatar{
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--coral);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .04em;
  flex-shrink: 0;
  font-family: var(--sans);
}
.testimonio-card .autor-meta{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.testimonio-card .autor strong{
  color: var(--cream);
  font-weight: 600;
  font-size: 14.5px;
  font-family: var(--sans);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.testimonio-card .autor .meta{
  color: #777; /* gris medio: diferencia clara del autor sin chillar sobre negro */
  font-size: 12.5px;
  letter-spacing: .02em;
  font-family: var(--sans);
}

/* --- Dots --- */
.testimonios-dots{
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 36px;
  padding: 0 var(--pad);
}
.testimonios-dots .dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #555; /* inactivo: gris medio sobre fondo negro */
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background .3s var(--ease), transform .3s var(--ease), width .3s var(--ease);
}
.testimonios-dots .dot:hover{
  background: #888;
}
.testimonios-dots .dot.is-active{
  background: var(--coral);
  width: 28px;
  border-radius: 4px;
}
.testimonios-dots .dot:focus-visible{
  outline: 2px solid var(--coral);
  outline-offset: 3px;
}

/* --- Footer (Google badge + CTA) --- */
.testimonios-foot{
  margin-top: clamp(40px, 6vw, 64px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.testimonios-foot .google-badge{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 13px;
  letter-spacing: .03em;
  color: rgba(243,235,220,.7); /* crema 70% — sobrio sobre negro */
  font-family: var(--sans);
}
.testimonios-foot .google-badge svg{
  display: block; /* Logo Google con sus colores oficiales (no monochrome) */
}
.testimonios-foot .cta-google{
  display: inline-block;
  color: var(--coral);
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  font-family: var(--sans);
  letter-spacing: .04em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--coral);
  border-radius: 999px;
  padding: 12px 26px;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.testimonios-foot .cta-google:hover,
.testimonios-foot .cta-google:focus-visible{
  background: var(--coral);
  color: var(--color-section-dark);
  border-color: var(--coral);
}
.testimonios-foot .cta-google:focus-visible{
  outline: 2px solid var(--cream);
  outline-offset: 3px;
}

/* --- Responsive --- */
@media (max-width: 1079px){
  .testimonio-card{
    flex: 0 0 calc((100% - 24px) / 2); /* 2 cards tablet */
  }
}
@media (max-width: 719px){
  .testimonios-track{
    gap: 16px;
  }
  .testimonio-card{
    flex: 0 0 100%; /* 1 card móvil */
    padding: 26px;
    cursor: grab;
  }
  .testimonio-card .texto{
    font-size: 16px;
  }
  .testimonios-h2{
    font-size: clamp(30px, 8vw, 42px);
  }
}

/* --- Accesibilidad: prefers-reduced-motion --- */
@media (prefers-reduced-motion: reduce){
  .testimonios-track{
    transition: none !important;
    transform: none !important;
    flex-wrap: wrap;
    overflow: visible;
  }
  .testimonio-card{
    flex: 0 0 calc((100% - 48px) / 3);
  }
  .testimonios-dots{
    display: none;
  }
  .testimonio-card{
    transition: none !important;
  }
}

/* ============================================================================
   HERO HOMEPAGE V2 — VOGUE EDITORIAL COVER
   ----------------------------------------------------------------------------
   Reemplaza el hero V1 (split grid con foto a la derecha + meta hero).
   Diseño editorial cover: foto full-bleed con vignette warm + columna izquierda
   con wordmark gigante (Playfair Display 900), eyebrow, slogan italic-accent
   y CTAs bracketed.

   Tokens hero (--hero-fg, --hero-italic) ya definidos en :root global.
   La imagen ya tiene horneado el fondo dark warm — solo overlay degradado
   izquierda→derecha para legibilidad del bloque editorial.
   ============================================================================ */
.hero.is-vogue{
  /* Reset del padding del .hero V1 (que aún sirve a las páginas de tratamiento) */
  padding: 0;
  --hero-bg-base: #1C1614; /* base dark warm de la foto, no exportado a :root */
  position: relative;
  background: var(--hero-bg-base);
  color: var(--hero-fg);
  width: 100%;
  min-height: max(100vh, 880px);
  overflow: hidden;
  isolation: isolate;
}
.hero.is-vogue ::selection{ background: var(--hero-italic); color: var(--cream); }

/* --- Foto full-bleed --- */
.hero.is-vogue .hero-photo{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  z-index: 0;
  user-select: none;
  pointer-events: none;
}

/* --- Overlay degradado izquierda→derecha (legibilidad del bloque editorial) --- */
.hero.is-vogue::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(46, 42, 40, 0.55) 0%,
    rgba(46, 42, 40, 0)   55%
  );
  z-index: 1;
  pointer-events: none;
}

/* --- Capa de contenido (grid 50/50: copy izq, foto a la derecha respira) --- */
.hero.is-vogue .hero-inner{
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 50% 50%;
}

/* LEFT — columna editorial con respiración Vogue */
.hero.is-vogue .hero-copy{
  padding: 80px clamp(20px, 2.6vw, 40px) 100px clamp(28px, 4vw, 60px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0;
  height: 100%;
}

/* Wordmark + eyebrow agrupados (flush-left con slogan) */
.hero.is-vogue .hero-mast{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: max-content;
  margin: 0;
}

/* Wordmark STETIA — valores exactos del último ajuste de la marca */
.hero.is-vogue .hero-wordmark{
  font-family: var(--serif);
  font-weight: 900;
  font-style: normal;
  font-size: clamp(108px, 14.5vw, 216px);
  line-height: 0.85;
  letter-spacing: -0.01em;
  color: var(--hero-fg);
  margin: 0;
  white-space: nowrap;
  font-optical-sizing: auto;
}

/* Eyebrow — subtítulo inmediato del wordmark */
.hero.is-vogue .hero-eyebrow{
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--hero-fg);
  margin: 4px 0 0;
  display: block;
}

/* Slogan dominante — Playfair italic con acentos coral en <em> */
.hero.is-vogue .hero-slogan{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(44px, 5vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--hero-fg);
  margin: 0 0 24px;
  text-wrap: pretty;
  align-self: stretch;
}
.hero.is-vogue .hero-slogan em{
  font-style: italic;
  font-weight: 400;
  color: var(--hero-italic);
}

/* Bloque inferior: slogan + subline + CTAs como unidad cohesiva */
.hero.is-vogue .hero-foot{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

/* Subline en serif para sostener el tono editorial */
.hero.is-vogue .hero-subline{
  font-family: var(--serif);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(14px, 1.1vw, 18px);
  line-height: 1.4;
  color: var(--hero-fg);
  max-width: 36ch;
  margin: 0 0 32px;
}

/* CTAs — píldoras pequeñas con brackets editoriales */
.hero.is-vogue .hero-ctas{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}
.hero.is-vogue .hero-cta{
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(12px, 0.85vw, 14px);
  letter-spacing: 0.01em;
  padding: 9px 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  border: 1.5px solid var(--hero-fg);
  background: var(--hero-fg);
  color: var(--ink);
  white-space: nowrap;
  cursor: pointer;
  transition:
    background 0.4s var(--ease),
    color 0.4s var(--ease),
    transform 0.4s var(--ease);
}
.hero.is-vogue .hero-cta:hover{
  background: var(--hero-italic);
  border-color: var(--hero-italic);
  color: var(--cream);
  transform: translateY(-1px);
}
.hero.is-vogue .hero-cta--ghost{
  background: transparent;
  color: var(--hero-fg);
}
.hero.is-vogue .hero-cta--ghost:hover{
  background: var(--hero-italic);
  border-color: var(--hero-italic);
  color: var(--cream);
}

/* Right side: la foto se asoma — el grid solo necesita reservar espacio */
.hero.is-vogue .hero-spacer{ width: 100%; height: 100%; }

/* Responsive: stack en móvil */
/* Hero V2 — mobile (≤768px)
   Foto full-bleed absoluta + texto encima sobre overlay reforzado.
   La regla del brief: la foto NO se separa como bloque arriba con texto debajo
   (eso era el bug). Aquí la foto cubre toda la sección y el texto va encima
   anclado al fondo (justify-content: flex-end) para legibilidad. */
@media (max-width: 768px){
  .hero.is-vogue{
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    aspect-ratio: auto;
    max-height: none;
  }
  .hero.is-vogue .hero-photo{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 78% center; /* desplaza el crop a la derecha para que se vea la cara */
  }
  /* Overlay vertical reforzado: claro arriba, oscuro abajo (donde va el texto) */
  .hero.is-vogue::before{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      rgba(28, 22, 20, 0.40) 0%,
      rgba(28, 22, 20, 0.85) 70%,
      rgba(28, 22, 20, 0.95) 100%
    );
    z-index: 1;
    pointer-events: none;
  }
  .hero.is-vogue .hero-inner{
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    grid-template-columns: 1fr;
    height: 100%;
    min-height: 100vh;
    padding: 80px 22px 100px 22px;
  }
  .hero.is-vogue .hero-spacer{ display: none; }
  .hero.is-vogue .hero-copy{
    padding: 0;
    height: auto;
    justify-content: flex-end;
    align-items: flex-start;
  }
  .hero.is-vogue .hero-mast{
    margin-top: 0;
  }
  .hero.is-vogue .hero-wordmark{
    font-size: clamp(72px, 20vw, 120px);
  }
  .hero.is-vogue .hero-eyebrow{
    font-size: 11px;
    letter-spacing: 0.22em;
  }
  .hero.is-vogue .hero-foot{
    margin-top: 32px;
  }
  .hero.is-vogue .hero-slogan{
    font-size: clamp(28px, 8vw, 44px);
    line-height: 1.1;
    margin-bottom: 20px;
  }
  .hero.is-vogue .hero-subline{
    font-size: 15px;
    margin-bottom: 24px;
  }
  .hero.is-vogue .hero-ctas{
    flex-wrap: wrap;
    gap: 10px;
  }
  .hero.is-vogue .hero-cta{
    width: auto;
  }
}

/* Mobile muy estrecho (~iPhone SE / 339-360px): refinar crop para que la
   cara siga siendo el foco visual, no el fondo. */
@media (max-width: 360px){
  .hero.is-vogue .hero-photo{ object-position: 85% center; }
}

/* ============================================================================
   COMPONENTES EDITORIALES REUSABLES
   ----------------------------------------------------------------------------
   Sistema visual basado en el handoff Vogue cover. Estos componentes son la
   librería que reusamos para futuras páginas (filosofía clínica, cuadro
   médico, centros, etc.) sin tener que rediseñarlas en Claude Design.

   NOMENCLATURA:
   - Componentes con nombre único del brief: .italic-accent, .section-watermark,
     .tag-editorial, .dropcap → se usan tal cual.
   - Componentes que chocaban con clases globales ya en uso:
     .eyebrow → .editorial-eyebrow  (existe .eyebrow legacy en 12+ sitios)
     .reveal  → .editorial-reveal   (existe .reveal legacy desactivado)
   ============================================================================ */

/* === EYEBROW EDITORIAL ===
   Eyebrow con línea fina ::before, uppercase tracked, sans 11px.
   Cuándo usar: títulos pequeños sobre H2 grande de sección editorial.
   Ejemplo: <span class="editorial-eyebrow">EST. 2009</span>
   Layout: inline-flex con gap, la línea ::before se renderiza inline a la
   izquierda del texto (no es un border-top, es una pieza tipográfica). */
.editorial-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-60);
}
.editorial-eyebrow::before {
  content: "";
  width: 36px;
  height: 1px;
  background: var(--ink);
}

/* === ITALIC ACCENT ===
   Pieza tipográfica de palabras destacadas en italic coral.
   Cuándo usar: dentro de un H2 o párrafo, una palabra que quieres destacar.
   Ejemplo: <h2>Cuida lo que <span class="italic-accent">ves</span></h2>
   IMPORTANTE: hereda la font-family del contexto (H2 Playfair → italic Playfair,
   párrafo sans → italic sans). Esto es deliberado: usar una fuente distinta
   (ej: Cormorant) hace que la palabra se vea visualmente más PEQUEÑA dentro
   de un H2 grande, porque las x-heights de las fuentes serif difieren. La
   distinción visual la aporta el italic + el color coral, no la fuente. */
.italic-accent {
  font-family: inherit;
  font-style: italic;
  color: var(--coral);
}

/* === SECTION WATERMARK ===
   Etiqueta gigante decorativa Playfair italic detrás de títulos de sección.
   Estilo "Tratamientos" del export Vogue. Pintada a opacidad muy baja
   (var(--ink-08)) para servir como capa de fondo, no como texto principal.
   Cuándo usar: dentro de un .section relative + un H2 encima. El watermark
   se posiciona absolute en top-left y queda detrás del título.
   Ejemplo:
     <section class="section" style="position: relative;">
       <span class="section-watermark" aria-hidden="true">Filosofía</span>
       <h2>Filosofía clínica</h2>
       ...
     </section>
   pointer-events:none → el watermark no captura clics (no es accionable). */
.section-watermark {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(120px, 18vw, 280px);
  line-height: 0.9;
  color: var(--ink-08);
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  z-index: 0;
}

/* === TAG EDITORIAL ===
   Tag con barra coral lateral (estilo "Desde 129€" de cards editoriales).
   Cuándo usar: para destacar dato relevante (precio, stat, métrica) sin que
   sea un botón. Composición: span hijo .tag-label (eyebrow pequeña) +
   .tag-value (cifra o frase clave en serif italic coral).
   Ejemplo:
     <div class="tag-editorial">
       <span class="tag-label">Desde</span>
       <span class="tag-value">129 €</span>
     </div> */
.tag-editorial {
  background: var(--cream);
  padding: 18px 26px;
  border-left: 2px solid var(--coral);
  display: inline-block;
}
.tag-editorial .tag-label {
  display: block;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-60);
  margin-bottom: 4px;
}
.tag-editorial .tag-value {
  font-family: var(--serif);
  font-style: italic;
  font-size: 26px;
  color: var(--coral);
}

/* === DROPCAP ===
   Primera letra gigante coral en párrafos editoriales.
   Cuándo usar: en el primer párrafo de una página editorial larga (filosofía,
   manifiesto, blog post largo). Una sola dropcap por sección — abusa rompe.
   Ejemplo:
     <p class="dropcap">Lorem ipsum dolor sit amet, consectetur adipiscing
     elit. Sed do eiusmod tempor incididunt ut labore...</p>
   Limitación CSS: ::first-letter solo aplica a elementos block. Funciona en
   <p>, no en <span>. */
.dropcap::first-letter {
  float: left;
  font-family: var(--serif);
  font-size: 6em;
  line-height: 0.9;
  padding: 4px 12px 0 0;
  color: var(--coral);
  font-weight: 400;
}

/* === REVEAL ON SCROLL ===
   Animación de aparición al entrar al viewport. La activa el JS global
   (IntersectionObserver con threshold 0.15) añadiendo .is-visible.
   Cuándo usar: cualquier elemento de página editorial que quieras que aparezca
   al hacer scroll (no usarlo en hero ni en zonas above-the-fold).
   Ejemplo:
     <div class="editorial-reveal">...</div>
     <h2 class="editorial-reveal">...</h2>
   Estado inicial: invisible y desplazado 16px abajo.
   Estado final (.is-visible): visible y en su posición.
   Easing var(--ease) = cubic-bezier(0.16, 1, 0.3, 1) (expo out, firma editorial). */
.editorial-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}
.editorial-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* prefers-reduced-motion: respeta preferencia del usuario, sin animar */
@media (prefers-reduced-motion: reduce){
  .editorial-reveal,
  .editorial-reveal.is-visible{
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================================
   EQUIPO — cuadro médico + atención al paciente
   ----------------------------------------------------------------------------
   Sección de personas SIN FOTO: la tipografía ES el avatar (decisión Aurea).
   Cada card es un bloque tipográfico: eyebrow + nombre serif + rol sans + ubicación italic.
   Layout 2x2 desktop, stack en mobile.
   ============================================================================ */
.section.equipo{
  background: var(--cream);
  position: relative;
  /* overflow: clip + clip-margin-top permite que el watermark se asome por
     arriba (efecto editorial) sin que el resto de su caja se desborde a la
     sección anterior. Fallback a hidden en navegadores sin clip support. */
  overflow: hidden;
  overflow: clip;
  overflow-clip-margin: 120px;
  /* La sección treatments ya aporta padding-bottom de ~140px, suficiente
     respiro. Equipo arranca casi pegado para no duplicar aire entre ambas. */
  padding-top: clamp(8px, 1vw, 16px);
  padding-bottom: clamp(56px, 7vw, 96px);
}
.section.equipo .section-watermark{
  top: clamp(-80px, -5vw, -32px);
}
.equipo-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--ink-08);
  border-left: 1px solid var(--ink-08);
}
.equipo-card{
  padding: 40px;
  border-right: 1px solid var(--ink-08);
  border-bottom: 1px solid var(--ink-08);
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  transition: background 0.45s var(--ease);
}
.equipo-card:hover{ background: var(--cream-warm); }

/* Eyebrow encima del nombre — usa el componente editorial reusable */
.equipo-card .editorial-eyebrow{
  margin-bottom: 24px;
}

/* Nombre — Playfair 600, la pieza tipográfica que sustituye al avatar */
.equipo-nombre{
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
  transition: color 200ms var(--ease-soft);
}
.equipo-card:hover .equipo-nombre{ color: var(--coral); }

/* Rol — DM Sans 400 16px, color ink-60 */
.equipo-rol{
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  color: var(--ink-60);
  line-height: 1.4;
  margin-top: 16px;
}

/* Ubicación — italic Cormorant Garamond, coral */
.equipo-ubicacion{
  font-family: var(--logo-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  color: var(--coral);
  letter-spacing: 0.02em;
  margin-top: 24px;
}

/* Responsive: 1 columna en mobile + padding más compacto */
@media (max-width: 768px){
  .equipo-grid{
    grid-template-columns: 1fr;
    border-left: 0;
  }
  .equipo-card{
    padding: 24px;
  }
  .equipo-card:nth-child(2n){ border-right: 1px solid var(--ink-08); } /* anula reset 2-cols si lo hubiera */
}

/* ============================================================================
   TESTIMONIOS — refinamientos editoriales (TAREA 5.4)
   ----------------------------------------------------------------------------
   Overrides SCOPED sobre el bloque .testimonios-dark existente. NO toca la
   lógica del carrusel (autoplay, swipe, IntersectionObserver pause) — solo
   pulido visual: comilla decorativa, tipografía Cita más editorial, avatar
   más compacto, atribución sans con tracking.
   El fondo NEGRO se mantiene (decisión arquitectónica 29 abr).
   ============================================================================ */

/* Eyebrow scoped: el .editorial-eyebrow global pinta ink-60, pero sobre fondo
   negro necesitamos coral. Override del componente reusable en este contexto. */
.testimonios-dark .testimonios-eyebrow{
  color: var(--coral);
  margin-bottom: 22px;
}
.testimonios-dark .testimonios-eyebrow::before{
  background: var(--coral);
}

/* Italic-accent scoped: ya es coral por default, pero garantizamos coral
   luminoso (no coral-deep) por si el componente global cambia en el futuro. */
.testimonios-dark .testimonios-italic{
  color: var(--coral);
}

/* Comilla decorativa gigante — Carmen González moment.
   position absolute centrada arriba del carrusel, decorativa. */
.testimonios-dark{
  position: relative; /* anclaje de la comilla */
}
.testimonios-quote{
  position: absolute;
  top: clamp(140px, 14vw, 220px);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(160px, 18vw, 240px);
  line-height: 0.7;
  color: rgba(201, 123, 115, 0.30); /* coral 30% opacidad sobre negro */
  pointer-events: none;
  user-select: none;
  z-index: 1;
}

/* Aseguramos que el carrusel se pinta SOBRE la comilla decorativa */
.testimonios-dark .testimonios-carousel,
.testimonios-dark .testimonios-head,
.testimonios-dark .testimonios-foot{
  position: relative;
  z-index: 2;
}

/* Cita: tipografía editorial más fina */
.testimonios-dark .testimonio-card .texto{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.4;
  color: var(--cream);
}

/* Estrellas: refinadas a 14px con gap controlado */
.testimonios-dark .testimonio-card .stars{
  color: var(--coral);
  font-size: 14px;
  letter-spacing: 4px; /* gap 4px entre estrellas vía letter-spacing */
}

/* Avatar: 48px → 44px (más compacto, no compite con la cita) */
.testimonios-dark .testimonio-card .avatar{
  width: 44px;
  height: 44px;
  font-size: 13px;
}

/* Atribución: nombre + ciudad uppercase tracked */
.testimonios-dark .testimonio-card .autor strong{
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0;
  color: var(--cream);
}
.testimonios-dark .testimonio-card .autor .meta{
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244, 239, 233, 0.5); /* cream 50% — derivado del --hero-fg */
}

/* Mobile: comilla decorativa más pequeña para no saturar viewport reducido */
@media (max-width: 720px){
  .testimonios-quote{
    top: clamp(110px, 22vw, 180px);
    font-size: clamp(120px, 32vw, 180px);
  }
}

/* ============================================================================
   TESTIMONIOS — variante TRATAMIENTO (2 cards, grid simple, sin carrusel)
   ----------------------------------------------------------------------------
   Reusa todos los estilos visuales del .testimonios-dark de la home (cards
   oscuras, italic serif, avatar coral, 5 estrellas) pero:
     - No carrusel: 2 cards en grid 50/50 desktop, stack vertical en mobile.
     - Sin la comilla decorativa gigante (saturaba un bloque más pequeño).
     - Padding vertical reducido para no engordar la página antes del CTA.
     - H2 más sobrio (sin "<br>en sus propias palabras").
   ============================================================================ */
.testimonios-dark--tratamiento{
  padding-top: clamp(60px, 8vw, 100px);
  padding-bottom: clamp(60px, 8vw, 100px);
}
.testimonios-dark--tratamiento .testimonios-head{
  margin-bottom: clamp(40px, 6vw, 64px);
}
.testimonios-dark--tratamiento .testimonios-h2{
  font-size: clamp(32px, 4.5vw, 56px);
  max-width: 720px;
}
.testimonios-dark--tratamiento .testimonios-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 920px;
  margin: 0 auto;
}
/* La comilla decorativa de la home no aplica aquí (más limpio sin ella). */
.testimonios-dark--tratamiento .testimonios-quote{ display: none; }

/* Card sin transformaciones de carrusel */
.testimonios-dark--tratamiento .testimonio-card{
  width: auto;
  flex-shrink: initial;
  scroll-snap-align: none;
}

@media (max-width: 720px){
  .testimonios-dark--tratamiento .testimonios-grid{
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ============================================================================
   CENTROS — refinamientos editoriales (TAREA 5.5)
   ----------------------------------------------------------------------------
   La sección .centers ya existía con fondo --ink (negro) y cards en grid 4col.
   Aquí refinamos: card como <a> real (no <div>), watermark coral, badge
   estado abierto/cerrado con punto pulsante.
   ============================================================================ */

/* Watermark variant: sobre fondo --ink (negro) el ink-08 default queda invisible.
   Esta variante usa coral 12% para visibilidad en sección oscura. */
.section-watermark.watermark--coral{
  color: rgba(201, 123, 115, 0.12);
  /* Texto más largo ("Cuatro Ciudades") → bajar tamaño para que encaje
     dentro del ancho de la sección oscura sin desbordar. */
  font-size: clamp(80px, 11vw, 180px);
  /* Pequeño offset hacia abajo para no chocar con el borde superior de la
     sección oscura — queda más respirado entre el corte de color y la
     palabra de fondo. */
  top: clamp(40px, 5vw, 90px);
}

/* Cards como <a>: reset color/decoration para que herede ".center" */
a.center{
  color: inherit;
  text-decoration: none;
  display: block;
}

/* Estado abierto/cerrado — badge con punto pulsante */
.centro-status{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.02em;
  margin: 14px 0 24px;
}
/* Variant LIGHT: sobre fondo oscuro (ink/section-dark) — homepage centros */
.centro-status.centro-status--variant-light{
  color: rgba(250,246,241,.7); /* cream 70% */
}
/* Variant DARK: sobre fondo claro (cream/cream-warm) — contacto.php, /[ciudad]/medicina-estetica-[ciudad].php */
.centro-status.centro-status--variant-dark{
  color: var(--ink-60);
}
.centro-status-dot{
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Estado abierto: dot verde WhatsApp con anillo pulsante */
.centro-status.centro-status--open .centro-status-dot{
  background: var(--wa); /* #25D366 */
}
.centro-status.centro-status--open .centro-status-dot::after{
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: var(--wa);
  opacity: 0.4;
  animation: centro-status-pulse 2s ease-in-out infinite;
}

/* Estado cerrado: dot gris atenuado, sin animación */
.centro-status.centro-status--closed .centro-status-dot{
  background: rgba(250,246,241,.35); /* cream 35% */
}

@keyframes centro-status-pulse{
  0%   { transform: scale(0.9); opacity: 0.5; }
  70%  { transform: scale(2.2); opacity: 0; }
  100% { transform: scale(2.2); opacity: 0; }
}

@media (prefers-reduced-motion: reduce){
  .centro-status.centro-status--open .centro-status-dot::after{
    animation: none;
  }
}

/* ============================================================================
   HERO EDITORIAL DARK — páginas internas
   ----------------------------------------------------------------------------
   Mood: institucional, claro, accesible. Tipografía como protagonista.
   Compacto (60vh, NO 100vh — exclusivo de la home Vogue cover).

   Usado en:
     - /contacto.php
     - /tratamientos.php (catálogo)
     - futuras páginas internas que necesiten un hero tipográfico oscuro

   Distinto del hero V1 (.hero.is-vogue → home, foto modelo full-bleed) y
   distinto de las páginas individuales de tratamiento (cream warm).
   Coherente con .testimonios-dark (mismo --color-section-dark... NO: aquí
   usamos --ink puro #1A1A1A para diferenciar institucional vs editorial).
   ============================================================================ */
.hero-editorial-dark{
  /* Vignette sutil — diagonal warm dark, no plano */
  background: linear-gradient(135deg, var(--ink) 0%, #0F0D0C 100%);
  color: var(--hero-fg);
  min-height: 60vh;
  padding: 120px 0 80px; /* horizontal lo gestiona el container */
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* Overlay coral 4% en esquina superior derecha — tinte editorial sin gritar */
.hero-editorial-dark::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at top right,
    rgba(201, 123, 115, 0.04) 0%,
    transparent 60%);
  z-index: 1;
}
.hero-editorial-dark__container{
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding-left: clamp(40px, 8.33%, 100px);
  padding-right: clamp(40px, 8.33%, 100px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
/* El bloque tipográfico no excede 720px aunque el container sea wider */
.hero-editorial-dark__h1,
.hero-editorial-dark__subline,
.hero-editorial-dark__ctas{
  max-width: 720px;
}

/* Badge "+16 años de experiencia" — pill cream outline (solo catálogo) */
.hero-editorial-dark__badge{
  display: inline-block;
  background: transparent;
  border: 1px solid var(--hero-fg);
  color: var(--hero-fg);
  padding: 8px 18px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 24px;
}

/* Eyebrow — override scoped: línea coral + texto coral sobre fondo negro */
.hero-editorial-dark .hero-editorial-dark-eyebrow{
  color: var(--coral);
  margin-bottom: 24px;
}
.hero-editorial-dark .hero-editorial-dark-eyebrow::before{
  background: var(--coral);
}

/* H1 — Playfair 500, dominante */
.hero-editorial-dark__h1{
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(56px, 7vw, 96px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--hero-fg);
  margin: 0;
  text-wrap: pretty;
}

/* Italic-accent override: garantiza coral luminoso (no coral-deep) sobre fondo negro */
.hero-editorial-dark .hero-italic-luminoso{
  color: var(--coral);
}

/* Subline */
.hero-editorial-dark__subline{
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  color: rgba(244, 239, 233, 0.6); /* cream 60% */
  max-width: 540px;
  margin: 32px 0 0;
}

/* CTAs */
.hero-editorial-dark__ctas{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 48px;
}
.hero-editorial-dark__cta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 200ms var(--ease-soft),
              color 200ms var(--ease-soft),
              border-color 200ms var(--ease-soft),
              transform 200ms var(--ease-soft);
}
/* Primary: cream solid + ink text → hover coral solid + cream text */
.hero-editorial-dark__cta--primary{
  background: var(--hero-fg);
  color: var(--ink);
  border: 1px solid var(--hero-fg);
}
.hero-editorial-dark__cta--primary:hover{
  background: var(--coral);
  border-color: var(--coral);
  color: var(--cream);
  transform: translateY(-1px);
}
/* Ghost: outline cream + cream text → hover cream solid + ink text */
.hero-editorial-dark__cta--ghost{
  background: transparent;
  color: var(--hero-fg);
  border: 1px solid var(--hero-fg);
}
.hero-editorial-dark__cta--ghost:hover{
  background: var(--hero-fg);
  color: var(--ink);
  transform: translateY(-1px);
}

/* Mobile (≤768px) */
@media (max-width: 768px){
  .hero-editorial-dark{
    min-height: auto;
    padding: 100px clamp(20px, 5vw, 64px) 60px;
  }
  .hero-editorial-dark__h1{
    font-size: clamp(40px, 9vw, 72px);
  }
  .hero-editorial-dark__ctas{
    flex-wrap: wrap;
  }
  .hero-editorial-dark__cta{
    padding: 11px 20px;
  }
}

/* ============================================================================
   HERO EDITORIAL DARK — refinamientos editoriales (TAREA 6 v2)
   ----------------------------------------------------------------------------
   Watermark gigante derecha + side-card (status/counters) + responsive stack
   ≤900px. Pulido visual sobre el bloque base (linear-gradient + radial overlay
   ya viven más arriba en este mismo archivo).
   ============================================================================ */

/* Watermark gigante posicionado a la derecha, centro vertical.
   Tipografía dominante coral 6% — capa decorativa de profundidad editorial. */
.hero-watermark{
  position: absolute;
  right: clamp(20px, 3vw, 60px);   /* antes -2vw — se cortaba por el lado derecho */
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(140px, 18vw, 300px); /* antes 160-360 — proporción más manejable */
  line-height: 0.85;
  letter-spacing: -0.02em;
  color: rgba(201, 123, 115, 0.06);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  z-index: 0;
}

/* Side card — caja de info al lado derecho, glass blur sutil */
.hero-side-card{
  position: absolute;
  right: clamp(40px, 8.33%, 100px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 3; /* encima del watermark y del overlay */
  max-width: 320px;
  padding: 32px;
  background: rgba(244, 239, 233, 0.04);
  border: 1px solid rgba(244, 239, 233, 0.10);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: var(--hero-fg);
}

/* === Variant CONTACTO: status + horarios + WhatsApp === */
.hero-side-card--contacto{
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.status-card-eyebrow{
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--coral);
}
.status-card-body{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.status-card-body .centro-status{
  margin: 0; /* override del componente, en este card va sin márgenes propios */
  font-size: 14px;
  color: var(--hero-fg);
}
.status-card-hours{
  font-family: var(--sans);
  font-size: 14px;
  color: var(--hero-fg);
  margin: 8px 0 0;
}
.status-card-hours-secondary{
  font-family: var(--sans);
  font-size: 13px;
  color: rgba(244, 239, 233, 0.5);
  margin: 0;
}
.status-card-cta{
  border-top: 1px solid rgba(244, 239, 233, 0.10);
  padding-top: 18px;
}
.status-card-wa{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--coral);
  text-decoration: none;
  transition: color 0.3s var(--ease);
}
.status-card-wa:hover{
  color: var(--hero-fg);
}

/* === Variant CENTRO: dirección + CP + horario + cómo llegar === */
.hero-side-card--centro{
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.hero-side-card--centro .centro-direccion{
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1.3;
  color: var(--hero-fg);
  margin: 0;
}
.hero-side-card--centro .centro-cp{
  font-family: var(--sans);
  font-size: 13px;
  color: rgba(244, 239, 233, 0.6);
  margin: 4px 0 6px;
}

/* === Hero meta variant DARK (stats sobre fondo oscuro) === */
.hero-meta--dark{
  margin-top: 48px;
  border-top-color: rgba(244, 239, 233, 0.14);
}
.hero-meta--dark .n{ color: var(--hero-fg); }
.hero-meta--dark .l{ color: rgba(244, 239, 233, 0.55); }

/* === Variant TRATAMIENTOS: counter stack === */
.hero-side-card--tratamientos{
  background: transparent;        /* en counters el card glass se siente excesivo */
  border: 0;
  padding: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.counter-stack{
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
}
.counter{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
}
.counter-num{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(72px, 8vw, 120px);
  line-height: 1;          /* antes 0.9 — la base del glifo se montaba sobre el label */
  letter-spacing: -0.02em;
  color: var(--coral);
}
.counter-label{
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(244, 239, 233, 0.6);
  margin-top: 14px;        /* antes 4px — respiro tipográfico entre cifra y label */
}

/* === Responsive ≤900px: stack vertical, side-card pasa debajo === */
@media (max-width: 900px){
  .hero-editorial-dark{
    padding: 100px 0 60px;
  }
  .hero-watermark{
    font-size: clamp(120px, 30vw, 200px);
    color: rgba(201, 123, 115, 0.04);
    right: -4vw;
  }
  .hero-side-card{
    position: static;
    transform: none;
    right: auto; top: auto;
    max-width: none;
    width: 100%;
    margin: 48px 0 0;
  }
  /* El container engloba ambos bloques en stack */
  .hero-editorial-dark{
    flex-direction: column;
    align-items: stretch;
  }
  .hero-editorial-dark__container{
    /* el side-card vive fuera del container; lo reanclamos a la sección */
  }
  /* Reposicionar side-card para que herede el padding-x del container */
  .hero-side-card{
    margin-left: clamp(40px, 8.33%, 100px);
    margin-right: clamp(40px, 8.33%, 100px);
    width: auto;
  }
  .counter-num{
    font-size: clamp(56px, 14vw, 80px);
  }
  .counter-stack{
    gap: 20px;
  }
}

@media (max-width: 768px){
  /* El bloque @media 768px existente ya reduce H1 y padding generales.
     Aquí solo afinamos lo específico de los refinamientos. */
  .hero-watermark{
    font-size: clamp(100px, 36vw, 160px);
  }
  .hero-side-card{
    padding: 24px;
  }
}

/* ============================================================================
   FORM CARD — variant CONTACTO (más respiro vs el form de homepage)
   ----------------------------------------------------------------------------
   El form de /contacto.php tiene más campos (email + textarea), por lo que
   necesita más respiro entre cabecera y campos, y entre campos individuales.
   ============================================================================ */
.form-card--contacto{
  /* Más padding interior para que respire en una página de "contacto" */
  padding: clamp(40px, 6vw, 56px);
}
.form-card--contacto .form-card-title{
  margin-bottom: 40px;     /* antes 32px — separación clara del primer label */
}
.form-card--contacto .fgrid{
  gap: 28px 18px;          /* antes 18px 18px — más respiro vertical entre campos */
}
.form-card--contacto .field label{
  margin-bottom: 8px;      /* respiro entre label uppercase y el input underline */
}
.form-card--contacto .field input,
.form-card--contacto .field textarea,
.form-card--contacto .field select{
  padding: 6px 0;          /* antes 4px — más altura tipográfica al input */
}
.form-card--contacto .field textarea{
  min-height: 140px;       /* antes 120px — más espacio para escribir la consulta */
}
.form-card--contacto .field.legal{
  margin-top: 22px;        /* respiro antes del checkbox legal (unificado con cita) */
}
.form-card--contacto .form-footer,
.form-card--contacto .field.full:has(.btn){
  margin-top: 16px;        /* respiro antes del submit */
}

/* ============================================================================
   TREATMENT SECTION — body editorial de páginas de tratamiento
   ----------------------------------------------------------------------------
   Cada H2 del body abre un <section class="treatment-section"> con:
     - watermark gigante absolute detrás del título (palabra del label)
     - bloque número editorial (cifra Cormorant italic 96-180px coral)
     - eyebrow + H2 a la derecha del número
     - asimetría alternada (odd → izquierda · even → derecha)

   Beneficios: convierte el "aire vertical inerte" en ritmo editorial.
   El padding-top reducido (vs los 72px de margin-top legacy) hace que las
   secciones se sientan relacionadas, no flotantes.
   ============================================================================ */
.body-prose .treatment-section{
  position: relative;
  padding-top: clamp(48px, 6vh, 72px); /* antes clamp(64-96) — Aurea pidió más compacto entre secciones */
  /* No max-width aquí — los hijos (h2, p, ul) ya tienen su propio max-width 62ch */
  isolation: isolate; /* el watermark no se sale de su contexto de stacking */
}
/* Primera sección: reducir aún más (el aire ya viene del padding-top de .tratamiento-body
   o del párrafo intro previo). Evita doble respiro. */
.body-prose section.treatment-section:first-of-type{
  padding-top: clamp(24px, 3vh, 40px);
}

/* Bloque número + content (eyebrow + H2) */
.body-prose .section-num-block{
  position: relative;
  z-index: 1; /* encima del watermark */
  display: flex;
  align-items: flex-start;
  gap: 32px;
  max-width: 1080px;
  /* margin-bottom para separar del primer párrafo de la sección */
  margin-bottom: clamp(24px, 3vw, 36px);
}
.body-prose .section-num{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(96px, 12vw, 180px);
  line-height: 0.85;
  letter-spacing: -0.02em;
  color: var(--coral);
  opacity: 0.85;
  flex-shrink: 0;
}
.body-prose .section-num-block__content{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* compensa la altura del número gigante para alinear con su top */
  padding-top: 12px;
}
.body-prose .section-num-block__content .editorial-eyebrow{
  margin-bottom: 14px;
}

/* === Asimetría: alternar placement de las secciones === */
/* :nth-of-type cuenta solo entre <section>, no entre todos los hijos del body-prose */
.body-prose section.treatment-section:nth-of-type(odd){
  margin-left: 0;
  margin-right: auto;
}
.body-prose section.treatment-section:nth-of-type(even){
  margin-left: auto;
  margin-right: 0;
}
.body-prose section.treatment-section{
  /* el width restringe para que el align surta efecto */
  max-width: min(100%, 1080px);
}

/* === Responsive ≤768px: stack vertical, asimetría OFF, padding compacto === */
@media (max-width: 768px){
  .body-prose .treatment-section{
    padding-top: clamp(48px, 6vh, 72px);
  }
  .body-prose .section-num-block{
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .body-prose .section-num{
    font-size: clamp(72px, 16vw, 120px);
  }
  .body-prose .section-num-block__content{
    padding-top: 0;
  }
  /* Asimetría desactivada — todas las secciones full-width */
  .body-prose section.treatment-section,
  .body-prose section.treatment-section:nth-of-type(odd),
  .body-prose section.treatment-section:nth-of-type(even){
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
  }
}

/* ---------- Zonas de aplicación grid (reusable, 2-4 cards) ---------- */
.zonas-aplicacion-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 40px 0 16px;
}
.zonas-aplicacion-grid--2 { grid-template-columns: repeat(2, 1fr); }
.zonas-aplicacion-grid--4 { grid-template-columns: repeat(4, 1fr); }

.zona-card{
  background: var(--cream);
  border: 1px solid var(--ink-08);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.zona-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 30px -18px rgba(26,26,26,.18);
}
.zona-card__media{
  aspect-ratio: 4 / 3;
  background: var(--rose-soft);
  overflow: hidden;
  position: relative;
}
.zona-card__media img,
.zona-card__media svg{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.zona-card__body{
  padding: 22px 22px 24px;
}
.zona-card__title{
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.012em;
  margin: 0 0 8px;
  color: var(--ink);
  transition: color .25s var(--ease);
}
.zona-card:hover .zona-card__title{ color: var(--coral); }
.zona-card__desc{
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-60);
  margin: 0;
}

@media (max-width: 760px){
  .zonas-aplicacion-grid,
  .zonas-aplicacion-grid--2,
  .zonas-aplicacion-grid--4{
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* =============================================================================
   FORM POLISH (Paso 11.11) — validación inline, focus state, spinner, selection
   ============================================================================= */

/* --- Selección coral dentro del form-card (premium 4) --- */
.form-card ::selection{
  background: var(--coral);
  color: var(--cream);
}

/* --- Focus state más expresivo (premium 3) — el border-bottom coral ya existía,
   añadimos box-shadow sutil para subrayar el campo activo. --- */
.form-card .field input:focus,
.form-card .field select:focus,
.form-card .field textarea:focus{
  border-bottom-color: var(--coral);
  box-shadow: 0 1px 0 0 var(--coral);
  outline: none;
}

/* --- Validación inline (upgrade 6) ---
   Ojo: usamos :placeholder-shown como proxy de "campo aún vacío" para no marcar
   en rojo el típico select que sigue en su option default. */
.form-card .field input:invalid:not(:placeholder-shown):not(:focus),
.form-card .field textarea:invalid:not(:placeholder-shown):not(:focus){
  border-bottom-color: #c0392b;
}
.form-card .field input:valid:not(:placeholder-shown),
.form-card .field textarea:valid:not(:placeholder-shown){
  border-bottom-color: rgba(39, 174, 96, 0.55);
}

/* Mensaje de error inline para los campos con pattern (tel español).
   Solo se muestra cuando el usuario ya escribió algo y salió del foco. */
.form-card .field{
  position: relative;
}
.form-card .field input[type="tel"]:invalid:not(:placeholder-shown):not(:focus) + .field-error,
.form-card .field input[type="email"]:invalid:not(:placeholder-shown):not(:focus) + .field-error{
  display: block;
}
.form-card .field-error{
  display: none;
  font-size: 11.5px;
  color: #c0392b;
  margin-top: 6px;
  letter-spacing: 0.02em;
}

/* --- Hint dinámico bajo el select de Hora (sábado/domingo) --- */
.form-card .field-hint{
  display: block;
  font-size: 11.5px;
  color: var(--coral-deep);
  margin-top: 6px;
  letter-spacing: 0.02em;
  font-style: italic;
}
.form-card .field-hint[hidden]{ display: none; }

/* --- Botón submit: spinner + estado is-submitting (premium 1) ---
   Estructura del botón:
     <button class="btn"><span class="btn-label">…</span><span class="btn-arrow">→</span><span class="btn-spinner"></span></button>
   Por defecto: spinner oculto, label+arrow visibles.
   Con .is-submitting: label="Enviando…", arrow oculto, spinner visible. */
.form-card .btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.form-card .btn .btn-spinner{
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(250, 246, 241, 0.4);
  border-top-color: var(--cream);
  border-radius: 50%;
  animation: form-spin 0.7s linear infinite;
}
.form-card .btn.is-submitting{
  pointer-events: none;
  opacity: 0.85;
}
.form-card .btn.is-submitting .btn-arrow{ display: none; }
.form-card .btn.is-submitting .btn-spinner{ display: inline-block; }
.form-card .btn.is-submitting .btn-label::after{
  content: 'ndo…';
  display: inline;
}
.form-card .btn.is-submitting .btn-label{
  font-size: 0;        /* truco: ocultamos el "Solicitar Cita" / "Enviar consulta" */
  letter-spacing: 0;
}
.form-card .btn.is-submitting .btn-label::before{
  content: 'Envia';
  font-size: 15px;
  letter-spacing: 0.01em;
  font-weight: 500;
}

/* Bloquear el form-card entero mientras envía (no se puede modificar input) */
.form-card.is-submitting .field input,
.form-card.is-submitting .field select,
.form-card.is-submitting .field textarea{
  pointer-events: none;
}

@keyframes form-spin{
  to { transform: rotate(360deg); }
}

/* --- Mobile: que el hint y el field-error no rompan el grid --- */
@media (max-width: 760px){
  .form-card .field-hint,
  .form-card .field-error{ font-size: 11px; }
}


/* =============================================================================
   PRICE-BADGE GLOW (8 may 2026, v2) — dos capas:
   1) ::before — contorno coral intenso recorriendo el borde (conic + mask).
   2) ::after  — "ola" de luz diagonal cruzando el fondo blanco del badge.
   Las dos animaciones corren a velocidades distintas (4s + 3.5s) para evitar
   el efecto sincronizado robotico. Respeta prefers-reduced-motion.
   ============================================================================= */

@property --badge-glow-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.hero-badge {
  isolation: isolate;
  overflow: hidden; /* contiene la ola del ::after dentro del rect redondeado */
}

/* Capa 1 — CONTORNO intenso recorriendo el borde */
.hero-badge::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px; /* grosor del borde brillante */
  background: conic-gradient(
    from var(--badge-glow-angle),
    transparent 0deg,
    transparent 250deg,
    var(--coral) 310deg,
    var(--coral) 330deg,
    transparent 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
          mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0.95;
  animation: hero-badge-glow 4s linear infinite;
  z-index: 2;
}

/* Capa 2 — OLA de luz diagonal cruzando el fondo.
   linear (no ease) = velocidad constante, sin pausas en el centro.
   Rango ajustado (100%→-100% sobre size 200%) para que cada ola entre
   y salga sin "vacios" perceptibles entre repeticiones. */
.hero-badge::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    115deg,
    transparent 35%,
    rgba(255, 255, 255, 0.78) 50%,
    transparent 65%
  );
  background-size: 200% 100%;
  background-position: 100% 0;
  pointer-events: none;
  z-index: 1;
  animation: hero-badge-shimmer 1.5s linear infinite;
}

@keyframes hero-badge-glow {
  to { --badge-glow-angle: 360deg; }
}

@keyframes hero-badge-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-badge::before,
  .hero-badge::after {
    animation: none;
  }
  .hero-badge::before { opacity: 0; }
  .hero-badge::after  { opacity: 0; }
}

/* ============================================================================
   FAQ — Acordeón nativo (<details>/<summary>) — punto 13 Alfonso (25 may 2026)
   Solo en páginas generales de tratamiento. Transición suave sin JS.
   ============================================================================ */
.faq-section { background: var(--cream); padding: 72px 0; }
.faq-head { max-width: 760px; margin: 0 auto 40px; text-align: center; }
.faq-title { font-family: 'Playfair Display', serif; font-size: clamp(28px, 4vw, 44px);
  font-weight: 500; letter-spacing: -0.02em; color: var(--ink); margin: 10px 0 0; }
.faq-title .italic-accent { font-style: italic; color: var(--coral); }
.faq-list { max-width: 760px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:first-child { border-top: 1px solid var(--line); }
.faq-q { cursor: pointer; list-style: none; padding: 22px 44px 22px 4px; position: relative;
  font-family: 'DM Sans', sans-serif; font-size: 17px; font-weight: 600; color: var(--ink);
  transition: color .25s cubic-bezier(0.16,1,0.3,1); }
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after { content: ''; position: absolute; right: 8px; top: 50%; width: 11px; height: 11px;
  margin-top: -6px; background-size: contain; background-repeat: no-repeat;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M6 1v10M1 6h10' stroke='%23C97B73' stroke-width='1.6' fill='none'/></svg>");
  transition: transform .3s cubic-bezier(0.16,1,0.3,1); }
.faq-item[open] .faq-q { color: var(--coral); }
.faq-item[open] .faq-q::after { transform: rotate(135deg); }
.faq-q:hover { color: var(--coral); }
.faq-a { overflow: hidden; padding: 0 44px 22px 4px; }
.faq-a p { margin: 0; font-family: 'DM Sans', sans-serif; font-size: 15.5px; line-height: 1.65;
  color: var(--ink-60); }
/* Animación de apertura suave del contenido */
.faq-item[open] .faq-a { animation: faqReveal .35s cubic-bezier(0.16,1,0.3,1); }
@keyframes faqReveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 600px) {
  .faq-section { padding: 52px 0; }
  .faq-q { font-size: 16px; padding-right: 38px; }
}

/* FAQ — pregunta en <strong> dentro del summary (punto Alfonso fase 3) */
.faq-q strong { font-weight: 700; font-weight: 700; color: inherit; }

/* ============================================================================
   RESULTADOS — galería antes/después combinado (fase 3 Alfonso, 25 may 2026)
   Imágenes que YA muestran antes+después juntos. Responsive.
   ============================================================================ */
.resultados { background: var(--cream-warm); padding: 72px 0; }
.resultados-head { text-align: center; margin-bottom: 40px; }
.resultados-title { font-family: 'Playfair Display', serif; font-size: clamp(28px, 4vw, 44px);
  font-weight: 500; letter-spacing: -0.02em; color: var(--ink); margin: 10px 0 0; }
.resultados-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 28px; max-width: 1000px; margin: 0 auto; }
.antes-despues-combinado { margin: 0; background: var(--cream); border: 1px solid var(--line);
  border-radius: 4px; overflow: hidden; }
.antes-despues-combinado img { display: block; width: 100%; max-width: 100%; height: auto; }
.antes-despues-combinado figcaption { padding: 14px 18px; font-family: 'DM Sans', sans-serif;
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-60);
  text-align: center; }
@media (max-width: 600px) {
  .resultados { padding: 52px 0; }
  .resultados-grid { grid-template-columns: 1fr; gap: 20px; }
}