/* Contoda Compra — frontend.
 * Carrito, checkout y gracias por tu compra.
 *
 * Todo cuelga de .cc para no filtrarse al resto del sitio: el diseño de la
 * página de planes, el header y el footer no se tocan.
 *
 * Los selectores están prefijados a propósito para ganarle al kit de Elementor
 * y al theme, que ponen estilos globales a botones, tablas y enlaces.
 */

.cc {
	--cc-acento: #29D3A6;
	--cc-acento2: #0FB5A0;
	--cc-hondo: #056d58;
	--cc-hondo2: #067a62;
	--cc-tinta: #2E3A43;
	--cc-suave: #6b7680;
	--cc-gris: #9aa4ab;
	--cc-borde: #eef1f3;
	--cc-borde2: #e3e9e8;
	--cc-tinte: #e8faf4;
	--cc-tinte-borde: #c9f0e3;
	--cc-blanco: #ffffff;
	--cc-nieve: #f7fafa;
	--cc-nieve2: #fbfdfd;
	--cc-sombra: 0 10px 30px rgba(20, 40, 35, .07);
	--cc-sombra-cta: 0 10px 24px rgba(15, 181, 160, .35);
	--cc-r-s: 14px;
	--cc-r-m: 16px;
	--cc-r-l: 20px;
	--cc-pill: 999px;
	--cc-fuente: 'Poppins', 'Segoe UI', sans-serif;
	--cc-ease: cubic-bezier(.22, 1, .36, 1);

	font-family: var(--cc-fuente);
	color: var(--cc-tinta);
	font-size: 15px;
	line-height: 1.6;
	max-width: 1200px;
	margin: 0 auto;
}

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

/* Blindaje: ni botones, ni inputs, ni tablas heredan del theme. */
.cc button,
.cc input,
.cc select {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
}

.cc button {
	-webkit-appearance: none;
	appearance: none;
	background: none;
	border: 0;
	margin: 0;
	cursor: pointer;
}

.cc a {
	color: var(--cc-hondo2);
	text-decoration: none;
	transition: color .18s ease;
}

.cc a:hover {
	color: var(--cc-hondo);
}

.cc :focus-visible {
	outline: 2px solid var(--cc-acento2);
	outline-offset: 2px;
	border-radius: 6px;
}

.cc p {
	margin: 0;
}

/* Texto solo para lectores de pantalla. Va aquí y no en cada bloque porque
   el theme no siempre trae la regla, y sin ella los encabezados ocultos del
   checkout salen impresos en mitad de la página. */
.cc .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* El atributo hidden lo pisa cualquier clase con display, así que se refuerza:
   sin esto el campo de cupón sale abierto de entrada. */
.cc [hidden] {
	display: none !important;
}

/* Fondo: el halo del diseño, aplicado al bloque y no al body, para no pisar
   el fondo que la sección de Elementor pueda tener. */
/* Los halos se miden en porcentaje del bloque, no en píxeles: con medidas
   fijas, un carrito corto (uno vacío, por ejemplo) corta el degradado a la
   mitad y deja un escalón de color contra el blanco de la página. */
/* Cada halo se apaga del todo antes de llegar a cualquier borde del bloque
   (el centro está a más del 70 % del radio de cada lado). Con los valores
   anteriores el halo izquierdo seguía teniendo color en el borde superior y en
   el izquierdo, y el bloque se veía como un rectángulo verde claro con cantos
   rectos sobre la página blanca, en vez del resplandor difuso del diseño. */
.cc--fondo {
	background:
		radial-gradient(42% 46% at 30% 36%, rgba(41, 211, 166, .15), transparent 70%),
		radial-gradient(34% 40% at 74% 30%, rgba(41, 211, 166, .08), transparent 70%);
	max-width: none;
	padding: 8px 0 0;
}

.cc--fondo > .cc-carrito__zona {
	max-width: 1200px;
	margin: 0 auto;
}

/* Aire vertical propio. El horizontal lo pone la sección de Elementor: si lo
   añadiéramos aquí también, en móvil se sumarían los dos y el bloque quedaría
   con la mitad del ancho útil. */
.cc-carrito__zona {
	padding: 28px 0 56px;
}

/* ---------------------------------------------------------- Encabezado */

.cc-encabezado {
	text-align: center;
	margin: 0 0 36px;
}

.cc-encabezado__titulo {
	margin: 0;
	font-size: clamp(28px, 5vw, 44px);
	font-weight: 800;
	letter-spacing: -0.5px;
	line-height: 1.08;
	color: var(--cc-hondo);
	background: linear-gradient(90deg, var(--cc-hondo), var(--cc-acento));
	-webkit-background-clip: text;
	background-clip: text;
}

/* El Kit de Elementor pinta todos los h1 del sitio de gris (`.elementor-kit-19
   h1`), y ese selector le gana a una clase sola: el título salía gris plano en
   vez de con el degradado del diseño. Se sube la especificidad y, además, se
   usa -webkit-text-fill-color, que ningún tema toca y que es lo que de verdad
   deja ver el degradado a través de las letras. */
@supports (-webkit-background-clip: text) or (background-clip: text) {
	.cc .cc-encabezado__titulo,
	h1.cc-encabezado__titulo {
		color: transparent;
		-webkit-text-fill-color: transparent;
	}
}

/* Un pago rechazado con el título en verde de celebración manda el mensaje
   contrario al que hace falta. Va después de la regla del degradado, así que
   con la misma especificidad gana esta. */
.cc .cc-encabezado__titulo--mal,
h1.cc-encabezado__titulo--mal {
	background: none;
	-webkit-background-clip: border-box;
	background-clip: border-box;
	color: #9e3a2b;
	-webkit-text-fill-color: #9e3a2b;
}

.cc-encabezado__sub {
	margin: 8px 0 0;
	color: var(--cc-suave);
	font-size: 15px;
}

/* --------------------------------------------------------------- Grid */

.cc-carrito__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: 28px;
	align-items: start;
}

.cc-carrito__izq,
.cc-carrito__der {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

.cc-carrito__form {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 0;
}

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

.cc-tarjeta {
	background: var(--cc-blanco);
	border: 1px solid var(--cc-borde);
	border-radius: var(--cc-r-l);
	box-shadow: var(--cc-sombra);
	padding: 28px;
}

.cc-tarjeta__cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 18px;
}

.cc-tarjeta__titulo {
	font-weight: 700;
	font-size: 17px;
	margin: 0 0 18px;
	color: var(--cc-tinta);
	line-height: 1.3;
}

.cc-tarjeta__cabecera .cc-tarjeta__titulo {
	margin: 0;
}

.cc-tarjeta__meta {
	font-size: 13px;
	color: var(--cc-suave);
	white-space: nowrap;
}

/* ---------------------------------------------------------- Línea item */

.cc-item {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 18px;
	border: 1px solid var(--cc-borde);
	border-radius: var(--cc-r-m);
	flex-wrap: wrap;
}

.cc-item + .cc-item {
	margin-top: 12px;
}

.cc-item.is-cargando {
	opacity: .55;
	pointer-events: none;
}

.cc-item__figura {
	width: 72px;
	height: 72px;
	border-radius: var(--cc-r-s);
	overflow: hidden;
	flex-shrink: 0;
	background: linear-gradient(135deg, var(--cc-acento), var(--cc-acento2));
	display: flex;
	align-items: center;
	justify-content: center;
}

.cc-item__figura img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
}

.cc-item__sigla {
	color: var(--cc-blanco);
	font-weight: 800;
	font-size: 13px;
	letter-spacing: .5px;
}

.cc-item__datos {
	flex: 1;
	min-width: 0;
}

.cc-item__nombre {
	font-weight: 600;
	font-size: 16px;
	line-height: 1.35;
}

.cc-item__nombre a {
	color: inherit;
}

.cc-item__badges {
	display: flex;
	gap: 8px;
	margin-top: 6px;
	flex-wrap: wrap;
}

.cc-badge {
	background: var(--cc-nieve);
	color: #3a4750;
	font-size: 12px;
	font-weight: 600;
	border-radius: var(--cc-pill);
	padding: 3px 12px;
	line-height: 1.5;
}

.cc-badge--plan {
	background: var(--cc-tinte);
	color: var(--cc-hondo2);
}

.cc-item__meta {
	font-size: 13px;
	color: var(--cc-suave);
	margin-top: 6px;
}

.cc-item__meta p {
	margin: 0;
}

.cc-item__meta dl,
.cc-item__meta dt,
.cc-item__meta dd {
	margin: 0;
	display: inline;
}

.cc-item__meta dt::after {
	content: ' ';
}

/* Stepper */

.cc-item__cantidad {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--cc-nieve);
	border: 1px solid var(--cc-borde);
	border-radius: var(--cc-pill);
	padding: 6px 10px;
}

.cc-paso {
	width: 26px;
	height: 26px;
	border-radius: var(--cc-pill);
	background: var(--cc-blanco);
	border: 1px solid var(--cc-borde2);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	color: var(--cc-hondo2);
	transition: background .18s ease, border-color .18s ease;
	flex-shrink: 0;
}

.cc-paso:hover {
	background: var(--cc-tinte);
	border-color: var(--cc-tinte-borde);
}

.cc-paso[disabled] {
	opacity: .4;
	cursor: default;
	background: var(--cc-blanco);
	border-color: var(--cc-borde2);
}

.cc-item__cantidad .quantity {
	margin: 0;
	display: block;
}

.cc-item__cantidad .quantity label,
.cc-item__cantidad .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.cc-item__cantidad input.qty {
	width: 42px;
	min-width: 42px;
	border: 0;
	background: transparent;
	text-align: center;
	font-weight: 600;
	font-size: 15px;
	padding: 0;
	box-shadow: none;
	-moz-appearance: textfield;
	appearance: textfield;
}

.cc-item__cantidad input.qty::-webkit-outer-spin-button,
.cc-item__cantidad input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Precio */

.cc-item__precio {
	text-align: right;
	min-width: 96px;
}

.cc-item__subtotal {
	display: block;
	font-weight: 700;
	font-size: 16px;
}

.cc-item__subtotal .amount {
	font-weight: 700;
}

.cc-item__unitario {
	display: block;
	font-size: 12px;
	color: var(--cc-gris);
	margin-top: 2px;
}

.cc-item__quitar a,
.cc-quitar {
	color: #c4ccd1;
	font-size: 20px;
	line-height: 1;
	padding: 4px;
	display: inline-block;
	transition: color .18s ease;
}

.cc-item__quitar a:hover,
.cc-quitar:hover {
	color: #e05f5f;
}

/* Acciones del formulario: el botón de actualizar es el respaldo sin JS. */

.cc-carrito__acciones {
	margin-top: 16px;
}

.cc-actualizar {
	background: var(--cc-nieve);
	border: 1px solid var(--cc-borde2);
	border-radius: var(--cc-pill);
	padding: 10px 22px;
	font-size: 14px;
	font-weight: 600;
	color: var(--cc-hondo2);
}

.cc.cc-js .cc-actualizar {
	display: none;
}

/* -------------------------------------------------------------- Cupón */

.cc-cupon {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 22px 28px;
	flex-wrap: wrap;
}

.cc-cupon__label {
	font-weight: 600;
	font-size: 15px;
	white-space: nowrap;
	margin: 0;
}

.cc-cupon__input {
	flex: 1;
	min-width: 160px;
	border: 1px solid var(--cc-borde2);
	border-radius: var(--cc-pill);
	padding: 12px 20px;
	font-size: 14px;
	background: var(--cc-blanco);
	color: var(--cc-tinta);
	transition: border-color .18s ease, box-shadow .18s ease;
}

.cc-cupon__input:focus {
	outline: none;
	border-color: var(--cc-acento);
	box-shadow: 0 0 0 3px rgba(41, 211, 166, .18);
}

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

.cc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border-radius: var(--cc-pill);
	font-weight: 700;
	font-size: 16px;
	text-align: center;
	padding: 15px 26px;
	line-height: 1.2;
	transition: filter .18s ease, background .18s ease, color .18s ease;
}

.cc-btn--principal,
.cc .cc-btn--principal {
	background: linear-gradient(90deg, var(--cc-acento), var(--cc-acento2));
	color: var(--cc-blanco);
	box-shadow: var(--cc-sombra-cta);
	width: 100%;
}

.cc-btn--principal:hover,
.cc .cc-btn--principal:hover {
	filter: brightness(1.05);
	color: var(--cc-blanco);
}

.cc-btn--linea {
	border: 1.5px solid var(--cc-acento2);
	color: var(--cc-hondo2);
	font-weight: 600;
	font-size: 14px;
	padding: 11px 24px;
	background: transparent;
}

.cc-btn--linea:hover {
	background: var(--cc-tinte);
	color: var(--cc-hondo2);
}

.cc-btn__flecha {
	font-size: 1.05em;
}

/* ------------------------------------------------------------ Resumen */

.cc-resumen {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
	float: none;
}

/* Mismo caso que en el formulario del checkout: WooCommerce maqueta el carrito
   con floats y anchos en porcentaje, y su `.woocommerce .cart-collaterals
   .cart_totals` le gana en especificidad a la regla de arriba. Sin esto el
   resumen se queda en el 48% de su columna y el total, que va en 22px, se sale
   de la tarjeta por la derecha.

   Se sube la especificidad a propósito en vez de usar !important, porque así el
   equipo todavía puede afinar algo desde Elementor si hace falta. */
.cc.cc-carrito .cart-collaterals,
.cc.cc-carrito .cart-collaterals .cart_totals,
.cc.cc-carrito .cart-collaterals .cross-sells {
	float: none;
	width: auto;
}

.cc-resumen__filas {
	display: flex;
	flex-direction: column;
}

.cc-fila {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	font-size: 14px;
	color: var(--cc-suave);
	padding: 8px 0;
}

.cc-fila__val {
	color: var(--cc-tinta);
	font-weight: 500;
	text-align: right;
	white-space: nowrap;
}

/* La raya va encima del total y no debajo de la última línea: cuál es la
   última depende de si hay cupones, envío o impuestos, y anclarla al total es
   lo único que se mantiene en su sitio en todos los casos. */
.cc-fila--total {
	align-items: center;
	padding: 16px 0 4px;
	border-top: 1px solid var(--cc-borde);
	margin-top: 4px;
}

.cc-fila--total .cc-fila__et {
	font-weight: 700;
	font-size: 16px;
	color: var(--cc-tinta);
}

.cc-fila--total .cc-fila__val {
	font-weight: 800;
	font-size: 22px;
	color: var(--cc-hondo2);
}

.cc-fila--envio {
	display: block;
}

.cc-fila--envio ul {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 14px;
}

.cc-resumen__cta {
	margin-top: 18px;
}

.cc-resumen__seguir {
	text-align: center;
	margin-top: 14px;
	font-size: 13px;
}

/* Garantías */

.cc-garantias {
	background: var(--cc-tinte);
	border-radius: var(--cc-r-l);
	padding: 20px 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 13px;
	color: var(--cc-hondo2);
	font-weight: 500;
}

/* -------------------------------------------------------- Beneficios */

.cc-beneficios {
	border-top: 1px solid var(--cc-borde);
	margin-top: 44px;
	padding: 22px 0 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px 48px;
	flex-wrap: wrap;
	font-size: 14px;
	color: #3a4750;
	font-weight: 500;
}

/* ------------------------------------------------------ Carrito vacío */

.cc-vacio {
	background: var(--cc-blanco);
	border: 1px solid var(--cc-borde);
	border-radius: var(--cc-r-l);
	box-shadow: var(--cc-sombra);
	padding: 56px 32px;
	text-align: center;
	max-width: 620px;
	margin: 0 auto;
}

.cc-vacio__icono {
	width: 72px;
	height: 72px;
	border-radius: var(--cc-pill);
	background: var(--cc-tinte);
	color: var(--cc-hondo2);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 20px;
}

.cc-vacio__titulo {
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	color: var(--cc-tinta);
}

.cc-vacio__texto {
	margin: 10px 0 0;
	color: var(--cc-suave);
	font-size: 15px;
}

.cc-vacio__cta {
	margin: 26px 0 0;
}

.cc-vacio__cta .cc-btn {
	width: auto;
	min-width: 260px;
}

.cc-vacio__alt {
	margin: 14px 0 0;
	font-size: 13px;
}

/* --------------------------------------------- Avisos de WooCommerce */

.cc .woocommerce-message,
.cc .woocommerce-info,
.cc .woocommerce-error {
	border: 1px solid var(--cc-tinte-borde);
	background: var(--cc-tinte);
	color: var(--cc-hondo);
	border-radius: var(--cc-r-m);
	padding: 14px 20px;
	margin: 0 0 20px;
	list-style: none;
	font-size: 14px;
	font-weight: 500;
}

.cc .woocommerce-error {
	border-color: #f3ccc6;
	background: #fdeceb;
	color: #9e3a2b;
}

.cc .woocommerce-message a,
.cc .woocommerce-info a,
.cc .woocommerce-error a {
	text-decoration: underline;
}

.cc-aviso {
	border: 1px solid #f3ccc6;
	background: #fdeceb;
	color: #9e3a2b;
	border-radius: var(--cc-r-m);
	padding: 14px 20px;
	margin: 0 0 20px;
	font-size: 14px;
	font-weight: 500;
}

/* ------------------------------------------------------------ Móvil */

@media (max-width: 980px) {
	.cc-carrito__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}
}

@media (max-width: 720px) {
	.cc {
		font-size: 14.5px;
	}

	.cc-tarjeta {
		padding: 20px;
		border-radius: var(--cc-r-m);
	}

	.cc-item {
		padding: 16px;
		gap: 14px;
		row-gap: 14px;
	}

	.cc-item__figura {
		width: 56px;
		height: 56px;
	}

	.cc-item__datos {
		flex: 1 1 calc(100% - 70px);
	}

	/* En móvil la fila se parte: arriba figura y nombre, abajo cantidad,
	   precio y la equis, para que nada quede apretado. */
	.cc-item__cantidad {
		order: 3;
	}

	.cc-item__precio {
		order: 4;
		flex: 1;
		min-width: 0;
	}

	.cc-item__quitar {
		order: 5;
	}

	.cc-cupon {
		padding: 20px;
	}

	.cc-cupon__label {
		flex: 1 1 100%;
	}

	.cc-beneficios {
		gap: 12px 26px;
		font-size: 13px;
		margin-top: 32px;
	}

	.cc-vacio {
		padding: 40px 22px;
	}

	.cc-vacio__cta .cc-btn {
		min-width: 0;
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cc *,
	.cc *::before,
	.cc *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}
}

/* =====================================================================
 * CHECKOUT
 * ===================================================================== */

.cc-checkout__zona {
	padding: 28px 0 56px;
}

.cc-checkout__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: 28px;
	align-items: start;
}

.cc-checkout__izq,
.cc-checkout__der {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

.cc-checkout__form {
	margin: 0;
}

/* La columna izquierda del col2-set original. Aquí solo hay facturación,
   porque la tienda no envía nada. Si algún día se activa el envío, la
   segunda columna se apila debajo en vez de partir la tarjeta. */
.cc-checkout__datos {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.cc-checkout__datos .col-1,
.cc-checkout__datos .col-2 {
	width: auto;
	float: none;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.cc-checkout__datos .col-2:empty {
	display: none;
}

/* La tarjeta de facturación salía 32 px más abajo que "Tu orden". Dos ítems
   flex de alto cero se comían un gap de 16 px cada uno: el clearfix de
   WooCommerce (`.col2-set::before/::after` con display: table) dentro de
   `#customer_details`, y el elemento vacío <wc-order-attribution-inputs> que
   WooCommerce mete al principio de `.col-1`. Sin contenido no hay ítem, y
   con display: contents el elemento desaparece de la caja pero sus inputs
   ocultos siguen enviándose con el formulario. */
.cc.cc-checkout .col2-set::before,
.cc.cc-checkout .col2-set::after {
	content: none;
}

.cc.cc-checkout .col2-set wc-order-attribution-inputs {
	display: contents;
}

/* La columna de envío nunca está vacía del todo (trae dos <div> sin campos),
   así que :empty no la ocultaba y dejaba 32 px de aire al pie. Si algún día
   se activa el envío, tendrá .form-row y volverá a verse. */
.cc.cc-checkout .col2-set .col-2:not(:has(.form-row)) {
	display: none;
}

/* Cintillo del plan */

.cc-contexto {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: -20px 0 30px;
	font-size: 14px;
}

.cc-contexto__et {
	color: var(--cc-suave);
}

.cc-contexto__plan {
	background: var(--cc-tinte);
	color: var(--cc-hondo2);
	border-radius: var(--cc-pill);
	padding: 5px 16px;
	font-weight: 600;
}

/* Cabecera de paso */

.cc-paso-cab {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 22px;
}

.cc-paso-num {
	width: 30px;
	height: 30px;
	border-radius: var(--cc-pill);
	background: linear-gradient(135deg, var(--cc-acento), var(--cc-acento2));
	color: var(--cc-blanco);
	font-weight: 700;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.cc-paso-tit {
	font-weight: 700;
	font-size: 18px;
	margin: 0;
	line-height: 1.3;
	color: var(--cc-tinta);
}

.cc-pago .cc-paso-tit {
	font-size: 17px;
}

.cc-paso-tarjeta {
	padding: 32px;
}

.cc-pago {
	padding: 28px;
}

/* Campos */

.cc-campos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

/* WooCommerce trae su propia maqueta de formulario, con floats y anchos en
   porcentaje, y sus selectores (`.woocommerce .col2-set .col-1`) son MÁS
   específicos que los nuestros. Sin esto, la columna de datos se queda en el
   48% y los campos salen del tamaño de un sello. Se neutraliza solo dentro de
   nuestro bloque: el resto de la tienda sigue con su maqueta.

   Se sube la especificidad a propósito en vez de usar !important, porque así
   el equipo todavía puede afinar algo desde Elementor si hace falta. */
.cc.cc-checkout .col2-set .col-1,
.cc.cc-checkout .col2-set .col-2 {
	float: none;
	width: auto;
	padding: 0;
}

.cc .cc-campos .form-row,
.cc .cc-campos .form-row-first,
.cc .cc-campos .form-row-last,
.cc .cc-campos .form-row-wide {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

/* WooCommerce envuelve cada campo en un <span> que, dentro de una columna
   flex, se encoge al ancho de su contenido y arrastra al input con él. */
.cc .cc-campos .woocommerce-input-wrapper {
	display: block;
	width: 100%;
}

.cc .cc-campos .form-row input.input-text,
.cc .cc-campos .form-row textarea,
.cc .cc-campos .form-row select {
	width: 100%;
}

.cc-campos .form-row {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin: 0;
	padding: 0;
	float: none;
	width: auto;
}

/* Un textarea no cabe cómodo en media columna. */
.cc-campos .form-row:has(textarea) {
	grid-column: 1 / -1;
}

/* Flexible Checkout Fields esconde así los campos que el equipo apagó
   (país, dirección, ciudad). Si ocuparan celda, la rejilla saldría con
   huecos entre los campos visibles. */
.cc-campos .inspire_checkout_fields_hide,
.cc-campos .form-row[style*="display:none"],
.cc-campos .form-row[style*="display: none"] {
	display: none !important;
}

.cc-campos label {
	font-size: 13px;
	font-weight: 600;
	color: #3a4750;
	margin: 0;
	line-height: 1.4;
}

.cc-campos .required,
.cc-campos abbr.required {
	color: var(--cc-acento2);
	text-decoration: none;
	border: 0;
}

.cc-campos .optional {
	color: var(--cc-gris);
	font-weight: 400;
}

.cc-campos input[type="text"],
.cc-campos input[type="tel"],
.cc-campos input[type="email"],
.cc-campos input[type="number"],
.cc-campos input[type="password"],
.cc-campos textarea,
.cc-campos select,
.cc-campos .select2-container .select2-selection--single {
	border: 1px solid var(--cc-borde2);
	border-radius: var(--cc-r-s);
	padding: 13px 18px;
	font-size: 14px;
	background: var(--cc-nieve2);
	color: var(--cc-tinta);
	width: 100%;
	line-height: 1.4;
	height: auto;
	transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.cc-campos textarea {
	min-height: 96px;
	resize: vertical;
}

.cc-campos input:focus,
.cc-campos textarea:focus,
.cc-campos select:focus {
	outline: none;
	border-color: var(--cc-acento);
	background: var(--cc-blanco);
	box-shadow: 0 0 0 3px rgba(41, 211, 166, .18);
}

.cc-campos .woocommerce-invalid input,
.cc-campos .woocommerce-invalid select {
	border-color: #e0a49a;
	background: #fdf7f6;
}

.cc-campos .woocommerce-validated input {
	border-color: var(--cc-tinte-borde);
}

.cc-campos input::placeholder,
.cc-campos textarea::placeholder {
	color: var(--cc-gris);
}

/* La casilla de crear cuenta no es un campo de dos columnas. */
.cc-campos .create-account,
.cc-campos .form-row-wide.create-account {
	grid-column: 1 / -1;
	flex-direction: row;
	align-items: center;
}

.cc-privacidad {
	margin-top: 22px;
	background: var(--cc-nieve);
	border-radius: var(--cc-r-s);
	padding: 14px 18px;
	font-size: 13px;
	color: var(--cc-suave);
	line-height: 1.65;
}

/* Tu orden */

.cc-orden__items {
	display: flex;
	flex-direction: column;
}

.cc-orden__item {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 14px;
	padding: 10px 0;
	border-bottom: 1px solid var(--cc-borde);
}

.cc-orden__nombre {
	color: #3a4750;
	line-height: 1.5;
}

.cc-orden__periodo {
	background: var(--cc-tinte);
	color: var(--cc-hondo2);
	border-radius: var(--cc-pill);
	padding: 2px 10px;
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
	margin-left: 2px;
}

.cc-orden__cant {
	color: var(--cc-gris);
	white-space: nowrap;
}

.cc-orden__total {
	font-weight: 600;
	white-space: nowrap;
}

.cc-orden__totales {
	display: flex;
	flex-direction: column;
	margin-top: 4px;
}

.cc-orden .cc-fila--total .cc-fila__val {
	font-size: 20px;
}

/* Cupón dentro de la orden */

.cc-cupon-linea {
	margin-top: 12px;
	font-size: 13px;
}

.cc-cupon-linea__abrir {
	color: var(--cc-hondo2);
	font-weight: 500;
	font-size: 13px;
	padding: 0;
	text-align: left;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.cc-cupon-linea__abrir:hover {
	color: var(--cc-hondo);
}

.cc-cupon-linea__campo {
	display: flex;
	gap: 8px;
	margin-top: 10px;
	flex-wrap: wrap;
}

.cc-cupon-linea__campo .cc-cupon__input {
	flex: 1 1 140px;
	padding: 10px 16px;
	background: var(--cc-nieve2);
}

.cc-cupon-linea__aplicar {
	padding: 9px 18px;
	font-size: 13px;
	white-space: nowrap;
}

.cc-cupon-linea__notas {
	margin-top: 10px;
}

.cc-cupon-linea__notas:empty {
	display: none;
}

.cc-cupon-linea__notas .woocommerce-message,
.cc-cupon-linea__notas .woocommerce-error,
.cc-cupon-linea__notas ul {
	margin: 0;
	padding: 10px 14px;
	font-size: 13px;
}

/* Con JavaScript, el formulario de cupón original sobra: su sitio lo toma
   el campo de aquí arriba. Sin JavaScript reaparece y sigue funcionando. */
.cc.cc-js .cc-cupon-respaldo {
	display: none;
}

/* Métodos de pago */

.cc-metodos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.cc-metodo {
	border: 2px solid var(--cc-borde);
	background: var(--cc-blanco);
	border-radius: var(--cc-r-m);
	transition: border-color .18s ease, background .18s ease;
}

.cc-metodo--elegido,
.cc-metodo:has(.cc-metodo__radio:checked) {
	border-color: var(--cc-acento);
	background: #f4fdf9;
}

/* El radio real se esconde, pero sigue en el DOM y sigue siendo el que
   manda: checkout.js lee su estado para saber con qué se cobra. */
.cc-metodo__radio {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	pointer-events: none;
}

.cc-metodo__label {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 18px;
	cursor: pointer;
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--cc-tinta);
	line-height: 1.4;
}

.cc-metodo__punto {
	width: 18px;
	height: 18px;
	border-radius: var(--cc-pill);
	border: 2px solid #cfd7d5;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color .18s ease;
}

.cc-metodo__punto::after {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: var(--cc-pill);
	background: var(--cc-acento2);
	transform: scale(0);
	transition: transform .18s var(--cc-ease);
}

.cc-metodo--elegido .cc-metodo__punto,
.cc-metodo:has(.cc-metodo__radio:checked) .cc-metodo__punto {
	border-color: var(--cc-acento2);
}

.cc-metodo--elegido .cc-metodo__punto::after,
.cc-metodo:has(.cc-metodo__radio:checked) .cc-metodo__punto::after {
	transform: scale(1);
}

.cc-metodo__radio:focus-visible + .cc-metodo__label .cc-metodo__punto {
	outline: 2px solid var(--cc-acento2);
	outline-offset: 2px;
}

.cc-metodo__titulo {
	flex: 1;
	min-width: 0;
}

.cc-metodo__extra {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
}

.cc-metodo__sub {
	font-size: 12px;
	color: var(--cc-gris);
	font-weight: 500;
	white-space: nowrap;
}

.cc-metodo__extra img {
	max-height: 24px;
	width: auto;
	display: block;
	margin: 0;
	float: none;
}

.cc-metodo__caja {
	padding: 0 18px 16px 48px;
	font-size: 13px;
	color: var(--cc-suave);
	line-height: 1.65;
}

.cc-metodo__caja p:last-child {
	margin-bottom: 0;
}

.cc-metodo__caja input,
.cc-metodo__caja select {
	border: 1px solid var(--cc-borde2);
	border-radius: var(--cc-r-s);
	padding: 11px 16px;
	background: var(--cc-blanco);
	width: 100%;
	font-size: 14px;
}

/* Enviar el pedido */

.cc-pago__enviar {
	margin-top: 20px;
	padding: 0;
}

.cc-btn--pedido {
	width: 100%;
}

/* WooCommerce viste el botón de pedido con `.woocommerce button.button.alt`
   (morado, 3 px de radio, 15 px) y lo flota con `#payment #place_order`.
   Las dos reglas le ganan en especificidad a .cc-btn, así que el botón salía
   morado y cuadrado en medio de un checkout verde. Aquí se repite el botón
   principal con una especificidad que supera a las dos, sin !important. */
.cc.cc-checkout #payment #place_order.cc-btn.cc-btn--principal {
	float: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	margin: 0;
	padding: 15px 26px;
	border: 0;
	border-radius: var(--cc-pill);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	background: linear-gradient(90deg, var(--cc-acento), var(--cc-acento2));
	color: var(--cc-blanco);
	box-shadow: var(--cc-sombra-cta);
}

.cc.cc-checkout #payment #place_order.cc-btn.cc-btn--principal:hover {
	filter: brightness(1.05);
	background: linear-gradient(90deg, var(--cc-acento), var(--cc-acento2));
	color: var(--cc-blanco);
}

.cc-pago__seguro {
	text-align: center;
	margin-top: 12px;
	font-size: 12px;
	color: var(--cc-gris);
}

.cc-checkout .woocommerce-terms-and-conditions-wrapper {
	font-size: 13px;
	color: var(--cc-suave);
	margin-bottom: 14px;
}

.cc-checkout .woocommerce-privacy-policy-text p:last-child {
	margin-bottom: 0;
}

/* La capa de "procesando" que pone WooCommerce sobre el bloque. */

.cc-checkout .blockUI.blockOverlay {
	border-radius: var(--cc-r-l);
}

@media (max-width: 980px) {
	.cc-checkout__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	/* En una sola columna se respeta el orden natural: primero los datos y
	   después el resumen con el botón. Poniendo el resumen arriba, el botón
	   de pagar queda ANTES del formulario, y quien lo pulse recibe errores de
	   campos que todavía no ha visto. */
}

@media (max-width: 720px) {
	.cc-paso-tarjeta {
		padding: 22px 20px;
	}

	.cc-campos {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}

	.cc-contexto {
		margin: -14px 0 24px;
		flex-wrap: wrap;
		text-align: center;
	}

	.cc-metodo__label {
		flex-wrap: wrap;
		padding: 14px 16px;
	}

	/* En móvil la subetiqueta "Tarjeta · PSE · Nequi" más el logo de Wompi
	   ocupan casi toda la fila, y como el título arrancaba desde cero de ancho
	   se quedaba en 1 px con la palabra "Wompi" pintada encima de la
	   subetiqueta. Con un mínimo para el título, lo que no cabe pasa a una
	   segunda fila alineado a la derecha; el emoji de la transferencia sigue
	   cabiendo en la primera. */
	.cc-metodo__titulo {
		min-width: 55%;
	}

	.cc-metodo__extra {
		margin-left: auto;
	}

	.cc-metodo__caja {
		padding: 0 16px 14px;
	}
}

/* =====================================================================
 * GRACIAS POR TU COMPRA
 * ===================================================================== */

.cc-gracias__zona {
	padding: 28px 0 48px;
}

.cc-gracias__cab {
	text-align: center;
	margin: 0 0 36px;
}

.cc-gracias__cuerpo {
	max-width: 860px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* El check */

.cc-check {
	width: 76px;
	height: 76px;
	border-radius: var(--cc-pill);
	background: linear-gradient(135deg, var(--cc-acento), var(--cc-acento2));
	color: var(--cc-blanco);
	font-size: 34px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 18px;
	box-shadow: 0 14px 30px rgba(15, 181, 160, .35);
	animation: cc-aparecer .5s ease-out;
}

.cc-check--mal {
	background: linear-gradient(135deg, #f0a99c, #d9614c);
	box-shadow: 0 14px 30px rgba(217, 97, 76, .3);
	font-weight: 700;
}

@keyframes cc-aparecer {
	0% { transform: scale(.4); opacity: 0; }
	70% { transform: scale(1.12); }
	100% { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.cc-check {
		animation: none;
	}
}

/* Franja de datos */

.cc-franja {
	list-style: none;
	margin: 0;
	padding: 28px 32px;
	background: var(--cc-blanco);
	border: 1px solid var(--cc-borde);
	border-radius: var(--cc-r-l);
	box-shadow: var(--cc-sombra);
	display: grid;
	/* 144 con un hueco de 16: los cinco datos caben en una sola fila dentro
	   de los 860 px del cuerpo, y una cifra como "$1,233,000.00" en 15 px
	   ocupa unos 117 px, asi que no se parte. El minimo de 168 de la 0.8.6
	   era un remedio para otro mal: WooCommerce le metia a cada casilla 2 em
	   de relleno a la derecha (ver abajo), y era eso lo que partia
	   "TRANSFEREN / CIA" y "$1,233,000. / 00". */
	grid-template-columns: repeat(auto-fit, minmax(144px, 1fr));
	gap: 16px;
}

/* La franja lleva las clases `order_details` y `woocommerce-thankyou-order-details`
   de WooCommerce para que los plugins de medicion que las buscan sigan
   encontrando el pedido. El precio es que WooCommerce le aplica sus propios
   estilos de `ul.order_details`, con mas especificidad que los nuestros:

   - un `::before` y un `::after` con `display: table` (su clearfix), que en
     una rejilla se vuelven dos casillas fantasma: la primera fila arrancaba
     vacia y "N° de orden" se corria a la segunda columna;
   - `float`, `border-right` punteado, `padding-right: 2em`, `line-height: 1` y
     `text-transform: uppercase` en cada `li`, que es lo que ponia los valores
     en mayusculas y les comia un tercio del ancho.

   Se neutraliza solo dentro de nuestra franja, con especificidad y sin
   !important. */
.cc.cc-gracias ul.order_details.cc-franja::before,
.cc.cc-gracias ul.order_details.cc-franja::after {
	content: none;
	display: none;
}

.cc.cc-gracias ul.order_details.cc-franja li {
	float: none;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: inherit;
	line-height: inherit;
	text-transform: none;
}

.cc.cc-gracias ul.order_details.cc-franja li:last-of-type {
	margin: 0;
	padding: 0;
	border: 0;
}

.cc-franja__dato {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.cc-franja__et {
	font-size: 12px;
	color: var(--cc-gris);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .5px;
}

.cc-franja__val {
	font-weight: 700;
	font-size: 15px;
	overflow-wrap: break-word;
}

/* El correo es el único dato que no cabe en una casilla, y partirlo por la
   mitad ("tucorreo@empres / a.com") se lee peor que recortarlo. El completo
   queda en el title. */
.cc-franja__dato--email .cc-franja__val {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 14px;
}

.cc-franja__dato--total .cc-franja__val {
	color: var(--cc-hondo2);
	font-weight: 800;
	font-size: 16px;
}

/* La direccion de facturacion la pinta WooCommerce con su propia plantilla, que
   no rediseñamos porque tambien la usa "Mi cuenta". Su titulo hereda el del
   tema y sale al doble de tamaño que el de la tarjeta de arriba. Se iguala
   desde aqui, sin tocar la plantilla. */
.cc-gracias .woocommerce-customer-details .woocommerce-column__title {
	margin: 26px 0 14px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--cc-tinta);
}

/* Un correo largo sin espacios se salia del recuadro de la direccion en
   movil (347 px en un recuadro de 318). */
.cc-gracias .woocommerce-customer-details address {
	overflow-wrap: anywhere;
}

/* Datos de la transferencia */

.cc-banco {
	background: var(--cc-tinte);
	border: 1px solid var(--cc-tinte-borde);
	border-radius: var(--cc-r-l);
	padding: 26px 32px;
}

.cc-banco__titulo {
	font-weight: 700;
	font-size: 16px;
	color: var(--cc-hondo);
	margin: 0 0 14px;
	line-height: 1.3;
}

.cc-banco__datos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
	margin: 0;
}

.cc-banco__dato {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.cc-banco__dato dt {
	font-size: 12px;
	color: #4c8f7c;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .3px;
}

.cc-banco__dato dd {
	margin: 0;
	font-weight: 600;
	font-size: 14px;
	color: #0b3d31;
	overflow-wrap: anywhere;
}

.cc-banco__nota {
	margin-top: 16px;
	font-size: 13px;
	color: #4c8f7c;
	line-height: 1.65;
}

/* Pago en confirmación */

.cc-espera {
	background: var(--cc-warn-bg, #fdf4e1);
	border: 1px solid #eedcb2;
	border-radius: var(--cc-r-l);
	padding: 22px 28px;
}

.cc-espera__titulo {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 700;
	color: #8a5d10;
	line-height: 1.3;
}

.cc-espera__texto {
	font-size: 13px;
	color: #8a5d10;
	line-height: 1.65;
	opacity: .92;
}

.cc-aviso--bloque {
	margin: 0;
	padding: 18px 24px;
	border-radius: var(--cc-r-l);
	font-size: 14px;
}

/* Detalles de la orden */

.cc-detalle__items {
	display: flex;
	flex-direction: column;
}

.cc-detalle__item {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	font-size: 14px;
	padding: 12px 0;
	border-bottom: 1px solid var(--cc-borde);
}

.cc-detalle__nombre {
	color: #3a4750;
	line-height: 1.5;
}

.cc-detalle__nombre a {
	color: inherit;
}

.cc-detalle__total {
	font-weight: 600;
	white-space: nowrap;
}

.cc-detalle__totales {
	display: flex;
	flex-direction: column;
	margin-top: 4px;
}

.cc-detalle .cc-fila--total .cc-fila__val {
	font-size: 20px;
}

.cc-fila--nota .cc-fila__val {
	text-align: right;
	max-width: 60%;
	white-space: normal;
	font-weight: 400;
	font-size: 13px;
}

.cc-detalle__nota {
	font-size: 13px;
	color: var(--cc-suave);
	padding: 10px 0;
}

.cc-detalle__acciones {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 14px;
}

.cc-detalle__acciones .cc-btn {
	width: auto;
}

/* Botones de cierre */

.cc-gracias__acciones {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
	margin: 6px 0 0;
}

.cc-gracias__acciones .cc-btn {
	width: auto;
	font-size: 15px;
	padding: 14px 32px;
}

.cc-gracias__acciones .cc-btn--linea {
	padding: 13px 32px;
}

.cc-btn--wa::before {
	content: "";
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask: var(--cc-wa-icono) center / contain no-repeat;
	mask: var(--cc-wa-icono) center / contain no-repeat;
}

/* El icono va como máscara y no como <img>: hereda el color del botón, no
   necesita una petición más y no se ve borroso en pantallas densas. */
.cc {
	--cc-wa-icono: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.47 14.38c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.17-.17.2-.35.22-.64.07-.3-.15-1.25-.46-2.38-1.47-.88-.78-1.48-1.75-1.65-2.05-.17-.3-.02-.46.13-.6.13-.14.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.08-.15-.67-1.61-.92-2.21-.24-.58-.49-.5-.67-.51h-.57c-.2 0-.52.07-.79.37-.27.3-1.04 1.02-1.04 2.48s1.06 2.88 1.21 3.08c.15.2 2.09 3.2 5.07 4.49.71.3 1.26.49 1.69.63.71.22 1.36.19 1.87.12.57-.09 1.76-.72 2.01-1.41.25-.7.25-1.29.17-1.42-.07-.13-.27-.2-.57-.35z'/%3E%3Cpath d='M20.52 3.45A11.87 11.87 0 0 0 12.05 0C5.5 0 .18 5.32.18 11.87c0 2.09.55 4.13 1.59 5.93L0 24l6.35-1.66a11.85 11.85 0 0 0 5.69 1.45h.01c6.54 0 11.87-5.32 11.87-11.87 0-3.17-1.24-6.15-3.4-8.47zM12.05 21.8h-.01a9.86 9.86 0 0 1-5.02-1.37l-.36-.21-3.73.98 1-3.64-.24-.37a9.83 9.83 0 0 1-1.51-5.26c0-5.45 4.43-9.88 9.88-9.88 2.64 0 5.12 1.03 6.98 2.9a9.81 9.81 0 0 1 2.89 6.99c0 5.45-4.43 9.86-9.88 9.86z'/%3E%3C/svg%3E");
}

/* Encabezado de la capacitación, encima del bloque de Calendly */

.cc-agenda {
	text-align: center;
	margin: 48px auto 0;
	max-width: 860px;
}

.cc-agenda__titulo {
	margin: 0;
	font-size: clamp(20px, 3vw, 27px);
	font-weight: 700;
	line-height: 1.2;
	color: var(--cc-hondo);
}

.cc-agenda__sub {
	margin: 8px 0 0;
	color: var(--cc-suave);
	font-size: 15px;
}

@media (max-width: 720px) {
	/* Dos columnas fijas: en 375 px quedan de unos 145, donde caben la cifra
	   del total y el metodo de pago partido por palabras, nunca por letras. */
	.cc-franja {
		padding: 20px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
	}

	.cc-banco {
		padding: 20px;
	}

	.cc-banco__datos {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

	.cc-gracias__acciones {
		flex-direction: column;
	}

	.cc-gracias__acciones .cc-btn {
		width: 100%;
	}

	.cc-fila--nota .cc-fila__val {
		max-width: 55%;
	}

	.cc-agenda {
		margin-top: 36px;
	}
}

/* =====================================================================
 * FIDELIDAD AL DISEÑO (0.9.0)
 *
 * Todo lo de este bloque repite reglas que ya existen arriba, pero con la
 * especificidad necesaria para ganarle al CSS de WooCommerce, del tema Hello
 * y del Kit de Elementor. Se midió en producción el 5 sep, pieza por pieza,
 * qué regla estaba ganando en cada caso; los selectores de aquí están
 * calculados para superar exactamente a esas reglas, sin !important, para
 * que el equipo pueda seguir afinando desde Elementor si le hace falta.
 * ===================================================================== */

/* --- Carrito: campo y botón del cupón --------------------------------
   El Kit (`.elementor-kit-19 input[type=text]`) dejaba el campo cuadrado y con
   borde gris oscuro, y `.woocommerce button.button` le quitaba al botón el
   borde verde del diseño. */
.cc.cc-carrito .cc-cupon input.input-text.cc-cupon__input {
	border: 1px solid var(--cc-borde2);
	border-radius: var(--cc-pill);
	padding: 12px 20px;
	font-size: 14px;
	line-height: 1.4;
	background: var(--cc-blanco);
	color: var(--cc-tinta);
	box-shadow: none;
	width: auto;
	min-width: 160px;
	flex: 1;
}

.cc.cc-carrito .cc-cupon input.input-text.cc-cupon__input:focus {
	border-color: var(--cc-acento);
	box-shadow: 0 0 0 3px rgba(41, 211, 166, .18);
	outline: none;
}

.cc.cc-carrito .cc-cupon button.button.cc-btn.cc-btn--linea {
	background: transparent;
	border: 1.5px solid var(--cc-acento2);
	color: var(--cc-hondo2);
	border-radius: var(--cc-pill);
	padding: 11px 24px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
}

.cc.cc-carrito .cc-cupon button.button.cc-btn.cc-btn--linea:hover {
	background: var(--cc-tinte);
	color: var(--cc-hondo2);
}

/* --- Carrito: botón principal ---------------------------------------
   `.woocommerce a.button.alt` lo agrandaba a 18,75 px con relleno en em. */
.cc.cc-carrito a.cc-btn.cc-btn--principal,
.cc.cc-carrito .cc-vacio a.cc-btn {
	font-size: 16px;
	padding: 15px 26px;
	line-height: 1.2;
	font-weight: 700;
	border: 0;
}

/* --- Checkout: campos del formulario ----------------------------------
   El Kit y WooCommerce (`.woocommerce form .form-row input.input-text`) los
   dejaban cuadrados, con borde casi negro y 7 px de relleno. El diseño los
   quiere redondeados (14 px), con borde suave y fondo casi blanco. */
.cc.cc-checkout .cc-campos .form-row input.input-text,
.cc.cc-checkout .cc-campos .form-row input[type="text"],
.cc.cc-checkout .cc-campos .form-row input[type="tel"],
.cc.cc-checkout .cc-campos .form-row input[type="email"],
.cc.cc-checkout .cc-campos .form-row input[type="number"],
.cc.cc-checkout .cc-campos .form-row input[type="password"],
.cc.cc-checkout .cc-campos .form-row textarea,
.cc.cc-checkout .cc-campos .form-row select,
.cc.cc-checkout .cc-campos .form-row .select2-container .select2-selection--single {
	border: 1px solid var(--cc-borde2);
	border-radius: 14px;
	padding: 13px 18px;
	font-size: 14px;
	line-height: 1.4;
	background: #fbfdfd;
	color: var(--cc-tinta);
	box-shadow: none;
	width: 100%;
	min-height: 0;
	height: auto;
}

.cc.cc-checkout .cc-campos .form-row input.input-text:focus,
.cc.cc-checkout .cc-campos .form-row textarea:focus,
.cc.cc-checkout .cc-campos .form-row select:focus {
	border-color: var(--cc-acento);
	box-shadow: 0 0 0 3px rgba(41, 211, 166, .18);
	outline: none;
	background: var(--cc-blanco);
}

.cc.cc-checkout .cc-campos .form-row input.input-text::placeholder,
.cc.cc-checkout .cc-campos .form-row textarea::placeholder {
	color: #9aa4ab;
}

.cc.cc-checkout .cc-campos .form-row.woocommerce-invalid input.input-text {
	border-color: #d9614c;
}

.cc.cc-checkout .cc-campos .form-row label {
	font-size: 13px;
	font-weight: 600;
	color: #3a4750;
	line-height: 1.4;
	margin: 0 0 7px;
	display: block;
}

/* --- Checkout: la tarjeta del pago ------------------------------------
   WooCommerce viste `#payment` con un fondo lila (`rgba(129,110,153,.14)`) y
   5 px de radio, y a cada `div.payment_box` con otro lila más oscuro, un
   triángulo arriba y 1 em de relleno. Como usa el id, ninguna clase le gana:
   hace falta el id también en el nuestro. El diseño es una tarjeta blanca
   igual a la de datos, con la descripción del método en gris, sin caja. */
.cc.cc-checkout #payment.cc-pago,
.cc.cc-checkout #payment {
	background: var(--cc-blanco);
	border: 1px solid var(--cc-borde);
	border-radius: var(--cc-r-l);
	box-shadow: var(--cc-sombra);
	padding: 28px;
}

.cc.cc-checkout #payment ul.payment_methods {
	padding: 0;
	margin: 0;
	border: 0;
	list-style: none;
	text-align: left;
}

.cc.cc-checkout #payment ul.payment_methods li.cc-metodo {
	line-height: 1.4;
	margin: 0;
	padding: 0;
	text-align: left;
	font-weight: 400;
}

.cc.cc-checkout #payment ul.payment_methods li.cc-metodo img {
	float: none;
	margin: 0;
}

.cc.cc-checkout #payment div.payment_box.cc-metodo__caja {
	background: transparent;
	border-radius: 0;
	margin: 0;
	padding: 0 18px 16px 48px;
	font-size: 13px;
	color: var(--cc-suave);
	line-height: 1.65;
}

.cc.cc-checkout #payment div.payment_box.cc-metodo__caja::before {
	display: none;
	content: none;
}

.cc.cc-checkout #payment div.payment_box.cc-metodo__caja p {
	font-size: 13px;
	color: var(--cc-suave);
	line-height: 1.65;
	margin: 0 0 8px;
}

.cc.cc-checkout #payment div.payment_box.cc-metodo__caja p:last-child {
	margin-bottom: 0;
}

.cc.cc-checkout #payment div.form-row.place-order {
	padding: 0;
	margin: 20px 0 0;
}

/* El logo que la pasarela adjunta a su título (el de Wompi). El diseño solo
   lleva la subetiqueta "Tarjeta · PSE · Nequi", sin logo. Se oculta el
   envoltorio y no cualquier <img>, porque WordPress convierte el emoji 🏦 de
   la transferencia en una imagen y ese sí tiene que verse. */
.cc.cc-checkout .cc-metodo__logo {
	display: none;
}

/* El enlace del cupón dentro de "Tu orden" es un enlace verde en el diseño.
   El Kit lo trataba como botón (radio de 3 px, color de texto). */
.cc.cc-checkout button.cc-cupon-linea__abrir {
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	color: var(--cc-acento2);
	font-size: 13px;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 2px;
	line-height: 1.5;
}

.cc.cc-checkout button.cc-cupon-linea__abrir:hover {
	color: var(--cc-hondo2);
}

.cc.cc-checkout .cc-cupon-linea__campo input.cc-cupon__input {
	border: 1px solid var(--cc-borde2);
	border-radius: var(--cc-pill);
	padding: 10px 16px;
	font-size: 13px;
	background: var(--cc-blanco);
	color: var(--cc-tinta);
	box-shadow: none;
}

.cc.cc-checkout .cc-cupon-linea__campo button.cc-btn.cc-btn--linea {
	background: transparent;
	border: 1.5px solid var(--cc-acento2);
	color: var(--cc-hondo2);
	border-radius: var(--cc-pill);
	padding: 9px 18px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
}

/* --- Carrito: la línea "c/u" bajo el precio siempre visible, como en el
   diseño, también con una sola unidad. */
.cc-item__unitario {
	display: block;
}

/* =====================================================================
 * ESPACIADO MEDIDO CONTRA EL DISENO (0.9.4)
 *
 * El 5 sep por la noche se midio el DOM en produccion a 1440 px contra el
 * .dc.html del diseno. Lo que sigue corrige las distancias que WooCommerce,
 * el tema o el Kit pisaban; los selectores llevan la especificidad justa para
 * ganar sin !important.
 * ===================================================================== */

/* Aire vertical de la zona: el diseno lleva 36 px arriba y 72 abajo. */
.cc .cc-carrito__zona,
.cc .cc-checkout__zona,
.cc .cc-gracias__zona {
	padding-top: 36px;
	padding-bottom: 72px;
}

/* La bajada del titulo salia pegada al h1: una regla del tema sobre <p>
   ganaba a la clase sola. El diseno pide 8 px (10 en gracias). */
.cc p.cc-encabezado__sub {
	margin: 8px 0 0;
}

.cc .cc-gracias__cab p.cc-encabezado__sub {
	margin-top: 10px;
}

/* Titulo de gracias: en el diseno es un punto mas grande que carrito y checkout. */
.cc .cc-gracias__cab .cc-encabezado__titulo {
	font-size: clamp(30px, 5vw, 48px);
}

/* Checkout: las dos tarjetas de la derecha viven dentro de #order_review, que
   WooCommerce reemplaza por AJAX, asi que el gap de la columna no llegaba y
   "Metodo de pago" salia pegado a "Tu orden". */
.cc.cc-checkout #payment.cc-pago {
	margin-top: 16px;
}

/* "Transaccion protegida" bajo el boton: 12 px, como el diseno. */
.cc.cc-checkout #payment .cc-pago__seguro {
	margin: 12px 0 0;
}

/* Cabeceras de paso: 24 px bajo "Detalles de facturacion", 16 bajo "Metodo
   de pago" y bajo "Tu orden". */
.cc.cc-checkout .cc-checkout__datos .cc-paso-cab {
	margin-bottom: 24px;
}

.cc.cc-checkout .cc-pago .cc-paso-cab,
.cc.cc-checkout .cc-orden .cc-tarjeta__titulo {
	margin-bottom: 16px;
}

/* Gracias: WooCommerce pone margin-bottom: 3em a ul.order_details y 2em a
   .woocommerce-order-details. Sumados al gap de 20 px dejaban 65 y 50 px de
   hueco. El gap de la columna es el unico aire entre tarjetas. */
.cc.cc-gracias ul.cc-franja.order_details,
.cc.cc-gracias .cc-gracias__cuerpo > .cc-franja,
.cc.cc-gracias .woocommerce-order-details.cc-detalle,
.cc.cc-gracias .cc-gracias__cuerpo > .cc-detalle {
	margin-top: 0;
	margin-bottom: 0;
}

.cc.cc-gracias .cc-gracias__acciones {
	margin-top: 6px;
}