/* ===================================================================
   texto_imagen.css — bloque narrativo alternado
   Variantes: estandar · imagen_grande · imagen_sangrada
   =================================================================== */

.ti__rejilla {
  display: grid;
  gap: var(--e-8);
  align-items: center;
}

.ti__texto { max-width: 34rem; }

.ti__titulo {
  font-size: clamp(var(--paso-2), 3vw, var(--paso-3));
  font-stretch: 104%;
}

.ti__cuerpo {
  margin-top: var(--e-4);
  color: var(--tenue);
  font-size: var(--paso-0);
  line-height: 1.7;
}

.ti__cuerpo p + p { margin-top: var(--e-4); }

.ti__cuerpo strong { color: var(--sobre-fondo); font-weight: 600; }

.ti__cuerpo ul {
  margin: var(--e-4) 0 0;
  padding-left: 0;
  list-style: none;
}

.ti__cuerpo li {
  position: relative;
  padding-left: var(--e-5);
  margin-top: var(--e-2);
}

.ti__cuerpo li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 10px;
  height: 1px;
  background: var(--color-acento);
}

.ti__accion { margin-top: var(--e-6); }

.ti__medio { position: relative; }

.ti__imagen {
  width: 100%;
  border-radius: var(--radio-medio);
  border: 1px solid var(--linea);
}

/* ── Variantes ─────────────────────────────────────────────────── */

.ti--estandar .ti__rejilla {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ti--imagen_grande .ti__rejilla {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.35fr);
}

/* La imagen se sale del contenedor hacia el borde de la pantalla.
   Es el único recurso de la hoja que rompe la retícula, y por eso
   conviene usarlo una sola vez por página. */
.ti--imagen_sangrada .ti__rejilla {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--e-8);
}

.ti--imagen_sangrada .ti__imagen {
  border-radius: 0;
  border-inline-end: 0;
}

.ti--imagen_sangrada .ti__medio {
  margin-inline-end: calc((100vw - min(100vw, var(--contenido))) / -2 - var(--e-5));
}

/* Lado invertido: el texto pasa a la derecha. Con `order` en lugar de
   `direction` para no invertir la lectura del contenido interno. */
.ti--lado-izquierda .ti__texto { order: 2; }
.ti--lado-izquierda .ti__medio { order: 1; }

.ti--lado-izquierda.ti--imagen_sangrada .ti__medio {
  margin-inline-end: 0;
  margin-inline-start: calc((100vw - min(100vw, var(--contenido))) / -2 - var(--e-5));
}

.ti--lado-izquierda.ti--imagen_sangrada .ti__imagen {
  border-inline-end: 1px solid var(--linea);
  border-inline-start: 0;
}

.ti--lado-izquierda.ti--imagen_grande .ti__rejilla {
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
}

.ti--lado-izquierda .ti__texto { margin-inline-start: auto; }

@media (max-width: 900px) {
  .ti__rejilla { grid-template-columns: 1fr !important; gap: var(--e-6); }
  .ti__texto { max-width: none; order: 1 !important; }
  .ti__medio { order: 2 !important; margin-inline: 0 !important; }
  .ti--imagen_sangrada .ti__imagen { border: 1px solid var(--linea); }
}