/* =========================================================
   EfrainVillagran.net — Sitio completo
   responsive.css — media queries + menú móvil
   ========================================================= */

@media (max-width: 1180px){
  .benefits-grid{grid-template-columns:repeat(2,1fr);}
  .services-grid{grid-template-columns:repeat(2,1fr);}
  .pricing-grid{grid-template-columns:repeat(2,1fr);}
  .pricing-grid.pricing-grid-6{grid-template-columns:repeat(2,1fr);}
  .pricing-grid.pricing-grid-3{grid-template-columns:repeat(2,1fr);max-width:640px;}
  .pricing-grid.pricing-grid-2{grid-template-columns:repeat(2,1fr);max-width:640px;}
  .pricing-grid.pricing-grid-cpanel6{grid-template-columns:repeat(2,1fr);}
  .work-web-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .work-logos-grid{grid-template-columns:repeat(4,1fr);}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:28px;}
  .region-grid{grid-template-columns:1fr 1fr;}
  .dc-gallery{grid-template-columns:repeat(2,1fr);}
}

@media (max-width: 1140px){
  .main-nav{
    position:fixed;top:96px;right:0;bottom:0;
    width:100%;max-width:400px;
    background:var(--white);
    padding:10px 24px 40px;
    overflow-y:auto;
    transform:translateX(100%);
    transition:transform .32s var(--ease);
    z-index:190;
    box-shadow:-8px 0 40px rgba(10,36,88,.12);
  }
  .main-nav.open{transform:translateX(0);}
  .main-nav > ul{flex-direction:column;align-items:stretch;gap:0;}
  .main-nav > ul > li{border-bottom:1px solid var(--gray-100);}
  .nav-link{padding:17px 6px;font-size:16px;justify-content:space-between;border-radius:0;}
  .main-nav button.nav-link{width:100%;text-align:left;}
  .nav-link::after{display:none;}
  .nav-link:hover{background:none;}
  .dropdown-menu{
    position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:none;border-top:none;padding:0 0 10px 12px;
    max-height:0;overflow:hidden;transition:max-height .3s var(--ease);
  }
  .has-dropdown.open .dropdown-menu{max-height:1000px;}
  .dropdown-menu li a:hover, .dropdown-menu li .submenu-trigger:hover{padding-left:18px;}
  .submenu{
    position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:none;border-top:none;margin-left:0;padding:0 0 6px 14px;
    max-height:0;overflow:hidden;transition:max-height .3s var(--ease);
  }
  .has-submenu.open .submenu{max-height:600px;}
  .nav-mobile-toggle{display:flex;}
  .nav-mobile-toggle.open{background:var(--gray-100);}
  .nav-mobile-toggle.open span{background:transparent;}
  .nav-mobile-toggle.open span::before{transform:translateY(6px) rotate(45deg);}
  .nav-mobile-toggle.open span::after{transform:translateY(-6px) rotate(-45deg);}

  .who-grid{grid-template-columns:1fr;gap:40px;}
  .who-photo{max-width:360px;margin:0 auto;}
  .contact-grid{grid-template-columns:1fr;gap:40px;}
  .hub-grid{grid-template-columns:1fr;}
  .testimonials-full-grid{grid-template-columns:1fr;}
}

@media (max-width: 760px){
  .container{padding:0 20px;}
  .header-inner{height:78px;}
  .brand-logo{height:68px;}
  .main-nav{top:78px;}

  .hero{min-height:auto;padding:120px 0 70px;}
  .hero-ctas{flex-direction:column;align-items:stretch;}
  .hero-ctas .btn{width:100%;}

  .section{padding:72px 0;}
  .benefits{padding:64px 0;}
  .benefits-grid{grid-template-columns:1fr;}
  .services-grid{grid-template-columns:1fr;}
  .testimonials-grid{grid-template-columns:1fr;}

  .form-row{grid-template-columns:1fr;gap:0;}
  .contact-form{padding:24px;}

  .work-web-grid{grid-template-columns:1fr;}
  .work-logos-grid{grid-template-columns:repeat(3,1fr);}
  .pricing-grid{grid-template-columns:1fr;}
  .pricing-grid.pricing-grid-6{grid-template-columns:1fr;}
  .pricing-grid.pricing-grid-3{grid-template-columns:1fr;max-width:420px;}
  .pricing-grid.pricing-grid-2{grid-template-columns:1fr;max-width:420px;}
  .pricing-grid.pricing-grid-cpanel6{grid-template-columns:1fr;}
  .page-hero{padding:130px 0 60px;}
  .cta-banner{padding:64px 0;}
  .cta-banner-box{padding:44px 24px;}
  .faq{padding:64px 0;}
  .faq-question{padding:16px 18px;font-size:14px;}
  .faq-answer-inner{padding:0 18px 18px;}

  .stats-grid{grid-template-columns:1fr 1fr;}
  .region-grid{grid-template-columns:1fr;}
  .dc-gallery{grid-template-columns:1fr 1fr;}

  .float-wa{width:52px;height:52px;right:16px;bottom:16px;}

  .site-footer-mini{padding:20px 0;}
  .site-footer-mini p{font-size:12.5px;padding-right:56px;}
}

@media (max-width: 420px){
  .site-footer-mini p{font-size:11.5px;padding-right:52px;}
  .step-number{font-size:42px;}
}

@media (max-width: 420px){
  .hero h1{font-size:30px;}
}

/* ---------- ajuste fino móvil (13-08-2026) ---------- */
@media (max-width: 1140px){
  .has-dropdown.open > .nav-link .chev{transform:rotate(180deg);}
  .has-submenu.open > .submenu-trigger .chev-right{transform:rotate(90deg);}

  /* En móvil no movemos horizontalmente el texto al hacer hover/tap;
     así todos los fondos celestes conservan exactamente el mismo ancho. */
  .dropdown-menu li a:hover,
  .dropdown-menu li .submenu-trigger:hover,
  .submenu li a:hover,
  .submenu li .submenu-trigger:hover{padding-left:18px;}
}

@media (max-width: 760px){
  .work{padding-bottom:56px;}
  .work + .services{padding-top:56px;}
}


/* ---------- mejoras conversión Alojamiento de Apps (15-08-2026) ---------- */
@media (max-width:760px){
  .app-plan-assurance{margin-top:22px;padding:16px 18px;}
  .app-plan-trust{gap:8px 14px;}
  .app-plan-help{font-size:13.5px;}
}

/* ---------- corrección integral móvil: menús y botones visibles (16-08-2026) ---------- */
/* Estas reglas solo actúan en navegación móvil/tablet. No alteran escritorio. */
@media (max-width: 1140px){
  /* Evita que los max-height fijos recorten submenús anidados (por ejemplo,
     Servicios > Hosting Web > Alojamiento de Apps). Solo se expande el
     submenú hijo directo que realmente está abierto. */
  .main-nav .has-dropdown.open > .dropdown-menu,
  .main-nav .has-submenu.open > .submenu{
    max-height:none;
    overflow:visible;
  }

  .main-nav .has-dropdown:not(.open) > .dropdown-menu,
  .main-nav .has-submenu:not(.open) > .submenu{
    max-height:0;
    overflow:hidden;
  }

  /* Todos los niveles quedan contenidos dentro del panel móvil. */
  .main-nav .dropdown-menu,
  .main-nav .submenu{
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
  }

  .main-nav .dropdown-menu li,
  .main-nav .submenu li,
  .main-nav .dropdown-menu li > a,
  .main-nav .dropdown-menu li > .submenu-trigger,
  .main-nav .submenu li > a,
  .main-nav .submenu li > .submenu-trigger{
    max-width:100%;
    box-sizing:border-box;
  }

  /* Se conserva Hosting PrestaShop en una sola línea, sin forzar el ancho
     del submenú más allá del panel disponible. */
  #navApps{min-width:0;}
  #navApps .nav-final-link{white-space:nowrap;}
}

@media (max-width: 760px){
  /* Evita recortes en CTA y botones largos de cualquier página en móvil. */
  .btn{
    max-width:100%;
    box-sizing:border-box;
    white-space:normal;
    text-align:center;
  }
  .price-card .btn,
  .cta-banner-actions .btn,
  .testimonials-more .btn{
    width:100%;
  }
}

/* ---------- corrección definitiva de submenús móviles anidados (16-08-2026) ---------- */
/*
   En móvil dejamos de depender de max-height para abrir/cerrar los niveles
   anidados. Con tres niveles (Servicios > Hosting Web > Alojamiento de Apps),
   algunos navegadores podían conservar una altura calculada del padre y
   recortar los últimos enlaces. display:none/block evita ese recorte y solo
   se aplica al menú móvil/tablet; escritorio no cambia.
*/
@media (max-width: 1140px){
  .main-nav .dropdown-menu,
  .main-nav .submenu{
    display:none;
    max-height:none !important;
    overflow:visible !important;
    transition:none;
  }

  .main-nav .has-dropdown.open > .dropdown-menu,
  .main-nav .has-submenu.open > .submenu{
    display:block;
    max-height:none !important;
    overflow:visible !important;
  }

  /* El panel principal conserva desplazamiento vertical cuando el menú
     completo supera la altura de la pantalla. */
  .main-nav.open{
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
}