/* ============================================
   CODIFICANDO - SISTEMA DE DISEÑO WEB
   Base de estilos para toda la plataforma
   ============================================ */

/* Fuentes Google cargadas via assets.xml para evitar error @import */

/* ============================================
   1️⃣ VARIABLES CSS - COLORES BASE (Brand Core)
   ============================================ */
:root {
    /* 🔹 Primario - Azul Oscuro */
    --cod-primary: #242332;
    --cod-primary-rgb: 36, 35, 50;
    
    /* 🔹 Secundario - Naranja (CTA) */
    --cod-secondary: #F28C28;
    --cod-secondary-dark: #d97706;
    --cod-secondary-light: #FF9E45;
    --cod-secondary-rgb: 242, 140, 40;
    
    /* 🔹 Neutros */
    --cod-neutral-dark: #404040;
    --cod-neutral-light: #F5F5F5;
    --cod-white: #FFFFFF;
    --cod-black: #000000;
    
    /* 🔹 Texto */
    --cod-text-primary: #242332;
    --cod-text-secondary: #404040;
    --cod-text-muted: #6B7280;
    --cod-text-light: #94A3B8;
    --cod-text-on-dark: #FFFFFF;
    --cod-text-on-primary: #FFFFFF;
    --cod-text-on-secondary: #FFFFFF;
    
    /* 🔹 Fondos */
    --cod-bg-primary: #FFFFFF;
    --cod-bg-alt: #F5F5F5;
    --cod-bg-dark: #242332;
    --cod-bg-dark-alt: #1c1b28;
    
    /* 🔹 Gradientes */
    --cod-gradient-dark: linear-gradient(135deg, #242332 0%, #1c1b28 100%);
    --cod-gradient-cta: linear-gradient(135deg, #F28C28 0%, #FF9E45 100%);
    --cod-gradient-hero: linear-gradient(135deg, #242332 0%, #1c1b28 100%);
    
    /* 🔹 Estados */
    --cod-success: #10B981;
    --cod-warning: #F59E0B;
    --cod-error: #EF4444;
    --cod-info: #3B82F6;
    
    /* 🔹 Bordes */
    --cod-border: #E0E0E0;
    --cod-border-light: #E5E7EB;
    --cod-border-dark: rgba(255, 255, 255, 0.1);
    
    /* 🔹 Sombras */
    --cod-shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --cod-shadow-md: 0 8px 20px rgba(0,0,0,0.05);
    --cod-shadow-lg: 0 12px 25px rgba(0,0,0,0.08);
    --cod-shadow-xl: 0 20px 40px rgba(0,0,0,0.12);
    --cod-shadow-cta: 0 4px 15px rgba(242, 140, 40, 0.4);
    
    /* 🔹 Border Radius */
    --cod-radius-sm: 6px;
    --cod-radius: 8px;
    --cod-radius-lg: 12px;
    --cod-radius-xl: 20px;
    --cod-radius-full: 50px;
    
    /* 🔹 Transiciones */
    --cod-transition: 0.3s ease;
    --cod-transition-fast: 0.2s ease;
    
    /* 🔹 Tipografía */
    --cod-font-primary: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
    --cod-font-secondary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    
    /* 🔹 Tamaños de fuente */
    --cod-text-xs: 12px;
    --cod-text-sm: 14px;
    --cod-text-base: 16px;
    --cod-text-lg: 18px;
    --cod-text-xl: 20px;
    --cod-text-2xl: 24px;
    --cod-text-3xl: 28px;
    --cod-text-4xl: 32px;
    --cod-text-5xl: 36px;
    --cod-text-6xl: 42px;
    --cod-text-7xl: 48px;
    
    /* 🔹 Espaciado */
    --cod-space-1: 4px;
    --cod-space-2: 8px;
    --cod-space-3: 12px;
    --cod-space-4: 16px;
    --cod-space-5: 20px;
    --cod-space-6: 24px;
    --cod-space-8: 32px;
    --cod-space-10: 40px;
    --cod-space-12: 48px;
    --cod-space-16: 64px;
    --cod-space-20: 80px;
    --cod-space-24: 96px;
}

/* ============================================
   2️⃣ RESET Y BASE
   ============================================ */
html, body {
    font-family: var(--cod-font-secondary) !important;
    font-size: var(--cod-text-base) !important;
    line-height: 1.7 !important;
    color: var(--cod-text-secondary) !important;
    background: var(--cod-bg-primary) !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* ============================================
   3️⃣ TIPOGRAFÍA - JERARQUÍA DE TÍTULOS
   ============================================ */

/* H1: 42px - 48px, Bold, Primario */
h1, .cod-h1 {
    font-family: var(--cod-font-primary) !important;
    font-size: clamp(var(--cod-text-6xl), 5vw, var(--cod-text-7xl)) !important;
    font-weight: 700 !important;
    color: var(--cod-text-primary) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
}

/* H2: 32px - 36px, SemiBold, Primario */
h2, .cod-h2 {
    font-family: var(--cod-font-primary) !important;
    font-size: clamp(var(--cod-text-4xl), 4vw, var(--cod-text-5xl)) !important;
    font-weight: 600 !important;
    color: var(--cod-text-primary) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
}

/* H3: 24px - 28px, SemiBold, Primario */
h3, .cod-h3 {
    font-family: var(--cod-font-primary) !important;
    font-size: clamp(var(--cod-text-2xl), 3vw, var(--cod-text-3xl)) !important;
    font-weight: 600 !important;
    color: var(--cod-text-primary) !important;
    line-height: 1.3 !important;
}

/* H4 */
h4, .cod-h4 {
    font-family: var(--cod-font-primary) !important;
    font-size: var(--cod-text-xl) !important;
    font-weight: 600 !important;
    color: var(--cod-text-primary) !important;
    line-height: 1.4 !important;
}

/* H5 */
h5, .cod-h5 {
    font-family: var(--cod-font-primary) !important;
    font-size: var(--cod-text-lg) !important;
    font-weight: 600 !important;
    color: var(--cod-text-primary) !important;
}

/* H6 */
h6, .cod-h6 {
    font-family: var(--cod-font-primary) !important;
    font-size: var(--cod-text-base) !important;
    font-weight: 600 !important;
    color: var(--cod-text-primary) !important;
}

/* Texto normal: 16px - 18px, Regular, Neutro Oscuro */
p, .cod-text {
    font-size: var(--cod-text-base) !important;
    font-weight: 400 !important;
    color: var(--cod-text-secondary) !important;
    line-height: 1.7 !important;
}

.cod-text-lg {
    font-size: var(--cod-text-lg) !important;
}

.cod-text-sm {
    font-size: var(--cod-text-sm) !important;
}

.cod-text-muted {
    color: var(--cod-text-muted) !important;
}

/* ============================================
   4️⃣ FONDOS
   ============================================ */

/* Fondo Principal - Blanco */
.cod-bg-white,
.cod-bg-primary {
    background-color: var(--cod-bg-primary) !important;
}

/* Fondo Alterno - Gris claro */
.cod-bg-alt,
.cod-bg-light {
    background-color: var(--cod-bg-alt) !important;
}

/* Fondo Oscuro */
.cod-bg-dark {
    background: var(--cod-bg-dark) !important;
}

/* Gradiente Hero */
.cod-bg-gradient-dark {
    background: var(--cod-gradient-dark) !important;
}

/* ============================================
   5️⃣ BOTONES
   ============================================ */

/* 🔹 Botón Primario (CTA) */
.cod-btn-primary,
.cod-btn-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    background: var(--cod-secondary) !important;
    color: var(--cod-text-on-secondary) !important;
    padding: 12px 24px !important;
    border-radius: var(--cod-radius) !important;
    font-family: var(--cod-font-primary) !important;
    font-weight: 600 !important;
    font-size: var(--cod-text-base) !important;
    text-decoration: none !important;
    border: none !important;
    cursor: pointer !important;
    transition: all var(--cod-transition) !important;
    box-shadow: var(--cod-shadow-cta) !important;
}

.cod-btn-primary:hover,
.cod-btn-cta:hover {
    background: var(--cod-secondary-dark) !important;
    color: var(--cod-text-on-secondary) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(242, 140, 40, 0.5) !important;
}

/* 🔹 Botón Secundario (Outline) */
.cod-btn-secondary,
.cod-btn-outline {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    background: transparent !important;
    color: var(--cod-primary) !important;
    padding: 12px 24px !important;
    border: 2px solid var(--cod-primary) !important;
    border-radius: var(--cod-radius) !important;
    font-family: var(--cod-font-primary) !important;
    font-weight: 600 !important;
    font-size: var(--cod-text-base) !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all var(--cod-transition) !important;
}

.cod-btn-secondary:hover,
.cod-btn-outline:hover {
    background: var(--cod-primary) !important;
    color: var(--cod-text-on-primary) !important;
}

/* Botón sobre fondo oscuro */
.cod-bg-dark .cod-btn-secondary,
.cod-bg-dark .cod-btn-outline {
    color: var(--cod-white) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.cod-bg-dark .cod-btn-secondary:hover,
.cod-bg-dark .cod-btn-outline:hover {
    background: var(--cod-white) !important;
    color: var(--cod-primary) !important;
    border-color: var(--cod-white) !important;
}

/* Botón blanco (para fondos color) */
.cod-btn-white {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    background: var(--cod-white) !important;
    color: var(--cod-primary) !important;
    padding: 12px 24px !important;
    border-radius: var(--cod-radius) !important;
    font-family: var(--cod-font-primary) !important;
    font-weight: 600 !important;
    font-size: var(--cod-text-base) !important;
    text-decoration: none !important;
    border: none !important;
    cursor: pointer !important;
    transition: all var(--cod-transition) !important;
}

.cod-btn-white:hover {
    background: var(--cod-neutral-light) !important;
    color: var(--cod-primary) !important;
    transform: translateY(-2px) !important;
}

/* Tamaños de botón */
.cod-btn-lg {
    padding: 16px 32px !important;
    font-size: var(--cod-text-lg) !important;
}

.cod-btn-sm {
    padding: 8px 16px !important;
    font-size: var(--cod-text-sm) !important;
}

.cod-btn-full {
    width: 100% !important;
}

/* ============================================
   6️⃣ CARDS
   ============================================ */

.cod-card {
    background: var(--cod-white) !important;
    border-radius: var(--cod-radius-lg) !important;
    border: 1px solid var(--cod-border-light) !important;
    padding: var(--cod-space-8) !important;
    box-shadow: var(--cod-shadow-md) !important;
    transition: all var(--cod-transition) !important;
}

.cod-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--cod-shadow-lg) !important;
}

/* Card destacada */
.cod-card-featured {
    border: 2px solid var(--cod-secondary) !important;
    box-shadow: 0 0 0 4px rgba(242, 140, 40, 0.1) !important;
}

/* ============================================
   7️⃣ FORMULARIOS
   ============================================ */

.cod-input,
.cod-form-control {
    width: 100% !important;
    padding: 10px 16px !important;
    border: 1px solid var(--cod-border) !important;
    border-radius: var(--cod-radius-sm) !important;
    font-family: var(--cod-font-secondary) !important;
    font-size: var(--cod-text-base) !important;
    color: var(--cod-text-primary) !important;
    background: var(--cod-white) !important;
    transition: all var(--cod-transition-fast) !important;
}

.cod-input:focus,
.cod-form-control:focus {
    outline: none !important;
    border-color: var(--cod-secondary) !important;
    box-shadow: 0 0 0 3px rgba(242, 140, 40, 0.2) !important;
}

.cod-input::placeholder {
    color: var(--cod-text-muted) !important;
}

/* ============================================
   8️⃣ SECCIONES
   ============================================ */

.cod-section {
    padding: var(--cod-space-24) 0 !important;
}

.cod-section-sm {
    padding: var(--cod-space-16) 0 !important;
}

.cod-section-lg {
    padding: var(--cod-space-24) 0 !important;
}

/* Sección con fondo alterno */
.cod-section-alt {
    background: var(--cod-bg-alt) !important;
}

/* Sección con fondo oscuro - CONTRASTE CORREGIDO */
.cod-section-dark {
    background: var(--cod-gradient-dark) !important;
}

.cod-section-dark h1,
.cod-section-dark h2,
.cod-section-dark h3,
.cod-section-dark h4,
.cod-section-dark h5,
.cod-section-dark h6,
.cod-section-dark .cod-h1,
.cod-section-dark .cod-h2,
.cod-section-dark .cod-h3 {
    color: var(--cod-white) !important;
}

.cod-section-dark p,
.cod-section-dark span,
.cod-section-dark li,
.cod-section-dark .cod-text {
    color: rgba(255, 255, 255, 0.85) !important;
}

.cod-section-dark .cod-text-muted {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Header de sección */
.cod-section-header {
    text-align: center !important;
    max-width: 700px !important;
    margin: 0 auto var(--cod-space-16) !important;
}

.cod-section-header h2 {
    margin-bottom: var(--cod-space-4) !important;
}

.cod-section-header p {
    color: var(--cod-text-muted) !important;
    font-size: var(--cod-text-lg) !important;
}

/* ============================================
   9️⃣ BADGES Y TAGS
   ============================================ */

.cod-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 16px !important;
    border-radius: var(--cod-radius-full) !important;
    font-size: var(--cod-text-sm) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.cod-badge-primary {
    background: rgba(242, 140, 40, 0.1) !important;
    color: var(--cod-secondary-dark) !important;
}

.cod-badge-dark {
    background: rgba(36, 35, 50, 0.1) !important;
    color: var(--cod-primary) !important;
}

/* Badge sobre fondo oscuro */
.cod-section-dark .cod-badge,
.cod-bg-dark .cod-badge {
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--cod-secondary) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Badge de descuento */
.cod-badge-discount {
    background: var(--cod-secondary) !important;
    color: var(--cod-white) !important;
    padding: 4px 12px !important;
    font-size: var(--cod-text-xs) !important;
}

/* ============================================
   🔟 ÍCONOS
   ============================================ */

.cod-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.cod-icon svg {
    width: 24px !important;
    height: 24px !important;
}

.cod-icon-sm svg {
    width: 16px !important;
    height: 16px !important;
}

.cod-icon-lg svg {
    width: 32px !important;
    height: 32px !important;
}

/* Colores de íconos */
.cod-icon-primary svg {
    color: var(--cod-primary) !important;
}

.cod-icon-secondary svg {
    color: var(--cod-secondary) !important;
}

/* Feature icon */
.cod-feature-icon {
    width: 56px !important;
    height: 56px !important;
    border-radius: var(--cod-radius-lg) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: var(--cod-space-5) !important;
    background: rgba(242, 140, 40, 0.1) !important;
}

.cod-feature-icon svg {
    width: 28px !important;
    height: 28px !important;
    color: var(--cod-secondary) !important;
}

/* ============================================
   UTILIDADES
   ============================================ */

/* Texto centrado */
.cod-text-center { text-align: center !important; }
.cod-text-left { text-align: left !important; }
.cod-text-right { text-align: right !important; }

/* Flex */
.cod-flex { display: flex !important; }
.cod-flex-center { align-items: center !important; justify-content: center !important; }
.cod-flex-between { justify-content: space-between !important; }
.cod-flex-wrap { flex-wrap: wrap !important; }
.cod-gap-2 { gap: var(--cod-space-2) !important; }
.cod-gap-4 { gap: var(--cod-space-4) !important; }
.cod-gap-6 { gap: var(--cod-space-6) !important; }
.cod-gap-8 { gap: var(--cod-space-8) !important; }

/* Márgenes */
.cod-mt-4 { margin-top: var(--cod-space-4) !important; }
.cod-mt-8 { margin-top: var(--cod-space-8) !important; }
.cod-mb-4 { margin-bottom: var(--cod-space-4) !important; }
.cod-mb-8 { margin-bottom: var(--cod-space-8) !important; }

/* ============================================
   RESPONSIVE GENERAL
   ============================================ */

@media (max-width: 991px) {
    :root {
        --cod-text-6xl: 36px;
        --cod-text-7xl: 42px;
    }
    
    .cod-section {
        padding: var(--cod-space-16) 0 !important;
    }
}

@media (max-width: 767px) {
    :root {
        --cod-text-6xl: 32px;
        --cod-text-7xl: 36px;
        --cod-text-4xl: 28px;
        --cod-text-5xl: 32px;
    }
    
    .cod-section {
        padding: var(--cod-space-12) 0 !important;
    }
    
    .cod-btn-primary,
    .cod-btn-secondary {
        width: 100% !important;
        justify-content: center !important;
    }
}

@media (max-width: 480px) {
    :root {
        --cod-text-6xl: 28px;
        --cod-text-7xl: 32px;
    }
    
    .cod-section {
        padding: var(--cod-space-10) 0 !important;
    }
}