/* ============================================================
   SYMBIO · RESPONSIVE
   Los tamaños de texto ya son fluidos (clamp en tokens.css).
   Acá sólo se recompone el layout.
   ============================================================ */

/* -------------------------------------------------- ≤ 1080px */
@media (max-width: 1080px) {

  .split { grid-template-columns: 1fr; gap: var(--s-36); }
  .split--reverse .split__head,
  .split--reverse .split__body { order: 0; }
  .h-lg { max-width: 20ch; }

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

  .hero__brain {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.5) 30%, #000 62%);
            mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.5) 30%, #000 62%);
  }
}

/* -------------------------------------------------- ≤ 860px */
@media (max-width: 860px) {

  .nav__links { display: none; }
  .nav__cta   { display: none; }
  .nav__burger { display: flex; }
  .nav__inner { padding: 10px 10px 10px 20px; }

  .hero { min-height: auto; padding-block: 8.5rem var(--s-60); }
  .hero__title { max-width: 100%; }
  .hero__cue { display: none; }

  /* En vertical el cerebro queda detrás del texto: baja a nivel de
     textura para que el titular siga mandando. */
  .hero__brain {
    -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent 96%);
            mask-image: linear-gradient(180deg, #000 50%, transparent 96%);
  }
  .hero__brain.is-ready { opacity: .34; }

  .glow { filter: blur(70px); opacity: .42; }
}

/* -------------------------------------------------- ≤ 620px */
@media (max-width: 620px) {

  .strike { grid-template-columns: 1fr; }
  .strike li { min-height: 0; }

  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }

  .channel { padding: var(--s-18); gap: var(--s-12); }
  .channel__icon { width: 40px; height: 40px; }

  .footer__meta { flex-direction: column; gap: var(--s-6); }
}

/* -------------------------------------------------- Punteros gruesos */
@media (hover: none) {
  .channel:hover, .stat:hover { transform: none; }
}

/* -------------------------------------------------- Impresión */
@media print {
  .nav, .hero__brain, .hero__cue, .glow { display: none !important; }
  body { background: #fff; color: #000; }
  .glass { background: none; border-color: #ccc; box-shadow: none; backdrop-filter: none; }
  .section { padding-block: 1.5rem; page-break-inside: avoid; }
}