/*
 * ARCHIVO: style.css
 * Hoja de estilos V9 - Profesional + Banners Parallax + Fuente Outfit + Logo Imagen
 */

/* ==== 1. VARIABLES Y ESTILOS GLOBALES ==== */
:root {
    --zt-blue: #0061FF;
    --zt-blue-rgb: 0, 97, 255; /* RGB para el efecto 'glow' */
    --zt-blue-dark: #004ecc;
    --zt-dark-navy: #0A1931;
    --zt-text: #212529;
    --zt-text-muted: #6c757d;
    --zt-bg-light: #f9fbfd;
    --zt-border-light: #e9ecef;
    /* ==== FUENTE ACTUALIZADA ==== */
    --zt-font-primary: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --zt-radius: 0.5rem; /* 8px */
    --zt-radius-pill: 50rem;
    --zt-shadow-sm: 0 4px 12px rgba(0,0,0,0.05);
    --zt-shadow-md: 0 8px 24px rgba(0,0,0,0.08);
    --zt-transition: all 0.3s ease-in-out;
}

html{
    scroll-padding-top: 84px;
}

html, body {
    overflow-x: hidden;
}

body {
    font-family: var(--zt-font-primary);
    color: var(--zt-text);
    background-color: #fff;
    line-height: 1.6;

    /* Fondo de puntos sutil 
    background-image: radial-gradient(var(--zt-border-light) 1px, transparent 1px);
    background-size: 20px 20px;*/
}

.bg_blue_bg {
    background: #00307d;
    background: linear-gradient(32deg,rgba(0, 48, 125, 0.15) 0%, rgba(0, 48, 125, 0.1) 43%, rgba(255, 229, 0, 0.1) 100%);
    display: block;
    position: fixed;
    width: 100%;
    height: 100vh;
    z-index: -9999;
    
}

.bg-light-subtle {

    background: transparent!important;

}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    color: #0a234b;
    letter-spacing: -1.5px;
}

@media (min-width: 1200px) {
    .h2, h2 {
        font-size: 3rem;
    }
}

p {
    font-size: 1.2rem !important;
}

.py-section {
    padding-top: 6rem;
    padding-bottom: 0rem;
}

/* Ocultar animaciones de AOS antes de que se disparen */
[data-aos] {
    opacity: 0;
    transition-property: opacity, transform;
}

/* ==== 1.5. PARALLAX BANNERS ==== */
.parallax-banner {
    padding: 8rem 0;
    position: relative;
    color: #f7f8fa;
    
    /* El truco del Parallax */
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed; /* ESTA ES LA MAGIA */
}

/* Overlay oscuro para legibilidad */
.parallax-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

     background: linear-gradient(to top, rgba(0, 97, 255, 0.8) 0%,rgba(10, 25, 49, 0.8) 100%); /* Cambia a gradiente azul */
    z-index: 1;
}

.parallax-content {
    position: relative;
    z-index: 2;
    max-width: 800px; /* Limita el ancho del texto */
    margin: 0 auto;
    padding: 0 1rem;
}

.parallax-banner h2, .parallax-banner p {
    color: #f7f8fa; /* Asegura que el texto sea blanco */
}

/* * !! IMPORTANTE: Reemplaza estas imágenes de fondo por las tuyas
 */
#parallax-install {
        margin-top: 6rem;
    background-image: url('images/bg_parallax2.jpg');
}

#parallax-payment {
        margin-top: 6rem;
    background-image: url('images/bg_parallax3.jpg');
}

.parallax-banner .btn-light {
    background-color: #f7f8fa;
    color: var(--zt-blue);
    border: 2px solid #f7f8fa;
    font-weight: 600;
}

.parallax-banner .btn-light:hover {
    background-color: transparent;
    color: #f7f8fa;
    transform: translateY(-2px);
    box-shadow: none;
}


/* ==== 2. BOTONES PERSONALIZADOS ==== */
.btn {
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    border-radius: var(--zt-radius-pill);
    transition: var(--zt-transition);
    border-width: 2px;
}
.btn-lg {
    padding: 1rem 2rem;
    font-size: 1rem;
}
.btn-primary {
    background-color: var(--zt-blue);
    border-color: var(--zt-blue);
}
.btn-primary:hover {
    background-color: var(--zt-blue-dark);
    border-color: var(--zt-blue-dark);
    transform: translateY(-2px);
    box-shadow: var(--zt-shadow-md);
}
.btn-primary-outline {
    background-color: transparent;
    border-color: var(--zt-blue);
    color: var(--zt-blue);
}
.btn-primary-outline:hover {
    background-color: var(--zt-blue);
    color: #f7f8fa;
    transform: translateY(-2px);
    box-shadow: var(--zt-shadow-sm);
}

/* Animación de "Glow" para el botón principal */
.btn-glow {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--zt-blue-rgb), 0.7);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(var(--zt-blue-rgb), 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(var(--zt-blue-rgb), 0);
    }
}


/* ==== 3. NAVBAR ==== */
#main-nav {
    /* Inicia transparente y sin sombra */
     background-color: rgba(255, 255, 255, 0.85);
    box-shadow: none;
    transition: var(--zt-transition);
}

/* Clase que añade JS al hacer scroll */
#main-nav.scrolled-nav {
    background-color: rgba(255, 255, 255, 0.85);
    /* Efecto de desenfoque de fondo */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: var(--zt-shadow-sm);
}

/* ==== ESTILOS DE LOGO ACTUALIZADOS ==== */
.navbar-brand {
    /* Se eliminaron los estilos de fuente (font-size, font-weight, color) */
    padding-top: 0;
    padding-bottom: 0;
}

.navbar-logo {
    height: 50px; /* Ajusta esta altura según tu logo real */
    width: auto; /* Mantiene la proporción */
}
/* ==== FIN DE ESTILOS DE LOGO ==== */


.navbar .nav-link {
    font-weight: 600;
    color: #555;
    transition: color 0.3s;
    margin: 0 0.5rem;
}
.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: var(--zt-blue);
}

/* ==== 4. HERO SECTION ==== */
.hero-section {

    padding: 10rem 0 6rem 0; /* Más padding superior para el navbar fijo */
    overflow: hidden;
    background: transparent;
    /* Gradiente de fondo sutil 
    background: linear-gradient(180deg, #f7f8fa 0%, var(--zt-bg-light) 100%); */

}
.hero-section h1 {
    line-height: 1;
}
.hero-section h1 span{
    font-style: italic;
}
.hero-section .lead {
    font-size: 1.2rem;
    color: var(--zt-text-muted);
    font-weight: 400;
}
.hero-image {
    border-radius: var(--zt-radius);
    object-fit: cover; /* Asegura que la imagen de picsum cubra el espacio */
    margin-bottom: 30px;
}

/* ==== 5. CLIENT LOGOS (Trust Banner) - SCROLLER ==== */

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Mueve el scroller la mitad de su ancho total (que es el ancho de la lista original) */
        transform: translateX(-50%);
    }
}

.logo-scroller-outer {
    max-width: 100%;
    overflow-x: hidden;
    /* Efecto de "fade" en los bordes */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
}

.logo-scroller-inner {
    display: flex;
    flex-wrap: nowrap;
    width: max-content; /* Permite que los elementos se desborden */
    
    /* La animación dura 60s. Ajusta este valor para ir más rápido o lento */
    animation: scroll 40s linear infinite;
}

/* Pausa la animación en hover */
.logo-scroller-outer:hover .logo-scroller-inner {
    animation-play-state: paused;
}

.logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2.5rem; /* Espacio entre logos */
    flex-shrink: 0; /* Evita que los logos se encojan */
}

.logo-item img {
    max-width: 150px; /* Tamaño fijo para los logos */
    height: 150px;
    object-fit: contain;
    opacity: 0.8;
    transition: var(--zt-transition);
}

.logo-item img:hover {
    opacity: 1;
}

/* ==== 6. TARJETAS DE SERVICIO (V5 - Con Imagen Superior, Hover limpio) ==== */
.service-card-v2 {
    background: #f7f8fa;
    border: 1px solid var(--zt-border-light);
    border-radius: var(--zt-radius);
    height: 100%;
    transition: var(--zt-transition);
    /* Dividimos la tarjeta en 2: imagen y contenido */
    display: flex;
    flex-direction: column;
    position: relative; /* Para el enlace de ZGuard */
}

.card-image-top {
    height: 200px;
    border-radius: var(--zt-radius) var(--zt-radius) 0 0;
    overflow: hidden; /* Clave para el efecto de zoom */
}

.card-image-top img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease-out; /* Transición para el zoom */
}

.card-content-body {
    padding: 2.5rem 2rem;
    flex-grow: 1; /* Ocupa el espacio restante */
    text-align: center; /* Centra el contenido */
}

.service-card-v2 .icon-wrap {
    font-size: 2rem;
    color: var(--zt-blue);
    margin-bottom: 1.5rem;
    display: inline-block;
    transition: var(--zt-transition); /* Transición para el ícono */
}

.service-card-v2 h3 {
    margin-bottom: 1rem;
    letter-spacing: 0;
}

.service-card-v2 p {
    color: var(--zt-text-muted);
    font-size: 0.95rem;
}

/* Efectos de Hover mejorados */
.service-card-v2:hover {
    transform: translateY(-5px);
    box-shadow: var(--zt-shadow-md);
    /* Se ha eliminado 'border-color: var(--zt-blue);' según la solicitud */
}

.service-card-v2:hover .icon-wrap {
    transform: scale(1.15); /* Ícono se agranda */
    color: var(--zt-blue-dark); /* Color más intenso */
}

.service-card-v2:hover .card-image-top img {
    transform: scale(1.1); /* Efecto de zoom en la imagen */
}

/* Tarjeta Especial (ZGuard) */
.service-card-special {
    background: var(--zt-dark-navy);
}
.service-card-special h3,
.service-card-special p {
    color: #f7f8fa;
}
.service-card-special .icon-wrap {
    color: #f7f8fa;
}
.service-card-special:hover {
    background-color: var(--zt-blue);
    border-color: var(--zt-blue); /* Se mantiene el borde azul para que coincida con el fondo */
    transform: translateY(-5px);
    box-shadow: var(--zt-shadow-md);
}


/* ==== 7. SECCIÓN "QUIÉNES SOMOS" ==== */
.marcas-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}
.marcas-grid span {
    font-weight: 600;
    color: var(--zt-text-muted);
    font-size: 0.9rem;
}

/* ==== 8. TESTIMONIOS (V2) ==== */
.testimonial-card-v2 {
    background: #f7f8fa;
    border-radius: var(--zt-radius);
    padding: 2.5rem;
    box-shadow: var(--zt-shadow-sm);
    height: 100%;
    position: relative;
    border: 1px solid var(--zt-border-light);
}
.testimonial-card-v2::before {
    content: '“';
    position: absolute;
    top: 1rem;
    left: 1.5rem;
    font-size: 6rem;
    font-weight: 800;
    color: var(--zt-blue);
    opacity: 0.07;
    line-height: 1;
    z-index: 1;
}
.testimonial-card-v2 p {
    position: relative;
    z-index: 2;
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--zt-text);
}
.testimonial-card-v2 .stars {
    color: #f7c942;
    margin-bottom: 1rem;
    position: relative;
    z-index: 2;
}
.testimonial-card-v2 .author {
    margin-top: 1.5rem;
    position: relative;
    z-index: 2;
}


/* ==== 8.5. TARJETAS DE INDUSTRIAS (CON IMAGEN) ==== */
.industry-card {
    border-radius: var(--zt-radius);
    height: 250px; /* Altura fija para consistencia */
    position: relative;
    overflow: hidden; /* Clave para que la imagen no se salga */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.5rem;
    text-align: center;
    transition: var(--zt-transition);
    box-shadow: var(--zt-shadow-sm);
}

.industry-card .card-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: transform 0.4s ease-out;
}

/* Overlay con gradiente */
.industry-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(10, 25, 49, 0.8) 0%, rgba(10, 25, 49, 0.2) 100%);
    z-index: 2;
    transition: background 0.3s ease;
}

.industry-card .card-content-body {
    position: relative;
    z-index: 3;
}

.industry-card h3 {
    margin-bottom: 0;
    color: #f7f8fa; /* Texto blanco para contraste */
    font-weight: 600;
    font-size: 1.5rem;
    letter-spacing: 0;
}

/* Efectos de Hover */
.industry-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--zt-shadow-md);
}

.industry-card:hover .card-bg-image {
    transform: scale(1.1); /* Efecto de zoom a la imagen */
}

.industry-card:hover::before {
    background: linear-gradient(to top, rgba(0, 97, 255, 0.8) 0%, rgba(10, 25, 49, 0.3) 100%); /* Cambia a gradiente azul */
}

/* ==== 9. SECCIÓN CONTACTO (Dark) ==== */
.bg-dark {
    /* Gradiente sutil para dar profundidad */
    background: linear-gradient(135deg, var(--zt-dark-navy) 0%, #192742 100%) !important;
}
.text-muted-dark {
    color: #adb5bd !important;
}
.contact-info li {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    font-size: 1.1rem;
}
.contact-info li i {
    font-size: 1.25rem;
    color: var(--zt-blue);
    width: 30px;
}
.form-container-dark {
    background: rgba(255,255,255,0.05); /* Ligeramente traslúcido */
    padding: 2.5rem;
    border-radius: var(--zt-radius);
    border: 1px solid rgba(255,255,255,0.1);
}
.form-container-dark .form-label {
    color: #f7f8fa;
    font-weight: 500;
}
.form-container-dark .form-control {
    background-color: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.2);
    color: #f7f8fa;
    padding: 0.75rem 1rem;
}
.form-container-dark .form-control:focus {
    background-color: rgba(0,0,0,0.2);
    border-color: var(--zt-blue);
    color: #f7f8fa;
    box-shadow: 0 0 0 0.25rem rgba(var(--zt-blue-rgb), 0.25);
}

/* ==== 10. FOOTER (Dark) ==== */
.footer-dark {
    background-color: #050E1F;
    border-top: 1px solid #192742;
}

#contacto{
        margin-top: 6rem;
}
#contacto .contact-info a{
    color:#f7f8fa !important;
    text-decoration: none;
}

#contacto .contact-info a:hover{
    color:var(--zt-blue) !important;
}

/* ==== 11. ESTILOS PARA INT-TEL-INPUT (TEMA OSCURO) ==== */

/* Ajusta el contenedor del plugin para que ocupe el 100% */
.form-container-dark .iti {
    width: 100%;
}

/* Estilo del input dentro del contenedor del plugin (ya tiene .form-control) */
.form-container-dark .iti__input {
    width: 100%;
}

/* Fondo del menú desplegable de países */
.iti__dropdown-content {
    background-color: #2a3a55; /* Un poco más claro que el fondo del form */
    border: 1px solid rgba(255,255,255,0.2);
    box-shadow: var(--zt-shadow-md);
}

/* Estilo de cada país en la lista */
.iti__country {
    color: #f7f8fa;
    padding: 8px 12px;
}

/* Hover / Foco en un país de la lista */
.iti__country:hover,
.iti__country.iti__highlight {
    background-color: rgba(0, 97, 255, 0.2); /* Azul transparente */
}

/* Nombre del país seleccionado */
.iti__selected-dial-code {
    color: #adb5bd; /* Mismo color que text-muted-dark */
}

/* Flecha del dropdown */
.iti__arrow {
    border-top-color: #adb5bd;
}
.iti__arrow--up {
    border-bottom-color: #adb5bd;
}

/* Separador de dial code */
.iti__dial-code {
    color: #f7f8fa;
}

/* ==== 12. ESTILOS PARA EL CARRUSEL DE TESTIMONIOS ==== */

/* Posiciona las flechas fuera del contenido principal del carrusel */
#testimonialCarousel .carousel-control-prev,
#testimonialCarousel .carousel-control-next {
    width: 5%; /* Define el ancho del área de las flechas (pequeño) */
    opacity: 1; /* Asegura que siempre sean visibles (por defecto pueden ser menos opacas) */
    position: absolute; /* Asegura que no ocupen espacio en el flujo normal */
    top: 50%; /* Centra verticalmente */
    transform: translateY(-50%); /* Ajuste fino para centrado vertical */
    z-index: 10; /* Asegura que estén por encima de las tarjetas si se superponen ligeramente */
}

#testimonialCarousel .carousel-control-prev {
    left: -20px; /* Ajusta la posición izquierda para que no toque el container */
    right: auto;
}

#testimonialCarousel .carousel-control-next {
    right: -20px; /* Ajusta la posición derecha para que no toque el container */
    left: auto;
}

/* Cambia el color de las flechas (íconos SVG) a oscuro */
#testimonialCarousel .carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230A1931'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}

#testimonialCarousel .carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230A1931'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* Ajustes para pantallas más pequeñas para evitar que las flechas se salgan mucho */
@media (max-width: 991.98px) { /* Por debajo de col-lg */
    #testimonialCarousel .carousel-control-prev,
    #testimonialCarousel .carousel-control-next {
        width: 10%; /* Más espacio para las flechas en móviles/tablets */
        top: auto; /* Desactiva el centrado vertical basado en transform para flex */
        bottom: -50px; /* Mueve las flechas debajo del carrusel */
        transform: none; /* Elimina la transformación vertical */
        position: relative; /* Ajusta la posición para que no sean absolutas */
        display: flex; /* Para centrar el ícono */
        align-items: center; /* Centrado vertical del ícono */
        justify-content: center; /* Centrado horizontal del ícono */
        margin: 0 10px; /* Espacio entre las flechas */
    }
    #testimonialCarousel .carousel-control-prev {
        left: 0;
        right: auto;
    }
    #testimonialCarousel .carousel-control-next {
        right: 0;
        left: auto;
    }
    #testimonialCarousel .carousel-indicators {
        bottom: -80px; /* Mueve los indicadores más abajo */
    }
    #testimonialCarousel {
        padding-bottom: 100px; /* Asegura espacio para los controles inferiores */
    }
}

@media (max-width: 767px) {
    .hero-section {
        height: 100vh;
    }
   
    .logo-scroller-outer {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .logo-scroller-outer::-webkit-scrollbar {
        display: none;
    }
    .logo-item {
        padding: 0 1rem;
    }
    .logo-item img {
        max-width:200px;
        height: 200px;
    }
    .iti--container {
        max-width: 100vw !important;
        overflow-x: auto;
    }
    .iti__country-list {
        white-space: nowrap;
    }
    .parallax-banner {
        background-attachment: scroll !important;
    }
}