/* ==========================================================================
   Base: reinicio, tipografía y utilidades
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 100px; }
body {
    margin: 0;
    font-family: var(--fuente);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}
img, svg, video { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure, dl, dd, address { margin: 0; }
address { font-style: normal; }
[hidden] { display: none !important; }

/* Títulos ligeros; la parte enfatizada va en peso 600 */
h1, h2, h3 { color: var(--ink); text-wrap: balance; }
h1 { font-size: var(--fs-h1); font-weight: 400; line-height: 1.04; letter-spacing: -.035em; }
h2 { font-size: var(--fs-h2); font-weight: 500; line-height: 1.1; letter-spacing: -.03em; }
h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
h1 b, h1 strong, h2 b, h2 strong, .tono-suave { font-weight: 600; }
p { text-wrap: pretty; }

.eyebrow { font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); }
.lead { font-size: var(--fs-lead); color: var(--ink-soft); line-height: 1.65; }

.contenedor { width: 100%; max-width: calc(var(--contenedor) + var(--pad-x) * 2); margin-inline: auto; padding-inline: var(--pad-x); }
.marco { width: min(var(--marco-max), calc(100% - var(--marco-gutter) * 2)); margin-inline: auto; border-radius: var(--r-frame); overflow: hidden; isolation: isolate; }

/* Accesibilidad */
.saltar {
    position: fixed; top: 8px; left: 8px; z-index: 200;
    padding: 10px 16px; border-radius: var(--r-btn);
    background: var(--navy); color: #fff; font-weight: 600;
    transform: translateY(-160%); transition: transform .2s var(--ease);
}
.saltar:focus { transform: none; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
main:focus { outline: none; }
::selection { background: var(--navy); color: #fff; }
input, textarea, select { caret-color: var(--blue); }
html { scrollbar-color: var(--navy) var(--surface); }

.icono { flex: none; }

/* Secciones */
main { padding-top: var(--nav-h); }
.seccion { padding-block: var(--espacio-seccion); }
.seccion--tight { padding-block: clamp(16px, 3vw, 32px) var(--espacio-seccion); }
.seccion--suave { background: var(--surface); }
.seccion__accion { display: flex; justify-content: center; margin-top: clamp(28px, 4vw, 48px); }

/* Aparición al hacer scroll (solo con JavaScript) */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
    .js .reveal { opacity: 1; transform: none; }
}