/* ALFØN — cartel de rave fotocopiado: papel + negro + UV. Mobile-first. */
:root{
  --bg:#0c0c10; --s1:#15151b; --s2:#1d1d25; --line:#2b2b35;
  --paper:#ebe8e0; --dark:#0c0c10;
  --ink:#f1efe9; --soft:#a9a7b4; --uv:#876cff; --uvt:#a996ff; --on-uv:#0c0c10;
  --f-d:"Archivo","Arial Narrow",Impact,sans-serif; --f-m:"DM Mono",ui-monospace,monospace;
  --pad:clamp(16px,4vw,56px); --bar:68px; --hh:72px;
  interpolate-size:allow-keywords;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:var(--hh)}
body{background:var(--bg);color:var(--ink);font:400 1rem/1.6 var(--f-m);min-height:100dvh;padding-bottom:calc(var(--bar) + env(safe-area-inset-bottom))}
img,video,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;border-radius:0}
ul,ol{list-style:none;padding:0}
:focus-visible{outline:3px solid var(--uv);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.i{width:1.2em;height:1.2em;fill:currentColor;flex:none}
.logo{width:100%;height:auto;aspect-ratio:1326/296;fill:currentColor}
.mono{font:500 .875rem/1.35 var(--f-m);letter-spacing:.1em;text-transform:uppercase}
.big{font-family:var(--f-d);font-stretch:62%;font-weight:900;text-transform:uppercase;line-height:.84;letter-spacing:-.01em}
.skip{position:fixed;z-index:200;left:12px;top:-60px;padding:12px 16px;background:var(--uv);color:var(--on-uv);font-weight:500;text-decoration:none}
.skip:focus{top:12px}
/* grano de fotocopia */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:99;opacity:.08;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- cabecera: se lee sobre papel y negro (difference); Booking siempre pintado ---------- */
.top{position:fixed;z-index:90;top:0;left:0;right:0;height:var(--hh);display:flex;align-items:center;gap:24px;
  padding:0 calc(var(--pad) + 132px) 0 var(--pad);color:#fff;mix-blend-mode:difference;pointer-events:none}
.top>*{pointer-events:auto}
.brand{display:flex;align-items:center;min-height:44px;width:92px;margin-right:auto}
.nav{display:none}
.top a{text-decoration:none}
.mb{min-height:44px;padding:0 6px;font:500 .875rem var(--f-m);letter-spacing:.14em;text-transform:uppercase;color:#fff}
.navcta{position:fixed;z-index:91;top:calc((var(--hh) - 44px) / 2);right:var(--pad);display:inline-flex;align-items:center;justify-content:center;min-height:44px;width:120px;
  background:var(--uv);color:var(--on-uv);text-decoration:none;font:500 .875rem var(--f-m);letter-spacing:.14em;text-transform:uppercase;border:2px solid var(--dark);transition:background .15s,color .15s}
.navcta:hover{background:var(--paper)}
.menu{position:fixed;inset:0;z-index:88;background:var(--paper);color:var(--dark);display:flex;flex-direction:column;justify-content:center;padding:96px var(--pad) calc(var(--bar) + 32px)}
.menu[hidden]{display:none}
.menu a{font:900 clamp(3rem,17vw,6rem)/.95 var(--f-d);font-stretch:62%;text-transform:uppercase;text-decoration:none;border-bottom:2px solid var(--dark);padding:6px 4px;display:flex;justify-content:space-between;align-items:baseline}
.menu a small{font:500 .875rem var(--f-m);letter-spacing:.1em}
.menu a.on{background:var(--uv);padding-inline:12px}
body:has(.menu:not([hidden])){overflow:hidden}

/* ---------- portada: cartel a dos tintas ---------- */
.hero{display:grid;grid-template-rows:44svh auto;min-height:calc(100svh - var(--bar));background:var(--paper);color:var(--dark)}
.ph{position:relative;background:var(--uv);overflow:hidden;isolation:isolate}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;filter:grayscale(1) contrast(1.5) brightness(1.05);mix-blend-mode:multiply}
.ph::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(#0c0c10 34%,transparent 36%) 0 0/6px 6px;mix-blend-mode:soft-light;opacity:.55}
.vert{display:none}
.hb{padding:24px var(--pad) 32px;display:grid;gap:14px;align-content:start}
.hb h1{color:var(--dark)}
.hb .st{font-size:clamp(2.2rem,10.5vw,4rem)}
.hb .lead{max-width:38ch}
.ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;border:2px solid currentColor;text-decoration:none;font:500 .875rem var(--f-m);letter-spacing:.1em;text-transform:uppercase;transition:background .15s,color .15s,border-color .15s}
.btn.solid{background:var(--dark);border-color:var(--dark);color:var(--paper)}
.btn:hover{background:var(--uv);border-color:var(--uv);color:var(--on-uv)}
.ic-pause{display:none}
[data-state=playing] .ic-play{display:none}[data-state=playing] .ic-pause{display:block}

.tick{background:var(--uv);color:var(--on-uv);overflow:hidden;padding:12px 0;border-block:2px solid var(--dark)}
.tick div{display:flex;gap:36px;width:max-content;animation:tk 40s linear infinite;font:900 clamp(1.6rem,4.4vw,2.6rem)/1 var(--f-d);font-stretch:62%;text-transform:uppercase;white-space:nowrap}
.tick span::after{content:"//";margin-left:36px;opacity:.6}
@keyframes tk{to{transform:translateX(-50%)}}

/* ---------- cabeceras de sección ---------- */
section{padding:clamp(64px,10vw,140px) var(--pad) 0}
.sh{display:flex;justify-content:space-between;align-items:flex-end;gap:12px 24px;flex-wrap:wrap;margin-bottom:clamp(24px,4vw,48px)}
.sh h2{font-size:clamp(4rem,19vw,13rem)}
.sh p{color:var(--soft);max-width:32ch}

/* ---------- sets: tocadiscos + setlist ---------- */
.deck{display:grid;gap:40px;align-items:start}
.tt-col{display:grid;gap:22px;justify-items:center}
.tt{--sz:min(78vw,460px);position:relative;width:var(--sz);height:var(--sz);display:grid;place-items:center}
.jog{position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--uv) calc(var(--p,0) * 360deg),#262630 0)}
.jog::before{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--bg)}
.plat{position:absolute;inset:12px;border-radius:50%;overflow:hidden;
  background:repeating-radial-gradient(circle at 50%,#101015 0 2px,#191920 2px 5px);box-shadow:inset 0 0 50px #000;
  animation:spin 1.8s linear infinite;animation-play-state:paused}
[data-state=playing] .plat{animation-play-state:running}
@keyframes spin{to{transform:rotate(360deg)}}
.plat::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 20deg,transparent 0 40deg,#ffffff10 50deg,transparent 70deg 200deg,#ffffff0c 215deg,transparent 235deg)}
.lab{position:absolute;inset:30%;width:40%;height:40%;border-radius:50%;object-fit:cover;border:3px solid #050507}
.spindle{position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#d8d6de;box-shadow:0 0 0 3px #050507}
.arm{position:absolute;z-index:2;right:-6%;top:-2%;width:12%;height:auto;transform-origin:50% 10%;transform:rotate(-2deg);transition:transform .9s cubic-bezier(.3,.7,.2,1);filter:drop-shadow(0 6px 10px #000a)}
[data-state=playing] .arm{transform:rotate(19deg)}
.tbtn{position:absolute;z-index:3;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:var(--uv);color:var(--on-uv);display:grid;place-items:center;
  box-shadow:0 8px 28px #000c;transition:transform .2s,background .2s;opacity:.95}
.tbtn:hover{transform:scale(1.08);background:var(--uvt)}
.tbtn .i{width:28px;height:28px}
.rd{width:min(100%,560px)}
.now{color:var(--uvt)}
.rd-t{font:900 clamp(1.8rem,6vw,2.8rem)/1 var(--f-d);font-stretch:62%;text-transform:uppercase;margin:6px 0 4px}
.rd-m{color:var(--soft);font-size:.9375rem}
.wave{display:block;width:100%;height:64px;margin-top:14px;cursor:pointer;touch-action:none;--on:#876cff;--off:#3b3b47}
.wave:focus-visible{outline-offset:6px}
.tr{display:flex;align-items:center;gap:8px;margin-top:12px;flex-wrap:wrap}
.tb{width:48px;height:48px;border:2px solid #ffffff33;display:grid;place-items:center;transition:background .15s,border-color .15s}
.tb:hover{background:#ffffff14;border-color:#ffffff66}
.tb.main{background:var(--paper);color:var(--dark);border-color:var(--paper);width:56px;height:56px}
.tb.main:hover{background:var(--uv);border-color:var(--uv)}
.vol{display:flex;align-items:center;gap:8px;margin-left:auto;color:var(--soft)}
input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;width:110px;height:44px;cursor:pointer;color:var(--ink)}
input[type=range]::-webkit-slider-runnable-track{height:4px;background:linear-gradient(90deg,currentColor var(--v,90%),#55556a 0)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;background:currentColor;margin-top:-5px}
input[type=range]::-moz-range-track{height:4px;background:#55556a}input[type=range]::-moz-range-progress{height:4px;background:currentColor}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:0;background:currentColor}
/* widget de SoundCloud: oculto; visible solo si el navegador exige tocarlo */
.rd{position:relative}
.scbox{position:absolute;left:0;bottom:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.scbox.show{position:static;width:auto;height:auto;clip-path:none;margin-top:16px;padding:12px;background:var(--s1);border:1px solid var(--line)}
.scbox p{color:var(--uvt);margin-bottom:8px}
.scbox iframe{display:block;width:100%;height:166px;border:0}
.scbox:not(.show) iframe{width:300px}

.setlist{border-top:2px solid var(--ink)}
.row{position:relative;width:100%;display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"n t c" "n m c";gap:2px 16px;align-items:center;
  padding:14px 6px;border-bottom:1px solid var(--line);text-align:left;min-height:88px;transition:background .15s}
.row .n{grid-area:n;font:900 clamp(2.6rem,10vw,5rem)/.9 var(--f-d);font-stretch:62%;color:transparent;-webkit-text-stroke:1.5px var(--ink);min-width:2.1ch}
.row .t{grid-area:t;font:900 clamp(1.6rem,6vw,3.2rem)/.95 var(--f-d);font-stretch:62%;text-transform:uppercase}
.row .m{grid-area:m;font-size:.875rem;color:var(--soft)}
.row img{grid-area:c;width:56px;height:56px;object-fit:cover}
.row:hover{background:var(--s1)}
.row.on{background:var(--paper);color:var(--dark)}
.row.on .n{-webkit-text-stroke-color:var(--dark)}
.row.on .m{color:#3a3a44}
[data-state=playing] .row.on .n{color:var(--uv);-webkit-text-stroke-color:var(--uv)}
.row .eq{display:none}

/* ---------- estilos ---------- */
.est{border-top:2px solid var(--ink)}
.es{border-bottom:1px solid var(--line)}
.es summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto 1fr 44px;grid-template-areas:"n t pm" "n s pm";gap:4px 16px;align-items:center;padding:18px 6px;min-height:96px;transition:background .15s}
.es summary::-webkit-details-marker{display:none}
.es summary:hover{background:var(--s1)}
.es .n{grid-area:n;font:900 clamp(2.6rem,10vw,5rem)/.9 var(--f-d);font-stretch:62%;color:transparent;-webkit-text-stroke:1.5px var(--ink);min-width:2.1ch}
.es-t{grid-area:t;font:900 clamp(1.8rem,7vw,4.4rem)/.92 var(--f-d);font-stretch:62%;text-transform:uppercase}
.es-t span{color:var(--uv)}
.es-s{grid-area:s;font:500 .875rem var(--f-m);letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}
.pm{grid-area:pm;width:36px;height:36px;justify-self:end;transition:transform .3s}
.es[open] .pm{transform:rotate(45deg)}
.es[open] summary{background:var(--paper);color:var(--dark)}
.es[open] .n{-webkit-text-stroke-color:var(--dark);color:var(--uv)}
.es[open] .es-s{color:#3a3a44}
.es::details-content{block-size:0;overflow:hidden;transition:block-size .45s cubic-bezier(.2,.7,.2,1),content-visibility .45s allow-discrete}
.es[open]::details-content{block-size:auto}
.es-b{padding:24px 6px 40px}
.es-b p{font-size:clamp(1rem,1.5vw,1.2rem);line-height:1.7;max-width:64ch}
.es-b p::first-letter{font:900 3.4em/.8 var(--f-d);font-stretch:62%;float:left;margin:.08em .12em 0 0;color:var(--uv)}

/* ---------- vídeos: carril; en escritorio con ratón, acordeón que se abre y acerca ---------- */
#videos{padding-inline:0}
#videos .sh{padding-inline:var(--pad)}
.rail{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--pad) 12px;scrollbar-width:thin;scrollbar-color:var(--uv) transparent}
.rail li{flex:0 0 74vw;scroll-snap-align:center}
.pn{position:relative;display:block;width:100%;height:min(64svh,540px);overflow:hidden;background:var(--s1);text-align:left;isolation:isolate}
.pn img,.pn video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .3s}
.pn video{opacity:0}
.pn.live video{opacity:1}
.pn::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,#0c0c10ee);z-index:1}
.pn .cp{position:absolute;z-index:2;left:14px;right:14px;bottom:12px;display:flex;justify-content:space-between;align-items:flex-end;gap:8px}
.pn .cp b{font:900 2rem/1 var(--f-d);font-stretch:62%}
.pn .cp span{font:500 .875rem var(--f-m);color:#e6e4ec;letter-spacing:.06em;text-transform:uppercase}
.pn .pi{position:absolute;z-index:2;top:12px;right:12px;width:44px;height:44px;border-radius:50%;background:#000a;display:grid;place-items:center;color:#fff}
.pn:hover img,.pn:hover video,.pn:focus-visible img,.pn:focus-visible video{transform:scale(1.07)}
.pn:focus-visible{outline-offset:-3px}
/* visor a pantalla completa */
.md{position:fixed;inset:0;margin:0;width:100%;height:100%;max-width:none;max-height:none;padding:0;border:0;background:#08080bf5;color:var(--ink);overflow:hidden;
  opacity:0;transition:opacity .25s,overlay .25s allow-discrete,display .25s allow-discrete}
.md[open]{display:grid;grid-template-rows:auto minmax(0,1fr);opacity:1}
@starting-style{.md[open]{opacity:0}}
.md::backdrop{background:#000c}
.md-h{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px var(--pad);padding-top:max(10px,env(safe-area-inset-top))}
.md-ti{display:flex;align-items:baseline;gap:16px}
.md-ti b{font:900 clamp(1.6rem,4vw,2.4rem)/1 var(--f-d);font-stretch:62%;text-transform:uppercase}
.md-ti .mono{color:var(--soft)}
.md-x,.md-arr{width:52px;height:52px;display:grid;place-items:center;border:2px solid #ffffff33;color:var(--ink);background:#0c0c10cc;transition:background .15s,border-color .15s,color .15s}
.md-x:hover,.md-arr:hover{background:var(--uv);border-color:var(--uv);color:var(--on-uv)}
.md-x .i,.md-arr .i{width:22px;height:22px}
.md-stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;min-height:0;padding:0 8px calc(16px + env(safe-area-inset-bottom))}
.md-media{width:100%;height:100%;min-height:0;display:grid;place-items:center}
.md-media video,.md-media img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;background:#000;box-shadow:0 20px 80px #000}
.md-arr{position:absolute;z-index:2;bottom:calc(24px + env(safe-area-inset-bottom))}
#md-p{left:16px}#md-n{right:16px}
@media (min-width:768px){
  .md-stage{grid-template-columns:auto minmax(0,1fr) auto;gap:20px;padding:0 var(--pad) 32px}
  .md-arr{position:static}
}

/* ---------- sobre (papel) ---------- */
#sobre{background:var(--paper);color:var(--dark);margin-top:clamp(72px,10vw,140px);padding-bottom:clamp(56px,9vw,120px);display:grid;gap:32px}
#sobre figure{max-width:460px;justify-self:center;width:100%}
#sobre figure img{width:100%;height:auto;mix-blend-mode:multiply;filter:contrast(1.05)}
#sobre .q{font-size:clamp(3.4rem,14vw,9rem);margin:8px 0 22px}
#sobre .q em{font-style:normal;color:#5b3fe0}
.cols p{max-width:56ch}
.cols p+p{margin-top:1em}
.more{margin-top:18px;border-top:2px solid var(--dark)}
.more summary{min-height:52px;display:flex;align-items:center;cursor:pointer;font:500 .875rem var(--f-m);letter-spacing:.1em;text-transform:uppercase;text-decoration:underline;text-underline-offset:4px}
.more p{max-width:56ch;margin-top:.8em}

/* ---------- booking (UV) ---------- */
#booking{background:var(--uv);color:var(--on-uv);padding-bottom:clamp(64px,10vw,140px)}
#booking .kick{font:900 clamp(1.8rem,6vw,3.6rem)/1 var(--f-d);font-stretch:62%;text-transform:uppercase}
#booking h2{font-size:clamp(4.6rem,25vw,21rem);margin:6px 0 24px -.03em}
.bk{border-top:2px solid var(--dark)}
.bk li{display:flex;border-bottom:2px solid var(--dark)}
.bk a{flex:1;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:4px 16px;padding:16px 4px;text-decoration:none;min-height:68px;
  font:900 clamp(1.8rem,5.4vw,3.4rem)/1 var(--f-d);font-stretch:62%;text-transform:uppercase;transition:background .15s,color .15s,padding .15s}
.bk a:hover{background:var(--dark);color:var(--uvt);padding-inline:14px}
.bk a span{font:500 .875rem var(--f-m);letter-spacing:.06em;text-transform:none;overflow-wrap:anywhere}
.bk .mail a{flex-direction:column;align-items:flex-start;justify-content:center}
.bk .mail a span{font-size:clamp(.875rem,2.2vw,1.1rem);overflow-wrap:normal}
.copy{flex:none;align-self:stretch;min-width:96px;border-left:2px solid var(--dark);font:500 .875rem var(--f-m);letter-spacing:.1em;text-transform:uppercase}
.copy:hover{background:var(--dark);color:var(--uvt)}
footer{padding:22px var(--pad);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;color:var(--soft);font-size:.875rem;border-top:1px solid var(--line)}
.credito a{color:inherit;text-underline-offset:3px}
.credito a:hover{color:var(--uvt)}

/* ---------- reproductor fijo: tira de papel ---------- */
.pl{position:fixed;z-index:70;left:0;right:0;bottom:0;height:calc(var(--bar) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:var(--paper);color:var(--dark);border-top:3px solid var(--dark);
  display:grid;grid-template-columns:var(--bar) minmax(0,1fr) auto;align-items:center;gap:0 12px}
.pl .pp{width:var(--bar);height:var(--bar);background:var(--dark);color:var(--paper);display:grid;place-items:center;transition:background .15s,color .15s}
.pl .pp:hover{background:var(--uv);color:var(--on-uv)}
.pl .pp .i{width:26px;height:26px}
.pl .mid{display:flex;align-items:center;gap:12px;min-width:0;text-decoration:none;min-height:44px}
.pl .mid img{display:none;width:44px;height:44px;object-fit:cover}
.pl .mid>span{min-width:0}
.pl .mid b{display:block;font:900 1.35rem/1.05 var(--f-d);font-stretch:62%;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl .mid small{display:block;font:500 .875rem var(--f-m);letter-spacing:.04em;color:#3a3a44;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl .ctl{display:flex;align-items:center;padding-right:6px}
.pl .ctl button{width:44px;height:44px;display:grid;place-items:center}
.pl .ctl button:hover{background:var(--uv)}
.pl .tm{display:none;font:500 .875rem var(--f-m);letter-spacing:.04em;padding:0 10px;white-space:nowrap}
.pl .vol{display:none;margin:0 0 0 6px;color:var(--dark)}
.pl .bar{position:absolute;left:0;right:0;top:-3px;height:5px;pointer-events:none}
.pl .bar::after{content:"";display:block;height:100%;width:calc(var(--p,0) * 100%);background:var(--uv)}

/* ===== tablet ===== */
@media (min-width:768px){
  :root{--bar:76px}
  .nav{display:flex;gap:4px}
  .nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;font:500 .875rem var(--f-m);letter-spacing:.14em;text-transform:uppercase}
  .nav a:hover{text-decoration:underline;text-underline-offset:6px}
  .mb{display:none}
  .hero{grid-template-rows:none;grid-template-columns:1fr 1fr;min-height:min(calc(100svh - var(--bar)),940px)}
  .ph{order:2}
  .vert{display:block;position:absolute;z-index:2;left:16px;top:50%;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;color:#fff;font:500 .875rem var(--f-m);letter-spacing:.2em;text-transform:uppercase}
  .hb{padding:96px var(--pad) 36px;align-content:end}
  .hb .st{font-size:clamp(2.6rem,6vw,5.4rem)}
  .tt{--sz:min(56vw,440px)}
  .row{grid-template-columns:auto 1fr 72px}
  .row img{width:72px;height:72px}
  .es-b{padding-left:96px}
  .rail li{flex-basis:44vw}
  #sobre{grid-template-columns:5fr 6fr;align-items:center;gap:clamp(32px,6vw,96px)}
  #sobre figure{justify-self:start}
  .pl .tm{display:block}
  .pl .mid img{display:block}
  .bk .mail a{flex-direction:row;align-items:center;justify-content:space-between}
}
/* ===== portátil / escritorio ===== */
@media (min-width:1024px){
  .deck{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,5vw,88px)}
  .tt{--sz:min(34vw,50svh,520px)}
  .pl .vol{display:flex}
}
@media (min-width:1024px) and (hover:hover) and (pointer:fine){
  .rail{overflow:visible;height:min(70svh,600px);padding:0 var(--pad)}
  .rail li{height:100%;flex:1 1 0;min-width:0;transition:flex-grow .6s cubic-bezier(.2,.7,.2,1)}
  .rail li:hover,.rail li:focus-within{flex-grow:3.4}
  .pn{height:100%}
  .pn .cp span{opacity:0;transition:opacity .3s}
  .rail li:hover .cp span,.rail li:focus-within .cp span{opacity:1}
}
@media (min-width:1200px){
  .es summary{grid-template-columns:auto 1fr auto 44px;grid-template-areas:"n t s pm"}
  .hero{grid-template-columns:7fr 5fr}
  .hb h1{width:min(100%,720px)}
  .hb .st{font-size:clamp(2.6rem,4.3vw,5rem)}
  .hb{gap:12px}
  .row{padding:20px 8px}
  .row:hover:not(.on) .t{color:var(--uvt)}
  #sobre{grid-template-columns:4fr 5fr}
  .cols{column-count:2;column-gap:40px}
  .cols p{break-inside:avoid}
  .cols p+p{margin-top:0}
}
@media (min-width:1800px){html{font-size:112.5%}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .pn:hover img,.pn:hover video{transform:none}
}
body:has(.md[open]){overflow:hidden}