/* Dinaos — medicina estética avanzada
   Paleta principal del cliente:
   #0B0B0B obsidiana · #191919 carbón · #C9A45C champagne
   #DCCB9B dorado pálido · #F7F3EA marfil · #9B8F7A taupe */

:root {
  --obsidiana: #0B0B0B;
  --carbon: #191919;
  --champagne: #C9A45C;
  --palido: #DCCB9B;
  --marfil: #F7F3EA;
  --taupe: #9B8F7A;
  /* Sumados después a la paleta: la luz de las secciones de día */
  --blanco: #FFFFFF;
  --vainilla: #F3E6C6;

  /* Colores por rol. La noche es el valor de base; .dia y .vainilla los redefinen */
  --fondo: var(--obsidiana);
  --tinta: var(--marfil);
  --suave: var(--taupe);
  --acento: var(--champagne);
  --matiz: var(--palido);
  --foco: var(--palido);

  --hairline: rgba(220, 203, 155, 0.22);
  --hairline-fuerte: rgba(220, 203, 155, 0.45);

  --display: "Bodoni Moda", "Didot", Georgia, serif;
  --texto: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --barra: 4.85rem;   /* alto de la barra superior, que el hero descuenta */
  --ancho: 1240px;
  --margen: clamp(1.25rem, 5vw, 4.5rem);
  /* Un solo borde izquierdo para toda la página: el mayor entre el margen y el sobrante del ancho */
  /* En vw y no en %: el % se resolvería contra cada columna y no contra la página */
  --borde: max(var(--margen), calc((100vw - var(--ancho)) / 2));
  --aire: clamp(4.5rem, 11vh, 9rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 8rem; }

body {
  margin: 0;
  background: var(--obsidiana);
  color: var(--tinta);
  font-family: var(--texto);
  font-weight: 300;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.08;
  margin: 0;
  letter-spacing: -0.01em;
}

p { margin: 0 0 1.1em; max-width: 62ch; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 4px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--palido);
  color: var(--obsidiana);
  padding: 0.75rem 1.25rem;
  z-index: 100;
}
.skip:focus { left: 0; }

.lede {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  color: var(--tinta);
  max-width: 54ch;
}

/* ---------- Barra superior ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 4vw, 3rem);
  padding: 0.9rem var(--borde);
  background: rgba(11, 11, 11, 0.97);   /* casi opaca: sobre las secciones de día una barra translúcida se vuelve gris */
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline);
}

/* La marca del cliente: el rostro partido (antes y después) y la firma */
.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-right: auto;
  text-decoration: none;
}
.brand img { display: block; width: auto; }
.brand__rostro { height: 3rem; }
.brand__firma { height: 1.7rem; }

.topnav {
  display: flex;
  gap: clamp(1rem, 2.5vw, 2.25rem);
}

.topnav a {
  font-size: 0.9375rem;
  color: var(--suave);
  text-decoration: none;
  padding-block: 0.35rem;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.topnav a:hover { color: var(--tinta); border-bottom-color: var(--champagne); }
.topnav a[aria-current="page"] { color: var(--acento); border-bottom-color: var(--champagne); }

/* Solo aparece en el teléfono, donde la navegación se pliega */
.menu-boton {
  display: none;
  font: inherit;
  font-size: 0.875rem;
  color: var(--tinta);
  background: none;
  border: 1px solid var(--hairline-fuerte);
  padding: 0.5rem 0.85rem;
  cursor: pointer;
}
.menu-boton[aria-expanded="true"] { border-color: var(--champagne); color: var(--acento); }

/* ---------- Botones ---------- */

.btn {
  display: inline-block;
  font-family: var(--texto);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--obsidiana);
  background: var(--champagne);
  padding: 0.85rem 1.75rem;
  border-radius: 2px;
  text-decoration: none;
  transition: background 0.2s;
}
.btn:hover { background: var(--palido); }

.btn--small { padding: 0.6rem 1.15rem; font-size: 0.875rem; }
.btn--large { padding: 1.05rem 2.4rem; font-size: 1rem; }

.link {
  color: var(--matiz);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline-fuerte);
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}
.link:hover { color: var(--tinta); border-bottom-color: var(--tinta); }

/* ---------- Marco dorado: paspartú, filete y dos esquinas en diagonal ---------- */

.marco {
  --paspartu: clamp(0.5rem, 1vw, 0.8rem);
  --esquina: clamp(1.75rem, 3vw, 2.75rem);
  position: relative;
  margin: 0;
  padding: var(--paspartu);
  border: 1px solid rgba(201, 164, 92, 0.55);
  background: var(--fondo);
}

/* Las esquinas pisan el filete: se leen como herraje del marco, no como adorno suelto */
.marco::before,
.marco::after {
  content: "";
  position: absolute;
  width: var(--esquina);
  height: var(--esquina);
  border: 0 solid var(--champagne);
  pointer-events: none;
  z-index: 1;
}
.marco::before { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.marco::after { right: -1px; bottom: -1px; border-right-width: 2px; border-bottom-width: 2px; }

.marco img {
  display: block;
  width: 100%;
  /* Revelado cálido y con luz: la foto se ve, no se apaga */
  filter: sepia(0.12) saturate(1.02) contrast(1.05) brightness(0.97);
  box-shadow: 0 0 0 1px rgba(220, 203, 155, 0.18);
}

/* ---------- Hero: una promesa, una foto, el índice de áreas ---------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  grid-template-rows: 1fr auto;
  min-height: calc(100svh - var(--barra));
  background: var(--obsidiana);
}

.hero__texto {
  align-self: center;
  padding: clamp(2.5rem, 6vh, 4.5rem) clamp(2rem, 5vw, 5rem) clamp(2.5rem, 6vh, 4.5rem) var(--borde);
}

/* El nombre de la técnica firma el hero: cursiva de la Bodoni, no una etiqueta */
.hero__marca {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.125rem, 1.5vw, 1.375rem);
  color: var(--acento);
  margin-bottom: clamp(1rem, 2.5vh, 1.5rem);
}

.hero__title {
  font-size: clamp(2.75rem, 5.2vw, 5.5rem);
  line-height: 1;
  letter-spacing: -0.025em;
  max-width: 13ch;
  color: var(--tinta);
  margin-bottom: clamp(1.25rem, 3vh, 1.75rem);
  text-wrap: balance;
}

.hero__garantias {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 clamp(1.75rem, 4vh, 2.5rem);
  padding: 0;
  max-width: 46ch;
}
.hero__garantias li {
  font-size: 0.875rem;
  color: var(--tinta);
  padding: 0.1rem 0.9rem 0.1rem 0;
  margin: 0 0.9rem 0.35rem 0;
  border-right: 1px solid var(--hairline-fuerte);
}
.hero__garantias li:last-child { border-right: 0; margin-right: 0; padding-right: 0; }

.hero__exclusivo {
  font-size: 0.8125rem;
  color: var(--suave);
  max-width: 44ch;
  margin-top: clamp(1.5rem, 3.5vh, 2rem);
}

.hero__lede {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  color: var(--matiz);
  max-width: 40ch;
  margin-bottom: clamp(2rem, 4.5vh, 2.75rem);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2rem;
}

/* Casos reales de lifting en slides, a sangre hacia la derecha: cada par sale
   de la penumbra y vuelve a ella por arriba, por abajo y por el borde */
.hero__foto {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 0;
  padding-block: clamp(1.5rem, 4vh, 3rem);
}

.hero__caso {
  --slide: 7s;   /* lo que dura cada caso; main.js lee este valor */
  /* Nunca más alto que el hero: el ancho se deduce del alto disponible */
  width: min(100%, calc((100svh - var(--barra) - 3rem) * 1084 / 880));
}

.hero__par {
  display: grid;
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 7%, #000 80%, transparent),
    linear-gradient(to bottom, transparent, #000 24%, #000 72%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 7%, #000 80%, transparent),
    linear-gradient(to bottom, transparent, #000 24%, #000 72%, transparent);
  mask-composite: intersect;
}

/* Los casos se apilan en la misma celda; el que entra sale de un desenfoque */
.hero__slide {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  opacity: 0;
  filter: blur(8px);
  transition: opacity 1.4s ease, filter 1.4s ease;
}
.hero__slide.is-activo {
  opacity: 1;
  filter: none;
}
.hero__slide img {
  display: block;
  width: 100%;
  height: auto;
  /* El mismo revelado para las dos mitades */
  filter: sepia(0.1) contrast(1.04) brightness(0.92);
}

/* Al entrar cada caso, el después se revela sobre el antes con un borde
   difuso que avanza de izquierda a derecha. Fuera de escena queda visible,
   para que el caso que sale se despida mostrando su resultado. */
.hero__despues {
  -webkit-mask-image: linear-gradient(to right, #000 42%, transparent 58%);
  -webkit-mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-image: linear-gradient(to right, #000 42%, transparent 58%);
  mask-size: 300% 100%;
  mask-repeat: no-repeat;
}
.is-activo .hero__despues {
  animation: renueva 2.2s cubic-bezier(0.45, 0.05, 0.25, 1) 0.9s both;
}
@keyframes renueva {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to { -webkit-mask-position: 0 0; mask-position: 0 0; }
}

.hero__pie {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 2px;
  margin-top: -1.75rem;   /* los rótulos se apoyan en el difuminado inferior */
  position: relative;
}
.hero__pie span {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
  color: var(--matiz);
}
.hero__pie a {
  grid-column: 1 / -1;
  margin-top: 0.6rem;
  font-size: 0.8125rem;
  color: var(--suave);
  text-decoration: underline;
  text-decoration-color: var(--hairline-fuerte);
  text-underline-offset: 0.25em;
  transition: color 0.25s;
}
.hero__pie a:hover { color: var(--tinta); }

/* Selector de casos: el filete bajo el caso activo marca el tiempo que le queda */
.hero__casos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  margin-top: 1.25rem;
}
.hero__casos[hidden] { display: none; }
.hero__casos button {
  position: relative;
  padding: 0.35rem 0 0.55rem;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.875rem;
  color: var(--suave);
  cursor: pointer;
  transition: color 0.25s;
}
.hero__casos button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--hairline);
}
.hero__casos button::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: 1px;
  background: var(--acento);
  transform: scaleX(0);
  transform-origin: left;
}
.hero__casos button:hover,
.hero__casos button[aria-pressed="true"] { color: var(--tinta); }
.hero__casos button[aria-pressed="true"]::before {
  animation: avanza var(--slide) linear both;
}
/* En pausa (puntero o foco encima) el filete se detiene donde va */
.hero__caso.en-pausa .hero__casos button::before { animation-play-state: paused; }
/* Sin avance automático, el filete solo marca el caso elegido */
.hero__caso.quieto .hero__casos button[aria-pressed="true"]::before { animation: none; transform: none; }
@keyframes avanza {
  to { transform: scaleX(1); }
}

/* Índice de áreas: la puerta al catálogo desde el primer pantallazo */
.indice {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(5, minmax(0, 1fr));
  padding-inline: var(--borde);
  border-top: 1px solid var(--hairline);
}

.indice a {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1.25rem 1.25rem 1.4rem;
  border-left: 1px solid var(--hairline);
  text-decoration: none;
}
.indice a:first-child { border-left: 0; padding-left: 0; }

.indice__nombre {
  font-family: var(--display);
  font-size: clamp(1.0625rem, 1.3vw, 1.3125rem);
  line-height: 1.15;
  color: var(--tinta);
  transition: color 0.25s;
}
.indice a:hover .indice__nombre { color: var(--matiz); }
.indice a.indice__firma {
  padding-left: 1.25rem;
  background: var(--carbon);
  box-shadow: inset 0 2px 0 var(--champagne);
}
.indice__firma .indice__nombre {
  color: var(--acento);
  font-size: clamp(1.1875rem, 1.6vw, 1.5rem);
}
.indice__firma .indice__cuenta { color: var(--matiz); }
.indice__cuenta { font-size: 0.8125rem; color: var(--suave); }

/* Una sola secuencia orquestada, en la carga */
.rise {
  opacity: 0;
  transform: translateY(1.1rem);
  animation: rise 0.9s cubic-bezier(0.22, 0.7, 0.25, 1) 0.15s forwards;
}
.hero__title.rise { animation-delay: 0.25s; }
.hero__lede.rise,
.hero__garantias.rise { animation-delay: 0.4s; }
.hero__actions.rise,
.hero__exclusivo.rise { animation-delay: 0.55s; }

@keyframes rise {
  to { opacity: 1; transform: none; }
}


/* ---------- La técnica ---------- */

.technique {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: stretch;
  background: var(--carbon);
  border-block: 1px solid var(--hairline);
}

.technique__foto.marco {
  margin: clamp(3rem, 7vw, 5.5rem) 0 clamp(3rem, 7vw, 5.5rem) var(--borde);
  background: var(--carbon);
}
.technique__foto img {
  height: 100%;
  min-height: 26rem;
  object-fit: cover;
}

.technique__texto {
  padding: var(--aire) var(--borde) var(--aire) clamp(2rem, 6vw, 6rem);
  align-self: center;
  max-width: 52rem;
}

.technique h1,
.technique h2 {
  font-size: clamp(1.875rem, 3.4vw, 2.75rem);
  text-wrap: balance;
  color: var(--acento);
  margin-bottom: 1.5rem;
}

.technique__como { color: var(--matiz); margin-top: 1.25rem; }

.facts { margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; }

/* Los tres datos en filas, con el mismo patrón que el catálogo */
.fact {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 0.35rem 2rem;
  padding-block: 1.1rem;
  border-top: 1px solid var(--hairline);
}
.fact:first-child { border-top-color: var(--hairline-fuerte); }

.fact dt {
  font-family: var(--display);
  font-size: 1.3125rem;
  line-height: 1.15;
  color: var(--matiz);
}

.fact dd { margin: 0; color: var(--suave); font-size: 0.9375rem; max-width: 34ch; }

.technique__link { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.technique__link a {
  color: var(--acento);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline-fuerte);
  padding-bottom: 3px;
}
.technique__link a:hover { color: var(--tinta); }

/* ---------- La técnica protagonista: tres tratamientos con caso real y dos en filas ---------- */

.estrella {
  padding: var(--aire) var(--borde);
  box-shadow: inset 0 2px 0 var(--champagne);
}

.estrella__head { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }

.estrella__marca {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.125rem, 1.5vw, 1.375rem);
  color: var(--acento);
  margin-bottom: 0.75rem;
}

.estrella__head h2 {
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  margin-bottom: 1.1rem;
}

.estrella__destacados {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 3.5vw, 3.5rem);
}

.destacado { display: flex; flex-direction: column; }

.destacado__foto img { height: auto; aspect-ratio: 1; object-fit: cover; }

.destacado h3 {
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  line-height: 1.12;
  color: var(--acento);
  margin: 1.6rem 0 0.4rem;
  text-wrap: balance;
}
.destacado__gist { font-size: 0.875rem; color: var(--matiz); margin-bottom: 0.9rem; }
.destacado p:not(.destacado__gist) { color: var(--suave); font-size: 0.9375rem; line-height: 1.6; }
.destacado .link { align-self: flex-start; margin-top: 1.25rem; }

.estrella__tambien {
  color: var(--matiz);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--hairline);
  max-width: none;
}

.estrella__mas {
  list-style: none;
  margin: clamp(3rem, 6vw, 4.5rem) 0 0;
  padding: 0;
}

.estrella__accion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.estrella__accion p { font-size: 0.875rem; color: var(--suave); max-width: 40ch; margin: 0; }

/* ---------- Videos de pacientes ---------- */

.videos { margin-top: clamp(4rem, 8vw, 6rem); }

.videos__titulo {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}

.video { margin: 0; }
.video video {
  display: block;
  width: 100%;
  height: auto;
  background: var(--obsidiana);
}

.video figcaption h4 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.1875rem, 1.6vw, 1.375rem);
  line-height: 1.2;
  color: var(--tinta);
  margin: 1.1rem 0 0.3rem;
}
.video figcaption p { font-size: 0.875rem; color: var(--suave); max-width: 40ch; }

/* El testimonio va grande y con su texto al lado */
.video--testimonio {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.testimonio {
  padding: var(--aire) var(--borde);
  background: var(--carbon);
  border-block: 1px solid var(--hairline);
}
.video--testimonio figcaption .link { display: inline-block; margin-top: 1.5rem; }

.video--testimonio figcaption h2,
.video--testimonio figcaption h4 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  color: var(--acento);
  margin: 0 0 1rem;
}
.video--testimonio figcaption p { font-size: 1rem; }

.videos__fila {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-top: clamp(3rem, 6vw, 4.5rem);
}
/* Mismo alto para los tres, sin recortar el que viene en vertical */
.videos__fila video { aspect-ratio: 1; object-fit: contain; }


/* ---------- Resultados: un caso grande y el selector de los demás ---------- */

.resultados { padding: var(--aire) var(--borde); border-top: 1px solid var(--hairline); }

.resultados__head { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.resultados__head h1 {
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  margin-bottom: 1.1rem;
}

.visor {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.visor__foto img {
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  transition: opacity 0.3s ease;
}
.visor__foto.is-changing img { opacity: 0; }

/* Rótulos de antes y después: su lugar depende de si el par va lado a lado o apilado */
.visor__rotulo {
  position: absolute;
  z-index: 2;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--tinta);
  background: rgba(11, 11, 11, 0.74);
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--hairline);
}
.visor__foto[data-disposicion="lado"] .visor__rotulo { bottom: calc(var(--paspartu) + 0.9rem); }
.visor__foto[data-disposicion="lado"] .visor__rotulo--antes { left: calc(var(--paspartu) + 0.9rem); }
.visor__foto[data-disposicion="lado"] .visor__rotulo--despues { left: calc(50% + 0.9rem); }
.visor__foto[data-disposicion="pila"] .visor__rotulo { left: calc(var(--paspartu) + 0.9rem); }
.visor__foto[data-disposicion="pila"] .visor__rotulo--antes { top: calc(var(--paspartu) + 0.9rem); }
.visor__foto[data-disposicion="pila"] .visor__rotulo--despues { top: calc(50% + 0.9rem); }

.visor__panel {
  position: sticky;
  top: calc(var(--barra) + 2rem);
}

.visor__texto {
  min-height: 8.5rem;
  border-top: 1px solid var(--hairline-fuerte);
  padding-top: 1.25rem;
  margin-bottom: 1.75rem;
}
.visor__texto h3 {
  font-size: clamp(1.625rem, 2.6vw, 2.25rem);
  color: var(--acento);
  margin-bottom: 0.6rem;
}
.visor__texto p { color: var(--suave); font-size: 0.9375rem; max-width: 40ch; }

.visor__casos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.caso {
  display: block;
  width: 100%;
  padding: 0;
  background: none;
  border: 1px solid var(--hairline);
  cursor: pointer;
  opacity: 0.62;
  transition: opacity 0.25s, border-color 0.25s;
}
.caso img { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.caso:hover { opacity: 1; }
.caso.is-current { opacity: 1; border-color: var(--champagne); outline: 1px solid var(--champagne); outline-offset: 3px; }
.caso:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; }

.caso__nombre {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.resultados__aviso {
  font-size: 0.8125rem;
  color: var(--suave);
  max-width: 70ch;
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* ---------- Identidad: la lista de lo que se recupera es la tipografía grande ---------- */

.identidad {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
  padding: var(--aire) var(--borde);
  background: var(--carbon);
  border-block: 1px solid var(--hairline);
}

.identidad h2 {
  font-size: clamp(2rem, 4vw, 3.25rem);
  margin-bottom: 1.5rem;
  max-width: 16ch;
  text-wrap: balance;
}
.identidad__texto p:not(.lede) { color: var(--suave); }

.identidad__lista {
  list-style: none;
  margin: 0;
  padding: 0 0 0 clamp(1.5rem, 3vw, 2.5rem);
  border-left: 1px solid var(--hairline-fuerte);
}
.identidad__lista li {
  font-family: var(--display);
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--acento);
}

/* ---------- Razones: cirugía y exclusividad, en el patrón de filas del sitio ---------- */

.razones { padding: var(--aire) var(--borde); }

.razon {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 1.25rem clamp(2rem, 6vw, 6rem);
  padding-block: clamp(2.5rem, 5vw, 3.75rem);
  border-top: 1px solid var(--hairline);
}
.razon:first-child { border-top-color: var(--hairline-fuerte); }
.razon:last-child { padding-bottom: 0; }

.razon h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  text-wrap: balance;
}

.razon__texto p { color: var(--suave); }
.razon__texto .razon__remate {
  font-family: var(--display);
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  line-height: 1.3;
  color: var(--matiz);
}

/* ---------- Llamado: las frases de la paciente, antes del catálogo ---------- */

.llamado {
  padding: var(--aire) var(--borde);
  background: var(--carbon);
  border-block: 1px solid var(--hairline);
}

.llamado__intro { color: var(--suave); margin-bottom: 1.5rem; }

.llamado__frases {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem clamp(2rem, 5vw, 4rem);
}
.llamado__frases li {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  line-height: 1.2;
  color: var(--tinta);
  padding-top: 1.1rem;
  border-top: 1px solid var(--hairline-fuerte);
  text-wrap: balance;
}

.llamado__cierre {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  color: var(--matiz);
  max-width: 52ch;
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 2rem;
}


/* ---------- Catálogo: cada área con su foto fija y sus tratamientos en filas ---------- */

.catalogo { padding: var(--aire) 0 0; }

.catalogo__head {
  padding-inline: var(--borde);
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.catalogo__head h1 {
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  margin-bottom: 1.1rem;
}

/* Barra de áreas: acompaña el recorrido y marca dónde va */
.areas {
  position: sticky;
  top: var(--barra);
  z-index: 20;
  display: flex;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
  padding: 0.85rem var(--borde);
  background: rgba(11, 11, 11, 0.92);
  backdrop-filter: blur(14px);
  border-block: 1px solid var(--hairline);
}
.areas::-webkit-scrollbar { display: none; }

.areas a {
  font-size: 0.875rem;
  color: var(--suave);
  text-decoration: none;
  padding-block: 0.2rem;
  border-bottom: 1px solid transparent;
  transition: color 0.25s, border-color 0.25s;
}
.areas a:hover { color: var(--tinta); }
.areas a.is-current { color: var(--acento); border-bottom-color: var(--champagne); }

.area {
  display: grid;
  grid-template-columns: minmax(15rem, 4fr) minmax(0, 8fr);
  gap: clamp(2rem, 6vw, 6rem);
  padding: clamp(3.5rem, 7vw, 5.5rem) var(--borde);
}
.area + .area { border-top: 1px solid var(--hairline); }

/* El encabezado del área acompaña la lista mientras se recorre */
.area__head {
  position: sticky;
  top: calc(var(--barra) + 5rem);
  align-self: start;
}

.area__head h3 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  color: var(--tinta);
  margin-bottom: 0.5rem;
  text-wrap: balance;
}
.area__head p { color: var(--suave); font-size: 0.9375rem; max-width: 30ch; }

/* La técnica propia se distingue por el color, no por un adorno */
.area--firma .area__head h3 { color: var(--acento); }

.area__marco { margin-top: 2rem; }
.area__foto {
  height: auto;
  aspect-ratio: 5 / 4;
  object-fit: cover;
}

.area__lista { list-style: none; margin: 0; padding: 0; }

.trat {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 0.6rem clamp(1.5rem, 3vw, 2.75rem);
  padding-block: 1.75rem;
  border-top: 1px solid var(--hairline);
}
.trat:first-child { border-top-color: var(--hairline-fuerte); }

.trat h3,
.trat h4 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--tinta);
  margin: 0 0 0.35rem;
  text-wrap: balance;
}

.trat__gist { font-size: 0.875rem; color: var(--matiz); margin: 0; }

.trat__texto {
  color: var(--suave);
  font-size: 0.9375rem;
  line-height: 1.6;
  max-width: 54ch;
  margin: 0;
}


/* ---------- Pigmentación médica: el retrato se muestra enmarcado, no de fondo ---------- */

.oncologic {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: center;
  padding: var(--aire) var(--borde);
  border-block: 1px solid var(--hairline);
  background: var(--carbon);
}

.oncologic__retrato { background: var(--fondo); }
.oncologic__retrato img {
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 60% 30%;
}

.oncologic h1 {
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  color: var(--matiz);
  margin-bottom: 1.5rem;
}

.oncologic__texto > p {
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem);
  line-height: 1.6;
  max-width: 44ch;
}

.oncologic__cta { margin-top: 2rem; }
.oncologic__cta a {
  color: var(--acento);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline-fuerte);
  padding-bottom: 3px;
}
.oncologic__cta a:hover { color: var(--tinta); }

/* ---------- La consulta (secuencia real, por eso va numerada) ---------- */

.steps { padding: var(--aire) var(--borde); }

.steps h2 {
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.steps__list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: clamp(1.75rem, 3.5vw, 3rem);
}

.steps__list li { border-top: 1px solid var(--hairline-fuerte); padding-top: 1.25rem; }

.steps__n {
  display: block;
  font-family: var(--display);
  font-size: 2.75rem;
  line-height: 1;
  color: var(--acento);
  margin-bottom: 0.9rem;
}

.steps__list h3 { font-size: 1.3125rem; margin-bottom: 0.55rem; }
.steps__list p { color: var(--suave); font-size: 0.9375rem; max-width: 32ch; }

/* ---------- Agendar ---------- */

.book {
  position: relative;
  overflow: hidden;
  background: var(--carbon);
  border-top: 1px solid var(--hairline);
  padding: calc(var(--aire) * 1.15) var(--borde);
}

.book__fondo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 78% center;
  filter: grayscale(0.28) sepia(0.22) saturate(0.88) contrast(1.08) brightness(0.95);
}

.book::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(95deg, rgba(11, 11, 11, 0.95) 25%, rgba(11, 11, 11, 0.62) 62%, rgba(11, 11, 11, 0.2));
}

.book__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.book__directo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  margin-top: 2.25rem;
}

.book__remate {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  line-height: 1.3;
  color: var(--matiz);
  max-width: 30ch;
}

/* ---------- Formulario de cita ---------- */

.cita {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem 1.5rem;
  padding: clamp(1.75rem, 3vw, 2.75rem);
  background: rgba(11, 11, 11, 0.72);
  backdrop-filter: blur(10px);
  border: 1px solid var(--hairline);
}

.campo { display: flex; flex-direction: column; gap: 0.5rem; }
.campo--ancho { grid-column: 1 / -1; }

.campo label {
  font-size: 0.8125rem;
  color: var(--matiz);
  letter-spacing: 0.02em;
}

.campo__opcional { color: var(--suave); }

.campo input,
.campo select,
.campo textarea {
  font: inherit;
  font-size: 1rem;
  color: var(--tinta);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hairline-fuerte);
  border-radius: 0;
  padding: 0.55rem 0;
  transition: border-color 0.25s;
}

.campo input::placeholder { color: rgba(155, 143, 122, 0.7); }

.campo input:hover,
.campo select:hover,
.campo textarea:hover { border-bottom-color: var(--palido); }

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-bottom-color: var(--champagne);
}
.campo input:focus-visible,
.campo select:focus-visible,
.campo textarea:focus-visible { outline: 2px solid var(--foco); outline-offset: 4px; }

.campo textarea { resize: vertical; min-height: 4.5rem; line-height: 1.5; }

/* El desplegable necesita su propia punta: el nativo no se puede colorear */
.campo select {
  appearance: none;
  padding-right: 1.75rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--champagne) 50%),
    linear-gradient(135deg, var(--champagne) 50%, transparent 50%);
  background-position: right 0.7rem center, right 0.35rem center;
  background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
  background-repeat: no-repeat;
}
.campo select option,
.campo select optgroup { background: var(--carbon); color: var(--tinta); }

.campo__aviso {
  font-size: 0.8125rem;
  color: var(--suave);
  margin: 0;
}
.campo.is-wrong input,
.campo.is-wrong select { border-bottom-color: var(--champagne); }
.campo.is-wrong .campo__aviso { color: var(--acento); }

.permiso {
  display: grid;
  grid-template-columns: 1.1rem 1fr;
  gap: 0.75rem;
  align-items: start;
  font-size: 0.875rem;
  color: var(--suave);
  cursor: pointer;
}
.permiso input {
  appearance: none;
  width: 1.1rem;
  height: 1.1rem;
  margin: 0.15rem 0 0;
  border: 1px solid var(--hairline-fuerte);
  background: transparent;
  cursor: pointer;
  position: relative;
}
.permiso input:checked { background: var(--champagne); border-color: var(--champagne); }
.permiso input:checked::after {
  content: "";
  position: absolute;
  left: 0.32rem;
  top: 0.08rem;
  width: 0.3rem;
  height: 0.6rem;
  border-right: 2px solid var(--obsidiana);
  border-bottom: 2px solid var(--obsidiana);
  transform: rotate(42deg);
}

.cita__envio {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 1.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--hairline);
}

.cita__nota { font-size: 0.8125rem; color: var(--suave); margin: 0; max-width: 30ch; }
.cita__nota.is-wrong { color: var(--acento); }
.cita__nota.is-done { color: var(--matiz); }

.book h1 {
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  color: var(--acento);
  margin-bottom: 1.25rem;
}

.book__where {
  font-style: normal;
  color: var(--suave);
  font-size: 0.9375rem;
  line-height: 1.9;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
}

/* ---------- Pie ---------- */

.foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2rem clamp(2rem, 6vw, 6rem);
  padding: clamp(3rem, 6vw, 4.5rem) var(--borde) 2.5rem;
  border-top: 1px solid var(--hairline);
}

/* El logo completo, compuesto como el original: rostro, Spa Médico, firma y lema.
   Los textos van como texto real; el ciruela del original no se lee de noche. */
.foot__logo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 2rem;
  text-decoration: none;
}
.foot__logo img { display: block; height: auto; }
.foot__rostro { width: 6.5rem; margin-bottom: 0.9rem; }
.foot__spa {
  font-size: 0.875rem;
  letter-spacing: 0.16em;
  color: var(--matiz);
}
.foot__firma { width: min(21rem, 78vw); margin: 0.1rem 0 0.55rem; }
.foot__lema { font-size: 0.8125rem; color: var(--suave); }

.foot p { font-size: 0.875rem; color: var(--suave); max-width: 46ch; }

.foot__nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: 0.6rem 2.5rem;
  align-content: start;
}
.foot__nav a {
  font-size: 0.9375rem;
  color: var(--matiz);
  text-decoration: none;
}
.foot__nav a:hover { color: var(--tinta); text-decoration: underline; text-underline-offset: 4px; }

.foot .foot__aviso {
  grid-column: 1 / -1;
  font-size: 0.8125rem;
  max-width: 90ch;
}

/* ---------- Noche y día ----------
   Lo que la clínica promete va de noche; lo que lo demuestra, de día.
   Blanco para la prueba (casos y resultados), vainilla para la voz de la paciente.
   Sobre claro el champagne no alcanza contraste de lectura: los títulos pasan a
   obsidiana y el dorado queda en filetes, marcos y en el botón al pasar el cursor.
   Va después de las secciones para ganarles el fondo con la misma especificidad. */

.dia,
.vainilla {
  --tinta: var(--obsidiana);
  --acento: var(--obsidiana);
  --suave: #5F5647;   /* el taupe del cliente, oscurecido hasta leerse sobre claro */
  --matiz: #3D362C;
  --foco: var(--obsidiana);
  --hairline: rgba(95, 86, 71, 0.22);
  --hairline-fuerte: rgba(95, 86, 71, 0.5);
  color: var(--tinta);
  background: var(--fondo);
}
.dia { --fondo: var(--blanco); }
.vainilla { --fondo: var(--vainilla); }

.dia .btn,
.vainilla .btn { background: var(--obsidiana); color: var(--marfil); }
.dia .btn:hover,
.vainilla .btn:hover { background: var(--champagne); color: var(--obsidiana); }

.dia .link,
.vainilla .link { border-bottom-color: var(--champagne); }

/* De día la foto se muestra tal cual: el revelado cálido es de la noche */
.dia .marco img,
.vainilla .marco img { filter: none; box-shadow: none; }

/* ---------- Adaptación a pantallas pequeñas ---------- */

@media (max-width: 1100px) {
  .topnav { gap: 1.1rem; }
  .topnav a { font-size: 0.875rem; }
  /* La técnica toma la fila completa; las otras cinco áreas van debajo */
  .indice { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .indice a.indice__firma { grid-column: 1 / -1; }
  .indice a:not(.indice__firma) { border-top: 1px solid var(--hairline); }
  .indice a:nth-child(3n + 2) { border-left: 0; padding-left: 0; }
}

@media (max-width: 900px) {
  /* La barra pasa a dos filas: marca y acción arriba, secciones debajo */
  .topbar { flex-wrap: wrap; gap: 0.75rem 1rem; padding-bottom: 0.5rem; }
  .brand__rostro { height: 2.6rem; }
  .brand__firma { height: 1.45rem; }

  .topnav {
    order: 3;
    flex-basis: 100%;
    gap: 1.25rem;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
  }
  .topnav::-webkit-scrollbar { display: none; }
  .topnav a { font-size: 0.875rem; }

  :root { --barra: 7.05rem; }

  .hero { grid-template-columns: 1fr; grid-template-rows: auto; min-height: 0; }
  /* En una columna los casos van justo después del título: el texto se desarma
     para que foto y texto se intercalen en el orden de lectura */
  .hero__texto { display: contents; }
  .hero__texto > * { margin-inline: var(--borde); }
  .hero__marca { order: 1; margin-top: clamp(2rem, 7vw, 3.5rem); }
  .hero__title { order: 2; }
  .hero__foto { order: 3; padding-block: 0 clamp(2rem, 6vw, 2.75rem); }
  .hero__lede { order: 4; }
  .hero__garantias { order: 5; }
  .hero__actions { order: 6; }
  .hero__exclusivo { order: 7; margin-bottom: clamp(2rem, 6vw, 3rem); }
  .indice { order: 8; }
  .hero__caso { width: 100%; }
  .hero__pie span,
  .hero__pie a { padding-left: var(--borde); }
  .hero__casos { padding-inline: var(--borde); }

  .oncologic { grid-template-columns: 1fr; }
  .oncologic__retrato { order: -1; max-width: 26rem; }
  .oncologic__retrato img { aspect-ratio: 5 / 4; }

  .technique { grid-template-columns: 1fr; }
  .technique__foto.marco { margin: var(--aire) var(--borde) 0; }
  .technique__foto img { min-height: 0; height: auto; aspect-ratio: 4 / 3; }
  .technique__texto { padding: clamp(2.5rem, 8vw, 3.5rem) var(--borde) var(--aire); }

  .visor,
  .identidad,
  .razon,
  .estrella__destacados,
  .video--testimonio,
  .videos__fila { grid-template-columns: 1fr; }
  .estrella__destacados { gap: 3.5rem; }
  .visor__panel { position: static; }
  .visor__texto { min-height: 0; }
  .identidad__lista { padding-left: 1.25rem; }

  .area { grid-template-columns: 1fr; gap: 1.5rem; }
  .area__head { position: static; }
  .area__marco { margin-top: 1.5rem; }
  .area__foto { aspect-ratio: 16 / 10; }

  .book__inner { grid-template-columns: 1fr; }
  .cita { grid-template-columns: 1fr; }

  html { scroll-padding-top: 10.5rem; }
}

@media (max-width: 700px) {
  /* En el teléfono la barra queda en marca y acción; el índice del hero hace de menú */
  /* Título más contenido, para que los casos asomen en la primera pantalla */
  .hero__title { font-size: clamp(2rem, 8.6vw, 2.5rem); max-width: 17ch; }
  .topbar { flex-wrap: wrap; gap: 0.75rem; padding-bottom: 0.9rem; }
  .brand { margin-right: auto; gap: 0.5rem; }
  .menu-boton { display: block; order: 2; }
  .topbar .btn--small { order: 1; padding: 0.55rem 0.8rem; font-size: 0.8125rem; }

  /* El menú se despliega debajo de la barra, a todo el ancho */
  .topnav {
    display: none;
    order: 3;
    flex-basis: 100%;
    flex-direction: column;
    gap: 0;
    padding-top: 0.5rem;
  }
  .topnav.is-open { display: flex; }
  .topnav a {
    font-size: 1.0625rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--hairline);
  }
  .topnav a:last-child { border-bottom: 0; }

  .foot { grid-template-columns: 1fr; }
  .foot__nav { grid-template-columns: 1fr; }
  :root { --barra: 4.45rem; }
  html { scroll-padding-top: 5.5rem; }

  .indice { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .indice a:not(.indice__firma),
  .indice a:nth-child(3n + 2) { border-left: 1px solid var(--hairline); padding-left: 1.25rem; }
  .indice a:nth-child(2n) { border-left: 0; padding-left: 0; }

  /* Las áreas ya se anuncian solas; otra barra fija estorba en pantalla chica */
  .areas { display: none; }

  .trat,
  .fact,
  .llamado__frases { grid-template-columns: 1fr; }
  .visor__casos { gap: 0.5rem; }
  .trat { padding-block: 1.5rem; }
}

@media (max-width: 480px) {
  /* En la barra no caben firma, acción y menú: queda el rostro, que es la marca */
  .brand .brand__firma { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise { animation: none; opacity: 1; transform: none; }
  .hero__despues,
  .is-activo .hero__despues { animation: none; -webkit-mask-image: none; mask-image: none; }
  .hero__slide { transition: none; filter: none; }
  .visor__foto img { transition: none; }
}