/* ========================= */
/* 🌍 BASE GLOBAL */
/* ========================= */

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

html,
body {
    min-height: 100vh;
    margin: 0;
}

/* Evita que el navbar y el menú móvil cambien de posición
   al aparecer/desaparecer la barra de scroll. */
html {
    scrollbar-gutter: stable;
}


body {
    font-family: Arial, sans-serif;

    width: min(100% - 24px, 1000px);
    margin-left: auto;
    margin-right: auto;

    padding: 20px 0;

    display: flex;
    flex-direction: column;

    color: #222;
    background: #fff;
}

main {
    flex: 1;
}



/* ========================= */
/* 🔗 LINKS / MEDIA */
/* ========================= */

a,
a:visited,
a:hover,
a:active {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    width: auto;
    display: block;
}


/* ========================= */
/* THEME */
/* ========================= */

:root {

    --color-nola: #FFE5E5;
    --color-late: #66FF99;
    --color-repe: #FFC857;

    --color-text: #111;
    --color-muted: #666;

    --color-border: #ddd;
    --color-soft: #eee;
    --color-gris: #fafafa;

}

/* ========================= */
/* 🧱 UTILIDADES REUTILIZABLES */
/* ========================= */


.actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    flex-wrap: wrap;
}


.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 10px 15px;
    border-radius: 8px;

    font-weight: 700;
    text-align: center;

    color: white;
    transition: background .2s ease;
    cursor: pointer;

}

.btn-primary {
    /* background: #4285F4; */
    background: #dededf;
    color: black;

}

.btn-primary:hover {
    background: #FFE5E5;

}

.btn-secondary {
    background: #afadad;
}

.hero-img {
    display: block;
    width: 100%;
    max-width: 500px;
    margin: 20px auto;
}

/* ========================= */
/* 📱 RESPONSIVE */
/* ========================= */

@media (max-width: 700px) {

    body {
        width: min(100% - 20px, 1000px);
        padding: 12px 0;
    }

    .actions {
        flex-direction: column;
    }

    .btn {
        width: 100%;
    }
}


/* ========================= */
/* FOOTER */
/* ========================= */

.footer-divider {
    margin-top: 40px;
    height: 1px;
    border: none;
}

.footer {
    text-align: center;
    font-size: 14px;
    color: #777;
}