/* =====================================================================
   interactive.css — Simulador 24 h (mapa) y "Cómo funciona" en scroll.
   Solo variables de tokens.css. Los estados base son el estado FINAL:
   las animaciones solo definen el "from", así con reducir movimiento
   (animation: none) todo queda visible y correcto.
   ===================================================================== */

/* ---------- Simulador: mapa + panel de resultados ---------- */
.sim {
  display: grid; gap: clamp(.75rem, 1.6vw, 1rem);
  background: var(--color-ink); color: var(--color-on-ink);
  border-radius: var(--radius-lg); padding: clamp(.6rem, 1.3vw, 1rem);
  box-shadow: 0 40px 100px rgba(14, 14, 16, .22);
  grid-template-areas: "stage" "panel" "foot";
}
.sim__stage { grid-area: stage; display: grid; gap: .8rem; min-width: 0; }
.sim__panel { grid-area: panel; display: grid; gap: .6rem; align-content: start; min-width: 0; }
.sim__foot { grid-area: foot; display: grid; gap: .35rem; padding: 0 .25rem; }
/* Ordenador: el simulador entero cabe en la pantalla (alto según la ventana) y el mapa ocupa el hueco que queda */
@media (min-width: 1000px) {
  .sim {
    grid-template-columns: minmax(0, 1fr) clamp(260px, 24vw, 320px); grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas: "stage panel" "foot foot";
    height: clamp(460px, calc(100svh - 112px), 640px); gap: .7rem; padding: .75rem;
  }
  .sim__stage { grid-template-rows: minmax(0, 1fr) auto; gap: .6rem; }
}

.citymap {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: calc(var(--radius-lg) - 8px);
  background: radial-gradient(120% 120% at 50% 40%, #EEF2F8, #D9E1EE);
}
/* El canvas se adapta a cualquier proporción: el alto se ajusta a la pantalla para ver todo el simulador a la vez */
@media (min-width: 1000px) { .citymap { height: 100%; } }
@media (max-width: 999px) { .citymap { height: clamp(260px, calc(100svh - 430px), 62vw); } }
@media (max-width: 599px) { .citymap { height: clamp(200px, calc(100svh - 430px), 92vw); } }
.citymap__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Aviso (relevos y horas sin coche) */
.sim__banner {
  position: absolute; left: 50%; top: 14px; translate: -50% 0; z-index: 3; margin: 0; max-width: calc(100% - 28px);
  padding: .6rem 1.05rem; border-radius: 999px; text-align: center;
  font-size: .86rem; font-weight: 700; line-height: 1.25;
  background: var(--color-ink); color: var(--color-on-ink); border: 1px solid rgba(255, 255, 255, .15);
  box-shadow: 0 16px 36px rgba(4, 8, 24, .35);
  opacity: 0; transform: translateY(-8px); transition: opacity .35s ease, transform .35s var(--ease-out); pointer-events: none;
}
.sim__banner.is-visible { opacity: 1; transform: none; }
.sim__banner.is-warn { background: #3A0D12; color: #FFB3BA; border-color: rgba(255, 138, 147, .35); }
.sim__banner.is-good { background: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-accent); }

/* Vista del anuncio (dentro: cartel o pantalla · fuera: vinilo) */
.sim__peek {
  position: absolute; left: 14px; bottom: 14px; z-index: 2; pointer-events: none;
  width: clamp(180px, 17vw, 230px); margin: 0; padding: .4rem; border-radius: 18px;
  background: rgba(8, 12, 30, .72); color: #FFFFFF; border: 1px solid rgba(255, 255, 255, .13);
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 18px 40px rgba(4, 8, 24, .3);
  opacity: 0; transform: translateY(14px) scale(.94); transform-origin: left bottom;
  transition: opacity .35s ease, transform .6s var(--ease-out);
}
.sim__peek.is-visible { opacity: 1; transform: none; }
.sim__peek-media { position: relative; border-radius: 13px; overflow: hidden; }
.sim__peek-media img { display: block; width: 100%; height: auto; aspect-ratio: 280 / 208; object-fit: cover; }
.sim__peek.is-visible .sim__peek-media img { animation: peek-zoom 2.6s var(--ease-out) both; }
@keyframes peek-zoom { from { transform: scale(1.12); } }
.sim__peek-tag {
  position: absolute; left: .4rem; top: .4rem; padding: .2rem .55rem; border-radius: 999px;
  font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: var(--color-accent); color: var(--color-on-accent);
}
.sim__peek-tag[data-fmt="pantalla"] { background: var(--color-primary); color: #FFFFFF; }
.sim__peek-tag[data-fmt="vinilo"] { background: #FFFFFF; color: var(--color-ink); }
.sim__peek figcaption { display: grid; gap: .1rem; padding: .45rem .3rem .15rem; font-size: .72rem; line-height: 1.3; }
.sim__peek strong { font-size: .8rem; color: var(--color-accent); }
.sim__peek figcaption span { opacity: .8; }
/* Ordenador con pantalla baja: la tarjeta crece con el alto del mapa para no taparlo */
@media (min-width: 1000px) { .sim__peek { width: clamp(150px, min(17vw, 30svh), 230px); } }
@media (min-width: 1000px) and (max-height: 720px) { .sim__peek figcaption span { display: none; } }
@media (max-width: 599px) {
  .sim__banner { left: 10px; right: 10px; top: 10px; translate: none; max-width: none; font-size: .76rem; padding: .5rem .8rem; border-radius: 14px; }
  .sim__peek { left: 10px; bottom: 10px; width: 128px; padding: .28rem; border-radius: 13px; }
  .sim__peek-media { border-radius: 9px; }
  .sim__peek figcaption { padding: .3rem .15rem .05rem; }
  .sim__peek figcaption span { display: none; }
  .sim__peek strong { font-size: .68rem; }
  .sim__peek-tag { font-size: .52rem; left: .25rem; top: .25rem; }
}

/* Controles bajo el mapa */
.sim__controls { display: grid; grid-template-columns: auto 1fr; gap: .8rem 1rem; align-items: center; padding: 0 .25rem; }
.sim__play {
  flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 0;
  background: var(--color-accent); color: var(--color-on-accent); transition: transform .2s var(--ease-out), background .2s;
}
.sim__play:hover { transform: scale(1.06); background: #FFFFFF; }
.sim__icon-play { display: none; }
.sim.is-paused .sim__icon-play { display: block; }
.sim.is-paused .sim__icon-pause { display: none; }
.sim__timeline { min-width: 0; }
.sim__range { display: block; }
.sim__range input { width: 100%; margin: 0; accent-color: var(--color-accent); height: 24px; cursor: pointer; }
.sim__hours { display: grid; grid-template-columns: repeat(14, 1fr); gap: 3px; margin-top: .3rem; }
.sim__hours span { height: 10px; border-radius: 3px; background: rgba(255, 255, 255, .1); transition: background .4s ease; }
.sim__hours span.is-on { background: var(--color-accent); }
.sim__hours span.is-now { box-shadow: 0 0 0 2px var(--color-on-ink); }
.sim__hours-legend { display: flex; justify-content: space-between; margin-top: .3rem; font-size: .66rem; opacity: .55; }

/* Panel: reloj y resultados grandes */
.sim__clock-row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem;
  padding: .85rem 1rem; border-radius: 20px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08);
}
.sim__sky {
  flex: none; width: 38px; height: 38px; border-radius: 50%; position: relative; overflow: hidden;
  background: var(--color-accent); box-shadow: 0 0 24px rgba(212, 255, 63, .55);
  transition: background .6s ease, box-shadow .6s ease;
}
.sim__sky::after { content: ""; position: absolute; width: 100%; height: 100%; border-radius: 50%; background: #0B1030; left: 38%; top: -22%; transform: scale(0); transition: transform .6s var(--ease-out); }
.sim[data-night="true"] .sim__sky { background: #E9ECF8; box-shadow: 0 0 20px rgba(233, 236, 248, .35); }
.sim[data-night="true"] .sim__sky::after { transform: scale(1); }
.sim__time { margin: 0; font-family: var(--font-heading), sans-serif; font-size: 2.1rem; line-height: 1; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; color: #FFFFFF; }
.sim__onduty { margin: .28rem 0 0; font-size: .74rem; font-weight: 600; color: var(--color-accent); }
.sim__onduty.is-off { color: rgba(255, 255, 255, .6); }
.sim-trips { display: grid; justify-items: end; text-align: right; gap: .1rem; }
.sim-trips__num { font-family: var(--font-heading), sans-serif; font-size: 2.1rem; line-height: 1; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; color: var(--color-accent); }
.sim-trips__label { font-size: .64rem; line-height: 1.2; opacity: .6; }

.sim__kpis-head { margin: .2rem .25rem -.1rem; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .6; }
.sim__kpis-head strong { color: var(--color-accent); opacity: 1; }
.sim__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
@media (min-width: 1000px) {
  .sim__kpis { grid-template-columns: 1fr; grid-auto-rows: 1fr; gap: .5rem; min-height: 0; }
  .sim__panel { grid-template-rows: auto auto minmax(0, 1fr); gap: .5rem; min-height: 0; }
  .sim__clock-row { padding: .6rem .9rem; border-radius: 18px; }
  .sim__time, .sim-trips__num { font-size: clamp(1.6rem, 4.4svh, 2.1rem); }
}
.sim-kpi {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: .3rem; min-width: 0;
  padding: 1rem 1.1rem; border-radius: 20px;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08);
}
.sim-kpi__label { align-self: flex-start; font-size: .78rem; font-weight: 600; line-height: 1.25; opacity: .75; }
.sim-kpi__num { display: block; font-family: var(--font-heading), sans-serif; font-size: clamp(2.3rem, 3.8vw, 3.4rem); line-height: .95; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; transform-origin: left center; }
.sim-kpi__sub { font-size: .74rem; line-height: 1.3; opacity: .55; }
.sim-kpi--pax .sim-kpi__num, .sim-kpi--qr .sim-kpi__num { color: var(--color-accent); }
.sim-kpi__qr { position: absolute; right: 1rem; top: 50%; translate: 0 -50%; width: 40px; height: 40px; color: var(--color-accent); opacity: .85; }
.sim-kpi--qr.is-bump .sim-kpi__qr { animation: qr-pop .6s var(--ease-out); }
@keyframes qr-pop { from { transform: scale(1.35) rotate(-8deg); } }
@media (max-width: 999px) { .sim-kpi__qr { display: none; } }
@media (min-width: 1000px) {
  .sim-kpi { padding: .55rem 1rem; gap: .15rem; border-radius: 18px; }
  .sim-kpi__num { font-size: clamp(1.9rem, 6svh, 3.2rem); }
  .sim-kpi__qr { width: 34px; height: 34px; }
}
.sim-kpi--pax { background: linear-gradient(160deg, rgba(212, 255, 63, .14), rgba(212, 255, 63, .03)); border-color: rgba(212, 255, 63, .25); }
.sim-kpi.is-bump .sim-kpi__num { animation: kpi-bump .5s var(--ease-out); }
@keyframes kpi-bump { from { transform: scale(1.18); color: var(--color-accent); } }
/* Móvil y tableta: el mapa, justo debajo la hora y los resultados, y luego los controles */
@media (max-width: 999px) {
  .sim { grid-template-areas: "map" "panel" "ctrl" "foot"; }
  .sim__stage { display: contents; }
  .citymap { grid-area: map; }
  .sim__controls { grid-area: ctrl; }
  .sim-kpi { padding: .8rem .85rem; gap: .2rem; border-radius: 16px; }
  .sim-kpi__label { font-size: .7rem; }
  .sim-kpi__num { font-size: clamp(1.6rem, 6.4vw, 2.6rem); }
  .sim-kpi__sub { font-size: .66rem; }
}
@media (max-width: 599px) {
  .sim { gap: .6rem; }
  .sim__panel { gap: .5rem; }
  .sim__clock-row { padding: .45rem .75rem; gap: .65rem; border-radius: 16px; }
  .sim__sky { width: 26px; height: 26px; }
  .sim__time { font-size: 1.45rem; }
  .sim-trips__num { font-size: 1.45rem; }
  .sim__onduty { margin-top: .2rem; }
  .sim-kpi { padding: .55rem .6rem; justify-content: flex-start; }
  /* Etiqueta siempre a dos líneas: los tres números quedan a la misma altura */
  .sim-kpi__label { font-size: .62rem; line-height: 1.2; min-height: 2.4em; }
  .sim-kpi__sub { font-size: .6rem; }
  .sim__controls { gap: .6rem .8rem; }
  .sim__play { width: 42px; height: 42px; }
}

.sim__summary { margin: 0; font-size: .86rem; opacity: .85; }
.sim__summary:empty { display: none; }
.sim__summary strong { color: var(--color-accent); }
.sim__disclaimer { margin: 0; font-size: .7rem; opacity: .5; }
/* Ordenador: la línea del resumen queda reservada para que el mapa no cambie de alto al terminar el día */
@media (min-width: 1000px) {
  .sim__summary { font-size: .8rem; line-height: 1.35; }
  .sim__summary:empty { display: block; min-height: 1.35em; }
  .sim__summary:empty::before { content: "A las 22:00 verás aquí el resumen del día."; opacity: .55; }
}
@media (max-width: 599px) { .sim__summary { font-size: .74rem; } .sim__disclaimer { font-size: .62rem; } }

/* ---------- Cómo funciona: historia en scroll ---------- */
.story { display: grid; gap: 1.5rem; }
.story__stage {
  position: sticky; top: 84px; z-index: 2;
  height: clamp(280px, 44svh, 400px);
  border-radius: var(--radius-lg); overflow: hidden;
  background: var(--gradient); color: var(--color-on-primary);
  box-shadow: var(--shadow-soft);
}
.story__steps { display: grid; }
.story__step {
  min-height: 62svh; display: flex; flex-direction: column; justify-content: center;
  padding: 1.5rem 0 1.5rem 1.4rem; border-left: 2px solid var(--color-border);
  opacity: .35; transition: opacity .4s ease, border-color .4s ease;
}
.story__step.is-active { opacity: 1; border-left-color: var(--color-primary); }
.story__num { font-family: var(--font-heading), sans-serif; font-size: 3.5rem; line-height: 1; letter-spacing: -0.06em; color: var(--color-primary); margin-bottom: 1rem; }
.story__title { font-size: clamp(1.5rem, 3vw, 2.2rem); margin-bottom: .6rem; max-width: 18ch; }
.story__text { color: var(--color-text-muted); max-width: 38ch; margin: 0; }
@media (min-width: 900px) {
  .story { grid-template-columns: 1.05fr 1fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
  .story__stage { top: calc(50svh - 250px); height: 500px; }
  .story__steps { padding-block: 10svh; }
  .story__step { min-height: 70svh; }
}

/* Pie de la pantalla fija: solo en móvil muestra el texto del paso activo */
.story__caption { display: none; }
@media (max-width: 899px) {
  .story__stage { top: 76px; height: calc(100svh - 76px - 96px); max-height: 640px; min-height: 460px; }
  .story__caption {
    display: block; position: absolute; left: 1rem; right: 1rem; bottom: 2.1rem;
    padding: 1rem 1.1rem; border-radius: var(--radius); background: rgba(5, 15, 60, .35);
    border: 1px solid rgba(255, 255, 255, .18);
  }
  .story__caption-num { font-family: var(--font-heading), sans-serif; font-size: 1.6rem; line-height: 1; letter-spacing: -0.05em; color: var(--color-accent); }
  .story__caption-title { margin: .35rem 0 .3rem; font-family: var(--font-heading), sans-serif; font-size: 1.25rem; line-height: 1.1; letter-spacing: -0.03em; font-weight: 500; }
  .story__caption-text { margin: 0; font-size: .88rem; line-height: 1.4; opacity: .88; }
  .story__caption.is-swap { animation: pop-in .4s var(--ease-out) both; }
  /* Los pasos solo dan recorrido al scroll; su texto se lee en el pie de la pantalla */
  .story__step { min-height: 42svh; opacity: 0 !important; border: 0; padding: 0; }
  .story__steps { margin-top: -30svh; }
  /* Salida rápida: la pantalla se suelta ~140px de scroll después de mostrar el paso 4.
     (alto de la pantalla fija + su top − medio viewport + 140px, sea cual sea el móvil) */
  .story__step:last-child { min-height: calc(clamp(460px, 100svh - 172px, 640px) + 76px - 50svh + 140px); }
  .scene > * { transform-origin: 50% 50%; }
}
.story__progress { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.story__progress span { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .25); overflow: hidden; position: relative; }
.story__progress span::after { content: ""; position: absolute; inset: 0; background: var(--color-accent); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-out); }
.story__stage[data-step="0"] .story__progress span:nth-child(-n+1)::after,
.story__stage[data-step="1"] .story__progress span:nth-child(-n+2)::after,
.story__stage[data-step="2"] .story__progress span:nth-child(-n+3)::after,
.story__stage[data-step="3"] .story__progress span:nth-child(-n+4)::after { transform: scaleX(1); }

.scene { position: absolute; inset: 0 0 2rem; display: grid; place-items: center; padding: 1.25rem; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility .45s; }
.scene.is-active { opacity: 1; visibility: visible; }
.scene__chip {
  position: absolute; right: 1.25rem; top: 1.25rem; margin: 0;
  padding: .45rem .85rem; border-radius: 999px; font-size: .8rem; font-weight: 600;
  background: var(--color-accent); color: var(--color-on-accent);
}

/* Escena 1: chat */
.phone { width: min(88%, 300px); border-radius: 26px; overflow: hidden; background: #ECE8E1; color: var(--color-ink); box-shadow: 0 30px 60px rgba(5, 15, 60, .4); border: 5px solid var(--color-ink); }
.phone__bar { display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; background: var(--color-ink); color: var(--color-on-ink); }
.phone__bar strong { display: block; font-size: .85rem; }
.phone__bar small { font-size: .7rem; opacity: .6; }
.phone__avatar { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--color-accent); }
.phone__body { display: grid; gap: .5rem; padding: .9rem .8rem 1.1rem; min-height: 190px; align-content: start; }
.bubble { margin: 0; max-width: 85%; padding: .55rem .75rem; border-radius: 14px; font-size: .82rem; line-height: 1.35; box-shadow: 0 1px 1px rgba(0, 0, 0, .08); }
.bubble--out { justify-self: end; background: #D9FDD3; border-bottom-right-radius: 4px; }
.bubble--in { justify-self: start; background: var(--color-surface); border-bottom-left-radius: 4px; }
.bubble--typing { justify-self: start; display: inline-flex; gap: 4px; background: var(--color-surface); height: 0; padding: 0 .75rem; overflow: hidden; opacity: 0; }
.bubble--typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--color-text-ghost); }
.scene--chat.is-active .bubble--out { animation: pop-in .5s var(--ease-out) .2s both; }
.scene--chat.is-active .bubble--typing { animation: typing 1.2s ease 0.8s both; }
.scene--chat.is-active .bubble--typing span { animation: dot 0.9s ease-in-out infinite; }
.scene--chat.is-active .bubble--typing span:nth-child(2) { animation-delay: .15s; }
.scene--chat.is-active .bubble--typing span:nth-child(3) { animation-delay: .3s; }
.scene--chat.is-active .bubble--in { animation: pop-in .5s var(--ease-out) 2s both; }
@keyframes pop-in { from { opacity: 0; transform: translateY(10px) scale(.96); } }
@keyframes typing { 0% { height: 0; padding-block: 0; opacity: 0; } 15%, 85% { height: 30px; padding-block: .6rem; opacity: 1; } 100% { height: 0; padding-block: 0; opacity: 0; } }
@keyframes dot { 50% { transform: translateY(-4px); opacity: .5; } }

/* Escena 2: propuesta */
.proposal { width: min(90%, 340px); padding: 1.25rem 1.25rem 1.1rem; border-radius: 20px; background: var(--color-surface); color: var(--color-ink); box-shadow: 0 30px 60px rgba(5, 15, 60, .4); }
.proposal__kicker { margin: 0; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--color-primary); }
.proposal__title { margin: .2rem 0 .9rem; font-family: var(--font-heading), sans-serif; font-size: 1.35rem; letter-spacing: -0.03em; }
.proposal__rows { display: grid; gap: .45rem; }
.proposal__rows li { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .5rem 0; border-bottom: 1px solid var(--color-border); font-size: .85rem; }
.proposal__rows span { color: var(--color-text-muted); }
.proposal__rows strong { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; text-align: right; }
.proposal__rows strong::after { content: "✓"; flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--color-accent); font-size: .7rem; }
.proposal__cta { margin: 1rem 0 0; padding: .7rem; border-radius: 999px; text-align: center; font-weight: 600; font-size: .9rem; background: var(--color-ink); color: var(--color-on-ink); }
.scene--proposal.is-active .proposal { animation: pop-in .5s var(--ease-out) both; }
.scene--proposal.is-active .proposal__rows li { animation: row-in .45s var(--ease-out) both; }
.scene--proposal.is-active .proposal__rows li:nth-child(1) { animation-delay: .35s; }
.scene--proposal.is-active .proposal__rows li:nth-child(2) { animation-delay: .6s; }
.scene--proposal.is-active .proposal__rows li:nth-child(3) { animation-delay: .85s; }
.scene--proposal.is-active .proposal__rows li:nth-child(4) { animation-delay: 1.1s; }
.scene--proposal.is-active .proposal__cta { animation: pop-in .5s var(--ease-out) 1.5s both; }
@keyframes row-in { from { opacity: 0; transform: translateX(16px); } }

/* Escena 3: foto real, el cartel se resalta al "instalarse" */
.install { position: relative; width: min(74%, 290px); aspect-ratio: 3 / 4; border-radius: 22px; overflow: hidden; box-shadow: 0 30px 60px rgba(5, 15, 60, .45); border: 4px solid rgba(255, 255, 255, .9); }
.install img, .install video { width: 100%; height: 100%; object-fit: cover; }
.install__frame {
  position: absolute; left: 22%; top: 30.5%; width: 59%; height: 39%;
  border: 3px solid var(--color-accent); border-radius: 8px;
  box-shadow: 0 0 0 999px rgba(5, 15, 60, .38), 0 0 24px rgba(212, 255, 63, .6);
}
.scene--install.is-active .install img, .scene--install.is-active .install video { animation: install-zoom 1.4s var(--ease-out) both; }
.scene--install.is-active .install__frame { animation: frame-in .7s var(--ease-out) .7s both; }
.scene--install.is-active .scene__chip { animation: pop-in .45s var(--ease-out) 1.3s both; }
@keyframes install-zoom { from { transform: scale(1.35); } }
@keyframes frame-in { from { opacity: 0; transform: scale(1.25); } }

/* Escena 4: en la calle, escaneo del QR */
.scene--live { grid-template-columns: auto minmax(0, 260px); gap: 1rem; align-content: center; justify-content: center; }
.live-phone {
  position: relative; width: clamp(90px, 22vw, 130px); aspect-ratio: 9 / 18; border-radius: 20px;
  background: var(--color-ink); border: 4px solid #2a2a30; overflow: hidden;
}
.live-phone__qr {
  position: absolute; left: 20%; right: 20%; top: 30%; aspect-ratio: 1; border-radius: 4px;
  background:
    linear-gradient(90deg, var(--color-surface) 30%, transparent 30% 70%, var(--color-surface) 70%) top / 100% 30% no-repeat,
    linear-gradient(90deg, var(--color-surface) 30%, transparent 30%) bottom / 100% 30% no-repeat,
    repeating-linear-gradient(45deg, var(--color-surface) 0 3px, transparent 3px 6px);
}
.live-phone__beam { position: absolute; left: 12%; right: 12%; top: 30%; height: 2px; background: var(--color-accent); box-shadow: 0 0 12px var(--color-accent); z-index: 1; }
.scene--live.is-active .live-phone { animation: pop-in .5s var(--ease-out) both; }
.scene--live.is-active .live-phone__beam { animation: beam 1.4s ease-in-out .3s 2 alternate both; }
@keyframes beam { from { transform: translateY(0); } to { transform: translateY(clamp(40px, 10vw, 70px)); } }
.toasts { display: grid; gap: .5rem; min-width: 0; }
.toast {
  display: flex; align-items: center; gap: .55rem; margin: 0;
  padding: .7rem .85rem; border-radius: 14px; font-size: .82rem; font-weight: 500; line-height: 1.3;
  background: rgba(255, 255, 255, .95); color: var(--color-ink); box-shadow: 0 10px 30px rgba(5, 15, 60, .3);
}
.toast--accent { background: var(--color-accent); }
.toast__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); }
.toast--accent .toast__dot { background: var(--color-ink); }
.scene--live.is-active .toast { animation: toast-in .5s var(--ease-out) both; }
.scene--live.is-active .toast:nth-child(1) { animation-delay: 1s; }
.scene--live.is-active .toast:nth-child(2) { animation-delay: 1.9s; }
.scene--live.is-active .toast:nth-child(3) { animation-delay: 2.8s; }
@keyframes toast-in { from { opacity: 0; transform: translateX(24px); } }