:root { }

/* ---- Safety nets: no horizontal overflow, images never overflow ---- */
html, body { overflow-x: hidden; }
img { max-width: 100%; }

/* ---- Header: with the operator button gone, center the brand on phones ---- */
@media (max-width: 600px) {
    .landing-nav { justify-content: center; }
}

/* ---- Fluid headings so nothing overflows on small screens ---- */
@media (max-width: 640px) {
    .landing-hero h1 { font-size: clamp(1.9rem, 8vw, 2.6rem); }
    .section-head h2 { font-size: clamp(1.4rem, 6vw, 1.9rem); }
}

/* ---- Eje cards: minmax(340px) overflows phones < ~380px; collapse to 1 col ---- */
@media (max-width: 760px) {
    .ejes-grid { grid-template-columns: 1fr; }
}

/* ---- Extra-small: force the remaining card grids to a single column ---- */
@media (max-width: 520px) {
    .axes-grid,
    .info-grid,
    .media-grid,
    .results-list,
    .obj-list,
    .apoyo-grid { grid-template-columns: 1fr; }
    .landing-section { padding: 2.5rem 1.1rem; }
    .eje-links { flex-wrap: wrap; }
}

/* =========================================================================
   Componentes añadidos
   ========================================================================= */

/* Popup de bienvenida (branded, sin depender de imagen externa) */
.modal-welcome .modal-box { max-width: min(460px, 94vw); }
.welcome-card { padding: 2.2rem 1.8rem; text-align: center; }
.welcome-logo { height: 96px; width: auto; margin-bottom: 1rem; }
.welcome-card h3 { color: var(--negro); font-size: 1.4rem; margin-bottom: 0.4rem; line-height: 1.25; }
.welcome-place {
    color: var(--oro-dark); font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; font-size: 0.82rem; margin-bottom: 1rem;
}
.welcome-dates {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(201, 167, 81, 0.15); color: var(--negro);
    font-weight: 700; padding: 0.5rem 1rem; border-radius: 999px; margin-bottom: 0.9rem;
}
.welcome-dates i { color: var(--oro-dark); }
.welcome-venue { color: var(--text-muted); font-size: 0.9rem; line-height: 1.5; margin: 0; }

/* Fallback cuando una imagen de modal (infografía / plano) aún no existe */
.modal-unavailable {
    display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
    padding: 2.6rem 2rem; color: var(--text-muted); text-align: center;
    min-width: min(360px, 80vw);
}
.modal-unavailable i { font-size: 2.4rem; color: var(--oro); }
.modal-unavailable p { margin: 0; font-weight: 600; }