/* ==========================================================================
   RESET.CSS — Reset e tipografia base
   ========================================================================== */

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body {
    background: var(--void);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 400;
    line-height: 1.72;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, video, svg, canvas { display: block; max-width: 100%; height: auto; }
img { object-fit: cover; }

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }

h1, h2, h3, h4, h5 {
    font-family: var(--font-display);
    font-weight: 200;
    line-height: 1.14;
    letter-spacing: -.015em;
}
h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 300; }

strong, b { font-weight: 500; }

::selection { background: var(--accent); color: var(--void); }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* Texto para leitor de tela e buscador, invisível na página.
   Não usar display:none nem visibility:hidden: leitor de tela ignora. */
.oculto {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden; white-space: nowrap;
    clip-path: inset(50%);
}

/* Pula para o conteúdo — aparece só no teclado */
.pular {
    position: absolute; left: -9999px; top: 0; z-index: 999;
    background: var(--accent); color: var(--void);
    padding: 12px 20px; font-family: var(--font-display); font-size: 13px;
}
.pular:focus { left: 12px; top: 12px; }

/* ---------- Estruturas de página ---------- */

.wrap {
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: var(--pad-x);
}

.sec { padding-block: var(--sec-y); position: relative; }
.sec--alt { background: var(--surface); }

.malha {
    position: absolute; inset: 0;
    background-image: var(--malha);
    pointer-events: none;
    z-index: 0;
}
.sec > .wrap { position: relative; z-index: 1; }

/* Entrada suave quando a seção encosta na viewport.
   Sem biblioteca: IntersectionObserver em app.js troca a classe. */
.revela {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.revela.visivel { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .revela { opacity: 1; transform: none; }
}