/* =============================================
   ESTILOS FOGACOOP - SEGURO DE DEPOSITOS
   =============================================
   Archivo de estilos para la seccion de FOGACOOP
   con fondo azul claro y elementos centrados
   
   INDICE:
   1. Variables CSS (colores, espaciado, fuentes)
   2. Estilos de la seccion principal
   3. Logo
   4. Titulo
   5. Card informativa
   6. Texto de cobertura
   7. Badge de seguridad
   8. Animaciones
   9. Responsive Design
   ============================================= */

/* =============================================
   1. VARIABLES CSS
   =============================================
   PARA CAMBIAR COLORES:
   - --color-fondo: Color de fondo azul claro
   - --color-primario: Color azul principal
   - --color-acento: Color para resaltar ($50 millones)
   - --color-texto: Color del texto principal
   ============================================= */
:root {
    /* COLORES PRINCIPALES */
    /* Fondo azul claro de la seccion */
    --color-fondo: #e3f2fd;
    /* Azul principal para titulos y acentos */
    --color-primario: #1565c0;
    /* Azul oscuro para texto destacado */
    --color-primario-oscuro: #0d47a1;
    /* Verde para el monto destacado - CAMBIAR AQUI para otro color */
    --color-acento: #2e7d32;
    /* Color dorado alternativo para el monto */
    --color-acento-dorado: #f9a825;
    /* Texto principal */
    --color-texto: #333333;
    /* Texto secundario */
    --color-texto-claro: #666666;
    /* Fondo de la card */
    --color-card: #ffffff;

    /* ESPACIADO */
    --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 */

    /* TIPOGRAFIA */
    --font-familia: '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: 2.5rem;

    /* BORDES Y SOMBRAS */
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 20px;
    --box-shadow: 0 10px 40px rgba(21, 101, 192, 0.15);
    --box-shadow-hover: 0 15px 50px rgba(21, 101, 192, 0.25);

    /* TRANSICIONES */
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* =============================================
   2. SECCION PRINCIPAL
   =============================================
   Contenedor principal con fondo azul claro
   
   PARA CAMBIAR EL FONDO:
   - Modificar background en .fogacoop-section
   - Puede ser color solido, gradiente o imagen
   ============================================= */
.fogacoop-section {
    /* Fondo azul claro - CAMBIAR AQUI para otro color */
    background: linear-gradient(180deg, var(--color-fondo) 0%, #bbdefb 100%);
    
    /* Espaciado interno */
    padding: var(--spacing-xxl) var(--spacing-md);
    
    /* Altura minima para que la seccion tenga presencia */
    min-height: 100vh;
    
    /* Flexbox para centrar contenido verticalmente */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Fuente base */
    font-family: var(--font-familia);
    
    /* Posicion relativa para elementos decorativos */
    position: relative;
    overflow: hidden;
}

/* Patron decorativo de fondo (opcional) */
.fogacoop-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Patron de circulos sutiles */
    background-image: 
        radial-gradient(circle at 20% 80%, rgba(21, 101, 192, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(21, 101, 192, 0.05) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* =============================================
   3. CONTENEDOR PRINCIPAL
   ============================================= */
.fogacoop-container {
    /* Ancho maximo del contenido */
    max-width: 900px;
    width: 100%;
    
    /* Centrar horizontalmente */
    margin: 0 auto;
    
    /* Alineacion del contenido */
    text-align: center;
    
    /* Posicion sobre el patron de fondo */
    position: relative;
    z-index: 1;
}

/* =============================================
   4. LOGO FOGACOOP
   =============================================
   PARA CAMBIAR TAMAÑO DEL LOGO:
   - Modificar max-width en .fogacoop-logo
   - Ajustar margin-bottom para espaciado
   ============================================= */
.logo-container {
    /* Espaciado inferior */
    margin-bottom: var(--spacing-lg);
}

.fogacoop-logo {
    /* Tamaño maximo del logo - CAMBIAR AQUI */
    max-width: 200px;
    width: 100%;
    height: auto;
    
    /* Animacion de entrada */
    animation: fadeInDown 0.8s ease-out;
    
    /* Filtro para dar sombra sutil */
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
    
    /* Transicion para hover */
    transition: transform var(--transition-normal);
}

/* Efecto hover en el logo */
.fogacoop-logo:hover {
    transform: scale(1.05);
}

/* =============================================
   5. TITULO PRINCIPAL
   =============================================
   PARA MODIFICAR ESTILOS DEL TITULO:
   - font-size: Cambiar tamaño
   - color: Cambiar color del texto
   - .fogacoop-highlight: Estilo del texto "FOGACOOP"
   ============================================= */
.fogacoop-title {
    /* Tamaño de fuente grande */
    font-size: var(--font-size-hero);
    
    /* Color del texto */
    color: var(--color-primario-oscuro);
    
    /* Peso de fuente */
    font-weight: 700;
    
    /* Espaciado entre letras */
    letter-spacing: -0.5px;
    
    /* Espaciado inferior */
    margin-bottom: var(--spacing-lg);
    
    /* Altura de linea */
    line-height: 1.2;
    
    /* Animacion de entrada */
    animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

/* Texto "FOGACOOP" resaltado */
.fogacoop-highlight {
    /* Mostrar en bloque para que este debajo */
    display: block;
    
    /* Color azul principal */
    color: var(--color-primario);
    
    /* Tamaño mas grande */
    font-size: 1.2em;
    
    /* Espaciado superior */
    margin-top: var(--spacing-xs);
    
    /* Gradiente de texto (efecto moderno) */
    background: linear-gradient(135deg, var(--color-primario) 0%, var(--color-primario-oscuro) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* =============================================
   6. CARD INFORMATIVA
   =============================================
   Card blanca con sombra que contiene el texto
   principal y el monto destacado
   
   PARA MODIFICAR:
   - background: Color de fondo de la card
   - box-shadow: Sombra de la card
   - border-radius: Redondez de esquinas
   ============================================= */
.info-card {
    /* Fondo blanco */
    background: var(--color-card);
    
    /* Bordes redondeados */
    border-radius: var(--border-radius-lg);
    
    /* Espaciado interno */
    padding: var(--spacing-xl);
    
    /* Sombra elegante */
    box-shadow: var(--box-shadow);
    
    /* Espaciado inferior */
    margin-bottom: var(--spacing-lg);
    
    /* Borde sutil azul */
    border: 2px solid rgba(21, 101, 192, 0.1);
    
    /* Transicion para hover */
    transition: all var(--transition-normal);
    
    /* Animacion de entrada */
    animation: fadeInUp 0.8s ease-out 0.4s backwards;
}

/* Efecto hover en la card */
.info-card:hover {
    /* Sombra mas pronunciada */
    box-shadow: var(--box-shadow-hover);
    
    /* Elevar ligeramente */
    transform: translateY(-5px);
    
    /* Borde mas visible */
    border-color: rgba(21, 101, 192, 0.2);
}

/* Texto dentro de la card */
.info-text {
    /* Tamaño de fuente */
    font-size: var(--font-size-lg);
    
    /* Color del texto */
    color: var(--color-texto);
    
    /* Altura de linea para legibilidad */
    line-height: 1.8;
    
    /* Sin margen */
    margin: 0;
    
    /* Alineacion justificada */
    text-align: justify;
}

/* =============================================
   MONTO DESTACADO - $50 MILLONES
   =============================================
   PARA CAMBIAR EL ESTILO DEL MONTO:
   - color: Cambiar color del texto
   - background: Cambiar fondo del badge
   - font-size: Cambiar tamaño
   ============================================= */
.monto-destacado {
    /* Color verde para resaltar - CAMBIAR AQUI */
    color: var(--color-acento);
    
    /* Peso de fuente */
    font-weight: 800;
    
    /* Tamaño mas grande */
    font-size: 1.3em;
    
    /* Fondo sutil */
    background: linear-gradient(135deg, rgba(46, 125, 50, 0.1) 0%, rgba(46, 125, 50, 0.05) 100%);
    
    /* Espaciado interno */
    padding: 2px 10px;
    
    /* Bordes redondeados */
    border-radius: 6px;
    
    /* Borde verde sutil */
    border-bottom: 3px solid var(--color-acento);
    
    /* Evitar que se rompa en multiples lineas */
    white-space: nowrap;
    
    /* Animacion de pulso */
    animation: pulse 2s infinite;
}

/* Nombre "Fogacoop" en negrita */
.fogacoop-name {
    color: var(--color-primario);
    font-weight: 700;
}

/* =============================================
   7. TEXTO DE COBERTURA
   =============================================
   Texto en negrita con los productos cubiertos
   
   PARA MODIFICAR:
   - Cambiar colores en .cobertura-text
   - Estilos de productos en .producto
   ============================================= */
.cobertura-container {
    /* Espaciado inferior */
    margin-bottom: var(--spacing-lg);
    
    /* Animacion de entrada */
    animation: fadeInUp 0.8s ease-out 0.6s backwards;
}

.cobertura-text {
    /* Tamaño de fuente */
    font-size: var(--font-size-xl);
    
    /* Color del texto */
    color: var(--color-primario-oscuro);
    
    /* Peso de fuente */
    font-weight: 600;
    
    /* Altura de linea */
    line-height: 1.6;
    
    /* Sin margen */
    margin: 0;
    
    /* Fondo blanco sutil */
    background: rgba(255, 255, 255, 0.7);
    
    /* Espaciado interno */
    padding: var(--spacing-md) var(--spacing-lg);
    
    /* Bordes redondeados */
    border-radius: var(--border-radius-md);
    
    /* Borde izquierdo azul */
    border-left: 5px solid var(--color-primario);
}

/* Productos individuales */
.producto {
    /* Color azul */
    color: var(--color-primario);
    
    /* Peso de fuente */
    font-weight: 700;
    
    /* Transicion para hover */
    transition: color var(--transition-normal);
}

/* Hover en productos */
.producto:hover {
    color: var(--color-primario-oscuro);
    text-decoration: underline;
}

/* =============================================
   8. BADGE DE SEGURIDAD
   =============================================
   Icono decorativo de escudo con texto
   para reforzar el mensaje de proteccion
   
   PARA OCULTAR: display: none;
   ============================================= */
.seguridad-badge {
    /* Flexbox para alinear icono y texto */
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    
    /* Fondo verde sutil */
    background: linear-gradient(135deg, rgba(46, 125, 50, 0.1) 0%, rgba(46, 125, 50, 0.05) 100%);
    
    /* Espaciado interno */
    padding: var(--spacing-sm) var(--spacing-md);
    
    /* Bordes redondeados */
    border-radius: 50px;
    
    /* Borde verde */
    border: 2px solid rgba(46, 125, 50, 0.3);
    
    /* Animacion de entrada */
    animation: fadeInUp 0.8s ease-out 0.8s backwards;
}

/* Icono de escudo */
.shield-icon {
    /* Tamaño del icono */
    width: 32px;
    height: 32px;
    
    /* Color verde */
    stroke: var(--color-acento);
    
    /* Animacion de pulso */
    animation: shieldPulse 2s infinite;
}

/* Texto del badge */
.badge-text {
    /* Color verde */
    color: var(--color-acento);
    
    /* Peso de fuente */
    font-weight: 600;
    
    /* Tamaño de fuente */
    font-size: var(--font-size-base);
}

/* =============================================
   9. ANIMACIONES
   ============================================= */

/* Animacion de entrada desde arriba */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* Animacion de pulso para el monto */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
}

/* Animacion de pulso para el icono de escudo */
@keyframes shieldPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

/* =============================================
   10. RESPONSIVE DESIGN
   =============================================
   Ajustes para diferentes tamaños de pantalla
   
   BREAKPOINTS:
   - 992px: Tablets grandes y desktop pequeño
   - 768px: Tablets
   - 576px: Moviles grandes
   - 480px: Moviles pequeños
   ============================================= */

/* TABLETS GRANDES (992px) */
@media (max-width: 992px) {
    .fogacoop-title {
        font-size: 2rem;
    }
    
    .info-card {
        padding: var(--spacing-lg);
    }
    
    .cobertura-text {
        font-size: var(--font-size-lg);
    }
}

/* TABLETS (768px) */
@media (max-width: 768px) {
    .fogacoop-section {
        padding: var(--spacing-xl) var(--spacing-sm);
        min-height: auto;
    }
    
    .fogacoop-logo {
        max-width: 150px;
    }
    
    .fogacoop-title {
        font-size: 1.75rem;
    }
    
    .info-text {
        font-size: var(--font-size-base);
        text-align: left;
    }
    
    .cobertura-text {
        font-size: var(--font-size-base);
        padding: var(--spacing-sm) var(--spacing-md);
    }
    
    .monto-destacado {
        font-size: 1.2em;
        display: inline;
    }
}

/* MOVILES GRANDES (576px) */
@media (max-width: 576px) {
    .fogacoop-section {
        padding: var(--spacing-lg) var(--spacing-xs);
    }
    
    .fogacoop-logo {
        max-width: 120px;
    }
    
    .fogacoop-title {
        font-size: 1.5rem;
    }
    
    .fogacoop-highlight {
        font-size: 1.1em;
    }
    
    .info-card {
        padding: var(--spacing-md);
        border-radius: var(--border-radius-md);
    }
    
    .info-text {
        line-height: 1.7;
    }
    
    .cobertura-text {
        border-left-width: 3px;
    }
    
    .seguridad-badge {
        flex-direction: column;
        gap: var(--spacing-xs);
        padding: var(--spacing-sm);
    }
    
    .shield-icon {
        width: 28px;
        height: 28px;
    }
    
    .badge-text {
        font-size: 0.875rem;
    }
}

/* MOVILES PEQUEÑOS (480px) */
@media (max-width: 480px) {
    .fogacoop-title {
        font-size: 1.25rem;
    }
    
    .fogacoop-highlight {
        font-size: 1em;
    }
    
    .info-text {
        font-size: 0.9375rem;
    }
    
    .monto-destacado {
        font-size: 1.1em;
        padding: 1px 6px;
    }
    
    .cobertura-text {
        font-size: 0.9375rem;
    }
    
    /* Mostrar productos en lista vertical en moviles */
    .producto {
        display: block;
        margin: var(--spacing-xs) 0;
    }
}

/* =============================================
   11. UTILIDADES ADICIONALES
   ============================================= */

/* Clase para ocultar elementos */
.hidden {
    display: none !important;
}

/* Clase para texto centrado */
.text-center {
    text-align: center !important;
}

/* Clase para quitar animaciones (accesibilidad) */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
#header-container {
    position: sticky;
    top: 0;
    z-index: 1000;
}