/* ==========================================================================
   Microinteracciones globales
   Se carga en todas las páginas, después de style.css y responsive.css.
   Regla de oro: nada de acá puede ocultar contenido ni mover el layout.
   Solo transform, opacity, color y sombra, que no reflowean.
   ========================================================================== */

html {
    scroll-behavior: smooth;
}

/* --------------------------------------------------------------------------
   1. Foco visible
   style.css apaga el outline con !important en enlaces, botones e inputs, lo
   que deja a quien navega con teclado sin saber dónde está parado. Se
   restituye solo para :focus-visible, así que el ratón no lo ve nunca.
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid #002d85 !important;
    outline-offset: 3px !important;
    border-radius: 3px;
}

.main-footer a:focus-visible,
.navbar-style-one a:focus-visible {
    outline-color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   2. Header: entrada al cargar
   -------------------------------------------------------------------------- */
@keyframes mtcHeaderIn {
    from {
        opacity: 0;
        transform: translateY(-14px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.header .navbar-style-one {
    animation: mtcHeaderIn 0.55s cubic-bezier(0.22, 0.68, 0.32, 1) both;
}

/* --------------------------------------------------------------------------
   3. Navegación
   El fondo del hover ya lo define style.css. Acá solo se suaviza la llegada
   y se marca el ítem activo con un punto discreto.
   -------------------------------------------------------------------------- */
.navbar-style-one .menu-container > ul > li > a {
    transition: background-color 0.22s ease, color 0.22s ease, border-radius 0.22s ease;
}

.navbar-brand img {
    transition: transform 0.35s cubic-bezier(0.22, 0.68, 0.32, 1);
}

.navbar-brand:hover img {
    transform: scale(1.04);
}

.navbar-toggler {
    transition: transform 0.25s ease;
}

.navbar-toggler:active {
    transform: scale(0.94);
}

/* --------------------------------------------------------------------------
   4. Botones
   -------------------------------------------------------------------------- */
.btn-primary-custom,
.service-btn,
input[type="submit"],
.wpcf7-submit {
    transition: background-color 0.25s ease, transform 0.18s cubic-bezier(0.22, 0.68, 0.32, 1), box-shadow 0.25s ease !important;
}

.btn-primary-custom:hover,
.service-btn:hover,
.wpcf7-submit:hover {
    box-shadow: 0 8px 20px rgba(0, 45, 133, 0.22);
}

/* Respuesta física al clic */
.btn-primary-custom:active,
.service-btn:active,
.wpcf7-submit:active {
    transform: scale(0.975) !important;
}

/* --------------------------------------------------------------------------
   5. Formularios
   -------------------------------------------------------------------------- */
.form-control,
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.form-control:focus,
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 textarea:focus {
    border-color: #002d85;
    box-shadow: 0 0 0 3px rgba(0, 45, 133, 0.12);
}

/* El spinner de Contact Form 7 aparece sin aviso */
.wpcf7-spinner {
    transition: opacity 0.2s ease;
}

/* --------------------------------------------------------------------------
   6. Logos de marcas
   Reposan en gris y toman color al pasar por encima: da vida a la grilla sin
   agregar ruido cuando se mira la página entera.
   -------------------------------------------------------------------------- */
.brand-logo,
.brands-logo img,
.brand-logo-container img {
    transition: transform 0.4s cubic-bezier(0.22, 0.68, 0.32, 1), filter 0.4s ease, opacity 0.4s ease;
}

.brand-logo:hover,
.brand-logo:hover img,
.brands-logo img:hover,
.brand-logo-container:hover img {
    transform: scale(1.07);
}

/* --------------------------------------------------------------------------
   7. Galería con lightbox
   La imagen hace zoom dentro de su marco, no lo desborda.
   -------------------------------------------------------------------------- */
.lightbox-image {
    display: block;
    overflow: hidden;
    position: relative;
    border-radius: 10px;
}

.lightbox-image img {
    display: block;
    width: 100%;
    transition: transform 0.65s cubic-bezier(0.2, 0.6, 0.2, 1);
    will-change: transform;
}

.lightbox-image:hover img,
.lightbox-image:focus-visible img {
    transform: scale(1.07);
}

.lightbox-image .image-overlay {
    transition: opacity 0.3s ease, backdrop-filter 0.3s ease;
}

.lightbox-image .image-overlay i {
    transition: transform 0.35s cubic-bezier(0.22, 0.68, 0.32, 1);
}

.lightbox-image:hover .image-overlay i {
    transform: scale(1.15);
}

/* --------------------------------------------------------------------------
   8. Bloques que se elevan
   -------------------------------------------------------------------------- */
.counter-item,
.team-member,
.about-box,
.blog-item,
.service-item {
    transition: transform 0.35s cubic-bezier(0.22, 0.68, 0.32, 1), box-shadow 0.35s ease;
}

.counter-item:hover,
.team-member:hover,
.about-box:hover,
.blog-item:hover,
.service-item:hover {
    transform: translateY(-5px);
}

.team-member .member-image img,
.blog-item img {
    transition: transform 0.5s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.team-member:hover .member-image img {
    transform: scale(1.04);
}

/* --------------------------------------------------------------------------
   9. Pie
   -------------------------------------------------------------------------- */
.contact-item a {
    position: relative;
    display: inline-block;
}

.contact-item a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 1px;
    background: currentColor;
    transition: width 0.3s cubic-bezier(0.22, 0.68, 0.32, 1);
}

.contact-item a:hover {
    text-decoration: none !important;
}

.contact-item a:hover::after {
    width: 100%;
}

.contact-item i {
    transition: transform 0.3s ease;
}

.contact-item:hover i {
    transform: translateX(2px);
}

.social-icon {
    transition: transform 0.28s cubic-bezier(0.22, 0.68, 0.32, 1), box-shadow 0.28s ease, background-color 0.28s ease;
}

.social-icon:active {
    transform: translateY(-1px) scale(0.95);
}

.footer-logo-img {
    transition: transform 0.4s cubic-bezier(0.22, 0.68, 0.32, 1);
}

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

/* --------------------------------------------------------------------------
   10. Aparición al entrar en pantalla
   El JS marca los elementos y les pone .in-view. Si el JS no corre, ninguna
   de estas reglas llega a aplicarse y todo queda visible: la clase .aos la
   agrega main.js, nunca el HTML.
   -------------------------------------------------------------------------- */
.aos {
    will-change: opacity, transform;
}

.aos.in-view {
    will-change: auto;
}

/* --------------------------------------------------------------------------
   11. Preferencia de movimiento reducido
   Quien lo pida en su sistema no ve ninguna de estas animaciones.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .aos {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* --------------------------------------------------------------------------
   12. Video del hero
   El poster hace de fondo. En móvil el video no se descarga: se ve el poster,
   que pesa 280 KB contra los 8 MB del MP4.
   -------------------------------------------------------------------------- */
.banner-media {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

.banner-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.8s ease;
}

/* El JS lo marca cuando el video ya tiene fotogramas que mostrar */
.banner-video.esta-listo {
    opacity: 1;
}

/* --------------------------------------------------------------------------
   13. Reserva de espacio para las imágenes
   Los <img> del tema no llevan width ni height, así que el navegador les da
   alto cero hasta recibir el primer byte y el contenido salta al llegar cada
   foto. aspect-ratio reserva el hueco antes de la descarga.
   -------------------------------------------------------------------------- */
.lightbox-image {
    aspect-ratio: 3 / 2;
}

.lightbox-image img {
    height: 100%;
    object-fit: cover;
}

.slider-item-img,
.brands-logo img {
    aspect-ratio: 3 / 2;
    object-fit: contain;
}

/* --------------------------------------------------------------------------
   14. Superficie táctil
   En móvil los campos del formulario quedaban en 36 px de alto y los iconos
   sociales en 35x35. El mínimo cómodo es 44x44.
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .form-control,
    .wpcf7 input[type="text"],
    .wpcf7 input[type="email"],
    .wpcf7 input[type="tel"],
    .wpcf7 input[type="date"],
    .wpcf7 select {
        min-height: 48px !important;
        padding-top: 11px !important;
        padding-bottom: 11px !important;
        font-size: 16px !important; /* menos de 16px hace que iOS haga zoom al enfocar */
    }

    .wpcf7 textarea {
        font-size: 16px !important;
        padding: 11px 12px !important;
    }

    .btn-primary-custom,
    .service-btn,
    .wpcf7-submit {
        min-height: 48px !important;
        padding-top: 13px !important;
        padding-bottom: 13px !important;
    }

    .social-icon {
        width: 44px !important;
        height: 44px !important;
    }

    .navbar-toggler {
        min-width: 44px;
        min-height: 44px;
    }

    .owl-nav button {
        min-width: 44px !important;
        min-height: 44px !important;
    }
}