/* Galería de entrega Stylo Vayet — funciona sin internet desde una USB.
   Estética Fare para marcas hijas: sin logo ni paleta Fare; rombos solo como textura.
   La paleta (--amb 70 %, --pri 20 %, --sec 10 %) la escribe el generador a partir de las fotos. */

@font-face{font-family:"Montserrat";font-weight:400;src:url(fuentes/montserrat-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-weight:600;src:url(fuentes/montserrat-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-style:italic;font-weight:400;src:url(fuentes/montserrat-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:300;src:url(fuentes/inter-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:400;src:url(fuentes/inter-latin-400-normal.woff2) format("woff2")}

:root{
  --amb:#0b0907; --pri:#f3ead8; --sec:#c9a45c;
  --txt2:color-mix(in srgb,var(--pri) 66%,var(--amb));
  --borde:color-mix(in srgb,var(--pri) 16%,transparent);
  --vidrio:color-mix(in srgb,var(--pri) 6%,transparent);
  --vidrio2:color-mix(in srgb,var(--pri) 11%,transparent);
  --sec-suave:color-mix(in srgb,var(--sec) 22%,transparent);
  --suave:cubic-bezier(.2,.8,.2,1); --elastica:cubic-bezier(.3,1.6,.5,1);
  --r:20px; --mono:ui-monospace,"SF Mono","DejaVu Sans Mono",Menlo,Consolas,monospace;
  /* Escala para pantallas grandes (TV a 3 m): todo crece con el ancho */
  font-size:clamp(15px,0.55vw + 10px,26px);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0}
html,body{background:var(--amb);color:var(--pri)}
body{font-family:Inter,system-ui,sans-serif;font-weight:300;line-height:1.55;min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit}
h1,h2,h3{font-family:Montserrat,sans-serif;font-weight:600;letter-spacing:.01em;line-height:1.15}
.mono{font-family:var(--mono)}
.oculto{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Foco visible y grande: se navega con flechas del teclado o del control */
:focus{outline:none}
:focus-visible,.foco{outline:3px solid var(--sec);outline-offset:4px;border-radius:14px}

/* ---------- Fondo: aura difusa + textura de rombos casi invisible ---------- */
.fondo{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.fondo::before{content:"";position:absolute;inset:-20%;
  background:radial-gradient(40% 35% at 20% 15%,color-mix(in srgb,var(--sec) 20%,transparent),transparent 70%),
             radial-gradient(45% 40% at 85% 80%,color-mix(in srgb,var(--pri) 9%,transparent),transparent 70%);
  animation:respira 18s var(--suave) infinite alternate}
.fondo>svg{position:absolute!important;inset:-56px;width:calc(100% + 112px);height:calc(100% + 112px);opacity:.06;z-index:1;animation:deriva 24s linear infinite}
.fondo .fm-luz{--fm-luz-opacidad:.9}
@keyframes deriva{to{transform:translate(56px,56px)}}
@keyframes respira{to{transform:translate(4%,3%) scale(1.06)}}

/* ---------- Pantalla de entrada ---------- */
.entrada{position:fixed;inset:0;z-index:50;display:grid;place-items:center;text-align:center;background:radial-gradient(70% 55% at 50% 50%,color-mix(in srgb,var(--amb) 70%,transparent),color-mix(in srgb,var(--amb) 25%,transparent));transition:opacity .9s var(--suave),visibility .9s}
.entrada.fuera{opacity:0;visibility:hidden}
.entrada .logo{width:min(36vw,280px);margin:0 auto;opacity:0;transform:translateY(12px) scale(.96);animation:aparece 1.2s .9s var(--suave) forwards}
.entrada p{font-family:Montserrat;font-style:italic;color:var(--txt2);margin:1.2rem 0 2.2rem;opacity:0;animation:aparece 1.1s 1.5s var(--suave) forwards}
body.cerrado main,body.cerrado .barra{visibility:hidden}
.entrada .btn.oro{opacity:0;transform:translateY(12px);animation:aparece 1s 2s var(--suave) forwards,aura-btn 3.6s 3s ease-in-out infinite;font-size:1.05rem;padding:1rem 2.2rem}
@keyframes aparece{to{opacity:1;transform:none}}
/* Cargador: un trazo de luz que se escribe (sin rombos: los rombos solo van de fondo) */
.trazo{width:min(30vw,220px);height:2px;margin:0 auto 1.8rem;border-radius:2px;background:linear-gradient(90deg,transparent,var(--sec),transparent);transform:scaleX(0);animation:trazo 1.4s var(--suave) forwards}
@keyframes trazo{to{transform:scaleX(1)}}

/* ---------- Botones: liquid glass con reflejo, brillo que sigue el dedo, aura y rebote ---------- */
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:.6rem;padding:.9rem 1.7rem;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--pri) 26%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--pri) 16%,transparent),color-mix(in srgb,var(--pri) 4%,transparent));
  backdrop-filter:blur(14px) saturate(1.8);-webkit-backdrop-filter:blur(14px) saturate(1.8);
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 40%,transparent),inset 0 -1px 0 color-mix(in srgb,#000 35%,transparent),0 12px 30px -14px #000,0 0 0 0 var(--sec);
  font-family:Montserrat;font-weight:600;letter-spacing:.04em;text-decoration:none;
  transform:perspective(500px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(var(--s,1));
  transition:transform .45s var(--elastica),box-shadow .4s var(--suave),border-color .3s}
/* Reflejo de vidrio en la mitad de arriba */
.btn::before{content:"";position:absolute;inset:1px 1px 50% 1px;border-radius:999px 999px 40% 40%/999px 999px 100% 100%;z-index:-1;
  background:linear-gradient(180deg,color-mix(in srgb,#fff 32%,transparent),transparent);opacity:.75;pointer-events:none}
/* Brillo que sigue el dedo o el cursor + destello que cruza cada pocos segundos */
.btn::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120px circle at var(--gx,50%) var(--gy,0%),color-mix(in srgb,#fff 30%,transparent),transparent 60%),
             linear-gradient(110deg,transparent 35%,color-mix(in srgb,#fff 38%,transparent) 50%,transparent 65%) no-repeat;
  background-size:100% 100%,250% 100%;background-position:0 0,160% 0;opacity:0;transition:opacity .3s}
.btn:hover,.btn:focus-visible{--s:1.05;border-color:var(--sec);box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 45%,transparent),inset 0 -1px 0 color-mix(in srgb,#000 35%,transparent),0 16px 34px -14px #000,0 0 36px -6px var(--sec)}
.btn:hover::after,.btn:focus-visible::after{opacity:1}
.btn:active{--s:.95;transition-duration:.12s}
.btn svg{width:1.1em;height:1.1em}
/* Botón principal: vidrio teñido con el acento del evento, aura que respira y destello */
.btn.oro{color:var(--amb);border-color:color-mix(in srgb,#fff 45%,var(--sec));
  background:linear-gradient(180deg,color-mix(in srgb,var(--sec) 70%,#fff) 0%,var(--sec) 48%,color-mix(in srgb,var(--sec) 78%,#000) 100%);
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 70%,transparent),inset 0 -2px 6px color-mix(in srgb,#000 30%,transparent),0 14px 34px -12px #000,0 0 30px -6px var(--sec);
  animation:aura-btn 3.6s ease-in-out infinite}
.btn.oro::after{opacity:1;animation:destello 4.5s var(--suave) infinite}
.btn.oro:hover,.btn.oro:focus-visible{box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 75%,transparent),inset 0 -2px 6px color-mix(in srgb,#000 30%,transparent),0 18px 38px -12px #000,0 0 60px -4px var(--sec)}
@keyframes aura-btn{50%{box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 70%,transparent),inset 0 -2px 6px color-mix(in srgb,#000 30%,transparent),0 14px 34px -12px #000,0 0 54px 0 var(--sec)}}
@keyframes destello{0%,55%{background-position:var(--gx,50%) var(--gy,0%),160% 0}85%,100%{background-position:var(--gx,50%) var(--gy,0%),-60% 0}}

/* ---------- Barra flotante (liquid glass liviano: sin feDisplacementMap) ---------- */
.barra{position:fixed;left:50%;bottom:1.2rem;transform:translateX(-50%);z-index:20;display:flex;align-items:flex-end;gap:.25rem;padding:.45rem;
  border-radius:999px;background:color-mix(in srgb,var(--amb) 45%,transparent);border:1px solid var(--borde);
  backdrop-filter:blur(16px) saturate(1.8);-webkit-backdrop-filter:blur(16px) saturate(1.8);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--pri) 22%,transparent),0 18px 40px -18px #000}
.barra button{display:flex;flex-direction:column;align-items:center;gap:.1rem;padding:.5rem .9rem;border-radius:999px;font-size:.78rem;color:var(--txt2);
  transition:transform .3s var(--elastica),color .2s,background .2s;transform-origin:50% 100%}
.barra button svg{width:1.35rem;height:1.35rem}
.barra button.activo{color:var(--pri);background:var(--vidrio2)}
.barra button.activo svg{color:var(--sec)}
.barra button:active{transform:scale(.94)}

/* ---------- Secciones (crossfade entre ellas) ---------- */
main{padding:clamp(1.2rem,4vw,4rem) clamp(1rem,5vw,6rem) 8rem;max-width:2200px;margin:0 auto}
.vista{display:none}
.vista.activa{display:block;animation:funde .6s var(--suave)}
@keyframes funde{from{opacity:0;transform:translateY(10px)}}
.titulo-sec{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin:0 0 1.6rem;flex-wrap:wrap}
.titulo-sec h2{font-size:clamp(1.6rem,2.4vw,3rem)}
.titulo-sec span{color:var(--txt2)}
.etq{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--sec);font-family:Montserrat;font-weight:600}

/* Vidrio: 70 % redondeado, 30 % con esquinas cortadas */
.vidrio{background:var(--vidrio);border:1px solid var(--borde);border-radius:var(--r);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.corte{border-radius:0;clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}
.corte{position:relative}

/* ---------- Inicio ---------- */
.portada{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,5rem);align-items:center;min-height:min(78vh,1100px)}
.marco{perspective:1400px}
.marco .foto{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;transform-style:preserve-3d;
  box-shadow:0 40px 80px -30px #000,0 0 90px -20px var(--aura,var(--sec));animation:sway 8s ease-in-out infinite}
.marco .foto img{width:100%;height:100%;object-fit:cover}
.marco .foto::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,color-mix(in srgb,#fff 18%,transparent) 48%,transparent 62%);
  background-size:250% 100%;animation:brillo 8s ease-in-out infinite;pointer-events:none}
.marco.quieto .foto{animation:none}
.marco.quieto .foto::after{animation:none;opacity:.6}
@keyframes sway{0%,100%{transform:rotateY(-6deg) rotateX(3deg)}50%{transform:rotateY(6deg) rotateX(-2deg)}}
@keyframes brillo{0%,100%{background-position:100% 0}50%{background-position:0 0}}
.portada h1{font-size:clamp(2.2rem,4.6vw,6rem);margin:.6rem 0 .4rem;
  background:linear-gradient(100deg,var(--pri) 20%,var(--sec) 60%,var(--pri) 95%);-webkit-background-clip:text;background-clip:text;color:transparent}
.portada .cliente{font-family:Montserrat;font-size:clamp(1.1rem,1.6vw,2rem);color:var(--txt2)}
.portada .datos{display:flex;gap:1.4rem;flex-wrap:wrap;margin:1.2rem 0 2rem;color:var(--txt2)}
.portada .acciones{display:flex;gap:.8rem;flex-wrap:wrap}

/* Tablero de vidrio */
.tablero{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:1rem;margin:3rem 0}
.tablero .celda{padding:1.3rem 1.4rem;box-shadow:0 0 50px -25px var(--sec)}
.tablero b{display:block;font-family:var(--mono);font-size:clamp(2rem,3vw,3.6rem);font-weight:400;color:var(--pri);line-height:1.1}
.tablero span{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--txt2)}
.tablero .barrita{height:4px;border-radius:4px;margin-top:.9rem;background:var(--vidrio2);overflow:hidden}
.tablero .barrita i{display:block;height:100%;width:0;background:var(--sec);transition:width 1.6s var(--suave)}

.dedicatoria{padding:clamp(1.6rem,3vw,3.4rem);margin:0 0 3rem;max-width:62rem}
.dedicatoria p{font-family:Montserrat;font-style:italic;font-size:clamp(1.15rem,1.5vw,1.9rem);line-height:1.6;white-space:pre-line}
.dedicatoria .firma{margin-top:1.2rem;color:var(--sec);font-style:normal;font-size:.9rem;letter-spacing:.12em}

/* ---------- Momentos: línea de tiempo + carrusel de vidrio en abanico ---------- */
.linea{position:relative;padding-left:2.4rem}
.linea::before{content:"";position:absolute;left:.6rem;top:.4rem;bottom:0;width:1px;background:linear-gradient(var(--sec),transparent)}
.momento{position:relative;margin-bottom:4rem}
.momento::before{content:"";position:absolute;left:-2.15rem;top:.45rem;width:.8rem;height:.8rem;border-radius:50%;background:var(--amb);border:1.5px solid var(--sec);box-shadow:0 0 18px var(--sec)}
.momento header{display:flex;gap:1rem;align-items:baseline;flex-wrap:wrap;margin-bottom:1rem}
.momento h3{font-size:clamp(1.3rem,1.9vw,2.4rem)}
.momento header span{color:var(--txt2);font-family:var(--mono);font-size:.9rem}
.carrusel{position:relative;height:clamp(16rem,30vw,34rem);perspective:1600px;outline:none}
.carrusel .tarjeta{position:absolute;top:50%;left:50%;width:clamp(12rem,24vw,30rem);aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--borde);transition:transform .7s var(--suave),opacity .7s,filter .7s;box-shadow:0 30px 60px -30px #000,0 0 60px -25px var(--aura,var(--sec))}
.carrusel .tarjeta img{width:100%;height:100%;object-fit:cover}
.carrusel .tarjeta.centro{box-shadow:0 30px 60px -30px #000,0 0 90px -10px var(--aura,var(--sec))}
.carrusel .flecha{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:3rem;height:3rem;border-radius:50%;display:grid;place-items:center}
.carrusel .flecha.izq{left:0}.carrusel .flecha.der{right:0}
.carrusel .flecha svg{width:1.3rem;height:1.3rem}
.carrusel .cuenta{position:absolute;bottom:-.4rem;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:.8rem;color:var(--txt2)}

/* ---------- Fotos: cuadrícula con aura y magnificación ---------- */
.filtros{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.6rem}
.filtros button{padding:.5rem 1.1rem;border-radius:999px;border:1px solid var(--borde);color:var(--txt2);font-size:.85rem;transition:all .25s}
.filtros button.activo{background:var(--sec);color:var(--amb);border-color:transparent}
.cuadricula{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(10rem,15vw,22rem),1fr));gap:clamp(.6rem,1vw,1.2rem)}
.mini{position:relative;aspect-ratio:1;border-radius:16px;overflow:hidden;background:var(--vidrio);border:1px solid var(--borde);
  transition:transform .35s var(--elastica),box-shadow .35s;box-shadow:0 0 0 0 transparent}
.mini img{width:100%;height:100%;object-fit:cover;transition:opacity .5s}
.mini img[data-src]{opacity:0}
.mini:hover,.mini:focus-visible{transform:scale(1.06);z-index:2;box-shadow:0 0 50px -8px var(--aura,var(--sec))}
.mini:hover+.mini,.mini:has(+.mini:hover){transform:scale(1.02)}
.mini .num{position:absolute;left:.5rem;bottom:.4rem;font-family:var(--mono);font-size:.7rem;color:#fff;text-shadow:0 1px 4px #000;opacity:0;transition:opacity .25s}
.mini:hover .num,.mini:focus-visible .num{opacity:1}

/* ---------- Visor (shared element + crossfade) ---------- */
.visor{position:fixed;inset:0;z-index:40;display:grid;grid-template-rows:1fr auto;visibility:hidden}
.visor.abierto{visibility:visible}
.visor .velo{position:absolute;inset:0;background:color-mix(in srgb,var(--amb) 86%,transparent);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);opacity:0;transition:opacity .45s var(--suave)}
.visor.abierto .velo{opacity:1}
.visor .escena{position:relative;display:grid;place-items:center;padding:2rem 5rem 0}
.visor .escena img{max-height:calc(100vh - 9rem);max-width:100%;object-fit:contain;border-radius:12px;box-shadow:0 30px 120px -30px var(--aura,#000);transition:opacity .4s}
.visor .vuelo{position:fixed;z-index:41;object-fit:cover;border-radius:16px;transition:all .5s var(--suave);pointer-events:none}
.visor .pie{position:relative;display:flex;gap:.7rem;justify-content:center;align-items:center;flex-wrap:wrap;padding:1rem 1rem 1.6rem}
.visor .pie .info{font-family:var(--mono);font-size:.85rem;color:var(--txt2);margin-right:.6rem}
.visor .nav{position:absolute;top:50%;transform:translateY(-50%);width:3.4rem;height:3.4rem;border-radius:50%;display:grid;place-items:center;z-index:2}
.visor .nav.izq{left:1rem}.visor .nav.der{right:1rem}
.visor .cerrar{position:absolute;top:1rem;right:1rem;width:3rem;height:3rem;border-radius:50%;display:grid;place-items:center;z-index:2}
.visor .nav svg,.visor .cerrar svg{width:1.4rem;height:1.4rem}
.visor video{max-height:calc(100vh - 9rem);max-width:100%;border-radius:12px;background:#000}

/* ---------- Presentación a pantalla completa ---------- */
.show{position:fixed;inset:0;z-index:45;background:#000;display:none;cursor:none}
.show.activa{display:block}
.show img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity 1.6s ease}
.show img.ve{opacity:1;animation:kenburns 9s linear forwards}
.show .leyenda{position:absolute;left:3vw;bottom:3vw;font-family:Montserrat;font-size:clamp(1rem,1.6vw,2rem);text-shadow:0 2px 12px #000;opacity:.85}
.show .salir{position:absolute;right:2vw;top:2vw;font-size:.8rem;color:#fff8;font-family:var(--mono)}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.06)}}

/* ---------- Videos ---------- */
.estelar{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:2rem;align-items:center;margin-bottom:3rem}
.cine{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;border:1px solid var(--borde);background:#000;box-shadow:0 0 90px -25px var(--sec)}
.cine img{width:100%;height:100%;object-fit:cover;opacity:.85;transition:transform .8s var(--suave),opacity .4s}
.cine:hover img,.cine:focus-visible img{transform:scale(1.04);opacity:1}
.cine .play{position:absolute;inset:0;margin:auto;width:5rem;height:5rem;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--amb) 40%,transparent);
  border:1px solid var(--borde);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:transform .35s var(--elastica)}
.cine:hover .play,.cine:focus-visible .play{transform:scale(1.12)}
.cine .play svg{width:1.8rem;height:1.8rem;margin-left:.2rem}
.clips{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(14rem,22vw,30rem),1fr));gap:1.2rem}
.clip p{margin-top:.6rem;font-family:Montserrat}
.clip small{color:var(--txt2);font-family:var(--mono)}

/* ---------- Dedicatorias: muro de vidrio ---------- */
.muro{columns:clamp(16rem,24vw,28rem);column-gap:1.2rem}
.dedi{break-inside:avoid;margin-bottom:1.2rem;padding:1.3rem;box-shadow:0 0 50px -28px var(--aura)}
.dedi header{display:flex;gap:.8rem;align-items:center;margin-bottom:.8rem}
.dedi header b{display:block;font-family:Montserrat;font-weight:600}
.dedi header small{color:var(--txt2);font-size:.8rem}
.selfie{width:3.2rem;height:3.2rem;border-radius:50%;object-fit:cover;border:1.5px solid var(--sec);box-shadow:0 0 22px -4px var(--aura);flex:none}
.selfie.inicial{display:grid;place-items:center;font-family:Montserrat;font-weight:600;background:var(--vidrio2)}
.dedi p{font-family:Montserrat;font-style:italic;line-height:1.6;white-space:pre-line}
.dedi .mini-cine{width:100%;margin-top:.9rem;display:block}
.dedi-audio{width:100%;margin-top:.9rem;height:2.4rem;color-scheme:dark}

/* ---------- Cabina: tiras impresas que se balancean ---------- */
.tiras{display:flex;flex-wrap:wrap;gap:clamp(1.2rem,3vw,3rem);justify-content:center;padding:1rem 0 2rem;perspective:1200px}
.tira-foto{width:clamp(8rem,12vw,14rem);padding:.55rem .55rem 1.6rem;background:#f4efe6;border-radius:3px;
  box-shadow:0 30px 50px -25px #000,0 0 60px -20px var(--aura);transform:rotate(var(--giro));transition:transform .5s var(--elastica),box-shadow .4s;
  animation:sway-tira 7s ease-in-out infinite;animation-delay:calc(var(--giro) * -.4s)}
.tira-foto img{width:100%;filter:sepia(.15) contrast(1.05)}
.tira-foto:hover,.tira-foto:focus-visible{transform:rotate(0) scale(1.08);animation-play-state:paused;box-shadow:0 30px 60px -25px #000,0 0 80px -10px var(--aura)}
@keyframes sway-tira{0%,100%{transform:rotate(var(--giro)) rotateY(-8deg)}50%{transform:rotate(calc(var(--giro) * -.5)) rotateY(8deg)}}

/* ---------- Recibo de impresora (vidrio, no papel) ---------- */
.impresora{max-width:34rem;margin:0 auto;padding:1.4rem 1.4rem 0;border-radius:24px;background:color-mix(in srgb,#000 55%,var(--amb));border:1px solid var(--borde)}
.ranura{height:10px;border-radius:6px;background:#000;box-shadow:inset 0 2px 6px #000,0 1px 0 var(--borde)}
.salida{overflow:hidden;margin:0 .8rem}
.recibo{padding:1.4rem 1.4rem 1.8rem;font-family:var(--mono);font-size:.88rem;line-height:1.7;transform:translateY(-100%);
  background:linear-gradient(180deg,color-mix(in srgb,var(--pri) 10%,transparent),color-mix(in srgb,var(--pri) 4%,transparent));
  border:1px solid var(--borde);border-top:0;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%);box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--pri) 25%,transparent)}
.recibo.sale{animation:imprime 3.2s steps(26,end) forwards}
@keyframes imprime{to{transform:none}}
.recibo .fila{display:flex;justify-content:space-between;gap:1rem}
.recibo .sep{border-top:1px dashed var(--borde);margin:.7rem 0}
.recibo .centro{text-align:center}
.recibo .barras{height:3.2rem;margin-top:1rem;background:repeating-linear-gradient(90deg,var(--pri) 0 2px,transparent 2px 4px,var(--pri) 4px 5px,transparent 5px 9px,var(--pri) 9px 12px,transparent 12px 13px)}
.recibo img{width:5rem;margin:0 auto .6rem;opacity:.9}

/* ---------- Pie ---------- */
.pie-sitio{display:flex;gap:1.2rem;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:5rem;color:var(--txt2);font-size:.85rem;text-align:center}
.pie-sitio img{width:3.2rem}

/* Aviso pequeño (toast) */
.aviso{position:fixed;left:50%;top:1.2rem;transform:translate(-50%,-250%);visibility:hidden;z-index:60;padding:.8rem 1.4rem;border-radius:999px;background:color-mix(in srgb,var(--amb) 70%,transparent);
  border:1px solid var(--borde);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:transform .5s var(--elastica);font-size:.9rem}
.aviso.ve{transform:translate(-50%,0);visibility:visible}

@media (max-width:860px){
  .portada,.estelar{grid-template-columns:1fr}
  .barra button span{display:none}
  .visor .escena{padding:1rem 0 0}
  .visor .nav{top:auto;bottom:5.5rem;transform:none}
  .linea{padding-left:1.6rem}.momento::before{left:-1.35rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.15s!important}
  .marco .foto{animation:none}
}