/* ════════════════════════════════════════════════════════════════
   CREATIVE CORE · 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:    #05070f;
  --brut-acc:    #FF3D14;
  --brut-cyan:   #19E0FF;
  --brut-line:   rgba(255,255,255,.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: 'DM Mono','Courier New',monospace; font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--brut-acc);
  background: rgba(5,7,15,.7); padding: 4px 8px; border: 1px solid rgba(255,61,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 {
  border-bottom: 3px solid var(--brut-acc) !important;
  border-radius: 0 !important;
  backdrop-filter: blur(6px) !important;
}
html.cc-brut body .nav-menu a {
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
  font-family: 'DM Mono','Courier New',monospace !important;
  font-size: 11px !important;
}
html.cc-brut body .nav-menu a::before { content: "// "; color: var(--brut-acc); opacity: .7; }

/* ─────────────────────────────────────────────────────────
   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 laranja só na largura do texto (linha 3) */
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) !important;
  color: #05070f !important;
  -webkit-text-fill-color: #05070f !important;
  padding: 0.04em 0.1em !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: 'DM 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: calc(100svh - 112px) !important;
    padding-top: 16px !important;
    padding-bottom: 22px !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: 'DM Mono','Courier New',monospace !important;
  text-transform: uppercase !important;
  letter-spacing: .16em !important;
  color: #05070f !important;
  background: var(--brut-acc) !important;
  padding: 5px 10px !important;
  border: 2px solid #05070f;
  box-shadow: 4px 4px 0 rgba(0,0,0,.5);
}
html.cc-brut body .sec-head__title,
html.cc-brut body .clients-sec__title,
html.cc-brut body .spec-header__title,
html.cc-brut body .guarantee-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: 'DM Mono', sans-serif; font-weight: 900;
  font-size: clamp(3rem, 9vw, 8rem); line-height: .8;
  color: transparent; -webkit-text-stroke: 2px rgba(255,61,20,.5);
  letter-spacing: -.04em; margin-bottom: 8px; user-select: none;
}
/* régua grossa antes do cabeçalho de seção */
html.cc-brut body .sec-head::before,
html.cc-brut body .clients-sec__head::before,
html.cc-brut body .guarantee-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 .clients-status, 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 .gua-status,
html.cc-brut body .ctaform-status {
  border-top: 2px solid rgba(255,61,20,.5) !important;
  border-bottom: 2px solid rgba(255,61,20,.5) !important;
}

/* ─────────────────────────────────────────────────────────
   7. CARDS BRUTALISTAS EM TODA A HOME
   borda grossa · cantos retos · sombra dura · hover que "bate"
   ───────────────────────────────────────────────────────── */
html.cc-brut body .bento-case,
html.cc-brut body .spec-card,
html.cc-brut body .test-card,
html.cc-brut body .testimonial-card,
html.cc-brut body .guarantee-item {
  border: 3px solid var(--brut-line) !important;
  border-radius: 0 !important;
  box-shadow: 8px 8px 0 rgba(255,255,255,.82) !important;
  transition: transform .12s steps(2) !important;
}
html.cc-brut body .bento-case:hover,
html.cc-brut body .spec-card:hover,
html.cc-brut body .test-card:hover,
html.cc-brut body .testimonial-card:hover,
html.cc-brut body .guarantee-item: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 */
html.cc-brut body .bento-case { box-shadow: 8px 8px 0 rgba(255,61,20,.55) !important; }
html.cc-brut body .bento-case:hover { box-shadow: 13px 13px 0 var(--brut-line) !important; }

/* títulos de card em caixa alta condensada */
html.cc-brut body .bento-case__title,
html.cc-brut body .spec-card__title,
html.cc-brut body .guarantee-item__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 #05070f !important;
  border-bottom: 4px solid #05070f !important;
  height: 62px !important;
}
html.cc-brut body .marquee-track {
  animation: marqueeScroll 60s linear infinite !important;
}
html.cc-brut body .marquee-track span {
  color: #05070f !important;
  font-family: 'DM 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: #05070f !important; opacity: .6 !important; font-size: 7px !important; }

/* ─────────────────────────────────────────────────────────
   9. BOTÕES BRUTALISTAS (square + borda + sombra dura)
   convive com o magnético (que move via transform inline)
   ───────────────────────────────────────────────────────── */
html.cc-brut body .btn-nav-cta,
html.cc-brut body .sc-cta,
html.cc-brut body .gua-contract__cta,
html.cc-brut body .footer-news-form button,
html.cc-brut body .clients-sec__link {
  border-radius: 0 !important;
  border: 2.5px solid #05070f !important;
  box-shadow: 5px 5px 0 #05070f !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  font-family: 'DM Mono','Courier New',monospace !important;
}

/* ─────────────────────────────────────────────────────────
   10. MOVIMENTO BRUTO — entradas "snapam" (sem easing suave)
   ───────────────────────────────────────────────────────── */
html.cc-brut body .reveal {
  transition: opacity .18s steps(2,end), transform .18s steps(3,end) !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: var(--brut-acc); color: var(--brut-acc); }
html.cc-brut body .footer-col__label {
  font-family: 'DM 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) {
  /* o usuário pediu o efeito explicitamente — mantemos o grid correndo,
     mas suavizamos o snap para não piscar demais */
  html.cc-brut body .reveal { transition: opacity .2s ease, transform .2s ease !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: 0 !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: 0 !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: #05070f !important;
  border-color: #05070f;
}
/* número do valor: contorno → preenche no hover */
html.cc-brut body .value-card__num {
  color: transparent !important;
  -webkit-text-stroke: 2px rgba(255,61,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,61,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,61,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; } }