/**
 * SismoRed - Layout & Grid System
 */

.content-wrapper {
  position: relative;
  z-index: 1;
  max-width: var(--max-width-content);
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
}

.content-wrapper-legal {
  position: relative;
  z-index: 1;
  max-width: var(--max-width-legal);
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
}

/* Navegación */
.nav-container {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--color-border-subtle);
  flex-wrap: wrap;
}

.nav-links {
  display: flex;
  gap: 22px;
  align-items: center;
  flex-wrap: wrap;
}

.nav-link {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--color-text-muted);
  text-transform: uppercase;
  transition: color 0.18s ease;
}

.nav-link:hover {
  color: var(--color-text-primary);
}

/* «CÓMO FUNCIONA» y «CÓMO» son la misma entrada con dos largos. En un móvil
   los tres rótulos completos más el logotipo no caben en una fila, y lo que
   cedía era el logotipo: a 320 px se aplastaba hasta 12 px de ancho. */
.nav-corto {
  display: none;
}

/* Secciones estándar */
.section-divider {
  border-top: 1px solid var(--color-border-subtle);
  padding: 64px 0;
}

.section-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.section-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(34px, 4.6vw, 56px);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-top: 14px;
  text-wrap: balance;
}

.section-desc {
  font-size: 18px;
  color: var(--color-text-body);
  line-height: 1.5;
  max-width: 620px;
  margin-top: 16px;
  text-wrap: pretty;
}

/* ═══ GRILLAS SEMÁNTICAS ═══
 *
 * Todas usaban `repeat(auto-fit, minmax(…))`, que elige el número de columnas
 * por el ancho disponible sin saber cuántas tarjetas hay. En una pantalla de
 * tablet eso dejaba huérfanas: tres columnas para cuatro tarjetas, o dos para
 * tres, y la última caía sola a una fila vacía.
 *
 * Aquí cada rejilla solo usa números de columna que DIVIDEN EXACTO su número
 * de tarjetas. Por eso las de tres saltan de 3 a 1 sin pasar por 2.
 *
 *   3 tarjetas → 3 o 1        (momento, límites)
 *   4 tarjetas → 4, 2 o 1     (herramientas, límites-4, pie)
 *   2 tarjetas → 2 o 1        (reglas, descarga, cómo)
 */
.momento-grid,
.como-grid,
.herramientas-grid,
.reglas-grid,
.limites-grid,
.descarga-grid {
  display: grid;
  grid-template-columns: 1fr;
}

.momento-grid  { gap: 20px; margin-top: 26px; }
.como-grid     { gap: 20px; margin-top: 34px; align-items: stretch; }
.herramientas-grid { gap: 16px; margin-top: 32px; }
.reglas-grid   { gap: 20px; }
.limites-grid  { gap: 16px; margin-top: 26px; }
.descarga-grid { gap: 32px; align-items: center; }

/* Dos tarjetas: en cuanto caben, dos columnas. */
@media (min-width: 720px) {
  .reglas-grid,
  .descarga-grid,
  .como-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Cuatro tarjetas: dos columnas antes de poder con cuatro. */
@media (min-width: 620px) {
  .herramientas-grid,
  .limites-grid-4 {
    grid-template-columns: 1fr 1fr;
  }
}

/* Tres tarjetas: o las tres en fila o una debajo de otra. Nunca dos, que es
   lo que dejaba la tercera sola. */
@media (min-width: 820px) {
  .momento-grid,
  .limites-grid:not(.limites-grid-4) {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 980px) {
  .herramientas-grid,
  .limites-grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  /* A cuatro columnas la caja se estrecha y el relleno de 24 px se come el
     texto: el título pasaba de dos líneas a cuatro. */
  .limites-grid-4 .callout-box {
    padding: 18px;
    gap: 11px;
  }
}

/* ═══ PIE DE LA PORTADA ═══ */
/* La portada tenía ocho enlaces en una fila, todos con el mismo peso: había
   que leerlos uno a uno para encontrar el que servía. Aquí van por grupos, y
   debajo lo que no es navegación —quién responde, bajo qué licencia y de
   quién es lo que no es nuestro—, que en un proyecto de código abierto no es
   letra pequeña. */
.pie {
  border-top: 1px solid var(--color-border-subtle);
  padding: 44px 0 40px;
}

/* Columnas explícitas y no `auto-fit`: mezclar un `fr` suelto con un
   `repeat(auto-fit, …)` en la misma lista invalida la declaración entera, y
   el pie se quedaba en una sola columna incluso a 1280 px. */
.pie-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: 36px 28px;
}

/* A dos columnas el bloque de marca es mucho más alto que una lista de
   enlaces, y dejaba un agujero debajo con las otras dos listas descolgadas.
   Aquí la marca pasa arriba a todo lo ancho y las tres listas quedan en una
   fila pareja. */
@media (max-width: 979px) {
  .pie-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 30px 24px;
  }

  .pie-marca {
    grid-column: 1 / -1;
  }

  .pie-lema {
    max-width: 420px;
  }
}

@media (max-width: 620px) {
  .pie-grid {
    grid-template-columns: 1fr;
  }
}

.pie-lema {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-muted);
  margin: 14px 0 0;
  max-width: 280px;
  text-wrap: pretty;
}

.pie-sello {
  display: inline-block;
  margin-top: 14px;
  padding: 5px 11px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--color-text-dim);
}

.pie-col {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}

.pie-t {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  margin-bottom: 3px;
}

.pie-col a {
  font-size: 14px;
  color: var(--color-text-body);
  transition: color 0.18s ease;
}

.pie-col a:hover {
  color: var(--color-text-white);
}

.pie-legal {
  margin-top: 38px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border-subtle);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pie-legal p {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--color-text-dim);
  max-width: 900px;
  text-wrap: pretty;
}

.pie-legal b {
  color: var(--color-text-muted);
  font-weight: 600;
}

/* Footer */
.footer-container {
  border-top: 1px solid var(--color-border-subtle);
  padding: 34px 0 44px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
}