:root {
            --logex-morado: #25084D;
            --logex-verde: #82C91E;
            --logex-azul: #1A237E;
        }

        body { background-color: #fbfbfb; }

        /* --- Navbar Dinámica --- */
        .navbar {
            transition: all 0.5s ease;
            padding: 5px 0;
            background-color: #ffffff !important;
        }

        .navbar.scrolled {
            background-color: var(--logex-morado) !important;
            padding: 10px 0;
        }

        .navbar .nav-link {
            color: #333 !important;
            font-weight: 500;
        }

        .navbar.scrolled .nav-link {
            color: #ffffff !important;
        }

        .navbar .nav-link:hover {
            color: var(--logex-verde) !important;
        }

        .logo-azul { display: none; }
        .navbar.scrolled .logo-blanco { display: none; }
        .navbar.scrolled .logo-azul { display: block; }

        /* --- Hero y Video --- */
        .hero-video-container {
            position: relative;
            width: 100%;
            height: 85vh;
            overflow: hidden;
        }

        #bg-video {
            position: absolute;
            top: 50%;
            left: 50%;
            min-width: 100%;
            min-height: 100%;
            transform: translate(-50%, -50%);
            z-index: -2;
            object-fit: cover;
        }

        .video-overlay {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(75, 0, 130, 0.5));
            z-index: -1;
        }

        .hero-content {
            position: relative;
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            color: white;
        }

        .tracking-card {
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(15px);
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 20px;
            padding: 40px;
            max-width: 750px;
            margin: 0 auto;
        }

        .btn-logex-verde {
            background-color: var(--logex-verde) !important;
            color: var(--logex-azul) !important;
            font-weight: bold;
        }

        .form-white .form-control { color: #fff; }

        /* --- Estilos del Footer --- */
        .main-footer {
            background-color: #f8f9fa;
            color: #444;
            border-top: 5px solid var(--logex-verde);
        }
        .footer-title {
            color: var(--logex-azul);
            font-weight: 700;
            margin-bottom: 20px;
            position: relative;
        }
        .footer-link {
            color: #666;
            text-decoration: none;
            transition: 0.3s;
        }
        .footer-link:hover {
            color: var(--logex-verde);
            padding-left: 5px;
        }
        .social-icon {
            width: 40px;
            height: 40px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background-color: var(--logex-azul);
            color: white;
            margin-right: 10px;
            transition: 0.3s;
        }
        .social-icon:hover {
            background-color: var(--logex-verde);
            color: var(--logex-azul);
            transform: translateY(-3px);
        }


    /* Forzar transparencia en el buscador del Hero */
.tracking-card .form-control {
  background-color: transparent !important;
  color: white !important; /* Texto que escribe el usuario */
  border-color: rgba(255, 255, 255, 0.5) !important;
}

/* Color del texto cuando el input está enfocado (haciendo clic) */
.tracking-card .form-control:focus {
  background-color: rgba(255, 255, 255, 0.1) !important; /* Un toque muy leve de blanco al escribir */
  box-shadow: none;
  border-color: var(--logex-verde) !important;
}

/* Color de la etiqueta (Label) cuando está arriba o activa */
.tracking-card .form-label {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Color de la etiqueta cuando el usuario hace clic (Focus) */
.tracking-card .form-outline .form-control:focus ~ .form-label,
.tracking-card .form-outline .form-control.active ~ .form-label {
  color: var(--logex-verde) !important;
}

/* Quitar el fondo blanco automático que ponen algunos navegadores (Autofill) */
.tracking-card input:-webkit-autofill,
.tracking-card input:-webkit-autofill:hover,
.tracking-card input:-webkit-autofill:focus {
  -webkit-text-fill-color: white !important;
  -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
  transition: background-color 5000s ease-in-out 0s;
}



  /* Contenedor principal */
  .values-route-container {
    padding: 30px 0;
  }

  /* El bloque de texto */
  .value-box {
    border-radius: 20px;
    border-left: 5px solid transparent; /* Para el hover */
    transition: all 0.3s ease;
  }

  /* Hover effect para los bloques de texto */
  .value-box:hover {
    transform: translateY(-8px);
    box-shadow: 0 1rem 3rem rgba(37, 8, 77, 0.08) !important;
  }

  /* Personalización por lado (Left) */
  .left-item .value-box {
    border-right: 5px solid rgba(130, 201, 30, 0.2); /* Sutil Verde */
  }
  .left-item .value-box:hover {
    border-right: 5px solid var(--logex-verde);
  }

  /* Personalización por lado (Right) */
  .right-item .value-box {
    border-left: 5px solid rgba(26, 35, 126, 0.2); /* Sutil Azul */
  }
  .right-item .value-box:hover {
    border-left: 5px solid var(--logex-azul);
  }

  /* Ajustes para móviles */
  @media (max-width: 767.98px) {
    /* Ocultar la línea central en móvil para mejor espacio */
    .values-timeline-line {
      display: none;
    }

    /* Centrar iconos en móvil */
    .value-icon-wrap {
      margin-bottom: 20px;
    }

    /* El texto ocupa todo el ancho en móvil */
    .value-text {
      padding: 0 15px;
    }

    /* Quitar bordes laterales en hover móvil */
    .left-item .value-box, .right-item .value-box {
        border: none;
        border-top: 5px solid transparent;
    }
    .left-item .value-box:hover {
        border-top: 5px solid var(--logex-verde);
    }
    .right-item .value-box:hover {
        border-top: 5px solid var(--logex-azul);
    }
  }


    /* Efecto de invisibilidad inicial para el Scroll */
    .reveal {
        opacity: 0;
        transform: translateY(20px); /* Menos distancia para que sea más sutil */
        transition: all 0.7s ease-out;
    }

    /* Clase que activa la aparición (se activa con el JS de abajo) */
    .reveal.active {
        opacity: 1;
        transform: translateY(0);
    }

    /* Efecto de levitación al pasar el mouse */
    .testimonial-bubble {
        transition: all 0.3s ease;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }

    .testimonial-bubble:hover {
        transform: translateY(-5px) !important;
        box-shadow: 0 10px 20px rgba(0,0,0,0.2) !important;
    }


/* Estilo base: Aquí es donde quitamos lo "plano" */
.img-detalle {
    width: 100%;
    max-width: 220px;
    cursor: zoom-in;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    z-index: 1;

    /* 1. Bordes bonitos */
    border: 4px solid #ffffff; /* Marco blanco tipo foto física */
    border-radius: 15px;       /* Esquinas redondeadas */

    /* 2. Sombra para dar profundidad inicial */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);

    /* 3. Ajuste de color para que no se vea pálida */
    filter: brightness(0.98) contrast(1.02);
}

/* Efecto al pasar el mouse (Hover) */
.img-detalle:hover {
    object-fit: contain;
    /* Degradado de fondo que se ve en las esquinas */
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    padding: 10px;

    /* 4. Sombra mucho más intensa al flotar */
    filter: drop-shadow(0 20px 30px rgba(0,0,0,0.4)) brightness(1.05);

    /* 5. El Zoom que ya te gustó */
    transform: scale(1.5) translateY(-10px); /* Sube un poquito al crecer */
    border: 2px solid var(--logex-verde, #28a745); /* Opcional: cambia color de borde al flotar */
    z-index: 100;
}

/* Ajuste para celulares: el zoom no será tan exagerado para no tapar toda la pantalla */
@media (max-width: 768px) {
    .img-detalle:hover {
        transform: scale(1.3) translateY(-5px);
    }
}


/* Estilos extra para pulir el diseño */
#rastreo .form-control:focus {
  box-shadow: none;
  background-color: #fff;
}
#rastreo .input-group:focus-within {
  box-shadow: 0 10px 25px rgba(37, 8, 77, 0.1) !important;
}
#rastreo .timeline {
  position: relative;
}
#rastreo .badge {
  font-size: 0.85rem;
  letter-spacing: 0.5px;
}
/* Efecto suave al cargar resultados */
.card {
  animation: fadeInUp 0.5s ease;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}


  .whatsapp-btn:hover {
    background-color: #ffffff !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.2) !important;
  }
  .whatsapp-btn-web:hover {
    background-color: #128C7E !important; /* Un verde WhatsApp más oscuro al pasar el mouse */
    border-color: #128C7E !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.2) !important;
    color: white !important;
  }


  .whatsapp-btn:hover {
    background-color: #ffffff !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.2) !important;
  }
  .whatsapp-btn-web:hover {
    background-color: rgba(255,255,255,0.1) !important;
    transform: translateY(-3px);
  }