/* ==========================================================================
   VCuida — base: reset, tokens e primitivas de layout
   Valores extraídos do CSS gerado pelo Elementor (fonte da verdade).
   ========================================================================== */

:root {
  /* ---- Tipografia ---- */
  --ff-display: "Kanit", system-ui, sans-serif;   /* títulos               */
  --ff-body:    "Montserrat", system-ui, sans-serif; /* textos e botões    */

  /* ---- Cores de marca ---- */
  --c-white:        #FFFFFF;
  --c-ink:          #1A1030;  /* azul-marinho dos títulos                  */
  --c-ink-soft:     #5C5170;  /* corpo de texto dentro dos cards           */
  --c-gray-600:     #54595F;  /* corpo, preço e textos secundários          */
  --c-gray-500:     #9A9A9A;
  --c-line:         #E2E2E2;
  --c-surface:      #EEEEEE;  /* fundo da seção de planos                  */
  --c-cyan:         #50C7DA;
  --c-footer-navy:  #03262D;

  /* ---- Gradientes ---- */
  --g-brand:       linear-gradient(115deg, #EA5B0C 0%, #7B2C9E 100%);
  --g-brand-hover: linear-gradient(115deg, #CE510C 0%, #611C80 100%);

  /* ---- v2: cores introduzidas pelos ajustes do cliente ---- */
  --c-teal:          #70C1AC;  /* card VCUIDA MENTAL e checks das features   */
  --c-plan-essencial:#CC0099;  /* card VCUIDA ESSENCIAL                      */
  --c-plan-total:    #00B0F0;  /* card VCUIDA TOTAL                          */
  --c-purple:        #7030A0;  /* botão CONTRATE AGORA                       */
  --c-purple-dark:   #5B2483;  /* hover do CONTRATE AGORA                    */
  --c-card-line:     #EFE9F2;  /* borda fina da grade de cards               */

  /* Gradiente do botão "Acesso Portal RH" */
  --g-portal:        linear-gradient(90deg, #8B1680 0%, #003886 100%);
  --g-portal-hover:  linear-gradient(90deg, #6E1166 0%, #002A66 100%);

  /* Altura do header fixo. Serve de scroll-margin-top das âncoras: sem isso
     o header tapa o topo da seção para onde o menu leva. Os valores são a
     altura medida em cada faixa (logo + padding vertical). */
  --h-header: 83px;

  /* ---- Layout ---- */
  --container: 1240px;
  --gutter: 10px;
}

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

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

/* clip, e NÃO hidden.
   `overflow-x: hidden` transforma o elemento num contêiner de rolagem, e isso
   quebra `position: sticky` em qualquer descendente — o header era declarado
   sticky e simplesmente descia junto com a página.
   `clip` corta igual, sem criar contêiner de rolagem, então o sticky funciona.
   Isto aqui é só uma rede: a origem do estouro (os pontinhos decorativos da
   seção de planos) já é cortada na própria .plans-head. */
html, body { overflow-x: clip; }

body {
  margin: 0;
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-gray-600);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; }

img, svg { display: block; max-width: 100%; }
img { height: auto; border: 0; }

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

button { font: inherit; }

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

/* ---- Container --------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  position: relative;
}

@media (max-width: 1024px) { :root { --container: 1024px; --h-header: 79px; } }
@media (max-width: 767px)  { :root { --container: 767px;  --h-header: 61px; } }

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

/* ==========================================================================
   Animações de entrada
   Um elemento com [data-anim] nasce deslocado e transparente, e sobe ao entrar
   na tela. A regra que esconde depende de .js-anim no <html>, colocada por um
   script no <head>: sem JavaScript nada some, a página aparece inteira.
   Só opacity e transform, que o navegador compõe na GPU sem recalcular layout.
   ========================================================================== */

.js-anim [data-anim] {
  opacity: 0;
  transform: translateY(22px);
}

/* Aplicada por um instante quando o destino de uma âncora precisa aparecer já
   pronto: revela sem transição, em vez de o bloco montar na frente de quem
   acabou de chegar nele. */
.js-anim [data-anim].sem-transicao {
  transition: none;
}

[data-anim] {
  transition:
    opacity   .65s cubic-bezier(.22, .61, .36, 1),
    transform .65s cubic-bezier(.22, .61, .36, 1);
}

[data-anim].is-visivel {
  opacity: 1;
  transform: none;
}

/* Escalonamento: o segundo elemento de cada dobra entra um pouco depois do
   primeiro, o que dá a leitura de cima para baixo. */
.hero__subtitle[data-anim]        { transition-delay: .10s; }
.hero__mockup[data-anim]          { transition-delay: .18s; }
.about__copy[data-anim]           { transition-delay: .12s; }
.plans-head__subtitle[data-anim]  { transition-delay: .10s; }
.plano--essencial[data-anim]      { transition-delay: .12s; }
.plano--total[data-anim]          { transition-delay: .24s; }
.cta__button[data-anim]           { transition-delay: .10s; }
.footer__legal[data-anim]         { transition-delay: .12s; }

/* O mockup é grande: um deslocamento menor evita a sensação de peso caindo.
   O :not(.is-visivel) é obrigatório — sem ele esta regra tem mais especificidade
   que o [data-anim].is-visivel e o mockup ficaria travado 14px abaixo para sempre. */
.js-anim .hero__mockup[data-anim]:not(.is-visivel) {
  transform: translateY(14px);
}

/* Rolagem suave para os links de âncora do menu. Fica junto das animações de
   propósito: com o salto instantâneo, quem clica em "Planos" aterrissa em cima
   de um título que ainda vai desbotar para dentro. Com a rolagem suave o
   conteúdo se revela durante o percurso e a chegada já está pronta.
   Só dentro do no-preference: rolagem automática é um dos gatilhos clássicos
   de enjoo em quem tem distúrbio vestibular. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Quem pediu menos movimento no sistema não recebe nenhum. Não é enfeite:
   movimento de entrada dispara enjoo em quem tem distúrbio vestibular. */
@media (prefers-reduced-motion: reduce) {
  /* Sem transition:none aqui. Neste modo opacity e transform já nascem no
     estado final, então não há entrada para cortar — e o transition:none
     atingia também as transições de interação do componente (o lift do card
     teleportava 30px sob o cursor em vez de simplesmente não existir). */
  .js-anim [data-anim],
  .js-anim .hero__mockup[data-anim]:not(.is-visivel) {
    opacity: 1;
    transform: none;
  }
}