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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--navbar-altura) + 20px); }
html, body { overflow-x: clip; }

body {
    font-family: var(--fuente);
    background: var(--fondo);
    color: var(--texto);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
#contenido { flex: 1 0 auto; }

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3 { font-family: var(--fuente-display); font-weight: 600; line-height: 1.14; letter-spacing: -.02em; }

:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 4px; }

.sprite-oculto { position: absolute; width: 0; height: 0; overflow: hidden; }

.icono {
    width: 1.25em;
    height: 1.25em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.salto-contenido {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--texto);
    color: var(--fondo);
    padding: .6rem 1rem;
    border-radius: 0 0 10px 0;
    z-index: 2000;
}
.salto-contenido:focus { left: 0; }

.contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: 22px; }

.seccion { padding-block: 96px; }
.seccion-cabecera { max-width: 640px; margin: 0 0 48px; }

.seccion-titulo { font-size: clamp(1.7rem, 3.6vw, 2.6rem); color: var(--texto); }
.st-suave { color: var(--texto-suave); }
.seccion-bajada { margin-top: 1rem; font-size: 1.02rem; color: var(--texto-suave); }

.tarjeta {
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--radio-lg);
    box-shadow: var(--sombra-card);
    transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.tarjeta:hover { transform: translateY(-4px); border-color: var(--linea-fuerte); background: var(--superficie-alta); }

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .62rem 1.2rem;
    border: 1px solid transparent;
    border-radius: 9px;
    font-family: var(--fuente);
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.boton:hover { transform: translateY(-2px); }
.boton-chico { padding: .46rem .9rem; font-size: .84rem; }

.boton-principal { background: var(--boton-bg); color: var(--boton-tx); }
.boton-principal:hover { box-shadow: 0 14px 30px -12px rgba(248, 248, 246, .28), var(--glow-acento); }

.boton-fantasma { background: transparent; color: var(--texto); border-color: var(--boton-borde); }
.boton-fantasma:hover { border-color: var(--acento); color: var(--texto); background: var(--superficie-tenue); }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: none; }
.reveal[data-retraso="1"] { transition-delay: .09s; }
.reveal[data-retraso="2"] { transition-delay: .18s; }
.reveal[data-retraso="3"] { transition-delay: .27s; }
html.sin-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; transition: none; }
    .boton, .boton:hover, .tarjeta, .tarjeta:hover { transform: none; transition: none; }
}

@media (max-width: 767.98px) {
    .seccion { padding-block: 68px; }
    .seccion-cabecera { margin-bottom: 42px; }
}