.nav-screen .row{
    height: 100%;
    width: 100%;
}

.nav-screen {
    height: 100%;
    padding: 30px 60px;
}



.first-screen-neusoft .logo-neusoft{
    display: flex;
    justify-content: center;
    padding: 40px 0 10px 0;
}
.first-screen-neusoft .logo-neusoft img{
    width: 33%;
}

.first-screen-neusoft h2#slogan-neusoft{
    text-align: center;
    font-weight: 300;
    color: #005BAC;
    font-size: 40px;

}

 .product-item a{
    color: unset !important;
    text-decoration: none!important;
 }

 .product-item .btn-more {
    padding: 0 20px;
    color:white!important;
    border-radius: var(--bs-border-radius-2xl)!important;
    background: #7ec5a3!important;
   
}
.nav-screen .buttons-nav .title{
    display: flex;
    justify-content:center;
    align-items: center;
    font-size: 35px;
    font-weight: 300;
    color: #fff;
}

.nav-screen .buttons-nav{
    display: flex;
    padding: 0;

}

.buttons-nav:nth-of-type(6n+1) .title{
background: #59B4BA;
border-bottom-right-radius: 45px;
}

.buttons-nav:nth-of-type(6n+2) .title{
background: #005BAC;
border-bottom-right-radius: 90px;
border-top-left-radius: 90px;
}

.buttons-nav:nth-of-type(6n+3) .title{
background: #0C2340;
border-bottom-left-radius: 90px;
}
.buttons-nav:nth-of-type(6n+4) .title{
background: #7ec5a3;
border-top-right-radius: 90px;
}
.buttons-nav:nth-of-type(6n+5) .title{
background: #005BAC;
}
.buttons-nav:nth-of-type(6n+6) .title{
background: #0d3464;
border-bottom-right-radius: 90px;
border-top-left-radius: 90px;
}

.buttons-nav .image img {
    display: block;
    height: 120%;
    width: 120%;
    overflow-x: hidden;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.buttons-nav .image{
    position: relative;
    overflow: hidden;
}

.buttons-nav:nth-of-type(6n+1) .image{
border-top-right-radius: 90px;
}
.buttons-nav:nth-of-type(6n+2) .image{
border-top-right-radius: 45px;
border-bottom-left-radius: 45px;
}
.buttons-nav:nth-of-type(6n+3) .image{

border-bottom-left-radius: 90px;
}
/* --- TUS ESTILOS BASE SE MANTIENEN IGUAL --- */


.buttons-nav:hover{
    cursor: pointer;
}/* 1. Contenedor estable */
.buttons-nav {
    position: relative;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    /* Mantenemos el alto que necesites para que no salte */
    min-height: 200px; 
}

/* 2. Título: Respetamos tus tamaños originales */
.buttons-nav .title {
    /* Quitamos el flex-basis para que Bootstrap mande con su col-6, col-8, etc. */
    flex: 0 0 auto; 
    z-index: 10;
transition: flex-grow 0.6s ease, flex-basis 0.6s ease, max-width 0.6s ease;
    min-width: fit-content; 
    padding-left: 20px;
    padding-right: 20px;
}

/* 3. Imagen: Toma el espacio que sobra */
.buttons-nav .image {
    flex: 1 1 auto;
    position: relative; 
    z-index: 5;
    transition: all 0.5s ease;
}

.buttons-nav .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 4. HOVER: Expansión (Solo aquí forzamos el 100%) */

.buttons-nav.active .title {
    /* Al activarse, ignoramos el ancho de Bootstrap y vamos al 100% */
    flex: 1 0 100% !important;
    max-width: 100% !important;
      transition: all 0.5s ease;
}

.buttons-nav.active .image {
    /* La imagen se reduce a nada */
    flex: 0 0 0% !important;
    width: 0 !important;
    opacity: 0;
}

/* 5. GRISES (Se mantiene) */
.nav-screen .row.is-hovering .buttons-nav:not(.active) {
    filter: grayscale(1);
    opacity: 0.5;
}

.nav-screen .row.is-hovering .buttons-nav.active {
    filter: grayscale(0);
    opacity: 1;
}

/* --- Estructura de Fila para el Slider --- */
.slider-container {
    display: flex;
    flex-wrap: nowrap; /* Evita que las tarjetas se vayan abajo */
    overflow-x: hidden; /* Esto lo controlará tu JS de carrusel */
    padding: 30px 60px;
}

.section-title{
    font-weight: 300;
    color: #005BAC;
    font-size: 40px;
    text-align: center;
}

.product-item {
    flex: 0 0 33.333%; /* Siempre 3 por vista */
    padding: 0 15px;
    box-sizing: border-box; 
}


.product-card .image-wrapper img {
    width: 100%;
    position: relative;
    z-index: 5;
}

.image-wrapper {
    position: relative;
    z-index: 5; /* Mantiene la imagen por encima de los bordes */
    height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    
    /* EL TRUCO ESTRELLA: Subimos la imagen 150px. 
       Esto hace que se monte exactamente sobre el borde superior de la tarjeta.
       Como es PNG, el borde superior se ve por detrás formando la línea. */
    margin-top: -150px; 
}
/* --- LA LÍNEA QUE ATRAVIESA --- */
.crossing-line {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px; /* IGUALADO A 2PX PARA QUE COINCIDA CON EL BORDE */
    transform: translateY(-50%);
    z-index: 2;
    background-color: var(--color-borde); /* USAMOS LA VARIABLE ¡Nos ahorramos 9 líneas! */
}

/* --- Reutilizamos tu lógica de 3 colores --- */
.product-item:nth-child(3n+1) .btn-more { color: white}
.product-item:nth-child(3n+1) .icon-tech { background-color: #59B4BA; border-top-left-radius: 30px; width: max-content; border: 1px solid #59B4BA; }

.product-item:nth-child(3n+2) .btn-more { color: white;; }
.product-item:nth-child(3n+2) .icon-tech { background-color: #005BAC; border-top-left-radius: 30px; width: max-content; border: 1px solid #005BAC; }


.product-item:nth-child(3n+3) .btn-more { color: white; }
.product-item:nth-child(3n+3) .icon-tech { background-color: #7ec5a3; border-top-left-radius: 30px; width: max-content; border: 1px solid #7ec5a3; }

/* Tarjeta 1: Verde */
.product-item:nth-child(3n+1) .product-card { 
    --color-borde: #59B4BA; 
}

/* Tarjeta 2: Azul oscuro */
.product-item:nth-child(3n+2) .product-card { 
    --color-borde: #005BAC; 
}

/* Tarjeta 3: Naranja */
.product-item:nth-child(3n+3) .product-card { 
    --color-borde: #7ec5a3; 
}
.product-card .icon-tech img {
    width: 60px;
}

.product-card a.btn-more {
    padding: 0 20px;
}

/* --- CONFIGURACIÓN DE LA TARJETA PRINCIPAL --- */
.product-card {
    position: relative;
    border-radius: 30px;
    background-color: #fff;
    
    /* CAMBIO: Borde finito y azul como base */
    border: 1px solid #005BAC; 
    
    margin-top: 150px; 
    min-height: 450px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Ajuste para que los contadores no parpadeen al iniciar el scroll */
.counter-value {
    transition: all 0.3s ease;
    font-variant-numeric: tabular-nums; /* Evita que los números "tiemblen" lateralmente mientras cambian */
}

/* =========================================
   BORDES GRUESOS DECORATIVOS (Efecto Bracket)
   ========================================= */

/* 1. Esquina Superior Derecha */
.product-card::before {
    content: "";
    position: absolute;
    /* Lo empujamos -2px hacia afuera para que tape perfectamente el borde finito */
    top: -8px; 
    right: -8px;
    
    /* Qué tan largas son las líneas (ajústalo a tu gusto) */
    width: 120px;  /* Largo horizontal */
    height: 120px; /* Largo vertical bajando por la derecha */
    
    /* Solo pintamos arriba y a la derecha con un grosor de 6px */
    border-top: 8px solid var(--color-borde);
    border-right: 8px solid var(--color-borde);
    
    /* Curvamos la esquina para que coincida con la tarjeta */
    border-top-right-radius: 35px; 
    
    pointer-events: none; /* Para que no estorbe al hacer clic */
    z-index: 4;
}

/* 2. Esquina Inferior Izquierda */
.product-card::after {
    content: "";
    position: absolute;
    bottom: -8px; 
    left: -8px;
    
    /* Qué tan largas son las líneas */
    width: 120px; /* Largo horizontal hacia la derecha */
    height: 120px; /* Largo vertical subiendo por la izquierda */
    
    /* Solo pintamos abajo y a la izquierda */
    border-bottom: 8px solid var(--color-borde);
    border-left: 8px solid var(--color-borde);
    
    /* Curvamos la esquina */
    border-bottom-left-radius: 35px; 
    
    pointer-events: none;
    z-index: 4;
}
.product-card .icon-tech {
    border-bottom-right-radius: 30px;
    padding: 0 15px;
    width: 80px;
    height: 80px;
        display: flex;
    align-items: center;
}

.footer-card {
    position: relative;
 display: flex;
   justify-content: center;
   align-items: center;
  padding: 30px 0;
}

.content-wrapper h3, .content-wrapper p {
    padding: 0 20px;
}


/* --- AJUSTES PARA EL CARRUSEL DE BOOTSTRAP --- */
/* --- AJUSTES PARA EL CARRUSEL DE BOOTSTRAP --- */

/* Le damos espacio arriba para que la imagen que sobresale no sea cortada */
.padding-carrusel {
  
    padding-bottom: 20px;
    overflow: visible; /* VITAL para que la foto sobresalga sin cortarse */
}
.carousel-inner {
    overflow: visible !important;
}

/* Puntitos personalizados */
.carousel-indicators.custom-indicators {
    position: relative; 
    margin-top: 20px;
    margin-bottom: 20px;
    gap: 15px; 
}

.carousel-indicators.custom-indicators button.dot {
    width: 16px !important;
    height: 16px !important;
    background-color: transparent !important;
    border: 2px solid #005BAC !important;
    border-radius: 50%;
    opacity: 1; 
    transition: all 0.4s ease;
}

.carousel-indicators.custom-indicators button.dot.active {
    background-color: #005BAC !important;
    transform: scale(1.3); 
}

section.servicios{
    background:#efefef ;
    padding: 40px 0;
}


/* =========================================
   BORDES GRUESOS DECORATIVOS (Efecto Bracket)
   ========================================= */

/* 1. Esquina Superior Derecha */
.services-card::before {
    content: "";
    position: absolute;
    /* Lo empujamos -2px hacia afuera para que tape perfectamente el borde finito */
    top: -8px; 
    right: -8px;
    
    /* Qué tan largas son las líneas (ajústalo a tu gusto) */
    width: 120px;  /* Largo horizontal */
    height: 120px; /* Largo vertical bajando por la derecha */
    
    /* Solo pintamos arriba y a la derecha con un grosor de 6px */
    border-top: 8px solid #005BAC;
    border-right: 8px solid #005BAC;
    
    /* Curvamos la esquina para que coincida con la tarjeta */
    border-top-right-radius: 35px; 
    
    pointer-events: none; /* Para que no estorbe al hacer clic */
    z-index: 4;
}

/* 2. Esquina Inferior Izquierda */
.services-card::after {
    content: "";
    position: absolute;
    bottom: -8px; 
    left: -8px;
    
    /* Qué tan largas son las líneas */
    width: 120px; /* Largo horizontal hacia la derecha */
    height: 120px; /* Largo vertical subiendo por la izquierda */
    
    /* Solo pintamos abajo y a la izquierda */
    border-bottom: 8px solid #005BAC;
    border-left: 8px solid #005BAC;
    
    /* Curvamos la esquina */
    border-bottom-left-radius: 35px; 
    
    pointer-events: none;
    z-index: 4;
}

.services-card {
    position: relative;
    border-radius: 30px;
    background-color: #fff;
        padding: 40px 0 0 0;
        display: flex;
    flex-direction: column;
    justify-content: space-around;
    
    /* CAMBIO: Borde finito y azul como base */

    

} 


.services-item:nth-child(3n+1) .services-card {
    background: #0d3464;
 }

.services-item:nth-child(3n+2) .services-card { 
    background: #59B4BA;
}

.services-item:nth-child(3n+3) .services-card { 
    background: #7ec5a3;
}

.services-card  .image-wrapper {
    position: relative;
    z-index: 5; /* Mantiene la imagen por encima de los bordes */
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding:0;
margin-top: auto;}

.services-card h3{
    color: #fff;
    text-align: center;
    font-weight: 300;
}


.about-us{
    background: url(../img/Nosotros_fondo-01.png);
    background-size: cover;
    color: white;
    padding: 0 150px;
}

section .data-row{
    text-align: center;
    padding: 60px 0;
}

section .data-row h3{
    font-size:55px;
    font-weight: 600;
}  

section .data-row p{
    font-weight: 300;
    color: #005BAC;
}

/* =========================================
   DISEÑO DE TARJETAS DE NOTICIAS / SERVICIOS
   ========================================= */

.notice-card {
    background-color: #fff;
    border-radius: 12px;
    overflow: hidden; /* Hace que la imagen respete las esquinas redondeadas de la tarjeta */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); /* Sombra suave y elegante */
    display: flex;
    flex-direction: column;
    height: 100%; /* Mantiene todas las tarjetas del mismo alto */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Pequeño efecto hover al pasar el mouse */
.notice-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

/* Contenedor de la imagen */
.notice-image {
    width: 100%;
    height: 200px; /* Alto fijo para que todas las fotos se vean alineadas */
}

.notice-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Recorta la imagen sin deformarla si las proporciones no coinciden */
}

/* Contenedor de los textos */
.notice-content {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Empuja el botón siempre hacia abajo */
}

.notice-date {
    font-size: 13px;
    color: #888;
    margin-bottom: 12px;
}

.notice-title {
    font-size: 1.4rem;
    font-weight: bold;
    color: #222;
    margin-bottom: 15px;
}

.notice-desc {
    font-size: 15px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 25px;
}

/* =========================================
   BOTONES DE FLECHA
   ========================================= */

.notice-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 45px;
    border-radius: 50%; /* Lo hace un círculo perfecto */
    margin-top: auto; /* Se alinea automáticamente al fondo de la tarjeta */
    text-decoration: none;
    transition: all 0.3s ease;
    
    /* Diseño por defecto (Azul oscuro bordeado) */
    border: 2px solid #002D62; 
    color: #002D62; 
    background-color: transparent;
}

.notice-btn svg {
    width: 20px;
    height: 20px;
}

.notice-btn:hover {
    background-color: #002D62;
    color: #fff;
}

/* --- TARJETA DEL MEDIO (Botón Turquesa Sólido) --- */
.notice-item:nth-child(2) .notice-btn {
    background-color: #59B4BA; /* Turquesa */
    border: 2px solid #59B4BA;
    color: #fff; /* Flecha blanca */
}

.notice-item:nth-child(2) .notice-btn:hover {
    background-color: #4a9fa5;
    border-color: #4a9fa5;
}

/* =========================================
   BOTÓN MÁS NOTICIAS
   ========================================= */
.btn-mas-noticias {
    background-color: #59B4BA;
    color: white;
    border-radius: 8px;
    padding: 10px 30px;
    font-size: 1.1rem;
    font-weight: 500;
    transition: background-color 0.3s ease;
}

.btn-mas-noticias:hover {
    background-color: #4a9fa5;
    color: white;
}

/* =========================================
   SECCIÓN BUSCADOR
   ========================================= */
.buscador-section {
    background-color: #0060B5; /* Azul intermedio */
}

.buscador-form {
    background-color: white;
    border-radius: 8px;
    padding: 5px;
}

.buscador-form .input-group-text {
    border-radius: 8px 0 0 8px;
}

.buscador-form .form-control {
    box-shadow: none; /* Quita el halo azul de Bootstrap al hacer clic */
}

.btn-buscar {
    background-color: #59B4BA;
    color: white;
    border-radius: 6px !important;
    font-weight: 500;
    font-size: 1.1rem;
    transition: background-color 0.3s ease;
}

.btn-buscar:hover {
    background-color: #4a9fa5;
    color: white;
}

/* =========================================
   SECCIÓN TESTIMONIOS
   ========================================= */
.testimonios-section {
    background-color: #0B3C68; /* Azul oscuro corporativo */
}

.text-turquesa {
    color: #59B4BA;
}

.text-dark-blue {
    color: #0B3C68;
}

.testimonio-card {
    background-color: white;
    border-radius: 12px;
    padding: 40px 30px 30px 30px;
    position: relative;
    height: 100%;
    margin-top: 30px; /* Espacio para que el badge sobresalga por arriba */
}

/* El círculo con las comillas */
.quote-badge {
    position: absolute;
    top: -30px; /* Lo empuja hacia arriba, fuera de la tarjeta */
    left: 50%;
    transform: translateX(-50%); /* Lo centra horizontalmente */
    background-color: #59B4BA;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* El círculo gris del avatar (puedes cambiarlo por un <img> luego) */
.avatar-circle {
    width: 60px;
    height: 60px;
    background-color: #e0e0e0;
    border-radius: 50%;
}

/* Forzamos a que el contenedor principal reconozca la posición relativa de forma estricta */
.bloque-navegador {
    position: relative !important;
    display: flex !important; /* Si usas flex en tus subcolumnas */
    cursor: pointer;
}

/* Solución al enlace de tamaño cero: Lo obligamos a expandirse físicamente */
.bloque-navegador .stretched-link {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    z-index: 10 !important; /* Lo posiciona al frente del texto y de la imagen */
}

/* Evita que los estilos del enlace interfieran con la visual */
.bloque-navegador .stretched-link:focus,
.bloque-navegador .stretched-link:active {
    outline: none;
    box-shadow: none;
}

section.about-us .about-text-content p {
    color: white !important;
    font-weight: 300;
    font-size: 16px!important;
}

section.about-us h3{
    font-size: 45px;
    text-transform: uppercase;
    font-weight: 400;
}

.estatisticas-empresa  #category-estadisticas{
font-weight: 300!important;
    color: #005BAC!important;
    font-size: 20px!important;
    text-transform: none!important;
}

    /* Apuntamos directamente al ID #wpforms-261 que vimos en tu captura para romper el límite moderno */
    div#wpforms-261,
    div#wpforms-261 .wpforms-container,
    div#wpforms-261 form,
    div#wpforms-261 .wpforms-field-container,
    div#wpforms-261 .wpforms-field,
    div#wpforms-261 input[type="text"],
    div#wpforms-261 input[type="email"],
    div#wpforms-261 textarea {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Limpiamos cualquier margen o padding interno que el modo render-modern esté forzando */
    div#wpforms-261.wpforms-container-full {
        margin: 0 !important;
        padding: 0 !important;
    }

div.wpforms-container-full .wpforms-confirmation-container-full, div[submit-success]>.wpforms-confirmation-container-full:not(.wpforms-redirection-message) {
    background: #005BAC!important;
    box-sizing: border-box;
    color:white
}

/* =========================================================================
   INTERACTIVIDAD Y EFECTO HOVER PARA LAS TARJETAS DE PRODUCTO
   ========================================================================= */

/* 1. Preparación del estado inicial (¡Muy importante para que no salte brusco!) */
.product-item .product-card {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    will-change: transform, box-shadow;
}

.product-item .image-wrapper img {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.product-item .btn-more {
    transition: background-color 0.3s ease, color 0.3s ease !important;
}

/* 2. EFECTOS AL PASAR EL CURSOR (HOVER) */

/* Elevación y escalado de la tarjeta */
.product-item a:hover .product-card {
    transform: translateY(-5px) scale(1.03) !important;
    box-shadow: 0 15px 35px rgba(0, 91, 172, 0.12) !important; /* Sombra suave con un toque de tu azul #005BAC */
}

/* Mini zoom independiente a la imagen del equipo médico (PET/CT, etc.) */
.product-item a:hover .image-wrapper img {
    transform: scale(1.05) !important;
}

/* Destacar el botón de acción interno */
.product-item a:hover .btn-more {
    background-color: #005BAC !important; /* Tu azul corporativo */
    color: #ffffff !important;
    font-weight: bold;
}
/* =========================================================================
   ESTILOS PARA EL CARRUSEL DEL SLOGAN (CON OVERLAY DEL 50%)
   ========================================================================= */
#carouselSloganNeusoft {

    margin-left: auto;
    margin-right: auto;
    border-radius: 0px; /* Consistencia recta */
    overflow: hidden;
}

.banner-slogan-link {
    height: 420px; /* Altura ideal de banner corporativo */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-decoration: none !important;
}

/* Capa oscura que cubre el 50% izquierdo */
.banner-overlay-half {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.5) 85%, rgba(0, 0, 0, 0) 100%);
    z-index: 1;
}

/* Asegura que los contenidos queden por encima de la opacidad */
.content-banner-slogan {
    z-index: 2;
}

.text-container-slide {
    padding-left: 2rem;
}

.banner-title-text {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
    color: #ffffff;
}

.banner-subtitle-text {
    font-size: 1.2rem;
    line-height: 1.5;
    color: #e0e0e0;
    margin-bottom: 0;
}

/* Asegurar que las flechas nativas del carrusel de Neusoft no queden tapadas por el contenido */
#carouselSloganNeusoft .carousel-control-prev,
#carouselSloganNeusoft .carousel-control-next {
    width: 5%; /* Las hacemos más estrechas para que no tapen el texto central */
    opacity: 0.8;
}

#carouselSloganNeusoft .carousel-control-prev:hover,
#carouselSloganNeusoft .carousel-control-next:hover {
    opacity: 1;
}

/* Ajuste de tamaño de icono para que se vea premium como en tu diseño */
#carouselSloganNeusoft .carousel-control-prev-icon,
#carouselSloganNeusoft .carousel-control-next-icon {
    width: 3rem;
    height: 3rem;
}

/* Estilo para el título turquesa */
.text-turquesa {
    color: #4cc3c4 !important;
}
.product-card .content-wrapper p {
    font-size: 16px !important;
}


.product-card:hover
 {
    transition: ease-in-out;
    border: 2px solid #005BAC;
 }
/* =========================================================================
   EFECTO TRIGGER PARA EL MENÚ PRINCIPAL (SOLO EN EL HOME)
   ========================================================================= */

/* Estado inicial: oculto, transparente y desplazado hacia arriba (Solo en el Home) */
body.home #main-nav {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-100%) !important;
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease !important;
    position: fixed;
    width: 100%;
}

/* Estado activo: cuando el script detecta que llegaste a Líneas de Soluciones */
body.home #main-nav.nav-visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

/* Responsivo para celulares */
@media (max-width: 767.98px) {
    .banner-slogan-link-container {
        height: 320px !important;
    }
    .banner-title-text {
        font-size: 2rem !important;
    }
    .banner-overlay-half {
        width: 100%; /* Cubrimos el 100% en mobile para asegurar legibilidad */
        background: rgba(0, 0, 0, 0.65); 
    }
}
/* =========================================================================
   RESPONSIVO PARA CELULARES (DISEÑO MÓVIL ADAPTADO)
   ========================================================================= */
@media (max-width: 767.98px) {
    .banner-slogan-link {
        height: 320px; /* Reducimos la altura en celulares */
    }
    
    /* En celulares el overlay pasa a cubrir el 100% para asegurar legibilidad */
    .banner-overlay-half {
        width: 100%;
        background: rgba(0, 0, 0, 0.65); 
    }
    
    .text-container-slide {
        padding-left: 0;
        text-align: center; /* Centramos el texto en mobile */
    }
    
    .banner-title-text {
        font-size: 1.8rem;
    }
    
    .banner-subtitle-text {
        font-size: 1rem;
    }
}


@media screen and (max-width:750px) {
.about-us {
    padding: 0 30px;
}}

/* =========================================================================
   ADAPTACIÓN RESPONSIVA EN CELULARES (FORMATO VERTICAL RECTO: IMAGEN ARRIBA + TÍTULO ABAJO)
   ========================================================================= */
@media (max-width: 767.98px) {
    
    /* 1. EL CONTENEDOR PRINCIPAL DE LA TARJETA (ESQUINAS RECTAS Y CUERPO SÓLIDO) */
    .nav-screen .bloque-navegador {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin-bottom: 1.5rem !important;
        float: none !important;
        
        /* Caja flexible vertical unificada */
        display: flex !important;
        flex-direction: column !important; 
        justify-content: flex-start !important;
        align-items: center !important;
        
        /* ELIMINAR EL BORDER RADIUS POR COMPLETO */
        border-radius: 0px !important; 
        padding: 0 !important; /* Quitamos paddings viejos para controlar el espacio */
        
        /* Altura mínima real para que la tarjeta tenga una presencia sólida de fondo */
        min-height: 280px !important; 
        height: auto !important;
        overflow: hidden !important;
    }

    /* Forzamos a que todas las columnas internas de Bootstrap se estiren sin márgenes */
    .nav-screen .bloque-navegador .col-6,
    .nav-screen .bloque-navegador .col.image,
    .nav-screen .bloque-navegador .col,
    .nav-screen .bloque-navegador .title,
    .nav-screen .bloque-navegador .image {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
        text-align: center !important;
        padding: 0 !important;
        margin: 0 !important;
        display: block !important;
        border-radius: 0px !important; /* Quitamos curvas en subcontenedores */
    }

    /* 2. REORDENAMIENTO: IMAGEN 100% ARRIBA */
    .nav-screen .bloque-navegador .image,
    .nav-screen .bloque-navegador .img-noticias-home {
        order: 1 !important; /* Obliga a la foto a ir ARRIBA */
        height: 180px !important; /* Altura controlada para pantallas de celular */
        width: 100% !important;
        overflow: hidden !important;
    }

    /* Ajuste de la etiqueta <img> para que abarque el ancho total */
    .nav-screen .bloque-navegador .image img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important; /* La foto llena el espacio perfectamente sin deformarse */
        margin: 0 !important;
        border-radius: 0px !important;
    }

    /* 3. REORDENAMIENTO: TÍTULO 100% ABAJO */
    .nav-screen .bloque-navegador .title,
    .nav-screen .bloque-navegador .title-noticias-home {
        order: 2 !important; /* Obliga al texto a ir ABAJO */
        
        /* Relleno interior para que el texto respire dentro del bloque de color */
        padding: 1.5rem 1rem !important; 
        
        /* Limpieza tipográfica */
        font-size: 1.4rem !important;
        line-height: 1.3 !important;
        font-weight: normal !important;
    

    }

.nav-screen{
    padding: 0 20px;
}
    /* 4. LIMPIEZA ADICIONAL DEL CARRUSEL DE PRODUCTOS */
    #carruselProductos .carousel-inner {
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem;
        padding: 0 !important;
    }

    #carruselProductos .carousel-item {
        display: block !important;
        margin-right: 0 !important;
        left: 0 !important;
        opacity: 1 !important;
    }

    #carruselProductos .product-item {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin-bottom: 1rem;
    }

    #carruselProductos .product-card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    #carruselProductos .custom-indicators,
    #carruselProductos .carousel-indicators {
        display: none !important;
    }

    .image-wrapper {
        margin-top:0;
    }
}