@font-face{font-family:"Handelson";src:url(../fonts/handelson.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Panton";src:url(../fonts/panton-bold.woff2) format("woff2");font-weight:700;font-display:swap}

:root{--turq:#2fb3b0;--turq-osc:#13807d;--plata:#b9c3c8;--tinta:#2d4a4c}
*{box-sizing:border-box;margin:0;padding:0}
html{color:var(--tinta);-webkit-tap-highlight-color:transparent;background:#f4f9f9}
body{font-family:"Panton",system-ui,sans-serif;font-weight:700;overflow-x:hidden}
body.cerrado,body.animando{overflow:hidden;height:100svh}
img{display:block;max-width:100%;height:auto}
button{font:inherit;cursor:pointer}

/* ===== Capas fijas ===== */
.fondo,.cielo,.actores,.bloques,.confeti{position:fixed;inset:0;pointer-events:none}
.fondo{background:linear-gradient(rgba(250,253,253,.72),rgba(250,253,253,.72)),url(../img/papel.webp) repeat}
.cielo{background:radial-gradient(120% 60% at 50% 35%,#fff 0%,rgba(255,255,255,0) 60%),
  linear-gradient(#bfe9e7 0%,#e6f7f6 55%,rgba(251,253,253,0) 100%)}
.actores{overflow:hidden}
.pista>div{height:140svh;scroll-snap-align:start}
.pista>div:last-child{height:100svh}
html.imanes{scroll-snap-type:y proximity}

/* ===== Actores (posición la pone app.js; tamaño acá, en vmin) ===== */
.actor{position:absolute;left:0;top:0;width:calc(var(--w)*1vmin);will-change:transform}
.actor img{width:100%}
.entra{position:relative}
[data-a=guada]{--w:78}
[data-a=bola]{--w:26}
[data-a=cop1]{--w:26}
[data-a=cor1]{--w:22}
[data-a=cor2]{--w:18}
[data-a=est1]{--w:20}
[data-a=est2]{--w:15}
[data-a=florI],[data-a=florD]{--w:70}
body.cerrado .entra{opacity:0}

.hilo{position:absolute;left:50%;bottom:96%;width:2px;height:100vh;margin-left:-1px;background:linear-gradient(#dfe5e7,#9aa6ab)}
.destello{position:absolute;width:18%;aspect-ratio:1;opacity:0;
  background:radial-gradient(circle,#fff 0 12%,rgba(255,255,255,0) 13%),
    linear-gradient(90deg,transparent 46%,#fff 50%,transparent 54%),
    linear-gradient(0deg,transparent 46%,#fff 50%,transparent 54%)}
.d1{left:18%;top:18%}.d2{left:68%;top:40%}.d3{left:38%;top:72%}

/* ===== Bloques de texto ===== */
.bloque{position:absolute;left:50%;top:50%;width:min(86vw,760px);transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(10px,2svh,22px);visibility:hidden}
.bloque.activo{pointer-events:auto}
.bloque.abajo{top:64%}
.bloque.arriba{top:36%}
.b-titulo{top:16.5%;transform:translate(-50%,0);gap:0;font-weight:400;line-height:1;visibility:visible;text-shadow:0 2px 14px rgba(255,255,255,.9)}
.t-chico{display:block;font-family:"Handelson",cursive;font-size:clamp(40px,13vw,62px);color:var(--turq-osc);padding-right:8%}
.t-grande{display:block;font-weight:700;font-size:clamp(46px,15vw,72px);letter-spacing:.06em;color:var(--turq);margin-top:.05em}
body.cerrado .b-titulo{opacity:0}

.l,.w{display:inline-block;white-space:pre}
.u{display:inline-block}
.bloque h2{font-family:"Handelson",cursive;font-weight:400;font-size:clamp(42px,7svh,84px);line-height:1.05;color:var(--turq-osc)}
.bloque p{font-size:clamp(16px,2.8svh,26px);line-height:1.45}
.manus{font-family:"Handelson",cursive;font-weight:400;font-size:clamp(34px,5.5svh,64px)!important;line-height:1.15!important;color:var(--turq-osc)}
.manus.grande{font-size:clamp(46px,8svh,104px)!important;max-width:14ch}
.hora{font-size:clamp(26px,4.5svh,44px)!important;color:var(--turq);letter-spacing:.04em}
.fecha{display:flex;flex-direction:column;align-items:center;text-transform:uppercase;letter-spacing:.2em}
.fecha b{font-size:clamp(80px,15svh,170px);line-height:1;color:var(--turq);letter-spacing:0;padding:4px 22px;
  border-left:2px solid var(--plata);border-right:2px solid var(--plata);margin:6px 0}
.falta{text-transform:uppercase;letter-spacing:.3em;color:#7d8e92}
.cuenta{display:flex;gap:clamp(8px,1.4vw,16px)}
.cuenta div{width:clamp(66px,9svh,110px);padding:10px 0 8px;border-radius:16px;background:linear-gradient(#fff,#eef4f5);
  border:1px solid var(--plata);box-shadow:0 4px 12px rgba(0,0,0,.05)}
.cuenta b{display:block;font-size:clamp(28px,4.5svh,48px);color:var(--turq-osc);font-variant-numeric:tabular-nums}
.cuenta small{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#7d8e92}
.cuenta.fin{font-size:clamp(22px,3.5svh,36px);color:var(--turq-osc)}
.btn{display:inline-block;border:0;border-radius:999px;padding:clamp(14px,2svh,20px) clamp(26px,3.6svh,40px);font-size:clamp(15px,2.4svh,22px);
  letter-spacing:.04em;text-decoration:none;color:#fff;background:var(--turq);box-shadow:0 6px 18px rgba(47,179,176,.35)}
.btn-wa{background:#25a35a;box-shadow:0 6px 18px rgba(37,163,90,.35);font-size:clamp(17px,2.8svh,26px);padding:clamp(16px,2.4svh,22px) clamp(34px,5svh,52px)}
.spotify{width:min(100%,560px);display:flex;justify-content:center}
.spotify iframe{width:100%;height:min(380px,40svh);border:0;border-radius:14px}
.te-espero{font-size:clamp(36px,11.5vw,88px)!important;letter-spacing:.06em;color:var(--turq);line-height:1.1!important}

/* Horizontal (PC): actores a los costados, bloques "lado" a la derecha */
@media (orientation:landscape){
  .b-titulo{top:5%}
  .t-chico{font-size:clamp(40px,8.5svh,96px);padding-right:0}
  .t-grande{font-size:clamp(46px,10svh,120px)}
  .bloque.arriba{top:42%}
  .bloque.abajo{top:58%}
  .te-espero{font-size:clamp(40px,8svh,96px)!important}
}
@media (orientation:landscape) and (min-width:820px){
  .bloque.lado{left:71%;top:50%;width:min(50vw,620px)}
}

/* ===== Primer plano, confeti, aviso ===== */
.confeti{overflow:hidden}
.confeti i{position:absolute;top:-4%;width:8px;height:12px;border-radius:2px;opacity:0}
.deslizar{position:fixed;left:0;right:0;bottom:2.5%;text-align:center;font-size:13px;letter-spacing:.2em;pointer-events:none;
  text-transform:uppercase;color:#fff;text-shadow:0 1px 6px rgba(19,128,125,.8);opacity:0;transition:opacity .4s}
.deslizar span{display:block;font-size:22px;line-height:.8}

/* ===== Portada provisoria (después: sobre) ===== */
.portada{position:fixed;inset:0;z-index:10;display:grid;place-content:center;justify-items:center;gap:22px;background:rgba(251,253,253,.55)}
.portada-para{font-family:"Handelson",cursive;font-size:56px;font-weight:400;color:var(--turq-osc)}
.btn-abrir{border:0;border-radius:999px;padding:16px 46px;font-size:18px;letter-spacing:.18em;text-transform:uppercase;
  color:#fff;background:linear-gradient(135deg,var(--turq),var(--turq-osc));box-shadow:0 8px 24px rgba(19,128,125,.35)}
.btn-abrir:disabled{opacity:.6;cursor:wait}

/* ===== Escenas: portal UNSa + mapas (la cámara la mueve app.js) ===== */
.escenas{position:fixed;left:3vw;right:3vw;top:3svh;height:55svh;overflow:hidden;border-radius:22px;pointer-events:none;visibility:hidden}
.esc{position:absolute;left:0;top:0;transform-origin:0 0;visibility:hidden}
#esc-unsa{width:1376px;height:768px}
#esc-campus{width:1024px;height:678px}
#esc-ciudad{width:465px;height:564px}
.esc svg{display:block;width:100%;height:100%}
.sacudir{position:relative;width:100%;height:100%}
.unsa-fondo{width:100%;border-radius:28px}
.unsa-arco,.unsa-rejas{position:absolute;max-width:none}
.unsa-arco{left:.654%;top:10.677%;width:97.31%}
.unsa-rejas{left:6.831%;top:44.401%;width:85.174%}
.unsa-letras{position:absolute;left:10.6%;top:15.9%;width:77.6%;height:9.6%;display:flex;justify-content:space-between;align-items:center;
  font-family:"Panton",sans-serif;font-weight:700;font-size:64px;line-height:1;color:#e8eaea;
  text-shadow:1px 1px 0 #b9bcbc,2px 2px 0 #a3a6a7,3px 3px 0 #8d9091,4px 4px 0 #77797a,6px 7px 8px rgba(0,0,0,.45)}
.unsa-letras span{display:inline-block}
.unsa-letras .esp{width:22px}
.polvo{position:absolute;width:150px;height:60px;border-radius:50%;opacity:0;
  background:radial-gradient(closest-side,rgba(226,214,196,.95),rgba(226,214,196,0))}
.p1{left:20px;top:575px}.p2{left:140px;top:585px}.p3{left:1130px;top:575px}.p4{left:1240px;top:585px}
.mapa-svg #ruta-campus,.mapa-svg #ruta-campus-color,.mapa-svg #ruta-ciudad,.mapa-svg #ruta-ciudad-color{stroke-dasharray:1 1;stroke-dashoffset:1}
.eco-onda{transform-box:fill-box;transform-origin:center;animation:onda 2s ease-out infinite}
@keyframes onda{from{transform:scale(.3);opacity:.9}to{transform:scale(1.2);opacity:0}}

.bloque.b-esc{top:79%}
.b-esc h2{font-size:clamp(36px,5.6svh,72px)}
@media (orientation:landscape){
  .escenas{left:2vw;right:auto;width:62vw;top:6svh;height:88svh}
  .bloque.b-esc{left:82%;top:50%;width:32vw}
}

/* ===== Reproductor flotante ===== */
.reproductor{position:fixed;z-index:20;left:max(14px,env(safe-area-inset-left));bottom:max(14px,env(safe-area-inset-bottom));
  width:52px;height:52px;padding:0;border-radius:50%;border:2px solid rgba(255,255,255,.9);
  background:linear-gradient(135deg,var(--turq),var(--turq-osc));box-shadow:0 6px 18px rgba(19,128,125,.35);color:#fff}
.reproductor[hidden]{display:none}
.barras{position:absolute;left:50%;top:50%;margin:-10px 0 0 -12.5px;width:25px;display:flex;align-items:flex-end;justify-content:space-between;height:20px}
.barras i{flex:none;width:4px;height:100%;border-radius:2px;background:#fff;transform-origin:bottom;animation:barra 1s ease-in-out infinite alternate}
.barras i:nth-child(2){animation-delay:-.3s}.barras i:nth-child(3){animation-delay:-.6s}.barras i:nth-child(4){animation-delay:-.9s}
@keyframes barra{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
.ico-play{display:none;position:absolute;left:50%;top:50%;width:24px;height:24px;margin:-12px 0 0 -10px;fill:#fff}
.reproductor.pausado .barras{display:none}
.reproductor.pausado .ico-play{display:block}
.btn-spotify{background:#1db954;box-shadow:0 6px 18px rgba(29,185,84,.35)}


/* ===== Sobre 3D ===== */
.sobre-escudo{position:fixed;inset:0;z-index:40;background:#e9f5f4;pointer-events:none;transition:opacity .6s ease}
.sobre{position:fixed;inset:0;z-index:30;cursor:wait;outline:none}
.sobre.listo{cursor:pointer}
.sobre canvas{display:block}
.sobre-aviso{position:fixed;left:50%;bottom:max(40px,calc(env(safe-area-inset-bottom) + 24px));transform:translateX(-50%);z-index:35;pointer-events:none;
  padding:13px 30px;border-radius:999px;background:rgba(19,110,108,.9);border:1px solid rgba(255,255,255,.45);color:#f1fbfb;
  font-size:12px;letter-spacing:.25em;text-transform:uppercase;white-space:nowrap;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.sobre-aviso.listo{animation:latido 2.8s cubic-bezier(.4,0,.6,1) infinite}
@keyframes latido{0%,100%{opacity:.85;transform:translateX(-50%) scale(.98)}50%{opacity:1;transform:translateX(-50%) scale(1.03)}}