/* ============================================================
   simple-pages.css — Capa de soporte para páginas simples
   editadas con Gutenberg (trabaja-con-nosotros, condiciones
   generales, futuras páginas de contenido).

   Se encola SOLO en is_page(). No toca home, tienda, producto,
   carrito ni checkout (esos tienen sus propios estilos).

   Alinea los bloques core de Gutenberg al sistema de diseño
   del tema: navy en headings fuera de covers, tipografía en
   rem/clamp, imágenes contenidas, columnas estables en móvil.

   Convención de especificidad: los valores "por defecto" van
   dentro de :where() para que cualquier color/tamaño elegido
   explícitamente en el editor siempre gane.
   ============================================================ */

/* ---------- Headings fuera de covers → navy ---------- */
/* :not(.has-text-color) respeta lo elegido en el editor.
   Los covers usan fondos navy/azul/gradient: dentro de ellos
   el texto se mantiene claro (regla posterior). */
:where(.entry-content) .wp-block-heading:not(.has-text-color) {
	color: var(--wp--preset--color--navy, #172044);
}

.wp-block-cover .wp-block-heading {
	color: #ffffff;
}

/* ---------- Párrafos de contenido ---------- */
/* Solo el color por defecto; los párrafos con color explícito
   del editor no se tocan. Los covers quedan en blanco. */
:where(.entry-content) .wp-block-paragraph:not(.has-text-color) {
	color: var(--innova-text-dark, #172044);
	line-height: 1.65;
}

.wp-block-cover .wp-block-paragraph {
	color: #ffffff;
}

/* ---------- Tamaños tipográficos del sistema ---------- */
/* xx-large de Gutenberg puede crecer mucho en móvil: se acota. */
.entry-content .wp-block-heading.has-xx-large-font-size {
	font-size: clamp(2rem, 1.2rem + 3.5vw, 3.25rem);
	line-height: 1.15;
}

.entry-content .wp-block-heading.has-x-large-font-size {
	font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.5rem);
	line-height: 1.2;
}

/* ---------- Imágenes contenidas ---------- */
.entry-content .wp-block-image img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
}

/* ---------- Columnas (secciones 2 columnas) ---------- */
/* Gap coherente con el sistema y stack limpio en móvil. */
.entry-content .wp-block-columns {
	gap: 2rem;
}

@media (max-width: 781px) {
	.entry-content .wp-block-columns {
		gap: 1.5rem;
	}
}

/* ---------- Botones de Gutenberg (fill) → sistema ámbar ---------- */
/* El color ya lo cubre homepage-blocks.css (global); aquí solo
   se asegura el radio del sistema para botones sueltos. */
.entry-content .wp-block-button__link {
	border-radius: 30px;
}

/* ---------- Secciones texto|imagen (bloques de Columnas) ---------- */
/* Clase a aplicar en el BLOQUE COLUMNAS (Avanzado → clases CSS):
   .media-first  → en móvil la columna que contiene la imagen
                   salta primero (orden de lectura imagen → texto).
                   :has() requiere Safari 15.4+; en iOS ≤ 15.3 la
                   sección conserva el orden del editor (sin regresión).
   .row-reverse  → en escritorio invierte el orden visual (imagen a
                   la derecha) manteniendo la imagen primera en el DOM,
                   así el stack móvil sale imagen → texto siempre.
                   Compatible con todos los navegadores. */
@media (max-width: 781px) {
	.entry-content .media-first > .wp-block-column:has(.wp-block-image) {
		order: -1;
	}
}

@media (min-width: 782px) {
	.entry-content .row-reverse.wp-block-columns {
		flex-direction: row-reverse;
	}
}

/* ---------- Listas ---------- */
.entry-content .wp-block-list {
	padding-left: 1.4em;
}

.entry-content .wp-block-list li {
	line-height: 1.65;
}

.entry-content .wp-block-list li::marker {
	color: var(--innova-blue, #258cff);
}