/* =============================================================================
   Bloque «Todas nuestras líneas» — rejilla de tarjetas, una por división.
   Va sobre fondo claro: después de nueve escenas oscuras a pantalla completa,
   el cambio de superficie es lo que marca que empieza otra cosa.
   ========================================================================== */
.gi-lineas{
  background:var(--gi-fondo);
  padding:clamp(3rem, 2rem + 5vw, 6rem) max(1.25rem, var(--gi-gutter));
}
.gi-lineas__interior{max-width:1180px;margin-inline:auto}

.gi-lineas__etiqueta{
  display:block;font-family:var(--gi-titular);font-size:var(--gi-t-xs);
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gi-verde);margin-bottom:.75rem;
}
.gi-lineas__entradilla{color:var(--gi-texto-suave);max-width:60ch;margin-bottom:2.5rem}

.gi-lineas__grupo{
  font-size:var(--gi-t-s);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gi-texto-suave);margin:2.5rem 0 1rem;
  padding-bottom:.6rem;border-bottom:1px solid var(--gi-linea);
}

.gi-lineas__rejilla{
  list-style:none;margin:0;padding:0;
  display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}

/* El <li> tiene que estirarse en su celda; si no, el enlace con height:100%
   se desborda y las tarjetas de una fila se meten encima de las de la
   siguiente. Se vio en la primera captura, no en el código. */
.gi-lineas__item{display:flex}

.gi-lineas__tarjeta{
  display:flex;flex-direction:column;flex:1;
  padding:1.5rem;border:1px solid var(--gi-linea);border-radius:var(--gi-radio);
  background:#fff;text-decoration:none;color:inherit;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.gi-lineas__tarjeta:hover{
  border-color:var(--gi-verde);transform:translateY(-2px);
  box-shadow:0 10px 24px -18px rgba(13,61,31,.5);
}

/* El icono usa el mismo lenguaje de trazo que las escenas: línea fina, sin
   relleno. Es lo que hace que la rejilla se lea como parte de la misma serie. */
.gi-lineas__icono{
  width:48px;height:48px;margin-bottom:1rem;flex:none;
  fill:none;stroke:var(--gi-verde);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}
.gi-lineas__titulo{
  font-size:var(--gi-t-l);margin:0 0 .5rem;line-height:1.2;text-wrap:balance;
}
.gi-lineas__frase{
  font-size:var(--gi-t-s);color:var(--gi-texto-suave);margin:0 0 1.25rem;
  max-width:none;flex:1;
}
.gi-lineas__enlace{
  font-family:var(--gi-titular);font-size:var(--gi-t-xs);font-weight:600;
  color:var(--gi-verde-oscuro);letter-spacing:.02em;
}
.gi-lineas__tarjeta:hover .gi-lineas__enlace{color:var(--gi-verde)}
.gi-lineas__enlace::after{content:" →";transition:none}

.gi-lineas__tarjeta:focus-visible{outline:3px solid var(--gi-verde);outline-offset:3px}