/* ════════════════════════════════════════════════════════════════
   SANBERNARDA.COM · BRUTALISM LAYER  (escopo: html.cc-brut)
   Camada agressiva aplicada SÓ na home. Não altera depth/glitch/
   contador/magnético — só endurece o visual. Replicável depois.
   ════════════════════════════════════════════════════════════════ */

:root{
  --brut-ink:    #1A0B24;
  --brut-acc:    var(--cc-orange);
  --brut-cyan:   #B19CFF;
  --brut-line:   rgba(250,250,247,.9);
}

/* ─────────────────────────────────────────────────────────
   1. MOLDURA GLOBAL + TICKS DE CANTO (estrutura exposta)
   ───────────────────────────────────────────────────────── */
html.cc-brut body .brut-frame{
  position: fixed; inset: 0; z-index: 70; pointer-events: none;
  border: 3px solid var(--brut-line);
  mix-blend-mode: difference;
}
html.cc-brut body .brut-frame::before,
html.cc-brut body .brut-frame::after,
html.cc-brut body .brut-frame > i::before,
html.cc-brut body .brut-frame > i::after{
  content: ""; position: absolute; width: 18px; height: 18px;
  border: 3px solid var(--brut-acc);
}
html.cc-brut body .brut-frame::before{ top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
html.cc-brut body .brut-frame::after{ top: 8px; right: 8px; border-left: 0; border-bottom: 0; }
html.cc-brut body .brut-frame > i::before{ bottom: 8px; left: 8px; border-right: 0; border-top: 0; }
html.cc-brut body .brut-frame > i::after{ bottom: 8px; right: 8px; border-left: 0; border-top: 0; }

/* Breadcrumb / caminho de arquivo (canto sup. esq., abaixo da nav) */
html.cc-brut body .brut-path{
  position: fixed; top: 84px; left: 16px; z-index: 71; pointer-events: none;
  font-family: var(--font-mono),'Courier New',monospace; font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--brut-acc);
  background: rgba(18,6,26,.7); padding: 4px 8px; border: 1px solid rgba(255,92,20,.45);
}
html.cc-brut body .brut-path b{ color: #fff; font-weight: 500; }
@media (max-width: 720px){ html.cc-brut body .brut-path{ display: none; } }

/* ─────────────────────────────────────────────────────────
   2. GRID GLOBAL MAIS FORTE (já existe .h26-grid-overlay)
   ───────────────────────────────────────────────────────── */
html.cc-brut body .h26-grid-overlay{
  opacity: .5 !important;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px) !important;
  background-size: 52px 52px !important;
}

/* ─────────────────────────────────────────────────────────
   3. NAV = BARRA DE SISTEMA CRUA
   ───────────────────────────────────────────────────────── */
html.cc-brut body .nav-header:not(.nav-compact){
  border-bottom: 3px solid var(--brut-acc) !important;
  border-radius: 0 !important;
  backdrop-filter: blur(6px) !important;
}
html.cc-brut body .nav-header.nav-compact{
  border: none !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}
html.cc-brut body .nav-header.nav-compact .container.nav-grid{
  border-radius: 9999px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  padding: 8px 8px 8px 22px !important;
  overflow: hidden !important;
  transition: none !important;
}
html.cc-brut body .nav-header.nav-compact .btn-nav-cta,
html.cc-brut body .nav-header.nav-compact .btn-nav-cta:hover{
  border-radius: 9999px !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
}
html.cc-brut body .nav-menu a{
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
  font-family: var(--font-mono),'Courier New',monospace !important;
  font-size: 11px !important;
}
html.cc-brut body .nav-menu a::before{ content: "// "; color: var(--brut-acc); opacity: .7; }
html.cc-brut body .nav-header.nav-compact .nav-menu a::before{ content: none !important; }

/* ─────────────────────────────────────────────────────────
   4. HERO MONUMENTAL
   ───────────────────────────────────────────────────────── */
html.cc-brut body .hero-title-v3,
html.cc-brut body .hero-title-v3 .hero-line{
  font-family: 'Tektur', sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: -0.04em !important;
  font-weight: 900 !important;
  line-height: var(--hero-lh-locked, 1) !important;
  font-size: var(--hero-fs-locked, 100px) !important;
  text-shadow: 0 0 0 #000;
}
/* palavra de destaque = laje roxo identidade (laranja fica só no CTA) */
html.cc-brut body .hero-title-v3 .hero-line.accent,
html.cc-brut body .hero-title-v3 .accent{
  display: inline-block !important;
  width: fit-content !important;
  max-width: none !important;
  background: var(--brut-acc, var(--cc-orange)) !important;
  color: var(--cc-black) !important;
  -webkit-text-fill-color: var(--cc-black) !important;
  padding: 0.04em 0.16em !important;
  border-radius: 14px !important;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  box-shadow: 8px 8px 0 rgba(0,0,0,.55);
}
html.cc-brut body .hero-sub-grid{ border-top: 2px solid rgba(255,255,255,.14); padding-top: 12px; gap: 14px 32px !important; }
/* descrição compacta (mono) — desktop/tablet; mobile → §HOME-MOBILE em style.css */
@media (min-width: 769px) {
  html.cc-brut body .hero-desc-v3{
    font-family: var(--font-mono),'Courier New',monospace !important;
    font-size: clamp(15px, 1.25vw, 19px) !important;
    line-height: 1.5 !important;
    max-width: 52ch !important;
    opacity: .78 !important;
  }
  /* hero cabe na primeira dobra — só ≥769px; mobile unificado em §HOME-MOBILE */
  html.cc-brut body .hero-v3{
    min-height: 100svh !important;
    padding-top: 16px !important;
    padding-bottom: 12px !important;
  }
  html.cc-brut body .hero-container-v3{
    max-width: min(1640px, 95vw) !important;
  }
}

/* ─────────────────────────────────────────────────────────
   5. KICKERS / RÓTULOS MONO BRUTAIS  + numeração de seção
   ───────────────────────────────────────────────────────── */
html.cc-brut body .sec-head__label,
html.cc-brut body .spec-header__label{
  display: inline-block !important;
  white-space: nowrap !important;
  width: max-content;
  font-family: var(--font-mono),'Courier New',monospace !important;
  text-transform: uppercase !important;
  letter-spacing: .16em !important;
  color: #000000 !important;
  background: var(--brut-acc) !important;
  padding: 5px 10px !important;
  border: 2px solid #000000;
  box-shadow: 4px 4px 0 rgba(0,0,0,.5);
}
html.cc-brut body .sec-head__title,
html.cc-brut body .spec-header__title{
  text-transform: uppercase !important;
  letter-spacing: -.02em !important;
  font-weight: 900 !important;
  line-height: .92 !important;
}
/* índice gigante injetado por JS (.brut-index) */
html.cc-brut body .brut-index{
  display: block;
  font-family: var(--font-mono), sans-serif; font-weight: 900;
  font-size: clamp(3rem, 9vw, 8rem); line-height: .8;
  color: transparent; -webkit-text-stroke: 2px rgba(255,92,20,.5);
  letter-spacing: -.04em; margin-bottom: 8px; user-select: none;
}
/* Hero de página interna: título sem numeração de capítulo */
html.cc-brut body .page-hero .brut-index,
html.cc-brut body .svp-hero .brut-index,
body .page-hero .brut-index,
body .svp-hero .brut-index{
  display: none !important;
}
/* Hero de página interna: sem régua laranja no topo */
html.cc-brut body .page-hero > .cc-rules,
html.cc-brut body .svp-hero > .cc-rules,
body .page-hero > .cc-rules,
body .svp-hero > .cc-rules{
  display: none !important;
}
html.cc-brut body .page-hero .sec-head::before,
html.cc-brut body .svp-hero .sec-head::before,
body .page-hero .sec-head::before,
body .svp-hero .sec-head::before{
  display: none !important;
}
/* Hero interno: kicker em texto, sem faixa laranja sólida */
html.cc-brut body .page-hero :is(.sec-head__label, .spec-header__label),
html.cc-brut body .svp-hero :is(.sec-head__label, .spec-header__label),
body .page-hero :is(.sec-head__label, .spec-header__label),
body .svp-hero :is(.sec-head__label, .spec-header__label){
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  display: block !important;
  width: auto !important;
}
/* Stats colado ao hero: sem faixa laranja de transição */
body .page-hero + .stats-strip::before,
body .svp-hero + .stats-strip::before{
  display: none !important;
}
/* régua grossa antes do cabeçalho de seção */
html.cc-brut body .sec-head::before{
  content: ""; display: block; height: 4px; width: 100%;
  background: repeating-linear-gradient(90deg, var(--brut-acc) 0 28px, transparent 28px 40px);
  margin-bottom: 26px;
}

/* ─────────────────────────────────────────────────────────
   6. STATUS BARS DE SEÇÃO mais duras
   ───────────────────────────────────────────────────────── */
 html.cc-brut body .cases-status, html.cc-brut body .spec-status,
html.cc-brut body .test-status, html.cc-brut body .pricing-status,
html.cc-brut body .ctaform-status{
  border-top: 2px solid rgba(255,92,20,.5) !important;
  border-bottom: 2px solid rgba(255,92,20,.5) !important;
}

/* ─────────────────────────────────────────────────────────
   7. CARDS BRUTALISTAS EM TODA A HOME
   borda grossa · cantos retos · sombra dura · hover que "bate"
   ───────────────────────────────────────────────────────── */

html.cc-brut body .spec-card,
html.cc-brut body .test-card{
  border: 3px solid var(--brut-line) !important;
  border-radius: 5px !important;
  box-shadow: 8px 8px 0 rgba(255,255,255,.82) !important;
  transition: transform .12s steps(2) !important;
}

html.cc-brut body .spec-card:not(.spec-card--cockpit):hover,
html.cc-brut body .test-card:hover{
  transform: translate(-4px, -4px) !important;
  box-shadow: 12px 12px 0 var(--brut-acc) !important;
}
/* bento mantém suas cores de fundo, só recebe a moldura/sombra dura */


/* títulos de card em caixa alta condensada */

html.cc-brut body .spec-card__title{
  text-transform: uppercase !important;
  letter-spacing: -.01em !important;
  font-weight: 800 !important;
}

/* ─────────────────────────────────────────────────────────
   8. FAIXA LARANJA FULL-BLEED (marquee como bloco cru)
   ───────────────────────────────────────────────────────── */
html.cc-brut body .marquee-strip{
  background: var(--brut-acc) !important;
  border-top: 4px solid #000000 !important;
  border-bottom: 4px solid #000000 !important;
  height: 62px !important;
}
html.cc-brut body .marquee-track{
  animation: marqueeScroll 60s linear infinite !important;
}
html.cc-brut body .marquee-track span{
  color: #000000 !important;
  font-family: var(--font-mono),'Courier New',monospace !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  padding: 0 28px !important;
}
html.cc-brut body .marquee-track .mq-dot{ color: #000000 !important; opacity: .6 !important; font-size: 7px !important; }

/* ─────────────────────────────────────────────────────────
   9. BOTÕES BRUTALISTAS (pill + sombra dura)
   convive com o magnético (que move via transform inline)
   ───────────────────────────────────────────────────────── */
html.cc-brut body .btn-nav-cta:not(.btn-nav-cta--ghost):not(.btn-hero-sec),
html.cc-brut body .footer-news-form button{
  border-radius: 9999px !important;
  border: none !important;
  box-shadow: 6px 6px 0 #FFFFFF !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  font-family: 'Tektur', sans-serif !important;
}
html.cc-brut body .sc-cta,
html.cc-brut body .btn-nav-cta--ghost,
html.cc-brut body .btn-hero-sec{
  border-radius: 9999px !important;
  border: none !important;
  box-shadow: none !important;
}

/* ─────────────────────────────────────────────────────────
   10. MOVIMENTO BRUTO — entradas desativadas
   ───────────────────────────────────────────────────────── */
html.cc-brut body .reveal{
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ─────────────────────────────────────────────────────────
   11. GRADE 3D CORRENDO (efeito Tron em movimento)
   anima background-position; vence o reset de reduce-motion
   ───────────────────────────────────────────────────────── */
html.cc-brut body .ccd-grid--floor .ccd-grid__bg{
  animation: brutGridRunDown 2.6s linear infinite !important;
}
html.cc-brut body .ccd-grid--ceil .ccd-grid__bg{
  animation: brutGridRunUp 3.4s linear infinite !important;
}
@keyframes brutGridRunDown { from { transform: translateY(0); } to { transform: translateY(56px); } }
@keyframes brutGridRunUp   { from { transform: translateY(0); } to { transform: translateY(-56px); } }

/* ─────────────────────────────────────────────────────────
   12. RODAPÉ = BLOCO MANIFESTO / TERMINAL
   ───────────────────────────────────────────────────────── */
html.cc-brut body .footer--cockpit{ border-top: 4px solid var(--brut-acc) !important; }
html.cc-brut body .footer-hero__brand{
  text-transform: uppercase !important;
  letter-spacing: -.04em !important;
  -webkit-text-stroke: 2px var(--brut-line);
  -webkit-text-fill-color: transparent;
  color: transparent;
}
html.cc-brut body .footer-hero__dot{
  -webkit-text-fill-color: transparent;
  color: transparent;
  background: var(--brut-acc);
}
html.cc-brut body .footer-col__label{
  font-family: var(--font-mono),'Courier New',monospace !important;
  text-transform: uppercase !important; letter-spacing: .16em !important;
  color: var(--brut-acc) !important;
  border-left: 3px solid var(--brut-acc); padding-left: 8px;
}

/* scanline sutil global p/ textura crua */
html.cc-brut body .brut-scan{
  position: fixed; inset: 0; z-index: 69; pointer-events: none; opacity: .26;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.34) 0 1px, transparent 1px 3px);
}

@media (prefers-reduced-motion: reduce) {
  html.cc-brut body .reveal{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ─────────────────────────────────────────────────────────
   13. SOBRE — cards brutais + micro-interações
   ───────────────────────────────────────────────────────── */
/* grids de células coladas ganham respiro p/ as sombras duras */
html.cc-brut body .industry-grid,
html.cc-brut body .team-grid,
html.cc-brut body .values-grid,
html.cc-brut body .blog-grid{
  gap: 28px !important;
  border-top: 0 !important;
  border-left: 0 !important;
  padding-bottom: 12px;
}
html.cc-brut body .works-grid{ gap: 32px !important; }

html.cc-brut body .team-card,
html.cc-brut body .value-card,
html.cc-brut body .work-card,
html.cc-brut body .industry-card,
html.cc-brut body .blog-card,
html.cc-brut body .svp-dcard{
  border: 3px solid var(--brut-line) !important;
  border-radius: 5px !important;
  box-shadow: 8px 8px 0 rgba(255,255,255,.82) !important;
  transition: transform .12s steps(2) !important;
}
html.cc-brut body .team-card:hover,
html.cc-brut body .value-card:hover,
html.cc-brut body .work-card:hover,
html.cc-brut body .industry-card:hover,
html.cc-brut body .blog-card:hover,
html.cc-brut body .svp-dcard:hover{
  transform: translate(-4px,-4px) !important;
  box-shadow: 12px 12px 0 var(--brut-acc) !important;
}
/* avatar do agente inverte pra laje laranja no hover */
html.cc-brut body .team-card__avatar{
  border-radius: 5px !important;
  border: 2px solid var(--brut-line);
  transition: background .12s steps(2), color .12s steps(2), border-color .12s steps(2);
}
html.cc-brut body .team-card:hover .team-card__avatar{
  background: var(--brut-acc) !important;
  color: #000000 !important;
  border-color: #000000;
}
/* número do valor: contorno → preenche no hover */
html.cc-brut body .value-card__num{
  color: transparent !important;
  -webkit-text-stroke: 2px rgba(255,92,20,.55);
  transition: color .12s steps(2);
}
html.cc-brut body .value-card:hover .value-card__num{ color: var(--brut-acc) !important; }

/* cards do manifesto: batem e acendem a borda */
html.cc-brut body .manifesto-stat{
  transition: transform .12s steps(2), border-color .12s steps(2), box-shadow .12s steps(2);
}
html.cc-brut body .manifesto-stat:hover{
  border-color: var(--brut-acc) !important;
  transform: translate(-3px,-3px);
  box-shadow: 6px 6px 0 rgba(255,92,20,.4);
}

/* stats: número acende laranja no hover */
html.cc-brut body .stats-strip__item{ transition: background .12s steps(2); }
html.cc-brut body .stats-strip__item:hover{ background: rgba(255,92,20,.07); }
html.cc-brut body .stats-strip__item:hover .stats-strip__num{ color: var(--brut-acc) !important; }

/* foto do fundador "decodifica" em cores reais no hover */
html.cc-brut body .founder-block__frame .fb-photo{ transition: filter .28s steps(3); }
html.cc-brut body .founder-block__frame .fb-photo-tint{ transition: opacity .28s steps(3); }
html.cc-brut body .founder-block__frame:hover .fb-photo{
  filter: saturate(1) contrast(1.05) brightness(1);
  mix-blend-mode: normal;
}
html.cc-brut body .founder-block__frame:hover .fb-photo-tint{ opacity: .3; }

/* manifesto dos agentes: barra dura à esquerda + span pisca */
html.cc-brut body .agents-manifesto{ border-top: 3px solid var(--brut-line); }
html.cc-brut body .agents-manifesto__quote span{ position: relative; }
html.cc-brut body .agents-manifesto__quote:hover span{ animation: brutBlink .5s steps(2) 2; }
@keyframes brutBlink { 50% { opacity: .25; } }