@import url('variables.css');

/* Reset Moderno */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { 
    font-family: 'Inter', system-ui, -apple-system, sans-serif; 
    background-color: var(--bg-main); 
    color: var(--text-main); 
    line-height: 1.5; 
    overflow-x: hidden;
}

/* Tipografía Escalar */
h1, h2, h3, h4 { color: var(--brand-secondary); font-weight: 800; line-height: 1.2; margin-bottom: 1rem; }
a { color: inherit; text-decoration: none; transition: var(--transition); }

/* Layout Contenedores */
.contenedor { 
    max-width: 1440px; 
    margin: 0 auto; 
    padding: 0 1.5rem; 
    width: 100%; 
}

@media (max-width: 768px) {
    .contenedor { padding: 0 1rem; }
}

/* Utilidades Rápidas */
.bg-white { background: #fff; }
.shadow-card { box-shadow: var(--shadow-sm); border: 1px solid var(--border-soft); border-radius: var(--radius-md); }
.py-5 { padding-top: 2rem; padding-bottom: 2rem; }
.mb-5 { margin-bottom: 2rem; }

/* Grid de Alto Volumen */
.retail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    padding: 1.5rem 0;
}

@media (max-width: 480px) {
    .retail-grid { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
}