@font-face{font-family:"Perandory";src:url(/assets/fonts/perandory.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Aileron";font-weight:800;src:url(/assets/fonts/aileron.ttf) format("truetype");font-display:swap}
:root{
  --azul:#1800AD; --oro:#AE9A6A; --ink:#1d1c1a; --soft:#f3f2ee;
  --disc:#1800AD;
  --hh:78px; --bh:54px;
  --s:min(calc(100svh - var(--hh) - var(--bh) - 190px), 40vw, 500px);
  --ease:cubic-bezier(.77,0,.18,1);
  --stagetop:calc(env(safe-area-inset-top,0px) + var(--hh) + (100svh - var(--hh) - var(--bh) - var(--s)) / 2 - 40px);
  box-sizing:border-box;
}
*,*::before,*::after{box-sizing:inherit}
html,body{height:100%}
body{margin:0;overflow:hidden;background:#fff;color:#fff;font-family:"Jost","Futura","Century Gothic",sans-serif;-webkit-font-smoothing:antialiased;overscroll-behavior:none}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.disp{font-family:"Perandory",serif;font-weight:400;line-height:.98;letter-spacing:.005em}
[hidden]{display:none!important}
.ico{width:18px;height:18px;flex:none}

/* Capas. Blanco y negro abajo (canvas líquido + texto blanco en difference);
   una capa del color del disco en lighten convierte el negro en ese color;
   la textura de papel multiplica encima; portadas, fotos y cajón van a todo color arriba. */
#liqHost{position:fixed;inset:0;pointer-events:none}
#liquid{position:fixed;inset:0;width:100%;height:100%;display:block;background:#fff}
/* En móvil y tablet las páginas de lectura llevan un papel opaco justo debajo de la capa
   de texto. La inversión se mantiene (blanco sobre blanco da negro, igual que hoy sobre el
   fondo claro), pero deja de calcularse contra un canvas que se repinta cada frame: ahí es
   donde el compositor del móvil dejaba teselas sin pintar. El líquido sigue entero en la
   página de discos y en escritorio. */
#paper{position:fixed;inset:0;background:#fff;z-index:8;display:none;pointer-events:none}
@media (max-width:900px){body.plain #paper{display:block}}
.bw{mix-blend-mode:difference;color:#fff}
/* dos colores por disco: darken tiñe el blanco (texto) con el segundo color; lighten tiñe el negro (fondo líquido) con el principal */
#duoT{position:fixed;inset:0;background:var(--ink,#fff);mix-blend-mode:darken;pointer-events:none;z-index:29;transition:background 1.4s}
#duo{position:fixed;inset:0;background:var(--disc);mix-blend-mode:lighten;pointer-events:none;z-index:30;transition:background 1.4s}
/* grano fino, como la estática de un televisor: se repite a tamaño real para que no se emborrone */
#tex{position:fixed;inset:0;z-index:35;pointer-events:none;mix-blend-mode:multiply;background:url(/assets/img/g01.png) repeat;background-size:256px 256px}

#tex{transition:opacity 1s}
body.clean #tex{opacity:0}

/* Pistas horizontales */
/* la pista ya no es una tira de 700vw: mide una pantalla y son los paneles los que
   se desplazan. Así la capa con mezcla que el compositor tiene que rasterizar es
   del tamaño del panel visible y no de siete pantallas. */
.track{position:fixed;top:0;left:0;height:100%;width:100vw;overflow:hidden}
.track.bwt{z-index:10}
.track.colt{z-index:40;pointer-events:none}
.panel{position:absolute;top:0;left:0;width:100vw;height:100%;overflow:hidden;visibility:hidden;transition:transform 1.3s var(--ease)}
.panel.on{visibility:visible}
.inner{position:absolute;left:clamp(20px,4vw,56px);right:clamp(20px,4vw,56px);top:calc(env(safe-area-inset-top,0px) + var(--hh));bottom:calc(env(safe-area-inset-bottom,0px) + var(--bh) + 8px)}
/* las zonas con scroll se desvanecen antes del borde, así ningún texto choca con la barra inferior */
[data-scroll]{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 44px),transparent)}

/* Cabecera */
.top{position:fixed;inset:0 0 auto 0;height:calc(env(safe-area-inset-top,0px) + var(--hh));z-index:20;display:flex;align-items:center;gap:22px;
  padding:env(safe-area-inset-top,0px) clamp(20px,4vw,56px) 0}
.brand{display:block;height:30px;flex:none}
.logo{display:block;height:100%;width:auto}
.nav{display:flex;gap:4px;margin-left:auto;font-size:14px}
.nav a{text-decoration:none;padding:8px 14px;border-radius:999px;opacity:.7;transition:opacity .3s,background .4s}
.nav a:hover{opacity:1}
/* selección sutil: una pastilla apenas visible detrás del enlace activo */
.nav a[aria-current="page"]{opacity:1;background:rgba(255,255,255,.13)}
.acts{display:flex;gap:8px;align-items:center;flex:none}
.pill{border:1px solid #fff;border-radius:999px;padding:9px 16px;text-decoration:none;font-size:14px;white-space:nowrap;display:inline-flex;align-items:center;gap:8px;transition:background .3s,color .3s}
.pill:hover{background:#fff;color:#000}
.pill.solid{background:#fff;color:#000}
.pill.solid:hover{background:transparent;color:#fff}
.pill.cta{width:40px;height:40px;padding:0;justify-content:center}
.lang{display:inline-flex;align-items:center;gap:6px;border:1px solid #fff;border-radius:999px;padding:8px 12px;font-size:12.5px;letter-spacing:.04em;line-height:1}
.lang span{opacity:.45;transition:opacity .3s}
.lang span.on{opacity:1;font-weight:500}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.dot.off{background:transparent;box-shadow:inset 0 0 0 1px currentColor}
/* un brillo suave en el punto del horario, una sola vez, poco después de abrir */
@keyframes glow{0%{box-shadow:0 0 0 0 rgba(255,255,255,0)}35%{box-shadow:0 0 0 4px rgba(255,255,255,.28),0 0 10px 3px rgba(255,255,255,.55)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.dot.glow{animation:glow 1.8s ease-in-out 2.6s 1}
.dot.off.glow{animation-name:none}
.mstatus{display:none}

/* Barra inferior (web): iconos, sin fondo */
.bottom{position:fixed;inset:auto 0 0 0;height:calc(env(safe-area-inset-bottom,0px) + var(--bh));z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(20px,4vw,56px) env(safe-area-inset-bottom,0px);font-size:13px}
.bottom a{text-decoration:none;opacity:.75;transition:opacity .3s}
.bottom a:hover{opacity:1}
.addr{display:inline-flex;align-items:center;gap:8px}
.social{display:flex;gap:16px;align-items:center}
.social a{display:grid;place-items:center}
.tabbar{display:none}

/* ---------- REPRODUCTOR ---------- */
.stagebox{position:absolute;left:50%;top:var(--stagetop);width:var(--s);height:var(--s);margin-left:calc(var(--s) / -2)}
.lp{position:absolute;inset:0;will-change:transform}
.sleeve{position:absolute;inset:0;z-index:2;cursor:pointer;pointer-events:auto;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.07),0 26px 50px -26px rgba(0,0,0,.55)}
.sleeve img{width:100%;height:100%;object-fit:cover;display:block}
.record{position:absolute;inset:2.5%;z-index:1;will-change:transform}
.disc{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle,transparent 0 33%,rgba(255,255,255,.05) 33.4% 34%,transparent 34.4%),
    repeating-radial-gradient(circle,#000 0 1.2px,#1d1d1d 1.6px 2.6px),#000;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 10px 30px -12px rgba(0,0,0,.6)}
.label{position:absolute;inset:32%;border-radius:50%;background:#fff center/cover}
.label::after{content:"";position:absolute;inset:46%;border-radius:50%;background:#000;box-shadow:0 0 0 2px #fff}
.sheen{position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 20deg,transparent 0 8%,rgba(255,255,255,.13) 12%,transparent 18% 50%,rgba(255,255,255,.09) 58%,transparent 64%)}
.play{position:absolute;left:50%;top:50%;z-index:50;pointer-events:auto;--pb:clamp(58px,calc(var(--s) * .17),84px);width:var(--pb);height:var(--pb);
  margin:calc(var(--pb) / -2) 0 0 calc(var(--pb) / -2);border-radius:50%;background:#fff;color:var(--disc);display:grid;place-items:center;
  box-shadow:0 0 0 1px rgba(0,0,0,.08),0 14px 34px -10px rgba(0,0,0,.55);transition:color 1.2s,scale .3s}
.play:hover{scale:1.07}
.play svg{width:32%;height:32%}
.i-pause{display:none}.is-playing .i-pause{display:block}.is-playing .i-play{display:none}
.cap{position:absolute;left:50%;transform:translateX(-50%);width:min(calc(var(--s) * 1.5),88vw);text-align:center;top:calc(var(--stagetop) + var(--s) + 26px)}
.cap .logo{height:28px;margin:0 auto 10px;display:none}
.cap .k{font-size:12.5px;opacity:.7}
.cap .t{display:block;font-size:clamp(20px,1.9vw,28px);font-family:"Perandory",serif;line-height:1.1;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cap .a{font-size:13.5px;opacity:.8;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prog{display:flex;align-items:center;gap:10px;margin:12px auto 0;font-size:11.5px;font-variant-numeric:tabular-nums;justify-content:center}
.prog span{opacity:.7;min-width:30px}
.bar{width:min(220px,40vw);height:2px;background:rgba(255,255,255,.3);position:relative;overflow:hidden;cursor:pointer}
.bar i{position:absolute;inset:0;background:#fff;transform-origin:left;transform:scaleX(0)}
.hint{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:20px;font-size:12.5px;opacity:.72;transition:opacity .5s}
.hint i{width:28px;height:1px;background:currentColor;opacity:.6;animation:hnt 2.4s ease-in-out infinite}
@keyframes hnt{0%,100%{transform:translateX(-7px);opacity:.2}50%{transform:translateX(7px);opacity:.9}}
.hint .m{display:none}
.dots{position:absolute;left:clamp(20px,4vw,56px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px}
.dots button{width:22px;height:22px;display:grid;place-items:center}
.dots button::before{content:"";width:6px;height:6px;border-radius:50%;box-shadow:inset 0 0 0 1px #fff;transition:background .3s,scale .3s}
.dots button[aria-current="true"]::before{background:#fff;scale:1.4}

/* ---------- visor de fotos a pantalla completa ---------- */
.gal .slot:not(.s1){cursor:zoom-in}
.gal .slot:focus-visible{outline:2px solid #fff;outline-offset:2px}
.pbx{position:fixed;inset:0;z-index:70;background:rgba(16,15,14,.94);display:grid;place-items:center;opacity:0;transition:opacity .35s var(--ease);-webkit-tap-highlight-color:transparent}
.pbx[hidden]{display:none}
.pbx.on{opacity:1}
.pbx img{max-width:min(94vw,1400px);max-height:84svh;object-fit:contain;display:block;border-radius:3px;box-shadow:0 30px 80px rgba(0,0,0,.5);cursor:zoom-out}
.pbx button{position:absolute;display:grid;place-items:center;border-radius:50%;color:#fff;background:rgba(255,255,255,.13);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .25s,color .25s}
.pbx button:hover{background:#fff;color:#111}
.pbx button:focus{outline:none}
.pbx button:focus-visible{outline:2px solid #fff;outline-offset:3px}
.pbx .pbx-x{top:calc(env(safe-area-inset-top,0px) + 16px);right:16px;width:44px;height:44px;font-size:21px;line-height:1}
.pbx .pbx-p,.pbx .pbx-n{top:50%;margin-top:-26px;width:52px;height:52px;font-size:26px;line-height:1}
.pbx .pbx-p{left:16px}
.pbx .pbx-n{right:16px}
.pbx .pbx-c{position:absolute;bottom:calc(env(safe-area-inset-bottom,0px) + 20px);left:50%;transform:translateX(-50%);color:#fff;opacity:.6;font-size:13px;letter-spacing:.05em}
@media (max-width:900px){
  .pbx img{max-width:94vw;max-height:74svh}
  .pbx .pbx-p,.pbx .pbx-n{width:46px;height:46px;margin-top:-23px}
  .pbx .pbx-p{left:10px}
  .pbx .pbx-n{right:10px}
}

/* ---------- HORARIOS: mismo papel blanco de la carta, a sangre ---------- */
.hor-panel .paper{position:absolute;inset:0;background:#fff;display:none}
.hor-panel .inner{pointer-events:auto;color:var(--ink)}
@media (max-width:900px){
  .hor-panel .paper{display:block}
  .hor-panel .inner{top:calc(env(safe-area-inset-top,0px) + var(--hh));bottom:calc(env(safe-area-inset-bottom,0px) + var(--bh) + 4px)}
  /* la cabecera sube por encima del papel: su mezcla 'difference' la pinta en negro sobre blanco */
  body.hor .top{z-index:41}
}

/* ---------- CARTA: capa de color, papel blanco para leer ---------- */
.carta-panel .paper{position:absolute;left:0;right:0;top:calc(env(safe-area-inset-top,0px) + var(--hh));bottom:calc(env(safe-area-inset-bottom,0px) + var(--bh));background:#fff}
.carta-panel .inner{pointer-events:auto;color:#2b2925}
.carta{display:grid;grid-template-columns:230px minmax(0,1fr);height:100%;padding-top:clamp(8px,2vh,24px)}
.carta>*{min-width:0}
.side{padding-right:clamp(24px,3vw,44px);display:flex;flex-direction:column;min-height:0}
.carta h1{font-size:clamp(44px,5vw,78px);margin:0 0 .35em;color:var(--disc);transition:color 1.2s}
.seg{display:inline-flex;align-self:flex-start;border:1px solid var(--disc);border-radius:999px;padding:3px;margin-bottom:24px}
.seg button{padding:8px 16px;border-radius:999px;font-size:14px;color:var(--disc);transition:background .3s,color .3s}
.seg button[aria-pressed="true"]{background:var(--disc);color:#fff}
.rail{display:flex;flex-direction:column;gap:1px;overflow-y:auto;min-height:0;scrollbar-width:none}
.rail button{text-align:left;font-size:15.5px;padding:6px 0;color:#8a867e;transition:color .3s,padding .5s var(--ease)}
.rail button:hover{color:#2b2925}
.rail button[aria-current="true"]{color:var(--disc);padding-left:14px;position:relative}
.rail button[aria-current="true"]::before{content:"";position:absolute;left:0;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--disc)}
.mnote{font-size:12.5px;color:#8a867e;margin-top:auto;padding-top:18px;line-height:1.5}
.list{overflow-y:auto;height:100%;min-height:0;border-left:1px solid rgba(0,0,0,.1);padding:0 14px 30vh clamp(24px,3.5vw,56px);scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent;overscroll-behavior:contain}
.sec{padding-top:10px;margin-bottom:64px}
.shead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:12px}
.shead h2{font-family:"Perandory",serif;font-weight:400;font-size:clamp(30px,3.2vw,46px);margin:0;line-height:1;color:var(--disc)}
.shead p{margin:6px 0 0;font-size:14px;color:#77736b}
.ill{display:block;flex:none;background:var(--disc);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.shead .ill{width:clamp(80px,10vw,130px);height:clamp(70px,9vw,120px)}
.sub{font-family:"Perandory",serif;font-size:clamp(22px,1.9vw,27px);line-height:1;color:var(--disc);margin:34px 0 6px;letter-spacing:.01em}
.sec .sub:first-of-type{margin-top:22px}
.rows{columns:2;column-gap:clamp(28px,4vw,64px)}
.row{break-inside:avoid;padding:11px 0}
.row .l{display:flex;align-items:baseline;gap:10px}
.row b{font-weight:500;font-size:16.5px;color:#211f1b}
.row .pr{margin-left:auto;font-variant-numeric:tabular-nums;font-size:15.5px;white-space:nowrap;color:var(--disc)}
.row p{margin:4px 0 0;font-size:14.5px;line-height:1.55;color:#5f5b53;max-width:48ch}
.tracks{display:grid;grid-template-columns:1fr 1fr;gap:22px clamp(28px,4vw,64px)}
.trk{display:grid;grid-template-columns:62px 1fr;gap:16px;align-items:start;padding:8px 0}
.tracks.plain .trk{grid-template-columns:1fr}
.trk .ill{width:62px;height:62px;margin-top:-3px}
.trk .l{display:flex;align-items:baseline;gap:10px}
.trk .nm{min-width:0}
.trk .nm i{margin-left:7px}
.trk b{font-weight:500;font-size:16.5px;color:#211f1b}
.trk i{font-style:normal;font-size:13px;color:#8a867e}
.trk .pr{margin-left:auto;flex:none;white-space:nowrap;font-size:15.5px;color:var(--disc)}
.trk p{margin:4px 0 0;font-size:14.5px;line-height:1.55;color:#5f5b53}
.trk p+p{color:#8a867e}

/* ---------- NOSOTROS ---------- */
.nos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-rows:minmax(0,1fr);column-gap:clamp(40px,7vw,120px);row-gap:clamp(20px,4vh,40px);height:100%;padding:clamp(16px,4vh,44px) 0 0}
.nos .txt{grid-column:1;grid-row:1;align-self:center;min-height:0}
.nos h1{font-size:clamp(40px,4.4vw,70px);margin:0 0 clamp(18px,3vh,30px)}
.nos .txt p{margin:0 0 14px;font-size:15.5px;line-height:1.7;max-width:44ch}
.nos .txt p button{text-decoration:underline;text-underline-offset:4px}
.phslot{grid-column:2;grid-row:1}
.nos .more{margin-top:24px;display:flex;gap:22px;flex-wrap:wrap}.nos .more a{text-underline-offset:4px}
.gal{grid-column:2;grid-row:1;padding-bottom:clamp(16px,4vh,44px);display:grid;grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1.3fr) minmax(0,1fr);gap:14px;min-height:0}
.slot{position:relative;overflow:hidden;min-height:0;background:#111;pointer-events:auto}
.slot.s1{grid-column:1 / span 2}
.slot video,.slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.slot img{opacity:0;transition:opacity 1.4s ease,transform 8s linear;transform:scale(1.04)}
.slot img.on{opacity:1;transform:scale(1)}

/* ---------- RESEÑAS ---------- */
.rsp{height:100%;overflow-y:auto;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(40px,7vw,120px);align-items:center;scrollbar-width:none}
.rsl h1{font-size:clamp(40px,4.4vw,70px);margin:0 0 16px}
.rsl>p{font-size:15.5px;line-height:1.65;opacity:.85;max-width:40ch;margin:0 0 34px}
.cassette{display:flex;gap:22px;align-items:flex-start;max-width:460px}
.cassette svg{width:96px;flex:none;margin-top:4px}
.cassette b{display:block;font-weight:500;font-size:17px;margin-bottom:6px}
.cassette span{display:block;font-size:14px;line-height:1.55;opacity:.8;margin-bottom:14px}
.cassette .pill{font-size:13.5px;padding:8px 15px}
.colt .rsp{pointer-events:none}
.rsr{min-width:0;pointer-events:auto;background:rgba(255,255,255,.95);color:#26241f;border-radius:22px;padding:clamp(26px,3vw,40px);box-shadow:0 20px 50px -30px rgba(0,0,0,.35)}
.rsr .rv cite{color:#7a766d}
.rtrack{display:flex;gap:56px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab;user-select:none;-webkit-user-select:none}
.rtrack::-webkit-scrollbar{display:none}
.rtrack.drag{cursor:grabbing;scroll-snap-type:none}
.rv{flex:0 0 100%;scroll-snap-align:start;margin:0;font-size:clamp(19px,1.7vw,24px);line-height:1.5}
.rv cite{display:block;font-style:normal;font-size:14px;opacity:.65;margin-top:18px}
.rctl{display:flex;align-items:center;gap:16px;margin-top:30px}
.rctl button{width:38px;height:38px;border-radius:50%;color:var(--disc);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);font-size:20px;line-height:1}
.rdots{display:flex;gap:7px}
.rdots i{width:6px;height:6px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.3);transition:background .3s}
.rdots i.on{background:var(--disc);box-shadow:none}

/* ---------- EXPERIENCIAS: sencillo y ordenado ---------- */
.exp{height:100%;overflow-y:auto;max-width:980px;margin:0 auto;display:flex;flex-direction:column;justify-content:center;gap:clamp(28px,5vh,52px);padding:16px 0 30px;scrollbar-width:none}
.exp header{max-width:520px}
.exp h1{font-size:clamp(36px,3.6vw,54px);margin:0 0 12px}
.exp header p{margin:0 0 16px;font-size:15px;line-height:1.6;opacity:.85}
/* etiqueta informativa: llena y de esquinas cortas, para que no se lea como botón */
.grp20{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;background:#fff;color:#000;border-radius:4px;padding:7px 11px}
.grp20 .ico{width:16px;height:16px}
.xgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vh,36px) clamp(32px,5vw,72px)}
.xi{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.xi h3{margin:0;font-family:"Perandory",serif;font-weight:400;font-size:clamp(22px,1.9vw,28px)}
.xi p{margin:0;font-size:14px;line-height:1.55;opacity:.8;max-width:42ch}
.xi .pill{margin-top:6px;font-size:13px;padding:7px 14px}

/* ---------- RECONOCIMIENTOS ---------- */
.rec{display:flex;flex-direction:column;justify-content:center;height:100%;gap:clamp(24px,5vh,56px)}
.rec header{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.rec h1{font-size:clamp(46px,6vw,100px);margin:0}
.rec header p{max-width:34ch;margin:0;font-size:16px;line-height:1.55;opacity:.85}
.wall{display:grid;grid-template-columns:repeat(7,minmax(118px,1fr));gap:clamp(12px,1.6vw,26px);overflow-x:auto;padding-bottom:6px;scrollbar-width:none}
.frame{border:1px solid rgba(255,255,255,.45);aspect-ratio:3/4;position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:12px;min-width:118px}
.frame svg{position:absolute;left:50%;transform:translateX(-50%);height:44%;top:8%;width:auto;transition:transform .8s var(--ease)}
.frame:hover svg{transform:translateX(-50%) translateY(-6px) rotate(40deg)}
.frame b{font-weight:500;font-size:14px;display:block;line-height:1.3}
.frame span{font-size:12px;opacity:.7;display:block;margin-top:3px;line-height:1.35}
.frame.empty{border-style:dashed;opacity:.55}

/* ---------- mini tocadiscos ---------- */
.mini{position:fixed;right:clamp(20px,4vw,56px);bottom:calc(env(safe-area-inset-bottom,0px) + var(--bh) + 14px);z-index:45;display:flex;align-items:center;gap:12px;
  background:#fff;color:var(--ink);border-radius:999px;padding:7px 8px 7px 7px;box-shadow:0 12px 30px -12px rgba(0,0,0,.45);
  transform:translateY(140%);opacity:0;pointer-events:none;transition:transform .7s var(--ease),opacity .5s}
.mini.show{transform:none;opacity:1;pointer-events:auto}
.mini .md{width:44px;height:44px;border-radius:50%;position:relative;flex:none;cursor:pointer;background:repeating-radial-gradient(circle,#000 0 1px,#222 1.4px 2.2px)}
.mini .md::after{content:"";position:absolute;inset:27%;border-radius:50%;background:var(--disc) var(--cov,none) center/cover;box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.mini .mt{font-size:13px;line-height:1.25;max-width:160px}
.mini .mt b{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini .mt span{opacity:.65}
.mini .mb{width:36px;height:36px;border-radius:50%;background:var(--disc);color:#fff;display:grid;place-items:center;transition:background 1.2s}
.mini .mb svg{width:40%;height:40%}

/* ---------- horarios y reservas: el mismo contenido en cajón (web) o en página (móvil) ---------- */
.scrim{position:fixed;inset:0;z-index:55;background:rgba(20,18,16,.28);opacity:0;pointer-events:none;transition:opacity .5s}
.scrim.show{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(500px,100vw);z-index:60;color:var(--ink);
  background:var(--soft) url(/assets/img/g01.png) repeat;background-size:256px 256px;background-blend-mode:multiply;
  transform:translateX(104%);transition:transform .8s var(--ease);overflow-y:auto;overscroll-behavior:contain;
  padding:calc(env(safe-area-inset-top,0px) + 26px) 32px calc(env(safe-area-inset-bottom,0px) + 24px);box-shadow:-30px 0 60px -30px rgba(0,0,0,.35)}
.drawer.show{transform:none}
.drawer .x{position:absolute;right:22px;top:calc(env(safe-area-inset-top,0px) + 20px);width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.06);font-size:18px;line-height:1}
.hbody h2{font-size:28px;margin:0 0 14px;line-height:1;padding-right:48px}
.state{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.state .dot{width:8px;height:8px;align-self:center}
.state b{font-weight:500;font-size:16px}
.state span:last-child{opacity:.6;font-size:14px}
details.week{margin:6px 0 20px}
details.week summary{cursor:pointer;list-style:none;font-size:13.5px;opacity:.65;display:inline-flex;align-items:center;gap:6px}
details.week summary::-webkit-details-marker{display:none}
details.week summary::after{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .3s}
details.week[open] summary::after{transform:rotate(-135deg) translateY(-1px)}
.wk{margin-top:10px;display:grid;gap:6px;font-size:14px;max-width:320px}
.wk div{display:flex;justify-content:space-between}
.dseg{display:flex;border-radius:999px;padding:3px;margin-bottom:18px}
.dseg button{flex:1;padding:8px;border-radius:999px;font-size:14px;transition:background .3s,color .3s}
.fld{margin-bottom:16px}
.fld span{display:block;font-size:12.5px;opacity:.6;margin-bottom:8px}
.fld.two{display:grid;grid-template-columns:auto 1fr;gap:20px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chips.scrollx{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.chips button{border-radius:10px;padding:7px 11px;font-size:13.5px;line-height:1.25;text-align:center;white-space:nowrap;flex:none;transition:background .25s,color .25s}
.chips button small{display:block;font-size:10.5px;opacity:.6}
.chips .empty{font-size:13.5px;opacity:.65}
.stepper{display:inline-flex;align-items:center;border-radius:10px}
.stepper button{width:38px;height:36px;font-size:17px}
.stepper output{min-width:28px;text-align:center;font-size:14.5px}
.hbody input[type=date]{border:0;border-radius:10px;padding:10px 12px;font:inherit;font-size:14px;width:100%}
.note{margin:0 0 14px;font-size:13.5px;opacity:.7}
.preview{font-size:13.5px;line-height:1.55;border-radius:12px;padding:12px 14px;margin:4px 0 12px}
.send{display:flex;justify-content:center;align-items:center;gap:10px;border-radius:999px;padding:13px 20px;text-decoration:none;font-weight:500;font-size:15px;transition:background .3s,color .3s}
.contact{margin-top:20px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;font-size:13.5px}
.contact a{text-decoration:none;opacity:.8}.contact a:hover{opacity:1}
/* colores en el cajón (papel claro) */
.drawer .dseg{background:rgba(0,0,0,.06)}
.drawer .dseg button[aria-pressed="true"]{background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.drawer .chips button,.drawer .stepper,.drawer input[type=date]{background:rgba(0,0,0,.05);color:var(--ink)}
.drawer .chips button:hover{background:rgba(0,0,0,.09)}
.drawer .chips button[aria-pressed="true"]{background:var(--ink);color:#fff}
.drawer .state .dot{background:var(--disc)}
.drawer .state .dot.off{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink)}
.drawer .preview{background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.05)}
.drawer .send{background:var(--ink);color:#fff}
.drawer .send:hover{background:var(--disc)}
/* colores en la página (sobre el líquido, capa blanco y negro) */
.hpage{height:100%;overflow-y:auto;max-width:560px;margin:0 auto;padding:14px 0 40px;scrollbar-width:none}
.hpage .hbody h2{font-size:36px}
.hpage{color:var(--ink)}
.hpage .hbody h2{color:var(--disc)}
.hpage .dseg{background:rgba(0,0,0,.06)}
.hpage .dseg button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.08)}
.hpage .chips button,.hpage .stepper,.hpage input[type=date]{box-shadow:inset 0 0 0 1px rgba(0,0,0,.13);color:var(--ink);background:transparent;color-scheme:light}
.hpage .chips button:hover{background:rgba(0,0,0,.06)}
.hpage .chips button[aria-pressed="true"]{background:var(--ink);color:#fff;box-shadow:none}
.hpage .state .dot{background:var(--disc)}
.hpage .state .dot.off{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink)}
.hpage .preview{background:var(--soft);box-shadow:inset 0 0 0 1px rgba(0,0,0,.07)}
.hpage .send{background:var(--ink);color:#fff}
.hpage .send:hover{background:var(--disc)}

/* ---------- móvil ---------- */
@media (max-width:900px){
  :root{--hh:58px;--bh:88px;--s:min(66vw,calc(100svh - var(--hh) - var(--bh) - 220px));--stagetop:calc(env(safe-area-inset-top,0px) + var(--hh) + (100svh - var(--hh) - var(--bh) - var(--s)) / 2 - 70px)}
  .brand,.nav,.acts .pill:not(.cta){display:none}
  .top{justify-content:space-between}
  .mstatus{display:inline-flex;align-items:center;gap:8px;font-size:13.5px}
  .bottom{display:none}
  /* pestañas: barra blanca; solo la activa muestra su nombre y se expande */
  .tabbar{display:inline-flex;align-items:center;gap:2px;position:fixed;left:50%;transform:translateX(-50%);max-width:calc(100% - 24px);bottom:calc(env(safe-area-inset-bottom,0px) + 12px);height:54px;z-index:48;
    background:#fff;border-radius:999px;padding:0 6px;box-shadow:0 14px 34px -14px rgba(0,0,0,.4),0 0 0 1px rgba(0,0,0,.05)}
  .tabbar a{display:flex;align-items:center;justify-content:center;gap:0;flex:none;height:42px;min-width:38px;padding:0 6px;border-radius:999px;text-decoration:none;color:#77736b;
    transition:background .45s var(--ease),color .45s,padding .45s var(--ease),gap .45s var(--ease)}
  .tabbar .ico{width:20px;height:20px}
  .tabbar .lb{max-width:0;overflow:hidden;white-space:nowrap;font-size:12.5px;font-weight:500;opacity:0;transition:max-width .45s var(--ease),opacity .3s}
  .tabbar a[aria-current="page"]{background:var(--disc);color:#fff;gap:6px;padding:0 13px}
  .tabbar a[aria-current="page"] .lb{max-width:110px;opacity:1}
  .cap .logo{display:block}
  .dots{display:none}
  .hint .d{display:none}.hint .m{display:inline}
  .carta{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);padding-top:4px}
  .side{padding-right:0}
  .carta h1,.mnote{display:none}
  .seg{margin-bottom:8px}
  .rail{flex-direction:row;overflow-x:auto;gap:18px;padding:6px 0 10px;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .rail button{white-space:nowrap;font-size:15px;padding:4px 0}
  .rail button[aria-current="true"]{padding-left:0;text-decoration:underline;text-underline-offset:7px}
  .rail button[aria-current="true"]::before{display:none}
  .rail{border-bottom:1px solid rgba(0,0,0,.12);margin-bottom:10px}
  .list{border-left:0;padding-left:0}
  .rows,.tracks{columns:1;grid-template-columns:1fr}
  .shead .ill{width:84px;height:74px}
  .nos{display:block;height:100%;overflow-y:auto;padding:calc(32vh + 18px) 0 30px;scrollbar-width:none}
  .colt .nos{overflow:visible;padding:0}
  .gal{height:32vh;grid-template-columns:1.5fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:7px;padding-bottom:0}
  .slot.s1{grid-column:1;grid-row:1 / span 2}
  .slot.s4,.slot.s5{display:block}
  .rsp{grid-template-columns:1fr;align-content:start;gap:14px;padding:6px 0 20px;text-align:center}
  .rsl .pill{margin:0 auto}
  .rsl>p{margin-left:auto;margin-right:auto;max-width:34ch}
  .rsl h1{font-size:30px;margin-bottom:10px}
  .rsl>p{font-size:14px;margin-bottom:18px;line-height:1.55}
  .cassette{gap:14px}.cassette svg{width:62px}.cassette b{font-size:15px}.cassette span{font-size:13px;margin-bottom:10px}
  .rsr{padding:18px;border-radius:18px;width:100%}
  .colt .rsp{display:flex;align-items:flex-end;padding:0 0 4px;overflow:visible}
  .bwt .rsp{align-content:start}
  .rv{font-size:16.5px;line-height:1.5;text-align:left}
  .rctl{justify-content:center;margin-top:18px}
  .colt .rsp{padding-top:0}
  .nos h1{font-size:34px;margin-bottom:12px}
  .nos .txt p{font-size:14.5px;line-height:1.6;margin-bottom:11px}
  .revs{margin-top:34px}
  .rv{flex-basis:84%}
  .exp{justify-content:flex-start;gap:26px}
  .exp h1{font-size:38px}
  .xgrid{grid-template-columns:1fr;gap:26px}
  .rec h1{font-size:44px}
  .wall{grid-template-columns:repeat(7,140px)}
  .mini{bottom:calc(env(safe-area-inset-bottom,0px) + 86px);left:12px;right:12px}
  .mini .mb{margin-left:auto}
  .hpage .hbody h2{font-size:34px}
}
@media (prefers-reduced-motion: reduce){ .track,.panel,.drawer,.mini,#duo,#tex{transition-duration:.01ms!important} .dot.glow{animation:none} }
@media (max-width:900px){ .bwt .nos{padding-bottom:46px} }

/* en la carta móvil se oculta la cabecera para leer sin distracciones */
@media (max-width:900px){
  .top{transition:opacity .5s,transform .5s var(--ease)}
  body.carta .top{opacity:0;transform:translateY(-100%);pointer-events:none}
  body.carta .carta-panel .paper{top:0}
  .carta-panel .paper{bottom:0}
  .carta-panel .inner{bottom:calc(env(safe-area-inset-bottom,0px) + var(--bh) + 4px)}
  body.carta .carta-panel .inner{top:calc(env(safe-area-inset-top,0px) + 14px)}
  .carta-panel .inner{transition:top .5s var(--ease)}
}

/* sello Travelers' Choice (móvil): lleva a Reconocimientos */
.tcb{display:none}
.tcb span{display:block;width:30px;height:34px;background:#fff;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
/* insignias reales en la pared de reconocimientos */
.frame .badge{position:absolute;left:50%;transform:translateX(-50%);width:29%;top:20%;height:19%;background:#fff;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;transition:transform .8s var(--ease)}
.frame:hover .badge{transform:translateX(-50%) translateY(-6px) scale(1.04)}
.wall{grid-template-columns:repeat(10,minmax(200px,1fr));overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scroll-behavior:auto;cursor:grab;scrollbar-width:none}
.wall.drag{cursor:grabbing}
.wall .frame{aspect-ratio:1/1.24;justify-content:flex-end;padding:14px}
.rec{overflow-y:auto;scrollbar-width:none;justify-content:flex-start;padding:clamp(12px,4vh,40px) 0 20px}
@media (max-width:900px){
  .tcb{display:grid;place-items:center;margin-left:auto;margin-right:10px}
  .wall{grid-template-columns:repeat(10,178px)}
  .wall .frame{aspect-ratio:1/1.24}
  .rec{justify-content:center;overflow:visible}
  /* el control de música en móvil: el vinilo y, al lado, play o pausa */
  .mini{left:auto;right:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 84px);padding:0;background:transparent;box-shadow:none;gap:10px}
  .mini .mt{display:none}
  .mini .md{width:54px;height:54px;box-shadow:0 10px 24px -8px rgba(0,0,0,.55),0 0 0 3px #fff}
  .mini .mb{width:44px;height:44px;background:#fff;color:var(--disc);box-shadow:0 10px 24px -10px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.05)}
  .mini .mb svg{width:38%;height:38%}
}
@media (min-width:901px){ .wall .frame svg{left:50%;right:auto;width:auto;height:44%;top:8%;transform:translateX(-50%)} .wall .frame:hover svg{transform:translateX(-50%) translateY(-6px) rotate(40deg)} }

@media (max-width:900px){ .lang{height:40px;padding:0 13px;font-size:13px;gap:7px} .mstatus{font-size:12.5px} .top{gap:8px} .acts{gap:6px} .tcb{width:44px;height:44px;margin-right:0;border-radius:999px} .tcb span{width:38px;height:42px} }

/* ---------- mini tutorial móvil: marcas guía, sin modal ---------- */
#coach{position:fixed;inset:0;z-index:52;pointer-events:none;display:none}
#coach.on{display:block}
#coach .halo{position:absolute;border-radius:16px;box-shadow:0 0 0 2px #fff,0 0 0 4px rgba(0,0,0,.45);opacity:0;
  transition:left .55s var(--ease),top .55s var(--ease),width .55s var(--ease),height .55s var(--ease),opacity .4s}
#coach .halo::after{content:'';position:absolute;inset:-4px;border-radius:inherit;box-shadow:0 0 0 2px rgba(255,255,255,.6);animation:chalo 2s ease-out infinite}
@keyframes chalo{0%{transform:scale(1);opacity:.75}70%{transform:scale(1.1);opacity:0}100%{transform:scale(1.1);opacity:0}}
#coach .tip{position:absolute;background:#fff;color:#141210;border-radius:18px;padding:13px 15px 11px;
  box-shadow:0 14px 36px rgba(0,0,0,.28);font-size:13.5px;line-height:1.42;opacity:0;transform:translateY(7px);
  transition:opacity .4s,transform .4s var(--ease);pointer-events:auto;-webkit-tap-highlight-color:transparent}
#coach.go .tip{opacity:1;transform:none}
#coach.go .halo{opacity:1}
#coach .tip .car{position:absolute;width:13px;height:13px;background:#fff;transform:rotate(45deg);border-radius:2px}
#coach .tip.below .car{top:-5px}
#coach .tip.above .car{bottom:-5px}
#coach .tip b{font-weight:500;display:block}
#coach .cfoot{display:flex;align-items:center;gap:12px;margin-top:11px}
#coach .cbar{flex:1;height:2px;border-radius:2px;background:rgba(0,0,0,.12);overflow:hidden}
#coach .cbar i{display:block;height:100%;width:0;background:#141210;border-radius:2px}
#coach .cskip{border:0;background:none;padding:0;font:inherit;font-size:12px;opacity:.5;color:inherit;cursor:pointer}
@media (prefers-reduced-motion: reduce){#coach .halo::after{animation:none}}