/* DARE · sistema visual do site (06/11/2026) · direcao de arte "Pista lotada"
   Tirado do manual de marca Yano (mar/2025): grafite, ardosia, dourado, setas >>>>, trama de pontos, estampas e concreto.
   Titulos em Anton, destaque em MAGZ (so palavra SEM acento: a fonte nao tem acento nem til), texto em Open Sans.

   COMPONENTES REUTILIZAVEIS (nome da classe: para que serve)
   Cores (variaveis): --d-bg #24282A grafite · --d-bg2 #333E47 ardosia · --d-bg3 #46545D · --d-gold #FFC501 acento · --d-or #FF5C39 e --d-li #E2E935 so em selo/dado
     · --d-w #F0EEE8 · --d-con #D0D0CE · --d-grey #707B7C · --d-ink #1B1E20 (texto sobre dourado/papel) · --d-w80/--d-w60 textos secundarios sobre escuro
   body.d ............ pagina nova: fundo grafite com trama de pontos. Todo titulo/texto claro por padrao.
   .d-wrap ........... coluna central (max 1320px) com respiro lateral. .d-sec = secao com respiro vertical.
   .d-h1 .d-h2 .d-h3 . titulos Anton em caixa alta; <em> dentro vira dourado.
   .d-k .............. etiqueta de secao com setas; .d-k.mg usa MAGZ (so se o texto nao tiver acento).
   .d-lead ........... paragrafo de abertura. 
   .d-btn + .d-btn-g (dourado) | .d-btn-o (ardosia) | .d-btn-k (grafite com texto dourado, para fundo dourado); .d-row agrupa botoes; .d-link link sublinhado dourado.
   .chev ............. faixa de setas >>>> (cor = currentColor, 16px de altura). Defina largura/altura se precisar.
   .dots ............. trama de pontos clara (fundo escuro). .paper = fundo off-white com trama de pontos escura (texto grafite).
   .concrete ......... soma a textura de concreto (assets/marca/concreto.webp) por cima; combine com .paper.
   .plate ............ card com canto dourado e chanfro (fundo ardosia; troque o background). Nao use border/box-shadow nele (o clip-path corta).
   .faq (details) .... perguntas em placas ardosia com borda dourada.
   .d-gold-sec ....... marca uma secao de fundo dourado (so ajusta o foco dos botoes).
   .estampa .......... caixa absoluta para estampa oficial: background:url(/assets/marca/estampa-0X.svg). Disponiveis: 01 grafite, 02 dourada, 04 ardosia, 06 cinzas.
   .rv (+data-d=1..3)  revelar ao rolar (site.js). .d-nav / .d-foot: menu e rodape (vem de scripts/partes).
   Assets: public/assets/marca/ (atleta-a-m|d.webp, atleta-b-m|d.webp recortes sem logo de outra marca; concreto.webp; grunge.webp; estampas SVG).
   D outline: /logo/icone_amarelo_fundo_claro.png (amarelo) e /logo/icone_branco_fundo_escuro.png (branco) = originais do kit.
   Foto e video: quadro inteiro (object-fit:contain), nunca cover. Movimento: so transform e opacity, desliga em prefers-reduced-motion.
   Classes com prefixo d- para nao colidir com o CSS antigo das paginas que so trocaram menu e rodape. */
@font-face{font-family:'Anton';src:url('/fonts/anton/anton-latin.woff2') format('woff2'),url('/fonts/anton/anton-regular.ttf') format('truetype');font-display:swap;}
@font-face{font-family:'OpenSans';src:url('/fonts/open_sans/opensans-latin.woff2') format('woff2'),url('/fonts/open_sans/opensans-variablefont_wdth,wght.ttf') format('truetype');font-weight:100 900;font-display:swap;}
@font-face{font-family:'MAGZ';src:url('/fonts/magz/magz.otf') format('opentype');font-display:swap;}
:root{
  --d-bg:#24282A;--d-bg2:#333E47;--d-bg3:#46545D;--d-gold:#FFC501;--d-gold2:#FFD23F;--d-ink:#1B1E20;
  --d-or:#FF5C39;--d-li:#E2E935;--d-grey:#707B7C;--d-con:#D0D0CE;
  --d-w:#F0EEE8;--d-w80:#DDDCD7;--d-w60:#BEC3C2;--d-w40:#98A1A2;
  --d-line:rgba(240,238,232,.14);--d-line2:rgba(240,238,232,.26);
  --d-h:'Anton','Bebas Neue',Impact,sans-serif;--d-b:'OpenSans','Open Sans',system-ui,sans-serif;--d-m:'MAGZ','Anton',Impact,sans-serif;
  --d-pad:clamp(1.25rem,5vw,5.5rem);--d-max:1320px;--d-ease:cubic-bezier(.22,1,.36,1);
  /* seta >>>> do manual: um chevron grosso que repete */
  --d-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2.5l10 9.5-10 9.5' fill='none' stroke='%23000' stroke-width='4.2' stroke-linecap='butt' stroke-linejoin='miter'/%3E%3C/svg%3E");
  /* trama de pontos (halftone) */
  --d-dots:radial-gradient(circle at center,rgba(240,238,232,.16) 0 1.1px,transparent 1.5px);
  --d-dots-k:radial-gradient(circle at center,rgba(27,30,32,.2) 0 1.1px,transparent 1.5px);
}

/* ---------- base (so nas paginas novas, que marcam <body class="d">) ---------- */
body.d{margin:0;background-color:var(--d-bg);background-image:var(--d-dots);background-size:11px 11px;color:var(--d-w);font-family:var(--d-b);font-size:1.05rem;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
body.d *,body.d *::before,body.d *::after{box-sizing:border-box;}
:where(body.d) :where(h1,h2,h3,p,ul,ol,figure,blockquote){margin:0;padding:0;}
:where(body.d) a{color:inherit;text-decoration:none;}
body.d img,body.d video{display:block;max-width:100%;}
body.d ::selection{background:var(--d-gold);color:var(--d-ink);}
html{scroll-behavior:smooth;scroll-padding-top:84px;}
.d-wrap{max-width:var(--d-max);margin:0 auto;padding:0 var(--d-pad);position:relative;}
.d-sec{padding:clamp(4.5rem,10vw,8.5rem) 0;position:relative;}
.d-h1,.d-h2,.d-h3{font-family:var(--d-h);font-weight:400;text-transform:uppercase;letter-spacing:.005em;}
.d-h1{font-size:clamp(3.1rem,8.2vw,8.4rem);line-height:.92;}
@media(max-width:560px){.d-h1{line-height:.98;}.d-h2{line-height:.98;}}
.d-h2{font-size:clamp(2.5rem,6.2vw,5.8rem);line-height:.92;}
.d-h3{font-size:clamp(1.55rem,2.4vw,2.2rem);line-height:1;}
.d-h1 em,.d-h2 em,.d-h3 em{font-style:normal;color:var(--d-gold);}
.d-k{display:inline-flex;align-items:center;gap:.7rem;font-size:.78rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--d-gold);margin-bottom:1.3rem;}
.d-k::before{content:'';width:28px;height:14px;background:currentColor;-webkit-mask:var(--d-chev) 0 50%/14px 14px repeat-x;mask:var(--d-chev) 0 50%/14px 14px repeat-x;flex:0 0 auto;}
.d-k.mg{font:400 .98rem/1 var(--d-m);letter-spacing:.06em;text-transform:none;}
.d-lead{font-size:clamp(1.1rem,1.55vw,1.4rem);line-height:1.6;color:var(--d-w80);max-width:52ch;}
.d-lead b{color:var(--d-w);font-weight:700;}

/* ---------- grafismos reutilizaveis ---------- */
.chev{display:block;height:16px;background:currentColor;-webkit-mask:var(--d-chev) 0 50%/16px 16px repeat-x;mask:var(--d-chev) 0 50%/16px 16px repeat-x;}
.dots{background-image:var(--d-dots);background-size:11px 11px;}
.paper{background-color:var(--d-w);color:var(--d-ink);background-image:var(--d-dots-k);background-size:11px 11px;}
.paper .d-k{color:#6B5000;}
.paper .d-lead{color:rgba(27,30,32,.84);}.paper .d-lead b{color:var(--d-ink);}
.concrete{position:relative;isolation:isolate;}
.concrete::before{content:'';position:absolute;inset:0;z-index:-1;background:url('/assets/marca/concreto.webp') center/cover;opacity:.5;mix-blend-mode:multiply;pointer-events:none;}
.estampa{position:absolute;pointer-events:none;background:no-repeat center/contain;}
/* placa: card com o canto dourado do manual e o chanfro na ponta oposta */
.plate{position:relative;background:var(--d-bg2);clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%);}
.plate::before{content:'';position:absolute;left:0;top:0;width:30px;height:30px;background:var(--d-gold);clip-path:polygon(0 0,100% 0,0 100%);}

/* ---------- botoes ---------- */
.d-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.7rem;min-height:56px;padding:1rem 2.1rem 1rem 2.3rem;border:0;font:800 .86rem/1 var(--d-b);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:transform .2s var(--d-ease),background .2s,color .2s;white-space:nowrap;clip-path:polygon(14px 0,100% 0,calc(100% - 14px) 100%,0 100%);}
.d-btn::after{content:'';width:22px;height:14px;background:currentColor;-webkit-mask:var(--d-chev) 0 50%/11px 14px repeat-x;mask:var(--d-chev) 0 50%/11px 14px repeat-x;flex:0 0 auto;transition:transform .25s var(--d-ease);}
.d-btn:hover::after{transform:translateX(5px);}
.d-btn-g{background:var(--d-gold);color:var(--d-ink);}
.d-btn-g:hover{background:#FFD23F;}
.d-btn-o{background:var(--d-bg3);color:var(--d-w);}
.d-btn-o:hover{background:var(--d-w);color:var(--d-ink);}
.d-btn-k{background:var(--d-ink);color:var(--d-gold);}
.d-btn-k:hover{background:#000;transform:translateY(-2px);}
.d-row{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center;}
.d-link{font-weight:800;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--d-gold);border-bottom:2px solid currentColor;padding-bottom:.2rem;}
body.d a:focus-visible,body.d button:focus-visible,body.d summary:focus-visible{outline:3px solid var(--d-gold);outline-offset:3px;}
.d-btn:focus-visible{clip-path:none;outline:3px solid var(--d-gold);outline-offset:3px;}
.paper .d-btn:focus-visible,.d-gold-sec .d-btn:focus-visible{outline-color:var(--d-ink);}
@media(max-width:560px){.d-row .d-btn{width:100%;}}

/* ---------- menu ---------- */
.d-nav{position:fixed;inset:0 0 auto;z-index:500;display:flex;align-items:center;justify-content:space-between;gap:1.2rem;padding:.9rem var(--d-pad);transition:background .3s,border-color .3s;border-bottom:3px solid transparent;font-family:var(--d-b);}
body:not(.d) .d-nav,.d-nav.solid,.d-nav.open{background:rgba(36,40,42,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--d-gold);}
.d-nav a{text-decoration:none;}
.d-nav-logo img{height:34px;width:auto;display:block;}
.d-nav-links{display:flex;gap:1.7rem;list-style:none;margin:0;padding:0;}
.d-nav-links a{font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--d-w80);transition:color .2s;white-space:nowrap;text-decoration:none;}
.d-nav-links a:hover,.d-nav-links a.on{color:var(--d-gold);}
.d-nav-links a.on{box-shadow:0 3px 0 var(--d-gold);}
.d-nav-act{display:flex;align-items:center;gap:.7rem;}
.d-nav-act .d-btn{min-height:44px;padding:.75rem 1.5rem .75rem 1.6rem;font-size:.72rem;}
.d-lang{display:inline-flex;gap:.2rem;align-items:center;font:700 .74rem/1 var(--d-b);letter-spacing:.12em;color:var(--d-w60);}
.d-lang button{background:none;border:0;padding:.75rem .35rem;font:inherit;color:inherit;cursor:pointer;}
.d-lang button.on{color:var(--d-gold);}
.d-burger{display:none;width:46px;height:46px;border-radius:0;border:1.5px solid var(--d-line2);background:transparent;color:var(--d-w);cursor:pointer;align-items:center;justify-content:center;}
.d-burger span,.d-burger span::before,.d-burger span::after{display:block;width:18px;height:2px;background:currentColor;position:relative;transition:transform .25s;}
.d-burger span::before,.d-burger span::after{content:'';position:absolute;left:0;}
.d-burger span::before{top:-6px;}.d-burger span::after{top:6px;}
.d-nav.open .d-burger span{background:transparent;}
.d-nav.open .d-burger span::before{transform:translateY(6px) rotate(45deg);}
.d-nav.open .d-burger span::after{transform:translateY(-6px) rotate(-45deg);}
@media(max-width:1180px){.d-nav-links{gap:1.1rem;}.d-nav-links a{font-size:.68rem;letter-spacing:.1em;}}
@media(max-width:1020px){
  .d-burger{display:inline-flex;}
  .d-nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:rgba(36,40,42,.98);border-bottom:3px solid var(--d-gold);padding:.5rem var(--d-pad) 1.4rem;}
  .d-nav.open .d-nav-links{display:flex;}
  .d-nav-links a{display:block;padding:1rem 0;font-size:.95rem;border-bottom:1px solid var(--d-line);}
  .d-nav-links a.on{box-shadow:none;color:var(--d-gold);}
}
@media(max-width:560px){.d-nav{padding:.75rem 1rem;gap:.6rem;}.d-nav a{text-decoration:none;}
.d-nav-logo img{height:28px;}.d-nav-act .d-btn{padding:.65rem 1rem;font-size:.64rem;letter-spacing:.06em;}.d-nav-act .d-btn::after{display:none;}.d-lang button.on,.d-lang i{display:none;}}

/* ---------- rodape ---------- */
.d-foot{position:relative;background:var(--d-bg);background-image:var(--d-dots);background-size:11px 11px;padding:clamp(3.4rem,6vw,4.8rem) 0 2.2rem;font-family:var(--d-b);color:var(--d-w);}
.d-foot::before{content:'';position:absolute;left:0;right:0;top:0;height:18px;background:var(--d-gold);-webkit-mask:var(--d-chev) 0 50%/18px 18px repeat-x;mask:var(--d-chev) 0 50%/18px 18px repeat-x;}
.d-foot-grid{display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:2.4rem;}
.d-foot-brand img{height:32px;width:auto;margin-bottom:1.1rem;}
.d-foot-brand p{color:var(--d-w80);font-size:.95rem;max-width:30ch;line-height:1.6;margin:0;}
.d-foot h4{font:800 .72rem/1 var(--d-b);letter-spacing:.2em;text-transform:uppercase;color:var(--d-gold);margin:0 0 1.1rem;}
.d-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.15rem;}
.d-foot ul a{display:inline-block;padding:.6rem 0;color:var(--d-w80);font-size:.95rem;text-decoration:none;}
.d-foot ul a:hover{color:var(--d-gold);}
.d-foot a{color:inherit;text-decoration:none;}
.d-foot-base a:hover{color:var(--d-gold);}
.d-foot-base{margin-top:2.8rem;padding-top:1.5rem;border-top:1px solid var(--d-line2);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:var(--d-w60);font-size:.88rem;}
.d-foot-base a{display:inline-block;padding:.7rem 0;}
@media(max-width:900px){.d-foot-grid{grid-template-columns:1fr 1fr;}.d-foot-brand{grid-column:1/-1;}}

/* ---------- faq (paginas novas) ---------- */
.faq{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem clamp(1rem,2.4vw,2rem);align-items:start;}
.faq details{background:var(--d-bg2);border-left:5px solid var(--d-gold);transition:background .2s;}
.faq details[open]{background:var(--d-bg3);}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.15rem 1.4rem;font:400 clamp(1.2rem,1.7vw,1.5rem)/1.1 var(--d-h);text-transform:uppercase;min-height:64px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:'';flex:0 0 22px;height:22px;background:var(--d-gold);-webkit-mask:var(--d-chev) 50% 50%/22px 22px no-repeat;mask:var(--d-chev) 50% 50%/22px 22px no-repeat;transform:rotate(90deg);transition:transform .25s var(--d-ease);}
.faq details[open] summary::after{transform:rotate(-90deg);}
.faq details p{padding:0 1.4rem 1.4rem;color:var(--d-w80);max-width:52ch;}
@media(max-width:860px){.faq{grid-template-columns:1fr;}}

/* ---------- textura so carrega perto da tela: .lz na secao (site.js poe .bg-on) e .lzi nos <i> de estampa ---------- */
.js .lz:not(.bg-on)::before,.js .lz:not(.bg-on) .lzi{background-image:none !important;}

/* ---------- revelar ao rolar ---------- */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--d-ease),transform .8s var(--d-ease);}
.js .rv.on{opacity:1;transform:none;}
.rv[data-d="1"]{transition-delay:.08s;}.rv[data-d="2"]{transition-delay:.16s;}.rv[data-d="3"]{transition-delay:.24s;}
@media(prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none;}html{scroll-behavior:auto;}}