/* =====================================================================
   ENSUTEX · LANDINGS DE PRODUCTO — ESCENAS Y APARICIÓN
   =====================================================================
   Las nueve landings de producto compartían el esqueleto de secciones
   pero se veían planas: sólo blanco y negro, y cero movimiento (medido
   el 04-oct: 17 unidades clave, 0 con transición propia). La referencia
   de Carlitos pide «fondos que juegan con colores por sección,
   animaciones, orden claro», con los colores de Ensutex.

   La primera versión de esta capa usaba tintes casi blancos (#f5f2f9) y
   se midió contra la página sin la capa: cambiaba el 3 % de los píxeles
   y la magnitud media del cambio era 5 de 255 — o sea, invisible. De ahí
   la corrección: los tintes ahora son tonos de verdad, con una arista
   roja que marca dónde empieza cada escena, y las tarjetas se separan
   del fondo con cuerpo propio. Lo que se mide ahora está anotado abajo.

   Esta capa hace tres cosas y nada más:
   1. Le da a cada sección su tono, en una cadencia visible: tinta oscura
      → blanco → lila → tinta → lila claro... Los tonos salen de la
      paleta que el sitio ya usa (el lila y el celeste de las escenas del
      proceso), no de un lenguaje nuevo.
   2. Le da cuerpo a las piezas: tarjetas, pasos, fichas y el bloque de
      cierre dejan de flotar sobre el fondo.
   3. Define la aparición al hacer scroll con los MISMOS valores que el
      resto del sitio (0.85 s / 0.55 s, cubic-bezier(0.22, 1, 0.36, 1)),
      pero acotada a `body.product-landing` para no tocar ninguna otra
      página. El guion que reparte las clases es landing-escenas.js.

   No se carga animations.css ni animations.js a propósito:
   animations.js también esconde el menú al hacer scroll, y eso daría un
   menú que se comporta distinto al de las otras pestañas — el error
   reincidente E-e2850c.

   Todo lo que oculta lo enciende el guion. Sin JavaScript, con
   «reducir movimiento» o si el guion falla, el contenido se ve igual:
   nunca queda una sección en blanco.
   ===================================================================== */

body.product-landing {
  --pl-lila:       #e7e0f5;   /* el lila de las escenas del proceso, con cuerpo */
  --pl-lila-claro: #f1ecfa;
  --pl-celeste:    #dcecf4;   /* el celeste de la escena del proceso, con cuerpo */
  --pl-celeste-claro: #eef6fa;
  --pl-arena:      #f2ede4;   /* un tercer tono cálido, para no repetir */
  --pl-borde:      rgba(10, 10, 9, .10);
  --pl-sombra:     0 1px 2px rgba(10, 10, 9, .05), 0 18px 38px -22px rgba(10, 10, 9, .38);
  --pl-ease:       cubic-bezier(0.22, 1, 0.36, 1);
  --pl-resorte:    cubic-bezier(0.34, 1.35, 0.64, 1);
  --pl-dur-med:    0.55s;
  --pl-dur-lento:  0.85s;   /* el mismo del motor general del sitio */
}

/* ── 1. CADENCIA DE COLOR POR SECCIÓN ────────────────────────────────
   La arista roja de arriba es lo que hace que la escena se lea: marca el
   cambio de sección de un vistazo, sin agregar ningún texto. */

body.product-landing .product-landing__section--tinte {
  background: linear-gradient(180deg, var(--pl-lila) 0%, var(--pl-lila-claro) 100%);
  border-top: 4px solid var(--product-accent);
  border-bottom: 1px solid var(--pl-borde);
}

body.product-landing .product-landing__section--tinte-2 {
  background: linear-gradient(180deg, var(--pl-celeste) 0%, var(--pl-celeste-claro) 100%);
  border-top: 4px solid var(--product-accent);
  border-bottom: 1px solid var(--pl-borde);
}

body.product-landing .product-landing__section--tinte-3 {
  background: linear-gradient(180deg, var(--pl-arena) 0%, #f8f5ef 100%);
  border-top: 4px solid var(--product-accent);
  border-bottom: 1px solid var(--pl-borde);
}

/* El blanco no queda plano: un lavado muy suave le quita la sensación de
   hoja en blanco sin perder el descanso entre escenas. */
body.product-landing .product-landing__section--white {
  background: linear-gradient(180deg, #fff 0%, #fbfafc 100%);
}

/* La banda oscura: la tinta se queda, pero gana profundidad de escena —
   la luz roja de la marca arriba a la derecha y un celeste abajo a la
   izquierda. */
body.product-landing .product-landing__section--dark {
  background:
    radial-gradient(120% 90% at 82% 0%, rgba(226, 6, 19, .16) 0%, rgba(226, 6, 19, 0) 58%),
    radial-gradient(90% 70% at 8% 100%, rgba(135, 206, 235, .14) 0%, rgba(135, 206, 235, 0) 62%),
    var(--product-ink);
  border-bottom: 4px solid var(--product-accent);
}

/* El héroe: ya era tinta llena; se le da la misma luz de escena que a la
   banda oscura para que la página abra con volumen y no con un plano. */
body.product-landing .product-landing__hero {
  background:
    radial-gradient(85% 110% at 90% 4%, rgba(226, 6, 19, .34) 0%, rgba(226, 6, 19, 0) 58%),
    radial-gradient(70% 90% at 2% 102%, rgba(135, 206, 235, .24) 0%, rgba(135, 206, 235, 0) 62%),
    linear-gradient(160deg, #17161a 0%, var(--product-ink) 55%);
  border-top: 4px solid var(--product-accent);
}

/* ── 2. CUERPO DE LAS PIEZAS ─────────────────────────────────────────
   Sobre un fondo con color, una tarjeta blanca sin sombra se lee como un
   agujero. Ahora tiene radio, borde y sombra, y una arista roja que
   aparece al pasar el puntero. */

body.product-landing .product-landing__fact {
  background: var(--pl-lila-claro);
  border: 1px solid rgba(10, 10, 9, .06);
}

body.product-landing .product-landing__card,
body.product-landing .product-landing__step,
body.product-landing .product-landing__decision > article {
  border-radius: 1.25rem;
  border: 1px solid var(--pl-borde);
  background: #fff;
  box-shadow: var(--pl-sombra);
  position: relative;
  overflow: hidden;
  transition: transform 0.32s var(--pl-resorte), box-shadow 0.32s var(--pl-ease), border-color 0.32s var(--pl-ease);
}

/* La arista roja: ocupa el ancho completo y sólo se ve al acercarse. */
body.product-landing .product-landing__card::before,
body.product-landing .product-landing__step::before,
body.product-landing .product-landing__decision > article::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--product-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.36s var(--pl-ease);
}

body.product-landing .product-landing__card:hover::before,
body.product-landing .product-landing__step:hover::before,
body.product-landing .product-landing__decision > article:hover::before {
  transform: scaleX(1);
}

/* Las tarjetas de la banda oscura son blancas, así que su texto tiene que
   volver a tinta: sin esto el titular y el párrafo quedaban en gris claro
   sobre blanco y casi no se leían. */
body.product-landing .product-landing__section--dark .product-landing__decision > article {
  color: var(--product-ink);
}

body.product-landing .product-landing__section--dark .product-landing__decision > article h3 {
  color: var(--product-ink);
}

body.product-landing .product-landing__section--dark .product-landing__decision > article p {
  color: var(--product-muted);
}

body.product-landing .product-landing__card:hover,
body.product-landing .product-landing__step:hover,
body.product-landing .product-landing__decision > article:hover {
  transform: translateY(-6px);
  box-shadow: 0 2px 3px rgba(10, 10, 9, .05), 0 26px 50px -24px rgba(10, 10, 9, .45);
  border-color: rgba(226, 6, 19, .35);
}

/* El número del paso: el rojo de marca, con más presencia. */
body.product-landing .product-landing__step b {
  display: inline-block;
  padding: .1rem .5rem;
  border-radius: .5rem;
  background: rgba(226, 6, 19, .1);
  font-size: .95rem;
}

/* El bloque de cierre: sobre el lila se lee como la pieza que es. */
body.product-landing .product-landing__cta {
  padding: clamp(1.2rem, 3vw, 1.8rem);
  border: 1px solid var(--pl-borde);
  border-radius: 1.5rem;
  background: #fff;
  box-shadow: var(--pl-sombra);
}

/* Los botones: el principal gana un halo rojo al acercarse, y el pulsado
   sigue la regla del botón del héroe del inicio: 90 ms y un 2,5 % menos. */
body.product-landing .product-landing__button--primary {
  box-shadow: 0 12px 26px -14px rgba(226, 6, 19, .7);
  transition: transform 0.24s var(--pl-resorte), box-shadow 0.24s var(--pl-ease);
}

body.product-landing .product-landing__button--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -14px rgba(226, 6, 19, .85);
}

body.product-landing .product-landing__button:active,
body.product-landing .product-landing__cta .product-landing__button:active {
  transform: translateY(0) scale(0.975);
  transition: transform 90ms linear, background-color 0.18s var(--pl-ease), color 0.18s var(--pl-ease);
}

/* ── 3. APARICIÓN AL HACER SCROLL ────────────────────────────────────
   Mismos valores que el motor general del sitio, con un recorrido algo
   más largo para que la aparición se note sin llegar a molestar. */

body.product-landing .pl-aparece {
  opacity: 0;
  transform: translateY(44px) scale(0.985);
  transition: opacity var(--pl-dur-lento) var(--pl-ease),
              transform var(--pl-dur-lento) var(--pl-ease);
  will-change: opacity, transform;
}

body.product-landing .pl-aparece.pl-aparece--dentro {
  opacity: 1;
  transform: translateY(0) scale(1);
}

body.product-landing .pl-escalona > * {
  opacity: 0;
  transform: translateY(30px) scale(0.985);
  transition: opacity var(--pl-dur-med) var(--pl-ease),
              transform var(--pl-dur-med) var(--pl-ease);
  transition-delay: var(--pl-retraso, 0ms);
}

body.product-landing .pl-escalona.pl-escalona--dentro > * {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Sin JavaScript no hay clase que oculte: esto es sólo un seguro por si
   el guion alcanza a marcar y después se cae. */
body.product-landing.pl-sin-guion .pl-aparece,
body.product-landing.pl-sin-guion .pl-escalona > * {
  opacity: 1 !important;
  transform: none !important;
}

/* ── 4. MÓVIL: amplitudes más cortas y sin escalonado largo ────────── */

@media (max-width: 767px) {
  body.product-landing .pl-aparece { transform: translateY(24px) scale(0.99); }
  body.product-landing .pl-escalona > * { transform: translateY(18px) scale(0.99); }
  body.product-landing .pl-escalona > *:nth-child(n+5) { transition-delay: 0ms; }
  body.product-landing .product-landing__section--tinte,
  body.product-landing .product-landing__section--tinte-2,
  body.product-landing .product-landing__section--tinte-3 { border-top-width: 3px; }
}

/* ── 5. QUIEN PIDIÓ NO MOVERSE, NO SE MUEVE ────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  body.product-landing .pl-aparece,
  body.product-landing .pl-escalona > *,
  body.product-landing .product-landing__card,
  body.product-landing .product-landing__step,
  body.product-landing .product-landing__decision > article,
  body.product-landing .product-landing__button {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  body.product-landing .product-landing__card:hover,
  body.product-landing .product-landing__step:hover,
  body.product-landing .product-landing__decision > article:hover { transform: none; }
  body.product-landing .product-landing__card::before,
  body.product-landing .product-landing__step::before,
  body.product-landing .product-landing__decision > article::before { transform: scaleX(1); }
}