/*
============================================
ESTILOS: AHORRO PROGRAMADO COOINDEGABO
============================================
Índice de secciones:
1. Variables CSS (colores, espaciados, fuentes)
2. Estilos generales y reset
3. Hero Banner con Parallax
4. Sección Informativa
5. Lista de Beneficios
6. Botones CTA
7. Media Queries (Responsive)
8. Animaciones
============================================
*/

/* 
============================================
1. VARIABLES CSS
============================================
Modifica estos valores para cambiar colores y espaciados globalmente
*/
:root {
    /* 
    COLORES PRINCIPALES
    ============================================
    --color-primary: Verde principal de Cooindegabo
    --color-primary-dark: Verde oscuro para hover
    --color-primary-light: Verde claro para fondos
    */
    --color-primary: #388e3c;           /* Verde principal */
    --color-primary-dark: #2e7d32;      /* Verde oscuro */
    --color-primary-light: #e8f5e9;     /* Verde muy claro */
    
    /* 
    COLORES SECUNDARIOS
    --color-fogacoop: Azul para el enlace FOGACOOP
    */
    --color-secondary: #1976d2;         /* Azul secundario */
    --color-fogacoop: #1565c0;          /* Azul FOGACOOP */
    --color-fogacoop-hover: #0d47a1;    /* Azul FOGACOOP hover */
    
    /* 
    COLORES DE TEXTO
    */
    --color-text-dark: #1a1a2e;         /* Texto oscuro */
    --color-text-medium: #4a4a4a;       /* Texto medio */
    --color-text-light: #ffffff;        /* Texto claro */
    
    /* 
    COLORES DE FONDO
    */
    --color-bg-white: #ffffff;
    --color-bg-light: #f5f5f5;
    --color-bg-overlay: rgba(46, 125, 50, 0.85); /* Overlay verde */
    
    /* 
    ESPACIADOS
    ============================================
    Modifica para ajustar márgenes y paddings
    */
    --spacing-xs: 0.5rem;    /* 8px */
    --spacing-sm: 1rem;      /* 16px */
    --spacing-md: 1.5rem;    /* 24px */
    --spacing-lg: 2rem;      /* 32px */
    --spacing-xl: 3rem;      /* 48px */
    --spacing-xxl: 4rem;     /* 64px */
    
    /* 
    TIPOGRAFÍA
    */
    --font-primary: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.5rem;
    --font-size-xxl: 2rem;
    --font-size-hero: 3rem;
    
    /* 
    BORDES Y SOMBRAS
    */
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 20px;
    --box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    --box-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.15);
    
    /* 
    TRANSICIONES
    */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* 
============================================
2. ESTILOS GENERALES Y RESET
============================================
*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--color-text-dark);
    background-color: var(--color-bg-white);
}

/* 
============================================
3. HERO BANNER CON PARALLAX
============================================
PARA CAMBIAR LA IMAGEN DE FONDO:
Modifica background-image en .hero-ahorro-programado

PARA AJUSTAR LA VELOCIDAD DEL PARALLAX:
Modifica el valor en el archivo JavaScript (parallaxSpeed)

PARA CAMBIAR LA ALTURA DEL HERO:
Modifica min-height (valores: 50vh, 60vh, 70vh, etc.)
*/
.hero-ahorro-programado {
    position: relative;
    min-height: 60vh;                   /* ALTURA: Cambia este valor */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    
    /* 
    IMAGEN DE FONDO
    ============================================
    Cambia la URL por la ruta de tu imagen
    */
    background-image: url('imagens-web/heros/hero-programado.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;       /* Efecto parallax básico */
}

/* 
OVERLAY DEL HERO
============================================
Capa semi-transparente sobre la imagen para mejorar legibilidad
Para cambiar el color/opacidad, modifica background
*/
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 
    COLOR DEL OVERLAY
    Cambia los valores rgba para ajustar color y transparencia
    Formato: rgba(rojo, verde, azul, opacidad)
    */
    background: linear-gradient(
        135deg,
        rgba(46, 125, 50, 0.9) 0%,      /* Verde oscuro */
        rgba(56, 142, 60, 0.50) 50%,    /* Verde medio */
        rgba(76, 175, 80, 0.8) 100%     /* Verde claro */
    );
    z-index: 1;
}

/* 
CONTENIDO DEL HERO
*/
.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: var(--spacing-lg);
    max-width: 900px;
    
    /* Animación de entrada */
    animation: fadeInUp 1s ease-out;
}

/* 
TÍTULO DEL HERO
============================================
Para cambiar el tamaño, modifica font-size
Para cambiar el color, modifica color
*/
.hero-title {
    font-size: var(--font-size-hero);   /* TAMAÑO: 3rem por defecto */
    font-weight: 700;
    color: var(--color-text-light);     /* COLOR: Blanco */
    margin-bottom: var(--spacing-md);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    line-height: 1.2;
}

/* 
DESCRIPCIÓN DEL HERO
*/
.hero-description {
    font-size: var(--font-size-xl);     /* TAMAÑO: 1.5rem */
    color: rgba(255, 255, 255, 0.95);   /* COLOR: Blanco semi-transparente */
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.8;
}

/* 
============================================
4. SECCIÓN INFORMATIVA
============================================
Sección con dos columnas: contenido e imagen
*/
.info-ahorro-programado {
    padding: var(--spacing-xxl) 0;
    background-color: var(--color-bg-white);
}

.info-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

/* 
GRID DE DOS COLUMNAS
============================================
PARA INVERTIR POSICIONES (imagen a la izquierda):
Opción 1: Cambia grid-template-columns a: 1fr 1fr y agrega a .info-image: order: -1;
Opción 2: Intercambia el orden de los divs en el HTML
*/
.info-grid {
    display: grid;
    /* 
    PROPORCIÓN DE COLUMNAS
    1fr 1fr = 50% - 50%
    1.2fr 0.8fr = 60% - 40%
    Ajusta según necesites
    */
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    align-items: center;
}

/* 
COLUMNA DE CONTENIDO
*/
.info-content {
    padding: var(--spacing-lg);
}

/* 
TÍTULO DE LA SECCIÓN
============================================
Para cambiar color, modifica color
Para cambiar tamaño, modifica font-size
*/
.info-title {
    font-size: var(--font-size-xxl);    /* TAMAÑO: 2rem */
    font-weight: 700;
    color: var(--color-primary);        /* COLOR: Verde */
    margin-bottom: var(--spacing-md);
    line-height: 1.3;
}

/* 
DESCRIPCIÓN DE LA SECCIÓN
*/
.info-description {
    font-size: var(--font-size-lg);     /* TAMAÑO: 1.125rem */
    color: var(--color-text-medium);    /* COLOR: Gris medio */
    margin-bottom: var(--spacing-lg);
    line-height: 1.8;
}

/* 
============================================
5. LISTA DE BENEFICIOS
============================================
*/
.benefits-list {
    list-style: none;
    margin-bottom: var(--spacing-xl);
}

/* 
CADA ITEM DE BENEFICIO
*/
.benefit-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    transition: var(--transition-normal);
}

/* Efecto hover en los items */
.benefit-item:hover {
    background-color: var(--color-primary-light);
    transform: translateX(5px);
}

/* 
ICONO DEL BENEFICIO (Check verde)
============================================
Para cambiar el color del icono, modifica color
Para cambiar el tamaño, modifica width y height
*/
.benefit-icon {
    flex-shrink: 0;
    width: 28px;                        /* TAMAÑO: Ancho del icono */
    height: 28px;                       /* TAMAÑO: Alto del icono */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primary);  /* COLOR FONDO: Verde */
    color: var(--color-text-light);     /* COLOR ICONO: Blanco */
    border-radius: 50%;
    padding: 5px;
}

.benefit-icon svg {
    width: 100%;
    height: 100%;
}

/* 
TEXTO DEL BENEFICIO
*/
.benefit-text {
    font-size: var(--font-size-base);
    color: var(--color-text-medium);
    line-height: 1.6;
}

.benefit-text strong {
    color: var(--color-text-dark);
    font-weight: 600;
}

/* 
ENLACE FOGACOOP RESALTADO
============================================
Estilo especial para el enlace a FOGACOOP
Para cambiar el color, modifica background y color en hover
*/
.fogacoop-link {
    display: inline-block;
    background-color: var(--color-fogacoop);     /* COLOR FONDO: Azul */
    color: var(--color-text-light);              /* COLOR TEXTO: Blanco */
    padding: 2px 10px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition-normal);
}

.fogacoop-link:hover {
    background-color: var(--color-fogacoop-hover); /* COLOR HOVER: Azul oscuro */
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(21, 101, 192, 0.4);
}

/* 
============================================
6. BOTONES CTA
============================================
*/
.cta-buttons {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

/* 
ESTILOS BASE DE BOTONES
*/
.cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-base);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-normal);
    border: 2px solid transparent;
}

.cta-icon {
    width: 20px;
    height: 20px;
}

/* 
BOTÓN PRIMARIO (Verde sólido)
============================================
Para cambiar colores, modifica background y en hover
*/
.cta-primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-text-light);
    border-color: var(--color-primary);
}

.cta-primary:hover {
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, #1b5e20 100%);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(56, 142, 60, 0.4);
}

/* 
BOTÓN SECUNDARIO (Borde verde)
============================================
Para cambiar colores, modifica border-color y color
*/
.cta-secondary {
    background-color: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.cta-secondary:hover {
    background-color: var(--color-primary);
    color: var(--color-text-light);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(56, 142, 60, 0.3);
}

/* 
============================================
COLUMNA DE IMAGEN
============================================
*/
.info-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-container {
    position: relative;
    max-width: 500px;                   /* TAMAÑO MÁXIMO: Ajusta según necesites */
    width: 100%;
}

/* 
IMAGEN PRINCIPAL
============================================
Para cambiar el tamaño, modifica max-width en .image-container
Para cambiar el borde redondeado, modifica border-radius
*/
.main-image {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius-lg);  /* BORDE REDONDEADO */
    box-shadow: var(--box-shadow-hover);
    position: relative;
    z-index: 2;
    transition: var(--transition-normal);
}

.main-image:hover {
    transform: scale(1.02);
}

/* 
DECORACIÓN DETRÁS DE LA IMAGEN
============================================
Elemento decorativo verde detrás de la imagen
Para quitarlo: display: none;
Para cambiar posición: modifica top, left, right, bottom
Para cambiar color: modifica background
*/
.image-decoration {
    position: absolute;
    top: 20px;                          /* POSICIÓN: Distancia desde arriba */
    right: -20px;                       /* POSICIÓN: Distancia desde derecha */
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--color-primary-light) 0%, rgba(56, 142, 60, 0.2) 100%);
    border-radius: var(--border-radius-lg);
    z-index: 1;
}

/* 
============================================
7. MEDIA QUERIES (RESPONSIVE)
============================================
*/

/* 
TABLETS (max-width: 992px)
*/
@media (max-width: 992px) {
    /* Hero más pequeño en tablets */
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-description {
        font-size: 1.25rem;
    }
    
    /* Grid de dos columnas se mantiene pero más compacto */
    .info-grid {
        gap: var(--spacing-lg);
    }
    
    .info-title {
        font-size: 1.75rem;
    }
}

/* 
MÓVILES (max-width: 768px)
============================================
El layout cambia a una sola columna
*/
@media (max-width: 768px) {
    /* Hero ajustado para móviles */
    .hero-ahorro-programado {
        min-height: 50vh;
        background-attachment: scroll;  /* Desactiva parallax en móviles */
    }
    
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-description {
        font-size: 1.1rem;
    }
    
    /* 
    GRID SE CONVIERTE EN UNA COLUMNA
    La imagen aparece primero, luego el contenido
    Para invertir: quita order: -1 de .info-image
    */
    .info-grid {
        grid-template-columns: 1fr;     /* Una sola columna */
        gap: var(--spacing-lg);
    }
    
    /* Imagen aparece primero en móviles */
    .info-image {
        order: -1;                      /* ORDEN: -1 = primero */
    }
    
    .info-content {
        padding: var(--spacing-md);
    }
    
    .info-title {
        font-size: 1.5rem;
    }
    
    /* Botones en columna en móviles */
    .cta-buttons {
        flex-direction: column;
    }
    
    .cta-button {
        width: 100%;
        justify-content: center;
    }
    
    /* Imagen más pequeña en móviles */
    .image-container {
        max-width: 350px;
    }
    
    /* Decoración más sutil en móviles */
    .image-decoration {
        top: 10px;
        right: -10px;
    }
}

/* 
MÓVILES PEQUEÑOS (max-width: 480px)
*/
@media (max-width: 480px) {
    .hero-ahorro-programado {
        min-height: 45vh;
    }
    
    .hero-title {
        font-size: 1.75rem;
    }
    
    .hero-description {
        font-size: 1rem;
    }
    
    .info-ahorro-programado {
        padding: var(--spacing-xl) 0;
    }
    
    .info-container {
        padding: 0 var(--spacing-md);
    }
    
    .info-title {
        font-size: 1.35rem;
    }
    
    .benefit-item {
        padding: var(--spacing-xs);
    }
    
    .benefit-icon {
        width: 24px;
        height: 24px;
    }
    
    .cta-button {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: 0.95rem;
    }
}

/* 
============================================
8. ANIMACIONES
============================================
*/

/* Animación de entrada desde abajo */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* Animación de entrada desde la derecha */
@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Clase para elementos que aparecen con animación */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}
#header-container {
    position: sticky;
    top: 0;
    z-index: 1000;
}