/* ============================================================
   GOWEBIX RESPONSIVE BREAKPOINTS FRAMEWORK
   Ordenado de MAYOR a MENOR (Desktop First)
   ============================================================ */

/* ============================================
   RESPONSIVE MOBILE - GOWEBIX (≤ 767px)
   Archivo: responsive.css
   Theme: Pofo (Child: Gowebix)
   Breakpoint: ≤ 767px (Mobile)
   ============================================ */

@media (max-width: 767px) {
    
    /* ============================================
       1. COMPONENTES PERSONALIZADOS GOWEBIX
       ============================================ */
    
    /* 1.1 Bloques de texto - Tipografía consistente */
    .gowebix-text-block {
        font-family: 'Inter', sans-serif !important;
        font-weight: 300 !important;
        line-height: 1.6 !important;
        padding-right: 20px !important;
        padding-left: 20px !important;
    }
    
    /* 1.2 Feature boxes - Alineación y espaciado */
    .gowebix-featurebox-2,
    .gowebix-featurebox-1,
    .gowebix-featurebox-4 {
        text-align: left !important;
        padding-right: 15px !important;
        padding-left: 15px !important;
    }
    
    .blockquote-style-2 {
        padding-right: 15px !important;
        padding-left: 15px !important;
    }
    
    .gowebix-single-image-clean {
        padding-top: 20px;
    }
    
    /* 1.3 Contenedores de títulos y encabezados */
    .gowebix-title-container,
    .gowebix-heading.heading-style1 {
        padding-right: 15px !important;
        padding-left: 15px !important;
    }
    
    /* 1.4 Contenedores de títulos y encabezados */
    .gowebix-title-container,
    .gowebix-heading.heading-style4 {
        padding-right: 15px !important;
        padding-left: 15px !important;
    }
    
    /* 1.4 Main Title */
    .gowebix-main-title {
        font-size: 30px !important;
    }
    .gowebix-subtitle {
        font-size: 15px !important;
    }
    
   .gowebix-featurebox-5 {
    width: calc(100% - 30px) !important;
    max-width: calc(100% - 30px) !important;
    margin-left: 15px !important;
    margin-right: 15px !important;
    padding: 24px 18px !important;
    min-height: auto !important;
    margin-bottom: 18px !important;
    box-sizing: border-box;
  }

  .gowebix-featurebox-5-inner {
    width: 100%;
    max-width: 100%;
  }

  .gowebix-featurebox-5-icon {
    font-size: 28px;
    margin-bottom: 12px;
  }

  .gowebix-featurebox-5-title {
    font-size: 16px;
    line-height: 1.35;
    margin-bottom: 10px;
  }

  .gowebix-featurebox-5-text {
    font-size: 14px;
    line-height: 1.65;
  }

    /* 1.5 Botones - Mejorar usabilidad touch */
    .gowebix-boton-wrapper {
        padding-right: 15px !important;
        padding-left: 15px !important;
    }
    
    .gowebix-boton {
        font-size: 14px !important;
        min-height: 44px !important;
        padding: 12px 24px !important;
    }
    
    /* ============================================
       2. IMÁGENES RESPONSIVAS
       ============================================ */
    
    /* 2.1 Regla general para imágenes GoWebix (60% del contenedor) */
    .gowebix-single-image-clean img.gwx-img {
        max-width: 60% !important;
        height: auto !important;
        width: auto !important;
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* 2.2 Excepción: Imagen específica "girl.webp" al 100% */
    .gowebix-single-image-clean img.gwx-img[src*="girl.webp"] {
        max-width: 100% !important;
    }
    
    /* 2.3 Excepción: Imagen específica "girl-home-1.webp" al 100% */
    .gowebix-single-image-clean img.gwx-img[src*="girl-home-1.webp"] {
        max-width: 100% !important;
        padding-top: -60px !important;
        margin-top: 0px !important;
    }
    
    /* ============================================
       3. HEADER - LOGO VISIBLE SIN DUPLICADOS
       ============================================ */
    
    header .navbar-brand img,
    header .navbar .logo img,
    header .navbar .logo-light img,
    header .navbar .logo-dark img {
        max-height: 80px !important;
        height: 80px !important;
        width: auto !important;
    }

    /* Light predeterminado en mobile */
    .gowebix-header-logo .logo-light {
        display: inline-block !important;
    }

    .gowebix-header-logo .logo-dark {
        display: none !important;
    }

    /* Mobile sticky */
    .sticky-header .gowebix-header-logo .logo-light {
        display: none !important;
    }

    .sticky-header .gowebix-header-logo .logo-dark {
        display: inline-block !important;
    }

    
   /* ==============================================
      4. GOWEBIX — FOOTER LOGO CLEAN + SIZE CONTROL
      ============================================== */

    /* 1) Ocultar retina duplicada */
    .footer-strip-dark .footer-logo.logo-footer-retina {
    display: none !important;
    }

    /* 2) Logo principal visible y tamaño uniforme con header mobile */
    .footer-strip-dark .footer-logo.logo-footer {
        display: block !important;
        max-height: 50px !important;  /* ← Mismo tamaño que header mobile */
        height: auto !important;
        width: auto !important;
        margin: 0 auto 15px auto !important;
    }

    /* 3) Liberar contenedor para que no limite altura */
    .footer-strip-dark .col-md-3.display-table {
        height: auto !important;
    }

    .footer-strip-dark .col-md-3.display-table .display-table-cell {
        height: auto !important;
        vertical-align: middle !important;
    }

    /* ============================================
       5. GRID SYSTEM - CONVERSIÓN 6 → 2 COLUMNAS
       ============================================ */
    
    /* 5.1 Convertir grid de 6 columnas a 2 columnas en móvil */
    .vc_row.vc_row-flex,
    .vc_row.vc_inner.vc_row-fluid {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    
    .vc_row.vc_row-flex .vc_col-sm-2,
    .vc_row.vc_inner .vc_col-sm-2 {
        flex: 0 0 calc(50% - 30px) !important;
        max-width: calc(50% - 30px) !important;
        margin: 0 15px 30px 15px !important;
        float: none !important;
    }
    
    /* Asegurar que WPBakery no aplique sus propios estilos */
    .vc_col-sm-2.vc_column_container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* ===========================================
   6. PADDING GLOBAL (MOBILE) — ROBUSTO
   =========================================== */

/* 1) Base sin padding lateral en wrappers globales */
.main-content,
.site-content,
#content {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 2) Padding de lectura SOLO para rows de contenido (15px) */
body.home #content .vc_row:not(.gwx-hero-row) {
  padding-left: 15px !important;
  padding-right: 15px !important;
}

/* 3) Hero siempre full width */
body.home #content .vc_row.gwx-hero-row {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 4) Refuerzos específicos (solo si hace falta) */
.gowebix-featurebox-4-pro,
.gowebix-textblock-pro-content {
  padding-left: 15px !important;
  padding-right: 15px !important;
}

/* overlays reales */
  .bg-overlay,
  .bg-extra-dark-gray.bg-overlay,
  .bg-black.bg-overlay,
  .bg-transparent-dark.bg-overlay {
    pointer-events: none !important;
  }

  /* overlays por pseudo-elementos (MUY común en Pofo) */
  .bg-overlay::before,
  .bg-overlay::after,
  .bg-extra-dark-gray.bg-overlay::before,
  .bg-extra-dark-gray.bg-overlay::after {
    pointer-events: none !important;
  }

  /* asegurar que tu box quede “por arriba” */
  .gowebix-fb3-pro {
    position: relative;
    z-index: 5;
  }
  
  /* =========================================================
   GOWEBIX FAQ — Pofo Accordion (scoped)
   Row class: .gwx-faq
   ========================================================= */

/* Desktop + Mobile base: alinear número + texto + flecha */
.gwx-faq .panel-title{
  display: flex !important;
  align-items: center !important;
  gap: 12px;
}

/* Número (01, 02...) */
.gwx-faq .panel-title .tab-tag{
  flex: 0 0 36px;
  min-width: 36px;
  line-height: 1 !important;
  font-size: 16px !important;
}

/* Texto pregunta */
.gwx-faq .panel-title .accordion-title{
  flex: 1 1 auto;
  margin: 0 !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
}

/* Flecha a la derecha */
.gwx-faq .panel-title i.fa-angle-down{
  flex: 0 0 auto;
  margin-left: auto !important;
}

/* Respuesta (base) */
.gwx-faq .panel-body{
  font-size: 15px !important;   /* ✅ sube el “chiquito” */
  line-height: 1.65 !important;
}

/* MOBILE */

  /* padding lateral del FAQ */
  #accordion-1.panel-group.accordion-style2{
    padding-left:15px !important;
    padding-right:15px !important;
  }

  /* pregunta */
  #accordion-1 .panel-title .tab-tag{
    flex-basis:32px;
    min-width:32px;
    font-size:15px !important;
  }

  #accordion-1 .panel-title .accordion-title{
    font-size:15px !important;
  }

  /* respuesta (la que vos decís que se ve chica) */
  #accordion-1 .panel-body{
    font-size:15px !important;
    line-height:1.7 !important;
    padding:12px 0 16px 0 !important;
  }

  #accordion-1 .panel{
    margin-bottom:12px !important;
  }

    /* ============================================
       7. MEJORAS RECOMENDADAS (COMENTADAS - ACTIVAR SI SE NECESITAN)
       ============================================ */
    
    /* 7.1 Contenedores principales - Asegurar padding consistente en todo el sitio */
    /*
    .container,
    .container-fluid {
        padding-left: 15px !important;
        padding-right: 15px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    */
    
    /* 7.2 Fix para overflow horizontal (evitar scroll horizontal no deseado) */
    /*
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
    }
    */
    
    /* 7.3 Headings más pequeños en móvil (mejor jerarquía visual) */
    /*
    h1 { font-size: 24px !important; }
    h2 { font-size: 20px !important; }
    h3 { font-size: 18px !important; }
    h4 { font-size: 16px !important; }
    .gowebix-featurebox-3-title {
        font-size: 14px !important;
        line-height: 1.4 !important;
    }
    */
    
    /* 7.4 Feature boxes específicos del grid (si usas gowebix-featurebox-3) */
    /*
    .gowebix-featurebox-3 {
        padding: 20px 15px !important;
        height: 100% !important;
        text-align: center !important;
    }
    .gowebix-featurebox-3-icon {
        font-size: 24px !important;
        margin-bottom: 10px !important;
    }
    */
    
    /* 7.5 Texto del footer más pequeño (mejor proporción en móvil) */
    /*
    .footer-wrapper-text {
        font-size: 12px !important;
        line-height: 1.5 !important;
    }
    */
    

 /* ✅ Fin CORRECTO del media query principal (≤ 767px) */

}

@media (max-width: 480px) {
        
    /* ============================================
       8. MEDIA QUERY ANIDADA PARA MÓVIL PEQUEÑO (≤ 480px)
       ============================================ */
    
    /* Para pantallas muy pequeñas (móviles antiguos, pantallas compactas) */

        /* 6.1 Una columna en lugar de dos (mejor legibilidad) */
        .vc_row-flex .vc_col-sm-2 {
            width: 100% !important;
            float: none !important;
            margin-bottom: 20px !important;
        }
        
        /* 6.2 Imágenes un poco más grandes (mejor visibilidad) */
        .gowebix-single-image-clean img.gwx-img {
            max-width: 80% !important;
        }
        
        /* 6.3 Padding más reducido (aprovechar espacio) */
        /*
        .container {
            padding-left: 10px !important;
            padding-right: 10px !important;
        }
        */
        
        /* 6.4 Botones full width (más fáciles de tocar) */
        .gowebix-boton {
            width: 100% !important;
            display: block !important;
        }
        
/* ============================================
   SECCIÓN DE VARIABLES CSS (OPCIONAL - AGREGAR AL INICIO)
   ============================================ */

/*
:root {
    --mobile-padding: 15px;
    --mobile-padding-small: 10px;
    --image-size-default: 60%;
    --image-size-large: 100%;
    --logo-width: 120px;
    --button-touch-height: 44px;
}
*/

/* ============================================
   NOTAS TÉCNICAS Y MEJORAS FUTURAS
   ============================================ */

/*
 * ✅ LO QUE YA FUNCIONA PERFECTAMENTE:
 * 1. Paddings consistentes en todos los componentes GoWebix
 * 2. Sistema de imágenes responsivas con control granular (60%/100%)
 * 3. Logo del footer visible sin duplicados (solo muestra uno)
 * 4. Grid de 6 columnas convertido a 2 columnas optimizado
 *
 * 🔧 CORRECCIONES APLICADAS:
 * 1. Eliminado media query duplicado en la sección 4
 * 2. Corregido cierre de llaves en sección 3
 * 3. Estructura de media queries anidadas corregida
 *
 * 💡 OPTIMIZACIONES SUGERIDAS:
 * 1. Agrupar propiedades idénticas para reducir redundancia
 * 2. Implementar variables CSS para valores repetidos
 */

/* FIN DEL ARCHIVO RESPONSIVE.CSS PARA GOWEBIX */
}

/* ============================================================
   GOWEBIX — MOBILE LANDSCAPE HEADER (sticky) FIX
   Reduce header height + logo size when phone is horizontal
   ============================================================ */

@media (max-width: 991px) and (orientation: landscape) {

  /* 1) Header más bajo */
  header,
  header .navbar,
  header .navbar-fixed-top,
  header .sticky-header,
  .sticky-header {
    min-height: 56px !important;
    height: 56px !important;
  }

  /* 2) Logo mucho más chico (la clave) */
  header .navbar-brand img,
  header .navbar .logo img,
  header .navbar .logo-light img,
  header .navbar .logo-dark img {
    max-height: 70px !important;
    height: 70px !important;
    width: auto !important;
  }

  /* 3) Evitar padding gigante dentro del nav */
  header .navbar-header,
  header .navbar-nav,
  header .nav,
  header .navbar-collapse {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  /* 4) Ajustar el botón hamburguesa */
  .navbar-toggle,
  .mobile-toggle,
  .hamburger-menu,
  .menu-toggle {
    transform: scale(0.9);
    transform-origin: center;
  }

  /* 5) (Opcional pero recomendado) ocultar redes en landscape
        para que no empujen el layout */
  header .header-social-icon,
  header .social-icon,
  header .social-icon-style,
  header .social-icon-light,
  header .social-icon-dark {
    display: none !important;
  }
}
/* ============================================================
   GOWEBIX — MOBILE LANDSCAPE FOOTER LOGO FIX
   ============================================================ */
@media (max-width: 991px) and (orientation: landscape) {

  /* mostrar logo footer sí o sí */
  .footer-strip-dark .footer-logo.logo-footer,
  .footer-strip-dark img.footer-logo,
  .footer-strip-dark .footer-logo {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: 48px !important;
    height: auto !important;
    width: auto !important;
    margin: 0 auto 12px auto !important;
  }

  /* ocultar retina duplicada si vuelve a aparecer */
  .footer-strip-dark .footer-logo.logo-footer-retina {
    display: none !important;
  }

  /* liberar alturas del contenedor */
  .footer-strip-dark .col-md-3.display-table,
  .footer-strip-dark .col-md-3.display-table .display-table-cell,
  .footer-strip-dark .footer-logo-wrap,
  .footer-strip-dark .footer-logo-wrap img {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    vertical-align: middle !important;
  }

  /* si el footer usa text-center/inline-block raros */
  .footer-strip-dark .display-table-cell {
    text-align: center !important;
  }
}