/*
 * Ajustes de responsividad sobre el port de viperbras.com.br.
 * Solo corrigen fallas de layout; no cambian colores, tipografías ni la estética (ver DESIGN.md).
 * Se carga en todas las páginas desde viper_finalize_html() en includes/site.php.
 */

/* Selector de idioma: las 4 banderas siempre en una sola fila, sin encogerse junto al menú */
.elementor-element-e662f3a {
    flex-shrink: 0;
}

.gtranslate_wrapper {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
}

.gtranslate_wrapper a {
    display: block;
    line-height: 0;
}

/*
 * Menú principal: con 7 ítems + banderas + bloque de teléfono no cabe en laptops angostos
 * (el sitio original de Brasil también se monta). Se compacta el espacio entre ítems y,
 * entre 992 y 1200 px (iPad horizontal, laptops chicos), se usa el menú hamburguesa de la plantilla.
 */
@media (max-width: 1600px) {
    .elementor-82 .elementor-element.elementor-element-73e76723 .tf-nav-menu .mainnav .menu-container > ul > li > a {
        padding-right: 16px;
    }
}

/*
 * Sobre 1368 px la plantilla reserva 25 % al bloque del teléfono, que usa ~260 px: el menú (55 %)
 * se quedaba sin espacio, partía "Blog y Noticias" y las banderas tapaban "Contact" (FR) o el ícono
 * del teléfono. Se usa el mismo reparto que la plantilla ya tiene para ≤1368 px.
 */
@media (min-width: 1369px) {
    .elementor-82 .elementor-element.elementor-element-75341cc2 {
        --width: 70%;
    }

    .elementor-82 .elementor-element.elementor-element-152f959a {
        --width: 19%;
    }

    .elementor-82 .elementor-element.elementor-element-47c5728f,
    .elementor-82 .elementor-element.elementor-element-432bfdae {
        --width: 100%;
    }
}

@media (max-width: 1280px) {
    .elementor-82 .elementor-element.elementor-element-73e76723 .tf-nav-menu .mainnav .menu-container > ul > li > a {
        padding-right: 12px;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .tf-nav-menu .mainnav {
        display: none;
    }

    .tf-nav-menu .btn-menu-mobile {
        display: inline-block;
    }

    .tf-nav-menu .nav-panel {
        display: block;
    }
}

/*
 * "¿Por qué elegir VIPER?" (plantilla 355, en home, empresa y productos): en tablet la plantilla
 * pide el título al 100 %, pero el contenedor no permite saltar de línea, así que las 4 tarjetas
 * quedaban apretadas en ~80 px, el texto se salía y generaba scroll horizontal.
 */
@media (min-width: 768px) and (max-width: 1024px) {
    .elementor-355 .elementor-element.elementor-element-f0e3d20 {
        --flex-wrap: wrap;
    }

    .elementor-355 .elementor-element.elementor-element-412d1827 {
        --width: 100%;
    }
}

/*
 * Footer (plantilla 94) en tablet: la plantilla define las columnas al 50 % (grilla 2×2) pero la fila
 * no salta de línea, así que las 4 columnas quedaban apretadas y "Contacto LatAm" se salía de la
 * pantalla. La línea de países sube -80px en escritorio; en tablet se montaba sobre los links.
 */
@media (min-width: 768px) and (max-width: 1024px) {
    .elementor-94 .elementor-element.elementor-element-41f3cd43 {
        --flex-wrap: wrap;
        --row-gap: 40px;
    }

    .elementor-94 .elementor-element.elementor-element-405f104 {
        --margin-top: 30px;
    }
}

/*
 * Fotos con texto encima (Empresa y Diferenciales): antes el texto venía escrito en portugués
 * dentro de la imagen. Ahora la foto es limpia y el texto es HTML traducible (archivos lang de cada página).
 * Los tamaños van en cqw (relativos a la capa sobre la foto) para que el texto escale con la imagen.
 */
.vx-photo-text {
    position: relative;
    margin: 0;
    line-height: 0;
}

/* La capa absoluta es la que define el contenedor para los cqw: si lo fuera la figura,
   Chrome calcula su altura intrínseca como 0 y el contenido siguiente se monta encima */
.vx-photo-text__layer {
    position: absolute;
    inset: 0;
    container-type: inline-size;
}

.vx-photo-text img {
    display: block;
    width: 100%;
    height: auto;
}

/* La plantilla de Diferenciales deja esta imagen al 55 % centrada (100 % en celular): el ancho pasa a la figura */
.elementor-460 .elementor-element.elementor-element-ac36132 .vx-photo-text {
    width: 55%;
    margin: 0 auto;
}

.elementor-460 .elementor-element.elementor-element-ac36132 .vx-photo-text img {
    width: 100%;
}

@media (max-width: 767px) {
    .elementor-460 .elementor-element.elementor-element-ac36132 .vx-photo-text {
        width: 100%;
    }
}

.vx-photo-text .vx-photo-text__caption {
    position: absolute;
    text-align: left;
    text-wrap: balance;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-family: "Barlow Condensed", sans-serif;
    font-style: normal;
    line-height: 1;
    text-transform: uppercase;
    color: #FFFFFF;
}

.vx-photo-text--stat .vx-photo-text__caption {
    left: 5.5%;
    top: 26%;
    max-width: 56%;
}

.vx-photo-text--stat .vx-photo-text__lead {
    font-size: 4.6cqw;
    font-weight: 600;
}

.vx-photo-text--stat .vx-photo-text__big {
    font-size: 21cqw;
    font-weight: 700;
    line-height: 0.85;
}

.vx-photo-text--stat .vx-photo-text__tail {
    margin-left: 12cqw;
    font-size: 3.6cqw;
    font-weight: 500;
}

.vx-photo-text--quote .vx-photo-text__caption {
    left: 7%;
    top: 22%;
    max-width: 70%;
}

.vx-photo-text--quote .vx-photo-text__mark {
    height: 9cqw;
    font-size: 22cqw;
    font-weight: 700;
    line-height: 0.85;
}

.vx-photo-text--quote .vx-photo-text__lead {
    margin: 4cqw 0 0.6cqw;
    font-size: 4.3cqw;
    font-weight: 500;
}

.vx-photo-text--quote .vx-photo-text__big {
    font-size: 7.4cqw;
    font-weight: 600;
    line-height: 1.05;
}

/*
 * Testimonios del home (bloque 5904499, ahora visible con los testimonios reales):
 * las estrellas usaban la fuente eicons, que no se carga; se usa Font Awesome 5 (ya cargada).
 * Todas las tarjetas del carrusel quedan de la misma altura para que los autores se alineen.
 */
/*
 * La fuente eicons no se carga, así que el glifo propio de cada <i> no existe: se oculta y se le da
 * el ancho de la estrella de Font Awesome que dibuja el ::before (si no, las estrellas se montaban).
 */
.elementor-element-5904499 .elementor-star-rating i {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    width: 1.125em;
    margin-right: 0.2em;
    color: transparent;
}

.elementor-element-5904499 .elementor-star-rating i::before {
    content: "\f005";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    width: 100%;
}

.elementor-element-5904499 .owl-stage {
    display: flex;
}

.elementor-element-5904499 .owl-item {
    display: flex;
    float: none;
}

.elementor-element-5904499 .owl-item > .item,
.elementor-element-5904499 .owl-item .elementor-191,
.elementor-element-5904499 .owl-item .elementor-element-61a895a1,
.elementor-element-5904499 .owl-item .elementor-element-61a895a1 > .e-con-inner,
.elementor-element-5904499 .owl-item .elementor-element-733e7bbc {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
}

.elementor-element-5904499 .owl-item .elementor-element-7716695f,
.elementor-element-5904499 .owl-item .elementor-element-91960cb {
    flex: 1 1 auto;
}

/* Botón de chat en móvil (js/viper-chat.js): Cliengo se carga recién al tocarlo */
.elementor-kit-8 button.vx-chat-btn,
.vx-chat-btn {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    padding: 0;
    border: 0;
    border-radius: 100%;
    background: var(--e-global-color-secondary, #F41D00);
    color: #FFFFFF;
    box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: background 0.3s ease-in-out;
}

.elementor-kit-8 button.vx-chat-btn:hover,
.elementor-kit-8 button.vx-chat-btn:focus-visible,
.vx-chat-btn:hover,
.vx-chat-btn:focus-visible {
    background: var(--e-global-color-primary, #171717);
}

.vx-chat-btn:focus-visible {
    outline: 2px solid var(--e-global-color-primary, #171717);
    outline-offset: 3px;
}

.vx-chat-btn.is-loading {
    opacity: 0.6;
}

/* Teléfono del encabezado en una sola línea (el de Brasil, más largo, se partía en dos) */
@media (min-width: 1367px) {
    .elementor-element-152f959a .elementor-image-box-description {
        white-space: nowrap;
    }
}

/*
 * Pie: la línea "Chile, Brasil, Argentina…" queda alineada con las columnas de contacto y con la
 * tipografía de esas columnas. En los dominios de Chile (pie de 3 columnas) ocupa solo "Contacto".
 */
.elementor-94 .elementor-element.elementor-element-8077ba7 .elementor-heading-title {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    text-align: left;
}

/* En tablet "Contacto" queda en la columna izquierda de la segunda fila: la línea va debajo de ella */
@media (min-width: 768px) and (max-width: 1024px) {
    footer.vx-footer-sin-latam .elementor-element.elementor-element-405f104.e-con {
        --align-self: flex-start;
        --width: 50%;
    }

    /* Pie con "Contacto LatAm" (columna derecha, padding 9em): misma sangría que esa columna */
    footer:not(.vx-footer-sin-latam) .elementor-element.elementor-element-405f104.e-con {
        --width: 50%;
        --padding-left: 9em;
    }
}

@media (min-width: 1025px) {
    .vx-footer-sin-latam .elementor-94 .elementor-element.elementor-element-405f104,
    .elementor-94 .vx-footer-sin-latam .elementor-element.elementor-element-405f104,
    footer.vx-footer-sin-latam .elementor-element.elementor-element-405f104 {
        --width: 32.7%;
        --padding-left: 16px;
    }
}

/* Carrusel del home: solo el primer título es H1; los de los slides 2 y 3 son H2 con el mismo aspecto */
.elementor-kit-8 .flexslider h2.title {
    font-family: var(--e-global-typography-28d3658-font-family), Sans-serif;
    font-weight: var(--e-global-typography-28d3658-font-weight);
    text-transform: var(--e-global-typography-28d3658-text-transform);
    line-height: var(--e-global-typography-28d3658-line-height);
}

/* Carrusel: el antetítulo de los 3 slides al doble de tamaño (revisiones MKT /5/ punto 01 y /6/) */
.elementor-86 .elementor-element.elementor-element-703b23e1 .flex_caption .sub-title {
    font-size: 34px;
    line-height: 1.1;
}

@media (max-width: 767px) {
    .elementor-86 .elementor-element.elementor-element-703b23e1 .flex_caption .sub-title {
        font-size: 30px;
    }
}

/* Tarjetas de producto del home: toda la tarjeta es clicable (js/viper-home.js) */
.vx-card {
    cursor: pointer;
    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

body .elementor-element.vx-card:hover:not(.elementor-motion-effects-element-type-background) {
    background-color: #FFFFFF;
    box-shadow: 0 10px 60px 0 rgba(0, 0, 0, 0.06);
}

.vx-card:hover a.elementskit-btn,
.vx-card:hover a.elementskit-btn i {
    color: var(--e-global-color-secondary, #F41D00);
}

/* "¿Por qué elegir VIPER?": cada ícono despliega su texto bajo la fila de íconos */
.elementor-355 .elementor-element.elementor-element-412d1827 {
    --flex-wrap: wrap;
}

/* Con salto de línea activo, los 4 íconos siguen en una fila (en móvil la plantilla los deja 2×2) */
@media (min-width: 768px) {
    .elementor-355 .elementor-element.elementor-element-412d1827 > .elementor-element {
        flex: 1 1 0;
        min-width: 0;
    }
}

.vx-benefit {
    cursor: pointer;
}

.vx-benefit:focus-visible {
    outline: 2px solid var(--e-global-color-secondary, #F41D00);
    outline-offset: 4px;
}

.elementor-355 .elementor-element.vx-benefit[aria-expanded="true"] .elementor-element .elementor-heading-title {
    color: var(--e-global-color-secondary, #F41D00);
}

.vx-benefit-panel {
    flex: 0 0 100%;
    box-sizing: border-box;
    margin-top: 24px;
    padding: 24px 28px;
    border-top: 2px solid var(--e-global-color-secondary, #F41D00);
    background: #FFFFFF;
    box-shadow: 0 10px 60px 0 rgba(0, 0, 0, 0.06);
}

.vx-benefit-panel[hidden] {
    display: none;
}

.vx-benefit-panel .vx-benefit-panel__title {
    margin: 0 0 8px;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--e-global-color-primary, #171717);
}

.vx-benefit-panel .vx-benefit-panel__text {
    margin: 0;
    font-family: "Manrope", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.875;
    color: var(--e-global-color-text, #777777);
}

/* Funcionalidades de VIPER A BORDO (página CAD, includes/abordo.php) */
.vx-abordo {
    margin: 10px 0 0;
}

.vx-abordo .vx-abordo__title {
    margin: 0 0 18px;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--e-global-color-primary, #171717);
}

.vx-abordo__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 32px;
    margin-bottom: 22px;
}

.vx-abordo .vx-abordo__group-title {
    margin: 0 0 10px;
    padding-top: 12px;
    border-top: 1px solid var(--e-global-color-accent, #D7D7D7);
    font-family: "Barlow Condensed", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.25;
    text-transform: uppercase;
    color: var(--e-global-color-primary, #171717);
}

.vx-abordo__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.vx-abordo__list li {
    position: relative;
    margin: 0 0 6px;
    padding-left: 24px;
    font-family: "Manrope", sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--e-global-color-text, #777777);
}

.vx-abordo__list li::before {
    content: "\f058";
    position: absolute;
    left: 0;
    top: 1px;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: var(--e-global-color-secondary, #F41D00);
}

.vx-abordo__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vx-abordo__tags li {
    margin: 0;
    padding: 6px 12px;
    background: var(--e-global-color-primary, #171717);
    font-family: "Barlow Condensed", sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #FFFFFF;
}

@media (max-width: 767px) {
    .vx-abordo__grid {
        grid-template-columns: 1fr;
    }
}

/*
 * Teléfonos angostos (≤400 px): a 50 px "INFRAESTRUCTURA" mide ~350 px y no cabe en la columna de
 * 330 px (scroll horizontal en Diferenciales). Se baja a 44 px el título del carrusel del home y la
 * tipografía global de los banners interiores (2229d75), que usan solo los H1 de esos banners.
 */
@media (max-width: 400px) {
    body.elementor-kit-8 {
        --e-global-typography-2229d75-font-size: 44px;
    }

    .elementor-86 .elementor-element.elementor-element-703b23e1 .flex_caption .title {
        font-size: 44px;
    }
}