/* BASE */
body {
    margin:0;
    font-family: 'Montserrat', sans-serif;
    background: linear-gradient(180deg,#0f2a0f,#1c3a1c);
    color:white;
}

/* HEADER */
.header {
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:30px 0 10px; /* 🔥 quitamos padding lateral */
    border-bottom:1px solid rgba(255,255,255,0.08);
}

/* CONTENEDOR INTERNO (CLAVE DE TODO) */
.header-inner {
    width:100%;
    max-width:1100px;
    margin:0 auto;
    padding:0 15px; /* 🔥 igual que container */
    display:grid;
    grid-template-columns: auto 1fr auto;
    align-items:center;
}

/* LOGO IZQUIERDA */
.logo-left {
    display:flex;
    align-items:center;
    gap:10px; /* 🔥 mejor separación */
    justify-self:start;
}

/* LOGOS */
.logo-solidaridad {
    height:42px;
}

.bandera {
    height:34px;
    margin-top:2px;
}

.logo-virosque {
    height:46px;
    justify-self:end;
    transform:translateY(2px);
}

/* MENU */
.menu-wrapper {
    width:100%;
    display:flex;
    justify-content:center;
    margin-top:15px;
    padding-top:12px;
    border-top:1px solid rgba(255,255,255,0.08);
}

.menu {
    max-width:1100px;
    width:100%;
    padding:0 15px; /* 🔥 alineado con header y container */
    display:flex;
    justify-content:center;
    gap:30px;
    font-size:14px;
    font-weight:600;
    text-transform:uppercase;
}

/* EFECTO HOVER */
.menu a {
    position:relative;
}

.menu a::after {
    content:"";
    position:absolute;
    bottom:-5px;
    left:0;
    width:0;
    height:2px;
    background:white;
    transition:0.3s;
}

.menu a:hover::after {
    width:100%;
}

/* HERO */
.hero {
    text-align:center;
    padding:30px 20px;
}

/* CONTENIDO (CLAVE) */
.container {
    max-width:1100px; /* 🔥 igual que header */
    margin:auto;
    padding:0 15px;
}

/* FOOTER */
.footer {
    margin-top:40px;
    padding:20px;
    text-align:center;
    font-size:13px;
    opacity:0.9;
}

/* COOKIES */
#cookies {
    position:fixed;
    bottom:0;
    width:100%;
    background:#000;
    padding:10px;
    text-align:center;
}

/* LINKS */
a {
    color:inherit;
    text-decoration:none;
}

a:hover {
    opacity:0.85;
}

/* RESPONSIVE */
@media (max-width:600px) {

    .header-inner {
        grid-template-columns: 1fr;
        text-align:center;
        gap:10px;
    }

    .logo-left,
    .logo-virosque {
        justify-self:center;
    }

    .logo-solidaridad,
    .logo-virosque {
        height:40px;
    }

    .menu {
        flex-wrap:wrap;
        gap:15px;
    }
}

/* MOBILE */
@media (max-width:768px) {

    /* HEADER MÁS COMPACTO */
    .header {
        padding:20px 0 10px;
    }

    /* LOGOS CENTRADOS */
    .header-inner {
        grid-template-columns: 1fr;
        text-align:center;
        gap:10px;
    }

    .logo-left,
    .logo-virosque {
        justify-self:center;
    }

    .logo-solidaridad,
    .logo-virosque {
        height:40px;
    }

    /* MENU RESPONSIVE SIN HAMBURGUESA */
    .menu {
        flex-wrap:wrap;              /* 🔥 CLAVE */
        justify-content:center;
        gap:12px;
        padding:0 10px;
    }

    .menu a {
        padding:8px 10px;            /* 🔥 mejor para dedo */
        font-size:13px;
        border-radius:6px;
    }

.menu a {
    background: rgba(255,255,255,0.05);
}

.menu a:hover {
    background: rgba(255,255,255,0.1);
}

    /* HERO AJUSTADO */
    .hero h1 {
        font-size:24px;
    }

    .hero p {
        font-size:14px;
    }

    /* CONTENIDO */
    .container {
        padding:0 18px;
    }
}

    /* HEADER MÁS COMPACTO */
    .header {
        padding:20px 0 10px;
    }

    /* HERO MÁS AJUSTADO */
    .hero h1 {
        font-size:24px;
    }

    .hero p {
        font-size:14px;
    }

    /* TEXTO MÁS LEGIBLE */
    .container {
        padding:0 20px;
    }
}

/* MEJORA TÁCTIL */
a {
    -webkit-tap-highlight-color: transparent;
}

/* BOTONES MÁS GRANDES EN MÓVIL */
@media (max-width:768px) {
    a {
        font-size:16px;
    }
}

* {
    box-sizing: border-box;
}