/* ============================================================
   AlphaNetworks · responsive.css
   Media queries centralizadas — Mobile-first.
   Cargar SIEMPRE al final de la cascada (después de components).
   Depende de: todo el sistema anterior.
   ------------------------------------------------------------
   Breakpoints (referencia — sincronizados con variables.css):
     sm  → 560px    (móvil grande)
     md  → 680px    (phablet)
     lg  → 960px    (tablet)
     xl  → 1080px   (desktop / colapso de nav)
     2xl → 1600px   (widescreen)
     3xl → 1900px   (ultra-wide)
   ============================================================ */

/* ── ≥ 1600px · Widescreen ──────────────────────────────── */
@media (min-width: 1600px) {
  .container      { max-width: 1440px; padding-inline: 32px; }
  .hero h1        { font-size: 3.4rem; }
  .sec-head h2    { font-size: 2.6rem; }
  .eco-row:not(.eco-row--quad) { grid-template-columns: repeat(3, 1fr); }
  .eco-row--quad  { grid-template-columns: repeat(4, 1fr); }
  .eco-groups     { grid-template-columns: repeat(3, 1fr); }
}

/* ── ≥ 1900px · Ultra-wide ──────────────────────────────── */
@media (min-width: 1900px) {
  .container { max-width: 1560px; }
}

/* ── ≤ 1080px · Colapso de navegación ──────────────────── */
@media (max-width: 1080px) {
  .navlinks {
    /* Menú móvil: posición fija debajo del header */
    position: fixed;
    inset: 96px 0 auto 0;         /* pega justo bajo el nav (96px = altura del header) */
    flex-direction: column;
    align-items: stretch;
    background: rgba(5,14,28,.98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 22px;
    gap: 16px;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 20px 40px rgba(0,0,0,.45);
    /* Estado cerrado */
    transform: translateY(-110%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform .3s var(--ease), opacity .3s, visibility .3s;
  }
  .navlinks.open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .navlinks a        { padding: 4px 0; }
  .navlinks a.btn    { justify-content: center; padding: 11px 18px; }

  /* Dropdown "Soluciones" en móvil: en columna, se expande al tocar */
  .nav-item.has-drop { flex-direction: column; align-items: stretch; width: 100%; }
  .nav-drop-toggle   { justify-content: space-between; width: 100%; padding: 4px 0; font-size: 1rem; }
  .nav-drop-menu {
    position: static;
    min-width: 0;
    height: 0;
    overflow: hidden;
    padding: 0; margin: 0;
    border: 0; background: none; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    transform: none;
    visibility: hidden;
  }
  /* En móvil sólo abre con clic (.open), nunca con hover/focus */
  .nav-item.has-drop:hover .nav-drop-menu,
  .nav-item.has-drop:focus-within .nav-drop-menu { visibility: hidden; height: 0; transform: none; }
  .nav-item.has-drop.open .nav-drop-menu {
    visibility: visible;
    height: auto;
    transform: none;
    padding: 6px 0 4px 14px;
  }
  .navlinks .nav-drop-menu a { padding: 8px 0; }

  .menu-toggle       { display: block; }
  .cta-band          { padding: 38px 24px; }
  .foot-grid         { grid-template-columns: 1fr 1fr; }
  .topbar            { display: block; }      /* visible en tablet */
}

/* ── ≤ 960px · Tablet · apilar layouts ─────────────────── */
@media (max-width: 960px) {
  /* Layouts de 2 columnas → 1 columna */
  .hero-grid,
  .split,
  .contact-grid   { grid-template-columns: 1fr; gap: 32px; }

  /* Grids de productos y tiers → 1 columna */
  .prod-grid,
  .tiers          { grid-template-columns: 1fr; }

  /* Grids secundarios → 2 columnas */
  .cov-grid,
  .eco-row,
  .eco-groups     { grid-template-columns: repeat(2, 1fr); }

  /* Pasos → 2 columnas */
  .steps          { grid-template-columns: repeat(2, 1fr); }

  /* KPIs → 2 columnas */
  .kpi-grid       { grid-template-columns: repeat(2, 1fr); }

  /* Hero visual: acotado y centrado */
  .hero-visual    { min-height: 440px; max-width: 560px; margin-inline: auto; }

  /* Topbar en tablet: ocultar el texto largo */
  .topbar .l span { display: none; }
  .topbar .inner  { justify-content: flex-end; }

  /* Page hero: márgenes más pequeños */
  .page-hero      { padding: 56px 0 40px; }
}

/* ── ≤ 680px · Phablet ──────────────────────────────────── */
@media (max-width: 680px) {
  /* Topbar: ocultar en móvil (protagonismo al nav) */
  .topbar         { display: none; }

  /* Ajuste de menú móvil para compensar topbar oculta */
  .navlinks       { inset-block-start: 96px; }

  /* Hero: reducir espaciado vertical */
  .hero           { padding: 48px 0 56px; }
  .hero-stats     { gap: 20px 26px; }

  /* Page hero: en móvil la altura se adapta al contenido (sin min fijo) */
  .page-hero      { min-height: auto; padding: 40px 0; }

  /* Formulario: apilar en 1 columna */
  form.cform .row { grid-template-columns: 1fr; gap: 0; }

  /* Tier grid → 2 columnas mínimo */
  .tiers          { grid-template-columns: repeat(2, 1fr); }

  /* Sección padding */
  .sec            { padding-block: 56px; }
  .sec-head       { margin-bottom: 36px; }
}

/* ── ≤ 560px · Móvil · una sola columna ────────────────── */
@media (max-width: 560px) {
  /* Todo apilar en 1 columna */
  .cov-grid,
  .eco-row,
  .eco-groups,
  .steps,
  .foot-grid,
  .tiers          { grid-template-columns: 1fr; }

  /* CTA hero: botones apilados */
  .hero-cta       { flex-direction: column; align-items: stretch; }
  .hero-cta .btn  { justify-content: center; }

  /* Tarjetas de cliente */
  .clients-row    { flex-direction: column; }
  .client-card    { max-width: 100%; min-width: 0; }

  /* KPIs → 2 columnas en móvil */
  .kpi-grid       { grid-template-columns: repeat(2, 1fr); }

  /* Container: menos padding en pantallas muy pequeñas */
  .container      { padding-inline: 18px; }

  /* CTA band */
  .cta-band       { padding: 36px 20px; border-radius: 14px; }

  /* Footer */
  .foot-grid      { gap: 24px; }

  /* Hero visual */
  .hero-visual    { max-height: 380px; }

  /* Page hero: más compacto en móvil */
  .page-hero      { padding: 44px 0 32px; }
  .page-hero h1   { font-size: clamp(1.7rem, 6vw, 2.4rem); }

  /* Hero card: altura adaptable en móvil */
  .hero-visual    { min-height: 420px; padding: 30px 20px 22px; }

  /* Contact grid en 1 columna */
  .contact-grid   { grid-template-columns: 1fr; }

  /* stat-grid2 en 1 columna en móvil muy pequeño */
  .stat-grid2     { grid-template-columns: 1fr 1fr; }

  /* Ocultar topbar en móvil (ya está, pero reforzado) */
  .topbar         { display: none !important; }

  /* Formulario fila → 1 columna */
  form.cform .row { grid-template-columns: 1fr; }

  /* di-stats en DiscoverIT → 1 columna */
  .discoverit-card .di-stats { grid-template-columns: 1fr; }

  /* eco-row en contacto (3 col) → 1 col */
  .eco-row        { grid-template-columns: 1fr; }

  /* Trust chips: salto de línea limpio */
  .trust-items,
  .trust .chips   { gap: 12px; }
  .trust .chip    { font-size: .78rem; }
}

/* ── Print: simplificar para impresión ──────────────────── */
@media print {
  .topbar,
  .menu-toggle,
  .nav,
  .cta-band,
  footer.site     { display: none; }
  body            { background: #fff; color: #000; }
  .hero           { padding: 24px 0; }
  .sec            { padding: 32px 0; break-inside: avoid; }
  a               { color: inherit; text-decoration: underline; }
  .btn            { border: 1px solid #000; }
}