/*
Theme Name:   Recursos Value Investing Child
Description:  Tema hijo personalizado para la plataforma Recursos VI.
Author:       Antigravity & Pedro
Template:     kadence
Version:      1.0.0
*/

/* ==========================================================================
   1. SISTEMA DE DISEÑO (VARIABLES CSS)
   ========================================================================== */
:root {
    /* Paleta de Colores Principales */
    --vi-primary-dark: #0f172a;     /* slate-900: Fondos oscuros unificados, cabeceras */
    --vi-primary-darker: #1e293b;   /* slate-800: Para gradientes */
    --vi-accent: #c2410c;           /* orange-700: CTAs principales, enlaces */
    --vi-accent-hover: #a83a0c;     /* orange-800: Hover de botones */
    --vi-bg-main: #f8fafc;          /* slate-50: Fondo general del sitio */
    --vi-bg-card: #ffffff;          /* Fondo de tarjetas */
    --vi-border-subtle: #e2e8f0;    /* slate-200: Lineas divisorias */
    --vi-text-main: #334155;        /* slate-700: Texto de cuerpo */
    --vi-text-light: #94a3b8;       /* slate-400: Textos secundarios */
    
    /* Tipografía */
    --vi-font-heading: 'Outfit', sans-serif;
    --vi-font-body: 'Inter', sans-serif;
    
    /* Sombras y Radios */
    --vi-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --vi-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --vi-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --vi-radius-md: 8px;
    --vi-radius-lg: 12px;
    --vi-radius-xl: 16px;
}

/* ==========================================================================
   2. CONFIGURACIÓN BASE Y TIPOGRAFÍA
   ========================================================================== */
html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--vi-bg-main);
    color: var(--vi-text-main);
    font-family: var(--vi-font-body);
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6,
.entry-title, .kadence-title {
    font-family: var(--vi-font-heading);
    color: var(--vi-primary-dark);
}

/* ==========================================================================
   3. ELEMENTOS DE UI Y TARJETAS
   ========================================================================== */
/* Botones principales */
.btn-vi-primary,
.wp-block-button__link {
    background-color: var(--vi-accent) !important;
    color: #ffffff !important;
    border-radius: var(--vi-radius-md) !important;
    font-weight: 700 !important;
    transition: all 0.3s ease-in-out !important;
    border: none !important;
}

.btn-vi-primary:hover,
.wp-block-button__link:hover {
    background-color: var(--vi-accent-hover) !important;
    transform: scale(0.98);
}

/* Tarjetas (Cards) */
.vi-card {
    background-color: var(--vi-bg-card);
    border-radius: var(--vi-radius-xl);
    border: 1px solid var(--vi-border-subtle);
    box-shadow: var(--vi-shadow-md);
    padding: 2rem;
    transition: all 0.3s ease;
}

.vi-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--vi-shadow-hover);
    border-color: var(--vi-primary-dark);
}

/* Sección Hero (Fondo) */
.vi-hero-section {
    background: linear-gradient(135deg, var(--vi-primary-dark) 0%, var(--vi-primary-darker) 100%);
    color: #ffffff;
}

.vi-hero-section h1, 
.vi-hero-section h2, 
.vi-hero-section p {
    color: #ffffff;
}