/* Franco — CSS compartilhado das páginas (home, /produto, /como-funciona, /blog).
   Extraído do index.html. O script de tema (anti-flash) permanece inline em cada página. */

/* ═════════════════════════════════════════════════════════
   FRANCO — DESIGN TOKENS
═════════════════════════════════════════════════════════ */
:root {
  /* Paleta Franco */
  --petroleo: #0B2A33;
  --petroleo-deep: #061A20;
  --petroleo-light: #1A3F48;
  --petroleo-lighter: #2B5560;
  --verde: #4ADE80;
  --verde-ink: #4ADE80;
  --verde-on-light: #14742F;
  --verde-bright: #5FE693;
  --verde-dim: #22C55E;
  --verde-soft: rgba(74, 222, 128, 0.12);
  --verde-border: rgba(74, 222, 128, 0.22);
  --creme: #F5F2EA;
  --surface-band: #F5F2EA;
  --ink-band: #0B2A33;
  --creme-dark: #ECE8DD;
  --creme-darker: #D9D4C4;
  --tinta: #0A1419;
  --cinza: #64748B;
  --cinza-light: #94A3B8;
  --cinza-lighter: #B8C2CC;
  --branco: #FFFFFF;
  --sucesso: #10B981;
  --atencao: #F59E0B;
  --erro: #EF4444;

  /* Bordas */
  --border-dark: rgba(245, 242, 234, 0.08);
  --border-dark-strong: rgba(245, 242, 234, 0.15);
  --border-light: rgba(11, 42, 51, 0.08);
  --border-light-strong: rgba(11, 42, 51, 0.15);

  /* Tipografia */
  --font-display: 'Instrument Serif', Georgia, serif;
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', 'SF Mono', Monaco, monospace;

  /* Raios */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
}

/* ═════════════════════════════════════════════════════════
   TEMA CLARO (toggle no canto superior direito do nav)
═════════════════════════════════════════════════════════ */
html.theme-light {
  --petroleo: #FAF7F0;
  --petroleo-deep: #FFFFFF;
  --petroleo-light: #F0EBDF;
  --petroleo-lighter: #E5DFD0;
  --verde: #22C55E;
  --verde-ink: #15803D;
  --verde-bright: #16A34A;
  --verde-dim: #15803D;
  --verde-soft: rgba(34, 197, 94, 0.10);
  --verde-border: rgba(34, 197, 94, 0.30);
  --creme: #0B2A33;
  --surface-band: #FAF7F0;
  --ink-band: #0B2A33;
  --creme-dark: #1A3F48;
  --creme-darker: #2B5560;
  --tinta: #FAF7F0;
  --cinza: #64748B;
  --cinza-light: #475569;
  --cinza-lighter: #334155;
  --branco: #0B2A33;
  --border-dark: rgba(11, 42, 51, 0.08);
  --border-dark-strong: rgba(11, 42, 51, 0.18);
  --border-light: rgba(11, 42, 51, 0.10);
  --border-light-strong: rgba(11, 42, 51, 0.20);
}

/* Cards e seções claras ganham sombra sutil pra ter profundidade */
html.theme-light .card,
html.theme-light .kpi-card,
html.theme-light .pricing-card,
html.theme-light .stat-card,
html.theme-light .number-card,
html.theme-light .step-card {
  box-shadow: 0 1px 2px rgba(11, 42, 51, 0.04), 0 4px 14px rgba(11, 42, 51, 0.05);
}

/* Overrides específicos pra elementos com cor hardcoded ou que precisam manter contraste */
html.theme-light .nav {
  background: rgba(255, 255, 255, 0.86);
  border-bottom: 0.5px solid rgba(11, 42, 51, 0.10);
}
html.theme-light .nav-link { color: #0B2A33; }
html.theme-light .nav-link:hover { color: #22C55E; }
html.theme-light .brand-mono { color: #0B2A33 !important; }   /* F sempre escuro dentro do bloco verde */
html.theme-light .btn-primary { color: #FFFFFF !important; }  /* texto branco em botão verde fica melhor */
html.theme-light .btn-primary:hover { color: #FFFFFF !important; }
html.theme-light .offer-cta { color: #FFFFFF !important; }  /* mesmo tratamento do botão verde primário */
html.theme-light .offer-cta:hover { color: #FFFFFF !important; }
html.theme-light .hero::after {
  background: radial-gradient(circle, rgba(245, 230, 200, 0.4) 0%, transparent 60%);
}
html.theme-light .hero::before {
  background: radial-gradient(circle, rgba(34, 197, 94, 0.06) 0%, transparent 55%);
}
html.theme-light .hero-h1 em::after {
  background: rgba(34, 197, 94, 0.15);
}
/* Footer fica branco fixo no claro */
html.theme-light .footer {
  background: #FFFFFF;
  border-top: 0.5px solid rgba(11, 42, 51, 0.08);
}
/* No claro, Números/Missão/Planos igualam ao creme das demais faixas
   (no escuro seguem o petroleo-deep, tom de profundidade proposital) */
html.theme-light .mission,
html.theme-light .section-plans,
html.theme-light .cta-final {
  background: var(--petroleo);
}
/* Banner WhatsApp FAB mantém escuro */
html.theme-light .wa-fab {
  background: #0B2A33;
  color: #4ADE80;
}
/* Modais já são claros no dark, no light fica mais claros ainda */
html.theme-light .modal {
  background: #FFFFFF !important;
  color: #0B2A33 !important;
}
html.theme-light .modal-close { color: #0B2A33; }
html.theme-light .modal-close:hover { background: rgba(11,42,51,0.06); }
html.theme-light .modal-body-prose,
html.theme-light .modal-body-prose p,
html.theme-light .modal-body-prose li,
html.theme-light .modal-body-prose h4 { color: #0B2A33 !important; }
html.theme-light .form-row label,
html.theme-light .form-row input,
html.theme-light .form-row textarea,
html.theme-light .form-row select {
  color: #0B2A33;
}
html.theme-light .form-row input,
html.theme-light .form-row textarea,
html.theme-light .form-row select {
  background: #FAF7F0;
  border-color: rgba(11, 42, 51, 0.18);
}
/* Cards de conteúdo que viram brancos no tema claro.
   LISTA EXPLÍCITA (após 3ª colisão do antigo [class*="card"]): só as classes
   legítimas, medidas como brancas no tema claro. Cards designados-escuros
   (bento-card, hc-card, scorecard, card-msg do telefone/hero) NÃO entram. */
html.theme-light .number-card,
html.theme-light .stat-card,
html.theme-light .spec-card,
html.theme-light .offer-card,
html.theme-light .dois-jeitos-card {
  background: #FFFFFF;
}

/* Botão flutuante de troca de tema */
.theme-toggle {
  position: fixed;
  top: 20px;
  right: 22px;
  z-index: 999;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0.5px solid var(--border-dark-strong);
  background: var(--petroleo-deep);
  color: var(--creme);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 10px rgba(0,0,0,0.18);
}
.theme-toggle:hover {
  transform: rotate(15deg) scale(1.05);
  border-color: var(--verde);
}
.theme-toggle .ico-sun  { display: none; }
.theme-toggle .ico-moon { display: block; }
html.theme-light .theme-toggle .ico-sun  { display: block; }
html.theme-light .theme-toggle .ico-moon { display: none; }

/* ═════════════════════════════════════════════════════════
   RESET
═════════════════════════════════════════════════════════ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-sans);
  background: var(--petroleo);
  color: var(--creme);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
button { font-family: inherit; }
a { text-decoration: none; color: inherit; }

.container { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
@media (max-width: 768px) { .container { padding: 0 20px; } }

/* Utilities */
.only-desktop { display: block; }
.only-mobile { display: none; }
@media (max-width: 768px) {
  .only-desktop { display: none; }
  .only-mobile { display: block; }
}

/* ═════════════════════════════════════════════════════════
   NAV
═════════════════════════════════════════════════════════ */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(11, 42, 51, 0.82);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 0.5px solid var(--border-dark);
}
.nav-inner {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 40px; max-width: 1280px; margin: 0 auto;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mono {
  width: 32px; height: 32px; border-radius: 7px;
  background: var(--verde); color: var(--petroleo);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px; letter-spacing: -0.5px;
  font-family: var(--font-sans);
  box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.4);
  transition: box-shadow 0.3s ease;
}
.brand:hover .brand-mono { box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.15); }
.brand-word {
  font-size: 22px; font-weight: 400; letter-spacing: -0.5px;
  color: var(--creme);
  font-family: var(--font-display);
  font-style: italic;
  transform: translateY(1px);
}
.nav-menu { display: flex; gap: 36px; align-items: center; }
.nav-link {
  font-size: 13px; color: var(--cinza-light); font-weight: 400;
  transition: color 0.2s ease;
}
.nav-link:hover { color: var(--creme); }
.nav-login {
  padding: 9px 16px;
  font-size: 13px; font-weight: 500;
  color: var(--creme);
  background: transparent;
  border: 0.5px solid var(--border-dark-strong);
  border-radius: 8px;
  transition: all 0.2s ease;
  text-decoration: none;
}
.nav-login:hover {
  border-color: var(--creme);
  background: rgba(245,242,234,0.04);
}
/* "Acesso à plataforma": destaque em verde. Superfície = var(--verde);
   tinta = #0B2A33 HARDCODED (não token) porque --petroleo inverte pra claro no
   tema light e quebraria o contraste sobre o verde. Alvo só o link /app/ — o
   "Falar com a Franco" (mesma classe) fica inalterado. */
.nav-login[href="/app/"] {
  background: var(--verde);
  color: #0B2A33;
  border-color: transparent;
  font-weight: 600;
}
.nav-login[href="/app/"]:hover {
  background: var(--verde-bright);
  border-color: transparent;
  color: #0B2A33;
}
.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  flex-direction: column; gap: 5px; padding: 8px;
}
.nav-toggle span {
  width: 22px; height: 2px; background: var(--creme); border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* skip-link (a11y) */
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus {
  left: 12px; top: 12px; z-index: 999;
  background: var(--verde); color: var(--petroleo-deep);
  padding: 8px 14px; border-radius: 8px; font-weight: 600; font-size: 13px;
}

@media (max-width: 768px) {
  /* menu mobile — hambúrguer + drawer */
  /* margin-right libera o .theme-toggle flutuante (fixed top:20 right:22, 40px)
     que senão colidiria com o hambúrguer no canto superior direito. */
  .nav-toggle { display: inline-flex; margin-right: 48px; }
  .nav-menu {
    position: fixed; inset: 58px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--petroleo-deep); border-bottom: 0.5px solid var(--border-dark);
    padding: 12px 20px 20px; transform: translateY(-130%);
    transition: transform .25s ease; box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    z-index: 90;
  }
  .nav-menu[data-open] { transform: translateY(0); }
  .nav-menu .nav-link { display: block; padding: 14px 0; font-size: 15px; }
  .nav-menu .nav-login {
    display: block; text-align: center; margin-top: 8px; font-size: 14px;
  }
  .nav-inner { padding: 14px 20px; }
}

/* Desktop: o .theme-toggle é fixed (right:22px, 40px) e, em larguras onde o nav
   encosta na borda direita (até ~1340px), cobriria o "Acesso à plataforma".
   Reserva espaço à direita só nessa faixa — em 1440/1920 já há folga natural. */
@media (min-width: 769px) and (max-width: 1340px) {
  .nav-inner { padding-right: 84px; }
}

/* ═════════════════════════════════════════════════════════
   HERO
═════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  padding: 0;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  top: -10%; right: -15%;
  width: 900px; height: 900px;
  background: radial-gradient(circle, rgba(74,222,128,0.10) 0%, transparent 55%);
  pointer-events: none;
  animation: floatGlow 20s ease-in-out infinite;
}
.hero::after {
  content: "";
  position: absolute;
  bottom: -20%; left: -15%;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(26, 63, 72, 0.6) 0%, transparent 60%);
  pointer-events: none;
}
@keyframes floatGlow {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-40px, 40px) scale(1.05); }
}

.hero-grid {
  display: grid; grid-template-columns: 1fr;
  max-width: 760px;
  align-items: center; position: relative; z-index: 1;
}

/* Linha de posicionamento do hero. Deixou de ser pílula miúda: agora é uma
   linha de destaque (maior, mais peso e contraste), com uma barra verde à
   esquerda. Continua abaixo do H1 na hierarquia — não compete com ele. */
.hero-tag {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-mono);
  font-size: 15px; font-weight: 500; letter-spacing: 0.4px;
  color: var(--creme);
  padding: 10px 0 10px 18px;
  border-left: 2px solid var(--verde);
  margin-bottom: 28px;
  line-height: 1.35;
  animation: fadeUp 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s both;
}
.hero-tag .hf { font-weight: 600; }
.hero-tag-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--verde);
  box-shadow: 0 0 12px var(--verde);
  flex: 0 0 auto;
  animation: pulse 2.5s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}

.hero-h1 {
  font-family: var(--font-display);
  font-size: clamp(48px, 7vw, 92px);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -2.5px;
  color: var(--creme);
  margin-bottom: 32px;
  animation: fadeUp 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s both;
}
.hero-h1 em {
  font-style: italic;
  color: var(--verde);
  font-weight: 400;
  position: relative;
}
.hero-h1 em::after {
  content: "";
  position: absolute; bottom: 8px; left: 0; right: 0; height: 8px;
  background: var(--verde-soft);
  border-radius: 2px; z-index: -1;
}

.hero-sub {
  font-size: 18px; line-height: 1.6;
  color: var(--cinza-lighter);
  max-width: 540px;
  margin-bottom: 44px;
  animation: fadeUp 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s both;
}

.hero-ctas { display: flex; gap: 12px; margin-bottom: 56px; flex-wrap: wrap;
  animation: fadeUp 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s both; }

.btn {
  padding: 15px 26px;
  border-radius: 9px; font-size: 14px; font-weight: 500;
  border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}
.btn-primary { background: var(--verde); color: var(--petroleo); }
.btn-primary:hover {
  background: var(--verde-bright); transform: translateY(-2px);
  box-shadow: 0 16px 30px -10px rgba(74,222,128,0.4);
}
.btn-ghost {
  background: transparent; color: var(--creme);
  border: 0.5px solid var(--border-dark-strong);
}
.btn-ghost:hover {
  border-color: var(--creme);
  background: rgba(245,242,234,0.04);
}
.btn-arrow { transition: transform 0.25s ease; }
.btn:hover .btn-arrow { transform: translateX(4px); }

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

/* Hero tipográfico — coluna única (regra base em .hero-grid). O texto ocupa o
   palco sozinho, alinhado à esquerda, com largura de leitura confortável.
   Sem grafismo/imagem por ora; a futura foto da CEASA entra como fundo da .hero. */
.dash-card {
  background: linear-gradient(180deg, var(--petroleo-light) 0%, var(--petroleo) 100%);
  border-radius: var(--radius-xl);
  padding: 26px;
  border: 0.5px solid var(--border-dark-strong);
  box-shadow:
    0 40px 80px -20px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(245,242,234,0.06);
  position: relative;
  overflow: hidden;
}
.dash-card::before {
  content: "";
  position: absolute; top: 0; left: 20%; right: 20%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(74,222,128,0.5), transparent);
}
.dash-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 22px;
}
.dash-label {
  font-size: 10px; font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--verde);
}
.dash-pulse {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--cinza-light);
}
.pulse-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--verde);
  animation: pulse 2s ease-in-out infinite;
}

.score-display { text-align: center; padding: 14px 0 22px; }
.score-big {
  font-family: var(--font-display);
  font-size: 104px;
  font-weight: 400;
  line-height: 0.9;
  color: var(--creme);
  letter-spacing: -5px;
  display: inline-block;
}
.score-total {
  font-size: 22px; color: var(--cinza); font-weight: 300;
  margin-left: 4px;
  font-family: var(--font-sans);
}
.score-trend {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px;
  color: var(--verde); background: var(--verde-soft);
  padding: 5px 11px; border-radius: 99px;
  margin-top: 10px;
}

.score-bar {
  height: 5px; background: rgba(245,242,234,0.08);
  border-radius: 99px; overflow: hidden;
  margin-bottom: 10px;
}
.score-bar-fill {
  height: 100%; background: var(--verde);
  border-radius: 99px;
  width: 0;
  animation: fillBar 1.8s cubic-bezier(0.4, 0, 0.2, 1) 0.9s forwards;
}
@keyframes fillBar { to { width: 6%; } }
.score-scale {
  display: flex; justify-content: space-between;
  font-size: 10px; font-family: var(--font-mono);
  color: var(--cinza); text-transform: uppercase; letter-spacing: 0.8px;
}

.dash-divider { height: 0.5px; background: var(--border-dark); margin: 22px 0; }

.dash-rows { display: flex; flex-direction: column; gap: 14px; }
.dash-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px;
}
.dash-row-label { color: var(--cinza-light); }
.dash-row-value {
  color: var(--creme); font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono); font-size: 12px;
}
.dash-row-value.accent { color: var(--verde); }

/* Floating ticker */
.ticker-card {
  position: absolute;
  bottom: -28px; left: -44px;
  background: var(--creme); color: var(--petroleo);
  padding: 16px 22px; border-radius: var(--radius-md);
  box-shadow: 0 24px 48px -12px rgba(0,0,0,0.35);
  display: flex; align-items: center; gap: 14px;
  animation: floatTicker 5s ease-in-out infinite;
}
@keyframes floatTicker {
  0%, 100% { transform: translateY(0) rotate(-0.3deg); }
  50% { transform: translateY(-8px) rotate(0.3deg); }
}
.ticker-icon {
  width: 40px; height: 40px; border-radius: 8px;
  background: var(--verde); color: var(--petroleo);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700;
}
.ticker-text { font-size: 12px; }
.ticker-value {
  font-weight: 600; color: var(--petroleo);
  font-size: 15px; font-variant-numeric: tabular-nums;
}
.ticker-label {
  color: var(--cinza); font-size: 10px; margin-top: 2px;
  text-transform: uppercase; letter-spacing: 0.6px;
  font-family: var(--font-mono);
}

@media (max-width: 960px) {
  .hero { padding: 0; }
  .ticker-card { left: auto; right: 20px; bottom: -20px; }
}

/* Mobile estreito (~360-640px): impede que a pílula, a headline e os CTAs
   estourem a largura da coluna (o .hero tem overflow:hidden e cortava o texto
   à direita depois da troca de copy). Só afeta telas pequenas; desktop intacto. */
@media (max-width: 640px) {
  .hero-tag {
    white-space: normal;
    max-width: 100%;
    font-size: 13px;
    letter-spacing: 0.3px;
    line-height: 1.4;
  }
  .hero-h1 {
    letter-spacing: -1.5px;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  .hero-sub { max-width: 100%; }
  .hero-ctas { flex-wrap: wrap; }
  .hero-ctas .btn { flex: 1 1 auto; justify-content: center; }
}

/* ═════════════════════════════════════════════════════════
   SECTION BASE
═════════════════════════════════════════════════════════ */
.section { padding: 96px 0; position: relative; }
.section-header { max-width: 720px; margin-bottom: 56px; }
@media (max-width: 768px) {
  .section,
  .team,
  .mission,
  .spec-section,
  .cta-final { padding: 64px 0; }
  .section-header { margin-bottom: 40px; }
}
.kicker {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--verde-ink); margin-bottom: 24px;
  display: inline-flex; align-items: center; gap: 12px;
}
.kicker::before {
  content: ""; display: block; width: 24px; height: 1px; background: var(--verde);
}
.section-h2 {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -1.8px;
  color: var(--creme);
}
.section-h2 em { font-style: italic; color: var(--verde-ink); }
.section-sub {
  margin-top: 22px; font-size: 18px; line-height: 1.6;
  color: var(--cinza-lighter); max-width: 580px;
}
/* Linha de abertura do "Como funciona" — não é título nem card */
.como-lede {
  font-family: var(--font-sans);
  font-size: 20px; font-weight: 600; line-height: 1.4;
  color: var(--verde-ink);
  margin: 0 0 48px;
  max-width: 640px;
}

/* [C3 · DESATIVADO] Bloco da wa-faixa "Duas formas de usar".
   A faixa saiu da /como-funciona (markup removido); estas regras ficam
   preservadas mas comentadas. Reativar só se a faixa voltar. Os comentarios
   internos que existiam aqui viraram texto simples (sem delimitadores) porque
   comentario de CSS nao aninha; o conteudo das regras esta integro.

   .wa-faixa {
     display: grid;
     grid-template-columns: 1fr auto;
     gap: 48px;
     align-items: center;
     margin-bottom: 96px;
     padding: 32px 36px;
     border: 0.5px solid var(--border-dark);
     border-radius: var(--radius-xl);
     background: linear-gradient(180deg, rgba(74,222,128,0.03) 0%, transparent 70%);
   }
   .wa-faixa-kicker {
     font-family: var(--font-mono);
     font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
     color: var(--verde-ink); margin-bottom: 18px;
     display: inline-flex; align-items: center; gap: 12px;
   }
   .wa-faixa-kicker::before {
     content: ""; display: block; width: 24px; height: 1px; background: var(--verde);
   }
   .wa-faixa-text {
     font-family: var(--font-display);
     font-size: clamp(23px, 2.7vw, 31px);
     font-weight: 400;
     line-height: 1.16;
     letter-spacing: -0.6px;
     color: var(--creme);
     max-width: 540px;
   }
   Dois rótulos discretos dos canais (WhatsApp e app da Franco). Menores que o
   título da seção; ícone de linha próprio, sem emoji nem imagem.
   .wa-faixa-canais {
     display: flex; flex-wrap: wrap; gap: 12px;
     margin-top: 22px;
   }
   .wa-faixa-canal {
     display: inline-flex; align-items: center; gap: 9px;
     font-family: var(--font-mono);
     font-size: 11px; letter-spacing: 0.4px;
     color: var(--cinza-lighter);
     padding: 8px 14px;
     border: 0.5px solid var(--border-dark-strong);
     border-radius: 99px;
   }
   .wa-faixa-canal svg {
     width: 15px; height: 15px; flex: 0 0 auto;
     stroke: var(--verde); fill: none;
     stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
   }
   Estado ativo do chip: desativado por ora. A ilustração da faixa é o telefone
   com a conversa do WhatsApp, então marcar "No app da Franco" como ativo cria
   contradição visual, e ainda não há captura do painel pro outro estado.
   Volta quando os chips virarem interativos de verdade (com captura do painel).
   .wa-faixa-canal--ativo {
     color: var(--verde-on-light);
     border-color: var(--verde-border);
     background: var(--verde-soft);
   }
   .wa-faixa-phone {
     display: flex; justify-content: center;
   }
   O telefone nativo é 380x800; na faixa reduzimos a escala pra caber com folga
   ao lado da copy, sem competir com ela. Só afeta a instância dentro da faixa.
   .wa-faixa-phone .franco-hero-phone { --fhp-scale: calc(440 / 800); }

   @media (max-width: 900px) {
     .wa-faixa {
       grid-template-columns: 1fr;
       gap: 28px;
       text-align: left;
       padding: 28px 24px;
     }
     .wa-faixa-phone { justify-content: center; }
   }
*/

/* ═════════════════════════════════════════════════════════
   HOW IT WORKS — SELO ILUSTRATIVO (o layout de steps saiu no PROMPT 17 · D;
   os 4 passos viraram a grade de quadrados compactos, ver .cf-como).
   O selo .thumb-exemplo segue usado nas seções de canais/painel.
═════════════════════════════════════════════════════════ */
/* Selo de dado ilustrativo nos placeholders que mostram números de exemplo */
.thumb-exemplo {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 1px;
  text-transform: uppercase;
  /* selo com informação ("dados protegidos"): pastilha escura sólida +
     tinta creme quase cheia, pra dar >= 4.5:1 nos dois temas independente
     do thumb por baixo. Segue discreto (8px, mono). */
  color: rgba(245,242,234,0.92);
  background: rgba(6,20,26,0.72);
  border: 0.5px solid rgba(245,242,234,0.16);
  border-radius: 99px;
  padding: 3px 7px;
}

/* ═══════════════════════════════════════════════════════════
   TARJA · componente único de anonimização das ilustrações
   (PROMPT 16 · A). Nada de dado real do cliente aparece: nome
   vira barra rotulada, score vira o quadrado da marca SEM número,
   linha da leitura vira barra troncada ilegível. Usado em todos
   as ilustrações do site (produto + como-funciona). Contraste ≥4.5:1
   verificado nas duas superfícies (petróleo escuro / claro).
   ─────────────────────────────────────────────────────────── */

/* NOME DO COMPRADOR → barra sólida petróleo com rótulo mono +
   cadeado discreto. Substitui qualquer razão social legível. */
.tarja-nome {
  display: inline-flex; align-items: center; gap: 7px;
  height: 20px; padding: 0 9px; border-radius: 5px;
  background: var(--petroleo-deep);
  border: 0.5px solid var(--border-dark-strong);
  vertical-align: middle;
}
.tarja-nome .tarja-lock {
  flex: 0 0 auto; width: 8px; height: 9px;
  border: 1.2px solid var(--cinza-lighter);
  border-radius: 1.5px 1.5px 2px 2px;
  position: relative;
}
.tarja-nome .tarja-lock::before {
  content: ""; position: absolute; left: 50%; top: -4px;
  width: 5px; height: 5px; transform: translateX(-50%);
  border: 1.2px solid var(--cinza-lighter); border-bottom: 0;
  border-radius: 3px 3px 0 0;
}
.tarja-nome .tarja-nome-lb {
  font-family: var(--font-mono);
  font-size: 8.5px; letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--cinza-lighter); white-space: nowrap; line-height: 1;
}

/* LINHA DA LEITURA → barras troncadas ilegíveis (texto redigido). */
.tarja-linhas { display: flex; flex-direction: column; gap: 6px; }
.tarja-barra {
  height: 8px; border-radius: 4px;
  background: var(--border-dark-strong);
}
.tarja-barra.w90 { width: 90%; }
.tarja-barra.w70 { width: 70%; }
.tarja-barra.w55 { width: 55%; }
.tarja-barra.w40 { width: 40%; }

/* SCORE → quadrado da marca preenchido conforme o nível, SEM número.
   Reusa o arco/track do quadrado do app (.cf-sq).
   Níveis via modificador: --alto (verde), --medio (âmbar/verde-dim),
   --baixo (âmbar). O arco é proporcional ao nível. */
.tarja-sq { position: relative; display: grid; place-items: center; flex-shrink: 0; }
.tarja-sq svg { display: block; overflow: visible; }
.tarja-sq .sq-track { fill: none; stroke: rgba(255,255,255,0.12); stroke-width: 3.4; }
.tarja-sq .sq-arc {
  fill: none; stroke-width: 3.4; stroke-linecap: round;
  stroke-dasharray: 620 380; stroke: var(--verde);
}
.tarja-sq.tarja-sq--alto  .sq-arc { stroke: #22C55E; stroke-dasharray: 800 200; }
.tarja-sq.tarja-sq--medio .sq-arc { stroke: #EAB308; stroke-dasharray: 540 460; }
.tarja-sq.tarja-sq--baixo .sq-arc { stroke: #EAB308; stroke-dasharray: 340 660; }

/* SELO das ilustrações tarjadas (substitui "Exemplo ilustrativo"). */
.tarja-selo-txt { text-transform: uppercase; }

/* carteira tarjada dentro do painel-ph 16:10 (canais /como-funciona):
   respeita o padding e não estoura a moldura. */
.jeitos-ph .carteira-mini.jeitos-ph-carteira {
  width: auto; max-width: 86%; margin: 0 24px;
}

/* palavra-marca sempre verde (hortifrúti / WhatsApp) */
.hf { color: var(--verde-ink); }

/* Ponto de status das linhas da leitura (reusado na janela do painel) */
.rx-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--verde); flex-shrink: 0; transition: background 0.3s ease; }
.rx-dot.bad { background: #EF4444; }
.rx-dot.ok { background: var(--verde); }

/* ═════════════════════════════════════════════════════════
   PROVA SOCIAL
═════════════════════════════════════════════════════════ */
.proof {
  padding: 96px 0;
  background: var(--creme);
  color: var(--petroleo);
  border-top: 0.5px solid var(--border-light);
}
.proof-inner {
  display: grid; grid-template-columns: auto 1fr; gap: 60px; align-items: center;
}
.proof-label {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--cinza);
  max-width: 180px; line-height: 1.4;
}
.proof-logos {
  display: flex; gap: 48px; flex-wrap: wrap; align-items: center;
}
.proof-logo {
  height: 24px; opacity: 0.35;
  transition: opacity 0.3s ease;
  font-family: var(--font-display);
  font-size: 20px; font-style: italic;
  color: var(--petroleo);
  letter-spacing: -0.5px;
}
.proof-logo:hover { opacity: 1; }

@media (max-width: 768px) {
  .proof-inner { grid-template-columns: 1fr; gap: 30px; }
  .proof-logos { gap: 28px; }
}

/* ═════════════════════════════════════════════════════════
   TIME
═════════════════════════════════════════════════════════ */
.team {
  padding: 96px 0;
  background: var(--creme);
  color: var(--petroleo);
}
.team .kicker { color: var(--petroleo); }
.team .kicker::before { background: var(--petroleo); }
.team .section-h2 { color: var(--petroleo); }
.team .section-h2 em { color: var(--verde-dim); }
.team .section-sub { color: var(--cinza); }

.team-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin-top: 60px;
}
.team-card {
  background: var(--branco);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  border: 0.5px solid var(--border-light);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.team-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--verde);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.team-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -16px rgba(11, 42, 51, 0.12);
}
.team-card:hover::before { transform: scaleX(1); }

.team-avatar {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--petroleo); color: var(--verde);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 26px; font-weight: 400;
  margin-bottom: 24px;
  letter-spacing: -1px;
}
.team-role {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--cinza); margin-bottom: 8px;
}
.team-name {
  font-family: var(--font-display);
  font-size: 26px; font-weight: 400;
  color: var(--petroleo); margin-bottom: 12px;
  letter-spacing: -0.5px;
}
.team-desc {
  font-size: 14px; line-height: 1.6; color: var(--cinza);
}

@media (max-width: 960px) { .team-grid { grid-template-columns: 1fr; } }

/* ═════════════════════════════════════════════════════════
   MISSÃO
═════════════════════════════════════════════════════════ */
.mission {
  padding: 96px 0;
  background: var(--petroleo);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.mission::before {
  content: "";
  position: absolute; top: -30%; left: 50%;
  width: 800px; height: 800px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(74,222,128,0.08) 0%, transparent 60%);
  pointer-events: none;
}
.mission-inner { position: relative; z-index: 1; max-width: 780px; margin: 0 auto; }
.mission-kicker {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--verde-ink); margin-bottom: 24px;
}
.mission-h {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -1.5px;
  color: var(--creme);
  margin-bottom: 24px;
}
.mission-h em { font-style: italic; color: var(--verde-ink); }
.mission-p {
  font-size: 19px; line-height: 1.65;
  color: var(--cinza-lighter);
  max-width: 680px; margin: 0 auto 32px;
}
.mission-p strong { color: var(--creme); font-weight: 500; }

/* ═════════════════════════════════════════════════════════
   FOOTER
═════════════════════════════════════════════════════════ */
.footer {
  padding: 60px 0 32px;
  background: var(--petroleo-deep);
  color: var(--cinza-lighter);
  border-top: 0.5px solid var(--border-dark);
}
.footer-top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 0.5px solid var(--border-dark);
}
.footer-brand-col .brand { margin-bottom: 18px; }
.footer-about {
  font-size: 13px; line-height: 1.6;
  color: var(--cinza-lighter); max-width: 280px;
}
.footer-col-title {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--creme); margin-bottom: 16px;
}
.footer-link {
  display: block;
  font-size: 13px; color: var(--cinza-lighter);
  margin-bottom: 10px;
  transition: color 0.2s ease;
}
.footer-link:hover { color: var(--creme); }

.footer-bottom {
  padding-top: 24px;
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 24px; font-size: 11px; color: var(--cinza);
}
.footer-disclaimer {
  max-width: 520px; line-height: 1.6;
}
.footer-meta { text-align: right; line-height: 1.8; }

@media (max-width: 768px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; }
  .footer-meta { text-align: left; }
}

/* ═════════════════════════════════════════════════════════
   REVEAL ON SCROLL
═════════════════════════════════════════════════════════ */
/* Fade de entrada. Só esconde quando há JS (html.js): sem JS a página fica
   visível de imediato (fallback), pois o observer que revela nunca roda. */
.reveal {
  transition: opacity 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
html.js .reveal { opacity: 0; transform: translateY(28px); }
html.js .reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Selection */
::selection { background: var(--verde); color: var(--petroleo); }

/* CTA inline em etapas (ex: link WhatsApp na etapa 02) */
.step-cta {
  display: inline-block;
  margin-top: 18px;
  padding: 11px 18px;
  background: var(--verde);
  color: var(--petroleo);
  border-radius: 9px;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-sans);
  text-decoration: none;
  transition: all 0.2s ease;
}
.step-cta:hover {
  background: var(--verde-bright);
  transform: translateY(-1px);
}

/* ═════════════════════════════════════════════════════════
   FAB · Botão flutuante WhatsApp
═════════════════════════════════════════════════════════ */
.wa-fab {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 900;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: #25D366;
  color: #ffffff;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  box-shadow: 0 12px 28px -6px rgba(37, 211, 102, 0.55), 0 4px 12px rgba(0, 0, 0, 0.18);
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s ease;
  animation: wa-pulse 3.2s ease-in-out infinite;
}
.wa-fab svg {
  width: 32px; height: 32px;
  fill: #ffffff;
  display: block;
}
.wa-fab:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 18px 36px -6px rgba(37, 211, 102, 0.7), 0 6px 16px rgba(0, 0, 0, 0.2);
  animation: none;
}
.wa-fab::after {
  content: "Fala com a Franco";
  position: absolute;
  right: 72px;
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  background: var(--petroleo);
  color: var(--creme);
  padding: 9px 14px;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  border: 0.5px solid var(--border-dark-strong);
  box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.wa-fab:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
@keyframes wa-pulse {
  0%, 100% { box-shadow: 0 12px 28px -6px rgba(37, 211, 102, 0.55), 0 4px 12px rgba(0, 0, 0, 0.18), 0 0 0 0 rgba(37, 211, 102, 0.55); }
  50% { box-shadow: 0 12px 28px -6px rgba(37, 211, 102, 0.55), 0 4px 12px rgba(0, 0, 0, 0.18), 0 0 0 14px rgba(37, 211, 102, 0); }
}
@media (max-width: 540px) {
  .wa-fab { bottom: 20px; right: 20px; width: 56px; height: 56px; }
  .wa-fab svg { width: 28px; height: 28px; }
  .wa-fab::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wa-fab { animation: none; }
}

/* ═════════════════════════════════════════════════════════
   MARQUEE MANIFESTO ("Sem letra miúda" em destaque rolante)
═════════════════════════════════════════════════════════ */
.marquee-manifesto {
  background: var(--verde);
  color: var(--petroleo);
  overflow: hidden;
  padding: 22px 0;
  border-top: 0.5px solid var(--verde-dim);
  border-bottom: 0.5px solid var(--verde-dim);
  position: relative;
}
.marquee-track {
  display: flex;
  white-space: nowrap;
  animation: marquee-scroll 32s linear infinite;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 400;
  letter-spacing: -1px;
  gap: 26px;
  align-items: center;
  will-change: transform;
}
.marquee-item {
  flex-shrink: 0;
}
.marquee-dot {
  flex-shrink: 0;
  font-size: 0.8em;
  opacity: 0.5;
  font-style: normal;
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; flex-wrap: wrap; white-space: normal; justify-content: center; }
}

/* ═════════════════════════════════════════════════════════
   PLANOS
═════════════════════════════════════════════════════════ */
/* ═════════ FEITO PRO HORTIFRÚTI ═════════ */
.spec-section { padding: 96px 0; background: var(--petroleo); }
.spec-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 56px; }
.spec-card {
  padding: 28px 24px;
  border: 0.5px solid var(--border-dark);
  border-radius: 16px;
  background: var(--petroleo-deep);
}
.spec-mark {
  display: block; width: 20px; height: 20px; border-radius: 6px;
  border: 2px solid var(--verde);
  margin-bottom: 22px;
}
.spec-card:nth-child(even) .spec-mark { border-color: #EAB308; }
.spec-title {
  font-family: var(--font-display); font-size: 20px; font-weight: 500;
  color: var(--creme); margin-bottom: 10px; letter-spacing: -0.3px; line-height: 1.2;
}
.spec-text { font-size: 14px; line-height: 1.6; color: var(--cinza-lighter); }
@media (max-width: 900px) { .spec-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .spec-grid { grid-template-columns: 1fr; } }

/* Parte principal "O que a Franco faz pela sua carteira" — grade 2x2, negrito + apoio */
.carteira-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 32px;
  margin-top: 56px;
}
.carteira-item {
  border-top: 1px solid var(--verde);
  padding-top: 20px;
}
.carteira-b {
  font-family: var(--font-sans);
  font-size: 20px; font-weight: 600;
  color: var(--creme);
  margin: 0 0 8px; line-height: 1.25; letter-spacing: -0.3px;
}
.carteira-s {
  font-size: 15px; line-height: 1.55;
  color: var(--cinza-lighter); margin: 0;
}
@media (max-width: 760px) { .carteira-grid { grid-template-columns: 1fr; gap: 24px; } }

/* ═════════ GRADE BENTO DA CARTEIRA ═════════
   Card grande da frase (span 2 linhas, ~40% da largura) + 4 itens em células
   levemente desiguais. Superfícies fixas escritas literais (#0B2A33 / #F5F2EA /
   #4ADE80), NÃO tokens, pra não virarem com o tema claro/escuro. */
.carteira-bento {
  display: grid;
  grid-template-columns: 40% 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 20px;
  margin-top: 56px;
  align-items: stretch;
}
/* Card grande: coluna 1, ocupa as duas linhas. */
.bento-card {
  grid-column: 1;
  grid-row: 1 / span 2;
  background: #0B2A33;
  color: #F5F2EA;
  border-radius: 18px;
  padding: 36px 32px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  min-height: 280px;
}
.bento-frase {
  font-family: var(--font-display);
  font-size: clamp(30px, 3vw, 44px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -1px;
  color: #F5F2EA;
  margin: 0;
}
.bento-frase em { font-style: italic; color: #4ADE80; }
/* Barra fina de progresso na base do card. Estado estático (sem JS ou reduced
   motion): já preenchida em 72%. Com JS, parte de 0 e anima até 72% quando o
   card entra na viewport (.in-view adicionado pelo observer). */
.bento-prog { display: flex; flex-direction: column; gap: 8px; }
.bento-prog-track {
  position: relative;
  height: 4px;
  border-radius: 99px;
  background: rgba(245,242,234,0.14);
  overflow: hidden;
}
.bento-prog-fill {
  display: block;
  height: 100%;
  width: 72%;
  border-radius: 99px;
  background: #4ADE80;
}
/* Só com JS o fill parte de 0 e transiciona; sem JS fica nos 72% do fallback. */
html.js .bento-card .bento-prog-fill {
  width: 0;
  transition: width 1.1s cubic-bezier(0.2, 0.8, 0.2, 1);
}
html.js .bento-card.in-view .bento-prog-fill { width: 72%; }
.bento-prog-legenda {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(245,242,234,0.6);
}

/* Os 4 itens ocupam as células restantes, em tamanhos levemente desiguais. */
.carteira-bento .carteira-item {
  position: relative;
  overflow: hidden;
  border-top: 1px solid #4ADE80;
  border-radius: 14px;
  padding: 22px 22px 20px;
  background: var(--petroleo-deep);
}
/* Desigualdade leve: itens 01 e 04 com respiro maior. */
.carteira-bento .carteira-item[data-n="01"] { padding-bottom: 30px; }
.carteira-bento .carteira-item[data-n="04"] { padding-top: 30px; }
/* Numeral gigante serifado como elemento gráfico, verde translúcido. */
.carteira-num {
  position: absolute;
  top: 8px; right: 14px;
  font-family: var(--font-display);
  font-size: 84px;
  line-height: 1;
  color: rgba(74,222,128,0.14);
  pointer-events: none;
  z-index: 0;
}
.carteira-bento .carteira-b,
.carteira-bento .carteira-s { position: relative; z-index: 1; }
/* 4º item verde-claro nos dois temas, tinta verde-escura da casa (contraste ≥4.5:1). */
.carteira-item--verde {
  background: #E1F5EE !important;
  border-top-color: #15803D !important;
}
.carteira-item--verde .carteira-b { color: #0F5C2E; }
.carteira-item--verde .carteira-s { color: #15653A; }
.carteira-item--verde .carteira-num { color: rgba(21,128,61,0.16); }

@media (max-width: 900px) {
  .carteira-bento { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .bento-card { grid-column: 1 / -1; grid-row: auto; min-height: 0; }
}
/* Celular: card grande primeiro, os 4 itens empilhados, numerais menores. */
@media (max-width: 620px) {
  .carteira-bento { grid-template-columns: 1fr; }
  .carteira-bento .carteira-item[data-n="01"],
  .carteira-bento .carteira-item[data-n="04"] { padding-top: 22px; padding-bottom: 20px; }
  .carteira-num { font-size: 56px; top: 6px; right: 12px; }
  .bento-frase { font-size: clamp(26px, 7vw, 34px); }
}

/* Divisória entre a carteira (parte de cima) e "A Franco só conhece ele".
   Linha fina de ponta a ponta com o quadrado autoral no centro. */
.spec-divisor {
  display: flex;
  align-items: center;
  margin-top: 64px;
}
.spec-divisor::before,
.spec-divisor::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--border-dark-strong);
}
.spec-divisor-sq {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin: 0 18px;
  border: 1px solid var(--verde-ink);
}

/* Parte secundária "A Franco só conhece ele" — peso visual menor que o principal */
.spec-secundaria {
  margin-top: 44px;
  max-width: 720px;
}
.spec-sec-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.6px;
  color: var(--creme);
  margin: 0;
}
.spec-sec-title em { font-style: italic; color: var(--verde-ink); }
.spec-secundaria .section-sub { margin-top: 16px; }

/* Cards compactos: mesmos textos, tipografia e padding reduzidos */
.spec-grid--compact { margin-top: 32px; gap: 18px; }
.spec-grid--compact .spec-card { padding: 20px 18px; }
.spec-grid--compact .spec-mark { width: 16px; height: 16px; margin-bottom: 16px; }
.spec-grid--compact .spec-title { font-size: 17px; margin-bottom: 8px; }
.spec-grid--compact .spec-text { font-size: 13px; }

/* Faixa compacta "De onde vem o dado" — sem card, sem sombra, sem ícone */
.dado-origem { margin-top: 40px; }
.dado-origem-title {
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--cinza-light);
  margin-bottom: 18px;
}
.dado-origem-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 28px; }
.dado-origem-item { border-top: 1px solid var(--border-dark-strong); padding-top: 12px; }
.dado-origem-item h4 {
  font-size: 14px; font-weight: 600; color: var(--creme);
  margin: 0 0 4px; line-height: 1.3;
}
.dado-origem-item p { font-size: 13px; line-height: 1.45; color: var(--cinza); margin: 0; }
@media (max-width: 900px) { .dado-origem-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .dado-origem-grid { grid-template-columns: 1fr; } }

/* O compromisso da Franco — compacto, 3 em linha, sem card alto, sem ícone, sem CTA */
/* Fundo escuro (--petroleo) encostado nos Planos (--petroleo-deep): bloco escuro único.
   Zera o padding-bottom aqui e o padding-top de Planos pras duas se tocarem. */
.compromisso-section { background: var(--petroleo); padding-bottom: 72px; }
.section-plans { padding-top: 72px; }
.compromisso-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 44px; }
.compromisso-item { border-top: 1px solid var(--border-dark-strong); padding-top: 16px; }
.compromisso-title {
  font-size: 17px; font-weight: 600; color: var(--creme);
  margin: 0 0 8px; line-height: 1.3;
}
.compromisso-text { font-size: 15px; line-height: 1.5; color: var(--cinza-lighter); margin: 0; }
@media (max-width: 760px) { .compromisso-grid { grid-template-columns: 1fr; gap: 20px; } }

/* ═════════ COMPROMISSO · CAPÍTULO ESCURO TIPOGRÁFICO ═════════
   Fundo #0B2A33 FIXO nos dois temas (não vira com o tema). Tinta creme #F5F2EA
   e verde #4ADE80 literais. Três colunas tipográficas: sem card, sem borda de
   caixa, só numeral gigante + border-top fino. */
.compromisso-section--escuro {
  background: #0B2A33;
  color: #F5F2EA;
}
.compromisso-section--escuro .kicker { color: #4ADE80; }
.compromisso-section--escuro .kicker::before { background: #4ADE80; }
.compromisso-section--escuro .section-h2 { color: #F5F2EA; }
.compromisso-section--escuro .section-h2 em { color: #4ADE80; }
.compromisso-section--escuro .section-sub { color: rgba(245,242,234,0.72); }

.compromisso-grid--tipo { margin-top: 48px; align-items: start; }
.compromisso-grid--tipo .compromisso-item {
  position: relative;
  border-top: 1px solid rgba(245,242,234,0.18);
  padding-top: 22px;
}
/* Primeira coluna com o traço verde; as outras duas neutras. */
.compromisso-grid--tipo .compromisso-item[data-n="01"] {
  border-top-color: #4ADE80;
}
.compromisso-num {
  display: block;
  font-family: var(--font-display);
  font-size: 72px;
  line-height: 0.9;
  color: rgba(245,242,234,0.14);
  margin-bottom: 12px;
  letter-spacing: -2px;
}
.compromisso-grid--tipo .compromisso-title { color: #F5F2EA; }
.compromisso-grid--tipo .compromisso-text { color: rgba(245,242,234,0.72); }

/* ═════════════════════════════════════════════════════════
   A ESCADA — degraus que sobem (disponível hoje x caminho da Franco)
═════════════════════════════════════════════════════════ */
.escada-section { background: var(--petroleo); }
.escada-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: end;
}
.escada-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 28px 24px;
  border: 0.5px solid var(--border-dark);
  border-radius: 16px;
  background: var(--petroleo-deep);
  /* degraus sobem: quanto maior o passo, mais alto o card */
  margin-bottom: calc((var(--step) - 1) * 40px);
}
.escada-step::after {
  /* haste vertical que conecta o degrau à base, reforçando a subida */
  content: "";
  position: absolute;
  left: 40px;
  bottom: calc(-1 * ((var(--step) - 1) * 40px) - 1px);
  width: 2px;
  height: calc((var(--step) - 1) * 40px);
  background: linear-gradient(var(--border-dark-strong), transparent);
}
.escada-step:first-child::after { display: none; }
.escada-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 2px solid var(--verde);
}
.escada-mark i {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--verde);
}
/* degraus do caminho da Franco: marca mais quieta, contornada */
.escada-step:nth-child(3) .escada-mark,
.escada-step:nth-child(4) .escada-mark { border-color: var(--cinza-light); }
.escada-step:nth-child(3) .escada-mark i,
.escada-step:nth-child(4) .escada-mark i {
  background: transparent;
  border: 2px solid var(--cinza-light);
}
.escada-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.escada-num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--cinza-light);
}
.escada-tag {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 99px;
  white-space: nowrap;
}
/* DISPONÍVEL HOJE: sólido, cor de marca, peso forte */
.escada-tag-hoje {
  background: var(--verde);
  color: var(--petroleo);
  border: 0.5px solid var(--verde);
}
/* O CAMINHO DA FRANCO: contorno, tom quieto, sem parecer promessa */
.escada-tag-caminho {
  background: transparent;
  color: var(--cinza-light);
  border: 0.5px solid var(--border-dark-strong);
}
.escada-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  color: var(--creme);
  letter-spacing: -0.4px;
  line-height: 1.1;
  margin-bottom: 8px;
}
.escada-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--cinza-lighter);
}
.escada-close {
  margin-top: 56px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--cinza);
  max-width: 620px;
}
@media (max-width: 900px) {
  .escada-steps { grid-template-columns: repeat(2, 1fr); }
  .escada-step { margin-bottom: 0; }
  .escada-step::after { display: none; }
}
@media (max-width: 560px) {
  .escada-steps { grid-template-columns: 1fr; }
}

/* ═════════════════════════════════════════════════════════
   O PAINEL — telas reais + placeholder rotulado
═════════════════════════════════════════════════════════ */
.painel-section { background: var(--petroleo-deep); }

/* Blocos alternados tela/texto do painel. Placeholder pronto pra receber captura real. */
.painel-bloco {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  margin-top: 72px;
}
.painel-bloco--invertido .painel-bloco-copy { order: 2; }
.painel-bloco--invertido .painel-bloco-tela { order: 1; }
.painel-bloco-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 400; line-height: 1.12; letter-spacing: -0.8px;
  color: var(--creme); margin: 0 0 16px;
}
.painel-bloco-text {
  font-size: 16px; line-height: 1.6;
  color: var(--cinza-lighter); max-width: 460px; margin: 0;
}
.painel-ph {
  position: relative;
  aspect-ratio: 16 / 10;
  border: 0.5px solid var(--border-dark-strong);
  border-radius: var(--radius-lg);
  background: var(--petroleo-light);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.painel-ph-note {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.4px;
  color: var(--cinza);
  text-align: center; padding: 0 24px; max-width: 90%;
}
@media (max-width: 760px) {
  .painel-bloco { grid-template-columns: 1fr; gap: 24px; }
  .painel-bloco--invertido .painel-bloco-copy { order: 1; }
  .painel-bloco--invertido .painel-bloco-tela { order: 2; }
}

/* DEPOIMENTOS: seção retirada em 05/08, aguardando conteúdo */
/* ═════════════════════════════════════════════════════════
   DEPOIMENTOS — estrutura (HTML removido; CSS mantido pra quando voltar)
═════════════════════════════════════════════════════════ */
.depo-section { background: var(--petroleo); }
.depo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.depo-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px 24px;
  min-height: 260px;
  border: 0.5px solid var(--border-dark);
  border-radius: 16px;
  background: var(--petroleo-deep);
}
.depo-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--petroleo-light);
  border: 0.5px solid var(--border-dark-strong);
  display: flex; align-items: flex-end; justify-content: center;
  overflow: hidden;
}
/* silhueta neutra (sem foto real) no padrão da marca */
.depo-avatar span {
  display: block;
  width: 26px; height: 26px;
  border-radius: 50% 50% 0 0;
  background: var(--petroleo-lighter);
  position: relative;
  margin-bottom: -4px;
}
.depo-avatar span::before {
  content: "";
  position: absolute;
  top: -14px; left: 50%; transform: translateX(-50%);
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--petroleo-lighter);
}
.depo-quote {
  margin: 0;
  flex: 1;
  min-height: 88px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--cinza-lighter);
  /* estado vazio: contorno tracejado discreto */
  border-left: 2px solid var(--border-dark-strong);
  padding-left: 14px;
}
.depo-id { margin-top: auto; }
.depo-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--creme);
  min-height: 17px;
}
.depo-role {
  font-size: 12px;
  color: var(--cinza);
  min-height: 15px;
  margin-top: 3px;
}
@media (max-width: 860px) {
  .depo-grid { grid-template-columns: 1fr; }
  .depo-card { min-height: 0; }
}

.section-plans { background: var(--petroleo-deep); }
/* Duas ofertas em destaque (Franco Gestão / Franco Consulta) */
.offers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 28px;
  align-items: start;
}
.offer-card {
  background: var(--petroleo);
  border: 0.5px solid var(--border-dark-strong);
  border-radius: var(--radius-lg);
  padding: 40px 36px 36px;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.offer-card:hover {
  transform: translateY(-4px);
  border-color: var(--verde-border);
}
.offer-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--verde-ink);
  margin-bottom: 16px;
}
.offer-price {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 400;
  color: var(--creme);
  letter-spacing: -0.8px;
  line-height: 1.1;
  margin-bottom: 20px;
  padding-bottom: 22px;
  border-bottom: 0.5px solid var(--border-dark);
}
.offer-desc {
  font-size: 15px;
  color: var(--cinza-lighter);
  line-height: 1.6;
  margin: 0 0 32px;
  flex: 1;
}
.offer-cta {
  background: var(--verde);
  color: var(--petroleo);
  border: 0.5px solid var(--verde);
  padding: 15px 24px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: block;
  text-align: center;
  text-decoration: none;
}
.offer-cta:hover {
  background: var(--verde-bright);
  border-color: var(--verde-bright);
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -10px rgba(74,222,128,0.4);
}
/* Franco Gestão em destaque: card principal, borda verde 1px e selo pill.
   Consulta segue o .offer-card padrão (0.5px neutro), intacto. */
.offer-card--featured {
  border: 1px solid var(--verde);
}
/* Cabeçalho do card destacado: tag à esquerda, selo encostado na direita, mesma linha */
.offer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.offer-head .offer-tag { margin-bottom: 0; }
.offer-head .offer-seal { margin-bottom: 0; align-self: center; }
.offer-seal {
  align-self: flex-start;
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--verde-ink);
  background: var(--verde-soft);
  border: 0.5px solid var(--verde-border);
  border-radius: 99px;
  padding: 5px 12px;
  margin-bottom: 18px;
}
.offer-highlight {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 600;
  color: var(--verde-ink);
  line-height: 1.4;
  margin: 0 0 16px;
}
.offer-list {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.offer-list li {
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--cinza-lighter);
}
.offer-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--verde);
}
.offer-card--featured .offer-desc { flex: 0; }

/* Linha de fidelidade: selo pill discreto + texto na mesma linha. */
.fidelidade {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 32px auto 0;
}
.fidelidade-seal {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--verde-ink);
  background: transparent;
  border: 0.5px solid var(--verde-dim);
  border-radius: 99px;
  padding: 6px 12px;
}
.fidelidade-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--cinza-lighter);
}
@media (max-width: 560px) {
  .fidelidade {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
  }
}

@media (max-width: 780px) {
  .offers-grid { grid-template-columns: 1fr; gap: 20px; }
  .offer-card { padding: 32px 26px 28px; }
}

/* ═════════════════════════════════════════════════════════
   CTA FINAL
═════════════════════════════════════════════════════════ */
.cta-final {
  padding: 96px 0;
  background: var(--petroleo-deep);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-final::before {
  content: "";
  position: absolute; top: -40%; left: 50%;
  width: 760px; height: 760px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(74,222,128,0.08) 0%, transparent 60%);
  pointer-events: none;
}
.cta-final-inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.cta-final-h {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -1.5px;
  color: var(--creme);
  margin-bottom: 22px;
}
.cta-final-p {
  font-size: 19px; line-height: 1.6;
  color: var(--cinza-lighter);
  max-width: 560px; margin: 0 auto 36px;
}

/* ── #falar: formulário no CTA final ── */
.cta-final.falar-section { text-align: left; }
.falar-inner {
  position: relative; z-index: 1;
  max-width: 1080px; margin: 0 auto;
  display: grid; grid-template-columns: 45fr 55fr;
  gap: 56px; align-items: center;
}
.falar-copy { max-width: 440px; }
.falar-copy .cta-final-h,
.falar-copy .cta-final-p { margin-left: 0; margin-right: 0; text-align: left; }
.falar-copy .cta-final-p { max-width: none; }
.falar-card {
  background: rgba(245, 242, 234, 0.04);
  border: 0.5px solid var(--border-dark-strong);
  border-radius: var(--radius-xl);
  padding: 32px;
}
html.theme-light .falar-card {
  background: rgba(11, 42, 51, 0.03);
  border-color: var(--border-light-strong);
}
.falar-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}
.falar-grid .falar-full { grid-column: 1 / -1; }
.falar-card .form-row label { color: var(--cinza-lighter); }
.falar-card .form-row input,
.falar-card .form-row select {
  background: var(--petroleo-deep);
  border: 0.5px solid var(--border-dark-strong);
  color: var(--creme);
}
html.theme-light .falar-card .form-row input,
html.theme-light .falar-card .form-row select {
  background: #FFFFFF;
  border-color: var(--border-light-strong);
  color: #0B2A33;
}
.falar-card .form-row input:focus,
.falar-card .form-row select:focus {
  border-color: var(--verde-dim);
  box-shadow: 0 0 0 3px var(--verde-soft);
}
.falar-card .req { color: var(--verde-ink); }
.falar-turnstile { margin: 4px 0 18px; }
.falar-card .btn-primary { width: 100%; justify-content: center; }
.falar-lgpd {
  font-size: 11.5px; line-height: 1.55;
  color: var(--cinza-lighter); margin-top: 14px;
}
.falar-lgpd a { color: var(--verde-ink); text-decoration: underline; }
.falar-done {
  font-size: 15px; line-height: 1.6; color: var(--creme);
  padding: 8px 0;
}
.falar-done a { color: var(--verde-ink); text-decoration: underline; font-weight: 500; }
@media (max-width: 860px) {
  .falar-inner { grid-template-columns: 1fr; gap: 36px; }
  .falar-copy { max-width: none; }
  .falar-grid { grid-template-columns: 1fr; }
  .falar-card { padding: 24px; }
}

/* loop de consulta: removido do #falar em 08/08 — o componente (telefone da casa
   com ciclo CSS puro de ~8s: bolha do vendedor, "Analisando…", card do score
   520 · MÉDIO; fallback sem JS = estado 3 parado; selo "Exemplo ilustrativo" via
   .thumb-exemplo) pode servir em outra página depois. Regras preservadas abaixo,
   com os comentários internos rebaixados pra prosa (CSS não aninha comentário):

   .falar-prova { margin-top: 40px; position: relative; }
   .falar-prova .franco-hero-phone { --fhp-scale: calc(420 / 800); }
   .falar-prova .thumb-exemplo { top: 14px; left: 14px; z-index: 3; }
   .falar-prova .loop-feed { position: relative; }
   .falar-prova .franco-hero-phone .prog { stroke-dasharray: 520 480; }   arco cheio 520/1000

   fallback sem JS: três bolhas paradas (estado 3); 3 classes pra vencer .msg{opacity:0}
   .falar-prova .franco-hero-phone .loop-1,
   .falar-prova .franco-hero-phone .loop-2,
   .falar-prova .franco-hero-phone .loop-3 { opacity: 1; transform: none; }

   com JS, roda o ciclo (timeline única 8s, infinite)
   html.js .falar-prova .franco-hero-phone .loop-1 { animation: hfp-loop1 8s infinite cubic-bezier(.2,.7,.2,1); }
   html.js .falar-prova .franco-hero-phone .loop-2 { animation: hfp-loop2 8s infinite cubic-bezier(.2,.7,.2,1); }
   html.js .falar-prova .franco-hero-phone .loop-3 { animation: hfp-loop3 8s infinite cubic-bezier(.2,.7,.2,1); }

   @keyframes hfp-loop1 { 0%,4%{opacity:0;transform:translateY(10px)} 8%,88%{opacity:1;transform:translateY(0)} 96%,100%{opacity:0;transform:translateY(0)} }
   @keyframes hfp-loop2 { 0%,18%{opacity:0;transform:translateY(10px)} 24%,88%{opacity:1;transform:translateY(0)} 96%,100%{opacity:0;transform:translateY(0)} }
   @keyframes hfp-loop3 { 0%,38%{opacity:0;transform:translateY(12px)} 46%,88%{opacity:1;transform:translateY(0)} 96%,100%{opacity:0;transform:translateY(0)} }

   reduced-motion: loop off, estado 3 parado
   @media (prefers-reduced-motion: reduce) { html.js .falar-prova .franco-hero-phone .loop-1, .loop-2, .loop-3 { animation:none; opacity:1; transform:none; } }

   mobile ≤860px: a prova ficava oculta
   @media (max-width: 860px) { .falar-prova { display: none; } }
*/

/* ═════════════════════════════════════════════════════════
   MODAIS (contato, privacidade, termos)
═════════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(6, 16, 20, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: flex-start; justify-content: center;
  z-index: 1000;
  padding: 60px 20px;
  overflow-y: auto;
  animation: fadeIn 0.25s ease;
}
.modal-overlay.is-open { display: flex; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal {
  width: 100%;
  max-width: 560px;
  background: var(--surface-band);
  color: var(--ink-band);
  border-radius: 14px;
  padding: 36px 36px 32px;
  position: relative;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,0.55);
  animation: modalUp 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.modal-wide { max-width: 680px; }
@keyframes modalUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.modal-close {
  position: absolute; top: 16px; right: 16px;
  width: 32px; height: 32px; border-radius: 8px;
  background: transparent; border: 0.5px solid var(--border-light-strong);
  color: var(--ink-band); cursor: pointer; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s ease;
}
.modal-close:hover { background: rgba(11,42,51,0.06); }

.modal-kicker {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--verde-on-light); margin-bottom: 12px;
}
.modal-title {
  font-family: var(--font-display);
  font-size: 34px; font-weight: 400; line-height: 1.05;
  letter-spacing: -1.2px; color: var(--ink-band);
  margin-bottom: 10px;
}
.modal-title em { font-style: italic; color: var(--verde-on-light); }
.modal-sub {
  font-size: 14px; color: var(--cinza);
  line-height: 1.55; margin-bottom: 26px;
}

/* Formulário de contato */
.form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-row label {
  font-family: var(--font-mono);
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--cinza);
}
.form-row input, .form-row select, .form-row textarea {
  font-family: var(--font-sans);
  font-size: 14px;
  padding: 12px 14px;
  border-radius: 8px;
  border: 0.5px solid var(--border-light-strong);
  background: var(--branco);
  color: var(--tinta);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  outline: none;
  border-color: var(--verde-dim);
  box-shadow: 0 0 0 3px var(--verde-soft);
}
.form-row textarea { resize: vertical; min-height: 90px; }
.form-hint {
  font-size: 12px; color: var(--cinza); margin-top: 6px; line-height: 1.5;
}
.form-hint a { color: var(--verde-on-light); text-decoration: underline; }
.form-actions {
  display: flex; gap: 10px; align-items: center;
  margin-top: 22px;
  flex-wrap: wrap;
}
.form-actions .btn { padding: 13px 22px; }
.form-alt {
  font-size: 12px; color: var(--cinza);
  padding-top: 18px; margin-top: 22px;
  border-top: 0.5px solid var(--border-light);
  line-height: 1.6;
}
.form-alt a { color: var(--ink-band); text-decoration: underline; font-weight: 500; }

/* Conteúdo de política / termos */
.modal-body-prose {
  font-size: 14px; color: var(--tinta); line-height: 1.65;
  max-height: 56vh; overflow-y: auto; padding-right: 8px;
}
.modal-body-prose h4 {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 400; color: var(--petroleo);
  margin: 20px 0 8px; letter-spacing: -0.5px;
}
.modal-body-prose h4:first-child { margin-top: 0; }
.modal-body-prose p { margin-bottom: 12px; color: var(--tinta); }
.modal-body-prose ul { padding-left: 20px; margin-bottom: 12px; }
.modal-body-prose li { margin-bottom: 6px; }

/* Toast de confirmação */
.toast {
  position: fixed;
  bottom: 28px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--petroleo); color: var(--creme);
  padding: 14px 22px; border-radius: 10px;
  font-size: 14px;
  box-shadow: 0 20px 40px -12px rgba(0,0,0,0.45);
  border: 0.5px solid var(--border-dark-strong);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 2000;
}
.toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 640px) {
  .modal { padding: 28px 22px 24px; }
  .modal-title { font-size: 26px; }
  .form-actions { flex-direction: column; align-items: stretch; }
  .form-actions .btn { width: 100%; justify-content: center; }
}

/* ═ HERO CENA ENTREPOSTO v2 (escopado sob .franco-hero) ═ */
.franco-hero{
  position:relative; width:100%;
  aspect-ratio:16/9; min-height:460px;
  overflow:hidden; background:#0B2A33;
}

/* céu: madrugada -> amanhecer */
.franco-hero .sky{
  position:absolute; inset:0;
  background:linear-gradient(180deg,#08222f 0%,#0B2A33 45%,#0B2A33 100%);
  animation:francoDawn 30s ease-in-out infinite alternate;
}
@keyframes francoDawn{
  0%   {background:linear-gradient(180deg,#07202c 0%,#0B2A33 45%,#0B2A33 100%);}
  55%  {background:linear-gradient(180deg,#123b46 0%,#0d2f38 45%,#0B2A33 100%);}
  100% {background:linear-gradient(180deg,#2b4a44 0%,#14343a 45%,#0B2A33 100%);}
}

/* luz nascendo no horizonte */
.franco-hero .glow{
  position:absolute; left:50%; top:46%;
  width:120%; height:60%;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center,rgba(74,222,128,.17) 0%,rgba(74,222,128,.05) 38%,transparent 68%);
  animation:francoRise 30s ease-in-out infinite alternate;
}
@keyframes francoRise{
  0%   {opacity:.25; top:56%;}
  100% {opacity:.9;  top:42%;}
}

.franco-hero .scene{position:absolute; inset:0; width:100%; height:100%;}

/* paralaxe entre camadas */
.franco-hero .layer-far {animation:francoDriftA 44s ease-in-out infinite alternate;}
.franco-hero .layer-mid {animation:francoDriftB 44s ease-in-out infinite alternate;}
.franco-hero .layer-near{animation:francoDriftC 44s ease-in-out infinite alternate;}
@keyframes francoDriftA{0%{transform:translateX(0)}100%{transform:translateX(-10px)}}
@keyframes francoDriftB{0%{transform:translateX(0)}100%{transform:translateX(-26px)}}
@keyframes francoDriftC{0%{transform:translateX(0)}100%{transform:translateX(-46px)}}

/* janelas do galpão */
.franco-hero .win{animation:francoFlick 7s ease-in-out infinite;}
.franco-hero .win.d1{animation-delay:-2.2s}
.franco-hero .win.d2{animation-delay:-4.1s}
.franco-hero .win.d3{animation-delay:-5.6s}
@keyframes francoFlick{0%,100%{opacity:.28}45%{opacity:.62}}

/* caminhões */
.franco-hero .truck{will-change:transform;}
.franco-hero .t1{animation:francoRun1 19s linear infinite;}
.franco-hero .t2{animation:francoRun2 27s linear infinite; animation-delay:-9s;}
@keyframes francoRun1{0%{transform:translateX(-260px)}100%{transform:translateX(1420px)}}
@keyframes francoRun2{0%{transform:translateX(1420px) scaleX(-1)}100%{transform:translateX(-320px) scaleX(-1)}}
.franco-hero .lamp{animation:francoLampPulse 3.4s ease-in-out infinite;}
@keyframes francoLampPulse{0%,100%{opacity:.75}50%{opacity:1}}

/* grid de perspectiva */
.franco-hero .grid-floor{animation:francoGridPulse 9s ease-in-out infinite;}
@keyframes francoGridPulse{0%,100%{opacity:.09}50%{opacity:.2}}

/* nós de leitura */
.franco-hero .node circle{fill:#4ADE80;}
.franco-hero .node .ring{fill:none; stroke:#4ADE80; stroke-width:1.2; animation:francoPing 3.6s ease-out infinite;}
.franco-hero .node.n2 .ring{animation-delay:-1.2s}
.franco-hero .node.n3 .ring{animation-delay:-2.4s}
@keyframes francoPing{0%{r:3.5;opacity:.9}100%{r:22;opacity:0}}

/* feixe de varredura */
.franco-hero .beam{animation:francoScan 11s cubic-bezier(.4,0,.2,1) infinite; opacity:.85;}
@keyframes francoScan{0%{transform:translateX(0)}55%,100%{transform:translateX(2400px)}}

.franco-hero .vignette{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg,rgba(6,20,26,.94) 0%,rgba(6,20,26,.78) 34%,rgba(6,20,26,.16) 64%,rgba(6,20,26,.36) 100%),
    linear-gradient(180deg,rgba(6,20,26,.5) 0%,transparent 30%,rgba(6,20,26,.6) 100%);
}

.franco-hero .content{
  position:absolute; inset:0; z-index:4;
  display:flex; flex-direction:column; justify-content:center;
  padding:0 6%; max-width:680px;
}
.franco-hero h1{
  margin:0 0 14px; color:#F5F2EA;
  font-size:clamp(28px,3.6vw,48px); line-height:1.12;
  font-weight:800; letter-spacing:-.02em;
}
.franco-hero h1 em{font-style:normal; color:#4ADE80;}
.franco-hero p{
  margin:0 0 26px; color:rgba(245,242,234,.74);
  font-size:clamp(14px,1.2vw,17px); line-height:1.55; max-width:540px;
}
.franco-hero .cta{display:flex; gap:12px; flex-wrap:wrap;}
.franco-hero .cta a{
  display:inline-block; text-decoration:none;
  font-size:15px; font-weight:700;
  padding:14px 24px; border-radius:999px;
}
.franco-hero .cta .primary{background:#4ADE80; color:#06202a;}
.franco-hero .cta .ghost{background:transparent; color:#F5F2EA; border:1px solid rgba(245,242,234,.35);}

/* ═ PRODUTO VIVO · cards ilustrativos (metade direita) ═
   Hero é sempre escuro (bg #0B2A33): tons FIXOS, sem token de tema.
   z-index 2 (acima da vignette, abaixo do .content = z-index 4). */
.franco-hero .hero-cards{
  position:absolute; inset:0; z-index:2;
  pointer-events:none;
}
/* superfície petróleo mais clara que a cena, borda fina, canto 10px */
.franco-hero .hc-card{
  background:#123b46;
  border:.5px solid rgba(255,255,255,.12);
  border-radius:10px;
  box-shadow:0 10px 30px rgba(4,16,20,.55), 0 2px 6px rgba(4,16,20,.4);
  padding:14px 16px;
}
/* WRAPPER = paralaxe (translateY via JS). CARD = float+rotação (CSS). */
.franco-hero .hc-wrap{position:absolute; will-change:transform;}
.franco-hero .hc-wrap-score   {top:11%;  right:6%;  width:236px;}
.franco-hero .hc-wrap-alerta  {top:40%;  right:15%; width:220px;}
.franco-hero .hc-wrap-consulta{top:63%;  right:9%;  width:214px;}

/* CARD SCORE (maior, topo-direito, +2°) */
.franco-hero .hc-score{display:flex; flex-direction:column; gap:6px;}
.franco-hero .hc-kicker{
  font-family:var(--font-mono); font-size:10px; font-weight:600;
  text-transform:uppercase; letter-spacing:1.6px; color:#4ADE80;
}
.franco-hero .hc-score-num{
  font-family:var(--font-mono); font-weight:700;
  font-size:40px; line-height:1; letter-spacing:-1px; color:#4ADE80;
}
.franco-hero .hc-score-sub{
  font-size:12.5px; line-height:1.3; color:rgba(245,242,234,.72);
}

/* CARD ALERTA (meio, -2°) · símbolo = QUADRADO do score (baixo/âmbar),
   losango extinto (PROMPT 16 · D). O visual vem de .tarja-sq. */
.franco-hero .hc-alerta{display:flex; align-items:center; gap:10px;}
.franco-hero .hc-alerta-mark{ flex:0 0 auto; }
.franco-hero .hc-alerta-txt{
  font-family:var(--font-mono); font-size:13px; font-weight:600;
  color:#EAB308; letter-spacing:.2px;
}

/* CARD CONSULTA (base, bolha estilo WhatsApp enviado) */
.franco-hero .hc-consulta{
  background:#0f3a34;
  border:.5px solid rgba(74,222,128,.28);
  border-radius:12px 12px 4px 12px;
  font-size:13px; color:rgba(245,242,234,.86); letter-spacing:.2px;
  padding:12px 15px;
}

/* selo único, ancorado ao conjunto */
.franco-hero .hc-selo{
  position:absolute; right:6%; bottom:5.5%;
  font-family:var(--font-mono); font-size:9px;
  text-transform:uppercase; letter-spacing:1px;
  /* o selo agora carrega informação ("dados protegidos"); sobe pra >= 4.5:1
     sobre o fundo escuro do hero, mantendo a discrição (mono, 9px). */
  color:rgba(245,242,234,.66);
}

/* float idle: rotação embutida no keyframe pra ficar constante */
.franco-hero .hc-score  {animation:francoFloatA 7s ease-in-out infinite;}
.franco-hero .hc-alerta {animation:francoFloatB 8.4s ease-in-out infinite; animation-delay:-1.6s;}
.franco-hero .hc-consulta{animation:francoFloatC 6.4s ease-in-out infinite; animation-delay:-3.2s;}
@keyframes francoFloatA{0%,100%{transform:translateY(-4px) rotate(2deg)}50%{transform:translateY(4px) rotate(2deg)}}
@keyframes francoFloatB{0%,100%{transform:translateY(-4px) rotate(-2deg)}50%{transform:translateY(4px) rotate(-2deg)}}
@keyframes francoFloatC{0%,100%{transform:translateY(-3px) rotate(1deg)}50%{transform:translateY(4px) rotate(1deg)}}

@media (max-width:640px){
  .franco-hero{aspect-ratio:4/5; min-height:560px;}
  .franco-hero .content{padding:0 8% 12%; justify-content:flex-end;}
  .franco-hero .vignette{
    background:linear-gradient(180deg,rgba(6,20,26,.5) 0%,rgba(6,20,26,.25) 35%,rgba(6,20,26,.92) 78%,rgba(6,20,26,.97) 100%);
  }
  /* no celular só um caminhão, para aliviar o processamento */
  .franco-hero .t2{display:none;}

  /* celular: só o CARD SCORE, menor, no alto/direita (texto está no rodapé) */
  .franco-hero .hc-wrap-alerta,
  .franco-hero .hc-wrap-consulta{display:none;}
  .franco-hero .hc-wrap-score{top:5%; right:5%; width:190px;}
  .franco-hero .hc-score-num{font-size:34px;}
  .franco-hero .hc-selo{bottom:auto; top:calc(5% + 118px); right:5%;}
}

@media (prefers-reduced-motion:reduce){
  .franco-hero .sky,
  .franco-hero .glow,
  .franco-hero .layer-far,
  .franco-hero .layer-mid,
  .franco-hero .layer-near,
  .franco-hero .truck,
  .franco-hero .lamp,
  .franco-hero .grid-floor,
  .franco-hero .ring,
  .franco-hero .win,
  .franco-hero .beam,
  .franco-hero .hc-score,
  .franco-hero .hc-alerta,
  .franco-hero .hc-consulta{animation:none;}
  .franco-hero .beam{opacity:0;}
  /* cards estáticos: mantêm a rotação sem o float */
  .franco-hero .hc-score{transform:rotate(2deg);}
  .franco-hero .hc-alerta{transform:rotate(-2deg);}
  .franco-hero .hc-consulta{transform:rotate(1deg);}
}

/* ═════════════ FAQ · acordeão nativo <details>/<summary> ═════════════ */
.faq-section { background: var(--petroleo); }
.faq-list { max-width: 720px; margin-top: 44px; }
.faq-item { border-bottom: 1px solid var(--border-dark-strong); }
.faq-item:first-child { border-top: 1px solid var(--border-dark-strong); }
.faq-item > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  font-family: var(--font-display);
  font-size: clamp(21px, 2.4vw, 27px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.6px;
  color: var(--creme);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:hover { color: var(--verde-ink); }
.faq-item > summary:focus-visible {
  outline: 2px solid var(--verde);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}
.faq-chevron {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  color: var(--cinza-lighter);
  transition: transform 0.24s ease, color 0.24s ease;
}
.faq-item > summary:hover .faq-chevron { color: var(--verde-ink); }
.faq-item[open] > summary .faq-chevron { transform: rotate(180deg); color: var(--verde-ink); }
.faq-answer {
  padding: 0 0 26px;
  max-width: 620px;
}
.faq-answer p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--cinza-lighter);
  margin: 0 0 14px;
}
.faq-answer p:last-child { margin-bottom: 0; }
.faq-sources {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
}
.faq-sources li {
  font-size: 16px;
  line-height: 1.65;
  color: var(--cinza-lighter);
  padding: 8px 0 8px 18px;
  border-left: 1px solid var(--border-dark-strong);
  margin-bottom: 8px;
}
.faq-sources li:last-child { margin-bottom: 0; }
.faq-sources strong { color: var(--creme); font-weight: 600; }
@media (max-width: 760px) {
  .faq-item > summary { padding: 20px 0; gap: 16px; }
  .faq-answer { padding-bottom: 22px; }
}

/* ===== CSS escopado do .franco-hero-phone (chat WhatsApp do hero) ===== */
/* Todo o CSS abaixo é ESCOPADO sob .franco-hero-phone pra não colidir com o CSS
   global da landing nem com nada externo. Os @keyframes têm prefixo fhp- pra
   não colidir. O quadro do celular é uma superfície de mídia (dark fixo), não
   segue o tema light/dark. Frame nativo 380x800, escalado via .hero-phone. */

/* ---- WRAPPER: escala o telefone pra caber com dignidade na coluna do hero ---- */
.franco-hero-phone{
  position:relative;
  display:flex;justify-content:center;align-items:flex-start;
  width:100%;
  /* escala do telefone (nativo 380x800). No desktop parte de ~600px de altura. */
  --fhp-scale: calc(600 / 800);
}
/* O .phone-scale usa transform:scale, que NÃO encolhe a caixa de layout. Pra o
   telefone escalado não empurrar largura (e não estourar a viewport no mobile),
   colapsamos a caixa com margens negativas iguais ao "sobrando" da escala.
   Assim a caixa de layout passa a valer exatamente o tamanho VISUAL escalado. */
.franco-hero-phone .phone-scale{
  transform: scale(var(--fhp-scale));
  transform-origin: top left;
  margin-right: calc(380px * (var(--fhp-scale) - 1));
  margin-bottom: calc(800px * (var(--fhp-scale) - 1));
}
.franco-hero-phone .phone-scale > .phone{ margin:0 auto; }

/* ===== MOLDURA DE CELULAR (nativo 380x800) ===== */
.franco-hero-phone{
  --fhp-card:#FFFFFF; --fhp-creme:#FAF7F0;
  --fhp-ink:#0B2A33; --fhp-tinta:#1A3F48;
  --fhp-cinza:#64748B; --fhp-cinza-2:#475569;
  --fhp-limpo:#22C55E; --fhp-baixo:#06B6D4; --fhp-medio:#EAB308; --fhp-alto:#F97316; --fhp-critico:#EF4444;
  --fhp-verde:#15803D;
  --fhp-chatbg:#EDE7DB;
  --fhp-T:19s;
  font-variant-numeric:tabular-nums;
}
.franco-hero-phone .phone{
  position:relative;
  width:380px;height:800px;
  background:#05171d;
  border-radius:46px;
  padding:11px;
  box-shadow:
    0 40px 90px rgba(0,0,0,.55),
    0 0 0 2px rgba(250,247,240,.05),
    inset 0 0 0 2px rgba(250,247,240,.03);
}
.franco-hero-phone .phone::before{
  content:"";position:absolute;inset:5px;border-radius:41px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.55);
  pointer-events:none;z-index:20;
}
.franco-hero-phone .screen{
  position:relative;width:100%;height:100%;
  border-radius:36px;overflow:hidden;
  background:var(--fhp-chatbg);
  display:flex;flex-direction:column;
}

/* ===== STATUS BAR ===== */
.franco-hero-phone .statusbar{
  flex:0 0 auto;height:34px;
  background:#0B2A33;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 20px;color:var(--fhp-creme);
  font-size:12px;font-weight:600;letter-spacing:.02em;z-index:6;
}
.franco-hero-phone .statusbar .sig{display:flex;align-items:center;gap:6px}
.franco-hero-phone .statusbar .bars{display:flex;align-items:flex-end;gap:2px;height:11px}
.franco-hero-phone .statusbar .bars i{width:2.5px;border-radius:1px;background:var(--fhp-creme)}
.franco-hero-phone .statusbar .bars i:nth-child(1){height:4px;opacity:.55}
.franco-hero-phone .statusbar .bars i:nth-child(2){height:6px;opacity:.7}
.franco-hero-phone .statusbar .bars i:nth-child(3){height:8px;opacity:.85}
.franco-hero-phone .statusbar .bars i:nth-child(4){height:11px}
.franco-hero-phone .statusbar .batt{
  width:22px;height:11px;border-radius:3px;position:relative;
  border:1.3px solid rgba(250,247,240,.85);padding:1.5px;
}
.franco-hero-phone .statusbar .batt::after{
  content:"";position:absolute;right:-3px;top:3px;width:2px;height:5px;
  border-radius:0 1px 1px 0;background:rgba(250,247,240,.85);
}
.franco-hero-phone .statusbar .batt b{display:block;height:100%;width:72%;border-radius:1px;background:var(--fhp-creme)}

/* ===== HEADER DO CHAT ===== */
.franco-hero-phone .cabhead{
  flex:0 0 auto;
  background:#0B2A33;
  display:flex;align-items:center;gap:12px;
  padding:9px 16px 12px;
  box-shadow:0 2px 10px rgba(0,0,0,.28);z-index:5;
}
.franco-hero-phone .cabhead .back{
  color:rgba(250,247,240,.7);font-size:20px;line-height:1;
  margin-right:-4px;font-weight:400;
}
.franco-hero-phone .cabhead .av{
  flex:0 0 auto;width:40px;height:40px;border-radius:11px;
  background:var(--fhp-verde);
  display:flex;align-items:center;justify-content:center;
  color:var(--fhp-creme);font-family:var(--font-display);font-size:24px;line-height:1;
  box-shadow:0 3px 10px rgba(0,0,0,.3), inset 0 1px 0 rgba(250,247,240,.15);
}
.franco-hero-phone .cabhead .who{display:flex;flex-direction:column;gap:1px;min-width:0}
.franco-hero-phone .cabhead .who .nm{font-size:15px;font-weight:700;color:var(--fhp-creme);letter-spacing:.01em}
.franco-hero-phone .cabhead .who .st{font-size:11px;font-weight:500;color:#7FD1A0}
.franco-hero-phone .cabhead .who .st b{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:#4ADE80;margin-right:4px;vertical-align:middle;
  box-shadow:0 0 6px rgba(74,222,128,.7);
}

/* ===== CORPO DO CHAT (viewport que recorta o feed rolante) ===== */
.franco-hero-phone .chatbody{
  position:relative;flex:1 1 auto;overflow:hidden;
  background:
    radial-gradient(60% 40% at 85% 8%, rgba(21,128,61,.05), transparent 60%),
    var(--fhp-chatbg);
}
.franco-hero-phone .feed{
  position:absolute;left:0;right:0;top:0;
  display:flex;flex-direction:column;justify-content:flex-start;
  gap:15px;padding:16px 14px 22px;
  will-change:transform;
}
.franco-hero-phone .feed .topspace{flex:0 0 auto;height:210px}

/* ===== BOLHAS ===== */
.franco-hero-phone .msg{display:flex;opacity:0;transform:translateY(10px)}
.franco-hero-phone .msg.right{justify-content:flex-end}
.franco-hero-phone .msg.left{justify-content:flex-start}
.franco-hero-phone .bub{
  position:relative;max-width:80%;
  padding:8px 11px 6px;border-radius:15px;
  font-size:13.5px;line-height:1.4;font-weight:500;
  box-shadow:0 1px 2px rgba(11,42,51,.14);
}
.franco-hero-phone .bub .cnpj{font-weight:700;letter-spacing:.01em}
.franco-hero-phone .bub .meta{
  display:block;text-align:right;margin-top:3px;
  font-size:10px;font-weight:600;letter-spacing:.02em;opacity:.7;
}
.franco-hero-phone .bub .meta .tick{margin-left:3px;font-size:11px;letter-spacing:-2px}

/* ENVIADA (vendedor) */
.franco-hero-phone .msg.right .bub{
  background:var(--fhp-verde);color:#EAF6EE;border-bottom-right-radius:5px;font-weight:600;
}
.franco-hero-phone .msg.right .bub .meta{color:#CDEBD8}
.franco-hero-phone .msg.right .bub .meta .tick{color:#8FE3B4}
.franco-hero-phone .msg.right .bub::after{
  content:"";position:absolute;right:-5px;bottom:0;
  border-width:0 0 8px 8px;border-style:solid;
  border-color:transparent transparent var(--fhp-verde) transparent;
}

/* RECEBIDA (Franco) */
.franco-hero-phone .msg.left .bub{
  background:#FFFFFF;color:var(--fhp-tinta);border-bottom-left-radius:5px;
}
.franco-hero-phone .msg.left .bub .meta{color:var(--fhp-cinza)}
.franco-hero-phone .msg.left .bub::after{
  content:"";position:absolute;left:-5px;bottom:0;
  border-width:8px 8px 0 0;border-style:solid;
  border-color:#FFFFFF transparent transparent transparent;
}

/* indicador "digitando" */
.franco-hero-phone .typing .bub{padding:11px 13px}
.franco-hero-phone .typing .dots{display:inline-flex;gap:4px;align-items:center}
.franco-hero-phone .typing .dots i{width:6px;height:6px;border-radius:50%;background:var(--fhp-tinta);opacity:.4}
.franco-hero-phone .anim .typing .dots i{animation:fhp-tdot 1.15s infinite ease-in-out}
.franco-hero-phone .anim .typing .dots i:nth-child(2){animation-delay:.18s}
.franco-hero-phone .anim .typing .dots i:nth-child(3){animation-delay:.36s}
@keyframes fhp-tdot{0%,60%,100%{transform:translateY(0);opacity:.35}30%{transform:translateY(-4px);opacity:.9}}

/* ===== CARD DO SCORE ===== */
.franco-hero-phone .msg.card-msg .bub{max-width:88%;padding:0;overflow:hidden;background:#FFFFFF}
.franco-hero-phone .scorecard{padding:14px 14px 12px;width:238px}
.franco-hero-phone .scorecard .sc-top{display:flex;align-items:center;gap:13px}
.franco-hero-phone .sq-prog{position:relative;width:88px;height:88px;flex:0 0 auto}
.franco-hero-phone .sq-prog svg{display:block;width:88px;height:88px}
.franco-hero-phone .sq-prog .center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.franco-hero-phone .sq-prog .n{font-family:var(--font-mono);font-size:28px;font-weight:800;color:var(--fhp-ink);line-height:.9;letter-spacing:-.02em}
.franco-hero-phone .sq-prog .f{font-family:var(--font-mono);font-size:8px;font-weight:800;letter-spacing:.14em;color:#8C6D14;margin-top:4px}
.franco-hero-phone .prog{stroke-dasharray:0 1000}
.franco-hero-phone .scorecard .sc-side{display:flex;flex-direction:column;gap:3px}
.franco-hero-phone .scorecard .sc-side .lb{font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fhp-cinza)}
.franco-hero-phone .scorecard .sc-side .vl{font-size:15px;font-weight:800;color:var(--fhp-ink);letter-spacing:.01em}
.franco-hero-phone .scorecard .sc-side .cn{font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--fhp-cinza-2);margin-top:2px}

.franco-hero-phone .mini-regua{margin-top:13px}
.franco-hero-phone .mini-regua .track{
  position:relative;display:flex;height:9px;border-radius:5px;overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.18);
}
.franco-hero-phone .mini-regua .seg{flex:1 1 auto}
.franco-hero-phone .mini-regua .seg.critico{background:var(--fhp-critico)}
.franco-hero-phone .mini-regua .seg.alto  {background:var(--fhp-alto)}
.franco-hero-phone .mini-regua .seg.medio {background:var(--fhp-medio);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.85)}
.franco-hero-phone .mini-regua .seg.baixo {background:var(--fhp-baixo)}
.franco-hero-phone .mini-regua .seg.limpo {background:var(--fhp-limpo)}
.franco-hero-phone .mini-regua .pin{
  position:absolute;left:48%;top:-4px;transform:translateX(-50%);
  width:3px;height:17px;border-radius:2px;background:var(--fhp-ink);
  box-shadow:0 0 0 2px #FFFFFF, 0 2px 5px rgba(0,0,0,.3);
}
.franco-hero-phone .mini-regua .labels{
  display:flex;margin-top:6px;
  font-family:var(--font-mono);
  font-size:6.5px;font-weight:700;letter-spacing:.06em;color:var(--fhp-cinza);
}
.franco-hero-phone .mini-regua .labels span{flex:1 1 auto;text-align:center}
.franco-hero-phone .mini-regua .labels span.on{color:#8C6D14}

.franco-hero-phone .msg.card-msg .bub .meta{padding:0 14px 8px;margin-top:-2px}

/* ===== CARD DO RAIO X ===== */
.franco-hero-phone .msg.raiox-msg .bub{max-width:88%;padding:12px 13px 10px;background:#FFFFFF}
.franco-hero-phone .raiox-msg .rx-head{
  font-family:var(--font-mono);
  font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fhp-cinza);margin-bottom:11px;
}
.franco-hero-phone .wire{
  position:relative;
  display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:start;
  width:216px;
}
.franco-hero-phone .wire .wq{
  width:64px;height:64px;border-radius:12px;
  border:1.5px dashed rgba(11,42,51,.22);
  background:
    linear-gradient(90deg, rgba(11,42,51,.03) 0%, rgba(11,42,51,.09) 25%, rgba(11,42,51,.03) 50%),
    rgba(11,42,51,.03);
  background-size:220% 100%, 100% 100%;
}
.franco-hero-phone .wire .wcol{display:flex;flex-direction:column;gap:9px;padding-top:4px}
.franco-hero-phone .wire .wrow{
  height:11px;border-radius:6px;
  background:
    linear-gradient(90deg, rgba(11,42,51,.04) 0%, rgba(11,42,51,.11) 25%, rgba(11,42,51,.04) 50%),
    rgba(11,42,51,.05);
  background-size:220% 100%, 100% 100%;
}
.franco-hero-phone .wire .wrow.r1{width:92%}
.franco-hero-phone .wire .wrow.r2{width:64%}
.franco-hero-phone .wire .wrow.r3{width:80%}
.franco-hero-phone .wire .scan{
  position:absolute;left:-6px;right:-6px;top:0;height:2px;
  background:linear-gradient(90deg,transparent, rgba(234,179,8,.95), transparent);
  box-shadow:0 0 12px 1px rgba(234,179,8,.5);opacity:0;
}
.franco-hero-phone .anim .wire .wq,.franco-hero-phone .anim .wire .wrow{animation:fhp-wireShimmer 1.7s infinite linear}
.franco-hero-phone .anim .wire .wrow.r2{animation-delay:.25s}
.franco-hero-phone .anim .wire .wrow.r3{animation-delay:.5s}
@keyframes fhp-wireShimmer{0%{background-position:130% 0, 0 0}100%{background-position:-130% 0, 0 0}}

/* ===== LEITURA (typewriter) ===== */
.franco-hero-phone .leitura-head .bub{
  background:#FFFFFF;font-weight:700;
  font-family:var(--font-mono);
  font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--fhp-cinza);
}
.franco-hero-phone .msg.leitura-msg .bub{
  max-width:82%;
  display:flex;align-items:flex-start;gap:9px;
  background:#FFFFFF;
}
.franco-hero-phone .leitura-msg .mark{
  flex:0 0 auto;width:4px;align-self:stretch;min-height:20px;border-radius:2px;
  background:var(--fhp-medio);margin-top:1px;
}
.franco-hero-phone .leitura-msg .tw{
  font-size:14px;font-weight:600;line-height:1.42;color:var(--fhp-tinta);
}
.franco-hero-phone .leitura-msg .cur{
  display:inline-block;width:2px;height:1.05em;
  background:var(--fhp-medio);margin-left:1px;vertical-align:-2px;
  animation:fhp-curBlink .9s steps(1) infinite;
}
@keyframes fhp-curBlink{0%,100%{opacity:1}50%{opacity:0}}

/* ===== BOLHA GANCHO FINAL ===== */
.franco-hero-phone .msg.cta-msg .bub{
  max-width:82%;
  background:linear-gradient(135deg, #0B2A33 0%, #123f4a 100%);
  color:var(--fhp-creme);font-weight:600;font-size:13.5px;
  display:flex;align-items:center;gap:10px;
}
.franco-hero-phone .cta-msg .bub::after{border-color:#0B2A33 transparent transparent transparent}
.franco-hero-phone .cta-msg .cta-txt{line-height:1.38}
.franco-hero-phone .cta-msg .cta-txt b{font-family:var(--font-display);font-weight:400;font-size:16px;color:var(--fhp-creme)}
.franco-hero-phone .cta-msg .arrow{
  flex:0 0 auto;width:26px;height:26px;border-radius:8px;
  background:var(--fhp-verde);display:flex;align-items:center;justify-content:center;
  color:var(--fhp-creme);font-size:15px;line-height:1;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
}
.franco-hero-phone .cta-msg .bub .meta{color:rgba(250,247,240,.55)}

/* ===== BARRA DE INPUT ===== */
.franco-hero-phone .inputbar{
  flex:0 0 auto;
  background:#0B2A33;
  display:flex;align-items:center;gap:9px;
  padding:9px 12px 11px;
  box-shadow:0 -2px 12px rgba(0,0,0,.30);z-index:6;
}
.franco-hero-phone .inputbar .field{
  position:relative;
  flex:1 1 auto;min-width:0;
  display:flex;align-items:center;
  height:38px;padding:0 15px;
  background:var(--fhp-creme);
  border-radius:19px;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.12);
  overflow:hidden;
}
.franco-hero-phone .inputbar .field .ph{
  position:absolute;left:15px;top:50%;transform:translateY(-50%);
  font-size:14px;font-weight:400;color:var(--fhp-cinza);
  white-space:nowrap;pointer-events:none;
}
.franco-hero-phone .inputbar .field .typed{
  font-size:14px;font-weight:600;color:var(--fhp-ink);
  letter-spacing:.01em;white-space:nowrap;
  font-family:var(--font-mono);
}
.franco-hero-phone .inputbar .field .icur{
  display:inline-block;width:2px;height:17px;
  background:var(--fhp-verde);margin-left:2px;vertical-align:-3px;
  animation:fhp-curBlink .9s steps(1) infinite;
}
.franco-hero-phone .inputbar .send{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;
  background:var(--fhp-verde);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(21,128,61,.4), inset 0 1px 0 rgba(250,247,240,.18);
}
.franco-hero-phone .inputbar .send svg{display:block;width:19px;height:19px}
.franco-hero-phone .inputbar .send svg path{fill:var(--fhp-creme)}

/* ============ TIMELINE DA CONVERSA (loop 19s) ============ */
@keyframes fhp-msgIn{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:translateY(0)}}
@keyframes fhp-feedClear{0%,93%{opacity:1}98%,100%{opacity:0}}
.franco-hero-phone .anim .feed{animation:fhp-feedClear var(--fhp-T) infinite ease-in}

@keyframes fhp-sendPress{
  0%,14.7%{transform:scale(1);box-shadow:0 2px 8px rgba(21,128,61,.4), inset 0 1px 0 rgba(250,247,240,.18)}
  15.8%{transform:scale(.84);box-shadow:0 0 0 6px rgba(21,128,61,.28), 0 2px 8px rgba(21,128,61,.5)}
  17.2%,100%{transform:scale(1);box-shadow:0 2px 8px rgba(21,128,61,.4), inset 0 1px 0 rgba(250,247,240,.18)}
}
.franco-hero-phone .anim .inputbar .send{animation:fhp-sendPress var(--fhp-T) infinite cubic-bezier(.3,.7,.3,1)}

@keyframes fhp-m1{0%,16.6%{opacity:0;transform:translateY(10px)} 19.6%,100%{opacity:1;transform:translateY(0)}}
@keyframes fhp-mtyp{0%,20.5%{opacity:0;transform:translateY(10px)} 23%,25.5%{opacity:1;transform:translateY(0)} 27%,100%{opacity:0;transform:translateY(0);max-height:0;margin:0;padding:0}}
@keyframes fhp-m2{0%,26.3%{opacity:0;transform:translateY(10px)} 29.5%,100%{opacity:1;transform:translateY(0)}}
@keyframes fhp-m3{0%,33.2%{opacity:0;transform:translateY(12px)} 36.5%,100%{opacity:1;transform:translateY(0)}}
@keyframes fhp-m4{0%,47.4%{opacity:0;transform:translateY(12px)} 50.5%,100%{opacity:1;transform:translateY(0)}}
@keyframes fhp-m5a{0%,59.5%{opacity:0;transform:translateY(10px)} 62.5%,100%{opacity:1;transform:translateY(0)}}
@keyframes fhp-m5b{0%,63.2%{opacity:0;transform:translateY(10px)} 66.2%,100%{opacity:1;transform:translateY(0)}}
@keyframes fhp-m6{0%,85.8%{opacity:0;transform:translateY(10px)} 89%,100%{opacity:1;transform:translateY(0)}}

.franco-hero-phone .anim .m1{animation:fhp-m1 var(--fhp-T) infinite cubic-bezier(.2,.7,.2,1)}
.franco-hero-phone .anim .mtyp{animation:fhp-mtyp var(--fhp-T) infinite cubic-bezier(.2,.7,.2,1)}
.franco-hero-phone .anim .m2{animation:fhp-m2 var(--fhp-T) infinite cubic-bezier(.2,.7,.2,1)}
.franco-hero-phone .anim .m3{animation:fhp-m3 var(--fhp-T) infinite cubic-bezier(.2,.7,.2,1)}
.franco-hero-phone .anim .m4{animation:fhp-m4 var(--fhp-T) infinite cubic-bezier(.2,.7,.2,1)}
.franco-hero-phone .anim .m5a{animation:fhp-m5a var(--fhp-T) infinite cubic-bezier(.2,.7,.2,1)}
.franco-hero-phone .anim .m5b{animation:fhp-m5b var(--fhp-T) infinite cubic-bezier(.2,.7,.2,1)}
.franco-hero-phone .anim .m6{animation:fhp-m6 var(--fhp-T) infinite cubic-bezier(.2,.7,.2,1)}

@keyframes fhp-arcFill{0%,33.2%{stroke-dasharray:0 1000} 42%,100%{stroke-dasharray:520 480}}
.franco-hero-phone .anim .prog{animation:fhp-arcFill var(--fhp-T) infinite cubic-bezier(.4,0,.2,1)}

@keyframes fhp-scanSweep{0%,47.4%{opacity:0;top:-4%} 49.5%{opacity:.9} 54.5%{opacity:.9;top:104%} 56.5%,100%{opacity:0;top:104%}}
.franco-hero-phone .anim .wire .scan{animation:fhp-scanSweep var(--fhp-T) infinite linear}

/* ===== REDUCED MOTION → estado estático completo ===== */
@media (prefers-reduced-motion: reduce){
  .franco-hero-phone .anim *{animation:none !important}
  .franco-hero-phone .feed{opacity:1 !important}
  .franco-hero-phone .msg{opacity:1 !important;transform:none !important}
  .franco-hero-phone .msg.typing{display:none !important}
  .franco-hero-phone .prog{stroke-dasharray:520 480 !important}
  .franco-hero-phone .leitura-msg .cur{display:none !important}
  .franco-hero-phone .wire .scan{display:none !important}
  .franco-hero-phone .inputbar .field .typed{display:none !important}
  .franco-hero-phone .inputbar .field .ph{opacity:1 !important}
  .franco-hero-phone .inputbar .field .icur{display:none !important}
  .franco-hero-phone .inputbar .send{transform:none !important}
}

/* ===== RESPONSIVO =====
   A escala é um NÚMERO puro (calc de números, sem misturar px/vw — isso invalidaria
   o valor e deixaria o transform sem escala). Estes valores são FALLBACKS
   conservadores, dimensionados pra ponta estreita de cada faixa, pra que já no
   primeiro paint (antes do JS) o telefone NUNCA estoure a largura. O IIFE ajusta
   --fhp-scale pra largura real disponível (mais justo), com teto no desktop. */
@media (max-width:1180px){
  .franco-hero-phone{ --fhp-scale: calc(560 / 800); }
}
/* Stack (<=960px): telefone empilha embaixo do texto. */
@media (max-width:960px){
  .franco-hero-phone{ --fhp-scale: calc(560 / 800); max-width:100%; }
}
/* Mobile estreito: fallback pequeno o bastante pra caber em ~320-390px sem overflow. */
@media (max-width:640px){
  .franco-hero-phone{ --fhp-scale: 0.72; }
}

/* ═════════════════════════════════════════════════════════
   BLOG · listagem de artigos (/blog/)
   Componente preparado pra receber .post-card. Segue os tokens
   e o padrão visual de .spec-card / .section-header.
═════════════════════════════════════════════════════════ */
.blog-section { padding-top: 128px; }
@media (max-width: 768px) { .blog-section { padding-top: 104px; } }

/* Contêiner da listagem (grade de cards). Vazio por padrão. */
.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 32px;
  margin-top: 56px;
}
@media (max-width: 900px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .post-grid { grid-template-columns: 1fr; } }

/* Card de artigo (ainda não renderizado; disponível pro template). */
.post-card {
  display: flex;
  flex-direction: column;
  padding: 28px 24px;
  border: 0.5px solid var(--border-dark);
  border-radius: 16px;
  background: var(--petroleo-deep);
  text-decoration: none;
  transition: border-color .2s ease, transform .2s ease;
}
.post-card:hover {
  border-color: var(--verde-border);
  transform: translateY(-2px);
}
.post-card-meta {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--verde-ink); margin-bottom: 16px;
}
.post-card-title {
  font-family: var(--font-display); font-size: 24px; font-weight: 500;
  color: var(--creme); margin-bottom: 12px; letter-spacing: -0.4px; line-height: 1.15;
}
.post-card-excerpt {
  font-size: 14px; line-height: 1.6; color: var(--cinza-lighter);
}

/* ── CTA final da página /como-funciona · D7 (faixa simples, sem formulário) ── */
.cta-final-inner--cf { text-align: center; }
.cta-final-inner--cf .cta-final-cta {
  display: inline-block;
  width: auto;
  margin-top: 8px;
}

/* ── Kicker da abertura de /produto · C1 (dentro da cena .franco-hero) ── */
.franco-hero .content .franco-hero-kicker {
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 500;
  letter-spacing: 2px; text-transform: uppercase;
  color: #4ADE80;
  margin: 0 0 16px;
}

/* ── Link "Conheça o produto completo →" no fim do #hortifruti (home) ── */
.spec-produto-link { margin-top: 36px; }
.produto-link {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--verde-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.produto-link:hover { border-bottom-color: var(--verde-ink); }

/* ── B1 · "Dois jeitos de usar" (/produto) · dois cards teaser ──
   Reusa .offer-card / .offer-tag / .offer-cta / .painel-ph (padrão da página).
   Só acrescenta o layout de grade e ajustes locais dos teasers. */
.dois-jeitos-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 8px;
}
.dois-jeitos-card { padding: 32px 30px 30px; }
.dois-jeitos-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 400; line-height: 1.12; letter-spacing: -0.6px;
  color: var(--creme); margin: 0 0 22px;
}
/* Quadro placeholder neutro do teaser: mesma moldura/fundo do .painel-ph */
.dois-jeitos-ph { margin-bottom: 26px; }
/* CTA do teaser: reusa o botão verde padrão (.offer-cta), theme-safe.
   Só empurra pro rodapé do card pra alinhar os dois botões. */
.dois-jeitos-cta { margin-top: auto; }
@media (max-width: 760px) {
  .dois-jeitos-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* ═════════════════════════════════════════════════════════
   C3 · OS DOIS JEITOS DE USAR (/como-funciona)
   Duas colunas espelhadas no desktop, empilhadas no mobile.
   Col 1 = app da Franco (lista compacta + placeholder do painel);
   Col 2 = WhatsApp (ilustração do telefone .franco-hero-phone + CTA).
   Reusa os tokens de tema (--t-, --verde, --font-) e as classes .painel-ph e .offer-cta.
═════════════════════════════════════════════════════════ */
.jeitos-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
  margin-top: 8px;
}
.jeitos-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.jeitos-col-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 400; line-height: 1.14; letter-spacing: -0.5px;
  color: var(--creme); margin: 0 0 12px;
}
.jeitos-col-text {
  font-size: 15px; line-height: 1.55;
  color: var(--cinza-lighter);
  max-width: 460px; margin: 0 0 24px;
}
/* Placeholder do painel: reusa .painel-ph; aqui só reserva o respiro embaixo. */
.jeitos-ph { margin-bottom: 26px; }
/* Lista compacta dos 4 itens do painel: mesma tipografia do .dado-origem-item,
   separadores discretos, sem marcador (a hierarquia é o h4). */
.jeitos-lista {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
}
.jeitos-lista-item {
  padding: 16px 0;
  border-top: 0.5px solid var(--border-dark);
}
.jeitos-lista-item:first-child { border-top: 0; padding-top: 0; }
.jeitos-lista-item h4 {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.4px;
  font-weight: 500; text-transform: none;
  color: var(--creme); margin: 0 0 6px;
}
.jeitos-lista-item p {
  font-size: 14px; line-height: 1.5;
  color: var(--cinza-lighter); margin: 0;
}
/* Coluna do WhatsApp: telefone centrado, escala contida pra caber na coluna. */
.jeitos-phone {
  display: flex; justify-content: center;
  margin-bottom: 26px;
}
.jeitos-phone .franco-hero-phone { --fhp-scale: calc(440 / 800); }
/* CTA do WhatsApp: reusa .offer-cta (verde padrão, theme-safe); empurra pro fim
   da coluna pra alinhar com a base da coluna 1. */
.jeitos-cta { margin-top: auto; align-self: flex-start; }
/* Linha de fechamento abaixo das duas colunas. */
.jeitos-fecho {
  font-family: var(--font-mono);
  font-size: 13px; letter-spacing: 0.3px;
  color: var(--cinza);
  text-align: center;
  margin: 40px 0 0;
}
@media (max-width: 860px) {
  .jeitos-grid { grid-template-columns: 1fr; gap: 44px; }
  .jeitos-cta { align-self: stretch; text-align: center; }
}

/* ═════════════════════════════════════════════════════════
   REFINO /produto (PROMPT 11)
═════════════════════════════════════════════════════════ */

/* ── Item 1 · CTAs dos teasers "Dois jeitos": largura natural, à esquerda ── */
.dois-jeitos-cta--auto {
  display: inline-block;
  align-self: flex-start;
  text-align: left;
  width: auto;
}

/* ── Item 1 · quadro ilustrativo dentro do card (mesma moldura do .painel-ph) ── */
.dois-jeitos-mock {
  position: relative;
  border: 0.5px solid var(--border-dark-strong);
  border-radius: var(--radius-lg);
  background: var(--petroleo-light);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}

/* CARD GESTÃO · mini-painel de compradores acompanhados */
.dois-jeitos-mock--gestao { min-height: 210px; }
.carteira-mini {
  width: 100%;
  display: flex; flex-direction: column; gap: 0;
  background: var(--petroleo-deep);
  border: 0.5px solid var(--border-dark);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.carteira-mini-head {
  font-family: var(--font-mono);
  font-size: 9px; letter-spacing: 0.9px; text-transform: uppercase;
  color: var(--cinza-light);
  padding: 12px 14px 10px;
  border-bottom: 0.5px solid var(--border-dark);
}
.carteira-mini-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px;
  border-top: 0.5px solid var(--border-dark);
}
.carteira-mini-row:first-of-type { border-top: 0; }
.carteira-mini-nome {
  font-size: 13px; font-weight: 500; color: var(--creme);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.carteira-mini-badge {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.4px;
  padding: 4px 9px; border-radius: 99px; white-space: nowrap;
}
.carteira-mini-badge b { font-weight: 700; }
.carteira-mini-badge.estavel {
  color: var(--verde-ink);
  background: var(--verde-soft);
  border: 0.5px solid var(--verde-border);
}
.carteira-mini-badge.atencao {
  color: var(--atencao);
  background: rgba(245, 158, 11, 0.12);
  border: 0.5px solid rgba(245, 158, 11, 0.30);
}
/* Tarja nível 2 (PROMPT 17 · B): badge só cor, sem rótulo de classificação.
   Vira um quadradinho (eco do motivo do score .tarja-sq), mantém o semáforo
   verde/âmbar via .estavel/.atencao; o texto some. Preenchimento sólido nos
   tons do semáforo pra ler como chip gráfico nos dois temas. */
.carteira-mini-badge--cor {
  width: 14px; height: 14px; padding: 0; border-radius: 5px;
  font-size: 0; letter-spacing: 0;
}
.carteira-mini-badge--cor.estavel {
  background: var(--verde-dim);
  border-color: var(--verde-dim);
}
.carteira-mini-badge--cor.atencao {
  background: var(--atencao);
  border-color: var(--atencao);
}

/* CARD CONSULTA · telefone estático (escala menor pra caber no card) */
.dois-jeitos-mock--consulta { padding: 0; background: var(--petroleo-deep); }
.dois-jeitos-mock--consulta .franco-hero-phone { --fhp-scale: calc(360 / 800); }

/* ── Item 1 · estado ESTÁTICO do telefone (sem .anim, sem id).
   Mostra a conversa já resolvida — mesmo destino visual do reduced-motion. ── */
.franco-hero-phone--static .feed { opacity: 1 !important; }
.franco-hero-phone--static .msg { opacity: 1 !important; transform: none !important; }
.franco-hero-phone--static .prog { stroke-dasharray: 520 480 !important; }
.franco-hero-phone--static .inputbar .field .ph { opacity: 1 !important; }

/* ── Item 3 · seção Consulta encorpada: texto + telefone lado a lado ── */
.consulta-split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
  margin-top: 8px;
}
.consulta-split-lede { margin-bottom: 28px; }
.consulta-bullets {
  list-style: disc;
  padding-left: 20px;
  margin: 0 0 24px;
  display: flex; flex-direction: column; gap: 10px;
}
.consulta-bullets li {
  font-size: 16px; line-height: 1.5;
  color: var(--cinza-lighter);
}
.consulta-planos-link {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 13px; letter-spacing: 0.3px;
  color: var(--verde-ink);
  text-decoration: none;
}
.consulta-planos-link:hover { text-decoration: underline; }
.consulta-split-phone { display: flex; justify-content: center; }
.consulta-split-phone .franco-hero-phone { --fhp-scale: calc(480 / 800); }
@media (max-width: 860px) {
  .consulta-split { grid-template-columns: 1fr; gap: 32px; }
  .consulta-split-phone { order: 2; }
}

/* ── Franco Gestão · SUPERFÍCIE FIXA, TINTA FIXA ──
   Fundo #0B2A33 literal nos dois temas (não flipa com o tema, mesma decisão do
   #compromisso escuro). Tinta creme #F5F2EA e verde #4ADE80 fixos por dentro.
   Contraste >= 4.5:1 medido nos dois temas em todos os textos internos. */
.gestao-section {
  background: #0B2A33;
  color: #F5F2EA;
  padding-bottom: 96px;
}
.gestao-section .kicker { color: #4ADE80; }
.gestao-section .kicker::before { background: #4ADE80; }
.gestao-section .section-h2 { color: #F5F2EA; }
.gestao-section .section-h2 em { color: #4ADE80; }
/* a lede consultiva: verde de marca fixo (informativo, não decorativo) */
.gestao-section .como-lede { color: #4ADE80; }

/* ═══ C1 · CABEÇALHO EDITORIAL · duas colunas ═══
   Texto à esquerda (kicker + h2 + fórmula-lede + parágrafo consultivo),
   BI animado à direita. Empilha no celular. */
.gestao-head {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(40px, 5vw, 64px);
  align-items: start;
  margin-bottom: clamp(48px, 7vw, 76px);
}
.gestao-head-col { min-width: 0; }
.gestao-head-col--texto .kicker { margin-bottom: 14px; }
.gestao-head-col--texto .section-h2 { margin-bottom: 24px; }

/* ── A FÓRMULA como LEDE · bloco composto (não parágrafo cru).
   Filete verde à esquerda + respiro; 3 linhas em hierarquia/escada:
   a 1ª maior, as 2 seguintes descem em tamanho e recuam. ── */
.gestao-lede {
  border-left: 2px solid rgba(74,222,128,0.55);
  padding-left: clamp(16px, 2vw, 22px);
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gestao-lede p {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.4px;
  line-height: 1.16;
  color: #F5F2EA;
  margin: 0;
}
.gestao-lede-1 { font-size: clamp(24px, 3vw, 34px); }
.gestao-lede-2 {
  font-size: clamp(19px, 2.2vw, 25px);
  color: rgba(245,242,234,0.82);
  margin-left: clamp(8px, 1.4vw, 18px);
}
.gestao-lede-3 {
  font-size: clamp(19px, 2.2vw, 25px);
  color: #4ADE80;
  margin-left: clamp(16px, 2.8vw, 36px);
}

/* parágrafo consultivo (C4) reformatado dentro do bloco editorial: corpo,
   não protagonista. Sobrescreve o verde do .como-lede pra tinta de corpo. */
.gestao-section .gestao-consultivo {
  color: rgba(245,242,234,0.80);
  font-size: 15px;
  line-height: 1.6;
  max-width: 52ch;
  margin: 0;
}

/* legenda de cor · corpo pequeno abaixo do BI (aparece UMA vez no site) */
.gestao-cor-legenda {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  color: rgba(245,242,234,0.62);
  margin: 14px 0 0;
}

/* ═══ C2 · OS VERBOS ACESOS · 8 verbos em linha, separados por "·" ═══
   Sem descrição. Sincronizados com a animação do BI: o verbo da etapa ativa
   acende (cor cheia), os outros baixam a ~40%. */
.gestao-verbos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 0;
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.2;
  letter-spacing: -0.4px;
}
.gestao-verbo {
  color: #F5F2EA;
  opacity: 0.4;
  transition: opacity 0.6s ease, color 0.6s ease;
}
.gestao-verbo::after {
  content: "·";
  color: rgba(245,242,234,0.35);
  margin: 0 0.5em;
  opacity: 1;
}
.gestao-verbo:last-child::after { content: none; }

/* ═══ C3 · LINHA DE AMPLITUDE · título da faixa de verbos (serifada, hierarquia de sub-bloco) ═══ */
.gestao-amplitude {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 3.4vw, 38px);
  line-height: 1.16;
  letter-spacing: -0.6px;
  color: #F5F2EA;
  margin: clamp(40px, 6vw, 64px) 0 clamp(16px, 2vw, 22px);
  max-width: 30ch;
}

/* ── C3 · O BI · ilustração de painel, tudo tarjado ──
   moldura petróleo um degrau acima do fundo; nenhum número real legível. */
.gestao-bi {
  position: relative;
  border: 0.5px solid rgba(245,242,234,0.16);
  border-radius: var(--radius-lg);
  background: rgba(245,242,234,0.035);
  padding: 28px 28px 40px;
  box-shadow: 0 24px 60px -30px rgba(0,0,0,0.55);
}
.bi-topo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 24px;
}
/* tarja nível 2: card sem rótulo de classificação — só a tarja de cor.
   Sem o label, garante altura pra não colapsar ao lado dos outros. */
.bi-card--tarja { justify-content: center; min-height: 62px; }
.bi-card {
  border: 0.5px solid rgba(245,242,234,0.12);
  border-radius: var(--radius-md);
  background: rgba(245,242,234,0.04);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bi-card-lb,
.bi-bloco-lb {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(245,242,234,0.68);
}
.bi-card-val { height: 12px; }
.bi-card-val.w70 { max-width: 128px; }
.bi-card-val.w55 { max-width: 104px; }
.bi-card-val.w40 { max-width: 78px; }
/* barras da tarja sobre fundo escuro: sobem a opacidade pra virar "redação" nítida */
.gestao-bi .tarja-barra { background: rgba(245,242,234,0.20); }

.bi-corpo {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 28px;
  align-items: stretch;
}
.bi-grafico,
.bi-ranking {
  border: 0.5px solid rgba(245,242,234,0.12);
  border-radius: var(--radius-md);
  background: rgba(245,242,234,0.04);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.bi-barras {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  min-height: 120px;
}
.bi-bar {
  flex: 1;
  background: rgba(245,242,234,0.20);
  border-radius: 2px 2px 0 0;
}
.bi-bar--verde { background: #4ADE80; }

.bi-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.bi-linha { display: flex; align-items: center; gap: 12px; }
.bi-linha-val { height: 8px; flex: 1; }
.bi-linha-val.w90 { max-width: none; }
.bi-linha-val.w70 { max-width: 78%; }
.bi-linha-val.w55 { max-width: 60%; }
.bi-linha-val.w40 { max-width: 44%; }
/* nome tarjado dentro do BI escuro: moldura um degrau acima do card */
.gestao-bi .tarja-nome { background: rgba(245,242,234,0.06); border-color: rgba(245,242,234,0.16); }
.gestao-bi .tarja-nome .tarja-nome-lb,
.gestao-bi .tarja-nome .tarja-lock { color: rgba(245,242,234,0.72); border-color: rgba(245,242,234,0.72); }
.gestao-bi .tarja-sq .sq-track { stroke: rgba(245,242,234,0.14); }

.gestao-bi-selo {
  position: absolute;
  right: 20px; bottom: 14px;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 1px;
  color: rgba(245,242,234,0.62);
}

/* ═══ BI ANIMADO · ciclo lento ~12s (4 etapas × 3s), CSS puro, loop infinito ═══
   O destaque percorre os elementos: card de total (1) → gráfico (2) →
   ranking (3) → alerta tarjado (4). O elemento ativo ilumina (opacidade cheia
   + leve realce), os outros baixam pra ~0.35. Os verbos (C2) usam os MESMOS
   keyframes/timing, sincronizados por data-step. */
.gestao-bi--anim .bi-step,
.gestao-verbo { will-change: opacity; }

/* etapas do BI: default esmaecido, cada data-step acende na sua janela */
.gestao-bi--anim .bi-step[data-step="1"] { animation: gestaoStep1 12s linear infinite; }
.gestao-bi--anim .bi-step[data-step="2"] { animation: gestaoStep2 12s linear infinite; }
.gestao-bi--anim .bi-step[data-step="3"] { animation: gestaoStep3 12s linear infinite; }
.gestao-bi--anim .bi-step[data-step="4"] { animation: gestaoStep4 12s linear infinite; }

/* verbos: mesma cadência; acesos = cor cheia (opacity 1), apagados = 0.4.
   Cada verbo herda a etapa do bloco que ele nomeia. */
.gestao-verbo[data-step="1"] { animation: gestaoVerbo1 12s linear infinite; }
.gestao-verbo[data-step="2"] { animation: gestaoVerbo2 12s linear infinite; }
.gestao-verbo[data-step="3"] { animation: gestaoVerbo3 12s linear infinite; }
.gestao-verbo[data-step="4"] { animation: gestaoVerbo4 12s linear infinite; }

/* BI: opacidade base 0.4, sobe pra 1 na janela da etapa (25% do ciclo cada) */
@keyframes gestaoStep1 { 0%,2% { opacity:.4 } 6%,19% { opacity:1 } 25%,100% { opacity:.4 } }
@keyframes gestaoStep2 { 0%,25% { opacity:.4 } 31%,44% { opacity:1 } 50%,100% { opacity:.4 } }
@keyframes gestaoStep3 { 0%,50% { opacity:.4 } 56%,69% { opacity:1 } 75%,100% { opacity:.4 } }
@keyframes gestaoStep4 { 0%,75% { opacity:.4 } 81%,94% { opacity:1 } 100% { opacity:.4 } }

/* verbos: acende (opacity 1 + verde) na mesma janela; volta pra 0.4 */
@keyframes gestaoVerbo1 { 0%,2% { opacity:.4;color:#F5F2EA } 6%,19% { opacity:1;color:#4ADE80 } 25%,100% { opacity:.4;color:#F5F2EA } }
@keyframes gestaoVerbo2 { 0%,25% { opacity:.4;color:#F5F2EA } 31%,44% { opacity:1;color:#4ADE80 } 50%,100% { opacity:.4;color:#F5F2EA } }
@keyframes gestaoVerbo3 { 0%,50% { opacity:.4;color:#F5F2EA } 56%,69% { opacity:1;color:#4ADE80 } 75%,100% { opacity:.4;color:#F5F2EA } }
@keyframes gestaoVerbo4 { 0%,75% { opacity:.4;color:#F5F2EA } 81%,94% { opacity:1;color:#4ADE80 } 100% { opacity:.4;color:#F5F2EA } }

/* reduced-motion: tudo estático e legível — BI cheio, verbos cor cheia.
   Casa os mesmos seletores de atributo pra vencer a especificidade das etapas. */
@media (prefers-reduced-motion: reduce) {
  .gestao-bi--anim .bi-step[data-step] { animation: none; opacity: 1; }
  .gestao-verbo[data-step] { animation: none; opacity: 1; color: #F5F2EA; }
}

@media (max-width: 860px) {
  .gestao-head { grid-template-columns: 1fr; gap: 40px; }
  .gestao-head-col--bi { order: 2; }
}
@media (max-width: 760px) {
  .gestao-verbos { font-size: clamp(20px, 6vw, 26px); }
  .bi-topo { grid-template-columns: 1fr; gap: 12px; }
  .bi-card--tarja { min-height: 0; }
  .bi-corpo { grid-template-columns: 1fr; gap: 18px; }
  .bi-barras { min-height: 96px; }
}

/* ═════════════════════════════════════════════════════════
   /como-funciona — OS 4 PASSOS (grade 2x2) + janela do painel estática
   (PROMPT 17 · D). O scrollytelling saiu: os passos viram quadrados
   compactos com o quadrado da marca de numeral (arco progressivo, sem
   número); a janela de navegador vira UM visual estático tarjado.
   Componentes de tela (.cf-scorehead/.cf-sq/.cf-scoref/.cf-rows) seguem
   reusados pela janela estática.
═════════════════════════════════════════════════════════ */

/* ── GRADE 2x2 + janela lado a lado (desktop) / empilhados (celular) ── */
.cf-como {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 56px;
  align-items: center;
}
.cf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.cf-quad {
  background: var(--petroleo-light);
  border: 0.5px solid var(--border-dark-strong);
  border-radius: var(--radius-md);
  padding: 26px 24px;
  display: flex; flex-direction: column; gap: 16px;
}
.cf-quad-sq { width: 52px; height: 52px; position: relative; }
.cf-quad-sq svg { display: block; overflow: visible; }
.cf-quad-sq .sq-track { fill: none; stroke: rgba(255,255,255,0.12); stroke-width: 3.4; }
.cf-quad-sq .sq-arc {
  fill: none; stroke: var(--verde); stroke-width: 3.4; stroke-linecap: round;
}
html.theme-light .cf-quad-sq .sq-track { stroke: rgba(11,42,51,0.12); }
.cf-quad-body h3 {
  font-family: var(--font-display);
  font-size: 24px; font-weight: 400;
  color: var(--creme); margin-bottom: 8px; letter-spacing: -0.4px;
  line-height: 1.15;
}
.cf-quad-body p {
  font-size: 14px; line-height: 1.6; color: var(--cinza-lighter);
}

/* ── JANELA DO PAINEL · visual estático tarjado ── */
.cf-janela { align-self: center; }
.cf-browser-static {
  background: #FFFFFF;
  border: 1px solid rgba(11,42,51,0.14);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 30px 70px -24px rgba(0,0,0,0.45), 0 2px 8px rgba(11,42,51,0.10);
}
.cf-browser-bar {
  height: 40px; background: #F0EBE1;
  border-bottom: 1px solid rgba(11,42,51,0.08);
  padding: 0 14px; gap: 12px;
  display: flex; align-items: center;
}
.cf-browser-bar .cf-lights { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.cf-browser-bar .cf-lights i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.cf-browser-bar .cf-lights i:nth-child(1) { background: #FF5F57; }
.cf-browser-bar .cf-lights i:nth-child(2) { background: #FEBC2E; }
.cf-browser-bar .cf-lights i:nth-child(3) { background: #28C840; }
.cf-browser-bar .cf-addr {
  flex: 1 1 auto; min-width: 0;
  height: 24px; display: flex; align-items: center; gap: 7px;
  background: #FFFFFF; border: 1px solid rgba(11,42,51,0.12);
  border-radius: 7px; padding: 0 10px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2px;
  color: var(--fhp-cinza-2, #4A6169);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.cf-browser-bar .cf-addr .cf-lock {
  flex: 0 0 auto; width: 9px; height: 9px; border-radius: 2px;
  border: 1.4px solid var(--fhp-cinza, #6C848C); border-bottom: 0;
  position: relative; margin-top: 1px;
}
.cf-browser-bar .cf-addr .cf-lock::after {
  content: ""; position: absolute; left: -3px; top: 6px;
  width: 12px; height: 8px; border-radius: 2px; background: var(--fhp-cinza, #6C848C);
}
.cf-browser-body {
  position: relative;
  background: #FFFFFF;
  padding: 22px 20px;
  display: flex; flex-direction: column; gap: 14px;
  min-height: 210px; justify-content: center;
}
.cf-selo-static {
  position: absolute; top: 12px; right: 12px;
  font-family: var(--font-mono); font-size: 8px; letter-spacing: 1px;
  text-transform: uppercase;
  /* pastilha escura sólida + tinta creme (>= 4.5:1 sobre a janela branca),
     mesmo tratamento do selo .thumb-exemplo */
  color: rgba(245,242,234,0.92);
  background: rgba(6,20,26,0.82);
  border: 0.5px solid rgba(245,242,234,0.16);
  border-radius: 99px; padding: 3px 8px;
}
/* dentro da janela clara: quadrado, linhas da leitura e track escurecidos */
.cf-browser-body .cf-sq .sq-track { stroke: rgba(11,42,51,0.10); }
.cf-browser-body .cf-row {
  color: var(--fhp-cinza, #4A6169);
  border-bottom-color: rgba(11,42,51,0.08);
}
.cf-scoref--tarja { display: flex; }
.cf-browser-body .tarja-barra { background: rgba(11,42,51,0.14); }

/* Cabeçalho do score (janela): quadrado do score + faixa */
.cf-scorehead { display: flex; align-items: center; gap: 14px; }
.cf-sq { position: relative; width: 46px; height: 46px; display: grid; place-items: center; flex-shrink: 0; }
.cf-sq svg { position: absolute; inset: 0; overflow: visible; }
.cf-sq .sq-track { fill: none; stroke: rgba(255,255,255,0.12); stroke-width: 3.4; }
.cf-sq-n { position: relative; font-family: var(--font-mono); font-weight: 700; font-size: 15px; }
.cf-scoref {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.4px;
  color: var(--cinza-lighter);
}
.cf-scoref b { color: var(--creme); font-weight: 700; }

/* Linhas da leitura (janela do painel) — barras tarjadas + ponto de status */
.cf-rows { display: flex; flex-direction: column; gap: 9px; }
.cf-row {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--cinza-light);
  padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.07);
}
.cf-row:last-child { border-bottom: none; padding-bottom: 0; }

/* ── D5 · PONTE PRO GESTÃO · card escuro fixo (fecha a página antes do CTA) ──
   Superfície escura FIXA #0B2A33 / tinta creme fixa (não flipa com o tema),
   mesmo padrão do .canais-escuro. */
.cf-ponte-sec { padding: 0 0 96px; }
.cf-ponte {
  background: #0B2A33;
  border-radius: var(--radius-lg, 20px);
  padding: 56px 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cf-ponte::before {
  content: "";
  position: absolute; top: -40%; left: 50%;
  width: 620px; height: 620px; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(74,222,128,0.10) 0%, transparent 62%);
  pointer-events: none;
}
.cf-ponte-h {
  position: relative; z-index: 1;
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 400; line-height: 1.1; letter-spacing: -1px;
  color: #F5F2EA;
  margin-bottom: 14px;
}
.cf-ponte-p {
  position: relative; z-index: 1;
  font-size: 18px; line-height: 1.5;
  color: rgba(245,242,234,0.78);
  margin-bottom: 32px;
}
.cf-ponte .cf-ponte-cta,
html.theme-light .cf-ponte .cf-ponte-cta {
  position: relative; z-index: 1;
  display: inline-block; width: auto;
  background: #4ADE80; border-color: #4ADE80;
  color: #0B2A33 !important;
}
.cf-ponte .cf-ponte-cta:hover { background: #6BE89A; border-color: #6BE89A; }
@media (max-width: 768px) {
  .cf-ponte-sec { padding: 0 0 64px; }
  .cf-ponte { padding: 40px 24px; }
}

/* ── B · GRADE 2x2 + janela empilham no celular ── */
@media (max-width: 860px) {
  .cf-como { grid-template-columns: 1fr; gap: 32px; }
  .cf-grid { grid-template-columns: 1fr; gap: 16px; }
  .cf-janela { justify-self: stretch; }
}

/* ═════════════════════════════════════════════════════════════════════
   PROMPT 15 · reestrutura /como-funciona + ritmo de cor nas internas
   ═════════════════════════════════════════════════════════════════════ */

/* TELA 1 · campo de consulta do painel (CNPJ digitado + botão Consultar).
   Componente genérico, ainda usado em /produto. */
.cf-consulta { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.cf-consulta-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--cinza-light);
}
.cf-consulta-field {
  display: flex; align-items: center; gap: 8px;
  background: #FFFFFF; border: 1px solid rgba(11,42,51,0.14);
  border-radius: 10px; padding: 8px 8px 8px 14px;
}
.cf-consulta-cnpj {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--font-mono); font-size: 14px; font-weight: 600;
  color: #0B2A33; letter-spacing: 0.02em;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.cf-consulta-btn {
  flex: 0 0 auto;
  background: #15803D; color: #EAF6EE;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 7px; padding: 8px 14px;
}
/* ── TIRA DE BOLHAS (componente reutilizável, sem moldura de aparelho) ──
   Três balões no idioma visual do telefone da casa: enviada (verde, direita) e
   recebidas (branca, esquerda), com rabicho. Sem phone shell. Reusada em
   /como-funciona (A2) e /produto (card Consulta + seção Consulta). */
.tira-bolhas {
  display: flex; flex-direction: column; gap: 12px;
  max-width: 360px;
}
.tira-bolhas .tb-msg { display: flex; }
.tira-bolhas .tb-msg.right { justify-content: flex-end; }
.tira-bolhas .tb-msg.left { justify-content: flex-start; }
.tira-bolhas .tb-bub {
  position: relative; max-width: 86%;
  padding: 11px 14px; border-radius: 16px;
  font-size: 14px; line-height: 1.4; font-weight: 500;
  box-shadow: 0 1px 3px rgba(11,42,51,0.14);
}
.tira-bolhas .tb-bub .cnpj { font-weight: 700; letter-spacing: 0.01em; }
/* enviada (usuário) — verde da casa, tinta clara fixa */
.tira-bolhas .tb-msg.right .tb-bub {
  background: var(--fhp-verde, #15803D); color: #EAF6EE;
  border-bottom-right-radius: 5px; font-weight: 600;
}
.tira-bolhas .tb-msg.right .tb-bub::after {
  content: ""; position: absolute; right: -5px; bottom: 0;
  border-width: 0 0 8px 8px; border-style: solid;
  border-color: transparent transparent var(--fhp-verde, #15803D) transparent;
}
/* recebida (Franco) — branca fixa, tinta petróleo */
.tira-bolhas .tb-msg.left .tb-bub {
  background: #FFFFFF; color: #1A3F48;
  border-bottom-left-radius: 5px;
}
.tira-bolhas .tb-msg.left .tb-bub::after {
  content: ""; position: absolute; left: -5px; bottom: 0;
  border-width: 8px 8px 0 0; border-style: solid;
  border-color: #FFFFFF transparent transparent transparent;
}
/* bolha do score (3ª): número mono + faixa */
.tira-bolhas .tb-msg.left .tb-bub:has(.tb-score) { max-width: none; }
.tira-bolhas .tb-score {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-family: var(--font-mono); letter-spacing: 0.5px;
  white-space: nowrap;
}
.tira-bolhas .tb-score .tb-score-n { font-size: 20px; font-weight: 700; color: #0B2A33; }
.tira-bolhas .tb-score .tb-score-f { font-size: 11px; font-weight: 700; letter-spacing: 1.2px; color: #8C6D14; }
.tira-bolhas-selo {
  align-self: flex-start; margin-top: 4px;
  font-family: var(--font-mono); font-size: 8px; letter-spacing: 1px;
  /* selo com informação ("dados protegidos"): a pastilha mora dentro do
     .offer-card, cuja superfície flipa com o tema (--petroleo). Por isso a
     tinta e a moldura usam tokens que flipam junto (--creme / --border-*),
     garantindo >= 4.5:1 nos dois temas (antes usava --cinza-light fixo,
     ~3:1 no claro e ilegível no escuro). */
  text-transform: uppercase; color: var(--creme);
  background: transparent;
  border: 0.5px solid var(--border-dark-strong);
  border-radius: 99px; padding: 3px 8px;
}
/* Sobre fundo escuro (chapéu petróleo do A2), a tira e o selo ganham contraste */
.canais-escuro .tira-bolhas .tb-msg.left .tb-bub { color: #1A3F48; }
.canais-escuro .tira-bolhas-selo {
  color: rgba(245,242,234,0.72);
  background: rgba(245,242,234,0.08);
  border-color: rgba(245,242,234,0.18);
}

/* ── B · CAPÍTULO ESCURO FIXO · seção de canais "ONDE VOCÊ USA" (A2) ──
   Mesmo padrão do .compromisso-section--escuro: #0B2A33 fixo, creme #F5F2EA,
   verde #4ADE80 literais (não viram com o tema). */
.canais-escuro { background: #0B2A33; color: #F5F2EA; }
.canais-escuro .kicker { color: #4ADE80; }
.canais-escuro .kicker::before { background: #4ADE80; }
.canais-escuro .section-h2 { color: #F5F2EA; }
.canais-escuro .section-h2 em { color: #4ADE80; }
.canais-escuro .jeitos-col-title { color: #F5F2EA; }
.canais-escuro .jeitos-col-title .hf { color: #4ADE80; }
.canais-escuro .jeitos-col-text { color: rgba(245,242,234,0.78); }
.canais-escuro .jeitos-col-text .hf { color: #4ADE80; }
.canais-escuro .jeitos-lista-item { border-top-color: rgba(245,242,234,0.16); }
.canais-escuro .jeitos-lista-item h4 { color: #F5F2EA; }
.canais-escuro .jeitos-lista-item p { color: rgba(245,242,234,0.72); }
.canais-escuro .jeitos-fecho { color: rgba(245,242,234,0.72); }
/* placeholder do painel (coluna 1) sobre o petróleo: linhas de contraste ok */
.canais-escuro .painel-ph { background: #123b46; border-color: rgba(245,242,234,0.14); }
.canais-escuro .painel-ph .painel-ph-note { color: #F5F2EA; }
.canais-escuro .painel-ph .thumb-exemplo { color: rgba(245,242,234,0.72); }

/* ── B · CÉLULA VERDE-CLARA · "De onde vem o dado" (#E1F5EE, tinta verde-escura) ── */
.dado-origem--verde {
  background: #E1F5EE;
  border-radius: var(--radius-lg);
  padding: 32px 34px;
}
.dado-origem--verde .dado-origem-title { color: #116E32; }
.dado-origem--verde .dado-origem-item { border-top-color: rgba(21,128,61,0.22); }
.dado-origem--verde .dado-origem-item h4 { color: #0B2A33; }
.dado-origem--verde .dado-origem-item p { color: #1A3F48; }
.dado-origem--verde .dado-origem-item .hf { color: #116E32; }
@media (max-width: 560px) { .dado-origem--verde { padding: 26px 22px; } }

/* ═══ C1 · CARD FRANCO GESTÃO ESCURO no /produto (fundo petróleo fixo) ═══
   Modificador específico pra vencer a regra html.theme-light .dois-jeitos-card
   (card branco no tema claro) SEM reintroduzir seletor genérico. */
.dois-jeitos-card--escuro,
html.theme-light .dois-jeitos-card--escuro {
  background: #0B2A33;
  border-color: rgba(245,242,234,0.14);
}
.dois-jeitos-card--escuro .offer-tag { color: #4ADE80; }
.dois-jeitos-card--escuro .dois-jeitos-title { color: #F5F2EA; }
/* carteira-mini dentro do card escuro: legibilidade sobre petróleo */
.dois-jeitos-card--escuro .dois-jeitos-mock { background: #061A20; border-color: rgba(245,242,234,0.10); }
.dois-jeitos-card--escuro .dois-jeitos-mock .thumb-exemplo {
  color: rgba(245,242,234,0.72); background: rgba(0,0,0,0.30); border-color: rgba(245,242,234,0.18);
}
.dois-jeitos-card--escuro .carteira-mini { background: #0B2A33; border-color: rgba(245,242,234,0.12); }
.dois-jeitos-card--escuro .carteira-mini-head { color: rgba(245,242,234,0.72); border-bottom-color: rgba(245,242,234,0.10); }
.dois-jeitos-card--escuro .carteira-mini-row { border-top-color: rgba(245,242,234,0.08); }
.dois-jeitos-card--escuro .carteira-mini-nome { color: #F5F2EA; }
.dois-jeitos-card--escuro .offer-cta { background: #4ADE80; color: #06202a !important; }
.dois-jeitos-card--escuro .offer-cta:hover { color: #06202a !important; }

/* card Consulta (claro): a tira-bolhas assume o lugar do telefone */
.dois-jeitos-mock--consulta.dois-jeitos-mock--tira {
  background: transparent; border: 0; padding: 0;
  display: flex; flex-direction: column; align-items: center;
}
.dois-jeitos-mock--tira .tira-bolhas { width: 100%; }

/* ═══ C2 · CÉLULA VERDE-CLARA · bullets do Franco Consulta (com o link dentro) ═══ */
.consulta-cell {
  background: #E1F5EE;
  border-radius: var(--radius-lg);
  padding: 26px 28px;
}
.consulta-cell .consulta-bullets { margin-bottom: 18px; }
.consulta-cell .consulta-bullets li { color: #1A3F48; }
.consulta-cell .consulta-planos-link { color: #116E32; }
/* a tira-bolhas assume a assinatura visual do Consulta (lugar do telefone) */
.consulta-split-tira { display: flex; justify-content: center; }
@media (max-width: 860px) { .consulta-split-tira { order: 2; } }

/* ═══ C3 · FAQ · numeral serifado discreto (01-04) à esquerda de cada pergunta ═══ */
.faq-q { display: flex; align-items: baseline; gap: 14px; min-width: 0; }
.faq-num {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 400; font-style: italic;
  color: rgba(74,222,128,0.42);
  line-height: 1; flex: 0 0 auto;
  letter-spacing: -0.5px;
}
html.theme-light .faq-num { color: rgba(21,128,61,0.42); }

/* ═════════════ TEASER PLAYER · vídeo vertical nos cards "dois jeitos" ═════════════ */
.teaser-player {
  position: relative;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #061A20;
  border: 0.5px solid rgba(245,242,234,0.12);
}
.teaser-player video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;      /* vertical 9:16 preenche exato, sem faixa preta e sem crop */
  display: block;
}
/* botão de som · canto inferior direito (longe do selo no topo e da legenda embaixo) */
.teaser-som {
  position: absolute; right: 10px; bottom: 10px; z-index: 3;
  width: 38px; height: 38px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(6,26,32,0.62);
  border: 0.5px solid rgba(245,242,234,0.28);
  color: #F5F2EA; cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background .18s ease, transform .18s ease;
}
.teaser-som:hover { background: rgba(6,26,32,0.82); transform: translateY(-1px); }
.teaser-som svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.teaser-som .spk { fill: currentColor; stroke: none; }
.teaser-som .wave { display: none; }
.teaser-som[aria-pressed="true"] .wave { display: inline; }
.teaser-som[aria-pressed="true"] .slash { display: none; }
/* botão de play central · reduced-motion ou autoplay bloqueado */
.teaser-play {
  position: absolute; inset: 0; z-index: 2; margin: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6,26,32,0.28);
  border: 0; cursor: pointer;
}
.teaser-play[hidden] { display: none; }
.teaser-play span {
  width: 62px; height: 62px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6,26,32,0.66); border: 0.5px solid rgba(245,242,234,0.32);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.teaser-play svg { width: 26px; height: 26px; fill: #F5F2EA; margin-left: 3px; }
@media (max-width: 640px) { .teaser-player { max-width: 260px; } }

/* ═════════════ HERO com FOTO REAL (PROMPT 20) ═════════════ */
/* foto de fundo + overlay em gradiente (mais escuro do lado do texto) pra segurar
   contraste 4.5:1. Substitui a cena SVG nos heros de foto. */
.hero--foto .franco-hero { background: #061A20; }
.hero-foto-bg { position: absolute; inset: 0; z-index: 0; }
.hero-foto-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.hero-foto-ov {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* PROMPT 22: overlay clareado — a foto precisa ser reconhecível atrás do texto.
     O lado do texto (esquerda) segue escuro o bastante pro WCAG AA; o resto abre. */
  background:
    linear-gradient(96deg, rgba(6,26,32,0.86) 0%, rgba(6,26,32,0.72) 34%, rgba(6,26,32,0.38) 62%, rgba(6,26,32,0.12) 100%),
    linear-gradient(180deg, rgba(6,26,32,0.42) 0%, rgba(6,26,32,0.06) 32%, rgba(6,26,32,0.50) 100%);
}
/* As bullets do hero Consulta usam a classe da seção clara (.consulta-bullets li,
   cor escura). No hero escuro isso fica ilegível — força creme SÓ dentro do hero. */
.hero--foto .content .consulta-bullets li { color: #F5F2EA; }
.hero--foto .content { position: relative; z-index: 3; }
.hero--foto .hero-cards { z-index: 2; }
@media (max-width: 760px) {
  /* celular: texto ocupa a largura toda, overlay mais forte e vertical */
  .hero-foto-ov {
    background: linear-gradient(180deg, rgba(6,26,32,0.70) 0%, rgba(6,26,32,0.42) 45%, rgba(6,26,32,0.74) 100%);
  }
}

/* ═════════════ PROMPT 21 · hero centrado verticalmente + vídeo no hero ═════════════ */
/* texto do hero centrado com respiro do header (vale pros 3 heros de foto) */
.hero--foto .franco-hero { display: flex; align-items: center; }
.hero--foto .content { top: 60px; }   /* clareia a nav fixa (home, coluna única) */

/* heros de produto: DUAS COLUNAS dentro do hero (texto | teaser) */
.hero--split .franco-hero { aspect-ratio: auto; min-height: clamp(600px, 82vh, 800px); }
.hero-split {
  position: relative; z-index: 4; width: 100%;
  display: grid; grid-template-columns: 1.28fr 1fr; gap: 6%;
  align-items: center; padding: 60px 6% 0;
}
.hero-split .content { position: static; inset: auto; top: auto; padding: 0; max-width: 560px; }
.hero-teaser { justify-self: center; width: 100%; max-width: 292px; }
.hero-teaser .teaser-player { box-shadow: 0 26px 64px rgba(4,16,20,0.6), 0 4px 14px rgba(4,16,20,0.4); }
@media (max-width: 860px) {
  .hero--split .franco-hero { min-height: 0; display: block; }
  .hero--split .hero-split { grid-template-columns: 1fr; gap: 26px; padding: 104px 7% 44px; }
  .hero--split .content { top: auto; }
  .hero-teaser { max-width: 260px; }
}

/* Consulta · "O que é" sem a ilustração redundante: cópia ocupa a largura */
.consulta-split--solo { display: block; }
.consulta-split--solo .consulta-split-copy { max-width: 760px; }