/* ============================================================
   PERFORZ — BASE
   Compartilhado por TODAS as páginas.
   Aqui ficam: cores da marca, fontes, header/menu, rodapé e cursor.
   >>> Para trocar a cor da marca, mude --blue logo abaixo. <<<
   ============================================================ */
:root{
  --blue:#1c1bc8;
  --black:#0A0A0A;
  --white:#FFFFFF;
  --g1:#F2F2F2;
  --g2:#9A9A9A;
  --g3:#161616;

  --font-d:'Anton','Archivo',sans-serif;
  --font-b:'Archivo',sans-serif;
  --font-m:'Space Mono',monospace;

  --exp:cubic-bezier(0.16,1,0.3,1);
  --pow:cubic-bezier(0.77,0,0.175,1);

  --pad:clamp(1.1rem,5vw,6rem);
  --safe-b:env(safe-area-inset-bottom,0px);

  /* tema dinâmico — base BRANCA (atualizado no scroll) */
  --bg:#FFFFFF;
  --fg:#0A0A0A;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-webkit-tap-highlight-color:transparent;}
html.lenis,html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto!important;}
.lenis.lenis-stopped{overflow:hidden;}

body{
  font-family:var(--font-b);
  background:var(--white);
  color:var(--black);
  overflow-x:hidden;
}
@media (pointer:fine){body.cc{cursor:none;}}

a{color:inherit;text-decoration:none;}
button{font-family:inherit;border:none;background:none;color:inherit;cursor:pointer;}
img{display:block;max-width:100%;}
section{position:relative;}
::selection{background:var(--blue);color:#fff;}
html{scroll-behavior:smooth;}

/* LOGO PERFORZ — wordmark recolorível via mask (branco em fundo escuro, azul em fundo claro)
   Usa logo-white.png (tipografia branca, fundo removido) como máscara. */
.logo-mark{
  display:inline-block;
  -webkit-mask:url('../img/logo-white.png') no-repeat center/contain;
          mask:url('../img/logo-white.png') no-repeat center/contain;
  background-color:#fff;                 /* branco por padrão (fundo escuro) */
  transition:background-color .5s var(--exp);
}
.on-light .logo-mark{background-color:var(--blue);}   /* azul em seções claras */
.logo-mark.blue{background-color:var(--blue);}
.logo-img{filter:brightness(0) invert(1);}            /* fallback p/ <img> legado */

/* utilidades */
.label{font-family:var(--font-m);font-size:clamp(.6rem,.78vw,.74rem);letter-spacing:.26em;text-transform:uppercase;}
.kinetic{will-change:transform;transform-origin:center top;}
.mask{overflow:hidden;display:block;}
.blue{color:var(--blue);}

/* ============================================================
   HEADER / NAVBAR
   ============================================================ */
/* ============================================================
   HEADER conceitual
   ============================================================ */
header{position:fixed;top:0;left:0;width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:clamp(.9rem,2vw,1.4rem) var(--pad);transition:padding .5s var(--exp);
  padding-top:max(clamp(.9rem,2vw,1.4rem),env(safe-area-inset-top));
  /* LIQUID GLASS — vidro fosco claro com brilho especular */
  background:linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.5));
  -webkit-backdrop-filter:blur(20px) saturate(180%);
          backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 10px 30px -12px rgba(10,10,10,.18);}
header .hd-progress{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--blue);will-change:width;}
header .logo{display:flex;align-items:center;height:30px;}
header .logo img{height:26px;width:auto;}
header .logo .logo-mark{height:23px;aspect-ratio:926/119;background-color:var(--blue);}  /* logo sempre azul no header de vidro */
header .logo .wm{font-family:var(--font-d);font-size:1.4rem;letter-spacing:.12em;display:none;color:var(--black);}
header{z-index:1000;}

/* NAVBAR — links elegantes à direita */
.nav-links{display:flex;align-items:center;gap:clamp(1.1rem,2.2vw,2.3rem);}
.nav-links a{position:relative;font-family:var(--font-m);font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--black);padding:.35em 0;transition:color .35s var(--exp);}
.nav-links a::after{content:'';position:absolute;left:0;bottom:0;height:1.5px;width:0;background:var(--blue);transition:width .4s var(--exp);}
.nav-links a:hover{color:var(--blue);}
.nav-links a:hover::after{width:100%;}

/* grupo com submenu (dropdown liquid glass) */
.nav-group{position:relative;}
.nav-trigger{font-family:var(--font-m);font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--black);padding:.35em 0;cursor:pointer;display:inline-flex;align-items:center;gap:.45em;transition:color .35s var(--exp);}
.nav-trigger .caret{font-size:.7em;color:var(--blue);transition:transform .35s var(--exp);}
.nav-group:hover .nav-trigger,.nav-group:focus-within .nav-trigger{color:var(--blue);}
.nav-group:hover .nav-trigger .caret,.nav-group:focus-within .nav-trigger .caret{transform:rotate(180deg);}
.nav-drop{position:absolute;top:100%;right:0;padding:.7rem .95rem;display:flex;flex-direction:column;gap:.15rem;min-width:200px;
  background:linear-gradient(160deg,rgba(255,255,255,.82),rgba(242,242,242,.6));
  -webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);
  border:1px solid rgba(255,255,255,.6);border-radius:14px;box-shadow:0 20px 44px -18px rgba(10,10,10,.28),inset 0 1px 0 rgba(255,255,255,.7);
  opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .32s var(--exp),transform .32s var(--exp),visibility .32s;}
.nav-group:hover .nav-drop,.nav-group:focus-within .nav-drop{opacity:1;visibility:visible;transform:translateY(0);}
.nav-drop a{position:relative;font-family:var(--font-m);font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--black);padding:.5em .25em;white-space:nowrap;transition:color .3s,padding-left .3s var(--exp);}
.nav-drop a:hover{color:var(--blue);padding-left:.7em;}
/* estado "página atual" (aplicado pelo partials/header.php) */
.nav-links a.active{color:var(--blue);}
.nav-links a.active::after{width:100%;}
.nav-trigger.active{color:var(--blue);}
.nav-drop a.active{color:var(--blue);}

@keyframes pulse{0%,100%{transform:scale(.6);opacity:.45;}50%{transform:scale(1.25);opacity:1;}}
.menu-btn{display:none;flex-direction:column;gap:6px;width:40px;height:40px;align-items:flex-end;justify-content:center;}
.menu-btn span{display:block;height:2px;background:var(--black);transition:width .4s var(--exp),transform .4s var(--exp),opacity .3s,background .3s;}
.menu-btn span:nth-child(1){width:28px;}
.menu-btn span:nth-child(2){width:20px;}
.menu-btn.open span:nth-child(1){width:28px;transform:translateY(8px) rotate(45deg);}
.menu-btn.open span:nth-child(2){width:28px;opacity:0;}
.menu-btn.open span:nth-child(3){width:28px;transform:translateY(-8px) rotate(-45deg);}

@media (max-width:900px){
  .nav-links{display:none;}
  .menu-btn{display:flex;}
}

/* MENU fullscreen — LIQUID GLASS claro */
#menu{position:fixed;inset:0;z-index:998;display:flex;flex-direction:column;justify-content:center;
  padding:var(--pad);padding-bottom:max(var(--pad),var(--safe-b));clip-path:inset(0 0 100% 0);pointer-events:none;
  background:linear-gradient(160deg, rgba(255,255,255,.66), rgba(242,242,242,.5));
  -webkit-backdrop-filter:blur(34px) saturate(180%);
          backdrop-filter:blur(34px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);}
#menu.open{pointer-events:auto;}
#menu .m-item{display:flex;align-items:baseline;gap:1rem;padding:.06em 0;overflow:hidden;}
#menu .m-item a{position:relative;font-family:var(--font-d);font-size:clamp(1.7rem,6vw,3.4rem);text-transform:uppercase;line-height:1.06;letter-spacing:.01em;white-space:nowrap;color:var(--black);transition:color .35s var(--exp),transform .5s var(--exp),letter-spacing .4s var(--exp);display:block;}
#menu .m-item .midx{font-family:var(--font-m);font-size:.72rem;letter-spacing:.1em;color:var(--blue);opacity:.6;transition:opacity .3s;}
#menu .m-item a::after{content:'';position:absolute;left:0;bottom:.06em;height:2px;width:0;background:var(--blue);transition:width .45s var(--exp);}
#menu .m-item:active a,#menu .m-item a:hover{color:var(--blue);transform:translateX(1.4vw);letter-spacing:.03em;}
#menu .m-item a:hover::after{width:100%;}
#menu .m-item:hover .midx{opacity:1;}
#menu .m-sub{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;padding:.4rem 0 .9rem 2.6rem;margin-top:-.2rem;}
#menu .m-sub a{font-family:var(--font-m);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--g2);transition:color .3s,transform .4s var(--exp);}
#menu .m-sub a:hover{color:var(--blue);transform:translateX(.6vw);}
#menu .m-foot{position:absolute;bottom:max(2rem,var(--safe-b));left:var(--pad);right:var(--pad);display:flex;justify-content:space-between;color:var(--g3);flex-wrap:wrap;gap:.6rem;}
/* abertura do menu — transição em CSS (igual em todas as páginas) */
#menu{transition:clip-path .6s var(--exp);}
#menu.open{clip-path:inset(0 0 0% 0);}
#menu .m-sub a.active{color:var(--blue);}

/* ============================================================
   FOOTER
   ============================================================ */
/* ============================================================
   FOOTER monumento
   ============================================================ */
footer{background:var(--white);color:var(--black);padding:clamp(3rem,7vh,5rem) var(--pad) 0;overflow:hidden;}
footer .ft-top{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:2rem;padding-bottom:clamp(3rem,7vh,5rem);border-bottom:1px solid rgba(10,10,10,.14);}
footer .ft-brand img{height:30px;margin-bottom:1.2rem;}
footer .ft-logo{height:28px;aspect-ratio:926/119;margin-bottom:1.4rem;}
footer .ft-brand p{max-width:30ch;color:var(--g2);line-height:1.6;font-size:.95rem;}
footer .ft-col h4{font-family:var(--font-m);font-size:.7rem;letter-spacing:.2em;color:var(--g2);margin-bottom:1rem;text-transform:uppercase;}
footer .ft-col a{display:block;padding:.5rem 0;font-size:1rem;position:relative;width:fit-content;min-height:40px;}
footer .ft-col a::after{content:"";position:absolute;left:0;bottom:.3rem;height:1px;width:0;background:var(--blue);transition:width .4s var(--exp);}
footer .ft-col a:hover,footer .ft-col a:active{color:var(--blue);}
footer .ft-col a:hover::after{width:100%;}
footer .ft-meta{display:flex;justify-content:space-between;align-items:center;padding:1.4rem 0;flex-wrap:wrap;gap:.8rem;}
footer .ft-meta .label{color:var(--g2);}
footer .ft-meta #clock2{color:var(--blue);}
footer .ft-mon{font-family:var(--font-d);font-size:23vw;line-height:.74;text-transform:uppercase;text-align:center;letter-spacing:-.02em;white-space:nowrap;margin-bottom:-.06em;display:flex;justify-content:center;}
footer .ft-mon .ch{display:inline-block;will-change:transform,opacity;}
footer .ft-mon .o{color:var(--blue);}

@media (max-width:1024px){
  .nm-grid{grid-template-columns:repeat(2,1fr);}
  footer .ft-top{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  .nm-grid{grid-template-columns:1fr;}
  footer .ft-top{grid-template-columns:1fr;}
  header .hd-idx .lbl{display:none;}
}

/* ============================================================
   CURSOR
   ============================================================ */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;z-index:10000;pointer-events:none;border-radius:50%;mix-blend-mode:difference;will-change:transform;display:flex;align-items:center;justify-content:center;}
.cursor-dot{width:7px;height:7px;background:#fff;transform:translate(-50%,-50%);}
.cursor-ring{width:40px;height:40px;border:1px solid #fff;transform:translate(-50%,-50%);transition:width .3s var(--exp),height .3s var(--exp),background .3s;}
.cursor-ring.hover{width:72px;height:72px;background:rgba(28,27,200,.25);border-color:var(--blue);}
.cursor-ring.view::after{content:"GO";font-family:var(--font-m);font-size:.6rem;letter-spacing:.12em;color:#fff;}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.05ms!important;}
  #preloader,.pl-curtain{display:none!important;}
  #grid-canvas{display:none;}
  .kinetic{transform:none!important;}
}