/* ===========================================================================
   slides.css — layout de slide, plantillas, clases de acento, transiciones.
   Plantillas: .slide--num · .slide--bubbles · .slide--zero · .slide--foto · .slide--closing
   =========================================================================== */

#stage  { position: absolute; inset: 0; }
#slides { position: absolute; inset: 0; }

/* ---- Slide base + transicion NORMAL entre slides (§5.6, §9) ----------- */
.slide {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: max(var(--s6), env(safe-area-inset-top)) var(--s4)
           max(var(--s6), env(safe-area-inset-bottom));
  background: var(--arena);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 350ms ease-out, transform 350ms ease-out;
  will-change: opacity, transform;
}
@supports not (min-height: 100dvh) {
  .slide { min-height: 100vh; min-height: calc(var(--vh, 1vh) * 100); }
}

.slide.is-active  { opacity: 1; transform: translateY(0); }
/* saliente: solo opacity 1 -> 0 (§9) */
.slide.is-leaving { opacity: 0; transform: translateY(0); transition: opacity 350ms ease-out; }
/* EL CORTE: la slide del cero se monta SIN fade y SIN translate (§5.6) */
.slide.no-anim { transition: none !important; }

/* ---- Contenedor interno (§5.4) --------------------------------------- */
.slide__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 32rem;
  margin-inline: auto;
  padding-inline: var(--s6);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.slide__inner > .kicker { margin-bottom: var(--s5); }
.slide__hero            { margin-bottom: var(--s3); }
.slide__line            { margin-bottom: var(--s5); }
.slide__intro           { margin-bottom: var(--s5); }
.slide__figrow          { margin-bottom: var(--s5); }
.slide__ranking         { margin-bottom: var(--s5); }
.slide__glyph           { margin-bottom: var(--s4); }
.slide__and             { margin-bottom: var(--s5); }

/* ---- Escala tipografica (§5.3) ------------------------------------- */
.slide__hero {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 0.95;
  font-size: clamp(2rem, 9vw, 3rem);          /* hero de TEXTO */
  color: var(--accent-hondo);
  font-variant-numeric: lining-nums tabular-nums;
}
.slide__hero--num  { font-size: clamp(3.75rem, 22vw, 6.5rem); }   /* numero GIGANTE */
.slide__hero--quote { color: var(--rosa-hondo); }
.slide__hero--zero {
  font-weight: 400;                            /* fino, §7 slide 12 */
  font-size: clamp(4rem, 26vw, 7rem);
  color: var(--tinta-suave);
}
.slide__pct {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 11vw, 3.25rem);
  color: var(--accent-hondo);
  margin-left: 0.05em;
}

.slide__line {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.05rem, 4.6vw, 1.3rem);
  color: var(--tinta);
}
.slide__intro {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.05rem, 4.6vw, 1.2rem);
  color: var(--tinta);
}
.slide__foot {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--tinta-media);
  max-width: 30rem;
}
.slide__ranking {
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--tinta-media);
  line-height: 1.6;
}
.slide__figrow {
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--tinta-media);
}
.slide__figrow .count { font-family: var(--font-ui); font-weight: 700; color: var(--tinta); }

/* glifo 😂 (§7 slide 9) */
.slide__glyph {
  font-size: clamp(4rem, 24vw, 7rem);
  line-height: 1;
}
.slide__glyph[data-reveal]            { transform: scale(0.6); }
.slide__glyph[data-reveal].is-revealed {
  transform: scale(1);
  transition: opacity 500ms cubic-bezier(.34, 1.56, .64, 1),
              transform 500ms cubic-bezier(.34, 1.56, .64, 1);
}

/* "Y sigue." (§7 slide 14) */
.slide__and {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.4rem;
  color: var(--azul-hondo);
}

/* lista de apodos — opcional (§7) */
.slide__list {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  margin-bottom: var(--s5);
}
.slide__list-item {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.05rem, 4.8vw, 1.2rem);
  color: var(--tinta);
}

/* dos cifras apiladas — mi-vida (§7 slide 15) */
.slide__figbig {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 8vw, 2.6rem);
  line-height: 1.15;
  margin-bottom: var(--s3);
}
.slide__figbig--rosa { color: var(--rosa-hondo); }
.slide__figbig--lila { color: var(--lila-hondo); }
.slide__figbig .count { font: inherit; color: inherit; }

/* ---- Clases de acento (§5.1) ------------------------------------- */
.accent-azul  { --accent: var(--azul);  --accent-hondo: var(--azul-hondo);  }
.accent-lila  { --accent: var(--lila);  --accent-hondo: var(--lila-hondo);  }
.accent-rosa  { --accent: var(--rosa);  --accent-hondo: var(--rosa-hondo);  }
.accent-verde { --accent: var(--verde); --accent-hondo: var(--verde-hondo); }

/* El motivo de hortensia (.slide__bloom) se quitó: a baja opacidad los florets
   se fundían en un rectángulo tintado. Fondo liso --arena en todas las slides. */

/* ---- Plantilla zero — slide del cero (§7 slide 12) ----------------- */
.slide--zero { background: var(--arena-lavada); }
.slide--zero .slide__inner {
  gap: var(--s7);                 /* doble aire vertical */
  letter-spacing: 0.01em;
}
.slide--zero .slide__inner > * { margin: 0; }
/* contraste: sobre --arena-lavada, --tinta-suave da 4.4:1 (falla texto normal).
   line + foot suben a --tinta-media (~7:1). El "0" se queda en --tinta-suave. */
.slide--zero .kicker,
.slide--zero .slide__line,
.slide--zero .slide__foot { color: var(--tinta-media); }
/* el "0" hace un fade lento de 900 ms, solo opacity (§5.6) */
.slide__hero--zero[data-reveal]            { transform: none; }
.slide__hero--zero[data-reveal].is-revealed { transition: opacity 900ms ease-out; }

/* ---- Plantilla foto — foto-boda (§7 slide 12·5, §11) --------------- */
.slide--foto {
  padding: 0;
  transform: none;
  transition: opacity 700ms ease-out;   /* entrada mas lenta que lo normal */
}
.slide--foto.is-active  { transform: none; }
.slide--foto.is-leaving { transform: none; }
.foto-boda__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Plantilla closing — cierre (§7 slide 16) --------------------- */
/* El cierre va sin motivo: fondo liso --arena, el 1.734 en --lila-hondo
   respirando sobre la arena. Roshi confirmó que se ve mejor así. */
.slide__cierre-l1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.15rem, 5vw, 1.5rem);
  color: var(--tinta);
  line-height: 1.3;
}
.slide__cierre-num {
  display: block;
  font-weight: 600;
  font-size: clamp(3rem, 18vw, 5rem);
  color: var(--lila-hondo);
  line-height: 1;
  margin: var(--s3) 0;
}
.slide__cierre-l2 {
  margin-top: var(--s4);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.3rem, 5.6vw, 1.7rem);
  color: var(--lila-hondo);
}
.slide__cierre-sig {
  align-self: flex-end;
  /* legible: --tinta-media sobre --arena */
  margin-top: var(--s4);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--tinta-media);
}

/* ---- Burbujas de chat (§7 slides 1, 11) --------------------------- */
.bubbles {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  margin-bottom: var(--s5);
}
.bubble {
  max-width: 78%;
  padding: 10px 14px;
  border-radius: 18px;
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.4;
  box-shadow: var(--sombra);
  text-align: left;
}
/* Un lado claro, el otro de color — patrón real de chat. --arena-2 se fundía
   con el fondo de arena y las burbujas de Paulo no se leían como burbujas. */
.bubble--me   { align-self: flex-end;   background: var(--blanco-calido); color: var(--tinta); }
.bubble--them { align-self: flex-start; background: var(--rosa-claro);    color: var(--tinta); }
.bubble__name {
  display: block;
  font-size: 0.75rem;
  color: var(--tinta-media);   /* 12px sobre arena-2 / rosa-claro: necesita el tono legible */
  margin-bottom: 2px;
}

/* ---- Gatos: foto real o siluetas de respaldo (§7 slide 13) -------- */
.gatos-media { margin-top: var(--s5); display: flex; justify-content: center; }
.gatos-foto {
  max-width: 260px;
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: var(--sombra);
}
.gatos-siluetas svg { width: 150px; height: auto; }
.gatos-siluetas .cat-verde { color: var(--verde); }
.gatos-siluetas .cat-tinta { color: var(--tinta); }

/* ---- Estados de reveal (§5.6) ----------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 420ms ease-out, transform 420ms ease-out;
}
[data-reveal].is-revealed { opacity: 1; transform: translateY(0); }

.bubble[data-reveal]             { transform: translateY(12px) scale(0.97); }
.bubble[data-reveal].is-revealed { transform: translateY(0) scale(1); }

.slide__hero--quote[data-reveal]             { transform: scale(0.9); }
.slide__hero--quote[data-reveal].is-revealed { transform: scale(1); }

/* ---- prefers-reduced-motion (§5.6) ---------------------------- */
@media (prefers-reduced-motion: reduce) {
  .slide,
  .slide.is-leaving,
  .slide--foto { transition-duration: 120ms; }
  [data-reveal] { transition-duration: 120ms; transform: none; }
  .slide__glyph[data-reveal],
  .slide__glyph[data-reveal].is-revealed { transform: none; transition-duration: 120ms; }
}