/* ============================================================
   Coreto V3 — sistema tipográfico estilo 032c
   Overrides carregados DEPOIS do <style> inline de cada página.
   Type do sistema: Archivo (eixos de peso + largura).
   Acento: amarelo #fdc800 da logo.  Vibe: editorial, boxy, caps.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,62..125,100..900;1,62..125,100..900&display=swap');

/* ---- acento -> amarelo Coreto ---- */
body[data-theme="dark"]{--accent:#fdc800}
body[data-theme="gray"]{--accent:#fdc800}

/* ---- família em tudo ---- */
body,.nav-links,.subnav-in,.dd-btn,.dd-opt,.btn,button,input,select,textarea,
.meta,.about,.ctv,.prod,.name,.ed,.foot,.lb-btn,.lb-meta{
  font-family:'Archivo',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif !important;
}
body{font-synthesis:none;letter-spacing:.005em}

/* ---- navegação 032c: caixa-alta, apertada, pesada ---- */
.nav-links{font-size:clamp(12px,1.02vw,14px);text-transform:uppercase;letter-spacing:.04em;gap:clamp(14px,1.6vw,26px);align-items:center;flex-wrap:wrap}
.nav-links a{font-size:inherit;white-space:nowrap}
.nav-links a,.nav-dd-btn{font-weight:700 !important;opacity:.5}
.nav-dd-btn{font-size:clamp(12px,1.02vw,14px) !important;text-transform:uppercase;white-space:nowrap}
.nav-links a:hover,.nav-dd-btn:hover{opacity:1;color:var(--accent)}
.nav-links a.active,.nav-dd-btn.active{opacity:1;font-weight:800 !important;color:var(--accent)}
.subnav-in{text-transform:uppercase;letter-spacing:.04em;font-size:clamp(11.5px,.95vw,13px)}
.subnav-in a{font-weight:700;white-space:nowrap}
.subnav-in a:hover{color:var(--accent);opacity:1}
.subnav-in a.active{color:var(--accent);opacity:1}
.nav-caret{color:var(--accent)}

/* ---- cluster direito: Sobre + GIF + cores juntos ---- */
.theme-dots{align-items:center;gap:12px}
.theme-dots .nav-sobre{font-size:clamp(12px,1.02vw,14px);font-weight:700 !important;text-transform:uppercase;letter-spacing:.04em;opacity:.5;white-space:nowrap;color:inherit}
.theme-dots .nav-sobre:hover{opacity:1;color:var(--accent)}
.theme-dots .nav-sobre.active{opacity:1;color:var(--accent)}

/* ---- dropdown do Coreto Rtm: expande embaixo do próprio nome ---- */
.nav-dd{position:relative;display:inline-flex;align-items:center}
.nav-dd.open .nav-caret{transform:rotate(180deg)}
.nav-dd-menu{position:absolute;top:calc(100% + 10px);left:0;z-index:90;min-width:210px;background:var(--bg);border:2px solid var(--ink);box-shadow:7px 7px 0 rgba(0,0,0,.35);display:none}
.nav-dd.open .nav-dd-menu{display:block}
.nav-dd-menu a{display:block;padding:12px 15px;font-family:'Archivo',sans-serif;font-weight:800 !important;text-transform:uppercase;letter-spacing:.04em;font-size:13px;color:var(--ink) !important;opacity:1 !important;border-bottom:1px solid var(--border);white-space:nowrap}
.nav-dd-menu a:last-child{border-bottom:0}
.nav-dd-menu a:hover{background:var(--accent);color:#000 !important}
.nav-dd-menu a.active{color:var(--accent) !important}
.nav-dd-menu a.active:hover{color:#000 !important}

/* ---- wordmark: crossfade em duas camadas (sem sobra) ---- */
.logo-type-box{position:relative;width:clamp(120px,15vw,170px);overflow:hidden}
.logo-type{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:right center;transition:opacity .5s ease}

/* ---- mobile: topo rediagramado ---- */
@media(max-width:640px){
  .topnav{position:sticky;top:0;z-index:60;box-shadow:0 6px 16px rgba(0,0,0,.25)}
  .filters{position:static}
  .topnav-in{flex-wrap:wrap;gap:0;padding:4px 0 8px}
  /* linha 1: logo (esq) + wordmark, e GIF/cores no bloco direito */
  .brand-in.brand-inTop{width:100%;justify-content:flex-start;align-items:center;gap:8px;padding:9px 0 8px;margin:0}
  .brand-in.brand-inTop .logo-mark{height:48px}
  .brand-in.brand-inTop .logo-type-box{height:28px;width:118px}
  .brand-in.brand-inTop .logo-type{object-position:left center}
  /* GIF ON + cores: bloco único, colado, empurrado pra direita */
  .brand-in.brand-inTop .theme-dots{margin-left:auto;width:auto;flex:0 0 auto;flex-wrap:nowrap;justify-content:flex-end;gap:8px}
  /* linha 2: os 4 itens do menu distribuídos igualmente numa linha só */
  .nav-links{order:1;width:100%;flex-wrap:nowrap;justify-content:space-between;gap:6px;margin:6px 0 0;
    font-size:clamp(9px,3vw,13px);letter-spacing:.02em}
  .nav-links a,.nav-dd-btn{font-size:inherit !important;white-space:nowrap;margin:0 !important}
  .nav-links .nav-dd{flex:0 0 auto}
  /* linha 3: GIF numa ponta, cores na outra (direita) */
  .theme-dots{order:2;width:100%;justify-content:space-between;margin:8px 0 0;gap:8px}
  .theme-dots .gif-toggle{margin-right:auto}
}

/* ---- botões / pills viram retângulos 032c ---- */
.dd-btn,.dd-menu,.dd-opt,.card,.prod .buy,.lb-btn,.lb-img,.imgwrap,
.player,.chip,.reel-ph{border-radius:0 !important}
.dd-btn{text-transform:uppercase;letter-spacing:.05em;font-weight:700;border-width:1.5px}
.dd-btn .lbl{color:var(--accent)}
.dd-opt{font-weight:700}
.dd-opt.sel{background:var(--accent);color:#000}
.dd-opt.sel .check{color:#000}
.dd-opt:hover:not(.sel){background:var(--opt-hover)}

/* ---- cards do photobook ---- */
.card{border:1.5px solid var(--ink);box-shadow:6px 6px 0 rgba(0,0,0,.18)}
.card:hover{box-shadow:9px 9px 0 var(--accent);transform:translateY(-2px)}
.yr{border-radius:0;background:var(--ink);color:var(--bg);border:0;text-transform:uppercase;letter-spacing:.06em;font-weight:800}
.meta .who{text-transform:uppercase;letter-spacing:.02em;font-weight:800}
.meta .who .swatch,.meta .sub{border-radius:0}
.meta .sub{text-transform:uppercase;letter-spacing:.05em;font-size:11px}

/* ---- lightbox 032c ---- */
.lb-btn{border-radius:0;text-transform:uppercase;letter-spacing:.05em;font-weight:800;border-color:#fff}
.lb-btn:hover,.lb-btn.primary{background:var(--accent);color:#000;border-color:var(--accent)}

/* ---- shop ---- */
.prod .buy{text-transform:uppercase;letter-spacing:.06em;font-weight:800;border:1.5px solid var(--ink)}
.prod .buy:hover{background:var(--accent);color:#000;border-color:var(--accent)}
.prod .price{font-weight:800;letter-spacing:.01em}

/* ---- coretv ---- */
.player{border-radius:14px}
.snav{border-radius:0}
.snav:hover{background:var(--accent);border-color:var(--accent);color:#000}
.chip.active{border-color:var(--accent)}
.player .ep-badge{border-radius:0;text-transform:uppercase;letter-spacing:.06em;font-weight:800}

/* ---- cartazes ---- */
.cartazes-head h1{text-transform:uppercase;letter-spacing:-.02em;font-weight:900}
.gbtn{border-radius:0}
.gbtn:hover{background:var(--accent);border-color:var(--accent);color:#000}

/* ---- sobre / textos editoriais ---- */
.about p:first-of-type{font-weight:600}
.about h1,.ctv h1{text-transform:uppercase;letter-spacing:-.02em;font-weight:900}

/* ---- rodapé ---- */
.foot h4{color:var(--accent)}
.foot a:hover{text-decoration-color:var(--accent)}

/* ---- seleção de texto amarela ---- */
::selection{background:var(--accent);color:#000}

/* dots de tema quadrados (mais 032c) */
.tdot{border-radius:0}
.tdot.active{box-shadow:0 0 0 2px var(--header),0 0 0 3px var(--accent)}

/* ---- gifs espalhados pelas bordas (old-web) ---- */
/* caixa fixa + contain: padroniza mesmo os gifs de tamanho diferente */
.gifdec{position:fixed;width:118px;height:118px;object-fit:contain;z-index:6;pointer-events:none;image-rendering:auto;filter:drop-shadow(1px 1px 0 rgba(0,0,0,.25))}
@media(max-width:640px){
  .gifdec{width:62px;height:62px}   /* todos aparecem, nas duas colunas */
}
body.gifs-off .gifdec{display:none}

/* ---- botão liga/desliga gifs (ao lado das cores) ---- */
.gif-toggle{font-family:inherit !important;font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:11px;line-height:1;padding:6px 9px;border:1.5px solid var(--ink);background:var(--accent);color:#000;cursor:pointer;white-space:nowrap}
.gif-toggle.off{background:transparent;color:var(--muted);border-color:var(--border)}