@charset "UTF-8";

/* ==========================================================================
   EL MOTOR DEL VILORIO | NEO-BRUTALISMO + POP ART
   ========================================================================== */

/* --- 1. IMPORTACIÓN DE LA TRINIDAD TIPOGRÁFICA --- */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;900&family=Red+Hat+Mono:wght@400;700;900&display=swap');

/* --- 2. VARIABLES GLOBALES (El Panel de Control) --- */
:root {
    /* Paleta de Colores CMYK / Pop Art */
    --neo-bg: #f4f4f0;       /* Blanco roto papel antiguo */
    --neo-black: #000000;    /* Tinta negra */
    --neo-white: #ffffff;    /* Blanco puro */
    --neo-yellow: #ffcc00;   /* Amarillo ácido */
    --neo-red: #E05A47;      /* Rojo alerta */
    --neo-blue: #85C7F2;     /* Azul cyan */
    --neo-orange: #F4A261;   /* Naranja cálido */
    --neo-green: #3B6B4C;    /* Verde bosque */

    /* Sistema de Cajas y Sombras */
    --border-thick: 4px solid var(--neo-black);
    --shadow-hard: 6px 6px 0px var(--neo-black);
    --shadow-hover: 10px 10px 0px var(--neo-black);
    --shadow-active: 0px 0px 0px var(--neo-black);

    /* Tipografía */
    --font-display: 'Bebas Neue', sans-serif;   /* Títulos gigantes */
    --font-mono: 'Red Hat Mono', monospace;     /* Etiquetas, datos, botones */
    --font-body: 'Inter', system-ui, sans-serif; /* Párrafos legibles */
}

/* --- 3. RESETEO BÁSICO --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--neo-bg);
    /* Patrón de fondo sutil tipo cuaderno cuadriculado */
    background-image: 
        linear-gradient(var(--neo-black) 1px, transparent 1px),
        linear-gradient(90deg, var(--neo-black) 1px, transparent 1px);
    background-size: 40px 40px;
    background-position: -1px -1px;
    /* Atenuamos la cuadrícula para que no maree */
    background-color: rgba(244, 244, 240, 0.95);
    background-blend-mode: overlay;
    
    color: var(--neo-black);
    font-family: var(--font-body);
    line-height: 1.6;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* --- 4. JERARQUÍA TIPOGRÁFICA --- */

/* Títulos: Gritos en la pared */
h1, h2, h3, h4, h5, h6, .neo-title {
    font-family: var(--font-display);
    font-weight: 400; /* Bebas Neue ya es muy gruesa por defecto */
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1;
    margin-bottom: 0.5em;
}

/* Párrafos: Lectura cómoda */
p, .neo-text {
    font-family: var(--font-body);
    font-size: 1.15rem;
    font-weight: 500;
    margin-bottom: 1.5em;
}

/* Letra Capital (Para el inicio de artículos largos) */
.neo-dropcap::first-letter {
    font-family: var(--font-display);
    float: left;
    font-size: 6rem;
    line-height: 0.8;
    padding-right: 15px;
    padding-top: 5px;
    color: var(--neo-red);
    text-shadow: 3px 3px 0px var(--neo-black);
}

/* --- 5. COMPONENTES NEO-BRUTALISTAS --- */

/* Cajas contenedoras estándar */
.neo-box {
    background-color: var(--neo-white);
    border: var(--border-thick);
    box-shadow: var(--shadow-hard);
    padding: 30px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.neo-box:hover {
    transform: translate(-3px, -3px);
    box-shadow: var(--shadow-hover);
}

/* Botones Interactivos */
.neo-btn {
    display: inline-block;
    font-family: var(--font-mono); /* Fuente técnica para botones */
    font-weight: 900;
    font-size: 1.1rem;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--neo-black);
    background-color: var(--neo-yellow);
    border: var(--border-thick);
    padding: 12px 25px;
    box-shadow: var(--shadow-hard);
    cursor: pointer;
    transition: all 0.1s ease;
    text-align: center;
}

.neo-btn:hover {
    background-color: var(--neo-white);
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-hover);
}

.neo-btn:active {
    transform: translate(6px, 6px);
    box-shadow: var(--shadow-active);
}

/* Etiquetas y Metadatos (Fechas, Categorías) */
.neo-tag {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.9rem;
    background-color: var(--neo-black);
    color: var(--neo-white);
    padding: 4px 10px;
    border: 2px solid var(--neo-black);
    display: inline-block;
    text-transform: uppercase;
}

/* --- 6. COMPONENTES POP ART (La Magia) --- */

/* 1. Fondo de Rayos Giratorios (Para errores, modales o llamadas a la acción) */
.pop-art-burst {
    position: relative;
    overflow: hidden;
    background-color: var(--neo-blue);
    z-index: 1;
}
.pop-art-burst::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: repeating-conic-gradient(
        var(--neo-yellow) 0 15deg,
        transparent 15deg 30deg
    );
    animation: burst-spin 40s linear infinite;
    z-index: -1;
}
@keyframes burst-spin {
    100% { transform: rotate(360deg); }
}

/* 2. Trama de Puntos (Estilo Cómic / Roy Lichtenstein) */
.pop-art-halftone {
    position: relative;
}
.pop-art-halftone::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: radial-gradient(var(--neo-black) 25%, transparent 25%);
    background-size: 8px 8px; /* Tamaño del punto */
    opacity: 0.15; /* Sutil para que se pueda leer el texto */
    pointer-events: none;
    z-index: 0;
}

/* 3. Pegatina Torcida Pop Art */
.pop-art-sticker {
    font-family: var(--font-display);
    font-size: 2rem;
    background-color: var(--neo-red);
    color: var(--neo-white);
    border: var(--border-thick);
    padding: 10px 20px;
    box-shadow: 4px 4px 0px var(--neo-black);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: rotate(-5deg);
    position: absolute;
    z-index: 10;
    transition: transform 0.2s cubic-bezier(0.25, 1.5, 0.5, 1);
}
.pop-art-sticker:hover {
    transform: rotate(2deg) scale(1.1);
}

/* Títulos Gigantes con 3 Sombras (Estilo 404) */
.pop-art-text {
    font-family: var(--font-display);
    color: var(--neo-white);
    -webkit-text-stroke: 3px var(--neo-black);
    text-shadow: 
        4px 4px 0px var(--neo-yellow),
        8px 8px 0px var(--neo-red),
        12px 12px 0px var(--neo-black);
}

/* --- 7. UTILIDADES DE MAQUETACIÓN --- */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
}

.text-center { text-align: center; }
.mt-4 { margin-top: 2rem; }
.mb-4 { margin-bottom: 2rem; }