/* ============================================================
   slides.css — Deck, slide (100vh), transiciones, layouts base
   ============================================================ */

.deck {
  position: relative;
  z-index: 1;
  height: 100vh;
  width: 100vw;
}

.slide {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  justify-content: center;
  padding: var(--pad);
  padding-bottom: calc(var(--pad) + 60px); /* espacio para controles */
  overflow: hidden;
}

.slide.is-active {
  display: flex;
  animation: slideIn 0.6s var(--ease) both;
}

@keyframes slideIn {
  from { opacity: 0; transform: translateY(26px) scale(0.99); }
  to   { opacity: 1; transform: none; }
}

/* Entradas escalonadas para hijos con [data-rise] */
.slide.is-active [data-rise] {
  animation: rise 0.7s var(--ease) both;
}
.slide.is-active [data-rise="1"] { animation-delay: 0.05s; }
.slide.is-active [data-rise="2"] { animation-delay: 0.15s; }
.slide.is-active [data-rise="3"] { animation-delay: 0.25s; }
.slide.is-active [data-rise="4"] { animation-delay: 0.35s; }
.slide.is-active [data-rise="5"] { animation-delay: 0.45s; }
.slide.is-active [data-rise="6"] { animation-delay: 0.55s; }
@keyframes rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

/* ---- Cabecera común de slide ---- */
.slide__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: "Sora", sans-serif;
  font-size: clamp(0.72rem, 1vw, 0.85rem);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--stroke);
  border-radius: 999px;
  background: var(--glass);
  width: max-content;
}
.slide__eyebrow .en { color: var(--text-faint); font-weight: 500; letter-spacing: 0.1em; }

.slide__title {
  font-size: clamp(1.8rem, 4.4vw, 3.4rem);
  margin-top: 1rem;
}
/* Título tipo "pregunta" en slides de tecnología: acento sutil */
.slide__title--q {
  margin-top: 0.2rem;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Slides de tecnología: alinear desde arriba para que el stepper
   quede en una posición constante entre los 4 pasos. */
.slide[data-type^="tech-"] { justify-content: flex-start; padding-top: clamp(1.2rem, 4.5vh, 2.6rem); }
.slide[data-type^="tech-"] .split { align-items: center; }
.slide[data-type^="tech-"] .slide__inner { gap: clamp(0.7rem, 1.7vw, 1.25rem); }
/* En el slide "¿Qué es?" el orbe es más compacto para dejar sitio a las claves */
.slide[data-type="tech-what"] .orbit { width: min(300px, 62vw); }
.slide[data-type^="tech-"] .slide__title--q { font-size: clamp(1.7rem, 3.8vw, 2.9rem); }

.slide__lead {
  color: var(--text-dim);
  font-size: clamp(0.95rem, 1.5vw, 1.15rem);
  max-width: 60ch;
}

/* Contenedor central máximo */
.slide__inner {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2.4vw, 2rem);
}

/* Layout de dos columnas (texto + ilustración) */
.split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
}

/* Bilingüe genérico: ES arriba, EN debajo */
.bi .en { display: block; color: var(--text-dim); }
.bi--muted .en { color: var(--text-faint); }