/* ==========================================================================
   style.css — estilos globais (tokens, tipografia, layout, utilitários)
   Estilos específicos de cada seção ficam em css/sections/*.css
   ========================================================================== */

/* Fonte "Vivo Type" (arquivos em /fonts/) */
@font-face { font-family: "Vivo Type"; font-weight: 300; font-style: normal; font-display: swap; src: url("../fonts/VivoTypeW05-Light.woff2") format("woff2"), url("../fonts/VivoTypeW05-Light.woff") format("woff"); }
@font-face { font-family: "Vivo Type"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/VivoTypeW05-Regular.woff2") format("woff2"), url("../fonts/VivoTypeW05-Regular.woff") format("woff"); }
@font-face { font-family: "Vivo Type"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/VivoTypeW05-Bold.woff2") format("woff2"), url("../fonts/VivoTypeW05-Bold.woff") format("woff"); }

:root {
  /* Cores (variáveis do Figma) */
  --color-primary: #660099;        /* Roxo Principal */
  --color-secondary: #380054;      /* Roxo Secundário */
  --color-purple-01: #EECCFF;      /* Roxo Variação 01 */
  --color-purple-02: #BB33FF;      /* Roxo Variação 02 */
  --color-blue: #03267F;           /* Azul */
  --color-black: #24282A;          /* Preto */
  --color-gray: #3A3A45;           /* Cinza */
  --color-gray-200: #CCCCCC;
  --color-gray-300: #7A7A7A;
  --color-off: #F7F7F7;            /* Off */
  --color-white: #FFFFFF;          /* Branco */

  /* Tipografia */
  --font-family: "Vivo Type", "Helvetica Neue", Arial, sans-serif;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-bold: 700;

  --fs-h1: 58px;  --lh-h1: 1;
  --fs-h2: 48px;  --lh-h2: 1.2;
  --fs-h5: 28px;  --lh-h5: 1.3;
  --fs-h6: 24px;  --lh-h6: 1.3;
  --fs-body-lg: 20px;
  --fs-body: 18px;
  --lh-body: 1.4;

  /* Layout */
  --container: 1209px;
  --gutter: 24px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Espaçamentos (escala) */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;

  --transition: 0.25s ease;

  /* Menu fixo */
  --nav-h: 91px;
}

body {
  font-family: var(--font-family);
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  line-height: var(--lh-body);
  color: var(--color-black);
  background: var(--color-white);
}

/* Layout */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  overflow: hidden;
}

/* Tipografia (classes utilitárias espelhando os estilos do Figma) */
.h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--fw-bold); }
.h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-bold); }
.h5 { font-size: var(--fs-h5); line-height: var(--lh-h5); font-weight: var(--fw-bold); }
.h6 { font-size: var(--fs-h6); line-height: var(--lh-h6); font-weight: var(--fw-bold); }
.body-lg        { font-size: var(--fs-body-lg); line-height: var(--lh-body); font-weight: var(--fw-light); }
.body-lg--md    { font-weight: var(--fw-regular); }
.body-lg--bold  { font-weight: var(--fw-bold); }
.body           { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-light); }
.body--md       { font-weight: var(--fw-regular); }
.body--bold     { font-weight: var(--fw-bold); }

/* Botões */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: 14px 32px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition), transform var(--transition);
}
.btn--primary { background: var(--color-primary); color: var(--color-white); }
.btn--primary:hover { background: var(--color-secondary); }
.btn--light { background: var(--color-white); color: var(--color-primary); }
.btn--light:hover { background: var(--color-purple-01); }
.btn--outline { border: 2px solid currentColor; }

/* Utilitários */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Ancoras (#id) nao ficam escondidas atras do menu fixo */
html { scroll-padding-top: var(--nav-h); }

/* ==========================================================================
   Carrossel de cards no mobile (scroll-snap nativo)
   Uso: <ul data-snap="Rotulo"> filhos diretos = slides </ul>
   - So no mobile (<= 640px) o container vira um carrossel horizontal com bolinhas (geradas por js/main.js).
   - Largura de cada card: --snap-w (padrao 84%). Cor das bolinhas: --snap-dots-color.
   - Fora do mobile nada muda: o layout original da secao continua valendo.
   ========================================================================== */
.snap-dots { display: none; }
@media (max-width: 640px) {
  [data-snap][data-snap] {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--snap-gap, 16px);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
  }
  [data-snap][data-snap]::-webkit-scrollbar { display: none; }
  [data-snap][data-snap] > * {
    flex: 0 0 var(--snap-w, 84%);
    min-width: 0;
    scroll-snap-align: center;
  }
  [data-snap]:focus-visible { outline: 2px solid var(--color-purple-02); outline-offset: -2px; }

  .snap-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: var(--space-2);
    color: var(--snap-dots-color, var(--color-primary));
  }
  .snap-dot { position: relative; width: 22px; height: 28px; padding: 0; color: inherit; cursor: pointer; }
  .snap-dot::before {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 8px; height: 8px; margin: -4px 0 0 -4px;
    border: 1.5px solid currentColor; border-radius: var(--radius-pill); box-sizing: border-box; opacity: 0.6;
    transition: width 0.3s ease, margin 0.3s ease, background-color 0.3s ease, opacity 0.3s ease;
  }
  .snap-dot[aria-current="true"]::before { width: 20px; margin-left: -10px; background: currentColor; opacity: 1; }
  .snap-dot:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
}

/* Responsivo (base) */
@media (max-width: 1024px) {
  :root { --fs-h1: 44px; --fs-h2: 36px; --fs-h5: 24px; --fs-h6: 20px; }
}
@media (max-width: 640px) {
  :root { --fs-h1: 36px; --fs-h2: 30px; --fs-body-lg: 18px; --gutter: 16px; }
}