/* NO poner overflow-x:hidden acá (html/body): en mobile convierte a body   */
/* en su propio contenedor de scroll, y ahí position:sticky (usado por      */
/* .bagus-manifiesto-programa y .bagus-kit-teaser) deja de frenar — el      */
/* scroll sigue de largo y la animación pineada nunca llega a verse. El     */
/* overflow que causaba el espacio al costado se corta en el origen, en     */
/* las secciones puntuales que animan con translateX (ver trust-bar.css,    */
/* blog.css) — no acá.                                                      */

body {
    font-family: var(--font-body);
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: 400;
    margin: 0;
}

.subtitle {
    font-family: var(--font-subheading);
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

/* Fondo compartido: un solo elemento fijo detrás de todo el sitio,      */
/* así hero + secciones que lo usan (ver shop-categories.css) se ven     */
/* como un único degradado continuo, sin costuras entre secciones.       */
.site-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: radial-gradient(circle at calc(var(--grad-x) + var(--drift-x)) calc(var(--grad-y) + var(--drift-y)) in oklch,
        var(--color-yellow) 0%,
        var(--color-sky) var(--stop-sky),
        var(--color-primary) var(--stop-primary),
        var(--color-pink-light) var(--stop-pink)
    );
}

.section {
    padding: 100px 0;
}

.section-title {
    font-family: var(--font-heading) !important;
    font-weight: 400 !important;
    font-size: clamp(30px, 3.6vw, 46px);
    color: var(--color-text-dark);
    line-height: 1.15;
    margin: 0 0 16px;
}

.section-intro {
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.6;
    color: rgba(43, 43, 43, .75);
    max-width: 560px;
    margin: 0 0 40px;
}

.btn {
    position: relative;
    display: inline-block;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .02em;
    text-decoration: none;
    padding: 16px 34px;
    border-radius: 999px;
    transition: transform .35s cubic-bezier(.16, .84, .44, 1), letter-spacing .35s ease, box-shadow .35s ease, background-color .35s ease;
}

.btn:hover {
    transform: translateY(-3px);
    letter-spacing: .05em;
}

.btn:active {
    transform: translateY(-1px);
}

.btn-primary {
    background: var(--color-primary);
    color: var(--color-white);
    overflow: hidden;
}

/* Barrido de color desde la izquierda en vez de un simple cambio de       */
/* fondo: el pseudo-elemento va en z-index:-1, así queda siempre detrás    */
/* del texto (contenido en flujo normal) sin necesitar envolverlo en spans.*/
.btn-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--color-text-dark);
    transform: translateX(-100%);
    transition: transform .45s cubic-bezier(.65, 0, .35, 1);
}

.btn-primary:hover::after {
    transform: translateX(0);
}

.btn-outline {
    background: transparent;
    color: var(--color-text-dark);
    border: 1.5px solid var(--color-text-dark);
}

/* Relleno tenue con el propio color del botón (currentColor): funciona    */
/* igual sin importar el contexto (texto oscuro sobre blanco, texto        */
/* blanco sobre un fondo de color), a diferencia de invertir a un color    */
/* fijo que podría chocar con el fondo de la sección.                      */
.btn-outline:hover {
    background: color-mix(in oklch, currentColor 14%, transparent);
    box-shadow: inset 0 0 0 1.5px currentColor;
}

.btn:focus-visible,
.btn-outline:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/* Utilidad genérica de entrada al scroll para páginas internas (ver        */
/* js/reveal.js) — a diferencia del home, estas secciones son de contenido */
/* editorial y no necesitan una animación a medida por sección.            */
.reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity .8s cubic-bezier(.16, .84, .44, 1), transform .8s cubic-bezier(.16, .84, .44, 1);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 768px) {
    .container {
        padding: 0 20px;
    }

    .section {
        padding: 64px 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn,
    .btn:hover,
    .btn-primary::after,
    .btn-primary:hover::after {
        transition: none;
    }

    .btn:hover {
        transform: none;
        letter-spacing: .02em;
    }

    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}