/* ============================================================
   VARTEX 14 — responsive.css
   Ajustes por punto de interrupción: portátil, tableta y móvil.
   ============================================================ */

/* ---------- ≤ 1360px: hamburguesa en lugar del menú ---------- */
@media (max-width: 1360px) {
  .nav__menu {
    display: none;
  }

  /* Hamburguesa a la izquierda de las redes, logo al extremo izquierdo */
  .nav__logo {
    order: -2;
  }

  .nav__toggle {
    display: flex;
    order: -1;
    margin-left: 0;
  }

  .nav__social {
    order: 2;
    margin-left: auto;
  }
}

/* Anotación de borde: solo en escritorio amplio */
@media (max-width: 1220px) {
  .plate__edge {
    display: none;
  }
}

/* ---------- ≤ 1020px: editorial en una columna ---------- */
@media (max-width: 1020px) {
  .editorial,
  .editorial--taller,
  .editorial--seminario {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .editorial--seminario .still {
    order: -1;
    max-width: 30rem;
  }

  .section-head--split {
    max-width: 100%;
  }

  .section--programa .shell {
    grid-template-columns: 1fr;
  }

  .section--programa .section-head {
    margin-bottom: clamp(3rem, 7vw, 6rem);
  }

  .section--nacional .shell {
    grid-template-columns: 1fr;
  }

  .section--nacional .section-head--row {
    flex-direction: row;
    align-items: flex-end;
  }

  .section--nacional .still--wide {
    margin-bottom: clamp(3rem, 7vw, 5.5rem);
  }

  .section--local .local__grid {
    grid-template-columns: 1fr;
  }

  .section--local .section-head--row {
    flex-direction: row;
    align-items: flex-end;
  }

  .section--local .still--wide {
    margin-bottom: clamp(3rem, 7vw, 5.5rem);
  }

  .section--perf .perf__grid {
    grid-template-columns: 1fr;
  }

  .section--perf .perf__col--info {
    order: 1;
  }

  .section--perf .perf__col--list {
    order: 2;
  }

  .section--perf .section-head--row {
    flex-direction: row;
    align-items: flex-end;
  }

  .section--perf .still--wide {
    margin-bottom: clamp(3rem, 7vw, 5.5rem);
  }

  .section--intl .intl__grid {
    grid-template-columns: 1fr;
  }

  .section--intl .section-head--row {
    flex-direction: row;
    align-items: flex-end;
  }

  .section--intl .still--wide {
    margin-bottom: clamp(3rem, 7vw, 5.5rem);
  }

  .section--sponsors .sponsors__grid {
    grid-template-columns: 1fr;
  }

  .section-head--row {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.4rem;
  }

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

  .still--wide {
    aspect-ratio: 16 / 9;
  }
}

/* ---------- ≤ 760px: muestras, acordeón, pie ---------- */
@media (max-width: 760px) {
  .muestras {
    grid-template-columns: 1fr;
  }

  .muestra {
    min-height: 0;
  }

  .acc__inner {
    grid-template-columns: 1fr;
    gap: 1.8rem;
  }

  .acc__autor {
    display: none;
  }

  .acc__btn {
    grid-template-columns: 2.6rem 1fr auto;
  }

  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: 2.2rem;
  }

  .site-footer__sponsors {
    grid-template-columns: 1fr;
  }

  .timeline a {
    grid-template-columns: 3.5rem 2.5rem 1fr;
  }
}

/* ---------- ≤ 620px: tarjetas a una columna ---------- */
@media (max-width: 620px) {
  .cards {
    grid-template-columns: 1fr;
  }

  .card {
    min-height: 0;
  }

  .topic {
    grid-template-columns: 2.4rem 1fr auto;
    gap: 1rem;
  }

  .datos__cta {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero__scroll {
    display: none;
  }

  /* Barra de navegación más baja en móvil */
  .nav {
    padding-block: 0.55rem;
  }

  .site-header.is-scrolled .nav {
    padding-block: 0.45rem;
  }
}

/* ---------- ≤ 420px: ajustes finos ---------- */
@media (max-width: 420px) {
  .acc__facts > div {
    grid-template-columns: 6rem 1fr;
  }

  .still__label {
    font-size: 0.55rem;
  }

  .site-footer__bottom {
    flex-direction: column;
  }

  .hero__kicker {
    letter-spacing: 0.2em;
  }
}

/* ---------- ≥ 1600px: pantallas ultra anchas ---------- */
@media (min-width: 1600px) {
  :root {
    --shell: 1560px;
  }

  .section-sub {
    max-width: 40ch;
  }
}

/* ---------- Soporte para pantallas muy pequeñas ---------- */
@media (max-height: 560px) {
  .hero {
    min-height: 100vh;
  }

  .hero__row--bottom {
    padding-bottom: 2rem;
  }

  .hero__scroll {
    display: none;
  }
}

/* ---------- Pantallas bajas: despeja el indicador de scroll ---------- */
@media (max-height: 760px) and (min-height: 561px) {
  .hero__row--bottom {
    padding-bottom: 1rem;
  }
}