/* ==========================================================================
   CGT Berrô Theme — main.css (global)
   Fontes + design tokens (fallback) + base + classes de movimento.
   Portado do protótipo design_handoff. Tokens finais vêm do Customizer
   (css-output.php). Cores usam var(--berro-*).
   ========================================================================== */

/* ── Fontes ─────────────────────────────────────────────────────────────── */
@font-face{font-family:'Gunter';src:url('../fonts/gunter.otf') format('opentype');font-weight:400;font-display:swap;}
@font-face{font-family:'Grotesk';src:url('../fonts/OverusedGrotesk-Book.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Grotesk';src:url('../fonts/OverusedGrotesk-BookItalic.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:'Grotesk';src:url('../fonts/OverusedGrotesk-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Grotesk';src:url('../fonts/OverusedGrotesk-ExtraBold.ttf') format('truetype');font-weight:800;font-style:normal;font-display:swap;}
@font-face{font-family:'Grotesk';src:url('../fonts/OverusedGrotesk-Black.ttf') format('truetype');font-weight:900;font-style:normal;font-display:swap;}
@font-face{font-family:'Grotesk';src:url('../fonts/OverusedGrotesk-BlackItalic.ttf') format('truetype');font-weight:900;font-style:italic;font-display:swap;}

/* ── Tokens (fallback — Customizer sobrescreve via css-output.php) ─────────── */
:root{
  --berro-ink:#0B0A08;
  --berro-chalk:#F5F4F1;
  --berro-accent:#FFC700;
  --berro-accent-soft:#FBE08F;
  --berro-smoke:#8C877D;
  --berro-text:#2A2825;
  --berro-green:#10B466;
  --berro-line:rgba(245,244,241,.15);
  --berro-line-dark:rgba(11,10,8,.12);
  --berro-card:#141210;
  --berro-font-display:'Gunter',Georgia,serif;
  --berro-font-body:'Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --berro-container:1560px;
  --berro-pad:40px;
}

/* ── Base ───────────────────────────────────────────────────────────────── */
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
html,body{margin:0;padding:0;}
body{background:var(--berro-ink);color:var(--berro-chalk);
  font-family:var(--berro-font-body);-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;overflow-x:hidden;}
/* Esconde o cursor do sistema só quando o cursor custom está ativo (JS) — robustez */
body.berro-has-cursor,body.berro-has-cursor a,body.berro-has-cursor button{cursor:none;}
h1,h2,h3,h4,h5,h6{margin:0;}
::selection{background:var(--berro-accent);color:var(--berro-ink);}
a{color:var(--berro-chalk);text-decoration:none;}
a:hover{color:var(--berro-accent);}
img{display:block;max-width:100%;}

/* ── Acessibilidade: skip link + foco visível por teclado ───────────────────*/
.berro-skip{position:fixed;top:-100px;left:16px;z-index:10000;
  background:var(--berro-accent);color:var(--berro-ink);
  font-family:var(--berro-font-body);font-weight:700;font-size:14px;
  padding:12px 18px;border-radius:8px;transition:top .18s ease;}
.berro-skip:focus{top:16px;color:var(--berro-ink);outline:2px solid var(--berro-ink);outline-offset:2px;}
:focus-visible{outline:2px solid var(--berro-accent);outline-offset:3px;border-radius:2px;}
@media(prefers-reduced-motion:reduce){.berro-skip{transition:none;}}

/* ── Cursor custom (desktop) — anel + ponto ────────────────────────────────
   mix-blend-mode:difference garante visibilidade em qualquer fundo (claro/escuro). */
.berro-cursor{position:fixed;top:0;left:0;width:34px;height:34px;border-radius:50%;
  border:2px solid #fff;background:transparent;pointer-events:none;z-index:9999;
  mix-blend-mode:difference;
  transform:translate(-50%,-50%);
  transition:width .28s cubic-bezier(.16,1,.3,1),height .28s cubic-bezier(.16,1,.3,1),background .28s ease,opacity .25s ease;
  will-change:transform;}
.berro-cursor::after{content:'';position:absolute;top:50%;left:50%;width:6px;height:6px;border-radius:50%;
  background:#fff;transform:translate(-50%,-50%);}
.berro-cursor.is-grow{width:60px;height:60px;background:rgba(255,255,255,.25);}
.berro-cursor.is-grow::after{opacity:0;}

/* ── Keyframes ─────────────────────────────────────────────────────────────*/
@keyframes berro-spin{to{transform:rotate(360deg);}}
@keyframes berro-marquee{from{transform:translate3d(0,0,0);}to{transform:translate3d(-50%,0,0);}}
.berro-marquee-track{animation:berro-marquee 22s linear infinite;}

/* ── Menu do rodapé ────────────────────────────────────────────────────────*/
.berro-footer__menu{display:flex;flex-wrap:wrap;gap:14px 30px;list-style:none;margin:0;padding:0;
  font-weight:700;font-size:13px;letter-spacing:.03em;text-transform:uppercase;}
.berro-footer__menu a{color:var(--berro-chalk);}
.berro-footer__menu .current-menu-item > a{color:var(--berro-accent);}

/* ── Movimento / reveals ───────────────────────────────────────────────────*/
.berro-reveal-line{display:block;overflow:hidden;}
.berro-reveal-line > span{display:inline-block;transform:translateY(110%);transition:transform .9s cubic-bezier(.16,1,.3,1);}
.berro-in .berro-reveal-line > span{transform:translateY(0);}
.berro-fade{opacity:0;transform:translateY(28px);transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1);}
.berro-fade.berro-in{opacity:1;transform:none;}
.berro-char{display:inline-block;transform:translateY(120%) rotate(6deg);opacity:0;transition:transform .8s cubic-bezier(.16,1,.3,1),opacity .8s ease;}
.berro-in .berro-char{transform:none;opacity:1;}

/* ── UI ────────────────────────────────────────────────────────────────────*/
.berro-navlink{position:relative;}
.berro-navlink::after{content:'';position:absolute;left:0;bottom:-3px;width:0;height:2px;background:var(--berro-accent);transition:width .35s cubic-bezier(.16,1,.3,1);}
.berro-navlink:hover::after{width:100%;}
.berro-svc{border-top:1px solid var(--berro-line-dark);}
.berro-svc:last-child{border-bottom:1px solid var(--berro-line-dark);}
.berro-h-focus:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid var(--berro-accent);outline-offset:4px;}
.berro-part:hover img{transform:scale(1.05);filter:grayscale(0) contrast(1.02)!important;}
.berro-client:hover img{opacity:1!important;transform:scale(1.06);}
.berro-post:hover img{transform:scale(1.05);}
.berro-post h3{transition:color .3s ease;}
.berro-post:hover h3{color:var(--berro-smoke);}

/* ── Corpo editorial do artigo (single.php) ────────────────────────────────*/
.berro-article > p:first-of-type{font-size:23px;line-height:1.55;font-weight:500;margin:0 0 36px;}
.berro-article p{font-size:18px;line-height:1.75;color:var(--berro-text);margin:0 0 26px;}
.berro-article h2{font-family:var(--berro-font-body);font-weight:800;font-size:30px;line-height:1.1;margin:52px 0 20px;letter-spacing:-.01em;}
.berro-article h3{font-family:var(--berro-font-body);font-weight:800;font-size:23px;margin:40px 0 16px;}
.berro-article a{text-decoration:underline;text-decoration-color:var(--berro-accent);text-underline-offset:3px;}
.berro-article ul,.berro-article ol{margin:0 0 26px;padding:0;list-style:none;}
.berro-article ul li,.berro-article ol li{position:relative;padding:12px 0 12px 28px;border-bottom:1px solid var(--berro-line-dark);font-size:18px;line-height:1.4;}
.berro-article ul li::before,.berro-article ol li::before{content:'→';position:absolute;left:0;color:var(--berro-accent);font-weight:900;}
.berro-article blockquote{margin:48px 0;border-left:4px solid var(--berro-accent);padding-left:28px;}
.berro-article blockquote p{font-family:var(--berro-font-display);font-weight:400;font-size:min(6vw,40px);line-height:1.05;color:var(--berro-ink);}
.berro-article img{border-radius:6px;margin:32px 0;}

/* Menu do WP (wp_nav_menu) no header — herda estilo dos links */
.berro-menu{display:flex;gap:34px;align-items:center;list-style:none;margin:0;padding:0;
  font-weight:700;font-size:13px;letter-spacing:.02em;text-transform:uppercase;}
.berro-menu a{color:inherit;}
.berro-menu .current-menu-item > a{color:var(--berro-accent);}

.berro-container{width:100%;max-width:var(--berro-container);margin-inline:auto;padding-inline:var(--berro-pad);}

/* ── Responsivo ────────────────────────────────────────────────────────────*/
.berro-mobile-only{display:none!important;}
@media(max-width:820px){
  body{cursor:auto;}
  .berro-cursor{display:none!important;}
  .berro-desktop-only{display:none!important;}
  .berro-mobile-only{display:flex!important;}
  nav.berro-nav{padding:16px 20px!important;}
  section,footer{padding-left:20px!important;padding-right:20px!important;}
  #sobre,#servicos{padding-top:80px!important;padding-bottom:80px!important;}
  .berro-sobre-grid{grid-template-columns:1fr!important;gap:24px!important;}
  .berro-svc-body{grid-template-columns:1fr!important;gap:20px!important;padding-left:0!important;}
  .berro-projcard{width:76vw!important;}
  .berro-projcard > div:first-child{height:78vw!important;}
  .berro-svc-head{gap:14px!important;padding:22px 0!important;}
  .berro-part-wrap{grid-template-columns:1fr!important;gap:32px!important;}
  .berro-part-grid{grid-template-columns:repeat(2,1fr)!important;gap:18px!important;}
  .berro-clients-grid{grid-template-columns:repeat(2,1fr)!important;}
  .berro-blog-grid{grid-template-columns:1fr!important;gap:28px!important;}
  #parceiros,#clientes,#blog{padding-top:80px!important;padding-bottom:80px!important;}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;}
  .berro-reveal-line > span,.berro-char,.berro-fade{transform:none!important;opacity:1!important;}
  .berro-cursor{display:none!important;}
  body{cursor:auto;}
}

/* Somente para leitores de tela (acessível, fora da tela visualmente) */
.berro-sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}