/* ===================================
   MOBILE FIXES CORREGIDO - LEONARDI GLOBAL
   =================================== */

/* 1. BANDERAS - POSICIÓN CORRECTA */
@media (max-width: 767px) {
    #flags.flags {
        position: absolute !important;
        right: 70px !important;
        top: 30px !important;
        z-index: 1000 !important;
    }
    
    #flags .flags_items img {
        width: 24px !important;
        height: 17px !important;
    }
    
    .navbar-toggle {
        position: absolute !important;
        right: 0 !important;
        top: 0  !important;
    }
}

/* 2. CAROUSEL INICIO - LOS 3 SLIDES VISIBLES */
@media (max-width: 767px) {
    #home-carousel {
        min-height: 100vh !important;
        width: 100% !important;
    }
    
    #home-carousel .carousel-inner {
        min-height: 100vh !important;
    }
    
    #home-carousel .item {
        min-height: 100vh !important;
        background-size: cover !important;
        background-position: center !important;        
        align-items: center !important;
        justify-content: center !important;
        padding: 20px !important;
    }
    
    #home-carousel .carousel-caption {
        position: relative !important;
        width: 100% !important;
        max-width: 1000px !important;
        display: flex !important;
        /* left: auto !important;
        right: auto !important; */
        bottom: auto !important;
        margin-top: 50% !important;
        margin-right: 10px !important;
        margin-left: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 20px !important;
    }

    /* #home-carousel .carousel-caption {
        position: relative !important;
        max-width: 600px !important;   
        margin: 0 auto !important;     
        text-align: center !important; 
        padding: 30px 20px !important;
    } */

  
    



    /* INDICADORES - 3 VISIBLES */
    .carousel-indicators {
        bottom: 30px !important;
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        z-index: 15 !important;
    }
    
    .carousel-indicators li {
        width: 12px !important;
        height: 12px !important;
        margin: 0 6px !important;
        background-color: rgba(255,255,255,0.5) !important;
        border: 2px solid white !important;
        border-radius: 50% !important;
        display: inline-block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    .carousel-indicators li.active {
        background-color: white !important;
        width: 14px !important;
        height: 14px !important;
    }
}

/* 3. ICONOS SERVICIO */
@media (max-width: 767px) {
    #service .media {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        margin-bottom: 30px !important;
    }
    
    #service .pull-left {
        float: none !important;
        margin: 0 auto 15px !important;
    }
    
    #service .media-body {
        text-align: center !important;
    }
}

/* 4. ABOUT - SECCIÓN COMPLETA CENTRADA */
@media (max-width: 767px) {
    #about .container {
        width: 100% !important;
        padding: 0 20px !important;
    }
    
    #about .row {
        margin: 0 !important;
    }
    
    #about .about-content {
        width: 100% !important;
    }
    
    /* Imagen */
    #about .about-us-img {
        width: 100% !important;
        margin-bottom: 30px !important;
        padding: 0 !important;
    }
    
    #about .about-us-img img {
        width: 100% !important;
        display: block !important;
    }
    
    /* Texto lado derecho */
    #about .about-right-side {
        width: 100% !important;
        padding: 0 !important;
    }
    
    #about .about-text {
        width: 100% !important;
        padding: 0 !important;
    }
    
    /* TODOS los elementos de texto centrados */
    #about h3,
    #about p,
    #about h4,
    #about .h3-about,
    #about .p-about,
    #about .text-about-top,
    #about .text-about-rectangle,
    #about .border-about-rectangle,
    #about .last-line-about {
       width: 100% !important;
        max-width: 100% !important;
        padding: 10px 20px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-align: center !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .text-about-top{
        text-align: center !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        font-size: 1.4rem !important;        
    }

    .last-line-about{
        text-align: center !important;                
    }
    
    #about .btn-about {
        width: 100% !important;
        text-align: center !important;
        margin: 30px 0 !important;
    }
    
    /* ABOUT-US segunda sección */
    #about-us .container {
        width: 100% !important;
        /* padding: 0 50px !important; */
    }

    #about .border-about-rectangle {
        width: 100% !important;
        padding: 0 !important;
        margin: 15px 0 !important;
        text-align: center !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    
    #about-us .tst-item,
    #about-us .tst-single,
    #about-us .tst-content {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    #about-us h3,
    #about-us h4,
    #about-us p {
        text-align: left !important;
    }
    
    #about-us .about-ejes {
        text-align: center !important;
    }

    .tst-content {
       max-width: calc(90% - 20px) !important; 
       width: 90% !important;
       margin: 0 auto !important;           
       padding: 0 10px !important; 
        
    }

    .about-title-items {
        display: block !important;
        padding: 0 20px !important;           
        text-align: center !important;
    }

    .p-ejes, .li-about {
        flex: 1  !important;
        text-align: left !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        
    }
}

/* 5. PRODUCTOS */
@media (max-width: 767px) {
    /* Logo Thrivanas */
    /* .logo-thrivanas {
        text-align: center !important;
        padding: 30px 0 !important;
    } */
    
    /* .logo-thrivanas img {
        max-width: 110% !important;
        height: 80px !important;
        margin: 0 auto !important;
        display: block !important;
    } */

/*/////////PRUEBA 1///////////*/

    /* .logo-thrivanas {
    display: flex;
    margin-top: -20px;
    margin-bottom: 20px;
    justify-content: center;
    align-items: center;
    background-color: #3d4d3a; 
    padding: 20px;
    padding-bottom: 10px;
    width: 100%;
    
    }

    .logo-thrivanas img {
        width: 700px;
        max-width: 100%;
    } */

/*/////////PRUEBA 2///////////*/

/* Logo Thrivanas - FORZAR DISPLAY BLOCK */
    .logo-thrivanas {
        display: block !important;
        text-align: center !important;
        padding: 30px 20px !important;
        background-color: #3d4d3a !important;
        width: 100% !important;
        margin: 0 !important;
    }
    
    .logo-thrivanas img {
        width: 180px !important;
        max-width: 320px !important;
        height: auto !important;
        margin: 0 auto !important;
        display: block !important;
    }
    
    /* Texto debajo del logo */
    .logo-thrivanas h2,
    .logo-thrivanas h3,
    .logo-thrivanas p {
        width: 100% !important;
        text-align: center !important;
        margin: 10px 0 !important;
        display: block !important;
    }

    .subtitle-productos{
        width: 100% !important;
        text-align: center !important;
        margin: 10px 0 !important;
        display: block !important;
    }
    
    /* Productos centrados */
    #portfolio .container {
        width: 100% !important;
        padding: 0 20px !important;
    }
    
    #portfolio .mix {
        width: 100% !important;
        float: none !important;
        margin: 0 0 20px 0 !important;
    }
    
    #portfolio .mix img {
        width: 100% !important;
        margin: 0 auto !important;
        display: block !important;
    }
    
    /* Productos centrados */
    #portfolio .container {
        width: 100% !important;
        padding: 0 20px !important;
    }
    
    #portfolio .mix {
        width: 100% !important;
        float: none !important;
        margin: 0 0 20px 0 !important;
    }
    
    #portfolio .mix img {
        width: 90% !important;
        margin-right: 120px !important;
        display: block !important;
    }
}

/* 6. NOTICIAS - SLIDES CUADRADOS */
@media (max-width: 767px) {
    #portfolio-news {
        padding: 30px 0 !important;
        overflow: hidden !important;
    }
    
    #portfolio-news .section-title {
        padding: 0 20px !important;
    }
    
    .auto-slider {
        width: 100% !important;
        overflow-x: scroll !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
    }
    
    .slider-track {
        display: flex !important;
        gap: 20px !important;
        padding: 20px !important;
        animation: slide 40s linear infinite !important;
    }
    
    /* SLIDES CUADRADOS 280x280 */
    .slide {
        flex: 0 0 280px !important;
        width: auto !important;
        height: auto !important;
        min-width: 280px !important;
        scroll-snap-align: center !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        background: white !important;
    }
    
    .slide img {
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
    }
    
    .slide-overlay {
        height: 70% !important;
        padding: 0 !important;
        padding-bottom: 5px !important;
        background: rgba(46, 74, 90, 0.95) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
    }
    
    .slide-title {
        color: white !important;
        font-size: 13px !important;
        line-height: 1.3 !important;
        margin: 0 !important;
    }
    
    .btn-leer-mas {
        font-size: 11px !important;
        padding: 6px 10px !important;
        background: #3e4532;
        color: white;
    }

    .btn-leer-mas:hover {
        background: #ffffff;
        color: #3e4532;
        /* transform: scale(1.08); */
    }
}

@keyframes slide {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* 7. AJUSTES GENERALES */
@media (max-width: 767px) {
    body, html {
        overflow-x: hidden !important;
    }
    
    .container {
        width: 100% !important;
    }
    
    #navigation .container {
        padding: 0 15px !important;
    }
}





/* 4. ABOUT - SECCIÓN COMPLETA CENTRADA */
@media (max-width: 767px) {
    #about .container {
        width: 100% !important;
        padding: 0 20px !important;
    }
    
    #about .row {
        margin: 0 !important;
    }
    
    #about .about-content {
        width: 100% !important;
    }
    
    /* Imagen */
    #about .about-us-img {
        width: 100% !important;
        margin-bottom: 30px !important;
        padding: 0 !important;
    }
    
    #about .about-us-img img {
        width: 100% !important;
        display: block !important;
    }
    
    /* Texto lado derecho */
    #about .about-right-side {
        width: 100% !important;
        padding: 0 !important;
    }
    
    #about .about-text {
        width: 100% !important;
        padding: 0 !important;
    }
    
    /* TODOS los elementos de texto centrados */
    /* #about h3,
    #about p,
    #about h4, */
    #about .h3-about,
    #about .p-about,
    #about .text-about-top,
    #about .text-about-rectangle,
    #about .border-about-rectangle,
    #about .last-line-about {
        width: 100% !important;
        padding: 0 !important;
        margin: 15px 0 !important;
        text-align: center !important;
    }

    #about .p-about{
        padding: 10px !important;
    } 
    
    #about .btn-about {
        width: 100% !important;
        text-align: center !important;
        margin: 30px 0 !important;
    }
    
    /* ABOUT-US segunda sección */
   /* #about-us .container { 
    width: 100% !important; 
    padding: 0 15px !important; 
    display: flex; 
    justify-content: center; 
} 
    #about-us .tst-single { 
        width: 100%; 
        max-width: 500px; 
        margin: 0 auto; 
        padding: 10px !important; 
        display: flex; 
        flex-direction: column; 
        align-items: center; 
    } 
    #about-us .tst-content { 
        width: 100%; 
        text-align: 
        left !important; 
    } 
    #about-us .about-title-items, 
    #about-us .last-line-about, 
    .p-ejes, .li-about { 
        width: 100%; 
        text-align: left !important; 
        margin-left: 0 !important; 
    } 
    .li-about { 
        padding-left: 20px; 
    } 
    .img-circle { 
        display: block; 
        margin: 0 auto; 
        max-width: 120px; 
        height: auto; 
    } */

    /* Botón de cierre del modal */
   /* Forzar visualización del botón de cierre en mobile */
   .custom-close-btn {
        position: absolute;
        top: -10px;
        right: -10px;
        width: 30px;
        height: 30px;
        background: #3e4532;
        border-color: #fff;
        /* border: none; */
        border-radius: 50%;
        color: #fff;
        font-size: 24px;
        line-height: 1;
        cursor: pointer;
        z-index: 9999;
        padding: 0;
    }
}

@media (max-width: 768px) {
    .fancybox-close {
        display: block !important;
        visibility: visible !important;
        position: fixed !important;
        top: 10px !important;
        right: 10px !important;
        width: 36px !important;
        height: 36px !important;
        z-index: 8060 !important;
    }
}