/* Tema Wellbi — base: tokens, documento, secoes, botoes e cards.
   Portado de frontend/public/landing/css/landing-base.css. As fontes saem do theme.json (fontFace), e os
   tokens --lp-* apontam para os presets dele: cor e fonte tem UMA fonte so, a mesma que o editor usa. */

:root {
  --lp-white: var(--wp--preset--color--white);
  --lp-bg-alt: var(--wp--preset--color--bg-alt);
  --lp-ink: var(--wp--preset--color--ink);
  --lp-primary: var(--wp--preset--color--primary);
  --lp-primary-hover: var(--wp--preset--color--primary-hover);
  --lp-text-2: var(--wp--preset--color--text-2); /* 3.8:1 — so na copy de marketing, como na landing */
  --lp-btn-ink: #FAFAFA;
  --lp-faq-ink: #0A0A0A;
  --lp-border: var(--wp--preset--color--border);
  --lp-border-2: #E5E5E5;
  --lp-card-border: var(--wp--preset--color--card-border);
  --lp-chip: var(--wp--preset--color--chip);
  --lp-stat-divider: #C8DEDD;
  --lp-surface: var(--wp--preset--color--surface);
  --lp-green: #8CB650; /* verde do logo — so decorativo (2.3:1 em texto) */
  --lp-shadow-card: var(--wp--custom--shadow-card);
  --lp-shadow-card-strong: 0 2px 12px rgba(32, 106, 164, 0.1);
  --lp-shadow-nav: var(--wp--custom--shadow-nav);
  --lp-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --lp-font-title: var(--wp--preset--font-family--title);
  --lp-font-body: var(--wp--preset--font-family--body);
  --lp-font-ui: var(--wp--preset--font-family--ui);
  --lp-container: 1200px;
  --lp-nav-h: var(--wp--custom--nav-height);
}
@media (min-width: 1600px) { :root { --lp-container: 1400px; } }

/* ── Documento ── */
html { scroll-padding-top: calc(var(--lp-nav-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--lp-primary); outline-offset: 2px; }

.lp-skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--lp-primary); color: var(--lp-btn-ink); padding: 8px 16px; border-radius: 8px; }
.lp-skip:focus-visible { left: 8px; }

.lp-container { max-width: var(--lp-container); margin-inline: auto; padding-inline: 16px; box-sizing: border-box; width: 100%; }

/* ── Secoes ── */
.lp-section { padding-block: clamp(72px, 8.33vw, 120px); background: var(--lp-white); }
.lp-section--alt { background: var(--lp-bg-alt); }
.lp-section__head { display: flex; flex-direction: column; gap: 12px; margin-bottom: clamp(24px, 2.8vw, 40px); }
.lp-section__head--center { align-items: center; text-align: center; }
.lp-section__sub { font: 400 clamp(14px, 1.25vw, 18px)/1.56 var(--lp-font-body); color: var(--lp-text-2); max-width: 560px; }
.lp-eyebrow { font: 600 13px/1.6 var(--lp-font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--lp-primary); }
.lp-h2 { font: 700 clamp(24px, 2.78vw, 40px)/1.2 var(--lp-font-title); color: var(--lp-ink); }

/* ── Botoes em bloco HTML (o bloco Botao do WordPress tem o estilo dele em wordpress.css) ── */
.lp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 8px; font: 500 16px/1.5 var(--lp-font-ui); cursor: pointer; text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease; }
.lp-btn--lg { padding: 12px 32px; }
.lp-btn--sm { padding: 8px 16px; font-size: 14px; line-height: 1.43; }
.lp-btn--primary { background: var(--lp-primary); color: var(--lp-btn-ink); }
.lp-btn--primary:hover { background: var(--lp-primary-hover); color: var(--lp-btn-ink); }

/* ── Cards ── */
.lp-card { background: var(--lp-white); border: 1px solid var(--lp-card-border); border-radius: 12px; box-shadow: var(--lp-shadow-card); padding: 24px; box-sizing: border-box; }
.lp-card__icon { display: block; }
.lp-card__title { font: 700 18px/1.33 var(--lp-font-title); color: var(--lp-ink); margin-top: 12px; }
.lp-card__body { font: 400 16px/1.45 var(--lp-font-body); color: var(--lp-text-2); margin-top: 8px; }

/* ── Carrossel no celular (scroll-snap puro: sem JS, o arrastar e nativo do navegador) ── */
@media (max-width: 767.98px) {
  [data-carousel], .lp-carousel { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 8px; padding-bottom: 4px; scrollbar-width: none; }
  .lp-carousel::-webkit-scrollbar { display: none; }
  .lp-carousel > .lp-card { flex: 0 0 min(332px, 100% - 24px); scroll-snap-align: center; } /* teto fluido: a 332px fixos o card cortava em telas < 364px */
}