/* ============================================================================
   SYNESYS — Responsive
   ========================================================================== */

/* ---------- Tablet ---------- */
@media (max-width: 900px) {
  .why__grid,
  .contact__grid { grid-template-columns: 1fr; }
  .why__media { aspect-ratio: 16/9; order: -1; }
  .why__list--cols { grid-template-columns: 1fr; }
  .method { grid-template-columns: 1fr; }
  .clients__grid { grid-template-columns: repeat(4, 1fr); }
  .cases { grid-template-columns: 1fr; }
  .mood__grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 160px; }
  .navcards { grid-template-columns: repeat(2, 1fr); }
  .orbits { grid-template-columns: repeat(2, 1fr); }
  .tech-grid { grid-template-columns: repeat(2, 1fr); }
  .halo__layout { flex-direction: column; gap: 1.5rem; }
  .halo__title span { writing-mode: horizontal-tb; transform: none; }
  .halo__grid { grid-template-columns: repeat(2, 1fr); }
  .deco-s { display: none; }
  .regions__grid { grid-template-columns: repeat(2, 1fr); }
  /* Chips de país: la ciudad baja bajo el país (evita el corte en columnas angostas) */
  .region { flex-wrap: wrap; align-items: baseline; }
  .region small { flex-basis: 100%; margin-left: calc(1.2em + .6rem); }
  .media-split, .media-split--rev { grid-template-columns: 1fr; }
  .media-split--rev .media-split__media { order: -1; }
  /* Móvil/tablet: texto sobre la zona magenta superior (no sobre la parte baja
     oscura); el reflejo rellena el alto restante sin recuadro blanco */
  .brand-exp--banner { min-height: clamp(380px, 86vw, 520px); }
  .brand-exp__inner { align-items: flex-start; justify-content: flex-end; padding-top: clamp(1.5rem, 6vw, 3rem); }
  .brand-exp__copy { max-width: 84%; text-align: right; transform: none; }
  .brand-exp__copy h2 { font-size: var(--fs-h2); }
  .brand-exp__copy { text-shadow: 0 1px 3px rgba(255,255,255,.7), 0 2px 18px rgba(255,255,255,.5); }
  .clients-showcase { grid-template-columns: 1fr; }
  .clients-showcase__visual { min-height: 300px; }
  /* Rollback (01-sep): el footer vuelve a 4 columnas; en tablet caen de dos en
     dos y la marca ocupa el ancho completo. */
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  :root { --header-h: 64px; }

  /* Collage de casos: 2 columnas en móvil (teselas 16:9 a lo ancho, 9:16 a doble fila) */
  .cases-collage { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(96px, 26vw, 150px); }

  /* Logo más angosto en móvil para no chocar con el botón de menú. Se dimensiona el
     CONTENEDOR (.brand-logo-swap): ambas capas (original animado + colores) escalan juntas,
     proporcionadas y alineadas. Escala con el viewport para caber también en pantallas de 320px. */
  .brand-logo-swap { height: clamp(24px, 7vw, 30px); }

  /* Nav móvil: panel a PANTALLA COMPLETA integrado a la identidad (doc. ajustes
     01-ago). Degradado azul institucional + vidrio sutil; enlaces en blanco,
     estado activo y CTA en magenta. Sustituye la tarjeta blanca genérica. */
  .nav-toggle { display: flex; position: relative; z-index: 2; }
  /* El botón hamburguesa debe verse sobre el video y sobre los headers azules */
  .site-header--overlay .nav-toggle span,
  .site-header--overlay.is-stuck .nav-toggle span,
  .site-header--solid .nav-toggle span { background: #fff; }
  /* Sombra sutil: garantiza contraste de las barras blancas sobre zonas claras de la imagen
     (estado transparente). En el header sólido azul no molesta. */
  .nav-toggle span { box-shadow: 0 1px 3px rgba(0,0,0,.45); }
  /* Con el panel abierto el icono de cierre (X) va en blanco sobre el degradado */
  .site-header .nav-toggle[aria-expanded="true"] span { background: #fff; box-shadow: none; }
  /* Logo por encima del panel para que siga visible con el menú abierto */
  .brand-link { position: relative; z-index: 2; }
  .nav {
    position: fixed; inset: 0; z-index: 1; min-height: 100dvh;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: calc(var(--header-h) + clamp(1.2rem, 5vh, 2.6rem)) var(--gutter) var(--space-4);
    background: linear-gradient(160deg,
      rgba(0, 0, 255, .96) 0%,
      rgba(26, 0, 160, .97) 48%,
      rgba(10, 8, 56, .98) 100%);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-12px);
    transition: opacity .28s var(--ease), transform .28s var(--ease), visibility 0s linear .28s;
  }
  .nav.is-open {
    opacity: 1; visibility: visible; transform: translateY(0);
    transition: opacity .28s var(--ease), transform .28s var(--ease);
  }
  /* Enlaces SIEMPRE en blanco sobre el degradado; anula las variantes por tipo de
     header (overlay/stuck/solid), cuya especificidad de escritorio es mayor. */
  .site-header--overlay .nav a:not(.btn),
  .site-header--overlay.is-stuck .nav a:not(.btn),
  .site-header--solid .nav a:not(.btn) { color: #fff; text-shadow: none; }
  /* La línea animada de escritorio (::after) se sustituye por el subrayado de la
     propia celda: filo blanco tenue y magenta en el estado activo. */
  .site-header .nav a::after { display: none; }
  .nav a { width: 100%; padding-block: 1rem; border-bottom: 1px solid rgba(255,255,255,.18); font-size: 1.15rem; }
  .site-header--overlay .nav a.is-active:not(.btn),
  .site-header--overlay.is-stuck .nav a.is-active:not(.btn),
  .site-header--solid .nav a.is-active:not(.btn),
  .site-header .nav a[aria-current="page"]:not(.btn) {
    color: var(--synesys-magenta);
    border-bottom: 2px solid var(--synesys-magenta);
  }
  .nav .btn { margin-top: var(--space-3); width: 100%; justify-content: center; border-bottom: 2px solid transparent; }
  @media (prefers-reduced-motion: reduce) {
    .nav { transform: none; transition: opacity .15s linear, visibility 0s linear .15s; }
    .nav.is-open { transition: opacity .15s linear; }
  }
  .navcards { grid-template-columns: 1fr; }

  .services { grid-template-columns: 1fr; }
  .clients__grid { grid-template-columns: repeat(3, 1fr); }
  .mood__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
  .mood__item.wide { grid-column: span 2; }
  .field--row { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: var(--space-4); }
  /* La firma no debe crecer en móvil: se mantiene discreta bajo el wordmark. */
  .footer-signature img { height: 46px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  /* Aire inferior: al llegar al final de la página los botones flotantes
     (contacto y volver-arriba) quedan sobre esta franja vacía y no cubren los
     chips de partners (doc. ajustes 01-ago §4). */
  .footer-bottom { padding-bottom: 72px; }
  .site-footer::after { display: none; }
  .regions__grid { grid-template-columns: repeat(2, 1fr); }
  .clients-wall { grid-template-columns: repeat(2, 1fr); }
  .orbits { grid-template-columns: 1fr; max-width: 320px; margin-inline: auto; }
  .tech-grid { grid-template-columns: 1fr; }
  .halo__grid { grid-template-columns: 1fr; max-width: 360px; margin-inline: auto; }
  .hero { min-height: 92svh; }
  .case__metrics { gap: var(--space-2); }
}

/* ---------- Pantallas muy chicas ---------- */
@media (max-width: 380px) {
  .clients__grid { grid-template-columns: repeat(2, 1fr); }
  .hero__cta .btn { width: 100%; justify-content: center; }
}