/*
 * Portada de venta de EZGrou (public/sitio/index.html). CSS a mano, sin framework.
 *
 * Reglas de la casa:
 *  - Nada en línea: la CSP de la portada es solo 'self' (nginx.conf, `location = /`).
 *  - Se ve completa sin JS. El movimiento es un extra:
 *      · con `animation-timeline` (Chrome, Edge): la aparición al bajar y el flujo se hacen aquí;
 *      · sin él (Safari, Firefox): sitio.js pone `html.sin-timeline` y marca `.visto` con un
 *        IntersectionObserver. Sin JS no se oculta nada.
 *  - `prefers-reduced-motion: reduce` apaga todo el movimiento.
 *  - Solo se anima transform/translate/scale/opacity (y el trazo del SVG del flujo).
 *  - Los colores salen de los tokens del tema de la app (src/styles.scss) y del logo.
 */

/* ── Fuente propia (Inter, OFL: fuentes/LICENCIA-Inter.txt), solo latin y 400–800 ── */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/sitio/fuentes/inter-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Respaldo con las medidas de Inter: al llegar la fuente no se mueve nada (CLS). */
@font-face {
  font-family: 'Inter respaldo';
  src: local('Arial'), local('Helvetica Neue'), local('Helvetica');
  ascent-override: 90.44%;
  descent-override: 22.52%;
  line-gap-override: 0%;
  size-adjust: 107.12%;
}

/* ── Tokens ─────────────────────────────────────────────────────────────────── */
:root {
  --fuente: 'Inter', 'Inter respaldo', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fondo: #ffffff;
  --fondo-tenue: #f5f7fa;
  --superficie: #ffffff;
  --superficie-2: #f8f9fb;
  --borde: #e3e6eb;
  --borde-fuerte: #cdd2da;
  --texto: #1a1d23;
  --texto-tenue: #5d6675;
  --titulo: #101828;

  --primario: #2563eb;
  --primario-hover: #1d4ed8;
  --primario-suave: #e8effd;
  --primario-contraste: #ffffff;
  /* El verde y el azul del logo. */
  --verde: #5bb543;
  --verde-texto: #2f7a24;
  --azul-marca: #1d4f9c;

  --degradado-texto: linear-gradient(100deg, #1d4ed8 0%, #2563eb 38%, #2f8a3a 100%);
  --rejilla: rgba(16, 24, 40, 0.06);
  --luz-1: rgba(37, 99, 235, 0.32);
  --luz-2: rgba(91, 181, 67, 0.26);
  --luz-3: rgba(99, 102, 241, 0.22);
  --vidrio: rgba(255, 255, 255, 0.72);

  --sombra-1: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.08);
  --sombra-2: 0 16px 36px -14px rgba(16, 24, 40, 0.2), 0 6px 12px -6px rgba(16, 24, 40, 0.08);
  --sombra-3: 0 48px 90px -28px rgba(30, 64, 175, 0.38), 0 22px 40px -22px rgba(16, 24, 40, 0.35);
  --anillo: 0 0 0 6px var(--primario-suave);

  --radio: 20px;
  --radio-chico: 12px;
  --curva: cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0b1020;
    --fondo-tenue: #0e1426;
    --superficie: #131a2c;
    --superficie-2: #171f33;
    --borde: #252e45;
    --borde-fuerte: #36405a;
    --texto: #e6e9ef;
    --texto-tenue: #a3adbf;
    --titulo: #f4f6fa;

    --primario: #6b9bff;
    --primario-hover: #8db1ff;
    --primario-suave: #1a2747;
    --primario-contraste: #0b1020;
    --verde: #7bd06a;
    --verde-texto: #8fdb7f;
    --azul-marca: #8db1ff;

    --degradado-texto: linear-gradient(100deg, #8db1ff 0%, #6b9bff 40%, #7bd06a 100%);
    --rejilla: rgba(255, 255, 255, 0.05);
    --luz-1: rgba(59, 130, 246, 0.35);
    --luz-2: rgba(91, 181, 67, 0.22);
    --luz-3: rgba(129, 140, 248, 0.25);
    --vidrio: rgba(11, 16, 32, 0.7);

    --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --sombra-2: 0 18px 40px -16px rgba(0, 0, 0, 0.6), 0 6px 12px -6px rgba(0, 0, 0, 0.4);
    --sombra-3: 0 50px 100px -30px rgba(37, 99, 235, 0.45), 0 24px 44px -24px rgba(0, 0, 0, 0.7);
  }
}

/* ── Base ───────────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 88px;
  color-scheme: light dark;
}
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01';
  overflow-x: hidden;
}
@supports (overflow: clip) {
  body {
    overflow-x: clip;
  }
}
img,
svg {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}
h1,
h2,
h3 {
  color: var(--titulo);
  margin: 0;
  text-wrap: balance;
}
p {
  margin: 0;
}
p,
li {
  text-wrap: pretty;
}
a {
  color: var(--primario);
  text-underline-offset: 3px;
}
a:hover {
  color: var(--primario-hover);
}
:focus-visible {
  outline: 3px solid var(--primario);
  outline-offset: 3px;
  border-radius: 6px;
}
figure {
  margin: 0;
}

.contenedor {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 16px;
}
@media (min-width: 640px) {
  .contenedor {
    padding-inline: 24px;
  }
}
@media (min-width: 1024px) {
  .contenedor {
    padding-inline: 32px;
  }
}
.contenedor--angosto {
  max-width: 820px;
}

.saltar {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--primario);
  color: var(--primario-contraste);
  font-weight: 600;
  text-decoration: none;
}
.saltar:focus {
  top: 12px;
  color: var(--primario-contraste);
}

/* ── Botones ────────────────────────────────────────────────────────────────── */
.boton {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 11px;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform 0.2s var(--curva),
    box-shadow 0.25s var(--curva),
    background-color 0.2s,
    border-color 0.2s,
    color 0.2s;
}
.boton:active {
  transform: scale(0.97);
}
.boton--grande {
  min-height: 52px;
  padding: 0 24px;
  font-size: 1rem;
  border-radius: 13px;
}
.boton--primario {
  background: linear-gradient(180deg, #3b7af5 0%, #2563eb 100%);
  color: #ffffff;
  border-color: #1f56cf;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 10px 24px -10px rgba(37, 99, 235, 0.7);
}
.boton--primario:hover {
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 16px 32px -12px rgba(37, 99, 235, 0.8);
}
/* El brillo que cruza el botón al pasar el ratón. */
.boton--primario::after,
.boton--claro::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    110deg,
    transparent 20%,
    rgba(255, 255, 255, 0.35) 45%,
    transparent 70%
  );
  transform: translateX(-120%);
  transition: transform 0.7s var(--curva);
}
.boton--primario:hover::after,
.boton--claro:hover::after {
  transform: translateX(120%);
}
.boton__flecha {
  transition: transform 0.25s var(--curva);
}
.boton:hover .boton__flecha {
  transform: translateX(3px);
}
.boton--secundario {
  background: var(--superficie);
  color: var(--titulo);
  border-color: var(--borde-fuerte);
  box-shadow: var(--sombra-1);
}
.boton--secundario:hover {
  color: var(--titulo);
  border-color: var(--primario);
  transform: translateY(-1px);
}
.boton--fantasma {
  background: transparent;
  color: var(--texto);
}
.boton--fantasma:hover {
  color: var(--titulo);
  background: var(--fondo-tenue);
}
.boton--claro {
  background: #ffffff;
  color: #0b1a3d;
  box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.5);
}
.boton--claro:hover {
  color: #0b1a3d;
  transform: translateY(-1px);
}
.boton--contorno-claro {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.45);
}
.boton--contorno-claro:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
  transform: translateY(-1px);
}

/* ── Encabezado fijo: vidrio esmerilado al bajar ─────────────────────────────── */
.encabezado {
  position: sticky;
  top: 0;
  z-index: 50;
  isolation: isolate;
}
.encabezado::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--vidrio);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--borde);
  box-shadow: 0 8px 24px -18px rgba(16, 24, 40, 0.35);
  opacity: 1;
  transition: opacity 0.3s ease;
}
/* Arriba del todo el encabezado es transparente; el vidrio aparece al bajar. */
@supports (animation-timeline: scroll()) {
  .encabezado::before {
    animation: vidrio linear both;
    animation-timeline: scroll(root);
    animation-range: 0 96px;
  }
}
html.sin-timeline .encabezado::before {
  opacity: 0;
}
html.sin-timeline .encabezado--bajo::before {
  opacity: 1;
}
@keyframes vidrio {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.encabezado__fila {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 68px;
}
.marca {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  flex-shrink: 0;
}
.marca__simbolo {
  width: 52px;
  height: auto;
}
.marca__texto {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}
.marca__ez {
  color: var(--azul-marca);
}
.marca__grou {
  color: var(--verde-texto);
}
.menu {
  display: none;
  gap: 4px;
  margin-inline: auto;
}
.menu a {
  padding: 8px 12px;
  border-radius: 9px;
  color: var(--texto-tenue);
  font-size: 0.95rem;
  font-weight: 550;
  text-decoration: none;
  transition:
    color 0.2s,
    background-color 0.2s;
}
.menu a:hover {
  color: var(--titulo);
  background: var(--fondo-tenue);
}
.encabezado__acciones {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
@media (max-width: 419px) {
  .encabezado__acciones .boton--fantasma {
    display: none;
  }
  .marca__simbolo {
    width: 44px;
  }
}
@media (min-width: 960px) {
  .menu {
    display: flex;
  }
  .encabezado__acciones {
    margin-left: 0;
  }
}

/* ── Portada (hero) ─────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  isolation: isolate;
  padding-block: 40px 72px;
  overflow: hidden;
}
@supports (overflow: clip) {
  .hero {
    overflow: clip;
  }
}
@media (min-width: 1024px) {
  .hero {
    padding-block: 64px 104px;
  }
}
.hero__fondo {
  position: absolute;
  inset: -68px 0 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
/* Una rejilla fina que se desvanece hacia abajo. */
.hero__fondo::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--rejilla) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rejilla) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 35%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 35%, transparent 78%);
}
/* Luces de la marca que se mueven despacio (malla de degradado). */
.luz {
  position: absolute;
  border-radius: 50%;
  width: 70vmax;
  height: 70vmax;
  opacity: 0.9;
  will-change: transform;
}
.luz--1 {
  top: -38vmax;
  left: -22vmax;
  background: radial-gradient(circle, var(--luz-1) 0%, transparent 62%);
  animation: luz-1 22s ease-in-out infinite alternate;
}
.luz--2 {
  top: -30vmax;
  right: -28vmax;
  background: radial-gradient(circle, var(--luz-2) 0%, transparent 60%);
  animation: luz-2 26s ease-in-out infinite alternate;
}
.luz--3 {
  top: 0;
  left: 20%;
  width: 52vmax;
  height: 52vmax;
  background: radial-gradient(circle, var(--luz-3) 0%, transparent 62%);
  animation: luz-3 30s ease-in-out infinite alternate;
}
@keyframes luz-1 {
  to {
    transform: translate3d(14vmax, 8vmax, 0) scale(1.08);
  }
}
@keyframes luz-2 {
  to {
    transform: translate3d(-16vmax, 10vmax, 0) scale(0.92);
  }
}
@keyframes luz-3 {
  to {
    transform: translate3d(-10vmax, -6vmax, 0) scale(1.15);
  }
}

.hero__fila {
  display: grid;
  gap: 56px;
  align-items: center;
}
@media (min-width: 1024px) {
  .hero__fila {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 48px;
  }
}
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  padding: 6px 14px 6px 10px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: var(--superficie);
  box-shadow: var(--sombra-1);
  color: var(--texto);
  font-size: 0.85rem;
  font-weight: 600;
}
.etiqueta__punto {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--verde);
}
.etiqueta__punto::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--verde);
  opacity: 0;
  animation: latido 2.4s ease-out infinite;
}
@keyframes latido {
  0% {
    transform: scale(0.6);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}
.hero h1 {
  font-size: clamp(2.2rem, 1.3rem + 3.2vw, 3.7rem);
  font-weight: 780;
  line-height: 1.04;
  letter-spacing: -0.035em;
}
.degradado {
  background: var(--degradado-texto);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
@media (forced-colors: active) {
  .degradado {
    color: CanvasText;
    background: none;
  }
}
.hero__entrada {
  max-width: 34em;
  margin-top: 22px;
  color: var(--texto-tenue);
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.2rem);
}
.hero__botones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}
@media (max-width: 479px) {
  .hero__botones .boton {
    flex: 1 1 100%;
  }
}
.hero__datos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  color: var(--texto-tenue);
  font-size: 0.9rem;
  font-weight: 550;
}
.hero__datos li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hero__datos li::before {
  content: '';
  width: 14px;
  height: 8px;
  margin-top: -4px;
  border-left: 2px solid var(--verde-texto);
  border-bottom: 2px solid var(--verde-texto);
  transform: rotate(-45deg);
}

/* Capturas del hero: la escena (entrada), cada capa (parallax con el ratón) y el marco
   (inclinación). Cada una mueve una propiedad distinta para no pisarse. */
.hero__visual {
  position: relative;
  --mx: 0;
  --my: 0;
}
.hero__escena {
  position: relative;
  padding: 0 9% 12% 0;
}
.capa {
  --prof: 8px;
  translate: calc(var(--mx) * var(--prof)) calc(var(--my) * var(--prof));
  transition: translate 0.6s var(--curva);
}
.capa--2 {
  --prof: 18px;
}
.capa--3 {
  --prof: 26px;
}

/* ── Marcos de navegador y de teléfono ───────────────────────────────────────── */
.marco--navegador {
  position: relative;
}
.marco--navegador .inclina {
  overflow: hidden;
  border: 1px solid var(--borde);
  border-radius: 14px;
  background: var(--superficie);
  box-shadow: var(--sombra-3);
  transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition:
    transform 0.6s var(--curva),
    box-shadow 0.4s;
  transform-style: preserve-3d;
}
.marco__barra {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border-bottom: 1px solid var(--borde);
  background: var(--superficie-2);
}
.marco__barra > span:not(.marco__url) {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--borde-fuerte);
}
.marco__url {
  margin-inline: auto;
  padding: 3px 14px;
  border-radius: 7px;
  background: var(--fondo);
  border: 1px solid var(--borde);
  color: var(--texto-tenue);
  font-size: 0.72rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
}
.marco--navegador img {
  width: 100%;
  aspect-ratio: 1440 / 900;
}
.marco--navegador figcaption {
  margin-top: 14px;
  color: var(--texto-tenue);
  font-size: 0.92rem;
  text-align: center;
}
.marco--telefono {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 27%;
  min-width: 96px;
}
.marco--telefono .flota {
  padding: 5px;
  border-radius: 26px;
  background: #0b1020;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 30px 60px -20px rgba(11, 16, 32, 0.55),
    0 12px 24px -12px rgba(11, 16, 32, 0.45);
}
.marco--telefono img {
  width: 100%;
  aspect-ratio: 600 / 1298;
  border-radius: 21px;
}
@media (max-width: 639px) {
  .marco--telefono .flota {
    padding: 3px;
    border-radius: 18px;
  }
  .marco--telefono img {
    border-radius: 15px;
  }
}
/* Teléfonos sobre las capturas de abajo (revisión y rutas). */
.marco--telefono-chico {
  right: -3%;
  bottom: 44px;
  width: 22%;
}
.marco--telefono-rutas {
  right: -2%;
  bottom: 0;
  width: 24%;
}
@media (max-width: 639px) {
  .marco--telefono-chico {
    right: 0;
  }
  .marco--telefono-rutas {
    right: 0;
    width: 30%;
  }
}
.insignia {
  position: absolute;
  left: -2%;
  bottom: 4%;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 10px;
  border: 1px solid var(--borde);
  border-radius: 14px;
  background: var(--vidrio);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--sombra-2);
  color: var(--titulo);
  font-size: 0.85rem;
  font-weight: 650;
  white-space: nowrap;
}
.insignia__icono {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, #3f9b31, #5bb543);
  color: #ffffff;
}
@media (max-width: 479px) {
  .insignia {
    font-size: 0.75rem;
    padding: 7px 12px 7px 7px;
  }
  .insignia__icono {
    width: 22px;
    height: 22px;
  }
}

/* ── Secciones ──────────────────────────────────────────────────────────────── */
.seccion {
  position: relative;
  padding-block: clamp(64px, 5rem + 3vw, 128px);
}
.seccion--compacta {
  padding-block: clamp(48px, 3rem + 2vw, 80px);
}
.seccion--tenue {
  background: var(--fondo-tenue);
  border-block: 1px solid var(--borde);
}
.encabezado-seccion {
  max-width: 760px;
  margin: 0 auto 56px;
  text-align: center;
}
.encabezado-seccion > p:last-child {
  margin-top: 16px;
  color: var(--texto-tenue);
  font-size: 1.1rem;
}
.sobretitulo {
  margin-bottom: 12px;
  color: var(--primario);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
h2 {
  font-size: clamp(1.85rem, 1.1rem + 2.6vw, 3rem);
  font-weight: 760;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
h3 {
  font-size: 1.15rem;
  font-weight: 680;
  line-height: 1.3;
  letter-spacing: -0.015em;
}
.titulo-chico {
  margin-bottom: 28px;
  color: var(--texto-tenue);
  font-size: 0.95rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  text-align: center;
}

/* Para quién */
.quien {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 560px) {
  .quien {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .quien {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.quien__item {
  position: relative;
  padding: 20px 20px 20px 22px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  background: var(--superficie);
  overflow: hidden;
}
.quien__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--primario), var(--verde));
}
.quien__item strong {
  display: block;
  color: var(--titulo);
  font-weight: 680;
}
.quien__item span {
  display: block;
  margin-top: 4px;
  color: var(--texto-tenue);
  font-size: 0.95rem;
}

/* Qué resuelve */
.resuelve {
  display: grid;
  gap: 18px;
}
@media (min-width: 760px) {
  .resuelve {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }
}
.resuelve__item {
  padding: 28px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background:
    radial-gradient(120% 80% at 100% 0%, var(--primario-suave), transparent 55%), var(--superficie);
  transition:
    transform 0.35s var(--curva),
    box-shadow 0.35s var(--curva),
    border-color 0.3s;
}
.resuelve__item:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-2);
  border-color: var(--borde-fuerte);
}
.resuelve__antes {
  margin-bottom: 14px;
  color: var(--texto-tenue);
  font-size: 0.92rem;
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--texto-tenue) 60%, transparent);
}
.resuelve__item h3 {
  font-size: 1.3rem;
}
.resuelve__item h3 + p {
  margin-top: 8px;
  color: var(--texto-tenue);
}

/* ── Tarjetas (funciones y seguridad) ────────────────────────────────────────── */
.tarjeta {
  position: relative;
  isolation: isolate;
  padding: 26px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  overflow: hidden;
  transition:
    transform 0.35s var(--curva),
    box-shadow 0.35s var(--curva),
    border-color 0.3s;
}
/* El brillo que sigue al ratón (sitio.js pone --gx/--gy; sin JS, arriba al centro). */
.tarjeta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    420px circle at var(--gx, 50%) var(--gy, 0%),
    color-mix(in srgb, var(--primario) 14%, transparent),
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.35s;
}
.tarjeta:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-2);
  border-color: color-mix(in srgb, var(--primario) 35%, var(--borde));
}
.tarjeta:hover::before {
  opacity: 1;
}
.tarjeta h3 {
  margin-top: 16px;
}
.tarjeta p {
  margin-top: 8px;
  color: var(--texto-tenue);
  font-size: 0.98rem;
}
.icono {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--primario-suave);
  color: var(--primario);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primario) 18%, transparent);
  transition: transform 0.35s var(--curva);
}
.tarjeta:hover .icono {
  transform: scale(1.08) rotate(-4deg);
}
.icono svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bento {
  display: grid;
  gap: 18px;
}
@media (min-width: 760px) {
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tarjeta--grande {
    grid-column: span 2;
  }
}
@media (min-width: 1024px) {
  .bento {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 22px;
  }
  .bento > .tarjeta {
    grid-column: span 2;
  }
  .bento > .tarjeta--grande {
    grid-column: span 3;
  }
}
.tarjeta--grande {
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
}
.tarjeta--grande .tarjeta__texto h3 {
  font-size: 1.35rem;
}
.captura {
  margin: 26px -26px 0 0;
  overflow: hidden;
  border: 1px solid var(--borde);
  border-right: 0;
  border-bottom: 0;
  border-radius: 12px 0 0 0;
  box-shadow: var(--sombra-2);
  margin-top: auto;
}
.tarjeta__texto {
  margin-bottom: 26px;
}
.captura img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: left top;
  transition: transform 0.6s var(--curva);
}
.tarjeta:hover .captura img {
  transform: scale(1.03) translate(-1%, -1%);
}

/* ── Flujo: storyboard → revisión → curso → SCORM ────────────────────────────── */
.flujo {
  position: relative;
  margin: 8px 0 72px;
  view-timeline-name: --flujo;
  view-timeline-axis: block;
}
.flujo__pasos {
  position: relative;
  display: grid;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.flujo__svg {
  position: absolute;
  overflow: visible;
  pointer-events: none;
}
.flujo__svg--h {
  display: none;
}
.flujo__svg--v {
  left: 27px;
  top: 28px;
  width: 4px;
  height: calc(100% - 56px);
}
.flujo__base,
.flujo__trazo {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.flujo__base {
  stroke: var(--borde);
}
.flujo__trazo {
  stroke: var(--primario);
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.paso {
  position: relative;
  padding-left: 76px;
  min-height: 56px;
}
.paso__nodo {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 2px solid var(--primario);
  border-radius: 50%;
  background: var(--primario);
  color: var(--primario-contraste);
  box-shadow: var(--anillo);
}
.paso__nodo svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.paso__numero {
  display: block;
  color: var(--primario);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.paso h3 {
  margin-top: 2px;
  font-size: 1.25rem;
}
.paso p {
  margin-top: 6px;
  color: var(--texto-tenue);
  font-size: 0.98rem;
}
@media (min-width: 900px) {
  .flujo__pasos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
  }
  .flujo__svg--v {
    display: none;
  }
  .flujo__svg--h {
    display: block;
    left: 12.5%;
    width: 75%;
    top: 26px;
    height: 4px;
  }
  .paso {
    padding-left: 0;
    padding-top: 80px;
    text-align: center;
  }
  .paso__nodo {
    left: 50%;
    margin-left: -28px;
  }
}

.dueto {
  display: grid;
  gap: 40px;
}
@media (min-width: 900px) {
  .dueto {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
  }
}

/* ── Rutas de desarrollo (siempre oscura) ───────────────────────────────────── */
.seccion--oscura {
  background: #0a0f1e;
  color: #c9d1e0;
  overflow: hidden;
  isolation: isolate;
}
@supports (overflow: clip) {
  .seccion--oscura {
    overflow: clip;
  }
}
.seccion--oscura h2,
.seccion--oscura h3 {
  color: #f4f6fa;
}
.seccion--oscura .sobretitulo {
  color: #8db1ff;
}
.seccion__brillo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 60% at 85% 20%, rgba(37, 99, 235, 0.35), transparent 70%),
    radial-gradient(50% 50% at 10% 90%, rgba(91, 181, 67, 0.2), transparent 70%);
}
.seccion__brillo::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 70% 40%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 70% at 70% 40%, #000 20%, transparent 75%);
}
.rutas {
  display: grid;
  gap: 56px;
  align-items: center;
}
@media (min-width: 1024px) {
  .rutas {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 64px;
  }
}
.rutas__texto > p {
  margin-top: 18px;
  font-size: 1.1rem;
}
.lista-check {
  display: grid;
  gap: 14px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.lista-check li {
  position: relative;
  padding-left: 34px;
}
.lista-check li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: rgba(91, 181, 67, 0.16);
  box-shadow: inset 0 0 0 1px rgba(123, 208, 106, 0.4);
}
.lista-check li::after {
  content: '';
  position: absolute;
  left: 7px;
  top: 9px;
  width: 9px;
  height: 5px;
  border-left: 2px solid #8fdb7f;
  border-bottom: 2px solid #8fdb7f;
  transform: rotate(-45deg);
}
.rutas__visual {
  position: relative;
  padding-bottom: 22%;
}
.seccion--oscura .marco--navegador .inclina {
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow:
    0 50px 100px -30px rgba(37, 99, 235, 0.55),
    0 24px 44px -24px rgba(0, 0, 0, 0.8);
}
.constancia {
  position: absolute;
  left: -4%;
  bottom: 0;
  width: 40%;
  rotate: -4deg;
  overflow: hidden;
  border-radius: 12px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12),
    0 30px 60px -20px rgba(0, 0, 0, 0.8);
  transition: rotate 0.5s var(--curva);
}
.constancia:hover {
  rotate: 0deg;
}
.constancia img {
  width: 100%;
  aspect-ratio: 1;
}
@media (max-width: 639px) {
  .constancia {
    left: 0;
    width: 52%;
  }
  .rutas__visual {
    padding-bottom: 36%;
  }
}

/* ── Funciona con tu LMS: carrusel infinito ─────────────────────────────────── */
.lms {
  max-width: 760px;
  text-align: center;
}
.lms > p:last-child {
  margin-top: 14px;
  color: var(--texto-tenue);
  font-size: 1.1rem;
}
.carrusel {
  margin-top: 36px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.carrusel__pista {
  display: flex;
  width: max-content;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  animation: desplazar 34s linear infinite;
}
.carrusel:hover .carrusel__pista {
  animation-play-state: paused;
}
.carrusel__pista li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: 14px;
  padding: 12px 22px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: var(--superficie);
  box-shadow: var(--sombra-1);
  color: var(--titulo);
  font-weight: 650;
  white-space: nowrap;
}
.carrusel__pista li::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primario), var(--verde));
}
@keyframes desplazar {
  to {
    transform: translateX(-50%);
  }
}
/* Seguridad */
.seguridad {
  display: grid;
  gap: 18px;
}
@media (min-width: 640px) {
  .seguridad {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1100px) {
  .seguridad {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
  }
}

/* Cómo empezar */
.tres {
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: paso;
}
@media (min-width: 760px) {
  .tres {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
  }
}
.tres li {
  position: relative;
  padding: 30px 28px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  transition:
    transform 0.35s var(--curva),
    box-shadow 0.35s var(--curva);
}
.tres li:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-2);
}
.tres__numero {
  display: block;
  margin-bottom: 12px;
  background: var(--degradado-texto);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
}
.tres li p {
  margin-top: 8px;
  color: var(--texto-tenue);
}

/* Preguntas frecuentes */
.preguntas {
  border-top: 1px solid var(--borde);
}
.preguntas details {
  border-bottom: 1px solid var(--borde);
}
.preguntas summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 4px;
  cursor: pointer;
  list-style: none;
}
.preguntas summary::-webkit-details-marker {
  display: none;
}
.preguntas summary h3 {
  font-size: 1.08rem;
  font-weight: 650;
}
.preguntas summary::after {
  content: '';
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--borde-fuerte);
  background:
    linear-gradient(var(--titulo), var(--titulo)) center / 12px 2px no-repeat,
    linear-gradient(var(--titulo), var(--titulo)) center / 2px 12px no-repeat;
  transition:
    transform 0.3s var(--curva),
    background-color 0.3s;
}
.preguntas details[open] summary::after {
  transform: rotate(45deg);
}
.preguntas summary:hover h3 {
  color: var(--primario);
}
.preguntas details p {
  padding: 0 48px 24px 4px;
  color: var(--texto-tenue);
}
@supports selector(::details-content) {
  .preguntas details {
    interpolate-size: allow-keywords;
  }
  .preguntas details::details-content {
    block-size: 0;
    overflow: hidden;
    transition:
      block-size 0.35s var(--curva),
      content-visibility 0.35s allow-discrete;
  }
  .preguntas details[open]::details-content {
    block-size: auto;
  }
}

/* Cierre */
.cierre {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(48px, 6vw, 88px) 24px;
  border-radius: 28px;
  background: linear-gradient(135deg, #0c2160 0%, #1d4ed8 58%, #1f5a8c 82%, #2c7a3a 100%);
  color: #e6edff;
  text-align: center;
  box-shadow: 0 40px 80px -30px rgba(29, 78, 216, 0.55);
}
.cierre h2 {
  max-width: 18em;
  margin-inline: auto;
  color: #ffffff;
}
.cierre > p {
  margin-top: 16px;
  font-size: 1.15rem;
}
.cierre__botones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}
@media (max-width: 479px) {
  .cierre__botones .boton {
    flex: 1 1 100%;
  }
}
.cierre__brillo {
  position: absolute;
  inset: -50%;
  z-index: -1;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.18), transparent 30%),
    radial-gradient(circle at 70% 70%, rgba(91, 181, 67, 0.35), transparent 32%);
  animation: girar 28s linear infinite;
}
@keyframes girar {
  to {
    transform: rotate(360deg);
  }
}

/* Pie */
.pie {
  padding-block: 40px;
  border-top: 1px solid var(--borde);
}
.pie__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.pie__marca p {
  margin-top: 10px;
  color: var(--texto-tenue);
  font-size: 0.92rem;
}
.pie__enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}
.pie__enlaces a,
.pie__marca a:not(.marca) {
  color: var(--texto-tenue);
  font-size: 0.95rem;
  font-weight: 550;
  text-decoration: none;
}
.pie__enlaces a:hover,
.pie__marca a:not(.marca):hover {
  color: var(--primario);
  text-decoration: underline;
}

/* ═══ Movimiento ════════════════════════════════════════════════════════════════
   Todo lo que se mueve va aquí, dentro de `prefers-reduced-motion: no-preference`.
   Sin esta preferencia (o con `reduce`) la página queda quieta y completa. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  /* Entrada escalonada del hero (al cargar). */
  .entra {
    animation: subir 0.9s var(--curva) both;
  }
  .entra--2 {
    animation-delay: 0.08s;
  }
  .entra--3 {
    animation-delay: 0.16s;
  }
  .entra--4 {
    animation-delay: 0.24s;
  }
  .entra--5 {
    animation-delay: 0.32s;
  }
  .hero__escena {
    animation: escena 1.2s var(--curva) 0.1s both;
  }
  .insignia {
    animation: aparecer 0.8s var(--curva) 0.9s both;
  }
  .marco--telefono .flota {
    animation: flotar 7s ease-in-out 1.2s infinite;
  }

  /* El hero inclinado en 3D en pantallas grandes; el ratón lo mueve (sitio.js). */
  @media (min-width: 1024px) {
    .hero__visual .marco--navegador .inclina {
      transform: perspective(1600px) rotateY(calc(-9deg + var(--mx) * 3deg))
        rotateX(calc(5deg - var(--my) * 3deg));
    }
  }

  /* Inclinación de las capturas al pasar el ratón (sitio.js pone --rx/--ry). */
  .tilt:hover .inclina {
    transition-duration: 0.15s;
  }

  /* Parallax del hero al bajar (solo donde hay animation-timeline). */
  @supports (animation-timeline: scroll()) {
    .hero__visual {
      animation: deriva linear both;
      animation-timeline: scroll(root);
      animation-range: 0 100vh;
    }
    .hero__texto {
      animation: deriva-texto linear both;
      animation-timeline: scroll(root);
      animation-range: 0 100vh;
    }
  }

  /* Aparición al bajar con CSS (Chrome, Edge). */
  @supports (animation-timeline: view()) {
    .revelar {
      animation: revelar linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 24%;
    }
    .r2 {
      animation-range: entry 5% cover 28%;
    }
    .r3 {
      animation-range: entry 10% cover 32%;
    }
    .r4 {
      animation-range: entry 15% cover 36%;
    }

    /* El flujo se arma al bajar: la línea se dibuja y los pasos se encienden en orden. */
    .flujo__trazo {
      animation: trazar linear both;
      animation-timeline: --flujo;
      animation-range: entry 60% cover 44%;
    }
    .paso {
      animation: paso linear both;
      animation-timeline: --flujo;
    }
    .paso .paso__nodo {
      animation: nodo linear both;
      animation-timeline: --flujo;
    }
    .p1,
    .p1 .paso__nodo {
      animation-range: entry 60% cover 22%;
    }
    .p2,
    .p2 .paso__nodo {
      animation-range: cover 20% cover 29%;
    }
    .p3,
    .p3 .paso__nodo {
      animation-range: cover 27% cover 36%;
    }
    .p4,
    .p4 .paso__nodo {
      animation-range: cover 34% cover 44%;
    }
  }

  /* Respaldo con IntersectionObserver (sitio.js pone html.sin-timeline y .visto). */
  html.sin-timeline .revelar {
    transition:
      opacity 0.8s var(--curva),
      translate 0.8s var(--curva),
      scale 0.8s var(--curva);
  }
  html.sin-timeline .r2 {
    transition-delay: 0.08s;
  }
  html.sin-timeline .r3 {
    transition-delay: 0.16s;
  }
  html.sin-timeline .r4 {
    transition-delay: 0.24s;
  }
  html.sin-timeline .revelar:not(.visto) {
    opacity: 0;
    translate: 0 32px;
    scale: 0.97;
  }
  html.sin-timeline .flujo__trazo {
    transition: stroke-dashoffset 1.8s var(--curva) 0.1s;
  }
  html.sin-timeline .flujo:not(.visto) .flujo__trazo {
    stroke-dashoffset: 1;
  }
  html.sin-timeline .paso,
  html.sin-timeline .paso__nodo {
    transition:
      opacity 0.6s var(--curva),
      scale 0.6s var(--curva),
      background-color 0.4s,
      color 0.4s,
      box-shadow 0.4s;
  }
  html.sin-timeline .p2,
  html.sin-timeline .p2 .paso__nodo {
    transition-delay: 0.45s;
  }
  html.sin-timeline .p3,
  html.sin-timeline .p3 .paso__nodo {
    transition-delay: 0.9s;
  }
  html.sin-timeline .p4,
  html.sin-timeline .p4 .paso__nodo {
    transition-delay: 1.35s;
  }
  html.sin-timeline .flujo:not(.visto) .paso {
    opacity: 0.4;
  }
  html.sin-timeline .flujo:not(.visto) .paso__nodo {
    scale: 0.85;
    background: var(--superficie);
    color: var(--texto-tenue);
    border-color: var(--borde-fuerte);
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .luz,
  .etiqueta__punto::after,
  .cierre__brillo,
  .carrusel__pista {
    animation: none;
  }
  .carrusel {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .carrusel__pista {
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
    gap: 12px;
    padding-inline: 16px;
  }
  .carrusel__pista li {
    margin-right: 0;
  }
  .carrusel__pista li[aria-hidden='true'] {
    display: none;
  }
  .boton,
  .tarjeta,
  .resuelve__item,
  .tres li,
  .icono,
  .captura img,
  .constancia,
  .capa,
  .inclina,
  .boton::after {
    transition: none;
  }
  .boton:hover,
  .tarjeta:hover,
  .resuelve__item:hover,
  .tres li:hover {
    transform: none;
  }
  .tarjeta:hover .captura img,
  .tarjeta:hover .icono {
    transform: none;
  }
}

@keyframes subir {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* Sin opacidad: la captura del hero es el LCP y se pinta desde el primer cuadro. */
@keyframes escena {
  from {
    transform: translateY(40px) scale(0.97);
  }
  to {
    transform: none;
  }
}
@keyframes aparecer {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes flotar {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}
@keyframes deriva {
  to {
    transform: translateY(-64px);
  }
}
@keyframes deriva-texto {
  to {
    transform: translateY(-24px);
    opacity: 0.4;
  }
}
@keyframes revelar {
  from {
    opacity: 0;
    translate: 0 36px;
    scale: 0.97;
  }
  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}
@keyframes trazar {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes paso {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}
@keyframes nodo {
  0% {
    scale: 0.85;
    background: var(--superficie);
    color: var(--texto-tenue);
    border-color: var(--borde-fuerte);
    box-shadow: none;
  }
  70% {
    scale: 1.08;
  }
  100% {
    scale: 1;
    background: var(--primario);
    color: var(--primario-contraste);
    border-color: var(--primario);
    box-shadow: var(--anillo);
  }
}

@media print {
  .encabezado,
  .hero__fondo,
  .carrusel {
    display: none;
  }
  .revelar,
  .paso {
    opacity: 1 !important;
    translate: none !important;
    scale: none !important;
  }
}