/* ============================================
   GLOBAL.CSS - Estilos Base y Variables
   ============================================ */

:root {
    /* Colores principales */
    --color-primario: #d91255;
    --color-bg-oscuro: #111;
    --color-bg-card: #fff;
    --color-texto: #222;
    --color-texto-claro: #666;
    --color-borde: #eee;
    
    /* Layout */
    --ancho-maximo: 1200px;
    --nav-bg: #000;
    --nav-accent: #d91255;
    --header-h: 55px;
    
    /* Sombras */
    --sombra-card: 0 2px 8px rgba(0,0,0,0.08);
    --sombra-header: 0 4px 15px rgba(0,0,0,0.3);
}

/* Reset y estilos base */
* {
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    background: #f9f9f9;
    color: var(--color-texto);
    overflow-x: hidden;
    line-height: 1.6;
}

/* Contenedor principal */
.container {
    max-width: var(--ancho-maximo);
    margin: 0 auto;
    background: white;
    padding: 20px;
    min-height: 800px;
}

/* Utilidades */
.text-center {
    text-align: center;
}

.mt-1 { margin-top: 10px; }
.mt-2 { margin-top: 20px; }
.mt-3 { margin-top: 30px; }
.mt-4 { margin-top: 40px; }

.mb-1 { margin-bottom: 10px; }
.mb-2 { margin-bottom: 20px; }
.mb-3 { margin-bottom: 30px; }
.mb-4 { margin-bottom: 40px; }

/* Botones */
.btn-ver-mas {
    display: inline-block;
    background: #000;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    margin: 30px auto;
    display: block;
    width: fit-content;
    transition: background 0.3s ease;
}

.btn-ver-mas:hover {
    background: var(--color-primario);
}

/* Links */
a {
    color: inherit;
    transition: color 0.2s ease;
}

/* Imágenes responsivas */
img {
    max-width: 100%;
    height: auto;
}