/* ============================================================
   responsive.css
   Media queries con cambios de comportamiento (no solo retoque).
   - Header pasa a hamburguesa < 768px
   - Hero/grid colapsan a una columna
   - WhatsApp sticky aparece en móvil
   - Grids principales (problem-grid, two-cards, etc.) colapsan
============================================================ */

/* ─── Mobile menu visible / nav links hidden ─────────────── */
@media (max-width: 768px) {
  .nav .nav-link { display: none; }
  .nav .lang-switch { display: none; }
  .menu-toggle { display: inline-flex; }
  .wa-sticky { display: inline-flex; }
}

/* ─── Hero — collapse to single column ───────────────────── */
@media (max-width: 880px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    padding-top: 100px;
    padding-bottom: 60px;
    min-height: auto;
  }
  .hero-left  { order: 2; padding-top: 8px; }
  .hero-right { order: 1; min-height: 360px; height: 360px; }
  .hero-words { font-size: clamp(44px, 13vw, 84px); }

  .page-hero { min-height: auto; }
  .page-hero .wrap { grid-template-columns: 1fr; gap: 16px; }
  .page-hero .ph-left  { order: 2; }
  .page-hero .ph-right { order: 1; min-height: 320px; height: 320px; }
}

/* ─── Grid collapses ─────────────────────────────────────── */
@media (max-width: 1000px) {
  .problem-grid { grid-template-columns: repeat(2, 1fr); }
  .sales        { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 880px) {
  .two-cards     { grid-template-columns: 1fr; }
  .match         { grid-template-columns: 1fr; }
  .infra-three   { grid-template-columns: 1fr; }
  .steps         { grid-template-columns: repeat(2, 1fr); }
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .tl                { grid-template-columns: 1fr; gap: 32px; }
  .footer-grid       { grid-template-columns: 1fr 1fr; }
  .ida               { grid-template-columns: 1fr; }
  .flow-canvas       { height: 520px; }
}
@media (max-width: 520px) {
  .steps        { grid-template-columns: 1fr; }
  .sales        { grid-template-columns: 1fr; }
  .manifesto-ida { grid-template-columns: 1fr; }
  .manifesto-ida > div { border-right: none; }
  .portfolio-grid { grid-template-columns: 1fr; }
}
@media (max-width: 500px) {
  .problem-grid { grid-template-columns: 1fr; }
}

/* ─── Tap target floor for any anchored CTA ──────────────── */
@media (max-width: 768px) {
  .btn { min-height: 48px; }
  .btn-lg { min-height: 52px; }
}

/* ════════════════════════════════════════════════════════════
   HERO OVERLAY — solo móvil (≤768px)
   La animación 3D vive en #global-bg (fixed, full-screen) y en
   móvil ya queda centrada (particles-global.js → resize():
   activeGroup.position.x = 0). Aquí dejamos de reservarle una
   columna/altura propia y montamos el texto del hero ENCIMA, a
   sangre, con un velo oscuro inferior para legibilidad.
   NO se toca el JS de las escenas. El bloque ≤880px de arriba
   sigue cubriendo el rango tablet (768–880px).
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Home hero ─────────────────────────────────────────── */
  .hero {
    min-height: calc(100vh - 64px);    /* fallback sin svh */
    min-height: calc(100svh - 64px);   /* alto real menos header sticky */
    display: flex;
    align-items: stretch;
  }
  /* Velo oscuro abajo→arriba sobre la animación. Sustituye la
     viñeta de desktop justo donde se posa el texto. */
  .hero::after {
    background: linear-gradient(
      to bottom,
      rgba(10, 10, 10, 0.20) 0%,
      rgba(10, 10, 10, 0.45) 35%,
      rgba(10, 10, 10, 0.65) 60%,
      rgba(10, 10, 10, 0.88) 100%
    );
    mask-image: none;
    -webkit-mask-image: none;
    z-index: 1;
  }
  .hero-grid {
    grid-template-columns: 1fr;
    min-height: calc(100vh - 64px);
    min-height: calc(100svh - 64px);
    align-items: center;               /* texto centrado verticalmente */
    gap: 20px;
    padding-top: clamp(40px, 8vh, 96px);
    padding-bottom: clamp(96px, 15vh, 150px);  /* hueco para el WhatsApp flotante */
  }
  .hero-right { display: none; }        /* el spacer vacío ya no reserva alto */
  .hero-left  { order: 0; z-index: 3; padding-top: 0; }
  .hero-words {
    font-size: clamp(40px, 12vw, 76px); /* "Información" cabe entero en 375px */
    line-height: 0.98;
  }
  .hero-words .w {
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.8), 0 1px 4px rgba(0, 0, 0, 0.6);
  }
  .hero-cta-wrap { margin-top: clamp(24px, 4vh, 40px); }

  /* ── Page hero (Automatización / Inteligencia) ─────────── */
  .page-hero {
    min-height: calc(100vh - 64px);
    min-height: calc(100svh - 64px);
    padding: 0;
    display: flex;
    align-items: stretch;
  }
  .page-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(
      to bottom,
      rgba(10, 10, 10, 0.20) 0%,
      rgba(10, 10, 10, 0.45) 35%,
      rgba(10, 10, 10, 0.65) 60%,
      rgba(10, 10, 10, 0.88) 100%
    );
  }
  .page-hero .wrap {
    grid-template-columns: 1fr;
    min-height: calc(100vh - 64px);
    min-height: calc(100svh - 64px);
    align-items: center;
    gap: 16px;
    padding-top: clamp(40px, 8vh, 96px);
    padding-bottom: clamp(96px, 15vh, 150px);
  }
  .page-hero .ph-right { display: none; }
  .page-hero .ph-left  { order: 0; z-index: 3; }
  .page-hero h1 {
    font-size: clamp(32px, 8.5vw, 52px); /* "Automatización" cabe en 375px sin cortes */
    max-width: 100%;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.8), 0 1px 4px rgba(0, 0, 0, 0.6);
  }
  .page-hero .crumb {
    margin-bottom: 18px;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.75);
  }
  .page-hero .lede {
    font-size: 16px;
    line-height: 1.4;
    margin-top: 18px;
    max-width: 40ch;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.75);
  }
  .page-hero .hero-ctas { margin-top: 24px; gap: 10px; }
}

/* ── prefers-reduced-motion: fondo ya estático (lo hace el JS);
      aquí dejamos el texto del hero visible al instante. ── */
@media (prefers-reduced-motion: reduce) {
  .hero-words .w,
  .hero-cta-wrap {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
}