/* ============================================
   CONVENIO VIACOOP - ESTILOS
   ============================================
   Pagina del convenio de viajes Cooindegabo & Viacoop
   
   COLORES PRINCIPALES VIACOOP:
   - Turquesa: #56c2d4
   - Gris azulado: #63708d
   - Amarillo: #e8ea18
   
   COLORES SECCION MUNDIAL:
   - Amarillo: #ffcd00
   - Azul: #003087
   - Rojo: #d20e00
   
   PARA CAMBIAR COLORES: modifica las variables en :root
============================================ */

/* ============================================
   VARIABLES CSS
   Cambia estos valores para modificar colores en toda la pagina
============================================ */
:root {
    /* COLORES VIACOOP - CAMBIAR AQUI */
    --viacoop-turquesa: #56c2d4;
    --viacoop-turquesa-oscuro: #3a9db0;
    --viacoop-gris: #63708d;
    --viacoop-gris-oscuro: #4a5568;
    --viacoop-amarillo: #e8ea18;
    --viacoop-amarillo-oscuro: #c8ca10;

    /* COLORES MUNDIAL - CAMBIAR AQUI */
    --mundial-amarillo: #ffcd00;
    --mundial-azul: #003087;
    --mundial-azul-oscuro: #002060;
    --mundial-rojo: #d20e00;

    /* COLORES GENERALES */
    --color-blanco: #ffffff;
    --color-negro: #1a1a2e;
    --color-texto: #333333;
    --color-texto-claro: #666666;

    /* ESPACIADO */
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 40px;
    --spacing-xxl: 10px;

    /* BORDES */
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 16px;

    /* SOMBRAS */
    --box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    --box-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.15);

    /* TRANSICIONES */
    --transition-normal: 0.3s ease;
}

/* ============================================
   FONDO DE PAGINA CON IMAGEN
   PARA CAMBIAR IMAGEN DE FONDO: modifica background-image
   PARA QUITAR IMAGEN: elimina background-image y deja solo background-color
============================================ */
body {
    background-image: url('../assets/images/fondo-viacoop.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* Overlay sobre el fondo del body para legibilidad */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.92);
    z-index: -1;
}

/* ============================================
   SECCION 1: HERO BANNER CON PARALLAX
   PARA CAMBIAR IMAGEN: modifica background-image
   PARA CAMBIAR VELOCIDAD PARALLAX: modifica el valor en el JS (0.5)
   PARA CAMBIAR ALTURA: modifica min-height
============================================ */
.viacoop-hero {
    position: relative;
    min-height: 450px; /* CAMBIAR ALTURA DEL BANNER */
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url('imagens-web/heros/hero-viacoop.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Efecto parallax */
    overflow: hidden;
}

/* Overlay con gradiente de colores Viacoop */
/* PARA CAMBIAR COLORES DEL OVERLAY: modifica los rgba */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        rgba(86, 194, 212, 0.9) 0%,    /* Turquesa */
        rgba(99, 112, 141, 0.85) 50%,   /* Gris azulado */
        rgba(232, 234, 24, 0.8) 100%    /* Amarillo */
    );
    z-index: 1;
}

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

/* Titulo del hero */
/* PARA CAMBIAR TAMANIO: modifica font-size */
.hero-titulo {
    font-size: 3rem;
    font-weight: 800;
    color: var(--color-blanco);
    margin-bottom: var(--spacing-md);
    text-shadow: 2px 4px 8px rgba(0, 0, 0, 0.3);
    line-height: 1.2;
}

/* Descripcion del hero */
.hero-descripcion {
    font-size: 1.3rem;
    color: var(--color-blanco);
    text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ============================================
   SECCION 2: QUE NOS HACE DIFERENTES
   PARA INVERTIR LAYOUT (imagen derecha, contenido izquierda):
   Cambia grid-template-columns: 1fr 1.2fr; a 1.2fr 1fr;
   Y agrega a .diferencia-imagen-wrapper: order: 2;
   Y agrega a .diferencia-contenido: order: 1;
============================================ */
.viacoop-diferencia {
    padding: var(--spacing-xxl) var(--spacing-lg);
}

.diferencia-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.2fr; /* CAMBIAR PROPORCION: imagen | contenido */
    gap: var(--spacing-xl);
    align-items: start;
}

/* IMAGEN LATERAL */
/* PARA CAMBIAR TAMANIO: modifica max-height y width */
.diferencia-imagen-wrapper {
    position: relative;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--box-shadow);
}

.diferencia-imagen {
    width: 100%;
    height: 100%;
    max-height: 600px;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-normal);
}

.diferencia-imagen-wrapper:hover .diferencia-imagen {
    transform: scale(1.03);
}

/* CONTENIDO DERECHO */
.diferencia-contenido {
    padding: var(--spacing-md) 0;
}

/* Titulo de la seccion */
.diferencia-titulo {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--viacoop-gris-oscuro);
    margin-bottom: var(--spacing-lg);
    position: relative;
    padding-bottom: var(--spacing-md);
}

/* Linea decorativa bajo el titulo */
.diferencia-titulo::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, var(--viacoop-turquesa), var(--viacoop-amarillo));
    border-radius: 2px;
}

/* LISTA DE BENEFICIOS */
.diferencia-lista {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--spacing-xl) 0;
}

/* Cada item de la lista */
.diferencia-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    background: var(--color-blanco);
    border-radius: var(--border-radius-sm);
    border-left: 4px solid var(--viacoop-turquesa); /* CAMBIAR COLOR: borde lateral */
    box-shadow: var(--box-shadow);
    transition: all var(--transition-normal);
}

.diferencia-item:hover {
    transform: translateX(8px);
    border-left-color: var(--viacoop-amarillo);
    box-shadow: var(--box-shadow-hover);
}

/* Icono de cada item */
.item-icono {
    flex-shrink: 0;
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, var(--viacoop-turquesa), var(--viacoop-gris));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-blanco);
}

.item-icono svg {
    width: 22px;
    height: 22px;
}

/* Texto de cada item */
.item-texto {
    font-size: 1rem;
    color: var(--color-texto);
    line-height: 1.6;
}

.item-texto strong {
    color: var(--viacoop-gris-oscuro);
}

/* SECCION CTA CON BOTONES */
.diferencia-cta {
    text-align: center;
    padding: var(--spacing-lg);
    background: linear-gradient(135deg, rgba(86, 194, 212, 0.1) 0%, rgba(232, 234, 24, 0.1) 100%);
    border-radius: var(--border-radius-md);
    border: 2px solid var(--viacoop-turquesa);
}

/* Titulo CTA */
.cta-titulo {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--viacoop-gris-oscuro);
    margin-bottom: var(--spacing-lg);
}

/* BOTONES ALINEADOS */
.cta-botones {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    flex-wrap: wrap;
}

/* Estilos base de botones */
.btn-destino {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 14px 28px;
    border-radius: var(--border-radius-sm);
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    transition: all var(--transition-normal);
    border: 2px solid transparent;
}

/* Boton Destinos Nacionales */
/* PARA CAMBIAR COLOR: modifica background */
.btn-nacional {
    background: var(--viacoop-turquesa);
    color: var(--color-blanco);
}

.btn-nacional:hover {
    background: var(--viacoop-turquesa-oscuro);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(86, 194, 212, 0.4);
}

/* Boton Destinos Internacionales */
/* PARA CAMBIAR COLOR: modifica background */
.btn-internacional {
    background: var(--viacoop-gris);
    color: var(--color-blanco);
}

.btn-internacional:hover {
    background: im;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(99, 112, 141, 0.4);
}

/* ============================================
   SECCION 3: VIVE LA PASION DEL MUNDIAL
   COLORES ESPECIALES:
   - Amarillo: #ffcd00
   - Azul: #003087
   - Rojo: #d20e00
   PARA CAMBIAR COLORES: modifica las variables --mundial-* en :root
============================================ */
.viacoop-mundial {
    position: relative;
    padding: var(--spacing-xxl) var(--spacing-lg);
    overflow: hidden;
}

/* Overlay con colores del mundial */
.mundial-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        var(--mundial-azul) 0%,
        var(--mundial-azul-oscuro) 40%,
        rgba(210, 14, 0, 0.9) 100%
    );
    z-index: 0;
}

/* Contenido del mundial */
.mundial-contenido {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

/* Icono del mundial */
.mundial-icono {
    color: var(--mundial-amarillo);
    margin-bottom: var(--spacing-lg);
    animation: pulso-mundial 2s ease-in-out infinite;
}

@keyframes pulso-mundial {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Titulo del mundial */
.mundial-titulo {
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--mundial-amarillo);
    margin-bottom: var(--spacing-lg);
    text-shadow: 2px 4px 8px rgba(0, 0, 0, 0.4);
    line-height: 1.2;
}

/* Descripcion del mundial */
.mundial-descripcion {
    font-size: 1.2rem;
    color: var(--color-blanco);
    line-height: 1.7;
    margin-bottom: var(--spacing-xl);
}

.mundial-descripcion strong {
    color: var(--mundial-amarillo);
}

/* Boton del mundial */
/* PARA CAMBIAR COLOR DEL BOTON: modifica background */
.btn-mundial {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 16px 36px;
    background: var(--mundial-amarillo);
    color: var(--mundial-azul);
    border-radius: var(--border-radius-sm);
    text-decoration: none;
    font-weight: 800;
    font-size: 1.1rem;
    transition: all var(--transition-normal);
    border: 3px solid transparent;
}

.btn-mundial:hover {
    background: var(--color-blanco);
    color: var(--mundial-rojo);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(255, 205, 0, 0.4);
    border-color: var(--mundial-amarillo);
}

/* ============================================
   SECCION 4: CONTACTO ESTILO BODYTECH
   - Fondo oscuro con gradiente
   - Tarjeta blanca centrada
   PARA CAMBIAR COLORES: modifica background en .contacto-section
============================================ */
.contacto-section {
    padding: var(--spacing-xxl) var(--spacing-lg);
    background: linear-gradient(
        135deg,
        var(--viacoop-gris-oscuro) 0%,
        var(--color-negro) 50%,
        var(--viacoop-gris) 100%
    );
    text-align: center;
}

.contacto-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Titulo de la seccion de contacto */
.contacto-titulo-seccion {
    font-size: 2rem;
    font-weight: 700;
    color: var(--viacoop-turquesa);
    margin-bottom: var(--spacing-sm);
}

/* Subtitulo */
.contacto-subtitulo {
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: var(--spacing-xl);
}

/* TARJETA DE CONTACTO */
.contacto-tarjeta {
    background: var(--color-blanco);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xl);
    box-shadow: var(--box-shadow-hover);
    transition: transform var(--transition-normal);
}

.contacto-tarjeta:hover {
    transform: translateY(-5px);
}

/* Avatar/Icono de perfil */
.contacto-avatar {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--viacoop-turquesa), var(--viacoop-gris));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--spacing-md);
    color: var(--color-blanco);
}

/* Nombre del ejecutivo */
.contacto-nombre {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--viacoop-gris-oscuro);
    margin-bottom: 4px;
}

/* Cargo */
.contacto-cargo {
    font-size: 0.95rem;
    color: var(--viacoop-turquesa);
    font-weight: 600;
    margin-bottom: var(--spacing-lg);
}

/* Datos de contacto */
.contacto-datos {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.contacto-dato {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: #f8f9fa;
    border-radius: var(--border-radius-sm);
    font-size: 1rem;
    color: var(--color-texto);
}

.contacto-dato svg {
    color: var(--viacoop-turquesa);
    flex-shrink: 0;
}

.contacto-dato a {
    color: var(--viacoop-turquesa);
    text-decoration: none;
    font-weight: 600;
    transition: color var(--transition-normal);
}

.contacto-dato a:hover {
    color: var(--viacoop-turquesa-oscuro);
}

/* BOTON WHATSAPP */
/* PARA CAMBIAR COLOR: modifica background */
.btn-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 14px 32px;
    background: #25d366;
    color: var(--color-blanco);
    border-radius: var(--border-radius-sm);
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    transition: all var(--transition-normal);
    width: 100%;
    justify-content: center;
}

.btn-whatsapp:hover {
    background: #128c7e;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.3);
}

/* ============================================
   ANIMACIONES
============================================ */

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

/* Clase para elementos visibles */
.visible {
    animation: fadeInUp 0.6s ease forwards;
}

/* ============================================
   RESPONSIVE - TABLET (max 992px)
   PARA CAMBIAR BREAKPOINT: modifica max-width
============================================ */
@media (max-width: 992px) {
    .hero-titulo {
        font-size: 2.4rem;
    }

    .diferencia-container {
        grid-template-columns: 1fr; /* Una sola columna */
        gap: var(--spacing-lg);
    }

    .diferencia-imagen {
        max-height: 400px;
    }

    .mundial-titulo {
        font-size: 2.2rem;
    }
}

/* ============================================
   RESPONSIVE - MOVIL (max 768px)
   PARA CAMBIAR BREAKPOINT: modifica max-width
============================================ */
@media (max-width: 768px) {
    .viacoop-hero {
        min-height: 350px;
        background-attachment: scroll; /* Desactiva parallax en movil */
    }

    .hero-titulo {
        font-size: 1.8rem;
    }

    .hero-descripcion {
        font-size: 1.1rem;
    }

    .diferencia-titulo {
        font-size: 1.6rem;
    }

    .cta-botones {
        flex-direction: column; /* Botones uno debajo del otro */
    }

    .btn-destino {
        width: 100%;
        justify-content: center;
    }

    .mundial-titulo {
        font-size: 1.8rem;
    }

    .mundial-descripcion {
        font-size: 1rem;
    }

    .btn-mundial {
        font-size: 0.95rem;
        padding: 14px 24px;
    }

    .contacto-titulo-seccion {
        font-size: 1.6rem;
    }
}

/* ============================================
   RESPONSIVE - MOVIL PEQUENIO (max 480px)
   PARA CAMBIAR BREAKPOINT: modifica max-width
============================================ */
@media (max-width: 480px) {
    .hero-titulo {
        font-size: 1.5rem;
    }

    .hero-descripcion {
        font-size: 1rem;
    }

    .diferencia-item {
        flex-direction: column;
        text-align: center;
    }

    .diferencia-titulo::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .mundial-titulo {
        font-size: 1.5rem;
    }

    .contacto-tarjeta {
        padding: var(--spacing-lg);
    }
}
#header-container {
    position: sticky;
    top: 0;
    z-index: 1000;
}