/*
============================================
ESTILOS: CANALES DE PAGO - COOINDEGABO
============================================
Indice:
1. Variables CSS (colores, fuentes, espaciados)
2. Estilos generales
3. Hero Banner con Parallax
4. Seccion Pagos Online
5. Tarjetas de Metodos de Pago
6. Seccion Convenios de Recaudo
7. Seccion Red de Agencias
8. Animaciones
9. Media Queries (Responsive)
============================================
*/

/* ============================================
   1. VARIABLES CSS
   ============================================
   Modifica estos valores para cambiar colores
   y estilos en toda la pagina
============================================ */
:root {
    /* COLORES PRINCIPALES
       - Cambia estos valores para modificar la paleta
    */
    --color-verde-primario: #388e3c;      /* Verde Cooindegabo */
    --color-verde-oscuro: #2e7d32;        /* Verde oscuro para hover */
    --color-verde-claro: #4caf50;         /* Verde claro para acentos */
    --color-verde-fondo: #e8f5e9;         /* Verde muy claro para fondos */
    
    --color-gris-fondo: #f5f5f5;          /* Gris claro para secciones */
    --color-gris-borde: #e0e0e0;          /* Gris para bordes */
    --color-gris-texto: #666666;          /* Gris para textos secundarios */
    
    --color-blanco: #ffffff;
    --color-negro: #333333;
    --color-negro-suave: #444444;
    
    /* FUENTES
       - Cambia la familia de fuentes aqui
    */
    --fuente-principal: 'Poppins', sans-serif;
    
    /* ESPACIADOS
       - Modifica para ajustar margenes y paddings
    */
    --espaciado-xs: 0.5rem;    /* 8px */
    --espaciado-sm: 1rem;      /* 16px */
    --espaciado-md: 1.5rem;    /* 24px */
    --espaciado-lg: 2rem;      /* 32px */
    --espaciado-xl: 3rem;      /* 48px */
    --espaciado-xxl: 4rem;     /* 64px */
    
    /* BORDES
       - Radio de bordes para tarjetas y elementos
    */
    --borde-radio-sm: 8px;
    --borde-radio-md: 12px;
    --borde-radio-lg: 16px;
    --borde-radio-xl: 24px;
    
    /* SOMBRAS
       - Efectos de sombra para tarjetas
    */
    --sombra-suave: 0 2px 10px rgba(0, 0, 0, 0.08);
    --sombra-media: 0 4px 20px rgba(0, 0, 0, 0.12);
    --sombra-fuerte: 0 8px 30px rgba(0, 0, 0, 0.15);
    
    /* TRANSICIONES
       - Duracion de animaciones
    */
    --transicion-rapida: 0.2s ease;
    --transicion-normal: 0.3s ease;
    --transicion-lenta: 0.5s ease;
    
    /* PARALLAX
       - Velocidad del efecto parallax (0.1 - 0.5)
    */
    --parallax-velocidad: 0.3;
}

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

body {
    font-family: var(--fuente-principal);
    color: var(--color-negro);
    line-height: 1.6;
    overflow-x: hidden;
}

/* ============================================
   3. HERO BANNER CON PARALLAX
   ============================================
   - Seccion de cabecera con fondo verde
   - Efecto parallax al hacer scroll
   - Para cambiar altura: modifica min-height
============================================ */
.hero-canales {
    position: relative;
    min-height: 400px;           /* ALTURA DEL HERO - Cambia este valor */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    
    /* IMAGEN DE FONDO
       - Cambia la URL por tu imagen
    */
    background-image: url('imagens-web/heros/hero-canales-pago.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;  /* Efecto parallax basico */
}

/* Overlay verde semi-transparente
   - Ajusta el ultimo valor (0.85) para mas/menos transparencia
*/
.hero-canales::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        rgba(56, 142, 60, 0.9) 0%,      /* Verde primario */
        rgba(46, 125, 50, 0.50) 100%    /* Verde oscuro */
    );
    z-index: 1;
}

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

/* Titulo del hero
   - Cambia font-size para ajustar tamano
*/
.hero-title {
    font-size: 3rem;             /* TAMANO DEL TITULO */
    font-weight: 700;
    color: var(--color-blanco);
    margin-bottom: var(--espaciado-md);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    
    /* Animacion de entrada */
    animation: fadeInDown 0.8s ease forwards;
}

/* Descripcion del hero */
.hero-description {
    font-size: 1.2rem;           /* TAMANO DE LA DESCRIPCION */
    color: rgba(255, 255, 255, 0.95);
    max-width: 600px;
    margin: 0 auto;
    
    /* Animacion de entrada con delay */
    animation: fadeInUp 0.8s ease 0.3s forwards;
    opacity: 0;
}

/* ============================================
   4. SECCION PAGOS ONLINE
   ============================================
   - Layout de dos columnas: imagen + contenido
   - Para invertir columnas: agregar clase "reverse"
============================================ */
.pagos-online-section {
    padding: var(--espaciado-xxl) var(--espaciado-lg);
    background-color: var(--color-blanco);
}

.pagos-online-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    
    /* DISTRIBUCION DE COLUMNAS
       - 1fr = imagen, 1.5fr = contenido (mas ancho)
       - Cambia los valores para ajustar proporciones
    */
    grid-template-columns: 1fr 1.5fr;
    gap: var(--espaciado-xl);
    align-items: start;
}

/* PARA INVERTIR POSICIONES (imagen derecha, contenido izquierda)
   Descomenta estas lineas:
*/
/*
.pagos-online-container.reverse {
    direction: rtl;
}
.pagos-online-container.reverse > * {
    direction: ltr;
}
*/

/* Contenedor de imagen */
.pagos-imagen {
    position: relative;
}

.pagos-imagen img {
    width: 100%;
    max-width: 450px;            /* TAMANO MAXIMO DE LA IMAGEN */
    height: auto;
    border-radius: var(--borde-radio-lg);
    box-shadow: var(--sombra-media);
    transition: transform var(--transicion-normal);
}

.pagos-imagen img:hover {
    transform: scale(1.02);
}

/* Decoracion detras de la imagen */
.imagen-decoracion {
    position: absolute;
    top: -20px;
    left: -20px;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--color-verde-primario), var(--color-verde-claro));
    border-radius: var(--borde-radio-lg);
    z-index: -1;
    opacity: 0.2;
}

/* Contenido de la seccion */
.pagos-contenido {
    padding: var(--espaciado-md) 0;
}

/* Titulo de seccion */
.seccion-titulo {
    font-size: 2rem;             /* TAMANO DEL TITULO */
    font-weight: 700;
    color: var(--color-negro);
    margin-bottom: var(--espaciado-sm);
    line-height: 1.3;
}

/* Descripcion de seccion */
.seccion-descripcion {
    font-size: 1.1rem;
    color: var(--color-gris-texto);
    margin-bottom: var(--espaciado-lg);
}

/* ============================================
   5. TARJETAS DE METODOS DE PAGO
   ============================================
   - Cada tarjeta tiene imagen y contenido
   - Efecto hover con elevacion
============================================ */
.tarjetas-pago {
    display: flex;
    flex-direction: column;
    gap: var(--espaciado-md);
}

.tarjeta-pago {
    display: flex;
    gap: var(--espaciado-md);
    padding: var(--espaciado-md);
    background-color: var(--color-blanco);
    border-radius: var(--borde-radio-md);
    border: 1px solid var(--color-gris-borde);
    box-shadow: var(--sombra-suave);
    transition: all var(--transicion-normal);
}

.tarjeta-pago:hover {
    transform: translateY(-5px);
    box-shadow: var(--sombra-media);
    border-color: var(--color-verde-primario);
}

/* Imagen de la tarjeta */
.tarjeta-imagen {
    flex-shrink: 0;
    width: 80px;                 /* TAMANO DE LA IMAGEN DE TARJETA */
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-verde-fondo);
    border-radius: var(--borde-radio-sm);
    padding: var(--espaciado-xs);
}

.tarjeta-imagen img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Contenido de la tarjeta */
.tarjeta-contenido {
    flex: 1;
}

.tarjeta-titulo {
    font-size: 1.2rem;           /* TAMANO DEL TITULO DE TARJETA */
    font-weight: 600;
    color: var(--color-negro);
    margin-bottom: var(--espaciado-xs);
}

.tarjeta-descripcion {
    font-size: 0.95rem;
    color: var(--color-gris-texto);
    line-height: 1.5;
}

/* TEXTO RESALTADO EN VERDE NEGRITA
   - Usa la clase "texto-resaltado-verde" para resaltar
*/
.texto-resaltado-verde {
    color: var(--color-verde-primario);
    font-weight: 700;
}

/* Texto destacado centrado */
.tarjeta-destacado {
    margin-top: var(--espaciado-sm);
    text-align: center;
    font-weight: 600;
    color: var(--color-verde-primario);
    font-size: 1rem;
}

/* ============================================
   6. SECCION CONVENIOS DE RECAUDO
   ============================================
   - Fondo gris claro
   - Grid de logos con numeros de convenio
============================================ */
.convenios-section {
    padding: var(--espaciado-xxl) var(--espaciado-lg);
    
    /* FONDO GRIS CLARO - Cambia el color aqui */
    background-color: var(--color-gris-fondo);
}

.convenios-container {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

/* Titulo de convenios */
.convenios-titulo {
    font-size: 1.8rem;           /* TAMANO DEL TITULO */
    font-weight: 700;
    color: var(--color-negro);
    margin-bottom: var(--espaciado-xl);
}

/* Grid de logos de convenios */
.convenios-grid {
    display: grid;
    
    /* NUMERO DE COLUMNAS
       - Cambia "3" por el numero de columnas deseadas
    */
    grid-template-columns: repeat(3, 1fr);
    gap: var(--espaciado-lg);
    margin-bottom: var(--espaciado-xl);
}

/* Cada item de convenio */
.convenio-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--espaciado-lg);
    background-color: var(--color-blanco);
    border-radius: var(--borde-radio-md);
    box-shadow: var(--sombra-suave);
    transition: all var(--transicion-normal);
}

.convenio-item:hover {
    transform: translateY(-8px);
    box-shadow: var(--sombra-media);
}

/* Logo del convenio */
.convenio-logo {
    width: 120px;                /* TAMANO DEL LOGO */
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--espaciado-md);
}

.convenio-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Numero de convenio */
.convenio-numero {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-verde-primario);
}

/* Nota importante */
.convenios-nota {
    background: linear-gradient(135deg, var(--color-verde-fondo), #c8e6c9);
    padding: var(--espaciado-md) var(--espaciado-lg);
    border-radius: var(--borde-radio-md);
    border-left: 4px solid var(--color-verde-primario);
}

.convenios-nota p {
    font-size: 1rem;
    color: var(--color-negro-suave);
    margin: 0;
}

.convenios-nota strong {
    color: var(--color-verde-oscuro);
}

/* ============================================
   7. SECCION RED DE AGENCIAS
   ============================================
   - Mensaje final con enlace destacado
   - Boton opcional
============================================ */
.agencias-section {
    padding: var(--espaciado-xxl) var(--espaciado-lg);
    background-color: var(--color-blanco);
}

.agencias-container {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

/* Icono decorativo */
.agencias-icono {
    width: 60px;
    height: 60px;
    margin: 0 auto var(--espaciado-md);
    padding: var(--espaciado-sm);
    background-color: var(--color-verde-fondo);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.agencias-icono svg {
    width: 30px;
    height: 30px;
    stroke: var(--color-verde-primario);
}

/* Mensaje de agencias */
.agencias-mensaje {
    font-size: 1.15rem;
    color: var(--color-negro-suave);
    line-height: 1.7;
    margin-bottom: var(--espaciado-lg);
}

/* ENLACE RESALTADO "red de agencias"
   - Estilo para el enlace destacado en el texto
*/
.enlace-agencias {
    color: var(--color-verde-primario);
    font-weight: 700;
    text-decoration: none;
    position: relative;
    transition: color var(--transicion-rapida);
}

.enlace-agencias::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-verde-primario);
    transform: scaleX(0);
    transition: transform var(--transicion-normal);
}

.enlace-agencias:hover {
    color: var(--color-verde-oscuro);
}

.enlace-agencias:hover::after {
    transform: scaleX(1);
}

/* Boton de agencias */
.btn-agencias {
    display: inline-flex;
    align-items: center;
    gap: var(--espaciado-xs);
    padding: var(--espaciado-sm) var(--espaciado-lg);
    background-color: var(--color-verde-primario);
    color: var(--color-blanco);
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    border-radius: var(--borde-radio-md);
    transition: all var(--transicion-normal);
}

.btn-agencias:hover {
    background-color: var(--color-verde-oscuro);
    transform: translateY(-3px);
    box-shadow: var(--sombra-media);
}

.btn-agencias svg {
    width: 20px;
    height: 20px;
    transition: transform var(--transicion-normal);
}

.btn-agencias:hover svg {
    transform: translateX(5px);
}

/* ============================================
   8. 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 entrada con zoom */
@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Clase para elementos animados al scroll */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   9. MEDIA QUERIES - RESPONSIVE
   ============================================ */

/* TABLETS GRANDES (max 1024px) */
@media (max-width: 1024px) {
    .pagos-online-container {
        grid-template-columns: 1fr;  /* Una columna */
        gap: var(--espaciado-lg);
    }
    
    .pagos-imagen {
        order: -1;                   /* Imagen primero */
        text-align: center;
    }
    
    .pagos-imagen img {
        max-width: 400px;
    }
}

/* TABLETS (max 768px) */
@media (max-width: 768px) {
    /* Hero */
    .hero-title {
        font-size: 2.2rem;           /* Reduce tamano del titulo */
    }
    
    .hero-description {
        font-size: 1rem;
    }
    
    /* Convenios - 2 columnas en tablet */
    .convenios-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Tarjetas de pago */
    .tarjeta-pago {
        flex-direction: column;
        text-align: center;
    }
    
    .tarjeta-imagen {
        margin: 0 auto;
    }
}

/* MOVILES (max 576px) */
@media (max-width: 576px) {
    /* Espaciados reducidos */
    .pagos-online-section,
    .convenios-section,
    .agencias-section {
        padding: var(--espaciado-xl) var(--espaciado-sm);
    }
    
    /* Hero */
    .hero-canales {
        min-height: 300px;
    }
    
    .hero-title {
        font-size: 1.8rem;
    }
    
    /* Titulos */
    .seccion-titulo {
        font-size: 1.5rem;
    }
    
    .convenios-titulo {
        font-size: 1.4rem;
    }
    
    /* Convenios - 1 columna en movil */
    .convenios-grid {
        grid-template-columns: 1fr;
    }
    
    /* Tarjetas */
    .tarjeta-imagen {
        width: 60px;
        height: 60px;
    }
    
    /* Boton agencias - ancho completo */
    .btn-agencias {
        width: 100%;
        justify-content: center;
    }
}

/* MOVILES PEQUENOS (max 375px) */
@media (max-width: 375px) {
    .hero-title {
        font-size: 1.5rem;
    }
    
    .seccion-titulo {
        font-size: 1.3rem;
    }
}
#header-container {
    position: sticky;
    top: 0;
    z-index: 1000;
}