/* ==========================================================================
   HAND CARE — Assessoria em Saúde
   base.css

   Reset, tipografia base, sistema de temas e esqueleto das seções.
   Nenhum HEX aqui: tudo vem de variables.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. RESET ENXUTO
   -------------------------------------------------------------------------- */

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Não há mais cabeçalho fixo cobrindo o topo: o slide encosta na borda */
    scroll-padding-top: 0;
}

/* --------------------------------------------------------------------------
   1.1 PASSAGEM ENTRE SLIDES

   O deck rola normalmente — a rolagem continua sendo do usuário. O que o
   snap acrescenta é o ASSENTAMENTO: solto o dedo perto de uma virada, a
   tela encaixa no slide.

   "proximity", nunca "mandatory": com mandatory, um slide mais alto que a
   viewport prende o leitor e o meio do conteúdo fica inalcançável. Com
   proximity o encaixe só acontece quando a rolagem já parou perto dele.

   Ligado apenas onde faz bem:
     · largura ≥ 1024px  — no celular o snap briga com a rolagem por
       inércia e com a barra do navegador que aparece e some;
     · ponteiro fino     — quem usa toque espera rolagem livre;
     · sem preferência por menos movimento.
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
    @media (prefers-reduced-motion: no-preference) {

        html {
            scroll-snap-type: y proximity;
        }

        .hc-secao {
            scroll-snap-align: start;
            /* "normal" e não "always": o leitor pode atravessar dois
               slides num gesto só, se quiser. */
            scroll-snap-stop: normal;
        }
    }
}

body,
h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul {
    margin: 0;
    padding: 0;
}

ol, ul {
    list-style: none;
}

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

img {
    height: auto;
}

button, input, textarea, select {
    font: inherit;
    color: inherit;
}

button {
    background: none;
    border: 0;
    cursor: pointer;
}

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

/* --------------------------------------------------------------------------
   2. DOCUMENTO
   -------------------------------------------------------------------------- */

.hc-body {
    margin: 0;
    background-color: var(--creme);
    color: var(--texto-escuro);
    font-family: var(--fonte-sans);
    font-size: var(--fs-corpo);
    font-weight: var(--peso-normal);
    line-height: var(--lh-corpo);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-optical-sizing: auto;
    /* "clip" impede o estouro lateral sem criar um contexto de rolagem,
       o que preservaria position: sticky. "hidden" fica de reserva. */
    overflow-x: hidden;
    overflow-x: clip;
}

/* Salta direto ao conteúdo — visível apenas com foco de teclado */
.hc-pular {
    position: absolute;
    left: var(--esp-sm);
    top: var(--esp-sm);
    z-index: var(--z-topo);
    padding: var(--esp-xs) var(--esp-md);
    border-radius: var(--raio-pill);
    background-color: var(--verde-profundo);
    color: var(--texto-claro);
    font-size: var(--fs-corpo-sm);
    font-weight: var(--peso-semi);
    transform: translateY(-200%);
    transition: transform var(--trans-rapida) var(--ease-suave);
}

.hc-pular:focus-visible {
    transform: translateY(0);
}

/* --------------------------------------------------------------------------
   3. SISTEMA DE TEMAS
   Cada seção declara tokens locais --t-*. Todo componente lê os --t-*,
   nunca uma cor fixa. Assim o mesmo card funciona no creme e no verde.
   -------------------------------------------------------------------------- */

.hc-secao {
    position: relative;
    isolation: isolate;
    /* Cada seção recorta a própria camada decorativa: dispensa gambiarra
       de overflow no elemento raiz e elimina o estouro horizontal.
       "clip" e não "hidden": hidden transformaria a seção em contêiner de
       rolagem e quebraria qualquer position: sticky lá dentro. */
    overflow: hidden;
    overflow: clip;
    background-color: var(--t-fundo);
    color: var(--t-texto);
}

/* --- Tema claro (creme principal) -------------------------------------- */
.hc-secao--claro {
    --t-fundo:        var(--creme);
    --t-texto:        var(--texto-escuro);
    --t-apoio:        var(--texto-escuro-apoio);
    --t-suave:        var(--texto-escuro-suave);
    --t-borda:        var(--borda-clara);
    --t-borda-forte:  var(--borda-clara-forte);
    --t-fio:          var(--dourado-fio-claro);
    /* Dourado LEGÍVEL no claro. O #C9A86A rende 2,19:1 sobre creme:
       jamais pode carregar texto aqui. Ver SKILL.md, seção 12.2. */
    --t-dourado:      var(--dourado-profundo);
    --t-dourado-orn:  var(--dourado-escuro);
    --t-destaque:     var(--terracota-profundo);
    --t-sup:          var(--creme-sombra);
    --t-sup-suave:    var(--sup-clara-suave);
    --t-sup-solida:   var(--sup-clara);
}

/* --- Tema claro alternativo (segundo creme) ---------------------------- */
.hc-secao--claro-alt {
    --t-fundo:        var(--creme-alt);
    --t-texto:        var(--texto-escuro);
    --t-apoio:        var(--texto-escuro-apoio);
    --t-suave:        var(--texto-escuro-suave);
    --t-borda:        var(--borda-clara);
    --t-borda-forte:  var(--borda-clara-forte);
    --t-fio:          var(--dourado-fio-claro);
    --t-dourado:      var(--dourado-profundo);
    --t-dourado-orn:  var(--dourado-escuro);
    --t-destaque:     var(--terracota-profundo);
    --t-sup:          var(--creme);
    --t-sup-suave:    var(--sup-clara-suave);
    --t-sup-solida:   var(--sup-clara);
}

/* --- Tema escuro (verde institucional) --------------------------------- */
.hc-secao--escuro {
    --t-fundo:        var(--verde-profundo);
    --t-texto:        var(--texto-claro);
    --t-apoio:        var(--texto-claro-apoio);
    --t-suave:        var(--texto-claro-suave);
    --t-borda:        var(--borda-escura);
    --t-borda-forte:  var(--borda-escura-forte);
    --t-fio:          var(--dourado-fio);
    --t-dourado:      var(--dourado);
    --t-dourado-orn:  var(--dourado);
    --t-destaque:     var(--terracota-claro);
    --t-sup:          var(--sup-escura);
    --t-sup-suave:    var(--sup-escura);
    --t-sup-solida:   var(--verde-medio);
}

/* --- Tema escuro alternativo (verde fechado) --------------------------- */
.hc-secao--escuro-alt {
    --t-fundo:        var(--verde-fechado);
    --t-texto:        var(--texto-claro);
    --t-apoio:        var(--texto-claro-apoio);
    --t-suave:        var(--texto-claro-suave);
    --t-borda:        var(--borda-escura);
    --t-borda-forte:  var(--borda-escura-forte);
    --t-fio:          var(--dourado-fio);
    --t-dourado:      var(--dourado);
    --t-dourado-orn:  var(--dourado);
    --t-destaque:     var(--terracota-claro);
    --t-sup:          var(--sup-escura);
    --t-sup-suave:    var(--sup-escura);
    --t-sup-solida:   var(--verde-profundo);
}

/* --- Tema fotografia (imagem sangrada sob véu verde) ------------------- */
.hc-secao--foto {
    --t-fundo:        var(--verde-noite);
    --t-texto:        var(--texto-claro);
    --t-apoio:        var(--texto-claro-apoio);
    --t-suave:        var(--texto-claro-suave);
    --t-borda:        var(--borda-escura);
    --t-borda-forte:  var(--borda-escura-forte);
    --t-fio:          var(--dourado-fio);
    --t-dourado:      var(--dourado);
    --t-dourado-orn:  var(--dourado);
    --t-destaque:     var(--terracota-claro);
    --t-sup:          var(--sup-escura);
    --t-sup-suave:    var(--sup-escura);
    --t-sup-solida:   var(--verde-medio);
}

/* --------------------------------------------------------------------------
   4. ESQUELETO DA SEÇÃO
   -------------------------------------------------------------------------- */

/* Ocupa ao menos a altura da tela. Se o conteúdo passar disso a seção
   cresce — nunca corta. No celular, svh evita o salto das barras do
   navegador que o vh clássico ignora. */
.hc-secao--tela {
    display: flex;
    align-items: center;
    min-height: 100vh;
    min-height: 100svh;
}

.hc-secao__interna {
    position: relative;
    z-index: var(--z-conteudo);
    width: 100%;
    max-width: calc(var(--largura-max) + var(--esp-secao-x) * 2);
    margin-inline: auto;
    padding: var(--esp-secao-y) var(--esp-secao-x);
}

.hc-secao__interna--larga {
    max-width: calc(var(--largura-larga) + var(--esp-secao-x) * 2);
}

/* Camada decorativa: curvas, folhagem, halos. Nunca recebe texto. */
.hc-secao__decor {
    position: absolute;
    inset: 0;
    z-index: var(--z-decor);
    pointer-events: none;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   5. TIPOGRAFIA BASE
   -------------------------------------------------------------------------- */

.hc-display,
.hc-h1,
.hc-h2,
.hc-h3 {
    font-family: var(--fonte-serif);
    font-weight: var(--peso-medio);
    color: var(--t-texto);
    text-wrap: balance;
}

.hc-display {
    font-size: var(--fs-display);
    line-height: var(--lh-display);
    letter-spacing: var(--ls-display);
    max-width: var(--largura-titulo);
}

.hc-h1 {
    font-size: var(--fs-h1);
    line-height: var(--lh-titulo);
    letter-spacing: var(--ls-titulo);
    max-width: var(--largura-titulo);
}

.hc-h2 {
    font-size: var(--fs-h2);
    line-height: var(--lh-titulo);
    letter-spacing: var(--ls-titulo);
    max-width: 24ch;
}

.hc-h3 {
    font-size: var(--fs-h3);
    line-height: 1.34;
    font-weight: var(--peso-semi);
    letter-spacing: 0;
}

/* Trecho enfatizado dentro de um título: itálico serifado, como a
   assinatura do cartão. Nunca em caixa alta, nunca em bloco inteiro. */
.hc-enfase {
    font-style: italic;
    font-weight: var(--peso-normal);
    color: var(--t-dourado);
}

.hc-lead {
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
    font-weight: var(--peso-leve);
    color: var(--t-apoio);
    max-width: 46ch;
}

.hc-texto {
    font-size: var(--fs-corpo);
    line-height: var(--lh-corpo);
    color: var(--t-apoio);
    max-width: var(--largura-texto);
}

.hc-texto--sm {
    font-size: var(--fs-corpo-sm);
}

.hc-texto--suave {
    color: var(--t-suave);
}

.hc-texto + .hc-texto {
    margin-top: var(--esp-md);
}

/* Rótulo superior de seção — sempre em caixa alta e bem espaçado */
.hc-rotulo {
    display: inline-flex;
    align-items: center;
    gap: var(--esp-2xs);
    font-family: var(--fonte-sans);
    font-size: var(--fs-rotulo);
    font-weight: var(--peso-semi);
    line-height: 1.2;
    letter-spacing: var(--ls-rotulo);
    text-transform: uppercase;
    color: var(--t-dourado);
}

/* Destaque manuscrito. Uso ESTRITO: no máximo 3 na apresentação inteira,
   sempre com poucas palavras. Nunca em texto corrido. */
.hc-script {
    font-family: var(--fonte-script);
    font-size: var(--fs-script);
    font-weight: var(--peso-semi);
    line-height: 1.25;
    letter-spacing: 0;
    color: var(--t-texto);
}

strong, .hc-forte {
    font-weight: var(--peso-semi);
    color: var(--t-texto);
}

/* --------------------------------------------------------------------------
   6. FOCO VISÍVEL
   -------------------------------------------------------------------------- */

:focus-visible {
    outline: 2px solid var(--t-dourado, var(--dourado));
    outline-offset: 3px;
    border-radius: var(--raio-xs);
}

/* --------------------------------------------------------------------------
   7. ENTRADA DE ELEMENTOS
   O conteúdo aparece ao entrar na viewport. Regra inegociável: se o
   JavaScript não rodar, ou se o usuário pedir menos movimento, TUDO
   permanece visível. A animação é enfeite, nunca requisito de leitura.
   -------------------------------------------------------------------------- */

.js .hc-anim {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity   var(--trans-lenta) var(--ease-suave),
        transform var(--trans-lenta) var(--ease-suave);
    transition-delay: var(--atraso, 0ms);
    will-change: opacity, transform;
}

.js .hc-anim.is-visivel {
    opacity: 1;
    transform: none;
    will-change: auto;
}

/* Variações de direção, para composições assimétricas */
.js .hc-anim--esq  { transform: translateX(-24px); }
.js .hc-anim--dir  { transform: translateX(24px); }
.js .hc-anim--suave { transform: translateY(10px); }

.js .hc-anim--esq.is-visivel,
.js .hc-anim--dir.is-visivel,
.js .hc-anim--suave.is-visivel {
    transform: none;
}

/* Sequência: os filhos entram em cascata, no máximo 8 passos */
.js .hc-stagger > * { --atraso: 0ms; }
.js .hc-stagger > *:nth-child(1) { --atraso: calc(var(--stagger) * 0); }
.js .hc-stagger > *:nth-child(2) { --atraso: calc(var(--stagger) * 1); }
.js .hc-stagger > *:nth-child(3) { --atraso: calc(var(--stagger) * 2); }
.js .hc-stagger > *:nth-child(4) { --atraso: calc(var(--stagger) * 3); }
.js .hc-stagger > *:nth-child(5) { --atraso: calc(var(--stagger) * 4); }
.js .hc-stagger > *:nth-child(6) { --atraso: calc(var(--stagger) * 5); }
.js .hc-stagger > *:nth-child(7) { --atraso: calc(var(--stagger) * 6); }
.js .hc-stagger > *:nth-child(8) { --atraso: calc(var(--stagger) * 7); }

/* Traço dourado que se desenha. Todo path usa pathLength="1", o que
   dispensa medir com JavaScript. */
.js .hc-tracado {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 1400ms var(--ease-organica);
    transition-delay: var(--atraso, 180ms);
}

.js .hc-tracado.is-visivel,
.js .is-visivel .hc-tracado {
    stroke-dashoffset: 0;
}

/* --------------------------------------------------------------------------
   8. MOVIMENTO REDUZIDO — obrigatório
   -------------------------------------------------------------------------- */

@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;
        scroll-behavior: auto !important;
    }

    /* Nada pode depender da animação para existir */
    .js .hc-anim,
    .js .hc-anim--esq,
    .js .hc-anim--dir,
    .js .hc-anim--suave {
        opacity: 1;
        transform: none;
    }

    .js .hc-tracado {
        stroke-dashoffset: 0;
    }
}

/* --------------------------------------------------------------------------
   9. UTILITÁRIOS
   -------------------------------------------------------------------------- */

.hc-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.hc-centro    { text-align: center; }
.hc-centro .hc-display,
.hc-centro .hc-h1,
.hc-centro .hc-h2,
.hc-centro .hc-lead,
.hc-centro .hc-texto { margin-inline: auto; }

.hc-empilha        { display: flex; flex-direction: column; }
.hc-empilha--xs    { gap: var(--esp-xs); }
.hc-empilha--sm    { gap: var(--esp-sm); }
.hc-empilha--md    { gap: var(--esp-md); }
.hc-empilha--lg    { gap: var(--esp-lg); }
.hc-empilha--xl    { gap: var(--esp-xl); }