/*
Theme Name: Alpha Consulting
Theme URI: https://www.alphaconsulting.cl
Author: Smart Sites
Author URI: https://www.smartsites.cl
Description: Tema de bloques del rediseño minimalista de Alpha Consulting (comp de Claude Design, octubre de 2026). Todo lo visible es un bloque editable; aquí va solo lo que ningún bloque expone como control.
Version: 0.10.4
Requires at least: 7.0
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: alphaconsulting

Schibsted Grotesk: Schibsted Media Group, SIL Open Font License 1.1.
*/

/* --- Base del comp --- */

/* El comp mide todo con border-box (* { box-sizing: border-box }); sin esto, un min-width con relleno suma el
 * relleno (el contador del carrito medía 30 px en vez de 20). */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	-webkit-font-smoothing: antialiased;
}

::selection {
	background: var(--wp--preset--color--rojo);
	color: var(--wp--preset--color--blanco);
}

/* --- Cabecera ---
 * Pegada arriba al bajar, como el <header> del comp. Va en la parte (el envoltorio header.wp-block-template-part),
 * no en el grupo interior: pegada al grupo no se despega del envoltorio, que mide lo mismo. La barra de contacto es
 * otra parte y se va con el scroll, como en el comp. Con la barra de administración, baja lo que mide esa barra.
 */
header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
}

.cabecera {
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}

/* El logo es una imagen en línea: sin esto suma el alto de la línea a su caja. */
.logo a,
.logo img {
	display: block;
}

/* Ítems del menú: el subrayado rojo marca la sección actual. El core fuerza el color con la clase doble
 * .wp-block-navigation-item__content: el ítem actual necesita más especificidad. */
.menu-principal .wp-block-navigation-item__content {
	padding: 6px 0;
	border-bottom: 1.5px solid transparent;
}

.menu-principal .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.menu-principal .current-menu-item > a.wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: var(--wp--preset--color--tinta);
}

.menu-principal .current-menu-item > a.wp-block-navigation-item__content.wp-block-navigation-item__content {
	border-bottom-color: var(--wp--preset--color--rojo);
}

.cuenta-carrito {
	flex-shrink: 0;
}

/* WooCommerce le pone relleno y un interlineado de 1 al enlace: el comp es texto suelto. */
.wp-block-woocommerce-customer-account a {
	color: inherit;
	padding: 0;
	line-height: normal;
}

.wp-block-woocommerce-customer-account a:hover {
	color: var(--wp--preset--color--tinta);
}

/* --- Barra de contacto --- */

/* Separador vertical (variación «Vertical» de core/separator): la barrita de 1 × 12 px entre los datos. */
.wp-block-separator.is-style-vertical {
	width: 1px;
	height: 12px;
	min-height: 12px;
	margin: 0;
	border: 0;
	align-self: center;
}

.barra-contacto .contacto:hover,
.barra-contacto .contacto:hover a {
	color: var(--wp--preset--color--blanco);
}

.redes-barra .wp-social-link svg {
	width: 15px;
	height: 15px;
}

/* El color del ícono va en línea (lo pone el bloque): el hover necesita !important. */
.redes-barra .wp-social-link:hover {
	color: var(--wp--preset--color--blanco) !important;
}

/* --- Pie --- */

.medida-15 {
	max-width: 15em;
}

.medida-30 {
	max-width: 30em;
}

.boletin-rejilla {
	align-items: center;
}

.enlaces-gris a:hover,
.enlaces-gris .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.contacto-pie .contacto:hover,
.contacto-pie .contacto:hover a {
	color: var(--wp--preset--color--tinta);
}

.redes-pie .wp-social-link svg {
	width: 14px;
	height: 14px;
}

/* El core encoge la etiqueta a 0.65em con 0.5em de margen y deja el enlace con line-height 0: el comp la quiere a
 * 13 px, a 6 px del ícono. */
.redes-pie .wp-social-link a {
	gap: 6px;
	line-height: normal;
	font-weight: 500;
}

.redes-pie .wp-social-link span:not(.screen-reader-text) {
	margin: 0;
	font-size: var(--wp--preset--font-size--13);
	line-height: normal;
}

.redes-pie .wp-social-link:hover {
	color: var(--wp--preset--color--rojo) !important;
}

.pie-final .credito strong {
	font-weight: 600;
	color: var(--wp--preset--color--tinta);
}

.pie-final a:hover {
	color: var(--wp--preset--color--tinta);
}

/* --- Piezas comunes de las páginas --- */

.equilibrado {
	text-wrap: balance;
}

.medida-14 {
	max-width: 14em;
}

.medida-33 {
	max-width: 33em;
}

.medida-34 {
	max-width: 34em;
}

.medida-36 {
	max-width: 36em;
}

/* Raya del antetítulo (variación «Raya de antetítulo» de core/separator): 26 × 1,5 px. */
.wp-block-separator.is-style-raya {
	width: 26px;
	height: 1.5px;
	min-height: 1.5px;
	margin: 0;
	border: 0;
	flex-shrink: 0;
}

/* Botones. El oscuro es el del tema (theme.json); estas son las variaciones del comp. */
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}

.wp-block-button.is-style-claro .wp-block-button__link {
	background-color: var(--wp--preset--color--blanco);
	color: var(--wp--preset--color--tinta);
}

.wp-block-button.is-style-claro .wp-block-button__link:hover,
.wp-block-button.is-style-claro .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--rojo);
	color: var(--wp--preset--color--blanco);
}

.wp-block-button.is-style-contorno-claro .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--blanco);
	border: 1px solid var(--wp--preset--color--blanco-38);
}

.wp-block-button.is-style-contorno-claro .wp-block-button__link:hover,
.wp-block-button.is-style-contorno-claro .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--blanco-10);
	border-color: var(--wp--preset--color--blanco);
	color: var(--wp--preset--color--blanco);
}

.wp-block-button.is-style-contorno .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--tinta);
	border: 1px solid var(--wp--preset--color--tinta-20);
}

.wp-block-button.is-style-contorno .wp-block-button__link:hover,
.wp-block-button.is-style-contorno .wp-block-button__link:focus-visible {
	background-color: transparent;
	border-color: var(--wp--preset--color--tinta);
	color: var(--wp--preset--color--tinta);
}

/* La flecha de «Ver detalle» y de «Más sobre…»: en el comp va a 10 px del texto y un poco más grande. */
.con-flecha .wp-block-button__link::after,
p.con-flecha a::after {
	content: "→";
	margin-left: 10px;
	font-size: 15px;
}

/* Enlace rojo que pasa a tinta («Más información →» de las tarjetas). */
.enlace-rojo a:hover,
.enlace-rojo a:focus-visible {
	color: var(--wp--preset--color--tinta);
}

/* Enlace con subrayado rojo («Más sobre Alpha Consulting →»). */
p.enlace-subrayado a {
	display: inline-flex;
	align-items: center;
	border-bottom: 1.5px solid var(--wp--preset--color--rojo);
	padding-bottom: 4px;
}

/* El color de un enlace por clase y no por el control del bloque, en las partes que WooCommerce pinta por AJAX (ahí el
   CSS que genera el bloque no llega): «Seguir comprando» en tinta, «Volver al carrito» en gris que pasa a tinta. */
p.enlace-tinta a {
	color: var(--wp--preset--color--tinta);
	text-decoration: none;
}

p.enlace-gris a {
	color: var(--wp--preset--color--gris);
	text-decoration: none;
}

p.enlace-gris a:is(:hover, :focus-visible) {
	color: var(--wp--preset--color--tinta);
}

/* Botones centrados por clase (el carrito vacío también llega por AJAX). */
.wp-block-buttons.botones-centro {
	justify-content: center;
	gap: 12px;
}

/* --- Portada: el carrusel --- */

.carrusel__pista > .wp-block-cover {
	min-height: clamp(500px, 68vh, 660px);
}

/* La última diapositiva del comp corre su imagen: 118 % de ancho, sobrando a la derecha. */
.diapositiva-corrida img.wp-block-cover__image-background {
	left: auto;
	right: -18%;
	width: 118%;
}

/* --- Tarjetas de servicio --- */

.tarjetas {
	counter-reset: tarjeta;
}

.tarjeta {
	counter-increment: tarjeta;
	transition: background-color 0.3s, border-color 0.3s;
}

.tarjeta:hover {
	background-color: var(--wp--preset--color--arena) !important;
	border-color: var(--wp--preset--color--tinta-28) !important;
}

.tarjeta__media {
	position: relative;
}

.etiqueta-flotante {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	pointer-events: none;
}

/* El número de cada tarjeta lo pone el contador: si se reordenan, se renumeran solas. */
.tarjeta__cabeza {
	align-items: baseline;
}

.tarjeta__cabeza::after {
	content: counter(tarjeta, decimal-leading-zero);
	font-size: var(--wp--preset--font-size--11);
	font-weight: 600;
	color: var(--wp--preset--color--niebla);
	flex-shrink: 0;
}

/* --- Emprendetube --- */

.boton-play a {
	width: 74px;
	height: 74px;
	border-radius: 50%;
	background: var(--wp--preset--color--rojo);
	color: var(--wp--preset--color--blanco);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	padding-left: 5px;
	transition: background-color 0.25s, color 0.25s;
}

.boton-play a:hover,
.boton-play a:focus-visible {
	background: var(--wp--preset--color--blanco);
	color: var(--wp--preset--color--tinta);
}

/* Rejillas del comp con align-items: start / center (la de WordPress estira). */
.alinear-inicio {
	align-items: start;
}

.alinear-centro {
	align-items: center;
}

/* La tarjeta recorta la imagen con sus esquinas redondeadas, como el overflow: hidden del comp. */
.tarjeta {
	overflow: hidden;
}

/* El botón de reproducir queda al centro de la caja en todos los anchos. */
.boton-play a {
	margin-inline: auto;
}

/* Cada diapositiva recorta lo suyo, como el overflow: hidden de cada slide del comp. */
.carrusel__pista > .wp-block-cover {
	overflow: hidden;
}

/* --- Páginas interiores (paso 3) --- */

.medida-16 {
	max-width: 16em;
}

.medida-38 {
	max-width: 38em;
}

/* Migas de la cabecera de página: «/» a 8 px de cada lado, sin la transparencia del core, y la página actual en
   tinta. */
.migas li:not(:last-child)::after {
	margin: 0 8px;
	opacity: 1;
}

.migas [aria-current="page"] {
	color: var(--wp--preset--color--tinta);
	font-weight: 500;
}

/* Fila que es un enlace entero («Información de contacto»): el enlace del valor cubre la fila, como el <a> del comp. */
.fila-enlace {
	position: relative;
}

.fila-enlace a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.fila-enlace:hover a,
.fila-enlace a:focus-visible {
	color: var(--wp--preset--color--rojo);
}

.fila-enlace:has(a:focus-visible) {
	outline: 2px solid var(--wp--preset--color--tinta);
	outline-offset: 2px;
}

.fila-enlace a:focus-visible {
	outline: none;
}

/* Contacto: el formulario crece desde 480 px y los datos ocupan hasta 400 px; bajo eso, uno sobre el otro. */
.contacto__formulario {
	flex: 1 1 480px;
	min-width: 0;
}

.contacto__datos {
	flex: 0 1 400px;
	min-width: min(100%, 300px);
}

/* Beneficios: el texto de la guía crece desde 320 px y el botón no se encoge. */
.guia__texto {
	flex: 1 1 320px;
}

.guia__boton {
	flex-shrink: 0;
}

/* Pastilla de la categoría: del ancho de su texto, no del de la tarjeta. */
.pastilla {
	align-self: flex-start;
	width: fit-content;
}

/* Código de descuento (variación «Código» de core/button): se copia al hacer clic (bloque «Filtro de tarjetas»). */
.wp-block-button.is-style-codigo .wp-block-button__link {
	gap: 7px;
	padding: 6px 10px;
	border: 1px dashed rgba(16, 20, 24, 0.35);
	border-radius: 6px;
	background-color: var(--wp--preset--color--blanco);
	color: var(--wp--preset--color--tinta);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--12);
	font-weight: 600;
	line-height: normal;
	cursor: pointer;
	transition: all 0.2s;
}

.wp-block-button.is-style-codigo .wp-block-button__link::after {
	content: "Copiar";
	font-family: var(--wp--preset--font-family--schibsted);
	font-size: var(--wp--preset--font-size--11);
	opacity: 0.6;
}

.wp-block-button.is-style-codigo .wp-block-button__link:hover,
.wp-block-button.is-style-codigo .wp-block-button__link:focus-visible {
	border-color: var(--wp--preset--color--tinta);
	background-color: var(--wp--preset--color--tinta);
	color: var(--wp--preset--color--blanco);
}

/* Hijo de una fila que no se encoge (WordPress le da flex-basis al hijo de ancho fijo, pero no flex-shrink: 0). */
.no-encoger {
	flex-shrink: 0;
}

/* --- Blog (paso 4) --- */

.bonito {
	text-wrap: pretty;
}

.medida-620 {
	max-width: 620px;
}

/* En las migas del artículo, el último paso es la categoría (un enlace): se ve como la página actual del comp. */
.migas li:last-child a {
	color: var(--wp--preset--color--tinta);
	font-weight: 500;
}

/* Una entrada lleva varias categorías: la tarjeta muestra la primera (el filtro las usa todas). */
.solo-primera a ~ a,
.solo-primera .wp-block-post-terms__separator {
	display: none;
}

/* La tarjeta de una entrada es entera un enlace, como el <a> del comp: el enlace del título la cubre. */
.tarjeta-entrada {
	position: relative;
}

.tarjeta-entrada .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.tarjeta-entrada:has(.wp-block-post-title a:focus-visible) {
	outline: 2px solid var(--wp--preset--color--rojo);
	outline-offset: 2px;
}

.tarjeta-entrada .wp-block-post-title a:focus-visible {
	outline: none;
}

.tarjeta-entrada--oscura {
	transition: background-color 0.3s, border-color 0.3s;
}

.tarjeta-entrada--oscura:hover {
	background-color: #22272D !important;
	border-color: rgba(255, 255, 255, 0.3) !important;
}

/* La fecha de la tarjeta oscura, al 50 %. Va aquí y no en el bloque: WordPress descarta un rgba() en el estilo de un
   bloque dinámico como core/post-date (safecss_filter_attr no admite esa función). */
.tarjeta-entrada--oscura .wp-block-post-date {
	color: rgba(255, 255, 255, 0.5);
}

/* --- Tienda (paso 5) --- */

/* La grilla del catálogo: el espacio del comp entre tarjetas, y la fórmula de las 4 columnas de WooCommerce con ese
   espacio (la suya supone 1,25 em: con 24 px no caben 4 y quedan 3). Bajo ~650 px, 2 columnas de al menos 150 px (el
   comp deja 4 también a 375: accidente, como en la Home). */
.catalogo .wc-block-product-template {
	gap: var(--wp--preset--spacing--14-24);
}

.catalogo .wc-block-product-template__responsive.columns-4 {
	grid-template-columns: repeat(auto-fill, minmax(max(150px, calc(25% - var(--wp--preset--spacing--14-24) * 3 / 4)), 1fr));
}

.catalogo .wc-block-product-template > li {
	margin: 0;
}

/* La imagen del producto llena su cuadro, con el borde inferior dentro del cuadrado (como el comp). */
.tarjeta-producto .tarjeta__media {
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.tarjeta-producto .wc-block-components-product-image {
	margin: 0;
}

.tarjeta-producto .wc-block-components-product-image img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

/* «Oferta», arriba a la derecha, en rojo. */
.tarjeta-producto .wc-block-components-product-sale-badge {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	margin: 0;
	padding: 5px 10px;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--rojo);
	color: var(--wp--preset--color--blanco);
	font-size: var(--wp--preset--font-size--10-5);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	pointer-events: none;
}

/* El botón de un producto con opciones es de contorno («Opciones»); el de uno simple, oscuro («Añadir»). */
.tarjeta-producto .wp-block-button__link.product_type_variable {
	background-color: transparent;
	color: var(--wp--preset--color--tinta);
	border: 1px solid rgba(16, 20, 24, 0.22);
}

.tarjeta-producto .wp-block-button__link.product_type_variable:hover,
.tarjeta-producto .wp-block-button__link.product_type_variable:focus-visible {
	background-color: transparent;
	color: var(--wp--preset--color--tinta);
	border-color: var(--wp--preset--color--tinta);
}

.tarjeta-producto .boton-tarjeta {
	margin: 0;
}

/* WhatsApp con el ícono del color del texto (botón claro). */
.icono-whatsapp--tinta .wp-block-button__link {
	gap: 10px;
}

.icono-whatsapp--tinta .wp-block-button__link::before {
	width: 16px;
	height: 16px;
	background-color: currentColor;
}

/* --- Ficha de producto --- */

.imagen-ficha {
	background-color: var(--wp--preset--color--arena-media);
	border-radius: 8px;
	overflow: hidden;
}

.medida-44 {
	max-width: 44em;
}

/* El precio y «IVA incluido» alineados por la base; con oferta, el precio nuevo primero y el anterior tachado. */
.precio-ficha {
	align-items: baseline !important;
}

.precio-ficha .wc-block-components-product-price {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 12px;
}

.precio-ficha .wc-block-components-product-price:has(del) {
	flex-direction: row-reverse;
}

.precio-ficha .wc-block-components-product-price del {
	color: var(--wp--preset--color--gris-claro);
	font-size: var(--wp--preset--font-size--16);
	font-weight: 400;
	letter-spacing: normal;
}

.precio-ficha .wc-block-components-product-price ins {
	text-decoration: none;
}

/* «Elige tu plan»: los botones de las opciones, a 22 px del precio (si el producto no tiene opciones, no se pintan). */
.opciones-ficha {
	margin-top: 22px;
}

/* La compra: variaciones y complementos con el estilo de los campos del sitio, la cantidad en una pastilla y el botón
   oscuro que crece desde 220 px. */
.compra-ficha {
	margin-top: 22px;
}

.compra-ficha form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0;
}

/* WooCommerce le da 2em de margen al formulario (.woocommerce div.product form.cart, más específica): sin esto, lo que
   sigue a la compra queda 14 px más abajo que en el comp. */
.wp-block-add-to-cart-form.wc-block-add-to-cart-form.compra-ficha form.cart {
	margin-bottom: 0;
}

.compra-ficha form.variations_form {
	display: block;
}

.compra-ficha .variations_button,
.compra-ficha .single_variation_wrap .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.compra-ficha table.variations {
	width: 100%;
	margin: 0 0 16px;
	border: 0;
	border-collapse: collapse;
}

.compra-ficha table.variations,
.compra-ficha table.variations tbody,
.compra-ficha table.variations tr,
.compra-ficha table.variations th,
.compra-ficha table.variations td {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	text-align: left;
}

.compra-ficha table.variations td select {
	min-width: 0;
	max-width: none;
}

.compra-ficha table.variations th label {
	display: block;
	margin: 0 0 10px;
	font-size: var(--wp--preset--font-size--13);
	font-weight: 600;
	color: var(--wp--preset--color--tinta);
}

.compra-ficha table.variations td {
	margin-bottom: 14px;
}

.compra-ficha select,
.compra-ficha .wc-pao-addon input[type="text"],
.compra-ficha .wc-pao-addon textarea,
.compra-ficha .wc-pao-addon select {
	width: 100%;
	border: 1px solid var(--wp--preset--color--tinta-18);
	border-radius: 8px;
	background-color: var(--wp--preset--color--blanco);
	padding: 13px 14px;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--15);
	color: var(--wp--preset--color--tinta);
}

.compra-ficha select:focus-visible {
	border-color: var(--wp--preset--color--tinta);
	outline: 2px solid var(--wp--preset--color--tinta);
	outline-offset: 2px;
}

.compra-ficha .reset_variations {
	display: inline-block;
	margin-top: 8px;
	font-size: var(--wp--preset--font-size--13);
	color: var(--wp--preset--color--gris);
}

.compra-ficha .woocommerce-variation-price {
	margin-bottom: 14px;
	font-size: var(--wp--preset--font-size--20);
	font-weight: 700;
}

.compra-ficha .quantity {
	display: inline-flex;
	align-items: center;
	margin: 0;
	border: 1px solid var(--wp--preset--color--tinta-18);
	border-radius: 999px;
}

.compra-ficha .quantity button {
	width: 46px;
	height: 50px;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: 18px;
	color: var(--wp--preset--color--tinta);
	cursor: pointer;
}

.compra-ficha .quantity input.qty {
	width: 26px;
	min-width: 26px;
	border: 0;
	background: transparent;
	padding: 0;
	text-align: center;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--15);
	font-weight: 600;
	color: var(--wp--preset--color--tinta);
	-moz-appearance: textfield;
}

.compra-ficha .quantity input.qty::-webkit-inner-spin-button,
.compra-ficha .quantity input.qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.compra-ficha .single_add_to_cart_button {
	flex: 1 1 220px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 16px 28px;
	border: 0;
	border-radius: 999px;
	background-color: var(--wp--preset--color--tinta);
	color: var(--wp--preset--color--blanco);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--15);
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.25s;
}

.compra-ficha .single_add_to_cart_button:hover,
.compra-ficha .single_add_to_cart_button:focus-visible {
	background-color: var(--wp--preset--color--rojo);
}

.compra-ficha .single_add_to_cart_button.disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* «¿Dudas? Escríbenos por WhatsApp» con el ícono verde de 17 px. */
.enlace-whatsapp a {
	display: inline-flex;
	align-items: center;
	gap: 9px;
}

.enlace-whatsapp a::before {
	content: "";
	width: 17px;
	height: 17px;
	flex-shrink: 0;
	background-color: var(--wp--preset--color--whatsapp);
	-webkit-mask: url(assets/iconos/whatsapp.svg) center / contain no-repeat;
	mask: url(assets/iconos/whatsapp.svg) center / contain no-repeat;
}

/* El ✓ rojo de 16 px de las garantías y de lo que incluye un servicio. */
.con-check,
.detalle-producto li {
	display: flex;
	align-items: flex-start;
	gap: 7px;
}

.con-check::before,
.detalle-producto li::before {
	content: "";
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	background-color: var(--wp--preset--color--rojo);
	-webkit-mask: url(assets/iconos/check.svg) center / contain no-repeat;
	mask: url(assets/iconos/check.svg) center / contain no-repeat;
}

/* La descripción del producto: los párrafos como texto y las listas como las filas de «Qué incluye» del comp. */
.detalle-producto {
	font-size: var(--wp--preset--font-size--16);
	line-height: 1.6;
	color: var(--wp--preset--color--grafito);
}

.detalle-producto.detalle-producto > * + * {
	margin-top: 1em;
}

.detalle-producto :where(h2, h3, h4) {
	margin-top: 1.6em;
	font-size: var(--wp--preset--font-size--19-24);
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--tinta);
}

.detalle-producto ul,
.detalle-producto ol {
	margin: 1em 0 0;
	padding: 0;
	list-style: none;
}

.detalle-producto li {
	gap: 14px;
	padding: 18px 0;
	border-top: 1px solid var(--wp--preset--color--tinta-12);
	font-weight: 500;
	line-height: 1.45;
	color: var(--wp--preset--color--tinta);
}

.detalle-producto li::before {
	margin-top: 3px;
}

.detalle-producto a {
	color: var(--wp--preset--color--rojo);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* El artículo va en una caja de 860 px con el margen del sitio por dentro (el layout restringido la centra). */
.ancho-articulo {
	max-width: calc(860px - 2 * var(--wp--custom--margen));
}

/* «Compartir en WhatsApp» con el ícono verde delante, como el comp. */
.icono-whatsapp .wp-block-button__link {
	gap: 9px;
}

.icono-whatsapp .wp-block-button__link::before {
	content: "";
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	background-color: var(--wp--preset--color--whatsapp);
	-webkit-mask: url(assets/iconos/whatsapp.svg) center / contain no-repeat;
	mask: url(assets/iconos/whatsapp.svg) center / contain no-repeat;
}

/* El texto de las entradas (contenido clásico: párrafos, listas, enlaces y algún video). El comp solo dibuja el
   párrafo; lo demás sigue su escala. */
.contenido-articulo.contenido-articulo > * + * {
	margin-top: 1.1em;
}

.contenido-articulo :where(h2, h3, h4) {
	margin-top: 1.8em;
	color: var(--wp--preset--color--tinta);
	letter-spacing: -0.02em;
	line-height: 1.2;
}

.contenido-articulo h2 {
	font-size: var(--wp--preset--font-size--22-28);
}

.contenido-articulo :where(h3, h4) {
	font-size: var(--wp--preset--font-size--19-24);
}

.contenido-articulo :where(ul, ol) {
	padding-left: 1.4em;
}

.contenido-articulo li + li {
	margin-top: 0.4em;
}

.contenido-articulo a {
	color: var(--wp--preset--color--rojo);
	text-decoration: underline;
	text-underline-offset: 3px;
	overflow-wrap: anywhere;
}

.contenido-articulo a:hover {
	color: var(--wp--preset--color--tinta);
}

.contenido-articulo :where(strong, b) {
	color: var(--wp--preset--color--tinta);
}

.contenido-articulo :where(img, video) {
	max-width: 100%;
	height: auto;
	border-radius: 6px;
}

.contenido-articulo iframe {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: 6px;
}

/* --- Contabilidad Mensual (paso 5c) --- */

/* Ficha de plan: el contenido crece desde 480 px y la tarjeta del plan ocupa hasta 420 px (no menos de 340, ni más que
   la pantalla); si no caben, una bajo la otra. La tarjeta queda pegada bajo la cabecera al bajar. */
.ficha-plan__contenido {
	flex: 1 1 480px;
	min-width: 0;
}

.ficha-plan__tarjeta {
	flex: 0 1 420px;
	min-width: min(100%, 340px);
	position: sticky;
	top: 98px;
}

/* Lista con ✓ (variación «Con ✓» de core/list): el ✓ rojo de 15 px, a 10 px del texto; sobre fondo oscuro, coral. */
.wp-block-list.is-style-check {
	padding: 0;
	list-style: none;
}

.wp-block-list.is-style-check li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.wp-block-list.is-style-check li::before {
	content: "";
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	margin-top: 3px;
	background-color: var(--wp--preset--color--rojo);
	-webkit-mask: url(assets/iconos/check-grueso.svg) center / contain no-repeat;
	mask: url(assets/iconos/check-grueso.svg) center / contain no-repeat;
}

.has-tinta-background-color .wp-block-list.is-style-check li::before {
	background-color: var(--wp--preset--color--coral);
}

/* La lista en rejilla del comp («repeat(auto-fit, minmax(min(100%, 300px), 1fr))»); dentro de una caja, desde 280. */
.lista-rejilla {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 14px 28px;
}

.lista-rejilla--280 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	row-gap: 12px;
}

/* Notas en una línea separadas por «·» (al pie de la tarjeta del plan). El punto va al final de cada una, como en el
   comp: si la línea se corta, queda arriba. */
.lista-puntos {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	padding: 0;
	list-style: none;
}

.lista-puntos li:not(:last-child)::after {
	content: "·";
	margin-left: 14px;
}

/* La nota chica dentro de un título o de un precio («(opcional)», «/mes por trabajador»): el color de texto del editor
   sobre un trozo, con el tamaño del comp. */
.con-nota mark {
	font-size: var(--wp--preset--font-size--13);
	font-weight: 600;
}

.con-nota--precio mark {
	font-size: var(--wp--preset--font-size--12);
	font-weight: 500;
}

/* La alineación por la base que el bloque Fila no ofrece (el core pone la fila al centro). */
.wp-block-group.alinear-base {
	align-items: baseline;
}

/* Desplegable en caja (variación «Caja» de core/details). El relleno lateral, clamp(20px, 2.4vw, 28px), tiene un solo
   uso en el comp (informe). */
.wp-block-details.is-style-caja {
	border: 1px solid var(--wp--preset--color--tinta-12);
	border-radius: 6px;
	padding: 20px clamp(20px, 2.4vw, 28px);
}

.wp-block-details.is-style-caja summary {
	cursor: pointer;
}

.wp-block-details.is-style-caja strong {
	color: var(--wp--preset--color--tinta);
}

/* La compra dentro de la tarjeta del plan: el precio lo muestra el bloque «Precio de la opción elegida», el rango del
   plan (la descripción de la variación) ya está en su botón y la cantidad no va (un plan por compra; se cambia en el
   carrito). El botón, a todo el ancho y con su flecha. */
.compra-ficha.compra-plan {
	margin-top: 18px;
}

/* El script de variaciones de WooCommerce vuelve a mostrar la cantidad con un estilo en línea (.show() de jQuery) cada
   vez que encuentra la variación: solo !important la mantiene escondida. */
.compra-plan .quantity {
	display: none !important;
}

.compra-plan .woocommerce-variation-price,
.compra-plan .woocommerce-variation-description {
	display: none;
}

.compra-plan .single_add_to_cart_button {
	flex-basis: 100%;
	padding: 16px 26px;
}

.compra-plan .single_add_to_cart_button::after {
	content: "→";
	margin-left: 10px;
}

/* Un botón a todo el ancho centra su texto (el enlace del tema es flex). */
.wp-block-button.has-custom-width .wp-block-button__link {
	justify-content: center;
}

/* «¿Ventas sobre $11M? Cotiza a medida»: WhatsApp de 13 px, del color del enlace. */
.enlace-whatsapp--chico a {
	gap: 7px;
}

.enlace-whatsapp--chico a::before {
	width: 13px;
	height: 13px;
	background-color: currentColor;
}

/* «Consultar antes de contratar»: el ícono verde de WhatsApp a 15 px. */
.icono-whatsapp--15 .wp-block-button__link::before {
	width: 15px;
	height: 15px;
}

/* --- Carrito, checkout y Mi cuenta (paso 6) ---
   Las páginas clásicas de WooCommerce (sus shortcodes) con el diseño del comp. Todo va bajo «.compra .woocommerce» (la
   sección de cada página y la caja del shortcode) para ganarle a las hojas de WooCommerce sin !important; donde
   WooCommerce usa !important (la «×» de quitar, la alineación de las celdas en pantallas chicas), también. */

/* Los avisos de WooCommerce («Carrito actualizado», «se añadió al carrito», los errores de la compra) con los colores
   del sitio: arena con el ícono en tinta; el error, con borde e ícono rojos. */
:root .wc-block-components-notice-banner {
	border: 1px solid var(--wp--preset--color--tinta-12);
	border-radius: 8px;
	background-color: var(--wp--preset--color--arena);
	color: var(--wp--preset--color--tinta);
	font-size: var(--wp--preset--font-size--14);
}

:root .wc-block-components-notice-banner > svg {
	background-color: var(--wp--preset--color--tinta);
}

:root .wc-block-components-notice-banner.is-error {
	border-color: var(--wp--preset--color--rojo);
	background-color: var(--wp--preset--color--blanco);
}

:root .wc-block-components-notice-banner.is-error > svg {
	background-color: var(--wp--preset--color--rojo);
}

:root .wc-block-components-notice-banner :is(a.wc-forward, a.button) {
	color: var(--wp--preset--color--tinta);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	opacity: 1;
}

.compra .woocommerce-notices-wrapper:empty {
	display: none;
}

/* WooCommerce limita a 1000 px el carrito, el checkout y Mi cuenta en los temas de bloques (.woocommerce-cart main
   .woocommerce): van al ancho del sitio, como el comp. */
main .compra.alignfull .woocommerce {
	max-width: var(--wp--style--global--content-size);
}

/* Los campos del sitio: borde de tinta al 18 %, 8 px de radio, 15 px. La segunda forma le gana a la de WooCommerce para
   temas de bloques (.woocommerce form .form-row input.input-text). */
.compra .woocommerce :is(input.input-text, select, textarea),
.compra .woocommerce form .form-row :is(input.input-text, select, textarea) {
	width: 100%;
	border: 1px solid var(--wp--preset--color--tinta-18);
	border-radius: 8px;
	background-color: var(--wp--preset--color--blanco);
	padding: 13px 14px;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--15);
	line-height: normal;
	color: var(--wp--preset--color--tinta);
	box-shadow: none;
}

.compra .woocommerce :is(input.input-text, select, textarea):focus-visible {
	border-color: var(--wp--preset--color--tinta);
	outline: 2px solid var(--wp--preset--color--tinta);
	outline-offset: 2px;
}

/* Los botones de WooCommerce dentro de la compra: pastilla de contorno; los principales («Finalizar compra», «Realizar
   el pedido»), oscuros. */
.compra .woocommerce :is(button.button, a.button, input.button) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	margin: 0;
	padding: 13px 22px;
	border: 1px solid var(--wp--preset--color--tinta-20);
	border-radius: 999px;
	background: transparent;
	color: var(--wp--preset--color--tinta);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--14);
	font-weight: 600;
	line-height: normal;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}

.compra .woocommerce :is(button.button, a.button, input.button):is(:hover, :focus-visible) {
	border-color: var(--wp--preset--color--tinta);
	background: transparent;
	color: var(--wp--preset--color--tinta);
}

.compra .woocommerce :is(button.button.alt, a.button.alt, a.checkout-button) {
	border: 0;
	background: var(--wp--preset--color--tinta);
	color: var(--wp--preset--color--blanco);
}

.compra .woocommerce :is(button.button.alt, a.button.alt, a.checkout-button):is(:hover, :focus-visible) {
	background: var(--wp--preset--color--rojo);
	color: var(--wp--preset--color--blanco);
}

/* Carrito: los productos a la izquierda (desde 520 px) y el resumen a la derecha (hasta 380 px, no menos de 300, pegado
   bajo la cabecera al bajar); si no caben, uno bajo el otro. */
.compra .woocommerce:has(> .woocommerce-cart-form) {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--28-56);
}

.compra .woocommerce:has(> .woocommerce-cart-form) > .woocommerce-notices-wrapper {
	flex-basis: 100%;
}

.compra .woocommerce .woocommerce-cart-form {
	flex: 1 1 520px;
	min-width: 0;
	margin: 0;
	container-type: inline-size;
}

.compra .woocommerce .cart-collaterals {
	flex: 0 1 380px;
	min-width: min(100%, 300px);
	width: auto;
	position: sticky;
	top: 98px;
}

/* Cada producto en una fila: imagen de 76 px, nombre (con la variación y «Quitar» debajo), cantidad y total. La tabla
   de WooCommerce se lee como filas; sus títulos quedan para los lectores de pantalla. */
.compra .woocommerce table.shop_table.cart {
	margin: 0;
	border: 0;
	border-top: 1px solid var(--wp--preset--color--tinta-12);
	border-radius: 0;
	border-collapse: collapse;
}

.compra .woocommerce table.shop_table.cart thead {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.compra .woocommerce table.shop_table.cart tbody {
	display: block;
}

/* El nombre y «Quitar» van juntos, centrados contra la imagen: las filas de arriba y de abajo se reparten lo que
   sobra. */
.compra .woocommerce table.shop_table.cart tr.cart_item {
	display: grid;
	grid-template-columns: 76px minmax(0, 1fr) auto minmax(96px, auto);
	grid-template-rows: minmax(0, 1fr) auto auto minmax(0, 1fr);
	grid-template-areas:
		"imagen . cantidad total"
		"imagen nombre cantidad total"
		"imagen quitar cantidad total"
		"imagen . cantidad total";
	align-items: center;
	column-gap: 20px;
	padding: 20px 0;
	border-bottom: 1px solid var(--wp--preset--color--tinta-12);
}

/* En pantallas chicas WooCommerce alinea las celdas a la derecha con !important (.shop_table_responsive). */
.compra .woocommerce table.shop_table.cart td {
	display: block;
	padding: 0;
	border: 0;
	background: none;
	text-align: left !important;
}

.compra .woocommerce table.shop_table.cart td::before {
	content: none;
	display: none;
}

.compra .woocommerce table.shop_table.cart td.product-thumbnail {
	grid-area: imagen;
	align-self: start;
}

.compra .woocommerce table.shop_table.cart td.product-thumbnail img {
	display: block;
	width: 76px;
	height: 76px;
	max-width: none;
	border-radius: 6px;
	object-fit: cover;
	background-color: var(--wp--preset--color--arena-media);
}

.compra .woocommerce table.shop_table.cart td.product-name {
	grid-area: nombre;
	align-self: end;
	font-size: var(--wp--preset--font-size--16);
	font-weight: 600;
	line-height: normal;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--tinta);
}

.compra .woocommerce table.shop_table.cart td.product-name a {
	color: inherit;
	text-decoration: none;
}

.compra .woocommerce table.shop_table.cart td.product-name .carrito__tipo {
	display: block;
	margin-top: 4px;
	font-size: var(--wp--preset--font-size--13);
	font-weight: 400;
	letter-spacing: 0;
	color: var(--wp--preset--color--gris-claro);
}

.compra .woocommerce table.shop_table.cart td.product-name .carrito__tipo .amount {
	font-weight: inherit;
	color: inherit;
}

.compra .woocommerce table.shop_table.cart td.product-name dl.variation {
	display: flex;
	flex-wrap: wrap;
	gap: 0 6px;
	margin: 4px 0 0;
	font-size: var(--wp--preset--font-size--13);
	font-weight: 400;
	letter-spacing: 0;
	color: var(--wp--preset--color--gris-claro);
}

.compra .woocommerce table.shop_table.cart td.product-name dl.variation :is(dt, dd, p) {
	float: none;
	margin: 0;
	padding: 0;
	font-weight: 400;
}

.compra .woocommerce table.shop_table.cart td.product-remove {
	grid-area: quitar;
	align-self: start;
	margin-top: 8px;
}

.compra .woocommerce table.shop_table.cart td.product-remove a.remove {
	display: inline;
	width: auto;
	height: auto;
	border-radius: 0;
	background: none;
	font-size: var(--wp--preset--font-size--12-5);
	font-weight: 600;
	line-height: normal;
	text-align: left;
	text-decoration: underline;
	text-underline-offset: 3px;
	color: var(--wp--preset--color--gris) !important;
}

.compra .woocommerce table.shop_table.cart td.product-remove a.remove:is(:hover, :focus-visible) {
	background: none;
	color: var(--wp--preset--color--rojo) !important;
}

/* El precio unitario no va (el comp muestra el total de la fila). */
.compra .woocommerce table.shop_table.cart td.product-price {
	display: none;
}

.compra .woocommerce table.shop_table.cart td.product-quantity {
	grid-area: cantidad;
}

.compra .woocommerce table.shop_table.cart td.product-subtotal {
	grid-area: total;
	font-size: var(--wp--preset--font-size--17);
	font-weight: 700;
	letter-spacing: -0.02em;
	text-align: right !important;
	color: var(--wp--preset--color--tinta);
}

/* Angosto (el formulario bajo 534 px, como el flex del comp): la cantidad y el total bajan a una segunda línea. */
@container (max-width: 533px) {
	.compra .woocommerce table.shop_table.cart tr.cart_item {
		grid-template-columns: 76px auto 1fr;
		grid-template-rows: minmax(0, 1fr) auto auto minmax(0, 1fr) auto;
		grid-template-areas:
			"imagen . ."
			"imagen nombre nombre"
			"imagen quitar quitar"
			"imagen . ."
			"cantidad cantidad total";
		row-gap: 0;
	}

	.compra .woocommerce table.shop_table.cart td.product-quantity {
		margin-top: 16px;
	}

	.compra .woocommerce table.shop_table.cart td.product-subtotal {
		justify-self: start;
		min-width: 96px;
		margin-top: 16px;
	}
}

/* La cantidad: − y + en una pastilla (los botones los pone el plugin; assets/compra.js actualiza el carrito solo). */
.compra .woocommerce table.shop_table.cart .quantity {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--wp--preset--color--tinta-18);
	border-radius: 999px;
}

.compra .woocommerce .quantity .cantidad__paso {
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--17);
	color: var(--wp--preset--color--tinta);
	cursor: pointer;
}

.compra .woocommerce .quantity .cantidad__paso:focus-visible {
	outline: 2px solid var(--wp--preset--color--tinta);
	outline-offset: -2px;
	border-radius: 999px;
}

.compra .woocommerce table.shop_table.cart .quantity input.qty {
	width: 24px;
	min-width: 24px;
	padding: 0;
	border: 0;
	background: transparent;
	text-align: center;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--14);
	font-weight: 600;
	color: var(--wp--preset--color--tinta);
	-moz-appearance: textfield;
}

.compra .woocommerce .quantity input.qty::-webkit-inner-spin-button,
.compra .woocommerce .quantity input.qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Bajo los productos: el cupón (el comp no lo dibuja; la tienda tiene cupones activos) y «Actualizar carrito», que con
   JavaScript no hace falta: la cantidad actualiza sola. */
.compra .woocommerce table.shop_table.cart tr:not(.cart_item) {
	display: block;
}

.compra .woocommerce table.shop_table.cart td.actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 0 0;
}

/* El campo del cupón se encoge antes que su botón. WooCommerce les pone a estas cajas los pseudoelementos del clearfix,
   que dentro de un flex cuentan como elementos (y suman el espacio entre ellos). */
.compra .woocommerce table.shop_table.cart td.actions .coupon {
	display: flex;
	flex: 1 1 auto;
	gap: 8px;
	float: none;
	padding: 0;
	border: 0;
}

.compra .woocommerce table.shop_table.cart td.actions::before,
.compra .woocommerce table.shop_table.cart td.actions::after,
.compra .woocommerce table.shop_table.cart td.actions .coupon::before,
.compra .woocommerce table.shop_table.cart td.actions .coupon::after {
	content: none;
	display: none;
}

.compra .woocommerce table.shop_table.cart td.actions .coupon input.input-text {
	flex: 0 1 220px;
	float: none;
	width: auto;
	min-width: 0;
	margin: 0;
}

.compra .woocommerce table.shop_table.cart td.actions .coupon .button {
	flex-shrink: 0;
	float: none;
	width: auto;
}

.con-js .compra .woocommerce table.shop_table.cart td.actions button[name="update_cart"] {
	display: none;
}

/* El resumen: la tarjeta del comp. */
.compra .woocommerce .cart-collaterals .cart_totals {
	float: none;
	width: auto;
	padding: var(--wp--preset--spacing--22-30);
	border: 1px solid var(--wp--preset--color--tinta-14);
	border-radius: 8px;
	background-color: var(--wp--preset--color--blanco);
	box-shadow: var(--wp--preset--shadow--suave);
}

.compra .woocommerce .cart_totals h2 {
	margin: 0;
	font-size: var(--wp--preset--font-size--11-5);
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: normal;
	text-transform: uppercase;
	color: var(--wp--preset--color--gris-claro);
}

.compra .woocommerce .cart_totals table.shop_table {
	display: block;
	margin: 18px 0 0;
	border: 0;
	border-radius: 0;
}

.compra .woocommerce .cart_totals table.shop_table tbody {
	display: block;
}

.compra .woocommerce .cart_totals table.shop_table tr {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 12px;
}

.compra .woocommerce .cart_totals table.shop_table tr + tr {
	margin-top: 10px;
}

.compra .woocommerce .cart_totals table.shop_table :is(th, td) {
	display: block;
	padding: 0;
	border: 0;
	background: none;
	font-size: var(--wp--preset--font-size--14-5);
	font-weight: 400;
	line-height: normal;
	color: var(--wp--preset--color--pizarra);
}

.compra .woocommerce .cart_totals table.shop_table td {
	text-align: right;
}

.compra .woocommerce .cart_totals table.shop_table td::before {
	content: none;
	display: none;
}

.compra .woocommerce .cart_totals table.shop_table tr.order-total {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--wp--preset--color--tinta-10);
}

.compra .woocommerce .cart_totals table.shop_table tr.order-total th {
	font-size: var(--wp--preset--font-size--15);
	font-weight: 600;
	color: var(--wp--preset--color--tinta);
}

/* clamp(24px, 2.4vw, 30px): dos usos en los comps (carrito y checkout), sin preset. */
.compra .woocommerce .cart_totals table.shop_table tr.order-total td,
.compra .woocommerce .cart_totals table.shop_table tr.order-total td strong {
	font-size: clamp(24px, 2.4vw, 30px);
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--tinta);
}

.compra .woocommerce .cart_totals table.shop_table tr.order-total td .includes_tax {
	display: block;
	margin-top: 6px;
	font-size: var(--wp--preset--font-size--12-5);
	font-weight: 400;
	letter-spacing: 0;
	color: var(--wp--preset--color--gris-claro);
}

.compra .woocommerce .wc-proceed-to-checkout {
	margin: 20px 0 0;
	padding: 0;
}

.compra .woocommerce .wc-proceed-to-checkout a.checkout-button {
	display: flex;
	width: 100%;
	margin: 0;
	padding: 16px 26px;
	font-size: var(--wp--preset--font-size--15);
}

.compra .woocommerce .wc-proceed-to-checkout a.checkout-button::after {
	content: "→";
}

/* Carrito vacío: la parte del tema; el botón «Volver a la tienda» de WooCommerce no va. */
.compra .woocommerce .return-to-shop {
	display: none;
}

/* Checkout: los datos a la izquierda (desde 520 px) y «Tu pedido» a la derecha (hasta 400 px, no menos de 300, pegado
   bajo la cabecera al bajar); si no caben, uno bajo el otro. Los avisos del formulario van a todo el ancho. */
.compra .woocommerce form.checkout {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--28-56);
}

/* Los pseudoelementos del clearfix de WooCommerce cuentan como elementos dentro de un flex. */
.compra .woocommerce :is(form.checkout, .col2-set)::before,
.compra .woocommerce :is(form.checkout, .col2-set)::after {
	content: none;
	display: none;
}

.compra .woocommerce form.checkout > .woocommerce-NoticeGroup {
	flex-basis: 100%;
}

.compra .woocommerce #customer_details {
	display: flex;
	flex: 1 1 520px;
	flex-direction: column;
	gap: 32px;
	min-width: 0;
	width: auto;
}

.compra .woocommerce #customer_details :is(.col-1, .col-2) {
	float: none;
	width: auto;
	max-width: none;
	padding: 0;
}

.compra .woocommerce form.checkout :is(h3, .documento-tributario__titulo) {
	margin: 0 0 18px;
	font-size: var(--wp--preset--font-size--20);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: normal;
	color: var(--wp--preset--color--tinta);
}

/* Los campos en dos columnas (una en pantallas angostas), 18 px entre ellos. El comp los reparte desde 220 px porque
   son cuatro; los de WooCommerce son más y van de a pares: nombre y apellidos, región y ciudad, teléfono y correo; el
   resto, a lo ancho. */
.compra .woocommerce :is(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-account-fields .create-account) {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: 18px;
}

.compra .woocommerce :is(form.checkout, form.login, form.register, form.checkout_coupon, .woocommerce-EditAccountForm, .woocommerce-address-fields) .form-row {
	display: flex;
	flex-direction: column;
	gap: 7px;
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

.compra .woocommerce form.checkout .form-row-wide {
	grid-column: 1 / -1;
}

.compra .woocommerce form.checkout :is(#billing_state_field, #billing_city_field, #billing_phone_field, #billing_email_field) {
	grid-column: auto;
}

.compra .woocommerce .form-row label {
	margin: 0;
	font-size: var(--wp--preset--font-size--13);
	font-weight: 600;
	line-height: normal;
	color: var(--wp--preset--color--tinta);
}

.compra .woocommerce .form-row label .required {
	border: 0;
	color: var(--wp--preset--color--rojo);
	text-decoration: none;
}

.compra .woocommerce .form-row label .optional {
	font-weight: 400;
	color: var(--wp--preset--color--gris-claro);
}

.compra .woocommerce .form-row .woocommerce-input-wrapper {
	display: block;
}

/* Las casillas: el cuadro de 16 px en tinta y el texto al lado. */
.compra .woocommerce .form-row label:is(.checkbox, .woocommerce-form__label-for-checkbox) {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: var(--wp--preset--font-size--13-5);
	font-weight: 400;
	color: var(--wp--preset--color--pizarra);
	cursor: pointer;
}

.compra .woocommerce input[type="checkbox"],
.compra .woocommerce input[type="radio"] {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--wp--preset--color--tinta);
}

/* El país y la región (selector mejorado de WooCommerce) con el aspecto de los campos: el relleno va en el texto (la
   hoja de WooCommerce para temas de bloques ya le pone uno). */
.compra .woocommerce form .form-row .select2-container .select2-selection--single {
	height: auto;
	padding: 0;
	border: 1px solid var(--wp--preset--color--tinta-18);
	border-radius: 8px;
	background-color: var(--wp--preset--color--blanco);
}

.compra .woocommerce form .form-row .select2-container .select2-selection--single .select2-selection__rendered {
	padding: 13px 40px 13px 14px;
	font-size: var(--wp--preset--font-size--15);
	line-height: normal;
	color: var(--wp--preset--color--tinta);
}

.compra .woocommerce .select2-container .select2-selection--single .select2-selection__arrow {
	top: 0;
	right: 12px;
	height: 100%;
}

.compra .woocommerce .select2-container:is(.select2-container--focus, .select2-container--open) .select2-selection--single {
	border-color: var(--wp--preset--color--tinta);
}

/* «Documento tributario» antes de las notas, como el comp: Boleta y Factura en dos columnas; con JavaScript, la casilla
   de Lioren no se ve (los botones la manejan). «Información adicional» no va: las notas llevan su propio rótulo. */
.compra .woocommerce .woocommerce-additional-fields {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.compra .woocommerce .woocommerce-additional-fields > h3 {
	display: none;
}

.compra .woocommerce .woocommerce-additional-fields .documento-tributario {
	order: 1;
}

.compra .woocommerce .woocommerce-additional-fields #lioren_facturar_field {
	order: 2;
}

.compra .woocommerce .woocommerce-additional-fields #lioren_facturacion_field {
	order: 3;
}

.compra .woocommerce .woocommerce-additional-fields .woocommerce-additional-fields__field-wrapper {
	order: 4;
	margin-top: 14px;
}

.con-js .compra .woocommerce #lioren_facturar_field {
	display: none;
}

.compra .woocommerce #lioren_facturacion_field > h2 {
	display: none;
}

/* Los campos de la factura, de a dos como los datos. Lioren los esconde con jQuery («display: none» en línea) y al
   mostrarlos le quita el estilo: la rejilla rige mientras no estén escondidos. */
.compra .woocommerce #lioren_facturacion_field:not([style*="display: none"]) {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: 18px;
}

.compra .woocommerce .documento-tributario__titulo {
	margin: 0 0 18px;
}

.compra .woocommerce .documento-tributario__opciones {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.compra .woocommerce .documento-tributario__opcion {
	margin: 0;
	padding: 14px 16px;
	border: 1px solid var(--wp--preset--color--tinta-18);
	border-radius: 8px;
	background: var(--wp--preset--color--blanco);
	color: var(--wp--preset--color--tinta);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--14);
	font-weight: 600;
	line-height: normal;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.compra .woocommerce .documento-tributario__opcion[aria-checked="true"] {
	border-color: var(--wp--preset--color--tinta);
	background: var(--wp--preset--color--tinta);
	color: var(--wp--preset--color--blanco);
}

.compra .woocommerce .documento-tributario__opcion:focus-visible {
	outline: 2px solid var(--wp--preset--color--tinta);
	outline-offset: 2px;
}

/* «Tu pedido»: la tarjeta del comp, con los productos, el total, el medio de pago y el botón. */
.compra .woocommerce .checkout-pedido {
	flex: 0 1 400px;
	min-width: min(100%, 300px);
	position: sticky;
	top: 98px;
	padding: var(--wp--preset--spacing--22-30);
	border: 1px solid var(--wp--preset--color--tinta-14);
	border-radius: 8px;
	background-color: var(--wp--preset--color--blanco);
	box-shadow: var(--wp--preset--shadow--suave);
}

.compra .woocommerce .checkout-pedido #order_review_heading {
	float: none;
	width: auto;
	margin: 0;
	font-size: var(--wp--preset--font-size--11-5);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gris-claro);
}

.compra .woocommerce .checkout-pedido #order_review {
	float: none;
	width: auto;
	margin-top: 14px;
}

.compra .woocommerce table.woocommerce-checkout-review-order-table {
	display: block;
	width: 100%;
	margin: 0;
	border: 0;
	border-radius: 0;
}

.compra .woocommerce table.woocommerce-checkout-review-order-table thead {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.compra .woocommerce table.woocommerce-checkout-review-order-table :is(tbody, tfoot) {
	display: block;
}

.compra .woocommerce table.woocommerce-checkout-review-order-table tr {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 16px;
}

.compra .woocommerce table.woocommerce-checkout-review-order-table :is(th, td) {
	padding: 0;
	border: 0;
	background: none;
	font-size: var(--wp--preset--font-size--14);
	font-weight: 400;
	line-height: normal;
	color: var(--wp--preset--color--grafito);
}

/* rgba(16, 20, 24, .08): la línea entre los productos, un solo uso en los comps. */
.compra .woocommerce table.woocommerce-checkout-review-order-table tr.cart_item {
	padding: 12px 0;
	border-bottom: 1px solid rgba(16, 20, 24, 0.08);
}

.compra .woocommerce table.woocommerce-checkout-review-order-table .product-quantity {
	font-weight: 400;
	color: var(--wp--preset--color--gris-claro);
}

.compra .woocommerce table.woocommerce-checkout-review-order-table td.product-total {
	color: var(--wp--preset--color--tinta);
	white-space: nowrap;
}

.compra .woocommerce table.woocommerce-checkout-review-order-table dl.variation {
	display: flex;
	flex-wrap: wrap;
	gap: 0 6px;
	margin: 4px 0 0;
	font-size: var(--wp--preset--font-size--12-5);
	color: var(--wp--preset--color--gris-claro);
}

.compra .woocommerce table.woocommerce-checkout-review-order-table dl.variation :is(dt, dd, p) {
	float: none;
	margin: 0;
	padding: 0;
	font-weight: 400;
}

.compra .woocommerce table.woocommerce-checkout-review-order-table tfoot tr {
	margin-top: 12px;
}

.compra .woocommerce table.woocommerce-checkout-review-order-table tfoot tr.order-total {
	margin-top: 18px;
}

.compra .woocommerce table.woocommerce-checkout-review-order-table tr.order-total th {
	font-size: var(--wp--preset--font-size--15);
	font-weight: 600;
	color: var(--wp--preset--color--tinta);
}

.compra .woocommerce table.woocommerce-checkout-review-order-table tr.order-total td,
.compra .woocommerce table.woocommerce-checkout-review-order-table tr.order-total td strong {
	font-size: clamp(24px, 2.4vw, 30px);
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--tinta);
}

/* El medio de pago: cada uno en una caja; el elegido, oscuro, como en el comp. */
.compra .woocommerce .checkout-pedido #payment {
	margin-top: 20px;
	padding: 0;
	border-radius: 0;
	background: none;
}

.compra .woocommerce #payment ul.payment_methods {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

.compra .woocommerce #payment ul.payment_methods::before,
.compra .woocommerce #payment ul.payment_methods::after {
	content: none;
	display: none;
}

.compra .woocommerce #payment ul.payment_methods li {
	margin: 0;
	padding: 14px 16px;
	border: 1px solid var(--wp--preset--color--tinta-18);
	border-radius: 8px;
	background: var(--wp--preset--color--blanco);
	color: var(--wp--preset--color--tinta);
	font-size: var(--wp--preset--font-size--14);
	line-height: normal;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.compra .woocommerce #payment ul.payment_methods li:has(input:checked) {
	border-color: var(--wp--preset--color--tinta);
	background: var(--wp--preset--color--tinta);
	color: var(--wp--preset--color--blanco);
}

.compra .woocommerce #payment ul.payment_methods li label {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-weight: 600;
	color: inherit;
	cursor: pointer;
}

.compra .woocommerce #payment ul.payment_methods li img {
	max-height: 22px;
	width: auto;
	margin: 0;
}

.compra .woocommerce #payment ul.payment_methods li:has(input:checked) input[type="radio"] {
	accent-color: var(--wp--preset--color--blanco);
}

.compra .woocommerce #payment div.payment_box {
	margin: 8px 0 0;
	padding: 0;
	border-radius: 0;
	background: none;
	font-size: var(--wp--preset--font-size--13);
	line-height: 1.5;
	color: inherit;
	opacity: 0.75;
}

.compra .woocommerce #payment div.payment_box::before {
	content: none;
	display: none;
}

.compra .woocommerce #payment div.payment_box p {
	margin: 0;
}

.compra .woocommerce #payment .place-order {
	display: flex;
	flex-direction: column;
	margin: 20px 0 0;
	padding: 0;
}

.compra .woocommerce #payment .woocommerce-privacy-policy-text p {
	margin: 0 0 16px;
	font-size: var(--wp--preset--font-size--12);
	line-height: 1.5;
	color: var(--wp--preset--color--gris-claro);
}

.compra .woocommerce #payment #place_order {
	float: none;
	width: 100%;
	padding: 16px 26px;
	font-size: var(--wp--preset--font-size--15);
}

.compra .woocommerce #payment #place_order::after {
	content: "→";
}

/* El cupón del checkout: el aviso para abrirlo y el formulario, con el aspecto de los campos. */
.compra .woocommerce form.checkout_coupon {
	margin: 0 0 24px;
	padding: 18px;
	border: 1px solid var(--wp--preset--color--tinta-12);
	border-radius: 8px;
}

.compra .woocommerce form.checkout_coupon > p:first-child {
	margin: 0 0 12px;
	font-size: var(--wp--preset--font-size--14);
	color: var(--wp--preset--color--pizarra);
}

.compra .woocommerce form.checkout_coupon .form-row {
	display: inline-flex;
	vertical-align: middle;
	margin: 0 8px 0 0;
}

.compra .woocommerce form.checkout_coupon .form-row input.input-text {
	width: 220px;
	max-width: 100%;
}

/* Mi cuenta, con sesión: la columna de la izquierda (desde 220 hasta 260 px) con el saludo y las secciones, y el
   contenido a la derecha (desde 520 px); si no caben, una sobre la otra. clamp(24px, 4vw, 56px): un solo uso. */
.compra .woocommerce:has(> .mi-cuenta__lateral) {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: clamp(24px, 4vw, 56px);
}

/* El clearfix de WooCommerce en la caja de Mi cuenta: dentro del flex sumaría el espacio entre columnas. */
.compra .woocommerce:has(> .mi-cuenta__lateral)::before,
.compra .woocommerce:has(> .mi-cuenta__lateral)::after {
	content: none;
	display: none;
}

.compra .woocommerce .mi-cuenta__lateral {
	flex: 0 1 260px;
	min-width: min(100%, 220px);
}

.compra .woocommerce .mi-cuenta__saludo {
	margin: 0;
	font-size: var(--wp--preset--font-size--17);
	line-height: normal;
	color: var(--wp--preset--color--tinta);
}

.compra .woocommerce .mi-cuenta__saludo span {
	display: block;
	font-size: var(--wp--preset--font-size--13);
	color: var(--wp--preset--color--gris-claro);
}

.compra .woocommerce .mi-cuenta__saludo strong {
	display: block;
	font-weight: 700;
	letter-spacing: -0.01em;
	word-break: break-all;
}

.compra .woocommerce .woocommerce-MyAccount-navigation {
	float: none;
	width: auto;
	margin-top: 22px;
}

.compra .woocommerce .woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.compra .woocommerce .woocommerce-MyAccount-navigation li {
	margin: 0;
	padding: 0;
	border: 0;
}

.compra .woocommerce .woocommerce-MyAccount-navigation li a {
	display: flex;
	padding: 14px 16px;
	border: 1px solid var(--wp--preset--color--tinta-18);
	border-radius: 8px;
	background: var(--wp--preset--color--blanco);
	color: var(--wp--preset--color--tinta);
	font-size: var(--wp--preset--font-size--14);
	font-weight: 600;
	line-height: normal;
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.compra .woocommerce .woocommerce-MyAccount-navigation li a:is(:hover, :focus-visible) {
	border-color: var(--wp--preset--color--tinta);
}

.compra .woocommerce .woocommerce-MyAccount-navigation li.is-active a {
	border-color: var(--wp--preset--color--tinta);
	background: var(--wp--preset--color--tinta);
	color: var(--wp--preset--color--blanco);
}

/* «Cerrar sesión» es un enlace, no una sección. */
.compra .woocommerce .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: 10px;
}

.compra .woocommerce .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a {
	display: inline;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--gris);
	font-size: var(--wp--preset--font-size--13-5);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.compra .woocommerce .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a:is(:hover, :focus-visible) {
	color: var(--wp--preset--color--rojo);
}

.compra .woocommerce .woocommerce-MyAccount-content {
	flex: 1 1 520px;
	float: none;
	width: auto;
	min-width: 0;
	font-size: var(--wp--preset--font-size--15);
	line-height: 1.6;
	color: var(--wp--preset--color--pizarra);
}

.compra .woocommerce .woocommerce-MyAccount-content .mi-cuenta__titulo {
	margin: 0 0 18px;
	font-size: var(--wp--preset--font-size--22-28);
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: normal;
	color: var(--wp--preset--color--tinta);
}

.compra .woocommerce .woocommerce-MyAccount-content p {
	margin: 0 0 12px;
}

.compra .woocommerce .woocommerce-MyAccount-content a:not(.button) {
	color: var(--wp--preset--color--tinta);
	text-underline-offset: 3px;
}

/* Los pedidos en filas, como el comp: el número y la fecha, el estado en una pastilla, el total y «Ver». */
.compra .woocommerce table.woocommerce-orders-table {
	display: block;
	margin: 0;
	border: 0;
	border-top: 1px solid var(--wp--preset--color--tinta-12);
	border-radius: 0;
}

.compra .woocommerce table.woocommerce-orders-table thead {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.compra .woocommerce table.woocommerce-orders-table tbody {
	display: block;
}

.compra .woocommerce table.woocommerce-orders-table tr.woocommerce-orders-table__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(96px, auto) auto;
	grid-template-areas:
		"numero estado total acciones"
		"fecha estado total acciones";
	align-items: center;
	gap: 0 24px;
	padding: 18px 0;
	border-bottom: 1px solid var(--wp--preset--color--tinta-12);
}

.compra .woocommerce table.woocommerce-orders-table :is(th, td) {
	display: block;
	padding: 0;
	border: 0;
	background: none;
	font-size: var(--wp--preset--font-size--13);
	font-weight: 400;
	line-height: normal;
	text-align: left !important;
	color: var(--wp--preset--color--gris-claro);
}

.compra .woocommerce table.woocommerce-orders-table :is(th, td)::before {
	content: none;
	display: none;
}

.compra .woocommerce table.woocommerce-orders-table .woocommerce-orders-table__cell-order-number {
	grid-area: numero;
	font-size: var(--wp--preset--font-size--15-5);
	font-weight: 600;
	color: var(--wp--preset--color--tinta);
}

.compra .woocommerce table.woocommerce-orders-table .woocommerce-orders-table__cell-order-number a {
	color: inherit;
	text-decoration: none;
}

.compra .woocommerce table.woocommerce-orders-table .woocommerce-orders-table__cell-order-date {
	grid-area: fecha;
	margin-top: 3px;
}

/* El estado en una pastilla: verde si está pagado; rojo si se canceló o falló; gris mientras espera.
   #1E7B45 sobre su 10 %: un solo uso en los comps. */
.compra .woocommerce table.woocommerce-orders-table .woocommerce-orders-table__cell-order-status {
	grid-area: estado;
	padding: 5px 10px;
	border-radius: 999px;
	background: var(--wp--preset--color--arena-media);
	font-size: var(--wp--preset--font-size--12);
	font-weight: 600;
	color: var(--wp--preset--color--pizarra);
}

.compra .woocommerce table.woocommerce-orders-table :is(.woocommerce-orders-table__row--status-completed, .woocommerce-orders-table__row--status-processing) .woocommerce-orders-table__cell-order-status {
	background: rgba(30, 123, 69, 0.1);
	color: #1e7b45;
}

.compra .woocommerce table.woocommerce-orders-table :is(.woocommerce-orders-table__row--status-cancelled, .woocommerce-orders-table__row--status-failed, .woocommerce-orders-table__row--status-refunded) .woocommerce-orders-table__cell-order-status {
	background: rgba(213, 16, 8, 0.08);
	color: var(--wp--preset--color--rojo);
}

.compra .woocommerce table.woocommerce-orders-table .woocommerce-orders-table__cell-order-total {
	grid-area: total;
	font-size: var(--wp--preset--font-size--16);
	font-weight: 700;
	text-align: right !important;
	color: var(--wp--preset--color--tinta);
}

.compra .woocommerce table.woocommerce-orders-table .woocommerce-orders-table__cell-order-total :is(.amount, .woocommerce-Price-amount) {
	font-weight: 700;
}

.compra .woocommerce table.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions {
	grid-area: acciones;
	display: flex;
	gap: 8px;
}

.compra .woocommerce table.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .button {
	padding: 9px 16px;
	font-size: var(--wp--preset--font-size--13);
}

/* Angosto: el estado, el total y «Ver» bajan a una segunda línea. */
@media (max-width: 600px) {
	.compra .woocommerce table.woocommerce-orders-table tr.woocommerce-orders-table__row {
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas:
			"numero numero numero"
			"fecha fecha fecha"
			"estado total acciones";
		row-gap: 0;
	}

	.compra .woocommerce table.woocommerce-orders-table .woocommerce-orders-table__cell-order-status {
		justify-self: start;
		margin-top: 12px;
	}

	.compra .woocommerce table.woocommerce-orders-table .woocommerce-orders-table__cell-order-total,
	.compra .woocommerce table.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions {
		margin-top: 12px;
	}
}

/* Las demás tablas de la cuenta (un pedido, los cursos): filas con línea, sin la caja de WooCommerce. */
.compra .woocommerce .woocommerce-MyAccount-content table.shop_table:not(.woocommerce-orders-table) {
	margin: 0 0 24px;
	border: 0;
	border-top: 1px solid var(--wp--preset--color--tinta-12);
	border-radius: 0;
	border-collapse: collapse;
}

.compra .woocommerce .woocommerce-MyAccount-content table.shop_table:not(.woocommerce-orders-table) :is(th, td) {
	padding: 14px 12px 14px 0;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--tinta-12);
	font-size: var(--wp--preset--font-size--14);
	line-height: 1.5;
}

.compra .woocommerce .woocommerce-MyAccount-content :is(fieldset, .woocommerce-address-fields__field-wrapper) {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: 18px;
	margin: 0 0 24px;
	padding: 0;
	border: 0;
}

.compra .woocommerce .woocommerce-MyAccount-content form :is(.woocommerce-form-row--wide, .form-row-wide) {
	grid-column: 1 / -1;
}

.compra .woocommerce .woocommerce-MyAccount-content form.woocommerce-EditAccountForm {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: 18px;
}

.compra .woocommerce .woocommerce-MyAccount-content form.woocommerce-EditAccountForm > :is(.clear, p:last-of-type, fieldset) {
	grid-column: 1 / -1;
}

.compra .woocommerce .woocommerce-MyAccount-content fieldset legend {
	grid-column: 1 / -1;
	margin: 0 0 4px;
	padding: 0;
	font-size: var(--wp--preset--font-size--17);
	font-weight: 700;
	color: var(--wp--preset--color--tinta);
}

.compra .woocommerce .woocommerce-MyAccount-content .woocommerce-Address {
	padding: var(--wp--preset--spacing--22-30);
	border: 1px solid var(--wp--preset--color--tinta-12);
	border-radius: 8px;
}

/* Los botones principales de la cuenta («Acceder», «Guardar los cambios»), oscuros como en el comp. */
.compra .woocommerce :is(.woocommerce-form-login__submit, button[name="save_account_details"], button[name="save_address"]) {
	border: 0;
	background: var(--wp--preset--color--tinta);
	color: var(--wp--preset--color--blanco);
}

.compra .woocommerce :is(.woocommerce-form-login__submit, button[name="save_account_details"], button[name="save_address"]):is(:hover, :focus-visible) {
	background: var(--wp--preset--color--rojo);
	color: var(--wp--preset--color--blanco);
}

/* Mi cuenta, sin sesión: acceder y crear cuenta en dos tarjetas (una sobre la otra si no caben). */
.compra .woocommerce #customer_login.col2-set {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
	gap: clamp(20px, 3vw, 32px);
	width: auto;
}

.compra .woocommerce #customer_login::before,
.compra .woocommerce #customer_login::after {
	content: none;
	display: none;
}

.compra .woocommerce #customer_login :is(.u-column1, .u-column2) {
	float: none;
	width: auto;
	max-width: none;
	padding: clamp(22px, 3vw, 36px);
	border: 1px solid var(--wp--preset--color--tinta-12);
	border-radius: 8px;
}

.compra .woocommerce #customer_login h2,
.compra .woocommerce .woocommerce-form-login + h2 {
	margin: 0 0 18px;
	font-size: var(--wp--preset--font-size--22-28);
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.15;
	color: var(--wp--preset--color--tinta);
}

/* Los dos formularios en una rejilla de una columna; en el de acceso, «Recuérdame» y «¿Olvidaste la contraseña?» van en
   la misma fila y el botón abajo, a todo el ancho, como el comp (WooCommerce los deja en otro orden). */
.compra .woocommerce :is(form.login, form.register) {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 18px 12px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
}

.compra .woocommerce :is(form.login, form.register) > * {
	grid-column: 1 / -1;
}

.compra .woocommerce form.login .form-row:has(.woocommerce-form-login__rememberme) {
	display: contents;
}

.compra .woocommerce form.login .woocommerce-form-login__rememberme {
	grid-column: 1;
	order: 1;
}

.compra .woocommerce form.login .lost_password {
	grid-column: 2;
	order: 2;
}

.compra .woocommerce :is(form.login .woocommerce-form-login__submit, form.register .woocommerce-form-register__submit) {
	grid-column: 1 / -1;
	order: 3;
	width: 100%;
	padding: 14px 24px;
}

.compra .woocommerce form :is(.lost_password, .woocommerce-LostPassword) {
	margin: 0;
	font-size: var(--wp--preset--font-size--13-5);
}

.compra .woocommerce form :is(.lost_password, .woocommerce-LostPassword) a {
	font-weight: 600;
	color: var(--wp--preset--color--tinta);
}

.compra .woocommerce .woocommerce-privacy-policy-text p {
	margin: 0;
	font-size: var(--wp--preset--font-size--12-5);
	line-height: 1.5;
	color: var(--wp--preset--color--gris);
}

/* Los pasos de la compra (cabecera del checkout y de la confirmación): el actual en tinta; en la confirmación del
   pedido (clase del body de WooCommerce), el 3. */
.pasos-compra .pasos-compra__paso {
	color: var(--wp--preset--color--gris-claro);
}

.pasos-compra .pasos-compra__paso a {
	color: inherit;
	text-decoration: none;
}

.pasos-compra .pasos-compra__paso a:is(:hover, :focus-visible) {
	color: var(--wp--preset--color--tinta);
}

.pasos-compra .pasos-compra__paso--datos,
.woocommerce-order-received .pasos-compra .pasos-compra__paso--confirmacion {
	color: var(--wp--preset--color--tinta);
}

.woocommerce-order-received .pasos-compra .pasos-compra__paso--datos {
	color: var(--wp--preset--color--gris-claro);
}

/* La confirmación del pedido: la caja centrada del comp, con el estado como título y el resumen en una línea. */
.confirmacion-pedido {
	text-align: center;
}

.confirmacion-pedido .confirmacion-pedido__icono {
	margin-inline: auto;
}

.confirmacion-pedido .wc-block-order-confirmation-status {
	line-height: 1.2;
	color: var(--wp--preset--color--tinta);
}

/* El título del estado («Pedido recibido», o el aviso si el pago no pasó) a 28 px y su frase debajo, en gris, como el
   «¡Gracias por tu compra!» del comp. 28 px: dos usos en los comps (las cajas de pedido recibido), sin preset. */
.confirmacion-pedido .wc-block-order-confirmation-status :is(h1, h2) {
	margin: 0;
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.2;
	color: var(--wp--preset--color--tinta);
}

.confirmacion-pedido .wc-block-order-confirmation-status p {
	margin: 10px 0 0;
	font-size: var(--wp--preset--font-size--15);
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.6;
	color: var(--wp--preset--color--gris);
}

.confirmacion-pedido .wc-block-order-confirmation-summary ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 18px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--13);
	color: var(--wp--preset--color--gris);
}

.confirmacion-pedido .wc-block-order-confirmation-summary li {
	margin: 0;
}

.confirmacion-pedido .wc-block-order-confirmation-summary li strong,
.confirmacion-pedido .wc-block-order-confirmation-summary .wc-block-order-confirmation-summary-list-item__value {
	color: var(--wp--preset--color--tinta);
}

/* El detalle (productos, cursos, pago y facturación): filas con línea, sin las cajas de WooCommerce. */
.confirmacion :is(.wc-block-order-confirmation-totals table, .wc-block-order-confirmation-downloads table) {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--14);
	color: var(--wp--preset--color--grafito);
}

.confirmacion :is(.wc-block-order-confirmation-totals table, .wc-block-order-confirmation-downloads table) :is(th, td) {
	padding: 12px 12px 12px 0;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--tinta-12);
	text-align: left;
	font-weight: 400;
}

.confirmacion :is(.wc-block-order-confirmation-totals table, .wc-block-order-confirmation-downloads table) :is(th, td):last-child {
	padding-right: 0;
	text-align: right;
}

.confirmacion :is(.wc-block-order-confirmation-totals table, .wc-block-order-confirmation-downloads table) thead th {
	font-size: var(--wp--preset--font-size--12);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gris-claro);
}

.confirmacion .wc-block-order-confirmation-totals tfoot tr:last-child :is(th, td) {
	font-size: var(--wp--preset--font-size--17);
	font-weight: 700;
	color: var(--wp--preset--color--tinta);
}

.confirmacion .wc-block-order-confirmation-additional-information {
	font-size: var(--wp--preset--font-size--14);
	line-height: 1.6;
	color: var(--wp--preset--color--pizarra);
}

.confirmacion .wc-block-order-confirmation-billing-address address {
	padding: 18px 20px;
	border: 1px solid var(--wp--preset--color--tinta-12);
	border-radius: 8px;
	font-size: var(--wp--preset--font-size--14);
	font-style: normal;
	line-height: 1.6;
	color: var(--wp--preset--color--pizarra);
}

/* --- Landings (paso 7): las páginas de campaña con las piezas del comp --- */

/* El video de YouTube con las esquinas de las imágenes de la ficha. */
.wp-block-embed.video .wp-block-embed__wrapper {
	border-radius: 6px;
	overflow: hidden;
}

.wp-block-embed.video {
	margin: 0;
}

/* «Preguntas frecuentes» de Ficha Servicio: la pregunta con su marcador afuera, como el comp. */
.wp-block-details.pregunta summary {
	cursor: pointer;
	list-style-position: outside;
}

/* Las tarjetas de Renta: el precio y la compra al pie, a la misma altura en cada fila. */
.wp-block-woocommerce-single-product:has(> .tarjeta-renta) {
	height: 100%;
}

/* Un logo blanco (para fondo oscuro) sobre fondo claro: en negro. */
.wp-block-image.logo-oscuro img {
	filter: brightness(0);
}