/*
 * Estilos globales del tema Pili con Alas.
 * Mobile-first. La paleta, tipografía y espaciado base viven en theme.json;
 * este archivo cubre composición, decorativos y componentes que theme.json no expresa.
 */

/* ---------- Sistema de anchos ---------- */

/* Inset horizontal fluido único para toda la home: cabecera, hero, pie y
   ahora todas las secciones de contenido (.pca-section) lo comparten desde
   esta misma variable, en vez de repetir el mismo clamp() por separado en
   cada bloque. Es la base del "mismo sistema" que piden todas las secciones:
   el ancho percibido deja de depender de los paddings automáticos (y a
   menudo ausentes) del layout "constrained" de WordPress. */
:root {
	--pca-inset: clamp(1.5rem, 6vw, 8rem);

	/* Rejilla de anchos editoriales (QA prelaunch): full-bleed ya se resuelve
	   con align:"full" + --pca-inset de arriba. Estos tres niveles cubren lo
	   que va DENTRO de una sección full-bleed, para que la alternancia
	   wide/standard/reading sea una decision de diseño explicita en vez de
	   depender del contentSize:760px por defecto de Gutenberg (ese es el
	   causante confirmado de que varias cabeceras interiores -Acompañamiento,
	   Reiki, Meditación- se vieran encajonadas en un monitor grande). */
	--pca-wide: var(--wp--style--global--wide-size, 1320px);
	--pca-standard: 1040px;
	--pca-reading: 680px;
}

/* Se excluye .pca-hero: ya gestiona su propio inset a través de
   .pca-hero-inner (necesita que la fotografía/scrim/degradado de salida
   sigan siendo edge-to-edge por debajo de ese inset, así que el padding no
   puede vivir en la propia section). Todas las demás secciones de la home
   (asimétricas, en rejilla, en rail o centradas) parten del mismo margen
   lateral fluido, sea cual sea su composición interna. */
.pca-section:not(.pca-hero) {
	padding-inline: var(--pca-inset);
}

/* ---------- Base y accesibilidad ---------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.pca-skip-link {
	position: absolute;
	top: -999px;
	left: 0;
	z-index: 100;
	padding: 0.75em 1.25em;
	background: var(--wp--preset--color--blanco);
	color: var(--wp--preset--color--azul-marino);
	border-radius: 0 0 var(--wp--custom--radius--sm) 0;
	text-decoration: none;
}

.pca-skip-link:focus {
	top: 0;
}

/* ---------- Ritmo de secciones ---------- */

.pca-section {
	position: relative;
	overflow: hidden;
}

.pca-eyebrow {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.85;
	margin-bottom: 0.5em;
}

.pca-eyebrow-rosa {
	width: fit-content;
	margin-inline: auto;
	background: var(--wp--preset--color--rosa);
	padding: 0.3em 0.9em;
	border-radius: var(--wp--custom--radius--button);
}

.pca-section-title {
	max-width: 42ch;
	margin-left: auto;
	margin-right: auto;
}

.pca-section-note {
	max-width: 55ch;
	margin-left: auto;
	margin-right: auto;
	opacity: 0.85;
}

/* ---------- Decorativos (órbitas y partículas) ---------- */

.pca-decor {
	position: absolute;
	inset: 0;
	max-width: none;
	pointer-events: none;
	z-index: 0;
	overflow: hidden;
}

.pca-decor svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* Secciones que incluyen la capa decorativa de partículas (.pca-decor, vía
   la clase .pca-decor-host) deben mantener su contenido real por encima.
   Se usa una clase explícita en vez de ".pca-section > *" en general para
   no interferir con el posicionamiento propio de .pca-hero-photo/.pca-hero-scrim
   dentro de la sección hero. */
.pca-decor-host > *:not(.pca-decor) {
	position: relative;
	z-index: 1;
}

/* Vida ambiental, no animación decorativa: muy lenta, baja densidad, baja
   opacidad, sin interacción. Ver .pca-decor (pointer-events:none). */
@media (prefers-reduced-motion: no-preference) {
	.pca-decor circle {
		animation: pca-pulse 16s ease-in-out infinite;
		transform-origin: center;
	}

	.pca-decor circle:nth-child(3n + 1) {
		animation-delay: -4s;
	}

	.pca-decor circle:nth-child(3n + 2) {
		animation-delay: -9s;
	}

	@keyframes pca-pulse {
		0%,
		100% {
			opacity: 0.35;
			transform: scale(1);
		}
		50% {
			opacity: 0.6;
			transform: scale(1.12);
		}
	}
}

/* Anula toda animación y transición cuando el usuario prefiere movimiento reducido. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

/* ---------- Cabecera ---------- */

.pca-site-header {
	position: relative;
	z-index: 30;
	transition: box-shadow 0.22s ease, background-color 0.22s ease, padding 0.22s ease;
}

/* Cabecera compacta: una vez que el usuario ha hecho scroll más allá de un
   umbral razonable (ver pca-header-stuck en main.js), se reduce el padding
   vertical y se encoge ligeramente el logo y el botón de CTA para recuperar
   superficie útil, sin desplazar el resto del contenido (la cabecera ya
   está fuera del flujo: sticky/fixed, ver reglas más abajo). El !important
   es necesario porque el padding original llega como estilo en línea
   (spacing.padding del bloque en header.html), que sin él no se puede
   sobrescribir desde una hoja de estilos externa. */
.pca-header-stuck {
	box-shadow: 0 12px 24px -18px rgba(0, 0, 0, 0.45);
	padding-top: var(--wp--preset--spacing--2xs) !important;
	padding-bottom: var(--wp--preset--spacing--2xs) !important;
}

@media (prefers-reduced-motion: no-preference) {
	.pca-header-stuck .pca-brand-logo,
	.pca-header-stuck .pca-header-cta .wp-block-button__link {
		transition: width 0.22s ease, padding 0.22s ease;
	}
}

.pca-header-stuck .pca-brand-logo {
	width: clamp(112px, 11vw, 190px);
}

.pca-header-stuck .pca-header-cta .wp-block-button__link {
	padding-top: 0.65em;
	padding-bottom: 0.65em;
}

/* Header sticky: se aplica al envoltorio de wp:template-part que WordPress
   genera automaticamente ("header.wp-block-template-part", presente en
   TODAS las paginas), no a ".pca-site-header" directamente. Motivo
   verificado en vivo: el padre inmediato de ".pca-site-header" mide
   exactamente lo mismo que ".pca-site-header" (sin margen propio), y
   position:sticky queda acotado por la altura de su bloque contenedor -- al
   coincidir ambas alturas, el header se "despegaba" en el mismo instante en
   que empezaba a fijarse. El envoltorio exterior sí vive dentro de
   ".wp-site-blocks" (con la altura completa de la pagina), que es donde
   sticky necesita espacio real para "viajar".
   Se excluye Home explicitamente: su cabecera es transparente y se
   superpone al hero mediante "body.home .pca-site-header { position:
   absolute }" (ver mas abajo), un efecto que no se toca en esta tarea. */
body:not(.home) header.wp-block-template-part:has(.pca-site-header) {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 30;
}

.pca-header-stuck {
	box-shadow: 0 12px 24px -18px rgba(0, 0, 0, 0.45);
}

.pca-header-row {
	width: 100%;
	align-items: center;
	flex-wrap: wrap;
	row-gap: var(--wp--preset--spacing--xs);
	gap: var(--wp--preset--spacing--s);
	min-height: 68px;
	/* Mismo inset fluido (~5-6% en escritorio) que .pca-hero-inner, para que
	   logo y bloque editorial queden verticalmente alineados. */
	padding-inline: var(--pca-inset);
}

.pca-brand {
	align-items: center;
	gap: var(--wp--preset--spacing--xs);
	flex: 0 0 auto;
}

.pca-brand-link {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

.pca-brand-logo {
	display: block;
	width: clamp(140px, 15vw, 248px);
	height: auto;
}

.pca-main-nav {
	font-size: 0.9375rem;
	letter-spacing: 0.01em;
}

.pca-main-nav a {
	font-weight: 500;
}

.pca-main-nav .wp-block-navigation__container {
	gap: clamp(0.75rem, 1.4vw, 1.75rem);
}

/* WooCommerce inyecta el icono de cuenta y el mini-carrito en esta fila
   via Block Hooks (sin tocar header.html). Se les da un ancho de caja
   consistente para que no desajusten el resto de la fila. */
.pca-header-row .wp-block-woocommerce-customer-account,
.pca-header-row .wc-block-mini-cart {
	flex-shrink: 0;
	display: flex;
	align-items: center;
}

.pca-header-cta {
	flex-shrink: 0;
}

.pca-header-cta .wp-block-button__link {
	white-space: nowrap;
	padding-top: 0.9em;
	padding-bottom: 0.9em;
	padding-left: 1.9em;
	padding-right: 1.7em;
}

@media (max-width: 480px) {
	.pca-header-cta .wp-block-button__link {
		padding-left: 1.2em;
		padding-right: 1.1em;
		font-size: var(--wp--preset--font-size--small);
	}

	.pca-brand-logo {
		width: 130px;
	}
}

/* A partir del punto en el que el bloque Navigation deja de mostrar el menú
   hamburguesa, la cabecera se mantiene en una única fila: la navegación
   ocupa el espacio central disponible y sus enlaces quedan centrados. */
@media (min-width: 782px) {
	.pca-header-row {
		flex-wrap: nowrap;
	}

	.pca-main-nav {
		flex: 1 1 auto;
		min-width: 0;
	}

	/* Fuerza una sola linea: si el contenido no cupiera por completo, es
	   preferible que los enlaces se compriman ligeramente por su propio
	   flex-shrink a que "Contacto" caiga a una segunda fila (el bug
	   reportado tras anadir los iconos de WooCommerce a la cabecera). */
	.pca-main-nav .wp-block-navigation__container {
		flex-wrap: nowrap;
	}

	.pca-header-cta {
		flex: 0 0 auto;
	}
}

@media (min-width: 782px) and (max-width: 1199px) {
	.pca-main-nav {
		font-size: 0.8125rem;
	}
}

/* Cabecera transparente y superpuesta al hero, solo en la portada. Antes
   era "position: absolute", por lo que al hacer scroll se quedaba anclada
   en la parte superior del documento y desaparecía de la vista (nunca
   llegaba a ser "sticky"). Ahora es "fixed" desde el principio -- visto en
   el scroll inicial es indistinguible de absolute (top del documento =
   top del viewport en scrollY 0) -- para que se mantenga visible durante
   todo el scroll y pueda transicionar a la cabecera compacta navy
   (".pca-header-stuck", ver main.js) igual que en el resto del sitio, en
   vez de perder la navegación en cuanto se abandona el hero.
   El !important es necesario para vencer a la clase utilitaria
   has-azul-marino-background-color que genera WordPress a partir del
   atributo backgroundColor del bloque. */
body.home .pca-site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 30;
	background: transparent !important;
}

/* Una vez fuera de la zona del hero (ver umbral calculado en main.js a
   partir de la altura real de ".pca-hero"), la cabecera de Home adopta el
   mismo fondo navy sólido y compactación que la cabecera de las páginas
   interiores, con una transición deliberada en vez de un cambio brusco. */
body.home .pca-site-header.pca-header-stuck {
	background: var(--wp--preset--color--azul-marino) !important;
}

/* WordPress inserta automáticamente margin-block-start (blockGap) entre los
   bloques de nivel superior de .wp-site-blocks (selector ".wp-site-blocks > *
   + *"): separa la cabecera del <main>, y el <main> del <footer>. La
   cabecera es siempre de fondo navy (has-azul-marino-background-color), así
   que ese margen sin fondo propio descubre el fondo claro de la página
   (styles.color.background de theme.json) justo entre dos bloques navy: de
   ahí la franja blanca. Esto no es exclusivo de la home con su cabecera
   position:absolute (regla anterior): en toda página interior, el hero
   interior también arranca justo debajo de la cabecera, así que el mismo
   hueco es igual de visible ahí. Se anula en todo el sitio, sin tocar el
   blockGap dentro del contenido normal de una página (wp:post-content).
   CAUSA RAIZ (hotfix, línea blanca en ficha de producto): en plantillas
   singulares de WooCommerce (single-product, y por extensión cualquier
   vista ".woocommerce"), WordPress NO pone "<main>" como hijo directo de
   ".wp-site-blocks": WooCommerce inserta antes un contenedor propio
   "<div class="wp-block-group woocommerce product">" que envuelve al
   "<main>" real. Ese div extra -- no "<main>" -- es el verdadero segundo
   hijo directo de ".wp-site-blocks", así que hereda el margen del blockGap
   que las reglas de arriba nunca llegaban a anular (apuntaban a "<main>"
   directamente, que en esta plantilla ya no ocupa esa posición). */
.wp-site-blocks > main,
.wp-site-blocks > footer,
.wp-site-blocks > .woocommerce,
#contenido {
	margin-block-start: 0;
}

/* Mismo mecanismo que la regla anterior, pero entre CADA sección de nivel
   superior dentro de <main> (cada patrón/bloque de la home o de una página
   interior es su propio hijo directo de #contenido). Ese margen no tiene
   fondo propio y descubre el fondo claro de la página entre secciones que sí
   son de fondo navy: de ahí las franjas blancas horizontales entre
   secciones, tanto en la home como en acompañamiento, reiki, cursos, etc.
   Se anula aquí, para que cada sección (todas alignfull, todas con su
   propio padding-block interno vía spacing.padding en el patrón) se una
   directamente con la siguiente sin hueco intermedio. El espaciado vertical
   y la jerarquía de las secciones siguen viniendo de ese padding interno,
   no de este margen externo.
   CAUSA RAIZ (hotfix, franjas blancas reaparecidas tras migrar Reiki a
   post_content real): esta regla asumía que cada sección es hijo DIRECTO de
   "#contenido" -- cierto mientras todo el contenido vivía hardcodeado en la
   plantilla. Al migrar una página a "wp:post-content" (para que sea editable
   desde Páginas > Editar), WordPress inserta una capa intermedia real,
   "<div class="entry-content wp-block-post-content is-layout-flow">", entre
   "#contenido" y las secciones -- exactamente el caso que el comentario de
   la regla de arriba ya anticipaba y excluía a propósito ("sin tocar el
   blockGap dentro del contenido normal de una página"). Esa capa también
   lleva "is-layout-flow" (el mismo mecanismo de blockGap de WordPress), así
   que sus hijos directos (las secciones reales) volvían a heredar el margen
   de 24px que "#contenido > *" ya no alcanza a anular al estar un nivel más
   abajo. Se extiende el mismo selector a esa capa intermedia -- nunca a los
   grids/columnas internos de cada sección, que conservan su propio blockGap
   sin tocar. */
#contenido > *,
#contenido .wp-block-post-content > * {
	margin-block-start: 0;
}

/* ---------- Pie de página ---------- */

.pca-site-footer {
	position: relative;
	overflow: hidden;
}

.pca-site-footer > *:not(.pca-decor) {
	position: relative;
	z-index: 1;
}

/* Mismo inset fluido que .pca-header-row/.pca-hero-inner: el footer.html
   pasó de layout "constrained" (que encajonaba .pca-footer-top/-bottom a
   760px, la "franja central estrecha") a "default" + este padding propio. */
.pca-footer-top,
.pca-footer-bottom {
	padding-inline: var(--pca-inset);
}

.pca-footer-top {
	width: 100%;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--l) var(--wp--preset--spacing--xl);
}

.pca-footer-brand {
	max-width: 34ch;
}

.pca-footer-brand-logo {
	width: clamp(150px, 12vw, 220px);
	height: auto;
	margin-bottom: var(--wp--preset--spacing--s);
}

.pca-footer-claim {
	font-family: var(--wp--preset--font-family--titulares);
	font-style: italic;
	font-size: var(--wp--preset--font-size--large);
	opacity: 0.9;
}

/* CAUSA RAIZ (feedback de Pilar: "esta como en un lado, luego vacio en
   medio y luego lo de acompañamiento"): ".pca-footer-top" solo tenia dos
   hijos (marca y navegacion) con "justify-content:space-between", lo que en
   pantallas anchas deja un hueco vacio grande en el centro. El contacto
   vivia escondido dentro del bloque de marca. Se separa en un tercer bloque
   propio (mismo ancho maximo que la marca) para que el pie quede repartido
   en tres columnas reales -- marca / navegacion / contacto -- en vez de dos
   con un vacio en medio. */
.pca-footer-contact-block {
	max-width: 34ch;
}

.pca-footer-contact {
	opacity: 0.85;
}

.pca-footer-contact a {
	color: var(--wp--preset--color--blanco);
}

/* CAUSA RAIZ (WhatsApp real confirmado): el bloque de contacto del footer
   solo tenia el enlace al formulario; se añade el CTA de WhatsApp
   (misma fuente de Block Bindings que Contacto) justo debajo, con
   separacion propia para no pegarse al parrafo existente. */
.pca-footer-whatsapp {
	margin-top: var(--wp--preset--spacing--s);
}

/* ---------- Home: opiniones reales ---------- */

.pca-testimonios-intro {
	margin-bottom: var(--wp--preset--spacing--l);
}

/* CAUSA RAIZ (feedback de Pilar: "solo 1 opinion visible cada vez, en
   bucle, transicion suave"): el grid con las 6 tarjetas a la vez se
   sustituye por un carrusel de crossfade. Todas las tarjetas comparten la
   misma celda de grid ("grid-area:1/1"): es el truco CSS estandar para que
   el contenedor se dimensione automaticamente segun la tarjeta mas alta,
   sin necesidad de medir con JS ni fijar una altura a mano (evita el salto
   de layout al cambiar de tarjetas de longitud distinta). El JS (main.js)
   solo decide cual lleva ".is-active"; el fundido en si es CSS puro.*/
.pca-testimonios-track {
	display: grid;
}

.pca-testimonios-track .pca-testimonio-card {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.6s ease;
}

.pca-testimonios-track .pca-testimonio-card.is-active {
	opacity: 1;
	visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
	.pca-testimonios-track .pca-testimonio-card {
		transition: none;
	}
}

.pca-testimonios-dots {
	display: flex;
	justify-content: center;
	gap: 0.6em;
	margin-top: var(--wp--preset--spacing--m);
}

/* CAUSA RAIZ (hotfix, seccion pasada de fondo claro a navy): estos puntos se
   diseñaron en navy sobre fondo blanco; sobre el nuevo fondo navy con
   particulas quedaban practicamente invisibles (navy sobre navy). Se
   invierten a blanco translucido, mismo patron de opacidad que el resto de
   controles claros del sitio sobre fondo oscuro. */
.pca-testimonios-dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.3);
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.pca-testimonios-dot:hover,
.pca-testimonios-dot:focus-visible {
	background: rgba(255, 255, 255, 0.55);
}

.pca-testimonios-dot.is-active {
	background: var(--wp--preset--color--blanco);
	transform: scale(1.15);
}

/* Cajetin gris-luz sobre la seccion blanca (".pca-section-light"): un tono
   igual de claro no daria ninguna separacion visual entre tarjeta y fondo;
   se reutiliza el mismo lenguaje de sombra suave que ".pca-wc-card" en vez
   de un borde, para no depender de contraste de color. */
/* CAUSA RAIZ (hotfix, Pilar pidio quitar la foto y dejar "solo texto +
   carrusel" sobre navy con particulas): el cajetin "gris-luz" (pensado para
   la seccion clara anterior) se retira -- sobre el nuevo fondo navy,
   blanco sobre un cajetin casi blanco habria roto el contraste. La cita
   queda directamente sobre el navy, centrada, con el mismo tratamiento
   tipografico editorial (serif cursiva) que ya tenia. */
.pca-testimonio-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75em;
	max-width: 620px;
	margin-inline: auto;
	text-align: center;
	padding-block: var(--wp--preset--spacing--s);
}

.pca-testimonio-quote {
	margin: 0;
	font-family: var(--wp--preset--font-family--titulares);
	font-style: italic;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.55;
}

.pca-testimonio-meta {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	opacity: 0.75;
}

/* ---------- Blog: recursos gratuitos (YouTube) ---------- */

.pca-recursos-header {
	margin-bottom: var(--wp--preset--spacing--l);
}

.pca-recursos-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--m);
	margin-bottom: var(--wp--preset--spacing--l);
}

@media (max-width: 768px) {
	.pca-recursos-grid {
		grid-template-columns: 1fr;
	}
}

.pca-recurso-card {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	text-decoration: none;
	color: inherit;
}

.pca-recurso-thumb {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
	box-shadow: 0 10px 24px rgba(0, 33, 58, 0.1);
}

.pca-recurso-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Boton de play superpuesto en vez de un embed real: la miniatura es una
   imagen estatica (miniatura oficial de YouTube), nunca un iframe que
   cargue JS de YouTube hasta que la visitante decida ver el video de
   verdad (se abre en una pestaña nueva). */
.pca-recurso-play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.4rem;
	color: var(--wp--preset--color--blanco);
	background: rgba(0, 33, 58, 0.25);
	transition: background-color 0.2s ease;
}

@media (prefers-reduced-motion: no-preference) {
	.pca-recurso-card:hover .pca-recurso-play,
	.pca-recurso-card:focus-visible .pca-recurso-play {
		background: rgba(0, 33, 58, 0.4);
	}
}

.pca-recurso-title {
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
}

/* ---------- Blog: Instagram ---------- */

.pca-instagram-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--s);
}

.pca-instagram-grid img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--sm);
	display: block;
}

.pca-footer-nav {
	row-gap: var(--wp--preset--spacing--xs);
}

.pca-footer-nav a {
	opacity: 0.9;
}

.pca-footer-separator {
	margin-top: var(--wp--preset--spacing--l);
	margin-bottom: var(--wp--preset--spacing--m);
	margin-inline: var(--pca-inset);
	width: auto;
	opacity: 0.2;
}

.pca-footer-bottom {
	width: 100%;
	align-items: center;
	gap: var(--wp--preset--spacing--s);
	opacity: 0.75;
}

.pca-footer-legal a,
.pca-footer-nav a {
	color: var(--wp--preset--color--blanco);
}

.pca-footer-legal {
	column-gap: var(--wp--preset--spacing--m);
}

/* ---------- Hero ---------- */

.pca-hero {
	padding: 0;
	min-height: 100svh;
	display: flex;
	align-items: center;
}

.pca-hero-photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 60% 15%;
	z-index: 0;
}

.pca-hero-scrim {
	position: absolute;
	inset: 0;
	max-width: none;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		90deg,
		rgba(0, 33, 58, 0.88) 0%,
		rgba(0, 33, 58, 0.6) 32%,
		rgba(0, 33, 58, 0.18) 58%,
		rgba(0, 33, 58, 0) 76%
	);
}

/* Transición atmosférica de salida del hero: la fotografía se hunde de forma
   orgánica en el azul profundo del resto de la home (en vez de cortar en
   seco contra la siguiente sección, que ahora empieza justo debajo sin
   ningún hueco, ver la regla "body.home #contenido > *"). Es un degradado,
   no un color plano: transparente en la parte alta del tramo y azul profundo
   al final, para que se perciba como una caída de luz, no como una banda. */
/* CAUSA RAIZ (feedback de Pilar): "que a la chica le salga la luz del
   corazon... todo lo que hago me sale del corazon". NO se regenera ni se
   toca la fotografia aprobada: se añade un brillo calido no destructivo,
   en capa aparte, superpuesto sobre el punto donde la propia foto ya tiene
   un nucleo de luz dorada a la altura del pecho/cuello. Ese punto vive de
   forma fija en la imagen original (~61%/84% de sus dimensiones naturales,
   1672x941). Para que el brillo seudo-CSS coincida con el recorte real que
   produce "object-fit:cover" + "object-position" (que cambia en cada
   breakpoint, ver ".pca-hero-photo"), su posicion en pantalla se calculo
   analiticamente con la formula de cover para cada breakpoint existente
   (no a ojo): en los tres, la altura del hero ("min-height:100svh") es
   siempre la dimension que fija la escala, así que el desplazamiento
   vertical del punto es 0 y su posicion vertical natural (84%) se conserva
   igual en los tres casos; solo el desplazamiento horizontal cambia con
   "object-position". Blend mode "screen" para que se comporte como luz real
   sumada a la escena, no como una pegatina de color plana encima. */
.pca-hero-heart-glow {
	position: absolute;
	inset: 0;
	max-width: none;
	z-index: 1;
	pointer-events: none;
	mix-blend-mode: screen;
	background: radial-gradient(
		circle at 64% 84%,
		rgba(255, 200, 120, 0.55) 0%,
		rgba(255, 176, 90, 0.32) 18%,
		rgba(255, 158, 70, 0.14) 34%,
		rgba(255, 158, 70, 0) 52%
	);
	animation: pca-heart-glow-breathe 7s ease-in-out infinite;
}

@media (min-width: 768px) {
	.pca-hero-heart-glow {
		background: radial-gradient(
			circle at 58% 84%,
			rgba(255, 200, 120, 0.5) 0%,
			rgba(255, 176, 90, 0.3) 16%,
			rgba(255, 158, 70, 0.13) 30%,
			rgba(255, 158, 70, 0) 46%
		);
	}
}

@media (min-width: 1024px) {
	.pca-hero-heart-glow {
		background: radial-gradient(
			circle at 60% 84%,
			rgba(255, 200, 120, 0.48) 0%,
			rgba(255, 176, 90, 0.28) 14%,
			rgba(255, 158, 70, 0.12) 26%,
			rgba(255, 158, 70, 0) 40%
		);
	}
}

/* Igual que ".pca-decor": vida ambiental muy lenta y de baja amplitud, nunca
   una animacion vistosa. Solo opacidad, sin desplazar ni escalar el brillo,
   para que se lea como respiracion, no como un efecto de videojuego. */
@keyframes pca-heart-glow-breathe {
	0%,
	100% {
		opacity: 0.85;
	}
	50% {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pca-hero-heart-glow {
		animation: none;
	}
}

.pca-hero-fade {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: min(38vh, 420px);
	max-width: none;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(7, 17, 34, 0) 0%, rgba(7, 17, 34, 0.55) 55%, var(--wp--preset--color--azul-profundo) 100%);
}

@media (min-width: 768px) {
	.pca-hero-photo {
		object-position: 63% center;
	}
}

@media (min-width: 1024px) {
	.pca-hero-photo {
		object-position: 68% center;
	}
}

.pca-hero-inner {
	position: relative;
	z-index: 2;
	width: 100%;
	/* Mismo inset fluido que .pca-header-row: ~5-6% del viewport en escritorio,
	   consistente con el borde izquierdo del logo. El límite de ancho vive
	   aquí, nunca en la capa de imagen (.pca-hero-photo/.pca-hero-scrim). */
	padding-inline: var(--pca-inset);
	/* 96px aproxima la altura de la cabecera superpuesta (ver .pca-header-row). */
	padding-top: calc(96px + var(--wp--preset--spacing--l));
	padding-bottom: var(--wp--preset--spacing--l);
}

.pca-hero-copy {
	max-width: 620px;
	margin-left: 0;
	margin-right: auto;
	text-align: left;
}

.pca-hero-eyebrow {
	display: inline-block;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: var(--wp--custom--radius--button);
	padding: 0.35em 1.1em;
	margin-bottom: var(--wp--preset--spacing--s);
	font-size: 0.8125rem;
}

.pca-eyebrow-mark {
	margin-right: 0.35em;
}

.pca-hero-title {
	/* theme.json aplica navy a todos los headings (styles.elements.heading);
	   dentro del hero necesita blanco explícito, si no hereda ese navy global. */
	color: var(--wp--preset--color--blanco);
	font-size: clamp(2.25rem, 1.6rem + 5vw, 3.75rem);
	line-height: 1.02;
	letter-spacing: -0.015em;
}

@media (min-width: 1024px) {
	.pca-hero-title {
		font-size: clamp(3.75rem, 5vw, 5.75rem);
	}
}

.pca-hero-title em {
	font-style: italic;
	font-weight: 500;
}

.pca-hero-text {
	opacity: 0.92;
	max-width: 58ch;
}

.pca-hero-buttons .wp-block-button__link {
	padding-top: 0.65em;
	padding-bottom: 0.65em;
}

.pca-cta-final .wp-block-buttons {
	margin-top: var(--wp--preset--spacing--m);
}

.pca-cta-gradient .wp-block-button__link {
	background: linear-gradient(90deg, #caf1ff 0%, #f4faff 45%, #ffdef5 100%);
	color: var(--wp--preset--color--azul-marino);
	border: none;
}

/* ---------- Marco editorial a la espera de fotografía real ---------- */

.pca-portrait-frame {
	position: relative;
	aspect-ratio: 4 / 5;
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
	background: linear-gradient(160deg, var(--wp--preset--color--beige) 0%, var(--wp--preset--color--champagne) 45%, var(--wp--preset--color--gris-luz) 100%);
	box-shadow: var(--wp--custom--shadow--card);
}

.pca-portrait-frame-motif {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* CAUSA RAIZ (fotos reales de Pilar en Sobre mí): ".pca-portrait-frame" se
   diseñó solo con un SVG decorativo dentro (fondo degradado + trazos), sin
   ninguna regla para una imagen real. Al insertar las fotografías
   confirmadas por Pilar, la imagen debe llenar el marco exactamente igual
   que el degradado que sustituye (mismo aspect-ratio 4:5, mismo
   object-fit:cover), sin estirarla ni recortar de forma imprevisible.

   CAUSA RAIZ 2 (hotfix, imagen de "Mi búsqueda" con hueco beige debajo):
   el bloque real "wp:image" envuelve la <img> en un <figure
   class="wp-block-image">, un elemento intermedio que "height:100%" no
   puede atravesar porque su propio alto es automatico (determinado por el
   contenido, no por el marco). Con fotos mas altas que el marco 4:5 el
   recorte por overflow disimulaba el problema; con la foto del río (mas
   corta que el marco) quedaba un hueco real mostrando el degradado de
   fondo. Se posiciona la <img> de forma absoluta: al ser
   ".pca-portrait-frame" el ancestro posicionado mas cercano, la imagen se
   ancla directamente a el sin depender del alto del <figure>. */
.pca-portrait-frame figure {
	margin: 0;
	height: 100%;
}

.pca-portrait-frame img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------- El acompañamiento (composición editorial asimétrica) ---------- */

.pca-caminos-grid {
	gap: var(--wp--preset--spacing--xl);
}

/* CAUSA RAIZ (ronda "CLIENTE 02 -- Acompañamiento"): las 3 fotos reales de
   Coaching/Reiki/Meditación son apaisadas (1536x1024, 3:2) con texto propio
   integrado ("COACHING"/"REIKI"/"MEDITACIÓN" + subtítulo) cerca del borde
   inferior. Los marcos ".pca-portrait-frame" que sustituyen (antes solo un
   SVG decorativo) usan por defecto "aspect-ratio:4/5" + "object-fit:cover"
   (ver mas arriba, pensado para retratos de Sobre mí) -- aplicado tal cual
   a estas 3 fotos recortaria los laterales y podria cortar el texto
   integrado. Se anula SOLO para estas 3 imagenes concretas (clase
   ".pca-camino-photo", añadida unicamente a los bloques "wp:image" de
   Coaching/Reiki/Meditación en /acompanamiento/): el marco pasa a la
   proporcion real 3:2 de la foto, asi "object-fit:contain" la muestra
   completa, sin recortar ni deformar ni dejar bandas vacias. No toca
   ".pca-portrait-frame" en general: Sobre mí sigue igual. */
.pca-camino-photo {
	aspect-ratio: 3 / 2;
}

.pca-camino-photo img {
	object-fit: contain;
}

.pca-caminos-intro .pca-card-link {
	margin-top: var(--wp--preset--spacing--s);
}

.pca-camino-row {
	align-items: flex-start;
	gap: var(--wp--preset--spacing--m);
	padding-block: var(--wp--preset--spacing--m);
}

.pca-camino-row + .pca-camino-row {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.pca-camino-icon {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	margin-top: 0.2em;
}

.pca-camino-icon svg {
	width: 100%;
	height: 100%;
	filter: drop-shadow(0 0 4px rgba(203, 175, 131, 0.35));
}

/* ---------- Tarjetas ---------- */

.pca-cards-3 {
	margin-top: var(--wp--preset--spacing--l);
	gap: var(--wp--preset--spacing--m);
}

.pca-card {
	background: var(--wp--preset--color--blanco);
	border-radius: var(--wp--custom--radius--card);
	box-shadow: var(--wp--custom--shadow--card);
	padding: var(--wp--preset--spacing--m) var(--wp--preset--spacing--m) var(--wp--preset--spacing--l);
	/* Las tarjetas son siempre blancas, floten sobre una sección clara u
	   oscura: fijan su propio color de texto en vez de heredar el
	   textColor de la sección (evita texto blanco sobre tarjeta blanca
	   ahora que la mayoría de secciones son navy). Los selectores que
	   reafirman esto para heading/enlace viven al final de la hoja, después
	   de las reglas ".pca-section-dark", para ganar el empate de
	   especificidad por orden de aparición. */
	color: var(--wp--preset--color--azul-marino);
}

@media (prefers-reduced-motion: no-preference) {
	.pca-card {
		transition: transform 0.25s ease, box-shadow 0.25s ease;
	}

	.pca-card:hover {
		transform: translateY(-4px);
		box-shadow: 0 30px 55px -26px rgba(0, 33, 58, 0.32);
	}
}

.pca-card-accent-menta {
	border-top: 4px solid var(--wp--preset--color--menta);
}

/* ---------- Rail de sesiones destacadas ---------- */

.pca-rail-heading {
	width: 100%;
	align-items: baseline;
	margin-bottom: var(--wp--preset--spacing--m);
}

.pca-rail-heading .pca-section-title {
	margin: 0;
	max-width: none;
	text-align: left;
}

.pca-rail-hint {
	opacity: 0.65;
	margin: 0;
}

.pca-sessions-rail {
	width: 100%;
	align-items: stretch;
	gap: var(--wp--preset--spacing--m);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	padding-bottom: var(--wp--preset--spacing--xs);
	-webkit-overflow-scrolling: touch;
}

.pca-sessions-rail::-webkit-scrollbar {
	height: 6px;
}

.pca-sessions-rail::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.25);
	border-radius: var(--wp--custom--radius--button);
}

.pca-session-card {
	scroll-snap-align: start;
	flex: 0 0 auto;
	width: clamp(260px, 30vw, 320px);
	display: flex;
	flex-direction: column;
}

.pca-session-cta {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--s);
}

.pca-session-icon {
	width: 40px;
	height: 40px;
	margin-bottom: var(--wp--preset--spacing--xs);
}

.pca-session-icon svg {
	width: 100%;
	height: 100%;
}

.pca-session-cta .wp-block-button__link {
	padding-top: 0.55em;
	padding-bottom: 0.55em;
	padding-left: 1.4em;
	padding-right: 1.4em;
	font-size: var(--wp--preset--font-size--small);
}

/* Bloque visual decorativo de las tarjetas editoriales (blog), a la espera
   de imagen destacada real: un degradado de marca en vez de un hueco vacío. */
.pca-card-editorial-visual {
	aspect-ratio: 16 / 10;
	border-radius: var(--wp--custom--radius--sm);
	margin-bottom: var(--wp--preset--spacing--s);
	background: linear-gradient(135deg, var(--wp--preset--color--azul-cielo) 0%, var(--wp--preset--color--champagne) 100%);
}

.pca-card-editorial-visual-2 {
	background: linear-gradient(135deg, var(--wp--preset--color--beige) 0%, var(--wp--preset--color--champagne) 55%, var(--wp--preset--color--rosa) 100%);
}

.pca-card-editorial-visual-3 {
	background: linear-gradient(135deg, var(--wp--preset--color--rosa) 0%, var(--wp--preset--color--champagne) 100%);
}

.pca-card-editorial-visual-4 {
	background: linear-gradient(135deg, var(--wp--preset--color--menta) 0%, var(--wp--preset--color--azul-cielo) 100%);
}

.pca-card-editorial-visual-5 {
	background: linear-gradient(135deg, var(--wp--preset--color--azul-cielo) 0%, var(--wp--preset--color--blanco) 55%, var(--wp--preset--color--champagne) 100%);
}

.pca-card-editorial-visual-6 {
	background: linear-gradient(135deg, var(--wp--preset--color--champagne) 0%, var(--wp--preset--color--rosa) 55%, var(--wp--preset--color--menta) 100%);
}

/* ---------- Cápsulas (Reiki en profundidad) ---------- */

.pca-reiki-grid {
	gap: var(--wp--preset--spacing--l);
}

.pca-modality-line {
	margin-top: var(--wp--preset--spacing--s);
	margin-bottom: var(--wp--preset--spacing--l);
	opacity: 0.75;
	letter-spacing: 0.02em;
}

/* El CTA "Descubre el Reiki" cierra el bloque de texto: necesita aire
   propio para no sentirse pegado al párrafo/cápsulas que lo preceden. */
.pca-reiki .pca-hero-buttons {
	margin-top: var(--wp--preset--spacing--s);
}

.pca-modality-line span {
	color: var(--wp--preset--color--champagne);
	margin-inline: 0.2em;
}

/* Tarjeta de Reiju deliberadamente ligera: un acento lateral en vez de un
   panel completo, para no competir en peso visual con la columna de texto. */
.pca-reiju-card {
	border-left: 2px solid var(--wp--preset--color--champagne);
	padding-left: var(--wp--preset--spacing--m);
}

.pca-reiju-kicker {
	margin: 0 0 0.4em;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--champagne);
	font-weight: 700;
}

.pca-card-icon {
	width: 48px;
	height: 48px;
	margin-bottom: var(--wp--preset--spacing--xs);
}

.pca-card-icon svg {
	width: 100%;
	height: 100%;
	filter: drop-shadow(0 0 4px rgba(203, 175, 131, 0.3));
}

.pca-card-link a {
	font-weight: 600;
	text-decoration: none;
}

.pca-card-link a:hover,
.pca-card-link a:focus-visible {
	text-decoration: underline;
}

/* ---------- Cabecera de sección alineada a la izquierda ---------- */

/* Alternativa editorial a .pca-section-title/.pca-section-note (centrados,
   usados en tienda/martes-con-alas/recurso/CTA final): cursos rompe ese
   patrón repetido con una cabecera a la izquierda, más cercana a la
   composición asimétrica de "El acompañamiento" que a un bloque centrado
   más. Contribuye a que las secciones alternen disposición real. */
.pca-section-header-left {
	max-width: 46ch;
	margin-bottom: var(--wp--preset--spacing--l);
}

.pca-section-header-left .pca-section-title,
.pca-section-header-left .pca-section-note {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	text-align: left;
}

/* ---------- Cursos y encuentros: evento destacado + agenda compacta ---------- */

.pca-cursos-layout {
	gap: var(--wp--preset--spacing--xl);
}

/* Panel destacado: se separa del fondo plano de la sección con un tinte y
   un borde muy sutiles (en vez de una tarjeta blanca, que competiría con
   .pca-card en el resto de la home) para señalar "esto es lo próximo" sin
   introducir un tercer lenguaje visual. */
.pca-cursos-featured {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--wp--custom--radius--card);
	padding: var(--wp--preset--spacing--l) var(--wp--preset--spacing--l) var(--wp--preset--spacing--m);
}

.pca-cursos-featured-meta {
	align-items: center;
	gap: var(--wp--preset--spacing--s);
	margin-bottom: var(--wp--preset--spacing--m);
}

.pca-cursos-featured-date {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 4.25rem;
	height: 4.25rem;
	flex-shrink: 0;
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--blanco);
	color: var(--wp--preset--color--azul-marino);
	line-height: 1.1;
}

.pca-cursos-featured-date-day {
	font-family: var(--wp--preset--font-family--titulares);
	font-size: 1.375rem;
	font-weight: 700;
}

.pca-cursos-featured-date-month {
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	opacity: 0.7;
}

.pca-cursos-featured-title {
	margin-bottom: 0.3em;
}

.pca-cursos-featured-location {
	margin: 0 0 0.6em;
	font-weight: 600;
	opacity: 0.8;
}

.pca-cursos-featured .pca-hero-buttons {
	margin-top: var(--wp--preset--spacing--m);
}

/* Agenda compacta: filas escaneables (fecha · título · modalidad/ubicación)
   para los encuentros que no son el foco principal, deliberadamente ligeras
   frente al peso del panel destacado. */
.pca-cursos-list {
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: center;
}

.pca-cursos-list-item {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--s);
	padding-block: var(--wp--preset--spacing--m);
	position: relative;
}

.pca-cursos-list-item + .pca-cursos-list-item {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.pca-cursos-list-date {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	flex-shrink: 0;
	border-radius: var(--wp--custom--radius--sm);
	border: 1px solid rgba(255, 255, 255, 0.28);
	line-height: 1.1;
}

.pca-cursos-list-date-day {
	font-family: var(--wp--preset--font-family--titulares);
	font-size: 1.05rem;
	font-weight: 700;
}

.pca-cursos-list-date-month {
	font-size: 0.625rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	opacity: 0.7;
}

.pca-cursos-list-body {
	flex: 1 1 auto;
	min-width: 0;
}

.pca-cursos-list-title {
	margin: 0 0 0.2em;
}

.pca-cursos-list-title a {
	color: inherit;
	text-decoration: none;
}

.pca-cursos-list-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.pca-cursos-list-title a:hover,
.pca-cursos-list-title a:focus-visible {
	text-decoration: underline;
}

.pca-cursos-list-meta {
	margin: 0;
	opacity: 0.7;
}

.pca-cursos-list-meta span {
	color: var(--wp--preset--color--champagne);
	margin-inline: 0.3em;
}

.pca-b2b-banner {
	margin-top: var(--wp--preset--spacing--l);
	align-items: center;
	gap: var(--wp--preset--spacing--s) var(--wp--preset--spacing--m);
	padding: var(--wp--preset--spacing--s) var(--wp--preset--spacing--m);
	background: var(--wp--preset--color--blanco);
	color: var(--wp--preset--color--azul-marino);
	border-radius: var(--wp--custom--radius--sm);
}

.pca-b2b-banner p {
	margin: 0;
}

.pca-badge {
	display: inline-block;
	background: var(--wp--preset--color--azul-cielo);
	color: var(--wp--preset--color--azul-marino);
	padding: 0.25em 0.9em;
	border-radius: var(--wp--custom--radius--button);
	font-weight: 700;
	letter-spacing: 0.02em;
	margin-bottom: var(--wp--preset--spacing--xs);
}

/* ---------- Recorrido de transformación ---------- */

.pca-timeline {
	list-style: none;
	margin: var(--wp--preset--spacing--l) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--m);
	position: relative;
}

.pca-timeline::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0.7rem;
	width: 2px;
	background: var(--wp--preset--color--azul-cielo);
}

.pca-timeline li {
	position: relative;
	padding-left: var(--wp--preset--spacing--l);
	font-weight: 600;
}

.pca-timeline li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.2em;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: var(--wp--preset--color--menta);
	border: 2px solid var(--wp--preset--color--azul-marino);
}

@media (min-width: 768px) {
	.pca-timeline {
		flex-direction: row;
		justify-content: space-between;
		gap: var(--wp--preset--spacing--s);
	}

	.pca-timeline::before {
		top: 0.9rem;
		bottom: auto;
		left: 0;
		right: 0;
		width: auto;
		height: 2px;
	}

	.pca-timeline li {
		flex: 1;
		padding-left: 0;
		padding-top: var(--wp--preset--spacing--l);
		text-align: center;
	}

	.pca-timeline li::before {
		left: 50%;
		top: 0;
		transform: translateX(-50%);
	}
}

/* ---------- Tienda en la home ---------- */

.pca-shop-grid {
	margin-top: var(--wp--preset--spacing--l);
	gap: var(--wp--preset--spacing--s);
}

.pca-shop-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--xs);
	flex: 1 1 220px;
	max-width: 280px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--wp--custom--radius--button);
	padding: 0.65em 1.1em;
	text-align: left;
}

@media (prefers-reduced-motion: no-preference) {
	.pca-shop-item {
		transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
	}

	.pca-shop-item:hover {
		background: rgba(255, 255, 255, 0.11);
		border-color: rgba(255, 255, 255, 0.32);
		transform: translateY(-2px);
	}

	.pca-shop-item:hover .pca-shop-item-icon svg {
		filter: drop-shadow(0 0 5px rgba(203, 175, 131, 0.55));
	}

	.pca-shop-item:hover .pca-shop-item-arrow {
		transform: translateX(3px);
	}
}

.pca-shop-item-icon {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	display: flex;
	align-items: center;
	justify-content: center;
}

.pca-shop-item-icon svg {
	width: 22px;
	height: 22px;
	filter: drop-shadow(0 0 3px rgba(203, 175, 131, 0.35));
}

@media (prefers-reduced-motion: no-preference) {
	.pca-shop-item-icon svg {
		transition: filter 0.25s ease;
	}
}

.pca-shop-item h3 {
	flex: 1 1 auto;
	margin: 0;
}

.pca-shop-item h3 a {
	color: inherit;
	text-decoration: none;
}

.pca-shop-item h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.pca-shop-item h3 a:hover,
.pca-shop-item h3 a:focus-visible {
	text-decoration: underline;
}

.pca-shop-item-arrow {
	flex-shrink: 0;
	opacity: 0.7;
}

@media (prefers-reduced-motion: no-preference) {
	.pca-shop-item-arrow {
		transition: transform 0.25s ease;
	}
}

/* ---------- Botones ---------- */

@media (prefers-reduced-motion: no-preference) {
	.wp-block-button__link {
		transition: filter 0.2s ease, background-color 0.2s ease, color 0.2s ease;
	}
}

.wp-block-button__link:hover {
	filter: brightness(1.08);
}

.pca-cta-arrow {
	display: inline-block;
	margin-left: 0.4em;
}

@media (prefers-reduced-motion: no-preference) {
	.pca-cta-arrow {
		transition: transform 0.2s ease;
	}

	.wp-block-button__link:hover .pca-cta-arrow {
		transform: translateX(3px);
	}
}

.wp-block-button.is-style-outline .wp-block-button__link {
	border-width: 1px;
}

.pca-section-light .wp-block-button.is-style-outline .wp-block-button__link:hover,
.pca-section-light .wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--azul-marino);
	color: var(--wp--preset--color--blanco);
	filter: none;
}

/* theme.json fuerza navy en todos los headings (styles.elements.heading),
   coincidencia directa que gana a la herencia del blanco de la sección.
   Se corrige aquí, de forma general, para toda sección de fondo oscuro
   (afectaba a tienda, Reiki en profundidad y CTA final, no solo al hero).
   Se añade ".wp-block-post-title" (bloque de título dinámico, usado en la
   ficha de producto WooCommerce) porque no lleva la clase "wp-block-heading"
   -- por eso el H1 de single-product.html quedaba navy sobre navy pese a
   que el resto de páginas con Heading normal ya estaban corregidas. */
.pca-section-dark .wp-block-heading,
.pca-section-dark .wp-block-post-title {
	color: var(--wp--preset--color--blanco);
}

.pca-section-dark .pca-card-link a {
	color: var(--wp--preset--color--blanco);
}

.pca-section-dark .wp-block-button.is-style-outline .wp-block-button__link:hover,
.pca-section-dark .wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--blanco);
	color: var(--wp--preset--color--azul-marino);
	filter: none;
}

/* Gana el empate de especificidad frente a ".pca-section-dark .wp-block-heading"
   y ".pca-section-dark .pca-card-link a" por venir después: las tarjetas
   blancas siempre llevan texto navy, sin importar el fondo de la sección. */
.pca-card .wp-block-heading,
.pca-card .pca-card-link a,
.pca-b2b-banner .pca-card-link a {
	color: var(--wp--preset--color--azul-marino);
}

/* La cápsula del eyebrow siempre es rosa pálido: su texto debe ser navy
   siempre, no heredar el blanco de una sección oscura. */
.pca-eyebrow-rosa {
	color: var(--wp--preset--color--azul-marino);
}

/* ---------- Formularios (mínimo, para bloques nativos como Búsqueda) ---------- */

input,
textarea,
select {
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: var(--wp--preset--font-size--medium);
	border: 1px solid var(--wp--preset--color--azul-marino);
	border-radius: var(--wp--custom--radius--sm);
	padding: 0.6em 0.9em;
}

/* ============================================================================
   SISTEMA DE PÁGINAS INTERIORES
   Gramática visual compartida por todas las páginas que no son la home:
   hero interior, split editorial, bloque de autoridad y FAQ editorial. Todas
   parten del mismo --pca-inset y de las mismas clases de sección/tarjeta que
   ya usa la home, para que las páginas interiores se perciban como la misma
   web y no como plantillas aparte.
   ============================================================================ */

/* ---------- Hero interior ---------- */

/* Más corto que el hero de home (que ocupa 100svh con fotografía): aquí no
   hay imagen ("sin fotografías inventadas"), solo el fondo navy de marca,
   partículas atmosféricas y el mensaje de la página. Al no estar la cabecera
   superpuesta en páginas interiores (esa es una regla solo de body.home,
   ver ".pca-site-header"), no necesita compensar su altura como sí hace
   ".pca-hero-inner". */
.pca-hero-interior {
	padding-block: var(--wp--preset--spacing--2xl);
}

/* CAUSA RAIZ (QA prelaunch): esto confinaba TODO el bloque del hero (eyebrow
   + H1 + parrafo + CTA) a 680px, el mismo ancho de lectura del parrafo. En
   monitores grandes (1440px+) eso deja el hero encajonado en el centro con
   muchisimo vacio lateral. Se separa: el bloque completo usa --pca-standard
   (mas ancho, para que H1 y CTA respiren), y solo el parrafo (abajo) se
   queda en --pca-reading para no perder la longitud de linea comoda. */
.pca-hero-interior-inner {
	position: relative;
	z-index: 2;
	max-width: var(--pca-standard);
}

.pca-hero-interior-eyebrow {
	margin-bottom: var(--wp--preset--spacing--s);
}

.pca-hero-interior-title {
	color: var(--wp--preset--color--blanco);
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.12;
}

/* CAUSA RAIZ (feedback de Pilar, "el subtitulo puede ocupar lo mismo que el
   titulo?"): el H1 usa el ancho completo de ".pca-hero-interior-inner"
   (--pca-standard, 1040px), pero el subtitulo se limitaba aparte a 56ch
   (~550px en la tipografia del tema) -- una franja mucho mas estrecha que el
   titular, que es exactamente lo que se veia desequilibrado. Se amplia a
   72ch: sigue dentro del rango tipografico comodo para lectura (50-75
   caracteres por linea), pero deja que el parrafo respire visualmente igual
   que el titulo en vez de quedarse recogido en el centro. Regla unica y
   reutilizada por las 5 paginas de servicio (Acompañamiento, Reiki,
   Meditacion, Cursos, Sobre mi), no un parche por pagina. */
.pca-hero-interior-text {
	opacity: 0.88;
	max-width: 72ch;
}

/* Texto "lede" de apertura de sección (p. ej. la frase introductoria de
   Meditación): antes usaba el token --font-size--large, que a partir de
   ~1024px se recalcula hasta 36px (ver nota en .pca-faq-item summary) y
   quedaba sobredimensionado dentro de una columna de lectura estrecha.
   Escala propia, ligeramente por encima del body pero muy por debajo de
   un H3. */
.pca-lede {
	font-size: clamp(1.1rem, 1rem + 0.45vw, 1.375rem);
	line-height: 1.5;
	max-width: 65ch;
}

/* Misma caída atmosférica que ".pca-hero-fade" en la home, en una versión
   más corta acorde a la altura del hero interior: el navy de marca
   (azul-marino) se funde en el azul profundo del resto de la página sin
   corte duro. */
.pca-hero-interior-fade {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 140px;
	max-width: none;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(7, 17, 34, 0) 0%, var(--wp--preset--color--azul-profundo) 100%);
}

/* ---------- Split editorial ---------- */

/* Ratios de columna (40/60, 45/55, 55/45...) se fijan por bloque via
   flex-basis, igual que en home; esta clase solo aporta el espaciado
   compartido entre columnas para que todos los splits de páginas interiores
   respiren igual. */
.pca-split {
	gap: var(--wp--preset--spacing--xl);
}

/* ---------- Bloque de autoridad ---------- */

/* Mismo lenguaje que ".pca-reiju-card" en home (acento lateral champagne en
   vez de un panel completo): eyebrow + título + texto + un dato/linaje
   destacado. Pensado para un uso selectivo, no para repetirse en cada
   sección. */
.pca-authority {
	border-left: 2px solid var(--wp--preset--color--champagne);
	padding-left: var(--wp--preset--spacing--m);
}

.pca-authority-datum {
	margin-top: var(--wp--preset--spacing--m);
	font-weight: 700;
	letter-spacing: 0.01em;
}

.pca-authority-datum span {
	color: var(--wp--preset--color--champagne);
}

/* ---------- FAQ editorial ---------- */

/* <details>/<summary> nativos: acordeón accesible y sin JavaScript. Vive
   listo para preguntas reales; no se rellena con FAQs inventadas. */
.pca-faq {
	max-width: var(--pca-reading);
}

.pca-faq-item {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	padding-block: var(--wp--preset--spacing--m);
}

.pca-faq-item:last-child {
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

/* CAUSA RAIZ (QA prelaunch): el token --wp--preset--font-size--large que
   usaba esta regla se declara en theme.json con un maximo fluido de 1.5rem,
   pero WordPress lo recalcula en tiempo real hasta 36px en viewports
   grandes (confirmado por computed style en vivo) -- el mismo tamaño que
   un H3, por eso las preguntas competian con los titulares. Se sustituye
   por un clamp propio, acotado y predecible, pensado para leerse como
   subtitulo interactivo y no como heading. */
.pca-faq-item summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--m);
	font-family: var(--wp--preset--font-family--titulares);
	font-weight: 600;
	font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.375rem);
	line-height: 1.35;
}

.pca-faq-item summary::-webkit-details-marker {
	display: none;
}

.pca-faq-item summary::after {
	content: "+";
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: 1.5rem;
	font-weight: 300;
	flex-shrink: 0;
}

.pca-faq-item[open] summary::after {
	content: "\2212";
}

.pca-faq-item p {
	margin-top: var(--wp--preset--spacing--s);
	margin-bottom: 0;
	opacity: 0.85;
	max-width: 65ch;
}

/* ---------- Próximamente (Hipnosis Clínica Emocional) ---------- */

/* Mención discreta de un servicio en preparación: nunca se presenta como
   reservable. Reutiliza ".pca-badge" con una variante de contorno en vez de
   relleno, para que quede claramente subordinada a los tres caminos activos. */
.pca-badge-outline {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.4);
	color: var(--wp--preset--color--blanco);
}

.pca-proximamente {
	margin-top: var(--wp--preset--spacing--l);
	padding-top: var(--wp--preset--spacing--l);
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	opacity: 0.85;
}

.pca-proximamente p {
	margin: 0.5em 0 0;
}

/* ---------- Sobre mí ---------- */

/* CAUSA RAIZ (feedback de Pilar: "son como tres bloques pero sin orden"):
   "Mi búsqueda", "La transformación" y "Cómo acompaño hoy" vivían apilados
   solo con margen vertical, sin ninguna señal visual de que forman una
   misma narrativa progresiva. Se reutiliza el mismo divisor ya establecido
   en ".pca-sobremi-row + .pca-sobremi-row" (borde superior sutil sobre
   fondo navy) para dar ritmo y jerarquía entre los tres bloques, sin
   inventar contenido nuevo ni tocar "La transformación"/"Cómo acompaño hoy"
   en si mismos (Pilar dijo que le gustan). */
.pca-sobremi-block {
	padding-top: var(--wp--preset--spacing--l);
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.pca-sobremi-row {
	align-items: center;
	gap: var(--wp--preset--spacing--m);
	padding-block: var(--wp--preset--spacing--m);
}

.pca-sobremi-row + .pca-sobremi-row {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.pca-sobremi-row-index {
	flex-shrink: 0;
	width: 2.5rem;
	font-family: var(--wp--preset--font-family--titulares);
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--champagne);
}

/* ---------- Contacto ---------- */

.pca-contact-grid {
	gap: var(--wp--preset--spacing--xl);
}

.pca-contact-info-item {
	margin-bottom: var(--wp--preset--spacing--m);
}

.pca-contact-info-item p {
	margin: 0.2em 0 0;
	opacity: 0.85;
}

/* Espacio reservado para el futuro bloque de formulario nativo (Contact
   Form / bloque de WordPress): mantiene la composición estable aunque hoy
   solo contenga el texto de orientación. */
.pca-contact-form-area {
	background: rgba(255, 255, 255, 0.04);
	border: 1px dashed rgba(255, 255, 255, 0.24);
	border-radius: var(--wp--custom--radius--card);
	padding: var(--wp--preset--spacing--l);
}

/* ---------- Tienda premium ---------- */

.pca-tienda-nav {
	gap: var(--wp--preset--spacing--s);
}

/* Bandas destacadas (sesiones, cursos y talleres): tratamiento editorial en
   vez de una parrilla de producto, con icono lineal champagne, texto y CTA. */
.pca-tienda-band {
	align-items: center;
	gap: var(--wp--preset--spacing--l);
	padding-block: var(--wp--preset--spacing--l);
}

.pca-tienda-band + .pca-tienda-band {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.pca-tienda-band-icon {
	flex-shrink: 0;
	width: 64px;
	height: 64px;
}

.pca-tienda-band-icon svg {
	width: 100%;
	height: 100%;
	filter: drop-shadow(0 0 5px rgba(203, 175, 131, 0.35));
}

.pca-tienda-band-eyebrow {
	margin-bottom: 0.3em;
}

/* Categorías secundarias (productos digitales, fondos de pantalla): mismo
   lenguaje que ".pca-shop-item" de home pero en tarjeta, para dar más peso
   visual sin convertirlas en parrilla de producto. */
.pca-tienda-cat-grid {
	gap: var(--wp--preset--spacing--m);
	align-items: stretch;
}

.pca-tienda-cat {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--wp--custom--radius--card);
	padding: var(--wp--preset--spacing--m);
	flex: 1 1 240px;
	max-width: 320px;
}

.pca-tienda-cat p {
	opacity: 0.75;
	margin: 0.3em 0 0;
}

.pca-tienda-cat-icon {
	width: 44px;
	height: 44px;
	margin-bottom: var(--wp--preset--spacing--xs);
}

.pca-tienda-cat-icon svg {
	width: 100%;
	height: 100%;
	filter: drop-shadow(0 0 4px rgba(203, 175, 131, 0.3));
}

/* ---------- Cursos: agenda "bajo demanda" ---------- */

.pca-cursos-demanda {
	gap: var(--wp--preset--spacing--m);
}

.pca-cursos-demanda-item {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--wp--custom--radius--card);
	padding: var(--wp--preset--spacing--m);
	flex: 1 1 260px;
}

/* ---------- Blog editorial ---------- */

.pca-blog-grid {
	gap: var(--wp--preset--spacing--l) var(--wp--preset--spacing--m);
}

.pca-blog-grid .wp-block-post {
	background: var(--wp--preset--color--blanco);
	border-radius: var(--wp--custom--radius--card);
	box-shadow: var(--wp--custom--shadow--card);
	padding: var(--wp--preset--spacing--m) var(--wp--preset--spacing--m) var(--wp--preset--spacing--l);
	color: var(--wp--preset--color--azul-marino);
}

.pca-blog-grid .wp-block-post-title a {
	color: inherit;
}

.pca-blog-grid .wp-block-post-excerpt {
	opacity: 0.85;
}

@media (prefers-reduced-motion: no-preference) {
	.pca-faq-item summary::after {
		transition: transform 0.2s ease;
	}

	.pca-tienda-cat {
		transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
	}

	.pca-tienda-cat:hover {
		background: rgba(255, 255, 255, 0.09);
		border-color: rgba(255, 255, 255, 0.3);
		transform: translateY(-3px);
	}
}

/* ---------- Tienda: hero partido ---------- */

/* Única página interior con hero de composición partida (texto + panel
   visual), a petición explícita de la clienta a partir de una referencia
   visual concreta. El panel visual reutiliza el mismo lenguaje de
   partículas/órbitas del resto del sitio (nunca una fotografía inventada). */
.pca-tienda-hero {
	gap: var(--wp--preset--spacing--xl);
}

/* CAUSA RAIZ (feedback de Pilar: "el texto de arriba de Tienda no respira,
   debe ocupar el ancho util por la izquierda"): este limite de 600px se
   fijo antes de que el resto de heroes interiores adoptaran el ancho
   estandar de ".pca-hero-interior-inner" (1040px, ver la norma de
   equilibrio H1/subtitulo). El texto ya estaba anclado a la izquierda
   (nunca fue un problema de alineacion), pero al quedar mucho mas estrecho
   que el propio hero fotografico, dejaba una franja de foto vacia a su
   derecha que se leia como "texto flotando", no como una composicion con
   jerarquia clara. Se retira el limite propio para que herede el ancho
   estandar de ".pca-hero-interior-inner" (misma pauta que Reiki, Sobre mi,
   Cursos, etc.), sin tocar la alineacion ni la posicion.
   Actualizacion 2026-08-12: el ancho efectivo del hero de Tienda ya no es
   ese estandar de 1040px -- ver el nuevo tope en ".pca-tienda-hero-inner"
   mas abajo, que lo acota de nuevo por una razon de composicion (liberar la
   cara de la mujer en la foto). Este "100%" sigue siendo correcto: el
   parrafo/CTA deben ocupar el 100% de lo que le deje su contenedor, sea
   cual sea ese ancho. */
.pca-tienda-hero-copy {
	max-width: 100%;
}

/* Ritmo vertical del hero: el eyebrow (".pca-eyebrow", compartido en todo
   el sitio) trae su propio "margin-bottom:1em" pensado para fluir junto a
   un título con herencia normal de márgenes. Dentro de este contenedor
   flex en columna los márgenes NO colapsan entre hermanos, así que ese
   margen se sumaba al "margin-top" del H1 (24px) y dejaba un salto de
   ~40px justo después del eyebrow, más ancho que el resto de la
   composición (24px entre H1→texto y texto→botones). Se anula aquí para
   que los cuatro elementos del hero respiren con el mismo ritmo. */
.pca-tienda-hero-copy .pca-eyebrow {
	margin-bottom: 0;
}

/* Hero cinematográfico: la fotografía cósmica ya aprobada y usada en la
   home (pili-hero-master.webp/-optimized.jpg) se reutiliza aquí a sangre completa, igual
   que ".pca-hero-photo/.pca-hero-scrim" en el hero principal. No se genera
   ninguna imagen ni identidad nueva: es el mismo activo, en un contexto
   distinto y más bajo. El scrim funde la imagen con el fondo por la
   izquierda para que el texto siga siendo legible sin que la foto quede
   enmarcada como una tarjeta independiente. */
.pca-tienda-hero {
	position: relative;
	min-height: 640px;
	display: flex;
	align-items: center;
	padding-block: var(--wp--preset--spacing--2xl);
}

.pca-tienda-hero-photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 78% 30%;
	z-index: 0;
}

/* CAUSA RAIZ de la linea/costura reportada en la parte superior del hero:
   este div es el segundo hijo dentro del bloque wp:html (tras <picture>),
   y WordPress aplica su blockGap global (24px, ".is-layout-flow > * + *")
   como margin-top a cualquier hijo que no sea el primero de un contenedor
   de flujo -- aunque el elemento este position:absolute. Con inset:0 +
   margin-top:24px, el navegador desplaza el scrim 24px hacia abajo,
   dejando esa franja de la fotografia sin degradado y creando la costura
   visible. ".pca-hero-interior-fade" no sufre lo mismo porque se ancla con
   bottom:0 en vez de inset:0. */
.pca-tienda-hero-scrim {
	position: absolute;
	inset: 0;
	margin: 0;
	max-width: none;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		100deg,
		rgba(0, 33, 58, 0.95) 0%,
		rgba(0, 33, 58, 0.82) 28%,
		rgba(0, 33, 58, 0.4) 50%,
		rgba(0, 33, 58, 0.08) 68%,
		rgba(0, 33, 58, 0) 82%
	);
}

.pca-tienda-hero-inner {
	position: relative;
	z-index: 2;
	width: 100%;
}

/* CAUSA RAIZ (feedback de Alberto, 2026-08-12): a partir de 782px la foto
   fija su punto focal en el 74% del ancho (ver regla siguiente) -- la cara
   de la mujer cae ahí. El bloque de texto heredaba el ancho estándar de
   ".pca-hero-interior-inner" (1040px), que a esos anchos invade justo esa
   zona. Se acota el ancho SOLO para Tienda (clase ".pca-tienda-hero-inner",
   no se toca ".pca-hero-interior-inner" para no afectar a Reiki/Meditación/
   Acompañamiento/Cursos/Sobre mí/Contacto) para que el texto quede
   claramente en el tercio izquierdo del hero y libere la cara. El punto de
   partida por la izquierda no cambia -- solo se reduce el ancho máximo, el
   texto ya estaba anclado a la izquierda. Por debajo de 782px no se toca
   nada: el scrim ya oscurece toda la foto de banda a banda y el texto ya
   ocupa el ancho completo de forma segura. */
@media (min-width: 782px) {
	/* ".pca-tienda-hero picture" (el wrapper <picture>, no solo el <img>
	   ".pca-tienda-hero-photo" de dentro) se quedaba en flujo normal
	   (position:static) con ancho colapsado a 0 -- su unico hijo, la
	   imagen, ya era absolute. Ese <picture> fantasma de 0px era un
	   segundo elemento flex real dentro de ".pca-tienda-hero" (junto al
	   bloque de texto), que interfería con como se repartía el espacio
	   entre ambos. Se saca <picture> del flujo igual que ya estaban el
	   scrim y el degradado, dejando el bloque de texto como unico item
	   flex real. Solo afecta a Tienda. */
	.pca-tienda-hero picture {
		position: absolute;
		inset: 0;
		/* Mismo problema que el bloque de texto: al ser <picture> tambien
		   hijo directo de la seccion ".is-layout-constrained", WordPress le
		   aplica su propio "max-width" (760px, el "contentSize" global del
		   tema) y lo centra -- por eso "inset:0" no bastaba para que
		   cubriera todo el hero. Mismo "!important" acotado y ya
		   justificado arriba para el bloque de texto. */
		width: 100% !important;
		max-width: none !important;
	}

	.pca-tienda-hero-inner {
		max-width: clamp(420px, 55%, 560px);
	}

	/* Con un unico item flex, el centrado seguia sin ceder: el layout
	   "constrained" de Gutenberg centra a sus hijos con
	   ".is-layout-constrained > :where(...)". Se probo primero subir la
	   especificidad con un selector descendiente (0,2,0) frente a la
	   (0,1,0) de esa regla -- en teoria suficiente, pero verificado en vivo
	   que NO ganaba la cascada (motivo no concluyente: posiblemente los
	   estilos globales inline de WordPress se evaluan en un origen/orden
	   que esta regla descendiente no lograba superar pese a la
	   especificidad). Confirmado empiricamente que solo "!important" fuerza
	   el resultado real en el navegador. Uso justificado y acotado: es la
	   unica forma verificada de anclar el bloque a la izquierda en vez de
	   centrado, solo para Tienda, sin tocar ninguna otra pagina. */
	.pca-tienda-hero .pca-tienda-hero-inner {
		margin-left: 0 !important;
		margin-right: auto !important;
	}

	/* CAUSA RAIZ real del encuadre roto: WooCommerce trae su propia regla
	   global ".woocommerce img, .woocommerce-page img { height: auto; }"
	   (dos clases, mas especifica que un simple ".pca-tienda-hero-photo").
	   Con "height:auto" y el aspect-ratio intrinseco del <img> (atributos
	   width/height originales de la foto), el navegador calculaba una
	   altura menor que los 640px reales del hero -- de ahi el recorte
	   distinto. No es nuevo de este cambio: esa regla de WooCommerce ya
	   afectaba a esta imagen antes; simplemente antes coincidia por
	   casualidad con el resto del layout de forma menos visible. Se fuerza
	   aqui la altura real en pixeles (640px, igual al "min-height" ya fijo
	   de ".pca-tienda-hero" en este mismo punto de ruptura) con
	   "!important", unico nivel que gana de forma fiable a esa regla de
	   WooCommerce -- afecta solo a esta imagen concreta, no a ninguna otra
	   imagen de WooCommerce en el sitio. object-fit:cover + object-position
	   ya existentes hacen el resto del encuadre. */
	.pca-tienda-hero-photo {
		height: 640px !important;
		object-position: 74% center;
	}
}

/* ---------- Tienda: navegación de categorías (icono protagonista) ---------- */

/* Sobrescribe, solo dentro de esta navegación de la página Tienda, la
   cápsula totalmente redondeada de ".pca-shop-item" (compartida con la
   miniatura de la home, que no se toca) por un rectángulo con esquinas más
   suaves y un icono más grande, acorde a la referencia visual aprobada. */
.pca-tienda-nav.pca-shop-grid,
.pca-tienda-nav {
	gap: var(--wp--preset--spacing--s);
}

.pca-tienda-nav .pca-shop-item {
	border-radius: var(--wp--custom--radius--sm);
	padding: 0.85em 1.3em;
	flex: 1 1 220px;
}

.pca-tienda-nav .pca-shop-item-icon {
	width: 30px;
	height: 30px;
}

.pca-tienda-nav .pca-shop-item-icon svg {
	width: 30px;
	height: 30px;
}

/* ---------- Tienda: motivo decorativo compartido (constelación) ---------- */

/* Mismo lenguaje visual que el hero (órbitas + punto luminoso + partículas),
   en miniatura, superpuesto a cada panel de color: así ninguna de las
   piezas de "Productos destacados" ni "Colecciones destacadas" se percibe
   como un simple rectángulo de degradado plano. */
.pca-tienda-visual {
	position: relative;
	overflow: hidden;
}

.pca-tienda-visual-motif {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* ---------- Tienda: productos destacados (rejilla de 6) ---------- */

.pca-tienda-featured-header {
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--s);
	margin-bottom: var(--wp--preset--spacing--m);
}

.pca-tienda-featured-header .pca-section-title {
	margin: 0;
	max-width: none;
	text-align: left;
}

.pca-tienda-featured-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--l) var(--wp--preset--spacing--m);
}

@media (max-width: 1024px) {
	.pca-tienda-featured-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.pca-tienda-featured-grid {
		grid-template-columns: 1fr;
	}
}

/* Tratamiento minimalista y editorial (imagen + texto directamente sobre el
   fondo de la sección, sin tarjeta blanca): así se acerca a la referencia
   aprobada, donde las seis piezas se perciben como una colección con
   entidad propia y no como seis tarjetas de producto genéricas. */
.pca-tienda-featured-item .pca-tienda-visual {
	aspect-ratio: 4 / 3;
	border-radius: var(--wp--custom--radius--card);
	margin-bottom: var(--wp--preset--spacing--s);
}

.pca-tienda-featured-item .pca-badge {
	background: transparent;
	color: var(--wp--preset--color--champagne);
	padding: 0;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	margin-bottom: 0.3em;
}

.pca-tienda-featured-item h3 {
	margin-bottom: 0.2em;
}

/* ---------- Tienda: colecciones destacadas ---------- */

.pca-tienda-collections {
	gap: var(--wp--preset--spacing--m);
}

/* CAUSA RAIZ (rediseño estructural): esta tarjeta vivía como una fila
   horizontal (texto | visual 40% | flecha). Mientras la flecha era solo un
   icono circular de ~36px eso cabía; en cuanto pasó a llevar texto real
   ("Explorar cursos y talleres →", más ancho y con "white-space:nowrap")
   dejó de haber sitio en una columna de ~354px: el bloque de texto se veía
   forzado a un ancho de apenas 12-16px y el título se partía letra a letra
   en vertical. No es un ajuste de valores lo que hacía falta, sino cambiar
   la composición: se adopta el mismo lenguaje ya probado en las tarjetas
   de producto (".pca-wc-card"): visual a sangre completa arriba, cuerpo de
   texto con su propio padding debajo, CTA anclado al final del cuerpo. */
.pca-tienda-collection-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--wp--custom--radius--card);
	height: 100%;
	overflow: hidden;
}

/* Antes solo la flecha circular era clicable dentro de una tarjeta grande,
   lo que no comunicaba que toda la tarjeta llevaba a la categoría. Se
   extiende el área de clic al bloque completo con un pseudo-elemento sobre
   el mismo enlace real (nunca un <a> anidado ni duplicado), y se refleja
   en hover/focus tanto en el borde de la tarjeta como en el propio enlace. */
@media (prefers-reduced-motion: no-preference) {
	.pca-tienda-collection-card {
		transition: border-color 0.2s ease, background-color 0.2s ease;
	}
}

.pca-tienda-collection-card:has(.pca-tienda-collection-arrow:hover),
.pca-tienda-collection-card:has(.pca-tienda-collection-arrow:focus-visible) {
	border-color: rgba(203, 175, 131, 0.4);
	background: rgba(255, 255, 255, 0.08);
	cursor: pointer;
}

.pca-tienda-collection-card .pca-tienda-visual {
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 0;
	flex-shrink: 0;
	height: auto;
}

/* Cuerpo de texto de la tarjeta: mismo patrón que ".pca-wc-card-body" en el
   catálogo de producto (padding propio, columna flex, CTA empujado al
   final con "margin-top:auto" para que las tres tarjetas de una fila
   terminen a la misma altura pese a tener descripciones de longitud
   distinta). */
.pca-tienda-collection-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 0.3em;
	padding: var(--wp--preset--spacing--m);
}

.pca-tienda-collection-card h3 {
	margin: 0 0 0.2em;
}

.pca-tienda-collection-card p {
	margin: 0;
	opacity: 0.75;
}

/* Antes era solo una flecha sin texto (ambigua fuera de contexto para
   lectores de pantalla y poco clara como CTA); ahora lleva el texto real
   de la acción ("Ver sesiones", "Explorar cursos y talleres"...) y un
   ::after que extiende el área de clic a toda la tarjeta (ver
   ".pca-tienda-collection-card" arriba), sin crear ningún <a> anidado. */
.pca-tienda-collection-arrow {
	/* Sin "position" propio a propósito: su "::after" de abajo se posiciona
	   contra ".pca-tienda-collection-card" (el ancestro con position:relative
	   más cercano), no contra este enlace, para poder cubrir la tarjeta
	   entera con "inset:0" en vez de solo un margen alrededor del texto. */
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 0.4em;
	margin-top: auto;
	padding-top: 0.6em;
	color: var(--wp--preset--color--blanco);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
	border-radius: var(--wp--custom--radius--sm);
}

.pca-tienda-collection-arrow::after {
	content: "";
	position: absolute;
	inset: 0;
}

.pca-tienda-collection-arrow:hover,
.pca-tienda-collection-arrow:focus-visible {
	text-decoration: underline;
}

/* ---------- Tienda: barra de cierre ---------- */

.pca-tienda-closing {
	position: relative;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--l);
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--wp--custom--radius--card);
	padding: var(--wp--preset--spacing--l);
	overflow: hidden;
}

.pca-tienda-closing-heading {
	position: relative;
	z-index: 1;
	max-width: 460px;
	margin: 0;
}

.pca-tienda-closing-aside {
	position: relative;
	z-index: 1;
	align-items: center;
	gap: var(--wp--preset--spacing--m);
	flex-wrap: wrap;
	padding-left: var(--wp--preset--spacing--l);
	border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.pca-tienda-closing-text {
	max-width: 320px;
	margin: 0;
	opacity: 0.8;
}

/* ---------- Responsive: páginas interiores ---------- */

@media (max-width: 781px) {
	.pca-hero-interior-title {
		font-size: var(--wp--preset--font-size--x-large);
	}

	.pca-sobremi-row,
	.pca-tienda-band {
		flex-direction: column;
		align-items: flex-start;
	}

	.pca-tienda-hero {
		min-height: 520px;
	}

	/* CAUSA RAIZ (hotfix 2026-08-17, reportado por Pilar desde movil): la
	   misma regla global de WooCommerce ".woocommerce img, .woocommerce-page
	   img { height:auto }" documentada mas abajo para el punto de ruptura de
	   escritorio (>=782px) tambien gana aqui, por debajo de 782px, porque
	   nunca se replico esa correccion en este breakpoint. Con "height:auto",
	   el navegador calcula la altura de la foto solo a partir de su relacion
	   de aspecto intrinseca (1672x941) y el 100% de ancho disponible -- en
	   390px de viewport eso da ~220px de foto real dentro de un hero de
	   520px, dejando casi 300px de la mitad inferior del hero sin fotografia
	   (solo el degradado del scrim sobre el fondo liso). Se fuerza aqui la
	   misma tecnica ya probada en escritorio (altura real en pixeles con
	   "!important", igual al "min-height" de ".pca-tienda-hero" en este
	   mismo punto de ruptura) para que la foto vuelva a cubrir el hero
	   completo; object-fit:cover + object-position ya existentes hacen el
	   resto del encuadre. Afecta solo a esta imagen concreta de Tienda. */
	.pca-tienda-hero-photo {
		height: 520px !important;
		object-position: 68% center;
	}

	.pca-tienda-hero-scrim {
		background: linear-gradient(
			180deg,
			rgba(0, 33, 58, 0.55) 0%,
			rgba(0, 33, 58, 0.88) 55%,
			rgba(0, 33, 58, 0.97) 100%
		);
	}

	.pca-tienda-closing-aside {
		border-left: none;
		padding-left: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.18);
		padding-top: var(--wp--preset--spacing--m);
		width: 100%;
	}
}

/* ---------- Newsletter (Blog) ---------- */
/* El plugin piliconalas-newsletter genera el HTML del formulario (lógica,
   validación, guardado); este bloque solo aporta el aspecto visual
   navy/champagne aprobado, consistente con la separación tema/plugin del
   proyecto. */

.pca-newsletter-form-wrap {
	max-width: 32rem;
	margin-inline: auto;
	margin-top: var(--wp--preset--spacing--m);
}

.pca-newsletter-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.pca-newsletter-field {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--xs);
}

.pca-newsletter-field input[type="email"] {
	flex: 1 1 14rem;
	min-width: 0;
	padding: 0.85em 1.1em;
	border-radius: var(--wp--custom--radius--button, 999px);
	border: 1px solid rgba(255, 255, 255, 0.35);
	background: rgba(255, 255, 255, 0.08);
	color: var(--wp--preset--color--blanco);
	font-size: var(--wp--preset--font-size--small);
}

.pca-newsletter-field input[type="email"]::placeholder {
	color: rgba(255, 255, 255, 0.65);
}

.pca-newsletter-field input[type="email"]:focus-visible {
	outline: 2px solid var(--wp--preset--color--champagne);
	outline-offset: 2px;
}

.pca-newsletter-submit {
	flex: 0 0 auto;
	white-space: nowrap;
}

.pca-newsletter-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.6em;
	margin-top: var(--wp--preset--spacing--xs);
	font-size: var(--wp--preset--font-size--small);
	opacity: 0.9;
	text-align: left;
	cursor: pointer;
}

.pca-newsletter-consent input[type="checkbox"] {
	margin-top: 0.2em;
	flex-shrink: 0;
}

.pca-newsletter-consent a {
	color: var(--wp--preset--color--champagne);
	text-decoration: underline;
}

.pca-newsletter-notice {
	border-radius: var(--wp--custom--radius--sm, 8px);
	padding: 0.75em 1.1em;
	margin-bottom: var(--wp--preset--spacing--xs);
	font-size: var(--wp--preset--font-size--small);
}

.pca-newsletter-notice--success {
	background: rgba(203, 175, 131, 0.18);
	border: 1px solid rgba(203, 175, 131, 0.45);
}

.pca-newsletter-notice--error {
	background: rgba(255, 222, 245, 0.12);
	border: 1px solid rgba(255, 222, 245, 0.4);
}

@media (max-width: 480px) {
	.pca-newsletter-field {
		flex-direction: column;
		align-items: stretch;
	}

	.pca-newsletter-submit {
		width: 100%;
	}
}

/* ---------- Ficha individual: portada completa para Productos digitales ---------- */

/* CAUSA RAIZ: ".woocommerce-product-gallery" (bloque nativo de WooCommerce,
   no un componente de este tema) fuerza un marco fijo "aspect-ratio:4/3"
   con "overflow:hidden". Las portadas de producto digital son mas altas
   que anchas (retrato), asi que ese marco 4:3 recortaba su parte superior
   e inferior en la ficha individual -- aunque el archivo servido
   ("woocommerce_single", 600x750/600x800) nunca estuvo distorsionado ni
   recortado en si mismo, solo el contenedor lo tapaba.
   Se anula el marco fijo SOLO en la ficha individual de la categoria
   "Productos digitales", usando la clase que WooCommerce ya añade al
   <body> ("product_cat-productos-digitales") -- no toca ".woocommerce img"
   en general, no toca la cuadricula de la categoria, no toca el carrito,
   no toca ninguna otra categoria de producto (sesiones, fisicos, Vela,
   Agenda, Fabulas fisico). El icono de zoom nativo sigue funcionando: no
   se ha tocado su marcado, solo el tamaño/ajuste de la imagen visible. */
body.single-product.product_cat-productos-digitales .woocommerce-product-gallery,
body.single-product.product_cat-productos-digitales .woocommerce-product-gallery__wrapper,
body.single-product.product_cat-productos-digitales .woocommerce-product-gallery__image {
	aspect-ratio: auto;
	overflow: visible;
}

body.single-product.product_cat-productos-digitales .woocommerce-product-gallery img {
	width: 100%;
	height: auto;
	max-height: 720px;
	object-fit: contain;
	margin: 0 auto;
}