/* Smile & Align: hero de las páginas de servicio (2026-10-10, pedido de Axel: "presencia de estudio de lujo").
   Se carga después de servicios.css y anula sus reglas .s-hero (no se editan allá: otro frente trabaja ese archivo).

   Composición: portada editorial partida. El texto ocupa la columna izquierda con tres registros fijos (migas
   arriba, título y acción al centro, la franja de confianza abajo) y la foto de la doctora llena la columna derecha
   a todo el alto del hero, pegada al borde de la ventana, sin marco. Un filete dorado marca la costura.
   Alto: la pantalla menos la cabecera, entre 36 y 56 rem.

   Movimiento (MOTION.md, 5g): la entrada es CSS puro (keyframes dentro de prefers-reduced-motion: no-preference),
   así corre desde el primer cuadro y no depende de JS: sin JS, con reduced-motion o si la animación no corre, el
   hero se ve completo y quieto. La foto nunca arranca transparente (cuenta para el LCP): la tapa un telón grafito
   que se corre. El asentamiento al scroll lo hace servicios-hero.js sobre .s-hero__marco y .s-hero__centro, que no
   tienen animación CSS propia, así no pelean por el transform. */

.s-hero {
  --hero-alto: clamp(36rem, calc(100svh - var(--cabecera-alto, 4.5rem)), 56rem);
  --hero-foto: clamp(24rem, 45vw, 54rem);
  --hero-filete: rgba(212, 185, 127, .5);
  --e-sale: cubic-bezier(.16, 1, .3, 1);
  --e-cruza: cubic-bezier(.77, 0, .18, 1);
}

/* La grilla deja de vivir dentro de .contenedor: la foto llega al borde de la ventana y el texto se alinea con el
   borde izquierdo del contenedor del resto de la página (el padding en % se mide contra el ancho de la sección). */
.s-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) var(--hero-foto); gap: 0; align-items: stretch;
  min-height: var(--hero-alto); padding: 0 0 0 max(0px, calc((100% - var(--ancho)) / 2));
}
.s-hero__texto {
  display: flex; flex-direction: column; min-width: 0;
  padding: clamp(1.75rem, 4.5vh, 3rem) clamp(2rem, 4.5vw, 5rem) clamp(1.75rem, 4vh, 2.75rem) var(--lado);
}
.s-hero .migas { margin-bottom: 0; }
.s-hero__centro { margin-block: auto; padding-block: clamp(2rem, 6vh, 4rem); }

/* Título: más grande y más apretado; cada tramo sube por su propio corte. El corte se estira un poco a la derecha y
   abajo para no comerse la caída de la itálica ni los descendentes. */
.s-hero h1 { font-size: clamp(3.3rem, 7vw, 6rem); line-height: .94; letter-spacing: -.016em; font-weight: 600; text-wrap: balance; }
.s-hero__linea { display: block; overflow: clip; padding: 0 .14em .1em 0; margin: 0 -.14em -.1em 0; }
.s-hero__linea > span { display: block; }
.s-hero h1 em.s-hero__linea { padding-bottom: .12em; margin-top: .02em; }

.s-hero__bajada { max-width: 30rem; margin-top: clamp(1.5rem, 3vh, 2.1rem); font-size: clamp(1.05rem, 1.35vw, 1.18rem); line-height: 1.62; }
.s-hero__acciones { margin-top: clamp(1.9rem, 4vh, 2.6rem); }

/* Franja de confianza: un registro aparte al pie de la columna, separado por un filete que se traza. */
.s-hero .confianza { position: relative; max-width: none; margin-top: 0; padding-top: 1.15rem; border-top: 0; gap: .45rem 1.5rem; font-size: .78rem; letter-spacing: .015em; }
.s-hero .confianza::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--noche-linea); transform-origin: 0 50%; }

/* Foto: a todo el alto, sin el filete desplazado de antes. El marco es un 9 % más alto que la columna y sobra por
   arriba: el scroll lo baja (parallax) sin dejar nunca un hueco. */
.s-hero__foto { position: relative; overflow: hidden; aspect-ratio: auto; background: var(--noche-2); }
.s-hero__foto::before { content: none; }
.s-hero__foto::after { content: ""; position: absolute; z-index: 2; left: 0; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, transparent, var(--hero-filete) 14%, var(--hero-filete) 86%, transparent); transform-origin: 50% 0; pointer-events: none; }
.s-hero__marco { position: absolute; inset: -9% 0 0; }
.s-hero__marco > img, .s-hero__marco > .placeholder { position: relative; width: 100%; height: 100%; }
.s-hero__marco > img { display: block; object-fit: cover; }
.s-hero__marco > .placeholder { min-height: 0; padding: clamp(1.5rem, 4vw, 3rem); }
.s-hero--sin-foto .s-hero__marco { inset: 0; }
html:not([data-motion="estatico"]) .s-hero:not(.s-hero--sin-foto) .s-hero__marco { will-change: transform; }

/* ───── Teléfono y tablet vertical: texto, acción y franja; la foto debajo, a todo el ancho y en 4:5 ───── */
@media (max-width: 899.98px) {
  .s-hero__grid { grid-template-columns: 1fr; min-height: 0; padding: 0; }
  .s-hero__texto { padding: clamp(1.5rem, 5vw, 2.25rem) var(--lado) clamp(2rem, 7vw, 2.75rem); }
  .s-hero__centro { margin-block: 0; padding-block: clamp(1.9rem, 7vw, 2.75rem) clamp(2rem, 7vw, 2.75rem); }
  .s-hero h1 { font-size: clamp(3rem, 13.4vw, 4.6rem); }
  .s-hero .confianza { gap: .4rem 1.25rem; }
  .s-hero__foto { aspect-ratio: auto; height: min(125vw, 38rem); margin-inline: 0; }
  .s-hero__foto::after { display: none; }
  .s-hero--sin-foto .s-hero__foto { height: auto; min-height: 14rem; }
}

/* ───── Entrada al cargar (MOTION.md, 5g). Un solo gesto, lento y sin rebote: el filete baja, el título sube por su
   corte, el telón grafito se corre hacia la derecha y descubre a la doctora mientras la foto asienta de 1.14 a 1;
   después la bajada, la acción y la franja. Todo termina en 2.7 s. ───── */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="estatico"]) .s-hero .migas { animation: hero-sube .9s var(--e-sale) .1s both; }
  html:not([data-motion="estatico"]) .s-hero__linea > span { animation: hero-mascara 1.3s var(--e-sale) .16s both; }
  html:not([data-motion="estatico"]) .s-hero__linea + .s-hero__linea > span { animation-delay: .3s; }
  html:not([data-motion="estatico"]) .s-hero__bajada { animation: hero-sube 1.1s var(--e-sale) .62s both; }
  html:not([data-motion="estatico"]) .s-hero__acciones { animation: hero-sube 1.1s var(--e-sale) .76s both; }
  html:not([data-motion="estatico"]) .s-hero .confianza::before { animation: hero-regla 1.4s var(--e-cruza) .85s both; }
  html:not([data-motion="estatico"]) .s-hero .confianza > span { animation: hero-sube .9s var(--e-sale) 1.05s both; }
  html:not([data-motion="estatico"]) .s-hero .confianza > span:nth-child(2) { animation-delay: 1.11s; }
  html:not([data-motion="estatico"]) .s-hero .confianza > span:nth-child(3) { animation-delay: 1.17s; }
  html:not([data-motion="estatico"]) .s-hero .confianza > span:nth-child(4) { animation-delay: 1.23s; }
  html:not([data-motion="estatico"]) .s-hero__foto::after { animation: hero-filete 1.2s var(--e-cruza) 0s both; }
  html:not([data-motion="estatico"]) .s-hero__foto::before { content: ""; position: absolute; z-index: 1; inset: 0; background: var(--noche); transform-origin: 100% 50%; pointer-events: none; animation: hero-telon 1.6s var(--e-cruza) .3s both; }
  html:not([data-motion="estatico"]) .s-hero__marco > img { animation: hero-asienta 2.4s var(--e-sale) .3s both; }
}
@keyframes hero-sube { from { opacity: 0; transform: translate3d(0, .7rem, 0); } to { opacity: 1; transform: none; } }
@keyframes hero-mascara { from { transform: translate3d(0, 106%, 0); } to { transform: none; } }
@keyframes hero-regla { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hero-filete { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes hero-telon { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes hero-asienta { from { transform: scale(1.14); } to { transform: none; } }