/* ---------- Base layout (sin scroll vertical global) ---------- */

/* Evita "overflow" por márgenes por defecto y hace que 100vh sea fiable */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* Box-sizing consistente para que bordes/paddings no sumen y provoquen scroll */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* Fondo base de la app */
    background-color: rgba(56,176,0,0.2);
    background-image: linear-gradient(#003300 1px, transparent 1px), linear-gradient(70deg, #003300 1px, transparent 10px), linear-gradient(135deg, rgba(56,176,0,0.2), rgba(0,0,0,0.6));
    background-size: 100px 200px, 30px 80px, cover;
    background-blend-mode: overlay;
    background-attachment: fixed;
    color: white;
    /* Clave: sin scroll vertical a nivel de página */
    overflow: hidden;
}

/* Wrapper principal del _Layout */
.page {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

/* Zona central (RenderBody) */
.content {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ---------- Menú superior ---------- */

.menu {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    background-color: black;
}

    /* Asegura que en Gran Premio NO cambie la fuente del menú */
    .menu,
    .menu * {
        font-family: Arial, Helvetica, sans-serif;
    }

.logo {
    margin-left: 400px;
}

/* Contenedor del nav */
.botones {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1; /* ocupa el espacio disponible (más responsive) */
    width: auto; /* evita width fijo */
}

    /* GAP real entre enlaces */
    .botones nav {
        display: flex;
        align-items: center;
        gap: 12px; /* <-- AJUSTA AQUÍ (16/20/24/32) */
        flex-wrap: nowrap;
        margin-right:50px;
    }

.titulo {
    font-size: 30px;
    color: #70E000;
    font-weight: bold;
    margin-left: 50px;
    width: 400px;
}

.boton_menu {
    border: none;
    background-color: transparent;
}

    /* Enlace: quitar width 100% para que no "empuje" */
    .boton_menu a {
        display: flex;
        width: auto;
        justify-content: center;
        align-items: center;
        gap: 2px; /* gap interno por si algún día metes iconos */
        text-decoration: none;
        color: white;
        font-size: 20px;
        white-space: nowrap;
    }

/* Quita márgenes por defecto (evita “1px scroll” en algunos navegadores) */
.menu p {
    margin: 0;
}

/* ---------- Footer ---------- */

.footer {
    flex: 0 0 auto;
    height:70px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: black;
    gap: 30px;
}

    .footer p {
        margin: 0;
        font-size: 30px;
        font-weight: bold;
        text-decoration: none;
        color: white;
    }

        .footer p a {
            text-decoration: none;
        }

            .footer p a:visited {
                color: white;
            }

.redes_sociales {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    .redes_sociales img {
        height: 64px;
        width: 64px;
    }

/* Blindaje del menú: ignora estilos globales de otras páginas */
.menu .boton_menu {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    font: inherit !important;
    line-height: normal !important;
}