/* =========================================================
   MALAQUITA INTERNATIONAL — Responsive
   Mobile-first: estilos base en styles.css para <480px.
   Aquí se amplían progresivamente los componentes.
   ========================================================= */

/* Teléfonos grandes 481–767px */
@media (min-width:481px){
  .grid-2{grid-template-columns:repeat(2,1fr);}
  .hero-actions .btn{width:auto;}
}

/* Tabletas 768–1023px */
@media (min-width:768px){
  .container{padding-inline:var(--space-lg);}
  .grid-3{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:repeat(2,1fr);}
  .hero-inner{grid-template-columns:1.1fr 0.9fr;align-items:center;}

  /* En tablet+ el menú deja de ser overlay lateral en pantallas anchas de nav,
     pero seguimos usando el patrón de menú móvil hasta escritorio para
     mantener consistencia y evitar mega-menús frágiles en táctil. */
  .main-nav{width:min(60vw,380px);}
}

/* Laptops y escritorio 1024–1439px: navegación horizontal completa */
@media (min-width:1024px){
  .nav-toggle,.nav-close,.nav-backdrop{display:none;}

  .main-nav{
    position:static;
    width:auto;
    transform:none;
    box-shadow:none;
    background:transparent;
    padding:0;
    overflow:visible;
  }
  .nav-list{
    flex-direction:row;
    align-items:center;
    gap:var(--space-md);
    margin:0;
  }
  .nav-list>li{border-bottom:none;}
  .nav-link{min-height:auto;padding:0.5rem 0;}
  .has-submenu{position:relative;}
  .submenu-toggle{display:none;}
  .submenu{
    position:absolute;
    top:100%;left:50%;
    transform:translateX(-50%);
    max-height:none;
    overflow:visible;
    background:var(--color-surface);
    border:var(--border-w) solid var(--color-border);
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-md);
    padding:0.5rem;
    width:280px;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity var(--transition-fast);
  }
  .has-submenu:hover .submenu,
  .has-submenu:focus-within .submenu,
  .submenu.is-open{
    opacity:1;visibility:visible;pointer-events:auto;
  }
  .submenu a{border-radius:var(--radius-sm);min-height:auto;padding:0.6rem 0.75rem;}
  .submenu a:hover{background:var(--color-malachite-mist);color:var(--color-malachite-deep);}

  .nav-utility{
    flex-direction:row;
    align-items:center;
    margin-top:0;
    margin-left:var(--space-md);
  }

  .header-inner{padding-block:var(--space-sm);}

  .grid-3{grid-template-columns:repeat(3,1fr);}
  .grid-2{grid-template-columns:repeat(2,1fr);}

  .process-list{grid-template-columns:repeat(3,1fr);}
  .process-item{grid-template-columns:1fr;border-bottom:none;border-right:var(--border-w) solid var(--color-border);padding-right:var(--space-md);}
  .process-item:last-child{border-right:none;}

  .footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr;}

  h1{max-width:18ch;}
  p.lead{max-width:60ch;}
}

/* Pantallas grandes 1440px+ */
@media (min-width:1440px){
  .container{padding-inline:var(--space-xl);}
  section{padding-block:calc(var(--space-2xl) + 1rem);}
}

/* Utilidad: evitar scroll horizontal accidental en cualquier tamaño */
html,body{max-width:100%;overflow-x:hidden;}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}