/* ===========================================================
   Centro de Estética Laura Velázquez — Design tokens + estilos
   Identidad: lujo minimalista y silencioso. Blanco/crema + madera
   clara + grafito. Terracota como acento mínimo, nunca fondo.
   =========================================================== */

:root{
  /* superficie — blanco dominante, madera solo como matiz muy sutil */
  --bg:            #FFFFFF;
  --bg-soft:       #FBFAF8;
  --bg-wood:       #F8F4EC;   /* matiz madera clara, casi blanco — uso muy puntual */
  --line:          #EDE8DF;

  /* texto — oscurecido para cumplir AAA (7:1) en texto normal sobre blanco */
  --ink:           #262220;
  --ink-soft:      #5C5349;

  /* acento — oscurecido para cumplir AA (5.8:1) en botones y enlaces sobre blanco.
     SOLO para CTA y detalles puntuales, nunca fondo de sección */
  --accent:        #9C5039;
  --accent-ink:    #FFFFFF;
  --accent-soft:   #E7C9BC;

  /* semántico */
  --focus:         #1B6BB0;

  --radius: 2px;
  --maxw: 1180px;
}

/* Decisión de marca: sin modo oscuro automático. La identidad de Laura es
   "lujo minimalista claro" — debe verse igual sin importar el sistema del
   visitante, así que el tema claro de arriba se usa siempre. */

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Jost', -apple-system, 'Segoe UI', sans-serif;
  font-weight:300;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }

h1,h2,h3{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-weight:500;
  line-height:1.15;
  margin:0 0 .5em;
  text-wrap:balance;
  color:var(--ink);
}
h1{ font-size:clamp(34px,5.4vw,58px); font-weight:500; }
h2{ font-size:clamp(26px,3.6vw,38px); }
h3{ font-size:20px; font-weight:600; }

p{ margin:0 0 1em; color:var(--ink-soft); max-width:62ch; }
/* En anchos "intermedios" (tablet/iPad, sin llegar a escritorio grande) el hueco
   lateral de una columna de 62ch se nota más porque sobra ancho de pantalla —
   se amplía a 72ch, el límite superior del rango recomendado (45-75ch) para
   legibilidad, así se aprovecha mejor el espacio sin perder la lectura cómoda. */
@media (min-width:900px) and (max-width:1300px){
  p{ max-width:72ch; }
}


/* ---------- aparición al hacer scroll ---------- */
[data-reveal]{
  opacity:0; transform:translateY(18px);
  transition:opacity .6s ease, transform .6s ease;
}
[data-reveal].is-visible{ opacity:1; transform:translateY(0); }
[data-reveal-group] > *{
  opacity:0; transform:translateY(18px);
  transition:opacity .5s ease, transform .5s ease;
}
[data-reveal-group].is-visible > *{ opacity:1; transform:translateY(0); }
[data-reveal-group].is-visible > *:nth-child(1){ transition-delay:.03s; }
[data-reveal-group].is-visible > *:nth-child(2){ transition-delay:.09s; }
[data-reveal-group].is-visible > *:nth-child(3){ transition-delay:.15s; }
[data-reveal-group].is-visible > *:nth-child(4){ transition-delay:.21s; }
[data-reveal-group].is-visible > *:nth-child(5){ transition-delay:.27s; }
[data-reveal-group].is-visible > *:nth-child(6){ transition-delay:.33s; }
@media (prefers-reduced-motion: reduce){
  [data-reveal], [data-reveal-group] > *{ opacity:1; transform:none; transition:none; }
}

a{ color:var(--ink); }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible, [tabindex="0"]:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:3px;
}

.eyebrow{
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin:0 0 10px;
}

/* Palabra de acento dentro de un título de sección — mismo recurso que
   ya se usaba en Tips ("Tips de cuidado"), extendido donde encaja y pasa
   el contraste real (comprobado sección por sección, no a ojo). */
.section-head h2 em{ font-style:italic; font-weight:500; color:var(--accent); }

/* Línea corta de acento sobre un título — marca el inicio de un módulo
   nuevo cuando dos secciones consecutivas comparten el mismo fondo (p.ej.
   dos bloques blancos seguidos) y no hay ningún otro quiebro visual entre
   ellos. Recurso distinto de la marca "L" (exclusiva de la transición
   Hero→Tratamientos de la home), reutilizable en cualquier página. */
.accent-rule{
  display:block; width:48px; height:2px; margin:0 auto 22px;
  background:var(--accent);
}

/* Marca de transición entre el Hero y el siguiente módulo (de otro modo,
   ambos terminan/empiezan en blanco liso y se perciben como el mismo
   bloque): una letra "L" grande y muy translúcida, inspirada en el trazo
   cursivo del propio logo, detrás del eyebrow/título — audaz pero sin
   añadir peso visual real (opacidad muy baja, no interactiva). */
.section-head--transition{ position:relative; }
.section-head--transition > *{ position:relative; z-index:1; }
.section-head--transition::before{
  content:"L"; position:absolute; top:-64px; left:-14px; z-index:0;
  font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:500;
  font-size:260px; line-height:1; color:var(--accent); opacity:.08;
  pointer-events:none; user-select:none;
}
@media (max-width:640px){
  .section-head--transition::before{ font-size:170px; top:-40px; }
}

.container{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }
@media (max-width:640px){ .container{ padding:0 20px; } }

/* ---------- skip link ---------- */
.skip-link{
  position:absolute; left:12px; top:-60px;
  background:var(--ink); color:var(--bg);
  padding:10px 16px; border-radius:var(--radius);
  z-index:200; transition:top .15s;
  font-size:14px;
}
.skip-link:focus{ top:12px; }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  height:84px;
}
.brand img{ height:40px; width:auto; }
.brand .logo-light{ display:none; } /* logo blanco sin uso mientras no haya modo oscuro */

nav.main-nav{ display:flex; align-items:center; gap:34px; }
nav.main-nav ul{ list-style:none; display:flex; gap:28px; margin:0; padding:0; }
nav.main-nav ul li{ display:flex; }
nav.main-nav ul li[hidden]{ display:none; }
nav.main-nav a{
  display:inline-flex; align-items:center; gap:4px;
  text-decoration:none; font-size:14px; letter-spacing:.02em; color:var(--ink);
  padding:6px 0; border-bottom:1px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
nav.main-nav a.btn{
  padding:13px 28px; border:1px solid var(--accent); gap:8px;
  color:var(--accent-ink);
}
nav.main-nav a:not(.btn)::after{
  content:"→"; display:inline-block; font-size:11px;
  opacity:0; transform:translateX(-4px);
  transition:opacity .2s ease, transform .2s ease;
}
nav.main-nav a:not(.btn):hover{ color:var(--accent); border-bottom-color:var(--accent); }
nav.main-nav a:not(.btn):hover::after{ opacity:1; transform:translateX(0); }
nav.main-nav a.btn:hover{ background:transparent; color:var(--accent); }

/* Ítem de la página actual: siempre en --accent, salvo mientras el ratón
   está sobre OTRO ítem del menú (entonces cede el protagonismo a ese otro
   y vuelve a su color normal) — en cuanto se deja de pasar el ratón por
   cualquier otro ítem, recupera --accent automáticamente. */
nav.main-nav a[aria-current="page"]{ color:var(--accent); border-bottom-color:var(--accent); }
nav.main-nav ul:has(a:not([aria-current="page"]):hover) a[aria-current="page"]{
  color:var(--ink); border-bottom-color:transparent;
}

.nav-toggle{
  display:none; background:none; border:1px solid var(--line); border-radius:var(--radius);
  width:42px; height:42px; align-items:center; justify-content:center;
  color:var(--ink); cursor:pointer;
}

@media (max-width:860px){
  .nav-toggle{ display:flex; }
  nav.main-nav{
    position:fixed; top:84px; left:0; right:0; height:calc(100vh - 84px); z-index:120;
    background:var(--bg); flex-direction:column; align-items:flex-start;
    gap:0; padding:8px 28px 28px;
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .15s, transform .15s;
    overflow-y:auto;
  }
  nav.main-nav.is-open{ opacity:1; transform:translateY(0); pointer-events:auto; }
  nav.main-nav ul{ flex-direction:column; gap:2px; width:100%; }
  nav.main-nav ul li{ width:100%; border-bottom:1px solid var(--line); }
  nav.main-nav ul a{ display:block; padding:16px 2px; font-size:16px; }
  nav.main-nav .btn{ margin-top:20px; width:100%; justify-content:center; }
}
@media (prefers-reduced-motion: reduce){
  nav.main-nav{ transition:none; }
}

/* ---------- submenú de navegación bajo "Tratamientos" (Ronda 45, cerrado) ----------
   Hover en escritorio (solo punteros finos) o botón accesible con
   aria-expanded (teclado/táctil); en el menú hamburguesa móvil el mismo
   mecanismo se convierte en acordeón. Panel con fondo --bg-wood, texto
   --ink (contraste real 14.6:1) y hover en --accent (5.3:1) — elegido por
   Laura frente a la variante sin panel, que se ha retirado. */
.nav-item-has-submenu{ position:relative; flex-wrap:wrap; align-items:center; }
.nav-submenu-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; margin-left:-10px; padding:0;
  background:none; border:none; color:var(--ink); cursor:pointer;
  align-self:center;
}
.nav-submenu-caret{ width:9px; height:9px; transition:transform .2s ease; }
.nav-submenu-toggle[aria-expanded="true"] .nav-submenu-caret{ transform:rotate(180deg); }

nav.main-nav .nav-submenu{
  display:block; gap:0;
  list-style:none; margin:0; flex:0 0 100%;
  position:absolute; top:calc(100% + 10px); left:0; z-index:110;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
nav.main-nav .nav-submenu li{ width:100%; display:block; }

@media (hover:hover) and (pointer:fine){
  .nav-item-has-submenu:hover .nav-submenu{ opacity:1; visibility:visible; transform:translateY(0); }
}
.nav-submenu-toggle[aria-expanded="true"] + .nav-submenu{
  opacity:1; visibility:visible; transform:translateY(0);
}

/* Versión 1 — panel con fondo beige sólido (mismo lenguaje que las
   secciones ".wood" del resto del sitio: --bg-wood + texto --ink,
   contraste real 14.6:1; hover en --accent, 5.3:1). */
.nav-submenu--panel{
  padding:10px 4px 10px 16px; min-width:220px;
  background:var(--bg-wood); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 20px 40px -20px rgba(38,34,32,.35);
}
nav.main-nav .nav-submenu--panel a{
  display:block; width:100%; padding:10px 6px 10px 24px; font-size:13.5px; color:var(--ink);
  border-bottom:none; border-radius:calc(var(--radius) + 1px);
}
.nav-submenu--panel a::after{ content:none; }
.nav-submenu--panel a:hover, .nav-submenu--panel a:focus-visible{ background:var(--bg); color:var(--accent); }

@media (max-width:860px){
  .nav-submenu-toggle{ width:36px; height:36px; }
  nav.main-nav .nav-submenu{
    position:static; width:100%; z-index:auto;
    opacity:1; visibility:visible; transform:none;
    max-height:0; overflow:hidden;
    transition:max-height .2s ease;
  }
  .nav-submenu-toggle[aria-expanded="true"] + .nav-submenu{ max-height:420px; }
  .nav-submenu--panel{ margin-top:8px; box-shadow:none; }
  nav.main-nav .nav-submenu--panel a{ padding:12px 2px; border-bottom:1px solid var(--line); font-size:15px; }
}
@media (prefers-reduced-motion: reduce){
  .nav-submenu, .nav-submenu-caret{ transition:none; }
}

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 28px;
  background:var(--accent); color:var(--accent-ink);
  text-decoration:none; font-size:13.5px; letter-spacing:.04em; white-space:nowrap;
  border:1px solid var(--accent); border-radius:var(--radius);
  cursor:pointer; flex:0 0 auto;
}
.btn:hover{ background:transparent; color:var(--accent); }
.btn-outline{
  background:transparent; color:var(--ink); border:1px solid var(--line);
}
.btn-outline:hover{ border-color:var(--accent); color:var(--accent); }

/* CTA del hero: uno principal (relleno) y uno secundario (contorno) por
   defecto — el hover no existe en móvil, así que la jerarquía no puede
   depender solo de él. */
.btn-hero-primary, .btn-hero-secondary{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 28px;
  text-decoration:none; font-size:13.5px; letter-spacing:.04em;
  border-radius:var(--radius); border:1px solid;
  cursor:pointer; transform:scale(1);
  transition:background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.btn-hero-primary{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.btn-hero-primary:hover, .btn-hero-primary:focus-visible{
  transform:scale(1.05); box-shadow:0 14px 26px -14px rgba(38,34,32,.4);
}
.btn-hero-secondary{ background:var(--bg); border-color:var(--ink); color:var(--ink); }
.btn-hero-secondary:hover, .btn-hero-secondary:focus-visible{
  background:var(--accent); border-color:var(--accent); color:var(--accent-ink);
  transform:scale(1.05); box-shadow:0 14px 26px -14px rgba(38,34,32,.4);
}

/* ---------- hero a ancho completo ---------- */
.hero-full{
  position:relative; overflow:hidden;
  min-height:clamp(480px, 78vh, 720px);
  display:flex; align-items:center;
}
.hero-bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 18%;
}
.hero-scrim{ position:absolute; inset:0; background:none; }
.hero-full-inner{
  position:relative; z-index:1; max-width:640px;
  margin-left:max(0px, calc((100% - var(--maxw)) / 2));
  margin-right:auto;
}
.hero-full-inner .lead{ font-size:18px; color:var(--ink-soft); max-width:46ch; }
/* Acento tipográfico también en el H1 del Hero — auditado sobre la foto
   real (no solo sobre el color de referencia) porque este es el único
   título que va sobre un fondo variable en vez de un color sólido. */
.hero-full h1 em{ font-style:italic; font-weight:500; color:var(--accent); }
/* Fondo anclado al bloque de texto (no al ancho de la sección): así el
   degradado siempre cubre el texto con opacidad suficiente sea cual sea
   el ancho del viewport, en vez de depender de porcentajes del hero completo
   (bug real detectado: con texto centrado en pantallas anchas, el borde
   derecho del H1 caía en la zona transparente del degradado, sobre la foto). */
.hero-full-inner::before{
  content:""; position:absolute; z-index:-1;
  top:-1000px; bottom:-1000px; left:-60px;
  width:calc(100% + 60px + 280px);
  /* Degradado puramente horizontal (90deg): con un ángulo diagonal, estirar
     el panel en vertical (necesario para que no se note un corte duro al
     recortarlo con overflow:hidden) desplaza el punto de referencia del
     degradado y reduce la opacidad real sobre el texto — comprobado con
     medición de contraste real, no a ojo. Horizontal puro evita el problema
     por construcción: la altura del panel deja de afectar dónde cae el texto
     a lo largo del degradado. */
  background:linear-gradient(90deg,
    var(--bg) 0px, var(--bg) 700px,
    color-mix(in srgb, var(--bg) 88%, transparent) 800px,
    transparent 940px);
}

.hero-badges{ display:flex; gap:26px; margin-top:30px; flex-wrap:wrap; }
.hero-badge{ display:flex; align-items:center; gap:9px; }
.hero-badge img{ flex:0 0 auto; }
.hero-badge-text{
  font-size:13.5px; color:var(--ink-soft);
  transform:translateY(3px);
}
.hero-badge-text b{ color:var(--ink); font-weight:600; }

@media (max-width:860px){
  /* Sección más alta que antes: el bloque de texto ocupa la misma altura
     en píxeles (no ha cambiado el copy), pero al crecer la sección esa
     altura pasa a ser una fracción menor del total — deja más margen
     arriba para que se vea la cara y la sonrisa de Laura, sin perder el
     efecto de opacidad que da legibilidad al texto. */
  .hero-full{ min-height:clamp(540px,96vh,780px); align-items:flex-end; padding-bottom:48px; }
  .hero-scrim{ background:linear-gradient(0deg, var(--bg) 72%, color-mix(in srgb, var(--bg) 90%, transparent) 83%, transparent 100%); }
  .hero-full-inner{ max-width:none; }
  .hero-full-inner::before{ content:none; }
}
/* Pantallas muy estrechas (~360px o menos): el eyebrow pasa a 2 líneas y
   el bloque de texto ocupa una fracción mayor de la sección, incluso con
   la altura ampliada de arriba — medido y comprobado que a 320px el
   contraste real caía a 3.7:1 (por debajo de AA). Aquí se prioriza la
   legibilidad sobre ver más foto: se vuelve a un fondo más conservador. */
@media (max-width:360px){
  .hero-scrim{ background:linear-gradient(0deg, var(--bg) 88%, color-mix(in srgb, var(--bg) 90%, transparent) 94%, transparent 100%); }
}

/* ---------- Hero en tablet y móvil (hasta 1100px): foto entera arriba, texto debajo ----------
   Decisión del cliente (Ronda 72): sin difuminado ni opacidad sobre la foto. La foto va arriba con su
   color original y el texto debajo sobre fondo sólido (--bg), así el contraste no depende de la foto
   (todo el texto ≥ 5,8:1). Por encima de 1100px no cambia nada (foto a la derecha con degradado). */
@media (max-width:1100px){
  /* padding:0: la regla global `section{padding:80px 0}` dejaría un hueco blanco encima de la foto */
  .hero-full{ display:block; min-height:0; padding:0; overflow:visible; }
  /* Foto anclada arriba (50% 0%): si hay que recortar, se recorta por el cuerpo y nunca por la cara.
     Alto proporcional al ancho (80vw, entre 340 y 680px). La cabeza ocupa el 34% superior de la foto
     (alto de la foto = 1,21 × ancho); con estas alturas se ve entre el 55% y el 75% de la foto
     (hasta la cintura), muy por encima del 34% necesario para que la cara quepa entera. */
  .hero-bg{
    position:static; display:block; width:100%; height:clamp(340px, 80vw, 680px);
    object-fit:cover; object-position:50% 0%;
  }
  .hero-scrim{ display:none; }
  .hero-full-inner{ max-width:none; margin-left:auto; margin-right:auto; padding-top:36px; padding-bottom:56px; }
  .hero-full-inner::before{ content:none; }
}
/* Móviles estrechos y bajos (p. ej. 375×667): la foto pasa a banda más baja (53vw = 44% de la foto; la
   cabeza ocupa el 34% superior, así que la cara sigue entera) y el margen superior del texto se reduce,
   para que el botón "Reservar cita" quede en la primera pantalla. En pantallas más altas no se aplica.
   Conocido: a 320×568 (iPhone SE de 1ª generación) los botones quedan por debajo del primer vistazo. */
@media (max-width:480px) and (max-height:760px){
  .hero-bg{ height:53vw; }
  .hero-full-inner{ padding-top:24px; }
}

/* ---------- section shell ---------- */
section{ padding:80px 0; }
section.wood{ background:var(--bg-wood); }
.section-head{ max-width:60ch; margin-bottom:44px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

/* ---------- treatment cards ---------- */
.card-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:2px;
  background:var(--line);
}
.card{
  background:var(--bg); position:relative; overflow:hidden;
  display:flex; flex-direction:column; height:100%;
  transition:transform .25s ease, box-shadow .25s ease;
}
.card:hover, .card:focus-within{
  transform:translateY(-4px);
  box-shadow:0 18px 34px -18px rgba(38,34,32,.28);
  z-index:1;
}
.card-media{ position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--bg-wood); }
.card-media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s ease;
}
.card:hover .card-media img{ transform:scale(1.06); }
.play-btn{
  position:absolute; inset:0; margin:auto; width:52px; height:52px;
  border-radius:50%; background:color-mix(in srgb, var(--bg) 78%, transparent);
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; padding:0;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.play-btn svg{ width:16px; height:16px; fill:var(--ink); margin-left:2px; }
.play-btn:hover{ background:var(--accent); border-color:var(--accent); transform:scale(1.08); }
.play-btn:hover svg{ fill:var(--accent-ink); }
.card-body{ padding:20px 20px 24px; display:flex; flex-direction:column; flex:1; }
.card-body h3{ margin-bottom:6px; }
.card-body p{ flex:1; }
.card-body a.card-link{ margin-top:14px; }
a.card-link{
  font-size:13px; text-decoration:none; color:var(--accent);
  display:inline-flex; align-items:center; gap:6px;
  width:fit-content;
}
a.card-link span.arrow{ display:inline-block; transition:transform .2s ease; }
a.card-link:hover span.arrow{ transform:translateX(4px); }
a.card-link{
  background-image:linear-gradient(var(--accent), var(--accent));
  background-repeat:no-repeat; background-position:0 100%; background-size:0% 1px;
  transition:background-size .25s ease;
}
a.card-link:hover{ background-size:100% 1px; }
@media (max-width:960px){ .card-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .card-grid{ grid-template-columns:1fr; } }

.section-see-all{ text-align:center; margin-top:28px; }
.section-see-all a.card-link{ display:inline-flex; font-size:14px; }

/* ---------- antes/después: 3 tarjetas fijas ---------- */
.ba-section{ padding-top:56px; padding-bottom:56px; }
.ba-title{ font-size:clamp(30px,4.4vw,46px); margin-bottom:0; }

.ba-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:26px;
  margin-top:36px;
}
.ba-card{ display:flex; flex-direction:column; gap:14px; }
.ba-slider{
  position:relative;
  aspect-ratio:4/5; width:100%;
  overflow:hidden; border-radius:var(--radius);
  touch-action:pan-y;
  box-shadow:0 24px 46px -26px rgba(38,34,32,.35);
}
.ba-slider img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; user-select:none; }
/* "después" va encima, recortada — a la izquierda del tirador se ve "antes" (capa base) */
.ba-after-img{ clip-path:inset(0 0 0 50%); }
.ba-handle{
  position:absolute; top:0; bottom:0; left:50%;
  width:2px; background:var(--bg);
  transform:translateX(-1px);
  pointer-events:none;
}
.ba-handle::after{
  content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:38px; height:38px; border-radius:50%; background:var(--bg);
  border:1px solid var(--line);
  box-shadow:0 6px 16px -6px rgba(38,34,32,.3);
}
.ba-handle::before{
  content:"↔"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-size:15px; color:var(--ink); z-index:1;
}
.ba-range{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; cursor:ew-resize; margin:0;
}
.ba-tag{
  position:absolute; top:14px; font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  padding:5px 12px; background:var(--ink); color:var(--bg); border-radius:100px; font-weight:500; z-index:1;
}
.ba-tag.before{ left:14px; } .ba-tag.after{ right:14px; }
.ba-card-caption{
  text-align:center; margin:0; font-size:13.5px; color:var(--ink-soft);
}
.ba-card-caption b{ color:var(--ink); font-family:'Cormorant Garamond',serif; font-size:16px; }

@media (max-width:860px){
  .ba-grid{ grid-template-columns:1fr; max-width:360px; margin-left:auto; margin-right:auto; }
}

/* ---------- sobre mí ---------- */
.about{ display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:center; }
.about img{ border-radius:var(--radius); }
.about blockquote{
  font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:22px; line-height:1.5; color:var(--ink);
  margin:20px 0; padding-left:20px; border-left:2px solid var(--accent-soft);
}
@media (max-width:860px){ .about{ grid-template-columns:1fr; } }

/* ---------- reseñas ---------- */
.rating-row{ display:flex; gap:16px; margin-bottom:40px; flex-wrap:wrap; }
.rating-pill{
  display:inline-flex; align-items:center; gap:9px;
  border:1px solid var(--line); border-radius:100px; background:var(--bg);
  padding:10px 20px 10px 14px; font-size:13.5px;
  text-decoration:none; color:var(--ink); cursor:pointer;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.rating-pill:hover{ border-color:var(--accent-soft); box-shadow:0 8px 20px -12px rgba(38,34,32,.25); transform:translateY(-2px); }
.rating-pill img{ display:block; }
.rating-pill b{ font-family:'Cormorant Garamond',serif; font-size:19px; }
.rating-pill .star{ color:var(--accent); }
.rating-pill .rating-count{ color:var(--ink-soft); }

.review-carousel{ position:relative; }
.review-track{
  display:flex; gap:2px; background:var(--line); border:1px solid var(--line);
  overflow-x:auto; scroll-behavior:auto;
  -webkit-overflow-scrolling:touch;
}
/* Bug real detectado y corregido: con `scroll-behavior:smooth` activo,
   cada asignación de `scrollLeft` en el bucle de animación (Ronda 34)
   disparaba una nueva animación de scroll que se reiniciaba antes de
   completarse, dejando el carril prácticamente inmóvil (confirmado
   midiendo `scrollLeft` en vivo: se quedaba en 0). Corregido a `auto`.
   Se retira también `scroll-snap-type` — ya no aporta nada útil con el
   carril en movimiento continuo en vez de por pasos. */
.review-track::-webkit-scrollbar{ display:none; }
.review-track{ scrollbar-width:none; }
.review{
  background:var(--bg); padding:28px 26px; margin:0;
  display:flex; flex-direction:column; gap:14px;
  flex:0 0 100%; scroll-snap-align:start;
}
/* En móvil, la tarjeta no ocupa el 100% del ancho: deja asomar un margen
   de la siguiente para que se note que el módulo se puede deslizar (antes
   no había ninguna pista visual de que hubiera más reseñas). */
@media (max-width:640px){ .review{ flex-basis:88%; } }
@media (min-width:640px){ .review{ flex-basis:50%; } }
@media (min-width:1000px){ .review{ flex-basis:calc(100% / 3); } }
.review-avatar{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%; flex:0 0 auto;
  background:var(--av-bg,var(--accent)); color:#fff;
  font-family:'Jost',sans-serif; font-weight:600; font-size:13.5px; letter-spacing:.02em;
}
.review-body{ display:flex; flex-direction:column; gap:14px; flex:1; }
.review-source{ opacity:.85; }
.review p{ font-style:italic; font-size:14.5px; flex:1; margin:0; }
.review cite{
  font-style:normal; font-size:12.5px; color:var(--ink-soft);
  font-family:'Jost',sans-serif; letter-spacing:.03em;
}
.review cite::before{ content:"— "; }

/* Puntos de posición del carrusel, solo en móvil (donde ya no hay flechas
   y la tarjeta ahora ocupa el 88% con "peek" de la siguiente) — señal
   explícita de cuántas reseñas hay y en cuál te encuentras. Decorativos
   para lectores de pantalla: el contenido real ya se recorre con el
   propio carrusel. */
.review-dots{ display:none; justify-content:center; gap:9px; margin-top:16px; }
@media (max-width:640px){ .review-dots{ display:flex; } }
.review-dot{
  width:6px; height:6px; border-radius:50%;
  background:#8C7D68; /* 3.65:1 sobre --bg-wood, auditado — ver decisiones-diseno.md */
  transition:background .25s ease, width .25s ease, height .25s ease;
}
.review-dot.is-active{ width:9px; height:9px; background:var(--accent); }

/* ---------- marcas ---------- */
.brands-section{ padding-top:72px; }
.brand-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:2px;
  background:var(--line); max-width:900px; margin:0 auto;
}
.brand-card{
  background:var(--bg); aspect-ratio:16/10;
  display:flex; align-items:center; justify-content:center; padding:20px;
  position:relative; overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
}
.brand-card::before{
  content:""; position:absolute; inset:0; background:var(--bg-wood);
  transform:translateY(100%); transition:transform .3s ease; z-index:0;
}
.brand-card:hover{ transform:translateY(-5px); box-shadow:0 20px 34px -20px rgba(38,34,32,.28); z-index:1; }
.brand-card:hover::before{ transform:translateY(0); }
.brand-card img{
  position:relative; z-index:1; height:26px; width:auto; max-width:80%; object-fit:contain;
  filter:grayscale(1) opacity(.5);
  transition:filter .3s ease, transform .3s ease;
}
.brand-card:hover img{ filter:grayscale(0) opacity(1); transform:scale(1.06); }
.brand-card img.logo-invert{ filter:invert(1) grayscale(1) opacity(.5); }
.brand-card:hover img.logo-invert{ filter:invert(1) grayscale(0) opacity(.85); }
.brand-card.brand-pending span{
  position:relative; z-index:1;
  font-family:'Cormorant Garamond',serif; font-style:italic; font-size:19px; color:var(--ink-soft);
}
@media (max-width:640px){ .brand-grid{ grid-template-columns:repeat(2,1fr); } }

/* ---------- CTA moderno (link con marco animado) ---------- */
.btn-modern{
  display:inline-flex; align-items:center; gap:10px;
  margin-top:8px; padding:14px 22px;
  border:1px solid var(--ink); border-radius:var(--radius);
  text-decoration:none; font-size:13.5px; letter-spacing:.03em; color:var(--ink);
  position:relative; overflow:hidden;
  transition:color .3s ease, border-color .3s ease;
}
.btn-modern::before{
  content:""; position:absolute; inset:0; background:var(--ink);
  transform:translateX(-101%); transition:transform .3s ease; z-index:0;
}
.btn-modern span{ position:relative; z-index:1; }
.btn-modern svg{
  position:relative; z-index:1; width:15px; height:15px;
  fill:none; stroke:currentColor; stroke-width:1.8;
  transition:transform .3s ease;
}
.btn-modern:hover{ color:var(--bg); }
.btn-modern:hover::before{ transform:translateX(0); }
.btn-modern:hover svg{ transform:translateX(5px); }

/* ---------- FAQ accordion ---------- */
.faq-group{ margin-bottom:36px; }
.faq-group > h3{
  font-family:'Jost',sans-serif; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); font-weight:600; margin-bottom:6px;
}
details.faq-item{ border-bottom:1px solid var(--line); }
details.faq-item summary{
  cursor:pointer; list-style:none; padding:18px 4px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-size:15.5px; margin:0 -4px;
  transition:color .2s ease, background .2s ease;
}
details.faq-item summary:hover{ color:var(--accent); background:var(--bg-wood); }
details.faq-item summary::-webkit-details-marker{ display:none; }
details.faq-item summary::after{
  content:"+"; font-family:'Cormorant Garamond',serif; font-size:24px; color:var(--accent);
  flex:0 0 auto;
}
details.faq-item[open] summary::after{ content:"–"; }
details.faq-item .faq-a{ padding:0 0 20px; color:var(--ink-soft); font-size:14.5px; max-width:68ch; }

/* ---------- footer ---------- */
footer.site-footer{ background:var(--bg-wood); padding:56px 0 32px; border-top:1px solid var(--line); }
.footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:32px; margin-bottom:40px; }
.footer-grid h3{ font-family:inherit; font-weight:bold; line-height:inherit; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 14px; }
.footer-grid ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.footer-grid a{ text-decoration:none; font-size:14px; color:var(--ink); }
.footer-grid a:hover{ color:var(--accent); }
.social-row{ display:flex; gap:12px; margin-top:14px; }
.social-icon{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; text-decoration:none;
  color:var(--ink);
}
.social-icon:hover{ border-color:var(--accent); color:var(--accent); }
.social-icon svg{ width:16px; height:16px; fill:currentColor; }
.social-icon[aria-disabled="true"]{ opacity:.35; pointer-events:none; }
.footer-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  border-top:1px solid var(--line); padding-top:22px;
  font-size:12.5px; color:var(--ink-soft);
}
.footer-bottom a{ color:var(--ink-soft); }
@media (max-width:860px){ .footer-grid{ grid-template-columns:1fr 1fr; } }

/* ---------- persistent: whatsapp + chatbot + cookies ---------- */
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:150;
  width:56px; height:56px; border-radius:50%;
  /* Verde oficial #25D366 con icono blanco daba solo 1.98:1 (auditoría de
     accesibilidad) — muy por debajo del mínimo de 3:1 para iconos/UI
     (WCAG 1.4.11). Este tono, más profundo, da 3.91:1 y sigue leyéndose
     como "verde WhatsApp". */
  background:#1A9447; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.18); text-decoration:none;
}
.wa-float svg{ width:26px; height:26px; fill:#fff; }

.cookie-banner{
  position:fixed; left:20px; right:20px; bottom:20px; z-index:180;
  max-width:560px; margin:0 auto;
  background:var(--bg); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 20px; box-shadow:0 8px 30px rgba(0,0,0,.12);
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.cookie-banner p{ margin:0; font-size:13px; flex:1 1 260px; }
.cookie-banner[hidden]{ display:none; }

/* ---------- lightbox ---------- */
dialog.lightbox{
  border:none; padding:0; background:transparent; max-width:900px; width:92vw;
  max-height:88vh; overflow:visible;
}
dialog.lightbox::backdrop{ background:rgba(20,16,13,.82); }
dialog.lightbox video{ width:100%; max-height:calc(88vh - 48px); display:block; border-radius:var(--radius); }
dialog.lightbox .lb-desc{ color:#fff; font-size:14px; max-width:none; margin:12px 0 0; text-align:center; }
dialog.lightbox .lb-close{
  position:absolute; top:10px; right:10px; z-index:2;
  background:rgba(20,16,13,.6); border:none; border-radius:50%;
  color:#fff; font-size:15px; line-height:1; cursor:pointer;
  width:36px; height:36px;
}

/* ======================================================================
   Tips: editorial asimétrico, numeración a gran escala, foto encajonada
   (no a ancho completo) — texto siempre sobre fondo sólido beige, sin
   dependencia de degradado.
====================================================================== */
.tips-editorial{
  display:grid; grid-template-columns:minmax(280px, 38%) 1fr; gap:0;
}
.tips-editorial-media{ position:relative; min-height:420px; }
.tips-editorial-media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 20%;
}
.tips-editorial-content{
  background:var(--bg-wood);
  padding:clamp(40px,6vw,88px) clamp(24px,5vw,64px);
  display:flex; flex-direction:column; justify-content:center;
}
.tips-editorial-content .section-head h2{
  font-size:clamp(36px, 5vw, 64px); line-height:1; margin:0;
}
.tip-list{ list-style:none; margin:40px 0 0; padding:0; display:flex; flex-direction:column; }
.tip-row{
  display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:baseline;
  padding:26px 0; border-top:1px solid var(--line);
}
.tip-list li:last-child{ border-bottom:1px solid var(--line); }
.tip-num{
  font-family:'Cormorant Garamond',serif; font-size:clamp(30px,3vw,44px);
  color:var(--accent); font-weight:500; line-height:1;
}
.tip-row h3{ margin:0 0 6px; }
.tip-row p{ margin:0; }
@media (max-width:900px){
  .tips-editorial{ grid-template-columns:1fr; }
  .tips-editorial-media{ min-height:280px; }
  .tips-editorial-content{ padding:36px 24px 40px; }
}
/* La sección siguiente (FAQ) quedaba con demasiado espacio en blanco: la
   suma del padding inferior de este panel + el padding superior estándar
   de `section` se notaba como un hueco desproporcionado. */
.tips-editorial + section{ padding-top:40px; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ======================================================================
   Página Tratamientos (hub) — comparador ligero temporal de página
   completa (Versión A / B). Reutiliza el mismo patrón visual ya usado
   en comparadores anteriores de la home.
====================================================================== */
.transition-switcher{
  position:fixed; top:97px; right:14px; z-index:200;
  display:flex; align-items:center; gap:6px;
  background:var(--bg); border:1px solid var(--line); border-radius:var(--radius);
  padding:8px 10px; box-shadow:0 14px 30px -16px rgba(38,34,32,.35);
  font-size:11.5px; color:var(--ink-soft);
}
.transition-switch-btn{
  font:inherit; font-size:11px; letter-spacing:.02em;
  padding:5px 9px; border:1px solid var(--line); background:var(--bg); color:var(--ink-soft);
  border-radius:100px; cursor:pointer; transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.transition-switch-btn.is-active{ background:var(--ink); border-color:var(--ink); color:var(--bg); }
/* segundo comparador en la misma página (ej. Facial: precios + nav) — se apila debajo del primero */
.transition-switcher--nav{ top:145px; }
@media (max-width:640px){
  .transition-switcher{ top:auto; bottom:14px; right:14px; left:14px; }
  .transition-switcher--nav{ top:auto; bottom:70px; }
}

/* ---------- indicador "dónde estoy" (punto 7) ----------
   Solo aparece cuando la miga de pan ya no es visible (clase
   .breadcrumb-out en <body>, ver main.js), para no convivir con ella
   en pantalla. En móvil, sufijo junto al logo (el menú principal
   queda colapsado en el "hamburguesa" y no sirve ahí). En escritorio,
   una cajita bajo "Tratamientos" con el mismo lenguaje visual que el
   panel del submenú (fondo --bg-wood), que desaparece al abrir el
   panel real (hover o teclado) y dentro de ese panel se resalta la
   categoría actual. */
.nav-current-suffix{
  display:none;
  font-size:13px; letter-spacing:.02em; color:var(--accent); white-space:nowrap;
}
.nav-current-badge{
  display:none;
  position:absolute; top:calc(100% + 10px); left:0; z-index:105;
  background:var(--bg-wood); border:1px solid var(--line); border-radius:var(--radius);
  padding:9px 16px; font-size:13px; color:var(--ink); white-space:nowrap;
  box-shadow:0 20px 40px -20px rgba(38,34,32,.35);
}
body.breadcrumb-out .nav-current-suffix{ display:inline; }
@media (min-width:861px){
  body.breadcrumb-out .nav-current-suffix{ display:none; }
  body.breadcrumb-out .nav-current-badge{ display:block; }
}
@media (hover:hover) and (pointer:fine){
  .nav-item-has-submenu:hover .nav-current-badge{ display:none; }
}
.nav-item-has-submenu:has(.nav-submenu-toggle[aria-expanded="true"]) .nav-current-badge{
  display:none;
}
.nav-submenu--panel li.is-current-page a{
  color:var(--accent); font-weight:600; box-shadow:inset 0 0 0 1px var(--accent);
}
@media (max-width:640px){
  .nav-current-suffix{ font-size:11.5px; }
}

/* ---------- breadcrumb ---------- */
.breadcrumb{ padding:20px 0 0; }
.breadcrumb ol{ list-style:none; display:flex; gap:8px; margin:0; padding:0; font-size:12.5px; color:var(--ink-soft); }
.breadcrumb li:not(:last-child)::after{ content:"/"; margin-left:8px; color:var(--line); }
.breadcrumb a{ color:var(--ink-soft); text-decoration:none; }
.breadcrumb a:hover{ color:var(--accent); }
.breadcrumb li.is-current{
  color:var(--ink); border-bottom:1px solid var(--ink); padding-bottom:2px;
}

/* ---------- Tratamientos (hub) ---------- */
.trt-hero-a{
  display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center;
  padding-top:12px;
}
.trt-hero-a h1 em{ color:var(--accent); font-style:italic; }
.trt-hero-a .lead{ font-size:18px; color:var(--ink-soft); max-width:52ch; margin:14px 0 26px; }
.trt-hero-a-media{
  border-radius:var(--radius); overflow:hidden; aspect-ratio:4/5;
  border:2px solid var(--accent);
}
.trt-hero-a-media img{
  width:100%; height:100%; object-fit:cover;
}
@media (max-width:860px){
  .trt-hero-a{ grid-template-columns:1fr; gap:28px; }
  .trt-hero-a-media{ aspect-ratio:16/9; order:-1; }
  /* La foto original es 4:5 — en este recuadro 16:9, mucho más bajo, el
     recorte centrado por defecto pierde la parte con más contenido real
     (las manos trabajando sobre el rostro, hacia el centro/tercio
     inferior de la foto actual). Se ancla ahí en vez de centrado. */
  .trt-hero-a-media img{ object-position:50% 78%; }
}

.card-grid--6{ grid-template-columns:repeat(3,1fr); }
@media (max-width:960px){ .card-grid--6{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .card-grid--6{ grid-template-columns:1fr; } }
.card-media-placeholder{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--ink-soft);
}
.card-body p strong{ color:var(--ink); font-weight:600; }

.trt-trust{ display:grid; grid-template-columns:1fr .9fr; gap:64px; align-items:center; }
.trt-trust .lead{ font-size:16.5px; color:var(--ink-soft); max-width:48ch; margin:14px 0 26px; }
.trt-trust-media{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.trt-trust-media img{
  width:100%; height:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--radius);
}
.trt-trust-media img:last-child{ margin-top:32px; }
@media (max-width:860px){
  .trt-trust{ grid-template-columns:1fr; gap:32px; }
  .trt-trust-media img:last-child{ margin-top:0; }
}

.trt-cta-a{ text-align:center; padding:12px 0; }
.trt-cta-a h2{ margin-bottom:22px; }

/* ======================================================================
   Página "Sobre Laura" — cerrada en Versión B (editorial, asimétrica,
   con panel oscuro y numeración grande). Misma paleta (--ink, --accent,
   --bg-wood), ningún color nuevo.
====================================================================== */

/* ---- Hero: panel beige + foto a sangre (decisión final del cliente,
   comparado antes con una variante oscura) ---- */
.sl-hero-section{ padding:0; margin-top:20px; } /* mismo margen que .breadcrumb{padding:20px 0 0} por encima */
.sl-hero-b{
  display:grid; grid-template-columns:1fr 1fr; min-height:440px;
}
.sl-hero-b-text{
  background:var(--bg-wood); color:var(--ink); display:flex; flex-direction:column;
  justify-content:center;
  /* Vertical fijo; el horizontal se ancla al mismo margen que usa el resto
     de la página (.container: máx. 1180px + 28px de aire) aunque este
     bloque vaya a sangre — mismo cálculo ya usado en el Hero de la home,
     adaptado a 100vw porque aquí el bloque ocupa solo una columna del grid. */
  padding:44px 56px 44px max(28px, calc((100vw - var(--maxw)) / 2 + 28px));
}
.sl-hero-b-text .eyebrow{ color:var(--accent); }
.sl-hero-b-text h1{ color:var(--ink); font-size:clamp(30px,4vw,46px); margin:0; }
.sl-hero-b-text h1 em{ color:var(--accent); font-style:italic; }
.sl-hero-b-text .lead{ color:var(--ink-soft); font-size:16px; max-width:44ch; margin:14px 0 22px; }
.sl-hero-b-actions{ display:flex; gap:14px; flex-wrap:wrap; }
.sl-hero-b-media{ position:relative; overflow:hidden; }
.sl-hero-b-media img{ width:100%; height:100%; object-fit:cover; object-position:50% 18%; }
@media (max-width:860px){
  .sl-hero-b{ grid-template-columns:1fr; min-height:0; }
  .sl-hero-b-media{ aspect-ratio:4/5; }
  .sl-hero-b-text{ padding:40px 28px; }
}
@media (max-width:640px){
  .sl-hero-b-text{ padding:36px 20px; }
}

/* ---- Filosofía: glifo de comillas gigante + cita a sangre izquierda ---- */
.sl-philosophy-section{ padding-top:48px; }
.sl-philosophy-b{ position:relative; max-width:74ch; }
.sl-philosophy-b::before{
  content:"“"; position:absolute; top:-90px; left:-24px; z-index:0;
  font-family:'Cormorant Garamond',serif; font-size:260px; line-height:1;
  color:var(--accent); opacity:.1; pointer-events:none; user-select:none;
}
.sl-philosophy-b blockquote{
  position:relative; z-index:1; margin:0;
  font-family:'Cormorant Garamond',serif; font-size:clamp(24px,3.4vw,34px);
  font-style:italic; line-height:1.45; color:var(--ink);
}
.sl-philosophy-b blockquote p{ margin:0 0 20px; }
.sl-philosophy-b blockquote p:last-child{ margin-bottom:0; color:var(--accent); font-weight:500; }
@media (max-width:640px){ .sl-philosophy-b::before{ font-size:150px; top:-50px; left:-10px; } }

/* ---- Formación: editorial asimétrico, mismo patrón que "Tips de cuidado"
   de la Home (.tips-editorial) — foto de Laura encajonada + panel de texto
   en beige con la lista numerada (Ronda 33, sustituye a la tira de diplomas) ---- */
.sl-form-editorial{
  display:grid; grid-template-columns:minmax(280px, 38%) 1fr; gap:0;
}
.sl-form-editorial-media{ position:relative; min-height:420px; }
.sl-form-editorial-media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 22%;
}
.sl-form-editorial-content{
  background:var(--bg-wood);
  padding:clamp(40px,6vw,88px) clamp(24px,5vw,64px);
  display:flex; flex-direction:column; justify-content:center;
}
@media (max-width:900px){
  .sl-form-editorial{ grid-template-columns:1fr; }
  .sl-form-editorial-media{ min-height:280px; }
  .sl-form-editorial-content{ padding:36px 24px 40px; }
}

.sl-form-eyebrow{ display:flex; align-items:center; gap:8px; }
.sl-form-eyebrow svg{ color:var(--accent); flex:0 0 auto; }
.sl-credentials-b{ display:flex; flex-direction:column; margin-top:24px; }
.sl-credential-b{
  display:grid; grid-template-columns:90px 1fr; gap:24px; align-items:start;
  padding:26px 0; border-bottom:1px solid var(--line);
}
.sl-credential-b:first-child{ border-top:1px solid var(--line); }
.sl-credential-b .num{
  font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:500;
  font-size:44px; color:var(--accent); line-height:1;
}
.sl-credential-b h3{ font-size:18px; margin:0 0 6px; }
.sl-credential-b p{ font-size:14.5px; color:var(--ink-soft); margin:0; }
.sl-credential-b .num.sl-credential-b-year{ font-size:34px; }
@media (max-width:560px){ .sl-credential-b{ grid-template-columns:52px 1fr; gap:14px; } .sl-credential-b .num{ font-size:32px; } .sl-credential-b .num.sl-credential-b-year{ font-size:24px; } }

/* ---- Cómo es una cita: bloques apilados a sangre, alineación alterna ---- */
.sl-visit-b{ display:flex; flex-direction:column; gap:2px; background:var(--line); }
.sl-visit-b-item{
  background:var(--bg-wood); display:grid;
  grid-template-columns:120px 1fr; gap:24px; align-items:center;
  /* Mismo anclaje que el Hero: el fondo va a sangre, el contenido se
     alinea con el margen del resto de la página (.container). */
  padding:36px max(28px, calc((100vw - var(--maxw)) / 2 + 28px));
}
.sl-visit-b-item:nth-child(even){ background:var(--bg); }
.sl-visit-b-item .num{
  font-family:'Cormorant Garamond',serif; font-style:italic; color:var(--accent);
  font-size:56px; line-height:1;
}
.sl-visit-b-item h3{ font-size:19px; margin:0 0 8px; }
.sl-visit-b-item p{ font-size:14.5px; color:var(--ink-soft); margin:0; max-width:56ch; }
@media (max-width:640px){
  .sl-visit-b-item{
    grid-template-columns:1fr; text-align:left;
    padding:28px max(20px, calc((100vw - var(--maxw)) / 2 + 20px));
  }
  .sl-visit-b-item .num{ font-size:38px; }
}

/* ======================================================================
   Página "Opiniones" — cerrada en su única versión. Página ligera:
   reutiliza el componente de tarjeta de reseña ya existente (.review),
   organizado en una rejilla uniforme con paginación "Cargar más".
====================================================================== */

/* ---- Rejilla de reseñas: mismas tarjetas .review, en flex uniforme ----
   Flex (no grid) a propósito: con un número de reseñas visibles que no
   siempre es múltiplo de 3, la última fila puede quedar incompleta — en
   flexbox esa fila reparte el hueco entre las tarjetas que sí hay (gracias
   a flex-grow), en vez de dejar un bloque vacío o una tarjeta huérfana más
   estrecha. Los elementos ocultos por "Cargar más" usan el atributo
   `hidden`, así que no participan en este reparto. */
.op-review-grid{ display:flex; flex-wrap:wrap; gap:2px; background:var(--line); margin-top:8px; }
.op-review-grid .review{ flex:1 1 calc(33.333% - 2px); min-width:260px; }
.op-review-grid .review[hidden]{ display:none; } /* .review ya trae display:flex propio, que por especificidad de autor gana al [hidden] del user-agent — hay que forzarlo aquí explícitamente */
@media (max-width:960px){ .op-review-grid .review{ flex-basis:calc(50% - 2px); } }
@media (max-width:640px){ .op-review-grid .review{ flex-basis:100%; min-width:0; } }

/* ---- "Cargar más reseñas" ---- */
.op-load-more{ text-align:center; margin-top:32px; }
.op-load-more .btn[hidden]{ display:none; } /* .btn ya trae su propio display:inline-flex, que por especificidad de autor gana al [hidden] del user-agent — mismo caso que .op-review-grid .review[hidden] */

/* ---- Hero: panel con las dos cifras de valoración a gran escala ----
   margin-top:20px — mismo margen simétrico ya usado en .sl-hero-section
   de Sobre Laura (20px de padding del breadcrumb por encima + 20px aquí),
   para que el panel oscuro no quede pegado a la miga de pan. */
.op-hero-b{ background:var(--ink); color:var(--bg); text-align:center; padding:72px 28px 64px; margin-top:20px; }
.op-hero-b .eyebrow{ color:var(--accent-soft); }
.op-hero-b h1{ color:var(--bg); font-size:clamp(28px,3.6vw,42px); max-width:20ch; margin:0 auto; }
.op-hero-b h1 em{ color:var(--accent-soft); font-style:italic; }
.op-hero-b-stats{ display:flex; justify-content:center; gap:64px; margin:44px 0 8px; flex-wrap:wrap; }
.op-hero-b-stat b{
  display:block; font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:500;
  font-size:clamp(56px,8vw,96px); line-height:1; color:var(--bg);
}
.op-hero-b-stat .op-stars{ color:var(--accent-soft); letter-spacing:.1em; font-size:15px; margin-top:6px; display:block; }
.op-hero-b-stat span.op-source{ display:block; color:#B9B2A8; font-size:13px; letter-spacing:.06em; text-transform:uppercase; margin-top:10px; }
.op-hero-b .lead{ color:#D8D2C9; max-width:52ch; margin:36px auto 0; font-size:15.5px; }
@media (max-width:640px){ .op-hero-b-stats{ gap:36px; } }

/* ---- "Por qué importa": cita real gigante, mismo glifo que Filosofía B de Sobre Laura ---- */
.op-why-b{ position:relative; max-width:74ch; }
.op-why-b::before{
  content:"“"; position:absolute; top:-90px; left:-24px; z-index:0;
  font-family:'Cormorant Garamond',serif; font-size:260px; line-height:1;
  color:var(--accent); opacity:.1; pointer-events:none; user-select:none;
}
.op-why-b blockquote{
  position:relative; z-index:1; margin:0;
  font-family:'Cormorant Garamond',serif; font-size:clamp(22px,3vw,30px);
  font-style:italic; line-height:1.45; color:var(--ink);
}
.op-why-b blockquote cite{
  display:block; margin-top:18px; font-style:normal; font-size:14px;
  color:var(--accent); font-family:'Jost',sans-serif; letter-spacing:.03em;
}
@media (max-width:640px){ .op-why-b::before{ font-size:150px; top:-50px; left:-10px; } }

/* ---- CTA: banda oscura ---- */
.op-cta-b{ background:var(--ink); color:var(--bg); text-align:center; padding:72px 28px; }
.op-cta-b h2{ color:var(--bg); margin:0 0 22px; }
.op-cta-b .rating-pill{ background:transparent; border-color:#4a433d; color:var(--bg); }
.op-cta-b .rating-count{ color:#B9B2A8; }

/* ======================================================================
   Página "Tips" — cerrada en su única versión: Hero de dos columnas y
   6 tips reales agrupados por categoría, con el mismo patrón visual y
   funcional que "Preguntas frecuentes" de la home (.faq-group/.faq-item):
   lista plana, fila con borde inferior, indicador "+"/"–", sin caja ni
   sombra. Única diferencia deliberada: fondo beige (ya lo tenía esta
   sección) y un icono por tip junto al título — la FAQ de la home no usa
   iconos, aquí sí porque cada tip cubre un tema visualmente distinto.
====================================================================== */

/* ---- Hero: dos columnas, mismo patrón que Tratamientos/Sobre Laura ---- */
.tips-hero-a h1 em{ color:var(--accent); font-style:italic; }
.tips-hero-a{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.tips-hero-a .lead{ font-size:18px; color:var(--ink-soft); max-width:52ch; margin:14px 0 26px; }
.tips-hero-a-media{
  border-radius:var(--radius); overflow:hidden; aspect-ratio:4/5;
  border:2px solid var(--accent);
}
.tips-hero-a-media img{ width:100%; height:100%; object-fit:cover; object-position:50% 20%; }
@media (max-width:860px){
  .tips-hero-a{ grid-template-columns:1fr; gap:28px; }
  .tips-hero-a-media{ aspect-ratio:4/5; order:-1; max-width:360px; margin:0 auto; }
}

/* ---- Listado de tips: reutiliza .faq-group/.faq-item/.faq-a tal cual
   (mismas reglas que la FAQ de la home, sin duplicarlas) — el acordeón
   exclusivo (name="tips-a" compartido) ya viene de la Ronda 24, nativo,
   sin JavaScript, y sigue funcionando igual con este nuevo marcado. ---- */
.tip-faq-head{ display:flex; align-items:center; gap:10px; }
.tip-faq-head svg{ color:var(--accent); flex:0 0 auto; }
.faq-item .faq-a .card-link{ margin-top:14px; }
/* La FAQ de la home resalta la fila en :hover con var(--bg-wood) — aquí
   toda la sección ya es --bg-wood, así que ese resalte sería invisible.
   Se sustituye por blanco solo en este contexto para que el hover siga
   viéndose. */
details.faq-item.tip-faq-item summary:hover{ background:var(--bg); }

/* ---- CTA: dos botones (primario reservar, secundario ver tratamientos) ---- */
.tips-cta-actions{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:8px; }

/* ============================================================
   FAQ (/faq/) — 21 preguntas reales en 7 categorías.
   ============================================================ */

.faq-hero-b{ background:var(--ink); color:var(--bg); padding:64px 0 60px; margin-top:20px; position:relative; overflow:hidden; }
.faq-hero-b::after{ content:"?"; position:absolute; right:-.06em; top:-.32em; font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:600; font-size:min(52vw,560px); line-height:1; color:rgba(255,255,255,.05); pointer-events:none; user-select:none; }
.faq-hero-b .container{ position:relative; max-width:760px; }
.faq-hero-b .eyebrow{ color:var(--accent-soft); }
/* Ronda 27: tipografía del H1 igualada a la de Opiniones (.op-hero-b h1)
   — cursiva solo en el <em>, no en toda la frase; mismo tamaño y peso. */
.faq-hero-b h1{ font-size:clamp(28px,3.6vw,42px); font-weight:500; margin:10px 0 18px; color:var(--bg); }
.faq-hero-b h1 em{ font-style:italic; color:var(--accent-soft); }
.faq-hero-b .lead{ color:#E9E4DD; max-width:52ch; font-size:17px; }
.faq-hero-b-stats{ display:flex; gap:28px; flex-wrap:wrap; margin-top:32px; }
.faq-hero-b-stat b{ display:block; font-family:'Cormorant Garamond',serif; font-size:clamp(30px,4vw,40px); color:var(--bg); line-height:1; }
.faq-hero-b-stat span{ display:block; margin-top:4px; font-size:12px; color:#B9AFA3; text-transform:uppercase; letter-spacing:.08em; }

@media (max-width:640px){
  .faq-hero-b{ padding-top:40px; padding-bottom:36px; }
  /* Ronda 34: las 3 cifras se salían a una segunda línea en móvil — la
     tercera ("4.8★ / Google · 52 opiniones") no cabía en el ancho
     disponible junto a las otras dos. Menos separación entre cifras y
     etiqueta más pequeña, para que las tres quepan siempre en una fila. */
  .faq-hero-b-stats{ gap:16px; }
  .faq-hero-b-stat{ flex:1 1 0; min-width:0; }
  .faq-hero-b-stat b{ font-size:26px; }
  .faq-hero-b-stat span{ font-size:9.5px; letter-spacing:.03em; }
}
@media (max-width:360px){
  .faq-hero-b-stats{ gap:12px; }
}

/* ============================================================
   Contacto (/contacto/) — Ronda 32, cerrada en Versión B en la
   Ronda 33. Tres vías reales (WhatsApp, asistente virtual
   "próximamente", visita en persona con mapa embebido real). Mismo
   margen de miga de pan ya validado (20px, breadcrumb sin tocar +
   margin-top:20px en la sección siguiente).
   ============================================================ */

.ct-soon-badge{
  display:inline-block; font-family:'Jost',sans-serif; font-size:10.5px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--accent);
  background:var(--bg); padding:3px 9px; border-radius:100px; vertical-align:middle;
}
.ct-hours-list{ display:flex; flex-direction:column; gap:0; margin-top:22px; max-width:46ch; }
.ct-hours-list li{
  display:flex; justify-content:space-between; gap:16px; padding:14px 0;
  border-bottom:1px solid var(--line); font-size:14.5px;
}
.ct-hours-list li:first-child{ border-top:1px solid var(--line); }
.ct-hours-list li span:first-child{ color:var(--ink); font-weight:500; }
.ct-hours-list li span:last-child{ color:var(--ink-soft); font-variant-numeric:tabular-nums; }

.ct-hero-b{ padding:0 0 56px; margin-top:20px; overflow:hidden; }
.ct-hero-b-grid{ display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:56px; max-width:1180px; }
.ct-hero-b-text{ padding:64px 0; }
.ct-hero-b h1{ font-size:clamp(32px,4.4vw,50px); line-height:1.1; margin:10px 0 18px; }
.ct-hero-b h1 em{ font-style:italic; color:var(--accent); }
.ct-hero-b .lead{ max-width:44ch; }
.ct-hero-b-media{ position:relative; aspect-ratio:4/5; overflow:hidden; border:2px solid var(--accent); border-radius:var(--radius); }
.ct-hero-b-media img{ width:100%; height:100%; object-fit:cover; object-position:42% 50%; display:block; }

/* Ronda 33: módulo de las 3 vías rediseñado a petición del cliente —
   ilustración (icono) antes del contenido, fondo beige de marca
   (--bg-wood, ya existente) y CTA con más peso visual (botón sólido
   en vez de un enlace de texto). */
.ct-methods-b-section{ padding:72px 0; }
.ct-methods-b{ display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; }
.ct-method-b{
  background:var(--bg); border-radius:var(--radius); padding:36px 30px;
  display:flex; flex-direction:column; align-items:flex-start; text-align:left;
  transition:transform .25s ease, box-shadow .25s ease;
}
.ct-method-b:hover, .ct-method-b:focus-within{
  transform:translateY(-4px); box-shadow:0 18px 34px -18px rgba(38,34,32,.28);
}
.ct-method-b-icon{
  display:flex; align-items:center; justify-content:center; width:60px; height:60px;
  border-radius:50%; background:var(--ink); color:var(--accent-soft); margin-bottom:20px;
}
.ct-method-b h3{ font-size:21px; margin-bottom:10px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ct-method-b p{ color:var(--ink-soft); font-size:14.5px; margin-bottom:20px; }
.ct-method-b-cta{ margin-top:auto; }

.ct-hours-b-section{ background:var(--ink); color:var(--bg); padding:64px 0; }
.ct-hours-b{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.ct-hours-b-panel .eyebrow{ color:var(--accent-soft); }
.ct-hours-b-panel h2{ color:var(--bg); }
.ct-hours-b-panel h2 em{ font-style:italic; color:var(--accent-soft); }
.ct-hours-list-b li{ border-color:rgba(255,255,255,.14); }
.ct-hours-list-b li:first-child{ border-top-color:rgba(255,255,255,.14); }
.ct-hours-list-b li span:first-child{ color:var(--bg); }
.ct-hours-list-b li span:last-child{ color:#B9AFA3; }
.ct-map-b{ aspect-ratio:4/3; border:2px solid var(--accent); overflow:hidden; }
.ct-map-b iframe{ width:100%; height:100%; border:0; display:block; filter:grayscale(.15); }

@media (max-width:900px){
  .ct-hero-b-grid{ grid-template-columns:1fr; gap:0; }
  .ct-hero-b-text{ padding:40px 0 32px; }
  .ct-hero-b-media{ aspect-ratio:4/3; }
  .ct-methods-b{ grid-template-columns:1fr; }
  .ct-hours-b{ grid-template-columns:1fr; gap:32px; }
}

/* ============================================================
   FAQ — acordeón de categorías (Ronda 34, cerrada). Sustituye al
   filtro de pestañas/carril horizontal (Rondas 27-31), que necesitó
   varias correcciones sucesivas de descubribilidad en móvil. El
   acordeón (<details name> anidado, categoría + pregunta, sin JS ni
   ARIA custom) elimina el scroll horizontal por completo: funciona
   igual en 320px que en escritorio.
   ============================================================ */
.faq-acc-b-section{ padding:56px 0 72px; }
.faq-acc-b{ border-top:1px solid var(--line); overflow-anchor:none; }
.faq-cat-acc{ border-bottom:1px solid var(--line); overflow-anchor:none; }
.faq-cat-acc-head{
  display:flex; align-items:center; gap:14px; padding:20px 4px;
  cursor:pointer; list-style:none; transition:background .2s ease;
}
.faq-cat-acc-head::-webkit-details-marker{ display:none; }
/* Ronda 34: la sección entera lleva fondo beige (--bg-wood) a petición
   del cliente — mismo bug ya conocido de la Ronda 25 (Tips): un hover o
   icono que también use --bg-wood se vuelve invisible sobre un fondo
   que ya es --bg-wood. Se sustituye por blanco solo en este contexto,
   para que siga habiendo contraste real entre el elemento y el fondo. */
.faq-cat-acc-head:hover{ background:var(--bg); }
.faq-acc-b details.faq-item summary:hover{ background:var(--bg); }
.faq-cat-acc-icon{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%; background:var(--bg);
  color:var(--accent); transition:background .2s ease, color .2s ease;
}
.faq-cat-acc[open] .faq-cat-acc-icon{ background:var(--ink); color:var(--accent-soft); }
.faq-cat-acc-text{ flex:1 1 auto; display:flex; flex-direction:column; gap:2px; }
.faq-cat-acc-text b{ font-family:'Jost',sans-serif; font-weight:600; font-size:15.5px; color:var(--ink); }
.faq-cat-acc-text small{ font-size:12px; color:var(--ink-soft); }
.faq-cat-acc-chevron{
  flex:0 0 auto; width:9px; height:9px; margin-right:6px;
  border-right:1.5px solid var(--accent); border-bottom:1.5px solid var(--accent);
  transform:rotate(45deg); transition:transform .2s ease;
}
.faq-cat-acc[open] .faq-cat-acc-chevron{ transform:rotate(-135deg); }
.faq-cat-acc-body{ padding:0 4px 26px 56px; }
.faq-cat-acc-body .faq-item:first-child{ border-top:1px solid var(--line); }
@media (max-width:640px){
  .faq-cat-acc-body{ padding-left:4px; }
}

/* ============================================================
   Plantilla de página de tratamiento individual (Ronda 37) — molde
   reutilizable para todo el catálogo, construido primero para
   Depilación (/tratamientos/depilacion/). Comparador temporal A/B,
   mismo patrón ya usado en Tratamientos/Sobre Laura/Opiniones/FAQ.
   Prefijo `trtdet-` (treatment detail) para no acoplar esta plantilla
   a clases de una página concreta.
   ============================================================ */

/* ---- Elige tu técnica: comparador "vs." con línea divisoria central
   e ilustraciones lineales propias. Los dos CTA "Ver precios" quedan
   siempre a la misma altura: cada tarjeta es una columna flex y el
   enlace se empuja al final con margin-top:auto (Ronda 38, antes no
   quedaban alineados si la descripción de una tarjeta era más larga
   que la otra). ---- */
.trtdet-choice-b{ position:relative; display:grid; grid-template-columns:1fr auto 1fr; gap:0; align-items:stretch; }
.trtdet-choice-b-item{ padding:40px 44px; display:flex; flex-direction:column; align-items:flex-start; }
.trtdet-choice-b-item:first-child{ align-items:flex-end; text-align:right; }
.trtdet-choice-b-item:last-child{ align-items:flex-start; text-align:left; }
.trtdet-choice-b-illus{ width:72px; height:72px; color:var(--accent); margin-bottom:18px; }
.trtdet-choice-b-item h3{ font-size:23px; margin-bottom:10px; }
.trtdet-choice-b-item p{ color:var(--ink-soft); font-size:14.5px; max-width:32ch; margin-bottom:18px; }
.trtdet-choice-b-item .card-link{ margin-top:auto; }
.trtdet-choice-b-divider{
  width:1px; background:var(--line); position:relative; margin:0 8px;
}
.trtdet-choice-b-divider span{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:44px; height:44px; border-radius:50%; background:var(--ink); color:var(--accent-soft);
  display:flex; align-items:center; justify-content:center;
  font-family:'Cormorant Garamond',serif; font-style:italic; font-size:16px;
}
@media (max-width:760px){
  .trtdet-choice-b{ grid-template-columns:1fr; }
  .trtdet-choice-b-item, .trtdet-choice-b-item:first-child, .trtdet-choice-b-item:last-child{ align-items:center; text-align:center; padding:28px 4px; }
  .trtdet-choice-b-divider{ width:100%; height:auto; margin:0; background:none; position:relative; }
  .trtdet-choice-b-divider::before{ content:""; position:absolute; top:50%; left:0; right:0; height:1px; background:var(--line); }
  .trtdet-choice-b-divider span{ position:relative; top:auto; left:auto; transform:none; margin:20px auto; z-index:1; }
}

/* ---- Variante de 3 vías del comparador "Elige tu técnica" (Ronda 46,
   Uñas: Semipermanente/Calcio/Acrílicas) — el divisor "vs" del original
   solo tiene sentido para una dicotomía de 2, así que para 3 opciones
   reales se usa una fila de 3 columnas centradas con una línea divisoria
   fina entre ellas en vez del círculo "vs". ---- */
.trtdet-choice-c{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; align-items:stretch; }
.trtdet-choice-c-item{
  padding:36px 28px; display:flex; flex-direction:column; align-items:center; text-align:center;
  border-left:1px solid var(--line);
}
.trtdet-choice-c-item:first-child{ border-left:none; }
.trtdet-choice-c-illus{ width:60px; height:60px; color:var(--accent); margin-bottom:16px; }
.trtdet-choice-c-item h3{ font-size:21px; margin-bottom:10px; }
.trtdet-choice-c-item p{ color:var(--ink-soft); font-size:14px; max-width:28ch; margin-bottom:18px; }
.trtdet-choice-c-item .card-link{ margin-top:auto; }
@media (max-width:760px){
  .trtdet-choice-c{ grid-template-columns:1fr; }
  .trtdet-choice-c-item{ border-left:none; border-top:1px solid var(--line); padding:28px 4px; align-items:center; text-align:center; }
  .trtdet-choice-c-item:first-child{ border-top:none; }
}

/* ---- Diferencial CHR: sellos circulares grandes en
   diagonal, con cifra/símbolo. ---- */
.trtdet-highlight-b{ display:flex; flex-wrap:wrap; gap:28px; margin-top:40px; justify-content:center; }
.trtdet-highlight-b-item{
  width:220px; aspect-ratio:1; border-radius:50%; border:2px solid var(--accent);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:24px; transition:transform .3s ease;
}
.trtdet-highlight-b-item:nth-child(2){ transform:translateY(28px); }
.trtdet-highlight-b-item:hover{ transform:scale(1.04); }
.trtdet-highlight-b-item:nth-child(2):hover{ transform:translateY(28px) scale(1.04); }
.trtdet-highlight-b-num{ font-family:'Cormorant Garamond',serif; font-style:italic; font-size:30px; color:var(--accent); line-height:1; margin-bottom:8px; }
.trtdet-highlight-b-item h3{ font-size:15px; margin-bottom:6px; }
.trtdet-highlight-b-item p{ color:var(--ink-soft); font-size:12.5px; }
@media (max-width:760px){
  .trtdet-highlight-b{ flex-direction:column; align-items:center; }
  .trtdet-highlight-b-item:nth-child(2){ transform:none; }
  .trtdet-highlight-b-item:nth-child(2):hover{ transform:scale(1.04); }
}

/* ---- Precios: tabla semántica real (accesible), compartida entre
   A y B — en B va dentro de un panel oscuro (mismo lenguaje que
   .ct-hours-b-section). ---- */
.trtdet-price-wrap{ overflow-x:auto; }
.trtdet-price-table{ width:100%; border-collapse:collapse; font-size:14.5px; margin-bottom:44px; }
.trtdet-price-table:last-child{ margin-bottom:0; }
.trtdet-price-table:has(+ .trtdet-price-note){ margin-bottom:12px; }
.trtdet-price-note{ font-size:12.5px; color:var(--ink-soft); margin:0 0 44px; }
.trtdet-price-note:last-child{ margin-bottom:0; }
.trtdet-price-table caption{
  text-align:left; font-family:'Jost',sans-serif; font-weight:600; font-size:15px;
  margin-bottom:14px; color:var(--ink);
}
.trtdet-price-table th, .trtdet-price-table td{ padding:12px 10px; text-align:left; border-bottom:1px solid var(--line); }
.trtdet-price-table th{ font-weight:600; color:var(--ink-soft); font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; }
.trtdet-price-table td:last-child, .trtdet-price-table th:last-child{ text-align:right; font-variant-numeric:tabular-nums; }
/* Cabeceras de columna ("1 SESIÓN", "BONO 3"...) siempre en una sola línea;
   en móvil se compacta el relleno lateral para que quepan sin desbordar. */
.trtdet-price-table th{ white-space:nowrap; }
@media (max-width:640px){
  .trtdet-price-table th, .trtdet-price-table td{ padding-left:6px; padding-right:6px; }
  .trtdet-price-table th:first-child, .trtdet-price-table td:first-child{ padding-left:0; }
  .trtdet-price-table th:last-child, .trtdet-price-table td:last-child{ padding-right:0; }
}
.trtdet-prices-b-section{ background:var(--ink); padding:64px 0; }
.trtdet-prices-b-section .section-head p.eyebrow{ color:var(--accent-soft); }
.trtdet-prices-b-section .section-head h2{ color:var(--bg); }
.trtdet-prices-b-section .section-head h2 em{ font-style:italic; color:var(--accent-soft); }
.trtdet-prices-b-section .trtdet-price-table caption{ color:var(--bg); }
.trtdet-prices-b-section .trtdet-price-table th{ color:#B9AFA3; }
.trtdet-prices-b-section .trtdet-price-table td{ color:#E8E2D9; }
.trtdet-prices-b-section .trtdet-price-table th, .trtdet-prices-b-section .trtdet-price-table td{ border-color:rgba(255,255,255,.14); }
.trtdet-prices-b-section .trtdet-price-note{ color:#B9AFA3; }

/* ---- Precios — selector de categoría con pestañas ARIA (Ronda 38):
   antes las 3 tablas (cera/láser/combos) iban apiladas y obligaban a
   un scroll vertical muy largo. Reutiliza el mismo mecanismo genérico
   de pestañas ya existente en main.js (role="tablist", activación
   automática, foco itinerante) — mismo patrón ya usado en el filtro
   de categorías de FAQ en su momento. Mejora progresiva real: sin JS
   las 3 tablas se ven seguidas (nada se pierde, solo vuelve el scroll
   largo); con JS se muestra una a la vez. La barra de pestañas queda
   `position:sticky` justo bajo la cabecera del sitio mientras se
   recorre el módulo, para no perder de vista en qué categoría estás. */
/* ---- Aviso de oferta primera visita (Ronda 47, Depilación) — precios
   promocionales reales de servicios.md, claramente etiquetados como
   oferta de primera visita, sin sustituir la tarifa general que sigue
   íntegra en las tablas de abajo. Fondo --bg-wood (no --accent-soft:
   el precio nuevo en --accent solo daba 3.72:1 sobre --accent-soft,
   por debajo de AA — con --bg-wood pasa a 5.29:1). Contraste real
   verificado con el script de la auditoría: badge 5.80:1, zona (--ink)
   14.6:1, precio nuevo (--accent) 5.29:1, precio tachado y nota
   (--ink-soft) 6.87:1. ---- */
.trtdet-promo{
  margin:0 0 32px; padding:20px 24px; background:var(--bg-wood); border-radius:var(--radius);
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px;
}
.trtdet-promo-badge{
  font-size:11px; letter-spacing:.06em; text-transform:uppercase; font-weight:600;
  color:var(--accent-ink); background:var(--accent); padding:7px 14px; border-radius:100px; flex:0 0 auto;
}
.trtdet-promo-list{ list-style:none; display:flex; flex-wrap:wrap; gap:10px 24px; margin:0; padding:0; flex:1 1 auto; }
.trtdet-promo-list li{ display:flex; align-items:baseline; gap:6px; font-size:14px; color:var(--ink); }
.trtdet-promo-old{ text-decoration:line-through; color:var(--ink-soft); font-size:12.5px; }
.trtdet-promo-new{ color:var(--accent); font-weight:600; }
.trtdet-promo-note{ flex-basis:100%; margin:2px 0 0; font-size:12.5px; color:var(--ink-soft); }
@media (max-width:640px){
  .trtdet-promo{ flex-direction:column; align-items:flex-start; padding:18px; }
}

.trtdet-price-tabs{
  position:sticky; top:85px; z-index:5; display:flex; gap:8px; flex-wrap:wrap;
  margin-bottom:32px; padding:12px 0; background:var(--ink);
}
.trtdet-price-tab{
  font:inherit; font-size:13.5px; letter-spacing:.02em; cursor:pointer;
  padding:9px 18px; border-radius:100px; border:1px solid rgba(255,255,255,.25);
  background:transparent; color:#D8D0C6;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.trtdet-price-tab[aria-selected="true"]{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.trtdet-price-tab:focus-visible{ outline:2px solid var(--accent-soft); outline-offset:2px; }

/* ---- Cómo es tu sesión — línea de tiempo horizontal en escritorio,
   vertical en móvil. La línea es un elemento real (no un ::before
   calculado sobre el ancho de cada columna) para que su alto/ancho
   nunca dependa de que el marcador tenga o no `display:block`: bug
   real corregido en la Ronda 38 — el marcador es un <span>, que por
   defecto es `display:inline` e ignora width/height, así que colapsaba
   a 0px de alto y la línea (calculada para pasar por su centro)
   terminaba a la altura del título de cada paso en vez de por encima.
   Corregido dando `display:block` explícito al marcador y sustituyendo
   el conector por un elemento propio en vez de un ::before por
   columna. Ajuste posterior (Ronda 38, halo con box-shadow): aunque el
   z-index ya dejaba el marcador por encima de la línea sin solapamiento
   real (comprobado con elementFromPoint y con una línea de prueba en
   rojo, que sí mostraba el hueco), el cliente lo seguía viendo tocar el
   círculo. Corregido en la Ronda 41 de raíz, sin depender de capas ni
   sombras: la línea ahora termina geométricamente 18px antes del centro
   de cada marcador (radio de 12px + 6px de aire), así que nunca ocupa
   el mismo espacio que el círculo, sea cual sea el navegador. ---- */
.trtdet-steps-b{ display:flex; gap:0; margin-top:56px; }
.trtdet-step-b{ flex:1; position:relative; padding:0 20px; text-align:center; }
.trtdet-step-b-line{
  content:""; position:absolute; top:11px; height:2px; background:var(--line); z-index:0;
  left:calc(-50% + 18px); right:calc(50% + 18px);
}
.trtdet-step-b:first-child .trtdet-step-b-line{ display:none; }
.trtdet-step-b-marker{
  display:block; position:relative; z-index:1; width:24px; height:24px; border-radius:50%;
  background:var(--accent); margin:0 auto 18px;
}
.trtdet-step-b h3{ font-size:15.5px; margin-bottom:6px; }
.trtdet-step-b p{ color:var(--ink-soft); font-size:13px; margin:0; }
@media (max-width:760px){
  .trtdet-steps-b{ flex-direction:column; gap:0; margin-top:44px; }
  .trtdet-step-b{ text-align:left; padding:0 0 32px 40px; }
  .trtdet-step-b-marker{ position:absolute; top:0; left:0; margin:0; }
  .trtdet-step-b-line{
    display:block; top:30px; left:11px; right:auto; width:2px; height:calc(100% - 30px);
  }
  .trtdet-step-b:first-child .trtdet-step-b-line{ display:block; }
  .trtdet-step-b:last-child .trtdet-step-b-line{ display:none; }
  .trtdet-step-b:last-child{ padding-bottom:0; }
}

/* ---- Hero de la plantilla de tratamiento (Ronda 42, cerrado en la
   Propuesta 2 "Tipografía gráfica" — Laura eligió esta versión entre
   las tres comparadas: Actual con ilustración, Propuesta 1 con foto en
   collage, y esta). Sin foto: una palabra gigante en marca de agua
   (--bg-wood sobre --bg) como fondo decorativo, titular centrado
   encima. Recurso puramente tipográfico, pensado para poder cambiar
   solo la palabra de la marca de agua (y el color de acento si hiciera
   falta) al reutilizar esta plantilla en el resto del catálogo, sin
   depender de encontrar una foto para cada tratamiento. Mismo
   mecanismo de margen tras la miga de pan ya validado en el resto del
   sitio (sección con padding:0 + margin-top:20px). ---- */
.trtdet-hero-d-section{ padding:0; margin-top:20px; }
.trtdet-hero-d{
  position:relative; overflow:hidden; background:var(--bg);
  padding:96px clamp(24px,5vw,64px) 104px; text-align:center;
}
.trtdet-hero-d-watermark{
  position:absolute; top:52%; left:50%; transform:translate(-50%,-50%);
  font-family:'Cormorant Garamond',serif; font-weight:600; font-style:italic;
  font-size:clamp(110px,20vw,300px); color:var(--bg-wood); white-space:nowrap;
  line-height:1; z-index:0; pointer-events:none;
}
.trtdet-hero-d-inner{ position:relative; z-index:1; max-width:640px; margin:0 auto; }
.trtdet-hero-d .eyebrow{ color:var(--accent); }
.trtdet-hero-d h1{ margin:10px 0 18px; }
.trtdet-hero-d h1 em{ color:var(--accent); font-style:italic; position:relative; }
.trtdet-hero-d .lead{ color:var(--ink-soft); max-width:44ch; margin:0 auto 30px; }
.trtdet-hero-d-arc{
  position:absolute; z-index:0; width:130px; height:130px;
  border:1.5px solid var(--accent-soft); border-radius:50%;
  top:-30px; right:calc(50% - 260px);
}
/* Transición al módulo siguiente ("Elige tu técnica"): ambos van sobre
   --bg (blanco), así que sin ningún elemento entre medias se leían como
   el mismo módulo continuado. Una onda decorativa en --bg-wood marca la
   costura entre ambos, en el mismo lenguaje gráfico que el resto de
   esta propuesta (recurso tipográfico/gráfico, no fotográfico). */
.trtdet-hero-d-wave{ position:absolute; left:0; bottom:-1px; width:100%; height:56px; z-index:0; display:block; }
.trtdet-hero-d-wave-path{ fill:var(--bg-wood); }
@media (max-width:760px){
  .trtdet-hero-d{ padding:64px 24px 72px; }
  .trtdet-hero-d-arc{ display:none; }
  .trtdet-hero-d-wave{ height:32px; }
}

/* ======================================================================
   Páginas legales (Aviso Legal / Política de Privacidad) — Ronda 48,
   cerradas en la Versión B (índice fijo + numeración editorial). La
   Versión A (minimalista) se probó en comparador y se descartó — su CSS
   se ha retirado sin dejar código muerto. Miga de pan: reutiliza
   .breadcrumb sin tocar (padding:20px 0 0) + margin-top:20px en el Hero
   que sigue, mismo patrón ya validado en Sobre Laura/Opiniones.
====================================================================== */
.legal-hero-b-section{ padding:0; margin-top:20px; }
.legal-table-wrap{ overflow-x:auto; margin:16px 0; }

/* ---- Versión B: hero tipográfico con marca de agua (mismo mecanismo
   que la plantilla de tratamiento) + índice fijo de navegación interna
   (recurso nuevo, con valor real en un documento largo) + numeración
   editorial grande en cada sección. ---- */
.legal-hero-b{
  position:relative; overflow:hidden; background:var(--bg);
  padding:88px clamp(24px,5vw,64px) 96px; text-align:center;
}
.legal-hero-b-watermark{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-family:'Cormorant Garamond',serif; font-weight:600; font-style:italic;
  font-size:clamp(90px,16vw,240px); color:var(--bg-wood); white-space:nowrap;
  line-height:1; z-index:0; pointer-events:none;
}
.legal-hero-b-inner{ position:relative; z-index:1; max-width:620px; margin:0 auto; }
.legal-hero-b .eyebrow{ color:var(--accent); }
.legal-hero-b h1{ margin:10px 0 18px; }
.legal-hero-b .lead{ color:var(--ink-soft); max-width:50ch; margin:0 auto; }
.legal-hero-b-wave{ position:absolute; left:0; bottom:-1px; width:100%; height:48px; z-index:0; display:block; }
.legal-hero-b-wave-path{ fill:var(--bg-wood); }

.legal-layout-b{ display:grid; grid-template-columns:220px minmax(0,1fr); gap:56px; align-items:start; padding:48px 24px 0; max-width:1080px; margin:0 auto; }
.legal-toc-b{ position:sticky; top:104px; }
.legal-toc-b-label{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:12px; display:block; }
.legal-toc-b ol{ list-style:none; margin:0; padding:0; border-left:1px solid var(--line); }
.legal-toc-b li{ margin:0; }
.legal-toc-b a{
  display:block; padding:8px 0 8px 16px; font-size:13px; color:var(--ink-soft);
  text-decoration:none; border-left:2px solid transparent; margin-left:-1px;
  transition:color .2s ease, border-color .2s ease;
}
.legal-toc-b a:hover, .legal-toc-b a:focus-visible{ color:var(--accent); border-left-color:var(--accent); }
.legal-toc-mobile{ display:none; }

.legal-body-b{ max-width:64ch; }
.legal-section-b{ padding:40px 0; border-bottom:1px solid var(--line); scroll-margin-top:100px; }
.legal-section-b:last-of-type{ border-bottom:none; }
.legal-num-b{
  display:block; font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:34px; color:var(--accent); line-height:1; margin-bottom:6px;
}
.legal-section-b h2{ font-size:23px; margin-bottom:14px; }
.legal-section-b p, .legal-section-b li{ color:var(--ink-soft); font-size:15px; line-height:1.7; }
.legal-section-b ul{ margin:10px 0 0; padding-left:20px; }
.legal-section-b li{ margin-bottom:6px; }
.legal-section-b table{ width:100%; min-width:520px; border-collapse:collapse; margin:0; font-size:13.5px; }
.legal-section-b th, .legal-section-b td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); color:var(--ink-soft); }
.legal-section-b th{ color:var(--ink); font-weight:600; }
.legal-note-b{
  background:var(--bg-wood); border-radius:var(--radius); padding:14px 18px;
  font-size:13.5px; color:var(--ink-soft); margin-top:14px;
}
.legal-contact-b{ text-align:center; padding:48px 24px 64px; max-width:1080px; margin:0 auto; }
.legal-contact-lead{ color:var(--ink-soft); margin:14px auto 28px; text-align:center; }
.legal-contact-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

@media (max-width:900px){
  .legal-layout-b{ grid-template-columns:minmax(0,1fr); padding:32px 24px 0; }
  .legal-toc-b{ display:none; }
  .legal-toc-mobile{
    display:block; margin-bottom:32px; border:1px solid var(--line); border-radius:var(--radius);
  }
  .legal-toc-mobile summary{
    padding:14px 18px; cursor:pointer; font-size:13.5px; font-weight:600; color:var(--ink);
    display:flex; align-items:center; justify-content:space-between;
  }
  .legal-toc-mobile ol{ list-style:none; margin:0; padding:0 18px 14px; }
  .legal-toc-mobile a{ display:block; padding:8px 0; font-size:14px; color:var(--ink-soft); text-decoration:none; }
  .legal-toc-mobile a:hover, .legal-toc-mobile a:focus-visible{ color:var(--accent); }
}
@media (max-width:760px){
  .legal-hero-b{ padding:56px 24px 64px; }
  .legal-hero-b-wave{ height:28px; }
}