/* 
 * RECO: Variables Globales y Reset Base 
 */

:root {
    /* --- CONFIGURACIÓN DE COLORES --- */
    --reco-color-fondo: #ffffff;
    --reco-color-texto: #1a1a1a;
    --reco-color-primario: #000000; /* Color principal de la marca */
    --reco-color-secundario: #f8f9fa; /* Fondos tenues */
    --reco-color-borde: #e2e8f0;

    /* --- CONFIGURACIÓN DE TIPOGRAFÍA --- */
    /* Fuentes del sistema: 0 peticiones al servidor, carga instantánea */
    --reco-fuente-principal: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --reco-tamano-texto: 16px;
    --reco-altura-linea: 1.6;

    /* --- CONFIGURACIÓN DE ESPACIADO --- */
    --reco-espacio-xs: 0.5rem;   /* 8px */
    --reco-espacio-sm: 1rem;     /* 16px */
    --reco-espacio-md: 2rem;     /* 32px */
    --reco-espacio-lg: 4rem;     /* 64px */

    /* --- ESTRUCTURA --- */
    --reco-ancho-maximo: 1200px;
}

/* --- 1. RESET BÁSICO Y OPTIMIZADO --- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: var(--reco-tamano-texto);
    font-family: var(--reco-fuente-principal);
    line-height: var(--reco-altura-linea);
    color: var(--reco-color-texto);
    background-color: var(--reco-color-fondo);
    -webkit-text-size-adjust: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

a {
    color: var(--reco-color-primario);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

a:hover {
    opacity: 0.7;
}

/* --- 2. ESTRUCTURA GLOBAL --- */
.contenido-principal {
    flex: 1; /* Empuja el footer hacia el fondo de la pantalla */
    width: 100%;
    max-width: var(--reco-ancho-maximo);
    margin: 0 auto;
    padding: var(--reco-espacio-md) var(--reco-espacio-sm);
}

/* --- 3. CABECERA (HEADER) --- */
.cabecera-principal {
    border-bottom: 1px solid var(--reco-color-borde);
    padding: var(--reco-espacio-sm) 0;
    background-color: var(--reco-color-fondo);
}

.contenedor-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--reco-ancho-maximo);
    margin: 0 auto;
    padding: 0 var(--reco-espacio-sm);
}

.logo-sitio a {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.navegacion-principal .menu-cabecera {
    display: flex;
    list-style: none;
    gap: var(--reco-espacio-md);
}

.navegacion-principal a {
    font-weight: 500;
}

.aviso-menu {
    font-size: 0.875rem;
    color: #666;
}

/* --- 4. MINI CARRITO --- */
.enlace-carrito {
    display: flex;
    align-items: center;
    gap: var(--reco-espacio-xs);
    font-weight: 600;
}

.contador-carrito {
    background-color: var(--reco-color-primario);
    color: var(--reco-color-fondo);
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 99px;
}

/* --- 5. PIE DE PÁGINA (FOOTER) --- */
.pie-pagina {
    border-top: 1px solid var(--reco-color-borde);
    padding: var(--reco-espacio-md) 0;
    text-align: center;
    background-color: var(--reco-color-secundario);
    font-size: 0.875rem;
}