/* =============================================================================
   Los Caseros — Páginas estáticas (page.php)
   Encabezado on-brand + contenido de Gutenberg dentro de .lc-typography.
   Se encola solo en is_page(). Depende de tokens.css + base.css.
   Objetivo: que CUALQUIER página interna creada en WP se vea de marca sin tocar
   el editor (solo escribir bloques normales de Gutenberg).
   ============================================================================= */

.lc-page {
	padding-bottom: var(--lc-space-20);
}

/* ---------- Encabezado de página ---------- */
.lc-page__header {
	padding: var(--lc-space-16) 0 var(--lc-space-2);
	text-align: center;
}
.lc-page__title {
	font-family: var(--lc-font-display);
	font-weight: var(--lc-w-regular);
	font-size: clamp(2.4rem, 5.2vw, var(--lc-text-4xl));
	line-height: 1.02;
	letter-spacing: var(--lc-tracking-tight);
	color: var(--lc-green-800);
	margin: 0 auto var(--lc-space-2);
	max-width: 20ch;
}
.lc-page__header .lc-leaf-divider {
	color: var(--lc-green-700);
	margin: 6px auto 0;
	max-width: 420px;
}

/* ---------- Imagen destacada ---------- */
.lc-page__media {
	margin-top: var(--lc-space-8);
	margin-bottom: var(--lc-space-4);
}
.lc-page__thumb {
	display: block;
	width: 100%;
	max-height: 480px;
	object-fit: cover;
	border-radius: var(--lc-radius-lg);
	box-shadow: var(--lc-shadow-md);
}

/* ---------- Cuerpo: medida de lectura cómoda y centrada ---------- */
.lc-page__body {
	padding-top: var(--lc-space-10);
}
.lc-page__article {
	/* Ocupa todo el ancho disponible del .lc-container (decisión Leo). */
	width: 100%;
}

/* Espaciado vertical de los bloques (flujo limpio sin tocar el editor) */
.lc-page__article .entry-content > * {
	margin-top: 0;
	margin-bottom: var(--lc-space-5);
}
.lc-page__article .entry-content > *:last-child {
	margin-bottom: 0;
}

/* Encabezados internos: más aire arriba para separar secciones */
.lc-page__article .entry-content > h2,
.lc-page__article .entry-content > h3,
.lc-page__article .entry-content > h4 {
	margin-top: var(--lc-space-10);
}
.lc-page__article .entry-content > h2:first-child,
.lc-page__article .entry-content > h3:first-child,
.lc-page__article .entry-content > h4:first-child {
	margin-top: 0;
}

/* h2 de sección con el acento de marca (subrayado de hoja) */
.lc-page__article .entry-content h2 {
	font-family: var(--lc-font-body);
	font-weight: var(--lc-w-bold);
	font-size: var(--lc-text-2xl);
	color: var(--lc-green-800);
	letter-spacing: var(--lc-tracking-tight);
}

/* ---------- Listas ---------- */
.lc-page__article .entry-content ul,
.lc-page__article .entry-content ol {
	padding-left: 1.4em;
	color: var(--lc-ink-700);
	line-height: var(--lc-lh-relaxed);
}
.lc-page__article .entry-content li { margin-bottom: var(--lc-space-2); }
.lc-page__article .entry-content ul { list-style: none; padding-left: 0; }
.lc-page__article .entry-content ul > li {
	position: relative;
	padding-left: 1.6em;
}
.lc-page__article .entry-content ul > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 8px;
	height: 8px;
	border-radius: 50% 0 50% 50%;
	background: var(--lc-green-500);
	transform: rotate(45deg);
}
/* Listas ordenadas conservan numeración nativa */
.lc-page__article .entry-content ol { list-style: decimal; }
.lc-page__article .entry-content ol > li::marker {
	color: var(--lc-green-700);
	font-weight: var(--lc-w-bold);
}

/* ---------- Imágenes Gutenberg ---------- */
.lc-page__article .wp-block-image img,
.lc-page__article .entry-content img {
	border-radius: var(--lc-radius-md);
	height: auto;
}
.lc-page__article figure { margin: 0; }
.lc-page__article figcaption {
	font-size: var(--lc-text-sm);
	color: var(--lc-ink-500);
	text-align: center;
	margin-top: var(--lc-space-2);
}

/* Alineaciones de Gutenberg: permitir romper la medida de lectura */
.lc-page__article .alignwide {
	width: min(100%, 1040px);
	margin-inline: auto;
	max-width: none;
}
.lc-page__article .alignfull {
	width: 100vw;
	max-width: none;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
.lc-page__article .aligncenter { margin-inline: auto; }
.lc-page__article .alignleft { float: left; margin: 0 var(--lc-space-6) var(--lc-space-4) 0; }
.lc-page__article .alignright { float: right; margin: 0 0 var(--lc-space-4) var(--lc-space-6); }

/* ---------- Botones (wp-block-button) → pill verde de marca ---------- */
.lc-page__article .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lc-space-3);
}
.lc-page__article .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	background: var(--lc-green-800);
	color: var(--lc-fg-on-green);
	font-family: var(--lc-font-body);
	font-weight: var(--lc-w-semibold);
	font-size: var(--lc-text-base);
	padding: 14px 26px;
	border-radius: var(--lc-radius-pill);
	box-shadow: var(--lc-shadow-sm);
	text-decoration: none;
	transition: background var(--lc-dur-fast) var(--lc-ease), box-shadow var(--lc-dur-fast) var(--lc-ease);
}
.lc-page__article .wp-block-button__link:hover {
	background: var(--lc-green-900);
	color: var(--lc-fg-on-green);
	box-shadow: var(--lc-shadow-md);
}
.lc-page__article .wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--lc-green-800);
	box-shadow: inset 0 0 0 2px var(--lc-green-800);
}
.lc-page__article .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--lc-green-100);
	color: var(--lc-green-800);
}

/* ---------- Cita (wp-block-quote / blockquote) ---------- */
.lc-page__article blockquote,
.lc-page__article .wp-block-quote {
	margin: 0;
	padding: var(--lc-space-5) var(--lc-space-6);
	background: var(--lc-cream-200);
	border-left: 4px solid var(--lc-green-500);
	border-radius: 0 var(--lc-radius-md) var(--lc-radius-md) 0;
	font-style: normal;
}
.lc-page__article blockquote p { color: var(--lc-ink-900); }
.lc-page__article blockquote cite,
.lc-page__article .wp-block-quote cite {
	display: block;
	margin-top: var(--lc-space-2);
	font-size: var(--lc-text-sm);
	color: var(--lc-ink-500);
	font-style: normal;
}

/* ---------- Separador (wp-block-separator) → leaf hairline cálido ---------- */
.lc-page__article .wp-block-separator,
.lc-page__article hr {
	border: 0;
	height: 1px;
	background: var(--lc-border);
	margin-block: var(--lc-space-10);
	max-width: 100%;
}

/* ---------- Tabla (wp-block-table) ---------- */
.lc-page__article .wp-block-table table,
.lc-page__article table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--lc-text-sm);
	border-radius: var(--lc-radius-md);
	overflow: hidden;
	box-shadow: var(--lc-shadow-xs);
}
.lc-page__article th {
	background: var(--lc-green-100);
	color: var(--lc-green-900);
	font-weight: var(--lc-w-bold);
	text-align: left;
}
.lc-page__article th,
.lc-page__article td {
	padding: 12px 16px;
	border-bottom: 1px solid var(--lc-divider);
}
.lc-page__article tr:last-child td { border-bottom: 0; }
.lc-page__article tbody tr:nth-child(even) { background: var(--lc-cream-200); }

/* ---------- Columnas (wp-block-columns) ---------- */
.lc-page__article .wp-block-columns {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lc-space-6);
}
.lc-page__article .wp-block-column { flex: 1; min-width: 240px; }

/* ---------- Grupo / cover con fondo (wp-block-group con color) ---------- */
.lc-page__article .wp-block-group.has-background {
	border-radius: var(--lc-radius-lg);
	padding: var(--lc-space-8);
}

/* ---------- Embeds (mapas, video) ---------- */
.lc-page__article .wp-block-embed iframe,
.lc-page__article iframe {
	width: 100%;
	border: 0;
	border-radius: var(--lc-radius-md);
}

/* ---------- Enlace de edición (solo admin) ---------- */
.lc-page__edit {
	margin-top: var(--lc-space-8);
	font-size: var(--lc-text-sm);
}
.lc-page__edit .edit-link a { color: var(--lc-green-700); }

/* =============================================================================
   Botones con ícono Lucide (block styles del tema — ver inc/blocks.php)
   Reemplazan el emoji por un ícono de marca. Selectores globales (no scoped a
   .lc-page__article) para que apliquen también dentro del editor de Gutenberg
   (add_editor_style). El ícono se pinta con mask + currentColor → hereda el
   color del texto del botón.
   ============================================================================= */
.wp-block-button[class*="is-style-lc-"] > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	background: var(--lc-green-800);
	color: var(--lc-fg-on-green);
	font-family: var(--lc-font-body);
	font-weight: var(--lc-w-semibold);
	padding: 14px 26px;
	border-radius: var(--lc-radius-pill);
	box-shadow: var(--lc-shadow-sm);
	text-decoration: none;
	transition: background var(--lc-dur-fast) var(--lc-ease), box-shadow var(--lc-dur-fast) var(--lc-ease);
}
.wp-block-button[class*="is-style-lc-"] > .wp-block-button__link:hover {
	background: var(--lc-green-900);
	color: var(--lc-fg-on-green);
	box-shadow: var(--lc-shadow-md);
}
.wp-block-button[class*="is-style-lc-"] > .wp-block-button__link::before {
	content: "";
	width: 1.15em;
	height: 1.15em;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask: var(--lc-btn-ico) center / contain no-repeat;
	mask: var(--lc-btn-ico) center / contain no-repeat;
}

/* Cada variante define su ícono Lucide (mismos paths que inc/icons.php) */
.wp-block-button.is-style-lc-map > .wp-block-button__link {
	--lc-btn-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 1 1 18 0zM12 7a3 3 0 1 1 0 6 3 3 0 0 1 0-6'/%3E%3C/svg%3E");
}
.wp-block-button.is-style-lc-whatsapp > .wp-block-button__link {
	--lc-btn-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.5 13.5c-.3-.1-1.7-.8-2-.9s-.5 0-.7.2-.8.9-1 1.1-.3.2-.6 0-1.2-.4-2.3-1.4c-.8-.7-1.4-1.7-1.6-2s0-.3.1-.4.2-.3.4-.4.2-.3.3-.5 0-.4 0-.5-.6-1.6-.9-2.2c-.2-.5-.5-.4-.6-.4h-.5c-.2 0-.5.1-.7.4s-.9.9-.9 2.2.9 2.6 1 2.8 1.8 2.7 4.3 3.8c1.6.7 2.2.7 3 .6.5 0 1.5-.6 1.7-1.2s.2-1.1.2-1.2-.2-.2-.5-.3zM12 2a10 10 0 0 0-8.6 14.9L2 22l5.3-1.3A10 10 0 1 0 12 2z'/%3E%3C/svg%3E");
}
.wp-block-button.is-style-lc-bag > .wp-block-button__link {
	--lc-btn-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4zM3 6h18M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
}
.wp-block-button.is-style-lc-arrow > .wp-block-button__link {
	--lc-btn-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}
.wp-block-button.is-style-lc-mail > .wp-block-button__link {
	--lc-btn-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zM2 6l10 7 10-7'/%3E%3C/svg%3E");
}

/* =============================================================================
   Bloque de cifras "Nosotros" (.lc-about-stats — grupo con 4 columnas)
   Banda verde con números grandes (display) + etiqueta. El texto es editable;
   el estilo lo pone el tema. Global para que se vea también en el editor.
   ============================================================================= */
.lc-about-stats { background: none; box-shadow: none; padding: 0; }
.lc-about-stats .wp-block-columns { gap: var(--lc-space-5); align-items: stretch; }
.lc-about-stats .wp-block-column {
	background: var(--lc-cream-50);
	border: 1px solid var(--lc-border);
	border-radius: var(--lc-radius-lg);
	box-shadow: var(--lc-shadow-sm);
	padding: var(--lc-space-8) var(--lc-space-4);
	text-align: center;
	transition: transform var(--lc-dur-base) var(--lc-ease-organic), box-shadow var(--lc-dur-base) var(--lc-ease);
}
.lc-about-stats .wp-block-column:hover {
	transform: translateY(-4px);
	box-shadow: var(--lc-shadow-md);
}
/* Ícono Lucide arriba de cada cifra (en círculo verde claro), por posición */
.lc-about-stats .wp-block-column::before {
	content: "";
	display: block;
	width: 56px;
	height: 56px;
	margin: 0 auto var(--lc-space-4);
	border-radius: var(--lc-radius-pill);
	background-color: var(--lc-green-100);
	background-image: var(--lc-stat-ico);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 26px 26px;
}
.lc-about-stats .wp-block-column:nth-child(1) { --lc-stat-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E5B0C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E"); }
.lc-about-stats .wp-block-column:nth-child(2) { --lc-stat-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E5B0C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 3h15v13H1zM16 8h4l3 3v5h-7zM5.5 18.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zM18.5 18.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z'/%3E%3C/svg%3E"); }
.lc-about-stats .wp-block-column:nth-child(3) { --lc-stat-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E5B0C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4zM3 6h18M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E"); }
.lc-about-stats .wp-block-column:nth-child(4) { --lc-stat-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E5B0C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 1 1 18 0zM12 7a3 3 0 1 1 0 6 3 3 0 0 1 0-6'/%3E%3C/svg%3E"); }
.lc-about-stats h3 {
	font-family: var(--lc-font-display);
	font-weight: var(--lc-w-regular);
	font-size: clamp(2.4rem, 4.5vw, 3.2rem);
	line-height: 1;
	color: var(--lc-green-800);
	margin: 0 0 var(--lc-space-1);
}
.lc-about-stats p {
	margin: 0;
	color: var(--lc-ink-500);
	text-transform: uppercase;
	letter-spacing: var(--lc-tracking-wide);
	font-size: var(--lc-text-xs);
	font-weight: var(--lc-w-bold);
}

/* =============================================================================
   Bloque "Visión" (.lc-about-vision) — declaración centrada en card crema
   ============================================================================= */
.lc-about-vision {
	background: var(--lc-green-800);
	border-radius: var(--lc-radius-lg);
	padding: var(--lc-space-16) var(--lc-space-10);
	text-align: center;
	box-shadow: var(--lc-shadow-md);
}
/* doble selector: el simple cubre el editor; el de .lc-page__article gana en el
   front sobre la regla genérica de h2 de sección (más específica). */
.lc-about-vision h2,
.lc-page__article .lc-about-vision h2 {
	color: var(--lc-cream-50);
	font-family: var(--lc-font-display);
	font-weight: var(--lc-w-regular);
	font-size: clamp(2rem, 4vw, 2.8rem);
	margin-bottom: var(--lc-space-4);
}
.lc-about-vision p {
	max-width: 60ch;
	margin-inline: auto;
	font-size: var(--lc-text-md);
	color: var(--lc-green-200);
	line-height: var(--lc-lh-relaxed);
}

/* =============================================================================
   Responsive
   ============================================================================= */
@media (max-width: 760px) {
	.lc-about-vision { padding: var(--lc-space-8) var(--lc-space-5); }
	.lc-page__header { padding-top: var(--lc-space-10); }
	.lc-page__body { padding-top: var(--lc-space-6); }
	.lc-page__article .wp-block-columns { gap: var(--lc-space-4); }
	.lc-page__article .alignleft,
	.lc-page__article .alignright { float: none; margin: 0 0 var(--lc-space-4); }
	/* En móvil las 4 cifras en 2×2 (grid ignora el flex-basis:100% que WP fuerza) */
	.lc-about-stats .wp-block-columns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--lc-space-3); }
	.lc-about-stats .wp-block-column { width: auto; padding: var(--lc-space-6) var(--lc-space-3); }
	.lc-about-stats .wp-block-column::before { width: 48px; height: 48px; margin-bottom: var(--lc-space-3); background-size: 22px 22px; }
}