/* ==========================================================================
   HEYPEDIDOS — SITE INSTITUCIONAL
   Paleta e tipografia seguem o guia ESTILO-PAINEL.md, para o site ter a
   mesma identidade visual do painel administrativo do produto.
   ========================================================================== */

/* ---------- fontes ---------- */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=Inter:wght@400;500;600;700;800&display=swap');

/* ---------- variáveis de marca (Coinbase design system) ---------- */
:root{
  /* cor principal do produto */
  --cor-primaria: #641fe5;
  --cor-primaria-hover: #5419c4;
  --cor-segunda-hover: #7e44eb;
  --cor-primaria-clara: #712bf1;
  --cor-primaria-suave: #ede9fe;
  --cor-primaria-fumê: rgba(100,31,229,0.08);

  /* fundo */
  --cor-fundo: #ffffff;
  --cor-fundo-alt: #f7f7f7;
  --cor-fundo-strong: #eef0f3;
  --cor-fundo-dark: #0a0b0d;
  --cor-fundo-dark-elevated: #16181c;
  --cor-cartao: #ffffff;

  /* texto */
  --cor-texto: #0a0b0d;
  --cor-texto-secundario: #5b616e;
  --cor-texto-fraco: #7c828a;
  --cor-texto-muted-soft: #a8acb3;

  /* bordas */
  --cor-borda: #dee1e6;
  --cor-borda-soft: #eef0f3;

  /* estados */
  --cor-sucesso: #05b169;
  --cor-sucesso-fundo: rgba(5,177,105,0.1);
  --cor-sucesso-texto: #065f46;

  --cor-aviso: #f4b000;
  --cor-aviso-fundo: rgba(244,176,0,0.1);
  --cor-aviso-texto: #92400e;

  --cor-perigo: #cf202f;
  --cor-perigo-fundo: rgba(207,32,47,0.1);
  --cor-perigo-texto: #991b1b;

  --cor-info: #0dcaf0;
  --cor-info-fundo: rgba(13,202,240,0.1);
  --cor-info-texto: #085f7e;

  /* tipografia */
  --fonte-titulo: 'Inter', sans-serif;
  --fonte-corpo: 'Inter', sans-serif;
  --fonte-script: 'Fraunces', serif;

  /* forma */
  --raio-xs: 4px;
  --raio-sm: 8px;
  --raio-md: 12px;
  --raio-lg: 16px;
  --raio-xl: 24px;
  --raio-pill: 100px;
  --raio-full: 9999px;
  --sombra-cartao: 0 1px 3px rgba(0,0,0,0.05);
  --sombra-elevada: 0 4px 12px rgba(0,0,0,0.04);

  --transicao: 0.25s cubic-bezier(0.4,0,0.2,1);
}

/* ---------- reset ---------- */
*, *::before, *::after{ box-sizing: border-box; margin:0; padding:0; }
html{ scroll-behavior: smooth; font-size: 16px; }
body{
  font-family: var(--fonte-corpo);
  color: var(--cor-texto);
  background: var(--cor-fundo);
  line-height: 1.6;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family: inherit; border:none; background:none; cursor:pointer; }

::selection{ background: var(--cor-primaria); color:#fff; }

::-webkit-scrollbar{ width:8px; }
::-webkit-scrollbar-track{ background: var(--cor-fundo-alt); }
::-webkit-scrollbar-thumb{ background: var(--cor-primaria-clara); border-radius:4px; }

:focus-visible{
  outline: 2.5px solid var(--cor-primaria);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- tipografia ---------- */
h1,h2,h3,h4{ font-family: var(--fonte-titulo); line-height:0.9; color: var(--cor-texto); }
h1{ font-size: clamp(2.3rem, 4.6vw, 5rem); font-weight:700; letter-spacing:-0.02em; }
h2{ font-size: clamp(1.9rem, 3.2vw, 3.25rem); font-weight:700; letter-spacing:-0.015em; }
h3{ font-size: clamp(1.05rem, 1.6vw, 2rem); font-weight:700; }
h4{ font-size: clamp(1rem, 1.4vw, 1.25rem); font-weight:600; }
p{ color: var(--cor-texto-secundario); font-size: clamp(0.95rem, 1.2vw, 1rem); }

.texto-destaque{ color: var(--cor-primaria); }
.texto-script{
  font-family: var(--fonte-script);
  color: var(--cor-primaria);
  font-weight: 400;
  font-style: italic;
}
.heroi .texto-script{
  color: #fff;
}

/* ---------- utilitários de layout ---------- */
.container{ max-width: 1180px; margin:0 auto; padding: 0 clamp(1.1rem, 4vw, 2rem); }
.secao{ padding: 96px 0; position:relative; }
.secao-alt{ background: var(--cor-fundo-alt); }

.cabecalho-secao{ max-width: 640px; margin: 0 auto clamp(2.6rem, 5vw, 3.6rem); text-align:center; }
.rotulo-secao{
  display:inline-flex; align-items:center; gap:7px;
  font-family: var(--fonte-titulo);
  font-size: 0.76rem; font-weight:700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--cor-primaria);
  background: var(--cor-primaria-suave);
  padding: 6px 14px;
  border-radius: var(--raio-pill);
  margin-bottom: 16px;
}
.cabecalho-secao p{ margin-top: 14px; }

.revelar{ opacity: 0; transform: translateY(28px); }

/* ---------- botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family: var(--fonte-corpo);
  font-weight:600; font-size:1rem;
  padding: 0.75rem 1.25rem;
  border-radius: var(--raio-pill);
  cursor:pointer;
  transition: var(--transicao);
  white-space: nowrap;
  height: 44px;
}
.btn-primario{
  background: var(--cor-primaria-hover);
  color:#fff;
  box-shadow: 0 12px 28px -10px rgba(100,31,229,0.55);
}
.btn-primario:hover{ background: var(--cor-segunda-hover); transform: translateY(-2px); box-shadow: 0 16px 32px -10px rgba(100,31,229,0.6); }
.btn-secundario{
  background: var(--cor-fundo-strong);
  color: var(--cor-texto);
  border: none;
}
.btn-secundario:hover{ background: var(--cor-borda-soft); color: var(--cor-texto); }
.btn-grande{ padding: 1rem 2rem; font-size: 1rem; height: 56px; }

/* ==========================================================================
   CABEÇALHO
   ========================================================================== */
.cabecalho{
  position: fixed; top:0; left:0; right:0; z-index: 1000;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.cabecalho.rolado{
  border-bottom-color: var(--cor-borda);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.cabecalho-linha{
  display:flex; align-items:center; justify-content:space-between;
  height: 74px;
}
.marca{ display:flex; align-items:center; gap:9px; }
.marca img{ height: 26px; width:auto; }

.menu-principal{ display:flex; align-items:center; gap: 2.2rem; }
.menu-principal a{
  font-size: 0.92rem; 
  color: var(--cor-texto-secundario);
  position:relative; padding: 6px 0;
  transition: color var(--transicao);
}
.menu-principal a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background: var(--cor-primaria);
  transition: right var(--transicao);
}
.menu-principal a:hover{ color: var(--cor-texto); }
.menu-principal a:hover::after{ right:0; }

.cabecalho-acoes{ display:flex; align-items:center; gap: 14px; }
.link-entrar{ font-size:0.9rem; font-weight:600; color: var(--cor-texto-secundario); }
.link-entrar:hover{ color: var(--cor-primaria); }

.btn-menu-mobile{
  display:none;
  width:38px; height:38px;
  align-items:center; justify-content:center;
  border-radius: var(--raio-sm);
}
.btn-menu-mobile span{
  display:block; width:20px; height:2px; background: var(--cor-texto);
  position:relative;
  transition: background var(--transicao);
}
.btn-menu-mobile span::before,
.btn-menu-mobile span::after{
  content:""; position:absolute; left:0; width:20px; height:2px; background: var(--cor-texto);
  transition: transform var(--transicao), top var(--transicao);
}
.btn-menu-mobile span::before{ top:-6px; }
.btn-menu-mobile span::after{ top:6px; }
.btn-menu-mobile.aberto span{ background: transparent; }
.btn-menu-mobile.aberto span::before{ top:0; transform: rotate(45deg); }
.btn-menu-mobile.aberto span::after{ top:0; transform: rotate(-45deg); }

.menu-mobile{
  position: fixed; inset: 74px 0 0 0; z-index: 999;
  background: #fff;
  padding: 28px clamp(1.1rem,4vw,2rem);
  display:flex; flex-direction:column; gap: 4px;
  transform: translateY(-8px);
  opacity:0; visibility:hidden;
  transition: opacity var(--transicao), transform var(--transicao), visibility var(--transicao);
}
.menu-mobile.aberto{ opacity:1; visibility:visible; transform: translateY(0); }
.menu-mobile a{
  font-size: 1.05rem; font-weight:600; padding: 14px 4px;
  border-bottom: 1px solid var(--cor-borda);
}
.menu-mobile .btn{ margin-top: 18px; }

/* ==========================================================================
   HERÓI
   ========================================================================== */
.heroi{
  position:relative;
  padding-top: 96px;
  padding-bottom: 26px;
  overflow: hidden;
  background: var(--cor-primaria);
}
.heroi-fundo{
  display:none;
}
.heroi-grade-pontos{
  display:none;
}

.heroi-layout{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  /*gap: clamp(2rem, 5vw, 4rem);*/
  align-items:center;
}

.selo-heroi{
  display:inline-flex; align-items:center; gap:8px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  padding: 7px 14px 7px 8px;
  border-radius: 999px;
  font-size: 0.82rem; font-weight:600;
  color: rgba(255,255,255,0.9);
  box-shadow: var(--sombra-cartao);
  margin-bottom: 22px;
}
.selo-heroi .selo-contador{
  background: #fff;
  color: var(--cor-primaria);
  font-family: var(--fonte-titulo);
  font-size: 0.72rem; font-weight:700;
  padding: 3px 9px;
  border-radius: 999px;
}

.heroi-titulo{ margin-bottom: 20px; color:#fff; font-weight:700; }
.heroi-subtitulo{ max-width: 46ch; margin-bottom: 30px; font-size: 1.05rem; color: rgba(255,255,255,0.9); }

.heroi-botoes{ display:flex; flex-wrap:wrap; gap: 14px; margin-bottom: 30px; }
.heroi-botoes .btn{ opacity: 1; }

.heroi-confianca{ display:flex; align-items:center; gap: 12px; }
.heroi-avatares{ display:flex; }
.heroi-avatares span{
  width:32px; height:32px; border-radius:50%;
  border: 2.5px solid rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.2);
  color:#fff; font-family: var(--fonte-titulo); font-weight:700; font-size:0.7rem;
  display:flex; align-items:center; justify-content:center;
}
.heroi-avatares span:first-child{ margin-left:0; }
.heroi-confianca p{ font-size: 0.85rem; color: rgba(255,255,255,0.8); }
.heroi-confianca strong{ color:#fff; }
/* ---- visual do herói: tablet ---- */
.heroi-visual{ position:relative; height: 500px; display:flex; align-items:center; justify-content:center; }

.tablet-mobile{
  width: auto;
  height: 500px;
  max-width: none;
  object-fit: contain;
}

/* ==========================================================================
   LETREIRO (marquee)
   ========================================================================== */
.letreiro{
  border-top: 1px solid var(--cor-borda);
  border-bottom: 1px solid var(--cor-borda);
  background: var(--cor-fundo-alt);
  overflow:hidden;
  padding: 16px 0;
}
.letreiro-trilha{
  display:flex; width: max-content;
  animation: rolar-letreiro 34s linear infinite;
}
.letreiro-item{
  display:flex; align-items:center; gap:9px;
  font-family: var(--fonte-titulo); font-weight:600; font-size:0.86rem;
  color: var(--cor-texto-secundario);
  padding: 0 28px;
  white-space:nowrap;
}
.letreiro-item .ponto{ width:5px; height:5px; border-radius:50%; background: var(--cor-primaria); }
@keyframes rolar-letreiro{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

.letreiro-reverso .letreiro-trilha{ animation-direction: reverse; animation-duration: 40s; }

/* ==========================================================================
   COMPARATIVO (antes / depois)
   ========================================================================== */
.comparativo-grade{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(1rem, 3vw, 2rem);
  align-items:stretch;
}
.comparativo-bloco{
  border-radius: var(--raio-xl);
  padding: clamp(1.6rem, 3vw, 2.2rem);
  border: 1px solid var(--cor-borda);
}
.bloco-antes{ background: var(--cor-fundo-alt); }
.bloco-depois{
  background: linear-gradient(160deg, var(--cor-primaria) 0%, var(--cor-primaria-hover) 100%);
  color:#fff;
  box-shadow: var(--sombra-elevada);
}
.comparativo-titulo{
  font-family: var(--fonte-titulo); font-weight:700; font-size:1rem;
  display:flex; align-items:center; gap:9px;
  margin-bottom: 22px;
}
.bloco-depois .comparativo-titulo{ color:#fff; }

.item-comparativo{ display:flex; gap:14px; margin-bottom: 20px; }
.item-comparativo:last-child{ margin-bottom:0; }
.item-comparativo-icone{
  width:38px; height:38px; border-radius: var(--raio-sm);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.bloco-antes .item-comparativo-icone{ background: var(--cor-perigo-fundo); color: var(--cor-perigo); }
.bloco-depois .item-comparativo-icone{ background: rgba(255,255,255,0.16); color:#fff; }
.item-comparativo h4{ font-size:0.92rem; margin-bottom:3px; }
.bloco-depois h4{ color:#fff; }
.item-comparativo p{ font-size:0.83rem; }
.bloco-depois p{ color: rgba(255,255,255,0.82); }
.bloco-antes h4{ color: var(--cor-texto); }

.seta-comparativo{
  display:flex; align-items:center; justify-content:center;
  color: var(--cor-primaria);
  font-size: 1.4rem;
}

/* ==========================================================================
   RECURSOS
   ========================================================================== */
.grade-recursos{
  display:grid;
  gap: 24px;
}
.recursos-layout{
  display:grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 24px;
  align-items: stretch;
}
.cardapio-destaque{
  display:flex;
  flex-direction:column;
}
.cartao-recurso.destaque{
  display:flex;
  flex-direction:column;
  height: 100%;
}
.cartao-recurso-conteudo{
  flex: 0 0 auto;
}
.cartao-recurso-imagem{
  flex: 1;
  width: 100%;
  min-height: 200px;
  background: var(--cor-fundo-alt);
  border-radius: var(--raio-md);
  overflow: hidden;
  margin-top: 24px;
}
.recursos-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 24px;
}
.recursos-grid-extra{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.cartao-recurso{
  background:#fff;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-xl);
  padding: 32px;
  transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
}
.cartao-recurso:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 34px -18px rgba(44,62,80,0.22);
  border-color: transparent;
}
.cartao-recurso.destaque{ display:flex; flex-direction:column; }
.cartao-recurso-conteudo{ flex: 1; }
.cartao-recurso-imagem{ flex: none; width: 100%; height: 180px; background: var(--cor-fundo-alt); border-radius: var(--raio-md); overflow: hidden; margin-top: 24px; }
.cartao-recurso-imagem img{ width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.icone-recurso{
  width: 46px; height:46px;
  border-radius: var(--raio-sm);
  display:flex; align-items:center; justify-content:center;
  margin-bottom: 16px;
}
.cartao-recurso h3{ margin-bottom: 8px; }
.cartao-recurso p{ font-size: 0.88rem; }
.selo-recurso{
  display:inline-flex; align-items:center; gap:5px;
  margin-top: 14px;
  font-size:0.7rem; font-weight:700;
  padding: 4px 10px; border-radius:999px;
  background: var(--cor-primaria-suave); color: var(--cor-primaria);
}

/* paleta rotativa dos ícones de recurso — reaproveita as cores de estado do painel */
.icone-recurso.roxo{ background: var(--cor-primaria-suave); color: var(--cor-primaria); }
.icone-recurso.verde{ background: var(--cor-sucesso-fundo); color: var(--cor-sucesso); }
.icone-recurso.laranja{ background: var(--cor-aviso-fundo); color: var(--cor-aviso); }
.icone-recurso.azul{ background: var(--cor-info-fundo); color: var(--cor-info-texto); }
.icone-recurso.vermelho{ background: var(--cor-perigo-fundo); color: var(--cor-perigo); }

/* ==========================================================================
   COMO FUNCIONA + FLUXO ANIMADO
   ========================================================================== */
.fluxo-pedido{ position:relative; margin-top: 20px; height: 90px; }
.fluxo-svg{ width:100%; height:100%; position:absolute; top:0; left:0; }
.fluxo-trilha{ fill:none; stroke: var(--cor-borda); stroke-width:2.5; }
.fluxo-progresso{
  fill:none; stroke: var(--cor-primaria); stroke-width:2.5;
  stroke-linecap: round;
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
}

.fluxo-etapas{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:2;
}
.fluxo-etapa{ text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; }
.fluxo-etapa-icone{
  width: 58px; height:58px;
  border-radius:50%;
  background:#fff;
  border: 2px solid var(--cor-borda);
  display:flex; align-items:center; justify-content:center;
  color: var(--cor-texto-fraco);
  transition: border-color var(--transicao), color var(--transicao), background var(--transicao), transform var(--transicao);
  margin-bottom: 14px;
}
.fluxo-etapa-icone.ativa{
  border-color: var(--cor-primaria);
  background: var(--cor-primaria);
  color:#fff;
  transform: scale(1.08);
}
.fluxo-etapa h4{ font-size: 0.86rem; margin-bottom:4px; }
.fluxo-etapa p{ font-size: 0.76rem; color: var(--cor-texto-fraco); }

/* ==========================================================================
   SEGMENTOS
   ========================================================================== */
.lista-segmentos{
  display:flex; flex-wrap:wrap; justify-content:center; gap: 10px;
}
.chip-segmento{
  display:flex; align-items:center; gap:8px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--cor-borda);
  background:#fff;
  font-size: 0.86rem; font-weight:600;
  color: var(--cor-texto-secundario);
  transition: border-color var(--transicao), color var(--transicao), background var(--transicao);
}
.chip-segmento:hover{ border-color: var(--cor-primaria); color: var(--cor-primaria); background: var(--cor-primaria-suave); }

/* ==========================================================================
   ONBOARDING
   ========================================================================== */
#onboarding{
  background: var(--cor-primaria);
  color:#fff;
}
#onboarding .cabecalho-secao h2,
#onboarding .cabecalho-secao p{
  color:#fff;
}
#onboarding .rotulo-secao{
  background: rgba(255,255,255,0.2);
  color:#fff;
}
.timeline-onboarding{
  display:flex;
  flex-direction:row;
  gap: 16px;
  max-width: 100%;
  margin: 0 auto;
  overflow-x: auto;
  padding-bottom: 8px;
}
.onboarding-passo{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  background: #fff;
  padding: 20px 16px;
  border-radius: var(--raio-xl);
  border: 1px solid rgba(255,255,255,0.2);
  min-width: 140px;
  flex: 1;
}
.passo-numero{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--cor-primaria);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family: var(--fonte-titulo);
  font-weight:700;
  font-size: 1rem;
  flex-shrink:0;
  margin-bottom: 12px;
}
.passo-conteudo h4{
  font-size: 0.9rem;
  font-weight:700;
  margin-bottom: 4px;
  line-height:1.3;
  color: var(--cor-texto);
}
.passo-conteudo p{
  font-size: 0.75rem;
  color: var(--cor-texto-secundario);
  line-height:1.3;
  margin-bottom: 8px;
}
.passo-tempo{
  font-family: var(--fonte-titulo);
  font-weight:700;
  font-size: 0.7rem;
  color: var(--cor-primaria);
  background: var(--cor-primaria-suave);
  padding: 4px 10px;
  border-radius: var(--raio-pill);
  white-space: nowrap;
}
.onboarding-garantia{
  display:flex;
  gap: 16px;
  align-items:start;
  background: rgba(255,255,255,0.1);
  padding: 20px;
  border-radius: var(--raio-xl);
  border: 1px solid rgba(255,255,255,0.2);
  margin-top: 24px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
.garantia-icon{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.garantia-texto h4{
  font-size: 0.95rem;
  font-weight:700;
  margin-bottom: 4px;
  color:#fff;
}
.garantia-texto p{
  font-size: 0.8rem;
  color: rgba(255,255,255,0.8);
}

/* ==========================================================================
   CALCULADORA ROI
   ========================================================================== */
.calculadora-container{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items:start;
  background: var(--cor-fundo-alt);
  border-radius: var(--raio-xl);
  padding: 40px;
}
.calculadora-inputs{
  display:flex;
  flex-direction:column;
  gap: 32px;
}
.campo-calculadora label{
  display:block;
  font-family: var(--fonte-titulo);
  font-size: 0.9rem;
  font-weight:600;
  color: var(--cor-texto);
  margin-bottom: 12px;
}
.slider-calculadora{
  width:100%;
  height: 6px;
  border-radius: 3px;
  background: var(--cor-borda);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.slider-calculadora::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--cor-primaria);
  cursor: pointer;
  transition: transform var(--transicao);
}
.slider-calculadora::-webkit-slider-thumb:hover{
  transform: scale(1.1);
}
.valor-calculadora{
  font-family: var(--fonte-titulo);
  font-size: 1.1rem;
  font-weight:700;
  color: var(--cor-primaria);
  margin-top: 8px;
}
.calculadora-resultado{
  display:flex;
  flex-direction:column;
  gap: 16px;
}
.resultado-card{
  background:#fff;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-xl);
  padding: 20px;
  text-align:center;
}
.resultado-card.destaque{
  background: var(--cor-primaria);
  border-color: var(--cor-primaria);
}
.resultado-card.destaque .resultado-rotulo,
.resultado-card.destaque .resultado-valor{
  color:#fff;
}
.resultado-rotulo{
  font-size: 0.85rem;
  color: var(--cor-texto-secundario);
  margin-bottom: 8px;
}
.resultado-valor{
  font-family: var(--fonte-titulo);
  font-size: 1.5rem;
  font-weight:700;
  color: var(--cor-texto);
}
.resultado-valor.negativo{
  color: var(--cor-perigo);
}
.resultado-valor.positivo{
  color: var(--cor-sucesso);
}
.calculadora-cta{
  text-align:center;
  margin-top: 32px;
}

/* ==========================================================================
   QUIZ PLANO
   ========================================================================== */
.quiz-plano-container{
  max-width: 600px;
  margin: 0 auto 40px;
}
.quiz-plano{
  background: var(--cor-fundo-alt);
  border-radius: var(--raio-xl);
  padding: 32px;
  border: 1px solid var(--cor-borda);
}
.quiz-pergunta h4{
  font-size: 1.1rem;
  font-weight:700;
  margin-bottom: 20px;
  text-align:center;
}
.quiz-opcoes{
  display:flex;
  flex-direction:column;
  gap: 12px;
}
.quiz-opcao{
  padding: 16px 20px;
  border: 2px solid var(--cor-borda);
  border-radius: var(--raio-xl);
  background: var(--cor-fundo);
  font-family: var(--fonte-corpo);
  font-size: 1rem;
  font-weight:600;
  color: var(--cor-texto);
  cursor:pointer;
  transition: all var(--transicao);
}
.quiz-opcao:hover{
  border-color: var(--cor-primaria);
  background: var(--cor-primaria-suave);
  color: var(--cor-primaria);
}
.quiz-resultado{
  display:none;
  text-align:center;
  animation: fadeIn 0.5s ease;
}
.quiz-resultado.mostrar{
  display:block;
}
.resultado-emoji{
  font-size: 3rem;
  display:block;
  margin-bottom: 16px;
}
.resultado-texto h4{
  font-size: 1.1rem;
  font-weight:700;
  margin-bottom: 8px;
}
.resultado-plano{
  font-family: var(--fonte-titulo);
  font-size: 1.5rem;
  font-weight:700;
  color: var(--cor-primaria);
  margin-bottom: 8px;
}
.resultado-justificativa{
  font-size: 0.9rem;
  color: var(--cor-texto-secundario);
  margin-bottom: 20px;
  line-height:1.5;
}
@keyframes fadeIn{
  from{ opacity: 0; transform: translateY(10px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   PLANOS
   ========================================================================== */
.grade-planos{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  align-items:start;
  max-width: 800px;
  margin: 0 auto;
}
.cartao-plano{
  background:#fff;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-xl);
  padding: 32px;
  position:relative;
}
.cartao-plano.popular{
  border-color: var(--cor-primaria);
  box-shadow: var(--sombra-elevada);
  transform: translateY(-8px);
}
.selo-badge-plano{
  display:inline-block;
  font-size: 0.68rem; font-weight:700;
  padding: 4px 11px; border-radius:999px;
  margin-bottom: 14px;
}
.badge-basico{ background: var(--cor-fundo-alt); color: var(--cor-texto-secundario); }
.badge-pro{ background: var(--cor-primaria-suave); color: #5b21b6; }
.badge-enterprise{ background:#1f2937; color:#fff; }

.selo-popular{
  position:absolute; top:-13px; left:50%; transform: translateX(-50%);
  background: var(--cor-primaria); color:#fff;
  font-size: 0.7rem; font-weight:700;
  padding: 6px 16px; border-radius:999px;
  white-space:nowrap;
}
.nome-plano{ font-family: var(--fonte-titulo); font-size:1.05rem; font-weight:700; margin-bottom:10px; }
.preco-plano{ font-family: var(--fonte-titulo); font-size: 2.4rem; font-weight:800; margin-bottom: 8px; }
.preco-plano sup{ font-size: 1rem; font-weight:700; color: var(--cor-texto-fraco); margin-right:2px; }
.preco-plano span{ font-size: 0.85rem; font-weight:500; color: var(--cor-texto-fraco); }
.descricao-plano{ font-size: 0.85rem; margin-bottom: 22px; min-height: 42px; }

.lista-recursos-plano{ margin-bottom: 26px; }
.lista-recursos-plano li{
  display:flex; align-items:flex-start; gap:10px;
  font-size: 0.86rem; color: var(--cor-texto-secundario);
  padding: 7px 0;
}
.lista-recursos-plano li svg{ color: var(--cor-sucesso); flex-shrink:0; margin-top:2px; }
.lista-recursos-plano li.desabilitado{ color: var(--cor-texto-fraco); opacity:0.6; }
.lista-recursos-plano li.desabilitado svg{ color: var(--cor-texto-fraco); }

.nota-planos{ text-align:center; margin-top: 30px; font-size: 0.85rem; color: var(--cor-texto-fraco); }

/* ==========================================================================
   DIA NA VIDA
   ========================================================================== */
.timeline-dia{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 32px;
  align-items:start;
}
.timeline-coluna{
  display:flex;
  flex-direction:column;
  gap: 24px;
}
.timeline-cabecalho{
  text-align:center;
  padding: 20px;
  border-radius: var(--raio-xl);
  margin-bottom: 8px;
}
.timeline-cabecalho.antes{
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
}
.timeline-cabecalho.depois{
  background: var(--cor-primaria);
  color:#fff;
}
.timeline-cabecalho h3{
  font-size: 1.25rem;
  font-weight:700;
  margin: 8px 0 4px;
}
.timeline-cabecalho p{
  font-size: 0.85rem;
  opacity: 0.9;
}
.timeline-emoji{
  font-size: 2rem;
  display:block;
}
.timeline-seta{
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--cor-primaria);
  margin-top: 60px;
}
.timeline-eventos{
  display:flex;
  flex-direction:column;
  gap: 16px;
}
.timeline-evento{
  display:flex;
  gap: 12px;
  align-items:start;
}
.evento-hora{
  font-family: var(--fonte-titulo);
  font-weight:700;
  font-size: 0.85rem;
  color: var(--cor-texto-secundario);
  min-width: 50px;
  padding-top: 2px;
}
.evento-conteudo h4{
  font-size: 0.95rem;
  font-weight:600;
  margin-bottom: 4px;
}
.evento-conteudo p{
  font-size: 0.85rem;
  color: var(--cor-texto-secundario);
  line-height:1.5;
}
.dia-na-vida-cta{
  text-align:center;
  margin-top: 40px;
  padding: 32px;
  background: var(--cor-fundo);
  border-radius: var(--raio-xl);
  border: 1px solid var(--cor-borda);
}
.citacao-carlos{
  font-family: var(--fonte-titulo);
  font-size: 1.25rem;
  font-style: italic;
  color: var(--cor-texto);
  margin-bottom: 8px;
}
.autor-citacao{
  font-size: 0.9rem;
  color: var(--cor-texto-secundario);
  font-weight:600;
}

/* ==========================================================================
   DEPOIMENTOS + CONTADORES
   ========================================================================== */
.grade-depoimentos{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.cartao-depoimento{
  background:#fff; border: 1px solid var(--cor-borda);
  border-radius: var(--raio-xl); padding: 32px;
}
.estrelas{ color: var(--cor-aviso); letter-spacing:2px; margin-bottom: 14px; font-size:0.95rem; }
.texto-depoimento{ font-size: 0.92rem; color: var(--cor-texto); margin-bottom: 20px; }
.autor-depoimento{ display:flex; align-items:center; gap:12px; }
.foto-autor{
  width:48px; height:48px; border-radius:50%;
  object-fit: cover;
  flex-shrink:0;
}
.nome-autor{ font-weight:700; font-size:0.88rem; }
.cargo-autor{ font-size:0.78rem; color: var(--cor-texto-fraco); }

.grade-contadores{
  display:grid; grid-template-columns: repeat(3,1fr);
  gap: 18px; margin-top: 3.4rem;
  border-top: 1px solid var(--cor-borda);
  padding-top: 3.4rem;
}
.cartao-contador{ text-align:center; }
.numero-contador{
  font-family: var(--fonte-titulo); font-weight:800;
  font-size: clamp(2.2rem, 4vw, 3rem);
  color: var(--cor-primaria);
}
.rotulo-contador{ font-size:0.85rem; color: var(--cor-texto-fraco); margin-top:6px; }

/* ==========================================================================
   CTA FINAL
   ========================================================================== */
.secao-cta-final{
  background: var(--cor-fundo-dark);
  border-radius: var(--raio-xl);
  margin: 0 clamp(1.1rem,4vw,2rem);
  padding: 96px clamp(1.5rem, 5vw, 3rem);
  text-align:center;
  color:#fff;
  position:relative;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,0.1);
}
.secao-cta-final::before{
  display:none;
}
.secao-cta-final .rotulo-secao{ background: rgba(255,255,255,0.15); color:#fff; }
.secao-cta-final h2{ color:#fff; margin-bottom: 16px; font-size: clamp(2rem, 4vw, 3.25rem); font-weight:700; }
.secao-cta-final p{ color: rgba(255,255,255,0.7); max-width: 46ch; margin: 0 auto 32px; }
.cta-final-botoes{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-bottom:18px; position:relative; }
.secao-cta-final .btn-secundario{ background: var(--cor-fundo-dark-elevated); border-color: rgba(255,255,255,0.1); color:#fff; }
.secao-cta-final .btn-secundario:hover{ background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.2); color:#fff; }
.secao-cta-final .btn-primario{ background:#fff; color: var(--cor-primaria); box-shadow: none; }
.secao-cta-final .btn-primario:hover{ background: var(--cor-fundo-strong); }
.nota-cta{ font-size: 0.8rem; color: rgba(255,255,255,0.5); position:relative; }

/* ==========================================================================
   RODAPÉ
   ========================================================================== */
.rodape{ padding: 64px 48px 32px; border-top: 1px solid rgba(255,255,255,0.1); background: var(--cor-primaria); color:#fff; }
.rodape-topo{
  display:flex; justify-content:space-between; gap: 2rem; flex-wrap:wrap;
  margin-bottom: 32px;
}
.rodape-marca img{ height:24px; margin-bottom: 12px; }
.rodape-marca p{ font-size: 0.875rem; max-width: 30ch; color: rgba(255,255,255,0.8); }
.rodape-colunas{ display:flex; gap: 3.4rem; flex-wrap:wrap; }
.rodape-coluna h5{ font-family: var(--fonte-titulo); font-size:0.875rem; margin-bottom: 16px; color:#fff; font-weight:400; }
.rodape-coluna a{
  display:block; font-size: 0.875rem; color: rgba(255,255,255,0.8);
  padding: 6px 0; transition: color var(--transicao);
}
.rodape-coluna a:hover{ color:#fff; }
.rodape-base{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 0.8125rem; color: rgba(255,255,255,0.6);
}
.icone-coracao{ color: #ef4444; vertical-align: middle; margin: 0 4px; }

.btn-plano-cheio{ width: 100%; }

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@media (max-width: 1024px){
  .heroi-layout{ grid-template-columns: 1fr; }
  .heroi-visual{ height: 400px; margin-top: 2rem; }
  .recursos-layout{ grid-template-columns: 1fr; }
  .recursos-grid{ grid-template-columns: repeat(2, 1fr); }
  .grade-planos{ grid-template-columns: 1fr; max-width:420px; margin:0 auto; }
  .cartao-plano.popular{ transform:none; }
  .grade-depoimentos{ grid-template-columns: 1fr; }
  .menu-principal{ display:none; }
}

@media (max-width: 860px){
  .comparativo-grade{ grid-template-columns:1fr; }
  .seta-comparativo{ transform: rotate(90deg); padding: 4px 0; }
  .fluxo-etapas{ grid-template-columns: repeat(5,1fr); margin-top:1.6rem; }
  .fluxo-svg{ display:none; }
  .fluxo-etapa p{ display:none; }
  .grade-contadores{ grid-template-columns:1fr; gap: 26px; }
}

@media (max-width: 720px){
  .btn-menu-mobile{ display:flex; }
  .cabecalho-acoes .link-entrar{ display:none; }
  .grade-recursos{ grid-template-columns:1fr; }
  .cartao-recurso.destaque{ grid-column: span 1; }
  .fluxo-etapas{ grid-template-columns: repeat(3,1fr); row-gap: 24px; }
  .heroi{ padding-top: 120px; }
  .robo-heroi{ width:150px; }
  .recibo-pedido{ width: 84%; }
  .rodape-topo{ flex-direction:column; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}