/* ==========================================================================
   Somos TMC — Tienda: carrito lateral, checkout y landing de curso
   ========================================================================== */

/* ---------- Carrito lateral (drawer) ---------- */
.tmc-drawer-overlay {
	position: fixed; inset: 0; z-index: 2000;
	background: rgba(0,0,0,.6);
	backdrop-filter: blur(2px);
	opacity: 0; transition: opacity .3s ease;
}
.tmc-drawer-overlay.is-visible { opacity: 1; }
html.tmc-drawer-lock, html.tmc-drawer-lock body { overflow: hidden; }

.tmc-drawer {
	position: fixed; top: 0; right: 0; bottom: 0; z-index: 2001;
	width: min(430px, 100vw);
	background: linear-gradient(180deg, #121214 0%, #0a0a0c 100%); color: var(--tmc-white, #fff);
	display: flex; flex-direction: column;
	transform: translateX(100%);
	transition: transform .35s cubic-bezier(.4,0,.2,1);
	box-shadow: -20px 0 60px rgba(0,0,0,.6);
	font-family: var(--tmc-font-primary);
}
.tmc-drawer.is-open { transform: translateX(0); }

.tmc-drawer-head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 22px 24px; border-bottom: 1px solid var(--tmc-gray-800, #262626);
}
.tmc-drawer-head h3 {
	margin: 0; font-family: var(--tmc-font-heading); font-size: 22px; letter-spacing: 2px; text-transform: uppercase; color: #fff;
}
.tmc-drawer-x, .tmc-drawer-remove, .tmc-drawer-continue {
	background: none; border: 0; color: #fff; cursor: pointer; font-family: inherit;
}
.tmc-drawer-x { font-size: 32px; line-height: 1; opacity: .7; padding: 0 4px; }
.tmc-drawer-x:hover { opacity: 1; }

#tmc-drawer-body { flex: 1; overflow-y: auto; padding: 8px 24px; }
.tmc-drawer-list { list-style: none; margin: 0; padding: 0; }
.tmc-drawer-item {
	display: grid; grid-template-columns: 72px 1fr 28px; gap: 14px; align-items: center;
	padding: 16px 0; border-bottom: 1px solid var(--tmc-gray-800, #262626);
	transition: opacity .2s;
}
.tmc-drawer-item.is-removing { opacity: .35; pointer-events: none; }
.tmc-drawer-thumb img { width: 72px; height: 72px; object-fit: cover; display: block; border-radius: 10px; background: #1a1a1a; border: 1px solid #232327; }
.tmc-drawer-title { color: #fff; text-decoration: none; font-weight: 600; font-size: 14px; line-height: 1.35; display: block; }
.tmc-drawer-title:hover { text-decoration: underline; }
.tmc-drawer-meta { margin-top: 6px; display: flex; gap: 10px; align-items: baseline; color: var(--tmc-gray-400, #a3a3a3); font-size: 13px; }
.tmc-drawer-price, .tmc-drawer-price .amount { color: #fff; font-weight: 600; }
.tmc-drawer-remove { font-size: 24px; line-height: 1; opacity: .5; }
.tmc-drawer-remove:hover { opacity: 1; }

.tmc-drawer-empty { text-align: center; padding: 60px 10px; color: var(--tmc-gray-400, #a3a3a3); }
.tmc-drawer-empty p { margin: 0 0 22px; font-size: 15px; }

#tmc-drawer-foot { border-top: 1px solid var(--tmc-gray-800, #262626); }
.tmc-drawer-footer { padding: 20px 24px 26px; display: flex; flex-direction: column; gap: 12px; }
.tmc-drawer-footer.is-empty { display: none; }
.tmc-drawer-total { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; color: var(--tmc-gray-400, #a3a3a3); text-transform: uppercase; letter-spacing: 1.5px; }
.tmc-drawer-total strong, .tmc-drawer-total .amount { color: #fff; font-family: var(--tmc-font-heading); font-size: 26px; letter-spacing: 1px; }
.tmc-drawer-checkout.tmc-btn {
	width: 100%; min-width: 0; text-decoration: none;
	background: var(--tmc-gold, #e0b94a) !important; color: #141418 !important;
	border: 0 !important; border-radius: 12px !important;
	font-family: var(--tmc-font-heading); text-transform: uppercase; letter-spacing: 2px;
	font-weight: 600; font-size: 15px; padding: 17px 20px !important;
	box-shadow: 0 10px 28px rgba(224, 185, 74, .18);
	transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.tmc-drawer-checkout.tmc-btn:hover {
	background: #ecc85f !important; transform: translateY(-2px);
	box-shadow: 0 14px 34px rgba(224, 185, 74, .28);
}
/* Un recordatorio corto, no un sermón: el detalle fino va en el checkout. */
.tmc-drawer-aval {
	display: flex; align-items: center; justify-content: center; gap: 7px;
	font-size: 12px; color: #85858c; margin: 2px 0 0;
}
.tmc-drawer-aval::before { content: "🔒"; font-size: 11px; }
.tmc-drawer-continue { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; opacity: .65; padding: 6px; }
.tmc-drawer-continue:hover { opacity: 1; text-decoration: underline; }

/* Contador del carrito en el header */
.tmc-cart-count { display: none; }
.tmc-cart-count.has-items {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px;
	background: #fff; color: #000; border-radius: 9px; font-size: 11px; font-weight: 700; line-height: 1;
	vertical-align: top;
}
.tmc-cart-item a { position: relative; }

.added_to_cart.wc-forward { display: none !important; } /* enlace 'Ver carrito' que añade WooCommerce: usamos el drawer */
/* Botones ocupados */
.is-loading { opacity: .6; cursor: progress !important; }

/* ---------- Checkout simplificado ---------- */
/* ══════════════════════════════════════════════════════════════════
   EL CHECKOUT.

   Es la pantalla que decide si se cobra o no, así que manda una idea por
   encima de todo: que en ningún momento se dude de qué se está comprando,
   cuánto cuesta ni qué pasa al pulsar. Todo lo demás sobra.

   Decisiones:
   · Dos columnas en ordenador, resumen pegado al hacer scroll. En el móvil
     el resumen va ARRIBA y plegado: lo primero es saber qué y cuánto.
   · El botón de pagar es el único elemento dorado de la página. Si hay dos
     cosas que piden ser pulsadas, no hay ninguna.
   · Campos altos y con foco visible. Se rellenan con el pulgar, a menudo
     con prisa, y muchas veces el móvil tapa medio formulario.
   ══════════════════════════════════════════════════════════════════ */

.woocommerce-checkout .tmc-main { padding-top: 112px; padding-bottom: 70px; }
.woocommerce-checkout .tmc-container { max-width: 1180px; }

/* La cabecera de la página: más sobria que el resto del sitio. Aquí no se
   viene a admirar nada, se viene a pagar. */
.woocommerce-checkout .tmc-page-header { display: none; }
.tmc-co-head { text-align: center; margin: 0 0 38px; }
.tmc-co-head h1 {
	font-family: var(--tmc-font-heading); font-size: clamp(28px, 4vw, 42px);
	text-transform: uppercase; letter-spacing: 2.5px; margin: 0 0 8px; color: #fff;
}
.tmc-co-head p { margin: 0; color: #9a9a9a; font-size: 14.5px; }

/* El tema pinta una tarjeta sobre CUALQUIER formulario de WooCommerce. Aquí
   estorba: las tarjetas son las dos columnas, no el formulario que las
   contiene. */
.woocommerce-checkout form.checkout,
.woocommerce-checkout .woocommerce .col2-set .col-1,
.woocommerce-checkout .woocommerce .col2-set .col-2 {
	background: transparent !important; border: 0 !important;
	border-radius: 0 !important; padding: 0 !important;
}
.woocommerce-checkout form.checkout {
	display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
	gap: 0 46px; align-items: start;
}
/* Apple Pay / Google Pay, cuando el navegador los ofrece: arriba del todo y a
   todo lo ancho, que es un atajo, no un paso más del formulario. */
.woocommerce-checkout #wc-stripe-express-checkout-element {
	grid-column: 1 / -1; grid-row: 1; max-width: 520px; width: 100%;
	margin: 0 auto 6px; min-height: 0;
}
.woocommerce-checkout #wc-stripe-express-checkout-button-separator { grid-column: 1 / -1; grid-row: 2; }
.woocommerce-checkout wc-order-attribution-inputs { grid-column: 1 / -1; }
/* Si el navegador no ofrece ninguna cartera, el hueco se queda vacío: fuera. */
.woocommerce-checkout #wc-stripe-express-checkout-element:empty { display: none !important; }
.woocommerce-checkout form.checkout:has( #wc-stripe-express-checkout-element:empty )
	#wc-stripe-express-checkout-button-separator { display: none !important; }
.woocommerce-checkout #wc-stripe-express-checkout-button-separator {
	text-align: center; color: #7a7a82; font-size: 12.5px; letter-spacing: 3px;
	text-transform: uppercase; margin: 18px auto 26px; max-width: 520px;
}

.woocommerce-checkout #customer_details { grid-column: 1; grid-row: 3 / span 2; min-width: 0; }
.woocommerce-checkout #order_review_heading { grid-column: 2; grid-row: 3; }
.woocommerce-checkout #order_review { grid-column: 2; grid-row: 4; min-width: 0; }

/* Las dos tarjetas */
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review {
	background: linear-gradient(180deg, #121214 0%, #0c0c0e 100%) !important;
	border: 1px solid #232327 !important; border-radius: 18px !important; padding: 30px !important;
}
.woocommerce-checkout #order_review { position: sticky; top: 104px; }
.woocommerce-checkout #order_review_heading {
	font-family: var(--tmc-font-heading); text-transform: uppercase;
	letter-spacing: 2px; font-size: 15px; color: #8a8a90; margin: 0 0 12px; padding-left: 2px;
}
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 { float: none; width: 100%; }
.woocommerce-checkout .tmc-hidden-field { display: none !important; }

/* Títulos dentro de las tarjetas */
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-account-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3 {
	font-family: var(--tmc-font-heading); text-transform: uppercase; letter-spacing: 2px;
	font-size: 19px; margin: 0 0 20px; color: #fff;
	padding-bottom: 14px; border-bottom: 1px solid #232327;
}

/* ---- Campos ---- */
.woocommerce-checkout .form-row { margin-bottom: 16px; padding: 0; }
.woocommerce-checkout .form-row label {
	font-size: 11px; letter-spacing: 1.3px; text-transform: uppercase;
	color: #8a8a90; margin-bottom: 7px; display: block; font-weight: 600;
}
.woocommerce-checkout .form-row .required { color: var(--tmc-gold, #e0b94a); border: 0; }
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .select2-container .select2-selection--single {
	background: #0a0a0c; color: #fff; border: 1.5px solid #2b2b31; border-radius: 11px;
	padding: 15px 16px; font-size: 15.5px; height: auto; width: 100%; box-sizing: border-box;
	transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.woocommerce-checkout .form-row input.input-text::placeholder { color: #5a5a62; }
/* Foco bien visible: en el móvil, con el teclado abierto, es lo único que
   le dice al cliente dónde está escribiendo. */
.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus {
	outline: none; background: #101014;
	border-color: var(--tmc-gold, #e0b94a);
	box-shadow: 0 0 0 3px rgba(224, 185, 74, .16);
}
.woocommerce-checkout .form-row.woocommerce-invalid input.input-text { border-color: #e05a4a; }
.woocommerce-checkout .form-row.woocommerce-validated input.input-text { border-color: #2f7d4f; }

/* Nombre y apellidos en la misma línea: son dos campos cortos. */
@media (min-width: 620px) {
	.woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
		display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px;
	}
	/* En rejilla, el float y el ancho en % que trae WooCommerce sobran. */
	.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row {
		float: none !important; width: auto !important; max-width: none !important;
		padding: 0 !important; margin-right: 0 !important; grid-column: 1 / -1;
	}
	.woocommerce-checkout #billing_first_name_field,
	.woocommerce-checkout #billing_last_name_field { grid-column: span 1; }
}

.woocommerce-checkout p.create-account { display: none !important; }
.woocommerce-checkout div.create-account { display: block !important; }
.woocommerce-checkout .woocommerce-account-fields { margin-top: 4px; }

/* ---- Resumen del pedido ---- */
.woocommerce-checkout table.shop_table {
	border: 0; background: transparent; margin: 0;
	width: 100%; table-layout: fixed;
}
.woocommerce-checkout table.shop_table .product-total,
.woocommerce-checkout table.shop_table tfoot td { width: 38%; }
.woocommerce-checkout table.shop_table thead { display: none; }
.woocommerce-checkout table.shop_table th,
.woocommerce-checkout table.shop_table td {
	border: 0; border-bottom: 1px solid #1e1e22; padding: 13px 0; font-size: 14.5px; color: #c9c9cf;
}
.woocommerce-checkout table.shop_table .cart_item td { padding: 15px 0; }
.woocommerce-checkout table.shop_table .product-name { color: #fff; font-weight: 600; line-height: 1.4; overflow-wrap: break-word; }
.woocommerce-checkout table.shop_table .product-total { text-align: right; white-space: nowrap; color: #fff; }
.woocommerce-checkout table.shop_table tfoot th { color: #8a8a90; font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; }
.woocommerce-checkout table.shop_table tfoot td { text-align: right; }
.woocommerce-checkout table.shop_table tfoot .order-total th,
.woocommerce-checkout table.shop_table tfoot .order-total td {
	border-bottom: 0; border-top: 2px solid #2b2b31; padding-top: 18px;
	font-family: var(--tmc-font-heading); font-size: 26px; letter-spacing: 1px; color: #fff;
}
.woocommerce-checkout table.shop_table tfoot .order-total th { font-size: 14px; padding-top: 24px; letter-spacing: 2px; }

/* La ficha del producto dentro del resumen: foto + nombre + qué es. */
.woocommerce-checkout .tmc-co-item { display: flex; align-items: center; gap: 13px; }
.woocommerce-checkout .tmc-co-item-img {
	width: 62px; height: 62px; object-fit: cover; border-radius: 9px;
	border: 1px solid #2b2b31; flex-shrink: 0; display: block; margin: 0;
}
.woocommerce-checkout .tmc-co-item-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.woocommerce-checkout .tmc-co-item-nom { color: #fff; font-weight: 600; font-size: 14.5px; line-height: 1.3; }
.woocommerce-checkout .tmc-co-item-tipo {
	font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase;
	color: var(--tmc-gold, #e0b94a); font-weight: 600;
}
.woocommerce-checkout table.shop_table .product-quantity {
	display: inline-block; margin-top: 4px; color: #b8b8c0; font-weight: 600;
	font-size: 11.5px; letter-spacing: .6px; background: #1c1c21;
	border-radius: 5px; padding: 2px 7px;
}

/* ---- Pago ---- */
/* Con una sola pasarela, su etiqueta hace de título de la sección: que lo
   parezca. */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label {
	font-family: var(--tmc-font-heading); text-transform: uppercase; letter-spacing: 2px;
	font-size: 14px; color: #8a8a90; margin: 0 0 4px; display: block;
	padding: 0; cursor: default;
}
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label img { display: none; }
.woocommerce-checkout #payment ul.payment_methods > li { padding: 0; background: transparent; }
.woocommerce-checkout #payment ul.payment_methods > li + li { margin-top: 14px; }

.woocommerce-checkout #payment { background: transparent; border-radius: 0; margin-top: 6px; }
.woocommerce-checkout #payment ul.payment_methods { border: 0; padding: 18px 0 6px; margin: 0; }
.woocommerce-checkout #payment div.payment_box { background: #121216; color: #b8b8c0; border-radius: 10px; font-size: 13.5px; }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: #121216; }
.woocommerce-checkout .wc-stripe-upe-element { margin-top: 4px; }

/* El botón. Dorado, grande y el único así en toda la pantalla. */
.woocommerce-checkout #payment .place-order { display: flow-root; }
.woocommerce-checkout #place_order,
.woocommerce-checkout button.button.alt {
	width: 100%; float: none !important; display: block;
	background: var(--tmc-gold, #e0b94a) !important; color: #141418 !important;
	border: 0 !important; border-radius: 13px !important;
	font-family: var(--tmc-font-heading); text-transform: uppercase; letter-spacing: 2px;
	font-weight: 600; font-size: 17px; padding: 19px !important;
	transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
	box-shadow: 0 10px 30px rgba(224, 185, 74, .20);
}
.woocommerce-checkout #place_order:hover { background: #ecc85f !important; transform: translateY(-2px); box-shadow: 0 14px 38px rgba(224,185,74,.3); }
.woocommerce-checkout #place_order:active { transform: translateY(0); }
.woocommerce-checkout #place_order:disabled { opacity: .55; transform: none; box-shadow: none; }

/* ---- Avisos y textos legales ---- */
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
	background: #121216; border-top: 2px solid var(--tmc-gold, #e0b94a);
	color: #c9c9cf; border-radius: 0 0 10px 10px; font-size: 14px;
}
.woocommerce-checkout .woocommerce-info::before,
.woocommerce-checkout .woocommerce-message::before { color: var(--tmc-gold, #e0b94a); }
.woocommerce-checkout .woocommerce-privacy-policy-text,
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { font-size: 12.5px; color: #85858c; line-height: 1.6; }
.woocommerce-checkout .woocommerce-privacy-policy-text a,
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper a { color: #c9c9cf; text-decoration: underline; }
.woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text { font-size: 12.5px; }

/* Las garantías, justo debajo del botón: es donde se duda. */
.woocommerce-checkout .tmc-checkout-trust {
	display: grid; clear: both; width: 100%; gap: 9px; margin: 20px 0 0; padding: 18px 0 0;
	border-top: 1px solid #1e1e22; list-style: none; font-size: 13px; color: #9a9a9f;
}
.woocommerce-checkout .tmc-checkout-trust li { display: flex; align-items: flex-start; gap: 9px; line-height: 1.45; }
.woocommerce-checkout .tmc-checkout-trust li::before {
	content: "✓"; color: var(--tmc-gold, #e0b94a); font-weight: 700; flex-shrink: 0;
}

/* ---- Móvil ---- */
@media (max-width: 900px) {
	.woocommerce-checkout .tmc-main { padding-top: 88px; }
	.woocommerce-checkout form.checkout { grid-template-columns: 1fr; gap: 18px; }
	/* El resumen SUBE: antes de teclear nada, se ve qué se compra y cuánto. */
	.woocommerce-checkout #wc-stripe-express-checkout-element { grid-row: 1; }
	.woocommerce-checkout #wc-stripe-express-checkout-button-separator { grid-row: 2; margin: 4px auto 10px; }
	.woocommerce-checkout #order_review_heading { grid-column: 1; grid-row: 3; }
	.woocommerce-checkout #order_review { grid-column: 1; grid-row: 4; position: static; }
	.woocommerce-checkout #customer_details { grid-column: 1; grid-row: 5; }
	/* La foto come sitio al nombre: la columna del precio se aprieta. */
	.woocommerce-checkout table.shop_table .product-total,
	.woocommerce-checkout table.shop_table tfoot td { width: 31%; }
	.woocommerce-checkout .tmc-co-item-img { width: 52px; height: 52px; }
	.woocommerce-checkout table.shop_table tfoot .order-total td { font-size: 22px; }
	.woocommerce-checkout table.shop_table tfoot .order-total th { font-size: 12.5px; letter-spacing: 1.4px; }
	.woocommerce-checkout #customer_details,
	.woocommerce-checkout #order_review { padding: 22px 18px; border-radius: 15px; }
	.tmc-co-head { margin-bottom: 26px; }
}

/* ══════════════════════════════════════════════════════════════════
   LA PANTALLA DE DESPUÉS DE PAGAR.

   Una sola pregunta que responder, bien grande: por dónde entro. El número
   de pedido y la factura son letra pequeña, y van plegados.
   ══════════════════════════════════════════════════════════════════ */

.woocommerce-order-received .tmc-page-header { display: none; }
.woocommerce-order-received .tmc-main { padding-top: 112px; padding-bottom: 80px; }
.woocommerce-order-received .woocommerce { max-width: 680px; margin: 0 auto; }

.tmc-gracias { text-align: center; }
.tmc-gracias-icono {
	width: 74px; height: 74px; margin: 0 auto 26px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 36px; line-height: 1; color: #141418;
	background: var(--tmc-gold, #e0b94a);
	box-shadow: 0 0 0 10px rgba(224, 185, 74, .10), 0 14px 40px rgba(224, 185, 74, .22);
}
.tmc-gracias-icono-no { background: #e05a4a; color: #fff; box-shadow: 0 0 0 10px rgba(224, 90, 74, .10); }
.tmc-gracias h1 {
	font-family: var(--tmc-font-heading); font-size: clamp(32px, 5vw, 50px);
	text-transform: uppercase; letter-spacing: 2.5px; margin: 0 0 14px; color: #fff;
}
.tmc-gracias-sub { font-size: 16px; color: #a8a8b0; line-height: 1.6; margin: 0 auto 36px; max-width: 520px; }
.tmc-gracias-sub strong { color: #fff; font-weight: 600; }

/* Lo que se acaba de comprar, con su puerta de entrada al lado. */
.tmc-gracias-accesos { display: grid; gap: 14px; margin: 0 0 34px; }
.tmc-gracias-acceso {
	background: linear-gradient(180deg, #121214 0%, #0c0c0e 100%);
	border: 1px solid #232327; border-radius: 16px; padding: 26px 24px;
	display: grid; gap: 16px; justify-items: center;
}
.tmc-gracias-acceso-nom {
	font-family: var(--tmc-font-heading); text-transform: uppercase; letter-spacing: 1.5px;
	font-size: 17px; color: #fff; line-height: 1.35;
}
.tmc-gracias-btn, .tmc-gracias-botones .tmc-gracias-btn {
	display: inline-block; background: var(--tmc-gold, #e0b94a); color: #141418 !important;
	font-family: var(--tmc-font-heading); text-transform: uppercase; letter-spacing: 2px;
	font-size: 15px; font-weight: 600; padding: 16px 38px; border-radius: 12px;
	text-decoration: none; transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
	box-shadow: 0 10px 30px rgba(224, 185, 74, .20);
}
.tmc-gracias-btn:hover { background: #ecc85f; transform: translateY(-2px); box-shadow: 0 14px 38px rgba(224,185,74,.3); }
.tmc-gracias-espera { font-size: 14px; color: #9a9a9f; line-height: 1.55; max-width: 420px; }

.tmc-gracias-pasos {
	list-style: none; margin: 0 auto 34px; padding: 0; max-width: 420px;
	display: grid; gap: 10px; justify-items: start; font-size: 14px; color: #9a9a9f;
}
.tmc-gracias-pasos li { display: flex; align-items: flex-start; gap: 9px; text-align: left; }
.tmc-gracias-pasos li::before { content: "✓"; color: var(--tmc-gold, #e0b94a); font-weight: 700; flex-shrink: 0; }

/* El papeleo: está, pero plegado. */
.tmc-gracias-detalle {
	text-align: left; border: 1px solid #1e1e22; border-radius: 12px;
	background: #0c0c0e; margin: 0 0 26px;
}
.tmc-gracias-detalle summary {
	cursor: pointer; padding: 16px 20px; font-size: 13px; color: #8a8a90;
	letter-spacing: 1.2px; text-transform: uppercase; font-weight: 600; list-style: none;
}
.tmc-gracias-detalle summary::-webkit-details-marker { display: none; }
.tmc-gracias-detalle summary::after { content: " +"; color: var(--tmc-gold, #e0b94a); }
.tmc-gracias-detalle[open] summary::after { content: " –"; }
.tmc-gracias-detalle-cuerpo { padding: 0 20px 20px; border-top: 1px solid #1e1e22; }
.tmc-gracias-detalle dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; margin: 18px 0 0; }
.tmc-gracias-detalle dt { font-size: 11.5px; letter-spacing: 1.2px; text-transform: uppercase; color: #7a7a82; }
.tmc-gracias-detalle dd { margin: 0; color: #e4e4e8; font-size: 14.5px; text-align: right; }

.tmc-gracias-ayuda { font-size: 13.5px; color: #85858c; margin: 0; }
.tmc-gracias-ayuda a, .tmc-gracias-detalle a { color: var(--tmc-gold, #e0b94a); }
.tmc-gracias-botones { margin: 0 0 26px; }

@media (max-width: 600px) {
	.woocommerce-order-received .tmc-main { padding-top: 92px; }
	.tmc-gracias-acceso { padding: 22px 18px; }
	.tmc-gracias-btn { width: 100%; padding: 16px 20px; }
}

/* ---------- Landing de curso (single product) ---------- */
.tmc-landing { color: #fff; font-family: var(--tmc-font-primary); background: #000; }
.tmc-landing .tmc-btn { text-decoration: none; }
.tmc-landing .tmc-btn-primary { min-width: 240px; }
.tmc-landing .tmc-btn-outline { min-width: 200px; }
.tmc-landing .tmc-btn:disabled { opacity: .7; }
.tmc-l-wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }

/* Hero */
.tmc-l-hero { position: relative; padding: 150px 0 70px; overflow: hidden; }
.tmc-l-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .35; filter: grayscale(30%); }
.tmc-l-hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.85) 70%, #000 100%); }
.tmc-l-hero-in { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.tmc-l-eyebrow { display: inline-block; font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: #e0b94a; font-weight: 600; margin-bottom: 14px; }
.tmc-l-title { font-family: var(--tmc-font-heading); font-size: clamp(36px, 5vw, 62px); line-height: 1.02; letter-spacing: 1px; text-transform: uppercase; margin: 0 0 18px; }
.tmc-l-sub { font-size: 18px; line-height: 1.55; color: #d4d4d4; max-width: 560px; margin: 0 0 26px; }
.tmc-l-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 28px; padding: 0; list-style: none; }
.tmc-l-chips li { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; border: 1px solid rgba(255,255,255,.25); border-radius: 30px; padding: 7px 14px; color: #e5e5e5; }
.tmc-l-buy { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.tmc-l-price { font-family: var(--tmc-font-heading); font-size: 42px; letter-spacing: 1px; margin-right: 8px; }
.tmc-l-price del { color: #737373; font-size: 24px; margin-right: 10px; }
.tmc-l-price ins { text-decoration: none; }
.tmc-l-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.tmc-l-note { margin-top: 14px; font-size: 12px; color: #a3a3a3; letter-spacing: .5px; }
.tmc-l-video { position: relative; aspect-ratio: 16/9; background: #111; border-radius: 12px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.08); }
.tmc-l-video iframe, .tmc-l-video img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }

/* Secciones */
.tmc-l-section { padding: 70px 0; border-top: 1px solid #1a1a1a; }
.tmc-l-section-title { font-family: var(--tmc-font-heading); font-size: clamp(26px, 3.4vw, 38px); text-transform: uppercase; letter-spacing: 2px; margin: 0 0 8px; }
.tmc-l-section-sub { color: #a3a3a3; margin: 0 0 32px; font-size: 15px; }
.tmc-l-two { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.tmc-l-desc { font-size: 16px; line-height: 1.75; color: #d4d4d4; }
.tmc-l-desc h2, .tmc-l-desc h3 { font-family: var(--tmc-font-heading); text-transform: uppercase; letter-spacing: 1.5px; color: #fff; }
.tmc-l-desc img { max-width: 100%; height: auto; border-radius: 8px; }
.tmc-l-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.tmc-l-list li { position: relative; padding-left: 30px; font-size: 15px; line-height: 1.5; color: #e5e5e5; }
.tmc-l-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: #e0b94a; font-weight: 700; }
.tmc-l-card { background: #0d0d0d; border: 1px solid #222; border-radius: 12px; padding: 28px; }
.tmc-l-card h3 { font-family: var(--tmc-font-heading); text-transform: uppercase; letter-spacing: 1.5px; font-size: 20px; margin: 0 0 18px; }

/* Temario acordeón */
.tmc-l-outline { display: grid; gap: 10px; }
.tmc-l-mod { background: #0d0d0d; border: 1px solid #222; border-radius: 10px; overflow: hidden; }
.tmc-l-mod summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; font-weight: 600; font-size: 15px; }
.tmc-l-mod summary::-webkit-details-marker { display: none; }
.tmc-l-mod summary::after { content: "+"; font-size: 22px; color: #a3a3a3; transition: transform .2s; }
.tmc-l-mod[open] summary::after { transform: rotate(45deg); }
.tmc-l-mod summary small { color: #a3a3a3; font-weight: 400; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; }
.tmc-l-mod ol { margin: 0; padding: 0 22px 18px 44px; color: #d4d4d4; font-size: 14px; line-height: 1.6; }
.tmc-l-mod ol li { padding: 6px 0; border-top: 1px solid #1a1a1a; }

/* FAQ */
.tmc-l-faq { display: grid; gap: 10px; }
.tmc-l-faq details { border-bottom: 1px solid #222; padding: 4px 0; }
.tmc-l-faq summary { cursor: pointer; padding: 14px 0; font-weight: 600; font-size: 15px; list-style: none; display: flex; justify-content: space-between; }
.tmc-l-faq summary::-webkit-details-marker { display: none; }
.tmc-l-faq summary::after { content: "+"; color: #a3a3a3; }
.tmc-l-faq details[open] summary::after { content: "−"; }
.tmc-l-faq p { margin: 0 0 16px; color: #d4d4d4; font-size: 14px; line-height: 1.65; }

/* CTA final */
.tmc-l-cta { text-align: center; padding: 90px 0; background: radial-gradient(ellipse at center, #141414 0%, #000 70%); }
.tmc-l-cta .tmc-l-title { font-size: clamp(30px, 4vw, 48px); }
.tmc-l-cta .tmc-l-buy { justify-content: center; }
.tmc-l-guarantee { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; font-size: 13px; color: #a3a3a3; }
.tmc-l-guarantee::before { content: "🔒"; }

/* Otros cursos */
.tmc-l-related { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.tmc-l-related a { display: block; text-decoration: none; color: #fff; background: #0d0d0d; border: 1px solid #222; border-radius: 10px; overflow: hidden; transition: var(--tmc-transition); }
.tmc-l-related a:hover { transform: translateY(-4px); border-color: #555; }
.tmc-l-related img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.tmc-l-related .tmc-l-rel-body { padding: 14px 16px 18px; }
.tmc-l-related h4 { margin: 0 0 6px; font-family: var(--tmc-font-heading); text-transform: uppercase; letter-spacing: 1px; font-size: 16px; line-height: 1.2; }
.tmc-l-related .price { color: #a3a3a3; font-size: 14px; }

/* Barra fija inferior (móvil) */
.tmc-l-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; background: rgba(0,0,0,.92); backdrop-filter: blur(8px); border-top: 1px solid #262626; padding: 12px 16px; display: none; align-items: center; justify-content: space-between; gap: 12px; }
.tmc-l-sticky .tmc-l-price { font-size: 26px; margin: 0; }
.tmc-l-sticky .tmc-btn { min-width: 0; padding: 14px 22px; }
@media (max-width: 900px) {
	.tmc-l-hero { padding: 120px 0 50px; }
	.tmc-l-hero-in, .tmc-l-two { grid-template-columns: 1fr; gap: 32px; }
	.tmc-l-video { order: -1; }
	.tmc-l-section { padding: 50px 0; }
	.tmc-l-sticky { display: flex; }
	.tmc-landing { padding-bottom: 76px; }
}

/* Página de landing (plantilla "Landing de curso (TMC)") */
.tmc-landing-page { background: #000; }
.tmc-landing-page .tmc-l-hero { padding-top: 170px; }
@media (max-width: 900px) { .tmc-landing-page .tmc-l-hero { padding-top: 120px; } }

/* ══════════════════════════════════════════════════════════════════
   EL CATÁLOGO — la rejilla de Cursos y Programas.
   Tres columnas en ordenador, dos en tableta, una en el móvil. La foto
   va en blanco y negro y se colorea al pasar por encima: es el mismo
   gesto que ya hace el resto de la web.
   ══════════════════════════════════════════════════════════════════ */
.tmc-cat-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 10px 0 20px;
}
.tmc-cat-card {
	display: flex;
	flex-direction: column;
	background: #111;
	border: 1px solid #242424;
	border-radius: 14px;
	overflow: hidden;
	text-decoration: none;
	color: #fff;
	transition: transform .25s ease, border-color .25s ease;
}
.tmc-cat-card:hover {
	transform: translateY(-5px);
	border-color: var(--tmc-gold, #e0b94a);
}
.tmc-cat-foto {
	display: block;
	aspect-ratio: 16 / 10;
	background: #1c1c1c center/cover no-repeat;
	filter: grayscale(100%);
	transition: filter .3s ease;
}
.tmc-cat-card:hover .tmc-cat-foto { filter: grayscale(0%); }
.tmc-cat-cuerpo {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 9px;
	padding: 18px 18px 20px;
}
.tmc-cat-titulo {
	font-family: var(--tmc-font-heading, 'Oswald'), system-ui, sans-serif;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.22;
	letter-spacing: .4px;
	text-transform: uppercase;
}
.tmc-cat-desc {
	font-size: 13.5px;
	line-height: 1.55;
	color: #a8a8a8;
	/* Cinco líneas y ni una más: así todas las tarjetas miden parecido
	   aunque unos textos sean más largos que otros. */
	display: -webkit-box;
	-webkit-line-clamp: 5;
	line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* El pie se pega abajo, así las tarjetas quedan alineadas aunque los
   textos midan distinto. */
.tmc-cat-pie {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid #242424;
}
.tmc-cat-precio {
	font-family: var(--tmc-font-heading, 'Oswald'), system-ui, sans-serif;
	font-size: 21px;
	font-weight: 600;
	color: var(--tmc-gold, #e0b94a);
	white-space: nowrap;
}
.tmc-cat-precio del { opacity: .5; font-size: 15px; margin-right: 5px; }
.tmc-cat-precio ins { text-decoration: none; }
.tmc-cat-btn {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: #fff;
	white-space: nowrap;
}
@media (max-width: 1024px) {
	.tmc-cat-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 620px) {
	.tmc-cat-grid { grid-template-columns: 1fr; gap: 18px; }
	.tmc-cat-titulo { font-size: 18px; }
}

/* ══════════════════════════════════════════════════════════════════
   EL MENÚ, EN UN PANEL LATERAL.

   Primero se probó como menú horizontal en la cabecera y en ordenador
   quedaba apretado: cinco entradas más el botón de coaching, los enlaces
   de cuenta y el carrito no caben con holgura. Ahora la cabecera vuelve a
   lo de siempre (logo, coaching centrado, Acceso Campus, Mi Cuenta y
   carrito) y la navegación vive en un panel que entra por la derecha,
   con el mismo gesto que el carrito.

   El hamburguesa pasa a verse en TODOS los tamaños, no solo en el móvil:
   en ordenador es ahora la única puerta al catálogo.
   ══════════════════════════════════════════════════════════════════ */
.tmc-hamburger { display: flex !important; }

.tmc-mobile-menu {
	/* Panel derecho, no pantalla completa. */
	left: auto;
	right: 0;
	width: min(380px, 100vw);
	height: 100vh;
	background: #0a0a0a;
	box-shadow: -20px 0 60px rgba(0, 0, 0, .6);
	justify-content: flex-start;
	align-items: stretch;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 96px 30px 40px;
	box-sizing: border-box;
	z-index: 1002;
}

/* La zona oscurecida de la izquierda. Es parte del propio panel, así se
   pinta sola al abrirlo y un clic ahí lo cierra (lo mira el JS). */
.tmc-mobile-menu::before {
	content: '';
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: min(380px, 100vw);
	background: rgba(0, 0, 0, .62);
}

.tmc-mobile-menu ul { width: 100%; text-align: left; }

.tmc-mobile-principal {
	list-style: none;
	padding: 0;
	margin: 0 0 22px;
	border-bottom: 1px solid #242424;
	padding-bottom: 18px;
}
.tmc-mobile-principal li { margin: 0; }
.tmc-mobile-principal li a {
	display: block;
	padding: 11px 0;
	font-family: var(--tmc-font-heading, 'Oswald'), system-ui, sans-serif;
	font-size: 25px;
	font-weight: 600;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--tmc-white, #fff);
	text-decoration: none;
	transition: color .2s ease, padding-left .2s ease;
}
.tmc-mobile-principal li a:hover {
	color: var(--tmc-gold, #e0b94a);
	padding-left: 8px;
}

/* Los de abajo (Acceso Campus, Mi Cuenta, Carrito) más discretos: son
   accesorios, no el catálogo. */
/* `:not()` a propósito: `.tmc-mobile-principal` también es un `> ul`, así
   que sin esto esta regla pisaba la de arriba y el menú principal se
   quedaba con la letra pequeña de los accesorios. */
.tmc-mobile-menu > ul:not(.tmc-mobile-principal) li a {
	display: block;
	padding: 9px 0;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: #9a9a9a;
	text-decoration: none;
}
.tmc-mobile-menu > ul:not(.tmc-mobile-principal) li a:hover { color: #fff; }

/* El hamburguesa, en aspa cuando está abierto, por encima del panel.
   El margen izquierdo es necesario: `.tmc-header-inner` va con
   `space-between` y cuando no sobra ancho los dos últimos elementos se
   quedan pegados. El carrito acababa tocando las rayas del menú y parecía
   que se lo comía. */
.tmc-hamburger {
	position: relative;
	z-index: 1003;
	margin-left: 24px;
}
@media (max-width: 600px) {
	.tmc-hamburger { margin-left: 14px; }
}

@media (max-height: 640px) {
	.tmc-mobile-principal li a { font-size: 20px; padding: 8px 0; }
}

/* ── La página 404 ──────────────────────────────────────────────────
   Antes era un rectángulo negro con un «404» gris. Ahora lleva foto de
   fondo, en blanco y negro como el resto de la web, y una salida hacia
   los cursos además del inicio: quien llega aquí es porque se ha
   perdido, y lo suyo es ofrecerle a dónde ir. */
.tmc-404-con-fondo {
	position: relative;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
.tmc-404-con-fondo::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .72);
	backdrop-filter: grayscale(100%);
	-webkit-backdrop-filter: grayscale(100%);
}
.tmc-404-con-fondo .tmc-404-inner { position: relative; z-index: 1; }
.tmc-404-botones {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
	margin-top: 8px;
}
@media (max-width: 600px) {
	.tmc-404-botones { flex-direction: column; align-items: center; }
}

/* ── Cabecera de un bloque de catálogo ──────────────────────────────
   Para los bloques cruzados del final de página: en Cursos se enseñan
   los Programas y al revés. Quien entra buscando formación muchas veces
   acaba queriendo el entrenamiento, y al revés, y antes no había forma
   de pasar de una página a la otra sin volver al menú. */
.tmc-cat-cabecera {
	max-width: 1200px;
	margin: 58px auto 4px;
	padding-top: 34px;
	border-top: 1px solid #242424;
	text-align: center;
}
.tmc-cat-h2 {
	margin: 0;
	font-family: var(--tmc-font-heading, 'Oswald'), system-ui, sans-serif;
	font-size: clamp(22px, 3vw, 30px);
	font-weight: 600;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: #fff;
}
.tmc-cat-sub {
	margin: 9px auto 0;
	max-width: 620px;
	font-size: 14.5px;
	line-height: 1.6;
	color: #a8a8a8;
}

/* ── Banner de la tienda (portada) ──────────────────────────────────
   La tienda de material está en somostmc.es, así que esto es una puerta
   hacia fuera, no un listado. Foto de fondo oscurecida y un solo botón:
   no hay nada más que decidir aquí. */
.tmc-shop-banner {
	position: relative;
	overflow: hidden;
	padding: clamp(70px, 11vw, 130px) 20px;
	text-align: center;
}
.tmc-shop-banner-bg {
	position: absolute;
	inset: 0;
	background: #0d0d0d center/cover no-repeat;
	filter: grayscale(100%);
	transform: scale(1.02);
}
.tmc-shop-banner-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,.70) 0%, rgba(0,0,0,.80) 100%);
}
.tmc-shop-banner-inner {
	position: relative;
	z-index: 1;
	max-width: 640px;
	margin: 0 auto;
}
.tmc-shop-banner-inner h2 {
	margin: 12px 0 14px;
	font-family: var(--tmc-font-heading, 'Oswald'), system-ui, sans-serif;
	font-size: clamp(30px, 5.4vw, 52px);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #fff;
}
.tmc-shop-banner-inner p {
	margin: 0 auto 28px;
	max-width: 480px;
	font-size: clamp(15px, 1.6vw, 17px);
	line-height: 1.6;
	color: #c4c4c4;
}

/* ── Tarjetas de «Próximamente» ─────────────────────────────────────
   Se enseñan para que se vea lo que viene, pero no se pueden abrir ni
   comprar. En el HTML no son un enlace, son un div: así tampoco se abren
   con el teclado ni las indexa Google. */
.tmc-cat-card-pronto {
	cursor: default;
	border-color: #1e1e1e;
}
.tmc-cat-card-pronto:hover {
	transform: none;
	border-color: #1e1e1e;
}
.tmc-cat-card-pronto .tmc-cat-foto {
	position: relative;
	opacity: .38;
}
/* El sello encima de la foto. */
.tmc-cat-sello {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-7deg);
	padding: 9px 20px;
	border: 2px solid rgba(255, 255, 255, .85);
	border-radius: 6px;
	background: rgba(0, 0, 0, .55);
	font-family: var(--tmc-font-heading, 'Oswald'), system-ui, sans-serif;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	color: #fff;
	white-space: nowrap;
}
.tmc-cat-card-pronto .tmc-cat-titulo { color: #8f9099; }
.tmc-cat-card-pronto .tmc-cat-desc   { color: #6c6d75; }
.tmc-cat-pronto-txt {
	font-family: var(--tmc-font-heading, 'Oswald'), system-ui, sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: #8f9099;
}