/* =========================================================
   Puesta en marcha y piloto de 30 días: dos etapas en línea
   de tiempo (escena secuencial, base.css) y cierre.
   ========================================================= */
.linea-tiempo__etapa {
  margin: var(--esp-7) 0 var(--esp-5);
  font-size: var(--texto-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.linea-tiempo__etapa:first-of-type {
  margin-top: 0;
}

.linea-tiempo {
  position: relative;
  display: grid;
  /* Tres pasos por etapa (Cómo funciona) */
  grid-template-columns: repeat(3, 1fr);
  gap: var(--esp-5);
  margin: 0;
  padding: 0;
  list-style: none;
  /* Cada paso entra al terminar el anterior, desde abajo. */
  --desplazamiento-reveal: 0 48px;
}

.linea-tiempo::before {
  content: "";
  position: absolute;
  top: 22px;
  left: 22px;
  right: 22px;
  height: 2px;
  background: var(--color-oscuro-linea);
}

.fase {
  position: relative;
}

/* list-item respeta <ol start>: la segunda etapa sigue en 5. */
.fase::before {
  content: counter(list-item);
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--esp-4);
  border-radius: 50%;
  background: var(--color-acento);
  font-weight: 800;
  color: var(--color-blanco);
}

.fase__plazo {
  font-size: var(--texto-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-oscuro-tenue);
}

.fase__titulo {
  margin: var(--esp-1) 0 var(--esp-2);
  font-size: var(--texto-lg);
  font-weight: 700;
}

.fase__texto {
  font-size: var(--texto-sm);
}

.fase__texto a {
  color: var(--color-blanco);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Tarjeta de vidrio (.vidrio) teñida con la luz del neón, sobre la
   fotografía difuminada de la sección. */
.cierre {
  margin-top: var(--esp-8);
  padding: var(--esp-7) var(--esp-6);
  border-radius: var(--radio-lg);
  --vidrio-tinte: var(--vidrio-tinte-acento);
  text-align: center;
  color: var(--color-blanco);
}

.cierre__logo {
  width: 56px;
  margin: 0 auto var(--esp-5);
}

/* Logotipo completo (más ancho que alto) en vez del icono. */
.cierre__logo--ancho {
  width: min(260px, 70%);
}

/* Logo en dos piezas: el mismo SVG apilado dos veces y recortado por la
   franja vacía entre el ícono de tarjetas y las letras (--logo-corte). */
.cierre__marca {
  position: relative;
  aspect-ratio: var(--logo-proporcion);
}

.cierre__pieza {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Cada recorte deja margen arriba, abajo y hacia fuera (--logo-holgura) para
   que el resplandor no se corte; el borde interior va en el hueco. */
.cierre__pieza--tarjetas {
  clip-path: inset(var(--logo-holgura-neg) calc(100% - var(--logo-corte)) var(--logo-holgura-neg) var(--logo-holgura-neg));
  transform-origin: var(--logo-centro-tarjetas) 50%;
  filter: var(--brillo-tarjetas);
}

.cierre__pieza--letras {
  clip-path: inset(var(--logo-holgura-neg) var(--logo-holgura-neg) var(--logo-holgura-neg) var(--logo-corte));
  filter: var(--brillo-letras);
}

/* Cierre del motion (src/scenes/cierre.js), contado desde que el cierre se
   revela (js/reveal.js marca .es-visible) más --inicio-logo:
   - tarjetas: giro de moneda (vuelta y media en Y, escala 0,5 → 1);
   - letras: se descubren de izquierda a derecha (clipPath, power3.inOut);
   - destello cian que recorre las letras al terminar de descubrirse. */
.cierre {
  --inicio-logo: calc(var(--t-lenta) / 2);
}

.cierre.es-visible .cierre__pieza--tarjetas {
  animation: giro-moneda var(--moneda-duracion) var(--curva-moneda)
    calc(var(--inicio-logo) + var(--cierre-tarjetas-inicio)) backwards;
}

.cierre.es-visible .cierre__pieza--letras {
  animation:
    descubrir-letras var(--cierre-letras-duracion) var(--curva-letras)
      calc(var(--inicio-logo) + var(--cierre-letras-inicio)) backwards,
    destello-letras var(--cierre-destello-duracion) ease-out
      calc(var(--inicio-logo) + var(--cierre-destello-inicio));
}

@keyframes descubrir-letras {
  from {
    clip-path: inset(var(--logo-holgura-neg) 100% var(--logo-holgura-neg) var(--logo-corte));
  }

  to {
    clip-path: inset(var(--logo-holgura-neg) var(--logo-holgura-neg) var(--logo-holgura-neg) var(--logo-corte));
  }
}

/* Sube rápido (0,15 s) y vuelve al brillo de reposo (0,4 s), como en el motion. */
@keyframes destello-letras {
  27% {
    filter: var(--destello-letras);
  }

  to {
    filter: var(--brillo-letras);
  }
}

@keyframes giro-moneda {
  from {
    opacity: 0;
    transform: perspective(var(--moneda-perspectiva)) rotateY(var(--moneda-vueltas)) scale(var(--moneda-escala-inicial));
  }

  15% {
    opacity: 1;
  }

  to {
    transform: perspective(var(--moneda-perspectiva));
  }
}

@media (prefers-reduced-motion: reduce) {
  .cierre.es-visible .cierre__pieza {
    animation: none;
  }
}

.cierre__acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--esp-3);
}

.cierre__titulo {
  font-size: var(--texto-xl);
  font-weight: 800;
  color: var(--color-blanco);
}

.cierre__texto {
  max-width: 560px;
  margin: var(--esp-3) auto var(--esp-6);
  opacity: 0.9;
}

.cierre .boton--secundario {
  color: var(--color-blanco);
}

.cierre .boton--secundario:hover {
  background: var(--color-blanco);
  color: var(--color-acento);
}

/* La sección deja sitio abajo para el pie de vidrio que se le superpone
   (pie-skyn3t--superpuesto, pie.css). */
.seccion--con-pie {
  padding-bottom: calc(var(--esp-8) + var(--alto-pie-superpuesto));
}

@media (max-width: 860px) {
  .linea-tiempo {
    grid-template-columns: 1fr;
  }

  /* En una columna cada paso (y el título de etapa) entra al llegar a él. */
  .linea-tiempo,
  .linea-tiempo__etapa {
    --escena-escalonada: 0;
  }

  .linea-tiempo::before {
    top: 22px;
    bottom: 22px;
    left: 21px;
    right: auto;
    width: 2px;
    height: auto;
  }

  .fase {
    padding-left: 64px;
  }

  .fase::before {
    position: absolute;
    left: 0;
    top: 0;
  }
}