/* ============================================================
   Fernando Net — camada de customização
   Tipografia Bricolage Grotesque + Figtree · seções azuis ·
   velocímetros · modal · animações (com prefers-reduced-motion)
   ============================================================ */

html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 5.5rem; }

/* ---------- Fundos das seções (novo ritmo azul) ---------- */
.section-light {
  /* pontilhado sutil no topo, sumindo sob um véu que termina na cor base */
  background:
    linear-gradient(180deg, rgba(233, 236, 250, 0) 0%, #E9ECFA 58%),
    radial-gradient(rgba(30, 33, 153, 0.08) 1px, transparent 1.4px),
    linear-gradient(180deg, #F5F7FF 0%, #EDEFFB 60%, #E9ECFA 100%);
  background-size: auto, 26px 26px, auto;
}
.section-blue {
  background:
    radial-gradient(48rem 30rem at 112% -8%, rgba(255, 77, 97, 0.16), transparent 62%),
    radial-gradient(40rem 26rem at -10% 108%, rgba(74, 85, 255, 0.3), transparent 60%),
    linear-gradient(135deg, #141875 0%, #1E2199 55%, #262CB5 100%);
}
/* Planos: azul royal emendando com o hero (que desvanece para #141875) */
.section-blue--planos {
  background:
    radial-gradient(50rem 32rem at 112% 4%, rgba(255, 77, 97, 0.15), transparent 62%),
    radial-gradient(42rem 28rem at -10% 96%, rgba(74, 85, 255, 0.28), transparent 60%),
    linear-gradient(180deg, #141875 0%, #1B1F8A 55%, #20259F 100%);
}
/* FAQ: continua a faixa azul depois dos acessos rápidos */
.band-blue--faq {
  background:
    radial-gradient(44rem 28rem at -8% 10%, rgba(255, 77, 97, 0.1), transparent 60%),
    linear-gradient(180deg, #262CB5 0%, #1B1F8A 55%, #141875 100%);
}
/* Sobre Nós → Depoimentos → Acessos formam uma faixa azul contínua */
.band-blue {
  background:
    radial-gradient(46rem 28rem at 108% 0%, rgba(255, 77, 97, 0.13), transparent 60%),
    linear-gradient(180deg, #141875 0%, #1B1F8A 100%);
}
.band-blue--mid {
  background:
    radial-gradient(44rem 30rem at -8% 30%, rgba(74, 85, 255, 0.28), transparent 60%),
    linear-gradient(180deg, #1B1F8A 0%, #20259F 100%);
}
.band-blue--end {
  background:
    radial-gradient(40rem 24rem at 110% 90%, rgba(255, 77, 97, 0.12), transparent 60%),
    linear-gradient(180deg, #20259F 0%, #262CB5 100%);
}

.stat-label { color: #C8CCF2; }

/* Detalhes decorativos (arcos/formas em opacidade baixa) */
.section-decor { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.section-decor::before,
.section-decor::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(30, 33, 153, 0.08);
}
.section-decor::before {
  width: 34rem; height: 34rem;
  top: -17rem; right: -12rem;
  box-shadow: 0 0 0 2.5rem rgba(30, 33, 153, 0.04);
}
.section-decor::after {
  width: 22rem; height: 22rem;
  bottom: -12rem; left: -9rem;
  border-color: rgba(237, 59, 79, 0.09);
  box-shadow: 0 0 0 2rem rgba(237, 59, 79, 0.04);
}
.section-decor--alt::before { right: auto; left: -12rem; }
.section-decor--alt::after { left: auto; right: -9rem; }
.section-decor--onblue::before {
  border-color: rgba(255, 255, 255, 0.07);
  box-shadow: 0 0 0 2.5rem rgba(255, 255, 255, 0.03);
}
.section-decor--onblue::after {
  border-color: rgba(255, 77, 97, 0.16);
  box-shadow: 0 0 0 2rem rgba(255, 77, 97, 0.06);
}

/* ---------- Botões de filtro dos planos ---------- */
.filter-btn {
  background: #fff;
  color: var(--brand-navy);
  border: 1px solid var(--border);
  min-height: 3rem; /* alvo de toque ≥48px */
}
.filter-btn:hover { border-color: var(--brand-red); }
.filter-btn.is-active {
  background: var(--brand-red);
  color: #fff;
  border-color: var(--brand-red);
  box-shadow: 0 4px 14px rgba(237, 59, 79, 0.35);
}

/* Card Mais Popular em vermelho Fernando Net */
.plan-card--popular {
  background: linear-gradient(140deg, #A81527 0%, #D42A3E 55%, #ED3B4F 100%);
  box-shadow: 0 25px 50px -12px rgba(168, 21, 39, 0.55);
}
.popular-pill {
  background: #fff;
  color: var(--brand-red-dark);
}

/* ---------- Cor de fundo dos cards (off-white sutil) ---------- */
.plan-card:not(.plan-card--popular) {
  background: linear-gradient(180deg, #ffffff 0%, #F7F7FA 100%);
}

/* Espaço para o selo "MAIS POPULAR" projetar acima sem colar no card de cima
   (grade: aumenta o gap entre linhas; carrossel mobile: padding-top pois o
   overflow-x recorta o que passa do topo) */
.plans-grid { row-gap: 2.75rem; padding-top: 0.5rem; }
.plans-carousel { padding-top: 1.25rem; }

/* ---------- Rótulo "Benefícios inclusos" ---------- */
.plan-benefits-label {
  margin-top: 1.15rem;
  text-align: center;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-body);
  position: relative;
}
.plan-benefits-label::before,
.plan-benefits-label::after {
  content: "";
  display: inline-block;
  width: 1.1rem;
  height: 1px;
  vertical-align: middle;
  margin: 0 0.5rem;
  background: currentColor;
  opacity: 0.35;
}
.plan-card--popular .plan-benefits-label { color: rgba(255, 255, 255, 0.85); }

/* ---------- Ícones de apps inclusos (maiores, mais limpos) ---------- */
.plan-chips > div {
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
  border: 1px solid rgba(13, 16, 64, 0.07);
}
.plan-card--popular .plan-chips > div { border-color: rgba(255, 255, 255, 0.2); }
.app-icon {
  width: 1.75rem;
  height: 1.75rem;
  background: #fff;
  object-fit: contain;
  padding: 2px;
  box-shadow: inset 0 0 0 1px rgba(13, 16, 64, 0.08);
}

/* ---------- Velocímetro dos planos ---------- */
.speedo { position: relative; width: 10.5rem; max-width: 100%; margin: 0.25rem auto 0; }
.speedo svg { display: block; width: 100%; height: auto; }
/* Trilha (arco vazio): cinza neutro claro — contrasta com o vermelho do arco */
.speedo-track { stroke: #E3E3E8; }
.plan-card--popular .speedo-track { stroke: rgba(255, 255, 255, 0.32); }
/* Preenchimento (arco cheio): vermelho de marca SÓLIDO em todos os cards;
   no card destaque (fundo vermelho) fica BRANCO sólido para contrastar */
.speedo-fill {
  stroke: var(--brand-red);
  stroke-dasharray: 226.2;
  stroke-dashoffset: 226.2;
}
.plan-card--popular .speedo-fill { stroke: #ffffff; }
.speedo.is-anim .speedo-fill {
  transition: stroke-dashoffset 1.5s cubic-bezier(0.33, 1, 0.68, 1);
}
.speedo.is-done .speedo-fill { stroke-dashoffset: 0; }
.speedo-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding-bottom: 4%;
}
.speedo-num {
  font-family: var(--font-display, "Bricolage Grotesque", system-ui, sans-serif);
  font-weight: 800;
  font-size: 2.1rem;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--brand-navy);
  font-variant-numeric: tabular-nums;
}
.plan-card--popular .speedo-num { color: #fff; }
/* "MEGA" — bloco tipográfico único com o número (composição A: empilhada) */
.speedo-unit {
  margin-top: 0.05rem;
  font-family: var(--font-display, "Bricolage Grotesque", system-ui, sans-serif);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand-navy);
}
.plan-card--popular .speedo-unit { color: #ffffff; }
.speedo-tick {
  position: absolute; bottom: 1%;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--brand-body);
  font-variant-numeric: tabular-nums;
}
.speedo-tick-0 { left: 12%; }
.speedo-tick-max { right: 12%; transform: translateX(35%); }
.plan-card--popular .speedo-tick { color: rgba(255, 255, 255, 0.7); }

.plan-tagline {
  margin-top: 0.3rem;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--brand-body);
  /* altura mínima p/ alinhar taglines de 1 e 2 linhas entre os cards */
  min-height: 2.7em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.plan-tagline--onblue { color: rgba(255, 255, 255, 0.9); }

/* Chips e botões com altura/base uniformes => todos os cards do mesmo tamanho */
.plan-chips {
  min-height: 2.5rem;
  align-content: center;
}
.plan-actions {
  margin-top: auto;              /* empurra os botões para a base */
  padding-top: 1.25rem;
  border-top: 1px solid rgba(13, 16, 64, 0.08);
}
.plan-card--popular .plan-actions { border-top-color: rgba(255, 255, 255, 0.25); }

/* ---------- Revelação por scroll ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  transition-delay: var(--rd, 0ms);
}
.js .reveal-zoom {
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 0.55s ease-out, transform 0.55s ease-out;
}
.js .reveal.in-view,
.js .reveal-zoom.in-view {
  opacity: 1;
  transform: none;
}

/* ---------- Hero ---------- */
.hero {
  padding-top: 7.5rem;
  padding-bottom: 5rem;
  background:
    linear-gradient(180deg, rgba(20, 24, 117, 0) 76%, #141875 100%),
    radial-gradient(52rem 34rem at 118% -10%, rgba(237, 59, 79, 0.24), transparent 62%),
    radial-gradient(46rem 30rem at -12% 112%, rgba(74, 85, 255, 0.4), transparent 62%),
    /* base: mesmos tokens e ângulo próximo do header (bg-gradient-to-r) para
       a emenda entre header e hero desaparecer */
    linear-gradient(100deg, var(--brand-royal-dark) 0%, #1A1D8C 45%, var(--brand-royal-light) 100%);
}
@media (min-width: 1024px) {
  .hero { padding-top: 9.5rem; padding-bottom: 7rem; }
}
.hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
}
.hero-glow--red {
  width: 38rem; height: 38rem;
  top: -14rem; right: -10rem;
  background: rgba(237, 59, 79, 0.22);
}
.hero-glow--blue {
  width: 32rem; height: 32rem;
  bottom: -14rem; left: -10rem;
  background: rgba(74, 85, 255, 0.32);
}
.hero-dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1.4px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(60rem 40rem at 30% 20%, #000, transparent 70%);
  mask-image: radial-gradient(60rem 40rem at 30% 20%, #000, transparent 70%);
}
.hero .arc-drift { opacity: 0.3; }

.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.92);
}
@media (max-width: 420px) {
  .hero-chip { font-size: 0.72rem; padding: 0.4rem 0.85rem; }
}
.hero-chip-dot {
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: var(--brand-red-light);
  box-shadow: 0 0 0 0 rgba(255, 77, 97, 0.5);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-chip-dot { animation: chipPing 2.6s ease-out infinite; }
}
@keyframes chipPing {
  0% { box-shadow: 0 0 0 0 rgba(255, 77, 97, 0.55); }
  55% { box-shadow: 0 0 0 7px rgba(255, 77, 97, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 77, 97, 0); }
}

.hero-title {
  margin-top: 1.1rem;
  font-size: clamp(1.7rem, 1rem + 2.4vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.hero-hl { color: var(--brand-red-light); }

/* Checks sempre em coluna única — evita o "órfão" de um 3º item sozinho
   numa segunda linha quando 2 cabem lado a lado e o 3º quebra. */
.hero-trust {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
}
.hero-trust li { display: flex; align-items: center; gap: 0.5rem; }
.hero-trust-check {
  flex-shrink: 0;
  height: 1.15rem; width: 1.15rem;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(37, 211, 102, 0.2);
  color: #7BE6A4;
}

/* Prova social — antes flutuava sobre a imagem (sumia no mobile);
   agora vive na coluna de texto, sempre visível, logo abaixo dos CTAs. */
.hero-social-proof {
  margin-top: 1.25rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
}
.hero-social-proof strong {
  font-family: var(--font-display, "Bricolage Grotesque", system-ui, sans-serif);
  font-weight: 700;
  color: #fff;
}
.hero-social-proof-star { color: var(--brand-red-light); flex-shrink: 0; }
.hero-social-proof-sep { opacity: 0.5; }

.hero-media-glow {
  position: absolute;
  inset: -2rem -2rem -3rem;
  background: radial-gradient(60% 55% at 60% 45%, rgba(255, 77, 97, 0.28), transparent 70%);
  filter: blur(30px);
  pointer-events: none;
}

/* Botão secundário (WhatsApp) em contorno — só o "Ver planos" fica sólido,
   assim há uma única ação primária no hero. */
.pill--ghost-wa {
  background: transparent;
  border: 1.5px solid rgba(37, 211, 102, 0.7);
  color: #fff;
}
.pill--ghost-wa:hover {
  background: rgba(37, 211, 102, 0.12);
  border-color: var(--brand-wa);
}

/* CTA de cobertura no header, em contorno — evita 2 vermelhos sólidos
   competindo com o "Ver planos" do hero ao mesmo tempo. */
.pill--ghost-header {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
}
.pill--ghost-header:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
}

/* ---------- Sequência de entrada do hero ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero-seq {
    animation: heroUp 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  .hero-seq-0 { animation-delay: 0s; }
  .hero-seq-1 { animation-delay: 0.08s; }
  .hero-seq-2 { animation-delay: 0.18s; }
  .hero-seq-3 { animation-delay: 0.28s; }
  .hero-seq-4 { animation-delay: 0.36s; }
  .hero-seq-5 { animation-delay: 0.44s; }
  .hero-seq-img {
    animation-name: heroRight;
    animation-duration: 0.7s;
    animation-delay: 0.4s;
  }
  .arc-drift { animation: arcDrift 10s ease-in-out infinite; }
}
@keyframes heroUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}
@keyframes heroRight {
  from { opacity: 0; transform: translateX(32px); }
  to { opacity: 1; transform: none; }
}
@keyframes arcDrift {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  50% { opacity: 0.4; transform: translateY(-8px); }
}

/* ---------- Microinterações ---------- */
a.pill, button.pill {
  transition: transform 0.25s ease, box-shadow 0.25s ease,
    background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
a.pill:hover, button.pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(13, 16, 64, 0.18);
}
a.pill:active, button.pill:active { transform: translateY(0) scale(0.97); }

.plan-card { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.plan-card:not(.plan-card--popular):hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(13, 16, 64, 0.14);
}
.band-blue--mid div.bg-white.rounded-2xl {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.band-blue--mid div.bg-white.rounded-2xl:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(13, 16, 64, 0.3);
}

/* Sublinhado animado nos links do menu desktop */
#site-header nav[aria-label="Principal"] a {
  position: relative;
}
#site-header nav[aria-label="Principal"] a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  height: 2px; width: 100%;
  background: var(--brand-red-light);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s ease;
}
#site-header nav[aria-label="Principal"] a:hover::after,
#site-header nav[aria-label="Principal"] a:focus-visible::after {
  transform: scaleX(1);
}

/* Ícones dos acessos rápidos */
.band-blue--end a.group .h-11 { transition: transform 0.3s ease; }
.band-blue--end a.group:hover .h-11 {
  transform: rotate(-8deg) scale(1.1);
}

/* Inputs */
input, select, textarea {
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 3px rgba(30, 33, 153, 0.12);
}

/* ---------- Header / navegação ---------- */
#site-header.scrolled {
  box-shadow: 0 4px 20px rgba(13, 16, 64, 0.28);
}
.mobile-menu {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.mobile-menu-link {
  display: block;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.92);
  transition: background-color 0.2s ease;
}
.mobile-menu-link:hover { background: rgba(255, 255, 255, 0.1); }

/* Sticky bar mobile: entra/sai com slide+fade */
#sticky-bar {
  transition: transform 0.35s ease, opacity 0.35s ease;
  opacity: 0;
}
#sticky-bar.show { transform: translateY(0); opacity: 1; }

/* Voltar ao topo */
.back-top {
  background: #fff;
  color: var(--brand-navy);
  border: 1px solid var(--border);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.2s ease;
}
.back-top:hover { background: var(--brand-surface-alt); }
.back-top.show { opacity: 1; transform: none; }

/* ---------- Elementos contínuos ---------- */
.wa-float { position: relative; }
.wa-float::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 9999px;
  border: 3px solid rgba(37, 211, 102, 0.55);
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .wa-float::before {
    animation: waPulse 6s ease-out infinite;
    animation-delay: 5s;
  }
  .popular-pill { position: relative; overflow: hidden; }
  .popular-pill::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(105deg, transparent 30%, rgba(237, 59, 79, 0.22) 50%, transparent 70%);
    transform: translateX(-130%);
    animation: shimmer 8s linear infinite;
    animation-delay: 2s;
  }
}
@keyframes waPulse {
  0% { transform: scale(1); opacity: 0.7; }
  14% { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}
@keyframes shimmer {
  0% { transform: translateX(-130%); }
  12% { transform: translateX(130%); }
  100% { transform: translateX(130%); }
}

/* ---------- FAQ (accordion) ---------- */
.faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.faq-panel.open { grid-template-rows: 1fr; }
.faq-panel-inner { min-height: 0; overflow: hidden; }
.faq-chevron { transition: transform 0.3s ease; }
.faq-item.open .faq-chevron { transform: rotate(180deg); }
.faq-item.open {
  border-color: rgba(237, 59, 79, 0.5);
  box-shadow: 0 4px 14px rgba(13, 16, 64, 0.08);
}

/* ---------- Resultado do CEP ---------- */
.cep-result {
  margin-top: 1rem;
  border-radius: 1rem;
  padding: 1rem 1.25rem;
  font-size: 0.9rem;
  line-height: 1.6;
  background: #EEF0FB;
  color: var(--brand-navy);
  border: 1px solid rgba(30, 33, 153, 0.15);
}
.cep-result.err {
  background: #FDECEE;
  border-color: rgba(237, 59, 79, 0.35);
  color: #A31626;
}
.cep-result a { font-weight: 600; color: var(--brand-red); text-decoration: underline; }

/* ---------- Modal de pré-cadastro ---------- */
.pc-modal { position: fixed; inset: 0; z-index: 100; }
.pc-overlay {
  position: absolute; inset: 0;
  background: rgba(13, 16, 64, 0.6);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.pc-card {
  position: absolute; inset: 0;
  background: #fff;
  overflow-y: auto;
  padding: 1.25rem 1.25rem 2rem;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.pc-modal.open .pc-overlay { opacity: 1; }
.pc-modal.open .pc-card { opacity: 1; transform: scale(1); }
@media (min-width: 640px) {
  .pc-card {
    inset: auto;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    width: min(560px, calc(100vw - 2rem));
    max-height: calc(100vh - 3rem);
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 24px 64px rgba(13, 16, 64, 0.35);
  }
  .pc-modal.open .pc-card { transform: translate(-50%, -50%) scale(1); }
}
.pc-close {
  position: sticky;
  top: 0;
  float: right;
  margin-left: auto;
  height: 3rem; width: 3rem;
  display: grid; place-items: center;
  border-radius: 9999px;
  color: var(--brand-navy);
  background: var(--brand-surface-alt);
  transition: background-color 0.2s ease;
  z-index: 2;
}
.pc-close:hover { background: #E4E6F2; }
.pc-eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-red);
}
.pc-plan-name {
  margin-top: 0.2rem;
  font-family: var(--font-display, "Bricolage Grotesque", system-ui, sans-serif);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--brand-navy);
}
.pc-plan-meta {
  margin-top: 0.15rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--brand-body);
}
#pc-form { margin-top: 1.25rem; }
.pc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
}
@media (min-width: 480px) {
  .pc-grid { grid-template-columns: 1fr 1fr; }
  .pc-col-2 { grid-column: 1 / -1; }
}
.pc-field label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--brand-navy);
  margin-bottom: 0.35rem;
}
.pc-opt { font-weight: 500; color: var(--brand-body); }
.pc-field input, .pc-field select {
  width: 100%;
  min-height: 3rem;
  border: 1px solid var(--border);
  border-radius: 0.65rem;
  padding: 0.6rem 0.9rem;
  font: inherit;
  color: var(--brand-navy);
  background: #fff;
}
.pc-field input:focus, .pc-field select:focus {
  outline: none;
  border-color: var(--brand-red);
}
.pc-field input.invalid, .pc-field select.invalid {
  border-color: var(--brand-red);
  background: #FFF7F8;
}
.pc-error {
  margin-top: 0.35rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #C81E33;
}
.pc-error--global {
  margin-top: 1rem;
  font-size: 0.85rem;
  text-align: center;
}
.pc-submit { margin-top: 1.25rem; }
.pc-submit[disabled] { opacity: 0.6; pointer-events: none; }
.pc-privacy {
  margin-top: 0.75rem;
  text-align: center;
  font-size: 0.72rem;
  color: var(--brand-body);
}

/* Sucesso: ✓ desenhado */
.pc-success { text-align: center; padding: 2.5rem 0.5rem 1rem; }
.pc-check { width: 5rem; height: 5rem; margin: 0 auto; display: block; }
.pc-check-circle {
  stroke: var(--brand-wa);
  stroke-dasharray: 183;
  stroke-dashoffset: 183;
}
.pc-check-mark {
  stroke: var(--brand-wa);
  stroke-dasharray: 36;
  stroke-dashoffset: 36;
}
.pc-modal.success .pc-check-circle { animation: drawStroke 0.5s ease-out forwards; }
.pc-modal.success .pc-check-mark { animation: drawStroke 0.4s ease-out 0.45s forwards; }
.pc-success-title {
  margin-top: 1.25rem;
  font-family: var(--font-display, "Bricolage Grotesque", system-ui, sans-serif);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--brand-navy);
  opacity: 0;
  animation: fadeUp 0.4s ease-out 0.7s forwards;
}
.pc-success-text {
  margin-top: 0.5rem;
  font-size: 0.95rem;
  color: var(--brand-body);
  opacity: 0;
  animation: fadeUp 0.4s ease-out 0.85s forwards;
}
#pc-success-wa {
  margin-top: 1.5rem;
  opacity: 0;
  animation: fadeUp 0.4s ease-out 1s forwards;
}
@keyframes drawStroke { to { stroke-dashoffset: 0; } }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* Trava o scroll do fundo com o modal aberto */
body.pc-lock { overflow: hidden; }

/* ---------- prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal, .js .reveal-zoom {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .speedo-fill {
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
  a.pill, button.pill, .plan-card,
  .band-blue--mid div.bg-white.rounded-2xl,
  #sticky-bar, .back-top {
    transition-duration: 0.01ms !important;
  }
  a.pill:hover, button.pill:hover, .plan-card:hover { transform: none; }
  .faq-panel, .faq-chevron { transition-duration: 0.01ms !important; }
  .pc-overlay, .pc-card { transition-duration: 0.01ms !important; }
  .pc-modal.success .pc-check-circle,
  .pc-modal.success .pc-check-mark {
    animation-duration: 0.01ms !important;
  }
  .pc-success-title, .pc-success-text, #pc-success-wa {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
  }
}