/* Smile & Align: rediseño del home (2026-10-10). Pedido de Axel: que el home quede al nivel de las páginas de
   servicio ("flat, sin motion, tarjetas sin vida, títulos sin espacio, cortes rectos entre secciones").
   Se carga después de site.css y servicios.css y solo en la home. Mismo lenguaje que servicios.css: fundido marfil
   y arena entre secciones, títulos por máscara con un tramo en itálica dorada, filetes dorados que se trazan,
   tarjetas con sombra cálida, aire generoso. No toca la hélice (.helice*) ni "Invisalign, de cerca" (.alineador*).

   Todo lo de acá es el estado final: sin JS, con reduced-motion o sin GSAP la página se ve completa y quieta. El
   movimiento vive en assets/js/site.js (MOTION.md, sección 6) y el del pie en assets/js/pie.js. */

:root { --seccion-h: clamp(5.5rem, 10vw, 9rem); --sombra-calida: 0 1px 0 rgba(138, 106, 46, .14), 0 30px 60px -42px rgba(31, 28, 24, .35); }

/* ───── Títulos: más aire, un tramo en itálica dorada, máscara con lugar para los descendentes ───── */
.cabeza { margin-bottom: clamp(3.5rem, 6.5vw, 5.75rem); gap: 1.4rem; }
.cabeza h2, .proceso__cabeza h2, .contacto__datos h2 { font-size: var(--h2); line-height: 1; }
.t-mascara { overflow: hidden; padding: 0 .08em .16em 0; margin: 0 -.08em -.16em 0; }
main h2 em, .hero__titulo em { font-style: italic; font-weight: 400; color: var(--dorado-hondo); }
.sobre-noche h2 em, .hero__titulo em { color: var(--dorado-claro); }
.hero__titulo em { font-weight: 500; }
.cabeza--centro p { font-size: clamp(1.1rem, 1.4vw, 1.22rem); line-height: 1.6; max-width: 36rem; }

/* ───── Fundido entre secciones (como 5a): marfil y arena se funden, sin línea ─────
   El degradado fijo existe sin JS; con movimiento, site.js agrega la capa .fundido (servicios.css) y la apaga con
   el scroll. Hacia y desde el grafito (Invisalign de cerca, agenda y opiniones, pie) no hay fundido: es contraste. */
.casos, .reconocimiento, .tratamientos, .por-que, .doctora, .proceso, .contacto { position: relative; isolation: isolate; }
.casos, .tratamientos, .doctora, .contacto { background: var(--marfil); }
.reconocimiento { background: var(--arena); --degradado-desde: var(--marfil); --fundido-desde: var(--marfil); }
.tratamientos { --degradado-desde: var(--arena); --fundido-desde: var(--arena); }
.por-que { background: var(--arena); --degradado-desde: var(--marfil); --fundido-desde: var(--marfil); }
.doctora { --degradado-desde: var(--arena); --fundido-desde: var(--arena); }
.proceso { background: var(--arena); border-block: 0; --degradado-desde: var(--marfil); --fundido-desde: var(--marfil); }
.reconocimiento::before, .tratamientos::before, .por-que::before, .doctora::before, .proceso::before { content: ""; position: absolute; inset: 0 0 auto; z-index: -1; height: clamp(7rem, 20vh, 12rem); background: linear-gradient(180deg, var(--degradado-desde) 0%, transparent 100%); pointer-events: none; }
.casos, .reconocimiento, .tratamientos, .por-que, .doctora { padding-block: var(--seccion-h); }

/* ───── Hero a pantalla completa: fotos y videos reales que cambian solos (2026-10-12, aprobado por Axel) ─────
   Pedido de Axel: el formato de pantalla completa (como el hero de lamalama.com: un video a sangre que pasa al
   siguiente, el título encima), con material mejor que las dos fotos del sitio viejo. Ocho diapositivas a sangre (tres
   videos en lazo y cinco fotos de la sesión profesional, alternados) que pasan solas; cada una entra como una cortina
   desde la derecha con un filo dorado. Encima, editorial a la izquierda a media altura: la regla como etiqueta, el h1 en
   tres líneas, la bajada, los dos botones y la prueba de Google (5.0 y una reseña real de la hélice que rota). Un velo
   lateral mantiene el texto legible sobre cualquier diapositiva; la mitad derecha de la foto respira. Se eligió entre
   cuatro composiciones (cine, foco, díptico y esta, "consulta"); las otras tres se borraron.
   Todo lo de acá es el estado final: sin JS, con reduced-motion o sin GSAP se ve la primera diapositiva fija y el texto
   en su lugar; el movimiento vive en site.js (MOTION.md, 1). */
.hero { position: relative; isolation: isolate; overflow: hidden; display: grid; min-height: max(40rem, 100svh); color: var(--blanco); background: var(--grafito); }
.hero__escena { position: absolute; inset: 0; z-index: -2; background: var(--noche-2); }
.hero__slide { position: absolute; inset: 0; margin: 0; opacity: 0; overflow: hidden; }
.hero__slide:first-child { opacity: 1; }
/* La capa lleva el medio: en la cortina la diapositiva entra desde la derecha y la capa se mueve al revés, así la foto
   queda quieta mientras el borde avanza (dos transforms compuestos, sin repintar). */
.hero__capa { position: absolute; inset: 0; transform-origin: 50% 40%; }
.hero__slide picture, .hero__slide img, .hero__video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
/* El video arranca transparente sobre su poster (el cuadro 0 del lazo) y se prende en `playing`: nunca un cuadro negro. */
.hero__video { opacity: 0; transition: opacity .5s var(--curva); }
.hero__video--va { opacity: 1; }
/* Filo dorado del borde que avanza, solo mientras la diapositiva entra (site.js pone la clase). */
.hero__slide--entrando::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 1px; z-index: 3; background: var(--dorado-claro); }
/* Velo lateral: el texto se lee sobre cualquier diapositiva, también sobre la ventana luminosa. */
.hero__velo { position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(90deg, rgba(31, 28, 24, .72) 0%, rgba(31, 28, 24, .42) 38%, rgba(31, 28, 24, 0) 68%),
  linear-gradient(180deg, rgba(31, 28, 24, .45) 0%, rgba(31, 28, 24, 0) 26%, rgba(31, 28, 24, 0) 60%, rgba(31, 28, 24, .72) 100%); }

/* ── Texto: editorial a la izquierda, a media altura ── */
.hero__contenido { position: relative; place-self: center start; width: min(100%, var(--ancho)); margin-inline: auto; padding: 7rem var(--lado) 6rem; text-align: left; }
.hero .regla { justify-content: flex-start; max-width: none; margin: 0 0 1.25rem; }
.hero .regla::before { display: none; }
.hero .regla::after { flex: 0 0 3rem; min-width: 0; }
.hero__titulo { max-width: 10ch; font-size: clamp(3.1rem, 7.8vw, 6rem); font-weight: 600; letter-spacing: -.016em; line-height: .98; } /* tres líneas: Ortodoncia / invisible / en Cancún */
.hero__lead { max-width: 34rem; margin: clamp(1.4rem, 3vw, 2rem) 0 0; font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.6; color: var(--sobre-noche); }
.hero__acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: clamp(2rem, 4vw, 2.75rem); }
/* Prueba de Google: la calificación de la ficha y una reseña real que rota. */
.hero__prueba { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem; max-width: 34rem; margin-top: clamp(1.75rem, 3.5vw, 2.5rem); padding-top: 1.1rem; border-top: 1px solid var(--noche-linea); }
.hero__prueba-g { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; background: var(--blanco); border-radius: 50%; }
.hero__prueba-g svg { width: .85rem; height: .85rem; }
.hero__prueba .estrellas { display: inline-flex; gap: .15rem; color: var(--dorado-claro); }
.hero__prueba .estrellas .icono { width: .8rem; height: .8rem; fill: currentColor; stroke: none; }
.hero__prueba-nota { font: 600 .75rem/1 var(--etiqueta); letter-spacing: .16em; text-transform: uppercase; color: var(--blanco); }
.hero__resenas { position: relative; flex-basis: 100%; min-height: 3.6em; }
.hero__resena { position: absolute; inset: 0; opacity: 0; font: italic 400 clamp(1.1rem, 1.5vw, 1.3rem)/1.35 var(--display); color: var(--sobre-noche); }
.hero__resena:first-child { opacity: 1; }
.hero__resena cite { display: block; margin-top: .4rem; font: 600 .6875rem/1 var(--etiqueta); font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: var(--dorado-claro); }

/* ── Pie: número de diapositiva y una línea que se llena, abajo a la derecha ── */
.hero__pie { position: absolute; left: 0; right: 0; bottom: 1.75rem; z-index: 1; display: flex; align-items: center; justify-content: flex-end; gap: 1rem; padding-inline: var(--lado); font: 600 .6875rem/1 var(--etiqueta); letter-spacing: .2em; text-transform: uppercase; color: var(--sobre-noche-2); font-variant-numeric: tabular-nums; }
.hero__contador b { font-weight: 600; color: var(--blanco); }
.hero__progreso { width: 6rem; height: 1px; background: var(--noche-linea); overflow: hidden; }
.hero__progreso i { display: block; height: 100%; background: var(--dorado-claro); transform: scaleX(0); transform-origin: left; }

/* Capa para lo que se mueve con el scroll (solo con movimiento): el bloque de texto; la escena no se toca. */
.mw-activo .hero__contenido { will-change: transform, opacity; }

@media (max-width: 899.98px) {
  .hero__contenido { padding: 7rem var(--lado) 5.5rem; }
  .hero__titulo { max-width: none; }
  .hero__pie { bottom: 1.25rem; }
}

/* ───── Un especialista para cada tratamiento ───── */
/* Urgencia: sin caja ni pestaña lateral; una línea entre dos filetes, la pregunta en Cormorant. */
.urgencia { position: relative; margin-bottom: clamp(3.5rem, 6vw, 5rem); padding: 1.4rem 0; background: none; border: 0; border-block: 1px solid var(--linea); }
.urgencia::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--dorado); transform-origin: 0 50%; transform: scaleX(var(--filete, 0)); }
.urgencia p { font: 500 clamp(1.45rem, 2.1vw, 1.75rem)/1.25 var(--display); color: var(--tinta); }
.urgencia p span { margin-left: .6rem; font: 400 1rem/1.5 var(--sans); color: var(--texto-2); }
/* Sirena de urgencia (pedido de Axel): el único rojo del sitio, solo acá. Los destellos laten despacio. */
.urgencia p { flex: 1 1 18rem; }
/* Los destellos van en su propio <svg> encima del cuerpo: la opacidad animada de un <g> dentro de un SVG no se
   compone en la GPU y repintaba la sirena en cada cuadro, todo el tiempo; la del <svg> raíz sí (MOTION.md 6f). */
.urgencia__sirena { position: relative; display: block; flex: 0 0 auto; width: clamp(2.6rem, 3.4vw, 3.1rem); aspect-ratio: 1; }
.urgencia__sirena svg { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .urgencia__destellos { animation: sirena-destello 1.6s ease-in-out infinite; }
}
@keyframes sirena-destello { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.servicios__grupo + .servicios__grupo { margin-top: clamp(4.5rem, 8vw, 7rem); }
.servicios__grupo-titulo { color: var(--dorado-hondo); }
/* Tarjetas grandes: sombra cálida y la foto que se acerca despacio al pasar (scale suelto, no pelea con el scrub). */
.t-grande { box-shadow: 0 40px 70px -48px rgba(31, 28, 24, .5); }
.t__foto img { transition: scale 1.6s var(--curva); }
@media (hover: hover) and (pointer: fine) { .t-grande:hover .t__foto img { scale: 1.045; } }
.t-grande h3 { font-weight: 500; }
/* Tarjetas chicas: superficie clara con sombra tintada (como .razones), sin borde; al pasar suben 6 px, la foto se
   acerca y un filete dorado crece desde la izquierda. */
.t-chicas { gap: clamp(1.25rem, 2.2vw, 2rem); }
.t-chica { position: relative; min-height: 12.5rem; background: var(--blanco); border: 0; box-shadow: var(--sombra-calida); transition: translate .7s var(--curva), box-shadow .7s var(--curva); }
.t-chica::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--dorado); transform: scaleX(0); transform-origin: 0 50%; transition: transform .9s var(--curva); }
.t-chica--dolor { border-left: 0; }
.t-chica__foto img { transition: scale 1.4s var(--curva); }
.t-chica__texto { padding: 1.5rem 1.6rem; gap: .6rem; }
.t-chica h3 { font-size: clamp(1.55rem, 1.9vw, 1.8rem); font-weight: 500; line-height: 1.05; }
.t-chica .t__promesa { color: var(--dorado-hondo); }
@media (hover: hover) and (pointer: fine) {
  .t-chica:hover { translate: 0 -6px; box-shadow: 0 1px 0 rgba(138, 106, 46, .2), 0 44px 70px -40px rgba(31, 28, 24, .42); }
  .t-chica:hover::after { transform: scaleX(1); }
  .t-chica:hover .t-chica__foto img { scale: 1.06; }
}

/* ───── Por qué Smile & Align: grilla editorial escalonada ─────
   Cuatro ventanas de tamaños distintos, con el pie de foto debajo (no sobre la foto: sobre el iTero claro no se
   leía). Fila 1: la grande a la izquierda y una vertical a la derecha, apoyada abajo. Fila 2: corrida al revés. */
.mosaico { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 3rem); row-gap: clamp(4rem, 8vw, 7rem); align-items: end; }
.pieza { aspect-ratio: auto; overflow: visible; background: none; transform-origin: 50% 100%; }
.pieza:focus-visible { outline-offset: 8px; }
.pieza__marco { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--noche-2); transform-origin: 50% 100%; box-shadow: 0 40px 70px -50px rgba(31, 28, 24, .55); }
.pieza:nth-child(1) { grid-column: 1 / span 7; }
.pieza:nth-child(1) .pieza__marco { aspect-ratio: 1 / 1; }
.pieza:nth-child(2) { grid-column: 9 / span 4; }
.pieza:nth-child(3) { grid-column: 2 / span 5; align-self: start; }
.pieza:nth-child(4) { grid-column: 8 / span 5; align-self: start; margin-top: clamp(4rem, 10vw, 9rem); }
.pieza:nth-child(4) .pieza__marco { aspect-ratio: 1 / 1.05; }
.pieza__texto { position: static; display: grid; gap: .55rem; padding: 1.5rem 0 0; background: none; color: var(--tinta); text-align: left; }
.pieza__texto::before { content: ""; display: block; width: 3rem; height: 1px; margin-bottom: .6rem; background: var(--dorado); transform-origin: 0 50%; }
.pieza__texto h3 { font-size: clamp(1.7rem, 2.4vw, 2.2rem); font-weight: 500; color: var(--tinta); }
.pieza__texto p { max-width: 28rem; margin: 0; color: var(--texto-2); font-size: 1rem; line-height: 1.6; }
.pieza .pieza__insignia { width: clamp(5.5rem, 9vw, 7.5rem); }

/* ───── La doctora ───── */
.moda__frase em { color: var(--dorado-hondo); }
.moda__firma { padding-top: 1.5rem; border-top: 1px solid var(--linea); }
.moda__foto img { object-position: 50% 30%; }
/* La cita de Antonio va sola, a todo el ancho y centrada, entre filetes: es su voz, no la de la foto. Debajo, en otra
   fila, la foto del tratamiento acompaña a "Revisamos tu caso" y al botón (pulido final 2026-10-10: la cita junto a
   la foto de una paciente se leía como si él fuera la persona de la foto). */
.casa { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(2.5rem, 6vw, 6rem); row-gap: clamp(4rem, 8vw, 6.5rem); margin-top: clamp(5rem, 10vw, 8.5rem); }
.casa__cita { grid-column: 1 / -1; justify-self: center; display: grid; justify-items: center; gap: 1.6rem; max-width: 52rem; padding-top: clamp(2.5rem, 4vw, 3.25rem); text-align: center; }
.casa__cita::before { content: ""; width: 3.5rem; height: 1px; margin-bottom: .4rem; background: var(--dorado); }
.casa__cita h3 { font: italic 400 clamp(2.1rem, 3.6vw, 3.2rem)/1.14 var(--display); letter-spacing: -.005em; color: var(--tinta); text-wrap: balance; }
.casa__cita .casa__firma { display: flex; align-items: center; gap: 1rem; font: 600 .72rem/1.4 var(--etiqueta); letter-spacing: .16em; text-transform: uppercase; color: var(--dorado-hondo); }
.casa__cita .casa__firma::before, .casa__cita .casa__firma::after { content: ""; width: 2.5rem; height: 1px; background: var(--dorado); transform: scaleX(var(--filete, 1)); }
.casa__cita .casa__firma::before { transform-origin: 100% 50%; }
.casa__cita .casa__firma::after { transform-origin: 0 50%; }
.casa__foto { box-shadow: 0 40px 70px -50px rgba(31, 28, 24, .5); }
.casa__foto img { aspect-ratio: 3 / 2; }
.casa__texto { max-width: 26rem; gap: 1.75rem; }
.casa__texto p { font: 400 clamp(1.45rem, 2.1vw, 1.8rem)/1.3 var(--display); color: var(--tinta); }

/* ───── Proceso: arena, número en itálica dorada, hilo dorado en vez de barras ───── */
.paso__n { font: italic 400 clamp(3.5rem, 6.5vw, 5.5rem)/.95 var(--display); color: var(--dorado-hondo); font-feature-settings: "lnum"; }
.paso__foto { position: relative; }
/* Filete de invitación sobre la foto, a 14 px del borde. */
.paso__foto::after { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(246, 242, 234, .55); pointer-events: none; }
.proceso__cierre p em { color: var(--dorado-hondo); }
/* Marcas: un hilo dorado con cuatro nodos; el tramo recorrido se rellena con el scroll (site.js) y el nodo del paso
   activo se llena. Sin JS el hilo está entero. */
.marcas { position: relative; display: block; padding-top: 1.35rem; }
.marcas ol { display: flex; }
.marcas li { position: relative; display: block; width: clamp(4rem, 7vw, 6.25rem); font: italic 400 1.15rem/1 var(--display); color: var(--texto-2); letter-spacing: 0; transition: color .5s var(--curva); }
.marcas li:last-child { width: auto; }
.marcas li::before { content: ""; position: absolute; left: 0; top: -1.35rem; width: 7px; height: 7px; margin-top: -3px; border-radius: 50%; border: 1px solid var(--dorado); background: var(--arena); transition: background-color .5s var(--curva); }
.marcas li.activa { color: var(--dorado-hondo); }
.marcas li.activa::before { background: var(--dorado); }
.marcas::before, .marcas__hilo { content: ""; position: absolute; left: 3px; right: calc(100% - 3 * clamp(4rem, 7vw, 6.25rem) - 3px); top: 0; height: 1px; }
.marcas::before { background: rgba(184, 149, 79, .3); }
/* Capa propia: el scrub le cambia scaleX en cada cuadro del pin y, sin capa, repintaba la etapa fijada entera
   (1440×900) en cada cuadro (MOTION.md 6f). */
.marcas__hilo { display: block; background: var(--dorado); transform-origin: 0 50%; will-change: transform; }

/* ───── Agenda: umbral grafito antes de las opiniones; foto entera y panel de invitación ───── */
.agenda { position: relative; isolation: isolate; padding-block: var(--seccion-h) clamp(2rem, 5vw, 4rem); background: var(--noche); color: var(--sobre-noche); }
.agenda::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url("../img/grano.png") repeat; background-size: 128px 128px; }
.agenda__caja { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; min-height: 0; }
.agenda__foto { position: relative; overflow: hidden; aspect-ratio: 4 / 5; max-height: min(44rem, 82vh); }
.agenda__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.agenda .agenda__foto img { object-position: 38% 32% !important; }
.agenda__panel { --filete-trazo: 0; position: relative; inset: auto; transform: none; z-index: 1; display: grid; grid-template-columns: 1fr; justify-items: start; gap: 1.5rem; margin-left: calc(-1 * clamp(2rem, 5vw, 5rem)); padding: clamp(3rem, 5.5vw, 5rem) clamp(2.5rem, 5vw, 4.75rem); background: #26221d; box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .6); }
.agenda__filete { position: absolute; inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); overflow: visible; pointer-events: none; }
.agenda__filete rect { width: calc(100% - 1px); height: calc(100% - 1px); fill: none; stroke: rgba(212, 185, 127, .55); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: var(--filete-dash, none); stroke-dashoffset: var(--filete-trazo); }
.agenda__panel h2 { font-size: clamp(2.6rem, 4.4vw, 3.9rem); line-height: 1; color: var(--blanco); }
.agenda__panel p { max-width: 26rem; color: var(--sobre-noche-2); font-size: 1.08rem; line-height: 1.6; }
.agenda__panel .boton { margin-top: .5rem; }

/* ───── Contacto: sin caja; datos con filetes que se trazan, recepción y mapa enmarcados ───── */
.contacto { padding-block: var(--seccion-h); }
.contacto__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(3rem, 7vw, 7rem); row-gap: clamp(4rem, 7vw, 6rem); align-items: center; background: none; border: 0; }
.contacto__datos { padding: 0; gap: 2.25rem; }
.datos { border-top: 0; }
.datos li { position: relative; grid-template-columns: 8rem 1fr; padding-block: 1.15rem; border-bottom: 0; }
.datos li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--linea); transform-origin: 0 50%; transform: scaleX(var(--regla, 1)); }
.datos li:first-child::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--dorado); transform-origin: 0 50%; transform: scaleX(var(--regla, 1)); }
.datos .dato__k { color: var(--dorado-hondo); }
.datos a { font-size: 1.05rem; background: linear-gradient(var(--dorado), var(--dorado)) 0 100% / 0 1px no-repeat; transition: background-size .7s var(--curva); }
.datos a:hover { text-decoration: none; background-size: 100% 1px; }
.contacto__foto { min-height: 0; aspect-ratio: 4 / 5; box-shadow: 0 40px 70px -50px rgba(31, 28, 24, .5); }
.contacto__mapa { border-top: 0; height: clamp(20rem, 40vw, 30rem); box-shadow: var(--sombra-calida); }
.mapa__tarjeta { border-top: 0; padding: clamp(1.75rem, 3vw, 2.4rem); }
.mapa__tarjeta::after { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(184, 149, 79, .45); pointer-events: none; }
.mapa__nombre { font-size: 1.8rem; }

/* ───── Teléfono y tableta vertical ───── */
@media (max-width: 899.98px) {
  .cabeza h2, .proceso__cabeza h2, .contacto__datos h2 { font-size: var(--h2-movil); }
  .banda { display: none; }  /* en teléfono la banda era solo un segundo botón de WhatsApp apilado bajo el del hero */
  .urgencia p span { display: block; margin: .35rem 0 0; }
  .mosaico { grid-template-columns: 1fr; row-gap: 3.5rem; }
  .pieza:nth-child(n) { grid-column: auto; margin-top: 0; }
  .pieza:nth-child(n) .pieza__marco { aspect-ratio: 4 / 4.6; }
  .casa { grid-template-columns: 1fr; row-gap: 2.75rem; margin-top: 4.5rem; }
  .casa__foto { order: 0; }
  .casa__foto img { aspect-ratio: 4 / 3.4; }
  .agenda__caja { grid-template-columns: 1fr; padding-inline: 0; }
  .agenda__foto { aspect-ratio: 4 / 4.4; max-height: none; }
  .agenda__panel { position: relative; margin: -3.5rem var(--lado) 0; padding: 3rem 2rem; }
  .contacto__grid { grid-template-columns: 1fr; row-gap: 3rem; }
  .contacto__foto { order: 0; }
  .contacto__mapa { height: auto; }
  .contacto__mapa .mapa__lienzo { position: relative; height: 18rem; order: -1; } /* más específico que la base, que viene después en esta hoja */
  .datos li { grid-template-columns: 1fr; }
  .marcas { display: none; }
}
@media (max-width: 480px) {
  .t-chica { grid-template-columns: 7rem 1fr; }
  .t-chica__texto { padding: 1.25rem; }
}
@media (min-width: 900px) and (max-width: 1100px) {
  .pieza:nth-child(1) { grid-column: 1 / span 7; }
  .pieza:nth-child(2) { grid-column: 8 / span 5; }
}

/* ───── Pulido final (2026-10-10) ─────
   Proceso: el título quedaba pegado a la foto (gap de 1.5 a 2.5 rem medido en vh: 23 px en 1366x768). Ahora el
   mismo aire que deja .cabeza entre un título y su grilla, acotado por el alto de la etapa pegada. */
.proceso__inner { gap: clamp(2.75rem, 7vh, 4.75rem); }
@media (max-width: 899.98px) { .proceso__inner { gap: clamp(2.75rem, 10vw, 3.5rem); } }
/* Por qué: la cuarta pieza baja 9 rem y la columna izquierda quedaba vacía; con la cola de sección entera eran ~300 px
   de arena muerta antes de la doctora. */
@media (min-width: 900px) { .por-que { padding-bottom: calc(var(--seccion-h) * .5); } }

.t__resalte { color: #f2b8a6; }

/* ───── Antes y después (2026-10-13) ─────
   Pedido de Axel: una sección con el antes y después de la mujer y del hombre. Dos deslizadores a todo el ancho de
   la columna, en 1.9:1 (la proporción del collage del hombre, que es el límite). La imagen de "antes" va encima,
   recortada con clip-path desde la derecha; el resto lo hace un <input type="range"> invisible que cubre todo (teclado,
   toque y arrastre sin JS propio de punteros). Sin JS queda partido al 50 %. Las fotos van sin grado ni retoque. */
.casos__lista { display: grid; gap: clamp(3rem, 6vw, 5rem); max-width: 60rem; margin-inline: auto; }
.caso { margin: 0; }
.comparador { --pos: 50%; position: relative; aspect-ratio: 1.9 / 1; overflow: hidden; background: var(--noche-2); box-shadow: 0 40px 70px -50px rgba(31, 28, 24, .55); user-select: none; -webkit-user-select: none; }
.comparador img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
/* El corte y la línea se mueven solo con transform (medido 2026-10-14: con clip-path y left, el barrido daba 9 trabados en el
   scroll de escritorio). El envoltorio se corre a la izquierda (100 % − pos) y la foto adentro se corre lo mismo a la derecha:
   la foto queda fija y solo se ve [0, pos]. La línea mide 100 % y se traslada pos % de sí misma = pos % del comparador. */
.comparador__corte { position: absolute; inset: 0; overflow: hidden; transform: translateX(calc(var(--pos) - 100%)); }
.comparador__corte img { transform: translateX(calc(100% - var(--pos))); }
.comparador__linea { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 2; transform: translateX(var(--pos)); pointer-events: none; }
/* Capas propias solo mientras barre: promovidas siempre, cuatro fotos grandes pesan en el scroll aunque estén quietas. */
.comparador--barriendo .comparador__corte, .comparador--barriendo .comparador__corte img, .comparador--barriendo .comparador__linea { will-change: transform; }
.comparador__linea::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: var(--blanco); box-shadow: 0 0 0 1px rgba(31, 28, 24, .2), 0 0 14px rgba(184, 149, 79, .45); transition: background-color .4s, box-shadow .4s; }
.comparador__linea i { position: absolute; top: 50%; left: 0; width: 2.9rem; height: 2.9rem; translate: -50% -50%; border-radius: 50%; border: 1.5px solid var(--dorado); background: var(--blanco); box-shadow: 0 6px 22px rgba(31, 28, 24, .35); transition: box-shadow .4s; }
/* Marcador sobre el mapa (2026-10-13): el pin de Google queda en el centro del embed; ver MOTION.md "Marcador sobre el mapa". */
.mapa__lienzo { position: absolute; inset: 0; }
.contacto__mapa .mapa__lienzo iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.mapa__cubierta { position: absolute; inset: 0; z-index: 1; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; transition: opacity .5s var(--curva); }
.mapa__cubierta:focus-visible { outline: 2px solid var(--dorado); outline-offset: -4px; }
html:not(.js) .mapa__cubierta, .mapa--activo .mapa__cubierta { pointer-events: none; }
.mapa--activo .mapa__cubierta { opacity: 0; }
.mapa__marcador { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 3.3rem; height: 3.3rem; translate: -50% calc(-100% - .45rem); border-radius: 50%; border: 2px solid var(--dorado); background: var(--grafito); box-shadow: 0 16px 30px -10px rgba(31, 28, 24, .6); }
.mapa__marcador svg { width: 1.7rem; height: 1.7rem; fill: none; stroke: var(--dorado-claro); stroke-width: 2.2; stroke-linecap: round; }
.mapa__marcador::after { content: ""; position: absolute; left: 50%; bottom: -.5rem; z-index: -1; width: .95rem; height: .95rem; translate: -50% 0; rotate: 45deg; background: var(--grafito); border-right: 2px solid var(--dorado); border-bottom: 2px solid var(--dorado); }
.mapa__marcador::before { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--dorado); opacity: 0; will-change: transform, opacity; }
html[data-en-contacto] .mapa__marcador::before { animation: mapa-latir 2.6s ease-out infinite; }
@keyframes mapa-latir { 0% { transform: scale(1); opacity: .85; } 70%, 100% { transform: scale(2.4); opacity: 0; } }
.mapa__aqui { position: absolute; left: 50%; top: 50%; translate: -50% .75rem; padding: .45rem .7rem; background: var(--grafito); color: var(--marfil); font: 600 .625rem/1 var(--etiqueta); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 10px 24px -12px rgba(31, 28, 24, .6); }
@media (prefers-reduced-motion: reduce) { .mapa__marcador::before { animation: none !important; } }
.sin-mapa-latido .mapa__marcador::before { animation: none !important; } /* diagnóstico ?sin=mapa */
.comparador--barriendo .comparador__linea::before { background: var(--dorado-claro); box-shadow: 0 0 0 1px rgba(31, 28, 24, .15), 0 0 26px 3px rgba(212, 185, 127, .8); }
.comparador--barriendo .comparador__linea i { box-shadow: 0 6px 22px rgba(31, 28, 24, .35), 0 0 0 6px rgba(212, 185, 127, .28); }
.comparador__linea i::before, .comparador__linea i::after { content: ""; position: absolute; top: 50%; width: .5rem; height: .5rem; border: solid var(--grafito); border-width: 0 0 2px 2px; }
.comparador__linea i::before { left: .8rem; translate: 0 -50%; rotate: 45deg; }
.comparador__linea i::after { right: .8rem; translate: 0 -50%; rotate: -135deg; }
.comparador__etiqueta { position: absolute; bottom: .9rem; z-index: 2; padding: .45rem .75rem; font: 600 .6875rem/1 var(--etiqueta); letter-spacing: .16em; text-transform: uppercase; color: var(--blanco); background: rgba(31, 28, 24, .66); pointer-events: none; transition: opacity .3s var(--curva); }
.comparador__etiqueta--antes { left: .9rem; }
.comparador__etiqueta--despues { right: .9rem; }
.comparador--sin-antes .comparador__etiqueta--antes, .comparador--sin-despues .comparador__etiqueta--despues { opacity: 0; }
.comparador__rango { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.comparador:has(.comparador__rango:focus-visible) { outline: 2px solid var(--dorado); outline-offset: 4px; }
.caso figcaption { display: flex; align-items: baseline; gap: 1rem; margin-top: 1.1rem; font: 400 .95rem/1.5 var(--sans); color: var(--texto-2); }
.caso__n { font: italic 500 1.6rem/1 var(--display); color: var(--dorado-hondo); }
.casos__cierre { display: grid; justify-items: center; gap: 1.6rem; margin-top: clamp(3.5rem, 7vw, 5.5rem); text-align: center; }
.casos__cierre p { max-width: 34rem; font-size: clamp(1.05rem, 1.4vw, 1.18rem); line-height: 1.6; color: var(--texto-2); }

/* ───── Reconocimiento Invisalign (2026-10-13) ─────
   Las tres fotos de la doctora con su placa (Future Smiles 2025). La del medio baja; en teléfono van en un carrusel
   con snap, como las tarjetas de tratamientos. Sin grado: el fondo azul es la pantalla del evento. */
.reconocimiento__cabeza { display: grid; justify-items: center; gap: 1.25rem; max-width: 40rem; margin: 0 auto clamp(3.5rem, 6.5vw, 5.5rem); text-align: center; }
.reconocimiento__insignia { width: clamp(5.5rem, 9vw, 7rem); height: auto; }
.reconocimiento__cabeza h2 { font-size: var(--h2); line-height: 1.02; }
.reconocimiento__cabeza p { font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.6; color: var(--texto-2); }
.reconocimiento__fotos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2rem); align-items: start; max-width: 62rem; margin-inline: auto; }
.reco { position: relative; margin: 0; overflow: hidden; aspect-ratio: 3 / 4; background: var(--noche-2); box-shadow: 0 40px 70px -50px rgba(31, 28, 24, .55); }
.reco img { display: block; width: 100%; height: 100%; object-fit: cover; }
.reco--central { margin-top: clamp(1.5rem, 5vw, 4rem); }
.reco figcaption { position: absolute; inset: auto 0 0; padding: 1.6rem 1rem .9rem; font: 600 .6875rem/1 var(--etiqueta); letter-spacing: .18em; text-transform: uppercase; color: var(--blanco); background: linear-gradient(180deg, rgba(31, 28, 24, 0) 0%, rgba(31, 28, 24, .6) 100%); }

/* ───── Tratamientos: Invisalign al centro, lo demás en una línea (2026-10-13) ─────
   Pedido del grupo (Diana): la web se ve enfocada en Invisalign, no como clínica integral. Una sola tarjeta ancha y
   los otros tratamientos como enlaces de texto, sin foto ni tarjeta. */
.t-grandes--uno { grid-template-columns: minmax(0, 1fr); max-width: 64rem; margin-inline: auto; }
.t-grandes--uno .t-grande { aspect-ratio: 16 / 9; }
.otros { display: grid; justify-items: center; gap: 1.1rem; margin-top: clamp(3rem, 6vw, 4.5rem); text-align: center; }
.otros__titulo { font: 600 .75rem/1.2 var(--etiqueta); letter-spacing: .18em; text-transform: uppercase; color: var(--texto-2); }
.otros__lista { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1.75rem; }
.otros__lista a { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem 0; font: 500 1.35rem/1.2 var(--display); color: var(--tinta); text-decoration: none; border-bottom: 1px solid var(--linea); transition: border-color .5s var(--curva), color .5s var(--curva); }
.otros__lista a .icono { width: .8rem; height: .8rem; color: var(--dorado-hondo); transition: translate .5s var(--curva); }
@media (hover: hover) and (pointer: fine) { .otros__lista a:hover { border-color: var(--dorado); color: var(--dorado-hondo); } .otros__lista a:hover .icono { translate: 3px 0; } }
.tratamientos .urgencia { margin: clamp(3rem, 6vw, 4.5rem) 0 0; }
@media (max-width: 899.98px) {
  .t-grandes--uno { margin-inline: 0; overflow: visible; padding: 0; grid-auto-flow: row; grid-auto-columns: auto; }
  .t-grandes--uno .t-grande { aspect-ratio: 4 / 5; }
  .reconocimiento__fotos { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 74%; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--lado) * -1); padding: .5rem var(--lado) 1.5rem; scroll-padding-inline: var(--lado); scrollbar-width: none; }
  .reconocimiento__fotos::-webkit-scrollbar { display: none; }
  .reco { scroll-snap-align: start; }
  .reco--central { margin-top: 0; }
}
.reconocimiento__cabeza .reconocimiento__cierre { font: italic 500 clamp(1.3rem, 1.9vw, 1.55rem)/1.35 var(--display); color: var(--tinta); }
.reconocimiento__cabeza .boton { margin-top: .5rem; }

/* Botón de la tarjeta de Invisalign (2026-10-13, pedido de Axel: "un botón más visible de conoce más de Invisalign").
   La tarjeta entera es un enlace, así que el botón es un <span> con la forma de .boton: dorado sólido sobre el degradado
   oscuro de la foto, y al pasar sobre la tarjeta se aclara y la flecha avanza. */
.t__boton { justify-self: start; margin-top: .5rem; gap: .7rem; background: var(--dorado); color: var(--grafito); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .55); transition: background .4s var(--curva); }
.t__boton .icono { transition: translate .4s var(--curva); }
.t-grande:hover .t__boton, .t-grande:focus-visible .t__boton { background: var(--dorado-claro); }
.t-grande:hover .t__boton .icono, .t-grande:focus-visible .t__boton .icono { translate: 4px 0; }