/*
============================================
ESTILOS SECCION TRANSACCIONES TARJETA
============================================
Indice:
1. Variables CSS
2. Estilos base
3. Contenedor principal
4. Columna de contenido
5. Logos de alianza
6. Lista de funcionalidades
7. Lista de pasos
8. Nota importante
9. Seccion descarga
10. Columna de imagen
11. Boton sobre imagen
12. Animaciones
13. Responsive

GUIA DE MODIFICACION RAPIDA:
- Colores: Buscar ":root" y modificar variables
- Posicion imagen: Buscar "INVERTIR LAYOUT"
- Tamano imagen: Buscar "TAMANO IMAGEN"
- Posicion boton: Buscar "POSICION BOTON"
============================================
*/

/* ============================================
   1. VARIABLES CSS
   ============================================
   Modifica estos valores para cambiar colores
   en toda la seccion de forma consistente
   ============================================ */
:root {
    /* Colores principales Cooindegabo */
    --color-primary: #388e3c;           /* Verde principal */
    --color-primary-dark: #2e7d32;      /* Verde oscuro */
    --color-primary-light: #4caf50;     /* Verde claro */
    
    /* Color BRE-B (morado) */
    --color-breb: #7b1fa2;              /* Morado BRE-B */
    --color-breb-light: #9c27b0;        /* Morado claro */
    
    /* Colores de fondo */
    --color-bg-light: #f5f5f5;          /* Gris muy claro */
    --color-bg-white: #ffffff;          /* Blanco */
    --color-bg-green-light: #e8f5e9;    /* Verde muy claro */
    
    /* Colores de texto */
    --color-text-dark: #1a1a2e;         /* Texto oscuro */
    --color-text-medium: #4a4a4a;       /* Texto medio */
    --color-text-light: #6c6c6c;        /* Texto claro */
    
    /* 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: 16px;
    --border-radius-xl: 24px;
    
    /* Sombras */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
    
    /* Transiciones */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}

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

body {
    font-family: 'Poppins', sans-serif;
    color: var(--color-text-dark);
    line-height: 1.6;
}

/* ============================================
   3. CONTENEDOR PRINCIPAL
   ============================================
   Layout de dos columnas usando CSS Grid
   
   INVERTIR LAYOUT:
   Para cambiar imagen a la izquierda, modificar:
   grid-template-columns: 1fr 1fr;
   Y agregar clase .order-1 a image-column
   y clase .order-2 a content-column
   ============================================ */
.transacciones-section {
    padding: var(--spacing-xxl) var(--spacing-lg);
    background: linear-gradient(180deg, var(--color-bg-white) 0%, var(--color-bg-light) 100%);
    min-height: 100vh;
}

.transacciones-container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    
    /* LAYOUT: Contenido izquierda (55%), Imagen derecha (45%) */
    /* Para invertir: cambiar a "45% 55%" o "1fr 1fr" */
    grid-template-columns: 55% 45%;
    gap: var(--spacing-xl);
    align-items: stretch; /* Ambas columnas misma altura */
}

/* Clases para invertir orden en el grid */
.order-1 {
    order: 1;
}

.order-2 {
    order: 2;
}

/* ============================================
   4. COLUMNA DE CONTENIDO
   ============================================ */
.content-column {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg) 0;
}

/* Titulo principal */
.main-title {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--color-text-dark);
    line-height: 1.2;
    margin-bottom: var(--spacing-sm);
}

/* Texto COOINDEGABO resaltado en verde */
.highlight-green {
    color: var(--color-primary);
    display: inline-block;
}

/* Texto BRE-B resaltado en morado */
.highlight-breb {
    color: var(--color-breb);
    font-weight: 700;
    background: linear-gradient(135deg, var(--color-breb) 0%, var(--color-breb-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Texto introductorio */
.intro-text {
    font-size: 1.05rem;
    color: var(--color-text-medium);
    line-height: 1.8;
}

.intro-text strong {
    color: var(--color-primary-dark);
}

/* ============================================
   5. LOGOS DE ALIANZA
   ============================================
   Para agregar mas logos: duplicar .logo-item
   Para cambiar tamano: modificar max-height
   ============================================ */
.logos-alliance {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-md) 0;
    flex-wrap: wrap;
}

.logo-item {
    flex: 0 0 auto;
}

/* TAMANO DE LOGOS - Modifica max-height para cambiar tamano */
.logo-item img {
    max-height: 80px;    /* Altura maxima del logo */
    width: auto;
    filter: grayscale(0);
    transition: var(--transition-normal);
}

.logo-item img:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
}

/* ============================================
   6. LISTA DE FUNCIONALIDADES
   ============================================ */
.features-box {
    background: var(--color-bg-white);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
    border-left: 4px solid var(--color-primary);
}

.features-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-primary-dark);
    margin-bottom: var(--spacing-md);
}

.features-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    transition: var(--transition-normal);
}

.feature-item:hover {
    background: var(--color-bg-green-light);
}

/* Icono de cada funcionalidad */
.feature-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: var(--color-bg-green-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
}

.feature-icon svg {
    width: 20px;
    height: 20px;
}

/* Icono especial para BRE-B */
.feature-icon.breb-icon {
    background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
    color: var(--color-breb);
}

.feature-content {
    flex: 1;
    font-size: 0.95rem;
    color: var(--color-text-medium);
    line-height: 1.6;
}

.feature-content strong {
    color: var(--color-text-dark);
}

/* ============================================
   7. LISTA DE PASOS
   ============================================ */
.steps-box {
    background: linear-gradient(135deg, var(--color-bg-green-light) 0%, #c8e6c9 100%);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
}

.steps-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-primary-dark);
    margin-bottom: var(--spacing-xs);
}

.steps-intro {
    font-size: 0.95rem;
    color: var(--color-text-medium);
    margin-bottom: var(--spacing-md);
}

.steps-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.step-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    background: var(--color-bg-white);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-normal);
}

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

/* Numero del paso */
.step-number {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: var(--color-primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
}

.step-content {
    flex: 1;
    font-size: 0.95rem;
    color: var(--color-text-medium);
}

.step-content strong {
    color: var(--color-text-dark);
}

/* ============================================
   8. NOTA IMPORTANTE
   ============================================ */
.note-box {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md);
    border-left: 4px solid #ffc107;
}

.note-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.note-text {
    font-size: 0.9rem;
    color: var(--color-text-medium);
    line-height: 1.6;
}

.note-text strong {
    color: #f57c00;
}

/* ============================================
   9. SECCION DESCARGA
   ============================================ */
.download-section {
    text-align: center;
    padding: var(--spacing-md) 0;
}

.download-text {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-dark);
    margin-bottom: var(--spacing-md);
}

.store-buttons {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.store-btn {
    display: inline-block;
    transition: var(--transition-normal);
}

.store-btn img {
    height: 50px;    /* TAMANO BADGES - Modifica para cambiar tamano */
    width: auto;
}

.store-btn:hover {
    transform: translateY(-3px);
}

/* ============================================
   10. COLUMNA DE IMAGEN
   ============================================
   TAMANO IMAGEN: Modifica .transacciones-image
   para cambiar dimensiones
   ============================================ */



/* TAMANO IMAGEN - Modifica estos valores */
.transacciones-image {
    width: 100%;
    max-width: 800px;       /* Ancho maximo */
    height: auto;           /* Altura automatica para mantener proporcion */
    min-height: 1500px;      /* Altura minima */
    object-fit: cover;      /* Ajuste de imagen */
    border-radius: var(--border-radius-xl);
    box-shadow: var(--shadow-lg);
    position: relative;
    z-index: 2;
    transition: var(--transition-normal);
}



/* Decoracion detras de la imagen */


/* ============================================
   11. BOTON SOBRE IMAGEN
   ============================================
   POSICION BOTON - Modifica estos valores:
   - top/bottom: posicion vertical
   - left/right: posicion horizontal
   - transform: ajuste fino de centrado
   
   Ejemplos:
   - Arriba izquierda: top: 20px; left: 20px;
   - Arriba derecha: top: 20px; right: 20px;
   - Centro: top: 50%; left: 50%; transform: translate(-50%, -50%);
   - Abajo centro: bottom: 20px; left: 50%; transform: translateX(-50%);
   - Abajo derecha: bottom: 20px; right: 20px;
   ============================================ */
.image-button {
    position: absolute;
    
    /* POSICION ACTUAL: Centro de la imagen */
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    /* Estilos del boton */
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-md) var(--spacing-lg);
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: white;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    border-radius: var(--border-radius-lg);
    box-shadow: 0 8px 25px rgba(56, 142, 60, 0.4);
    z-index: 10;
    transition: var(--transition-normal);
    
    /* Efecto de brillo */
    overflow: hidden;
}

.image-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: 0.5s;
}

.image-button:hover::before {
    left: 100%;
}

.image-button:hover {
    transform: translate(-50%, -50%) scale(1.05);
    box-shadow: 0 12px 35px rgba(56, 142, 60, 0.5);
}

.button-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.button-icon svg {
    width: 24px;
    height: 24px;
}

/* ============================================
   12. ANIMACIONES
   ============================================ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.05);
    }
}

/* Clases de animacion */
.animate-fadeInUp {
    animation: fadeInUp 0.6s ease forwards;
}

.animate-fadeInLeft {
    animation: fadeInLeft 0.6s ease forwards;
}

.animate-fadeInRight {
    animation: fadeInRight 0.6s ease forwards;
}

/* Boton con pulso suave */
.image-button {
    animation: pulse 3s ease-in-out infinite;
}

.image-button:hover {
    animation: none;
}

/* ============================================
   13. RESPONSIVE
   ============================================ */

/* Tablet grande (1200px) */
@media (max-width: 1200px) {
    .transacciones-container {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-lg);
    }
    
    .main-title {
        font-size: 2rem;
    }
}

/* Tablet (992px) */
@media (max-width: 992px) {
    .transacciones-container {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }
    
    /* En tablet/movil, imagen arriba y contenido abajo */
    .image-column {
        order: -1;  /* Imagen primero */
    }
    
    .transacciones-image {
        max-width: 400px;
        min-height: 300px;
    }
    
    .content-column {
        padding: 0 var(--spacing-sm);
    }
}

/* Tablet pequena (768px) */
@media (max-width: 768px) {
    .transacciones-section {
        padding: var(--spacing-xl) var(--spacing-md);
    }
    
    .main-title {
        font-size: 1.6rem;
        text-align: center;
    }
    
    .intro-text {
        text-align: center;
    }
    
    .logos-alliance {
        justify-content: center;
    }
    
    .logo-item img {
        max-height: 40px;
    }
    
    .features-box,
    .steps-box {
        padding: var(--spacing-md);
    }
    
    .transacciones-image {
        max-width: 350px;
        min-height: 250px;
    }
    
    .image-button {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: 1rem;
    }
}

/* Movil (576px) */
@media (max-width: 576px) {
    .transacciones-section {
        padding: var(--spacing-lg) var(--spacing-sm);
    }
    
    .main-title {
        font-size: 1.4rem;
    }
    
    .feature-item {
        flex-direction: column;
        text-align: center;
    }
    
    .feature-icon {
        margin: 0 auto;
    }
    
    .step-item {
        flex-direction: column;
        text-align: center;
    }
    
    .step-number {
        margin: 0 auto;
    }
    
    .note-box {
        flex-direction: column;
        text-align: center;
    }
    
    .transacciones-image {
        max-width: 280px;
        min-height: 200px;
    }
    
    .store-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .image-decoration {
        display: none;
    }
}

/* Movil pequeno (400px) */
@media (max-width: 400px) {
    .main-title {
        font-size: 1.2rem;
    }
    
    .transacciones-image {
        max-width: 250px;
        min-height: 180px;
    }
    
    .image-button {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: 0.9rem;
    }
    
    .button-icon svg {
        width: 20px;
        height: 20px;
    }
}
#header-container {
    position: sticky;
    top: 0;
    z-index: 1000;
}