/* redesign.css — camada de redesign "dossiê de operações" (home, pós-herói).
   Objetivo: a página deixar de se parecer com o clone garda.com mantendo o mesmo
   dinamismo (marquee, count-up, reveals, swiper) e o rigor profissional.
   Escopo: apenas secções marcadas com data-sn-rd no build-sentinela.mjs.
   O herói (vídeo) NÃO é marcado e fica intocado.
   Carregada DEPOIS de sentinela.css — ganha a todas as regras de igual
   especificidade. Sistema: canvas #0A0A0B contínuo, hairlines brancas,
   amarelo #F9F811 como acento único, vermelho reservado à marca/erros. */

:root {
  --sn-ink: #0A0A0B;        /* canvas */
  --sn-coal: #141416;       /* superfície elevada (cartões) */
  --sn-text: #F5F5F2;
  --sn-muted: rgba(255, 255, 255, 0.72);   /* ≥9:1 sobre ink */
  --sn-line: rgba(255, 255, 255, 0.16);
  --sn-line-soft: rgba(255, 255, 255, 0.09);
  --sn-yellow-soft: rgba(249, 248, 17, 0.65);
}

/* ---- canvas escuro contínuo (também sob herói/overscroll) ---- */
body { background: var(--sn-ink); }

/* ---- 1 · Re-tema por tokens: theme-white / theme-grey-6 → dossiê escuro ---- */
[data-sn-rd] {
  --theme-white-bg-color: var(--sn-ink);
  --theme-white-h1-color: var(--sn-text);
  --theme-white-h2-color: var(--sn-text);
  --theme-white-h3-color: var(--sn-text);
  --theme-white-h4-color: var(--sn-text);
  --theme-white-h5-color: var(--sn-text);
  --theme-white-h6-color: var(--sn-text);
  --theme-white-p-color: var(--sn-muted);
  --theme-white-span-color: var(--sn-text);
  --theme-white-quote-color: var(--sn-text);
  --theme-white-display-lg-color: var(--sn-text);
  --theme-white-uppertitle-color: var(--sn-yellow);
  --theme-white-body-lg-color: var(--sn-text);
  --theme-white-body-sm-color: var(--sn-muted);
  --theme-white-caption-lg-color: var(--sn-muted);
  --theme-white-caption-sm-color: var(--sn-muted);
  --theme-white-list-bullet-color: var(--sn-yellow);
  --theme-white-list-text-color: var(--sn-text);
  --theme-white-link-color: rgba(255, 255, 255, 0.85);
  --theme-white-link-hover-color: var(--sn-yellow);
  --theme-white-border-color: var(--sn-line-soft);
  --theme-white-active-color: var(--sn-text);

  --theme-white-btn-primary-bg-color: var(--sn-yellow);
  --theme-white-btn-primary-text-color: #000;
  --theme-white-btn-primary-icon-bg-color: transparent;
  --theme-white-btn-primary-icon-color: #000;
  --theme-white-btn-primary-hover-bg-color: #000;
  --theme-white-btn-primary-hover-text-color: var(--sn-yellow);
  --theme-white-btn-primary-hover-icon-bg-color: #000;
  --theme-white-btn-primary-hover-icon-color: var(--sn-yellow);
  --theme-white-btn-secondary-bg-color: transparent;
  --theme-white-btn-secondary-border-color: var(--sn-line);
  --theme-white-btn-secondary-text-color: var(--sn-text);
  --theme-white-btn-secondary-hover-bg-color: var(--sn-yellow);
  --theme-white-btn-secondary-hover-border-color: var(--sn-yellow);
  --theme-white-btn-secondary-hover-text-color: #000;
  --theme-white-btn-tertiary-text-color: var(--sn-text);
  --theme-white-btn-tertiary-icon-color: var(--sn-yellow);
  --theme-white-btn-tertiary-hover-text-color: var(--sn-yellow);

  /* acento: fora do herói, o "vermelho-1" do sistema passa a amarelo
     (afeta spans de destaque dos h2 com style="color:var(--color-red-1)") */
  --color-red-1: var(--sn-yellow);

  background: var(--sn-ink);
  color: var(--sn-text);
}

/* citação do compromisso (era theme-grey-6 cinza claro) → mesmo dossiê */
[data-sn-rd="credo"] {
  --theme-grey-6-bg-color: var(--sn-ink);
  --theme-grey-6-h2-color: var(--sn-text);
  --theme-grey-6-h4-color: var(--sn-text);
  --theme-grey-6-h6-color: var(--sn-text);
  --theme-grey-6-p-color: var(--sn-muted);
  --theme-grey-6-span-color: var(--sn-text);
  --theme-grey-6-quote-color: var(--sn-text);
  --theme-grey-6-uppertitle-color: var(--sn-yellow);
  --theme-grey-6-body-sm-color: var(--sn-muted);
  --theme-grey-6-link-color: var(--sn-muted);
  --theme-grey-6-link-hover-color: var(--sn-yellow);
  --theme-grey-6-border-color: var(--sn-line-soft);
}

/* unify: citação de cliente + rodapé passam de #000 (sentinela) ao mesmo ink */
[data-sn="quote"],
[data-sn="fmain"] {
  --theme-red-1-bg-color: var(--sn-ink);
  background: var(--sn-ink);
}

/* ---- 2 · Botões primários das secções: amarelo sólido → inverte no hover ---- */
[data-sn-rd] .Button_variant-primary__z4Cob .Button_icon__oRsAP svg path { fill: #000; }
[data-sn-rd] .Button_variant-primary__z4Cob:hover .Button_icon__oRsAP svg path { fill: var(--sn-yellow); }
[data-sn-rd] .Button_variant-secondary__zGpqW .Button_icon__oRsAP svg path { fill: var(--sn-text); }

/* ---- 3 · Foco sempre visível sobre o canvas escuro ---- */
[data-sn-rd] a:focus-visible,
[data-sn-rd] button:focus-visible,
[data-sn-rd] input:focus-visible,
[data-sn="quote"] a:focus-visible,
[data-sn="fmain"] a:focus-visible {
  outline: 2px solid var(--sn-yellow);
  outline-offset: 3px;
}

/* ---- 4 · Carreiras: kicker amarelo + CTA (layout Garda mantido) ---- */
[data-sn-rd="careers"] h2 span { letter-spacing: 0.01em; }

/* ---- 5 · Marquee (galeria): P&B que ganha cor, máscara de margens,
          pausa no hover — o movimento original é preservado ---- */
[data-sn-rd="gallery"] {
  border-top: 1px solid var(--sn-line-soft);
  border-bottom: 1px solid var(--sn-line-soft);
}
[data-sn-rd="gallery"] .AnimatedGallery_image__2UMB3 {
  filter: grayscale(1) contrast(1.06) brightness(0.94);
  transition: filter 0.45s ease;
}
[data-sn-rd="gallery"] .AnimatedGallery_animatedGallery__bmSVQ:hover .AnimatedGallery_image__2UMB3 {
  filter: none;
}
[data-sn-rd="gallery"] .AnimatedGallery_animatedGallery__bmSVQ:hover .marquee {
  animation-play-state: paused;
}
[data-sn-rd="gallery"] .AnimatedGallery_animatedGallery__bmSVQ {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

/* ---- 6 · Historial: o separador horizontal passa a hairline da casa ---- */
[data-sn-rd="pledge"] .Separator_separator__fW0w_ { border-color: var(--sn-line); }

/* ---- 7 · Estatísticas: números amarelos (var com estado inline) +
          colunas separadas por hairlines verticais ---- */
[data-sn-rd="stats"] { --color-red-1: var(--sn-yellow); }
[data-sn-rd="stats"] .BaseContainer_border-left__eD_86 { border-left-color: var(--sn-line); }
[data-sn-rd="stats"] h6 {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 13px;
  color: var(--sn-muted);
}
@media (max-width: 767px) {
  /* colunas empilhadas: hairline passa a horizontal */
  [data-sn-rd="stats"] .BaseContainer_border-left__eD_86 {
    border-left: 0;
    border-top: 1px solid var(--sn-line);
    padding-left: 0;
    padding-top: 16px;
  }
}

/* ---- 8 · Citação de cliente (data-sn="quote"): puro refinamento ---- */
[data-sn="quote"] .swiper-pagination-bullet {
  background: rgba(255, 255, 255, 0.35);
  opacity: 1;
}
[data-sn="quote"] .swiper-pagination-bullet-active { background: var(--sn-yellow); }

/* ---- 9 · Compromisso: regra amarela curta acima da citação ---- */
[data-sn-rd="credo"] .uppertitle { letter-spacing: 0.18em; }

/* ---- 10 · Atualidades: cartões elevados com hover físico ---- */
[data-sn-rd="insights"] .Card_card__T5Y7J {
  position: relative;
  background: var(--sn-coal);
  border: 1px solid var(--sn-line-soft);
  padding-top: 20px;
  padding-right: 20px;
  padding-bottom: 48px;
  padding-left: 20px;
}
[data-sn-rd="insights"] .Card_card__T5Y7J .Card_imageWrapper__BF6KK {
  overflow: hidden;
  /* full-bleed exato: dentro do flex-column do cartão, width:100% prendia a
     largura e as margens negativas só deslocavam (imagem 39px à esquerda).
     stretch + width:auto subtrai as margens à linha → largura real +40px. */
  width: auto;
  align-self: stretch;
  margin-left: -20px;
  margin-right: -20px;
  margin-top: -20px;
}
[data-sn-rd="insights"] .Card_card__T5Y7J img { transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
[data-sn-rd="insights"] .Card_card__T5Y7J p { color: var(--sn-muted); }
[data-sn-rd="insights"] .Card_card__T5Y7J h6 { color: var(--sn-text); }
[data-sn-rd="insights"] .Card_card__T5Y7J::after {
  content: "→";
  position: absolute;
  right: 18px;
  bottom: 12px;
  color: var(--sn-yellow);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
@media (prefers-reduced-motion: no-preference) {
  [data-sn-rd="insights"] .Card_card__T5Y7J {
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.25s ease, box-shadow 0.35s ease;
  }
  [data-sn-rd="insights"] .Card_card__T5Y7J:hover {
    transform: translateY(-4px);
    border-color: var(--sn-yellow);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
  }
  [data-sn-rd="insights"] .Card_card__T5Y7J:hover img { transform: scale(1.045); }
}
[data-sn-rd="insights"] .Card_card__T5Y7J:hover::after { opacity: 1; transform: translateX(0); }

/* ---- 11 · Newsletter: banda sublinhada (substitui o painel amarelo) ---- */
[data-sn-rd="newsletter"] {
  --theme-red-1-bg-color: transparent;
  --theme-red-1-h1-color: var(--sn-text);
  --theme-red-1-h2-color: var(--sn-text);
  --theme-red-1-h3-color: var(--sn-text);
  --theme-red-1-h4-color: var(--sn-text);
  --theme-red-1-h5-color: var(--sn-text);
  --theme-red-1-h6-color: var(--sn-text);
  --theme-red-1-p-color: var(--sn-muted);
  --theme-red-1-span-color: var(--sn-text);
  --theme-red-1-uppertitle-color: var(--sn-yellow);
  --theme-red-1-body-sm-color: var(--sn-muted);
  --theme-red-1-link-color: var(--sn-muted);
  --theme-red-1-link-hover-color: var(--sn-yellow);
  --theme-red-1-border-color: var(--sn-line);
  --theme-red-1-btn-primary-bg-color: var(--sn-yellow);
  --theme-red-1-btn-primary-text-color: #000;
  --theme-red-1-btn-primary-icon-bg-color: transparent;
  --theme-red-1-btn-primary-icon-color: #000;
  --theme-red-1-btn-primary-hover-bg-color: #000;
  --theme-red-1-btn-primary-hover-text-color: var(--sn-yellow);
  --theme-red-1-btn-primary-hover-icon-bg-color: #000;
  --theme-red-1-btn-primary-hover-icon-color: var(--sn-yellow);
  --theme-red-1-form-field-bg-color: transparent;
  --theme-red-1-form-field-text-color: var(--sn-text);
  --theme-red-1-form-field-border-color: var(--sn-line);
  --theme-red-1-form-field-focus-color: var(--sn-yellow);
  --theme-red-1-form-field-placeholder-color: rgba(255, 255, 255, 0.45);
  background: transparent;
  border-top: 1px solid var(--sn-line-soft);
}
[data-sn-rd="newsletter"] .TextField_textField__tD874 {
  border-width: 0 0 1px 0;
  border-radius: 0;
  padding-left: 0;
}
[data-sn-rd="newsletter"] .TextField_textField__tD874:focus {
  outline: none;
  box-shadow: 0 1px 0 0 var(--sn-yellow);
}
[data-sn-rd="newsletter"] .Button_variant-primary__z4Cob .Button_icon__oRsAP svg path { fill: #000; }
[data-sn-rd="newsletter"] .Button_variant-primary__z4Cob:hover .Button_icon__oRsAP svg path { fill: var(--sn-yellow); }

/* ---- 12 · Rodapé principal: micro-polimento (links → amarelo no hover) ---- */
[data-sn="fmain"] .Footer_desktopFooter__81W94 a .Link_label__Z0pwM {
  transition: color 0.2s ease;
}
[data-sn="fmain"] .Footer_desktopFooter__81W94 a:hover .Link_label__Z0pwM,
[data-sn="fmain"] .Footer_desktopFooter__81W94 a:focus-visible .Link_label__Z0pwM {
  color: var(--sn-yellow);
}
[data-sn="fmain"] .SocialMedia_link__wl5pW {
  border: 1px solid var(--sn-line);
  border-radius: 50%;
  transition: border-color 0.2s ease;
}
[data-sn="fmain"] .SocialMedia_link__wl5pW:hover { border-color: var(--sn-yellow); }

/* ---- 13 · Header: sombra ao rolar (classe aplicada pelo clone.js) ---- */
.Header_header__fR3A5.sn-scrolled {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.18), 0 10px 28px rgba(0, 0, 0, 0.16);
}