/* ════════════════════════════════
   RESPONSIVE — MUEVE CULTURA
   ════════════════════════════════ */

/* ── 1024px — Tablet landscape ── */
@media (max-width: 1024px) {
  /* Lineas stack */
  .linea-item {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .linea-item:nth-child(even) { direction: ltr; }
  .linea-img { height: clamp(260px, 42vw, 420px); }

  /* Quiénes somos: una sola columna.
     El orden cambia a texto → foto → equipo, para que la foto quede justo
     encima de los nombres y se vea cambiar al tocar cada colaborador. */
  .qs-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    row-gap: 32px;
  }
  .qs-text   { grid-column: 1; grid-row: 1; }
  .qs-img    { grid-column: 1; grid-row: 2; }
  .qs-equipo { grid-column: 1; grid-row: 3; }

  .qs-img {
    position: relative; /* sin sticky en móvil (relative ancla el placeholder) */
    /* Sin esto hereda el top del sticky de escritorio (96px) y la foto
       baja 96px: deja un hueco arriba y se monta sobre los colaboradores. */
    top: auto;
    aspect-ratio: 4/3;
    max-height: 420px;
  }
  /* En recorte 4/3 el encuadre superior corta la cara — centrar en el rostro */
  .qs-img img { object-position: center 28%; }

  /* Ya no hace falta la línea superior: la foto separa texto y equipo */
  .qs-equipo > div { padding-top: 0; border-top: none; }

  /* Alma list 1 col */
  .alma-list { grid-template-columns: 1fr; }

  /* Exp grid */
  .exp-grid {
    grid-template-columns: 1fr;
  }
  .exp-grid-item.large,
  .exp-grid-item.half {
    grid-column: span 1;
  }

  /* Contacto */
  .contacto-grid {
    grid-template-columns: 1fr;
    gap: clamp(48px, 8vw, 80px);
  }
}

/* ── 768px — Tablet portrait / Mobile ── */
@media (max-width: 768px) {
  /* Nav */
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }

  /* Lineas text */
  .linea-text { padding: clamp(32px, 6vw, 56px); }

  /* Team grid */
  .team-grid { grid-template-columns: repeat(2, 1fr); }

  /* Contacto */
  .contacto-grid { grid-template-columns: 1fr; }

  /* Footer links */
  .footer-links { gap: 20px; }
}

/* ── 480px — Small mobile ── */
@media (max-width: 480px) {
  /* Hero */
  .hero-scroll { display: none; }

  /* Nav overlay */
  #nav-overlay a { font-size: clamp(22px, 8vw, 34px); }

  /* Team */
  .team-grid { grid-template-columns: 1fr; }
  .team-item { border-right: none; }

  /* Alma */
  .alma-obra { padding: 28px 20px; }
}