/* Rehabilitek — hoja común de todas las páginas.
   Motivo: el nicho azul marino de la pared de la clínica (caja hundida con franja de luz arriba)
   y la figura del logo, que en la portada pasa de muletas a brazos abiertos con el scroll.
   Tipografía: Red Hat Display 700 (titulares) + Red Hat Text 400/600 (texto), OFL, autoalojadas.
   Justificación de la familia: mayúsculas anchas y geométricas emparentadas con el wordmark REHABILITEK,
   sin copiar el logo; no es una de las fuentes por defecto. */

@font-face {
  font-family: "Red Hat Display"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fonts/red-hat-display-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Red Hat Text"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("/fonts/red-hat-text-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Respaldos con métrica ajustada para que el cambio de fuente no mueva el layout */
@font-face { font-family: "RHD respaldo"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial"); font-weight: 700; size-adjust: 96%; ascent-override: 98%; descent-override: 28%; }
@font-face { font-family: "RHT respaldo"; src: local("Arial"), local("ArialMT"); size-adjust: 99%; ascent-override: 98%; descent-override: 29%; }

:root {
  --marino: #0B1F4D;
  --marino-2: #13306B;
  --luz: #3A5384;          /* franja de luz del nicho: yeso al 18 % sobre marino-2, en sólido */
  --royal: #1E3FA8;
  --pared: #FFFFFF;
  --yeso: #EEF2F8;
  --tinta: #0B1F4D;
  --tinta-suave: #47547A;
  --tinta-suave-oscuro: #BAC6E0;
  --banda: #FFC82E;
  --banda-hover: #F0B90F;
  --filete: #D5DCEA;

  --f-display: "Red Hat Display", "RHD respaldo", system-ui, sans-serif;
  --f-texto: "Red Hat Text", "RHT respaldo", system-ui, sans-serif;
  --t-small: clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem);
  --t-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --t-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --t-head: clamp(2rem, 1.35rem + 2.9vw, 3.75rem);
  --t-display: clamp(2.25rem, 1.3rem + 4.4vw, 5.25rem);

  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px;
  --e-7: 48px; --e-8: 72px; --e-9: 96px;
  --seccion: clamp(56px, 9vw, 128px);
  --margen: clamp(20px, 5vw, 64px);
  --ancho: 1240px;
  --radio: 6px;
  --cabecera-alto: 72px;
  --barra-alto: 0px;

  --salida: cubic-bezier(0.22, 1, 0.36, 1);
}
@media (max-width: 767px) { :root { --barra-alto: calc(68px + env(safe-area-inset-bottom)); } }
@media (min-width: 768px) { :root { --barra-alto: 0px; } }
:root { --burbuja-aire: calc(var(--barra-alto) + 80px); }

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--e-5);
  scroll-padding-bottom: var(--burbuja-aire);
}
@media (min-width: 900px) { html { scroll-padding-top: calc(var(--cabecera-alto) + var(--e-5)); } }
body {
  margin: 0; font-family: var(--f-texto); font-size: var(--t-body); line-height: 1.55;
  color: var(--tinta); background: var(--pared); overflow-wrap: break-word;
}
body.menu-abierto { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 700; margin: 0; text-wrap: balance; }
h1 { font-size: var(--t-display); line-height: 1.02; letter-spacing: -0.025em; }
h2 { font-size: var(--t-head); line-height: 1.08; letter-spacing: -0.02em; }
h3 { font-size: var(--t-lead); line-height: 1.2; letter-spacing: -0.01em; }
p { margin: 0; text-wrap: pretty; }
blockquote, figure { margin: 0; }
cite { font-style: normal; }
a { color: var(--royal); }
ul, ol { margin: 0; padding: 0; }

/* foco */
:focus-visible { outline: 3px solid var(--royal); outline-offset: 3px; border-radius: 2px; }
.cabecera :focus-visible, .escena :focus-visible, .historias :focus-visible, .voces :focus-visible,
.accion :focus-visible, .pie :focus-visible, .barra-agenda :focus-visible, .nicho :focus-visible,
.cierre-corto :focus-visible, .no-existe :focus-visible, .barra-agenda :focus-visible { outline-color: var(--banda); }
[tabindex="-1"]:focus { outline: none; }

.skip {
  position: absolute; left: var(--e-4); top: var(--e-4); z-index: 60;
  padding: var(--e-3) var(--e-4); background: var(--banda); color: var(--marino);
  font-weight: 600; border-radius: var(--radio);
}
.skip:not(:focus) { width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.contenedor { width: 100%; max-width: calc(var(--ancho) + 2 * var(--margen)); margin-inline: auto; padding-inline: var(--margen); }

/* botones y enlaces */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-3);
  min-height: 56px; padding: var(--e-3) var(--e-5);
  font: 600 var(--t-body)/1.2 var(--f-texto); text-decoration: none;
  border: 0; border-radius: var(--radio); cursor: pointer;
  transition: background-color 150ms var(--salida), transform 100ms var(--salida);
  touch-action: manipulation;
}
.boton:active { transform: scale(0.97); }
.boton--agenda { background: var(--banda); color: var(--marino); }
.boton--marino { background: var(--marino); color: var(--pared); }
.boton--chico { min-height: 44px; padding: var(--e-2) var(--e-4); font-size: var(--t-small); gap: var(--e-2); }
@media (hover: hover) {
  .boton--agenda:hover { background: var(--banda-hover); }
  .boton--marino:hover { background: var(--marino-2); }
}
.enlace {
  display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--royal);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.enlace--claro { color: var(--pared); text-decoration-color: var(--banda); }

/* ---------- cabecera común ---------- */
.cabecera { background: var(--marino); color: var(--pared); position: relative; z-index: 30; }
.cabecera__fila { display: flex; align-items: center; flex-wrap: wrap; gap: var(--e-2) var(--e-5); min-height: var(--cabecera-alto); padding-block: var(--e-3); }
.marca { display: inline-flex; align-items: center; gap: var(--e-3); text-decoration: none; min-height: 44px; }
.marca__figura { width: 42px; height: auto; }
.marca__letras { width: 150px; height: auto; }
@media (max-width: 359px) { .marca__letras { width: 118px; } .marca__figura { width: 36px; } }
.nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0 var(--e-1); }
.nav a { color: var(--pared); text-decoration: none; font-weight: 600; font-size: var(--t-small); min-height: 44px; padding-inline: var(--e-3); display: inline-flex; align-items: center; border-bottom: 3px solid transparent; }
.nav a[aria-current="page"] { border-bottom-color: var(--banda); font-weight: 700; }
.nav__extra { display: none; }
.nav__extra a { gap: var(--e-2); }
@media (hover: hover) { .nav a:hover { text-decoration: underline; text-underline-offset: 6px; } }
.cabecera__agenda { display: none; }
.menu-boton {
  margin-left: auto; min-width: 48px; min-height: 44px; padding: 0 var(--e-4);
  font: 600 var(--t-small)/1 var(--f-texto); color: var(--pared); background: var(--marino-2);
  border: 0; border-radius: var(--radio); cursor: pointer;
}
/* sin JS la lista se ve debajo del logo; con JS se colapsa en el botón Menú */
@media (max-width: 899px) {
  .nav { width: 100%; margin-inline: calc(-1 * var(--e-3)); }
  .js .menu-boton { display: inline-flex; align-items: center; }
  .js .nav {
    position: fixed; inset: var(--cabecera-alto) 0 0 0; z-index: 45; width: auto; margin: 0;
    background: var(--marino); padding: var(--e-6) var(--margen);
    display: flex; flex-direction: column; gap: var(--e-5);
    opacity: 0; visibility: hidden; transition: opacity 180ms var(--salida), visibility 0s linear 180ms;
  }
  .js .nav.abierto { opacity: 1; visibility: visible; transition: opacity 180ms var(--salida); }
  .js .nav ul { flex-direction: column; gap: var(--e-1); }
  .js .nav a { font: 700 1.625rem/1.2 var(--f-display); padding-inline: 0; min-height: 52px; }
  .js .nav .nav__extra { display: block; }
  .js .nav .nav__extra a { font: 600 var(--t-body)/1.2 var(--f-texto); }
}
@media (min-width: 900px) {
  .menu-boton { display: none !important; }
  .cabecera { position: sticky; top: 0; }
  .cabecera__fila { flex-wrap: nowrap; }
  .nav { margin-left: auto; }
  .cabecera__agenda { display: inline-flex; }
}
@media (prefers-reduced-motion: reduce) { .js .nav, .js .nav.abierto { transition: none; } }

/* ---------- citas ---------- */
.cita-chica { margin-top: var(--e-5); }
.cita-chica blockquote p { font-weight: 600; }
.cita-chica figcaption { margin-top: var(--e-2); font-size: var(--t-small); color: var(--tinta-suave); }
.aviso { max-width: 62ch; color: var(--tinta-suave-oscuro); font-size: var(--t-small); }

/* ---------- PORTADA: la escena ---------- */
.escena { background: var(--marino); color: var(--pared); position: relative; }
.escena__rejilla { display: grid; gap: var(--e-6); padding-block: var(--e-6) var(--e-8); }
.escena__lugar { color: var(--tinta-suave-oscuro); font-size: var(--t-small); margin-bottom: var(--e-3); }
.escena h1 { max-width: 21ch; }
.escena__bajada { margin-top: var(--e-4); max-width: 40ch; }
.escena__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-5); margin-top: var(--e-5); }
.escena__indicio { margin-top: var(--e-4); font-size: var(--t-small); color: var(--tinta-suave-oscuro); display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--e-3); }
.escena__indicio a { color: var(--pared); min-height: 44px; display: inline-flex; align-items: center; text-underline-offset: 4px; }

/* versión estática (sin JS o con reduce): 4 poses en secuencia */
.tramos { list-style: none; display: grid; gap: var(--e-6); margin-top: var(--e-8); }
.tramo { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--e-4); align-items: start; }
.tramo--0 { display: block; }
.figura { display: block; width: 100%; height: auto; overflow: visible; }
.tramo__num { display: block; font: 700 var(--t-lead)/1 var(--f-display); color: var(--banda); margin-bottom: var(--e-2); }
.tramo h2 { font-size: var(--t-lead); line-height: 1.15; }
.tramo p { margin-top: var(--e-2); max-width: 46ch; }
.tramo .cita-chica figcaption { color: var(--tinta-suave-oscuro); }
.tramo--4 h2 { font-size: var(--t-head); }
.tramo--4 .aviso { margin-top: var(--e-4); }
@media (min-width: 900px) {
  .tramos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-5); align-items: start; }
  .tramo { grid-template-columns: minmax(0, 1fr); }
  .tramo .figura { max-width: 220px; }
  .tramo--4 h2 { font-size: var(--t-lead); }
}

/* escena viva: solo con JS y movimiento permitido (la clase se pone en <head> y la confirma escena.js) */
.escena__visual { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .escena-viva .escena { height: 400svh; }
  .escena-viva .escena__escenario { position: sticky; top: 0; height: 100svh; overflow: hidden; }
  .escena-viva .escena__rejilla {
    height: 100%; padding-block: var(--e-3) var(--burbuja-aire);
    grid-template-rows: clamp(244px, 40svh, 360px) minmax(0, 1fr); gap: var(--e-4);
  }
  /* el escenario visual: nicho con fotos reales, la figura y el piso */
  .escena-viva .escena__visual { display: block; position: relative; grid-row: 1; min-height: 0; contain: layout paint; }
  .escena-viva .escena__figura { position: absolute; right: 0; bottom: 14px; height: calc(100% - 14px); }
  .escena-viva .figura--viva { width: auto; height: 100%; overflow: visible; }
  .escena-viva .escena__nicho {
    position: absolute; top: 0; left: 0; width: min(36%, 330px); aspect-ratio: 4 / 3;
    background: var(--marino-2); border-radius: var(--radio); overflow: hidden; will-change: opacity;
  }
  .nicho__luz { position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 6px; background: var(--luz); transform-origin: top center; will-change: transform; }
  .nicho__luz--clara { background: #F4F7FF; opacity: 0; }
  .nicho__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: inset(0 0 100% 0); will-change: clip-path, opacity; }
  .escena-viva .escena__piso { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; border-top: 4px solid var(--luz); }
  .piso__duela { position: absolute; inset: 0; background: #8A4B2A; opacity: 0; }
  .escena-viva .escena__textos { grid-row: 2; display: grid; min-height: 0; }
  .escena-viva .tramo:not([data-activo="true"]) { pointer-events: none; }
  .escena-viva .tramo[data-activo="true"] { z-index: 1; position: relative; }
  .escena-viva .tramos { display: contents; }
  .escena-viva .tramo { grid-area: 1 / 1; display: block; align-self: start; will-change: opacity, transform; }
  .escena-viva .tramo .figura--fija { display: none; }
  .escena-viva .tramo:not(.tramo--0) { opacity: 0; }
  .escena-viva .tramo h2 { font-size: var(--t-head); }
  .escena-viva .tramo p { font-size: var(--t-body); max-width: 40ch; }
  .escena-viva .tramo--4 h2 { font-size: var(--t-display); line-height: 0.98; }
  .escena-viva .lema__a, .escena-viva .lema__b { display: block; will-change: transform; }
  .escena-viva .lema__b { padding-left: 0.6em; }
  @media (max-width: 899px) {
    .escena-viva .solo-ancho { display: none; }
    .escena-viva .escena__indicio { margin-top: var(--e-2); }
  }
  @media (min-width: 900px) {
    .escena-viva .escena__escenario { top: var(--cabecera-alto); height: calc(100svh - var(--cabecera-alto)); }
    .escena-viva .escena__rejilla {
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: minmax(0, 1fr);
      align-items: center; padding-block: var(--e-6); gap: clamp(24px, 3vw, 48px);
    }
    .escena-viva .escena__visual { grid-column: 2; grid-row: 1; height: min(100%, 680px); align-self: center; }
    .escena-viva .escena__nicho { top: 4%; width: min(40%, 320px); }
    .escena-viva .tramo--4 h2 { font-size: clamp(2.5rem, 1rem + 3.4vw, 4rem); }
    .escena-viva .escena__textos { grid-column: 1; grid-row: 1; align-self: center; }
    .escena-viva .tramo { align-self: center; }
    .escena-viva .escena h1 { font-size: clamp(2.25rem, 1rem + 2.4vw, 3rem); }
  }
}

/* prueba breve */
.prueba { background: var(--yeso); padding-block: var(--e-7); }
.prueba__fila { display: grid; gap: var(--e-4); align-items: center; }
.prueba__dato { display: flex; align-items: center; gap: var(--e-2); font: 700 var(--t-lead)/1.2 var(--f-display); color: var(--royal); }
.prueba__dato a { color: var(--marino); text-underline-offset: 5px; }
.prueba .cita-chica { margin-top: 0; max-width: 60ch; }
@media (min-width: 900px) { .prueba__fila { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

/* puertas: filas editoriales, cada una con otra composición */
.puertas { padding-block: var(--seccion); }
.puertas__titulo { font-size: var(--t-lead); color: var(--tinta-suave); margin-bottom: var(--e-6); }
.puerta { display: grid; gap: var(--e-5); padding-block: var(--e-6); align-items: center; }
@media (min-width: 900px) { .puerta { padding-block: var(--e-7); } }
.puerta--contacto img { aspect-ratio: 2 / 1; max-width: 440px; }
.puerta + .puerta { border-top: 2px solid var(--yeso); }
.puerta__frase { font-size: clamp(1.5rem, 1rem + 2.2vw, 3rem); line-height: 1.1; letter-spacing: -0.02em; max-width: 20ch; }
.puerta__frase--grande { font: 700 clamp(1.5rem, 0.2rem + 5.6vw, 5.25rem)/1.04 var(--f-display); letter-spacing: -0.025em; max-width: 16ch; }
.puerta--historias .puerta__frase { color: var(--pared); }
.puerta p { margin-top: var(--e-3); color: var(--tinta-suave); max-width: 46ch; }
.puerta .enlace { margin-top: var(--e-3); }
.puerta img { border-radius: var(--radio); width: 100%; object-fit: cover; }
.puerta--areas img { aspect-ratio: 1; max-width: 300px; }
.puerta__lista { list-style: none; margin-top: var(--e-4); display: grid; gap: var(--e-1); color: var(--tinta-suave); }
.puerta__lista strong { color: var(--tinta); }
.puerta--visita img { aspect-ratio: 5 / 4; max-width: 560px; justify-self: end; }
.puerta--historias { background: var(--marino); color: var(--pared); padding: var(--e-7) var(--e-5); border-radius: var(--radio); }
.puerta--historias figcaption { margin-top: var(--e-3); color: var(--tinta-suave-oscuro); font-size: var(--t-small); }
.puerta--historias .enlace { color: var(--pared); text-decoration-color: var(--banda); }
.puerta--historias :focus-visible { outline-color: var(--banda); }
.puerta__nombres { font: 700 clamp(3rem, 1.5rem + 7vw, 7.5rem)/0.95 var(--f-display); letter-spacing: -0.04em; color: var(--marino); }
.puerta--contacto .puerta__enlaces { display: flex; flex-wrap: wrap; gap: 0 var(--e-5); margin-top: var(--e-2); }
@media (min-width: 900px) {
  .puerta--areas { grid-template-columns: 300px minmax(0, 1fr); gap: var(--e-8); }
  .puerta--visita { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: var(--e-8); }
  .puerta--historias { grid-template-columns: minmax(0, 1fr) auto; align-items: end; padding: var(--e-8) var(--e-7); }
  .puerta--equipo { grid-template-columns: auto minmax(0, 1fr); gap: var(--e-7); align-items: end; }
  .puerta--contacto { grid-template-columns: 440px minmax(0, 1fr); column-gap: var(--e-8); align-items: center; }
  .puerta--contacto img { grid-row: span 3; }
}

/* acción (marino) */
.accion { background: var(--marino); color: var(--pared); padding-block: var(--seccion); }
.accion__fila { display: grid; gap: var(--e-5); align-items: end; }
.accion h2 { font-size: var(--t-head); max-width: 18ch; }
.accion .escena__acciones { margin-top: 0; }
.accion__horario { margin-top: var(--e-4); color: var(--tinta-suave-oscuro); font-size: var(--t-small); }
@media (min-width: 900px) { .accion__fila { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); } }

/* ---------- ÁREAS: la pared de nichos ---------- */
.areas { padding-block: var(--e-7) var(--seccion); }
.areas__cabeza { display: grid; gap: var(--e-3); }
.areas__cabeza h1 { max-width: 14ch; }
.areas__cabeza p { color: var(--tinta-suave); }
@media (min-width: 900px) { .areas__cabeza { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: end; column-gap: var(--e-8); } }
.pared { display: grid; gap: var(--e-5); margin-top: var(--e-7); }
.pared__col { display: grid; gap: var(--e-5); align-content: start; }
.nicho { position: relative; background: var(--marino-2); color: var(--pared); border-radius: var(--radio); padding: calc(6px + var(--e-5)) var(--e-5) var(--e-5); overflow: hidden; }
.nicho::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--luz); transform-origin: center; }
.nicho img { width: 100%; max-width: 580px; border-radius: 3px; margin-bottom: var(--e-5); aspect-ratio: 3 / 2; object-fit: cover; }
.pared__col--baja .nicho--foto img { aspect-ratio: 16 / 7; }
.nicho__area { font-size: var(--t-small); color: var(--tinta-suave-oscuro); margin-bottom: var(--e-2); }
.nicho h2 { font-size: var(--t-lead); line-height: 1.2; margin-bottom: var(--e-3); }
.nicho .cita-chica figcaption { color: var(--tinta-suave-oscuro); }
@media (min-width: 720px) {
  .pared { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .pared__col--baja { padding-top: var(--e-9); }
  .nicho { padding: calc(6px + var(--e-6)) var(--e-6) var(--e-6); }
}
@media (prefers-reduced-motion: no-preference) {
  .js [data-luces]:not(.vista) .nicho::before { transform: scaleX(0); }
  .js [data-luces] .nicho::before { transition: transform 360ms var(--salida); }
  .js [data-luces] .pared__col--baja .nicho::before { transition-delay: 90ms; }
  .js [data-luces] .nicho + .nicho::before { transition-delay: 180ms; }
  .js [data-luces] .pared__col--baja .nicho + .nicho::before { transition-delay: 270ms; }
}
.cierre-corto { background: var(--marino); color: var(--pared); padding-block: var(--e-8); }
.cierre-corto__fila { display: grid; gap: var(--e-5); align-items: center; }
.cierre-corto h2 { font-size: var(--t-lead); max-width: 30ch; }
@media (min-width: 900px) { .cierre-corto__fila { grid-template-columns: minmax(0, 1fr) auto; } }

/* ---------- PRIMERA VISITA ---------- */
.apertura { background: var(--yeso); padding-block: var(--e-8); }
.apertura__rejilla { display: grid; gap: var(--e-5); }
.apertura h1 { max-width: 24ch; }
.apertura__texto { display: grid; gap: var(--e-3); max-width: 46ch; }
@media (min-width: 900px) { .apertura__texto { justify-self: end; } }
.metodo { padding-block: var(--seccion); }
.metodo__rejilla { display: grid; gap: var(--e-6); }
.metodo__foto { order: 2; }
.metodo__foto img { border-radius: var(--radio); aspect-ratio: 4 / 5; object-fit: cover; width: 100%; max-width: 420px; }
.metodo__foto figcaption { margin-top: var(--e-2); font-size: var(--t-small); color: var(--tinta-suave); }
.metodo h2 { max-width: 14ch; }
.pasos { list-style: none; display: grid; gap: var(--e-6); margin-top: var(--e-6); }
.paso { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); column-gap: var(--e-4); }
.paso > * { grid-column: 2; }
.paso__num { grid-column: 1 !important; grid-row: 1 / span 3; font: 700 var(--t-head)/1 var(--f-display); color: var(--royal); }
.paso p { margin-top: var(--e-2); max-width: 48ch; }
@media (min-width: 900px) {
  .metodo__rejilla { grid-template-columns: 420px minmax(0, 1fr); column-gap: var(--e-9); align-items: start; }
  .metodo__foto { order: 0; position: sticky; top: calc(var(--cabecera-alto) + var(--e-6)); }
  .pasos { gap: var(--e-8); padding-bottom: var(--e-7); }
}
.clinica { background: var(--yeso); padding-block: var(--seccion); }
.clinica__texto { margin-top: var(--e-3); max-width: 52ch; color: var(--tinta-suave); }
.galeria { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); margin-top: var(--e-6); }
.galeria figure { margin: 0; }
.galeria img { width: 100%; border-radius: var(--radio); object-fit: cover; }
.galeria figcaption { margin-top: var(--e-2); font-size: var(--t-small); color: var(--tinta-suave); }
.galeria__a { grid-column: 1 / -1; }
.galeria__a img { aspect-ratio: 3 / 2; }
.galeria__b img { aspect-ratio: 4 / 5; }
.galeria__c { grid-column: 2; align-self: start; }
.clinica__accion { margin-top: var(--e-4); display: grid; gap: var(--e-2); }
.clinica__accion .boton { width: 100%; }
@media (max-width: 559px) { .galeria__c { grid-column: 1 / -1; } .galeria__b { grid-column: 1 / -1; max-width: 240px; } }
@media (min-width: 900px) {
  .galeria { grid-template-columns: minmax(0, 7fr) minmax(0, 3fr) minmax(0, 4fr); align-items: start; }
  .galeria__a { grid-column: auto; }
  .galeria__b img { max-width: 280px; }
  .galeria__c { grid-column: auto; }
}

/* ---------- HISTORIAS ---------- */
.historias { background: var(--marino); color: var(--pared); padding-block: var(--e-7) var(--e-8); }
.historias h1 { font-size: var(--t-head); max-width: 18ch; }
.escalera { margin-top: var(--e-5); }
.escalera__pasos { list-style: none; }
.escalon {
  --paso: clamp(0.75rem, 6vw - 0.5rem, 8rem);
  position: relative; margin-left: min(calc(var(--i) * var(--paso)), 15%);
  padding: var(--e-3) 0 var(--e-4);
  font: 700 var(--t-display)/1.02 var(--f-display); letter-spacing: -0.025em; text-wrap: balance;
}
@media (min-width: 900px) { .escalon { margin-left: calc(var(--i) * var(--paso)); } }
.escalon::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--luz); transform-origin: left center; }
.escalon--ultimo::after { background: var(--banda); height: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .js .escalera:not(.vista) .escalon::after { transform: scaleX(0); }
  .js .escalera .escalon::after { transition: transform 420ms var(--salida); transition-delay: calc(var(--i) * 140ms); }
}
.escalera__cita { margin-top: var(--e-6); max-width: 60ch; color: var(--tinta-suave-oscuro); }
.escalera figcaption { margin-top: var(--e-3); font-size: var(--t-small); color: var(--tinta-suave-oscuro); }
.voces { background: var(--marino); color: var(--pared); padding-block: var(--e-5) var(--seccion); }
.historias__par { display: grid; gap: var(--e-7); }
.cita-grande blockquote p { font: 700 var(--t-lead)/1.25 var(--f-display); max-width: 26ch; }
.cita-grande blockquote p:first-child::first-letter { color: var(--banda); }
.cita-grande__resto { margin-top: var(--e-3); color: var(--tinta-suave-oscuro); }
.cita-grande figcaption { margin-top: var(--e-4); font-size: var(--t-small); color: var(--tinta-suave-oscuro); }
.voces .aviso { margin-top: var(--e-8); }
@media (min-width: 900px) {
  .historias__par { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .cita-grande { grid-column: 1 / span 6; }
  .cita-grande--baja { grid-column: 8 / span 5; margin-top: 120px; }
}
.resenas { padding-block: var(--seccion); }
.resenas__cabeza { display: grid; gap: var(--e-3); }
.resenas__cabeza h2 { max-width: 18ch; }
.resenas__dato { display: flex; align-items: center; gap: var(--e-2); font-weight: 600; color: var(--royal); }
@media (min-width: 900px) { .resenas__cabeza { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } }
.muro { columns: 1; column-gap: var(--e-7); margin-top: var(--e-6); }
.muro figure { break-inside: avoid; padding-bottom: var(--e-6); }
.muro figcaption { margin-top: var(--e-2); font-size: var(--t-small); color: var(--tinta-suave); }
@media (min-width: 720px) { .muro { columns: 2; } }
@media (min-width: 1100px) { .muro { columns: 3; } }

/* ---------- EQUIPO: los nombres a tamaño de cartel ---------- */
.equipo { padding-block: var(--e-7) var(--e-8); }
.equipo h1 { font-size: var(--t-head); max-width: 14ch; }
.personas { display: grid; gap: var(--e-9); margin-top: var(--e-7); }
.persona__nombre { font-size: clamp(4rem, 2rem + 10vw, 11rem); line-height: 0.88; letter-spacing: -0.045em; color: var(--marino); }
.persona__rol { margin-top: var(--e-4); font-weight: 600; }
.persona .cita-chica { max-width: 44ch; }
@media (min-width: 900px) {
  .personas { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--e-5); }
  .persona { grid-column: 1 / span 6; }
  .persona--der { grid-column: 7 / span 6; margin-top: var(--e-9); text-align: right; justify-items: end; display: grid; }
  .persona--der .cita-chica { margin-left: auto; }
}
.juntos { background: var(--yeso); padding-block: var(--seccion); }
.juntos__fila { display: grid; gap: var(--e-5); }
.pag-contacto .accion h2 { font-size: var(--t-lead); max-width: 26ch; }
@media (max-width: 899px) { .persona + .persona { border-top: 2px solid var(--filete); padding-top: var(--e-7); } }
.juntos p { max-width: 52ch; }
.juntos__accion { margin-top: var(--e-5); }
@media (min-width: 900px) { .juntos__fila { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--e-8); } }

/* ---------- CONTACTO ---------- */
.donde { padding-block: var(--e-7) var(--seccion); }
.donde__rejilla { display: grid; gap: var(--e-6); }
.donde h1 { max-width: 12ch; }
.donde address { font-style: normal; margin-top: var(--e-5); font-size: var(--t-lead); line-height: 1.4; }
.horario { margin-top: var(--e-6); border-collapse: collapse; width: 100%; max-width: 420px; }
.horario caption { text-align: left; font-weight: 600; padding-bottom: var(--e-2); }
.horario th, .horario td { text-align: left; padding: var(--e-2) 0; border-bottom: 1px solid var(--filete); font-weight: 400; }
.horario td { text-align: right; font-variant-numeric: tabular-nums; }
.mapa { position: relative; overflow: hidden; background: var(--yeso); border-radius: var(--radio); display: grid; align-self: end; }
.mapa.con-mapa { min-height: 380px; }
.mapa::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--filete); }
.mapa__fachada { padding: var(--e-6); display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; text-align: right; gap: var(--e-3); }
.mapa__acciones { justify-content: flex-end; }
.mapa__dir { font: 700 var(--t-lead)/1.15 var(--f-display); max-width: 24ch; }
.mapa__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-5); margin-top: var(--e-3); }
.mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity 200ms var(--salida); }
.mapa iframe.lista { opacity: 1; }
@media (min-width: 900px) { .donde__rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--e-8); align-items: stretch; } }
@media (prefers-reduced-motion: reduce) { .mapa iframe { transition: none; } }
.preguntas { padding-block: 0 var(--seccion); }
.preguntas__rejilla { display: grid; gap: var(--e-5); }
@media (min-width: 900px) { .preguntas .faq { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.preguntas h2 { max-width: 22ch; }
.faq { display: grid; gap: var(--e-2); }
.faq details { background: var(--yeso); border-radius: var(--radio); padding-inline: var(--e-5); }
.clinica .faq details { background: var(--pared); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--e-4);
  min-height: 56px; padding-block: var(--e-3); font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font: 700 1.75rem/1 var(--f-display); color: var(--royal); transition: transform 180ms var(--salida); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: var(--e-5); max-width: 60ch; color: var(--tinta-suave); }
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } }

/* ---------- 404 ---------- */
.no-existe { background: var(--marino); color: var(--pared); padding-block: var(--e-9); }
.no-existe p { margin-top: var(--e-4); font-size: var(--t-lead); max-width: 34ch; }
.no-existe__rejilla { display: grid; gap: var(--e-6); align-items: center; }
.no-existe__figura { width: 140px; }
@media (min-width: 900px) { .no-existe__rejilla { grid-template-columns: minmax(0, 1fr) 240px; } .no-existe__figura { width: 240px; justify-self: end; } }

/* ---------- pie común ---------- */
.pie { background: var(--marino); color: var(--pared); padding-block: var(--e-8) calc(var(--e-5) + var(--burbuja-aire)); }
.pie__rejilla { display: grid; gap: var(--e-6); }
.pie__marca { display: flex; align-items: center; gap: var(--e-3); }
.pie__lema { font: 700 var(--t-lead)/1.1 var(--f-display); }
.pie__links, .pie__contacto { list-style: none; display: grid; gap: 0; font-size: var(--t-small); }
.pie__links a, .pie__contacto a { color: var(--pared); min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; }
.pie__contacto li { min-height: 44px; display: flex; align-items: center; }
.pie__datos { display: grid; gap: var(--e-3); font-size: var(--t-small); color: var(--tinta-suave-oscuro); }
.pie__legal { font-size: var(--t-small); color: var(--tinta-suave-oscuro); grid-column: 1 / -1; }
@media (min-width: 900px) { .pie__rejilla { grid-template-columns: 1.2fr 1fr 1.3fr 1.3fr; align-items: start; } }

/* barra fija de agenda en celular: única sombra del sitio junto con la burbuja (exención en harness/exenciones.md) */
.barra-agenda {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: center;
  padding: var(--e-2) var(--e-3) calc(var(--e-2) + env(safe-area-inset-bottom));
  background: var(--marino); box-shadow: 0 -6px 18px rgba(11, 31, 77, 0.28); /* taste-skill-ignore: barra fija real (exención tabla 3 del contrato) */
  transition: transform 200ms var(--salida), visibility 0s linear 0s;
}
.barra-agenda .boton { flex: 1; min-height: 52px; font-size: 1rem; }
.barra-agenda[data-oculta] { transform: translateY(110%); visibility: hidden; transition: transform 200ms var(--salida), visibility 0s linear 200ms; }
@media (prefers-reduced-motion: reduce) { .barra-agenda, .barra-agenda[data-oculta] { transition: none; } }
@media (min-width: 768px) { .barra-agenda { display: none; } }

/* WhatsApp: burbuja flotante con su logotipo (pedida por el usuario, comentario 3; Enmienda 2). Acción secundaria.
   En celular va encima de la barra de agenda, sin solaparse. Aro marino de 2 px para el contraste sobre blanco. */
.burbuja-wa {
  position: fixed; z-index: 41; right: max(16px, env(safe-area-inset-right));
  bottom: calc(var(--barra-alto) + var(--e-2));
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: #25D366; color: #fff; border: 2px solid var(--marino);
  transition: transform 100ms var(--salida);
}
.burbuja-wa:active { transform: scale(0.94); }
.burbuja-wa:focus-visible { outline: 3px solid var(--royal); outline-offset: 3px; }
@media (min-width: 768px) { .burbuja-wa { width: 60px; height: 60px; right: max(24px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom)); } }
body.menu-abierto .burbuja-wa { visibility: hidden; }
.enlace--wa { gap: var(--e-2); }
.accion .enlace--wa, .escena .enlace--wa { color: var(--pared); text-decoration-color: var(--banda); }
@media print { .barra-agenda, .burbuja-wa, .skip, .menu-boton { display: none; } }

/* Primera visita: la valoración, con duración y costo publicados en su agenda */
.tarifa { margin-top: var(--e-7); background: var(--yeso); border-radius: var(--radio); padding: var(--e-5); border-top: 6px solid var(--filete); }
.tarifa p { margin-top: var(--e-2); max-width: 52ch; }
.tarifa__lista { margin: var(--e-4) 0 0; display: grid; gap: var(--e-2); }
.tarifa__lista div { display: flex; justify-content: space-between; gap: var(--e-4); flex-wrap: wrap; }
.tarifa__lista dt { font-weight: 600; }
.tarifa__lista dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--royal); }
.tarifa__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-5); margin-top: var(--e-5); }
.tarifa__nota { font-size: var(--t-small); color: var(--tinta-suave); }
@media (min-width: 900px) { .tarifa { padding: var(--e-6); } }

/* En celular, ningún botón de agenda en el flujo llega a la columna de la burbuja de WhatsApp (E2.3) */
@media (max-width: 767px) {
  main .boton--agenda { max-width: calc(100% - 64px); text-align: left; }
}