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

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

body {
    font-family: var(--fuente);
    background: var(--fondo);
    color: var(--texto);
    font-size: 1rem;
    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, picture { max-width: 100%; display: block; }
a { color: var(--acento-oscuro); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
    font-family: var(--fuente-titulo);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.015em;
    color: var(--texto);
}

:focus-visible { outline: 2px solid var(--acento-oscuro); outline-offset: 3px; border-radius: 6px; }
.hero .boton:focus-visible { outline-color: #fff; }

.contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: clamp(20px, 5vw, 40px); }

.salto-contenido {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: var(--c-carbon);
    color: var(--c-crema);
    padding: .6rem 1rem;
    border-radius: 0 0 10px 0;
    font-weight: 600;
}
.salto-contenido:focus { left: 0; }

.seccion { padding-block: clamp(56px, 8vw, 92px); }

.seccion-cabecera { max-width: 640px; margin: 0 auto clamp(32px, 5vw, 52px); text-align: center; }

.seccion-titulo { font-size: clamp(1.65rem, 3.6vw, 2.5rem); }
.seccion-bajada { margin-top: .9rem; color: var(--texto-suave); font-size: 1.04rem; }

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .8rem 1.5rem;
    border: 1.5px solid transparent;
    border-radius: 999px;
    font-family: var(--fuente-titulo);
    font-size: .95rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.boton:hover { transform: translateY(-2px); text-decoration: none; }
.boton .icono { width: 20px; height: 20px; }

.boton-principal { background: var(--acento); color: var(--c-carbon); box-shadow: 0 12px 24px -14px rgba(228, 130, 12, .8); }
.boton-principal:hover { background: #D1770B; }

.boton-oscuro { background: var(--c-carbon); color: var(--c-crema); }
.boton-oscuro:hover { background: #100D0B; color: var(--c-crema); }

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

.boton-chico { padding: .6rem 1.1rem; font-size: .9rem; }

.sprite-oculto { position: absolute; width: 0; height: 0; overflow: hidden; }
.icono {
    width: 24px; height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}
.icono-relleno { fill: currentColor; stroke: none; }

.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: .08s; }
.reveal[data-retraso="2"] { transition-delay: .16s; }
.reveal[data-retraso="3"] { transition-delay: .24s; }
html.sin-js .reveal { opacity: 1; transform: none; }

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