/* ============================================
   SIMULADOR DE AHORRO - COOINDEGABO
   ============================================
   Estilos para la pagina del simulador de ahorro
   
   INDICE DE SECCIONES:
   1. Variables CSS (colores, espaciados, etc.)
   2. Hero Banner con Parallax
   3. Seccion de Importancia del Ahorro
   4. Seccion de Calculadora con Particulas
   5. Estilos de la Calculadora
   6. Estilos de Resultados
   7. Animaciones
   8. Responsive Design
   
   COMO CAMBIAR COLORES:
   - Modifica las variables en :root para cambiar colores globalmente
   - El color verde principal es --color-primary: #388e3c
============================================ */

/* ============================================
   1. VARIABLES CSS
   ============================================
   PARA CAMBIAR COLORES: Modifica estos valores
   Todos los componentes usaran estas variables
*/
:root {
    /* COLORES PRINCIPALES - VERDE COOINDEGABO */
    --color-primary: #388e3c;           /* Verde principal */
    --color-primary-dark: #2e7d32;      /* Verde oscuro para hover */
    --color-primary-light: #4caf50;     /* Verde claro para acentos */
    --color-primary-lighter: #81c784;   /* Verde muy claro */
    --color-primary-bg: #e8f5e9;        /* Verde para fondos suaves */
    
    /* COLORES SECUNDARIOS */
    --color-secondary: #ff9800;         /* Naranja para acentos */
    --color-secondary-dark: #f57c00;    /* Naranja oscuro */
    
    /* COLORES DE TEXTO */
    --color-text-dark: #1a1a2e;         /* Texto principal */
    --color-text-medium: #555555;       /* Texto secundario */
    --color-text-light: #777777;        /* Texto terciario */
    
    /* COLORES DE FONDO */
    --color-bg-light: #f8f9fa;          /* Fondo claro */
    --color-bg-white: #ffffff;          /* Fondo blanco */
    --color-bg-dark: #1a1a2e;           /* Fondo oscuro */
    
    /* ESPACIADOS */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-xxl: 4rem;
    
    /* BORDES */
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 20px;
    --border-radius-xl: 30px;
    
    /* SOMBRAS */
    --box-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --box-shadow-md: 0 4px 15px rgba(0, 0, 0, 0.15);
    --box-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.2);
    
    /* TRANSICIONES */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* ============================================
   2. HERO BANNER CON PARALLAX
   ============================================
   PARA CAMBIAR IMAGEN DE FONDO:
   Modifica background-image en .hero-simulador
   
   PARA CAMBIAR COLOR DEL OVERLAY:
   Modifica el rgba en .hero-simulador::before
   
   PARA CAMBIAR VELOCIDAD PARALLAX:
   Modifica el valor en el JavaScript (parallaxSpeed)
*/
.hero-simulador {
    position: relative;
    min-height: 50vh;              /* ALTURA DEL HERO - Cambia este valor */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    
    /* IMAGEN DE FONDO - Cambia la URL aqui */
    background-image: url('imagens-web/heros/hero-simula-ahorro.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;  /* Efecto parallax basico */
}

/* OVERLAY VERDE - Cambia el rgba para modificar el color */
.hero-simulador::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* COLOR DEL OVERLAY - rgba(56, 142, 60, 0.9) es verde con 90% opacidad */
    background: linear-gradient(
        135deg,
        rgba(56, 142, 60, 0.95) 0%,    /* Verde principal */
        rgba(46, 125, 50, 0.9) 50%,     /* Verde medio */
        rgba(27, 94, 32, 0.50) 100%     /* Verde oscuro */
    );
    z-index: 1;
}

/* Contenido del hero */
.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: var(--spacing-xl);
    max-width: 800px;
    
    /* Animacion de entrada */
    animation: fadeInUp 1s ease-out;
}

/* TITULO DEL HERO - Cambia font-size para el tamano */
.hero-titulo {
    font-size: 3.5rem;             /* TAMANO DEL TITULO */
    font-weight: 800;
    color: var(--color-bg-white);
    margin-bottom: var(--spacing-md);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    letter-spacing: -1px;
}

/* DESCRIPCION DEL HERO */
.hero-descripcion {
    font-size: 1.25rem;            /* TAMANO DE LA DESCRIPCION */
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.8;
    max-width: 600px;
    margin: 0 auto;
}

/* ============================================
   3. SECCION DE IMPORTANCIA DEL AHORRO
   ============================================
   PARA CAMBIAR COLOR DE FONDO:
   Modifica background en .seccion-importancia
*/
.seccion-importancia {
    padding: var(--spacing-xxl) var(--spacing-lg);
    background: linear-gradient(
        to bottom,
        var(--color-bg-white) 0%,
        var(--color-primary-bg) 100%
    );
}

.importancia-container {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    
    /* Animacion al hacer scroll */
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease-out forwards;
}

/* ICONO DECORATIVO */
.importancia-icono {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--spacing-lg);
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--box-shadow-md);
}

.importancia-icono i {
    font-size: 2.5rem;
    color: var(--color-bg-white);
}

/* TEXTO DE IMPORTANCIA */
.importancia-texto {
    font-size: 1.15rem;            /* TAMANO DEL TEXTO */
    line-height: 1.9;
    color: var(--color-text-medium);
    text-align: center;
}

.importancia-texto strong {
    color: var(--color-primary-dark);
    font-weight: 700;
}

/* TEXTO RESALTADO */
.texto-resaltado {
    display: inline-block;
    margin-top: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-md);
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-bg-white);
    border-radius: var(--border-radius-sm);
    font-weight: 600;
}

/* ============================================
   4. SECCION DE CALCULADORA CON PARTICULAS
   ============================================
   PARA CAMBIAR COLOR DE FONDO:
   Modifica background en .seccion-calculadora
   
   PARA CAMBIAR PARTICULAS:
   - Color: Modifica background en .particula
   - Cantidad: Modifica numParticulas en el JS
   - Velocidad: Modifica animation-duration en .particula
*/
.seccion-calculadora {
    position: relative;
    padding: var(--spacing-xxl) var(--spacing-lg);
    min-height: 100vh;
    
    /* FONDO DE LA SECCION - Color base */
    background: linear-gradient(
        135deg,
        #f0f4f0 0%,                /* Gris verdoso muy claro */
        #e8f5e9 50%,               /* Verde muy suave */
        #f0f4f0 100%
    );
    overflow: hidden;
}

/* ============================================
   CONTENEDOR DE PARTICULAS
   ============================================ */
.particulas-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;          /* Permite clics a traves */
    z-index: 0;
}

/* ============================================
   ESTILOS DE PARTICULAS INDIVIDUALES
   ============================================
   PARA CAMBIAR COLOR: Modifica background
   PARA CAMBIAR TAMANO: Modifica width y height
   PARA CAMBIAR VELOCIDAD: Modifica animation-duration
*/
.particula {
    position: absolute;
    border-radius: 50%;
    opacity: 0.6;
    
    /* COLOR DE LAS PARTICULAS - Gradiente verde */
    background: linear-gradient(
        135deg,
        var(--color-primary-light) 0%,
        var(--color-primary) 100%
    );
    
    /* Animacion de flotacion */
    animation: flotar linear infinite;
}

/* Variaciones de tamano para particulas */
.particula.pequena {
    width: 8px;
    height: 8px;
    opacity: 0.4;
}

.particula.mediana {
    width: 15px;
    height: 15px;
    opacity: 0.5;
}

.particula.grande {
    width: 25px;
    height: 25px;
    opacity: 0.3;
}

/* Animacion de flotacion de particulas */
@keyframes flotar {
    0% {
        transform: translateY(100vh) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.6;
    }
    90% {
        opacity: 0.6;
    }
    100% {
        transform: translateY(-100px) rotate(720deg);
        opacity: 0;
    }
}

/* ============================================
   5. ESTILOS DE LA CALCULADORA
   ============================================ */
.calculadora-main-container {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    
    /* LAYOUT: 2 columnas iguales */
    /* PARA CAMBIAR PROPORCIONES: Modifica grid-template-columns */
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    align-items: start;
}

/* CARD DE LA CALCULADORA */
.calculadora-card {
    background: var(--color-bg-white);
    border-radius: var(--border-radius-xl);
    box-shadow: var(--box-shadow-lg);
    overflow: hidden;
    
    /* Animacion de entrada */
    animation: fadeInLeft 0.8s ease-out;
}

/* HEADER DE LA CALCULADORA */
.calculadora-header {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    padding: var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.calculadora-header i {
    font-size: 1.8rem;
    color: var(--color-bg-white);
}

.calculadora-header h2 {
    color: var(--color-bg-white);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
}

/* CUERPO DE LA CALCULADORA */
.calculadora-body {
    padding: var(--spacing-lg);
}

/* GRUPOS DE CAMPOS */
.campo-grupo {
    margin-bottom: var(--spacing-md);
}

.campo-grupo label {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-weight: 600;
    color: var(--color-text-dark);
    margin-bottom: var(--spacing-xs);
    font-size: 0.95rem;
}

.campo-grupo label i {
    color: var(--color-primary);
    font-size: 1rem;
}

/* ESTILOS DE SELECT */
.campo-grupo select {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid #e0e0e0;
    border-radius: var(--border-radius-md);
    font-size: 1rem;
    color: var(--color-text-dark);
    background-color: var(--color-bg-white);
    cursor: pointer;
    transition: all var(--transition-normal);
    
    /* Flecha personalizada */
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23388e3c' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
}

.campo-grupo select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(56, 142, 60, 0.2);
}

/* ESTILOS DE INPUT CON SIMBOLO DE MONEDA */
.input-moneda {
    position: relative;
    display: flex;
    align-items: center;
}

.moneda-simbolo {
    position: absolute;
    left: 16px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-primary);
}

.input-moneda input {
    width: 100%;
    padding: 14px 16px 14px 35px;  /* Padding izquierdo para el simbolo $ */
    border: 2px solid #e0e0e0;
    border-radius: var(--border-radius-md);
    font-size: 1rem;
    color: var(--color-text-dark);
    transition: all var(--transition-normal);
}

.input-moneda input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(56, 142, 60, 0.2);
}

.input-moneda input::placeholder {
    color: #aaa;
}

/* MENSAJE DE ERROR */
.error-message {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: #e53935;
    font-size: 0.85rem;
    margin-top: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    background-color: #ffebee;
    border-radius: var(--border-radius-sm);
}

.error-message i {
    font-size: 0.9rem;
}

/* BOTON CALCULAR */
.btn-calcular {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-bg-white);
    border: none;
    border-radius: var(--border-radius-md);
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    transition: all var(--transition-normal);
    margin-top: var(--spacing-md);
}

.btn-calcular:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(56, 142, 60, 0.4);
}

.btn-calcular:active {
    transform: translateY(0);
}

.btn-calcular i {
    font-size: 1.2rem;
}

/* AVISOS DE LA CALCULADORA */
.calculadora-avisos {
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--color-primary-bg);
    border-top: 1px solid rgba(56, 142, 60, 0.2);
}

.aviso-principal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    color: var(--color-secondary-dark);
    font-size: 1rem;
    margin-bottom: var(--spacing-xs);
}

.aviso-principal i {
    color: var(--color-secondary);
}

.aviso-secundario {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    color: var(--color-text-light);
    font-size: 0.85rem;
    font-style: italic;
}

/* ============================================
   6. ESTILOS DE RESULTADOS
   ============================================ */
.resultados-card {
    background: var(--color-bg-white);
    border-radius: var(--border-radius-xl);
    box-shadow: var(--box-shadow-lg);
    overflow: hidden;
    
    /* Animacion de entrada */
    animation: fadeInRight 0.8s ease-out;
}

/* HEADER DE RESULTADOS */
.resultados-header {
    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
    padding: var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.resultados-header i {
    font-size: 1.8rem;
    color: var(--color-bg-white);
}

.resultados-header h2 {
    color: var(--color-bg-white);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
}

/* CUERPO DE RESULTADOS */
.resultados-body {
    padding: var(--spacing-lg);
    min-height: 300px;
}

/* PLACEHOLDER INICIAL */
.resultados-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 250px;
    text-align: center;
    color: var(--color-text-light);
}

.resultados-placeholder i {
    font-size: 4rem;
    color: #ddd;
    margin-bottom: var(--spacing-md);
    animation: pulso 2s infinite;
}

.resultados-placeholder p {
    font-size: 1rem;
    max-width: 250px;
}

/* ITEMS DE RESULTADO */
.resultado-item {
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    border-radius: var(--border-radius-md);
    background: var(--color-bg-light);
    border-left: 4px solid var(--color-primary);
    transition: all var(--transition-normal);
    
    /* Animacion de entrada */
    animation: fadeInUp 0.5s ease-out;
}

.resultado-item:hover {
    transform: translateX(5px);
    box-shadow: var(--box-shadow-sm);
}

/* Diferentes colores para cada tipo de resultado */
.resultado-tasa {
    border-left-color: #2196f3;    /* Azul */
    background: linear-gradient(to right, rgba(33, 150, 243, 0.1), transparent);
}

.resultado-cuotas {
    border-left-color: var(--color-primary);   /* Verde */
    background: linear-gradient(to right, rgba(56, 142, 60, 0.1), transparent);
}

.resultado-intereses {
    border-left-color: var(--color-secondary); /* Naranja */
    background: linear-gradient(to right, rgba(255, 152, 0, 0.1), transparent);
}

.resultado-total {
    border-left-color: #9c27b0;    /* Morado */
    background: linear-gradient(to right, rgba(156, 39, 176, 0.1), transparent);
}

.resultado-item strong {
    font-size: 1.3rem;
    color: var(--color-text-dark);
    display: block;
    margin-bottom: 4px;
}

.resultado-item span {
    font-size: 0.9rem;
    color: var(--color-text-light);
}

/* CONTENEDOR DEL BOTON DE ACCION */
.boton-accion-container {
    padding: var(--spacing-lg);
    padding-top: 0;
    text-align: center;
}

/* BOTON INICIAR AHORRO */
.btn-iniciar-ahorro {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: 18px 40px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-bg-white);
    text-decoration: none;
    border-radius: var(--border-radius-lg);
    font-size: 1.2rem;
    font-weight: 700;
    transition: all var(--transition-normal);
    box-shadow: var(--box-shadow-md);
    
    /* Animacion de entrada */
    animation: bounceIn 0.6s ease-out;
}

.btn-iniciar-ahorro:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(56, 142, 60, 0.4);
}

.btn-iniciar-ahorro i {
    font-size: 1.3rem;
}

/* ============================================
   7. ANIMACIONES
   ============================================ */

/* Entrada desde abajo */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Entrada desde la izquierda */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Entrada desde la derecha */
@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Efecto pulso */
@keyframes pulso {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

/* Efecto bounce */
@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* ============================================
   8. RESPONSIVE DESIGN
   ============================================
   BREAKPOINTS:
   - 992px: Tablets en landscape
   - 768px: Tablets en portrait
   - 576px: Moviles grandes
   - 480px: Moviles pequenos
*/

/* TABLETS LANDSCAPE (992px) */
@media (max-width: 992px) {
    .calculadora-main-container {
        grid-template-columns: 1fr;  /* Una sola columna */
        max-width: 600px;
    }
    
    .hero-titulo {
        font-size: 2.8rem;
    }
}

/* TABLETS PORTRAIT (768px) */
@media (max-width: 768px) {
    .hero-simulador {
        min-height: 40vh;
    }
    
    .hero-titulo {
        font-size: 2.2rem;
    }
    
    .hero-descripcion {
        font-size: 1.1rem;
    }
    
    .seccion-importancia {
        padding: var(--spacing-xl) var(--spacing-md);
    }
    
    .importancia-texto {
        font-size: 1rem;
    }
    
    .seccion-calculadora {
        padding: var(--spacing-xl) var(--spacing-md);
    }
    
    .calculadora-header h2,
    .resultados-header h2 {
        font-size: 1.25rem;
    }
}

/* MOVILES GRANDES (576px) */
@media (max-width: 576px) {
    .hero-simulador {
        min-height: 35vh;
        background-attachment: scroll; /* Desactiva parallax en moviles */
    }
    
    .hero-content {
        padding: var(--spacing-lg);
    }
    
    .hero-titulo {
        font-size: 1.8rem;
    }
    
    .hero-descripcion {
        font-size: 1rem;
    }
    
    .importancia-icono {
        width: 60px;
        height: 60px;
    }
    
    .importancia-icono i {
        font-size: 1.8rem;
    }
    
    .calculadora-body {
        padding: var(--spacing-md);
    }
    
    .resultados-body {
        padding: var(--spacing-md);
    }
    
    .btn-iniciar-ahorro {
        padding: 14px 24px;
        font-size: 1rem;
        width: 100%;
    }
    
    .resultado-item strong {
        font-size: 1.1rem;
    }
}

/* MOVILES PEQUENOS (480px) */
@media (max-width: 480px) {
    .hero-titulo {
        font-size: 1.5rem;
    }
    
    .calculadora-header,
    .resultados-header {
        padding: var(--spacing-md);
    }
    
    .calculadora-header h2,
    .resultados-header h2 {
        font-size: 1.1rem;
    }
    
    .campo-grupo select,
    .input-moneda input {
        padding: 12px 14px;
        font-size: 0.95rem;
    }
    
    .input-moneda input {
        padding-left: 30px;
    }
    
    .btn-calcular {
        padding: 14px;
        font-size: 1rem;
    }
    
    /* Particulas mas pequenas en moviles */
    .particula.grande {
        width: 15px;
        height: 15px;
    }
    
    .particula.mediana {
        width: 10px;
        height: 10px;
    }
}
#header-container {
    position: sticky;
    top: 0;
    z-index: 1000;
}