/*
============================================
ESTILOS: TARJETA DE SERVICIOS COOINDEGABO
============================================
Índice:
1. Variables CSS (colores, espaciados, fuentes)
2. Estilos generales y reset
3. Hero Banner con Parallax
4. Secciones de contenido
5. Enlaces resaltados
6. Botones y CTA
7. Responsive Design
============================================
*/

/* ============================================
   1. VARIABLES CSS
   ============================================
   Modifica estos valores para cambiar colores
   y estilos en toda la página
   ============================================ */
:root {
    /* COLORES PRINCIPALES */
    /* Verde oscuro - Color principal del hero */
    --color-verde-oscuro: #1b5e20;
    /* Verde Cooindegabo - Para enlaces y acentos */
    --color-verde: #388e3c;
    /* Verde claro - Para fondos suaves */
    --color-verde-claro: #4caf50;
    
    /* COLORES SECUNDARIOS */
    /* Azul - Para enlace Plan Castor */
    --color-azul: #1976d2;
    --color-azul-oscuro: #1565c0;
    
    /* Morado - Para texto BRE-B */
    --color-morado: #7b1fa2;
    --color-morado-claro: #9c27b0;
    
    /* COLORES NEUTRALES */
    --color-blanco: #ffffff;
    --color-negro: #1a1a1a;
    --color-gris-oscuro: #333333;
    --color-gris: #666666;
    --color-gris-claro: #f5f5f5;
    
    /* ESPACIADOS */
    /* Modifica estos valores 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-principal: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 2rem;
    --font-size-3xl: 2.5rem;
    --font-size-4xl: 3rem;
    
    /* BORDES Y SOMBRAS */
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 20px;
    --box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    --box-shadow-hover: 0 15px 40px 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;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-principal);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--color-gris-oscuro);
    background-color: var(--color-blanco);
}

/* ============================================
   3. HERO BANNER CON PARALLAX
   ============================================
   - Fondo verde oscuro con imagen
   - Efecto parallax al hacer scroll
   - Altura mínima de 60vh (60% de la pantalla)
   
   PARA CAMBIAR:
   - Altura: Modifica min-height
   - Imagen de fondo: Cambia background-image en .hero-tarjeta
   - Color overlay: Modifica background en .hero-overlay
   ============================================ */
.hero-tarjeta {
    position: relative;
    min-height: 60vh; /* CAMBIAR: Altura del hero */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    
    /* IMAGEN DE FONDO - Cambiar URL por tu imagen */
    background-image: url('imagens-web/heros/hero-tarjeta.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Efecto parallax */
    background-repeat: no-repeat;
}

/* Overlay verde oscuro semi-transparente */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* CAMBIAR: Color y opacidad del overlay */
    background: linear-gradient(
        135deg, 
        rgba(27, 94, 32, 0.92) 0%,    /* Verde oscuro */
        rgba(56, 142, 60, 0.50) 100%   /* Verde Cooindegabo */
    );
    z-index: 1;
}

/* Contenido del hero */
.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: var(--spacing-xl);
    max-width: 900px;
}

/* Título del hero */
.hero-title {
    font-size: var(--font-size-4xl);
    font-weight: 700;
    color: var(--color-blanco);
    margin-bottom: var(--spacing-md);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    
    /* Animación de entrada */
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease forwards;
}

/* Descripción del hero */
.hero-description {
    font-size: var(--font-size-xl);
    color: rgba(255, 255, 255, 0.95);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.8;
    
    /* Animación de entrada con retraso */
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease 0.2s forwards;
}

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

/* ============================================
   4. SECCIONES DE CONTENIDO
   ============================================
   Layout de dos columnas usando CSS Grid
   
   PARA INVERTIR POSICIONES:
   - Agregar clase "invertir" al .seccion-container
   - Esto coloca la imagen a la izquierda
   
   PARA CAMBIAR PROPORCIONES:
   - Modifica grid-template-columns
   - Ejemplo: 1fr 1fr (50% - 50%)
   - Ejemplo: 2fr 1fr (66% - 33%)
   ============================================ */

/* Sección general */
.seccion-tarjeta,
.seccion-banca,
.seccion-cta {
    padding: var(--spacing-xxl) var(--spacing-lg);
    position: relative;
}

/* Alternar fondos entre secciones */
.seccion-tarjeta {
    background-color: var(--color-blanco);
}

.seccion-banca {
    background-color: var(--color-gris-claro);
}

.seccion-cta {
    background-color: var(--color-blanco);
}

/* Contenedor de la sección - Grid de dos columnas */
.seccion-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    /* CAMBIAR: Proporciones de columnas */
    grid-template-columns: 1fr 1fr; /* 50% contenido - 50% imagen */
    gap: var(--spacing-xl);
    align-items: center;
}

/* CLASE PARA INVERTIR - Imagen a la izquierda */
.seccion-container.invertir {
    direction: rtl; /* Invierte el orden de las columnas */
}

.seccion-container.invertir > * {
    direction: ltr; /* Restaura la dirección del texto */
}

/* Contenido de texto */
.seccion-contenido {
    padding: var(--spacing-lg);
}

/* Título de sección */
.seccion-titulo {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-verde-oscuro);
    margin-bottom: var(--spacing-md);
    position: relative;
}

/* Línea decorativa bajo el título */
.seccion-titulo::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, var(--color-verde), var(--color-verde-claro));
    border-radius: 2px;
}

/* Texto de párrafo */
.seccion-texto {
    font-size: var(--font-size-lg);
    color: var(--color-gris);
    line-height: 1.8;
    margin-bottom: var(--spacing-md);
}

/* Contenedor de imagen */
.seccion-imagen {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-md);
}

/* Imágenes de las secciones */
.imagen-tarjeta,
.imagen-banca,
.imagen-cta {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--box-shadow);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

/* Efecto hover en imágenes */
.imagen-tarjeta:hover,
.imagen-banca:hover,
.imagen-cta:hover {
    transform: scale(1.03);
    box-shadow: var(--box-shadow-hover);
}

/* ============================================
   5. ENLACES RESALTADOS
   ============================================
   Diferentes colores para cada tipo de enlace
   
   PARA AGREGAR NUEVOS COLORES:
   - Crear nueva clase .enlace-[color]
   - Definir color y hover
   ============================================ */

/* Estilo base para enlaces resaltados */
.enlace-resaltado {
    font-weight: 600;
    text-decoration: none;
    padding: 2px 4px;
    border-radius: 4px;
    transition: all var(--transition-fast);
    position: relative;
}

/* Enlace VERDE - Red de cajeros Servibanca */
.enlace-verde {
    color: var(--color-verde);
    background-color: rgba(56, 142, 60, 0.1);
}

.enlace-verde:hover {
    color: var(--color-blanco);
    background-color: var(--color-verde);
}

/* Enlace AZUL - Plan Castor */
.enlace-azul {
    color: var(--color-azul);
    background-color: rgba(25, 118, 210, 0.1);
}

.enlace-azul:hover {
    color: var(--color-blanco);
    background-color: var(--color-azul);
}

/* Enlace STORES - Play Store y App Store */
.enlace-store {
    color: var(--color-verde-oscuro);
    background-color: rgba(27, 94, 32, 0.1);
    font-weight: 700;
}

.enlace-store:hover {
    color: var(--color-blanco);
    background-color: var(--color-verde-oscuro);
}

/* Texto BRE-B resaltado en MORADO */
.texto-breb {
    color: var(--color-morado);
    font-weight: 700;
    font-size: 1.1em;
    padding: 2px 8px;
    background-color: rgba(123, 31, 162, 0.1);
    border-radius: 4px;
}

/* Texto destacado (NO PAGAS CUOTA) */
.texto-destacado {
    color: var(--color-verde-oscuro);
    font-size: 1.05em;
}

/* ============================================
   6. LOGO APP Y BOTONES DE DESCARGA
   ============================================ */

/* Contenedor del logo de la app */
.logo-app-container {
    margin: var(--spacing-md) 0;
}

/* Logo de la app */
.logo-app {
    max-width: 200px; /* CAMBIAR: Tamaño del logo */
    height: auto;
}

/* Contenedor de botones de apps */
.botones-apps {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
    flex-wrap: wrap;
}

/* Botón individual de app */
.boton-app {
    display: inline-block;
    transition: transform var(--transition-fast);
}

.boton-app:hover {
    transform: scale(1.05);
}

.boton-app img {
    height: 50px; /* CAMBIAR: Altura de los badges */
    width: auto;
}

/* ============================================
   7. BOTÓN CTA (LLAMADO A LA ACCIÓN)
   ============================================
   Botón principal para solicitar tarjeta
   
   PARA CAMBIAR COLORES:
   - Modifica background del .boton-cta
   - Modifica :hover para el efecto
   ============================================ */

/* Contenido CTA */
.cta-contenido {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Texto CTA */
.cta-texto {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-gris-oscuro);
    margin-bottom: var(--spacing-lg);
    line-height: 1.6;
}

/* Botón CTA */
.boton-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-xl);
    
    /* CAMBIAR: Colores del botón */
    background: linear-gradient(135deg, var(--color-verde) 0%, var(--color-verde-oscuro) 100%);
    color: var(--color-blanco);
    
    font-size: var(--font-size-lg);
    font-weight: 600;
    text-decoration: none;
    border: none;
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: all var(--transition-normal);
    box-shadow: 0 4px 15px rgba(56, 142, 60, 0.3);
}

.boton-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(56, 142, 60, 0.4);
    background: linear-gradient(135deg, var(--color-verde-claro) 0%, var(--color-verde) 100%);
}

/* Texto del botón */
.boton-texto {
    display: inline-block;
}

/* Icono del botón */
.boton-icono {
    width: 24px;
    height: 24px;
    transition: transform var(--transition-fast);
}

.boton-cta:hover .boton-icono {
    transform: translateX(5px);
}

/* ============================================
   8. RESPONSIVE DESIGN
   ============================================
   Adaptación para diferentes tamaños de pantalla
   
   Breakpoints:
   - 1024px: Tablets landscape
   - 768px: Tablets portrait
   - 480px: Móviles
   ============================================ */

/* TABLETS LANDSCAPE (1024px) */
@media (max-width: 1024px) {
    .hero-title {
        font-size: var(--font-size-3xl);
    }
    
    .hero-description {
        font-size: var(--font-size-lg);
    }
    
    .seccion-container {
        gap: var(--spacing-lg);
    }
    
    .seccion-titulo {
        font-size: var(--font-size-xl);
    }
}

/* TABLETS PORTRAIT (768px) */
@media (max-width: 768px) {
    /* Hero ajustes */
    .hero-tarjeta {
        min-height: 50vh;
        /* Desactivar parallax en móviles para mejor rendimiento */
        background-attachment: scroll;
    }
    
    .hero-title {
        font-size: var(--font-size-2xl);
    }
    
    .hero-description {
        font-size: var(--font-size-base);
    }
    
    /* Convertir a una columna */
    .seccion-container {
        grid-template-columns: 1fr; /* Una sola columna */
        gap: var(--spacing-md);
    }
    
    /* Restaurar dirección en móvil */
    .seccion-container.invertir {
        direction: ltr;
    }
    
    /* Orden de elementos en móvil */
    .seccion-contenido {
        order: 1; /* Contenido primero */
        padding: var(--spacing-md);
        text-align: center;
    }
    
    .seccion-imagen {
        order: 2; /* Imagen después */
    }
    
    /* Centrar línea decorativa del título */
    .seccion-titulo::after {
        left: 50%;
        transform: translateX(-50%);
    }
    
    /* Centrar botones de apps */
    .botones-apps {
        justify-content: center;
    }
    
    /* Centrar contenido CTA */
    .cta-contenido {
        align-items: center;
        text-align: center;
    }
    
    .cta-texto {
        font-size: var(--font-size-lg);
    }
}

/* MÓVILES (480px) */
@media (max-width: 480px) {
    /* Reducir espaciados */
    .seccion-tarjeta,
    .seccion-banca,
    .seccion-cta {
        padding: var(--spacing-xl) var(--spacing-sm);
    }
    
    .hero-content {
        padding: var(--spacing-lg) var(--spacing-sm);
    }
    
    .hero-title {
        font-size: var(--font-size-xl);
    }
    
    .seccion-titulo {
        font-size: var(--font-size-lg);
    }
    
    .seccion-texto {
        font-size: var(--font-size-base);
    }
    
    /* Botón más pequeño */
    .boton-cta {
        padding: var(--spacing-sm) var(--spacing-lg);
        font-size: var(--font-size-base);
        width: 100%;
        justify-content: center;
    }
    
    /* Botones de apps apilados */
    .botones-apps {
        flex-direction: column;
        align-items: center;
    }
    
    .boton-app img {
        height: 45px;
    }
}

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

/* Animación de aparición al hacer scroll */
.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);
}

/* Efecto de pulso para el botón CTA */
@keyframes pulse {
    0% {
        box-shadow: 0 4px 15px rgba(56, 142, 60, 0.3);
    }
    50% {
        box-shadow: 0 4px 25px rgba(56, 142, 60, 0.5);
    }
    100% {
        box-shadow: 0 4px 15px rgba(56, 142, 60, 0.3);
    }
}

.boton-cta {
    animation: pulse 2s infinite;
}

.boton-cta:hover {
    animation: none;
}
#header-container {
    position: sticky;
    top: 0;
    z-index: 1000;
}