/* =========================================================================
   Pé na Areia: site institucional (estático, auto-contido)
   Identidade visual "Feito no Brasil": verde bandeira + amarelo-gold + azul.

   Redesign minimalista:
   - Tipografia como protagonista: headings grandes e leves, corpo limpo.
   - Padrão de cabeçalho de seção: eyebrow + título + descrição curta.
   - Neutros como base (off-white/superfícies); verde/amarelo só como acento
     (CTAs e destaques); verde-profundo no hero e no rodapé.
   - Seções claras alternadas (bg / surface), sem elementos decorativos
     atravessando fronteiras de seção (transições sempre limpas).

   ---------------------------------------------------------------------
   PALETA (variáveis centralizadas em :root)
   Troque QUALQUER tom abaixo em UMA linha: todo o site usa estas vars.

     --c-primary          verde bandeira / ação (#009b3a)
     --c-primary-strong   verde escuro p/ texto/botão em fundo claro (#00772e)
     --c-accent           amarelo-gold / destaque (#ffc800)
     --c-blue             azul / profundidade e links (#002776)
     --c-dark             verde profundo / âncoras escuras (#052e1e)
     --c-dark-2           verde profundo médio / fim de gradiente (#0b3d2e)
     --c-bg               fundo off-white quente (#faf9f4)
     --c-surface          superfícies / papel-areia (#f4f1e8)
     --c-surface-2        superfície mais funda (#ece7d9)
     --c-text             texto principal (#0f1720)
     --c-muted            texto secundário (#576271)
     --c-border           borda suave (#e6e0d1)
     --c-on-dark          texto sobre fundo escuro (#f4f6f2)
     --c-on-dark-muted    texto secundário sobre escuro (rgba)
   ---------------------------------------------------------------------
   Gradiente derivado: --grad-hero (seções escuras).

   Responsividade mobile:
   - Grids empilham em 1 coluna no mobile e expandem por breakpoint (40rem+).
   ========================================================================= */

:root {
  /* Cores da marca: "cara do Brasil" */
  --c-primary: #009b3a;          /* verde bandeira: ação / vibrante */
  --c-primary-strong: #00772e;   /* verde escuro: texto/botão em fundo claro (AA) */
  --c-primary-tint: #f0faf3;     /* verde bem claro: fundo de destaque (gradiente) */
  --c-accent: #ffc800;           /* amarelo-gold: destaque / highlight */
  --c-blue: #002776;             /* azul: profundidade / links (uso pontual) */

  --c-dark: #052e1e;             /* verde profundo: hero / rodapé */
  --c-dark-2: #0b3d2e;           /* verde profundo médio: fim do gradiente */
  --c-bg: #faf9f4;               /* fundo off-white quente */
  --c-surface: #f4f1e8;          /* superfícies / papel-areia */
  --c-surface-2: #ece7d9;        /* superfície mais funda (hover, pilhas) */
  --c-text: #0f1720;             /* texto principal */
  --c-muted: #576271;            /* texto secundário */
  --c-border: #e6e0d1;           /* bordas suaves / minimalistas */
  --c-on-dark: #f4f6f2;          /* texto sobre fundos escuros */
  --c-on-dark-muted: rgba(244, 246, 242, 0.78);
  --c-on-dark-faint: rgba(244, 246, 242, 0.6);
  --c-danger: #c0392b;           /* erro / estado inválido */

  /* Gradiente derivado (seções escuras) */
  --grad-hero: linear-gradient(160deg, var(--c-dark) 0%, var(--c-dark-2) 100%);

  /* Atalhos legados (mapeados: uso interno) */
  --bg: var(--c-bg);
  --bg-alt: var(--c-surface);

  /* Tipografia: Sora como primeira opção, system-ui como fallback robusto */
  --font-sans: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Tipografia fluida: headings grandes e leves, corpo confortável */
  --fs-display: clamp(2.5rem, 1.7rem + 4vw, 4.25rem);
  --fs-h2: clamp(1.85rem, 1.4rem + 2.2vw, 2.9rem);
  --fs-h3: clamp(1.15rem, 1.1rem + 0.3vw, 1.3rem);
  --fs-lead: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;

  /* Espaçamento: respiro generoso entre seções e blocos */
  --space-section: clamp(4.5rem, 3rem + 7vw, 8.5rem);
  --space-block: clamp(2.25rem, 2rem + 2vw, 3.5rem);
  --container: 76rem;
  --container-pad: clamp(1.25rem, 1rem + 2vw, 2rem);

  /* Radius unificados: cartões grandes e controles pequenos */
  --radius: 1rem;
  --radius-sm: 0.625rem;

  /* Sombras: leves, usadas sobretudo no hover (cards planos) */
  --shadow-sm: 0 1px 2px rgba(15, 23, 32, 0.05);
  --shadow-md: 0 12px 28px -14px rgba(15, 23, 32, 0.18);
  --shadow-lg: 0 24px 50px -22px rgba(5, 46, 30, 0.28);

  /* Transições */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1); /* ease-out-expo */
  --speed: 200ms;
}

/* ------------------------------------------------------------------ */
/* Reset                                                               */
/* ------------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

figure {
  margin: 0;
}

/* Acessibilidade: foco visível por teclado */
:focus-visible {
  outline: 3px solid var(--c-primary-strong);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Sobre fundos escuros, o acento amarelo garante contraste do contorno */
.hero :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--c-accent);
}

/* Seleção de texto no tom da marca (translúcido, legível) */
::selection {
  background: rgba(0, 155, 58, 0.22);
}

/* Acessibilidade: respeita quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

/* ------------------------------------------------------------------ */
/* Layout base                                                         */
/* ------------------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.container--narrow {
  max-width: 52rem;
}

.section {
  padding-block: var(--space-section);
}

/* Seção alternada (papel-areia) */
.section--alt {
  background: var(--c-surface);
}

/* Itens de grid podem encolher abaixo do tamanho intrínseco do conteúdo
   (evita estouro horizontal em telas estreitas) */
.feature-grid > *,
.steps-list > *,
.price-tiles > *,
.plans-grid > * {
  min-width: 0;
}

/* Âncoras não ficam escondidas atrás do header sticky */
section[id] {
  scroll-margin-top: 5.25rem;
}

/* Acessibilidade: texto visualmente oculto, disponível ao leitor de tela */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Reveal on scroll (usado pelo IntersectionObserver) */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  filter: blur(6px);
  transition:
    opacity 0.7s var(--ease-premium) var(--reveal-delay, 0ms),
    transform 0.7s var(--ease-premium) var(--reveal-delay, 0ms),
    filter 0.7s var(--ease-premium) var(--reveal-delay, 0ms);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  .feature-card {
    transition: none;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* ------------------------------------------------------------------ */
/* Botões: dois padrões apenas, primário (verde) e secundário (neutro) */
/* ------------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.5rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: var(--fs-body);
  line-height: 1;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease),
    background-color var(--speed) var(--ease), border-color var(--speed) var(--ease),
    color var(--speed) var(--ease);
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn-sm {
  padding: 0.6rem 1.2rem;
  font-size: var(--fs-small);
}

.btn-block {
  width: 100%;
}

/* Toque responsivo: evita o atraso de 300ms em alvos interativos no
   mobile (double-tap para zoom fica restrito, melhorando a resposta). */
.btn,
.nav-toggle,
.nav-link,
.faq-question {
  touch-action: manipulation;
}

/* Primário: verde sólido, o único CTA de peso da página */
.btn-primary {
  background: var(--c-primary-strong);
  color: #ffffff;
}

.btn-primary:hover {
  background: #056024;
  box-shadow: var(--shadow-md);
}

/* Secundário: discreto, neutro */
.btn-ghost {
  background: transparent;
  color: var(--c-text);
  border-color: var(--c-border);
}

.btn-ghost:hover {
  border-color: var(--c-muted);
  background: var(--c-bg);
}

/* ------------------------------------------------------------------ */
/* Header / navegação (sticky, translúcido e leve)                     */
/* Mobile-first: menu suspenso por padrão, nav inline no desktop.      */
/* ------------------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 249, 244, 0.72);
  backdrop-filter: saturate(1.2) blur(14px);
  -webkit-backdrop-filter: saturate(1.2) blur(14px);
  border-bottom: 1px solid rgba(230, 224, 209, 0.7);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 4.25rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.brand-logo {
  height: 1.75rem;
  width: auto;
  flex-shrink: 0;
}

.brand-name {
  font-family: var(--font-sans);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--c-text);
  white-space: nowrap;
}

/* CTA do header só aparece no desktop (no mobile, o CTA do hero assume) */
.header-cta .btn {
  display: none;
}

/* Botão hambúrguer (default mobile) */
.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.5rem;
  background: transparent;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
}

.nav-toggle-bar {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--c-dark);
  border-radius: 2px;
  transition: transform var(--speed) var(--ease), opacity var(--speed) var(--ease);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Menu mobile: painel suspenso abaixo do header */
.main-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: rgba(250, 249, 244, 0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--c-border);
  box-shadow: var(--shadow-md);
  display: none;
}

.main-nav.is-open {
  display: block;
}

.nav-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.25rem;
  padding: 1rem 1.25rem 1.5rem;
}

.nav-link {
  position: relative;
  display: block;
  padding: 0.9rem 0.75rem;
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--c-muted);
  border-radius: var(--radius-sm);
  transition: color var(--speed) var(--ease), background-color var(--speed) var(--ease);
}

/* Sublinhado animado no hover/focus (discreto) */
.nav-link::after {
  content: "";
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.3rem;
  height: 2px;
  border-radius: 2px;
  background: var(--c-primary-strong);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--speed) var(--ease);
}

.nav-link:hover::after,
.nav-link:focus-visible::after {
  transform: scaleX(1);
}

.nav-link:hover {
  color: var(--c-text);
  background: var(--c-surface);
}

.header-cta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Desktop (>= 1200px): nav inline + CTA + sem hambúrguer. Abaixo disso
   (até 1199px) o menu segue mobile: 9 links + logo + CTA não cabem sem
   sobreposição entre 992px e 1199px, então o hambúrguer fica até 1200px. */
@media (min-width: 75rem) {
  .nav-toggle {
    display: none;
  }

  .header-cta .btn {
    display: inline-flex;
    white-space: nowrap;
  }

  .main-nav {
    position: static;
    display: block;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: none;
    box-shadow: none;
  }

  .header-inner {
    flex-wrap: nowrap;
    min-width: 0;
    /* Gap menor que o padrão: em 1200px os 9 links + logo + CTA ocupam
       ~1107px dos ~1136px úteis (medição real); 1rem estouraria o padding. */
    gap: 0.5rem;
  }

  .nav-list {
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.25rem;
    padding: 0;
  }

  .nav-link {
    padding: 0.45rem 0.5rem;
    font-size: 0.84rem;
    white-space: nowrap;
    border-radius: var(--radius-sm);
  }

  /* Sublinhado acompanha o padding reduzido (era 0.75rem no mobile) */
  .nav-link::after {
    left: 0.5rem;
    right: 0.5rem;
  }
}

/* Telas largas (>= 1360px): respiro extra entre os links da nav.
   O container satura em 76rem (1152px úteis), então o ganho vem do
   tamanho da fonte (0.84rem -> 0.875rem) e do gap (0.25rem -> 0.4rem). */
@media (min-width: 85rem) {
  .nav-list {
    gap: 0.4rem;
  }

  .nav-link {
    padding: 0.5rem 0.45rem;
    font-size: var(--fs-small);
  }

  .nav-link::after {
    left: 0.45rem;
    right: 0.45rem;
  }
}

/* ------------------------------------------------------------------ */
/* Selo "Feito no Brasil"                                              */
/* ------------------------------------------------------------------ */
.made-in-br {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.01em;
}

.made-in-br-flag {
  font-size: 1rem;
  line-height: 1;
}

/* ------------------------------------------------------------------ */
/* Hero                                                                */
/* Termina de forma plana: nenhum pseudo-elemento ou decoração cruza   */
/* a fronteira com a seção seguinte.                                   */
/* ------------------------------------------------------------------ */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(55rem 38rem at 88% -12%, rgba(0, 155, 58, 0.14), transparent 60%),
    radial-gradient(38rem 28rem at 4% 112%, rgba(255, 200, 0, 0.06), transparent 60%),
    var(--grad-hero);
  background-size: 55rem 38rem, 38rem 28rem, 160% 160%;
  background-position: 88% -12%, 4% 112%, 0% 50%;
  color: var(--c-on-dark);
  animation: gradient-shift 32s ease-in-out infinite;
}

/* Gradiente animado: deslocamento sutil e lento */
@keyframes gradient-shift {
  0%,
  100% {
    background-position: 88% -12%, 4% 112%, 0% 50%;
  }
  50% {
    background-position: 90% -10%, 2% 112%, 60% 50%;
  }
}

/* Bolhas decorativas: apenas duas, bem sutis, contidas no hero */
.hero-decor {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-bubble {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
  filter: blur(2px);
}

.hero-bubble--1 {
  width: 18rem;
  height: 18rem;
  top: -5rem;
  right: -3rem;
  background: radial-gradient(circle at 35% 35%, rgba(255, 200, 0, 0.1), rgba(255, 200, 0, 0) 70%);
  animation: float-a 26s ease-in-out infinite;
}

.hero-bubble--2 {
  width: 11rem;
  height: 11rem;
  bottom: 18%;
  left: -3rem;
  background: radial-gradient(circle at 40% 40%, rgba(0, 155, 58, 0.16), rgba(0, 155, 58, 0) 70%);
  animation: float-b 32s ease-in-out infinite;
}

@keyframes float-a {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(-1rem, 1rem, 0);
  }
}

@keyframes float-b {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0.9rem, -0.9rem, 0);
  }
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 3vw, 4.5rem);
  align-items: center;
  padding-block: clamp(4.5rem, 3.5rem + 5vw, 7.5rem) clamp(4rem, 3rem + 4vw, 6.5rem);
}

.hero-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 1.25rem;
}

.hero-title {
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: #ffffff;
  margin-bottom: 1.5rem;
  text-wrap: balance;
}

/* Amarelo: apenas sobre fundos escuros (AA) */
.text-accent {
  color: var(--c-accent);
}

/* Verde escuro: acento de texto sobre fundos claros (AA) */
.text-accent-strong {
  color: var(--c-primary-strong);
}

.hero-subtitle {
  font-size: var(--fs-lead);
  line-height: 1.65;
  color: var(--c-on-dark-muted);
  max-width: 36rem;
  margin-bottom: 2.25rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

/* Secundário adaptado ao fundo escuro do hero */
.hero-actions .btn-ghost {
  color: var(--c-on-dark);
  border-color: rgba(244, 246, 242, 0.35);
}

.hero-actions .btn-ghost:hover {
  border-color: rgba(244, 246, 242, 0.7);
  background: rgba(244, 246, 242, 0.06);
}

.hero-note {
  font-size: var(--fs-small);
  color: var(--c-on-dark-faint);
}

.hero .made-in-br {
  margin-top: 1rem;
  color: var(--c-on-dark-muted);
}

/* Cartão ilustrativo do hero */
.hero-visual {
  display: flex;
  justify-content: center;
}

.hero-card {
  width: 100%;
  max-width: 26rem;
  background: #ffffff;
  color: var(--c-text);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* Barra de título estilo macOS: bolinhas com as cores clássicas do sistema
   (vermelho/amarelo/verde da Apple, marcas externas à paleta do site) e o
   título da janela em mono. Decorativa (aria-hidden no HTML). */
.hero-card-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.8rem 1rem;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
}

.hero-card-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  /* Realce interno: brilho no topo e sombra embaixo, cara de botão real */
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.45),
    inset 0 -1px 1px rgba(0, 0, 0, 0.15);
}

.hero-card-dot--close { background: #ff5f57; } /* vermelho: fechar */
.hero-card-dot--min   { background: #febc2e; } /* amarelo: minimizar */
.hero-card-dot--max   { background: #28c840; } /* verde: maximizar */

.hero-card-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.01em;
  color: var(--c-muted);
  white-space: nowrap;
}

.hero-card-body {
  padding: 1.6rem 1.5rem 1.5rem;
}

.hero-feature-list {
  display: grid;
  gap: 0.85rem;
  margin-bottom: 1.75rem;
}

.hero-feature-list li {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: calc(var(--fs-small) + 0.05rem);
  color: var(--c-muted);
}

.hero-dot {
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.45rem;
  border-radius: 50%;
  background: var(--c-primary);
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--c-border);
}

.hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero-stat strong {
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--c-primary-strong);
  line-height: 1.1;
}

.hero-stat span {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ------------------------------------------------------------------ */
/* Hero: painel "Atividade ao vivo" (mostruário decorativo)            */
/* O JS arma a cena (itens ocultos) e entra um evento por vez em       */
/* cascata; sem JS ou com reduced motion, os 4 itens ficam visíveis.   */
/* ------------------------------------------------------------------ */
.hero-live {
  margin-top: 1.4rem;
  padding: 0.9rem 0.95rem 0.85rem;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
}

.hero-live-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.7rem;
}

/* Dot verde pulsante (pulso via box-shadow, barato para o compositor) */
.hero-live-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--c-primary);
  animation: hero-live-pulse 2s ease-out infinite;
}

@keyframes hero-live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(0, 155, 58, 0.35); }
  70%  { box-shadow: 0 0 0 6px rgba(0, 155, 58, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 155, 58, 0); }
}

.hero-live-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--c-primary-strong);
}

.hero-live-feed {
  display: grid;
  gap: 0.55rem;
  /* Janela com folga: os 4 eventos cabem mesmo com quebras de linha no
     mobile; o teto só existe para garantir que nada estoure o cartão */
  max-height: 12rem;
  overflow: hidden;
}

.hero-live-item {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  opacity: 1;
  transform: none;
  /* Entrada e saída suaves (o JS alterna a classe is-in) */
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}

.hero-live-ico {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  margin-top: 0.05rem;
  border-radius: 50%;
}

/* Cor por tipo de evento: azul (pedido), verde (pagamento),
   verde WhatsApp (mensagem) e âmbar suave (estoque). Os tons de
   WhatsApp e âmbar são pontuais (decorativos, fora da paleta do site). */
.hero-live-item--order .hero-live-ico {
  color: var(--c-blue);
  background: rgba(0, 39, 118, 0.08);
}

.hero-live-item--pagamento .hero-live-ico {
  color: var(--c-primary-strong);
  background: rgba(0, 155, 58, 0.12);
}

.hero-live-item--whatsapp .hero-live-ico {
  color: #25d366;
  background: rgba(37, 211, 102, 0.14);
}

.hero-live-item--estoque .hero-live-ico {
  color: #b45309;
  background: rgba(180, 83, 9, 0.12);
}

.hero-live-text {
  font-size: 0.8rem;
  color: var(--c-muted);
  line-height: 1.35;
}

/* Cena armada pelo JS: os itens começam ocultos e entram em cascata
   (a classe is-in traz cada evento de volta, um por vez) */
.hero-live-feed.is-armed .hero-live-item {
  opacity: 0;
  transform: translateY(6px);
}

.hero-live-feed.is-armed .hero-live-item.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero-live-item {
    transition: none;
  }

  /* Mesmo que a cena tenha sido armada, o feed fica estático */
  .hero-live-feed.is-armed .hero-live-item {
    opacity: 1;
    transform: none;
  }

  .hero-live-dot {
    animation: none;
  }
}

/* ------------------------------------------------------------------ */
/* Títulos de seção: eyebrow discreto + título grande + descrição      */
/* ------------------------------------------------------------------ */
.section-head {
  max-width: 44rem;
  margin-bottom: var(--space-block);
}

.section-head > :last-child {
  margin-bottom: 0;
}

.section-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-primary-strong);
  margin-bottom: 1rem;
}

.section-title {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--c-text);
  margin-bottom: 1rem;
  text-wrap: balance;
}

.section-lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--c-muted);
  max-width: 40rem;
}

.section-lead strong {
  color: var(--c-text);
}

.section-head--center {
  text-align: center;
  margin-inline: auto;
}

.section-head--center .section-lead {
  margin-inline: auto;
}

/* ------------------------------------------------------------------ */
/* Recursos (bento): 3 destaques grandes + grid denso de módulos       */
/* ------------------------------------------------------------------ */
.feature-highlights {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

/* Bullets dos destaques (Mercado Pago e CMV) */
.feature-bullets {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: 0.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--c-border);
}

.feature-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--c-text);
}

.feature-bullets svg {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  margin-top: 0.2rem;
  color: var(--c-primary-strong);
}

/* Chips logo acima dos bullets: a segunda régua some */
.pay-chips + .feature-bullets {
  margin-top: 0;
  padding-top: 0.2rem;
  border-top: 0;
}

.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.feature-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.4rem;
  background: #ffffff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  /* O reveal (opacity/transform/filter, com --reveal-delay) convive com o
     hover porque o lift usa a propriedade individual `translate`, que não
     herda o atraso de entrada nem conflita com o `transform` do reveal. */
  transition:
    opacity 0.7s var(--ease-premium) var(--reveal-delay, 0ms),
    transform 0.7s var(--ease-premium) var(--reveal-delay, 0ms),
    filter 0.7s var(--ease-premium) var(--reveal-delay, 0ms),
    translate var(--speed) var(--ease),
    box-shadow var(--speed) var(--ease);
}

.feature-card:hover {
  translate: 0 -3px;
  box-shadow: var(--shadow-md);
}

.feature-card--big {
  gap: 1rem;
  padding: 1.5rem;
  overflow: hidden;
}

.feature-card-head {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
}

.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-sm);
  color: var(--c-primary-strong);
  background: var(--c-surface);
}

.feature-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.feature-title {
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--c-text);
}

.feature-card--big .feature-title {
  font-size: var(--fs-h3);
}

.feature-desc {
  font-size: 0.8125rem;
  color: var(--c-muted);
  line-height: 1.55;
}

/* ------------------------------------------------------------------ */
/* Infográficos nos destaques: chips de pagamento + fluxo em passos    */
/* ------------------------------------------------------------------ */
.pay-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--c-border);
}

.pay-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.9rem;
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1;
  color: var(--c-text);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 999px;
}

.pay-chip svg {
  width: 1rem;
  height: 1rem;
  color: var(--c-primary-strong);
}

/* ------------------------------------------------------------------ */
/* Fluxo detalhado do pedido: 4 etapas + sub-serviços ramificados      */
/* Mobile-first: timeline vertical com linha conectora passando pelos  */
/* círculos, chevron para baixo entre as etapas e os sub-chips         */
/* aninhados logo abaixo de cada etapa (um por linha, indentados).     */
/* Desktop (>= 48rem): etapas em linha (cards centrais) e os sub-chips */
/* ramificando para cima/baixo, ligados ao card por linhas finas.      */
/* ------------------------------------------------------------------ */
.flow-journey {
  margin-bottom: 1.5rem;
  padding: 1.4rem 1.25rem 1.5rem;
  background: #ffffff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
}

/* Rótulo pequeno do bloco (eyebrow suave, 1 linha) */
.flow-journey-eyebrow {
  display: block;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-primary-strong);
}

.flow-journey-list {
  position: relative;
  display: grid;
  gap: 0.55rem;
  margin-top: 1.25rem;
}

/* Timeline mobile: linha vertical contínua que passa pelos círculos.
   Os círculos (fundo opaco + z-index) mascaram a linha por cima. */
.flow-journey-list::before {
  content: "";
  position: absolute;
  top: 1.3rem;
  bottom: 1.3rem;
  left: 1.3rem;
  width: 2px;
  transform: translateX(-50%);
  background: rgba(0, 155, 58, 0.22);
  border-radius: 999px;
}

/* Etapa: card (ícone circular + texto) na primeira linha da grade e os
   sub-chips na segunda, na coluna do texto (indentados da timeline) */
.flow-journey-step {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  column-gap: 0.85rem;
  row-gap: 0.55rem;
  align-items: start;
}

.flow-journey-card {
  grid-column: 1 / -1;
  grid-row: 1;
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  column-gap: 0.85rem;
  align-items: center;
}

.flow-journey-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  color: var(--c-primary-strong);
  background: var(--c-primary-tint);
  border: 1px solid rgba(0, 155, 58, 0.25);
  border-radius: 50%;
}

.flow-journey-ico svg {
  width: 1.25rem;
  height: 1.25rem;
}

.flow-journey-body {
  min-width: 0;
}

.flow-journey-title {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--c-text);
}

.flow-journey-desc {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--c-muted);
}

/* Sub-serviços: chips menores, um por linha, aninhados sob a etapa */
.journey-subs {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  min-width: 0;
}

.journey-sub {
  position: relative;
  padding: 0.35rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--c-text);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 999px;
}

/* Realce leve no hover/tap (sem tooltip) */
.journey-sub:hover,
.journey-sub:active {
  background: var(--c-primary-tint);
  border-color: rgba(0, 155, 58, 0.45);
}

/* Seta: chevron no acento verde; para baixo no mobile, centrada na
   coluna da timeline */
.flow-journey-arrow {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  padding-block: 0.1rem;
  color: var(--c-primary);
}

.flow-journey-arrow svg {
  width: 1.25rem;
  height: 1.25rem;
  transform: rotate(90deg);
}

/* Cascata (padrão stock-demo): com a cena armada, cada item entra
   sozinho quando o JS acende o is-in. Etapas e setas sobem (fade +
   slide); os sub-chips deslizam do lado do ramo (esquerda, onde a
   linha conecta). */
.flow-journey-card,
.flow-journey-arrow {
  transition: opacity 0.45s var(--ease-premium), transform 0.45s var(--ease-premium);
}

.journey-sub {
  transition:
    opacity 0.45s var(--ease-premium),
    transform 0.45s var(--ease-premium),
    background-color var(--speed) var(--ease),
    border-color var(--speed) var(--ease);
}

.flow-journey.is-armed .flow-journey-card:not(.is-in),
.flow-journey.is-armed .flow-journey-arrow:not(.is-in),
.flow-journey.is-armed .journey-sub:not(.is-in) {
  opacity: 0;
}

.flow-journey.is-armed .flow-journey-card:not(.is-in),
.flow-journey.is-armed .flow-journey-arrow:not(.is-in) {
  transform: translateY(8px);
}

.flow-journey.is-armed .journey-sub:not(.is-in) {
  transform: translateX(-10px);
}

@media (prefers-reduced-motion: reduce) {
  .flow-journey-card,
  .flow-journey-arrow,
  .journey-sub {
    transition: none;
  }

  /* Mesmo que a cena tenha sido armada, tudo fica visível de uma vez */
  .flow-journey.is-armed .flow-journey-card:not(.is-in),
  .flow-journey.is-armed .flow-journey-arrow:not(.is-in),
  .flow-journey.is-armed .journey-sub:not(.is-in) {
    opacity: 1;
    transform: none;
  }
}

/* Desktop (>= 48rem): 4 etapas em linha (cards centrais) com 3 chevrons
   entre elas e 3 fileiras: ramos de cima (etapas 1 e 3), cards no meio
   e ramos de baixo (etapas 2 e 4). Cada etapa vira transparência para
   que card e chips ocupem o grid diretamente, sempre na mesma coluna. */
@media (min-width: 48rem) {
  .flow-journey {
    padding: 1.6rem 1.75rem 1.75rem;
  }

  .flow-journey-list {
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 0.9rem;
    row-gap: 1.1rem;
    margin-top: 1.4rem;
  }

  .flow-journey-list::before {
    content: none;
  }

  .flow-journey-step {
    display: contents;
  }

  /* Card central da etapa: coluna única, ícone em cima, texto abaixo */
  .flow-journey-card {
    grid-row: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    padding: 0.9rem 0.75rem;
    text-align: center;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
  }

  .flow-journey-arrow {
    grid-row: 2;
    align-self: center;
    width: auto;
  }

  .flow-journey-arrow svg {
    transform: none;
  }

  /* Ramos: chips centrados no trilho (acima ou abaixo do card) e linha
     fina vertical do ramo, que atravessa o vão até o card */
  .journey-subs {
    position: relative;
    padding-left: 1rem;
    justify-content: center;
    gap: 0.45rem;
  }

  .journey-subs--up {
    grid-row: 1;
  }

  .journey-subs--down {
    grid-row: 3;
  }

  .journey-subs::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(0, 155, 58, 0.35);
    border-radius: 999px;
  }

  .journey-subs--up::before {
    bottom: -1.1rem;
  }

  .journey-subs--down::before {
    top: -1.1rem;
  }

  /* Tick horizontal: liga cada chip à linha do ramo */
  .journey-sub::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -0.75rem;
    width: 0.75rem;
    height: 2px;
    margin-top: -1px;
    background: rgba(0, 155, 58, 0.35);
  }

  /* Colunas fixas: etapa, seta, etapa, seta, etapa, seta, etapa */
  .flow-journey-step:nth-child(1) .flow-journey-card,
  .flow-journey-step:nth-child(1) .journey-subs {
    grid-column: 1;
  }

  .flow-journey-arrow:nth-child(2) {
    grid-column: 2;
  }

  .flow-journey-step:nth-child(3) .flow-journey-card,
  .flow-journey-step:nth-child(3) .journey-subs {
    grid-column: 3;
  }

  .flow-journey-arrow:nth-child(4) {
    grid-column: 4;
  }

  .flow-journey-step:nth-child(5) .flow-journey-card,
  .flow-journey-step:nth-child(5) .journey-subs {
    grid-column: 5;
  }

  .flow-journey-arrow:nth-child(6) {
    grid-column: 6;
  }

  .flow-journey-step:nth-child(7) .flow-journey-card,
  .flow-journey-step:nth-child(7) .journey-subs {
    grid-column: 7;
  }
}

/* CTA direto no card (totem): empurra para o rodapé do card */
.feature-showcase-cta {
  display: flex;
  flex-wrap: wrap;
}

.feature-card--big > .feature-showcase-cta {
  margin-top: auto;
}

/* ------------------------------------------------------------------ */
/* Passos compartilhados (insumos, parceiros): layout horizontal       */
/* ------------------------------------------------------------------ */
.steps-list {
  display: grid;
  gap: 0.75rem;
}

.step {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.15rem 1.25rem;
  background: #ffffff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.1rem;
  height: 2.1rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--c-primary-strong);
  border: 1.5px solid rgba(0, 155, 58, 0.45);
  border-radius: 50%;
}

.step-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: 0.2rem;
}

.step-desc {
  font-size: 0.8125rem;
  color: var(--c-muted);
}

/* ------------------------------------------------------------------ */
/* Preço: calculadora interativa (peça central da seção)               */
/* ------------------------------------------------------------------ */

/* Cartão base (também usado por parceiros.html) */
.price-callout {
  padding: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  background: #ffffff;
  color: var(--c-text);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* Calculadora */
.price-calc {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 46rem;
  margin-inline: auto;
  padding: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  background: #ffffff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.price-calc-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.price-calc-field-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.price-calc-value {
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--c-text);
}

.price-calc-slider {
  width: 100%;
  min-height: 44px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--c-primary-strong);
}

.price-calc-scale {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--c-muted);
}

.price-calc-result {
  padding: 1.25rem 1.5rem;
  text-align: center;
  background: var(--c-primary-tint);
  border: 1px solid rgba(0, 155, 58, 0.25);
  border-radius: var(--radius-sm);
}

.price-calc-result-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-muted);
}

.price-calc-total {
  font-size: clamp(2.25rem, 2rem + 1.5vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--c-primary-strong);
}

.price-calc-badge {
  width: fit-content;
  margin: 0.75rem auto 0;
  padding: 0.35rem 0.9rem;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-primary-strong);
  background: #ffffff;
  border: 1px solid rgba(0, 155, 58, 0.35);
  border-radius: 999px;
}

.price-calc-badge[hidden] {
  display: none;
}

.price-calc-note {
  text-align: center;
  font-size: var(--fs-small);
  color: var(--c-muted);
}

/* Título de bloco (tabela) */
.price-block-title {
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 1rem;
}

.table-scroll {
  overflow-x: auto;
  border-radius: var(--radius);
  background: #ffffff;
  border: 1px solid var(--c-border);
}

/* Dica de arraste, visível apenas no mobile (a tabela exige rolagem) */
.table-hint {
  margin-top: 0.75rem;
  font-size: var(--fs-small);
  color: var(--c-muted);
  text-align: center;
}

/* Tabela semanal: linhas arejadas, números fortes, sem zebrado */
.price-table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  color: var(--c-text);
  font-size: var(--fs-body);
  text-align: left;
}

.price-table th,
.price-table td {
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--c-border);
}

.price-table thead th {
  background: var(--c-surface);
  color: var(--c-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.price-table thead th:last-child {
  text-align: right;
}

.price-table tbody th {
  font-weight: 600;
  color: var(--c-text);
}

.price-table tbody td {
  font-variant-numeric: tabular-nums;
}

.price-table tbody td:nth-child(2) {
  color: var(--c-muted);
}

.price-table tbody td:last-child {
  text-align: right;
  font-weight: 700;
  font-size: 1.05rem;
}

.price-table tbody tr:last-child th,
.price-table tbody tr:last-child td {
  border-bottom: none;
}

/* ------------------------------------------------------------------ */
/* Tiles (usados por parceiros.html; base compartilhada)               */
/* ------------------------------------------------------------------ */
.price-tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: var(--space-block);
}

.price-tile {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.75rem 2rem;
  background: #ffffff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
}

.price-tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-sm);
  color: var(--c-primary-strong);
  background: var(--c-surface);
}

.price-tile-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.price-tile-title {
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--c-text);
}

.price-tile p {
  font-size: var(--fs-small);
  color: var(--c-muted);
}

.price-tile p strong {
  color: var(--c-text);
}

/* ------------------------------------------------------------------ */
/* Controles de alternância (Planos e chips da calculadora             */
/* compartilham o mesmo padrão visual)                                 */
/* ------------------------------------------------------------------ */
.plan-mode,
.price-calc-chips {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 999px;
}

.plan-mode {
  margin: 1.5rem auto 0;
}

/* Chips: linha centrada, bloco cheio */
.price-calc-chips {
  display: flex;
  justify-content: center;
  margin: 0;
}

.plan-mode-btn,
.price-calc-chip {
  padding: 0.5rem 1.25rem;
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1;
  color: var(--c-muted);
  background: transparent;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.plan-mode-btn:hover,
.price-calc-chip:hover {
  color: var(--c-primary-strong);
  background: var(--c-surface-2);
}

.plan-mode-btn.is-active,
.price-calc-chip.is-active {
  color: #ffffff;
  background: var(--c-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.plan-mode-btn:focus-visible,
.price-calc-chip:focus-visible {
  outline: 3px solid var(--c-primary-strong);
  outline-offset: 2px;
}

.plans-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: stretch;
}

.plan {
  display: flex;
  flex-direction: column;
  padding: 2.25rem 2rem;
  background: #ffffff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
}

/* Destaque elegante do "Mais popular": borda fina verde + sombra suave */
.plan--featured {
  position: relative;
  border: 1px solid rgba(0, 155, 58, 0.55);
  box-shadow: var(--shadow-md);
}

.plan-flag {
  position: absolute;
  top: -0.85rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.25rem 0.85rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-dark);
  background: var(--c-accent);
  border-radius: 999px;
  white-space: nowrap;
}

.plan-name {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--c-text);
}

.plan-audience {
  font-size: var(--fs-small);
  color: var(--c-muted);
  margin: 0.4rem 0 1.5rem;
}

.plan-price {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.plan-price-value {
  font-size: clamp(2.25rem, 2rem + 1vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--c-text);
  line-height: 1;
}

.plan-price-unit {
  font-size: var(--fs-small);
  color: var(--c-muted);
}

/* Teto máximo: bem visível, separado por divisor */
.plan-teto {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  margin: 1.25rem 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--c-border);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-muted);
}

.plan-teto strong {
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.01em;
  color: var(--c-primary-strong);
}

.plan-list {
  display: grid;
  gap: 0.65rem;
  margin-bottom: 2rem;
}

.plan-list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: var(--fs-small);
  color: var(--c-text);
}

.plan-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.9em;
  height: 0.9em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300772e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.plan .btn {
  margin-top: auto;
}

.plan-list code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--c-primary-strong);
  background: var(--c-surface);
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
}

/* Por que o Pé na Areia: cartão claro com borda */
.why-box {
  margin-top: var(--space-block);
  padding: clamp(2rem, 1.5rem + 2.5vw, 3rem);
  background: #ffffff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
}

.why-title {
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 1.25rem;
}

.why-list {
  display: grid;
  gap: 1rem;
}

.why-list li {
  position: relative;
  padding-left: 1.75rem;
  font-size: var(--fs-body);
  color: var(--c-muted);
}

.why-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 1.25em;
  height: 1.25em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300772e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.why-list li strong {
  color: var(--c-text);
}

/* ------------------------------------------------------------------ */
/* FAQ (accordion)                                                     */
/* ------------------------------------------------------------------ */
.faq-list {
  display: grid;
  gap: 0.75rem;
}

.faq-item {
  background: #ffffff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.15rem 1.5rem;
  font-size: var(--fs-body);
  font-weight: 600;
  text-align: left;
  color: var(--c-text);
  background: transparent;
  border: none;
  transition: color var(--speed) var(--ease);
}

.faq-question:hover {
  color: var(--c-primary-strong);
}

.faq-chevron {
  flex-shrink: 0;
  color: var(--c-muted);
  transition: transform var(--speed) var(--ease);
}

.faq-item[data-open="true"] .faq-chevron {
  transform: rotate(180deg);
}

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  /* Remove o conteúdo fechado da árvore de acessibilidade. O delay mantém
     a resposta visível durante a animação de fechamento e a revela
     imediatamente ao abrir. */
  visibility: hidden;
  transition: grid-template-rows 0.3s var(--ease), visibility 0s linear 0.3s;
}

.faq-answer > p {
  overflow: hidden;
  padding: 0 1.5rem;
  color: var(--c-muted);
  font-size: var(--fs-body);
}

.faq-item[data-open="true"] .faq-answer {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 0.3s var(--ease), visibility 0s;
}

.faq-item[data-open="true"] .faq-answer > p {
  padding-bottom: 1.5rem;
}

/* ------------------------------------------------------------------ */
/* Contato: cartão claro centralizado (usado também em parceiros.html) */
/* ------------------------------------------------------------------ */
.contato-box {
  background: #ffffff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: clamp(2.5rem, 2rem + 4vw, 4rem);
  text-align: center;
}

.contato-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}

.contato-hint {
  margin-top: 1.5rem;
  font-size: var(--fs-small);
  color: var(--c-muted);
}

/* ------------------------------------------------------------------ */
/* Contato (página inicial): dois blocos (informação + formulário)     */
/* empilhados no mobile, lado a lado no desktop.                       */
/* ------------------------------------------------------------------ */
.contato-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: stretch;
}

/* Coluna de informação: cartão claro com CTAs secundários */
.contato-info {
  padding: clamp(2rem, 1.6rem + 2vw, 3rem);
  background: #ffffff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
}

.contato-info .section-title {
  max-width: 22rem;
}

.contato-alt {
  margin-top: 1.25rem;
  font-size: var(--fs-body);
  color: var(--c-muted);
}

.contato-info .contato-actions {
  justify-content: flex-start;
}

.contato-info .contato-actions .btn {
  border-radius: var(--radius-sm);
}

/* Coluna do formulário: card branco com os campos */
.contato-form-card {
  padding: clamp(1.75rem, 1.5rem + 2vw, 2.5rem);
  background: #ffffff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
}

/* Status global do envio (loading / sucesso / erro) */
.form-status {
  padding: 0.85rem 1rem;
  margin-bottom: 1.25rem;
  border-radius: var(--radius-sm);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--c-text);
}

.form-status:not([hidden]) {
  display: block;
}

/* Erro de rede (ambos os caminhos falharam): fundo de aviso neutro */
.form-status--error {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
}

.form-status--error strong {
  color: var(--c-text);
}

.form-actions-fallback {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

/* Sucesso: substitui o formulário por uma confirmação */
.contato-form--success {
  text-align: left;
}

.contato-success {
  padding: 1rem 0;
}

.contato-success-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  color: #ffffff;
  background: var(--c-primary-strong);
  margin-bottom: 1.25rem;
}

.contato-success-check svg {
  width: 1.5rem;
  height: 1.5rem;
}

.contato-success-title {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--c-text);
  margin-bottom: 0.5rem;
}

.contato-success-text {
  font-size: var(--fs-body);
  color: var(--c-muted);
}

.contato-success-note {
  margin-top: 0.75rem;
  font-size: var(--fs-small);
  color: var(--c-muted);
}

.contato-success-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

/* Campos */
.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.form-field {
  display: flex;
  flex-direction: column;
}

.form-label {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: 0.4rem;
}

.form-optional {
  font-weight: 400;
  color: var(--c-muted);
}

.form-input {
  width: 100%;
  min-height: 44px;
  padding: 0.65rem 0.85rem;
  font-family: inherit;
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--c-text);
  background: #ffffff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}

.form-input::placeholder {
  color: var(--c-muted);
}

.form-input:hover {
  border-color: var(--c-muted);
}

.form-input:focus-visible {
  outline: 3px solid var(--c-primary-strong);
  outline-offset: 3px;
  border-color: var(--c-primary-strong);
}

/* Select: aparência nativa, com chevron próprio */
.form-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23576271' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 1rem 1rem;
  padding-right: 2.4rem;
}

.form-textarea {
  min-height: 7.5rem;
  resize: vertical;
}

/* Estado inválido: borda de erro + texto de apoio acessível */
.form-field.is-invalid .form-input {
  border-color: var(--c-danger);
}

.form-error {
  display: none;
  margin-top: 0.35rem;
  font-size: 0.8125rem;
  color: var(--c-danger);
}

.form-field.is-invalid .form-error {
  display: block;
}

.form-hint {
  margin-top: 0.35rem;
  font-size: 0.8125rem;
  color: var(--c-muted);
}

/* Botão submit: estado de loading */
.btn-spinner {
  display: none;
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: form-spin 0.7s linear infinite;
}

.btn.is-loading .btn-spinner {
  display: inline-block;
}

.btn.is-loading .btn-label {
  opacity: 0.8;
}

.btn:disabled {
  cursor: progress;
  opacity: 0.85;
}

.btn:hover:disabled {
  transform: none;
  box-shadow: none;
}

@keyframes form-spin {
  to {
    transform: rotate(360deg);
  }
}

.form-privacy {
  margin-top: 0.85rem;
  text-align: center;
  font-size: var(--fs-small);
  color: var(--c-muted);
}

/* Honeypot: fora da viewport. Sem display:none (bots preenchem campos
   "visíveis"); removido da árvore de acessibilidade e do fluxo de Tab. */
.hp-field {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Dois campos lado a lado no desktop */
@media (min-width: 40rem) {
  .form-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}

@media (min-width: 56.25rem) {
  .contato-grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 1.5rem;
  }
}

/* ------------------------------------------------------------------ */
/* Footer                                                              */
/* ------------------------------------------------------------------ */
.site-footer {
  background: var(--c-dark);
  color: #cbd5e1;
}

/* Brand | nav (2 colunas) empilhados no mobile, lado a lado a partir de 768px */
.footer-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding-block: 3.5rem 2.75rem;
}

.footer-brand .brand {
  align-items: center;
}

.footer-brand .brand-logo {
  height: 1.75rem;
}

.footer-brand .brand-name {
  color: var(--c-on-dark);
}

.footer-tagline {
  margin-top: 0.75rem;
  font-size: var(--fs-small);
  color: var(--c-on-dark-faint);
  max-width: 24rem;
}

/* Redes sociais: botões circulares com contorno translúcido */
.footer-social {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  border: 1px solid rgba(244, 246, 242, 0.25);
  color: var(--c-on-dark-muted);
  transition:
    color var(--speed) var(--ease),
    background-color var(--speed) var(--ease),
    border-color var(--speed) var(--ease);
}

.footer-social a:hover {
  background: rgba(255, 200, 0, 0.14);
  border-color: rgba(255, 200, 0, 0.4);
  color: var(--c-accent);
}

.made-in-br--footer {
  margin-top: 1.25rem;
  color: var(--c-on-dark-muted);
}

.footer-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.footer-title {
  font-size: var(--fs-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #ffffff;
  margin-bottom: 0.9rem;
}

.footer-nav ul {
  display: grid;
  gap: 0.6rem;
}

.footer-nav a {
  font-size: var(--fs-small);
  color: var(--c-on-dark-faint);
  overflow-wrap: anywhere;
  transition: color var(--speed) var(--ease);
}

.footer-nav a:hover {
  color: var(--c-accent);
}

/* Contatos do rodapé: ícone pequeno alinhado antes do texto */
.footer-contact a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.footer-contact svg {
  flex: none;
  opacity: 0.75;
}

/* Faixa final do rodapé: separadora acima, copy centrada no mobile */
.footer-bottom {
  border-top: 1px solid rgba(203, 213, 225, 0.15);
  padding-block: 1.5rem 2rem;
}

.footer-bottom-inner {
  display: flex;
  justify-content: center;
}

.footer-copy {
  font-size: var(--fs-small);
  color: var(--c-on-dark-faint);
}

/* ------------------------------------------------------------------ */
/* Responsivo: breakpoints progressivos                                */
/* ------------------------------------------------------------------ */

/* 640px: tablets pequenos / landscape mobile */
@media (min-width: 40rem) {
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .price-tiles {
    grid-template-columns: repeat(2, 1fr);
  }
  .plans-grid {
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
  }
}

/* 768px: tablets / desktops pequenos (mesmo breakpoint do fluxo) */
@media (min-width: 48rem) {
  /* 3 destaques grandes de Funções lado a lado */
  .feature-highlights {
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
  }

  /* Footer desktop: brand à esquerda, links à direita; copy na esquerda */
  .footer-inner {
    grid-template-columns: 1.4fr 1fr;
  }
  .footer-bottom-inner {
    justify-content: flex-start;
  }
}

/* 900px: tablets / desktops */
@media (min-width: 56.25rem) {
  .hero-inner {
    grid-template-columns: 1.1fr 0.9fr;
  }
  .feature-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ------------------------------------------------------------------ */
/* Polimento mobile (abaixo de 40rem)                                   */
/* ------------------------------------------------------------------ */

/* A dica de arraste da tabela só aparece onde há rolagem horizontal */
@media (min-width: 40rem) {
  .table-hint {
    display: none;
  }
}

/* Mobile: espaçamento vertical uniforme entre seções */
@media (max-width: 39.99rem) {
  .section {
    padding-block: 3.75rem;
  }

  /* CTAs full-width onde faz sentido (fechamento de seção e showcase);
     quebram a linha dentro do pill sem estourar o container. */
  .section-cta .btn,
  .feature-showcase-cta .btn {
    width: 100%;
    white-space: normal;
  }

  /* Destaques bento mais compactos (menos respiro interno) */
  .feature-card--big {
    padding: 1rem;
  }
}

/* ~480px: CTAs do hero empilham em largura total */
@media (max-width: 30rem) {
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-actions .btn {
    width: 100%;
  }

  .footer-nav {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------------ */
/* Calculadora de preço no mobile (≤640px): vertical, toque grande     */
/* ------------------------------------------------------------------ */
@media (max-width: 39.99rem) {
  .price-calc {
    gap: 1.25rem;
    padding: 1.25rem 1.1rem;
  }

  /* Chips de plano: 3 colunas compactas, sem scroll e sem overflow */
  .price-calc-chips {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.35rem;
    padding: 0.3rem;
    border-radius: var(--radius-sm);
  }

  .price-calc-chip {
    padding: 0.6rem 0.3rem;
    font-size: 0.78rem;
    line-height: 1.25;
    white-space: normal;
  }

  .price-calc-value {
    font-size: 1.1rem;
  }

  /* Slider full-width com área de toque ≥44px e thumb bem visível */
  .price-calc-slider {
    -webkit-appearance: none;
    appearance: none;
    height: 44px;
    margin: 0;
    padding: 0;
    background: transparent;
    touch-action: manipulation;
  }

  .price-calc-slider::-webkit-slider-runnable-track {
    height: 10px;
    border: 1px solid var(--c-border);
    border-radius: 999px;
    background: linear-gradient(
      90deg,
      var(--c-primary) var(--calc-fill, 0%),
      var(--c-surface-2) var(--calc-fill, 0%)
    );
  }

  .price-calc-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 26px;
    height: 26px;
    margin-top: -7px;
    border: 3px solid #ffffff;
    border-radius: 50%;
    background: var(--c-primary-strong);
    box-shadow: 0 2px 6px rgba(15, 23, 32, 0.25);
  }

  .price-calc-slider::-moz-range-track {
    height: 10px;
    border: 1px solid var(--c-border);
    border-radius: 999px;
    background: var(--c-surface-2);
  }

  .price-calc-slider::-moz-range-progress {
    height: 10px;
    border-radius: 999px;
    background: var(--c-primary);
  }

  .price-calc-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border: 3px solid #ffffff;
    border-radius: 50%;
    background: var(--c-primary-strong);
    box-shadow: 0 2px 6px rgba(15, 23, 32, 0.25);
  }

  .price-calc-slider:focus-visible {
    outline: 3px solid var(--c-primary-strong);
    outline-offset: 3px;
  }

  /* Resultado: bloco centralizado com número grande em destaque */
  .price-calc-result {
    padding: 1.15rem 1rem;
  }

  .price-calc-total {
    font-size: clamp(2.5rem, 2.1rem + 2.5vw, 3.25rem);
  }
}

/* 320px: reduz o respiro entre as estatísticas do hero se a tela for
   muito estreita (evita estouro horizontal) e enxuga o corpo do cartão. */
@media (max-width: 26rem) {
  .hero-stats {
    gap: 0.5rem;
  }

  .hero-card-body {
    padding: 1.35rem 1.15rem 1.2rem;
  }

  .hero-live {
    padding: 0.8rem 0.8rem 0.75rem;
  }

  .hero-live-text {
    font-size: 0.76rem;
  }
}

/* Hero em landscape curto: menos respiro vertical para caber na tela */
@media (orientation: landscape) and (max-height: 30rem) {
  .hero-inner {
    padding-block: 2.5rem;
  }
}

/* Marcadores do confronto: ✓ verde, Parcial amarelo, ✗ cinza */
.mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.2;
}

.mark--yes {
  color: var(--c-primary-strong);
  background: rgba(0, 155, 58, 0.14);
}

.mark--no {
  color: var(--c-muted);
  background: var(--c-surface);
}

.mark--partial {
  font-size: 0.72rem;
  color: var(--c-dark);
  background: rgba(255, 200, 0, 0.32);
}

/* Fechamento de seção: frase + CTA (funções, diferenciais, planos, FAQ) */
.section-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 1.25rem;
  margin-top: var(--space-block);
  text-align: center;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--c-text);
}

/* Bloco do carro-chefe: Estoque Inteligente por Insumos */
.insumos-block {
  margin-top: var(--space-section);
  padding: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  background: #ffffff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
}

.insumos-block .section-head {
  margin-bottom: 1.5rem;
}

.insumos-block .section-title {
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.1rem);
  margin-bottom: 0;
}

/* ------------------------------------------------------------------ */
/* Estoque Inteligente: simulação animada (o pedido puxa o estoque)    */
/* Mobile-first: pedido em cima, estoque embaixo. No desktop (>=48rem) */
/* vira split: comanda à esquerda, seta no meio, barras à direita.     */
/* ------------------------------------------------------------------ */
.stock-demo {
  display: grid;
  gap: 1rem;
  max-width: 52rem;
  margin: 1.75rem auto;
  padding: 1.25rem;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
}

.stock-demo-head {
  display: flex;
  justify-content: flex-end;
}

/* Painéis: empilhados (pedido em cima, estoque embaixo) no mobile */
.stock-demo-panels {
  display: grid;
  gap: 0.85rem;
}

.stock-demo__order,
.stock-demo__stock {
  min-width: 0;
}

.stock-demo-panel-title {
  margin: 0 0 0.55rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-muted);
}

/* Conexão pedido ↔ estoque: para baixo no mobile, para o lado no desktop */
.stock-demo-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-primary-strong);
  opacity: 0.55;
}

.stock-demo-arrow svg {
  transform: rotate(90deg);
}

/* Cartão de comanda: entra com slide/scale no passo 1 da sequência */
.stock-demo-ticket {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  height: 100%;
  padding: 1rem 1.1rem;
  background: #ffffff;
  border: 1px solid rgba(0, 155, 58, 0.35);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  transition: opacity 0.45s var(--ease-premium), transform 0.45s var(--ease-premium);
}

.stock-demo-ticket-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px dashed var(--c-border);
}

.stock-demo-ticket-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.2rem;
  height: 2.2rem;
  color: var(--c-primary-strong);
  background: var(--c-primary-tint);
  border-radius: 50%;
}

.stock-demo-ticket-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.stock-demo-ticket-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-muted);
}

.stock-demo-ticket-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--c-text);
}

/* Linhas da ficha técnica: cada uma acende quando o pedido puxa o insumo */
.stock-demo-lines {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.stock-demo-line {
  min-width: 0;
  overflow-wrap: break-word;
  padding: 0.5rem 0.7rem;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--c-text);
  background: var(--c-surface);
  border-left: 3px solid transparent;
  border-radius: 0.45rem;
  font-variant-numeric: tabular-nums;
  transition:
    opacity 0.35s var(--ease),
    transform 0.35s var(--ease),
    background-color 0.3s var(--ease),
    border-color 0.3s var(--ease);
}

.stock-demo-line.is-active {
  font-weight: 700;
  color: var(--c-primary-strong);
  background: var(--c-primary-tint);
  border-left-color: var(--c-primary);
}

/* Estado "aguardando play" (só com JS ativo e sem reduced motion):
   o cartão entra no passo 1 e as linhas/total acendem um por vez */
.stock-demo--armed .stock-demo-ticket {
  opacity: 0;
  transform: translateY(8px) scale(0.94);
}

.stock-demo--armed .stock-demo-ticket.is-in {
  opacity: 1;
  transform: none;
}

.stock-demo--armed .stock-demo-line:not(.is-in) {
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
}

.stock-demo--armed .stock-demo-line.is-in {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* Linha do total (CMV): entra contando no último passo da sequência */
.stock-demo-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: auto;
  padding: 0.7rem 0.85rem;
  background: var(--c-primary-tint);
  border: 1px solid rgba(0, 155, 58, 0.25);
  border-radius: 0.45rem;
  transition: opacity 0.4s var(--ease-premium), transform 0.4s var(--ease-premium);
}

.stock-demo--armed .stock-demo-total:not(.is-in) {
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
}

.stock-demo--armed .stock-demo-total.is-in {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.stock-demo-total-label {
  min-width: 0;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-muted);
}

.stock-demo-total-value {
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--c-primary-strong);
}

/* Barras de insumo (lado do estoque) */
.stock-demo-bars {
  display: grid;
  gap: 0.55rem;
}

.stock-bar {
  padding: 0.55rem 0.7rem;
  border: 1px solid transparent;
  border-radius: 0.55rem;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.stock-bar-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}

/* Nome à esquerda: encolhe e trunca; quantidade à direita: nunca esmaga */
.stock-bar-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-text);
  transition: color 0.3s var(--ease);
}

.stock-bar-qty {
  flex-shrink: 0;
  white-space: nowrap;
  font-size: var(--fs-small);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--c-primary-strong);
  transition: color 0.3s var(--ease);
}

.stock-bar-track {
  height: 0.8rem;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: 999px;
  overflow: hidden;
}

.stock-bar-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--c-primary), var(--c-primary-strong));
  transition: width 0.6s var(--ease-premium);
}

/* Passo em ação: a barra acende com o MESMO acento da linha do pedido */
.stock-bar.is-active {
  background: var(--c-primary-tint);
  border-color: rgba(0, 155, 58, 0.35);
}

.stock-bar.is-active .stock-bar-name,
.stock-bar.is-active .stock-bar-qty {
  color: var(--c-primary-strong);
}

.stock-bar.is-active .stock-bar-fill {
  box-shadow: 0 0 10px rgba(0, 155, 58, 0.5);
}

/* Frase-resumo em 1 linha: FORA do card (irmã dele no bloco), com
   respiro próprio; o .stat-grid abaixo já entra com 1.75rem */
.stock-demo-takeaway {
  margin: 1.1rem auto 0;
  text-align: center;
  font-size: var(--fs-small);
  color: var(--c-muted);
}

/* Desktop (>=48rem): comanda à esquerda, seta no meio, estoque à direita */
@media (min-width: 48rem) {
  .stock-demo {
    padding: 1.25rem;
  }

  .stock-demo-panels {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 1.25rem;
  }

  .stock-demo-arrow svg {
    transform: none;
  }
}

/* Desktops médios+ (>=56rem): padding volta ao respiro cheio */
@media (min-width: 56rem) {
  .stock-demo {
    padding: 1.75rem;
  }
}

/* Stat grande: a promessa do estoque inteligente */
.stat-grid {
  max-width: 34rem;
  margin: 1.75rem auto 0;
  padding: 1.25rem 1.5rem;
  text-align: center;
  font-size: clamp(1.05rem, 1rem + 0.5vw, 1.25rem);
  line-height: 1.5;
  color: var(--c-muted);
  background: var(--c-primary-tint);
  border: 1px solid rgba(0, 155, 58, 0.25);
  border-radius: var(--radius);
}

.stat-grid strong {
  font-weight: 700;
  color: var(--c-primary-strong);
}

/* ------------------------------------------------------------------ */
/* O confronto (placar de jogo)                                        */
/* ------------------------------------------------------------------ */

/* Placar: lado a lado sobre fundo escuro, com o "x" ao centro */
.match-score {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  max-width: 30rem;
  margin: 0 auto;
  padding: 1.25rem 1.5rem;
  background: var(--c-dark);
  color: var(--c-on-dark);
  border-radius: var(--radius);
}

/* Cada lado do placar: label em cima, número embaixo */
.match-score-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  flex: 1;
  min-width: 0;
}

.match-score-name {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-on-dark-muted);
}

.match-score-val {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--c-on-dark);
}

/* PNA: acento verde (verde claro para contraste sobre o fundo escuro) */
.match-score-side--pna .match-score-name {
  color: #3ecf82; /* verde claro sobre fundo escuro */
}

.match-score-side--pna .match-score-val {
  color: #3ecf82;
}

/* "Outros": neutro/cinza, sem peso de destaque */
.match-score-side--outros .match-score-val {
  color: var(--c-on-dark-muted);
}

/* Separador "x" */
.match-score-x {
  flex-shrink: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  color: var(--c-on-dark-faint);
}

/* Chips de seleção (mesmo padrão dos plan-mode-btn) */
.match-chips {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 0.5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.35rem;
  margin-top: 1.5rem;
  scrollbar-width: none;
}

.match-chips::-webkit-scrollbar {
  display: none;
}

.match-chip {
  flex: 0 0 auto;
  padding: 0.5rem 1.25rem;
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1;
  color: var(--c-muted);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  touch-action: manipulation;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.match-chip:hover {
  color: var(--c-primary-strong);
  background: var(--c-surface-2);
}

.match-chip.is-active {
  color: #ffffff;
  background: var(--c-primary);
  border-color: var(--c-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.match-chip:focus-visible {
  outline: 3px solid var(--c-primary-strong);
  outline-offset: 2px;
}

/* Botão CTA "Assistir o confronto": variação de .btn, centralizado */
.match-play {
  display: flex;
  width: fit-content;
  margin: 1.5rem auto 0;
}

/* Lista de jogadas: vertical, centralizada */
.match-plays {
  list-style: none;
  display: grid;
  gap: 0.6rem;
  max-width: 40rem;
  margin: 1.75rem auto 0;
  padding: 0;
}

/* Item (li.match-play): card claro; no mobile os marcadores quebram linha.
   Transição para a revelação (fade + slide ao remover .is-hidden). */
.match-plays .match-play {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  width: auto;
  margin: 0;
  padding: 0.9rem 1rem;
  background: #ffffff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  transition: opacity 0.45s var(--ease-premium, ease),
    transform 0.45s var(--ease-premium, ease);
}

/* Estado oculto das jogadas (usado pelo JS antes da sequência) */
.match-plays .match-play.is-hidden {
  opacity: 0;
  transform: translateY(10px);
}

/* Jogadas fora do filtro ativo: removidas de fato do layout. O atributo
   hidden sobrepõe qualquer display da classe, sem conflitar com .is-hidden. */
.match-plays .match-play[hidden] {
  display: none;
}

.match-play-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--c-primary-strong);
  background: var(--c-primary-tint);
  border-radius: 999px;
}

.match-play-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--c-text);
}

.match-marks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  flex-basis: 100%;
}

/* Marcas (escopadas): com borda por tipo, sem afetar o restante da página */
.match-marks .mark {
  min-width: 2.25rem;
  padding: 0.28rem 0.6rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
}

.match-marks .mark--no {
  color: var(--c-muted);
  background: var(--c-surface);
  border-color: var(--c-border);
}

.match-marks .mark--partial {
  color: var(--c-dark);
  background: rgba(255, 200, 0, 0.32);
  border-color: rgba(180, 83, 9, 0.25);
}

.match-marks .mark--yes {
  color: var(--c-primary-strong);
  background: var(--c-primary-tint);
  border-color: rgba(0, 155, 58, 0.35);
}

/* Resultado: banner de destaque, oculto até o JS revelar */
.match-result {
  margin-top: 1.75rem;
  padding: 1.5rem;
  text-align: center;
  background: var(--c-primary-tint);
  border: 1px solid rgba(0, 155, 58, 0.35);
  border-radius: var(--radius);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.match-result[hidden] {
  display: none;
}

/* Surgimento do resultado (ao remover o hidden) */
.match-result:not([hidden]) {
  animation: match-result-in 0.5s var(--ease) both;
}

@keyframes match-result-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.match-result-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 0.4rem;
}

.match-result-sub {
  font-size: var(--fs-body);
  color: var(--c-muted);
}

.match-result .btn {
  margin-top: 1.25rem;
}

/* Mobile (≤ 640px): placar compacto, marcadores em linha própria */
@media (max-width: 39.99rem) {
  .match-score {
    gap: 0.75rem;
    padding: 1rem 1.1rem;
  }

  .match-score-val {
    font-size: 2rem;
  }

  .match-score-x {
    font-size: 1rem;
  }
}

/* Desktop (≥ 768px): chips centrados, jogadas em linha única */
@media (min-width: 48rem) {
  .match-chips {
    justify-content: center;
    flex-wrap: wrap;
    overflow-x: visible;
    padding-bottom: 0;
  }

  .match-plays .match-play {
    flex-wrap: nowrap;
  }

  .match-marks {
    flex-basis: auto;
    flex-wrap: nowrap;
    justify-content: flex-end;
    margin-left: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .match-chip {
    transition: none;
  }

  .match-plays .match-play,
  .match-result {
    transition: none;
    animation: none;
  }
}