/* ============================================================
   IN DOMINE - sistema visual biomecanico
   ============================================================ */
:root{
  --void:#040507;
  --chitin:#151a22;
  --bone:#ded8ca;
  --bone-dim:#9b9587;
  --ash:#6a6d74;
  --ichor:#8f1a12;
  --ichor-hot:#c4291c;
  --blood:#7d0f0a;
  --plasma:#2f9fd6;
  --plasma-hot:#7fdcff;
  --ember:#c8631a;
  --line:rgba(222,216,202,.13);
  --line-hot:rgba(127,220,255,.45);
  --f-display:'Cinzel',serif;
  --f-ui:'Chakra Petch','Segoe UI',sans-serif;
  --f-body:'Spectral',Georgia,serif;
  --shell-w:min(1280px,92vw);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--void);color:var(--bone);font-family:var(--f-body);font-size:20px;line-height:1.72;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body.locked{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
::selection{background:var(--ichor);color:#fff}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:#05060a}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--chitin),#26303c);border:1px solid var(--line)}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#2a3644,var(--plasma))}

/* ---------- ATMOSFERA ---------- */
#grain,#vignette,#scan{position:fixed;inset:0;pointer-events:none}
#grain{z-index:9997;opacity:.055;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grainShift .7s steps(3) infinite}
@keyframes grainShift{0%{transform:translate(0,0)}33%{transform:translate(-3%,2%)}66%{transform:translate(2%,-3%)}}
#vignette{z-index:9996;background:radial-gradient(ellipse 90% 75% at 50% 45%,transparent 30%,rgba(0,0,0,.55) 72%,rgba(0,0,0,.94) 100%)}
#scan{z-index:9995;opacity:.13;background:repeating-linear-gradient(180deg,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.30) 3px,rgba(0,0,0,0) 4px)}
#fx-canvas{position:fixed;inset:0;z-index:9990;pointer-events:none}

/* espectro */
#apparition{position:fixed;top:0;left:0;z-index:9989;pointer-events:none;opacity:0;
  width:min(52vh,460px);will-change:transform,opacity}
#apparition img{width:100%;filter:url(#wind) brightness(1.25) contrast(1.05)
  drop-shadow(0 0 70px rgba(120,200,255,.30));mix-blend-mode:screen}
#wind-defs{position:fixed;width:0;height:0;pointer-events:none}

/* ---------- PORTAO DE IDIOMA ---------- */
#gate{position:fixed;inset:0;z-index:10000;background:#020304;display:flex;align-items:center;justify-content:center;padding:36px 20px;transition:opacity .9s ease,visibility .9s}
#gate.gone{opacity:0;visibility:hidden}
#gate::before{content:'';position:absolute;inset:0;opacity:.30;background:url('../art/biomech-01.jpg') center/cover no-repeat;filter:grayscale(.35) contrast(1.25) brightness(.5);animation:gateBreathe 14s ease-in-out infinite alternate}
#gate::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 16%,rgba(2,3,4,.86) 64%,#020304 100%)}
@keyframes gateBreathe{from{transform:scale(1)}to{transform:scale(1.09)}}
.gate-in{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center;gap:32px}
.gate-logo{width:min(360px,62vw);filter:drop-shadow(0 0 40px rgba(127,220,255,.28));animation:logoPulse 5s ease-in-out infinite}
@keyframes logoPulse{0%,100%{filter:drop-shadow(0 0 30px rgba(127,220,255,.20))}50%{filter:drop-shadow(0 0 58px rgba(196,41,28,.42))}}
.gate-title{font-family:var(--f-ui);font-size:13px;font-weight:600;letter-spacing:.46em;text-transform:uppercase;color:var(--plasma-hot)}
.flags{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;max-width:600px}
.flag-btn{background:rgba(10,14,20,.75);border:1px solid var(--line);padding:11px 9px 9px;display:flex;flex-direction:column;align-items:center;gap:7px;transition:.28s;position:relative;
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px)}
.flag-btn svg{width:40px;height:27px;display:block;box-shadow:0 2px 10px rgba(0,0,0,.7)}
.flag-btn span{font-family:var(--f-ui);font-size:10px;font-weight:600;letter-spacing:.12em;color:var(--bone-dim)}
.flag-btn:hover{border-color:var(--line-hot);background:rgba(24,38,52,.9);transform:translateY(-4px)}
.flag-btn:hover span{color:var(--plasma-hot)}
.flag-btn.on{border-color:var(--ichor-hot);box-shadow:inset 0 0 22px rgba(196,41,28,.22)}
.flag-btn.on span{color:var(--bone)}

/* ---------- CABECALHO ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:900;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:15px clamp(16px,3vw,38px);transition:.45s;border-bottom:1px solid transparent}
header.stuck{background:linear-gradient(180deg,rgba(4,5,7,.97),rgba(4,5,7,.82));backdrop-filter:blur(9px);border-bottom-color:var(--line);padding:9px clamp(16px,3vw,38px);box-shadow:0 10px 40px rgba(0,0,0,.7)}
.hdr-logo{height:48px;width:auto;transition:.45s;filter:drop-shadow(0 0 14px rgba(127,220,255,.30))}
header.stuck .hdr-logo{height:36px}
nav ul{list-style:none;display:flex;gap:clamp(10px,1.5vw,24px);align-items:center}
nav a{font-family:var(--f-ui);font-size:12px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;color:var(--bone-dim);position:relative;padding:6px 2px;transition:.28s;white-space:nowrap}
nav a:hover,nav a.active{color:var(--plasma-hot);text-shadow:0 0 14px rgba(127,220,255,.6)}
nav a::before{content:'';position:absolute;left:50%;bottom:0;width:0;height:1px;background:linear-gradient(90deg,transparent,var(--plasma-hot),transparent);transition:.34s;transform:translateX(-50%)}
nav a:hover::before,nav a.active::before{width:130%}
.hdr-right{display:flex;align-items:center;gap:12px}

/* seletor de idioma em destaque */
.lang-toggle{background:linear-gradient(180deg,rgba(30,46,62,.92),rgba(12,18,26,.92));border:1px solid var(--line-hot);
  padding:8px 14px;display:flex;align-items:center;gap:10px;transition:.28s;
  box-shadow:0 0 20px rgba(47,159,214,.20),inset 0 0 16px rgba(47,159,214,.08);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.lang-toggle svg{width:28px;height:19px;box-shadow:0 1px 6px rgba(0,0,0,.8)}
.lang-toggle span{font-family:var(--f-ui);font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--bone)}
.lang-toggle::after{content:'';width:0;height:0;border:4px solid transparent;border-top-color:var(--plasma-hot);margin-top:3px}
.lang-toggle:hover{border-color:var(--plasma-hot);box-shadow:0 0 30px rgba(47,159,214,.45),inset 0 0 20px rgba(47,159,214,.16);transform:translateY(-1px)}
.lang-toggle:hover span{color:var(--plasma-hot)}
.lang-pop{position:fixed;top:70px;right:clamp(16px,3vw,38px);background:rgba(6,9,13,.98);border:1px solid var(--line-hot);padding:16px;display:none;grid-template-columns:repeat(4,1fr);gap:10px;box-shadow:0 24px 70px rgba(0,0,0,.92);z-index:950}
.lang-pop.open{display:grid;animation:popIn .25s ease}
@keyframes popIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.lang-pop .flag-btn{padding:8px 6px 6px}
.lang-pop .flag-btn svg{width:32px;height:22px}

.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;padding:6px}
.burger span{width:26px;height:2px;background:var(--bone);display:block;transition:.3s}
.burger.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.on span:nth-child(2){opacity:0}
.burger.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- HERO ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:620px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hero-layer{position:absolute;inset:-8%;background-position:center;background-size:cover;background-repeat:no-repeat}
.hero-l1{background-image:url('../art/biomech-03.jpg');filter:brightness(.42) contrast(1.3) saturate(.75);opacity:.85}
.hero-l2{background-image:url('../art/biomech-01.jpg');mix-blend-mode:overlay;opacity:.42;filter:contrast(1.4)}
.hero-glow{position:absolute;inset:0;background:radial-gradient(ellipse 50% 45% at 50% 34%,rgba(47,159,214,.20),transparent 62%),radial-gradient(ellipse 70% 55% at 50% 100%,rgba(143,26,18,.32),transparent 68%),linear-gradient(180deg,rgba(4,5,7,.72),transparent 32%,rgba(4,5,7,.55) 76%,var(--void) 100%)}
.hero-in{position:relative;z-index:3;text-align:center;padding:0 20px;display:flex;flex-direction:column;align-items:center;gap:30px}
.hero-logo{width:min(720px,88vw);filter:drop-shadow(0 0 26px rgba(0,0,0,.95)) drop-shadow(0 0 70px rgba(127,220,255,.24));animation:heroFloat 9s ease-in-out infinite}
@keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.hero-rule{display:flex;align-items:center;gap:18px;opacity:.95}
.hero-rule i{display:block;width:clamp(50px,12vw,140px);height:1px;background:linear-gradient(90deg,transparent,var(--plasma))}
.hero-rule b{font-family:var(--f-ui);font-weight:600;font-size:13px;letter-spacing:.44em;color:var(--plasma-hot);text-transform:uppercase}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.scroll-cue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:9px}
.scroll-cue b{font-family:var(--f-ui);font-size:10px;letter-spacing:.4em;color:var(--bone-dim);text-transform:uppercase}
.scroll-cue i{width:1px;height:46px;background:linear-gradient(var(--plasma),transparent);animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.15;transform:scaleY(.55)}50%{opacity:1;transform:scaleY(1)}}

/* ---------- BOTOES ---------- */
.btn{position:relative;font-family:var(--f-ui);font-weight:600;font-size:12.5px;letter-spacing:.20em;text-transform:uppercase;padding:16px 36px;color:var(--bone);background:rgba(10,14,20,.75);border:1px solid var(--line);overflow:hidden;transition:.35s;display:inline-block;text-align:center;
  clip-path:polygon(13px 0,100% 0,100% calc(100% - 13px),calc(100% - 13px) 100%,0 100%,0 13px)}
.btn::before{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(127,220,255,.22),transparent 70%);transform:translateX(-130%);transition:.6s}
.btn:hover::before{transform:translateX(130%)}
.btn:hover{border-color:var(--line-hot);color:var(--plasma-hot);box-shadow:0 0 26px rgba(47,159,214,.30),inset 0 0 22px rgba(47,159,214,.12)}
.btn.blood{background:linear-gradient(180deg,rgba(143,26,18,.88),rgba(80,12,9,.92));border-color:rgba(196,41,28,.55);color:#f4e9e2}
.btn.blood:hover{border-color:var(--ichor-hot);color:#fff;box-shadow:0 0 30px rgba(196,41,28,.5),inset 0 0 22px rgba(196,41,28,.25)}
.btn.blood::before{background:linear-gradient(120deg,transparent 30%,rgba(255,120,90,.3),transparent 70%)}
.btn.sm{padding:12px 22px;font-size:11px;letter-spacing:.14em}

/* ---------- SECOES ---------- */
section{position:relative;padding:clamp(90px,11vh,150px) 0}
.shell{width:var(--shell-w);margin:0 auto;position:relative;z-index:2}
.sec-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.14;filter:grayscale(.55) contrast(1.25) brightness(.55);z-index:0}
.sec-fade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,var(--void),transparent 16%,transparent 84%,var(--void))}
.sec-label{font-family:var(--f-ui);font-weight:600;font-size:11.5px;letter-spacing:.48em;text-transform:uppercase;color:var(--plasma);text-align:center;margin-bottom:14px;opacity:.92}
.sec-title{font-family:var(--f-display);font-weight:400;text-align:center;font-size:clamp(36px,6.4vw,72px);line-height:1.06;color:var(--bone);letter-spacing:.015em;text-shadow:0 0 34px rgba(0,0,0,.9),0 0 62px rgba(47,159,214,.16)}
.sec-head{margin-bottom:clamp(44px,6vh,72px)}
.band-logo{width:min(420px,58vw);margin:0 auto;filter:drop-shadow(0 0 26px rgba(0,0,0,.9)) drop-shadow(0 0 54px rgba(127,220,255,.20))}
.glyphs{width:100%;max-width:560px;margin:20px auto 0;display:block;height:34px;color:var(--plasma);opacity:.9}
.sec-note{text-align:center;color:var(--bone-dim);max-width:660px;margin:18px auto 0;font-size:20px}

/* ---------- MOLDURAS DA BANDA (PNG com abertura transparente) ---------- */
/* A abertura da moldura horizontal e 16:9 exato, entao o video encaixa certinho. */
.gframe{position:relative;width:100%;margin:0 auto}
.gframe::after{content:'';position:absolute;inset:0;z-index:5;pointer-events:none;
  background-size:100% 100%;background-repeat:no-repeat;
  filter:drop-shadow(0 14px 34px rgba(0,0,0,.75));transition:filter .5s}
.gframe .slot{position:absolute;overflow:hidden;background:#000;z-index:2}
.gframe .slot iframe,.gframe .slot img{width:100%;height:100%;display:block;border:0}

.gframe-h{aspect-ratio:1400/933}
.gframe-h::after{background-image:url('../frames/frame-h.png')}
.gframe-h .slot{left:7.1%;right:7.2%;top:8.7%;bottom:9.2%}

.gframe-sq{aspect-ratio:1/1;max-width:100%}
.gframe-sq::after{background-image:url('../frames/frame-sq.png')}
.gframe-sq .slot{left:7.8%;right:7.9%;top:6.0%;bottom:8.5%}

.gframe:hover::after{filter:drop-shadow(0 14px 34px rgba(0,0,0,.75)) brightness(1.18)}

/* ---------- IN DOMINE (banda) ---------- */
.band-photo{width:100%;margin-bottom:clamp(34px,5vh,58px)}
.band-photo .inner{overflow:hidden}
.band-photo img{width:100%;filter:grayscale(.30) contrast(1.16) brightness(.94);transition:.8s}
.band-photo:hover img{filter:grayscale(0) contrast(1.2) brightness(1.02)}
.band-txt{max-width:1020px;margin:0 auto;text-align:center}
.band-txt .kicker{font-family:var(--f-ui);font-size:11.5px;letter-spacing:.36em;color:var(--ichor-hot);text-transform:uppercase;margin-bottom:22px;display:block}
.band-txt p{color:#c3bdaf;margin-bottom:20px;font-size:21px}
.band-txt p strong{color:var(--bone);font-weight:600}

/* ---------- INTEGRANTES ---------- */
.members{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:clamp(16px,2.2vw,28px)}
.member{position:relative;cursor:pointer;overflow:hidden;background:#080b10;transition:.5s;
  clip-path:polygon(0 0,calc(100% - 24px) 0,100% 24px,100% 100%,24px 100%,0 calc(100% - 24px))}
.member .ph{position:relative;aspect-ratio:3/4;overflow:hidden}
.member img{width:100%;height:100%;object-fit:cover;filter:grayscale(.75) contrast(1.25) brightness(.72);transition:.75s;transform:scale(1.03)}
.member .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,5,7,.15),transparent 40%,rgba(4,5,7,.93) 100%);transition:.5s}
.member .scanline{position:absolute;left:0;right:0;height:2px;top:-10%;opacity:0;background:linear-gradient(90deg,transparent,var(--plasma-hot),transparent);box-shadow:0 0 18px var(--plasma)}
.member:hover img{filter:grayscale(.06) contrast(1.15) brightness(1);transform:scale(1.1)}
.member:hover .scanline{animation:scanDown 1.5s linear infinite;opacity:.9}
@keyframes scanDown{from{top:-6%}to{top:106%}}
.member:hover{box-shadow:0 0 0 1px var(--line-hot),0 22px 60px rgba(0,0,0,.8),0 0 46px rgba(47,159,214,.18)}
.member .meta{position:absolute;left:0;right:0;bottom:0;padding:18px 16px 20px;z-index:3}
.member h3{font-family:var(--f-display);font-size:20px;font-weight:400;color:var(--bone);line-height:1.16}
.member .role{font-family:var(--f-ui);font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--plasma-hot);margin-top:6px;display:block}
.member .more{font-family:var(--f-ui);font-size:10px;letter-spacing:.18em;color:var(--bone-dim);text-transform:uppercase;margin-top:9px;opacity:0;transform:translateY(8px);transition:.4s}
.member:hover .more{opacity:1;transform:none}
.member.tbd{cursor:default;border:1px dashed rgba(222,216,202,.20)}
.member.tbd .ph{display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(135deg,rgba(222,216,202,.03) 0 2px,transparent 2px 15px),radial-gradient(ellipse at 40% 25%,rgba(47,159,214,.12),transparent 62%)}
.member.tbd svg{width:64px;height:64px;opacity:.35;color:var(--plasma)}

/* modal */
.modal{position:fixed;inset:0;z-index:1000;background:rgba(2,3,5,.94);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:22px}
.modal.open{display:flex;animation:fadeIn .4s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-box{position:relative;width:min(960px,100%);max-height:88vh;overflow-y:auto;background:#070a0f;border:1px solid var(--line);box-shadow:0 40px 120px rgba(0,0,0,.95)}
.modal-box::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.12;z-index:0;background:url('../art/biomech-02.jpg') center/cover;filter:grayscale(.4) contrast(1.3)}
.modal-grid{position:relative;z-index:2;display:grid;grid-template-columns:.85fr 1.15fr}
.modal-photo{position:relative;min-height:400px;overflow:hidden}
.modal-photo img{width:100%;height:100%;object-fit:cover;filter:contrast(1.12) brightness(.95)}
.modal-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 62%,#070a0f)}
.modal-body{padding:clamp(26px,3.5vw,46px)}
.modal-body .role{font-family:var(--f-ui);font-size:11px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--plasma-hot);display:block;margin-bottom:12px}
.modal-body h3{font-family:var(--f-display);font-size:clamp(30px,4.4vw,50px);font-weight:400;line-height:1.08;margin-bottom:20px}
.modal-body p{color:#b5af9f;font-size:19px;margin-bottom:14px}
.modal-body .facts{margin-top:24px;border-top:1px solid var(--line);padding-top:22px;display:grid;gap:15px}
.modal-body .facts div{display:flex;gap:14px;font-family:var(--f-ui);font-size:15.5px;color:var(--bone-dim);flex-wrap:wrap;line-height:1.5}
.modal-body .facts b{color:var(--plasma);min-width:126px;font-weight:600;text-transform:uppercase;font-size:12px;letter-spacing:.16em}
.modal-x{position:absolute;top:10px;right:16px;z-index:5;background:none;border:none;color:var(--bone-dim);font-size:34px;line-height:1;transition:.3s}
.modal-x:hover{color:var(--ichor-hot);transform:rotate(90deg)}

/* ---------- VIDEOS ---------- */
.vids{display:grid;grid-template-columns:repeat(auto-fit,minmax(430px,1fr));gap:clamp(24px,3vw,46px)}
.vid .inner{padding:14px}
.vid .tab{display:flex;align-items:center;gap:9px;padding:0 4px 12px;font-family:var(--f-ui);font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-dim)}
.vid .tab i{width:7px;height:7px;background:var(--ichor-hot);border-radius:50%;box-shadow:0 0 10px var(--ichor-hot);animation:blip 2s infinite}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.25}}
.vid .screen{cursor:pointer}
.vid .screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:4}
.vid .screen .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.62) contrast(1.15) saturate(.9);transition:.6s}
.vid .screen:hover .poster{filter:brightness(.82) contrast(1.1);transform:scale(1.04)}
.vid .screen .shade{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 25%,rgba(4,5,7,.72) 100%);z-index:2}
.vid .screen .playbtn{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;transition:.4s}
.vid .screen .playbtn i{width:82px;height:82px;border-radius:50%;border:2px solid rgba(222,216,202,.55);display:flex;align-items:center;justify-content:center;
  background:rgba(6,9,13,.55);backdrop-filter:blur(3px);transition:.4s}
.vid .screen .playbtn i::after{content:'';width:0;height:0;border:15px solid transparent;border-left-color:var(--bone);margin-left:8px}
.vid .screen .playbtn b{font-family:var(--f-ui);font-size:11px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--bone-dim)}
.vid .screen:hover .playbtn i{border-color:var(--ichor-hot);background:rgba(143,26,18,.55);box-shadow:0 0 40px rgba(196,41,28,.55);transform:scale(1.08)}
.vid .screen:hover .playbtn i::after{border-left-color:#fff}
.vid .screen:hover .playbtn b{color:var(--bone)}
.vid .screen.live .playbtn,.vid .screen.live .shade,.vid .screen.live .poster{opacity:0;pointer-events:none}
.vid h3{font-family:var(--f-display);font-size:27px;font-weight:400;text-align:center;margin-top:18px}
.vid .sub{text-align:center;font-family:var(--f-ui);font-size:11px;letter-spacing:.14em;color:var(--bone-dim);text-transform:uppercase;margin-top:7px}

/* ---------- OUVIR ---------- */
.listen{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,3.4vw,50px);align-items:start}
.sp-embed iframe{display:block;width:100%}
.platforms{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:14px;margin-top:26px}
.plat{position:relative;display:flex;align-items:center;gap:14px;padding:18px 20px;overflow:hidden;
  background:linear-gradient(180deg,rgba(18,26,36,.92),rgba(9,12,18,.92));border:1px solid rgba(222,216,202,.20);transition:.32s;
  clip-path:polygon(11px 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%,0 11px)}
.plat::before{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(127,220,255,.18),transparent 70%);transform:translateX(-130%);transition:.6s}
.plat:hover::before{transform:translateX(130%)}
.plat svg{width:26px;height:26px;fill:var(--bone);transition:.32s;flex-shrink:0}
.plat span{font-family:var(--f-ui);font-size:13px;font-weight:600;letter-spacing:.10em;text-transform:uppercase;color:var(--bone);transition:.32s}
.plat:hover{border-color:var(--line-hot);background:linear-gradient(180deg,rgba(30,50,66,.95),rgba(14,22,32,.95));transform:translateY(-4px);box-shadow:0 14px 34px rgba(0,0,0,.6),0 0 26px rgba(47,159,214,.22)}
.plat:hover svg{fill:var(--plasma-hot);transform:scale(1.12)}
.plat:hover span{color:var(--plasma-hot)}

.player{background:rgba(7,10,15,.92);padding:30px}
.player .np{font-family:var(--f-ui);font-size:11px;font-weight:600;letter-spacing:.28em;color:var(--plasma);text-transform:uppercase;margin-bottom:10px}
.player .tname{font-family:var(--f-display);font-size:30px;font-weight:400;line-height:1.14;margin-bottom:20px}
.viz{display:flex;align-items:flex-end;gap:3px;height:44px;margin-bottom:16px}
.viz i{flex:1;background:linear-gradient(180deg,var(--plasma-hot),var(--ichor));height:12%;transition:height .09s linear;opacity:.8}
/* barra que enche de sangue */
.bar{height:9px;background:rgba(222,216,202,.10);position:relative;cursor:pointer;margin-bottom:11px;overflow:hidden;
  border:1px solid rgba(222,216,202,.12)}
.bar .fill{height:100%;width:0;position:relative;transition:width .12s linear;
  background:linear-gradient(90deg,#4a0705 0%,var(--blood) 35%,var(--ichor) 70%,var(--ichor-hot) 100%);
  box-shadow:0 0 16px rgba(196,41,28,.65),inset 0 0 10px rgba(0,0,0,.45)}
.bar .fill::after{content:'';position:absolute;right:-1px;top:0;bottom:0;width:9px;
  background:linear-gradient(90deg,transparent,#ff4a2a);filter:blur(1px)}
.bar .fill::before{content:'';position:absolute;right:-3px;top:100%;width:7px;height:9px;
  background:var(--ichor-hot);border-radius:0 0 50% 50%;opacity:.85}
.times{display:flex;justify-content:space-between;font-family:var(--f-ui);font-size:12px;color:var(--bone-dim);letter-spacing:.08em;margin-bottom:20px}
.pctrl{display:flex;align-items:center;justify-content:center;gap:18px}
.pctrl button{width:50px;height:50px;border:1px solid rgba(222,216,202,.22);background:rgba(14,20,28,.9);color:var(--bone);display:flex;align-items:center;justify-content:center;transition:.3s;border-radius:50%}
.pctrl button svg{width:17px;height:17px;fill:currentColor}
.pctrl button:hover{border-color:var(--line-hot);color:var(--plasma-hot);box-shadow:0 0 22px rgba(47,159,214,.35);transform:translateY(-2px)}
.pctrl button.big{width:66px;height:66px;border-color:rgba(196,41,28,.5);background:linear-gradient(180deg,rgba(143,26,18,.5),rgba(20,10,10,.9))}
.pctrl button.big svg{width:22px;height:22px}
.pctrl button.big:hover{border-color:var(--ichor-hot);color:#fff;box-shadow:0 0 32px rgba(196,41,28,.6)}
.tracklist{margin-top:24px;border-top:1px solid var(--line);padding-top:16px;display:grid;gap:3px}
.trk{display:flex;align-items:center;gap:14px;padding:12px 12px;transition:.28s;cursor:pointer;border:1px solid transparent}
.trk:hover{background:rgba(26,42,58,.6);border-color:rgba(222,216,202,.14)}
.trk .n{font-family:var(--f-ui);font-size:11px;color:var(--bone-dim);width:22px}
.trk .t{font-family:var(--f-body);font-size:20px;color:var(--bone);flex:1}
.trk .eq{width:13px;height:13px;fill:var(--ichor-hot);opacity:0;transition:.3s}
.trk.on{background:linear-gradient(90deg,rgba(143,26,18,.30),rgba(143,26,18,.06));box-shadow:inset 3px 0 0 var(--ichor-hot)}
.trk.on .t{color:#ffd9d0}
.trk.on .n{color:var(--ichor-hot)}
.trk.on .eq{opacity:1;animation:eqp 1.1s ease-in-out infinite}
@keyframes eqp{0%,100%{opacity:.45}50%{opacity:1}}
.hint{font-family:var(--f-ui);font-size:11px;letter-spacing:.05em;color:var(--ash);text-align:center;margin-top:18px;line-height:1.8}
.hint.warn{color:var(--ember)}

/* ---------- THE TRAVELER ---------- */
#traveler{padding:0;overflow:hidden}
.trav{position:relative;min-height:clamp(560px,90vh,900px);display:flex;align-items:center}
.trav-bg{position:absolute;inset:-6%;background:url('../art/traveler-scene.jpg') center/cover no-repeat;filter:contrast(1.12) brightness(.78)}
.trav-veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,5,7,.95) 4%,rgba(4,5,7,.52) 40%,rgba(4,5,7,.34) 66%,rgba(4,5,7,.52) 100%),linear-gradient(180deg,var(--void),transparent 22%,transparent 76%,var(--void))}
.trav-in{position:relative;z-index:3}
.trav-in .tag{font-family:var(--f-ui);font-size:11.5px;font-weight:600;letter-spacing:.44em;text-transform:uppercase;color:var(--ember);margin-bottom:16px;display:block}
.trav-in h2{font-family:var(--f-display);font-size:clamp(44px,8vw,100px);font-weight:400;line-height:1.0;margin-bottom:24px;text-shadow:0 0 50px rgba(0,0,0,.95)}
.trav-in p{font-size:22px;color:#c9c3b5;margin-bottom:30px}

/* ---------- SHOWS ---------- */
.shows-list{border-top:1px solid var(--line);margin-bottom:clamp(50px,7vh,80px)}
.show{display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding:24px 8px;border-bottom:1px solid var(--line);transition:.35s;position:relative}
.show:hover{background:rgba(20,32,44,.4);padding-left:18px}
.show::before{content:'';position:absolute;left:0;top:0;bottom:0;width:0;background:var(--ichor-hot);transition:.35s}
.show:hover::before{width:3px}
.show .d{font-family:var(--f-ui);font-size:14px;font-weight:600;letter-spacing:.12em;color:var(--plasma-hot);min-width:140px}
.show .v{flex:1;min-width:200px}
.show .v strong{display:block;font-family:var(--f-display);font-size:22px;font-weight:400}
.show .v span{font-family:var(--f-ui);font-size:12px;letter-spacing:.1em;color:var(--bone-dim);text-transform:uppercase}
.no-shows{text-align:center;padding:48px 12px;color:var(--bone-dim);font-style:italic;font-size:20px;border-bottom:1px solid var(--line)}
.gal{position:relative;overflow:hidden;aspect-ratio:16/9}
.gal-track{display:flex;height:100%;transition:transform .85s cubic-bezier(.76,0,.16,1)}
.gal-slide{min-width:100%;height:100%;position:relative}
.gal-slide img{width:100%;height:100%;object-fit:cover}
.gal-slide .cap{position:absolute;left:0;right:0;bottom:0;padding:28px 30px;z-index:3;background:linear-gradient(transparent,rgba(4,5,7,.93))}
.gal-slide .cap b{font-family:var(--f-display);font-size:26px;font-weight:400;display:block}
.gal-slide .cap span{font-family:var(--f-ui);font-size:11px;letter-spacing:.2em;color:var(--plasma-hot);text-transform:uppercase}
.ph-slot{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:26px;background:repeating-linear-gradient(135deg,rgba(222,216,202,.028) 0 2px,transparent 2px 16px),radial-gradient(ellipse at 35% 22%,rgba(47,159,214,.16),transparent 62%),radial-gradient(ellipse at 70% 85%,rgba(143,26,18,.20),transparent 60%),linear-gradient(160deg,#101319,#05070a)}
.ph-slot svg{width:54px;height:54px;color:var(--plasma);opacity:.5}
.ph-slot b{font-family:var(--f-display);font-size:23px;font-weight:400;color:var(--bone)}
.ph-slot span{font-family:var(--f-ui);font-size:10.5px;letter-spacing:.18em;color:var(--ash);text-transform:uppercase}
.gal-nav{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:0 18px;pointer-events:none;z-index:4}
.gal-nav button{pointer-events:auto;width:50px;height:50px;background:rgba(4,6,10,.72);border:1px solid rgba(222,216,202,.22);color:var(--bone);display:flex;align-items:center;justify-content:center;transition:.3s;backdrop-filter:blur(4px)}
.gal-nav button:hover{border-color:var(--line-hot);color:var(--plasma-hot);background:rgba(20,34,48,.9)}
.gal-nav svg{width:17px;height:17px;fill:currentColor}
.dots{display:flex;justify-content:center;gap:10px;margin-top:20px;flex-wrap:wrap}
.dots button{width:28px;height:3px;background:rgba(222,216,202,.18);border:none;transition:.3s;padding:0}
.dots button.on{background:var(--plasma-hot);box-shadow:0 0 12px var(--plasma)}

/* ---------- LOJA ---------- */
.merch{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:clamp(16px,2.4vw,30px)}
.item{position:relative;background:rgba(8,11,16,.88);border:1px solid var(--line);overflow:hidden;transition:.45s;
  clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px))}
.item:hover{border-color:var(--line-hot);transform:translateY(-6px);box-shadow:0 26px 60px rgba(0,0,0,.75),0 0 40px rgba(47,159,214,.14)}
.item .art{aspect-ratio:1;position:relative;overflow:hidden}
.item .art img{width:100%;height:100%;object-fit:cover;filter:brightness(.78) contrast(1.12);transition:.7s}
.item:hover .art img{filter:brightness(1) contrast(1.08);transform:scale(1.07)}
.item .soon{position:absolute;top:12px;right:12px;z-index:4;font-family:var(--f-ui);font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ember);border:1px solid var(--ember);padding:5px 9px;background:rgba(4,5,7,.85)}
.item .body{padding:20px 18px 24px;text-align:center}
.item .body h3{font-family:var(--f-display);font-size:22px;font-weight:400}
.item .body .price{font-family:var(--f-ui);font-size:12px;letter-spacing:.12em;color:var(--bone-dim);margin-top:8px;display:block}
.item .body .btn{margin-top:16px;width:100%}
.merch-note{text-align:center;max-width:760px;margin:0 auto clamp(32px,4vh,48px);color:#b6b0a2;font-size:20px}

/* calculadora de frete */
.ship{max-width:620px;margin:clamp(34px,5vh,54px) auto 0;padding:26px 28px;background:rgba(8,11,16,.9);border:1px solid var(--line);
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}
.ship h3{font-family:var(--f-display);font-size:24px;font-weight:400;text-align:center;margin-bottom:6px}
.ship .from{font-family:var(--f-ui);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--plasma);text-align:center;display:block;margin-bottom:20px}
.ship-row{display:flex;gap:12px;flex-wrap:wrap}
.ship-row input{flex:1;min-width:170px;background:rgba(4,6,10,.9);border:1px solid rgba(222,216,202,.22);color:var(--bone);
  font-family:var(--f-ui);font-size:16px;letter-spacing:.1em;padding:15px 18px;transition:.3s;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.ship-row input::placeholder{color:var(--ash)}
.ship-row input:focus{outline:none;border-color:var(--line-hot);box-shadow:0 0 22px rgba(47,159,214,.25)}
.cep-out{margin-top:18px;text-align:center;font-family:var(--f-ui);min-height:30px}
.cep-out.bad{color:var(--ember);font-size:13px;letter-spacing:.08em}
.cep-out.ok{display:flex;align-items:baseline;justify-content:center;gap:14px}
.cep-out.ok b{font-family:var(--f-display);font-size:32px;font-weight:400;color:var(--bone);
  text-shadow:0 0 22px rgba(196,41,28,.45)}
.cep-out.ok span{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--plasma-hot)}
.ship .note{font-family:var(--f-ui);font-size:10.5px;letter-spacing:.05em;color:var(--ash);text-align:center;margin-top:14px;line-height:1.7}

/* ---------- ID NEWS ---------- */
.news{display:grid;grid-template-columns:repeat(auto-fit,minmax(295px,1fr));gap:clamp(18px,2.4vw,32px)}
.post{background:rgba(8,11,16,.88);border:1px solid var(--line);overflow:hidden;transition:.45s;
  clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px))}
.post:hover{border-color:var(--line-hot);transform:translateY(-6px);box-shadow:0 26px 60px rgba(0,0,0,.75)}
.post .thumb{aspect-ratio:16/10;overflow:hidden;position:relative}
.post .thumb img{width:100%;height:100%;object-fit:cover;filter:grayscale(.45) brightness(.7) contrast(1.16);transition:.7s}
.post:hover .thumb img{filter:grayscale(0) brightness(.96);transform:scale(1.07)}
.post .body{padding:22px 24px 28px}
.post .cat{font-family:var(--f-ui);font-size:10px;font-weight:600;letter-spacing:.22em;color:var(--ichor-hot);text-transform:uppercase}
.post h3{font-family:var(--f-display);font-size:23px;font-weight:400;margin:11px 0 10px;line-height:1.22}
.post p{color:var(--bone-dim);font-size:18px}
.post .date{font-family:var(--f-ui);font-size:10.5px;letter-spacing:.14em;color:var(--ash);margin-top:14px;display:block;text-transform:uppercase}

/* ---------- CONTATO ---------- */
.contact{display:flex;gap:22px;flex-wrap:wrap;justify-content:center}
.cc{display:flex;align-items:center;gap:20px;padding:26px 34px;background:rgba(8,11,16,.9);border:1px solid rgba(222,216,202,.20);transition:.36s;
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}
.cc svg{width:32px;height:32px;fill:var(--bone-dim);transition:.36s;flex-shrink:0}
.cc b{display:block;font-family:var(--f-display);font-size:22px;font-weight:400;margin-bottom:4px}
.cc span{font-family:var(--f-ui);font-size:16px;letter-spacing:.04em;color:var(--bone);word-break:break-all}
.cc:hover{border-color:var(--line-hot);transform:translateY(-4px);box-shadow:0 0 34px rgba(47,159,214,.22)}
.cc:hover svg{fill:var(--plasma-hot)}
.cc:hover span{color:var(--plasma-hot)}

/* ---------- RODAPE ---------- */
footer{position:relative;border-top:1px solid var(--line);padding:56px 20px 34px;text-align:center;overflow:hidden}
footer::before{content:'';position:absolute;inset:0;opacity:.13;background:url('../art/biomech-04.jpg') center/cover;filter:grayscale(.5) contrast(1.3) brightness(.5)}
footer::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,var(--void),rgba(4,5,7,.8))}
.foot-in{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;gap:24px}
.foot-logo{width:190px;opacity:.85;filter:drop-shadow(0 0 20px rgba(127,220,255,.22))}
.socials{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
.socials a{width:50px;height:50px;border:1px solid rgba(222,216,202,.20);display:flex;align-items:center;justify-content:center;transition:.34s;
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px)}
.socials svg{width:21px;height:21px;fill:var(--bone-dim);transition:.34s}
.socials a:hover{border-color:var(--line-hot);background:rgba(22,36,50,.75);transform:translateY(-4px)}
.socials a:hover svg{fill:var(--plasma-hot)}
.foot-txt{font-family:var(--f-ui);font-size:11px;letter-spacing:.14em;color:var(--ash);line-height:2}

/* ---------- REVEAL ---------- */
.rv{opacity:0;transform:translateY(38px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}

/* ---------- RTL ---------- */
html[dir="rtl"] .trav-in{text-align:right}
html[dir="rtl"] .trav-wrap{direction:rtl}
html[dir="rtl"] .show:hover{padding-left:8px;padding-right:18px}
html[dir="rtl"] .show::before{left:auto;right:0}
html[dir="rtl"] .trk.on{box-shadow:inset -3px 0 0 var(--ichor-hot)}

/* ---------- RESPONSIVO ---------- */
@media(max-width:1300px){
  nav a{font-size:11px;letter-spacing:.13em}
  nav ul{gap:13px}
  .hdr-logo{height:40px}
}
@media(max-width:1080px){
  .listen{grid-template-columns:1fr}
  .modal-grid{grid-template-columns:1fr}
  #prod-modal .modal-photo{min-height:280px;max-height:42vh}
  .modal-photo::after{background:linear-gradient(180deg,transparent 52%,#070a0f)}
}
@media(max-width:900px){
  body{font-size:18px}
  nav{position:fixed;top:0;right:0;height:100vh;height:100svh;width:82%;max-width:340px;background:rgba(4,5,7,.985);backdrop-filter:blur(14px);border-left:1px solid var(--line);transform:translateX(105%);transition:transform .5s cubic-bezier(.7,0,.2,1);padding:110px 34px 40px;overflow-y:auto;z-index:940}
  nav.open{transform:none;box-shadow:-30px 0 80px rgba(0,0,0,.9)}
  nav ul{flex-direction:column;gap:26px;align-items:flex-start}
  nav a{font-size:15px;letter-spacing:.22em}
  .burger{display:flex;z-index:960}
  .vids{grid-template-columns:1fr}
  .flags{grid-template-columns:repeat(4,1fr);max-width:420px}
  .lang-pop{grid-template-columns:repeat(3,1fr);right:12px;top:64px}
  .trav-wrap{width:90vw}
  .trav-in{max-width:none}
  .trav-veil{background:linear-gradient(180deg,rgba(4,5,7,.92) 4%,rgba(4,5,7,.5) 40%,rgba(4,5,7,.9) 100%)}
  section{padding:78px 0}
  .band-txt p{font-size:19px}
        }
@media(max-width:560px){
  .flags{grid-template-columns:repeat(3,1fr);max-width:330px}
  .members{grid-template-columns:repeat(2,1fr)}
  .show .d{min-width:100%}
          .vid .screen .playbtn i{width:64px;height:64px}
  .cc{padding:20px 22px;gap:14px}
  .cc span{font-size:14px}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;transition-duration:.01ms !important}}

/* video aberto direto do disco: abre no YouTube em vez de embutir */
.vid .screen.external .playbtn b::after{content:' \2197'}

/* ============ AJUSTES DA VERSAO 3 ============ */

/* --- bandeira do topo: maior e acesa --- */
.lang-toggle{padding:9px 16px;gap:12px;border-color:rgba(127,220,255,.55);
  background:linear-gradient(180deg,rgba(40,62,84,.95),rgba(14,22,32,.95));
  box-shadow:0 0 26px rgba(47,159,214,.35),inset 0 0 18px rgba(47,159,214,.12)}
.lang-toggle svg{width:38px;height:26px;box-shadow:0 2px 10px rgba(0,0,0,.9);
  outline:1px solid rgba(255,255,255,.28)}
.lang-toggle span{font-size:14px;font-weight:700;color:#fff;letter-spacing:.14em}
.lang-toggle::after{border-top-color:#fff;opacity:.9}
.lang-toggle:hover{box-shadow:0 0 40px rgba(47,159,214,.6),inset 0 0 24px rgba(47,159,214,.2);transform:translateY(-2px)}
.lang-pop{padding:18px;gap:12px;border-color:rgba(127,220,255,.5);box-shadow:0 26px 80px rgba(0,0,0,.95),0 0 40px rgba(47,159,214,.2)}
.lang-pop .flag-btn svg{width:40px;height:27px;outline:1px solid rgba(255,255,255,.2)}
.flag-btn svg{outline:1px solid rgba(255,255,255,.18)}

/* --- espectro --- */
#apparition{position:fixed;top:0;left:0;z-index:9989;pointer-events:none;opacity:0;
  width:min(28vh,240px);will-change:transform,opacity}
#apparition img{width:100%;filter:brightness(1.2) contrast(1.05) drop-shadow(0 0 50px rgba(120,200,255,.28));
  mix-blend-mode:screen}

/* --- foto da banda de ponta a ponta --- */
.band-full{position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;width:100vw;
  margin-bottom:clamp(34px,5vh,60px)}
.band-full img{width:100%;height:auto;display:block;filter:grayscale(.28) contrast(1.14) brightness(.95)}
.band-full::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,var(--void),transparent 18%,transparent 78%,var(--void)),
             linear-gradient(90deg,var(--void),transparent 12%,transparent 88%,var(--void))}

/* --- shows --- */
.show{display:flex;align-items:center;gap:26px;flex-wrap:wrap;padding:26px 10px}
.show .d{display:flex;flex-direction:column;align-items:center;min-width:96px;line-height:1}
.show .d b{font-family:var(--f-display);font-size:44px;color:var(--bone)}
.show .d span{font-family:var(--f-ui);font-size:13px;font-weight:700;letter-spacing:.2em;color:var(--ichor-hot);margin-top:4px}
.show .d i{font-family:var(--f-ui);font-size:11px;color:var(--ash);font-style:normal;margin-top:3px}
.show .hrs{display:flex;flex-direction:column;gap:3px;font-family:var(--f-ui);font-size:12px;color:var(--bone-dim);letter-spacing:.06em}

/* --- loja --- */
.item .body .btn{margin-top:14px;width:100%;cursor:pointer}
.item{cursor:pointer}
.pprice{font-family:var(--f-display);font-size:34px;color:var(--bone);margin-bottom:16px;
  text-shadow:0 0 22px rgba(196,41,28,.4)}
.opt{display:flex;align-items:center;gap:14px;margin:14px 0;font-family:var(--f-ui);font-size:13px;color:var(--bone-dim);flex-wrap:wrap}
.opt b{color:var(--plasma);font-size:11px;letter-spacing:.16em;text-transform:uppercase;min-width:88px}
.sizes{display:flex;gap:8px;flex-wrap:wrap}
.sz{width:46px;height:40px;background:rgba(12,17,24,.9);border:1px solid rgba(222,216,202,.22);color:var(--bone);
  font-family:var(--f-ui);font-size:13px;font-weight:600;transition:.28s;
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.sz:hover{border-color:var(--line-hot);color:var(--plasma-hot)}
.sz.on{background:linear-gradient(180deg,rgba(143,26,18,.85),rgba(70,10,8,.9));border-color:var(--ichor-hot);color:#fff}
.buy{width:100%;margin:18px 0 6px}
.modal-body .ship{margin-top:22px;padding-top:20px;border-top:1px solid var(--line);background:none;clip-path:none}
.modal-body .ship h4{font-family:var(--f-ui);font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--plasma);margin-bottom:4px}
.modal-body .ship .from{font-family:var(--f-ui);font-size:11px;color:var(--ash);display:block;margin-bottom:14px;text-align:left}

/* --- player unico, grande, com os links coloridos embaixo --- */
/* player e grade de streamings compartilham a MESMA largura, entao ficam sempre alinhados.
   O limite por vh evita que a moldura quadrada fique mais alta que a tela. */
.listen{display:block}
.player-wrap{max-width:960px;margin:0 auto}
.player-wrap .sp-embed iframe{width:100%;height:520px;display:block}
.brands{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;
  max-width:900px;margin:26px auto 0}
.brand{position:relative;display:flex;align-items:center;gap:13px;padding:17px 20px;overflow:hidden;
  background:linear-gradient(180deg,rgba(20,26,34,.94),rgba(9,12,18,.94));
  border:1px solid rgba(222,216,202,.16);transition:.3s;
  clip-path:polygon(11px 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%,0 11px)}
.brand svg{width:28px;height:28px;flex-shrink:0;transition:.3s}
.brand span{font-family:var(--f-ui);font-size:13.5px;font-weight:600;letter-spacing:.08em;color:var(--bone);transition:.3s}
.brand::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--bc);transition:.3s}
.brand:hover{transform:translateY(-4px);border-color:var(--bc);
  box-shadow:0 16px 38px rgba(0,0,0,.6),0 0 26px color-mix(in srgb,var(--bc) 45%,transparent)}
.brand:hover span{color:#fff}
.brand:hover::before{width:6px}
.b-spotify{--bc:#1DB954}  .b-youtube{--bc:#FF0000}  .b-ytmusic{--bc:#FF0033}
.b-deezer {--bc:#A238FF}  .b-apple  {--bc:#FA2D48}  .b-instagram{--bc:#E1306C}

/* --- rodape com os icones nas cores originais --- */
.socials a{width:52px;height:52px;background:rgba(10,14,20,.7)}
.socials a svg{fill:var(--sc,#9b9587)}
.socials a:hover{border-color:var(--sc);background:rgba(16,22,30,.9);
  box-shadow:0 0 24px color-mix(in srgb,var(--sc) 55%,transparent)}
.socials a:hover svg{fill:var(--sc)}
.s-spotify{--sc:#1DB954} .s-youtube{--sc:#FF0000} .s-ytmusic{--sc:#FF0033}
.s-deezer{--sc:#A238FF}  .s-apple{--sc:#FA2D48}   .s-instagram{--sc:#E1306C}
.s-mail{--sc:#EA4335}

/* --- cards do diario que abrem galeria --- */
.post{cursor:pointer}
.post .count{position:absolute;top:12px;right:12px;z-index:3;font-family:var(--f-ui);font-size:10px;
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--bone);
  background:rgba(4,6,10,.82);border:1px solid rgba(222,216,202,.28);padding:5px 9px}
.post .thumb{position:relative}
.post .thumb::after{content:'';position:absolute;inset:0;opacity:0;transition:.4s;
  background:radial-gradient(circle at center,rgba(47,159,214,.22),transparent 62%)}
.post:hover .thumb::after{opacity:1}
.post .open{display:inline-block;margin-top:14px;font-family:var(--f-ui);font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--plasma-hot);opacity:0;transform:translateY(6px);transition:.35s}
.post:hover .open{opacity:1;transform:none}

/* --- galeria em tela cheia --- */
#lightbox{position:fixed;inset:0;z-index:1200;background:rgba(2,3,5,.97);backdrop-filter:blur(10px);
  display:none;flex-direction:column}
#lightbox.open{display:flex;animation:fadeIn .35s ease}
.lb-top{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px clamp(14px,3vw,34px);
  border-bottom:1px solid var(--line)}
.lb-top h3{font-family:var(--f-display);font-size:clamp(18px,2.4vw,28px);font-weight:400;color:var(--bone)}
.lb-top .right{display:flex;align-items:center;gap:18px}
#lb-count{font-family:var(--f-ui);font-size:12px;letter-spacing:.14em;color:var(--plasma-hot)}
#lb-x{background:none;border:1px solid rgba(222,216,202,.25);color:var(--bone);width:42px;height:42px;
  font-size:24px;line-height:1;transition:.3s;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
#lb-x:hover{border-color:var(--ichor-hot);color:var(--ichor-hot);transform:rotate(90deg)}
#lb-stage{flex:1;position:relative;display:flex;align-items:center;justify-content:center;
  padding:clamp(10px,2vw,26px);min-height:0;touch-action:pan-y}
#lb-img{max-width:100%;max-height:100%;object-fit:contain;opacity:0;transform:scale(.985);
  transition:opacity .35s ease,transform .35s ease;box-shadow:0 30px 90px rgba(0,0,0,.85)}
#lb-img.in{opacity:1;transform:none}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:56px;height:56px;z-index:5;
  background:rgba(6,9,14,.72);border:1px solid rgba(222,216,202,.22);color:var(--bone);
  display:flex;align-items:center;justify-content:center;transition:.3s;backdrop-filter:blur(4px)}
.lb-nav svg{width:18px;height:18px;fill:currentColor}
.lb-nav:hover{border-color:var(--line-hot);color:var(--plasma-hot);background:rgba(20,34,48,.9)}
#lb-prev{left:clamp(8px,2vw,28px)} #lb-next{right:clamp(8px,2vw,28px)}
#lb-strip{display:flex;gap:8px;overflow-x:auto;padding:14px clamp(14px,3vw,34px);border-top:1px solid var(--line);
  scrollbar-width:thin}
#lb-strip .th{flex:0 0 auto;width:96px;height:64px;padding:0;border:1px solid rgba(222,216,202,.16);
  background:none;overflow:hidden;opacity:.5;transition:.3s}
#lb-strip .th img{width:100%;height:100%;object-fit:cover}
#lb-strip .th:hover{opacity:.85;border-color:var(--line-hot)}
#lb-strip .th.on{opacity:1;border-color:var(--ichor-hot);box-shadow:0 0 16px rgba(196,41,28,.5)}

/* --- contato maior --- */
.cc span{font-size:17px;color:var(--bone)}
.cc b{font-size:23px}

@media(max-width:900px){
  .player-wrap .sp-embed iframe{height:420px}
  .show .d{min-width:74px}
  .show .d b{font-size:34px}
  #lb-strip .th{width:74px;height:52px}
  .lb-nav{width:46px;height:46px}
}
@media(max-width:560px){
  .brands{grid-template-columns:1fr 1fr}
  .brand{padding:14px}
  .brand span{font-size:11.5px}
  .player-wrap .sp-embed iframe{height:380px}
    .modal-body .ship .ship-row{flex-direction:column}
}

/* ============ AJUSTES DA VERSAO 4 ============ */

/* --- kicker "Brasil, 2021" maior e azul --- */
.band-txt .kicker{font-size:15px;letter-spacing:.34em;color:var(--plasma-hot);
  text-shadow:0 0 22px rgba(47,159,214,.45);margin-bottom:26px}

/* --- hero com a arte nova --- */
.hero-l1{background-image:url('../art/hero-bg.jpg');filter:brightness(.62) contrast(1.14) saturate(.9);opacity:1}
.hero-l2{display:none}
/* a logo e o "olho" da arte estao centralizados dentro dos proprios arquivos,
   entao no eixo horizontal eles coincidem em qualquer tela. O padding empurra
   o bloco para baixo o suficiente para a LOGO (e nao o bloco todo) cair no centro. */
.hero-in{padding-top:clamp(0px,13vh,132px)}
.hero-glow{background:
  radial-gradient(ellipse 55% 45% at 50% 34%,rgba(47,159,214,.14),transparent 62%),
  linear-gradient(180deg,rgba(4,5,7,.78),transparent 30%,rgba(4,5,7,.45) 72%,var(--void) 100%)}

/* --- ID News sem a logo ao fundo --- */
#news .sec-bg{background-image:url('../art/trav-2.jpg');opacity:.10}

/* --- 8 streamings, sempre 4 por linha no desktop, alinhados com a moldura do player --- */
.brands{grid-template-columns:repeat(4,1fr);max-width:960px}
.b-tidal{--bc:#00FFFF} .b-amazon{--bc:#25D1DA}
.s-tidal{--sc:#7ee8e8} .s-amazon{--sc:#25D1DA}

/* --- 3 colunas: ID News, Shows e Loja --- */
.news{grid-template-columns:repeat(3,1fr)}
.merch{grid-template-columns:repeat(3,1fr)}

/* --- galeria de shows: card quadrado, menor --- */
.showgal{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,30px)}
.showgal .post .thumb{aspect-ratio:1/1}
.showgal .post .body{padding:18px 20px 22px}
.showgal .post h3{font-size:21px;margin:8px 0 4px}
.showgal .post .city{font-family:var(--f-ui);font-size:12px;letter-spacing:.12em;color:var(--bone-dim);text-transform:uppercase}

/* --- The Traveler: artes e partes --- */
.trav-in .parts{font-family:var(--f-ui);font-size:12.5px;letter-spacing:.14em;color:var(--plasma-hot);
  text-transform:uppercase;margin-bottom:10px;display:block}
.trav-in .date{font-family:var(--f-ui);font-size:12px;letter-spacing:.1em;color:var(--ember);
  display:block;margin-bottom:26px}
/* texto a esquerda; a metade direita fica livre para a arte de fundo respirar.
   As 4 artes do single vivem no post do ID News, nao aqui. */
.trav-wrap{position:relative;z-index:3;width:var(--shell-w);margin:0 auto}
.trav-in{max-width:min(58%,720px);margin:0}

@media(max-width:900px){
  .brands{grid-template-columns:repeat(2,1fr)}
  .news,.merch,.showgal{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .news,.showgal{grid-template-columns:1fr}
  .brands{grid-template-columns:repeat(2,1fr)}
  .gframe-sq{max-width:100%}
}

/* ============ AJUSTES DA VERSAO 5 ============ */

/* --- video perfeitamente centrado na abertura da moldura --- */
.gframe .slot{position:absolute !important;aspect-ratio:auto !important;display:block}
.gframe .slot .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center;filter:brightness(.66) contrast(1.12) saturate(.95);transition:.6s}
.gframe .slot:hover .poster{filter:brightness(.88) contrast(1.08)}
.gframe .slot .shade{position:absolute;inset:0;z-index:2;
  background:radial-gradient(ellipse at center,transparent 26%,rgba(4,5,7,.7) 100%)}
.gframe .slot .playbtn{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;transition:.4s}
.vid{display:flex;flex-direction:column}
.vid .tab{justify-content:center}

/* --- loja por categorias --- */
.shopcat{margin-bottom:clamp(40px,5vh,64px)}
.cat-title{font-family:var(--f-display);font-size:clamp(22px,2.8vw,32px);font-weight:400;color:var(--bone);
  text-align:center;margin-bottom:22px;position:relative}
.cat-title::after{content:'';display:block;width:74px;height:1px;margin:14px auto 0;
  background:linear-gradient(90deg,transparent,var(--plasma),transparent)}
.item .art{aspect-ratio:3/4}


.item .artname{display:block;font-family:var(--f-ui);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--plasma);margin-top:6px}
.item .body .price{font-family:var(--f-display);font-size:24px;color:var(--bone);margin-top:10px;letter-spacing:0}

/* --- pagina do produto --- */


.modal-photo::after{display:none}
.pgal{position:absolute;left:0;right:0;bottom:10px;display:flex;gap:8px;justify-content:center;z-index:4}
.pgal .pg{width:56px;height:56px;padding:0;border:1px solid rgba(222,216,202,.25);background:#fff;
  overflow:hidden;opacity:.6;transition:.3s;cursor:pointer}
.pgal .pg img{width:100%;height:100%;object-fit:cover;padding:0}
.pgal .pg.on,.pgal .pg:hover{opacity:1;border-color:var(--line-hot)}
.qty{display:flex;align-items:center;gap:2px}
.qty button{width:38px;height:38px;background:rgba(12,17,24,.9);border:1px solid rgba(222,216,202,.22);
  color:var(--bone);font-family:var(--f-ui);font-size:17px;transition:.28s}
.qty button:hover{border-color:var(--line-hot);color:var(--plasma-hot)}
.qty span{min-width:46px;text-align:center;font-family:var(--f-ui);font-size:16px;color:var(--bone)}
.totals{margin-top:20px;border-top:1px solid var(--line);padding-top:16px;display:grid;gap:8px}
.totals .row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  font-family:var(--f-ui);font-size:13px;color:var(--bone-dim)}
.totals .row b{color:var(--bone);font-size:15px}
.totals .row.big{border-top:1px solid var(--line);padding-top:12px;margin-top:4px}
.totals .row.big span{color:var(--plasma-hot);letter-spacing:.16em;text-transform:uppercase;font-size:12px}
.totals .row.big b{font-family:var(--f-display);font-size:30px;color:var(--bone);
  text-shadow:0 0 22px rgba(196,41,28,.45)}
.totals .hint2{font-size:11.5px;color:var(--ash);letter-spacing:.05em}
.modal-body .note{font-family:var(--f-ui);font-size:10.5px;color:var(--ash);text-align:center;margin-top:12px;line-height:1.7}

/* --- rodape: credito em destaque --- */
.foot-credit{font-family:var(--f-display);font-size:clamp(14px,1.25vw,15.5px);color:var(--bone);
  letter-spacing:.04em;text-shadow:0 0 18px rgba(47,159,214,.30)}
.foot-txt{font-size:12.5px;color:var(--bone-dim);letter-spacing:.12em}

@media(max-width:900px){
  #prod-modal .modal-photo img{max-height:44vh}
  .pgal .pg{width:46px;height:46px}
}

/* ============ LOJA: fotos exatamente como enviadas ============ */
.item .art{aspect-ratio:3/4;background:#fff;overflow:hidden}
.item .art img{width:100%;height:100%;object-fit:cover;object-position:center;
  filter:none;transition:transform .6s ease}
.item:hover .art img{filter:none;transform:scale(1.04)}

/* pagina do PRODUTO: foto em branco, inteira, sem corte.
   Escopado no #prod-modal para nao afetar a foto dos integrantes. */
#prod-modal .modal-photo{background:#fff;display:flex;align-items:center;justify-content:center;
  padding:0;min-height:auto}
#prod-modal .modal-photo img{width:100%;height:100%;object-fit:contain;object-position:center;
  filter:none;padding:0;background:#fff}
.pgal{bottom:12px}
.pgal .pg img{object-fit:contain;background:#fff}

/* ---------- FICHA DO INTEGRANTE ----------
   A foto flutua a esquerda no tamanho natural e o texto corre ao lado dela;
   quando a bio passa da altura da foto, o texto segue usando a largura toda.
   NAO usar min-height/height em % aqui: isso cria dependencia circular de
   altura com o overflow do .modal-box e faz a janela tremer no hover. */
#member-modal .modal-grid{display:block}
#member-modal .modal-body{padding:clamp(24px,3vw,40px)}
#member-modal .modal-photo{float:left;width:clamp(210px,34%,330px);
  margin:4px clamp(20px,2.4vw,30px) 16px 0;background:#070a0f;overflow:hidden;
  min-height:0;padding:0;box-shadow:0 18px 44px rgba(0,0,0,.6)}
#member-modal .modal-photo img{display:block;width:100%;height:auto;
  filter:contrast(1.10) brightness(.96)}
#member-modal .bio-text p:first-child{margin-top:2px}
#member-modal .facts{clear:none}
/* a barra de rolagem nao pode alterar a largura do conteudo (causa tremor) */
.modal-box{scrollbar-gutter:stable}
/* no celular a foto ocupa a largura toda e o texto vem abaixo */
@media(max-width:620px){
  #member-modal .modal-photo{float:none;width:100%;margin:0 0 20px}
  #member-modal .modal-photo img{max-height:56vh;object-fit:cover;width:100%}
}

/* ============================================================
   THE TRAVELER — agradecimento apos o pedido
   4 poses do mesmo desenho, dissolvidas uma na outra.
   O fundo preto das imagens some sozinho com mix-blend-mode:screen.
   ============================================================ */
#thx{
  position:fixed; inset:0; z-index:10000;
  display:none; align-items:center; justify-content:center;
  background:radial-gradient(ellipse 70% 60% at 50% 48%, rgba(6,9,14,.90) 0%, rgba(2,3,5,.97) 70%);
  opacity:0; transition:opacity .5s ease;
  cursor:pointer;
}
#thx.on{ display:flex; opacity:1; }

.thx-stage{
  position:relative;
  width:min(430px,74vw);
  height:min(600px,66vh);
  display:flex; align-items:center; justify-content:center;
}
.thx-halo{
  position:absolute; inset:0; margin:auto;
  width:72%; height:56%; border-radius:50%;
  background:radial-gradient(circle, rgba(127,220,255,.20) 0%, rgba(47,159,214,.07) 45%, transparent 70%);
  filter:blur(32px); opacity:0; pointer-events:none;
}
.thx-env{                       /* chega do fundo da tela e volta pro fundo */
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  opacity:0; will-change:transform,opacity,filter;
}
.thx-float{ position:relative; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center; will-change:transform; }
.thx-sway { position:relative; width:100%; height:100%; will-change:transform; }

.thx-f{
  position:absolute; inset:0; margin:auto;
  width:100%; height:100%; object-fit:contain;
  mix-blend-mode:screen;        /* preto puro = zero, some sozinho */
  opacity:0; will-change:opacity;
}

.thx-txt{
  position:absolute; left:50%; bottom:-4%;
  transform:translateX(-50%);
  text-align:center; width:min(560px,88vw);
  opacity:0; pointer-events:none;
}
.thx-txt h4{
  font-family:var(--f-display); font-size:clamp(22px,3.6vw,34px);
  letter-spacing:.30em; color:var(--bone);
  text-shadow:0 0 26px rgba(127,220,255,.42);
  margin:0 0 10px;
}
.thx-txt p{
  font-family:var(--f-ui); font-size:clamp(12px,1.5vw,14px);
  letter-spacing:.05em; color:var(--bone-dim); margin:0; line-height:1.6;
}

/* ---------- linha do tempo (4,6s) ---------- */
#thx.on .thx-halo{ animation:thxHalo 4600ms linear 1 both; }
#thx.on .thx-env { animation:thxEnv  4600ms linear 1 both; }
#thx.on .thx-txt { animation:thxTxt  4600ms linear 1 both; }
#thx.on .thx-float{ animation:thxBreathe 3.4s ease-in-out infinite; }
#thx.on .thx-sway { animation:thxSway    6.1s ease-in-out infinite; }
#thx.on .thx-f1  { animation:thxF1 4600ms linear 1 both; }
#thx.on .thx-f2  { animation:thxF2 4600ms linear 1 both; }
#thx.on .thx-f3  { animation:thxF3 4600ms linear 1 both; }
#thx.on .thx-f4  { animation:thxF4 4600ms linear 1 both; }

@keyframes thxEnv{
  0%  { transform:scale(.66) translateY(80px);  filter:blur(28px); opacity:0;
        animation-timing-function:cubic-bezier(.16,1,.3,1); }   /* chega rapido, freia macio */
  24% { transform:scale(1)    translateY(0);    filter:blur(0);   opacity:1;
        animation-timing-function:linear; }
  76% { transform:scale(1)    translateY(0);    filter:blur(0);   opacity:1;
        animation-timing-function:cubic-bezier(.7,0,.84,0); }    /* sai acelerando */
  100%{ transform:scale(.56) translateY(-90px); filter:blur(26px); opacity:0; }
}
@keyframes thxHalo{
  0%{opacity:0;transform:scale(.7)} 24%{opacity:.85;transform:scale(1)}
  76%{opacity:.85;transform:scale(1)} 100%{opacity:0;transform:scale(.6)}
}
@keyframes thxTxt{
  0%{opacity:0;transform:translateX(-50%) translateY(14px)}
  30%{opacity:0;transform:translateX(-50%) translateY(14px)}
  42%{opacity:1;transform:translateX(-50%) translateY(0)}
  74%{opacity:1;transform:translateX(-50%) translateY(0)}
  100%{opacity:0;transform:translateX(-50%) translateY(-10px)}
}
/* respiracao e balanco: ciclos de duracao diferente pra nunca sincronizar */
@keyframes thxBreathe{ 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-11px) scale(1.014)} }
@keyframes thxSway   { 0%,100%{transform:rotate(-.9deg) translateX(-4px)} 50%{transform:rotate(.9deg) translateX(4px)} }

/* cada pose dissolve na proxima — nunca corta seco */
@keyframes thxF1{ 0%{opacity:0} 12%{opacity:1} 24%{opacity:1} 34%{opacity:0} 100%{opacity:0} }
@keyframes thxF2{ 0%{opacity:0} 24%{opacity:0} 34%{opacity:1} 54%{opacity:1} 64%{opacity:0} 100%{opacity:0} }
@keyframes thxF3{ 0%{opacity:0} 54%{opacity:0} 64%{opacity:1} 69%{opacity:1} 78%{opacity:0} 100%{opacity:0} }
@keyframes thxF4{ 0%{opacity:0} 69%{opacity:0} 78%{opacity:1} 100%{opacity:1} }

@media(max-width:620px){ .thx-stage{ width:82vw; height:58vh; } .thx-txt{ bottom:-8%; } }

/* quem pediu menos animacao no sistema ve so um aparecer suave */
@media(prefers-reduced-motion:reduce){
  #thx.on .thx-env{ animation:none; opacity:1; transform:none; filter:none; }
  #thx.on .thx-float,#thx.on .thx-sway{ animation:none; }
  #thx.on .thx-f1,#thx.on .thx-f3,#thx.on .thx-f4{ animation:none; opacity:0; }
  #thx.on .thx-f2{ animation:none; opacity:1; }
  #thx.on .thx-halo{ animation:none; opacity:.85; }
  #thx.on .thx-txt { animation:none; opacity:1; transform:translateX(-50%); }
}

/* ============================================================
   LOJA NO CELULAR — sempre 2 colunas
   Antes ficava 1 coluna, o que deixava a secao com ~9000px de
   altura e quebrava a revelacao ao rolar (ver initScroll).
   ============================================================ */
@media(max-width:560px){
  .merch{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .item{ clip-path:polygon(0 0,calc(100% - 13px) 0,100% 13px,100% 100%,13px 100%,0 calc(100% - 13px)); }
  .item .body{ padding:13px 10px 16px; }
  .item .body h3{ font-size:16px; line-height:1.25; }
  .item .body .artname{ font-size:10.5px; letter-spacing:.08em; }
  .item .body .price{ font-size:11px; margin-top:6px; }
  .item .body .btn{ margin-top:11px; font-size:10.5px; padding:9px 6px; letter-spacing:.08em; }
  .item .soon{ top:7px; right:7px; font-size:8px; padding:4px 6px; }
  .cat-title{ font-size:20px; }
}
/* telas bem estreitas continuam com 2 colunas, so mais compactas */
@media(max-width:380px){
  .merch{ gap:9px; }
  .item .body{ padding:11px 7px 13px; }
  .item .body h3{ font-size:14px; }
  .item .body .btn{ font-size:9.5px; padding:8px 4px; }
}

/* no toque nao existe hover: o card nao pode depender dele pra nada */
@media(hover:none){
  .item:hover{ transform:none; box-shadow:none; }
  .item:active{ border-color:var(--line-hot); transform:scale(.985); }
}