/* =========================================================
   FILIO.CSS
   Layout fractal y estructura de contenido
   (NO define body, NO define colores globales)
   ========================================================= */


/* ===========================
   GRID FRACTAL 2 × 3
   Ancho máximo: 600px
   =========================== */

figure.grid-2x3 {
  max-width: 600px;
  margin: 30px auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  box-sizing: border-box;
  justify-items: center;
}

figure.grid-2x3 img {
  width: 100%;
  max-width: 290px; /* 2 × 290 + gap ≈ 600 */
  height: auto;
  display: block;
}


/* ===========================
   TEXTO Y BLOQUES SEMÁNTICOS
   =========================== */

.texto {
  text-align: justify;
  margin: 0 7px 1em 10px;
}

.subtitulo {
  text-align: left;
  margin: 10px 0 4px 10px;
}


/* ===========================
   LISTAS ARGUMENTALES
   =========================== */

.lista-argumentos {
  margin: 0 0 1em 40px;
}

.lista-argumentos li {
  margin-bottom: 0.3em;
}


/* ===========================
   IMÁGENES CON BORDE
   =========================== */

img[border],
.img-borde {
  border: 1px solid #666;
}


/* ===========================
   CONTENEDOR CENTRAL
   (layout, no color conceptual)
   =========================== */

.page {
  width: 600px;
  margin: 0 auto;
  overflow: hidden;
}
/* Fondo del texto largo fuera de tablas */
/* ===========================
   TEXTO LARGO – CONTENCIÓN
   =========================== */

.texto-largo {
  width: 600px;
  margin: 0 auto;
  background: #333;
  padding: 10px;
  box-sizing: border-box;
}

/* asegurar que nada se escape */
.texto-largo * {
  max-width: 100%;
  box-sizing: border-box;
}