.container {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--space-4);
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--color-primary);
    border-bottom: 1px solid var(--color-border);
}

.site-header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-block: var(--space-3);
}

.site-header__logo { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-heading); font-size: 1.25rem; font-weight: 700; color: var(--color-on-primary); }
.site-header__logo img { height: 40px; width: auto; }

.main-nav { display: flex; gap: var(--space-4); align-items: center; }
.main-nav a { font-weight: 500; color: var(--color-on-primary); }
.main-nav a:hover { color: var(--color-accent); }

.site-header__actions { display: flex; align-items: center; gap: var(--space-2); }
.site-header .btn-outline { border-color: var(--color-on-primary); color: var(--color-on-primary); }
.site-header .btn-outline:hover { background: rgba(128, 128, 128, 0.25); }
.icon-btn { padding: 0.5rem; line-height: 0; }

#mobileNav a { color: var(--color-on-primary); }

/* .btn.nav-toggle (dos clases) gana por especificidad a .btn (components.css, que carga
   despues y empataria en especificidad con un simple .nav-toggle) - sin esto el boton
   hamburguesa queda visible tambien en escritorio. */
.btn.nav-toggle { display: none; }

.site-footer {
    background: var(--color-secondary);
    color: var(--color-on-secondary);
    padding-block: var(--space-6) var(--space-4);
    margin-top: var(--space-7);
}
.site-footer a { color: var(--color-on-secondary); opacity: 0.75; }
.site-footer a:hover { opacity: 1; }
.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-5);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid rgba(128, 128, 128, 0.25);
}
.footer-grid h4 { color: var(--color-on-secondary); margin-bottom: var(--space-3); font-size: 1rem; }
.footer-grid ul li { margin-bottom: var(--space-2); }
.footer-bottom {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding-top: var(--space-4);
    font-size: 0.85rem;
    color: var(--color-on-secondary);
    opacity: 0.75;
}

main { min-height: 50vh; }

section { padding-block: var(--space-6); }
section.compact { padding-block: var(--space-4); }

.grid { display: grid; gap: var(--space-4); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
/* Relacion de columnas para un layout contenido+barra lateral (antes forzada con un estilo
   inline que, al tener mayor especificidad, impedia que la columna colapsara en movil - bug real
   encontrado en la revision movil/desktop, afectaba la ficha publica de propiedad). */
.grid-2-1 { grid-template-columns: 2fr 1fr; }
.grid-1-2 { grid-template-columns: 1fr 2fr; }

.flex { display: flex; gap: var(--space-3); align-items: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }

@media (max-width: 960px) {
    .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
    .main-nav { display: none; }
    .btn.nav-toggle { display: inline-flex; }
    .grid-2, .grid-3, .grid-4, .grid-2-1, .grid-1-2 { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; text-align: center; }
}