/* Pantalla final (v3, sobre tomate): el titular, la hoja del premio con la medalla del 28 (el «11.647 €» se tacha solo), la foto en
   su marco blanco, la frase de Mario en cursiva, Home sonando y la Cartera. Al entrar, confeti con la paleta del sistema. */

.end{position:relative;flex:1;display:flex;flex-direction:column;gap:24px;padding-bottom:var(--sp-5)}
.end > *{position:relative;z-index:1}
/* el logo pequeño (mantenerlo pulsado 3 s reinicia): una píldora de tinta */
.end-logo{
  align-self:flex-start;display:inline-flex;align-items:center;height:34px;padding:0 15px;border-radius:var(--r-pill);
  background:var(--tinta);color:var(--tomate);font:700 15px/1 var(--ui);
}
.end-thanks{margin:0;text-wrap:balance}
.end-lead{display:block;font:400 clamp(50px,16vw,62px)/.9 var(--display);letter-spacing:-.005em}
.end-rest{display:block;margin-top:18px;font:600 var(--fs-lead)/1.4 var(--ui);text-wrap:pretty}
.end-rest b{font-weight:800;white-space:nowrap}

/* el premio: una hoja de leche torcida con la medalla pegada en la esquina */
.end-prize{
  margin-top:6px;padding:22px 24px 24px;border-radius:var(--r-hoja);background:var(--leche);color:var(--tinta);rotate:-1.8deg;
  animation:rise .6s cubic-bezier(.2,.8,.2,1) .3s both;
}
.end-medal{z-index:2;width:clamp(96px,30vw,116px);top:12px;right:-40px;rotate:10deg}
.end-medal svg{animation:stk-enter .7s cubic-bezier(.2,1.5,.4,1) .7s both}
.end-old{position:relative;display:inline-block;font:400 clamp(44px,14vw,56px)/1 var(--display);color:#6A6390;font-variant-numeric:tabular-nums}
/* el tachón cobalto se dibuja de izquierda a derecha: una ventana que se abre (fuera) mientras el trazo se queda quieto (dentro) */
.end-wipe{position:absolute;left:-8px;top:2px;width:calc(100% + 16px);height:100%;overflow:hidden;animation:wipe-out .7s cubic-bezier(.6,0,.3,1) 1s both}
.end-wipe svg{display:block;width:100%;height:100%;overflow:visible;animation:wipe-in .7s cubic-bezier(.6,0,.3,1) 1s both}
@keyframes wipe-out{from{transform:translateX(-100%)}to{transform:none}}
@keyframes wipe-in{from{transform:translateX(100%)}to{transform:none}}
.end-strike{fill:none;stroke:var(--cobalto);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.end-new{display:block;margin-top:6px;font:400 clamp(54px,18vw,74px)/.9 var(--display);font-variant-numeric:tabular-nums}

/* la foto: marco blanco con el canto tomate, un poco torcida */
.end-photo{
  margin:8px 0 0;width:100%;aspect-ratio:4/5;padding:12px;border-radius:var(--r-hoja);
  background:#fff;box-shadow:0 7px 0 var(--tomate-d);rotate:1.6deg;
}
.end-photo img{width:100%;height:100%;border-radius:var(--r-tesela);object-fit:cover}
/* aún sin foto: el hueco de tinta con un sol chicle y la palabra «Foto» */
.end-photo.is-empty{display:block}
.end-photo-label{
  display:grid;place-items:center;width:100%;height:100%;border-radius:var(--r-tesela);overflow:hidden;
  background:radial-gradient(circle at 0 100%,var(--chicle) 0 74px,transparent 75px),var(--tinta);
  font:400 clamp(40px,12vw,46px)/1 var(--display);color:#fff;
}
/* lo que dice Mario: en New York cursiva */
.end-text{margin:12px 0 0;font:italic 400 clamp(38px,12vw,46px)/1.02 var(--voz);letter-spacing:-.015em;text-wrap:balance}
.end-home{margin-top:2px}
/* Home sin arrancar (iOS no la dejó): la tarjeta con «▶ Escuchar» se queda pegada abajo, a la vista sin bajar, hasta que suena */
.end > .end-home.is-stuck{position:sticky;bottom:calc(12px + var(--sab));z-index:5;animation:end-home-in .35s cubic-bezier(.2,.9,.3,1.2) both}
.end-home.is-stuck .np{grid-template-columns:52px 1fr;gap:10px 12px;padding:12px;box-shadow:0 12px 32px rgba(29,20,66,.4)}
.end-home.is-stuck .np-art{width:52px;height:52px;border-radius:15px}
.end-home.is-stuck .np-info b{font-size:28px}
.end-home.is-stuck .np-bar{display:none}
@keyframes end-home-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.end > .end-home.is-stuck{animation:none}}

/* la Cartera de la pantalla final, más pequeña que en la revelación */
.end-wallet{margin-top:12px}
.end-wallet .wallet-title{margin-bottom:14px}
.end-wallet .pass{min-height:80px;padding:10px 12px 10px 10px;gap:12px}
.end-wallet .pass-thumb{width:46px;height:46px;border-radius:12px}
.end-wallet .pass-info{gap:3px;padding-top:3px}
.end-wallet .pass-info b{font-size:clamp(18px,5.5vw,24px)} /* «Panel de atención al pupi», entero en 375 y 390 */
.end-wallet .pass-info span{font-size:12.5px}
.end-wallet .pass-item + .pass-item{margin-top:-26px}
.end-wallet .pass-vale{min-height:96px}
.end-wallet .pass-vale-main{gap:4px;padding:12px 8px 12px 18px}
.end-wallet .pass-vale-main b{font-size:36px}
.end-wallet .pass-vale-stub{width:48px;font-size:22px}

/* ---------- confeti (ui/confetti.js) ---------- */
.confetti{position:fixed;inset:0;z-index:900;width:100%;height:100%;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .end-wipe,.end-wipe svg{animation:none}
}

/* ---------- el collage (antes de la frase final): polaroids de colores con su canto, cinta o pegatina; caen al llegar y se mecen ---------- */
.end-collage{display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:26px 16px;margin:16px 2px 0}
.end-collage:not(:has(.end-polaroid)){display:none}
.end-polaroid{
  position:relative;margin:0;padding:9px 9px 30px;border-radius:14px;background:var(--fr,var(--girasol));
  box-shadow:0 7px 0 var(--fr-d,var(--girasol-d));rotate:var(--rot,-2deg);
}
.end-polaroid.is-right{margin-top:24px}
.end-polaroid.is-big{grid-column:1 / -1;margin:4px 12px 0}
.end-pic{display:block;overflow:hidden;border-radius:8px;background:var(--tinta)}
.end-pic img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
.end-polaroid.is-big .end-pic img{aspect-ratio:1}
/* la cinta de arriba, en las que no llevan pegatina */
.end-polaroid::before{
  content:"";position:absolute;z-index:2;top:-10px;left:50%;width:60px;height:21px;margin-left:-30px;border-radius:3px;
  background:rgba(255,250,243,.72);box-shadow:0 1px 2px rgba(10,6,36,.18);rotate:-6deg;
}
.end-polaroid:has(.end-pol-stk)::before{content:none}
.end-pol-stk{position:absolute;z-index:2;width:clamp(46px,14vw,58px);top:-20px;right:-14px;rotate:14deg}
.end-polaroid.is-right .end-pol-stk{right:auto;left:-14px;rotate:-12deg}
/* al llegar caen girando; luego se mecen, cada una a su ritmo, y la foto se acerca despacio. Fuera de la pantalla, quietas */
.end-polaroid.is-wait{opacity:0}
.end-polaroid.is-in{animation:pol-in .75s cubic-bezier(.2,1.5,.4,1) both,pol-sway var(--sway,5s) ease-in-out .75s infinite alternate}
.end-polaroid.is-in .end-pic img{animation:pol-zoom 9s ease-in-out infinite alternate}
.end-polaroid.is-in .end-pol-stk svg{animation:stk-enter .6s cubic-bezier(.2,1.5,.4,1) .45s both,pol-beat 1.6s ease-in-out 1.1s infinite}
.end-polaroid.is-off,.end-polaroid.is-off .end-pic img,.end-polaroid.is-off .end-pol-stk svg{animation-play-state:paused}
@keyframes pol-in{0%{opacity:0;transform:translateY(-46px) scale(.82) rotate(-10deg)}100%{opacity:1;transform:none}}
@keyframes pol-sway{from{rotate:calc(var(--rot,-2deg) - 1.8deg)}to{rotate:calc(var(--rot,-2deg) + 1.8deg)}}
@keyframes pol-zoom{from{transform:scale(1.03)}to{transform:scale(1.15) translate(var(--kx,3%),var(--ky,0%))}}
@keyframes pol-beat{0%,100%{transform:none}50%{transform:scale(1.12)}}
@media (prefers-reduced-motion:reduce){
  .end-polaroid.is-wait{opacity:1}
  .end-polaroid.is-in,.end-polaroid.is-in .end-pic img,.end-polaroid.is-in .end-pol-stk svg{animation:none}
}

/* ---------- los vídeos del final (28-10-2026) ---------- */
/* la playa, en el sitio de la foto: el mismo marco, en vertical y algo más estrecho para que se vea entero */
.end-photo.is-video{width:min(84%,330px);aspect-ratio:9/16;align-self:center;background:var(--cobalto);box-shadow:0 7px 0 var(--cobalto-dd);--rot:1.6deg;rotate:var(--rot);animation:pol-sway 6s ease-in-out infinite alternate}
@media (prefers-reduced-motion:reduce){.end-photo.is-video{animation:none}}
.end-photo video{display:block;width:100%;height:100%;border-radius:var(--r-tesela);object-fit:cover;background:var(--tinta)}
/* «Así se hacen los recuerdos»: el título y el vídeo del álbum en su pantalla vertical (.rec, de pause.css) */
.end-making{display:flex;flex-direction:column;align-items:center;gap:18px;margin:14px 0 0}
.end-making-title{align-self:stretch;font:400 clamp(34px,10.5vw,42px)/.95 var(--display);text-wrap:balance}
.end-rec{width:min(78%,300px);rotate:-1.5deg;animation:none}
.end-rec video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* el fondo vivo (screens/end.js lo mete en .fondo, debajo de los rayos y la trama): el vídeo de las escaleras en blanco y negro,
   multiplicado sobre el rojo, para que el fondo siga siendo tomate pero se mueva */
.fondo > .fondo-video{background:var(--bg)}
.fondo-video video{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05) brightness(1.25);mix-blend-mode:multiply;opacity:.42}
/* el trozo de vídeo dentro del collage, con la forma de las fotos */
.end-pic video{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
.end-polaroid.is-big .end-pic video{aspect-ratio:3/4}
/* en pantallas más anchas que el vídeo (ordenador, tablet), el fondo vivo va entero en una columna con los lados fundidos en el rojo,
   en vez de ampliado y con las cabezas cortadas */
@media (min-aspect-ratio: 9/16){
  .fondo-video video{width:calc(100vh * 9 / 16);margin:0 auto;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
}

/* «Fin», del todo abajo (screens/end.js), y el cierre de cuento (ui/iris.js): la foto aparece, el círculo negro se cierra sobre las
   caras y en negro sale «Fin» */
.end-fin{margin-top:8px}
.iris{position:fixed;inset:0;z-index:995;overflow:hidden;animation:iris-in .9s ease both}
@keyframes iris-in{from{opacity:0}}
.iris-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:20% 50%}
.iris-mask{position:absolute;inset:0}
.iris-fin{position:absolute;left:0;right:0;top:50%;margin:-.6em 0 0;text-align:center;color:#FFFAF3;
  font:italic 400 clamp(56px,16vw,92px)/1.2 var(--voz);letter-spacing:.01em;opacity:0}
.iris.is-closed .iris-fin{animation:iris-fin 2.4s ease .5s both}
@keyframes iris-fin{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
.iris.is-fade .iris-photo{display:none}
.iris.is-fade .iris-mask{background:#07041A}