/* ══════════════════════════════════════════════
   COMPONENTS.CSS — Compra Turbo
   Componentes reutilizaveis (BEM naming)
   Dependencias: tokens.css
   ══════════════════════════════════════════════ */

/* ── EYEBROW ───────────────────────────────── */
/* Label uppercase com traco laranja antes */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ff-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand-orange);
  margin-bottom: var(--space-lg);
}

.eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--brand-orange);
  opacity: 0.6;
  flex-shrink: 0;
}

/* ── SECTION HEADER ────────────────────────── */
/* Eyebrow + titulo + subtitulo padrao */
.section-header {
  margin-bottom: var(--space-3xl);
}

.section-header__title {
  /* Escala padronizada em fs-h3 (42px max) — referencia #time.
     Titulos de secao ficam mais compactos verticalmente. */
  font-size: var(--fs-h3);
  margin-bottom: var(--space-lg);
}

/* Palavra em destaque dentro de titulo */
.section-header__title em {
  color: var(--brand-orange);
  font-style: normal;
}

.section-header__subtitle {
  font-family: var(--ff-body);
  font-size: var(--fs-subtitle);
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-muted-2);
  max-width: 600px;
}

/* Versao para secoes claras */
.section--light .section-header__subtitle {
  color: var(--text-dark-muted);
}

/* ── ANCHOR PHRASE ─────────────────────────── */
/* Frase-ancora italica entre secoes */
.anchor-phrase {
  font-family: var(--ff-heading);
  font-size: var(--fs-anchor);
  font-weight: 700;
  font-style: italic;
  color: var(--brand-orange);
  opacity: 0.75;
  text-align: center;
  margin-top: var(--space-3xl);
  padding: 0 var(--gutter);
}

/* Cards extraidos para css/cards.css.
   Botoes extraidos para css/buttons.css.
   Ordem de import em cada HTML: layout -> buttons -> cards -> forms -> components. */

/* ── METRIC GRID ───────────────────────────── */
/* Grid de numeros grandes (metricas) */
.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.metric-grid__item {
  background: var(--bg-light);
  padding: var(--space-2xl) var(--space-xl);
  text-align: center;
  position: relative;
  transition: background var(--duration-fast) ease;
}

.metric-grid__item:hover {
  background: var(--bg-light-card);
}

/* Barra de hover no topo */
.metric-grid__item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--brand-orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out);
}

.metric-grid__item:hover::before {
  transform: scaleX(1);
}

.metric-grid__value {
  font-family: var(--ff-heading);
  font-weight: 900;
  font-size: var(--fs-metric);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text-dark);
  display: block;
  margin-bottom: var(--space-sm);
}

.metric-grid__value .unit {
  font-size: 0.45em;
  font-weight: 800;
  color: var(--brand-orange);
}

.metric-grid__label {
  font-family: var(--ff-heading);
  font-size: 15px;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: var(--space-xs);
}

.metric-grid__context {
  font-size: var(--fs-small);
  color: var(--text-dark-soft);
  line-height: 1.65;
}

/* Disclaimer visual (ex: "Meta 12 meses") */
.metric-grid__disclaimer {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-dark-muted);
  background: var(--brand-orange-08);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  margin-top: var(--space-xs);
}

/* ══════════════════════════════════════════════
   METRIC STAGE — Assimetria hierarquica (Home)
   Fundo gradient light -> dark, '+40 anos' eh heroi
   no centro, laterais em escala menor como suporte.
   Classe nova (nao confundir com .metric-grid, usada
   em para-fabricantes.html).
   ══════════════════════════════════════════════ */
.metric-stage {
  position: relative;
  overflow: hidden;
  padding-block: var(--section-padding);
  background: var(--bg-primary);
}

/* Ambient light: luz radial laranja diluída emanando do heroi no
   centro. Substitui o gradient light→dark antigo — cria drama
   cinematografico sem 'lama' nas cores intermediárias. */
.metric-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 900px 520px at 50% 50%,
    rgba(212, 80, 10, 0.14) 0%,
    rgba(212, 80, 10, 0.06) 30%,
    transparent 65%
  );
  pointer-events: none;
  z-index: 0;
}

/* ── EYEBROW ─────────────────────────────────
   Ancora a zona clara do topo: traco curto laranja
   seguido de texto em caixa alta com tracking aberto. */
.metric-stage__eyebrow {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-3xl);
  font-family: var(--ff-heading);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--brand-orange);
}

.metric-stage__eyebrow-line {
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--brand-orange);
}

/* ── GRID ASSIMETRICO ─────────────────────────
   1fr auto 1fr: coluna central ajusta ao tamanho do
   numero heroi. align-items: center alinha verticalmente
   os 3 pelo meio (laterais ficam no centro do heroi). */
.metric-stage__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  column-gap: clamp(var(--space-xl), 4vw, var(--space-3xl));
  align-items: center;
}

.metric-stage__item {
  position: relative;
  text-align: center;
  padding-inline: var(--space-sm);
}

/* Hero ganha padding extra para acomodar o calor laranja do
   drop-shadow sem ser aparado pelo overflow:hidden da section */
.metric-stage__item--hero {
  padding-inline: var(--space-xl);
}

/* Numero lateral: escala de suporte (~65% do heroi).
   line-height 1.2 da folga para sobrescritos (²) e acentos (ã, ç).
   Reveal via transform+opacity+blur — sem clip-path, que tinha
   bugs de interpolacao e cortava o bounding box do texto. */
.metric-stage__value {
  position: relative;
  display: inline-block;
  font-family: var(--ff-heading);
  font-weight: 900;
  font-size: clamp(1.875rem, 3.5vw, 3.25rem);
  line-height: 1.2;
  letter-spacing: -0.035em;
  color: var(--text-white);
  /* Estado inicial antes do reveal JS */
  opacity: 0;
  transform: translateY(24px);
  filter: blur(20px);
  transition:
    opacity 0.7s var(--ease-out),
    transform 0.7s var(--ease-out),
    filter 0.7s var(--ease-out);
  z-index: 2;
  text-shadow: 0 2px 30px rgba(212, 80, 10, 0.18);
}

/* Numero heroi: steel brushed.
   background-clip:text aplica gradient diagonal como 'preenchimento'
   da letra — simula reflexo de aco escovado. O calor laranja vem do
   halo conic (circular por definicao, nao vira retangulo). */
.metric-stage__item--hero .metric-stage__value {
  font-size: clamp(4rem, 9vw, 7.5rem);
  letter-spacing: -0.05em;
  /* padding-right: expande o bounding box em 0.08em para cobrir o
     overshoot da ultima letra (bug do bg-clip:text + letter-spacing
     negativo + color:transparent, que fazia o 's' de 'anos' sumir). */
  padding-right: 0.08em;
  background: linear-gradient(
    135deg,
    #FFFFFF 0%,
    #F5F1E8 22%,
    #FFFFFF 48%,
    #D8D4CC 68%,
    #FFFFFF 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  /* text-shadow invisivel com color:transparent — remover */
  text-shadow: none;
}

.metric-stage__value.metric-stage__value--revealed {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Halo conic laranja: SOMENTE no heroi. Opacidade reduzida
   (0.65 → 0.40) para nao competir com o ambient light radial. */
.metric-stage__halo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(320px, 26vw, 480px);
  height: clamp(320px, 26vw, 480px);
  transform: translate(-50%, -50%) rotate(0deg);
  border-radius: 50%;
  background: conic-gradient(
    from 210deg,
    rgba(212, 80, 10, 0.40) 0deg,
    rgba(212, 80, 10, 0.18) 90deg,
    transparent 180deg,
    rgba(232, 90, 18, 0.22) 280deg,
    rgba(212, 80, 10, 0.40) 360deg
  );
  filter: blur(50px);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  animation: haloSpin 18s linear infinite;
  transition: opacity 1s var(--ease-out);
}

.metric-stage__item--hero[data-revealed="true"] .metric-stage__halo {
  opacity: 0.60;
}

/* Statement lateral: proporcional ao numero menor */
.metric-stage__statement {
  position: relative;
  z-index: 2;
  margin: var(--space-md) 0 0;
  font-family: var(--ff-heading);
  font-weight: 700;
  font-size: clamp(0.95rem, 1.15vw, 1.1rem);
  line-height: 1.35;
  color: var(--text-white);
  letter-spacing: -0.01em;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

/* Statement heroi: maior, mais presente */
.metric-stage__item--hero .metric-stage__statement {
  font-size: clamp(1.15rem, 1.5vw, 1.45rem);
  margin-top: var(--space-lg);
}

.metric-stage__sub {
  position: relative;
  z-index: 2;
  margin: var(--space-sm) auto 0;
  font-family: var(--ff-body);
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--text-muted-2);
  max-width: 24ch;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

.metric-stage__item--hero .metric-stage__sub {
  max-width: 28ch;
}

.metric-stage__item[data-revealed="true"] .metric-stage__statement,
.metric-stage__item[data-revealed="true"] .metric-stage__sub {
  opacity: 1;
  transform: translateY(0);
}

/* Nota: o stagger entre heroi e laterais eh controlado
   pelo JS via setTimeout (CT.animations.metricStage).
   Os transition-delays do statement/sub sao relativos a
   ativacao do reveal de cada item individualmente. */
.metric-stage__statement { transition-delay: 0.15s; }
.metric-stage__sub { transition-delay: 0.25s; }

/* ══════════════════════════════════════════════
   TEAM CARD — Editorial enxuto com foto + bio
   3 executivos em cards uniformes. Portrait 1:1
   quadrado; bio cresce para alinhar alturas.
   ══════════════════════════════════════════════ */
.team-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-2xl);
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.025) 0%,
    rgba(255, 255, 255, 0.008) 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-xl);
  transition:
    transform 0.3s var(--ease-out),
    border-color 0.3s var(--ease-out),
    background 0.3s var(--ease-out);
  overflow: hidden;
  isolation: isolate;
}

.team-card:hover {
  transform: translateY(-4px) perspective(1200px) rotateX(1deg);
  border-color: rgba(212, 80, 10, 0.25);
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.012) 100%);
  box-shadow: var(--elev-hover);
}

/* Portrait zoom + parallax inverso: imagem cresce 5%,
   container "segue" com leve movimento — da sensacao
   de profundidade editorial */
.team-card__portrait img {
  transition: transform 0.5s var(--ease-out);
}

.team-card:hover .team-card__portrait img {
  transform: scale(1.05) translateY(-2px);
}

/* Portrait: quadrado 1:1. Foto real entra via <img>. */
.team-card__portrait {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-xl);
  overflow: hidden;
  background: linear-gradient(135deg,
    rgba(30, 26, 22, 0.95) 0%,
    rgba(15, 13, 11, 1) 100%);
  z-index: 1;
}

.team-card__portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Desabilita Chrome/Safari image search e drag-to-save — evita
     lupa do Google Lens ao passar o mouse sobre as fotos. */
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

/* Role em caps editorial */
.team-card__role {
  font-family: var(--ff-heading);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-orange);
  margin: 0 0 var(--space-sm);
  position: relative;
  z-index: 2;
}

/* Nome: tipografia editorial */
.team-card__name {
  font-family: var(--ff-heading);
  font-weight: 900;
  font-size: clamp(1.5rem, 2vw, 1.875rem);
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--text-white);
  margin: 0 0 var(--space-md);
  position: relative;
  z-index: 2;
}

/* Badges: sempre 2 chips em 1 linha, sem wrap */
.team-card__badges {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  margin: 0 0 var(--space-md);
  position: relative;
  z-index: 2;
}

.team-card__badge {
  display: inline-block;
  font-family: var(--ff-body);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted-2);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  line-height: 1.3;
  white-space: nowrap;
}

/* Bio: cresce para igualar alturas dos cards */
.team-card__bio {
  font-family: var(--ff-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-muted-2);
  margin: 0;
  position: relative;
  z-index: 2;
  flex: 1;
}

/* ── TIMELINE ──────────────────────────────── */
/* Timeline vertical de etapas */
.timeline {
  position: relative;
  padding-left: var(--space-3xl);
}

/* Linha conectora vertical */
.timeline::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border-card);
}

.timeline__step {
  position: relative;
  padding-bottom: var(--space-2xl);
}

.timeline__step:last-child {
  padding-bottom: 0;
}

/* Dot circular */
.timeline__dot {
  position: absolute;
  left: calc(-1 * var(--space-3xl) + 5px);
  top: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--bg-primary);
  border: 2px solid var(--border-card);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  transition: border-color var(--duration-normal) ease,
              box-shadow var(--duration-normal) ease;
}

/* Dot quando step esta ativo/visivel */
.timeline__step--active .timeline__dot {
  border-color: var(--brand-orange);
  box-shadow: var(--shadow-timeline-active);
}

.timeline__step--active .timeline__dot::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-orange);
}

/* Badge de tempo (Dia 0, D+1, etc) */
.timeline__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--brand-orange);
  background: var(--highlight-bg);
  border: 1px solid var(--highlight-border);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-sm);
}

.timeline__title {
  font-family: var(--ff-heading);
  font-size: var(--fs-card-title);
  font-weight: 800;
  margin-bottom: var(--space-xs);
}

.timeline__desc {
  font-size: var(--fs-body);
  color: var(--text-muted-3);
  line-height: 1.7;
  max-width: 480px;
}

/* ── ACCORDION (FAQ) ───────────────────────── */
.accordion {
  border-top: 1px solid var(--border-card);
}

.accordion__item {
  border-bottom: 1px solid var(--border-card);
}

.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-lg) 0;
  font-family: var(--ff-heading);
  font-size: var(--fs-body-lg);
  font-weight: 700;
  color: var(--text-white);
  text-align: left;
  transition: color var(--duration-fast) ease;
}

.accordion__trigger:hover {
  color: var(--brand-orange);
}

/* Icone +/- */
.accordion__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  position: relative;
  color: var(--text-muted-3);
  transition: transform var(--duration-normal) var(--ease-out),
              color var(--duration-fast) ease;
}

.accordion__item--open .accordion__icon {
  transform: rotate(45deg);
  color: var(--brand-orange);
}

/* Conteudo expansivel */
.accordion__content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--duration-normal) var(--ease-out),
              padding var(--duration-normal) var(--ease-out);
}

.accordion__item--open .accordion__content {
  max-height: 500px;
  padding-bottom: var(--space-lg);
}

.accordion__answer {
  font-size: var(--fs-body);
  color: var(--text-muted-2);
  line-height: 1.8;
  max-width: 700px;
}

/* Versao light */
.section--light .accordion {
  border-top-color: var(--border-light);
}

.section--light .accordion__item {
  border-bottom-color: var(--border-light);
}

.section--light .accordion__trigger {
  color: var(--text-dark);
}

.section--light .accordion__answer {
  color: var(--text-dark-muted);
}

/* ── SCROLL HORIZONTAL ─────────────────────── */
/* Container para cards com scroll lateral */
.scroll-h {
  display: flex;
  gap: var(--space-lg);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--space-md);
  scrollbar-width: none;
}

.scroll-h::-webkit-scrollbar {
  display: none;
}

.scroll-h > * {
  scroll-snap-align: start;
  flex-shrink: 0;
}

/* Indicador de swipe (mobile) */
.scroll-h-hint {
  display: none;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--text-muted-4);
  margin-top: var(--space-sm);
}

/* ── EDITORIAL LAYOUT ──────────────────────── */
/* Layout 2 colunas assimetrico */
.editorial {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-3xl);
  align-items: start;
}

.editorial--reverse {
  grid-template-columns: 1fr 1.2fr;
}

.editorial__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.editorial__visual {
  position: relative;
}

/* ── PILLARS STAGE ─────────────────────────── */
/* Stage dos 3 pilares da operacao (#servicos).
   Layout: header centralizado + grid 3-col editorial.
   Decisao: nao usa .card base — pilares sao "colunas
   editoriais" com hairlines, nao cartoes flutuantes.
   Isso evita o visual "slide de pitch". */
.pillars__header {
  /* Sem max-width: ocupa a largura do container (ja limitado por
     --max-width em layout.css, entre 1280px e 1680px por breakpoint).
     Titulo flui ate onde o texto precisar; lede tem limite proprio
     abaixo para preservar legibilidade. */
  margin: 0 0 var(--space-4xl);
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
}

.pillars__lede {
  font-size: var(--fs-subtitle);
  color: var(--text-muted-2);
  line-height: 1.7;
  /* 75ch ≈ 750-800px: regra tipografica classica de leitura confortavel.
     Evita linhas de 100+ caracteres em monitores largos sem travar muito
     antes. */
  max-width: 75ch;
  margin: 0;
}

.pillars__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2xl);
  list-style: none;
  padding: 0;
  margin: 0;
}

.pillar {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-2xl) var(--space-xl);
  border-top: 1px solid var(--border-card);
  transition: border-color var(--duration-normal) var(--ease-out);
}

.pillar:hover {
  border-top-color: var(--highlight-border);
}

/* Acento editorial: faixa laranja sutil na borda esquerda
   do pilar central (II). Da foco no meio sem quebrar simetria. */
.pillar:nth-child(2)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  width: 1px;
  height: 40%;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--brand-orange) 50%,
    transparent
  );
  opacity: 0.6;
}

/* Numeral romano em outline — peso editorial sem preenchimento.
   Fallback: se o browser nao suportar text-stroke, fica transparent
   (invisivel) e a <ol> ainda da a contagem semantica. */
.pillar__numeral {
  font-family: var(--ff-heading);
  font-weight: 900;
  /* Escala fluida — nunca ultrapassa 10vw em viewports pequenos,
     evitando o problema de 64px fixo consumindo 17% de um mobile de 375px */
  font-size: clamp(40px, 7vw, 88px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1px var(--highlight-border);
  margin-bottom: var(--space-sm);
  transition: -webkit-text-stroke-color var(--duration-normal) var(--ease-out),
              color var(--duration-slow) var(--ease-out);
}

.pillar:hover .pillar__numeral {
  -webkit-text-stroke-color: var(--brand-orange);
}

/* Ao entrar na viewport, numeral ganha leve preenchimento
   laranja translucido atras do stroke. Efeito "acende",
   celebra a entrada sem ser chamativo. */
.pillar.reveal--visible .pillar__numeral {
  -webkit-text-stroke-color: rgba(212, 80, 10, 0.55);
  color: rgba(212, 80, 10, 0.05);
}

.pillar.reveal--visible:hover .pillar__numeral {
  -webkit-text-stroke-color: var(--brand-orange);
  color: rgba(212, 80, 10, 0.12);
}

.pillar__icon {
  color: var(--brand-orange);
  margin-bottom: var(--space-xs);
  transition: transform var(--duration-normal) var(--ease-out);
}

.pillar:hover .pillar__icon {
  transform: translateY(-2px);
}

.pillar__kicker {
  font-family: var(--ff-heading);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brand-orange);
}

.pillar__title {
  font-family: var(--ff-heading);
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text-white);
  margin: 0;
}

.pillar__desc {
  font-size: var(--fs-body-lg);
  line-height: 1.7;
  color: var(--text-muted-2);
  max-width: 38ch;
  margin: 0;
}

.pillar__proof {
  list-style: none;
  padding: var(--space-md) 0 0;
  margin: auto 0 0;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.pillar__chip {
  position: relative;
  padding-left: var(--space-md);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--text-muted-3);
}

.pillar__chip::before {
  content: "·";
  position: absolute;
  left: 0;
  top: -1px;
  color: var(--brand-orange);
  font-weight: 700;
  font-size: 1.2em;
}

/* ── LOADING SCREEN ────────────────────────── */
.loading-screen {
  position: fixed;
  inset: 0;
  z-index: var(--z-loading);
  background: var(--bg-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xl);
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.loading-screen--hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loading-screen__logo {
  width: 64px;
  height: 64px;
  opacity: 0;
  animation: fadeInUp 0.6s var(--ease-out) 0.1s forwards;
}

.loading-screen__bar {
  width: 120px;
  height: 2px;
  background: var(--border-card);
  border-radius: 2px;
  overflow: hidden;
  opacity: 0;
  animation: fadeInUp 0.6s var(--ease-out) 0.3s forwards;
}

.loading-screen__progress {
  height: 100%;
  background: var(--brand-orange);
  border-radius: 2px;
  width: 0%;
  transition: width 0.3s ease;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── PROGRESS DOTS ─────────────────────────── */
/* Indicador lateral de progresso para paginas longas */
.progress-dots {
  position: fixed;
  right: var(--space-lg);
  top: 50%;
  transform: translateY(-50%);
  z-index: var(--z-sticky);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.progress-dots__dot {
  /* position relative eh necessario para o tooltip (::before)
     se posicionar em relacao ao dot */
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-disabled);
  border: none;
  padding: 0;
  /* Area de clique ampliada sem afetar visual */
  box-shadow: 0 0 0 8px transparent;
  transition: background var(--duration-normal) ease,
              transform var(--duration-normal) ease;
  cursor: pointer;
}

.progress-dots__dot--active {
  background: var(--brand-orange);
  transform: scale(1.4);
}

.progress-dots__dot:hover {
  background: var(--text-muted-3);
}

/* Tooltip ao lado do dot — aparece no hover/focus com slide sutil */
.progress-dots__dot::before {
  content: attr(data-label);
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%) translateX(4px);
  background: var(--overlay-dark);
  color: var(--text-white);
  font-family: var(--ff-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 5px 11px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: opacity var(--duration-normal) var(--ease-out),
              transform var(--duration-normal) var(--ease-out);
  border: 1px solid var(--border-card);
}

.progress-dots__dot:hover::before,
.progress-dots__dot:focus-visible::before {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* ── COOKIE BANNER ─────────────────────────── */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-modal);
  background: var(--bg-card-alt);
  border-top: 1px solid var(--border-card);
  padding: var(--space-lg) var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
  transform: translateY(100%);
  transition: transform var(--duration-normal) var(--ease-out);
}

.cookie-banner--visible {
  transform: translateY(0);
}

.cookie-banner--hidden {
  transform: translateY(100%);
}

.cookie-banner__text {
  font-size: var(--fs-small);
  color: var(--text-muted-2);
  line-height: 1.6;
  flex: 1;
}

.cookie-banner__text a {
  color: var(--brand-orange);
  text-decoration: underline;
}

.cookie-banner__actions {
  display: flex;
  gap: var(--space-sm);
  flex-shrink: 0;
}

.cookie-banner__btn {
  padding: 8px 18px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  font-weight: 600;
  transition: background var(--duration-fast) ease,
              color var(--duration-fast) ease;
}

.cookie-banner__btn--accept {
  background: var(--brand-orange);
  color: var(--text-white);
}

.cookie-banner__btn--accept:hover {
  background: var(--brand-orange-hover);
}

.cookie-banner__btn--essential {
  background: var(--bg-card);
  color: var(--text-muted-2);
  border: 1px solid var(--border-card);
}

.cookie-banner__btn--essential:hover {
  background: var(--bg-card-alt);
  color: var(--text-white);
}

/* Form fields extraidos para css/forms.css */

/* ── TABS ──────────────────────────────────── */
.tabs {
  display: flex;
  gap: var(--space-xs);
  margin-bottom: var(--space-xl);
  border-bottom: 1px solid var(--border-card);
  padding-bottom: var(--space-xs);
}

.tabs__btn {
  padding: var(--space-sm) var(--space-lg);
  font-family: var(--ff-heading);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--text-muted-3);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: color var(--duration-fast) ease,
              background var(--duration-fast) ease;
}

.tabs__btn:hover {
  color: var(--text-white);
}

.tabs__btn--active {
  color: var(--brand-orange);
  border-bottom: 2px solid var(--brand-orange);
}

.tabs__panel {
  display: none;
}

.tabs__panel--active {
  display: block;
}

/* ══════════════════════════════════════════════
   UPGRADE VISUAL v2 — Novos componentes
   card--glass, ticker, icon-draw
   ══════════════════════════════════════════════ */

/* ── CARD GLASSMORPHISM ────────────────────── */
/* Card com efeito vidro translucido — para secoes com fundos vibrantes */
.card--glass {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-xl);
  padding: var(--space-xl) var(--space-xl);
  position: relative;
  overflow: visible;
  transition: border-color var(--duration-normal) var(--ease-out),
              transform var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out),
              background var(--duration-normal) var(--ease-out);
}

.card--glass::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.12), transparent 70%);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  pointer-events: none;
}

.card--glass:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--brand-orange-25);
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(212, 80, 10, 0.1);
}

.card--glass .card__title {
  color: var(--text-white);
}

.card--glass .card__desc {
  color: var(--text-muted-2);
}

/* Variante glassmorphism para fundo claro */
.section--light .card--glass {
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.section--light .card--glass::before {
  background: linear-gradient(to right, rgba(255, 255, 255, 0.8), transparent 70%);
}

.section--light .card--glass:hover {
  background: rgba(255, 255, 255, 0.75);
  border-color: var(--brand-orange-20);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.08);
}

.section--light .card--glass .card__title {
  color: var(--text-dark);
}

.section--light .card--glass .card__desc {
  color: var(--text-dark-muted);
}

/* Grid Canais de Venda — 3 colunas com ML destaque */
.glass-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: var(--space-md);
}

.glass-grid__hero {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

/* ── TICKER INFINITO ───────────────────────── */
/* Barra de scroll infinito com credenciais */
.ticker {
  background: var(--brand-orange);
  overflow: hidden;
  padding: 14px 0;
  position: relative;
}

.ticker__track {
  display: flex;
  width: max-content;
  animation: tickerScroll 30s linear infinite;
}

.ticker:hover .ticker__track {
  animation-play-state: paused;
}

.ticker__item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 32px;
  font-family: var(--ff-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.88);
}

.ticker__sep {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  flex-shrink: 0;
}

@keyframes tickerScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ── ICON DRAW (SVG stroke animation) ──────── */
/* Icones que se "desenham" ao entrar na viewport */
.icon-draw {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.8s var(--ease-out);
}

.icon-draw--visible {
  stroke-dashoffset: 0;
}

/* ══════════════════════════════════════════════
   UPGRADE VISUAL v3 — Componentes Editorial
   Layouts unicos por secao — anti-IA
   ══════════════════════════════════════════════ */

/* ── BENTO GRID ────────────────────────────── */
/* Grid estilo bento box — tamanhos assimétricos */
.bento {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  grid-template-rows: auto auto;
  gap: var(--space-md);
}

.bento__hero {
  grid-row: 1 / 3;
}

.bento__item {
  min-height: 200px;
}

/* ── MANIFESTO ─────────────────────────────── */
/* Layout split: lado dim (riscado) vs lado highlight */
.manifesto {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  min-height: 50vh;
}

.manifesto__dim {
  padding: var(--space-3xl) var(--space-2xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-lg);
  position: relative;
}

/* Linha diagonal separadora */
.manifesto__dim::after {
  content: '';
  position: absolute;
  right: 0;
  top: 10%;
  bottom: 10%;
  width: 1px;
  background: var(--gradient-edge-line);
}

.manifesto__dim p {
  font-family: var(--ff-body);
  font-size: var(--fs-body-lg);
  color: var(--text-muted-4);
  text-decoration: line-through;
  text-decoration-color: rgba(212, 80, 10, 0.3);
  line-height: 2;
}

.manifesto__highlight {
  padding: var(--space-3xl) var(--space-2xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-lg);
}

.manifesto__highlight p {
  font-family: var(--ff-heading);
  font-size: var(--fs-body-lg);
  font-weight: 700;
  color: var(--text-white);
  line-height: 2;
  position: relative;
  padding-left: var(--space-lg);
}

.manifesto__highlight p::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-orange);
}

/* ── HERO METRICS (inline no hero) ─────────── */
/* Métricas em linha horizontal dentro do hero */
.hero-metrics {
  display: flex;
  gap: var(--space-2xl);
  padding-top: var(--space-2xl);
  border-top: 1px solid var(--border-card);
  margin-top: var(--space-2xl);
}

.hero-metrics__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hero-metrics__value {
  font-family: var(--ff-heading);
  font-weight: 900;
  font-size: clamp(24px, 3vw, 36px);
  letter-spacing: -0.03em;
  color: var(--text-white);
}

.hero-metrics__label {
  font-size: var(--fs-xs);
  color: var(--text-muted-3);
  letter-spacing: 0.05em;
}

/* ── HERO BACKGROUND IMAGE (KV) ────────────── */
/* Key Visual de fundo do hero da home */
/* Usa <picture> com srcset para responsividade */

.hero {
  position: relative;
  overflow: hidden;
}

/* Hero fullscreen: ocupa viewport inteira em desktop.
   min() garante minimo de 520px quando 100vh for menor
   (caso classico: mobile landscape com 411px de altura). */
.hero--fullscreen {
  min-height: max(520px, 100vh);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 72px;
}

/* Em viewports realmente baixos (landscape mobile, ex. 411px),
   abrimos mao do 100vh e deixamos o conteudo respirar */
@media (max-height: 600px) and (orientation: landscape) {
  .hero--fullscreen {
    min-height: auto;
    padding-top: calc(72px + var(--space-lg));
    padding-bottom: var(--space-xl);
  }
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  animation: heroBgFadeIn 1.2s var(--ease-out) 0.2s forwards;
}

.hero-bg__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.04);
  animation: heroBgZoomOut 2.4s var(--ease-out) 0.2s forwards;
}

/* Overlay dark para garantir legibilidade do texto */
/* Desktop: gradiente horizontal (texto a esquerda, imagem a direita) */
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(15, 13, 11, 0.88) 0%,
    rgba(15, 13, 11, 0.65) 45%,
    rgba(15, 13, 11, 0.35) 100%
  );
  z-index: 1;
}

/* Tablet e mobile: gradiente mais uniforme para texto centralizado */
@media (max-width: 1024px) {
  .hero-bg::after {
    background: linear-gradient(
      to bottom,
      rgba(15, 13, 11, 0.55) 0%,
      rgba(15, 13, 11, 0.75) 50%,
      rgba(15, 13, 11, 0.9) 100%
    );
  }
}

@keyframes heroBgFadeIn {
  to { opacity: 1; }
}

@keyframes heroBgZoomOut {
  to { transform: scale(1); }
}

/* Acessibilidade: desabilitar animacoes se preferencia do usuario */
@media (prefers-reduced-motion: reduce) {
  .hero-bg {
    animation: none;
    opacity: 1;
  }
  .hero-bg__img {
    animation: none;
    transform: none;
  }
}

/* ── NUMBER ART ────────────────────────────── */
/* Números gigantes como elemento visual */
.number-art {
  font-family: var(--ff-heading);
  font-weight: 900;
  font-size: clamp(100px, 18vw, 240px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--text-white);
  opacity: 0.06;
  user-select: none;
  pointer-events: none;
}

/* Versao visivel (com cor) */
.number-art--visible {
  opacity: 1;
  font-size: clamp(72px, 12vw, 160px);
  color: var(--brand-orange);
}

/* ── SPLIT ASYMMETRIC ──────────────────────── */
/* Layout split com proporções desiguais */
.split-asym {
  display: grid;
  grid-template-columns: 0.4fr 1fr;
  gap: var(--space-3xl);
  align-items: center;
}

.split-asym--reverse {
  grid-template-columns: 1fr 0.4fr;
}

/* ── NOISE TEXTURE OVERLAY ─────────────────── */
/* Adiciona granulação sutil ao fundo */
.noise-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
}

/* ── STEP COUNTER (número gigante decorativo por seção) ── */
.step-counter {
  font-family: var(--ff-heading);
  font-weight: 900;
  font-size: clamp(140px, 20vw, 260px);
  line-height: 1;
  letter-spacing: -0.06em;
  color: rgba(255, 255, 255, 0.025);
  user-select: none;
  transition: color 0.5s var(--ease-out);
}

/* ══════════════════════════════════════════════
   UPGRADE v4 — 5 Camadas de Craft Premium
   ══════════════════════════════════════════════ */

/* ── CAMADA 1: TEXTURA E PROFUNDIDADE ──────── */

/* Grid lines decorativas — linhas verticais que cruzam a página */
.page-grid::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.025) 0px,
    transparent 1px,
    transparent 200px
  );
  pointer-events: none;
  z-index: 0;
}

/* Gradient mesh no hero — 3 camadas de gradientes quentes */
.hero-mesh::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 15% 60%, rgba(212, 80, 10, 0.09) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 20%, rgba(180, 50, 5, 0.06) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 90%, rgba(255, 120, 40, 0.04) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}

/* Noise grain com opacidade aumentada */
.noise-heavy::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 512px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.75;
}

/* Transição gradiente entre seções dark→light */
.section-fade::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to bottom, var(--bg-primary), transparent);
  z-index: 2;
  pointer-events: none;
}

/* Transição light→dark */
.section-fade--reverse::before {
  background: linear-gradient(to bottom, var(--bg-light), transparent);
}

/* ── CAMADA 2: TIPOGRAFIA COM PERSONALIDADE ── */

/* Eyebrow premium — tracking ultra-wide */
.eyebrow--wide {
  letter-spacing: 0.5em;
  font-size: 10px;
  opacity: 0.5;
}

/* Texto que sangra para fora do container */
.bleed-left {
  margin-left: calc(-1 * var(--gutter));
  padding-left: var(--gutter);
}

.bleed-right {
  margin-right: calc(-1 * var(--gutter));
  padding-right: var(--gutter);
}

/* Numeração lateral de seções */
.section-number {
  position: absolute;
  left: var(--space-lg);
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  font-family: var(--ff-heading);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.3em;
  color: var(--text-disabled);
  opacity: 0.4;
  writing-mode: vertical-lr;
  transform-origin: center;
  pointer-events: none;
  z-index: 1;
}

/* Letra decorativa como background de seção */
.section-letter {
  position: absolute;
  font-family: var(--ff-heading);
  font-weight: 900;
  font-size: clamp(300px, 50vw, 600px);
  line-height: 0.8;
  color: rgba(255, 255, 255, 0.015);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* ── CAMADA 3: MICRO-INTERAÇÕES ────────────── */

/* Tilt 3D nos cards */
.card-tilt {
  transform-style: preserve-3d;
  transition: transform 0.15s ease-out;
  will-change: transform;
}

/* Text reveal com clip-path */
.text-reveal {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.text-reveal--visible {
  clip-path: inset(0 0 0 0);
}

/* Fallback: se clip-path não suportado, usar opacity */
@supports not (clip-path: inset(0)) {
  .text-reveal {
    clip-path: none;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
  }
  .text-reveal--visible {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Magnetic button */
.btn--magnetic {
  transition: transform 0.25s cubic-bezier(0.23, 1, 0.32, 1);
  will-change: transform;
}

/* Border draw animation no hover */
.border-draw {
  position: relative;
}

.border-draw::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--brand-orange);
  border-radius: inherit;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
  pointer-events: none;
}

.border-draw:hover::after {
  opacity: 0.4;
  transform: scale(1);
}

/* ── CAMADA 4: SCROLL PROGRESS BAR ────────── */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-orange), rgba(255, 120, 40, 0.8));
  z-index: calc(var(--z-nav) + 1);
  transition: width 0.1s linear;
  pointer-events: none;
}

/* ── CAMADA 5: DETALHES DE CRAFT ───────────── */

/* Micro-text decorativo */
.micro-text {
  font-family: var(--ff-body);
  font-size: 8px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-disabled);
  opacity: 0.3;
  pointer-events: none;
  user-select: none;
}

/* Separador visual: linha com dot central */
.divider-dot {
  display: flex;
  align-items: center;
  gap: 0;
  margin: var(--space-3xl) auto;
  max-width: 200px;
}

.divider-dot::before,
.divider-dot::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-card));
}

.divider-dot::after {
  background: linear-gradient(90deg, var(--border-card), transparent);
}

.divider-dot span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-orange);
  opacity: 0.4;
  flex-shrink: 0;
  margin: 0 var(--space-md);
}

/* Separador: onda SVG sutil */
.divider-wave {
  width: 100%;
  height: 40px;
  overflow: hidden;
  opacity: 0.06;
}

/* Sombras com cor (brand-orange, não preto) */
.shadow-brand {
  box-shadow: 0 8px 40px rgba(212, 80, 10, 0.08), 0 2px 8px rgba(212, 80, 10, 0.04);
}

.shadow-brand:hover {
  box-shadow: 0 16px 60px rgba(212, 80, 10, 0.15), 0 4px 12px rgba(212, 80, 10, 0.08);
}

/* ── MAP TOOLTIP ─────────────────────────────── */

.map-tooltip {
  position: absolute;
  background: var(--overlay-heavy);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(34, 31, 29, 0.8);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s, transform 0.2s;
  z-index: 100;
  min-width: 220px;
  font-family: var(--ff-body);
}

.map-tooltip__name {
  font-weight: 700;
  font-size: 15px;
  color: var(--text-white);
  margin-bottom: 8px;
}

.map-tooltip__row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.map-tooltip__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.map-tooltip__label {
  font-size: 12px;
  color: var(--text-muted-3);
}

.map-tooltip__value {
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
}

.map-tooltip__footer {
  font-size: 10px;
  color: var(--text-muted-4);
  margin-top: 8px;
}

/* Form error banner extraido para css/forms.css */

/* ── LEGEND DOTS (prazos de entrega em #logistica) ── */
/* Lista horizontal de legendas com "bolinha" colorida antes do texto */
.legend-dots {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-top: var(--space-lg);
}

.legend-dot {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-small);
  color: var(--text-muted-3);
}

.legend-dot__swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

/* ── BRAZIL MAP (SVG interativo populado por js/map.js em #logistica) ─── */
.brazil-map {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}

/* ── UTILITARIOS ─────────────────────────────── */
/* Destaque inline laranja sem italico (substitui o <em> default do browser).
   Usado em titulos que intercalam texto normal + palavra-chave destacada. */
.u-highlight-orange {
  color: var(--brand-orange);
  font-style: normal;
}

/* ══════════════════════════════════════════════
   ARTICLE PAGES — título hero e estrutura editorial
   Aplicado nas páginas /guia-*, /politica-* e /vender-*.
   Substitui 8 inline styles repetidos em cada página.
   ══════════════════════════════════════════════ */
.article__hero-title {
  font-family: var(--ff-heading);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 900;
  color: var(--text-white);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-top: var(--space-md);
  margin-bottom: var(--space-md);
  text-wrap: balance;
}

/* ══════════════════════════════════════════════
   DESIGN POLISH — Fase 2
   Camadas, profundidade, texturas e tipografia afinada.
   Aplicado em cima da arquitetura existente sem
   alterar estrutura HTML.
   ══════════════════════════════════════════════ */

/* ── AMBIENT LIGHT (radial estatico) ─────────── */
/* Aplica um glow radial emanando do centro-topo da secao.
   Usar em secoes dark que precisam "respirar".
   Opacidade baixa, estatico (nao compete com halo animado
   de #numeros, que e mais dramatico). */
.section--lit {
  position: relative;
  isolation: isolate;
}

.section--lit::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 80% 50% at 50% 0%,
    rgba(212, 80, 10, 0.06) 0%,
    rgba(212, 80, 10, 0.02) 30%,
    transparent 70%
  );
  pointer-events: none;
  z-index: -1;
}

/* Variante "bottom" — ambient light que sobe do rodape */
.section--lit-bottom::before {
  background: radial-gradient(
    ellipse 70% 40% at 50% 100%,
    rgba(212, 80, 10, 0.05) 0%,
    transparent 70%
  );
}

/* ── SECTION FADE — transicoes entre paletas ──── */
/* Gradient sutil no topo de secoes light que vem
   depois de secoes dark, suavizando a transicao */
.section-fade-dark-to-light {
  position: relative;
}

.section-fade-dark-to-light::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(
    to bottom,
    rgba(15, 13, 11, 0.25) 0%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Inverso: secao dark depois de light */
.section-fade-light-to-dark::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(
    to bottom,
    rgba(240, 237, 230, 0.18) 0%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* ── GRADIENT BORDER ────────────────────────── */
/* Borda decorativa com gradient laranja radial.
   Usar via classe .border-gradient em elementos premium.
   Funciona em cima de qualquer background (mask compose). */
.border-gradient {
  position: relative;
}

.border-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(212, 80, 10, 0.45) 0%,
    rgba(212, 80, 10, 0.10) 40%,
    transparent 70%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out);
}

.border-gradient:hover::before,
.border-gradient:focus-within::before {
  opacity: 1;
}

/* Variante "always on" — gradient border sempre visivel */
.border-gradient--always::before {
  opacity: 1;
}

/* ── TIPOGRAFIA AFINADA ─────────────────────── */
/* Balance em titulos de secao evita linhas orfas
   (viuva em ultima linha). Suporte moderno, fallback
   gracioso para browsers sem suporte. */
.section-header__title,
.pillar__title,
.pillars__lede,
.video-split__title,
.team-card__name,
.channels__intro {
  text-wrap: balance;
}

/* Numerais tabulares em metricas e chips: alinhamento
   vertical perfeito em grids de numero */
.metric-stage__value,
.counter,
.pillar__chip,
.team-card__badge,
.video-split__meta-value,
.stat-item__value {
  font-variant-numeric: tabular-nums;
}

/* Subpixel antialiasing (Satoshi fica melhor) */
.hero__title,
.section-header__title,
.pillar__title,
.video-split__title,
.team-card__name {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── ELEVATION UTILITIES ────────────────────── */
.elev-1 { box-shadow: var(--elev-1); }
.elev-2 { box-shadow: var(--elev-2); }
.elev-3 { box-shadow: var(--elev-3); }

/* ── NOISE SUTIL (versao leve) ──────────────── */
/* Versao de noise mais leve que .noise-heavy,
   para aplicar em secoes onde o grao deve ser
   quase imperceptivel */
.noise-subtle {
  position: relative;
}

.noise-subtle::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.4'/></svg>");
  opacity: 0.035;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
}

/* ══════════════════════════════════════════════
   ROADMAP — cards horizontais com estados
   visuais (done/active/planned), numeral editorial
   e linha conectora sutil entre fases.
   Dependencias: tokens.css, animations.css (.reveal)
   ══════════════════════════════════════════════ */

.roadmap {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Linha conectora horizontal sutil passando na altura
   do numeral editorial — sugere progressao temporal */
.roadmap::before {
  content: "";
  position: absolute;
  top: 38px;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--border-light) 12%,
    var(--border-light) 88%,
    transparent
  );
  z-index: 0;
  pointer-events: none;
}

/* Card base — altura uniforme via flex column + grid stretch */
.roadmap-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-xl);
  background: var(--bg-light-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  transition: transform var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out),
              border-color var(--duration-normal) var(--ease-out);
  z-index: 1;
}

.roadmap-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.04),
    0 16px 48px rgba(0, 0, 0, 0.08);
}

/* Header com numeral editorial + status */
.roadmap-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}

/* Numeral editorial — mesmo padrao dos pilares de #servicos,
   stroke outline que acende quando card eh done/active */
.roadmap-card__number {
  font-family: var(--ff-heading);
  font-weight: 900;
  font-size: clamp(36px, 3.5vw, 48px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1px var(--border-light);
}

.roadmap-card--done .roadmap-card__number {
  -webkit-text-stroke-color: var(--brand-orange);
  color: rgba(212, 80, 10, 0.08);
}

.roadmap-card--active .roadmap-card__number {
  -webkit-text-stroke-color: var(--brand-orange);
  color: rgba(212, 80, 10, 0.15);
}

/* Status badge (canto superior direito do header) */
.roadmap-card__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ff-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.roadmap-card--done .roadmap-card__status {
  color: var(--brand-orange);
}

.roadmap-card--active .roadmap-card__status {
  color: var(--brand-orange);
}

.roadmap-card--planned .roadmap-card__status {
  color: var(--text-dark-muted);
}

.roadmap-card__status-icon {
  flex-shrink: 0;
}

/* Dot pulsante — status "em andamento" */
.roadmap-card__status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-orange);
  box-shadow: 0 0 0 0 rgba(212, 80, 10, 0.4);
  animation: roadmapStatusPulse 2s var(--ease-in-out) infinite;
}

@keyframes roadmapStatusPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 80, 10, 0.5); }
  50% { box-shadow: 0 0 0 6px rgba(212, 80, 10, 0); }
}

/* Circle outline — status "planejado" (discreto) */
.roadmap-card__status-circle {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  opacity: 0.6;
}

/* Kicker "Fase N" — numeração redundante mas explicita */
.roadmap-card__phase {
  font-family: var(--ff-heading);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-orange);
}

.roadmap-card--planned .roadmap-card__phase {
  color: var(--text-dark-muted);
}

/* Titulo compacto — 22px max evita quebras feias em 4-col */
.roadmap-card__title {
  font-family: var(--ff-heading);
  font-weight: 800;
  font-size: clamp(18px, 1.6vw, 22px);
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--text-dark);
  margin: 0;
  text-wrap: balance;
}

.roadmap-card__period {
  font-family: var(--ff-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-dark-muted);
}

/* Checklist ancorada no fim do card (altura igual entre cards) */
.roadmap-card__checklist {
  list-style: none;
  padding: var(--space-md) 0 0;
  margin: auto 0 0;
  border-top: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.roadmap-card__checklist li {
  position: relative;
  padding-left: var(--space-md);
  font-family: var(--ff-body);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--text-dark-soft);
}

/* Marker por estado: done = check, active = dot cheio, planned = dot outline */
.roadmap-card--done .roadmap-card__checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--brand-orange);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.5;
}

.roadmap-card--active .roadmap-card__checklist li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-orange);
}

.roadmap-card--planned .roadmap-card__checklist li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1px solid var(--text-dark-muted);
  opacity: 0.5;
}

/* ── ESTADOS DO CARD ──────────────────────── */

/* Done: borda laranja 1px sóbria */
.roadmap-card--done {
  border-color: rgba(212, 80, 10, 0.35);
}

/* Active: borda laranja 2px + shadow warm + glow sutil */
.roadmap-card--active {
  border: 2px solid var(--brand-orange);
  padding: calc(var(--space-xl) - 1px);
  box-shadow:
    0 8px 32px rgba(212, 80, 10, 0.14),
    0 0 0 4px rgba(212, 80, 10, 0.04);
}

/* Planned: borda tracejada discreta (ao inves de opacity rude) */
.roadmap-card--planned {
  border-style: dashed;
  border-color: rgba(0, 0, 0, 0.12);
  background: rgba(255, 255, 255, 0.6);
}

.roadmap-card--planned .roadmap-card__title {
  color: var(--text-dark-muted);
}

/* Badge "Você entra aqui" — posicionado no canto, não transborda */
.roadmap-card__badge {
  position: absolute;
  top: -14px;
  right: var(--space-lg);
  display: inline-flex;
  align-items: center;
  background: var(--brand-orange);
  color: var(--text-white);
  font-family: var(--ff-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(212, 80, 10, 0.32);
  z-index: 2;
}

/* ── RESPONSIVO ───────────────────────────── */

@media (max-width: 1024px) {
  .roadmap {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Linha conectora não faz sentido em 2x2 */
  .roadmap::before {
    display: none;
  }
}

@media (max-width: 768px) {
  .roadmap {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  .roadmap-card__badge {
    top: -12px;
    right: var(--space-md);
  }
}

/* ══════════════════════════════════════════════
   COMPARE PAIRS — Seção #por-que
   Cards horizontais pareados "CT vs Seller típico".
   Cada card eh uma dimensao de contraste, com
   setas direcionais e divisoria vertical sutil.
   Dependencias: tokens.css, animations.css
   ══════════════════════════════════════════════ */

.compare__header {
  max-width: 640px;
  margin: 0 auto var(--space-3xl);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.compare__lede {
  font-size: var(--fs-body-lg);
  color: var(--text-dark-muted);
  line-height: 1.6;
  font-style: italic;
  margin: 0;
}

.compare {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 1000px;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.compare__pair {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-light-card);
  border: 1px solid var(--border-light);
  transition: transform var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out),
              border-color var(--duration-normal) var(--ease-out);
}

.compare__pair:hover {
  transform: translateY(-3px);
  border-color: rgba(212, 80, 10, 0.25);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.04),
    0 16px 48px rgba(0, 0, 0, 0.08);
}

/* Divisoria vertical sutil entre os dois lados do par */
.compare__pair::before {
  content: "";
  position: absolute;
  top: 18%;
  bottom: 18%;
  left: 50%;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--brand-orange) 50%,
    transparent
  );
  opacity: 0.35;
  transition: opacity var(--duration-normal) var(--ease-out);
  pointer-events: none;
}

.compare__pair:hover::before {
  opacity: 0.65;
}

/* Lado (CT ou Seller) — container compartilhado */
.compare__side {
  position: relative;
  padding: var(--space-xl) var(--space-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* Marcador de seta no canto superior do lado */
.compare__marker {
  position: absolute;
  top: var(--space-lg);
  font-family: var(--ff-heading);
  font-weight: 900;
  font-size: 28px;
  line-height: 1;
  user-select: none;
  transition: transform var(--duration-normal) var(--ease-out),
              text-shadow var(--duration-normal) var(--ease-out);
}

.compare__side--ct .compare__marker {
  right: var(--space-lg);
  color: var(--brand-orange);
}

.compare__side--seller .compare__marker {
  left: var(--space-lg);
  color: var(--text-dark-muted);
  opacity: 0.45;
}

.compare__pair:hover .compare__side--ct .compare__marker {
  transform: translateY(-2px) scale(1.08);
  text-shadow: 0 0 16px rgba(212, 80, 10, 0.35);
}

/* Kicker pequeno — "Compra Turbo" / "Seller típico" */
.compare__kicker {
  font-family: var(--ff-heading);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.compare__side--ct .compare__kicker {
  color: var(--brand-orange);
}

.compare__side--seller .compare__kicker {
  color: var(--text-dark-muted);
  opacity: 0.6;
}

/* Titulo forte do lado (CT afirmativo / Seller critico) */
.compare__title {
  font-family: var(--ff-heading);
  font-weight: 800;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}

.compare__side--ct .compare__title {
  color: var(--text-dark);
}

.compare__side--seller .compare__title {
  color: var(--text-dark-soft);
}

/* Descricao */
.compare__desc {
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  margin: 0;
}

.compare__side--ct .compare__desc {
  color: var(--text-dark-soft);
}

.compare__side--seller .compare__desc {
  color: var(--text-dark-muted);
}

/* Lado Seller: fundo ligeiramente off-white para differenciar sem apagar */
.compare__side--seller {
  background: var(--bg-light);
}