/* =========================================================
   ESMALTE — base: reset, tipografia, seções, botões e links
   As cores e medidas vêm de tokens.css (não mude lá).
   ========================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 96px; /* âncoras não ficam escondidas atrás do cabeçalho */
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  background: var(--porcelana);
  color: var(--grafite);
  font-family: var(--fonte-texto);
  font-size: var(--t-texto);
  line-height: var(--lh-texto);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }
::selection { background: var(--menta); color: var(--tinta); }
input, textarea { caret-color: var(--ameixa); }
img, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }

/* ---------- Tipografia ---------- */
h1, h2, h3 {
  font-family: var(--fonte-display);
  font-weight: 500;
  color: var(--tinta);
  line-height: var(--lh-h);
  font-variation-settings: "SOFT" 100, "WONK" 0;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-weight: 600; }

p, li, dd { max-width: var(--medida); text-wrap: pretty; }
p + p { margin-top: var(--e-4); }

.sub {
  margin-top: var(--e-4);
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  color: var(--grafite);
}

/* Rótulo de demonstração ("Depoimentos de exemplo", "Ilustração"...) */
.rotulo {
  display: inline-block;
  font-size: var(--t-pequeno);
  font-weight: 600;
  color: var(--cinza);
}
.fundo-nevoa .rotulo { color: var(--grafite); }
.fundo-noite .rotulo { color: var(--cinza-claro); }

/* ---------- Estrutura ---------- */
.envolve {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 48px);
}

.secao {
  position: relative;
  padding-block: clamp(64px, 10vw, 128px);
  overflow-x: clip; /* itens "desalinhados" nunca criam rolagem lateral */
}
.secao__topo { margin-bottom: clamp(32px, 5vw, 56px); }
.secao__topo .rotulo { margin-top: var(--e-3); }

.fundo-porcelana { background: var(--porcelana); }
.fundo-branco    { background: var(--branco); }
.fundo-nevoa     { background: var(--nevoa); }
.fundo-noite     { background: var(--ameixa-noite); color: var(--cinza-claro); }
.fundo-noite h2, .fundo-noite h3 { color: var(--porcelana); }

/* Pular para o conteúdo (teclado) */
.pular {
  position: absolute;
  left: var(--e-4);
  top: -100px;
  z-index: 100;
  background: var(--ameixa);
  color: var(--branco);
  padding: var(--e-3) var(--e-4);
  border-radius: var(--raio-botao);
  font-weight: 600;
}
.pular:focus { top: var(--e-4); }

.visualmente-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Foco sempre visível ---------- */
:focus-visible {
  outline: 3px solid var(--ameixa);
  outline-offset: 3px;
  border-radius: 6px;
}
.fundo-noite :focus-visible { outline-color: var(--porcelana); }

/* ---------- Links: sempre sublinhados; o sublinhado engrossa ---------- */
a { color: var(--ameixa); }
.link {
  color: var(--ameixa);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  transition: text-decoration-thickness var(--rapido) ease, color var(--rapido) ease;
  display: inline-flex;
  align-items: center;
  min-height: var(--toque);
}
.link:hover { text-decoration-thickness: 2px; color: var(--ameixa-forte); }
.fundo-noite .link { color: var(--porcelana); }

/* ---------- Botões ---------- */
.btn {
  position: relative;
  isolation: isolate;        /* o brilho fica atrás do texto */
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: var(--toque);
  padding: var(--e-3) var(--e-6);
  border: 2px solid transparent;
  border-radius: var(--raio-botao);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--rapido) ease, color var(--rapido) ease,
              border-color var(--rapido) ease, transform 140ms var(--curva-entrada);
}
.btn:active { transform: scale(.98); }

.btn--p { background: var(--ameixa); color: var(--branco); }
.btn--p:hover, .btn--p:active { background: var(--ameixa-forte); }

.btn--s { background: transparent; border-color: var(--ameixa); color: var(--ameixa); }
.btn--s:hover { background: var(--porcelana); border-color: var(--ameixa-forte); color: var(--ameixa-forte); }

/* Invertido: para seções ameixa-noite (ameixa sobre noite dá só 1,85:1) */
.btn--i { background: var(--porcelana); color: var(--ameixa); }
.btn--i:hover, .btn--i:active { background: var(--branco); color: var(--ameixa-forte); }
.btn--i:focus-visible { outline-color: var(--porcelana); }

/* O brilho que atravessa o botão UMA vez (hover no mouse, toque no celular) */
.btn--p::before, .btn--i::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(var(--angulo-brilho), transparent 32%, rgba(255,255,255,.3) 50%, transparent 68%);
  transform: translateX(-110%);
  pointer-events: none;
}
.btn--i::before { background: linear-gradient(var(--angulo-brilho), transparent 32%, rgba(191,227,214,.75) 50%, transparent 68%); }
@media (hover: hover) and (pointer: fine) {
  .btn--p:hover::before, .btn--i:hover::before {
    transform: translateX(110%);
    transition: transform 500ms var(--curva-assinatura);
  }
}
.btn--p:active::before, .btn--i:active::before {
  transform: translateX(110%);
  transition: transform 500ms var(--curva-assinatura);
}

.acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3) var(--e-6);
  margin-top: var(--e-8);
}