/*
 * Libres para Amar — estilos de soporte.
 * Los tokens (color, tipografía, espaciado) viven en theme.json.
 * Aquí solo va lo que theme.json no cubre: cabecera, tarjetas, acordeón,
 * estados de foco/accesibilidad y ajustes responsive.
 */

/* ---------- Base / accesibilidad ---------- */
:where(img) { max-width: 100%; height: auto; }

/* ---------- Grado de imagen unificado ----------
   La fototeca mezcla capturas propias con banco de imágenes de distintas
   fuentes/épocas; este grado sutil (leve boost de saturación/contraste, sin
   viñeta ni tinte de color) hace que todas se sientan parte del mismo
   sistema visual en vez de imágenes sueltas pegadas encima del diseño. */
.lpa-card-img,
.lpa-post-img,
.lpa-news-card .wp-block-post-featured-image img,
.lpa-product-img,
.lpa-founder-photo img,
.lpa-ffn-photo img,
.lpa-rotador-img {
	filter: saturate(1.08) contrast(1.03);
}

/* Las secciones de ancho completo controlan su ritmo vertical con padding
   propio (ver DESIGN.md), no con el blockGap por defecto de WordPress —
   ese margen extra dejaba una rendija del fondo de la página entre
   secciones contiguas de color oscuro (ej. cta-final → footer). */
.wp-block-group.alignfull { margin-top: 0; margin-bottom: 0; }

a:focus-visible,
button:focus-visible,
summary:focus-visible,
.wp-block-button__link:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 3px solid var(--wp--preset--color--azul);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Salto al contenido para teclado/lectores de pantalla */
.skip-link.screen-reader-text {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	background: var(--wp--preset--color--azul);
	color: #fff;
	padding: .75rem 1rem;
	border-radius: 0 0 8px 0;
}
.skip-link.screen-reader-text:focus { left: 0; }

/* ---------- Cabecera ---------- */
.lpa-header {
	position: sticky;
	top: 0;
	z-index: 100;
	border-bottom: 1px solid var(--wp--preset--color--borde);
	transition: box-shadow .2s ease;
}
.lpa-header.is-scrolled { box-shadow: var(--wp--preset--shadow--suave); }
.lpa-header .wp-block-site-title a {
	text-decoration: none;
	color: var(--wp--preset--color--ink);
}
.lpa-nav a { text-decoration: none; color: var(--wp--preset--color--ink); }
.lpa-nav a:hover { color: var(--wp--preset--color--azul); }
.lpa-header-ctas { margin-left: .25rem; }

/* ---------- Header transparente sobre el hero (solo home) ----------
   En / el header flota sin fondo sobre la foto del hero y se solidifica a
   blanco en cuanto `.is-scrolled` se activa (misma clase que ya pone
   main.js). El velo `ink` del cover es parejo en OPACIDAD pero no en
   luminosidad resultante — sobre una zona clara de la foto (ej. un sofá o
   una ventana) el 65% de velo no basta para que texto/iconos blancos se
   lean bien. Por eso el header lleva su propio scrim independiente
   (::before, gradiente descendente) que garantiza contraste ahí sin
   depender de qué haya exactamente detrás en cada carga de página. El
   logo además se queda sobre una placa blanca propia: sus colores fijos
   (tinta/rosado) no son recoloreables por CSS. */
body.home .lpa-header {
	position: fixed;
	inset-inline: 0;
	background: transparent;
	border-bottom-color: transparent;
	transition: background-color .3s ease, box-shadow .3s ease, border-color .3s ease;
}
body.home .lpa-header:not(.is-scrolled) {
	background: transparent;
}
body.home .lpa-header:not(.is-scrolled)::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 170px;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(10,16,28,.6) 0%, rgba(10,16,28,.32) 55%, transparent 100%);
}
body.home .lpa-header:not(.is-scrolled) .lpa-header-brand {
	background: rgba(255, 255, 255, 0.92);
	border-radius: 999px;
	padding: .35rem .9rem;
	box-shadow: var(--wp--preset--shadow--suave);
}
body.home .lpa-header:not(.is-scrolled) .lpa-nav a,
body.home .lpa-header:not(.is-scrolled) .lpa-header-actions,
body.home .lpa-header:not(.is-scrolled) .lpa-header-actions svg {
	color: #fff;
	fill: currentColor;
}
body.home .lpa-header:not(.is-scrolled) .lpa-nav a:hover {
	color: rgba(255, 255, 255, 0.75);
}
body.home .lpa-header:not(.is-scrolled) .lpa-lang-switch {
	color: #fff !important;
	border-color: rgba(255, 255, 255, 0.5);
}
body.home .lpa-header:not(.is-scrolled) .lpa-lang-switch:hover {
	background: rgba(255, 255, 255, 0.15);
	border-color: rgba(255, 255, 255, 0.5);
}
/* El overlay del menú móvil es un panel blanco sólido (siempre, esté o no
   transparente el header) — sin esto los enlaces heredaban el blanco del
   header flotante y quedaban blanco-sobre-blanco, invisibles. */
body.home .lpa-header .wp-block-navigation__responsive-container.is-menu-open a {
	color: var(--wp--preset--color--ink) !important;
}
body.home .lpa-header .wp-block-navigation__responsive-container.is-menu-open a:hover {
	color: var(--wp--preset--color--azul) !important;
}
body.home .lpa-header.is-scrolled {
	position: fixed;
	background: var(--wp--preset--color--base);
	border-bottom-color: var(--wp--preset--color--borde);
}
body.home .lpa-header.is-scrolled .lpa-header-brand {
	background: transparent;
	box-shadow: none;
	padding: 0;
}
/* El header ya no reserva su propio renglón en flujo normal (es fixed):
   el hero ocupa desde el borde superior real de la ventana y el header
   queda flotando encima por z-index. En el resto de páginas (sin hero
   fotográfico) el header sigue en flujo normal, sticky, como antes. */

/* ---------- Submenú de navegación: jerarquía visual clara ----------
   Sin esto, los hijos de un navigation-submenu se ven idénticos a los
   ítems de primer nivel (mismo tamaño/peso), y en el overlay móvil el
   ítem más largo ("CFAMI: formación y certificación") se parte en 2
   líneas y queda con el borde izquierdo muy adentro respecto a sus
   hermanos de una sola línea — todo el bloque se lee desordenado. */
.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	color: var(--wp--preset--color--ink-soft);
}
.wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--azul);
}
@media (max-width: 600px) {
	.wp-block-navigation__responsive-container .wp-block-navigation__submenu-container {
		border-right: 2px solid var(--wp--preset--color--borde);
		padding-right: .75rem;
		margin-right: .25rem;
	}
	.wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		max-width: 220px;
		margin-left: auto;
	}
}

/* ---------- Header: fila principal (logo + acciones) ---------- */
.lpa-header-row { flex-wrap: nowrap; }
.lpa-header-brand { flex-shrink: 0; }
.lpa-header-brand .wp-block-site-logo img {
	height: 48px;
	width: auto;
	display: block;
}
.lpa-header-actions {
	flex-wrap: nowrap;
	align-items: center;
	gap: clamp(.5rem, 2vw, 1rem);
	min-width: 0;
}
/* Neutraliza el <p> que wpautop agrega al shortcode [lpa_lang_switch] */
.lpa-header-actions p { margin: 0; line-height: 1; }
.lpa-header-actions .lpa-header-ctas { flex-shrink: 0; }

@media (max-width: 600px) {
	.lpa-header-brand .wp-block-site-logo img { height: 36px; }
	.lpa-header-actions { gap: .4rem; }
	.lpa-header-ctas .wp-block-button__link {
		padding: .45rem .8rem !important;
		font-size: var(--wp--preset--font-size--small);
	}
}

/* Pantallas muy angostas (móviles comunes, 360-420px): con logo + hamburguesa
   + cuenta + carrito + EN + CTA todos visibles a la vez, hay que recortar
   paddings para que quepan sin que el CTA se corte fuera del viewport. */
@media (max-width: 420px) {
	.lpa-header-brand .wp-block-site-logo img { height: 30px; }
	.lpa-header-actions { gap: .3rem; }
	.lpa-header-actions .wp-block-woocommerce-customer-account a,
	.lpa-header-actions .wc-block-mini-cart__button {
		padding: 4px;
	}
	.lpa-header-actions .wp-block-woocommerce-customer-account svg,
	.lpa-header-actions .wc-block-mini-cart__icon {
		width: 20px;
		height: 20px;
	}
	.lpa-lang-switch { min-width: 1.6rem !important; padding: .2rem .45rem !important; }
	.lpa-header-ctas .wp-block-button__link { padding: .35rem .6rem !important; }
}

/* El menú del core solo pasa a overlay por debajo de 600px; con 6 enlaces
   principales + submenú no cabe horizontal hasta pasados los 1365px (ni
   siquiera comprimiendo el gap), así que se extiende el overlay hasta ahí
   (!important necesario para ganarle al CSS del propio bloque core, que
   fija display:none/block a 600px). */
@media (min-width: 600px) and (max-width: 1535px) {
	.lpa-nav.wp-block-navigation .wp-block-navigation__responsive-container-open {
		display: flex !important;
	}
	.lpa-nav.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}
}

/* A partir de 1536px el menú vuelve a ser horizontal; el gap fluido (clamp
   hasta 1.6rem) no deja espacio suficiente con 6 ítems + submenú, así que
   se fija un gap más compacto. */
@media (min-width: 1536px) {
	.lpa-nav.wp-block-navigation .wp-block-navigation__container {
		gap: .4rem !important;
	}
}

/* ---------- Selector de idioma (EN nativo, sin plugin) ---------- */
.lpa-lang-switch {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
	padding: .3rem .6rem;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--borde);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none !important;
	color: var(--wp--preset--color--ink) !important;
}
.lpa-lang-switch:hover { background: var(--wp--preset--color--azul-claro); border-color: var(--wp--preset--color--azul-claro); }

/* ---------- Botones: profundidad ----------
   theme.json define forma/color/tipografía; aquí va la respuesta física al
   tacto que theme.json no puede expresar (transform, timing, sombra de
   color). Cada botón lleva la sombra de su propio color de fondo — el CTA
   es siempre el elemento de mayor prioridad de su bloque, así que una
   sombra en reposo (no solo en hover) está justificada. */
.wp-block-button:not(.is-style-fantasma) .wp-block-button__link {
	box-shadow: var(--wp--preset--shadow--azul);
	transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s cubic-bezier(.2,.8,.2,1), background-color .2s ease;
}
.wp-block-button:not(.is-style-fantasma) .wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: var(--wp--preset--shadow--alta);
}
.wp-block-button:not(.is-style-fantasma) .wp-block-button__link:active {
	transform: translateY(0);
	box-shadow: var(--wp--preset--shadow--azul);
}
.wp-block-button .wp-block-button__link.has-rosado-background-color {
	box-shadow: var(--wp--preset--shadow--rosado);
}

/* ---------- Botones: variantes ---------- */
.wp-block-button.is-small .wp-block-button__link {
	padding: .55rem 1.1rem;
	font-size: var(--wp--preset--font-size--small);
}
.is-style-fantasma .wp-block-button__link,
.wp-block-button.is-style-fantasma .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--azul);
	box-shadow: inset 0 0 0 2px currentColor;
	transition: background-color .2s ease, transform .2s ease;
}
.is-style-fantasma .wp-block-button__link:hover {
	background: var(--wp--preset--color--azul-claro);
	transform: translateY(-2px);
}

/* ---------- Tarjetas (is-style-tarjeta en group/column) ----------
   Sin borde de perímetro sobre fondo blanco: la elevación por sombra basta
   para separarla, y el borde 1px se leía como wireframe/plano de boceto.
   Sobre `surface` sí se conserva un borde suave, porque ahí la sombra casi
   no se distingue del fondo. */
.is-style-tarjeta {
	background: var(--wp--preset--color--base);
	border-radius: 18px;
	padding: clamp(1.25rem, 3vw, 1.75rem);
	box-shadow: var(--wp--preset--shadow--suave);
	transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s cubic-bezier(.2,.8,.2,1);
}
.is-style-seccion {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: 22px;
	padding: clamp(1.5rem, 4vw, 3rem);
}
/* Tarjetas con enlace al final: elevación más notoria al pasar el cursor */
.lpa-card.is-style-tarjeta:hover,
.lpa-event.is-style-tarjeta:hover,
.lpa-resource.is-style-tarjeta:hover,
.lpa-product.is-style-tarjeta:hover {
	transform: translateY(-6px);
	box-shadow: var(--wp--preset--shadow--alta);
}
.lpa-card-icon { margin: 0 0 .25rem; line-height: 1; }

/* ---------- Cifras / pasos ---------- */
.lpa-stat-num, .lpa-step-num { margin: 0; line-height: 1; }
.lpa-step-num { opacity: .9; }

/* ---------- Etiquetas (tags) ---------- */
.lpa-tag {
	margin: 0 0 .35rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
}

/* ---------- Producto: media ---------- */
.lpa-product-media {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	margin-bottom: 1rem;
	font-size: 2.5rem;
}

/* ---------- Listas ---------- */
.lpa-check-list { list-style: none; padding-left: 0; }
.lpa-check-list li {
	position: relative;
	padding-left: 1.9rem;
	margin-bottom: .6rem;
}
.lpa-check-list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	width: 1.3rem; height: 1.3rem;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--wp--preset--color--azul-claro);
	color: var(--wp--preset--color--azul);
	border-radius: 50%;
	font-size: .8rem;
	font-weight: 700;
}

/* ---------- Acordeón FAQ (core/details) ---------- */
.lpa-faq .wp-block-details { margin: 0; }
.wp-block-details.is-style-tarjeta { padding: 1rem 1.25rem; }
.wp-block-details summary {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--titulo);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--large);
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after {
	content: "+";
	color: var(--wp--preset--color--azul);
	font-size: 1.5rem;
	line-height: 1;
	transition: transform .2s ease;
}
.wp-block-details[open] summary::after { content: "–"; }

/* ---------- Pie de página ---------- */
.lpa-footer a { color: #fff; text-decoration: none; }
.lpa-footer a:hover { text-decoration: underline; }
.lpa-footer-list { list-style: none; padding-left: 0; }
.lpa-footer-list li { margin-bottom: .55rem; }
.lpa-newsletter-placeholder {
	border: 1px dashed rgba(255, 255, 255, 0.14);
	border-radius: 12px;
	padding: .85rem 1rem;
	color: var(--wp--preset--color--plata);
}
.lpa-newsletter-placeholder a {
	color: var(--wp--preset--color--base);
	text-decoration: underline;
}

/* ---------- Vídeo institucional (placeholder) ---------- */
.lpa-video-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .85rem;
	margin-top: var(--wp--preset--spacing--m);
	padding: clamp(2.5rem, 8vw, 5rem) 1rem;
	border: 1px dashed rgba(255, 255, 255, 0.14);
	border-radius: 18px;
	color: var(--wp--preset--color--plata);
}
.lpa-video-placeholder-icon { color: var(--wp--preset--color--plata); }
.lpa-video-placeholder p {
	margin: 0;
	font-family: var(--wp--preset--font-family--titulo);
	font-weight: 600;
}

/* ---------- Hero ----------
   Foto real a pantalla + velo oscuro para legibilidad; las tarjetas de
   camino flotan superpuestas sobre el borde inferior de la foto (margen
   negativo + sombra alta), la técnica editorial que da sensación de capas/
   profundidad en vez de bloques apilados sin relación entre sí. */
.lpa-hero .lpa-path {
	height: 100%;
	display: flex;
	flex-direction: column;
}
.lpa-hero-cover.wp-block-cover {
	display: flex;
	align-items: center;
}
.lpa-hero-cover .wp-block-cover__inner-container {
	width: min(100%, 760px);
	margin-inline: auto;
	padding-inline: clamp(1.1rem, 5vw, 2rem);
}
.lpa-hero-paths-wrap {
	position: relative;
	z-index: 2;
	margin-top: clamp(-4.5rem, -9vw, -2.5rem);
}
.lpa-hero-paths-wrap .lpa-path-card {
	box-shadow: var(--wp--preset--shadow--alta);
}

/* ---------- Banda oscura con luz ambiental ----------
   Opt-in (className="lpa-band-dark") para secciones de fondo `ink`/
   `azul-oscuro`: añade una luz radial muy sutil arriba y una segunda,
   de color de marca, abajo — evita que el fondo oscuro se sienta un
   rectángulo plano y le da la profundidad "editorial" que el sistema no
   tenía. El contenido va siempre encima vía z-index. */
.lpa-band-dark {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}
.lpa-band-dark::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	border-radius: inherit;
	background-image:
		radial-gradient(ellipse 70% 55% at 50% -15%, rgba(255,255,255,.10), transparent 60%),
		radial-gradient(circle at 88% 96%, rgba(207,48,112,.16), transparent 45%),
		radial-gradient(circle at 6% 92%, rgba(47,95,176,.14), transparent 40%);
}
.lpa-band-dark > * { position: relative; z-index: 1; }

/* ---------- Revelado al hacer scroll ----------
   La clase que oculta (`opacity:0`) solo existe bajo `.js-reveal-ready`,
   añadida por main.js — sin JS, o con `prefers-reduced-motion`, main.js no
   la añade y este bloque nunca oculta nada (progressive enhancement). */
.js-reveal-ready [data-reveal] {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1);
}
.js-reveal-ready [data-reveal].is-revealed {
	opacity: 1;
	transform: none;
}

/* ---------- Preferencias de movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
	* { animation-duration: .001ms !important; transition-duration: .001ms !important; }
	.js-reveal-ready [data-reveal] { opacity: 1; transform: none; }
}

/* ============================================================
   FASE 7: Sectores, Blog, Tienda dinámica, Redes, Noticias
   ============================================================ */

/* ---------- Estado vacío (shortcodes sin contenido todavía) ---------- */
.lpa-empty {
	margin-top: var(--wp--preset--spacing--m);
	padding: clamp(1.75rem, 4vw, 2.5rem);
	border: 1px dashed var(--wp--preset--color--borde);
	border-radius: 18px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink-soft);
	text-align: center;
}
.lpa-empty a { color: var(--wp--preset--color--azul); }

/* ---------- Grid de tarjetas (shortcodes: lpa_eventos, lpa_recursos, etc.) ---------- */
.lpa-grid {
	display: grid;
	gap: var(--wp--preset--spacing--m);
	margin-top: var(--wp--preset--spacing--m);
}
.lpa-grid.lpa-grid-3 {
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}
.lpa-grid.lpa-grid-2 {
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}
.lpa-card-img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	border-radius: 12px 12px 0 0;
	display: block;
}
.lpa-card-media { display: block; margin-bottom: .75rem; }

/* ---------- Sectores de Audiencia (split 50/50) ---------- */
.lpa-sectores .wp-block-columns { gap: 0 !important; }
.lpa-sector {
	min-height: clamp(360px, 45vw, 520px);
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.lpa-check-list--light li { color: #fff; }
.lpa-check-list--light li::before {
	background: rgba(255, 255, 255, 0.22);
	color: #fff;
}

/* ---------- Producto WooCommerce (tarjeta dinámica) ---------- */
.lpa-product-thumb {
	display: block;
	overflow: hidden;
	border-radius: 12px;
	margin-bottom: 1rem;
	aspect-ratio: 4 / 3;
}
.lpa-product-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.lpa-product:hover .lpa-product-img { transform: scale(1.06); }
.lpa-product-price {
	font-weight: 700;
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--ink);
	margin: .15rem 0 .75rem;
}

/* ---------- Blog Noticias (home — layout magazine) ---------- */
.lpa-blog-noticias {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--m);
	margin-top: var(--wp--preset--spacing--m);
}
.lpa-blog-noticias .lpa-post-card--featured { grid-row: span 2; }

@media (max-width: 781px) {
	.lpa-blog-noticias {
		grid-template-columns: 1fr;
	}
	.lpa-blog-noticias .lpa-post-card--featured { grid-row: span 1; }
}

.lpa-post-card.is-style-tarjeta { padding: 0; overflow: hidden; }

.lpa-post-thumb {
	display: block;
	overflow: hidden;
	line-height: 0;
}
.lpa-post-img {
	width: 100%;
	height: 220px;
	object-fit: cover;
	display: block;
	transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.lpa-post-card--featured .lpa-post-img { height: clamp(240px, 35vw, 360px); }
.lpa-post-card:hover .lpa-post-img { transform: scale(1.06); }

.lpa-post-body { padding: clamp(1rem, 2.5vw, 1.4rem); }
.lpa-post-body .lpa-tag {
	display: inline-block;
	text-decoration: none;
	margin-bottom: .4rem;
}
.lpa-post-body h3 { margin-top: .1rem; margin-bottom: .35rem; }
.lpa-post-body h3 a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
.lpa-post-body h3 a:hover {
	color: var(--wp--preset--color--azul);
	text-decoration: underline;
}
.lpa-post-date {
	margin-top: .5rem;
	display: block;
}

/* ---------- Blog Archive (index.html — grid magazine) ---------- */
.lpa-cat-pills {
	list-style: none;
	padding: 0;
	margin: var(--wp--preset--spacing--s) 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}
.lpa-cat-pills li { margin: 0; }
.lpa-cat-pills li a {
	display: inline-block;
	padding: .3rem .9rem;
	border-radius: 999px;
	background: var(--wp--preset--color--azul-claro);
	color: var(--wp--preset--color--azul-oscuro);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
	transition: background .15s, color .15s;
}
.lpa-cat-pills li a:hover,
.lpa-cat-pills li a[aria-current="page"] {
	background: var(--wp--preset--color--azul);
	color: #fff;
}

.lpa-news-card.is-style-tarjeta { padding: 0; overflow: hidden; }

.lpa-news-card .wp-block-post-featured-image { margin: 0; line-height: 0; }
.lpa-news-card .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: 200px;
	object-fit: cover;
	border-radius: 12px 12px 0 0;
	transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.lpa-news-card:hover .wp-block-post-featured-image img { transform: scale(1.06); }

.lpa-news-card-inner { overflow: hidden; }

.lpa-news-card .wp-block-post-terms {
	display: block;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: .06em;
	margin: 0 0 .35rem;
}
.lpa-news-card .wp-block-post-terms a {
	color: var(--wp--preset--color--azul);
	text-decoration: none;
}
.lpa-news-card .wp-block-post-terms a:hover { text-decoration: underline; }

.lpa-news-card .wp-block-post-title { margin: 0 0 .35rem; }
.lpa-news-card .wp-block-post-title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
.lpa-news-card .wp-block-post-title a:hover {
	color: var(--wp--preset--color--azul);
	text-decoration: underline;
}
.lpa-news-card .wp-block-post-date { margin-top: .5rem; }

/* ============================================================
   Reestructuración: recorrido, modelo anual, fundadores, siguiente paso
   ============================================================ */

/* ---------- Recorrido de transformación (timeline vertical) ---------- */
.lpa-recorrido { display: flex; flex-direction: column; }
.lpa-recorrido-item {
	position: relative;
	padding: 0 0 var(--wp--preset--spacing--l) 2.75rem;
}
.lpa-recorrido-item:last-child { padding-bottom: 0; }
.lpa-recorrido-item::before {
	content: "";
	position: absolute;
	left: 1.05rem;
	top: 2.6rem;
	bottom: -0.25rem;
	width: 2px;
	background: var(--wp--preset--color--borde);
}
.lpa-recorrido-item:last-child::before { display: none; }
.lpa-recorrido-num {
	position: absolute;
	left: 0;
	top: 0;
	width: 2.2rem;
	height: 2.2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--wp--preset--color--rosado-claro);
	font-weight: 700;
	font-size: 1.05rem;
}
.lpa-recorrido-item h3 { margin: 0 0 .35rem; }

/* ---------- Modelo anual (cronograma) ---------- */
.lpa-cronograma {
	display: grid;
	gap: var(--wp--preset--spacing--m);
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}

/* ---------- Fundadores (foto) ---------- */
.lpa-founder-photo { overflow: hidden; margin: 0; }
.lpa-founder-photo img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: 50% 20%;
}

/* ---------- Tu Siguiente Paso ---------- */
.lpa-siguiente-paso-wrap h2 { text-align: center; margin-bottom: 0; }
.lpa-siguiente-paso-wrap .lpa-grid { margin-top: var(--wp--preset--spacing--m); }

/* ---------- Video institucional dentro de Cover (video-ready) ---------- */
.lpa-video-cover .wp-block-cover__inner-container { width: 100%; }

/* ============================================================
   Restyle (lenguaje compositivo tipo FamilyLife, paleta propia)
   ============================================================ */

/* ---------- Tarjeta de camino (panel de cabecera + lista de enlaces) ---------- */
.lpa-path-card {
	background: var(--wp--preset--color--base);
	border-radius: 18px;
	overflow: hidden;
	box-shadow: var(--wp--preset--shadow--suave);
	height: 100%;
	display: flex;
	flex-direction: column;
}
.lpa-path-card-head {
	padding: clamp(1.5rem, 4vw, 2rem);
	display: flex;
	flex-direction: column;
	gap: .5rem;
}
.lpa-path-card-head.is-rosado { background: var(--wp--preset--color--rosado-claro); }
.lpa-path-card-head.is-azul { background: var(--wp--preset--color--azul-claro); }
.lpa-path-card-eyebrow {
	margin: 0;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: var(--wp--preset--font-size--small);
}
.lpa-path-card-head.is-rosado .lpa-path-card-eyebrow { color: var(--wp--preset--color--rosado-oscuro); }
.lpa-path-card-head.is-azul .lpa-path-card-eyebrow { color: var(--wp--preset--color--azul-oscuro); }
.lpa-path-card-head h2 { margin: 0; }
.lpa-path-card-links { list-style: none; margin: 0; padding: clamp(.5rem, 1.5vw, .75rem) clamp(1.5rem, 4vw, 2rem); flex: 1; }
.lpa-path-card-links li { border-bottom: 1px solid var(--wp--preset--color--borde); }
.lpa-path-card-links li:last-child { border-bottom: none; }
.lpa-path-card-links a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .85rem 0;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	font-weight: 600;
}
.lpa-path-card-links a:hover { color: var(--wp--preset--color--azul); }
.lpa-path-card-links a::after {
	content: "→";
	flex-shrink: 0;
	transition: transform .15s ease;
}
.lpa-path-card-links a:hover::after { transform: translateX(3px); }

/* ---------- Banda de media (split oscuro, tipo programa destacado) ---------- */
.lpa-media-band {
	display: grid;
	grid-template-columns: minmax(280px, 1fr) minmax(280px, 1.1fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
}
@media (max-width: 781px) {
	.lpa-media-band { grid-template-columns: 1fr; }
}
.lpa-media-band-label {
	display: inline-block;
	margin: 0 0 .75rem;
	padding-top: .6rem;
	border-top: 2px solid var(--wp--preset--color--dorado);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--plata);
}
.lpa-media-band-visual {
	border-radius: 18px;
	overflow: hidden;
}

/* ---------- Editorial two-up (secciones fusionadas: relevante + descarga) ---------- */
.lpa-editorial-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.5rem, 4vw, 2.5rem);
	margin-top: var(--wp--preset--spacing--l);
}
@media (max-width: 781px) {
	.lpa-editorial-split { grid-template-columns: 1fr; }
}
.lpa-editorial-item { display: flex; flex-direction: column; }
.lpa-editorial-item .lpa-grid { margin-top: var(--wp--preset--spacing--m); }
.lpa-editorial-kicker {
	margin: 0 0 .35rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--azul);
}

/* ---------- Testimonios: variante destacada (1 grande + 2 secundarios) ---------- */
.lpa-grid.lpa-grid-testimonios {
	grid-template-columns: 1.3fr 1fr;
	align-items: start;
}
.lpa-grid.lpa-grid-testimonios .lpa-testimonial:first-child {
	grid-row: span 2;
	padding: clamp(1.75rem, 4vw, 2.5rem);
}
.lpa-grid.lpa-grid-testimonios .lpa-testimonial:first-child p.has-large-font-size { font-size: var(--wp--preset--font-size--x-large); }
@media (max-width: 781px) {
	.lpa-grid.lpa-grid-testimonios { grid-template-columns: 1fr; }
	.lpa-grid.lpa-grid-testimonios .lpa-testimonial:first-child { grid-row: auto; }
}

/* ---------- Cards de blog: meta autor · tiempo de lectura ---------- */
.lpa-post-meta {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin-top: .5rem;
}

/* ---------- Franja Family First Network (home) ---------- */
.lpa-ffn-cards.wp-block-columns { align-items: stretch; }
.lpa-ffn-cards .wp-block-column { display: flex; }
.lpa-ffn-card {
	flex: 1;
	border: 1px solid rgba(255, 255, 255, 0.14);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: transform .25s cubic-bezier(.2,.8,.2,1), background-color .25s ease, border-color .25s ease;
}
.lpa-ffn-card:hover {
	transform: translateY(-4px);
	background-color: rgba(255, 255, 255, 0.1) !important;
	border-color: rgba(255, 255, 255, 0.24);
}
.lpa-ffn-card h3 { margin-top: 0; }
.lpa-ffn-card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: .85rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}

/* ---------- Video institucional embebido (banda-video) ---------- */
.lpa-media-band-visual.wp-block-embed { margin: 0; width: 100%; }
.lpa-media-band-visual .wp-block-embed__wrapper { border-radius: 18px; overflow: hidden; }

/* ---------- Aviso de búsqueda ampliada + nota de contacto (mentores) ---------- */
.lpa-aviso-cascada {
	margin: 0 0 .4rem;
	font-weight: 600;
}
.lpa-contacto-nota { margin: .75rem 0 1rem; }

/* ==========================================================================
   Folleto Family First Network (páginas /ffn y /en/ffn/)
   ========================================================================== */

/* Acentos de color en titulares */
.lpa-accent-rosado { color: var(--wp--preset--color--rosado); }
.lpa-accent-azul   { color: var(--wp--preset--color--azul); }
.lpa-ffn-script {
	font-style: italic;
	font-weight: 500;
	letter-spacing: .01em;
}

/* --- FFN · La brecha: caja de cita + 6 problemas --- */
.lpa-ffn-quote-box {
	box-shadow: var(--wp--preset--shadow--suave);
	border: 1px solid var(--wp--preset--color--borde);
}
.lpa-ffn-quote-mark {
	color: var(--wp--preset--color--rosado);
	font-weight: 800;
	margin-right: .1rem;
}
.lpa-ffn-problemas {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem 2.5rem;
}
@media (max-width: 600px) { .lpa-ffn-problemas { grid-template-columns: 1fr; } }
.lpa-ffn-problema { display: flex; align-items: center; gap: 1rem; }
.lpa-ffn-problema-icon {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--wp--preset--color--azul);
	color: #fff;
	display: grid;
	place-items: center;
}
.lpa-ffn-problema-icon svg { width: 28px; height: 28px; }
.lpa-ffn-problema-text {
	margin: 0;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}
.lpa-ffn-band-rosado { max-width: 680px; margin-inline: auto; }

/* --- FFN · Rueda del ecosistema (móvil = lista; desktop = dona segmentada) --- */
.lpa-ffn-wheel { margin-top: var(--wp--preset--spacing--l); }
.lpa-ffn-wheel-ring,
.lpa-ffn-wheel-hub,
.lpa-ffn-wheel-labels { display: none; }
.lpa-ffn-wheel-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .7rem;
}
.lpa-ffn-wheel-list li {
	display: flex;
	align-items: flex-start;
	gap: .85rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: 18px;
	padding: .85rem 1rem;
}
.lpa-ffn-wheel-list li strong { color: var(--wp--preset--color--ink); }
.lpa-ffn-wheel-badge {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	color: #fff;
	font-weight: 700;
}

@media (min-width: 1024px) {
	.lpa-ffn-wheel {
		position: relative;
		width: 560px;
		height: 560px;
		max-width: 100%;
		margin: 2.5rem auto 0;
	}
	.lpa-ffn-wheel-list { display: none; }
	.lpa-ffn-wheel-ring { display: block; position: absolute; inset: 0; }
	.lpa-ffn-donut {
		width: 100%;
		height: 100%;
		display: block;
		filter: drop-shadow(0 10px 26px rgba(22, 35, 59, .14));
	}
	.lpa-ffn-wheel-hub {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 150px;
		height: 150px;
		border-radius: 50%;
		background: #fff;
		box-shadow: 0 8px 22px rgba(22, 35, 59, .12);
		padding: .5rem;
		z-index: 2;
	}
	.lpa-ffn-wheel-hub-brand {
		font-weight: 800;
		color: var(--wp--preset--color--azul-oscuro);
		font-size: .82rem;
		line-height: 1.12;
		letter-spacing: .02em;
	}
	.lpa-ffn-wheel-hub-script {
		color: var(--wp--preset--color--dorado);
		font-size: .74rem;
		margin-top: .2rem;
	}
	.lpa-ffn-wheel-labels { display: block; position: absolute; inset: 0; }
	.lpa-ffn-wheel-label {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 128px;
		color: #fff;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: .1rem;
		--a: calc((var(--i) + 0.5) * (360deg / 7));
		transform: translate(-50%, -50%) rotate(var(--a)) translateY(-206px) rotate(calc(-1 * var(--a)));
	}
	.lpa-ffn-wheel-num { font-weight: 800; font-size: .72rem; opacity: .8; }
	.lpa-ffn-wheel-name { font-weight: 800; font-size: .92rem; line-height: 1.1; }
	.lpa-ffn-wheel-mini { font-size: .64rem; line-height: 1.22; opacity: .95; margin-top: .1rem; }
}

/* --- FFN · Invitación: caja Iglesia Fundadora + contacto --- */
.lpa-ffn-fundadora-list {
	list-style: none;
	margin: 1rem auto 0;
	padding: 0;
	max-width: 620px;
}
.lpa-ffn-fundadora-list li {
	padding: .9rem 0;
	border-bottom: 1px solid rgba(198, 163, 90, .55);
	color: #fff;
	text-align: center;
	font-size: 1.05rem;
}
.lpa-ffn-fundadora-list li:last-child { border-bottom: none; }
.lpa-ffn-contacto { gap: .4rem 2.5rem; }
.lpa-ffn-contacto p { margin: 0; }

/* La serif de titulares del folleto FFN ahora es la misma que el resto del
   sitio (Playfair Display global vía theme.json → elements.heading), así
   que ya no hace falta declararla aparte aquí. */

/* Franjas de encuadre (evocan el marco impreso magenta/marino) */
.lpa-ffn-desafio,
.lpa-ffn-form { position: relative; }
.lpa-ffn-desafio::before,
.lpa-ffn-form::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 8px;
}
.lpa-ffn-desafio::before { top: 0; background: var(--wp--preset--color--rosado); }
.lpa-ffn-form::after { bottom: 0; background: var(--wp--preset--color--azul-oscuro); }

/* Foto del folleto FFN (reutilizada del sitio anterior del cliente) */
.lpa-ffn-photo {
	position: relative;
	border-radius: 22px;
	overflow: hidden;
	margin: 0;
	min-height: 260px;
}
.lpa-ffn-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.lpa-ffn-photo--wide { width: 100%; aspect-ratio: 16 / 7; min-height: 0; margin-bottom: var(--wp--preset--spacing--l); }

/* Logo en inglés (solo bajo /en/): wordmark "Free to Love" en el header.
   !important para ganarle al CSS del bloque core .wp-block-site-logo img. */
.lpa-en-site-logo,
.lpa-header .lpa-en-site-logo {
	height: 48px !important;
	width: auto !important;
	max-width: none;
	display: block;
}
@media (max-width: 600px) {
	.lpa-en-site-logo,
	.lpa-header .lpa-en-site-logo { height: 36px !important; }
}

/* Banner tipo pincelada (brecha) */
.lpa-ffn-brush {
	position: relative;
	display: inline-block;
	padding: .95rem 3.8rem 1.45rem;
	margin: 0 auto;
	max-width: 100%;
}
.lpa-ffn-brush-svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	color: var(--wp--preset--color--azul);
}
.lpa-ffn-brush h2 {
	position: relative;
	z-index: 1;
	margin: 0;
	color: #fff !important;
}