/* =========================================================
   RESPONSIVE — always last. Big screens down to 360px.
   ========================================================= */

/* ---- Laptop ---- */
@media (max-width: 1180px) {
  .intro__grid { grid-template-columns: 1fr 1fr; }
  .process__grid { grid-template-columns: 1fr; }
  .process__sticky { position: static; }
  .case-body { grid-template-columns: 1fr; }
  .case-body h2 { position: static; }
  .numbers, .case-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: clamp(1.5rem, 3vw, 2.5rem); }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: clamp(2rem, 4vw, 3rem); }
}

/* ---- Suelo de la escala en pantalla pequeña ----
   La escala de tokens.css es fluida y en un teléfono toca fondo: a 375 px
   --t-mono se queda en 9,92 px, y de ahí cuelga casi toda la interfaz
   —navegación, etiquetas de disciplina, cliente, año y tipo de proyecto,
   contadores, pie de foto, pie de página—. Se lee mal.

   Lo que sube aquí es solo el MÍNIMO de cada clamp, no el valor entero:
   por eso el segundo y el tercer término se dejan intactos y de 900 px
   para arriba —donde ya manda la escala fluida— no cambia nada. El corte
   es el mismo en el que la navegación se pliega en menú, así que abarca
   justo la versión táctil del sitio. */
@media (max-width: 900px) {
  :root {
    --t-mono: 0.75rem;                                  /* 12 px en vez de 9,92 */
    --t-body: clamp(1.08rem, 0.94rem + 0.28vw, 1.15rem);
    --t-lead: clamp(1.35rem, 1.05rem + 0.9vw, 2rem);
  }
  /* Los dos tamaños sueltos que no cuelgan de un token. */
  .btn--lg { font-size: clamp(0.8rem, 0.6rem + 0.3vw, 0.85rem); }
  .menu__list a small { font-size: clamp(0.7rem, 0.5rem + 0.3vw, 0.75rem); }
}

/* ---- Tablet ---- */
@media (max-width: 900px) {
  .header__nav { display: none; }
  .burger { display: grid; }
  .status { display: none; }

  .hero__foot { grid-template-columns: 1fr; }
  .scroll-cue { display: none; }
  .hero__line--indent { padding-left: clamp(1rem, 6vw, 4rem); }

  .intro__grid, .about__cols { grid-template-columns: 1fr; }
  .intro__portrait { max-width: 460px; }

  .row a { grid-template-columns: auto 1fr auto auto; }  /* tags column drops out */
  .row__tags { display: none; }

  .acc__body { grid-template-columns: 1fr; padding-left: 0; }

  .cards { grid-template-columns: 1fr; }
  .card:nth-child(even) { transform: none; }

  .case-figs .pair { grid-template-columns: 1fr; }
  .results { grid-template-columns: 1fr; row-gap: clamp(1.5rem, 4vw, 2.5rem); }
  .skills { grid-template-columns: 1fr; }
  .timeline li { grid-template-columns: 1fr; gap: 0.3rem; }
  .timeline li span:last-child { grid-row: 1; }

  .form { grid-template-columns: 1fr; }
}

/* ---- Phone ---- */
@media (max-width: 620px) {
  /* On a phone the header carries the logo, the wordmark, the language
     switch, the theme toggle and the burger. It fits — but only just,
     and it fits by keeping the logo at about 20px, which is too small
     to read as a logo. The wordmark is the one item there that repeats
     what the logo already says, so it goes and the mark takes the room.
     The link keeps its aria-label, so its accessible name is unchanged. */
  .brand__mark + span { display: none; }
  /* Both axes, or the box stops matching the logotype's ratio and the
     `contain` background just letterboxes inside it — taller box, same
     small mark. 2.1673 is 411.73 / 189.98, the ratio of the file. */
  .brand__mark { height: 2.4em; width: calc(2.4em * 2.1673); }

  .lang a { padding: 0.32rem 0.5rem; }   /* keep both languages reachable */
  .hero { min-height: 92svh; }
  .hero__meta { gap: 0.9rem 1.5rem; }
  .hero__title { line-height: 0.92; }

  .row a {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "n     arrow"
      "title arrow"
      "year  arrow";
    gap: 0.35rem 1rem;
    align-items: center;
  }
  .row__n     { grid-area: n; }
  .row__title { grid-area: title; }
  .row__year  { grid-area: year; }
  .row__arrow { grid-area: arrow; align-self: center; }
  .row:hover .row__title { transform: none; }

  .numbers, .case-meta { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .menu { padding-top: calc(var(--header-h) + 1rem); }
  .menu__list a { gap: 0.6rem; }
  .quote blockquote { max-width: none; }
  .curtain { grid-template-columns: repeat(3, 1fr); }
  .preloader__foot { flex-direction: column; align-items: flex-start; gap: 1rem; }
}

/* ---- Very narrow: long Spanish words in the page titles ----
   «SELECCIONADO» at the h1 floor is wider than a phone screen — and
   not only the smallest one: at 430px it still pushed the document a
   few pixels sideways, and that dragged the archive rows off-screen
   with it. body{overflow-x:hidden} would clip the last letter rather
   than scroll, so the page titles shrink instead. Only the page
   titles: the home hero keeps its size because its words are short
   in both languages. */
@media (max-width: 560px) {
  .page-head__title { font-size: clamp(2.1rem, 0.6rem + 7vw, 9.5rem); }
  .hero__line--indent { padding-left: 0.75rem; }
}

/* Below 360 the header needs 335px and does not have it. The logo gives
   back the difference and stays well above the size it was when the
   name sat next to it. */
@media (max-width: 360px) {
  .brand__mark { height: 2.05em; width: calc(2.05em * 2.1673); }
}

/* ---- Short screens: give the hero less air ---- */
@media (max-height: 620px) and (min-width: 900px) {
  .hero { min-height: auto; padding-bottom: 4rem; }
}

/* ---- Print: a clean, dark-free document ---- */
@media print {
  .header, .menu, .cursor, .grain, .preloader, .curtain,
  .marquee, .progress, .scroll-cue, .preview, .stamp { display: none !important; }
  body { background: #fff; color: #000; }
  a { text-decoration: underline; }
  .section { padding-block: 1.5rem; }
  [data-reveal], .split .word > span { opacity: 1 !important; transform: none !important; }
}