/* Pausas entre pruebas (screens/pause.js): «Un recuerdo» sobre crema (polaroid + chat real) y «Pausa publicitaria» sobre tinta
   (el anuncio en vídeo en su pantalla vertical, con el nombre de la marca debajo). */
html[data-step="r1"],html[data-step="r2"]{--bg:var(--crema);--fg:var(--tinta);--fg-2:#5A4630;--d:#E3C9A0}
html[data-step="ad1"],html[data-step="ad2"],html[data-step="ad3"]{--bg:var(--tinta);--fg:#fff;--fg-2:var(--lila);--d:var(--tinta-d);--btn:var(--girasol);--btn-lab:var(--tinta);--btn-d:var(--girasol-d)}

.pause{position:relative;flex:1;display:flex;flex-direction:column;gap:18px}
.pause > :not(.stk){position:relative;z-index:1}
.pause > .btn{margin-top:auto}
.pause-chip{animation:rise .5s cubic-bezier(.2,.8,.2,1) both}

/* ---------- un recuerdo ---------- */
.st-pause{width:clamp(78px,24vw,96px);top:-6px;right:-8px;rotate:12deg}
.st-pause svg{animation:stk-enter .7s cubic-bezier(.2,1.5,.4,1) .5s both}
.pause-title{max-width:300px;animation:rise .6s cubic-bezier(.2,.8,.2,1) .1s both}
/* la polaroid: marco blanco con el pie abajo, torcida, con su canto */
.pause-photo{
  margin:4px 6px 0;padding:12px 12px 0;border-radius:18px;background:#fff;box-shadow:0 7px 0 var(--d);rotate:-2.2deg;
  animation:pause-drop .7s cubic-bezier(.2,1.2,.4,1) .25s both;
}
@keyframes pause-drop{0%{transform:translateY(-30px) rotate(-8deg);opacity:0}100%{transform:none;opacity:1}}
.pause-photo img{display:block;width:100%;aspect-ratio:4/5;border-radius:10px;object-fit:cover;background:var(--tinta)}
.pause-photo figcaption{padding:10px 4px 12px;text-align:center;font:italic 400 21px/1.15 var(--voz);color:var(--tinta)}
.pause-photo.is-empty{padding-bottom:12px}
.pause-photo-label{
  display:grid;place-items:center;width:100%;aspect-ratio:4/5;border-radius:10px;overflow:hidden;
  background:radial-gradient(circle at 100% 0,var(--chicle) 0 70px,transparent 71px),var(--tinta);
  font:400 clamp(40px,12vw,46px)/1 var(--display);color:#fff;
}
.pause-chat{rotate:1.2deg;animation:rise .6s cubic-bezier(.2,.8,.2,1) .6s both}
.pause-chat .chat{box-shadow:0 var(--canto) 0 rgba(10,6,36,.25)}

/* ---------- pausa publicitaria: el anuncio entra solo a pantalla completa ---------- */
.pause > .ad-full{position:fixed;inset:0;z-index:950;background:#000;animation:ad-in .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes ad-in{from{opacity:0;transform:scale(1.04)}}
.ad-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.ad-chip{position:absolute;left:calc(14px + var(--sal));top:calc(14px + var(--sat) + var(--rh));background:var(--tomate);color:var(--tinta)}
.ad-chip::before{content:"";width:8px;height:8px;margin-right:8px;border-radius:50%;background:var(--tinta);animation:blink 1.2s steps(2) infinite}
.ad-sound{
  position:absolute;right:calc(14px + var(--sar));top:calc(12px + var(--sat) + var(--rh));display:inline-flex;align-items:center;height:40px;padding:0 16px;
  border-radius:var(--r-pill);background:var(--girasol);color:var(--tinta);box-shadow:0 4px 0 var(--girasol-d);font:800 15px/1 var(--ui);
}
/* la cartela del final: la marca sobre una franja de tinta (sale al acabar el anuncio) */
.ad-card{
  position:absolute;left:0;right:0;bottom:0;padding:28px var(--g) calc(110px + var(--sab));text-align:center;
  background:linear-gradient(rgba(29,20,66,0),var(--tinta) 30%);opacity:0;transform:translateY(20px);transition:opacity .5s ease,transform .5s ease;pointer-events:none;
}
.ad-full.is-ended .ad-card{opacity:1;transform:none}
.ad-card b{display:block;font:400 var(--t-xl)/.9 var(--display);font-size:clamp(34px,12.4vw,56px);color:#fff} /* «Morritocetamol» no se parte: que quepa entera en 375 */
.ad-card span{display:block;margin-top:8px;font:700 16px/1.2 var(--ui);color:var(--lila)}
.ad-card em{display:block;margin-top:10px;font:italic 400 19px/1.2 var(--voz);color:var(--girasol)}
.ad-full .pause-next{position:absolute;left:var(--g);right:var(--g);bottom:calc(22px + var(--sab));width:auto}
.ad-full.no-video .ad-video{opacity:.85}

@media (max-height:700px){
  .pause{gap:12px}
}
@media (prefers-reduced-motion:reduce){
  .ad-full{animation:none}
  .ad-card{transition:none}
}

/* ---------- cámara oculta: las siestas de Ane como grabaciones de una cámara escondida ---------- */
html[data-step="cam"]{--bg:var(--tinta-d);--fg:#fff;--fg-2:var(--lila);--d:#000;--btn:var(--girasol);--btn-lab:var(--tinta);--btn-d:var(--girasol-d)}
.is-camara{gap:14px}
.cam-chip{background:var(--tomate);color:var(--tinta)}
.cam-chip::before{content:"";width:8px;height:8px;margin-right:8px;border-radius:50%;background:var(--tinta);animation:blink 1.2s steps(2) infinite}
.is-camara .pause-title{color:#fff}
.cam-intro{margin:-4px 0 0;font:italic 400 18px/1.25 var(--voz);color:var(--girasol)}
/* el monitor: la foto un poco apagada, líneas de barrido, REC, cámara, hora y sitio */
.cam-screen{
  position:relative;width:100%;aspect-ratio:4/5;border-radius:18px;overflow:hidden;background:#000;
  box-shadow:0 0 0 6px var(--tinta-2),0 12px 0 6px #000;font:600 13px/1 ui-monospace,Menlo,monospace;color:#fff;letter-spacing:.06em;
}
.cam-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.55) contrast(1.08) brightness(.95)}
.cam-screen::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px),radial-gradient(120% 90% at 50% 50%,transparent 60%,rgba(0,0,0,.45));
}
.cam-screen.is-cut .cam-img{animation:cam-cut .45s steps(3,end) both}
@keyframes cam-cut{0%{opacity:0}40%{opacity:.6}70%{opacity:.35}100%{opacity:1}}
.cam-rec,.cam-no,.cam-when,.cam-where{position:absolute;z-index:2;padding:5px 7px;border-radius:6px;background:rgba(0,0,0,.45);text-shadow:0 1px 2px #000}
.cam-rec{top:22px;left:12px;display:flex;align-items:center;gap:6px}
.cam-rec::before{content:"";width:9px;height:9px;border-radius:50%;background:#FF3B30;animation:blink 1s steps(2) infinite}
.cam-no{top:22px;right:12px}
.cam-when{bottom:12px;left:12px}
.cam-where{bottom:12px;right:12px}
/* las rayitas de arriba: la de ahora se llena en lo que dura la toma */
.cam-bars{position:absolute;z-index:2;top:9px;left:10px;right:10px;display:flex;gap:3px}
.cam-bars i{position:relative;flex:1;height:3px;border-radius:2px;overflow:hidden;background:rgba(255,255,255,.3)}
.cam-bars i::after{content:"";position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left}
.cam-bars i.is-done::after{transform:none}
.cam-bars i.is-now::after{animation:cam-bar var(--shot,3600ms) linear forwards}
@keyframes cam-bar{to{transform:none}}
.cam-tap{position:absolute;z-index:3;top:0;bottom:0;background:transparent}
.cam-tap.is-prev{left:0;width:33%}
.cam-tap.is-next{right:0;width:67%}
.cam-case{margin:2px 0 0;font:700 14px/1 var(--ui);color:var(--lila)}
.cam-line{margin:0;min-height:2.6em;font:800 19px/1.3 var(--ui);color:#fff;text-wrap:balance}
.cam-outro{margin:0;padding:14px 16px;border-radius:var(--r-tesela);background:var(--girasol);color:var(--tinta);font:800 17px/1.3 var(--ui);rotate:-1.5deg;transition:opacity .4s,transform .4s}
.cam-outro.is-hidden,.is-camara .pause-next.is-hidden{opacity:0;pointer-events:none;transform:translateY(10px)}
.is-camara .pause-next{transition:opacity .4s,transform .08s ease,box-shadow .08s ease}
@media (prefers-reduced-motion:reduce){
  .cam-screen.is-cut .cam-img,.cam-rec::before,.cam-chip::before{animation:none}
}

/* ---------- «Recreación de los hechos» (recuerdo con vídeo): la pantalla vertical con su rótulo de tele ---------- */
.rec{position:relative;width:min(100%,calc(58vh * 9 / 16));align-self:center;aspect-ratio:9/16;border-radius:22px;overflow:hidden;background:#000;
  box-shadow:0 0 0 5px #fff,0 11px 0 5px var(--d);rotate:1.5deg;animation:pop .5s cubic-bezier(.2,1.4,.4,1) .2s both}
.rec-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rec-label{
  position:absolute;left:10px;top:10px;padding:6px 10px 5px;border-radius:6px;background:var(--tinta);color:#fff;
  font:800 11px/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;
}
.rec-sound{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:inline-flex;align-items:center;height:42px;padding:0 18px;
  border-radius:var(--r-pill);background:var(--girasol);color:var(--tinta);box-shadow:0 4px 0 var(--girasol-d);font:800 15px/1 var(--ui);white-space:nowrap;
}
.rec-sound:active{transform:translate(-50%,4px);box-shadow:0 0 0 var(--girasol-d)}

/* ---------- recuerdos (28-10-2026): la fecha bajo el título, la captura real del chat y la frase de Mario ---------- */
.pause-kicker{margin:-6px 0 0;max-width:320px;font:italic 400 20px/1.25 var(--voz);color:var(--fg-2);animation:rise .6s cubic-bezier(.2,.8,.2,1) .15s both}
/* la captura: tal cual, con esquinas de móvil y su canto, un poco torcida */
.pause-shot{margin:4px 10px 0;border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 0 0 4px #fff,0 9px 0 4px var(--d);rotate:-1.2deg;animation:rise .6s cubic-bezier(.2,.8,.2,1) .35s both}
.pause-shot img{display:block;width:100%;height:auto}
.pause-note{margin:0;padding:14px 16px;border-radius:var(--r-tesela);background:var(--chicle);color:var(--tinta);font:italic 400 21px/1.2 var(--voz);rotate:1.2deg;text-wrap:balance;animation:rise .6s cubic-bezier(.2,.8,.2,1) .8s both}
/* la última toma de la cámara oculta, en vídeo, en el mismo monitor */
.cam-video{background:#000}
.cam-img[hidden]{display:none}