/*
============================================
ESTILOS: PAGOS SIN IDENTIFICAR
============================================
Hoja de estilos para la seccion de pagos
sin identificar de Cooindegabo.

INDICE:
1. Variables CSS (colores, tamanos, espaciados)
2. Reset y estilos base
3. Hero Banner
4. Seccion de contenido
5. Bloque de texto
6. Contenedor de imagen
7. Media Queries (responsive)

PARA MODIFICAR RAPIDAMENTE:
- Colores: Editar variables en :root
- Tamanos: Editar variables de spacing y sizing
- Tipografia: Editar variables de font
============================================
*/

/* ============================================
   1. VARIABLES CSS
   ============================================
   Todas las variables personalizables del diseno
   Modifica estos valores para cambiar el aspecto
   general de la seccion
============================================ */
:root {
    /* ------------------------------------------
       COLORES PRINCIPALES
       ------------------------------------------ */
    /* Color verde principal de Cooindegabo */
    --color-primary: #388e3c;
    /* Verde oscuro para hover y acentos */
    --color-primary-dark: #2e7d32;
    /* Verde claro para fondos suaves */
    --color-primary-light: #4caf50;
    
    /* ------------------------------------------
       COLORES DE FONDO
       ------------------------------------------ */
    /* Fondo principal de la seccion */
    --color-bg-section: #f8f9fa;
    /* Fondo blanco para cards */
    --color-bg-white: #ffffff;
    /* Fondo gris claro alternativo */
    --color-bg-light: #e8f5e9;
    
    /* ------------------------------------------
       COLORES DE TEXTO
       ------------------------------------------ */
    /* Texto principal oscuro */
    --color-text-dark: #1a1a2e;
    /* Texto secundario gris */
    --color-text-gray: #555555;
    /* Texto claro para fondos oscuros */
    --color-text-light: #ffffff;
    
    /* ------------------------------------------
       COLORES DE ENLACE
       ------------------------------------------ */
    /* Color del enlace de correo */
    --color-link: #1976d2;
    /* Color hover del enlace */
    --color-link-hover: #1565c0;
    
    /* ------------------------------------------
       TAMANOS DE IMAGEN
       Modifica estos valores para cambiar
       las dimensiones de la imagen principal
       ------------------------------------------ */
    /* Ancho de la imagen (768px solicitado) */
    --imagen-width: 768px;
    /* Alto de la imagen (550px solicitado) */
    --imagen-height: 550px;
    
    /* ------------------------------------------
       ESPACIADOS
       ------------------------------------------ */
    --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
       ------------------------------------------ */
    /* Familia de fuentes principal */
    --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* Tamanos de fuente */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-base: 1rem;     /* 16px */
    --font-size-md: 1.125rem;   /* 18px */
    --font-size-lg: 1.5rem;     /* 24px */
    --font-size-xl: 2rem;       /* 32px */
    --font-size-xxl: 2.5rem;    /* 40px */
    
    /* ------------------------------------------
       EFECTOS
       ------------------------------------------ */
    /* Bordes redondeados */
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 16px;
    /* Sombras */
    --box-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --box-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
    --box-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.15);
    /* Transiciones */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
}

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

body {
    font-family: var(--font-family);
    line-height: 1.6;
    color: var(--color-text-dark);
}

/* ============================================
   3. HERO BANNER
   ============================================
   Banner superior con fondo verde y parallax
   
   PARA MODIFICAR:
   - Imagen de fondo: Cambiar url() en background-image
   - Altura: Cambiar min-height
   - Color overlay: Cambiar rgba en ::before
============================================ */
.hero-pagos {
    /* Altura minima del hero */
    /* MODIFICAR: Cambiar valor para ajustar altura */
    min-height: 300px;
    
    /* Imagen de fondo */
    /* MODIFICAR: Cambiar url por tu imagen */
    background-image: url('imagens-web/heros/hero-pagos-sin.png');
    background-size: cover;
    background-position: center;
    /* Efecto parallax - cambiar a scroll para desactivar */
    background-attachment: fixed;
    
    /* Posicionamiento para overlay */
    position: relative;
    
    /* Centrado del contenido */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Overlay verde semi-transparente */
/* MODIFICAR: Cambiar rgba para ajustar color y opacidad */
.hero-pagos::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Color verde con 85% de opacidad */
    background: linear-gradient(
        135deg,
        rgba(56, 142, 60, 0.9) 0%,
        rgba(46, 125, 50, 0.50) 100%
    );
    z-index: 1;
}

/* Contenido del hero */
.hero-pagos-content {
    position: relative;
    z-index: 2;
    padding: var(--spacing-lg);
    max-width: 800px;
}

/* Titulo del hero */
/* MODIFICAR: Cambiar font-size, color, text-shadow */
.hero-pagos-title {
    font-size: var(--font-size-xxl);
    font-weight: 700;
    color: var(--color-text-light);
    margin-bottom: var(--spacing-sm);
    /* Sombra de texto para mejor legibilidad */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

/* Descripcion del hero */
/* MODIFICAR: Cambiar font-size, opacity */
.hero-pagos-description {
    font-size: var(--font-size-md);
    color: var(--color-text-light);
    opacity: 0.95;
}

/* ============================================
   4. SECCION DE CONTENIDO
   ============================================
   Contenedor principal del contenido
   
   PARA MODIFICAR:
   - Color de fondo: Cambiar background
   - Espaciado: Cambiar padding
============================================ */
.pagos-content-section {
    /* Color de fondo de la seccion */
    /* MODIFICAR: Cambiar color aqui */
    background-color: var(--color-bg-section);
    
    /* Espaciado interno */
    /* MODIFICAR: Ajustar padding para mas/menos espacio */
    padding: var(--spacing-xxl) var(--spacing-lg);
}

/* Contenedor con ancho maximo */
/* MODIFICAR: Cambiar max-width para ajustar ancho */
.pagos-container {
    max-width: 900px;
    margin: 0 auto;
}

/* ============================================
   5. BLOQUE DE TEXTO
   ============================================
   Contiene el titulo y los parrafos informativos
   
   PARA MODIFICAR:
   - Alineacion: Cambiar text-align
   - Espaciado: Cambiar margin-bottom
============================================ */
.pagos-info-block {
    /* Alineacion del texto */
    /* MODIFICAR: left, center, right, justify */
    text-align: center;
    
    /* Espaciado inferior */
    margin-bottom: var(--spacing-xl);
}

/* Titulo principal de la seccion */
/* MODIFICAR: font-size, color, margin-bottom */
.pagos-main-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: var(--spacing-md);
    
    /* Linea decorativa debajo del titulo */
    position: relative;
    padding-bottom: var(--spacing-sm);
}

/* Linea decorativa bajo el titulo */
/* MODIFICAR: width, height, background para cambiar la linea */
.pagos-main-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    /* Ancho de la linea */
    width: 80px;
    /* Grosor de la linea */
    height: 4px;
    /* Color de la linea */
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
    border-radius: 2px;
}

/* Parrafos de texto */
/* MODIFICAR: font-size, color, line-height, margin-bottom */
.pagos-text {
    font-size: var(--font-size-md);
    color: var(--color-text-gray);
    line-height: 1.8;
    margin-bottom: var(--spacing-sm);
    /* Ancho maximo para mejor legibilidad */
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* Parrafo con accion (el del correo) */
/* MODIFICAR: background, padding, border-radius */
.pagos-text-action {
    background-color: var(--color-bg-light);
    padding: var(--spacing-md);
    border-radius: var(--border-radius-md);
    border-left: 4px solid var(--color-primary);
    margin-top: var(--spacing-md);
}

/* Enlace del correo electronico */
/* MODIFICAR: color, font-weight */
.pagos-email-link {
    color: var(--color-link);
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition-fast);
    /* Subrayado animado */
    position: relative;
}

/* Subrayado animado del enlace */
.pagos-email-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-link-hover);
    transition: var(--transition-normal);
}

/* Hover del enlace */
.pagos-email-link:hover {
    color: var(--color-link-hover);
}

.pagos-email-link:hover::after {
    width: 100%;
}

/* ============================================
   6. CONTENEDOR DE IMAGEN
   ============================================
   Imagen centrada con los pagos sin identificar
   
   PARA MODIFICAR DIMENSIONES:
   - Ancho: Cambiar --imagen-width en :root
   - Alto: Cambiar --imagen-height en :root
   
   PARA MODIFICAR ESTILOS:
   - Sombra: Cambiar box-shadow
   - Bordes: Cambiar border-radius
   - Borde: Agregar/modificar border
============================================ */
.pagos-imagen-container {
    /* Centrado de la imagen */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Imagen principal */
.pagos-imagen {
    /* Dimensiones de la imagen */
    /* MODIFICAR: Cambiar variables en :root o valores directos aqui */
    width: var(--imagen-width);
    height: var(--imagen-height);
    max-width: 100%; /* Responsivo: no excede el contenedor */
    
    /* Ajuste de la imagen */
    /* MODIFICAR: cover, contain, fill, none */
    object-fit: contain;
    
    /* Bordes redondeados */
    /* MODIFICAR: Cambiar valor para mas/menos redondeo */
    border-radius: var(--border-radius-md);
    
    /* Sombra */
    /* MODIFICAR: Cambiar valores para diferente sombra */
    box-shadow: var(--box-shadow-lg);
    
    /* Borde opcional */
    /* MODIFICAR: Descomentar y ajustar para agregar borde */
    /* border: 2px solid var(--color-primary); */
    
    /* Fondo en caso de imagen transparente */
    background-color: var(--color-bg-white);
    
    /* Transicion para efectos hover */
    transition: var(--transition-normal);
}

/* Efecto hover en la imagen */
/* MODIFICAR: Cambiar transform y box-shadow */
.pagos-imagen:hover {
    /* Leve elevacion al hover */
    transform: translateY(-4px);
    box-shadow: var(--box-shadow-lg), 0 12px 40px rgba(56, 142, 60, 0.15);
}

/* Pie de imagen / Caption */
/* MODIFICAR: font-size, color, margin-top */
.pagos-imagen-caption {
    font-size: var(--font-size-sm);
    color: var(--color-text-gray);
    margin-top: var(--spacing-md);
    font-style: italic;
    /* Icono de calendario opcional */
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

/* Icono antes del caption (opcional) */
/* MODIFICAR: Descomentar para agregar icono */
/*
.pagos-imagen-caption::before {
    content: '📅';
}
*/

/* ============================================
   7. MEDIA QUERIES (RESPONSIVE)
   ============================================
   Ajustes para diferentes tamanos de pantalla
   
   BREAKPOINTS:
   - 992px: Tablets grandes y laptops pequenas
   - 768px: Tablets
   - 576px: Moviles grandes
   - 480px: Moviles pequenos
============================================ */

/* Tablets grandes y laptops pequenas */
@media (max-width: 992px) {
    /* Reducir altura del hero */
    .hero-pagos {
        min-height: 250px;
        /* Desactivar parallax en tablets */
        background-attachment: scroll;
    }
    
    /* Reducir tamano del titulo hero */
    .hero-pagos-title {
        font-size: 2rem;
    }
    
    /* Ajustar espaciado de la seccion */
    .pagos-content-section {
        padding: var(--spacing-xl) var(--spacing-md);
    }
}

/* Tablets */
@media (max-width: 768px) {
    /* Reducir altura del hero */
    .hero-pagos {
        min-height: 220px;
    }
    
    /* Reducir tamano del titulo hero */
    .hero-pagos-title {
        font-size: 1.75rem;
    }
    
    /* Reducir descripcion hero */
    .hero-pagos-description {
        font-size: 1rem;
    }
    
    /* Reducir tamano del titulo principal */
    .pagos-main-title {
        font-size: 1.5rem;
    }
    
    /* Reducir tamano del texto */
    .pagos-text {
        font-size: 1rem;
    }
    
    /* Imagen se adapta al ancho disponible */
    .pagos-imagen {
        width: 100%;
        height: auto;
        /* Mantener altura maxima proporcional */
        max-height: 450px;
    }
}

/* Moviles grandes */
@media (max-width: 576px) {
    /* Reducir altura del hero */
    .hero-pagos {
        min-height: 200px;
    }
    
    /* Titulo hero mas pequeno */
    .hero-pagos-title {
        font-size: 1.5rem;
    }
    
    /* Reducir espaciado */
    .pagos-content-section {
        padding: var(--spacing-lg) var(--spacing-sm);
    }
    
    /* Titulo principal mas pequeno */
    .pagos-main-title {
        font-size: 1.25rem;
    }
    
    /* Parrafo de accion con menos padding */
    .pagos-text-action {
        padding: var(--spacing-sm);
    }
    
    /* Imagen con altura maxima menor */
    .pagos-imagen {
        max-height: 350px;
        border-radius: var(--border-radius-sm);
    }
}

/* Moviles pequenos */
@media (max-width: 480px) {
    /* Hero muy compacto */
    .hero-pagos {
        min-height: 180px;
    }
    
    /* Titulo hero minimo */
    .hero-pagos-title {
        font-size: 1.25rem;
    }
    
    /* Descripcion hero mas pequena */
    .hero-pagos-description {
        font-size: 0.875rem;
    }
    
    /* Imagen con altura maxima minima */
    .pagos-imagen {
        max-height: 280px;
    }
    
    /* Caption mas pequeno */
    .pagos-imagen-caption {
        font-size: 0.75rem;
    }
}

/* ============================================
   8. ANIMACIONES (OPCIONAL)
   ============================================
   Animaciones de entrada para los elementos
   
   PARA ACTIVAR: Agregar clase 'animate' via JS
   PARA DESACTIVAR: Eliminar o comentar esta seccion
============================================ */

/* Animacion de fade in hacia arriba */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Clase para elementos animados */
.animate-fade-in {
    animation: fadeInUp 0.6s ease forwards;
}

/* Retraso escalonado para multiples elementos */
.animate-delay-1 { animation-delay: 0.1s; }
.animate-delay-2 { animation-delay: 0.2s; }
.animate-delay-3 { animation-delay: 0.3s; }

/* Estado inicial antes de animar */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
}

/* Estado visible despues de animar */
.animate-on-scroll.visible {
    animation: fadeInUp 0.6s ease forwards;
}
#header-container {
    position: sticky;
    top: 0;
    z-index: 1000;
}