/* =========================================================
   CERNUNNOS BASE · responsive.css
   Ajustes para tablet y móvil. Se carga el último.
   ========================================================= */

@media (max-width: 1024px) {
    .footer-grid { grid-template-columns: auto 1fr 1fr; }
    /* En tablet el bloque de tagline/social sube a estar junto al logo */
    .footer-logo-col { grid-row: 1 / 3; }
}

@media (max-width: 900px) {
    .contact-layout { grid-template-columns: 1fr; }
    .case-detail { grid-template-columns: 1fr; }
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
    .footer-logo-col {
        grid-column: 1 / -1;    /* ocupa todo el ancho */
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        padding-right: 0;
        padding-bottom: var(--spacing-md);
        align-self: auto;
        justify-content: flex-start;
    }
    .footer-logo-large { max-height: 140px; min-height: 100px; }
}

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

    .hero { min-height: 60vh; padding: var(--spacing-lg); }
    .page-hero { min-height: 30vh; }

    section { padding: var(--spacing-lg) var(--spacing-sm); }

    .grid, .grid-2, .grid-3 { grid-template-columns: 1fr; }

    /* Menú móvil */
    .nav-toggle { display: block; }
    .navbar-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--color-bg);
        border-bottom: 1px solid rgba(0,31,63,0.08);
        box-shadow: var(--shadow-md);
        max-height: 0;
        overflow: hidden;
        transition: max-height .35s ease;
    }
    .navbar-menu.is-open { max-height: 70vh; }
    .nav-list { flex-direction: column; align-items: stretch; gap: 0; padding: var(--spacing-sm) var(--spacing-md); }
    .nav-list li { padding: 10px 0; border-bottom: 1px solid rgba(0,31,63,0.06); }

    .hero-cta { flex-direction: column; }
    .hero-cta .btn { width: 100%; text-align: center; }
}

@media (max-width: 480px) {
    .hero { min-height: 56vh; }
    .btn { width: 100%; text-align: center; }
    .navbar-brand .site-title { font-size: 18px; }
}