/* alameda: estilos tomados del prototipo aprobado (referencia/prototipo.html) */
@font-face{font-family:"VT323";font-style:normal;font-weight:400;font-display:swap;src:url(/estatico/fuentes/vt323.woff2) format("woff2")}
@font-face{font-family:"Permanent Marker";font-style:normal;font-weight:400;font-display:swap;src:url(/estatico/fuentes/permanent-marker.woff2) format("woff2")}
:root{
  --bg:#E6E5E1;--fg:#161615;--muted:#5E5D58;--line:#8F8E88;--surface:#DCDBD6;--cuerpo:#D4D3CE;
  --disco:#C9C8C2;--disco-hub:#D6D5CF;--lcd:#BDBCB5;--tinta:#1C1C1B;--papel-foto:#F4F3EF;
  --foto:.22;--foto-activa:.36;--luz:.5;
  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --pixel:"VT323",ui-monospace,monospace;
  --fibron:"Permanent Marker","Marker Felt",cursive;
  --margen:clamp(16px,3vw,40px);
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--bg:#1C1C1B;--fg:#EDECE8;--muted:#8E8D87;--line:#6A6964;--surface:#262625;--cuerpo:#2A2A28;--disco:#8A8984;--disco-hub:#9A9993;--lcd:#9E9D96;--papel-foto:#D9D8D3;--foto:.3;--foto-activa:.46;--luz:.72;color-scheme:dark}
}
:root[data-theme="dark"]{--bg:#1C1C1B;--fg:#EDECE8;--muted:#8E8D87;--line:#6A6964;--surface:#262625;--cuerpo:#2A2A28;--disco:#8A8984;--disco-hub:#9A9993;--lcd:#9E9D96;--papel-foto:#D9D8D3;--foto:.3;--foto-activa:.46;--luz:.72;color-scheme:dark}
*,*::before,*::after{box-sizing:inherit}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px);-webkit-text-size-adjust:100%}
body{margin:0;min-height:100%;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;transition:background-color .8s ease,color .8s ease}
body.en-inicio{overflow:hidden}
body.arrastrando{cursor:grabbing;user-select:none;-webkit-user-select:none}
body.con-mini main{padding-bottom:84px}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;margin:0;cursor:pointer}
img{max-width:100%}
:focus-visible{outline:2px solid var(--fg);outline-offset:3px;border-radius:3px}
[hidden]{display:none!important}
.oculto{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.subrayado{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.apagado{color:var(--muted)}

/* cabecera */
.cabecera{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;display:flex;align-items:center;gap:20px;padding:10px var(--margen);background:var(--bg);transition:background-color .8s ease}
.marca{font-size:26px;line-height:44px;letter-spacing:-.01em}
.nav-principal{display:flex;align-items:center;gap:22px;margin-left:auto}
.nav-principal a{display:inline-flex;align-items:center;min-height:44px;color:var(--muted);transition:color .2s}
.nav-principal a:hover,.nav-principal a[aria-current="page"]{color:var(--fg)}
.nav-fuerte{font-size:17px}
.nav-suave{font-size:14px}
.nav-sep{width:1px;height:18px;background:var(--line)}
.nav-info{display:none}
.pastilla{display:inline-flex;align-items:center;gap:8px;padding:5px 14px;border:1.5px solid var(--fg);border-radius:999px;font-size:15px;color:var(--fg);transition:background-color .2s,color .2s}
.pastilla::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;animation:latido 2.4s ease-in-out infinite}
@keyframes latido{0%,100%{opacity:1}50%{opacity:.2}}
.nav-tienda:hover .pastilla,.nav-tienda[aria-current="page"] .pastilla{background:var(--fg);color:var(--bg)}
.menu-btn{display:none;min-height:44px;font-size:15px}
.info-btn,.reloj{min-height:44px;font-size:13px;color:var(--muted);white-space:nowrap}
.info-btn:hover,.reloj:hover{color:var(--fg)}
body.en-inicio .cabecera{position:fixed;top:0;left:0;right:0;background:transparent;padding-top:calc(10px + env(safe-area-inset-top,0px))}
body.en-inicio .nav-principal,body.en-inicio .menu-btn{display:none}
body.en-inicio .info-btn{margin-left:auto}
body.en-inicio .info-btn,body.en-inicio .reloj{color:var(--fg)}
body.en-inicio .marca,body.en-inicio .info-btn,body.en-inicio .reloj{text-shadow:0 0 12px var(--bg),0 0 3px var(--bg)}

/* inicio */
.inicio{position:fixed;inset:0;z-index:10;overflow:hidden;background:var(--bg);touch-action:pinch-zoom;transition:background-color .8s ease}
.banda{--mx:50%;--my:50%;--radio:clamp(170px,24vw,320px);position:absolute;left:-48px;right:-48px;height:50%;overflow:hidden;pointer-events:none;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.banda-arriba{top:0}
.banda-abajo{bottom:0}
.banda img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;filter:grayscale(1)}
.foto-base{opacity:var(--foto);transition:opacity .6s ease}
.foto-luz{opacity:var(--luz);-webkit-mask-image:radial-gradient(circle var(--radio) at var(--mx) var(--my),#000 0%,rgba(0,0,0,.55) 45%,transparent 100%);mask-image:radial-gradient(circle var(--radio) at var(--mx) var(--my),#000 0%,rgba(0,0,0,.55) 45%,transparent 100%)}
.inicio[data-activa="arriba"] .banda-arriba .foto-base,.inicio[data-activa="abajo"] .banda-abajo .foto-base{opacity:var(--foto-activa)}
.titulo{position:absolute;left:0;right:0;top:50%;margin:0;padding:0 16px;transform:translateY(-50%);text-align:center;font-size:clamp(40px,7.4vw,112px);font-weight:700;line-height:1;letter-spacing:-.015em;text-shadow:0 0 24px var(--bg);pointer-events:none;animation:aparecer 1.4s ease .3s both}
@keyframes aparecer{from{opacity:0}to{opacity:1}}
.nav-inicio a{position:absolute;left:var(--x);top:var(--y);display:flex;flex-direction:column;padding:4px 8px;text-shadow:0 0 16px var(--bg),0 0 4px var(--bg);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.n-palabra{font-size:clamp(32px,3.4vw,50px);line-height:1.05;letter-spacing:-.02em;text-decoration-thickness:2px;text-underline-offset:8px}
.n-dato{margin-top:6px;font-size:13px;line-height:1.3}
.n-dato::before{content:"";display:inline-block;width:6px;height:6px;margin:0 8px 1px 0;border-radius:50%;background:currentColor;animation:latido 2.4s ease-in-out infinite}
.n-secundaria{font-size:clamp(17px,1.4vw,20px);line-height:36px}
.nav-inicio a:hover,.nav-inicio a:focus-visible{transform:translateX(6px)}
.nav-inicio a:hover .n-palabra,.nav-inicio a:focus-visible .n-palabra,.n-secundaria:hover{text-decoration:underline}
.n-escuchar{--x:9%;--y:18%}.n-diario{--x:66%;--y:12%}.n-tienda{--x:60%;--y:66%}.n-mirar{--x:86%;--y:37%}.n-fechas{--x:11%;--y:71%}
.cinta-noticias{position:absolute;left:0;right:0;bottom:0;overflow:hidden;padding-bottom:env(safe-area-inset-bottom,0px);border-top:1px solid var(--line);background:var(--bg);transition:background-color .8s ease}
.cinta-pista{display:flex;width:max-content;animation:cinta 55s linear infinite}
.cinta-noticias:hover .cinta-pista,.cinta-noticias:focus-within .cinta-pista{animation-play-state:paused}
.cinta-pista a{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding-right:34px;font-size:14px;white-space:nowrap}
.cinta-pista a::before{content:"";width:9px;height:9px;border:1.5px solid currentColor;border-radius:50%}
.cinta-pista a:hover{text-decoration:underline;text-underline-offset:3px}
@keyframes cinta{to{transform:translateX(-50%)}}
@media (max-width:700px){
  .n-escuchar{--x:4%;--y:15%}.n-diario{--x:46%;--y:26%}.n-mirar{--x:74%;--y:10%}.n-tienda{--x:40%;--y:61%}.n-fechas{--x:5%;--y:75%}
  .banda-arriba img{object-position:41% 50%}
  .banda-abajo img{object-position:47% 50%}
}

/* cortina entre secciones */
.cortina{position:fixed;inset:0;z-index:90;pointer-events:none}
.cortina div{position:absolute;left:0;right:0;height:50.5%;background:var(--bg);transition:transform .3s cubic-bezier(.7,0,.3,1)}
.cortina-arriba{top:0;transform:translateY(-101%);border-bottom:1px solid var(--line)}
.cortina-abajo{bottom:0;transform:translateY(101%)}
.cortina.cerrada .cortina-arriba,.cortina.cerrada .cortina-abajo{transform:translateY(0)}

/* vistas */
main{min-height:60vh}
.vista{max-width:1320px;margin:0 auto;padding:12px var(--margen) 64px;animation:entrar .4s ease both}
@keyframes entrar{from{opacity:0}to{opacity:1}}
.indicacion{margin:6px 0 28px;font-size:15px;color:var(--muted)}
.dos-col{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(28px,5vw,72px);align-items:start}
.rotulo{margin:0 0 4px;font-size:13px;font-weight:400;color:var(--muted)}
.rotulo-fuerte{margin:0 0 4px;font-size:18px;font-weight:500;line-height:1.3}

/* formularios */
.form-min{display:grid;gap:10px;margin:0 0 36px}
.form-min > p{margin:0}
.campo{width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg);font-size:16px;line-height:1.4}
.campo::placeholder{color:var(--muted);opacity:1}
textarea.campo{min-height:96px;resize:vertical}
.boton{display:inline-flex;align-items:center;justify-self:start;min-height:44px;padding:0 20px;border-radius:999px;background:var(--fg);color:var(--bg);font-size:15px;transition:transform .2s}
.boton:hover{transform:translateY(-2px)}
.error,.ok{font-size:14px}

/* sala de escucha */
.sala{display:grid;grid-template-columns:auto minmax(0,400px);gap:clamp(32px,6vw,96px);justify-content:center;align-items:start}
.carpeta{display:flex;gap:14px;align-items:stretch}
.pagina{position:relative;display:grid;align-content:start;gap:16px;padding:22px;border:1.5px solid var(--line);border-radius:16px;background:var(--surface);transition:background-color .8s ease}
.pagina::before{content:"";position:absolute;inset:9px;border:1.5px dashed var(--line);border-radius:10px;pointer-events:none}
.pagina-disco{justify-items:center;width:calc(var(--f,172px) + 44px + 40px)}
.disco-texto{position:relative;text-align:center}
.disco-texto p{margin:0 0 6px}
.disco-texto-titulo{font-size:16px;font-weight:700}
.disco-texto-bajada{font-size:13px;line-height:1.45;color:var(--muted)}
.disco-texto-acciones{display:grid;justify-items:center;gap:2px;margin-top:10px!important}
.disco-texto-acciones .boton{justify-self:center;font-size:14px;padding:0 16px}
.disco-texto-acciones .subrayado{display:inline-flex;align-items:center;min-height:44px;font-size:13px}
.resaltar{animation:resaltar .9s ease}
@keyframes resaltar{30%{transform:scale(1.06)}60%{transform:scale(.98)}}
.funda{--f:172px;position:relative;display:grid;place-items:center;width:var(--f);height:var(--f);border:1px solid var(--line);border-radius:50%}
.funda-vacia{display:grid;place-items:center;width:calc(var(--f) - 16px);height:calc(var(--f) - 16px);padding:24px;border:1.5px dashed var(--line);border-radius:50%;font-size:12px;line-height:1.3;text-align:center;color:var(--muted)}
.disco{--d:156px;position:relative;display:block;flex:none;width:var(--d);height:var(--d);border-radius:50%;overflow:hidden;background:var(--disco) center/cover no-repeat;container-type:inline-size;transition:transform .25s ease}
.disco::before,.disco::after{content:"";position:absolute;left:50%;top:50%;border:1px solid var(--line);border-radius:50%;transform:translate(-50%,-50%)}
.disco::before{width:30%;height:30%;background:var(--disco-hub)}
.disco::after{width:10%;height:10%;background:var(--surface)}
.disco-impreso::before{background:rgba(230,229,225,.5)}
.disco-etiqueta{position:absolute;left:4%;right:4%;top:11%;font-family:var(--fibron);font-size:var(--tam,11.5cqi);line-height:1.1;text-align:center;white-space:pre-line;color:var(--tinta);transform:rotate(var(--rot,-6deg));pointer-events:none}
.disco-etiqueta2{position:absolute;left:10%;right:10%;top:67%;font-family:var(--fibron);font-size:7.6cqi;line-height:1.1;text-align:center;white-space:pre-line;color:var(--tinta);transform:rotate(3deg);pointer-events:none}
button.disco:hover{transform:translateY(-4px) rotate(-6deg)}
.obi{position:absolute;left:-12px;right:-12px;top:50%;z-index:2;display:flex;align-items:center;justify-content:center;gap:8px;height:34px;transform:translateY(-50%) rotate(-9deg);background:var(--papel-foto);color:#1C1C1B;font-size:13px;letter-spacing:.02em;box-shadow:0 2px 8px rgba(0,0,0,.2);pointer-events:none;transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .7s ease}
.obi svg{width:14px;height:14px}
.obi.sacudir{animation:sacudir .5s ease}
@keyframes sacudir{0%,100%{transform:translateY(-50%) rotate(-9deg)}25%{transform:translateY(-50%) rotate(-14deg)}75%{transform:translateY(-50%) rotate(-4deg)}}
.obi.fuera{transform:translate(140%,-50%) rotate(12deg);opacity:0}
.fantasma{box-shadow:0 12px 30px rgba(0,0,0,.25)}
.reproductor{position:relative;width:min(100%,380px);aspect-ratio:1;margin:0 auto;container-type:inline-size}
.reproductor .cuerpo{position:absolute;inset:0;border:1.5px solid var(--line);border-radius:50%;background:var(--cuerpo);transition:background-color .8s ease,border-color .3s ease,transform .3s ease}
.reproductor.encima .cuerpo{border-color:var(--fg);transform:scale(1.02)}
.bisagra{position:absolute;left:50%;top:-2px;width:17%;height:4%;transform:translateX(-50%);border:1.5px solid var(--line);border-radius:5px;background:var(--bg)}
.ventana{position:absolute;left:50%;top:41%;width:63%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%}
.ventana .disco{width:100%;height:100%}
.ventana .disco::after{background:var(--cuerpo)}
.ventana .disco.gira{animation:girar 1.8s linear infinite}
.ventana .disco.pausado{animation-play-state:paused}
@keyframes girar{to{transform:rotate(360deg)}}
.aro{position:absolute;left:50%;top:41%;width:67%;aspect-ratio:1;transform:translate(-50%,-50%);border:2px solid var(--line);border-radius:50%;pointer-events:none}
.lcd{position:absolute;left:50%;top:82%;width:56%;height:16%;transform:translate(-50%,-50%);display:flex;flex-direction:column;justify-content:center;gap:6%;padding:0 12px;border-radius:6px;background:var(--lcd);color:var(--tinta);font-family:var(--pixel);font-size:5.6cqi;line-height:1}
.lcd-fila{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px}
.lcd-texto{overflow:hidden;white-space:nowrap}
.lcd-texto span{display:inline-block}
.lcd-texto.corre span{padding-left:100%;animation:marquesina 10s linear infinite}
@keyframes marquesina{to{transform:translateX(-100%)}}
.lcd-eq{display:flex;align-items:flex-end;gap:3px;height:26%}
.lcd-eq i{flex:1;height:100%;background:var(--tinta);opacity:.8;transform-origin:bottom;transform:scaleY(.12)}
.reproductor.sonando:not(.mudo) .lcd-eq i{animation:eq 1s ease-in-out infinite alternate}
.lcd-eq i:nth-child(2n){animation-duration:.7s!important}
.lcd-eq i:nth-child(3n){animation-duration:1.3s!important;animation-delay:-.5s!important}
.lcd-eq i:nth-child(4n+1){animation-delay:-.3s!important}
.lcd-eq i:nth-child(5n){animation-duration:.55s!important}
@keyframes eq{0%{transform:scaleY(.12)}100%{transform:scaleY(1)}}
.controles{display:flex;justify-content:center;gap:12px;margin-top:20px}
.ctrl{display:grid;place-items:center;width:48px;height:48px;border:1.5px solid var(--line);border-radius:50%;transition:border-color .2s,transform .15s}
.ctrl:hover{border-color:var(--fg)}
.ctrl:active{transform:scale(.92)}
.ctrl-principal{border-color:var(--fg)}
.ctrl svg{width:18px;height:18px}
.reproductor-info{margin-top:22px}
.disco-bajada{margin:0 0 16px;font-size:14px;line-height:1.5;color:var(--muted)}
.barra{position:relative;height:2px;overflow:hidden;border-radius:2px;background:var(--line)}
.barra-llena{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--fg)}
.tiempos{display:flex;justify-content:space-between;margin-top:8px;font-size:12px;color:var(--muted)}
.pistas{margin:14px 0 0;padding:0;list-style:none}
.pista{display:flex;align-items:center;gap:14px;width:100%;min-height:44px;border-top:1px solid var(--surface);text-align:left;color:var(--muted);transition:color .2s,padding .25s}
.pista:hover{color:var(--fg);padding-left:6px}
.pista[aria-current="true"]{color:var(--fg)}
.pista-num{width:22px;flex:none;font-size:13px}
.pista-titulo{font-size:17px}
.pista-dur{margin-left:auto;font-size:13px}
.nota-pista{margin:14px 0 0;font-size:14px;color:var(--muted)}
.probar{position:relative;display:inline-flex;align-items:center;min-height:44px;margin-top:8px;font-size:13px;color:var(--muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.probar:focus-within{outline:2px solid var(--fg);outline-offset:3px}
.probar input{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0}

/* mini reproductor */
.mini{position:fixed;left:50%;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:50;display:flex;align-items:center;gap:12px;width:max-content;max-width:calc(100% - 24px);padding:6px 6px 6px 10px;transform:translateX(-50%);border:1px solid var(--line);border-radius:999px;background:var(--bg);box-shadow:0 8px 28px rgba(0,0,0,.18);animation:subir .4s cubic-bezier(.2,.7,.2,1)}
@keyframes subir{from{transform:translate(-50%,24px);opacity:0}}
body.en-inicio .mini{bottom:calc(58px + env(safe-area-inset-bottom,0px))}
.mini-disco{position:relative;flex:none;width:32px;height:32px;border:1px solid var(--line);border-radius:50%;background:var(--disco) center/cover no-repeat}
.mini-disco::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;transform:translate(-50%,-50%);border:1px solid var(--line);border-radius:50%;background:var(--bg)}
.mini.sonando .mini-disco{animation:girar 1.8s linear infinite}
.mini-titulo{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.mini-titulo small{margin-left:8px;font-size:12px;color:var(--muted)}
.mini-btn{flex:none;display:grid;place-items:center;width:44px;height:44px;border:1.5px solid var(--fg);border-radius:50%}
.mini-btn svg{width:16px;height:16px}

/* diario */
.diario{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(28px,5vw,72px);align-items:start}
.tablero{columns:2 300px;column-gap:24px}
.entrada{position:relative;break-inside:avoid;margin:0 0 24px;padding:22px 22px 12px;border-radius:3px;background:var(--surface);transform:rotate(var(--r,0deg));scroll-margin-top:96px;transition:background-color .8s ease,opacity .6s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.entrada.por-entrar{opacity:0;transform:translateY(22px) rotate(calc(var(--r,0deg) + 3deg))}
.entrada-proxima{background:transparent;border:1.5px dashed var(--line)}
.entrada-fecha{margin:0;font-size:12px;color:var(--muted)}
.entrada h3{margin:2px 0 10px;font-size:19px;font-weight:500;line-height:1.3}
.entrada > p{margin:0 0 12px;font-size:15px;line-height:1.6}
.entrada-fotos{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:4px 0 14px}
.entrada-fotos button{display:block;overflow:hidden}
.entrada-fotos img{display:block;width:100%;aspect-ratio:1;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.entrada-fotos button:hover img{transform:scale(1.05)}
.cinta{position:absolute;top:-10px;left:50%;width:76px;height:22px;transform:translateX(-50%) rotate(-3deg);background:var(--line);opacity:.35}
.encuesta{display:grid;gap:8px;margin:0 0 14px}
.opcion{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px;padding:0 14px;overflow:hidden;border:1.5px solid var(--fg);border-radius:10px;font-size:15px;text-align:left}
.opcion-barra{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--fg);opacity:.14;transition:width .9s cubic-bezier(.2,.7,.2,1)}
.opcion span{position:relative}
.opcion-cuenta{font-size:13px;color:var(--muted)}
.opcion[aria-pressed="true"]{font-weight:500}
.encuesta-nota{margin:2px 0 0;font-size:13px;color:var(--muted)}
.oir{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;margin:0 0 8px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;text-align:left;font-size:15px;transition:border-color .2s}
.oir:hover,.oir[aria-pressed="true"]{border-color:var(--fg)}
.oir-icono{display:grid;place-items:center;flex:none;width:32px;height:32px;border:1.5px solid var(--fg);border-radius:50%}
.oir-icono svg{width:14px;height:14px}
.oir small{display:block;font-size:12px;color:var(--muted)}
.acciones-entrada{display:flex;flex-wrap:wrap;align-items:center;gap:4px 20px}
.reaccion,.comentar{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:13px;color:var(--muted)}
.reaccion svg{width:18px;height:18px;transition:transform .3s}
.reaccion[aria-pressed="true"]{color:var(--fg)}
.reaccion[aria-pressed="true"] svg{fill:currentColor;animation:pulso .45s ease}
@keyframes pulso{50%{transform:scale(1.4)}}
.comentar{text-decoration:underline;text-underline-offset:3px}
.comentarios{margin-top:6px;padding:14px 0 10px;border-top:1px solid var(--line)}
.comentarios .form-min{margin:0}
.lista-comentarios{margin:0 0 12px;padding:0;list-style:none}
.lista-comentarios li{margin:0 0 10px;font-size:14px;animation:entrar .4s ease}
.lista-comentarios b{font-weight:500}
.lista-cta{margin:8px 0 24px;padding:24px;border:1.5px solid var(--fg);border-radius:3px}
.preguntas{position:sticky;top:calc(80px + env(safe-area-inset-top,0px))}
.preguntas h3{margin:0 0 4px;font-size:19px;font-weight:500}
.preguntas > p{margin:0 0 14px;font-size:14px;color:var(--muted)}
.qa{margin:8px 0 0;padding:0;list-style:none}
.qa li{padding:14px 0;border-top:1px solid var(--line)}
.qa-p{margin:0 0 6px;font-size:15px}
.qa-r{margin:0;font-size:15px;color:var(--muted)}

/* mirar */
.mesa{position:relative;height:clamp(560px,78vh,780px);border-radius:12px;background:var(--surface);overflow:hidden;transition:background-color .8s ease}
.copia{position:absolute;left:var(--x);top:var(--y);width:var(--w);padding:10px 10px 12px;background:var(--papel-foto);text-align:left;transform:rotate(var(--r));box-shadow:0 1px 2px rgba(0,0,0,.2),0 10px 28px rgba(0,0,0,.14);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;transition:box-shadow .2s}
.copia:hover{box-shadow:0 2px 4px rgba(0,0,0,.2),0 16px 36px rgba(0,0,0,.2)}
.copia:active{cursor:grabbing}
.copia img{display:block;width:100%;height:auto;pointer-events:none}
.copia-vacia{display:grid;place-items:center;aspect-ratio:var(--ar,4/3);padding:12px;border:1px dashed #8F8E88;font-size:13px;text-align:center;color:#5E5D58}
.copia-pie{display:block;margin-top:8px;font-size:12px;color:#5E5D58}

/* fechas */
.lista-fechas{margin:0 0 40px;padding:0;list-style:none}
.fecha{display:grid;grid-template-columns:140px minmax(0,1fr) auto;gap:18px;align-items:baseline;padding:18px 0;border-top:1px solid var(--line)}
.fecha:last-child{border-bottom:1px solid var(--line)}
.fecha-dia{font-size:28px;font-weight:700;letter-spacing:-.01em;line-height:1.1}
.fecha-dia small{display:block;margin-top:4px;font-size:13px;font-weight:400;letter-spacing:0;color:var(--muted)}
.fecha-lugar{font-size:17px}
.fecha-lugar small{display:block;font-size:14px;color:var(--muted)}
.fecha-accion{font-size:14px}
a.fecha-accion{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:3px}

/* tienda */
.tienda-cabeza{max-width:760px;margin:20px 0 44px}
.estado{display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;padding:4px 12px;border:1px solid var(--line);border-radius:999px;font-size:13px}
.estado::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;animation:latido 2.4s ease-in-out infinite}
.tienda-titulo{margin:0 0 14px;font-size:clamp(40px,6.4vw,92px);font-weight:700;line-height:1;letter-spacing:-.015em}
.tienda-bajada{margin:0;font-size:18px;color:var(--muted)}
.lista-temas{margin:24px 0 0;padding:0;list-style:none}
.lista-temas li{display:flex;align-items:baseline;gap:14px;padding:6px 0;font-size:18px}
.lista-temas span{width:22px;flex:none;font-size:13px;color:var(--muted)}
.vitrina{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0 0 48px}
.producto{padding-top:18px;border-top:1.5px solid var(--fg)}
.producto h3{margin:0 0 6px;font-size:19px;font-weight:500}
.producto p{margin:0 0 8px;font-size:15px;color:var(--muted)}
.producto .precio{color:var(--fg)}
.objeto{display:grid;place-items:center;width:100%;height:210px;margin:6px 0 16px;perspective:900px}
.obj-disco{position:relative;width:150px;height:150px;border:1px solid var(--line);border-radius:50%;background:var(--disco) center/cover no-repeat}
.obj-disco::before{content:"";position:absolute;left:50%;top:50%;width:30%;height:30%;transform:translate(-50%,-50%);border:1px solid var(--line);border-radius:50%;background:rgba(230,229,225,.5)}
.obj-disco::after{content:"";position:absolute;left:50%;top:50%;width:10%;height:10%;transform:translate(-50%,-50%);border:1px solid var(--line);border-radius:50%;background:var(--bg)}
.producto:hover .obj-disco,.obj-disco.gira{animation:girar 2.4s linear infinite}
.obj-llavero{position:relative;display:block;width:110px;height:190px;transform-origin:50% 12px}
.producto:hover .obj-llavero,.obj-llavero.balancea{animation:balanceo 2.2s ease-in-out}
@keyframes balanceo{0%{transform:rotate(0)}15%{transform:rotate(14deg)}35%{transform:rotate(-10deg)}55%{transform:rotate(6deg)}75%{transform:rotate(-3deg)}100%{transform:rotate(0)}}
.llavero-aro{position:absolute;left:50%;top:0;width:46px;height:46px;transform:translateX(-50%);border:3px solid var(--fg);border-radius:50%}
.llavero-cadena{position:absolute;left:50%;top:43px;width:2px;height:22px;transform:translateX(-50%);background:var(--fg)}
.llavero-chapa{position:absolute;left:50%;top:62px;width:96px;height:124px;transform:translateX(-50%);border:1.5px solid var(--fg);border-radius:18px;background:var(--disco) center/cover no-repeat;box-shadow:0 8px 20px rgba(0,0,0,.18)}
.llavero-chapa::before{content:"";position:absolute;left:50%;top:8px;width:10px;height:10px;transform:translateX(-50%);border:1.5px solid var(--fg);border-radius:50%;background:var(--bg)}
.obj-tarjeta{position:relative;display:block;width:224px;height:142px;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.cara{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:14px 16px;border:1.5px solid var(--fg);border-radius:12px;background:var(--surface);text-align:left;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 10px 24px rgba(0,0,0,.14)}
.cara-atras{flex-direction:row;align-items:center;gap:14px;transform:rotateY(180deg)}
.tarjeta-arriba{display:flex;justify-content:space-between;align-items:center;font-size:13px}
.tarjeta-arriba svg{width:20px;height:20px}
.tarjeta-titulo{font-size:17px;font-weight:700;letter-spacing:-.01em}
.tarjeta-qr{flex:none;width:72px;height:72px}
.tarjeta-texto{font-size:12px;line-height:1.4}
.tarjeta-texto b{display:block;margin-top:6px;font-family:var(--pixel);font-size:17px;font-weight:400;letter-spacing:.05em}
.objeto-pista{display:block;margin:-8px 0 12px;font-size:12px;color:var(--muted)}
.lista-grande{padding:24px;border:1.5px solid var(--fg);border-radius:3px;scroll-margin-top:96px}
.tienda-notas p{margin:0 0 10px;font-size:15px}

/* canje */
.canje{max-width:520px;margin:28px auto 0}
.canje-titulo{margin:0 0 10px;font-size:clamp(32px,4.4vw,52px);font-weight:700;line-height:1.05;letter-spacing:-.015em}
.canje-bajada{margin:0 0 24px;color:var(--muted)}
.canje label{font-size:14px;color:var(--muted)}
.campo-codigo{font-size:20px;letter-spacing:.1em;text-transform:uppercase}
.nota-prueba{margin:4px 0 0;font-size:13px;color:var(--muted)}
.exito{padding:22px;border:1.5px solid var(--fg);border-radius:14px}
.exito h3{margin:0 0 8px;font-size:22px;font-weight:700}
.exito p{margin:0 0 12px}
.exito .chico{min-height:44px;font-size:13px;color:var(--muted)}

/* pie y diálogos */
.pie{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;max-width:1320px;margin:0 auto;padding:24px var(--margen) 40px;font-size:13px;color:var(--muted)}
.pie button,.pie a{display:inline-flex;align-items:center;min-height:44px}
.pie button:hover,.pie a:hover{color:var(--fg)}
body.en-inicio .pie{display:none}
.dialogo,.visor{border:0;padding:0;color:var(--fg)}
.dialogo{width:min(480px,calc(100% - 32px));padding:28px;border-radius:14px;background:var(--bg)}
.dialogo::backdrop,.visor::backdrop{background:rgba(12,12,11,.74)}
.dialogo h2{margin:0 0 12px;font-size:26px;font-weight:700;letter-spacing:-.01em}
.dialogo p{margin:0 0 12px;font-size:15px}
.datos{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:18px 0 0;font-size:14px}
.datos dt{color:var(--muted)}
.datos dd{margin:0}
.nota-proto{margin-top:18px!important;padding-top:14px;border-top:1px solid var(--line);font-size:13px!important;color:var(--muted)}
.cerrar{position:absolute;top:8px;right:8px;display:grid;place-items:center;width:44px;height:44px;border-radius:50%}
.cerrar svg{width:18px;height:18px}
.visor{max-width:min(92vw,960px);background:transparent;overflow:visible}
.visor img{display:block;max-width:100%;max-height:80vh;margin:0 auto}
.visor .copia-vacia{width:min(80vw,640px);background:var(--papel-foto)}
.visor-pie{margin:10px 0 0;text-align:center;font-size:14px;color:#EDECE8}
.visor .cerrar{top:-52px;right:0;color:#EDECE8}

/* notas de voz y fotos sueltas en el diario */
.entrada-fotos.una{grid-template-columns:1fr}
.entrada-fotos.una img{aspect-ratio:auto;max-height:440px}
.nota-voz-tiempo{font-size:12px;color:var(--muted)}

/* panel de la banda */
.panel{max-width:560px;margin:0 auto}
.panel-cabeza{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:8px 0 22px}
.panel-cabeza h3,.panel-cabeza h2{margin:0;font-size:28px;font-weight:700;letter-spacing:-.015em}
.panel-cabeza p{margin:2px 0 0;font-size:14px;color:var(--muted)}
.panel-salir{min-height:44px;font-size:14px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.panel-lista{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.panel-item{display:flex;align-items:center;gap:14px;width:100%;min-height:66px;padding:12px 16px;border:1.5px solid var(--line);border-radius:14px;text-align:left;transition:border-color .2s,transform .2s}
.panel-item:hover:not(:disabled){border-color:var(--fg);transform:translateX(4px)}
.panel-item:disabled{opacity:.45;cursor:default}
.panel-item.principal{border-color:var(--fg);background:var(--fg);color:var(--bg)}
.panel-item svg,.campo-archivo svg,.panel-volver svg{flex:none;width:22px;height:22px}
.panel-item-texto{display:flex;flex:1;flex-direction:column;min-width:0}
.panel-item-texto b{font-size:16px;font-weight:500}
.panel-item-texto small{font-size:13px;opacity:.75}
.contador{flex:none;min-width:26px;height:26px;padding:0 8px;border-radius:999px;background:var(--fg);color:var(--bg);font-size:13px;line-height:26px;text-align:center}
.panel-item.principal .contador{background:var(--bg);color:var(--fg)}
.panel-pie{margin:18px 0 0;font-size:14px}
.panel-volver{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:0 0 6px;font-size:14px;color:var(--muted)}
.panel-volver svg{width:18px;height:18px}
.panel-pantalla h3{margin:0 0 6px;font-size:24px;font-weight:700;letter-spacing:-.01em}
.panel-pantalla > p{margin:0 0 18px;font-size:14px;color:var(--muted)}
.panel-form{display:grid;gap:8px}
.panel-form label:not(.campo-archivo),.panel-rotulo{margin-top:8px;font-size:14px;font-weight:500}
.panel-form .boton{margin-top:10px}
.ayuda{margin:0;font-size:12px;color:var(--muted)}
.campo-archivo{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;min-height:64px;padding:12px;border:1.5px dashed var(--line);border-radius:12px;font-size:14px;color:var(--muted);cursor:pointer;text-align:center}
.campo-archivo:hover{border-color:var(--fg);color:var(--fg)}
.campo-archivo:focus-within{outline:2px solid var(--fg);outline-offset:3px}
.campo-archivo input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.miniaturas{display:flex;flex-wrap:wrap;gap:8px}
.miniaturas img{width:72px;height:72px;border-radius:8px;object-fit:cover}
.panel-exito{margin:18px 0 0;padding:16px;border:1.5px solid var(--fg);border-radius:12px;font-size:15px;animation:entrar .4s ease}
.panel-exito a,.panel-exito button{text-decoration:underline;text-underline-offset:3px}
.panel-tarjeta{margin:0 0 10px;padding:14px 16px;border:1.5px solid var(--line);border-radius:12px}
.panel-tarjeta > p{margin:0 0 8px;font-size:15px}
.panel-tarjeta > small{display:block;margin:0 0 8px;font-size:12px;color:var(--muted)}
.panel-tarjeta .boton{margin-top:10px}
.panel-borrar{min-height:44px;font-size:13px;color:var(--muted)}
.panel-vacio{padding:18px;border:1.5px dashed var(--line);border-radius:12px;font-size:14px;color:var(--muted)}
.quien{display:grid;gap:10px;margin:18px 0 0}
.quien .boton{justify-self:stretch;justify-content:center}

@media (max-width:900px){
  .sala{grid-template-columns:minmax(0,1fr)}
  .reproductor-col{order:-1}
  .carpeta-col{display:grid;justify-items:center}
  .carpeta{flex-direction:column;align-items:center;width:100%}
  .pagina{grid-auto-flow:column;padding:16px;gap:12px}
  .pagina-disco{grid-auto-flow:row;grid-template-columns:auto 1fr;align-items:center;width:auto}
  .pagina-disco .disco-texto{text-align:left}
  .pagina-disco .disco-texto-acciones{justify-items:start}
  .pagina-disco .disco-texto-acciones .boton{justify-self:start}
  .funda{--f:128px}
  .disco{--d:114px}
  .reproductor{width:min(100%,320px)}
  .dos-col,.diario{grid-template-columns:minmax(0,1fr)}
  .preguntas{position:static}
}
@media (max-width:820px){
  .cabecera{gap:14px}
  .marca{font-size:22px}
  .nav-principal{position:absolute;left:0;right:0;top:100%;display:none;flex-direction:column;align-items:flex-start;gap:0;padding:0 var(--margen) 14px;background:var(--bg);border-bottom:1px solid var(--line)}
  .cabecera.abierta .nav-principal{display:flex}
  .nav-fuerte{font-size:24px;line-height:50px}
  .nav-suave,.nav-info{font-size:18px;line-height:44px;color:var(--muted)}
  .nav-info{display:inline-flex}
  .nav-sep{width:40px;height:1px;margin:6px 0}
  .menu-btn{display:block;margin-left:auto}
  .info-btn{display:none}
  body.en-inicio .info-btn{display:inline-flex}
}
@media (max-width:760px){
  .vitrina{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px),(hover:none){
  .mesa{height:auto;display:grid;gap:28px;padding:18px 10px;background:none}
  .copia{position:relative;left:auto;top:auto;width:auto;cursor:pointer;touch-action:auto}
}
@media (max-width:560px){
  .fecha{grid-template-columns:minmax(0,1fr) auto}
  .fecha-dia{grid-column:1/-1}
}
@media (max-width:370px){.funda{--f:112px}.disco{--d:100px}.pagina{padding:12px}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---------- agregados para la web real ---------- */
.saltar{position:fixed;left:12px;top:-60px;z-index:100;padding:10px 16px;border-radius:999px;background:var(--fg);color:var(--bg);font-size:14px}
.saltar:focus{top:calc(10px + env(safe-area-inset-top,0px))}
main:focus{outline:none}
.campo{border-color:var(--muted)}
select.campo{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px}
.boton:disabled{opacity:.55;cursor:default;transform:none}
.error{color:var(--fg);font-weight:500}
.turnstile:empty{display:none}
.turnstile{min-height:0}

/* barra del reproductor: se puede tocar o arrastrar para adelantar */
.barra{cursor:pointer;touch-action:none;overflow:visible;background:none;height:44px;margin:-21px 0}
.barra::before{content:"";position:absolute;left:0;right:0;top:21px;height:2px;border-radius:2px;background:var(--line)}
.barra .barra-llena{top:21px;bottom:auto;height:2px;border-radius:2px}
.barra .barra-llena::after{content:"";position:absolute;right:-6px;top:-5px;width:12px;height:12px;border-radius:50%;background:var(--fg);opacity:0;transition:opacity .2s}
.barra:hover .barra-llena::after,.barra:focus-visible .barra-llena::after,.barra.arrastrando .barra-llena::after{opacity:1}
.compartir{display:inline-flex;align-items:center;min-height:44px;margin-top:4px;font-size:13px;color:var(--muted)}
.compartir:hover{color:var(--fg)}
.sala-vacia{margin:14px 0 0;font-size:14px;color:var(--muted)}
.oir:disabled{opacity:.55;cursor:default}
.oir:disabled:hover{border-color:var(--line)}
.lista-comentarios .comentario-texto{white-space:pre-line}
.entrada > p{white-space:pre-line}
.qa-r{white-space:pre-line}
.info-bio p{margin:0 0 12px}
.cargando-datos{opacity:.6}

/* panel: listas con editar y borrar */
.panel-seccion{margin:30px 0 0}
.panel-seccion > h4{margin:0 0 10px;font-size:16px;font-weight:500}
.panel-fila{display:flex;align-items:center;gap:12px;margin:0 0 10px;padding:10px 14px;border:1.5px solid var(--line);border-radius:12px}
.panel-fila img{flex:none;width:52px;height:52px;border-radius:6px;object-fit:cover}
.panel-fila-texto{display:flex;flex:1;flex-direction:column;min-width:0}
.panel-fila-texto b{overflow:hidden;font-size:15px;font-weight:500;text-overflow:ellipsis;white-space:nowrap}
.panel-fila-texto small{font-size:12px;color:var(--muted)}
.panel-acciones{display:flex;flex:none;align-items:center;gap:2px}
.panel-acciones button{display:grid;place-items:center;min-width:44px;min-height:44px;padding:0 6px;border-radius:8px;font-size:13px;color:var(--muted)}
.panel-acciones button:hover{color:var(--fg)}
.panel-acciones button:disabled{opacity:.3;cursor:default}
.panel-acciones svg{width:18px;height:18px}
.miniatura{position:relative}
.miniatura button{position:absolute;top:-8px;right:-8px;display:grid;place-items:center;width:44px;height:44px;}
.miniatura button span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--fg);color:var(--bg);font-size:14px;line-height:1}
.progreso{height:4px;margin:8px 0 0;border-radius:2px;background:var(--surface);overflow:hidden}
.progreso i{display:block;height:100%;width:0;background:var(--fg);transition:width .2s}
.voz-actual{display:flex;align-items:center;gap:10px;font-size:14px}
.panel-form audio{width:100%}
.panel-editando{margin:0 0 14px;padding:10px 14px;border-radius:10px;background:var(--surface);font-size:14px}
.panel-editando button{text-decoration:underline;text-underline-offset:3px;min-height:44px}
.panel-csv{margin:0 0 18px}
.info-btn,.reloj{align-items:center}