/* Reset Global de Tipografía */


body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

@media (max-width:768px){

    .top-bar2{
        background:#000;
        padding:15px 10px;
        text-align:center;
    }

    .navbar-logo img{
        width:80px;
        margin-bottom:10px;
    }

    .top-bar2 ul{
        padding:0;
    }

    .top-bar2 ul li{
        display:block;
        margin-bottom:10px;
    }

    .top-bar2 h6{
        font-size:14px;
        margin:0;
        color:#fff;
    }

    .top-bar2 p{
        font-size:13px;
        margin:0;
        color:#ccc;
    }
}
.top-bar2{
    background:#fff !important;
    padding:15px;
}

.top-bar2 h6{
    color:#333 !important;
}

.top-bar2 p{
    color:#555 !important;

}

/* 1. ESTILO PARA MÓVILES (Por defecto) */
.tracking-pro {
    display: flex;
    justify-content: center;
    padding: 0; /* Sin padding en celulares para que no se vea vacío */
    width: 100%;
}

/* 2. ESTILO PARA PC (Pantallas mayores a 992px) */
@media (min-width: 992px) {
    .tracking-pro {
        padding: 250px 0; /* Solo se aplica en computadoras */
    }
}


.tracking-card{
    width:90%;
    max-width:1000px;
    background:white;
    border-radius:20px;
    display:flex;
    overflow:hidden;
    box-shadow:0 15px 40px rgba(0,0,0,0.2);
}

/* IZQUIERDA */
.tracking-left{
     width:35%;
    background: #0a345e;
    color:white;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    padding:30px;
    text-align:center;
    font-size:20px;
    
}

.tracking-left i{
    font-size:35px;
    margin-bottom:05px;
}

.tracking-left h2{
    font-size:20px;
    margin-bottom:05px;
}

/* DERECHA */
.tracking-right{
    width:65%;
    padding:30px;
}

/* TABS */
.tabs{
    display:flex;
    gap:30px;
    margin-bottom:20px;
    font-weight:bold;
}

.tabs span{
    cursor:pointer;
    color:#888;
    padding-bottom:5px;
}

.tabs .active{
    color:#000;
    border-bottom:3px solid #ffd200;
}

/* FORM */
.form-row{
    display:flex;
    gap:10px;
}

.form-row input{
    flex:1;
    padding:15px;
    border-radius:10px;
    border:1px solid #ccc;
    font-size:16px;
    color: gray;
}

/* BOTÓN */
.form-row button{
    background:linear-gradient(45deg,#ffd200,#ffd200);
    border:none;
    color:white;
    padding:15px 25px;
    border-radius:10px;
    font-weight:bold;
    cursor:pointer;
    transition:0.3s;
}

.form-row button:hover{
    transform:scale(1.05);
}

/* TRACKING MOBILE PRO */
@media(max-width:768px){

    .tracking-card{
        flex-direction:column;
        border-radius:15px;
    }

    .tracking-left{
        width:100%;
        text-align:center;
        align-items:center;
        padding:15px;
        background:#0a345e ;
    }

    .tracking-right{
        width:100%;
        padding:15px;
    }

    .tabs{
        justify-content:center;
        gap:15px;
        font-size:14px;
    }

    .form-row{
        flex-direction:column;
        gap:8px;
    }

    .form-row input{
        width:100%;
        font-size:14px;
        padding:12px;
    }

    .form-row button{
        width:100%;
        padding:12px;
        font-size:14px;
    }
}
/* 🔥 POPUP GRANDE */
@media (max-width:768px){

    .swal2-popup{
        width:95% !important;
        font-size:14px !important;
        padding:15px !important;
    }

    .swal2-title{
        font-size:18px !important;
    }

    #mapPopup{
        height:200px !important;
    }
}

/* CONTENIDO */
.swal2-html-container {
    font-size: 17px !important;
    line-height: 1.6;
}

/* ESTADOS */
.estado {
    padding: 8px 14px;
    border-radius: 10px;
    color: white;
    font-weight: bold;
    font-size: 15px;
}

.entregado{background:#28a745;}
.transito{background:#ffc107; color:#000;}
.reparto{background:#17a2b8;}
.registrado{background:#6c757d;}

/* TIMELINE PRO */

.timeline-horizontal{
    display:flex;
    justify-content:space-between;
    align-items:center;
    position:relative;
    margin:20px 0;
}

/* LINEA */
.timeline-horizontal::before{
    content:"";
    position:absolute;
    top:20px;
    left:0;
    width:100%;
    height:4px;
    background:#ddd;
    z-index:1;
}

/* PASO */
.step{
    position:relative;
    z-index:2;
    text-align:center;
    width:25%;
}

/* CIRCULO */
.step .circle{
    width:40px;
    height:40px;
    border-radius:50%;
    background:#ccc;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    color:white;
}

/* ACTIVO */
.step.active .circle{
    background:#28a745;
}

/* TEXTO */
.step p{
    margin-top:8px;
    font-size:14px;
}

/* LINEA PROGRESO */
.progress-line{
    position:absolute;
    top:20px;
    left:0;
    height:4px;
    background:#28a745;
    z-index:2;
    width:0%;
    transition:1s;
}
/* TEXTO HISTORIAL */
.timeline-item b {
    font-size: 16px;
}

.timeline-item small {
    font-size: 14px;
    color: #555;
}
.calc-section {
    padding: 40px 15px;
    background: #ffffff;
}

.titulo-cotizador {
    text-align: center;
    font-size: 42px;
    font-style: italic;
    font-weight: 700;
    color: #22357f;
    margin-bottom: 30px;
    position: relative;
}

@media(max-width:768px) {
    .titulo-cotizador {
        font-size: 28px;
    }
}

.titulo-cotizador::after {
    content: "";
    width: 80px;
    height: 4px;
    background: #ffd200;
    display: block;
    margin: 10px auto 0;
    border-radius: 10px;
}

/* --- CONTENEDOR MODIFICADO --- */
.calc-container {
    display: flex;
    align-items: stretch;
    justify-content: center;
    max-width: 1100px;
    margin: auto;
    gap: 30px; /* 🔥 Espacio de separación entre imagen y formulario */
}

/* --- IMAGEN INDEPENDIENTE --- */
.calc-img {
    flex: 1;
    border-radius: 20px; /* 🔥 Bordes redondeados */
    overflow: hidden;    /* Para que la imagen respete el borde del div */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); /* Sombra individual */
}

.calc-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- FORMULARIO INDEPENDIENTE --- */
.calc-form {
    flex: 1;
    background: white;
    padding: 30px;
    border-radius: 20px; /* 🔥 Bordes redondeados */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); /* Sombra individual */
    border: 1px solid #f0f0f0; /* Opcional: un borde sutil */
}

.calc-form h3 {
    text-align: center;
    margin-bottom: 20px;
    color: #22357f;
}

.form-group {
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-size: 13px;
    margin-bottom: 4px;
    color: #555;
    font-weight: 600;
}

.calc-form input,
.calc-form select {
    padding: 12px;
    border-radius: 10px;
    border: 1px solid #a19c9c;
    transition: border 0.3s;
}

.calc-form input:focus {
    border-color: #22357f;
    outline: none;
}

.calc-form button {
    width: 100%;
    background: #ffd200;
    border: none;
    padding: 15px;
    border-radius: 10px;
    font-weight: bold;
    margin-top: 15px;
    cursor: pointer;
    text-transform: uppercase;
}

.total {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    color: #28a745;
    margin-top: 15px;
}

/* 📱 RESPONSIVE */
@media(max-width:768px) {
    .calc-container {
        flex-direction: column;
        gap: 20px;
    }

    .calc-img {
        height: 250px;
    }
}/* SECCIÓN */
.contact-ultra {
    position: relative;
    padding: 80px 20px;
    overflow: hidden;
    background: #f9f9f9; /* Un fondo ligero para resaltar las tarjetas blancas */
}

/* CONTENEDOR MODIFICADO */
.contact-box {
    position: relative;
    z-index: 2;
    max-width: 1100px;
    margin: auto;
    display: flex;
    align-items: stretch;
    gap: 30px; /* 🔥 Separación entre formulario e imagen */
    /* Eliminamos el overflow:hidden y el border-radius de aquí para dárselo a los hijos */
}

/* FORMULARIO INDEPENDIENTE */
.contact-form {
    flex: 1;
    background: white;
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 20px; /* 🔥 Bordes redondeados */
    box-shadow: 0 15px 40px rgba(0,0,0,0.1); /* Sombra elegante */
}

/* TITULO */
.contact-title {
    font-size: 32px;
    font-style: italic;
    margin-bottom: 10px;
    color: #22357f;
}

.contact-sub {
    margin-bottom: 25px;
    color: #666;
}

/* INPUTS */
.contact-form form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contact-form input,
.contact-form textarea {
    padding: 12px;
    border-radius: 10px;
    border: 1px solid #ddd;
    font-size: 14px;
    transition: 0.3s;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: #22357f;
    outline: none;
}

.contact-form textarea {
    height: 120px;
    resize: none;
}

/* BOTÓN */
.contact-form button {
    background: #ffd200;
    border: none;
    padding: 15px;
    border-radius: 10px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    text-transform: uppercase;
}

.contact-form button:hover {
    background: #ffcc00;
    transform: translateY(-3px); /* Efecto de elevación */
}

/* IMAGEN INDEPENDIENTE */
.contact-img {
    flex: 1;
    border-radius: 20px; /* 🔥 Bordes redondeados */
    overflow: hidden;    /* Para que la imagen no se salga de las esquinas */
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}

.contact-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 📱 RESPONSIVE */
@media(max-width: 768px) {
    .contact-box {
        flex-direction: column;
        gap: 20px;
    }

    .contact-img {
        height: 250px;
        order: -1; /* Mueve la imagen arriba en móviles (opcional) */
    }

    .contact-form {
        padding: 30px;
    }

    .contact-title {
        text-align: center;
    }
}/* FOOTER GENERAL */
.footer-pro{
    background:#021132 ;
    color: white;
    position: relative;
}

/* LINEA SUPERIOR */
.footer-pro::before{
    content:"";
    width:100%;
    height:4px;
    background:linear-gradient(90deg,#ffd200,#ff9900);
    position:absolute;
    top:0;
    left:0;
}

/* TOP */
.footer-top{
    padding:60px 20px;
}

/* LOGO */
.white-logo{
    width:140px;
    filter: brightness(0) invert(1); /* 🔥 lo vuelve blanco */
}

/* TEXTO */
.footer-desc{
    font-size:14px;
    color:#ccc;
}

/* TITULOS */
.footer-box h4{
    margin-bottom:15px;
    font-weight:bold;
    position:relative;
}

/* LINEA TITULO */
.footer-box h4::after{
    content:"";
    width:40px;
    height:3px;
    background:#ffd200;
    position:absolute;
    bottom:-5px;
    left:0;
}

/* LISTAS */
.footer-box ul{
    list-style:none;
    padding:0;
}

.footer-box ul li{
    margin-bottom:8px;
}

/* LINKS */
.footer-box ul li a{
    color:#ccc;
    text-decoration:none;
    transition:0.3s;
}

.footer-box ul li a:hover{
    color:#ffd200;
    padding-left:5px;
}

/* REDES */
.footer-social{
    margin:15px 0;
}

.footer-social a{
    display:inline-block;
    width:40px;
    height:40px;
    background:rgba(255,255,255,0.1);
    border-radius:50%;
    text-align:center;
    line-height:40px;
    color:white;
    margin-right:10px;
    transition:0.3s;
}

.footer-social a:hover{
    background:#ffd200;
    color:black;
    transform:scale(1.1);
}

/* CONTACTO */
.footer-contact{
    font-size:14px;
    color:#ccc;
}

/* BOTTOM */
.footer-bottom{
    text-align:center;
    padding:15px;
    background:rgba(0,0,0,0.3);
    font-size:14px;
}

/* RESPONSIVE */
@media(max-width:768px){

    .footer-top{
        text-align:center;
    }

    .footer-box{
        margin-bottom:30px;
    }

    .footer-box h4::after{
        left:50%;
        transform:translateX(-50%);
    }

}
 

.tab-content {
    border: 1px solid #eee;
    border-top: none;
    border-radius: 0 0 20px 20px;
}
/* CONTENEDOR */
.wa-container {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 999;
}

/* BOTÓN */
.wa-button {
    width: 65px;
    height: 65px;
    background: linear-gradient(45deg, #25D366, #128C7E);
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32px;
    box-shadow: 0px 8px 25px rgba(0,0,0,0.3);
    cursor: pointer;
    transition: 0.3s;
    text-decoration: none;
}

/* HOVER */
.wa-button:hover {
    transform: scale(1.15) rotate(5deg);
}

/* BURBUJA TEXTO */
.wa-tooltip {
    position: absolute;
    bottom: 80px;
    right: 0;
    background: white;
    color: #333;
    padding: 10px 15px;
    border-radius: 15px;
    font-size: 14px;
    box-shadow: 0px 5px 15px rgba(0,0,0,0.2);
    opacity: 0;
    transform: translateY(10px);
    transition: 0.3s;
}

/* MOSTRAR BURBUJA */
.wa-container:hover .wa-tooltip {
    opacity: 1;
    transform: translateY(0);
}

/* ANIMACIÓN PULSO */
.wa-button {
    animation: pulseWA 2s infinite;
}

@keyframes pulseWA {
    0% { box-shadow: 0 0 0 0 rgba(37,211,102,0.7); }
    70% { box-shadow: 0 0 0 15px rgba(37,211,102,0); }
    100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}

 .navbar-logo img{
    width: 120px;   /* ancho */
    height: auto;   /* mantiene proporción */
}

/* Estilos para los iconos del Header */
.header-contact-list li {
    vertical-align: top;
    padding: 0 15px;
    border-right: 1px solid #eee; /* Opcional: separador entre bloques */
}

.header-contact-list li:last-child {
    border-right: none;
}

.header-contact-list i {
    margin-right: 8px; /* Espacio entre el icono y el texto */
    font-size: 20px;   /* Tama�0�9o del icono */
    vertical-align: middle;
    color: white;
}

.header-contact-list h6 {
    margin-bottom: 5px;
    display: inline-block; /* Asegura que el icono y texto se comporten como bloque */
}

/* Ajuste para m��viles */
@media (max-width: 767px) {
    .text-right {
        text-align: center !important;
    }
    .header-contact-list li {
        border-right: none;
        margin-bottom: 15px;
        display: block;
    }
}
    
/* --- ESTILO CORREGIDO PARA MÓVIL (PANTALLAS < 768px) --- */
/* --- SOLUCIÓN FONDO MÓVIL AYC EXPRESS --- */
@media (max-width: 767px) {
    /* 1. Forzar la imagen en el contenedor principal */
    section.banner.mask-overlay.pad-120 {
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-color: #001F3F !important; /* Color de respaldo */
        display: block !important;
    }

    /* 2. Eliminar capas oscuras extras que puedan estar encima */
    section.banner.mask-overlay::before {
        display: none !important; /* Quitamos el overlay por defecto de la plantilla */
    }

    /* 3. Ajuste de altura para que luzca bien el camión/fondo */
    section.banner.pad-120 {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
        min-height: 450px; /* Asegura un alto mínimo para ver la imagen */
    }

    /* 4. Asegurar que el título sea legible */
    .banner-content h1 {
        font-size: 24px !important;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    }
}

    /* Aseguramos que el overlay original de la plantilla no interfiera */
    section.banner.mask-overlay::before {
        opacity: 0.4 !important; /* Mantenemos un poco de oscuridad para que el texto blanco resalte */
        background-color: #000 !important;
    }
}

    /* --- ELIMINAR LA CAPA OSCURA (OVERLAY) EN M�0�7VIL --- */
    /* Muchas plantillas traen esta capa por defecto que oscurece la imagen.
       Al quitarla, tu imagen m��vil se ver�� m��s brillante y n��tida. */
    section.banner.mask-overlay.pad-120::before {
        display: none !important;
    }
} 

                  
                    /* Oscurecer el fondo de la secci��n Steps */
.steps-wrap.mask-overlay {
    position: relative;
    /* Aseg��rate de que la imagen de fondo est�� definida aqu�� o en tu CSS existente */
    /* background-image: url('../images/tu-imagen-de-fondo.jpg'); */
    background-size: cover;
    background-position: center;
    z-index: 1;
}

/* Capa oscura superpuesta */
.steps-wrap.mask-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Color negro con 70% de opacidad. Ajusta el 0.7 para m��s o menos oscuridad */
    z-index: -1; /* Se coloca detr��s del contenido pero delante del fondo */
}

/* Asegurar que el contenido sea blanco para contrastar */
.steps-wrap .font-2,
.steps-wrap .title-3,
.steps-wrap .gray-clr {
    color: #ffffff !important;
}
          
    /* --- Ajustes para la Secci��n de Importaciones --- */

/* Forzar alineaci��n vertical centrada en la fila */
.display-flex {
    display: flex;
    flex-wrap: wrap;
}

.align-items-center {
    align-items: center;
}

/* Espaciado para los logos */
.logos-import img {
    max-width: 100%;
    transition: all 0.3s ease;
}

/* Efecto hover profesional en los logos */
.logos-import img:hover {
    filter: grayscale(0%) !important;
    opacity: 1 !important;
}

/* Ajustes responsivos para m��viles */
@media (max-width: 991px) {
    .prod-delivery .display-flex {
        flex-direction: column-reverse; /* En m��vil, primero el texto, luego la imagen */
    }
    
    .delivery-img-col {
        margin-bottom: 40px; /* Separaci��n con el texto abajo */
    }
    
    .prod-delivery .pt-120,
    .prod-delivery .pb-120 {
        padding-top: 60px;
        padding-bottom: 60px;
    }
}  

 /* --- Secci��n Testimonios: Fondo Azul Corporativo Degradado --- */
.testimonial.mask-overlay {
    /* Degradado de azul oscuro a un azul un poco m��s vibrante */
    background: linear-gradient(135deg, #001F3F 0%, #003366 100%) !important;
    
    /* Aseguramos que la opacidad del mask-overlay no oculte el degradado */
    opacity: 1 !important;
    position: relative;
    z-index: 1;
}

/* Opcional: A�0�9adir un sutil patr��n de puntos o l��neas sobre el degradado para dar textura */
.testimonial.mask-overlay::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('assets/img/pattern-dot.png'); /* Ruta a un patr��n sutil si tienes */
    opacity: 0.1;
    z-index: -1;
}

/* --- Estilos del Contenido del Testimonio --- */

/* Contenedor de la imagen y las comillas */
.testimonial-img {
    border-color: #FFD700 !important; /* Borde amarillo corporativo para la foto */
    color: #FFD700 !important; /* Color amarillo para las comillas " ,, " */
}

/* --- COMENTARIOS EN AMARILLO CORPORATIVO --- */
.testimonial-content p i.gray-clr {
    color: #FFD700 !important; /* Amarillo vibrante para el texto del comentario */
    font-weight: 600; /* Un poco m��s de grosor para mejorar legibilidad */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3); /* Sutil sombra para que no 'vibre' el amarillo */
}

/* Nombre del Cliente (mantenemos blanco o amarillo suave para jerarqu��a) */
.testimonial-content h2 .white-clr {
    color: #ffffff !important; /* Nombre en blanco para contraste */
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Ajuste de padding si es necesario para el slider */
.testimonial-slider.pad-120 {
    padding-top: 80px;
    padding-bottom: 80px;
}

  
    /* Control de tama�0�9o del logo en el footer */
.logo-footer-small {
    max-width: 180px; /* Ajusta este valor seg��n tu gusto (ej: 150px o 200px) */
    height: auto;     /* Mantiene la proporci��n */
    display: block;
    margin-bottom: 20px;
}
/* Volver blanco el logo oscuro en el footer */
.logo-footer-small {
    max-width: 180px; /* Mantener el ajuste de tama�0�9o */
    height: auto;
    display: block;
    margin-bottom: 20px;
    width:140px;
    filter: brightness(0) invert(1); /* �9�7 lo vuelve blanco */
}

/* Para m��viles */
@media (max-width: 767px) {
    .logo-footer-small {
        max-width: 150px;
        margin: 0 auto 20px auto; /* Centrar */
    }
}
/* Para que en m��viles no se vea demasiado peque�0�9o */
@media (max-width: 767px) {
    .logo-footer-small {
        max-width: 150px;
        margin: 0 auto 20px auto; /* Lo centra en m��viles */
    }
}
.footer-legal-links {
    list-style: none;
    padding: 0;
    margin-top: 10px;
    font-size: 12px;
}
.footer-legal-links li {
    display: inline;
    margin: 0 5px;
}
.footer-legal-links a {
    color: rgba(255,255,255,0.6);
    text-decoration: none;
}
.footer-legal-links a:hover {
    color: #fff;
}

  /* Contenedor del Modal Estilo Tracking */
#login-popup .modal-content {
    border-radius: 15px !important;
    border: none;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

/* Encabezado Azul AyC */
#login-popup .modal-header {
    background-color: #22357f; /* Azul Corporativo */
    color: white;
    border: none;
    padding: 25px;
    position: relative;
}

#login-popup .modal-title {
    color: white !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#login-popup .close {
    color: white;
    opacity: 0.8;
}

/* Inputs con dise�0�9o limpio */
#login-popup .form-control {
    background-color: #f8f9fa !important; /* Gris suave del formulario tracking */
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    padding: 12px 15px !important;
    height: auto;
    font-size: 14px;
}

#login-popup .form-control:focus {
    border-color: #f7b733 !important; /* Resalte amarillo al escribir */
    box-shadow: 0 0 8px rgba(247, 183, 51, 0.2);
}

/* Bot��n Amarillo AyC Express */
#login-popup .btn-block {
    background-color: #f7b733 !important; /* Amarillo "Buscar" del Tracking */
    color: #22357f !important; /* Texto en azul para contraste */
    font-weight: 800;
    border: none;
    border-radius: 8px;
    padding: 12px;
    margin-top: 10px;
    transition: all 0.3s ease;
}

#login-popup .btn-block:hover {
    background-color: #e5a622 !important;
    transform: translateY(-2px);
}

/* Enlaces y Texto */
#login-popup .blue-clr {
    color: #22357f !important;
    font-weight: 700;
}

/* Contenedor Principal del Popup */
.track-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #003366; /* Azul AyC */
    color: white;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
}

/* Barra de Progreso Estilo Logistics */
.progress-track {
    background: #e0e0e0;
    height: 12px;
    border-radius: 10px;
    margin: 20px 0;
    overflow: hidden;
    border: 1px solid #ccc;
}

.progress-bar-track {
    background: #ffcc00; /* Amarillo AyC */
    height: 100%;
    width: 0%;
    transition: width 1s ease-in-out;
    box-shadow: 0 0 10px rgba(255, 204, 0, 0.5);
}

/* Etiquetas de Estado Din��micas */
.estado {
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 12px;
}
.registrado { background: #6c757d; color: white; }
.transito { background: #007bff; color: white; }
.reparto { background: #fd7e14; color: white; }
.entregado { background: #28a745; color: white; }

/* Timeline (Historial) */
.timeline-item {
    padding: 10px 0 10px 25px;
    border-left: 3px solid #003366; /* L��nea Azul */
    position: relative;
    margin-left: 10px;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -9px;
    top: 12px;
    width: 15px;
    height: 15px;
    background: white;
    border: 3px solid #ffcc00; /* Punto Amarillo */
    border-radius: 50%;
}

.timeline-item.active {
    border-left: 3px dashed #ffcc00;
}

.timeline-item.active::before {
    background: #ffcc00;
    box-shadow: 0 0 8px #ffcc00;
}

/* Mapa en el Popup */
#mapPopup {
    width: 100%;
    height: 250px;
    border-radius: 8px;
    border: 2px solid #003366;
    margin-top: 10px;
}
/* El c��rculo base (vac��o) */
.timeline-item::before {
    content: '';
    position: absolute;
    left: -9px;
    top: 12px;
    width: 15px;
    height: 15px;
    background: white; /* Centro vac��o por defecto */
    border: 3px solid #ffcc00; /* Borde amarillo */
    border-radius: 50%;
    z-index: 2;
}

/* El c��rculo lleno (cuando tiene la clase active) */
.timeline-item.active::before {
    background: #ffcc00 !important; /* Aqu�� se llena de amarillo */
    box-shadow: 0 0 5px rgba(255, 204, 0, 0.8); /* Brillo opcional */
}

/* La l��nea que une los puntos */
.timeline-item {
    border-left: 3px solid #003366; /* L��nea azul de AyC */
    margin-left: 10px;
    padding-left: 20px;
    padding-bottom: 20px;
    position: relative;
}
   .timeline-container {
    padding-left: 10px; /* Espacio para los c��rculos visuales */
}

.timeline-item {
    position: relative;
    /* La l��nea s��lida y gruesa que une todo */
    border-left: 3px solid #003366;
    padding-left: 20px;
    margin-bottom: 0; /* Eliminamos el margen inferior por defecto */
    padding-bottom: 25px; /* Usamos padding para el espaciado entre puntos y que la l��nea siga */
}

/* El ��ltimo elemento no debe tener l��nea hacia abajo */
.timeline-item:last-child {
    border-left: 3px solid transparent; 
} 
   .modal-content {
    border-radius: 12px !important;
    overflow: hidden !important;
    border: none !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
} 

/* Estilos para el logo en m��viles */
@media (max-width: 767px) {
    .logo-container-movil {
        padding-top: 15px;
        padding-bottom: 15px;
        display: flex;
        justify-content: center; /* Centra el contenedor flex */
    }

    .logo-img-ac {
        height: 70px !important; /* Un poco m��s peque�0�9o para que no choque con el men�� */
        width: auto;
        transform: scale(1.1) !important; /* Ajustamos la escala para m��vil */
        margin: 0 auto;
    }
}

/* Estilos para computadoras (se mantiene tu dise�0�9o actual) */
@media (min-width: 768px) {
    .logo-img-ac {
        height: 85px; 
        width: auto; 
        max-width: none; 
        transform: scale(1.3); 
        transform-origin: left center;
    }
}

@media (max-width: 768px) {
    /* El código CSS aquí solo afectará a celulares y tablets */
}

/* Estilo base para los enlaces del men� */
.navbar-nav.theme-menu li a {
    position: relative;
    text-decoration: none;
    padding-bottom: 5px; /* Espacio para la barra */
}
/* 1. Aseguramos que el enlace sea el contenedor de la línea y recorte lo que sale de él */
.navbar-nav.theme-menu li a {
    position: relative;
    text-decoration: none;
    display: inline-block; /* Importante para que el overflow funcione bien */
    overflow: hidden;      /* ESTO EVITA QUE LA LÍNEA SE VEA FUERA DE LA PALABRA */
    padding-bottom: 8px;   /* Espacio controlado para la línea */
}
/* Barra inferior con el amarillo exacto de AyC Express */
.navbar-nav.theme-menu li a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 4px; /* Un poco m�s gruesa para que resalte m�s */
    display: block;
    margin-top: 8px; /* Espacio bajo el texto */
    left: 0;
    background-color: #FFD200 !important; /* Amarillo vibrante sin transparencia */
    transition: width 0.3s ease;
    -webkit-transition: width 0.3s ease;
    opacity: 1 !important; /* Asegura que no se vea oscuro/opaco */
}

/* Efecto Hover */
.navbar-nav.theme-menu li a:hover::after {
    width: 100%;
    background-color: #FFD200 !important;
}

/* Elemento activo o seleccionado */
.navbar-nav.theme-menu li.active a::after {
    width: 100%;
    background-color: #FFD200 !important;
}

}
@media (max-width: 991px) {
    .navbar-nav.theme-menu li a::after {
        display: none !important;
    }
}

/* Ajustar el contenedor principal del menú */
.navbar-nav.theme-menu {
    display: flex;
    align-items: center; /* Centrado vertical */
    height: 40px;        /* Ajusta este valor para reducir el alto total */
    margin: 0;
    padding: 0;
}

/* Reducción de grosor y centrado del botón */
.navbar-nav.theme-menu li .btn-zona-clientes,
.navbar-nav.theme-menu li a.zona-clientes {
    padding: 6px 18px !important;  /* Menos espacio arriba/abajo, buen ancho a los lados */
    line-height: 1.2 !important;   /* Evita que el texto fuerce altura extra */
    display: inline-flex !important;
    align-items: center;           /* Centrado vertical perfecto */
    justify-content: center;       /* Centrado horizontal perfecto */
    height: auto !important;       /* Deja que el padding mande sobre el alto */
    margin-top: 5px;               /* Ajuste para que se vea centrado en la barra azul */
    border-radius: 8px !important; /* Bordes redondeados más suaves */
    font-size: 13px !important;    /* Texto ligeramente más pequeño si se ve muy apretado */
    background-color: #FFD200 !important; /* Amarillo vibrante de A&C Express */
}

/* Efecto al pasar el mouse (opcional) */
.navbar-nav.theme-menu li .btn-zona-clientes:hover {
    background-color: #ffcc00 !important; /* Un amarillo un toque más oscuro al tocar */
    transform: scale(1.02);               /* Ligero efecto de crecimiento */
    transition: all 0.2s ease;
}

    /* Hace que la banda sea transparente */
    .top-bar2 {
        background: transparent !important; /* Elimina el fondo blanco */
        position: absolute;             /* La posiciona sobre el contenido inferior */
        width: 100%;                    /* Asegura que ocupe todo el ancho */
        z-index: 10;                    /* La mantiene por encima de la imagen */
        border-bottom: none !important; /* Quita bordes si los tuviera */
    }

    /* Opcional: Si el texto se pierde con el fondo, cámbialo a blanco */
    .top-bar2 .theme-clr, 
    .top-bar2 h6, 
    .top-bar2 p {
        color: #ffffff !important;
    }
    
    /* Asegura que el contenedor principal no oculte el desbordamiento */
    .header-main {
        position: relative;
    }
     /* Logo e imponente recuadro */
        .logo-grande-contenedor {
            position: absolute;
            left: 18%; 
            top: 50%;
            transform: translateY(-50%);
            width: 180px; 
            height: 125px; 
            background-color: #f2f2f2; 
            padding: 15px;
            border-radius: 15px;
            box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.35); 
            z-index: 1200;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .logo-img-top {
            width: 100%;
            height: auto;
            max-height: 90%;
            display: block;
        }

        .menu-bar {
            background-color: #003366;
            overflow: visible !important;
        }

        /* Estilo Premium con palabras más juntas */
        .nav-item-premium {
            font-family: 'Montserrat', sans-serif !important;
            font-size: 17px !important; /* Un poco más grande como pediste */
            font-weight: 700 !important;
            text-transform: uppercase;
            color: #ffffff !important;
            /* REDUCIDO: de 20px a 12px para que las palabras estén más juntas */
            padding: 15px 12px !important; 
            text-decoration: none;
            letter-spacing: 0.5px !important; /* Menos espacio entre letras para que no se vea tan estirado */
            transition: 0.3s;
            white-space: nowrap; /* Evita que las palabras se rompan en dos líneas */
        }

        .nav-item-premium:hover {
            color: #ffcc00 !important;
        }

        .btn-zona-clientes-premium {
            font-family: 'Montserrat', sans-serif !important;
            background-color: #ffcc00; 
            color: #d40000 !important;
            font-weight: 800;
            padding: 12px 25px;
            border-radius: 50px;
            text-decoration: none;
            font-size: 14px;
            box-shadow: 0px 4px 12px rgba(0,0,0,0.4);
            display: inline-block;
            white-space: nowrap;
        }

        /* Forzar anulación de Bootstrap */
        .navbar-nav { float: none !important; }
        .navbar-collapse { border: none !important; box-shadow: none !important; display: flex !important; }
        
        
        <style>
    /* --- RESET Y POSICIONAMIENTO FIJO --- */
    body, html { margin: 0 !important; padding: 0 !important; }

    /* Hacer que ambos headers sean pegajosos */
    .desktop-only, .mobile-only {
        position: fixed !important; /* Lo fija arriba */
        top: 0;
        left: 0;
        width: 100%;
        z-index: 2000 !important; /* Asegura que esté por encima de todo */
        transition: all 0.3s ease; /* Para un efecto suave */
    }

    /* Espaciado para que el banner no se meta debajo del menú al cargar */
    body {
        padding-top: 85px !important; 
    }

    @media (max-width: 991px) {
        body { padding-top: 70px !important; }
    }

    /* --- LÓGICA DE VISIBILIDAD (Ya la tenías, se mantiene) --- */
    @media (min-width: 992px) {
        .desktop-only { display: block !important; }
        .mobile-only { display: none !important; }
    }

    @media (max-width: 991px) {
        .desktop-only { display: none !important; }
        .mobile-only { display: block !important; }
    }

    /* Estilo adicional: Sombra al hacer scroll (opcional pero recomendado) */
    .header-scrolled {
        box-shadow: 0px 4px 15px rgba(0,0,0,0.4);
        background-color: rgba(0, 51, 102, 0.95) !important; /* Azul un poco transparente al bajar */
    }

    /* --- TUS ESTILOS ORIGINALES PC (Mantenidos) --- */
    .logo-grande-contenedor {
        position: absolute;
        left: 18%; top: 50%;
        transform: translateY(-50%);
        width: 180px; height: 125px;
        background-color: #f2f2f2;
        padding: 15px; border-radius: 15px;
        box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.35);
        z-index: 1200;
        display: flex; align-items: center; justify-content: center;
    }
    /* ... El resto de tus estilos (.nav-item-premium, .btn-zona-clientes-premium, etc) se quedan igual ... */
    

   /* Solución radical para la imagen de AyC Express */
section.prod-delivery .delivery-img-col, 
section.prod-delivery .delivery-img {
    height: auto !important;
    min-height: 400px; /* Dale espacio suficiente */
    display: flex !important;
    align-items: center !important;
}

section.prod-delivery img.img-responsive {
    max-height: 550px !important; /* Ajusta según el tamaño de tu foto */
    width: auto !important;
    margin: 0 auto;
}     
/* --- CONFIGURACIÓN DE TIPOGRAFÍA MONTSERRAT --- */

/* Aplicamos la fuente solo a etiquetas de texto reales */
body, p, span, a, li, h1, h2, h3, h4, h5, h6, input, button, textarea, div:not([class*="fa-"]):not(.fa):not(.fas):not(.far) {
    font-family: 'Montserrat', sans-serif !important;
}

/* --- REFUERZO PARA ICONOS (Para que no se rompan) --- */
.fa, .fas, .far, .fab {
    font-family: "Font Awesome 5 Free", "FontAwesome" !important; /* Prueba ambos nombres comunes */
    font-weight: 900; /* FontAwesome sólido requiere 900 */
    display: inline-block !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    line-height: 1 !important;
}

/* --- ESTILO CORPORATIVO A&C EXPRESS --- */

/* Títulos potentes como Olva/DHL */
h1, h2, h3, .section-title {
    font-weight: 800 !important; 
    color: #fff; /* Azul de tu marca */
    letter-spacing: -1px;
}

/* Párrafos limpios */
p {
    font-weight: 400 !important;
    color: #4a5568;
    line-height: 1.7;
}

/* Resaltados en amarillo de la marca */
.theme-clr {
    color: #ffc107 !important;
    font-weight: 700;
}

/* --- REPARACIÓN ICONO WHATSAPP PREMIUM PRO --- */

/* Forzar la fuente de Marcas para WhatsApp (Font Awesome Brands) */
.fa-whatsapp, 
.fab.fa-whatsapp, 
[class*="fa-whatsapp"] {
    font-family: "Font Awesome 5 Brands", "Font Awesome 6 Brands", "FontAwesome" !important;
    font-weight: 400 !important; /* Los logos de marcas suelen usar peso 400 */
    display: inline-block !important;
    visibility: visible !important;
    font-style: normal !important;
}

/* Estilo Pro para el icono de WhatsApp (Verde vibrante o Azul A&C) */
.fa-whatsapp {
    color: #25D366; /* Verde oficial de WhatsApp */
    transition: all 0.3s ease;
}

/* Efecto hover elegante */
.fa-whatsapp:hover {
    transform: scale(1.2);
    filter: drop-shadow(0 5px 15px rgba(37, 211, 102, 0.4));
}
/* 🔥 INPUTS Y SELECTS MÁS OSCUROS */
.calc-form input,
.calc-form select {
    border: 1.5px solid #555; /* gris oscuro */
    color: #222; /* texto más oscuro */
    font-weight: 500;
}

/* 🏷 LABELS */
.calc-form label {
    color: #333;
    font-weight: 600;
}

/* ✨ FOCUS (cuando haces click) */
.calc-form input:focus,
.calc-form select:focus {
    border-color: #000;
    outline: none;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
}

/* 📦 CONTENEDOR GENERAL (opcional pro) */
.calc-form {
    color: #222;
}