/* Smile & Align: páginas de servicio y tarjetas de servicios de la home.
   Se carga después de site.css y usa sus tokens (marfil, arena, grafito, dorado; los alias viejos noche,
   tostado y rubor apuntan a esos). Estructura de la página: investigacion-seo/estrategia/ESTRATEGIA_SITIO.md.

   Rediseño 2026-10-10 (pedido de Axel: "que parezca caro"): Cormorant Garamond en títulos e Instrument Sans en
   texto; secciones con aire propio que se funden entre marfil y arena; íconos de trazo del tratamiento en vez
   de cuadraditos; tarjetas con superficie; pasos unidos por un hilo dorado. El movimiento vive en
   assets/js/paginas.js y en MOTION.md (sección 5). Todo lo que sigue es el estado final: sin JS, con
   reduced-motion o sin GSAP la página se ve completa y quieta. */

.pagina { --seccion-s: clamp(5.5rem, 10vw, 9rem); }

/* ───── Páginas interiores: la cabecera (site.css) va sólida y en flujo ───── */
.pagina .cabecera { position: sticky; top: 0; background: var(--marfil); }

/* ───── Placeholder visible (regla de la agencia: nunca stock haciéndose pasar por final) ───── */
.placeholder { display: grid; place-items: center; align-content: center; gap: .5rem; min-height: 12rem; padding: 1.5rem; border: 2px dashed #b9a987; background: repeating-linear-gradient(135deg, #efe8db 0 12px, #f6f2ea 12px 24px); color: var(--texto-2); text-align: center; font: 600 .75rem/1.5 var(--etiqueta); letter-spacing: .1em; text-transform: uppercase; }
.placeholder strong { color: var(--tinta); font-size: .8rem; }
.sobre-noche .placeholder { border-color: rgba(207, 197, 180, .5); background: repeating-linear-gradient(135deg, #2a2621 0 12px, #24201b 12px 24px); color: var(--sobre-noche-2); }
.sobre-noche .placeholder strong { color: var(--sobre-noche); }
/* Dato pendiente de la doctora: más chico y en un amarillo más suave, pero sigue saltando a la vista. */
.dato-pendiente { display: inline-block; padding: .08em .45em; background: #f8e7a8; color: #4d3a00 !important; font: 600 max(.78em, .75rem)/1.5 var(--sans); letter-spacing: .01em; vertical-align: .06em; }
.sobre-noche .dato-pendiente { background: #5a4a1a; color: #fff2c9 !important; }

/* ───── Hero de servicio: texto a la izquierda, foto a la derecha, en campo grafito ───── */
.s-hero { position: relative; isolation: isolate; background: var(--noche); color: var(--sobre-noche); }
.s-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url("../img/grano.png") repeat; background-size: 128px 128px; }
.s-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; padding-block: clamp(3rem, 6vw, 5.5rem); }
.migas { margin-bottom: clamp(1.75rem, 3.4vw, 2.75rem); font: 500 .72rem/1.4 var(--etiqueta); letter-spacing: .16em; text-transform: uppercase; color: var(--sobre-noche-2); }
.migas ol { display: flex; flex-wrap: wrap; gap: .35rem .75rem; }
.migas li + li::before { content: ""; display: inline-block; width: .9rem; height: 1px; margin-right: .75rem; vertical-align: .3em; background: rgba(212, 185, 127, .55); }
.migas a { text-decoration: none; }
.migas a:hover { color: var(--blanco); text-decoration: underline; }
.migas [aria-current] { color: var(--dorado-claro); }
.s-hero h1 { font-size: clamp(3.2rem, 6.6vw, 5.9rem); font-weight: 500; letter-spacing: -.012em; line-height: .96; color: var(--blanco); }
.s-hero h1 em { display: block; color: var(--dorado-claro); padding-bottom: .06em; }
.s-hero__bajada { max-width: 31rem; margin-top: clamp(1.5rem, 2.6vw, 2rem); font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.6; color: var(--sobre-noche-2); }
.s-hero__acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: clamp(2rem, 3.4vw, 2.75rem); }
.confianza { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--noche-linea); max-width: 34rem; font: 500 .82rem/1.5 var(--sans); letter-spacing: .01em; color: var(--sobre-noche-2); }
.confianza .icono { width: .9rem; height: .9rem; color: var(--dorado-claro); }
.confianza span { display: inline-flex; align-items: center; gap: .4rem; }
/* Foto con un filete dorado desplazado: el mismo gesto que el retrato de la doctora en la home. */
.s-hero__foto { position: relative; aspect-ratio: 4 / 5; }
.s-hero__foto::before { content: ""; position: absolute; inset: 1.25rem -1.25rem -1.25rem 1.25rem; border: 1px solid rgba(212, 185, 127, .45); pointer-events: none; }
.s-hero__foto > img, .s-hero__foto > .placeholder { position: relative; width: 100%; height: 100%; object-fit: cover; background: var(--noche-2); }

/* ───── Respuesta directa: el párrafo que leen Google y las IAs, y el paciente con prisa ───── */
.respuesta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 19rem); gap: clamp(2rem, 6vw, 6rem); align-items: end; padding-block: clamp(4rem, 8vw, 6.5rem) clamp(1rem, 2vw, 1.5rem); }
.respuesta p { max-width: 44rem; font: 400 clamp(1.15rem, .6rem + 1.9vw, 1.95rem)/1.42 var(--display); letter-spacing: -.003em; color: var(--tinta); }
.respuesta p::before { content: ""; display: block; width: 3.5rem; height: 1px; margin-bottom: 1.75rem; background: var(--dorado); }
.firma { display: grid; gap: .3rem; padding-top: 1.1rem; border-top: 1px solid var(--linea); font-size: .9rem; line-height: 1.5; color: var(--texto-2); }
.firma b { margin-bottom: .2rem; font: 600 .72rem/1.4 var(--etiqueta); letter-spacing: .16em; text-transform: uppercase; color: var(--dorado-hondo); }
.firma span:first-of-type { font: 500 1.3rem/1.2 var(--display); color: var(--tinta); }

/* ───── Secciones: aire propio y fundido entre marfil y arena ─────
   Cada sección mide su propio aire (antes una regla de hermanos dejaba en 0 el de las secciones claras y el
   título quedaba pegado al corte). El cambio de color no es una línea: la sección nace del color de la
   anterior con un degradado fijo (sin JS también) y, con movimiento, una capa del color anterior se apaga con
   el scroll (.fundido, paginas.js; como en Escena Global). */
.s-bloque { position: relative; isolation: isolate; padding-block: var(--seccion-s); background: var(--marfil); }
.s-bloque--blanco { background: var(--arena); --degradado-desde: var(--marfil); --fundido-desde: var(--marfil); }
.s-bloque--blanco + .s-bloque:not(.s-bloque--blanco) { --degradado-desde: var(--arena); --fundido-desde: var(--arena); }
.s-bloque::before { content: ""; position: absolute; inset: 0 0 auto; z-index: -1; height: clamp(7rem, 20vh, 12rem); background: linear-gradient(180deg, var(--degradado-desde, transparent) 0%, transparent 100%); pointer-events: none; }
/* Hacia el grafito del cierre no hay fundido: una capa marfil a medio apagar volvía el grafito gris pardo y bajaba
   el contraste del texto claro. Ese corte es contraste buscado (campo oscuro), no una línea entre dos claros. */
/* will-change: opacity: la capa es un color liso, así que su capa compuesta no pesa; sin ella, cada cuadro del scrub
   repintaba y rasterizaba en la GPU una pantalla entera (MOTION.md 6f). Con autoAlpha queda oculta al terminar. */
.fundido { position: absolute; inset: 0 0 auto; z-index: -1; height: min(100%, 100svh); background: var(--fundido-desde); pointer-events: none; will-change: opacity; }
html[data-motion="estatico"] .fundido { display: none; }

/* Mismo eje que el resto: la columna angosta arranca en el borde del contenedor, no centrada. */
.s-angosto > :not(.arcos) { max-width: 52rem; }
.s-bloque h2 { max-width: 20ch; font-size: var(--h2); line-height: 1.02; margin-bottom: clamp(1.5rem, 2.6vw, 2.25rem); }
.s-angosto h2 { max-width: none; }
.s-h2-sigue { margin-top: clamp(3.5rem, 6vw, 5rem); }
.s-bloque p + p { margin-top: 1.1rem; }
.s-bloque p { color: var(--texto-2); max-width: 44rem; }
.s-bloque p a { color: var(--tinta); text-decoration-color: var(--dorado); }
.s-lead { margin-bottom: clamp(1.75rem, 3vw, 2.5rem); font-size: clamp(1.1rem, 1.4vw, 1.22rem); line-height: 1.6; max-width: 40rem; }
.s-nota { margin-top: clamp(2rem, 3.5vw, 2.75rem) !important; padding-top: 1.25rem; border-top: 1px solid rgba(138, 106, 46, .25); }
.s-sub { margin-bottom: 1rem; font-size: clamp(1.8rem, 2.6vw, 2.3rem); }
/* Título que entra por máscara (paginas.js envuelve el texto en .t-cortina > span). */
.t-cortina { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.t-cortina > span { display: block; }

/* ───── Listas de señales ───── */
.senales { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(2rem, 5vw, 4rem); }
.senales li { position: relative; display: flex; gap: 1rem; padding-block: 1.15rem; color: var(--tinta); }
.senales li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--linea); transform: scaleX(var(--regla, 1)); transform-origin: 0 50%; }
/* Sin ícono: un trazo dorado corto en vez del cuadradito. */
.senales:not(.senales--iconos) li::before { content: ""; flex: none; width: .9rem; height: 1px; margin-top: .85em; background: var(--dorado); }
.senales--una { grid-template-columns: 1fr; }
.senales strong { font-weight: 600; }

/* "¿Qué corrige?": cada señal lleva el dibujo del tratamiento en dorado, en vez de un cuadradito. */
.senales--iconos { gap: 0 clamp(2.5rem, 5vw, 4.5rem); }
.senales--iconos li { align-items: center; gap: 1.25rem; padding-block: 1.35rem; font-size: clamp(1.05rem, 1.3vw, 1.15rem); line-height: 1.45; }
.trazo { flex: none; fill: none; stroke: var(--dorado-hondo); stroke-width: 1.05; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.trazo * { stroke-dasharray: 1 1; stroke-dashoffset: var(--trazo, 0); }
.senal__icono { width: 4rem; height: 4rem; margin-block: -.6rem; }
.aviso { position: relative; margin-top: clamp(2rem, 3.5vw, 2.75rem); padding: 1.2rem 1.4rem 1.2rem 1.6rem; background: rgba(255, 253, 249, .7); border: 1px solid var(--linea); color: var(--tinta) !important; }
.aviso::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 1px; background: var(--dorado); }

/* Fondo de la sección de la lista: arcos dorados finísimos (paginas.js los alinea con el scroll) y una luz
   cálida que respira despacio. Las dos capas son de compositor: el arco se redibuja solo mientras se mueve. */
.arcos { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; opacity: .75; }
.arcos path { fill: none; stroke: var(--dorado); stroke-width: 1; vector-effect: non-scaling-stroke; }
.arcos path:nth-child(1) { opacity: .55; }
.arcos path:nth-child(2) { opacity: .4; }
.arcos path:nth-child(3) { opacity: .3; }
.arcos path:nth-child(4) { opacity: .2; }
.s-bloque:has(> .contenedor > .arcos) { overflow: clip; }
.s-bloque:has(> .contenedor > .arcos)::after { content: ""; position: absolute; z-index: -1; width: 70vmax; height: 70vmax; right: -22vmax; top: -18vmax; border-radius: 50%; background: radial-gradient(closest-side, rgba(212, 185, 127, .2), rgba(212, 185, 127, 0)); pointer-events: none; animation: luz-que-respira 18s ease-in-out infinite alternate; }
@keyframes luz-que-respira { from { transform: translate3d(0, 0, 0) scale(1); opacity: .7; } to { transform: translate3d(-14vmax, 10vmax, 0) scale(1.12); opacity: 1; } }
html[data-motion="estatico"] .s-bloque::after { animation: none; }
@media (prefers-reduced-motion: reduce) { .s-bloque::after { animation: none !important; } }

/* ───── Tarjetas (tipos de brackets, por qué aquí, opciones de implantes) ───── */
.razones { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr)); gap: clamp(1rem, 1.8vw, 1.5rem); margin-top: clamp(.5rem, 1vw, 1rem); }
.razones > div { position: relative; display: grid; align-content: start; gap: .85rem; padding: clamp(1.75rem, 2.8vw, 2.5rem) clamp(1.5rem, 2.4vw, 2.25rem) clamp(2rem, 3vw, 2.75rem); background: var(--blanco); box-shadow: 0 1px 0 rgba(138, 106, 46, .14), 0 30px 60px -42px rgba(31, 28, 24, .35); transition: translate .7s var(--curva), box-shadow .7s var(--curva); }
.s-bloque:not(.s-bloque--blanco) .razones > div { background: #fbf8f2; }
/* Filete dorado que crece desde la izquierda al pasar el cursor (y al entrar, una vez). */
.razones > div::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--dorado); transform: scaleX(var(--filete, 0)); transform-origin: 0 50%; transition: transform .9s var(--curva); }
.razones h3 { font-size: clamp(1.75rem, 2.3vw, 2.15rem); line-height: 1.04; color: var(--tinta); }
.razones p { font-size: 1rem; line-height: 1.6; }
.razon__icono { width: 4.75rem; height: 4.75rem; margin: -.6rem 0 .6rem -.55rem; transition: transform .9s var(--curva); }
@media (hover: hover) and (pointer: fine) {
  .razones > div:hover { translate: 0 -6px; box-shadow: 0 1px 0 rgba(138, 106, 46, .2), 0 44px 70px -40px rgba(31, 28, 24, .42); }
  .razones > div:hover::after { transform: scaleX(1); }
  .razones > div:hover .razon__icono { transform: translateY(-3px) scale(1.04); }
}

/* ───── Pasos: un hilo dorado los une y cada número sube por máscara ─────
   El número y el hilo los pone la plantilla (aria-hidden: la lista ordenada ya numera). */
.pasos-s { --cols: 3; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: clamp(2.5rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.75rem); margin-top: clamp(1rem, 2vw, 1.75rem); }
/* Cinco pasos: tres arriba y dos más anchos abajo, sin celda vacía. */
.pasos-s:has(> li:nth-child(5)):not(:has(> li:nth-child(6))) { --cols: 6; }
.pasos-s:has(> li:nth-child(5)):not(:has(> li:nth-child(6))) > li { grid-column: span 2; }
.pasos-s:has(> li:nth-child(5)):not(:has(> li:nth-child(6))) > li:nth-child(n+4) { grid-column: span 3; }
.pasos-s > li { position: relative; display: grid; align-content: start; gap: .7rem; padding-top: 1.6rem; }
.paso-hilo { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--dorado); transform-origin: 0 50%; }
.paso-hilo::before { content: ""; position: absolute; left: 0; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--marfil); border: 1px solid var(--dorado); transition: background-color .5s var(--curva); }
.s-bloque--blanco .paso-hilo::before { background: var(--arena); }
.paso-n { display: block; overflow: hidden; padding-bottom: .06em; font: italic 400 clamp(3rem, 4.6vw, 4.1rem)/.95 var(--display); color: var(--dorado-hondo); font-feature-settings: "lnum"; }
/* El hover usa translate (no transform): transform lo maneja el scrub de GSAP y una transición CSS lo arrastraría. */
.paso-n > span { display: inline-block; transition: translate .8s var(--curva); }
.pasos-s strong { font: 500 clamp(1.45rem, 1.9vw, 1.7rem)/1.12 var(--display); color: var(--tinta); }
.pasos-s li > span:last-child { max-width: 24rem; color: var(--texto-2); font-size: .98rem; line-height: 1.6; }
@media (hover: hover) and (pointer: fine) {
  .pasos-s > li:hover .paso-n > span { translate: .18em 0; }
  .pasos-s > li:hover .paso-hilo::before { background: var(--dorado); }
}

/* Dos columnas: texto + figura */
.s-dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.s-dos--comparar { align-items: start; gap: clamp(2rem, 5vw, 5rem); }
.s-dos figure { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--noche-2); }
.s-dos figure:has(> img[height="1066"]) { aspect-ratio: 4 / 4.6; }
.s-dos figure img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 40%; }
.s-dos figure .placeholder { height: 100%; }
.s-dos figcaption { margin-top: .75rem; font-size: .85rem; color: var(--texto-2); }
.s-dos figure:has(figcaption) { overflow: visible; aspect-ratio: auto; background: none; }
.s-dos figure:has(figcaption) img { aspect-ratio: 4 / 4.6; }

/* Quién te atiende */
.especialista { display: grid; grid-template-columns: minmax(13rem, 21rem) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; margin-top: clamp(.5rem, 1vw, 1rem); }
.especialista__foto { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--noche-2); }
.especialista__foto img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 35%; }
.especialista__foto .placeholder { height: 100%; min-height: 0; }
.especialista h3 { font-size: clamp(2rem, 3vw, 2.6rem); color: var(--tinta); }
.especialista > div > h2 { margin-bottom: 0; }
.especialista__cargo { margin-top: .6rem; margin-bottom: 1.25rem; font-size: 1rem; color: var(--dorado-hondo) !important; }
.credenciales { display: grid; gap: 0; margin-block: 1.5rem; border-top: 1px solid var(--linea); }
.credenciales li { display: grid; grid-template-columns: 10.5rem 1fr; gap: 1.25rem; padding-block: .9rem; border-bottom: 1px solid var(--linea); font-size: .96rem; }
.credenciales li > span:first-child { font: 600 .72rem/1.8 var(--etiqueta); letter-spacing: .14em; text-transform: uppercase; color: var(--dorado-hondo); }
.especialista blockquote p { font: italic 400 1.35rem/1.45 var(--display); color: var(--tinta); }

/* Reseña de Google */
.resenas-s { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: clamp(1rem, 1.8vw, 1.5rem); margin-top: .5rem; }
.resena-s { display: grid; gap: 1.1rem; align-content: start; padding: clamp(1.6rem, 2.6vw, 2.25rem); background: var(--blanco); box-shadow: 0 1px 0 rgba(138, 106, 46, .14), 0 30px 60px -44px rgba(31, 28, 24, .3); }
.s-bloque:not(.s-bloque--blanco) .resena-s { background: #fbf8f2; }
.resena-s p { font: italic 400 clamp(1.3rem, 1.7vw, 1.45rem)/1.4 var(--display); font-feature-settings: "lnum"; color: var(--tinta); max-width: none; }
.resena-s footer { font-size: .84rem; line-height: 1.6; color: var(--texto-2); }
.resena-s footer svg { display: inline-block; width: .95rem; height: .95rem; margin-right: .45rem; vertical-align: -.16em; }
.resena-s footer a { color: var(--tinta); }
.estrellas-s { display: flex; gap: .2rem; color: var(--dorado); }
.estrellas-s svg { width: .9rem; height: .9rem; fill: currentColor; }
/* Enlace con flecha: frase normal subrayada en dorado, no mayúsculas (se lee como texto, no como botón). */
.enlace-flecha { display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.5rem; padding-bottom: .3rem; font: 500 .98rem/1.3 var(--sans); text-decoration: none; color: var(--tinta); background: linear-gradient(var(--dorado), var(--dorado)) 0 100% / 100% 1px no-repeat; transition: background-size .6s var(--curva); }
.enlace-flecha .icono { width: 1rem; height: 1rem; transition: transform .45s var(--curva); }
.enlace-flecha:hover { background-size: 30% 1px; }
.enlace-flecha:hover .icono { transform: translateX(4px); }

/* Preguntas frecuentes en <details>: funcionan sin JS y Google las lee */
.faq { margin-top: .5rem; border-top: 1px solid var(--linea); }
.faq details { border-bottom: 1px solid var(--linea); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 2rem; padding-block: 1.4rem; cursor: pointer; list-style: none; font: 500 clamp(1.35rem, 1.9vw, 1.6rem)/1.2 var(--display); color: var(--tinta); transition: color .35s var(--curva); }
.faq summary:hover { color: var(--dorado-hondo); }
.faq summary::-webkit-details-marker { display: none; }
/* Más que se vuelve menos: dos trazos finos. */
.faq summary::after { content: ""; flex: none; width: 1rem; height: 1rem; background: linear-gradient(var(--dorado-hondo), var(--dorado-hondo)) center / 100% 1px no-repeat, linear-gradient(var(--dorado-hondo), var(--dorado-hondo)) center / 1px 100% no-repeat; transition: transform .5s var(--curva); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding-bottom: 1.6rem; max-width: 44rem; }
.faq details > div p { color: var(--texto-2); }
.faq details > div a { color: var(--tinta); }

/* CTA final en campo grafito */
.s-cta { position: relative; isolation: isolate; background: var(--noche); color: var(--sobre-noche); text-align: center; padding-block: clamp(5.5rem, 11vw, 9rem); }
.s-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url("../img/grano.png") repeat; background-size: 128px 128px; }
.s-cta .fundido { z-index: 0; }
.s-cta > .contenedor { position: relative; z-index: 1; }
.s-cta h2 { max-width: 16ch; margin-inline: auto; font-size: clamp(2.6rem, 5.6vw, 4.8rem); line-height: 1; color: var(--blanco); }
.s-cta p { max-width: 32rem; margin: 1.4rem auto 0; color: var(--sobre-noche-2); font-size: 1.1rem; }
.s-cta__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 2.5rem; }
.s-cta__dir { margin-top: 2rem !important; font-size: .92rem !important; }
.s-cta__dir a { color: var(--sobre-noche); text-decoration-color: var(--dorado); }

/* Puente a otros servicios */
.puente { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 0; margin-top: .5rem; border-top: 1px solid var(--linea); }
.puente a { position: relative; display: grid; gap: .6rem; padding: clamp(1.5rem, 2.6vw, 2.25rem) clamp(1.25rem, 2.4vw, 2rem) clamp(1.5rem, 2.6vw, 2.25rem) 0; border-bottom: 1px solid var(--linea); text-decoration: none; }
.puente a + a { padding-left: clamp(1.25rem, 2.4vw, 2rem); border-left: 1px solid var(--linea); }
.puente a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--dorado); transform: scaleX(0); transform-origin: 0 50%; transition: transform .8s var(--curva); }
.puente a:hover::after { transform: scaleX(1); }
.puente small { font: 600 .72rem/1.4 var(--etiqueta); letter-spacing: .16em; text-transform: uppercase; color: var(--texto-2); }
.puente strong { display: flex; justify-content: space-between; align-items: center; gap: 1rem; font: 500 clamp(1.6rem, 2.2vw, 1.95rem)/1.1 var(--display); color: var(--tinta); }
.puente .icono { width: 1.1rem; height: 1.1rem; color: var(--dorado-hondo); transition: transform .45s var(--curva); }
.puente a:hover .icono { transform: translateX(5px); }

/* Pie: dirección completa */
.pie__dir { margin-top: 1rem; font-size: .9rem; line-height: 1.55; }

/* Capas listas solo con movimiento: las fotos que asientan con el scroll. */
.pagina.mw-activo .s-dos figure:not(:has(figcaption)) img, .pagina.mw-activo .especialista__foto img { will-change: transform; }

/* Un tramo en itálica dorada por título, como en la home (pulido final). */
.pagina main h2 em { font-style: italic; font-weight: 400; color: var(--dorado-hondo); }
.pagina main .sobre-noche h2 em { color: var(--dorado-claro); }

@media (max-width: 899.98px) {
  .s-bloque h2 { font-size: var(--h2-movil); }
  .s-hero__grid, .s-dos, .especialista { grid-template-columns: 1fr; }
  .s-hero__grid { padding-bottom: 0; }
  .s-hero__foto { aspect-ratio: 16 / 11; margin-inline: calc(var(--lado) * -1); }
  .s-hero__foto::before { display: none; }
  .respuesta { grid-template-columns: 1fr; align-items: start; padding-top: clamp(3.25rem, 10vw, 4.5rem); }
  .senales, .senales--iconos { grid-template-columns: 1fr; }
  .senal__icono { width: 3rem; height: 3rem; }
  .arcos { opacity: .45; }
  .credenciales li { grid-template-columns: 1fr; gap: .2rem; }
  .especialista__foto { max-width: 18rem; }
  /* Pasos en teléfono: una línea de tiempo vertical; el hilo baja por la izquierda. */
  .pasos-s, .pasos-s:has(> li:nth-child(5)):not(:has(> li:nth-child(6))) { --cols: 1; gap: 0; }
  .pasos-s > li, .pasos-s:has(> li:nth-child(5)):not(:has(> li:nth-child(6))) > li { grid-column: auto !important; grid-template-columns: 3.4rem minmax(0, 1fr); column-gap: 1rem; row-gap: .45rem; padding: 0 0 2.4rem; }
  .pasos-s > li:last-child { padding-bottom: 0; }
  .paso-hilo { left: .45rem; right: auto; top: .55rem; bottom: 0; width: 1px; height: auto; transform-origin: 50% 0; }
  .pasos-s > li:last-child .paso-hilo { bottom: auto; height: 0; }
  .paso-hilo::before { left: -3px; top: -3px; }
  .paso-n { grid-column: 1; grid-row: 1 / span 2; padding-left: 1.25rem; font-size: 2.1rem; }
  .pasos-s > li > strong, .pasos-s > li > span:last-child { grid-column: 2; }
  .puente a, .puente a + a { padding-left: 0; border-left: 0; }
}
@media (min-width: 900px) and (max-width: 1100px) {
  .pasos-s { gap: 2.5rem 1.5rem; }
}

/* ═════════════ Tarjetas de servicios de la home ═════════════
   Movimiento "la fila se alinea" (MOTION.md, sección 1c; números en <script id="datos-tarjetas">).
   Sin JS, con reduced-motion o sin GSAP todo queda derecho, a color y quieto: el JS pone los estados
   iniciales, el CSS solo describe el estado final. Las fotos van a color siempre (sin duotono). */
.servicios { padding-block: var(--seccion); overflow-x: clip; }
/* Título por máscara: tarjetas en servicios.js envuelve el texto en un span que sube desde abajo. */
.t-mascara { overflow: hidden; padding-bottom: .08em; }
.t-mascara > span { display: block; }
/* Franja de urgencia: no es tarjeta; el que tiene dolor no navega. Sin animación. */
.urgencia { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); padding: 1.1rem clamp(1.1rem, 2.5vw, 1.75rem); background: var(--blanco); border: 1px solid var(--linea); }
.urgencia p { font-size: clamp(1.1rem, 1.8vw, 1.35rem); color: var(--grafito); }
.urgencia p span { color: var(--texto-2); font-size: .95em; }
.servicios__grupo + .servicios__grupo { margin-top: clamp(3rem, 6vw, 5rem); }
.servicios__grupo-titulo { margin-bottom: 1.5rem; padding-bottom: .9rem; border-bottom: 1px solid var(--linea); font: 600 .75rem/1.2 var(--etiqueta); letter-spacing: .18em; text-transform: uppercase; color: var(--texto-2); }
/* Grupo A: la regla es un alambre dorado; llega ondulado y se endereza con la fila (el JS reescribe el d). */
.servicios__grupo-titulo--alambre { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.t__alambre { display: block; width: 100%; height: 1.5rem; margin: 0 0 1.25rem; overflow: visible; }
.t__alambre path { fill: none; stroke: var(--dorado); stroke-width: 1.25; vector-effect: non-scaling-stroke; }

/* Grupo A: Invisalign más ancha (es la que vende); las otras dos 4:5 marcan el alto de la fila. */
.t-grandes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); }
.t-grande { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--arena); color: var(--marfil); text-decoration: none; isolation: isolate; transform-origin: 50% 100%; }
.t__foto { position: absolute; inset: 0; overflow: hidden; }
.t__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 60%; }
/* Placeholder: arriba, dejando libre la zona del texto. */
.t__foto .placeholder { position: absolute; inset: 0 0 46% 0; min-height: 0; }
.t-grande:has(.t__foto > .placeholder) { background: var(--noche-2); }
.t-grande__texto { position: absolute; inset: auto 0 0; z-index: 3; display: grid; gap: .6rem; padding: clamp(1.25rem, 2.6vw, 2rem); background: linear-gradient(180deg, rgba(31, 28, 24, 0) 0%, rgba(31, 28, 24, .82) 58%); }
.t-grande h3 { font-size: clamp(1.6rem, 2.6vw, 2.15rem); font-weight: 400; letter-spacing: -.02em; line-height: 1.05; }
.t-grande p { color: var(--sobre-noche); font-size: .98rem; line-height: 1.5; }
.t__promesa { position: relative; display: inline-flex; align-items: center; gap: .6rem; justify-self: start; margin-top: .35rem; padding-bottom: .45rem; font: 600 .7rem/1 var(--etiqueta); letter-spacing: .16em; text-transform: uppercase; }
.t__promesa .icono { width: 1rem; height: 1rem; transition: transform .45s var(--curva); }
.t-grande:hover .t__promesa .icono, .t-chica:hover .t__promesa .icono { transform: translateX(4px); }
.t-grande:focus-visible { outline-offset: 4px; }

/* Invisalign: el alineador sobre arena con luz de mañana, texto grafito, sin velo. */
.t-grande--alineador { aspect-ratio: auto; background: radial-gradient(120% 80% at 50% 28%, var(--blanco) 0%, var(--arena) 55%, #e2d8c6 100%); color: var(--grafito); }
.t-grande--alineador .t__lienzo { position: absolute; inset: 4% 8% 36%; }
.t-grande--alineador .t__lienzo > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.t-grande--alineador .t-grande__texto { background: none; }
.t-grande--alineador p { color: var(--texto-2); }
/* Subrayado dorado del CTA de Invisalign: se dibuja cuando la fila queda alineada. */
.t__subrayado { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--dorado); transform-origin: 0 50%; }

/* Grupo B: tarjetas compactas */
.t-chicas { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.75rem); }
.t-chica { display: grid; grid-template-columns: 38% 1fr; min-height: 11.5rem; background: var(--blanco); border: 1px solid var(--linea); text-decoration: none; color: var(--grafito); transition: border-color .4s var(--curva); }
.t-chica:hover { border-color: var(--dorado); }
.t-chica__foto { position: relative; overflow: hidden; background: var(--arena); }
.t-chica__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.t-chica__foto .placeholder { position: absolute; inset: 0; min-height: 0; padding: .75rem; font-size: .75rem; letter-spacing: .04em; overflow-wrap: anywhere; }
.t-chica__texto { display: grid; align-content: center; gap: .5rem; padding: 1.25rem 1.4rem; }
.t-chica h3 { font-size: 1.35rem; font-weight: 400; letter-spacing: -.015em; line-height: 1.1; }
.t-chica p { font-size: .92rem; line-height: 1.5; color: var(--texto-2); }
.t-chica .t__promesa { color: var(--grafito); }
/* La tarjeta de dolor no se anima: carga primero y sin efectos. */
.t-chica--dolor { border-color: var(--linea); }

@media (max-width: 899.98px) {
  /* Grupo A: carrusel; la siguiente asoma torcida hasta que se centra. El padding vertical deja lugar al giro. */
  .t-grandes { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--lado) * -1); padding: .75rem var(--lado) 1.75rem; scroll-padding-inline: var(--lado); scrollbar-width: none; }
  .t-grandes::-webkit-scrollbar { display: none; }
  .t-grande { scroll-snap-align: start; }
  .t-grande--alineador { aspect-ratio: 4 / 5; }
  .t-grande--alineador .t__lienzo { inset: 3% 8% 46%; }
  .t__foto .placeholder { inset: 0 0 58% 0; padding: 1rem; }
  .t-chicas { grid-template-columns: 1fr; }
}