/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUT — el "marco" de las páginas: anchos, títulos y columnas de contenido.
   (El header y el footer tienen su propio archivo.)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Páginas hechas con el editor de bloques ─────────────────────────────── */
.pagina-cabecera {
	padding: clamp(3rem, 7vw, 5.5rem) var(--gutter) clamp(1.5rem, 3vw, 2.25rem);
}
/* El título ocupa el mismo ancho que el contenido de abajo, así quedan alineados. */
.pagina-titulo {
	max-width: var(--maxw-narrow);
	margin: 0 auto;
}

/* Columna de lectura: el texto no se estira de lado a lado en pantallas grandes. */
.contenido-bloques {
	padding: 0 var(--gutter) clamp(4rem, 8vw, 7rem);
}
.contenido-bloques > * {
	max-width: var(--maxw-narrow);
	margin-inline: auto;
}
/* Bloques marcados como "ancho amplio" en el editor. */
.contenido-bloques > .alignwide {
	max-width: var(--maxw);
}
/* Bloques marcados como "ancho completo": ocupan toda la pantalla. */
.contenido-bloques > .alignfull {
	max-width: none;
	margin-inline: calc(var(--gutter) * -1);
}

/* "Pagar un pedido" (es parte de Pagar): título y contenido al ancho amplio.
   Carrito, Pagar y Pedido recibido usan su propia plantilla (plantilla-compra.php). */
.pagina-ancha .pagina-titulo,
.pagina-ancha .contenido-bloques > * {
	max-width: var(--maxw);
}

/* Imágenes alineadas a un costado dentro del texto. */
.contenido-bloques .alignleft  { float: left;  margin: .3em 1.5em 1em 0; }
.contenido-bloques .alignright { float: right; margin: .3em 0 1em 1.5em; }
.contenido-bloques .aligncenter { margin-inline: auto; }

/* ── Páginas de WooCommerce que listan productos (ej: búsqueda de productos) ──
   La Tienda y las categorías redirigen (inc/tienda/redirecciones.php); la ficha
   anula este marco con .woo-marco-ficha (ficha.css). */
.woo-marco {
	max-width: var(--maxw);
	margin-inline: auto;
	padding: clamp(2rem, 5vw, 3.5rem) var(--gutter) clamp(4rem, 8vw, 7rem);
}

/* ── Página 404 (404.php) ────────────────────────────────────────────────── */
.pagina-404 {
	max-width: 640px;
	margin-inline: auto;
	padding: clamp(4.5rem, 12vw, 8.5rem) var(--gutter);
	text-align: center;
}
.pagina-404 .lead { margin-top: 1rem; }
.pagina-404-acciones { display: flex; justify-content: center; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }