/*
 * Pili con Alas — capa de estilos WooCommerce.
 *
 * Se carga SOLO en vistas de WooCommerce (tienda, producto, categoria/etiqueta,
 * carrito, checkout, cuenta) via pca_is_woocommerce_view() en functions.php,
 * para no penalizar el resto del sitio. Reutiliza los tokens de theme.json
 * (colores, radios, tipografia) en vez de duplicar valores.
 *
 * Los selectores de bloque de WooCommerce (wc-block-components-*, wp-block-
 * woocommerce-*) son la nomenclatura publica y estable de WooCommerce Blocks;
 * se evita !important salvo para anular reglas inline que WooCommerce aplica
 * a veces por JS (marcado explicitamente donde ocurre).
 */

/* ---------- 1. Cabecera de checkout simplificada ---------- */

.pca-checkout-header .pca-checkout-header-note {
	margin: 0;
	display: flex;
	align-items: center;
}

.pca-checkout-header-note a {
	color: var(--wp--preset--color--blanco);
	opacity: 0.85;
	text-decoration: none;
}

.pca-checkout-header-note a:hover,
.pca-checkout-header-note a:focus-visible {
	opacity: 1;
	text-decoration: underline;
}

/* ---------- 2. Hero compacto (carrito / checkout / cuenta / gracias) ---------- */

.pca-hero-interior-compact {
	padding-block: var(--wp--preset--spacing--l);
}

.pca-hero-interior-compact .pca-hero-interior-title {
	font-size: var(--wp--preset--font-size--x-large);
	margin: 0;
}

/* ---------- 3. Tarjeta de producto (Product Collection: tienda, categoria, relacionados) ---------- */

/* CAUSA RAIZ (hotfix): la version anterior ponia `.pca-wc-catalog` en
   `display:grid` y colapsaba `.wc-block-product-template` con
   `display:contents` para "saltarselo". Eso rompe el calculo de ancho de
   WooCommerce: cada `<li class="wc-block-product">` sigue llevando la regla
   nativa de WooCommerce `.wc-block-product-template.is-flex-container > li
   { width:100% }`, pero al perder su padre real (display:contents) el
   porcentaje deja de resolverse contra el track del grid y el navegador lo
   colapsa a un ancho minimo de contenido (~117px, confirmado por
   computed styles) -- de ahi las columnas gigantes con contenido
   comprimido, los titulos partidos letra a letra y los botones-ovalo.
   La correccion trabaja CON el contenedor flex real de WooCommerce
   (`.wc-block-product-template.is-flex-container`) en vez de sustituirlo:
   se deja su `display:flex; flex-wrap` intacto y solo se fija el
   flex-basis de cada tarjeta de producto real (`li.wc-block-product`,
   evitando el `<li>` de "sin resultados" que no lleva esa clase). */
.pca-wc-catalog .wc-block-product-template.is-flex-container {
	gap: var(--wp--preset--spacing--m);
}

.pca-wc-catalog .wc-block-product-template.is-flex-container > li.wc-block-product {
	width: auto;
	flex: 0 1 calc(33.333% - (var(--wp--preset--spacing--m) * 2 / 3));
	max-width: calc(33.333% - (var(--wp--preset--spacing--m) * 2 / 3));
}

@media (max-width: 1024px) {
	.pca-wc-catalog .wc-block-product-template.is-flex-container > li.wc-block-product {
		flex: 0 1 calc(50% - (var(--wp--preset--spacing--m) / 2));
		max-width: calc(50% - (var(--wp--preset--spacing--m) / 2));
	}
}

@media (max-width: 600px) {
	.pca-wc-catalog .wc-block-product-template.is-flex-container > li.wc-block-product {
		flex: 0 1 100%;
		max-width: 100%;
	}
}

/* Relacionados de producto (FASE editabilidad): "producto-relacionados.php"
   ya no usa el bloque nativo "woocommerce/related-products" (ver causa raiz
   documentada en ese patron), asi que las tarjetas ".pca-wc-card" cuelgan
   de un contenedor propio en vez del `<ul class="wc-block-product-template">`
   de WooCommerce. Mismo reparto de columnas que ".pca-wc-catalog" arriba,
   sin depender de marcado del plugin. */
.pca-wc-related-grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--m);
}

.pca-wc-related-grid > .pca-wc-card {
	flex: 0 1 calc(33.333% - (var(--wp--preset--spacing--m) * 2 / 3));
	max-width: calc(33.333% - (var(--wp--preset--spacing--m) * 2 / 3));
}

@media (max-width: 1024px) {
	.pca-wc-related-grid > .pca-wc-card {
		flex: 0 1 calc(50% - (var(--wp--preset--spacing--m) / 2));
		max-width: calc(50% - (var(--wp--preset--spacing--m) / 2));
	}
}

@media (max-width: 600px) {
	.pca-wc-related-grid > .pca-wc-card {
		flex: 0 1 100%;
		max-width: 100%;
	}
}

/* Tarjeta premium (FASE 5): antes era solo contenido apilado sin marco
   propio, lo que la dejaba con aspecto de "bloque WooCommerce vestido". Se
   introduce un contenedor real de tarjeta (fondo, borde, radio, hover) con
   la imagen a sangre completa arriba y el cuerpo de texto con su propio
   padding abajo -- el mismo lenguaje que ".pca-tienda-cat" pero adaptado a
   un componente con imagen. La altura se iguala por fila con el
   comportamiento por defecto de flexbox (align-items:stretch en el
   contenedor de WooCommerce) + "height:100%" aqui + el boton empujado al
   fondo con "margin-top:auto" en el cuerpo.

   CAUSA RAIZ (feedback TI-02, "explorar cajetines blancos/claros para dar
   ligereza"): la tarjeta era un cristal translucido casi del mismo tono que
   la seccion navy que la envuelve, por lo que el catalogo entero (y los
   relacionados de ficha de producto, que comparten esta misma clase) se
   leia como un unico bloque oscuro compacto. Se convierte la tarjeta en un
   cajetin blanco real que flota sobre el fondo navy -- mismo lenguaje que
   ya se valido en ".pca-section-light" para secciones completas, aplicado
   aqui a nivel de componente para no tener que rediseñar la seccion
   completa. La sombra sustituye al contraste de borde como señal de
   profundidad sobre un fondo oscuro. */
.pca-wc-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--wp--preset--color--blanco);
	color: var(--wp--preset--color--azul-marino);
	border: 1px solid rgba(0, 33, 58, 0.08);
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
	box-shadow: 0 16px 32px rgba(3, 10, 20, 0.28);
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.pca-wc-card-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 0.35em;
	padding: var(--wp--preset--spacing--s) var(--wp--preset--spacing--m) var(--wp--preset--spacing--m);
}

@media (prefers-reduced-motion: no-preference) {
	.pca-wc-card:hover {
		border-color: rgba(203, 175, 131, 0.5);
		box-shadow: 0 22px 40px rgba(3, 10, 20, 0.34);
		transform: translateY(-3px);
	}
}

.pca-wc-card:focus-within {
	border-color: var(--wp--preset--color--champagne);
}

.pca-wc-card-image,
.pca-wc-card .wc-block-components-product-image {
	border-radius: 0;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	margin: 0;
	background: rgba(255, 255, 255, 0.04);
}

/* Placeholder premium cuando el producto no tiene imagen real todavia
   (p. ej. IMG_PENDIENTE en el manifiesto de migracion): se sustituye el
   icono roto por defecto de WooCommerce por el mismo lenguaje decorativo
   (degradado + constelacion) usado en el resto del sitio. No es una
   fotografia inventada, solo un fondo neutro consistente. */
.pca-wc-card-image img[src*="woocommerce-placeholder"],
.pca-wc-card .wc-block-components-product-image img[src*="placeholder"] {
	opacity: 0;
}

.pca-wc-card-image:has(img[src*="placeholder"]),
.pca-wc-card .wc-block-components-product-image:has(img[src*="placeholder"]) {
	background:
		radial-gradient(circle at 60% 35%, rgba(203, 175, 131, 0.35) 0%, rgba(203, 175, 131, 0) 55%),
		linear-gradient(160deg, #071122 0%, #00213a 55%, #0b3e63 100%);
}

.pca-wc-card-image img,
.pca-wc-card .wc-block-components-product-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Antes en champagne (#CBAF83): funcionaba sobre el cristal navy, pero ese
   mismo tono sobre el nuevo cajetin blanco (TI-02) cae muy por debajo del
   contraste 4.5:1 exigido por WCAG 2.2 AA para texto pequeño. Se usa
   azul-marino a opacidad reducida -- mismo patron que ".pca-eyebrow"
   general -- para mantener la jerarquia discreta del eyebrow sin perder
   legibilidad. */
.pca-wc-card-eyebrow,
.pca-wc-card-eyebrow a {
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--azul-marino);
	opacity: 0.72;
	text-decoration: none;
}

.pca-wc-card-title {
	margin: 0;
}

.pca-wc-card-title a {
	font-family: var(--wp--preset--font-family--titulares);
	font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
	line-height: 1.3;
	color: var(--wp--preset--color--azul-marino);
	text-decoration: none;
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: none;
	/* Limite visual de 2 lineas para nombres excepcionalmente largos: el
	   texto completo sigue presente en el DOM (accesible a lectores de
	   pantalla y buscador del navegador), solo se recorta visualmente con
	   puntos suspensivos. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(1.3em * 2);
}

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

/* Precio en champagne tampoco pasaba 4.5:1 sobre el cajetin blanco (mismo
   motivo que el eyebrow, arriba). Se resuelve con azul-marino en negrita
   -- el champagne se conserva como acento solo donde ya tiene fondo oscuro
   propio (insignia de oferta, boton). */
.pca-wc-card-price,
.pca-wc-card-price .wc-block-components-product-price {
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	color: var(--wp--preset--color--azul-marino);
}

.pca-wc-card-price .wc-block-components-product-price__regular {
	color: rgba(0, 33, 58, 0.45);
	font-weight: 400;
}

/* Insignia de oferta: discreta, coherente con el resto de "badges" del sitio. */
.pca-wc-card .wc-block-components-product-sale-badge {
	background: var(--wp--preset--color--champagne);
	color: var(--wp--preset--color--azul-marino);
	border-radius: var(--wp--custom--radius--sm);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Antes el CTA era una capsula al 100% del ancho de la tarjeta, con
   demasiado peso visual frente al nombre/precio. Se reduce a un boton
   compacto, alineado a la izquierda y empujado al fondo de la tarjeta
   (margin-top:auto) para que todas las tarjetas de una fila queden con el
   CTA a la misma altura pese a tener titulos de distinta longitud. En
   movil se recupera el ancho completo por comodidad de toque. */
.pca-wc-card-button,
.pca-wc-card-button .wc-block-components-product-button__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	width: auto;
	box-sizing: border-box;
	margin-top: auto;
	border-radius: var(--wp--custom--radius--button);
	background: linear-gradient(120deg, var(--wp--preset--color--azul-marino) 0%, var(--wp--preset--color--azul-cielo) 160%);
	color: var(--wp--preset--color--blanco);
	border: none;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.3;
	white-space: normal;
	text-align: center;
	padding: 0.6em 1.3em;
}

@media (max-width: 480px) {
	.pca-wc-card-button,
	.pca-wc-card-button .wc-block-components-product-button__button {
		align-self: stretch;
		width: 100%;
	}
}

.pca-wc-card-button .wc-block-components-product-button__button:hover,
.pca-wc-card-button .wc-block-components-product-button__button:focus-visible {
	filter: brightness(1.08);
}

/* Estado de stock (cuando exista): sin depender solo del color. */
.pca-wc-card .stock.out-of-stock,
.pca-wc-card .wc-block-components-product-button__button.disabled {
	opacity: 0.6;
}

.pca-wc-card .stock.out-of-stock::before {
	content: "— ";
}

/* ---------- 4. Estado vacío del catálogo (sin productos aún) ---------- */

.pca-wc-empty-state {
	width: 100%;
	flex-basis: 100%;
	text-align: center;
	padding-block: var(--wp--preset--spacing--l);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6em;
}

.pca-wc-empty-icon {
	width: 64px;
	height: 64px;
	margin-bottom: 0.4em;
}

/* ---------- 5. Ficha de producto (single-product.html) ---------- */

.pca-wc-breadcrumbs {
	font-size: var(--wp--preset--font-size--small);
	opacity: 0.7;
	margin-bottom: var(--wp--preset--spacing--m);
}

.pca-wc-breadcrumbs a {
	color: inherit;
}

.pca-wc-product-main {
	gap: var(--wp--preset--spacing--l);
}

.pca-wc-product-gallery-col .wc-block-components-product-image,
.pca-wc-product-gallery-col .woocommerce-product-gallery {
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
	/* Antes, sin esta contencion, un producto SIN imagen (galeria clasica de
	   WooCommerce, "woocommerce-product-gallery--without-images") dejaba que
	   el placeholder por defecto de WooCommerce se mostrara a su tamano
	   intrinseco -- de ahi el "placeholder generico enorme" reportado en
	   Coaching holistico profundo. Se fuerza el mismo ratio para que la
	   ficha se vea igual de compuesta tenga o no imagen real todavia. */
	aspect-ratio: 4 / 3;
}

.pca-wc-product-gallery-col .woocommerce-product-gallery__wrapper,
.pca-wc-product-gallery-col .woocommerce-product-gallery__image,
.pca-wc-product-gallery-col .woocommerce-product-gallery__image--placeholder {
	height: 100%;
}

.pca-wc-product-gallery-col .woocommerce-product-gallery img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Mismo placeholder de marca (degradado + constelacion champagne) que ya
   usan las tarjetas de catalogo cuando falta imagen real -- nunca el icono
   generico de WooCommerce, y nunca una fotografia de producto inventada. */
.pca-wc-product-gallery-col .woocommerce-product-gallery--without-images img {
	opacity: 0;
}

.pca-wc-product-gallery-col .woocommerce-product-gallery--without-images .woocommerce-product-gallery__wrapper {
	background:
		radial-gradient(circle at 60% 35%, rgba(203, 175, 131, 0.35) 0%, rgba(203, 175, 131, 0) 55%),
		linear-gradient(160deg, #071122 0%, #00213a 55%, #0b3e63 100%);
}

.pca-wc-product-category,
.pca-wc-product-category a {
	color: var(--wp--preset--color--champagne);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
}

.pca-wc-product-title.wp-block-post-title {
	margin-block: 0.2em 0.3em;
}

.pca-wc-product-rating {
	margin-bottom: 0.6em;
}

.pca-wc-product-price {
	font-family: var(--wp--preset--font-family--titulares);
	font-size: var(--wp--preset--font-size--x-large);
	color: var(--wp--preset--color--champagne);
	margin-bottom: 0.8em;
}

.pca-wc-product-price .wc-block-components-product-price__regular {
	font-size: var(--wp--preset--font-size--medium);
	color: rgba(255, 255, 255, 0.5);
}

/* Productos externos (Amazon/Bookmundo): el precio real lo fija la
   plataforma externa y puede cambiar sin que lo sepamos, así que no se
   muestra un precio interno potencialmente desactualizado. El botón ya
   deja claro dónde se compra (p. ej. "Comprar en Amazon"). */
.product-type-external .pca-wc-product-price,
.product-type-external .wc-block-components-product-price {
	display: none;
}

.pca-wc-product-short-desc {
	opacity: 0.85;
	margin-bottom: var(--wp--preset--spacing--m);
}

/* Formulario de compra: cantidad + boton, reinterpretados con la identidad
   visual de Pili con Alas sin tocar la logica de WooCommerce. */
.pca-wc-add-to-cart {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--s);
	flex-wrap: wrap;
	margin-bottom: var(--wp--preset--spacing--m);
}

.pca-wc-add-to-cart .quantity input.qty,
.pca-wc-add-to-cart .wc-block-components-quantity-selector__input {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--blanco);
	padding: 0.6em;
	width: 4.5em;
	text-align: center;
}

.pca-wc-add-to-cart .single_add_to_cart_button,
.pca-wc-add-to-cart button[type="submit"] {
	border-radius: var(--wp--custom--radius--button);
	background: linear-gradient(120deg, var(--wp--preset--color--azul-marino) 0%, var(--wp--preset--color--azul-cielo) 160%);
	color: var(--wp--preset--color--blanco);
	border: none;
	font-weight: 700;
	padding: 0.85em 2em;
	cursor: pointer;
}

.pca-wc-add-to-cart .single_add_to_cart_button:hover,
.pca-wc-add-to-cart .single_add_to_cart_button:focus-visible,
.pca-wc-add-to-cart button[type="submit"]:hover,
.pca-wc-add-to-cart button[type="submit"]:focus-visible {
	filter: brightness(1.08);
}

.pca-wc-add-to-cart .single_add_to_cart_button.disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

/* Variaciones: radios/select reinterpretados sin romper su semantica nativa. */
.pca-wc-add-to-cart .variations select,
.pca-wc-add-to-cart .wc-block-components-radio-control__input {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--blanco);
	padding: 0.5em 0.8em;
}

/* Bloque de ayuda humana por WhatsApp: antes vivía dentro de la columna de
   compra (borde discreto, sin fondo, para no competir con Add to Cart).
   Ahora es su propia sección de cierre tras la descripción/pestañas, así
   que se centra como el resto de CTA de cierre del sitio
   (".pca-cta-final") en vez de mantener el tratamiento de caja lateral. */
.pca-wc-whatsapp-cta {
	text-align: center;
	margin: 0 auto;
}

.pca-wc-whatsapp-cta-title {
	margin: 0.2em 0 0.3em;
	font-family: var(--wp--preset--font-family--titulares);
	color: var(--wp--preset--color--blanco);
}

.pca-wc-whatsapp-cta p.has-small-font-size {
	margin: 0 0 var(--wp--preset--spacing--s);
	opacity: 0.75;
}

.pca-whatsapp-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	border-radius: var(--wp--custom--radius--button);
	background: transparent;
	color: var(--wp--preset--color--champagne);
	border: 1px solid var(--wp--preset--color--champagne);
	font-weight: 600;
	padding: 0.6em 1.3em;
}

.pca-whatsapp-button .wp-block-button__link::before {
	content: "";
	width: 1.1em;
	height: 1.1em;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 3C9 3 3.3 8.6 3.3 15.5c0 2.6.8 5 2.1 7L4 29l6.7-1.8c1.9 1 4 1.6 6.2 1.6 7 0 12.7-5.6 12.7-12.5S23 3 16 3zm0 2.3c5.7 0 10.4 4.6 10.4 10.2S21.7 25.7 16 25.7c-2 0-3.9-.6-5.5-1.6l-.4-.2-4 .1 1.1-3.9-.3-.4a10 10 0 0 1-1.6-5.4C5.6 9.9 10.3 5.3 16 5.3zm-4.7 5.4c-.2 0-.5.1-.7.4-.3.3-1 1-1 2.3s1 2.7 1.2 2.9c.1.1 2 3.2 5 4.4 2.5 1 3 .8 3.6.8.6-.1 1.9-.8 2.1-1.5.3-.7.3-1.4.2-1.5-.1-.2-.3-.3-.6-.4l-2.1-1c-.3-.1-.5-.2-.7.2-.2.3-.8 1-1 1.2-.2.2-.3.2-.6.1-.3-.2-1.2-.5-2.4-1.5-.9-.8-1.5-1.8-1.6-2.1-.2-.3 0-.5.1-.6l.5-.6.3-.5c.1-.2 0-.4 0-.5l-1-2.3c-.2-.5-.4-.4-.6-.4h-.6z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 3C9 3 3.3 8.6 3.3 15.5c0 2.6.8 5 2.1 7L4 29l6.7-1.8c1.9 1 4 1.6 6.2 1.6 7 0 12.7-5.6 12.7-12.5S23 3 16 3zm0 2.3c5.7 0 10.4 4.6 10.4 10.2S21.7 25.7 16 25.7c-2 0-3.9-.6-5.5-1.6l-.4-.2-4 .1 1.1-3.9-.3-.4a10 10 0 0 1-1.6-5.4C5.6 9.9 10.3 5.3 16 5.3zm-4.7 5.4c-.2 0-.5.1-.7.4-.3.3-1 1-1 2.3s1 2.7 1.2 2.9c.1.1 2 3.2 5 4.4 2.5 1 3 .8 3.6.8.6-.1 1.9-.8 2.1-1.5.3-.7.3-1.4.2-1.5-.1-.2-.3-.3-.6-.4l-2.1-1c-.3-.1-.5-.2-.7.2-.2.3-.8 1-1 1.2-.2.2-.3.2-.6.1-.3-.2-1.2-.5-2.4-1.5-.9-.8-1.5-1.8-1.6-2.1-.2-.3 0-.5.1-.6l.5-.6.3-.5c.1-.2 0-.4 0-.5l-1-2.3c-.2-.5-.4-.4-.6-.4h-.6z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.pca-whatsapp-button .wp-block-button__link:hover,
.pca-whatsapp-button .wp-block-button__link:focus-visible {
	background: rgba(203, 175, 131, 0.12);
}

.pca-wc-product-meta {
	font-size: var(--wp--preset--font-size--small);
	opacity: 0.65;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	padding-top: var(--wp--preset--spacing--s);
}

.pca-wc-product-meta a {
	color: inherit;
}

/* Pestañas de detalle (descripcion larga / informacion adicional / valoraciones).
   CAUSA RAIZ (hotfix): el bloque woocommerce/product-details renderiza el
   marcado CLASICO de WooCommerce (".woocommerce-tabs.wc-tabs-wrapper >
   ul.tabs.wc-tabs > li > a"), no un componente de bloque propio. La hoja de
   estilos del PLUGIN WooCommerce (no la nuestra) ya trae un selector para
   ese marcado con mayor especificidad que el que teniamos aqui
   (".wc-tabs li a" perdia el empate), de ahi que las pestañas se vieran en
   gris oscuro (#515151) sobre fondo navy pese a esta regla. Se iguala la
   especificidad calificando el mismo contenedor real (".wc-tabs-wrapper")
   en vez de bajar de nivel con !important. */
.pca-wc-product-details .wc-tabs,
.pca-wc-product-details .wc-tabs-wrapper .tabs.wc-tabs,
.pca-wc-product-details .wp-block-woocommerce-product-details__tabs {
	display: flex;
	gap: var(--wp--preset--spacing--m);
	list-style: none;
	padding: 0;
	margin: 0 0 var(--wp--preset--spacing--m);
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

/* CAUSA RAIZ (hotfix, "pestañas de WooCommerce por defecto"): el <li> de
   cada pestaña -- no el <a> de dentro -- es quien trae el aspecto clásico
   de "ficha de carpeta" del plugin (fondo blanco en la pestaña activa,
   fondo gris/lila en las inactivas, con su propio borde). La regla previa
   solo neutralizaba el <a>, así que "Descripción" activa quedaba en texto
   blanco sobre fondo BLANCO (invisible) y "Valoraciones" inactiva en texto
   blanco sobre gris claro (contraste pobre). Se neutraliza aquí el <li>
   mismo -- fondo y borde a transparente en los dos estados -- para que la
   única señal de pestaña activa sea la línea champagne inferior, coherente
   con el resto de estados "activo" del sitio (categorías, mi cuenta). */
.pca-wc-product-details .wc-tabs li,
.pca-wc-product-details .wc-tabs-wrapper ul.tabs li {
	background: transparent !important;
	border: none !important;
	margin: 0 !important;
}

.pca-wc-product-details .wc-tabs li a,
.pca-wc-product-details .wc-tabs-wrapper ul.tabs li a,
.pca-wc-product-details .wp-block-woocommerce-product-details__tabs button {
	/* !important: no se puede confiar solo en subir especificidad porque no
	   es posible verificar en este entorno el selector exacto que trae la
	   hoja de estilos del plugin WooCommerce; es un caso de contraste/
	   legibilidad (WCAG), se prefiere la certeza a la elegancia aqui. */
	display: inline-block;
	color: var(--wp--preset--color--blanco) !important;
	opacity: 0.6;
	text-decoration: none;
	padding: 0 0 0.7em;
	margin: 0;
	background: none !important;
	border: none;
	border-bottom: 2px solid transparent;
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: var(--wp--preset--font-size--medium);
	cursor: pointer;
}

@media (prefers-reduced-motion: no-preference) {
	.pca-wc-product-details .wc-tabs li a,
	.pca-wc-product-details .wc-tabs-wrapper ul.tabs li a {
		transition: opacity 0.2s ease, border-color 0.2s ease;
	}
}

.pca-wc-product-details .wc-tabs li a:hover,
.pca-wc-product-details .wc-tabs-wrapper ul.tabs li a:hover,
.pca-wc-product-details .wc-tabs li a:focus-visible,
.pca-wc-product-details .wc-tabs-wrapper ul.tabs li a:focus-visible {
	opacity: 0.85;
}

.pca-wc-product-details .wc-tabs li.active a,
.pca-wc-product-details .wc-tabs-wrapper ul.tabs li.active a,
.pca-wc-product-details .wp-block-woocommerce-product-details__tabs button[aria-selected="true"] {
	/* Se repite el shorthand completo ("border-bottom", no solo el color en
	   longhand) a proposito: al fijar solo "border-bottom-color" antes, el
	   navegador seguia resolviendo el resto del shorthand (width/style)
	   desde la regla base y el color champagne no llegaba a pintarse en
	   este entorno de pruebas -- con el shorthand completo no hay ambiguedad
	   entre longhand y shorthand dentro de la cascada. Se refuerza además
	   con el color del propio texto en champagne (técnica ya verificada
	   fiable en esta sesión): así el estado activo se distingue con
	   certeza aunque el navegador ignore el borde por cualquier motivo.
	*/
	opacity: 1;
	color: var(--wp--preset--color--champagne) !important;
	border-bottom: 2px solid var(--wp--preset--color--champagne) !important;
}

/* Contenido de las pestañas (descripcion larga, tabla de atributos,
   valoraciones): mismo marcado clasico, mismo problema de especificidad. */
.pca-wc-product-details .woocommerce-Tabs-panel {
	color: var(--wp--preset--color--blanco);
	opacity: 0.9;
}

.pca-wc-product-details .woocommerce-Tabs-panel h2 {
	color: var(--wp--preset--color--blanco);
	font-family: var(--wp--preset--font-family--titulares);
}

.pca-wc-product-details table.shop_attributes {
	width: 100%;
	border-collapse: collapse;
}

.pca-wc-product-details table.shop_attributes th,
.pca-wc-product-details table.shop_attributes td {
	padding: 0.6em 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	text-align: left;
}

.pca-wc-related .pca-section-title {
	margin-bottom: var(--wp--preset--spacing--m);
}

/* ---------- 6. Carrito (Cart Block) ---------- */

.pca-wc-page-content .wp-block-woocommerce-cart {
	color: var(--wp--preset--color--blanco);
}

.pca-wc-page-content .wc-block-cart__submit-container,
.pca-wc-page-content .wc-block-components-totals-wrapper,
.pca-wc-page-content .wc-block-cart-items {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--wp--custom--radius--card);
	padding: var(--wp--preset--spacing--m);
}

.pca-wc-page-content .wc-block-cart-item__image img {
	border-radius: var(--wp--custom--radius--sm);
}

/* CAUSA RAIZ (hotfix): la clase real que WooCommerce renderiza en el
   carrito es ".wc-block-components-product-name" (sin "-item"); la regla
   original apuntaba a un nombre de clase distinto
   (".wc-block-cart-item__product-name") que nunca coincidia con el DOM
   real, por eso el nombre de cada producto se veia en navy sobre navy. Se
   mantiene tambien el selector original por si WooCommerce lo usa como
   envoltorio en alguna variante del bloque. */
.pca-wc-page-content .wc-block-cart-item__product-name,
.pca-wc-page-content .wc-block-components-product-name {
	color: var(--wp--preset--color--blanco) !important;
	font-family: var(--wp--preset--font-family--titulares);
}

.pca-wc-page-content .wc-block-cart-items__row:not(:last-child) {
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	padding-bottom: var(--wp--preset--spacing--s);
	margin-bottom: var(--wp--preset--spacing--s);
}

.pca-wc-page-content .wc-block-components-quantity-selector {
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: var(--wp--custom--radius--sm);
	background: rgba(255, 255, 255, 0.04);
}

.pca-wc-page-content .wc-block-components-quantity-selector__input,
.pca-wc-page-content .wc-block-components-quantity-selector__button {
	color: var(--wp--preset--color--blanco);
	background: transparent;
}

.pca-wc-page-content .wc-block-cart-item__remove-link {
	color: rgba(255, 255, 255, 0.6);
	text-decoration: underline;
	font-size: var(--wp--preset--font-size--small);
}

.pca-wc-page-content .wc-block-cart-item__remove-link:hover,
.pca-wc-page-content .wc-block-cart-item__remove-link:focus-visible {
	color: var(--wp--preset--color--champagne);
}

.pca-wc-page-content .wc-block-components-product-metadata,
.pca-wc-page-content .wc-block-components-totals-item__description {
	opacity: 0.7;
}

.pca-wc-page-content .wc-block-cart__totals-title,
.pca-wc-page-content .wc-block-components-panel__title {
	font-family: var(--wp--preset--font-family--titulares);
	color: var(--wp--preset--color--blanco);
}

.pca-wc-page-content .wc-block-components-totals-footer-item .wc-block-components-formatted-money-amount {
	color: var(--wp--preset--color--champagne);
	font-weight: 700;
}

/* Cupones: solo visibles si WooCommerce los tiene habilitados; se heredan
   automaticamente (no se fuerza su presencia desde el tema). */
.pca-wc-page-content .wc-block-components-totals-coupon__form input {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--blanco);
}

.pca-wc-page-content .wc-block-cart__submit-button,
.pca-wc-page-content .wc-proceed-to-checkout .checkout-button,
.pca-wc-page-content .wc-block-components-checkout-place-order-button {
	width: 100%;
	border-radius: var(--wp--custom--radius--button) !important;
	background: linear-gradient(120deg, var(--wp--preset--color--azul-marino) 0%, var(--wp--preset--color--azul-cielo) 160%) !important;
	color: var(--wp--preset--color--blanco) !important;
	border: none !important;
	font-weight: 700 !important;
	padding: 0.9em 1.5em !important;
}

/* Carrito vacio: mismo lenguaje visual que el estado vacio del catalogo. */
.pca-wc-page-content .wc-block-cart__empty-cart__title {
	font-family: var(--wp--preset--font-family--titulares);
}

.pca-wc-page-content .wc-block-cart__empty-cart .wc-block-cart__empty-cart__button,
.pca-wc-page-content .wc-empty-cart-message + .wp-block-buttons .wp-block-button__link {
	border-radius: var(--wp--custom--radius--button);
	background: linear-gradient(120deg, var(--wp--preset--color--azul-marino) 0%, var(--wp--preset--color--azul-cielo) 160%);
	color: var(--wp--preset--color--blanco);
}

/* ---------- 7. Checkout (Checkout Block) ---------- */

.pca-wc-page-content .wp-block-woocommerce-checkout {
	color: var(--wp--preset--color--blanco);
}

.pca-wc-page-content .wc-block-components-checkout-step,
.pca-wc-page-content .wc-block-components-order-summary {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--wp--custom--radius--card);
	padding: var(--wp--preset--spacing--m);
	margin-bottom: var(--wp--preset--spacing--m);
}

.pca-wc-page-content .wc-block-components-checkout-step__title {
	font-family: var(--wp--preset--font-family--titulares);
	color: var(--wp--preset--color--blanco);
}

.pca-wc-page-content .wc-block-components-text-input input,
.pca-wc-page-content .wc-block-components-text-input textarea,
.pca-wc-page-content .wc-block-components-address-form select,
.pca-wc-page-content .wc-block-components-combobox-control input {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--blanco);
}

.pca-wc-page-content .wc-block-components-text-input label,
.pca-wc-page-content .wc-block-components-checkbox label {
	color: var(--wp--preset--color--blanco);
	opacity: 0.85;
}

/* Contraste de foco reforzado: obligatorio en un formulario transaccional. */
.pca-wc-page-content .wc-block-components-text-input input:focus-visible,
.pca-wc-page-content .wc-block-components-radio-control__input:focus-visible,
.pca-wc-page-content .wc-block-components-checkbox input:focus-visible {
	outline: 2px solid var(--wp--preset--color--champagne);
	outline-offset: 2px;
}

/* Avisos y errores: se mantiene el color semantico de WooCommerce (rojo/verde)
   sobre un fondo que conserva legibilidad en tema oscuro.
   CAUSA RAIZ (hotfix): el texto de estos avisos ("No hay metodos de pago
   disponibles...") viene con el gris oscuro por defecto de WooCommerce
   (".wc-block-components-notice-banner__content", pensado para fondo
   claro) y no heredaba el blanco de la pagina -- mismo tipo de problema
   que las pestañas de la ficha de producto: es un color fijado
   directamente por la hoja de estilos del plugin, no por herencia. */
.pca-wc-page-content .wc-block-components-notice-banner {
	border-radius: var(--wp--custom--radius--sm);
	background: rgba(255, 255, 255, 0.08);
}

.pca-wc-page-content .wc-block-components-notice-banner__content,
.pca-wc-page-content .wc-block-components-notice-banner__content p {
	color: var(--wp--preset--color--blanco) !important;
}

.pca-wc-page-content .wc-block-components-notice-banner.is-error {
	border-left: 4px solid #ff8a8a;
}

.pca-wc-page-content .wc-block-components-notice-banner.is-success {
	border-left: 4px solid var(--wp--preset--color--champagne);
}

.pca-wc-page-content .wc-block-components-checkout-place-order-button {
	width: 100%;
}

/* Requisitos legales del checkout (terminos, politica): nunca se ocultan. */
.pca-wc-page-content .wc-block-checkout__terms {
	opacity: 0.85;
	font-size: var(--wp--preset--font-size--small);
}

/* ---------- 8. Mi cuenta ---------- */

.pca-wc-account .wp-block-woocommerce-customer-account,
.pca-wc-account .woocommerce-MyAccount-navigation,
.pca-wc-account .woocommerce-MyAccount-content {
	color: var(--wp--preset--color--blanco);
}

/* Bloque de acceso/registro (usuario no identificado). */
.pca-wc-account .wc-block-components-form input {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--blanco);
}

.pca-wc-account .wc-block-components-button {
	border-radius: var(--wp--custom--radius--button);
	background: linear-gradient(120deg, var(--wp--preset--color--azul-marino) 0%, var(--wp--preset--color--azul-cielo) 160%);
	color: var(--wp--preset--color--blanco);
	border: none;
}

/* Panel clasico [woocommerce_my_account] (navegacion + pedidos), por si el
   sitio no usa aun la version en bloques de la cuenta. */
.pca-wc-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.3em;
	border-right: 1px solid rgba(255, 255, 255, 0.14);
	padding-right: var(--wp--preset--spacing--m);
}

.pca-wc-account .woocommerce-MyAccount-navigation a {
	color: var(--wp--preset--color--blanco);
	opacity: 0.75;
	text-decoration: none;
	padding: 0.4em 0;
	display: block;
}

.pca-wc-account .woocommerce-MyAccount-navigation li.is-active a,
.pca-wc-account .woocommerce-MyAccount-navigation a:hover,
.pca-wc-account .woocommerce-MyAccount-navigation a:focus-visible {
	opacity: 1;
	color: var(--wp--preset--color--champagne);
}

.pca-wc-account table.woocommerce-orders-table,
.pca-wc-account table.shop_table {
	width: 100%;
	border-collapse: collapse;
}

.pca-wc-account table.woocommerce-orders-table th,
.pca-wc-account table.woocommerce-orders-table td,
.pca-wc-account table.shop_table th,
.pca-wc-account table.shop_table td {
	padding: 0.7em 0.5em;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	text-align: left;
}

.pca-wc-account .woocommerce-MyAccount-content .button,
.pca-wc-account a.button {
	border-radius: var(--wp--custom--radius--button);
	background: rgba(255, 255, 255, 0.08);
	color: var(--wp--preset--color--blanco);
	border: 1px solid rgba(255, 255, 255, 0.24);
	padding: 0.5em 1.2em;
	text-decoration: none;
	display: inline-block;
}

.pca-wc-account .woocommerce-MyAccount-content input,
.pca-wc-account .woocommerce-MyAccount-content select,
.pca-wc-account .woocommerce-MyAccount-content textarea {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--blanco);
	padding: 0.6em;
}

@media (max-width: 781px) {
	.pca-wc-account .woocommerce-MyAccount-navigation ul {
		flex-direction: row;
		flex-wrap: wrap;
		border-right: none;
		border-bottom: 1px solid rgba(255, 255, 255, 0.14);
		padding-right: 0;
		padding-bottom: var(--wp--preset--spacing--s);
		margin-bottom: var(--wp--preset--spacing--s);
	}
}

/* ---------- 9. Order Confirmation (gracias por tu compra) ---------- */

.pca-wc-order-status {
	color: var(--wp--preset--color--blanco);
}

.pca-wc-order-status h1,
.pca-wc-order-status .wc-block-order-confirmation-status__description {
	font-family: var(--wp--preset--font-family--titulares);
}

.pca-wc-order-summary,
.pca-wc-order-totals,
.pca-wc-order-downloads,
.pca-wc-order-address,
.pca-wc-order-meta-row {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--wp--custom--radius--card);
	padding: var(--wp--preset--spacing--m);
	margin-bottom: var(--wp--preset--spacing--m);
}

.pca-wc-order-create-account {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--wp--custom--radius--card);
	padding: var(--wp--preset--spacing--m);
}

@media (max-width: 781px) {
	.pca-wc-confirmation-grid {
		flex-direction: column;
	}

	.pca-wc-product-main {
		flex-direction: column;
	}
}