*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    color: var(--texto);
    background: var(--blanco);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 400;
    line-height: var(--lh-body);
    overflow-x: hidden;
}

img, video { max-width: 100%; height: auto; display: block; }

a { color: var(--azul-fuerte); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--color-button-hover); }

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--azul-profundo);
    line-height: 1.12;
    letter-spacing: -0.045em;
    margin: 0 0 0.55em;
}

h1 { font-size: var(--fs-h1); max-width: 18ch; }
h2 { font-size: var(--fs-h2); max-width: 36ch; }
h3 { font-size: var(--fs-h3); }

p { margin: 0 0 1em; max-width: 68ch; }

ul { margin: 0; padding: 0; list-style: none; }

.container {
    width: min(var(--container), calc(100% - 32px));
    margin-inline: auto;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: var(--azul-fuerte);
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.lead { font-size: 1.08rem; color: var(--texto-suave); max-width: 42rem; }

.section { padding-block: var(--space); position: relative; }
.section--soft { background: var(--azul-hielo); }
.section--dark {
    background:
        linear-gradient(165deg, #0B2260 0%, var(--azul-profundo) 70%);
    color: var(--blanco);
}
.section--dark h2,
.section--dark h3,
.section--dark p,
.section--dark .lead { color: var(--blanco); }

main > .section { position: relative; }

.center { text-align: center; }
.center h1, .center h2, .center p { margin-inline: auto; }
.stack > * + * { margin-top: 12px; }

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.skip-link {
    position: absolute;
    left: 16px;
    top: -4rem;
    z-index: 100;
    background: var(--azul-fuerte);
    color: var(--blanco);
    padding: 8px 16px;
    border-radius: var(--radius-sm);
}
.skip-link:focus { top: 12px; color: var(--blanco); }

:focus-visible {
    outline: 3px solid var(--azul-intermedio);
    outline-offset: 3px;
}

html.js [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}
html.js [data-reveal].is-in { opacity: 1; transform: none; }
html.js [data-reveal="left"] { transform: translateX(-24px); }
html.js [data-reveal="right"] { transform: translateX(24px); }
html.js [data-reveal].is-in[data-reveal="left"],
html.js [data-reveal].is-in[data-reveal="right"] { transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    [data-reveal], .mask-reveal, .float-img, .wa-float::after {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
    }
}
