/* ==================================================================
   THEME RESPONSIVE CSS - ACRONET MÉXICO
   Versión: 3.0 (Todo el responsive unificado)
   ==================================================================

   📋 ÍNDICE DE CONTENIDOS
   ==================================================================
   
   1. BASE GLOBAL (max-width: 5000px)
   2. ESCRITORIO GRANDE (max-width: 1499px)
   3. ESCRITORIO NORMAL (max-width: 1200px)
   4. ESCRITORIO MEDIANO (max-width: 1024px)
   5. TABLET (max-width: 991px)
   6. TABLET PEQUEÑA / MÓVIL GRANDE (max-width: 800px)
   7. MÓVIL (max-width: 768px)
   ├── 7.1 Móvil Horizontal (481-767px landscape)
   ├── 7.2 Móvil Vertical (≤ 480px portrait)
   └── 7.3 Móvil General (reglas comunes)
   8. MÓVIL PEQUEÑO (max-width: 599px)
   ├── 8.1 Horizontal (481-599px landscape)
   ├── 8.2 Vertical (≤ 480px portrait)
   └── 8.3 General (sliders y video)
   9. MÓVIL MUY PEQUEÑO (max-width: 480px)
   ├── 9.1 Horizontal (360-480px landscape)
   ├── 9.2 Vertical (≤ 380px portrait)
   └── 9.3 General (ajustes finos)
   10. COMPONENTES ESPECIALES

   ================================================================== */


/* ==================================================================
   1. BASE GLOBAL (max-width: 5000px)
   ================================================================== */
@media only screen and (max-width: 5000px){
    .boxed_wrapper{
        overflow-x: hidden;
    }
}

/* ==================================================================
   2. ESCRITORIO GRANDE (max-width: 1499px)
   ================================================================== */
@media only screen and (max-width: 1499px){
    .our-protection .inner-content,
    .testimonial-section .inner-content,
    .brand-section .inner-content{
        margin: 0px;
    }
    .brand-section .brand-content,
    .brand-section .title-box{
        float: none;
        display: block;
    }
    .brand-section .title-box{
        margin-bottom: 30px;
    }
    .testimonial-block-one {
        padding: 49px 20px 64px 19px;
    }
}

/* ==================================================================
   3. ESCRITORIO NORMAL (max-width: 1200px)
   ================================================================== */
@media only screen and (max-width: 1200px){
    .form-section .img-column{
        left: 0px;
    }
    .brand-section .brand-content li.image-box{
        margin-right: 15px;
    }
    .call-to-action .call-content{
        float: none;
        display: block;
        text-align: center;
        margin-bottom: 15px;
        padding: 0px;
    }
    .call-to-action .inner-content .link{
        float: none;
        text-align: center;
    }
    .call-to-action .call-content .icon-box{
        display: none;
    }
    .footer-top .newsletter-widget .footer-social li,
    .contact-section .contact-info .social li{
        margin-bottom: 4px;
    }
    .blog-details-content .content-style-two .inner-content .image-box{
        margin-top: 70px;
    }
    .blog-details .sidebar .sidebar-categories {
        padding: 39px 30px 41px 45px;
    }
    .about-section .about-content .single-item .icon-box:before{
        bottom: -114%;
    }
    
    /* Call to Action - overlay */
    .call-to-action::before {
        position: absolute;
        content: '';
        background: rgba(233, 79, 27, 1);
        width: 100%;
        height: 100%;
        left: 0px;
        top: 0px;
        border: 0;
    }
    .margin-top-60 { 
        margin-top: 60px; 
    }
}

/* ==================================================================
   4. ESCRITORIO MEDIANO (max-width: 1024px)
   ================================================================== */
@media only screen and (max-width: 1024px) {
    .main-header .header-top::before {
        border-color: #f15a27 transparent;
        border-style: solid;
        border-width: 49px 0 0 45px;
        content: "";
        right: 0px;
        position: absolute;
        top: 0;
        width: 65%;
    }
    .main-header .header-top .top-right li { 
        color: #fff; 
    }
    .main-header .header-top .top-right li a { 
        color: #fff; 
    }
    .main-header .header-top .top-right li a:hover { 
        color: #222; 
    }
}


/* ==================================================================
   5. TABLET (max-width: 991px)
   ================================================================== */
@media only screen and (max-width: 991px){
    /* HEADER */
    .header-bottom .logo-outer{
        float: none;
        display: block;
        text-align: center;
        padding: 0px;
    }
    .header-bottom .menu-area{
        float: none;
        display: block;
    }
    .header-bottom .outer-box{
        position: absolute;
        float: none;
        top: 15px;
        right: 5px;
        padding: 0px;
    }
    
    /* TOP BAR - OCULTO */
    .main-header .header-top,
    .header-style-two .header-top {
        display: none !important;
    }
    
    /* SLIDER */
    .main-slider .owl-nav{
        display: none;
    }
    
    /* SEARCH */
    .search-box.now-visible{
        top: 40px;
    }
    
    /* ABOUT */
    .about-section .video-content{
        margin: 0px 0px 30px 0px;
    }
    .about-section .about-content{
        margin: 0px;
    }
    .about-section .about-content .single-item .icon-box:before{
        display: none;
    }
    
    /* FORM */
    .form-section .img-column{
        display: none;
    }
    
    /* OUR PROTECTION */
    .our-protection .inner-content:before{
        display: none;
    }
    .our-protection .inner-content .left-column,
    .our-protection .inner-content .image-box{
        margin-bottom: 40px;
    }
    
    /* COUNTERS */
    .counter-block-one{
        margin: 15px auto;
    }
    
    /* SECURITY */
    .security-information .image-box{
        margin: 0px 0px 40px 0px;
    }
    .security-information .information-content{
        margin: 0px;
    }
    
    /* TEAM */
    .single-team-content{
        margin-bottom: 30px;
    }
    
    /* BRANDS */
    .brand-section .brand-content li.image-box{
        margin-bottom: 15px;
    }
    .brand-section .brand-content{
        display: block;
        text-align: center;
    }
    .brand-section .brand-content li.image-box{
        float: none;
        display: inline-block;
    }
    
    /* FOOTER */
    .footer-top .logo-widget,
    .footer-top .service-widget{
        margin: 0px 0px 30px 0px;
    }
    
    /* STICKY HEADER */
    .fixed-header .sticky-header{
        display: none;
    }
    
    /* HEADER STYLE TWO */
    .header-style-two .main-menu .navbar-header .navbar-toggle .icon-bar{
        background: #222222;
    }
    .header-style-two .search-box.now-visible, 
    .header-style-two .search-box-area .search-box{
        top: 39px;
    }
    
    /* FEATURES */
    .feature-section .feature-column:before{
        display: none;
    }
    
    /* SERVICE DETAILS */
    .service-details .service-sidebar-content{
        margin: 0px 0px 50px 0px;
    }
    
    /* BLOG */
    .our-blog .news-block-one .lower-content {
        padding: 44px 30px 50px 30px;
    }
    .blog-details-content .content-style-two .inner-content .image-box{
        margin: 0px 0px 30px 0px;
    }
    .blog-details .sidebar{
        margin: 40px 0px 0px 0px;
    }
    .blog-details .sidebar .sidebar-post .post{
        padding-bottom: 47px;
    }
    
    /* CONTACT */
    .contact-section .contact-info{
        margin-bottom: 30px;
    }
    
    /* SERVICE DETAILS CONTENT */
    .service-details-content .content-style-two .inner-content .image-box{
        margin-bottom: 30px;
    }
    .service-details .service-details-content .content-style-two .inner-content{
        margin-bottom: 20px;
    }
    
    /* PRODUCTOS */
    .product-detail-section {
        padding: 40px 0;
    }
    .product-media {
        margin-top: 30px;
    }
    .product-detail-section .section-title.text-right {
        text-align: center;
    }
    .product-detail-section .section-title.text-right:after {
        margin: 12px auto 0;
    }
}


/* ==================================================================
   6. TABLET PEQUEÑA / MÓVIL GRANDE (max-width: 800px)
   ================================================================== */
@media only screen and (max-width: 800px) {
    .bg-imagen::before {
        background: none;
    }
    .gallery-images li {
        width: 44%;
        margin: 0 0.5%;
    }
    .main-slider h1 {
        font-size: 30px;
        line-height: 40px;
    }
}

/* ==================================================================
   7. MÓVIL (max-width: 768px) - BASE GENERAL
   ================================================================== */

/* ----- 7.1 MÓVIL HORIZONTAL (landscape: 481px a 767px) ----- */
@media only screen and (min-width: 481px) and (max-width: 767px) and (orientation: landscape) {
    
    /* SLIDER - Altura reducida para horizontal */
    .main-slider .slide {
        height: 320px !important;
        min-height: 320px;
    }
    .main-slider h1 {
        font-size: 24px !important;
        line-height: 32px !important;
    }
    .main-slider .text {
        font-size: 16px !important;
        line-height: 24px !important;
        margin-bottom: 15px !important;
    }
    
    /* GALERÍA - 3 columnas en horizontal */
    .gallery-images li {
        width: 31%;
        margin: 0 1% 15px;
    }
    
    /* CONTENEDOR - Padding lateral reducido */
    .container {
        padding: 0 20px;
    }
    
    /* BOTONES - Más compactos */
    .btn-style-one,
    .btn-style-two {
        padding: 10px 20px;
        font-size: 14px;
    }
    
    /* SECCIONES - Padding reducido */
    .about-section,
    .form-section,
    .sec-pad,
    .cta-section {
        padding: 40px 0px;
    }
    
    /* PRODUCTOS - Imagen a la izquierda, texto a la derecha */
    .product-media {
        margin-bottom: 0;
    }
    .product-description .service-box {
        padding: 20px;
    }
}

/* ----- 7.2 MÓVIL VERTICAL (portrait: max-width: 480px) ----- */
@media only screen and (max-width: 480px) and (orientation: portrait) {
    
    /* SLIDER - Altura para vertical */
    .main-slider .slide {
        height: 450px !important;
        min-height: 450px;
    }
    .main-slider h1 {
        font-size: 22px !important;
        line-height: 30px !important;
        padding: 0 15px;
    }
    .main-slider .text {
        font-size: 15px !important;
        line-height: 22px !important;
        padding: 0 15px;
    }
    
    /* GALERÍA - 1 columna en vertical */
    .gallery-images li {
        width: 100%;
        margin: 0 0 20px 0;
    }
    
    /* GRID - Todo en una columna */
    .col-xs-12 {
        width: 100%;
    }
    
    /* TÍTULOS - Más pequeños */
    h2 {
        font-size: 24px;
        line-height: 32px;
    }
    .sec-title h2 {
        font-size: 26px;
    }
    .page-title .content-box .title {
        font-size: 32px;
        line-height: 40px;
    }
    
    /* BOTONES - Ancho completo */
    .btn-style-one,
    .btn-style-two {
        display: block;
        width: 100%;
        margin: 8px 0;
        text-align: center;
    }
    
    /* BOTONES CTA - Apilados */
    .cta-section .cta-content .link .btn-style-one {
        display: block;
        margin: 10px auto;
        width: 80%;
    }
    
    /* SECCIONES - Padding reducido */
    .about-section,
    .form-section,
    .sec-pad,
    .cta-section {
        padding: 50px 0px;
    }
    
    /* CONTACTO INFO - Padding reducido */
    .contact-section .contact-info {
        padding: 35px 20px 40px 20px;
    }
    
    /* TEAM */
    .team-section .link-btn {
        margin-top: 30px;
    }
    
    /* ABOUT - Centrado */
    .about-section .about-content .single-item {
        padding-left: 0px;
        text-align: center;
    }
    .about-section .about-content .single-item .icon-box {
        position: relative;
        margin: 0 auto;
    }
    .about-section .about-content .single-item h4 a {
        margin-top: 15px;
    }
    
    /* OUR PROTECTION - Centrado */
    .our-protection .inner-content .single-item .icon-box {
        position: relative !important;
        margin: 0 auto !important;
    }
    .our-protection .inner-content .single-item {
        padding: 0px !important;
        text-align: center !important;
        margin-bottom: 40px;
    }
    .our-protection .inner-content .image-box img {
        width: 100%;
    }
    
    /* MARCAS - Imágenes más pequeñas */
    .brands-section-grid {
        padding: 30px 0;
    }
    .brand-item {
        width: 140px;
    }
    .brand-item img {
        max-width: 80px;
    }
    
    /* PRODUCTOS */
    .product-detail-section {
        padding: 40px 0 30px;
    }
    .product-detail-section .section-title {
        font-size: 24px;
        text-align: center;
    }
    .product-detail-section .section-title:after {
        margin: 8px auto 0;
    }
    .product-description .service-box {
        padding: 20px;
        margin-top: 20px;
    }
    .thumb-grid img {
        width: calc(33% - 10px);
        min-width: 70px;
        height: 60px;
    }
    .logo-strip {
        gap: 10px;
        justify-content: center;
    }
    .brand-link img {
        max-height: 35px;
    }
    
    /* BLOG */
    .blog-details .sidebar .sidebar-post .post {
        padding-bottom: 30px;
    }
    .blog-details-content .comments-area .comment-inner .replay-btn {
        position: relative;
        top: 0px;
        right: 0px;
        margin-top: 15px;
    }
    
    /* HEADER TOP (si está visible) */
    .main-header .header-top .top-right li {
        text-align: center;
        margin: 3px 10px;
    }
    .main-header .header-top {
        padding-top: 15px;
    }
    .main-header .header-top .top-left {
        margin-bottom: 15px;
    }
}

/* ----- 7.3 MÓVIL GENERAL (max-width: 768px) - REGLAS COMUNES ----- */
@media only screen and (max-width: 768px){
    
    /* SLIDER - Eliminar imagen de fondo heredada */
    .main-slider .slide {
        background-image: none !important;
        background-color: #000 !important;
    }
    
    /* SERVICE BLOCKS */
    .service-block-one .lower-content {
        padding: 43px 10px 49px 15px;
    }
    
    /* COUNTERS */
    .counter-block-one .count-outer:before{
        display: none;
    }
    .counter-block-one .count-outer{
        padding-bottom: 0px;
        margin-bottom: 8px;
    }
    .counter-block-one{
        max-width: none;
        text-align: center;
    }
    
    /* FEATURES */
    .feature-block-one{
        padding: 30px 15px;
    }
    
    /* NEWS */
    .news-block-one .lower-content {
        padding: 38px 15px 45px 15px;
    }
    
    /* FOOTER */
    .footer-top .post-widget{
        margin: 0px 0px 30px 0px;
    }
    
    /* TESTIMONIALS */
    .testimonial-block-one .authore-info {
        padding: 0px 0px 0px 95px;
    }
    
    /* BLOG DETAILS */
    .blog-details-content .post-share-option .tags{
        float: none;
        display: block;
        margin: 0px 0px 15px 0px;
    }
    .blog-details-content .post-share-option .post-social{
        float: none;
        display: block;
    }
    .blog-details-content .author-box .author-image{
        position: relative;
        margin: 15px auto;
    }
    .blog-details-content .author-box {
        padding: 34px 30px 32px 30px;
        text-align: center;
    }
    
    /* HEADER */
    .header-bottom .logo-outer{
        padding: 10px 0px;
    }
}


/* ==================================================================
   8. MÓVIL PEQUEÑO (max-width: 599px) - SLIDERS Y VIDEO
   ================================================================== */

/* ----- 8.1 MÓVIL PEQUEÑO HORIZONTAL (landscape) ----- */
@media only screen and (min-width: 481px) and (max-width: 599px) and (orientation: landscape) {
    .main-slider .slide {
        height: 280px !important;
    }
    .main-slider h1 {
        font-size: 20px !important;
        line-height: 28px !important;
    }
    .main-slider .text {
        font-size: 14px !important;
        line-height: 20px !important;
    }
    .video-background {
        object-fit: cover !important;
    }
}

/* ----- 8.2 MÓVIL PEQUEÑO VERTICAL (portrait) ----- */
@media only screen and (max-width: 480px) and (orientation: portrait) {
    .main-slider .slide {
        height: 380px !important;
    }
    .main-slider h1 {
        font-size: 20px !important;
        line-height: 28px !important;
    }
}

/* ----- 8.3 MÓVIL PEQUEÑO GENERAL ----- */
@media only screen and (max-width: 599px) {
    
    /* Contenedor del slide - video visible */
    .main-slider .slide {
        padding: 0px !important;
        background: #000 !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
    
    /* Video background - Asegura visibilidad */
    .main-slider .slide .video-background {
        display: block !important;
        visibility: visible !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    
    /* Logo AcroNet en slider */
    .main-slider .content img {
        max-width: 140px !important;
        height: auto !important;
        margin-bottom: 10px;
    }
    
    /* Textos del slider - Tamaño base */
    .main-slider h1 {
        font-size: 22px !important;
        line-height: 30px !important;
        color: #ffffff !important;
        padding: 0 15px;
    }
    .main-slider .text {
        font-size: 15px !important;
        line-height: 22px !important;
        margin-bottom: 20px !important;
    }
}


/* ==================================================================
   10. COMPONENTES ESPECIALES
   ================================================================== */

/* MENÚ HAMBURGUESA (max-width: 991px) */
@media only screen and (max-width: 991px) {
    .header-top .links-nav li{
        margin-right: 15px;
    }
    .main-menu .navbar-header{
        position: relative;
        float: none;
        display: block;
        text-align: left;
        width: 100%;
        top: 0px;
    }
    .main-header .main-menu {
        width: 100%;
    }
    .main-menu .navbar-header .navbar-toggle{
        display: inline-block;
        z-index: 7;
        float: none;
        padding: 10px 5px;
        cursor: pointer;
        margin: 0px;
        border-radius: 0px;
        background: transparent;
    }
    .main-menu .navbar-header .navbar-toggle .icon-bar,
    .header-style-two .main-menu .navbar-header .navbar-toggle .icon-bar {
        background: #e94f1b !important;
        height: 2px;
        width: 29px;
        display: block;
        margin: 7px 5px;
    }
    .main-menu .collapse {
        overflow: auto;
        float: none;
        width: 100%;
        padding: 0px;
        border: none;
        margin: 0px;
        max-height: 320px;
        border-radius: 3px;
    }
    .main-menu .navbar-collapse > .navigation{
        float: none !important;
        margin: 0px !important;
        width: 100% !important;
        background: #333333;
        border: 1px solid #ffffff;
    }
    .main-menu .navbar-collapse > .navigation > li{
        margin: 0px !important;
        float: none !important;
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    .main-menu .navigation > li > a,
    .main-menu .navigation > li > ul:before{
        border: none;
    }
    .main-menu .navbar-collapse > .navigation > li > a{
        padding: 10px 10px !important;
        border: none !important;
    }
    .main-menu .navigation li.dropdown > a:after,
    .main-menu .navigation > li.dropdown > a:before,
    .main-menu .navigation > li > ul > li > a::before,
    .main-menu .navigation > li > ul > li > ul > li > a::before{
        color: #ffffff !important;
        right: 15px;
        font-size: 16px;
        display: none !important;
    }
    .main-menu .navbar-collapse > .navigation > li > ul,
    .main-menu .navbar-collapse > .navigation > li > ul > li > ul{
        position: relative;
        border: none;
        float: none;
        visibility: visible;
        opacity: 1;
        display: none;
        margin: 0px;
        padding: 0px;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        width: 100%;
        background: #333333;
        border-radius: 0px;
        transition: none !important;
        box-shadow: none !important;
    }
    .main-menu .navbar-collapse > .navigation > li > ul,
    .main-menu .navbar-collapse > .navigation > li > ul > li > ul{
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    .main-menu .navbar-collapse > .navigation > li:last-child{
        border-bottom: none;
    }
    .main-menu .navbar-collapse > .navigation > li > a,
    .main-menu .navbar-collapse > .navigation > li > ul > li > a,
    .main-menu .navbar-collapse > .navigation > li > ul > li > ul > li > a{
        padding: 12px 15px !important;
        line-height: 22px;
        color: #b8b8b8;
        background: #333333;
        text-align: left;
        min-height: 0px;
    }
    .main-menu .navbar-collapse > .navigation > li:hover > a,
    .main-menu .navbar-collapse > .navigation > li > ul > li:hover > a,
    .main-menu .navbar-collapse > .navigation > li > ul > li > ul > li:hover > a,
    .main-menu .navbar-collapse > .navigation > li.current > a,
    .main-menu .navbar-collapse > .navigation > li.current-menu-item > a{
        color: #ffffff !important;
        background: #333333;
    }
    .main-menu .navbar-collapse > .navigation li.dropdown .dropdown-btn{
        display: block;
    }
    .main-menu .navbar-collapse > .navigation li.dropdown:after,
    .main-menu .navigation > li > ul:before{
        display: none !important;
    }
}

/* COOKIE BANNER (max-width: 767px) */
@media only screen and (max-width: 767px) {
    #cookie-banner {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90%;
        max-width: 400px;
        background-color: #5a5a5afa;
        padding: 20px;
        box-shadow: 0px 10px 30px rgba(0,0,0,0.5);
        border-radius: 10px;
        z-index: 999999 !important;
        text-align: center;
    }
    #cookie-banner button {
        width: 100%;
        margin-top: 15px;
    }
}