/* ============================================
   ESTILOS PARA LA SECCION DE CONVENIOS COOINDEGABO
   Con hero parallax y sistema de pestanas
   
   INDICE:
   1. Variables CSS (colores, espaciado, fuentes)
   2. Hero Section con Parallax
   3. Contenedor Principal
   4. Sistema de Pestanas
   5. Layout Principal (Cards + Imagen)
   6. Cards Individuales
   7. Imagen Fija
   8. Responsive Design
============================================ */

/* ============================================
   1. VARIABLES CSS - PALETA DE COLORES COOINDEGABO
   MODIFICAR: Cambia estos valores para cambiar toda la paleta
============================================ */
:root {
    /* COLORES PRINCIPALES - Verde COOINDEGABO */
    --color-primary: #388e3c;           /* Verde principal */
    --color-primary-dark: #2e7d32;      /* Verde oscuro */
    --color-primary-light: #4caf50;     /* Verde claro */
    --color-primary-extra-light: #81c784; /* Verde muy claro */
    
    /* COLORES SECUNDARIOS */
    --color-secondary: #ff9800;         /* Naranja (acentos) */
    --color-secondary-dark: #f57c00;    /* Naranja oscuro */
    
    /* COLORES DE TEXTO */
    --color-text-dark: #333333;         /* Texto principal */
    --color-text-light: #666666;        /* Texto secundario */
    --color-text-muted: #999999;        /* Texto atenuado */
    
    /* COLORES DE FONDO */
    --color-bg-white: #ffffff;          /* Fondo blanco */
    --color-bg-light: #f5f5f5;          /* Fondo gris claro */
    --color-bg-gradient: linear-gradient(135deg, #f5f7fa 0%, #e8f5e9 100%);
    
    /* SOMBRAS */
    --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-heavy: 0 8px 32px rgba(0, 0, 0, 0.15);
    --shadow-green: 0 4px 20px rgba(56, 142, 60, 0.3);
    
    /* 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-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --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 */
    --font-size-hero: 3rem;     /* 48px */
    
    /* BORDES */
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 16px;
    --border-radius-xl: 24px;
    
    /* TRANSICIONES */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* Reset basico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

/* ============================================
   2. HERO SECTION CON EFECTO PARALLAX
   Banner principal con imagen de fondo verde
   
   MODIFICAR PARALLAX:
   - Cambiar background-attachment a 'scroll' desactiva parallax
   - Cambiar min-height para altura diferente
   - Cambiar background-image para otra imagen
============================================ */
.convenios-hero {
    position: relative;
    min-height: 60vh;               /* MODIFICAR: Altura del hero (60% viewport) */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* IMAGEN DE FONDO CON PARALLAX */
    background-image: url('imagens-web/heros/hero-convenios.png');  /* MODIFICAR: Tu imagen */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;   /* PARALLAX: Cambia a 'scroll' para desactivar */
    background-repeat: no-repeat;
    
    overflow: hidden;
}

/* Overlay verde sobre la imagen */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* MODIFICAR: Color y opacidad del overlay verde */
    background: linear-gradient(
        135deg,
        rgba(56, 142, 60, 0.92) 0%,    /* Verde principal con 92% opacidad */
        rgba(46, 125, 50, 0.88) 50%,   /* Verde oscuro con 88% opacidad */
        rgba(27, 94, 32, 0.50) 100%    /* Verde muy oscuro con 95% opacidad */
    );
    z-index: 1;
}

/* Contenido del hero */
.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: var(--spacing-xl);
    max-width: 900px;
    
    /* Animacion de entrada */
    animation: fadeInUp 1s ease forwards;
}

/* Titulo principal del hero */
.hero-title {
    font-size: var(--font-size-hero);  /* MODIFICAR: Tamano del titulo */
    font-weight: 700;
    color: var(--color-bg-white);
    margin-bottom: var(--spacing-md);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    letter-spacing: 1px;
}

/* Descripcion del hero */
.hero-description {
    font-size: var(--font-size-md);
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.8;
    max-width: 750px;
    margin: 0 auto var(--spacing-lg);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

/* Linea decorativa bajo el texto */
.hero-line {
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, var(--color-secondary), var(--color-secondary-dark));
    margin: 0 auto;
    border-radius: 2px;
    animation: expandLine 1s ease 0.5s forwards;
    transform: scaleX(0);
}

/* Animacion para la linea */
@keyframes expandLine {
    to {
        transform: scaleX(1);
    }
}

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

/* ============================================
   3. CONTENEDOR PRINCIPAL DE CONVENIOS
============================================ */
.convenios-section {
    width: 100%;
    padding: var(--spacing-xxl) var(--spacing-md);
    background: var(--color-bg-gradient);
}

.convenios-container {
    max-width: 1600px;
    margin: 0 auto;
}

/* ============================================
   4. SISTEMA DE PESTANAS - ANCHO COMPLETO
   Las pestanas ocupan todo el ancho disponible
   
   AGREGAR PESTANA:
   1. Copia un button.tab-button en el HTML
   2. Cambia data-tab="nuevo-nombre"
   3. Crea el contenido con data-content="nuevo-nombre"
============================================ */
.tabs-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xl);
    padding: var(--spacing-md);
    background: var(--color-bg-white);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-medium);
}

/* Boton de pestana individual */
.tab-button {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-lg);
    background: transparent;
    border: 2px solid transparent;
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text-light);
    cursor: pointer;
    transition: all var(--transition-normal);
    white-space: nowrap;
}

/* Icono dentro de la pestana */
.tab-icon {
    font-size: 1.1rem;
    transition: transform var(--transition-normal);
}

/* Hover en pestana */
.tab-button:hover {
    color: var(--color-primary);
    background: rgba(56, 142, 60, 0.08);
    border-color: rgba(56, 142, 60, 0.2);
}

.tab-button:hover .tab-icon {
    transform: scale(1.15);
}

/* Pestana activa */
.tab-button.active {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-bg-white);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-green);
}

.tab-button.active .tab-icon {
    transform: scale(1.1);
}

/* ============================================
   5. LAYOUT PRINCIPAL - GRID CON IMAGEN FIJA
   Cards a la izquierda, imagen fija a la derecha
   
   MODIFICAR LAYOUT:
   - Cambiar grid-template-columns para diferentes proporciones
   - Ejemplo: 1fr 400px (imagen mas pequena)
   - Ejemplo: 2fr 1fr (proporcion diferente)
============================================ */
.convenios-main-layout {
    display: grid;
    grid-template-columns: 1fr 450px;  /* MODIFICAR: Ancho de imagen fija */
    gap: var(--spacing-xl);
    align-items: start;
}

/* Contenedor del contenido (cards) */
.tabs-content-wrapper {
    position: relative;
    min-height: 500px;
    width: 100%;
}

/* Contenido de cada pestana */
.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
    opacity: 1;
    animation: fadeIn 0.5s ease forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   AREA DE CARDS - GRID DINAMICO
   
   MODIFICAR CANTIDAD DE COLUMNAS:
   - minmax(230px, 1fr): Tamano minimo de card
   - Mas pequeno = mas columnas
   - Mas grande = menos columnas
============================================ */
.cards-area {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: var(--spacing-lg);
}

/* ============================================
   6. CARD INDIVIDUAL
   
   MODIFICAR CARD:
   - Cambiar border-radius para esquinas diferentes
   - Cambiar box-shadow para sombra diferente
   - Cambiar padding para espaciado interno
============================================ */
.service-card {
    background: var(--color-bg-white);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-light);
    transition: all var(--transition-normal);
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

/* Efecto hover en card */
.service-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-heavy);
    border-color: rgba(56, 142, 60, 0.2);
}

/* Imagen de la card */
.card-image {
    width: 100%;
    height: 80px;           /* MODIFICAR: Altura de la imagen */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-sm);
    background: var(--color-bg-light);
}

.card-image img {
    max-width: 100%;
    max-height: 450%;
    object-fit: contain;
    transition: transform var(--transition-normal);
}

.service-card:hover .card-image img {
    transform: scale(1.08);
}

/* Contenido de la card */
.card-content {
    padding: var(--spacing-md);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* Titulo de la card */
.card-title {
    font-size: var(--font-size-md);
    color: var(--color-primary-dark);
    margin-bottom: var(--spacing-xs);
    font-weight: 600;
}

/* Descripcion de la card */
.card-description {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    margin-bottom: var(--spacing-md);
    flex-grow: 1;
    line-height: 1.6;
}

/* Enlace "Ver mas" con flecha animada */
.card-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
    font-size: var(--font-size-sm);
    transition: all var(--transition-normal);
    margin-top: auto;
}

.card-link:hover {
    gap: var(--spacing-sm);
    color: var(--color-primary-dark);
}

/* Flecha animada */
.arrow-icon {
    font-size: var(--font-size-lg);
    transition: transform var(--transition-normal);
}

.card-link:hover .arrow-icon {
    transform: translateX(6px);
}

/* ============================================
   7. IMAGEN FIJA A LA DERECHA
   Esta imagen permanece visible mientras cambian las cards
   
   MODIFICAR IMAGEN FIJA:
   - position: sticky - Se "pega" durante el scroll
   - top: 20px - Distancia desde arriba al pegarse
   - Para desactivar sticky: cambiar a position: relative
============================================ */
.convenios-fixed-image {
    position: sticky;
    top: 20px;                          /* MODIFICAR: Distancia superior */
    width: 100%;
    height: fit-content;
    max-height: calc(100vh - 40px);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-heavy);
    border: 4px solid var(--color-bg-white);
}

.convenios-fixed-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform var(--transition-slow);
}

.convenios-fixed-image:hover img {
    transform: scale(1.02);
}

/* ============================================
   8. RESPONSIVE DESIGN
============================================ */

/* TABLETS (768px - 1024px) */
@media (max-width: 1200px) {
    .convenios-main-layout {
        grid-template-columns: 1fr 350px;
        gap: var(--spacing-lg);
    }
    
    .cards-area {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}

/* TABLETS PEQUENAS */
@media (max-width: 992px) {
    .hero-title {
        font-size: var(--font-size-xxl);
    }
    
    .hero-description {
        font-size: var(--font-size-base);
    }
    
    .convenios-main-layout {
        grid-template-columns: 1fr;
    }
    
    .convenios-fixed-image {
        position: relative;
        order: -1;
        max-height: 400px;
        margin-bottom: var(--spacing-lg);
    }
    
    .convenios-fixed-image img {
        height: 400px;
        object-fit: cover;
    }
}

/* MOVILES (menos de 768px) */
@media (max-width: 768px) {
    .convenios-hero {
        min-height: 50vh;
        background-attachment: scroll;  /* Desactiva parallax en moviles */
    }
    
    .hero-title {
        font-size: var(--font-size-xl);
    }
    
    .hero-content {
        padding: var(--spacing-lg);
    }
    
    .convenios-section {
        padding: var(--spacing-xl) var(--spacing-sm);
    }
    
    .tabs-container {
        flex-direction: column;
        padding: var(--spacing-sm);
    }
    
    .tab-button {
        width: 100%;
        justify-content: center;
        padding: var(--spacing-md);
    }
    
    .cards-area {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .convenios-fixed-image {
        max-height: 300px;
    }
    
    .convenios-fixed-image img {
        height: 300px;
    }
}

/* MOVILES PEQUENOS (menos de 480px) */
@media (max-width: 480px) {
    .hero-title {
        font-size: var(--font-size-lg);
    }
    
    .hero-description {
        font-size: var(--font-size-sm);
    }
    
    .card-image {
        height: 100px;
    }
    
    .card-content {
        padding: var(--spacing-sm);
    }
}
#header-container {
    position: sticky;
    top: 0;
    z-index: 1000;
}


/* ============================================
   NOTAS PARA PERSONALIZACION:
   
   1. CAMBIAR COLOR VERDE:
      - Modifica --color-primary y variantes en :root
      - Todos los elementos se actualizaran automaticamente
   
   2. AGREGAR NUEVA PESTANA:
      - Copia un button.tab-button en HTML
      - Copia un div.tab-content con su contenido
      - Asegurate que data-tab y data-content coincidan
   
   3. AGREGAR NUEVA CARD:
      - Copia un div.service-card completo
      - Cambia imagen, titulo, descripcion y enlace
   
   4. DESACTIVAR PARALLAX:
      - En .convenios-hero cambia background-attachment a 'scroll'
   
   5. CAMBIAR IMAGEN FIJA:
      - Modifica el src de la imagen en .convenios-fixed-image
   
   6. DESACTIVAR STICKY EN IMAGEN:
      - Cambia position: sticky por position: relative
============================================ */