@charset "utf-8";

/* 1. CONFIGURACIÓN GENERAL Y VARIABLES */
:root {
    --color-primario: #002D62;    /* Azul Marino Corporativo */
    --color-secundario: #FFD700;  /* Dorado Arauca */
    --color-celeste: #87ceeb;     /* Azul Celeste Sky */
    --color-fondo: #f0f7ff;       /* Fondo Celeste Suave */
    --blanco: #FFFFFF;
}

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

body { 
    font-family: 'Montserrat', sans-serif; 
    color: #333; 
    background-color: var(--color-fondo);
    line-height: 1.6;
}

/* 2. NAVEGACIÓN (NAVBAR) */
.navbar {
    background: var(--color-primario);
    padding: 1rem 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 4px solid var(--color-celeste);
}

.logo-img {
    height: 50px;
    width: auto;
    transition: transform 0.3s ease;
}

.logo-img:hover { transform: scale(1.05); }

.nav-links { display: flex; list-style: none; }
.nav-links li { margin-left: 20px; }
.nav-links a { 
    color: white; 
    text-decoration: none; 
    font-weight: bold;
    position: relative;
    padding-bottom: 5px;
}

.nav-links a::after {
    content: '';
    position: absolute;
    width: 0; height: 2px;
    bottom: 0; left: 0;
    background-color: var(--color-secundario);
    transition: width 0.3s ease;
}

.nav-links a:hover::after { width: 100%; }


.hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px; /* Esto crea una separación automática entre el título, el texto y el botón */
}

.hero h1 { 
    font-size: 3rem; 
    margin-bottom: 10px; /* Ajustamos el margen inferior */
    line-height: 1.2;
}

.hero p {
    margin-bottom: 30px; /* Esto empuja el botón amarillo hacia abajo para que no se monte */
    font-size: 1.2rem;
}


@media (max-width: 768px) {
    .hero h1 {
        font-size: 1.8rem; /* Título más pequeño en celular */
    }
    
    .hero p {
        font-size: 1rem;
        margin-bottom: 20px;
    }

    .btn-primario {
        padding: 12px 25px; /* Botón un poco más compacto */
    }
}



/* 3. SECCIÓN HERO (BANNER PRINCIPAL) */
.hero {
    height: 75vh;
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('img/foto-bus.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
    padding: 0 20px;
}

.hero h1 { 
    font-size: 3rem; 
    margin-bottom: 20px;
    text-shadow: 2px 4px 10px rgba(0, 0, 0, 0.5);
}

.nombre-empresa {
    color: var(--color-secundario);
    display: block;
    font-size: 1.2em;
    font-weight: 900;
    text-transform: uppercase;
    animation: aparecerNombre 1.5s ease-out forwards;
    background: linear-gradient(to right, #FFD700, #fff, #FFD700);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: brillo-nombre 3s linear infinite;
}

@keyframes brillo-nombre { to { background-position: 200% center; } }

.btn-primario {
    background-color: var(--color-secundario);
    color: var(--color-primario);
    padding: 15px 30px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 50px;
    transition: 0.3s;
}

.btn-primario:hover { background: white; transform: scale(1.05); }

/* 4. SECCIONES Y TARJETAS (GENERAL) */
section {
    background: linear-gradient(180deg, #ffffff 0%, #e1efff 100%);
    padding: 80px 5%;
}

.titulo-seccion {
    color: var(--color-primario);
    text-align: center;
    font-size: 2.2rem;
    margin-bottom: 40px;
    font-weight: 800;
    position: relative;
    padding-bottom: 10px;
}

.titulo-seccion::after {
    content: ''; width: 60px; height: 4px;
    background: var(--color-secundario);
    position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
}

/* 5. DISEÑO DE SERVICIOS Y COTIZACIÓN */
.grid-servicios {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

.servicio-card {
    background: white;
    padding: 40px 30px;
    border-radius: 20px;
    text-align: center;
    border: 1px solid #d0e4ff;
    transition: 0.3s;
}

.servicio-card i { font-size: 3rem; color: var(--color-celeste); margin-bottom: 20px; }
.servicio-card:hover { transform: translateY(-10px); box-shadow: 0 15px 35px rgba(0,45,98,0.1); }

.destacado-fluvial { background-color: #eef9ff !important; border: 2px solid var(--color-celeste) !important; }

.cotizacion-box {
    margin-top: 50px;
    background-color: var(--color-primario);
    padding: 40px;
    border-radius: 15px;
    color: white;
    text-align: center;
}

.btn-cotizar {
    display: inline-block;
    background-color: #25d366;
    color: white;
    padding: 15px 35px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    transition: 0.3s;
}

/* 6. RUTAS Y TABLAS */
.tabla-contenedor { overflow-x: auto; margin-top: 30px; }
.tabla-rutas {
    width: 100%;
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.tabla-rutas th { background: var(--color-primario); color: white; padding: 15px; }
.tabla-rutas td { padding: 15px; border-bottom: 1px solid #eee; }
.status.disponible { background: #d4edda; color: #155724; padding: 5px 10px; border-radius: 20px; font-size: 0.8rem; }

/* 7. FOOTER DISTRIBUIDO */
.footer-principal {
    background-color: #001a35;
    color: white;
    padding: 70px 5% 30px;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 40px;
}

.footer-col h4 {
    color: var(--color-celeste);
    margin-bottom: 20px;
    border-bottom: 2px solid rgba(135, 206, 235, 0.3);
    display: inline-block;
    padding-bottom: 5px;
}

/*
.link-maps { color: var(--color-celeste); text-decoration: none; font-size: 0.9rem; display: block; margin-top: 10px; }
.link-maps:hover { color: white; }
*/

.link-maps {
    color: var(--color-secundario); /* Dorado Arauca */
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    display: inline-block;
    margin-top: 5px;
    transition: 0.3s;
}

.link-maps:hover {
    color: var(--color-primario); /* Azul Marino */
    text-decoration: underline;
}

.link-maps i {
    margin-right: 5px;
}


.btn-pqrs-footer {
    display: inline-block;
    background: var(--color-celeste);
    color: var(--color-primario);
    padding: 10px 15px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
}

/* 8. WHATSAPP FLOTANTE */
.wpp-float {
    position: fixed;
    bottom: 20px; right: 20px;
    background: #25d366;
    color: white;
    width: 60px; height: 60px;
    border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    font-size: 30px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    z-index: 2000;
}


/* Limitador de ancho para que no se expanda al infinito */
.container {
    max-width: 1200px; /* Ancho máximo ideal */
    margin: 0 auto;    /* Centra el contenido */
    padding: 0 20px;   /* Margen interno para que no toque los bordes en celulares */
}


/* Estilo para que Misión/Visión y Políticas vuelvan a ser tarjetas */
.grid-cards, .grid-politicas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.card, .politica-card {
    background: #ffffff;
    padding: 40px 30px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 45, 98, 0.1); /* Sombra para dar profundidad */
    border: 1px solid #e1efff;
    text-decoration: none; /* Quita subrayado de links */
    display: block;
    color: #333;
}

/* Íconos para que se vean grandes y azules */
.icon-card, .icon-box i {
    font-size: 3rem;
    color: var(--color-primario);
    margin-bottom: 20px;
    display: block;
}

.card h3, .politica-card h4 {
    color: var(--color-primario);
    margin-bottom: 15px;
    font-size: 1.5rem;
}


/* Ajuste para las imágenes de la flota */
.foto-item img {
    width: 100%;
    height: 250px; /* Altura fija para mantener uniformidad */
    object-fit: cover; /* Recorta la imagen sin deformarla */
    border-radius: 15px 15px 0 0;
    display: block;
}

.foto-item {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    transition: 0.3s;
}

.foto-item:hover {
    transform: translateY(-5px);
}

/* Ajuste del Logo en el Navbar */
.logo-img {
    height: 60px; /* Un poco más grande para que destaque */
    max-width: 100%;
    object-fit: contain;
}


.card-link, .politica-link {
    text-decoration: none; /* Quita el subrayado azul del link */
    display: block; /* Hace que el link ocupe todo el espacio de la card */
    color: inherit;
}


.grid-galeria {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin-top: 40px;
}

.info-foto {
    padding: 20px;
    text-align: center;
}

.info-foto h4 {
    color: var(--color-primario);
    margin-bottom: 5px;
}


@media (max-width: 768px) {
    .navbar {
        flex-direction: column;
        padding: 1rem;
    }
    
    .nav-links {
        margin-top: 15px;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .nav-links li {
        margin: 5px 10px;
    }

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

/* Ajuste de enlaces en tarjetas */
.card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    transition: transform 0.3s ease;
}

.card-link:hover {
    transform: translateY(-10px);
}


.tabla-contenedor {
    width: 100%;
    overflow-x: auto; /* Permite deslizar la tabla hacia los lados en móviles */
    margin-top: 20px;
    border-radius: 10px;
}

.tabla-rutas td strong {
    color: var(--color-primario);
}


/* --- RESPONSIVE DESIGN --- */

/* Ajuste para que el logo y menú se alineen bien */
.navbar-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

@media (max-width: 768px) {
    .navbar {
        padding: 0.5rem 2%;
    }

    .nav-links {
        display: flex;
        flex-wrap: wrap; /* Permite que los links bajen si no caben */
        justify-content: center;
        margin-top: 10px;
        gap: 10px;
        padding: 10px 0;
    }

    .nav-links li {
        margin-left: 0; /* Quitamos el margen lateral que pusimos en PC */
    }

    .nav-links a {
        font-size: 0.85rem; /* Letra un poco más pequeña en móviles */
    }

    /* Ajuste del Hero para que el texto no se salga */
    .hero h1 {
        font-size: 1.8rem;
    }

    .hero p {
        font-size: 1rem;
    }
    
    /* El logo se ajusta un poco más pequeño en celular */
    .logo-img {
        height: 40px;
    }
}

/* Estilo del botón (oculto en PC) */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    color: white;
    font-size: 1.8rem;
    cursor: pointer;
}

@media (max-width: 768px) {
    .menu-toggle {
        display: block; /* Aparece en móviles */
    }

    .nav-links {
        display: none; /* Se oculta por defecto */
        flex-direction: column;
        width: 100%;
        background: var(--color-primario);
        position: absolute;
        top: 100%; /* Justo debajo del navbar */
        left: 0;
        text-align: center;
        padding: 20px 0;
        border-bottom: 4px solid var(--color-celeste);
    }

    /* Clase que activaremos con JavaScript para mostrar el menú */
    .nav-links.active {
        display: flex;
    }

    .nav-links li {
        margin: 15px 0;
    }
}

/*.btn-pqrs-footer {
    color: white !important; /* Esto hará que resalte mucho más */
/*}  */


.frase-impacto {
    position: relative;
    padding: 0; /* Quitamos el padding para que la imagen ocupe todo */
    background: url('img/atardecer-arauca.jpg') no-repeat center center fixed; /* Usa una foto llamativa */
    background-size: cover;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.overlay-frase {
    background: rgba(0, 45, 98, 0.7); /* Azul corporativo con transparencia */
    width: 100%;
    height: 100%;
    padding: 80px 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.icon-quote {
    color: var(--color-secundario); /* El dorado de Arauca */
    font-size: 2.5rem;
    margin: 20px;
    opacity: 0.6;
}

.texto-principal {
    color: white;
    font-size: 2.8rem;
    font-weight: 900;
    max-width: 900px;
    line-height: 1.2;
    text-shadow: 2px 2px 15px rgba(0,0,0,0.5);
}

.texto-principal span {
    color: var(--color-secundario); /* Resaltamos "sueños y familias" */
}

.linea-decorativa {
    width: 100px;
    height: 5px;
    background: var(--color-secundario);
    margin: 30px auto;
    border-radius: 50px;
}

.texto-secundario {
    color: var(--color-celeste);
    font-size: 1.5rem;
    font-style: italic;
    font-weight: 400;
}

/* Ajuste para móviles */
@media (max-width: 768px) {
    .texto-principal { font-size: 1.8rem; }
    .texto-secundario { font-size: 1.1rem; }
    .frase-impacto { min-height: 300px; }
}


/* Contenedor de la grilla */
.grid-equipo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    padding: 40px 0;
}

/* Tarjeta individual */
.equipo-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 45, 98, 0.08);
    border: 1px solid #e1efff;
    transition: transform 0.3s ease;
}

/* EL TRUCO PARA LAS IMÁGENES: */
.equipo-img-container img {
    width: 100%;
    height: 350px; /* Altura fija para todas */
    object-fit: cover; /* Ajusta la foto al espacio sin estirarla */
    display: block;
}

.equipo-info {
    padding: 20px;
    text-align: center;
}

.equipo-info h4 {
    color: var(--color-primario);
    font-size: 1.4rem;
    margin-bottom: 5px;
}

.equipo-info span {
    color: var(--color-celeste);
    font-weight: bold;
    display: block;
    margin-bottom: 10px;
}


.historia-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
    margin-bottom: 80px;
}

.historia-img img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

/* Responsive para la historia */
@media (max-width: 768px) {
    .historia-section {
        grid-template-columns: 1fr; /* En celular, una columna */
    }
}


.nosotros-hero {
    height: 50vh;
    background: linear-gradient(rgba(0,45,98,0.7), rgba(0,45,98,0.7)), 
                url('img/atardecer-arauca.jpg'); /* Usa la imagen del atardecer */
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
}


/* Sección de Historia con Estilo Profesional */
.historia-section {
    display: flex;
    align-items: center;
    gap: 50px;
    padding: 60px 0;
    border-bottom: 2px solid #e1efff;
}

.historia-texto {
    flex: 1;
    background: white;
    padding: 40px;
    border-left: 8px solid var(--color-secundario); /* El dorado de Arauca */
    border-radius: 0 20px 20px 0;
    box-shadow: 10px 10px 30px rgba(0, 45, 98, 0.05);
}

.historia-texto h2 {
    color: var(--color-primario);
    font-size: 2.2rem;
    margin-bottom: 20px;
    font-weight: 900;
}

.historia-texto p {
    font-size: 1.1rem;
    color: #555;
    line-height: 1.8;
}

.historia-img {
    flex: 1;
    position: relative;
}

.historia-img img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    transition: 0.4s;
}

.historia-img::before { /* Un cuadro decorativo detrás de la foto */
    content: '';
    position: absolute;
    width: 100%; height: 100%;
    border: 3px solid var(--color-secundario);
    top: 20px; left: 20px;
    border-radius: 20px;
    z-index: -1;
}

/* Ajuste para que en celulares no se vea apretado */
@media (max-width: 768px) {
    .historia-section {
        flex-direction: column;
        text-align: center;
    }
    .historia-texto {
        border-left: none;
        border-top: 8px solid var(--color-secundario);
        border-radius: 0 0 20px 20px;
    }
}

.nosotros-hero h1 {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px); /* Desfoca un poco el fondo del texto */
    padding: 20px 40px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    display: inline-block;
}


/* --- SECCIÓN EQUIPO DIRECTIVO --- */
.grid-equipo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.equipo-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 45, 98, 0.1);
    border: 1px solid #e1efff;
    text-align: center;
    transition: 0.3s;
}

.equipo-card:hover {
    transform: translateY(-10px);
}

/* LA CLAVE: Control de las fotos para que no sean gigantes */
.equipo-img-container img {
    width: 100%;
    height: 350px; /* Altura fija para todos */
    object-fit: cover; /* Recorta la foto para que encaje perfecto sin estirarse */
    display: block;
}

.equipo-info {
    padding: 25px;
}

.equipo-info h4 {
    color: var(--color-primario);
    font-size: 1.5rem;
    margin-bottom: 5px;
    font-weight: 800;
}

.equipo-info span {
    color: var(--color-celeste);
    font-weight: bold;
    font-size: 0.9rem;
    text-transform: uppercase;
    display: block;
    margin-bottom: 15px;
}

.equipo-info p {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.5;
}

.historia-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
    background: white;
    padding: 50px;
    border-radius: 30px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.05);
    margin-bottom: 60px;
}

.historia-texto h2 {
    color: var(--color-primario);
    border-left: 5px solid var(--color-secundario); /* El detalle dorado */
    padding-left: 15px;
    margin-bottom: 20px;
}

.nosotros-hero {
    height: 50vh;
    background: linear-gradient(rgba(0, 45, 98, 0.7), rgba(0, 45, 98, 0.7)), 
                url('img/foto-bus.jpg'); /* O tu nueva imagen de atardecer */
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
}

.nosotros-hero h1 {
    font-size: 3rem;
    border-bottom: 4px solid var(--color-secundario);
    padding-bottom: 10px;
}
/* Contenedor de la foto para que sea circular */
.equipo-img-container {
    width: 150px;      /* Tamaño de la foto (ajustable) */
    height: 150px;     /* Debe ser igual al ancho para un círculo perfecto */
    margin: 30px auto 15px; /* Centra la foto y da espacio */
    border-radius: 50%; /* Esto hace el círculo */
    overflow: hidden;
    border: 4px solid var(--color-secundario); /* Borde dorado de Arauca */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.equipo-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Evita que la cara se vea estirada */
}

/* Ajuste de la tarjeta para que combine con el círculo */
.equipo-card {
    background: white;
    border-radius: 20px;
    padding: 10px;
    text-align: center;
    border: 1px solid #e1efff;
    box-shadow: 0 10px 25px rgba(0, 45, 98, 0.05);
}

/* Tarjeta de cada directivo */
.equipo-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 45, 98, 0.05);
    border: 1px solid #e1efff;
    transition: 0.3s;
}

/* El círculo para la imagen */
.equipo-img-container {
    width: 160px; /* Tamaño ideal: ni muy grande ni muy pequeño */
    height: 160px;
    margin: 0 auto 20px;
    border-radius: 50%; /* Crea el círculo */
    overflow: hidden;
    border: 4px solid var(--color-secundario); /* El dorado de Arauca */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.equipo-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Evita que las caras se vean estiradas */
}

.equipo-info h4 {
    color: var(--color-primario);
    margin-bottom: 5px;
    font-weight: 800;
}

.equipo-info span {
    color: var(--color-celeste);
    font-weight: bold;
    font-size: 0.85rem;
    text-transform: uppercase;
}

/* Estilo especial para las tarjetas de Misión y Visión */
.card {
    background: linear-gradient(145deg, #ffffff, #f0f7ff);
    border-bottom: 5px solid var(--color-celeste); /* El azul claro de tu logo */
    transition: all 0.3s ease;
}

.card:hover {
    border-bottom: 5px solid var(--color-secundario); /* Cambia a dorado al pasar el mouse */
    transform: translateY(-5px);
}

.icon-card {
    color: var(--color-primario);
    font-size: 2.5rem;
    margin-bottom: 15px;
    display: block;
}


/* Caja de Promesa de Valor */
.promesa-valor {
    background: var(--color-primario); /* El azul marino corporativo */
    color: white;
    padding: 50px;
    border-radius: 30px;
    text-align: center;
    margin: 60px 0;
    position: relative;
    overflow: hidden;
}

.promesa-valor::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    background: rgba(255, 215, 0, 0.1); /* Círculo decorativo dorado suave */
    border-radius: 50%;
}

.promesa-valor h3 {
    color: var(--color-secundario); /* Dorado Arauca */
    font-size: 2rem;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.promesa-valor p {
    font-size: 1.3rem;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
    font-style: italic;
}

/* Contenedor de las 3 tarjetas principales */
.grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin: 50px 0;
}

.card {
    background: #ffffff;
    padding: 40px 30px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 45, 98, 0.05); /* Sombra azul suave */
    border-top: 5px solid var(--color-secundario); /* Borde dorado arriba */
    transition: all 0.3s ease;
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 45, 98, 0.1);
}

.icon-card {
    font-size: 3rem;
    color: var(--color-primario);
    margin-bottom: 20px;
}

.card h3 {
    color: var(--color-primario);
    font-size: 1.8rem;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.card p {
    font-size: 1.1rem;
    color: #555;
    line-height: 1.6;
}

/* Banner de Calidad con Estilo Profesional */
.header-detalles {
    height: 45vh;
    background: linear-gradient(rgba(0, 45, 98, 0.75), rgba(0, 45, 98, 0.75)), 
                url('img/banner-llanero.jpg'); /* Usando la imagen del atardecer */
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
    border-radius: 0 0 50px 50px; /* Curva elegante al final */
    margin-bottom: 50px;
    padding: 20px;
}

.header-detalles h1 {
    font-size: 3rem;
    text-transform: uppercase;
    border-bottom: 4px solid var(--color-secundario); /* Dorado Arauca */
    padding-bottom: 10px;
}

.detalle-card {
    display: flex;
    background: white;
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 10px 30px rgba(0, 45, 98, 0.08); /* Sombra corporativa */
    border-left: 10px solid var(--color-primario); /* Azul Marino */
    align-items: center;
    gap: 30px;
}

.detalle-icon {
    font-size: 3.5rem;
    color: var(--color-secundario); /* Dorado para resaltar seguridad */
    flex-shrink: 0;
}

.tag {
    background: #f0f7ff;
    color: var(--color-primario);
    padding: 8px 15px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 0.85rem;
    border: 1px solid var(--color-celeste);
}

.progress-bar {
    background: #e1efff;
    height: 15px;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 10px;
}

.progress-fill {
    background: linear-gradient(to right, var(--color-primario), var(--color-celeste));
    width: 65%; /* Representando el avance */
    height: 100%;
}

/* Estado inicial para la animación del script */
.detalle-card {
    opacity: 0;
    transform: translateY(30px);
}

.tag {
    background: #ffffff;
    color: var(--color-primario);
    padding: 6px 15px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.85rem;
    border: 1.5px solid var(--color-secundario); /* Borde dorado para los tags */
    display: inline-block;
    margin: 5px 2px;
}

.detalle-icon i {
    filter: drop-shadow(2px 4px 6px rgba(0, 45, 98, 0.2)); /* Sombra para dar profundidad al icono */
}


/* --- ESTILOS PARA PQRS --- */
.pqrs-container {
    min-height: 100vh;
    background: linear-gradient(rgba(0, 45, 98, 0.8), rgba(0, 45, 98, 0.8)), 
                url('img/banner-llanero.jpg'); /* Tu imagen del atardecer */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 100px 20px;
}

.pqrs-box {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 50px;
    border-radius: 30px;
    max-width: 600px;
    width: 100%;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    border-top: 8px solid var(--color-secundario); /* Borde Dorado */
}

.pqrs-box h2 {
    color: var(--color-primario);
    font-size: 2rem;
    text-align: center;
    margin-bottom: 10px;
}

.pqrs-box p {
    text-align: center;
    color: #555;
    margin-bottom: 30px;
}


.input-group {
    margin-bottom: 20px;
}

.input-group label {
    display: block;
    color: var(--color-primario);
    font-weight: bold;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.input-group input, 
.input-group select, 
.input-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e1efff;
    border-radius: 10px;
    font-family: inherit;
    transition: 0.3s;
}

.input-group input:focus, 
.input-group select:focus, 
.input-group textarea:focus {
    border-color: var(--color-celeste);
    outline: none;
    background: #fdfdfd;
}

.btn-enviar {
    width: 100%;
    background: var(--color-primario);
    color: white;
    padding: 15px;
    border: none;
    border-radius: 10px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    text-transform: uppercase;
}

.btn-enviar:hover {
    background: var(--color-secundario);
    color: var(--color-primario);
}

/* Estilos para la página de éxito */
.text-center { text-align: center; }

.success-icon {
    font-size: 5rem;
    color: var(--color-secundario); /* Dorado Arauca */
    margin-bottom: 20px;
    animation: scaleIn 0.5s ease-out;
}

.gracias-footer {
    margin-top: 30px;
    border-top: 1px solid #eee;
    padding-top: 20px;
}

@keyframes scaleIn {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}


/* Estilos para móviles (pantallas menores a 768px) */
@media (max-width: 768px) {
  /* 1. Contenedor del menú */
  .nav-menu {
    display: flex;            /* Asegura que no esté en 'none' */
    flex-direction: column;   /* Alinea los ítems verticalmente */
    background-color: #333;   /* Cambia al color de tu marca */
    width: 100%;
    position: absolute;       /* O 'relative' según tu diseño */
    top: 60px;                /* Ajusta según la altura de tu logo/header */
    left: 0;
    z-index: 1000;
  }

  /* 2. Los enlaces del menú */
  .nav-menu a {
    display: block;
    padding: 15px;
    color: #ffffff !important; /* Fuerza el color blanco para legibilidad */
    text-decoration: none;
    border-bottom: 1px solid #444;
    font-size: 18px;
  }

  /* 3. Evitar que se oculte por error */
  .nav-container {
    overflow: visible !important;
  }
}

/* --- ESTILOS PARA MÓVILES (Menos de 768px) --- */
@media (max-width: 768px) {
    
    /* Ocultamos la lista por defecto y la posicionamos */
    .nav-links {
        display: none; /* Se ocultará hasta que agreguemos la clase 'active' con JS */
        flex-direction: column;
        width: 100%;
        background-color: #ffffff; /* Ajusta al color de tu marca */
        position: absolute;
        top: 70px; /* Ajusta según la altura de tu navbar */
        left: 0;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        padding: 20px 0;
        z-index: 1000;
    }

    /* Cuando el menú esté abierto */
    .nav-links.active {
        display: flex;
    }

    .nav-links li {
        text-align: center;
        margin: 15px 0;
    }

    .nav-links li a {
        color: #333; /* Color oscuro para que se vea bien en fondo blanco */
        font-size: 1.2rem;
        display: block;
        width: 100%;
    }

    /* Mostramos el botón de hamburguesa que estaba oculto en PC */
    .menu-toggle {
        display: block;
        background: none;
        border: none;
        font-size: 1.8rem;
        cursor: pointer;
        color: #004a99; /* Usa el color azul de tu logo */
    }

    /* Ajuste del contenedor para que el botón y el logo se separen */
    .navbar-flex {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
    }
}

/* --- ESTILOS PARA PC (Más de 769px) --- */
@media (min-width: 769px) {
    .menu-toggle {
        display: none; /* Escondemos el botón en computadoras */
    }
    
    .nav-links {
        display: flex; /* Aseguramos que se vea horizontal en PC */
        list-style: none;
    }
}
/* --- BOTÓN DE WHATSAPP FLOTANTE --- */
.btn-whatsapp-flotante {
    position: fixed;
    bottom: 20px;       /* Distancia desde abajo */
    right: 20px;        /* Distancia desde la derecha */
    background-color: #25d366;
    color: white !important;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    text-align: center;
    font-size: 35px;
    line-height: 60px;
    z-index: 1000;
    box-shadow: 0px 4px 10px rgba(0,0,0,0.3);
    transition: 0.3s;
}

.btn-whatsapp-flotante:hover {
    transform: scale(1.1);
    background-color: #128c7e;
}

/* --- BOTÓN VOLVER ARRIBA (Encima de WhatsApp) --- */
#btnArriba {
    display: none;      /* Se activa con el JavaScript */
    position: fixed;
    bottom: 90px;       /* Lo subimos para que no tape el logo de WhatsApp */
    right: 25px;        /* Un poquito más centrado con el círculo de abajo */
    z-index: 999;
    border: none;
    outline: none;
    background-color: #004a99; /* Azul Cootranstefluarauca */
    color: white;
    cursor: pointer;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 20px;
    box-shadow: 0px 4px 10px rgba(0,0,0,0.3);
    transition: 0.3s;
}

#btnArriba:hover {
    background-color: #003366;
}