/* JeZapp Estúdio de Site — base.
 * Fundação, não visual pronto: reset, escala de tipo fluida, ritmo de seções, botões, foco,
 * movimento reduzido. A direção de arte de cada projeto vem por cima, em estilo próprio.
 * As cores e fontes chegam como variáveis (--cor-*, --fonte-*), definidas no <head> da página.
 *
 * ⚠️ clamp()/calc(): SEMPRE com espaço em volta de + e − ("1rem + 2vw"). Sem espaço a regra
 * inteira é inválida e o navegador cai para o padrão (16px) sem avisar nada no console.
 */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  min-height: 100vh; overflow-x: clip;
  font-family: var(--fonte-texto, system-ui), system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--t-corpo); line-height: 1.6; color: var(--cor-texto, #111); background: var(--cor-fundo, #fff);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, picture, video, svg, iframe { display: block; max-width: 100%; }
img, video { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-underline-offset: .18em; }
p, li, h1, h2, h3, h4 { overflow-wrap: break-word; }
h1, h2, h3, h4 { font-family: var(--fonte-titulo, inherit); line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
p { text-wrap: pretty; }

/* ------------------------------------------------------------ escala de tipo (fluida, 320 → 1440) */
:root {
  --t-mini: clamp(0.82rem, 0.8rem + 0.1vw, 0.88rem); /* nunca abaixo de 13px: menor que isso o celular não lê */
  --t-pequeno: clamp(0.9rem, 0.86rem + 0.2vw, 1rem);
  --t-corpo: clamp(1rem, 0.95rem + 0.25vw, 1.15rem);
  --t-destaque: clamp(1.15rem, 1.05rem + 0.5vw, 1.45rem);
  --t-h3: clamp(1.3rem, 1.15rem + 0.75vw, 1.85rem);
  --t-h2: clamp(1.85rem, 1.45rem + 2vw, 3.2rem);
  --t-h1: clamp(2.35rem, 1.6rem + 3.8vw, 5rem);
  --t-gigante: clamp(2.8rem, 1.6rem + 6vw, 7.5rem);
  --margem: 16px;
  --largura: 1180px;
  --vao: clamp(1rem, 0.8rem + 1vw, 1.75rem);
  --secao: clamp(4rem, 3rem + 5vw, 8rem);
  --raio: 18px;
  --sombra: 0 24px 60px -24px rgb(0 0 0 / 0.35);
}
@media (min-width: 640px) { :root { --margem: 28px; } }
@media (min-width: 1024px) { :root { --margem: 40px; } }

/* ------------------------------------------------------------ estrutura */
.conteiner { width: min(100% - 2 * var(--margem), var(--largura)); margin-inline: auto; }
.estreito { width: min(100% - 2 * var(--margem), 760px); margin-inline: auto; }
.secao { padding-block: var(--secao); position: relative; }
.pilha > * + * { margin-top: var(--vao); }
.grade { display: grid; gap: var(--vao); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.dois { display: grid; gap: calc(var(--vao) * 2); align-items: center; }
@media (min-width: 900px) { .dois { grid-template-columns: 1fr 1fr; } }
.centro { text-align: center; }
.centro .pilha, .centro.pilha { display: flex; flex-direction: column; align-items: center; }
.sobretitulo { font-size: var(--t-pequeno); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cor-primaria); }
.sumir { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------ botões */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 52px; padding: .85em 1.5em; border-radius: 999px; border: 0;
  font-weight: 750; font-size: var(--t-destaque); line-height: 1.15; text-decoration: none; text-align: center;
  background: var(--cor-primaria, #111); color: var(--cor-sobre-primaria, #fff);
  box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--cor-primaria, #111) 80%, transparent);
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.botao:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -14px color-mix(in srgb, var(--cor-primaria, #111) 90%, transparent); }
.botao:active { transform: translateY(0); }
.botao.secundario { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
.botao svg { width: 1.3em; height: 1.3em; flex: none; }

/* ------------------------------------------------------------ foco de teclado (nunca tirar sem pôr outro) */
:focus-visible { outline: 3px solid var(--cor-foco, var(--cor-destaque, #2563eb)); outline-offset: 3px; border-radius: 6px; }

/* ------------------------------------------------------------ vídeo por clique (só carrega quando a pessoa pede) */
.video { position: relative; border-radius: var(--raio); overflow: hidden; background: #000; box-shadow: var(--sombra); aspect-ratio: 16 / 9; }
.video.vertical { aspect-ratio: 9 / 16; width: 100%; max-width: 420px; margin-inline: auto; } /* width:100% — sem ele, dentro de grade/flex o bloco encolhe para largura 0 (o conteúdo é absoluto) */
.video img, .video video, .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.video button { position: absolute; inset: 0; display: grid; place-items: center; background: transparent; border: 0; }
.video button span { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: var(--cor-primaria, #111); color: #fff; box-shadow: 0 0 0 10px color-mix(in srgb, var(--cor-primaria, #111) 30%, transparent); transition: transform .2s ease; }
.video button:hover span { transform: scale(1.06); }
.video button svg { width: 34px; height: 34px; margin-left: 5px; }

/* ------------------------------------------------------------ revelar ao rolar (base.js liga) */
.js .revelar { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
.js .revelar.visivel { opacity: 1; transform: none; }

/* ------------------------------------------------------------ WhatsApp flutuante */
.whats-flutuante { position: fixed; right: 16px; bottom: 16px; z-index: 50; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: #25d366; color: #fff; box-shadow: 0 10px 28px -8px rgb(0 0 0 / .45); }
.whats-flutuante svg { width: 32px; height: 32px; }

/* ------------------------------------------------------------ quem pediu menos movimento */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .revelar { opacity: 1; transform: none; }
}