/* Landing Wellbi — base: tokens, fontes self-hosted, reset e primitivas compartilhadas.
   Único arquivo com hex cru (espelho dos valores do Figma 34:8531; a landing é standalone do DS do app). */

/* ── Fontes (10 faces, @fontsource copiado p/ /fonts/landing — ver landing.spec.ts) ── */
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/landing/plus-jakarta-sans-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/landing/plus-jakarta-sans-latin-400-italic.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/landing/plus-jakarta-sans-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/landing/plus-jakarta-sans-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/landing/inter-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/landing/inter-latin-400-italic.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/landing/inter-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/landing/inter-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/landing/inter-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Geist Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/landing/geist-sans-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ── Tokens (valores do Figma) ── */
:root {
  --lp-white: #FFFFFF;
  --lp-bg-alt: #F8FAFA;
  --lp-ink: #0E1D29;
  --lp-primary: #206AA4;
  --lp-primary-hover: #1B5A8A; /* hover não especificado no Figma; escurecido na linha do DS */
  --lp-text-2: #7E8388; /* 3.8:1 — mantido por decisão de fidelidade (docs/features/landing-page.md) */
  --lp-btn-ink: #FAFAFA;
  --lp-faq-ink: #0A0A0A;
  --lp-border: #D4D4D4;
  --lp-border-2: #E5E5E5;
  --lp-card-border: #D2E1ED;
  --lp-chip: #E9F1F6;
  --lp-stat-divider: #C8DEDD;
  --lp-surface: #F5F5F5;
  --lp-shadow-card: 0 2px 12px rgba(32, 106, 164, 0.08);
  --lp-shadow-card-strong: 0 2px 12px rgba(32, 106, 164, 0.1);
  --lp-shadow-nav: 0 1px 24px rgba(32, 106, 164, 0.16);
  --lp-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --lp-font-title: 'Plus Jakarta Sans', system-ui, sans-serif;
  --lp-font-body: 'Inter', system-ui, sans-serif;
  --lp-font-ui: 'Geist Sans', system-ui, sans-serif;
  --lp-container: 1200px;
  --lp-nav-h: 68px;
}

/* ── Reset / documento ── */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-padding-top: calc(var(--lp-nav-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--lp-white); color: var(--lp-ink); font: 400 16px/1.5 var(--lp-font-body); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
h1, h2, h3, p, dl, dd, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
: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; }
/* monitores largos: alarga o container pra não sobrar margem demais (o Figma é 1440; 1200 lá = ~83% da tela) */
@media (min-width: 1600px) { :root { --lp-container: 1400px; } }

/* ── Seções ── */
.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); }

/* ── Botões (Geist 500, radius 8 — variantes do Figma) ── */
.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; 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); }
.lp-btn--outline { background: var(--lp-white); color: var(--lp-primary); border: 1px solid var(--lp-border); box-shadow: var(--lp-shadow-xs); }
.lp-btn--outline:hover { background: var(--lp-chip); }
.lp-btn--ghost { background: transparent; color: var(--lp-primary); }
.lp-btn--ghost:hover { background: var(--lp-chip); }
.lp-btn--secondary { background: var(--lp-chip); color: var(--lp-primary); }
.lp-btn--secondary:hover { background: var(--lp-white); }

/* ── 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; }
.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 mobile + dots (marcado com [data-carousel]; layout desktop vem do CSS da seção) ── */
.lp-dots { display: none; justify-content: center; align-items: center; gap: 8px; margin-top: 24px; }
.lp-dot { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 9999px; background: var(--lp-border); cursor: pointer; }
.lp-dot[aria-current='true'] { background: var(--lp-primary); }
.lp-dot:disabled { cursor: default; }

@media (max-width: 767.98px) {
  [data-carousel] { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 8px; padding-bottom: 4px; scrollbar-width: none; }
  [data-carousel]::-webkit-scrollbar { display: none; }
  /* Largura FLUIDA com teto, nunca fixa. Com 332px cravado, todo device com menos de 364px de viewport
     (360px e comum) tinha o card mais largo que a faixa util (100vw - 32px de padding do .lp-container):
     com o snap centralizado ele sobra dos DOIS lados e o texto nasce cortado, sem como rolar ate a borda.
     O -24px preserva a espiada no proximo card, que e o que sinaliza que o carrossel rola. */
  [data-carousel] > .lp-card { flex: 0 0 min(332px, 100% - 24px); scroll-snap-align: center; }
  .lp-dots { display: flex; gap: 4px; }
  .lp-dot { width: 8px; height: 8px; }
}