/*
 * Finaurum — Checkout ("Sumate a {curso}") — Ronda 2.
 * Enqueue condicional ya cableado en functions.php (Ronda 1) sobre la pagina
 * de checkout nativo de Tutor LMS (tutor_checkout_page_id), excluyendo el
 * query param ?tutor_order_placement (esa es la pantalla de gracias).
 *
 * Nota defensiva: se redeclaran los tokens --fin-* localmente (identicos a
 * assets/finaurum-tokens.css) porque se detecto contenido no-UTF8 en ese
 * archivo mas alla del bloque :root durante el build de esta pantalla — ver
 * memoria "Finaurum checkout (Ronda 2)" para el detalle. No se toco ese
 * archivo (fuera de alcance de esta ronda).
 *
 * Ronda 3 (2026-07-16): refactor de layout para igualar el checkout real al
 * mockup React (bundle extraido, valores literales — ver
 * PLAN-checkout-fidelidad-mockup-2026-07-16.md). Grid unico 7/5 con resumen
 * sticky + scroll interno (header/body/footer), panel exterior #EEF2F6,
 * fidelidad de detalle en pack/datos/pago/resumen, iconos SVG. Regla dura
 * respetada: NO se toca la definicion base de .fin-card (usa overrides
 * scopeados via .fin-form-card/.fin-payment-card y .fin-pack-card/
 * .fin-summary-card, que ya preexistian).
 */

:root {
	--fin-verde: #009054;
	--fin-verde-dark: #007644;
	--fin-mostaza: #fbd38d;
	--fin-navy: #0c3c60;
	--fin-gray: #485460;
	--fin-coral: #f2ba9c;
	--fin-bg: #fdfdfd;
	--fin-bg-alt: #faf5ec;
	/* Fix fidelidad R-checkout-resumen (2026-07-16): el mockup usa font-mono
	   para el precio de cada fila del resumen (tabular, evita el corrimiento
	   de digitos proporcionales de Inter). No existe token equivalente en
	   finaurum-tokens.css -- se declara aca (child CSS), NUNCA en tokens.css. */
	--fin-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/*
 * Utilidad visualmente oculta pero accesible a lectores de pantalla — usada
 * en el <label> del input de cupon (fin-coupon-input), que no tiene copy
 * visible en el mockup. Patron estandar screen-reader-text de WordPress.
 * Agente Gestor Web — fix a11y checkout (3 campos sin label), 2026-07-15.
 */
.fin-sr-only {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.fin-checkout {
	--fin-page-bg: #eef1f6;
	--fin-card-shadow: 0 1px 2px rgba(12, 60, 96, .06), 0 12px 28px rgba(12, 60, 96, .07);
	max-width: 1240px;
	margin: 0 auto;
	padding: 64px 32px;
	font-family: var(--fin-font-body, 'Inter', sans-serif);
	color: var(--fin-navy);
	box-sizing: border-box;
}

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

/* ==========================================================================
   Panel exterior — marco #EEF2F6 que envuelve masthead + grid (Ronda 3).
   Mockup: bg-[#EEF2F6] rounded-[40px] border navy/10 p-12 shadow-xl.
   ========================================================================== */

.fin-checkout__panel {
	background: #eef2f6;
	border: 1px solid rgba(12, 60, 96, .1);
	border-radius: 40px;
	padding: 48px;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
}

/* ==========================================================================
   Masthead: chip + titulo dinamico subrayado
   ========================================================================== */

.fin-checkout__masthead {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin-bottom: 80px;
}

.fin-checkout__chip {
	position: relative;
	width: 112px;
	height: 112px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	background: #fff;
	border: 1px solid rgba(12, 60, 96, .15);
	border-radius: 16px;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
	margin-bottom: 24px;
	overflow: hidden;
	padding: 8px;
}

.fin-checkout__chip::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--fin-mostaza);
}

.fin-checkout__chip-icon-box {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: rgba(12, 60, 96, .05);
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(12, 60, 96, .45);
	flex: 0 0 auto;
}

.fin-checkout__chip-icon {
	width: 24px;
	height: 24px;
	display: flex;
}

.fin-checkout__chip-icon svg {
	width: 100%;
	height: 100%;
}

.fin-checkout__chip-label {
	font-size: 9px;
	letter-spacing: .1em;
	font-weight: 900;
	color: rgba(12, 60, 96, .4);
	text-transform: uppercase;
}

.fin-checkout__title {
	font-family: var(--fin-font-heading, 'Playfair Display', serif);
	font-weight: 800;
	font-size: 46px;
	line-height: 1.15;
	color: var(--fin-navy);
	margin: 0;
}

.fin-underline {
	position: relative;
	display: inline-block;
	color: var(--fin-navy);
}

.fin-underline::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -.14em;
	height: 13px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M 1,4 C 25,6 65,1 99,5 C 75,7 35,6 2,8' stroke='%23fbd38d' stroke-width='3.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	pointer-events: none;
}

/* ==========================================================================
   Cards genericas
   ========================================================================== */

.fin-card {
	position: relative;
	background: #fff;
	border-radius: 18px;
	box-shadow: var(--fin-card-shadow);
	padding: 28px;
	margin-bottom: 24px;
}

.fin-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 24px;
	right: 24px;
	height: 4px;
	background: var(--fin-mostaza);
	border-radius: 0 0 6px 6px;
}

.fin-card__title {
	font-family: var(--fin-font-heading, 'Playfair Display', serif);
	font-weight: 700;
	font-size: 24px;
	color: var(--fin-navy);
	margin: 0 0 8px;
}

.fin-badge {
	display: inline-block;
	background: var(--fin-mostaza);
	color: var(--fin-navy);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: 2px 8px;
	border-radius: 999px;
	margin-bottom: 12px;
}

/* Fix QA fidelidad R9: tratamiento distintivo "promo" del pack card (mockup:
   radius 32px, borde 2px mostaza/40, gradiente mostaza 5%→blanco) y shadow-xl
   neutra del resumen (mockup: radius 28px, shadow-xl). Ambas clases YA
   existen en el markup de checkout.php (fin-card fin-pack-card / fin-card
   fin-summary-card) — solo faltaba el CSS. Misma especificidad que .fin-card
   (0-1-0 c/u), ganan por orden de aparicion (despues en el archivo). */
.fin-pack-card {
	border-radius: 32px;
	border: 2px solid rgba(251, 211, 141, .4);
	background: linear-gradient(to bottom right, rgba(251, 211, 141, .05), #fff 50%, #fff);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
	overflow: hidden;
}

/* El mockup NO lleva franja mostaza en esta card: su identidad es el borde
   de 2px mostaza/40 + el gradiente. Verificado ampliando el PDF del mockup
   (borde superior limpio, sin barra). Se neutraliza el accent heredado de
   .fin-card::before — override scopeado, nunca se toca la regla global. */
.fin-pack-card::before {
	display: none;
}

/* Ronda 3: peso del titulo de esta card puntual (mockup: font-black = 900,
   el resto de las .fin-card__title quedan en 700). */
.fin-pack-card .fin-card__title {
	font-weight: 900;
}

/* overflow:hidden es lo que hace que el accent full-width de ::before quede
   recortado por el border-radius y abrace el borde superior (mockup:
   `relative overflow-hidden` + `absolute inset-x-0 top-0 h-1.5`). Sin esto la
   barra se dibuja recta por encima de las esquinas redondeadas y se ve
   despegada de la card. El scroll interno vive en .fin-summary-card__body,
   asi que recortar aca no lo afecta. */
.fin-summary-card {
	border-radius: 28px;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
	background: linear-gradient(to bottom, #fff, #f9fafc);
	border: 1px solid rgba(12, 60, 96, .05);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.fin-summary-card::before {
	left: 0;
	right: 0;
	height: 6px;
}

/* ==========================================================================
   Resumen — 3 zonas (Ronda 3, Opcion B): header (shrink-0, border-b) / body
   (flex-1 overflow-y-auto min-h-0, scrollable) / footer (shrink-0). Los IDs
   que lee el JS viven intactos dentro de body/footer, solo cambio el padre
   directo (getElementById no depende del arbol).
   ========================================================================== */

.fin-summary-card__header {
	flex: 0 0 auto;
}

.fin-summary-card .fin-card__title {
	font-size: 21px;
	font-weight: 800;
	margin: 0 0 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(12, 60, 96, .05);
}

.fin-summary-card__body {
	flex: 1 1 auto;
	overflow-y: auto;
	min-height: 0;
}

.fin-summary-card__footer {
	flex: 0 0 auto;
}

/* ==========================================================================
   Grid: columna izquierda (pack+datos+pago+terminos+submit+nota) + resumen
   sticky a la derecha. Ronda 3: un solo grid envuelve TODO el formulario
   (antes: el grid cerraba despues del resumen y datos/pago quedaban
   full-width debajo, sin acompañamiento del resumen).
   ========================================================================== */

.fin-checkout__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	align-items: start;
}

.fin-checkout__col-left {
	display: flex;
	flex-direction: column;
	gap: 32px;
	min-width: 0;
}

.fin-checkout__col-right {
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}

/* El flex gap de arriba es la UNICA fuente de espaciado entre hijos directos
   de cada columna — se neutraliza el margin-bottom que .fin-card (y otros)
   traen para el flujo plano anterior, sin tocar la definicion base de
   .fin-card (regla dura del CLAUDE.md / plan). */
.fin-checkout__col-left > *,
.fin-checkout__col-right > * {
	margin-top: 0;
	margin-bottom: 0;
}

@media (min-width: 1024px) {
	.fin-checkout__grid {
		grid-template-columns: 7fr 5fr;
		gap: 48px;
	}

	.fin-checkout__col-right {
		position: sticky;
		top: 112px;
		align-self: start;
	}

	.fin-summary-card {
		max-height: calc(100vh - 130px);
	}
}

/* ---- Pack card ---- */

.fin-pack-card__subtitle {
	font-size: 12px;
	color: var(--fin-gray);
	margin: 0 0 18px;
	line-height: 1.5;
}

.fin-tier-bar {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	background: rgba(12, 60, 96, .05);
	border-radius: 12px;
	padding: 6px;
	gap: 6px;
	margin-bottom: 18px;
}

.fin-tier {
	text-align: center;
	font-size: 10px;
	font-weight: 700;
	color: rgba(12, 60, 96, .8);
	padding: 8px 4px;
	border-radius: 8px;
	transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

.fin-tier.is-active {
	background: #fff;
	color: var(--fin-verde);
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
}

.fin-course-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 18px;
}

.fin-course-item {
	--fin-course-accent: var(--fin-verde);
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 73.25px;
	padding: 12px 14px;
	border: 1px solid #e7eaf0;
	border-radius: 16px;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}

.fin-course-item:hover {
	border-color: color-mix(in srgb, var(--fin-course-accent) 45%, #e7eaf0);
}

.fin-course-item:has(.fin-course-checkbox:checked) {
	border-color: var(--fin-verde);
	background: color-mix(in srgb, var(--fin-verde) 5%, #fff);
}

.fin-course-item.is-locked {
	background: #f7f9fb;
	border-color: #e2e6ec;
	cursor: default;
}

/* Fix QA fidelidad R9 #3: .fin-course-item:has(.fin-course-checkbox:checked)
   (0-3-0) le ganaba a .is-locked (0-2-0) — el curso inicial bloqueado se veia
   verde/seleccionado en vez del look "bloqueado" del mockup. */
.fin-course-item.is-locked:has(.fin-course-checkbox:checked) {
	border-color: #e2e6ec;
	background: #f7f9fb;
	opacity: .85;
}

.fin-course-checkbox {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	accent-color: var(--fin-verde);
	cursor: pointer;
}

.fin-course-item.is-locked .fin-course-checkbox {
	cursor: default;
}

/* Checkbox custom (control redondeado + check) — reemplaza el checkbox nativo
   visualmente sin sacarlo del DOM (regla #2 CLAUDE.md — el JS renderSummary/
   ajaxCart lee .checked del input real vía querySelector y escucha su evento
   'change'). El wrapper .fin-course-checkbox-wrap fija un box 18x18 en el
   flujo flex; adentro, el input y .fin-course-checkbox-box se superponen con
   position:absolute/inset:0 — el input queda arriba (opacity:0, z-index:1) y
   sigue siendo el que recibe click/foco/teclado real; el span de abajo es
   puramente decorativo (pointer-events:none). Checkbox custom Ronda —
   2026-07-16. */
.fin-course-checkbox-wrap {
	position: relative;
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	display: inline-flex;
}

.fin-course-checkbox-wrap .fin-course-checkbox {
	position: absolute;
	inset: 0;
	width: 18px;
	height: 18px;
	margin: 0;
	opacity: 0;
	z-index: 1;
}

.fin-course-checkbox-box {
	width: 18px;
	height: 18px;
	border: 2px solid rgba(12, 60, 96, .3);
	border-radius: 6px;
	background: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: all .15s ease;
	pointer-events: none;
}

.fin-course-checkbox-box svg {
	width: 12px;
	height: 12px;
	color: #fff;
	opacity: 0;
	transform: scale(.5);
	transition: opacity .15s ease, transform .15s ease;
}

.fin-course-checkbox:checked + .fin-course-checkbox-box {
	background: var(--fin-verde);
	border-color: var(--fin-verde);
}

.fin-course-checkbox:checked + .fin-course-checkbox-box svg {
	opacity: 1;
	transform: scale(1);
}

.fin-course-checkbox:focus-visible + .fin-course-checkbox-box {
	outline: 2px solid var(--fin-verde);
	outline-offset: 2px;
}

.fin-course-item.is-locked .fin-course-checkbox-box {
	cursor: default;
}

.fin-course-icon {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--fin-course-accent) 16%, #fff);
	color: var(--fin-course-accent);
}

.fin-course-icon svg {
	width: 20px;
	height: 20px;
}

.fin-course-info {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.fin-course-name {
	font-family: var(--fin-font-heading, 'Playfair Display', serif);
	font-weight: 900;
	font-size: 14px;
	color: var(--fin-navy);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.fin-course-tag {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--fin-gray);
	background: rgba(12, 60, 96, .05);
	display: inline-block;
	padding: 2px 7px;
	border-radius: 4px;
	width: max-content;
}

.fin-course-price {
	flex: 0 0 auto;
	font-weight: 700;
	font-size: 14px;
	color: var(--fin-navy);
	white-space: nowrap;
}

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

.fin-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--fin-font-body, 'Inter', sans-serif);
	font-weight: 700;
	font-size: 14px;
	border-radius: 10px;
	padding: 12px 20px;
	border: 2px solid transparent;
	cursor: pointer;
	white-space: normal;
	text-align: center;
	transition: transform .1s ease, box-shadow .15s ease, background .15s ease;
}

.fin-btn:active {
	transform: translateY(1px);
}

.fin-btn-block {
	width: 100%;
}

.fin-btn-outline {
	background: #fff;
	border-color: var(--fin-verde);
	color: var(--fin-verde);
}

.fin-btn-outline:hover {
	background: color-mix(in srgb, var(--fin-verde) 8%, #fff);
}

/* Fix QA fidelidad R9: "Sumar todos" — mockup usa weight/size/radius/padding
   propios, mas marcados que el .fin-btn-outline generico. */
#fin-add-all-btn {
	font-weight: 900;
	font-size: 12px;
	border-radius: 12px;
	padding: 12px 16px;
}

/* Ronda 3: icono del "Sumar todos" (Sparkles) va en mostaza en el mockup. */
#fin-add-all-btn .fin-btn__icon {
	color: var(--fin-mostaza);
}

/* Fix fidelidad R-checkout-resumen (2026-07-16): modo "Quitar agregados
   (volver a individual)" cuando los 5 cursos estan seleccionados — mockup
   cambia el outline verde por un borde/color navy neutro (sin icono, JS lo
   oculta via style.display). Specificidad 0-2-0 le gana a .fin-btn-outline
   (0-1-0) y a .fin-btn-outline:hover (0-2-0) via el :hover de aca (0-3-0). */
.fin-btn-outline.is-remove-mode {
	border: 1px solid rgba(12, 60, 96, .25);
	color: var(--fin-navy);
}

/* #fin-add-all-btn (ID, specificity 1-0-0) fija font-weight:900 para el
   estado "Sumar todos"; en modo "Quitar agregados" el cliente pidio 700.
   Necesita el ID en el selector para ganarle al de arriba, .fin-btn-outline
   solo (0-2-0) pierde contra un ID. */
#fin-add-all-btn.is-remove-mode {
	font-weight: 700;
}

/* ==============================================================================
   Ronda 21 (2026-07-20) -- 2 fixes de fidelidad vs mockup del QA
   (Agente QA/auditorias/finaurum/2026-07-20-checkout-vs-mockup/audit-report.md,
   hallazgos H1 y H4).
   ============================================================================== */

/* ---- H1: checkbox del curso inicial (bloqueado) -- navy apagado, no verde ---

   El mockup distingue "bloqueado/no editable" (navy suave) de "elegido
   activamente" (verde) -- en el real ambos casos usaban el mismo verde solido
   heredado de la regla general .fin-course-checkbox:checked + ...-box. Se
   scopea SOLO a .fin-course-item.is-locked para no tocar el verde de los
   cursos que el usuario s elige a mano. */
.fin-course-item.is-locked .fin-course-checkbox:checked + .fin-course-checkbox-box {
	background: rgba(12, 60, 96, .2);
	border-color: rgba(12, 60, 96, .3);
}

.fin-course-item.is-locked .fin-course-checkbox-box svg {
	color: rgba(12, 60, 96, .6);
}

/* ---- H4: radio de metodo de pago -- a la derecha, no a la izquierda --------

   Reordenado por CSS (order en flex), sin tocar el markup de checkout.php:
   el radio ya es el primer hijo en el HTML (antes del body de texto), asi
   que solo hace falta invertir el orden visual. */
.fin-payment-option {
	justify-content: space-between;
}

.fin-payment-option__radio {
	order: 2;
}

.fin-payment-option__body {
	order: 1;
}

.fin-btn-outline.is-remove-mode:hover {
	border-color: var(--fin-navy);
	background: rgba(12, 60, 96, .05);
}

.fin-btn-secondary {
	background: #f4f6f9;
	color: var(--fin-navy);
}

.fin-btn-secondary:hover {
	background: #e9edf2;
}

.fin-btn-primary {
	background: var(--fin-verde);
	color: #fff;
	box-shadow: 0 8px 20px rgba(0, 144, 84, .28);
}

.fin-btn-primary:hover {
	background: var(--fin-verde-dark);
}

.fin-btn-lg {
	padding: 20px 24px;
	font-size: 16px;
	border-radius: 12px;
}

/* Fix QA fidelidad R9: submit final — pill 999px + shadow-xl neutra (mockup),
   reemplaza el radius 12px de .fin-btn-lg y el shadow verde de .fin-btn-primary
   solo para este boton puntual (selector ID). Ronda 3: peso 900 (era 700). */
#fin-submit-btn {
	border-radius: 999px;
	font-weight: 900;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
}

/* Ronda 3: iconos SVG inline en botones/toggles (reemplazan ✨🎁🔒 emoji). */
.fin-btn__icon {
	width: 16px;
	height: 16px;
	display: inline-flex;
	flex: 0 0 auto;
}

.fin-btn__icon svg {
	width: 100%;
	height: 100%;
}

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

.fin-summary-lines {
	display: flex;
	flex-direction: column;
	padding-bottom: 14px;
	margin-bottom: 14px;
	border-bottom: 1px solid #edf0f4;
}

.fin-summary-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	font-size: 14px;
}

/* Fix QA ronda3 #5: [hidden] nativo pierde contra el display:flex de arriba
   (misma especificidad de origen "author", el authoring CSS gana sobre el
   default de UA para [hidden]) — las filas de descuento quedaban siempre
   visibles en USD 0 aunque JS les seteara .hidden=true. */
.fin-summary-row[hidden] {
	display: none;
}

/* Fix fidelidad R-checkout-resumen (2026-07-16): fila de curso del resumen —
   replica el mockup (flex items-center justify-between gap-2.5 py-1.5
   border-b border-navy/5 last:border-0 text-xs). Ya NO usa position:relative
   ni un hijo absolute-positioned: esa era la causa raiz del scroll horizontal
   (.fin-summary-remove con right:-6px sacaba la x 6px fuera del contenedor,
   scrollWidth > clientWidth). Ahora la x/spacer es un hijo flex normal de
   .fin-summary-row__group. */
.fin-summary-row--course {
	gap: 10px;
	padding: 6px 0;
	font-size: 12px;
	border-bottom: 1px solid rgba(12, 60, 96, .05);
}

.fin-summary-row--course:last-child {
	border-bottom: 0;
}

/* Titulo truncado con ellipsis (+ tooltip via atributo title= seteado en JS) —
   evita que un nombre de curso largo empuje el precio/x fuera de columna. */
.fin-summary-row__title {
	font-weight: 500;
	color: var(--fin-navy);
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding-right: 4px;
}

/* Grupo derecho: precio + (x de quitar | spacer) — ambos hijos flex de 20x20
   en la MISMA columna para los 5 cursos, sea cual sea el largo del titulo. */
.fin-summary-row__group {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
}

/* Precio en monospace (mockup: font-mono text-[11px]) — dígitos tabulares,
   arregla de raiz el corrimiento de 2px que Inter (proporcional) producia en
   precios como "USD 79" vs el resto. */
.fin-summary-row__price {
	font-family: var(--fin-font-mono);
	font-size: 11px;
	font-weight: 700;
	color: var(--fin-navy);
	white-space: nowrap;
}

.fin-summary-remove {
	position: static;
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	border-radius: 4px;
	color: var(--fin-gray);
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	transition: background .15s ease, color .15s ease;
}

.fin-summary-remove:hover {
	color: #c0392b;
	background: rgba(192, 57, 43, .08);
}

/* Spacer 20x20 para el curso locked (mockup: <span className="w-5 h-5"/>) —
   mantiene la columna del precio alineada aunque ese curso no tenga x. */
.fin-summary-remove-spacer {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	display: inline-block;
}

.fin-coupon {
	margin-bottom: 14px;
	padding-bottom: 14px;
	border-bottom: 1px solid #edf0f4;
}

.fin-coupon__toggle {
	display: flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: none;
	padding: 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--fin-navy);
	cursor: pointer;
}

/* Ronda 3: icono del toggle de cupon (Gift) va en mostaza en el mockup. */
#fin-coupon-toggle .fin-btn__icon {
	color: var(--fin-mostaza);
}

.fin-coupon__chevron {
	margin-left: auto;
	width: 14px;
	height: 14px;
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--fin-gray);
}

.fin-coupon__chevron svg {
	width: 100%;
	height: 100%;
}

.fin-coupon__form {
	display: flex;
	gap: 8px;
	margin-top: 10px;
}

/* Fix QA fidelidad R9 #2 (🔴): mismo bug de especificidad [hidden] vs
   display:flex ya fixeado en .fin-summary-row[hidden], nunca aplicado aca —
   el form de cupon se veia siempre expandido aunque JS le seteara hidden. */
.fin-coupon__form[hidden] {
	display: none;
}

.fin-coupon__form input {
	flex: 1 1 auto;
	border: 1px solid #dde2e9;
	border-radius: 8px;
	padding: 9px 12px;
	font-size: 13px;
}

.fin-coupon__msg {
	margin-top: 8px;
	font-size: 12px;
	font-weight: 700;
}

.fin-coupon__msg.is-success {
	color: var(--fin-verde-dark);
}

.fin-coupon__msg.is-error {
	color: #c0392b;
}

.fin-summary-totals {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 14px;
}

.fin-summary-row--total {
	align-items: flex-start;
	padding-top: 4px;
}

.fin-summary-row--total span:first-child {
	font-weight: 700;
	font-size: 20px;
	padding-top: 4px;
}

.fin-summary-total-value {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
}

/* Ronda 3: Total — mockup usa sans (Inter) 900 20px, no serif 26px. */
.fin-summary-total-value strong {
	font-size: 20px;
	font-family: var(--fin-font-body, 'Inter', sans-serif);
	font-weight: 900;
	color: var(--fin-navy);
}

.fin-summary-total-value small {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--fin-gray);
	text-transform: uppercase;
}

.fin-summary-row--discount span {
	color: var(--fin-mostaza-dark, #b8890a);
	font-weight: 700;
}

/* Ronda 3: banner de ahorro — festivo mostaza (era tostado/warning). */
.fin-savings-banner {
	background: rgba(251, 211, 141, .15);
	border: 1px solid rgba(251, 211, 141, .3);
	color: var(--fin-navy);
	font-weight: 700;
	font-size: 13px;
	text-align: center;
	padding: 10px;
	border-radius: 12px;
	margin-bottom: 14px;
}

/* Ronda 3: bg-alt/70 translucido, radius 16, border navy/5, padding 12. */
.fin-secure-note {
	background: rgba(250, 245, 236, .7);
	border: 1px solid rgba(12, 60, 96, .05);
	border-radius: 16px;
	padding: 12px;
}

.fin-secure-note strong {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--fin-verde-dark);
	margin-bottom: 4px;
}

.fin-secure-note__icon {
	width: 16px;
	height: 16px;
	color: var(--fin-verde);
	flex: 0 0 auto;
	display: inline-flex;
}

.fin-secure-note__icon svg {
	width: 100%;
	height: 100%;
}

.fin-secure-note p {
	margin: 0;
	font-size: 12px;
	color: var(--fin-gray);
	line-height: 1.5;
}

/* ==========================================================================
   Tus datos / Como pagar
   ========================================================================== */

/* Ronda 3: radius 24 (era 18), padding 32 (era 28), border navy/5, shadow-sm
   propios, SIN el accent mostaza heredado de .fin-card::before (override
   scopeado — NUNCA se toca .fin-card::before global, que si lo necesitan
   pack-card y summary-card). */
.fin-form-card,
.fin-payment-card {
	border-radius: 24px;
	padding: 32px;
	border: 1px solid rgba(12, 60, 96, .05);
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
}

.fin-form-card::before,
.fin-payment-card::before {
	display: none;
}

.fin-step-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 16px;
	border-bottom: 1px solid rgba(12, 60, 96, .05);
	margin-bottom: 20px;
}

.fin-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--fin-navy);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	margin-right: 8px;
	flex: 0 0 auto;
}

.fin-link {
	background: none;
	border: none;
	color: var(--fin-verde-dark);
	font-weight: 700;
	font-size: 13px;
	cursor: pointer;
	padding: 0;
}

.fin-field {
	margin-bottom: 16px;
}

.fin-field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

@media (max-width: 600px) {
	.fin-field-row {
		grid-template-columns: 1fr;
	}
}

.fin-field label,
.fin-field__label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--fin-navy);
	margin-bottom: 6px;
}

.fin-field__hint {
	text-transform: none;
	font-weight: 400;
	letter-spacing: 0;
	color: #48546099;
	font-size: 11px;
	float: right;
}

.fin-field input[type="text"],
.fin-field input[type="email"],
.fin-field select {
	width: 100%;
	border: 1px solid #dde2e9;
	border-radius: 12px;
	padding: 12px 16px;
	font-size: 14px;
	font-family: inherit;
	color: var(--fin-navy);
	background: #fff;
}

/* Placeholder mas chico que el texto tipeado (14px) -- referencia. */
.fin-field input[type="text"]::placeholder,
.fin-field input[type="email"]::placeholder {
	font-size: 13px;
	color: #48546099;
}

/* Ronda 3: focus ring (mockup: ring-4 ring-verde/15 border-verde). No habia
   :focus definido — quedaba el outline default del navegador. */
.fin-field input[type="text"]:focus,
.fin-field input[type="email"]:focus,
.fin-field select:focus {
	outline: none;
	border-color: var(--fin-verde);
	box-shadow: 0 0 0 4px rgba(0, 144, 84, .15);
}

.fin-field input:disabled {
	background: #f4f6f9;
	color: #a6adb8;
	cursor: not-allowed;
}

.fin-checkbox-inline {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 12px;
	color: var(--fin-gray);
	margin-top: 8px;
	cursor: pointer;
}

.fin-checkbox-inline input {
	margin-top: 2px;
}

/* Fix QA ronda3 #6: consentimiento de email — texto separado del checkbox,
   en fila (como el mockup), sin heredar el text-transform:uppercase de
   ".fin-field label" (esa regla tiene mas especificidad que ".fin-checkbox-inline"
   sola, por eso "No, gracias" salia en mayusculas pegado al texto descriptivo). */
.fin-consent-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin-top: 8px;
}

.fin-consent-text {
	font-size: 12px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	color: var(--fin-gray);
	flex: 1 1 200px;
}

.fin-field .fin-checkbox-inline--consent {
	text-transform: none;
	font-weight: 400;
	letter-spacing: 0;
	margin-top: 0;
	flex: 0 0 auto;
	white-space: nowrap;
}

/* Ronda 3: confirmacion de compra como mini-card blanca (mockup: bg-white
   p-4 rounded-2xl border navy/5 shadow-sm), antes texto plano sobre el fondo
   del panel. */
.fin-terms {
	background: #fff;
	padding: 16px;
	border-radius: 16px;
	border: 1px solid rgba(12, 60, 96, .05);
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
}

.fin-terms .fin-checkbox-inline {
	margin-top: 0;
}

.fin-terms a {
	color: var(--fin-verde-dark);
	font-weight: 700;
	text-decoration: underline;
}

/* ---- Metodo de pago ---- */

.fin-payment-toggle {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 20px;
}

@media (max-width: 600px) {
	.fin-payment-toggle {
		grid-template-columns: 1fr;
	}
}

/* Ronda 3: border 1px (era 2px), radius 16 (era 12), gap 16 (era 14) + ring
   verde al seleccionar (ademas del border-color). */
.fin-payment-option {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	border: 1px solid #e7eaf0;
	border-radius: 16px;
	padding: 14px;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.fin-payment-option.is-selected {
	border-color: var(--fin-verde);
	background: color-mix(in srgb, var(--fin-verde) 5%, #fff);
	box-shadow: 0 0 0 1px var(--fin-verde);
}

.fin-payment-option__radio {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid #c7cdd6;
	margin-top: 2px;
	position: relative;
}

.fin-payment-option.is-selected .fin-payment-option__radio {
	border-color: var(--fin-verde);
}

.fin-payment-option.is-selected .fin-payment-option__radio::after {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: var(--fin-verde);
}

.fin-payment-option__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 13px;
}

.fin-payment-option__body strong {
	font-size: 13px;
	color: var(--fin-navy);
}

.fin-payment-option__title {
	font-weight: 700;
	color: var(--fin-navy);
}

.fin-payment-option__desc {
	font-size: 11px;
	color: var(--fin-gray);
}

.fin-payment-placeholder {
	background: #f9fafc;
	border: 1px dashed #d7dce4;
	border-radius: 12px;
	padding: 18px;
}

.fin-payment-placeholder__banner {
	background: #fdf3d6;
	color: #8a6d1c;
	font-weight: 700;
	font-size: 12px;
	padding: 8px 12px;
	border-radius: 8px;
	margin-bottom: 16px;
}

/* ==========================================================================
   Submit final
   ========================================================================== */

.fin-submit-note {
	text-align: center;
	font-size: 12px;
	color: #8a6d1c;
	background: var(--fin-bg-alt);
	border-radius: 8px;
	padding: 10px;
	margin-top: 10px;
}

/* Ronda 3: 10px (era 11px), italica, gray/50 (era gray solido). */
.fin-footer-note {
	text-align: center;
	font-size: 10px;
	font-style: italic;
	color: rgba(72, 84, 96, .5);
	margin-top: 16px;
}

/* ==========================================================================
   Responsive — Tablet ≤1000px / Mobile ≤600px
   ========================================================================== */

@media (max-width: 1000px) {
	.fin-checkout {
		padding: 40px 20px 56px;
	}

	.fin-checkout__panel {
		padding: 32px;
		border-radius: 32px;
	}

	.fin-checkout__masthead {
		margin-bottom: 56px;
	}

	.fin-checkout__title {
		font-size: 32px;
	}
}

@media (max-width: 600px) {
	.fin-checkout {
		padding: 24px 12px 32px;
	}

	.fin-checkout__panel {
		padding: 20px;
		border-radius: 24px;
	}

	.fin-checkout__masthead {
		margin-bottom: 40px;
	}

	.fin-checkout__chip {
		width: 96px;
		height: 96px;
	}

	.fin-checkout__title {
		font-size: 26px;
	}

	.fin-card {
		padding: 20px;
	}

	.fin-form-card,
	.fin-payment-card {
		padding: 20px;
	}

	.fin-tier-bar {
		grid-template-columns: repeat(2, 1fr);
	}

}

/* ==========================================================================
   Shell minimal — ocultar header/footer global (QA 2026-07-14, hallazgo #2 +
   #6 de PENDIENTES-Finaurum.md): el checkout es un tunel unico sin nav (spec
   cliente). El mock (04-checkout-tu-plata-bajo-control-1440.png) no muestra
   el mega-menu "Cursos" ni el boton "Ingresar" del header global — solo el
   logo. Se ocultan los sub-bloques del header Elementor (data-elementor-id
   22 — MISMO location header sitewide, igual patron que usa ya
   tutor-single-course.css con body.single-courses) dejando visible unicamente
   el link-logo ("Finaurum." + "ACADEMIA ONLINE", elementor-element-f49caa2),
   y se oculta el footer completo (data-elementor-id 26). Efecto colateral
   deseado: el boton "Ingresar" del header (que no evalua is_user_logged_in())
   tambien queda oculto en checkout, resolviendo el hallazgo #6 sin tocar el
   widget global (fuera de alcance del child theme).
   Scopeado a body.page-id-50 (ID real de la pagina de checkout de Tutor en
   este sitio, tutor_checkout_page_id) para no afectar ninguna otra pagina —
   ademas esta hoja SOLO se encola en esa pagina (ver functions.php).
   ========================================================================== */

/* 2026-07-16 — decision del usuario: el checkout NO lleva header, ni siquiera
   el logo. Reemplaza el ocultamiento por sub-bloques (que dejaba el logo
   "Finaurum. ACADEMIA ONLINE" centrado): ahora se oculta el header Elementor
   completo. El unico branding de la pantalla es el chip "LOGO CURSO" dentro
   del panel, igual que el mockup. Sigue siendo CSS del child theme scopeado a
   la pagina de checkout — NO se toca el header en Elementor. */
body.page-id-50 header[data-elementor-id="22"] {
	display: none !important;
}

body.page-id-50 footer[data-elementor-id="26"] {
	display: none !important;
}

/* Fix QA fidelidad R9 #1 (🔴): Hello Elementor's .page-header renderiza un H1
   "Checkout" completo arriba de todo, fuera de marca y generando un 2do H1
   (a11y) — el mockup no tiene page title aca. Scopeado a body.page-id-50; esta
   hoja SOLO se encola en la pagina base de checkout (no en thank-you). */
body.page-id-50 .page-header {
	display: none !important;
}

/* ==============================================================================
   Ronda 10 (2026-07-20) -- fidelidad contra la referencia Cloud Run
   (https://finaurum-459965135674.us-east1.run.app/), vista de checkout con el
   pack de 5 cursos (subtotal USD 395 / descuento -USD 99 / total USD 296).
   TODOS los valores de abajo salen de getComputedStyle sobre el DOM real de la
   referencia -- ninguno estimado. Bloque agregado al FINAL del archivo: misma
   especificidad que las reglas base, gana por orden de aparicion (cascada).
   ============================================================================== */

/* ---- 1. Bloque de terminos + boton de pago ------------------------------- */

/* CAUSA RAIZ del bug de "texto en columnas desalineadas": .fin-checkbox-inline
   es display:flex y el copy vivia como nodos de texto sueltos + <span> hermanos
   directos del checkbox, asi que CADA corrida de texto y cada link se convertia
   en un flex item propio -- por eso "y", "los" y el punto final caian en
   columnas separadas. Ronda 10 envuelve todo el copy en .fin-terms__text (un
   unico flex item) y el texto vuelve a fluir inline, igual que la referencia
   (que usa <span class="text-[11px] sm:text-xs ...">). */
.fin-terms__text {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 12px;
	line-height: 1.625;
	color: rgba(72, 84, 96, .9);
}

.fin-terms .fin-checkbox-inline {
	gap: 12px;
	align-items: flex-start;
}

/* Referencia: w-4 h-4 mt-0.5 accent-brand-verde shrink-0. */
.fin-terms .fin-checkbox-inline > input[type="checkbox"] {
	width: 16px;
	height: 16px;
	margin: 2px 0 0;
	flex: 0 0 auto;
	accent-color: var(--fin-verde);
	cursor: pointer;
}

/* Referencia: text-brand-navy font-bold underline, hover -> verde. Antes la
   regla apuntaba a verde-dark y ademas NO alcanzaba al markup real: Tutor no
   tiene seteadas las paginas de Privacidad / T&C (get_toc_page_link() y
   get_privacy_page_link() devuelven vacio), asi que el template caia al
   fallback <span> sin <a> y ninguna regla "a" lo tocaba. Ronda 10 le pone
   clase propia al fallback para que se vea igual con o sin link configurado.
   Ver backlog: falta configurar esas 2 paginas en los ajustes de Tutor. */
.fin-terms a,
.fin-terms .fin-terms__link {
	color: var(--fin-navy);
	font-weight: 700;
	text-decoration: underline;
}

.fin-terms a:hover,
.fin-terms .fin-terms__link:hover {
	color: var(--fin-verde);
}

/* Submit: la referencia mide 15px / tracking-wide (.025em) / gap 14px, y el
   padding lateral es 0 (el contenido se centra con justify-content). */
#fin-submit-btn {
	font-size: 15px;
	letter-spacing: .025em;
	gap: 14px;
	padding: 20px 0;
}

#fin-submit-btn .fin-btn__icon {
	width: 18px;
	height: 18px;
}

/* Estado DESHABILITADO (referencia: la clase bg-gray-150 no existe en Tailwind,
   asi que el fondo computa transparente; text-gray-400 = #99a1af; opacity .8;
   cursor not-allowed; conserva la shadow-xl). El boton arranca deshabilitado
   por atributo en el markup y el JS lo habilita al tildar el checkbox. */
#fin-submit-btn:disabled,
#fin-submit-btn[disabled] {
	background: transparent;
	color: #99a1af;
	opacity: .8;
	cursor: not-allowed;
}

#fin-submit-btn:disabled:hover,
#fin-submit-btn[disabled]:hover {
	background: transparent;
}

#fin-submit-btn:disabled:active,
#fin-submit-btn[disabled]:active {
	transform: none;
}

/* ---- 2. Microcopy al pie del boton --------------------------------------- */

/* Referencia: leading-snug (1.375). Lo demas (10px, italica, gray/50, centrado)
   ya coincidia desde Ronda 3. El candado se agrega en el markup como entidad
   HTML &#128274; en vez de emoji literal -- ver nota de emojis al final. */
.fin-footer-note {
	line-height: 1.375;
}

/* ---- 3. Tarjeta "Resumen de compra" -------------------------------------- */

/* x de quitar: referencia text-brand-gray/50 + font-bold, hover red-600 sobre
   red-50 (antes: gray solido, weight 400, hover #c0392b sobre rojo translucido). */
.fin-summary-remove {
	color: rgba(72, 84, 96, .5);
	font-weight: 700;
}

.fin-summary-remove:hover {
	color: #dc2626;
	background: #fef2f2;
}

/* "PAGO UNICO FINAL": referencia 9px / weight 600 / tracking-normal / gray al
   60% (antes 10px / 700 / letter-spacing .04em / gray solido). */
.fin-summary-total-value small {
	font-size: 9px;
	font-weight: 600;
	letter-spacing: normal;
	color: rgba(72, 84, 96, .6);
}

/* Pill de ahorro: referencia text-xs (12px) + py-2 (8px vertical, 0 lateral). */
.fin-savings-banner {
	font-size: 12px;
	padding: 8px 0;
}

/* Caja "Acceso Seguro": la referencia la tiene toda en 11px y el TITULO en
   navy, no en verde-dark. El unico elemento verde de la caja es el icono
   shield-check (ya estaba correcto en .fin-secure-note__icon). */
.fin-secure-note {
	font-size: 11px;
}

.fin-secure-note strong {
	color: var(--fin-navy);
	font-size: 11px;
	text-decoration: none;
}

.fin-secure-note p {
	font-size: 11px;
}

/* ---- 4. Acordeon de cupon ------------------------------------------------ */

/* El hint ocupa una fila propia debajo de input+boton: el form es flex, se
   habilita el wrap y el hint toma el 100% del ancho. El toggle por [hidden]
   sigue funcionando igual (oculta el form entero, hint incluido). */
.fin-coupon__form {
	flex-wrap: wrap;
	align-items: center;
}

/* Referencia: rounded-xl (12px), px-3 py-1.5, text-xs, font-bold, uppercase,
   borde navy/15. El text-transform:uppercase tambien afecta al placeholder, por
   eso en la referencia se lee "INGRESA FINAURUM10" aunque el atributo diga
   "Ingresa FINAURUM10" -- se replica igual. */
.fin-coupon__form input {
	border: 1px solid rgba(12, 60, 96, .15);
	border-radius: 12px;
	padding: 6px 12px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
}

.fin-coupon__form input:focus {
	outline: none;
	border-color: var(--fin-verde);
	box-shadow: 0 0 0 2px rgba(0, 144, 84, .2);
}

/* Boton "Aplicar": navy solido con texto blanco. Antes heredaba
   .fin-btn-secondary (gris claro #f4f6f9, 14px, radius 10px, padding 12/20) --
   ahora tiene clase propia .fin-coupon__apply con los valores de la referencia. */
.fin-coupon__apply {
	flex: 0 0 auto;
	background: var(--fin-navy);
	color: #fff;
	border: none;
	border-radius: 12px;
	padding: 6px 12px;
	font-family: var(--fin-font-body, 'Inter', sans-serif);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.35;
	cursor: pointer;
	transition: background .15s ease;
}

.fin-coupon__apply:hover {
	background: #12507e;
}

/* Linea de ayuda con el codigo real del cupon -- no existia en nuestro
   checkout. Referencia: text-[10px] text-brand-gray/60 leading-relaxed, con el
   codigo en <strong> navy/semibold/uppercase. */
.fin-coupon__hint {
	flex: 1 1 100%;
	margin: 0;
	font-size: 10px;
	line-height: 1.625;
	color: rgba(72, 84, 96, .6);
}

.fin-coupon__hint strong {
	color: var(--fin-navy);
	font-weight: 600;
	text-transform: uppercase;
}

/* ------------------------------------------------------------------------------
   NOTA DE EMOJIS (hallazgo Ronda 10 -- corrige una hipotesis inicial errada):
   WordPress carga wp-emoji-release.min.js, que con un MutationObserver reemplaza
   TODO emoji del DOM por un <img class="emoji"> servido desde s.w.org. Por eso el
   emoji NUNCA aparece al leer .textContent / .innerText (el nodo de texto ya fue
   sustituido por el <img>) aunque EN PANTALLA SI SE VE. Verificado en vivo: el
   pill de ahorro rendea <img class="emoji" alt="tada" src=".../1f389.svg"> de
   12x12 px, y el candado del microcopy uno de 10x10 px.
   CONCLUSION: en este stack NO hay ningun "stripping" de emojis. Si un QA futuro
   no ve el emoji con textContent, mirar innerHTML ANTES de concluir que se
   perdio -- esa confusion costo una vuelta entera de diagnostico en Ronda 10.
   Se dejan igual entidades numericas en el markup (&#128274; candado,
   &#128161; bombita) y escapes unicode en JS: terminan en el mismo <img>, y de
   paso mantienen esos puntos del archivo en ASCII puro, deseable por el drift
   historico de tildes de este template (ver Ronda 9).
   ------------------------------------------------------------------------------ */

/* ==============================================================================
   Ronda 10.1 (2026-07-20) -- (A) fix de la regresion del acordeon de cupon que
   introdujo la Ronda 10, y (B) gating del submit por formulario completo con
   aviso de campo faltante. Bloque al FINAL: gana por orden de cascada, no se
   edita ninguna regla previa (rollback = truncar desde este marcador).
   ============================================================================== */

/* ---- (A) REGRESION DEL CUPON: input y boton se apilaban -------------------

   CAUSA RAIZ: la Ronda 10 agrego `flex-wrap: wrap` a .fin-coupon__form (unico
   objetivo: que el hint nuevo cayera en su propia fila). Pero el input conserva
   del bloque original `flex: 1 1 auto`, y con flex-basis:auto la base la fija el
   ancho/tamano intrinseco del input (size=20 por defecto, y cualquier regla
   global `width:100%` que le llegue). Mientras el form era `nowrap` eso era
   inofensivo -- el input simplemente se encogia. Al habilitar el wrap, esa base
   grande dejo de entrar junto al boton en la misma linea y el boton se fue a la
   fila de abajo, quedando ademas angosto y desalineado.

   FIX: base 0 (`flex: 1 1 0`) + `min-width: 0`, para que el input tome el
   espacio SOBRANTE en vez de imponer su ancho intrinseco. Asi input + boton
   vuelven a compartir la primera linea sea cual sea el ancho de la card, y el
   unico item que sigue haciendo wrap es el hint (flex-basis:100%). Es un fix
   robusto: no depende de cual sea la fuente del ancho intrinseco. */
.fin-coupon__form input {
	flex: 1 1 0;
	min-width: 0;
}

/* El boton iguala la altura del input en su linea (antes quedaba mas bajo
   porque `align-items:center` lo dejaba a su altura de contenido). */
.fin-coupon__apply {
	align-self: stretch;
}

/* ---- (B) Gating del submit: estado bloqueado por aria-disabled ------------

   Se replica EXACTAMENTE el look que la Ronda 10 valido contra la referencia,
   pero enganchado a [aria-disabled="true"] en vez de al atributo `disabled`
   nativo (ver el comentario largo en el JS de checkout.php: con `disabled` el
   boton sale del tab order y un usuario de teclado/lector nunca podria enfocarlo
   para enterarse de que le falta). Se dejan tambien las reglas :disabled/[disabled]
   de la Ronda 10 por si algun dia se vuelve al atributo nativo -- son inertes hoy.
   Especificidad #id + [attr] = 1-1-0: le gana a .fin-btn-primary (0-1-0). */
#fin-submit-btn[aria-disabled="true"] {
	background: transparent;
	color: #99a1af;
	opacity: .8;
	cursor: not-allowed;
}

#fin-submit-btn[aria-disabled="true"]:hover {
	background: transparent;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
}

#fin-submit-btn[aria-disabled="true"]:active {
	transform: none;
}

/* ---- (B) Tooltip de "que te falta" --------------------------------------- */

.fin-submit-wrap {
	position: relative;
}

/* El tooltip NO se oculta con [hidden] ni visibility a proposito: su texto tiene
   que seguir en el arbol de accesibilidad para que el aria-describedby del boton
   lo pueda anunciar. Solo se anima la opacidad. Cuando no falta nada el JS le
   vacia el textContent y :empty lo saca del layout (sin flecha huerfana). */
.fin-submit-tip {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 10px);
	transform: translateX(-50%);
	width: max-content;
	max-width: min(280px, 90%);
	background: var(--fin-navy);
	color: #fff;
	font-family: var(--fin-font-body, 'Inter', sans-serif);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
	padding: 8px 12px;
	border-radius: 8px;
	box-shadow: 0 8px 20px rgba(12, 60, 96, .25);
	opacity: 0;
	pointer-events: none;
	transition: opacity .1s ease;
	z-index: 5;
}

.fin-submit-tip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top-color: var(--fin-navy);
}

.fin-submit-tip.is-visible {
	opacity: 1;
}

.fin-submit-tip:empty {
	display: none;
}

/* ==============================================================================
   Ronda 11 (2026-07-20) -- ajustes puntuales pedidos por el cliente sobre el
   checkout: ancho del panel, colores/tamanos del resumen, hover del cupon,
   placeholder mas suave, weight de botones/microcopy en "Tus datos".
   ============================================================================== */

/* ---- 1. Ancho del panel exterior -----------------------------------------

   CAUSA RAIZ: Hello Elementor pone max-width:1140px en <main id="content">
   (global, sin scopear), que le gana al max-width:1240px propio de
   .fin-checkout (nunca llega a su propio tope). padding 64px * 2 = 128px de
   .fin-checkout, entonces el panel quedaba en 1140-128+64=1076px en vez de
   1176px. Se sube el limite del wrapper SOLO en la pagina de checkout para
   que .fin-checkout alcance su max-width de 1240px (1240 - 64px de padding
   lateral = 1176px de panel). */
body.page-id-50 #content {
	max-width: 1240px;
}

/* ---- 2. Colores/tamanos del resumen de compra ----------------------------- */

/* Subtotal (fin-summary-row sin modificador) y las filas de descuento
   (Descuento por pack / Cupon) pasan a 12px; el renglon de Total conserva el
   tamano anterior via el override de abajo. */
.fin-summary-row {
	font-size: 12px;
}

.fin-summary-row--total {
	font-size: 14px;
}

/* "Descuento por pack" (y Cupon, misma clase) en el mostaza de marca exacto
   pedido por el cliente -- antes usaba un fallback #b8890a (variable
   --fin-mostaza-dark nunca declarada). */
.fin-summary-row--discount span {
	color: var(--fin-mostaza);
}

/* Precio del Total: weight 700 (era 900). */
.fin-summary-total-value strong {
	font-weight: 700;
}

/* Banner "¡Ahorras!": el emoji ya es 🎉 (tada/party-popper, ver nota de
   emojis mas arriba en este archivo) -- solo se ajusta el background al hex
   con alpha exacto pedido. */
.fin-savings-banner {
	background: #fbd38d26;
}

/* ---- 3. Hover del acordeon de cupon ---------------------------------------

   Texto en verde al hacer hover + icono de regalo con un salto sutil
   (bounce). El color mostaza del icono (#fin-coupon-toggle .fin-btn__icon,
   regla existente mas arriba) se conserva -- solo se anima el transform. */
.fin-coupon__toggle {
	transition: color .15s ease;
}

.fin-coupon__toggle:hover {
	background-color: transparent;
	color: var(--fin-verde);
}

.fin-coupon__toggle:hover .fin-btn__icon {
	animation: fin-gift-bounce .6s ease-in-out infinite;
}

@keyframes fin-gift-bounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-3px); }
}

/* Placeholder del input de cupon mas suave (antes heredaba el color navy
   solido + weight 700 del input real, se leia igual de fuerte que el texto
   tipeado). Se relaja SOLO el placeholder -- lo tipeado sigue fuerte. */
.fin-coupon__form input::placeholder {
	color: rgba(12, 60, 96, .35);
	font-weight: 400;
}

/* ---- 4. Boton final -------------------------------------------------------- */

#fin-submit-btn {
	font-weight: 700;
}

/* ---- 5. "Tus datos" -------------------------------------------------------- */

/* "Donde recibiras el curso" (hint al lado del label E-MAIL) en cursiva. */
.fin-field__hint {
	font-style: italic;
}

/* "No, gracias" (checkbox de opt-out del email) en weight 700 (era 400). */
.fin-field .fin-checkbox-inline--consent {
	font-weight: 700;
}

/* "Guardamos tu email para recordarte esta compra." a 11px (era 12px). */
.fin-consent-text {
	font-size: 11px;
}

/* ==============================================================================
   Ronda 12 (2026-07-20) -- hover solido de "Sumar todos", 2 lineas divisorias
   pedidas por el cliente, gap excesivo antes del microcopy final, alineacion
   del checkbox "No, gracias".

   Nota sobre los fondos rosa/magenta reportados en "Tenes un cupon" y en
   "Quitar agregados": verificado en vivo con getComputedStyle -- ambos ya
   estaban en blanco/transparente. Ese rosa es el overlay de flexbox que
   Chrome DevTools dibuja sobre contenedores flex cuando el badge esta
   activado (ambos botones son display:flex/inline-flex) -- no es un estilo
   real de la pagina, no requiere fix. El Total tambien ya estaba en 20px/700
   (font-size nunca se toco en la Ronda 11, solo el weight).
   ============================================================================== */

/* ---- 1. Hover solido de "Sumar todos y llevarte la Academia completa" ----

   Solo en el modo normal -- el modo "Quitar agregados" (.is-remove-mode) ya
   tiene su propio hover (tinte navy) y no fue parte de este pedido. */
#fin-add-all-btn:not(.is-remove-mode):hover {
	background: var(--fin-verde);
	color: #fff;
}

#fin-add-all-btn:not(.is-remove-mode):hover .fin-btn__icon {
	color: #fff;
}

/* ---- 2. Linea divisoria arriba de "Total" ---------------------------------- */

.fin-summary-row--total {
	border-top: 1px solid #edf0f4;
	padding-top: 12px;
}

/* ---- 3. Linea divisoria arriba de "Sumar todos" / "Quitar agregados" ------

   Pseudo-elemento en vez de un <hr> nuevo en el HTML: la separacion visual
   que pide el cliente cae justo en el margin-bottom:18px que ya trae
   .fin-course-list, asi que no hace falta tocar el spacing existente. */
#fin-add-all-btn {
	position: relative;
}

#fin-add-all-btn::before {
	content: "";
	position: absolute;
	top: -9px;
	left: 0;
	right: 0;
	height: 1px;
	background: #edf0f4;
}

/* ---- 4. Espacio excesivo entre el boton final y el microcopy del candado --

   CAUSA RAIZ: .fin-submit-wrap y .fin-footer-note son hermanos flex directos
   de .fin-checkout__col-left (gap:32px), y footer-note ademas traia su propio
   margin-top:16px (Ronda 3) -- las dos fuentes de espacio se suman (32+16=48px
   medido en vivo). Se lleva el margin-top a negativo para descontar la mayor
   parte del gap del flex y dejar ~10px, en linea con el spacing de
   .fin-submit-note (10px) que ya usa el mismo patron de microcopy en otra
   pantalla. */
.fin-footer-note {
	margin-top: -22px;
}

/* ---- 5. Alineacion de "No, gracias" con su checkbox ------------------------

   .fin-checkbox-inline usa align-items:flex-start (correcto para el texto
   largo de .fin-terms, que ocupa varias lineas) pero en este caso puntual
   -- texto de una sola linea -- dejaba el checkbox 2px mas abajo que el
   texto (heredaba align-items:flex-start + el margin-top:2px del input
   generico). Se centra solo esta variante y se anula ese margin-top. */
.fin-field .fin-checkbox-inline--consent {
	align-items: center;
}

.fin-field .fin-checkbox-inline--consent input {
	margin-top: 0;
}

/* ==============================================================================
   Ronda 13 (2026-07-20) -- fondo magenta al enfocar botones (sin hover).

   CAUSA RAIZ (confirmada en vivo con getComputedStyle + inspeccion de
   document.styleSheets, NO era el overlay de flexbox de DevTools como se
   penso en la Ronda 12): el theme padre Hello Elementor trae en su
   reset.css una regla global

     [type="button"]:focus, [type="button"]:hover,
     [type="submit"]:focus, [type="submit"]:hover,
     button:focus, button:hover { background-color: #cc3366; color: #fff; }

   especificidad (0,1,1). El :hover de nuestros botones ya le ganaba en toda
   la hoja (todas nuestras reglas :hover usan clase o #id, (0,2,0) o mas), pero
   NINGUN boton propio tenia una regla :focus -- y el foco queda puesto en el
   boton despues de cualquier click (no hace falta seguir con el mouse encima,
   por eso aparecia "sin clickear en ningun lado"). Fix: reforzar :focus en
   cada boton propio (clase o id, ya gana por especificidad) y agregar un
   anillo de foco propio via :focus-visible (solo teclado, no en click de
   mouse) para no perder el indicador de accesibilidad al sacar el magenta.
   ============================================================================== */

.fin-btn-outline:focus {
	background-color: #fff;
	color: var(--fin-verde);
}

.fin-btn-outline.is-remove-mode:focus {
	color: var(--fin-navy);
}

.fin-btn-primary:focus {
	background-color: var(--fin-verde);
	color: #fff;
}

#fin-submit-btn[aria-disabled="true"]:focus {
	background-color: transparent;
	color: #99a1af;
}

.fin-coupon__toggle:focus {
	background-color: transparent;
	color: var(--fin-navy);
}

.fin-coupon__apply:focus {
	background-color: var(--fin-navy);
	color: #fff;
}

.fin-summary-remove:focus {
	background-color: transparent;
	color: rgba(72, 84, 96, .5);
}

/* Anillo de foco accesible SOLO para navegacion por teclado (:focus-visible
   no matchea en click de mouse) -- reemplaza el magenta de Hello Elementor
   sin dejar los botones sin ningun indicador visible para teclado/lectores. */
.fin-checkout button:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(0, 144, 84, .35);
}

/* ==============================================================================
   Ronda 16 (2026-07-20) -- 3 fixes puntuales de mobile (<=600px), medidos en
   vivo con emulate viewport 375x812.
   ============================================================================== */

@media (max-width: 600px) {
	/* ---- 1. Tag "CURSO INICIAL SELECCIONADO" se superponia con el precio ----

	   CAUSA RAIZ: .fin-course-tag usa width:max-content (necesario en desktop
	   para que el pill no ocupe todo el ancho de la columna). A 375px la
	   columna .fin-course-info se achica a ~71px (flex:1 1 auto con vecinos
	   fijos: checkbox+icono+precio+gaps), pero el pill IGNORA ese ancho
	   disponible y se dibuja a su ancho natural (~166px), desbordando por
	   encima del precio -- confirmado en vivo (tagRight 328px > priceLeft
	   245px). Fix: mismo patron de truncado que .fin-course-name (ellipsis)
	   en vez de dejarlo desbordar. */
	.fin-course-tag {
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* ---- 2. Mas padding horizontal en "Sumar todos y llevarte la Academia
	   completa" -- el texto quedaba muy pegado a los bordes del boton. */
	#fin-add-all-btn {
		padding-left: 24px;
		padding-right: 24px;
	}

	/* ---- 3. Subrayado amarillo del titulo tapaba las letras -------------------

	   CAUSA RAIZ: .fin-underline::after usa bottom:-.14em (escala con el
	   font-size del titulo). En mobile el titulo baja a 26px (vs 46px
	   desktop), asi que ese offset se achica proporcionalmente (~3.6px en vez
	   de ~6.4px) mientras que height:13px del trazo se mantiene fijo -- el
	   trazo queda mas cerca del texto y tapa los descendentes ("p" de
	   "Empezar"). Fix: offset fijo en px (no relativo a em) solo en mobile,
	   para separarlo mas del texto sin depender del font-size. */
	.fin-underline::after {
		bottom: -10px;
	}
}

/* ==============================================================================
   Ronda 17 (2026-07-20) -- (A) padding en #fin-submit-btn, (B) titulo y tag de
   curso pasan a WRAP en vez de truncar con ellipsis en mobile (reemplaza el
   criterio de la Ronda 16 punto 1 -- el cliente prefiere 2 lineas legibles a
   truncado, como en la referencia).
   ============================================================================== */

@media (max-width: 600px) {
	/* ---- A. Padding horizontal del boton final --------------------------------

	   CAUSA RAIZ: #fin-submit-btn tiene padding:20px 0 (Ronda "10", pensado
	   para desktop donde el texto entra comodo) -- CERO padding horizontal,
	   el texto queda pegado al borde curvo del pill en mobile. */
	#fin-submit-btn {
		padding-left: 24px;
		padding-right: 24px;
	}

	/* ---- B. Titulo/tag del curso: wrap a 2 lineas en vez de truncar -----------

	   Pisa el ellipsis de .fin-course-name (regla base, todos los breakpoints)
	   y de .fin-course-tag (Ronda 16 arriba) SOLO en mobile. */
	.fin-course-name {
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
	}

	.fin-course-tag {
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
	}
}

/* ==============================================================================
   Ronda 18 (2026-07-20) -- (A) revertir align-items a center en
   .fin-course-item (la Ronda 17 lo habia puesto en flex-start para que
   checkbox/icono/precio quedaran arriba cuando el titulo envuelve a 2-3
   lineas; el cliente prefiere que SIEMPRE queden centrados verticalmente
   respecto del bloque de texto, sea de 1 o varias lineas). (B) nudge optico
   de 1px en el checkbox de "No, gracias" -- ya estaba centrado por caja
   (align-items:center, offset geometrico ~0px), pero el checkbox nativo del
   navegador tiene padding interno que lo hace VER un pelo mas arriba que el
   texto aunque la caja este perfectamente centrada.
   ============================================================================== */

@media (max-width: 600px) {
	.fin-course-item {
		align-items: center;
	}
}

.fin-field .fin-checkbox-inline--consent input {
	margin-top: 1px;
}

/* ==============================================================================
   Ronda 22 (2026-07-20) -- badge "Cupon aplicado" (reemplaza el mensaje de
   texto plano por un pill verde con boton Eliminar, igual a la referencia),
   descuento de cupon en verde (antes heredaba el mostaza de
   .fin-summary-row--discount), mas espacio entre las 2 tarjetas de metodo de
   pago, y altura uniforme de las cards del pack en mobile (la fila bloqueada
   con el tag de 2 lineas quedaba mas alta que el resto -- confirmado en vivo:
   101px vs 66-68px a 375px).
   ============================================================================== */

/* ---- 1. Badge de cupon aplicado -------------------------------------------- */

.fin-coupon__applied {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	background: rgba(0, 144, 84, .08);
	border: 1px solid rgba(0, 144, 84, .25);
	border-radius: 10px;
	padding: 10px 12px;
	margin-top: 10px;
}

/* Mismo bug de especificidad [hidden] vs display:flex ya fixeado en Rondas
   anteriores para .fin-summary-row / .fin-coupon__form -- el authoring CSS
   siempre le gana al [hidden] del UA stylesheet, asi que hay que declararlo
   explicito por cada elemento nuevo que uses display:flex/grid + [hidden]. */
.fin-coupon__applied[hidden] {
	display: none;
}

.fin-coupon__applied-icon {
	width: 16px;
	height: 16px;
	color: var(--fin-verde-dark);
	flex: 0 0 auto;
	display: inline-flex;
}

.fin-coupon__applied-icon svg {
	width: 100%;
	height: 100%;
}

.fin-coupon__applied-text {
	flex: 1 1 auto;
	font-size: 13px;
	color: var(--fin-verde-dark);
}

.fin-coupon__applied-text strong {
	font-weight: 600;
}

.fin-coupon__applied-label,
.fin-coupon__applied-pct-wrap {
	color: var(--fin-navy);
	font-weight: 600;
}

.fin-coupon__remove {
	background: none;
	border: none;
	padding: 0;
	font-size: 10px;
	font-weight: 600;
	color: #dc2626;
	text-decoration: underline;
	cursor: pointer;
	flex: 0 0 auto;
}

/* :hover Y :focus explicitos -- mismo bug de fondo magenta de Hello Elementor
   (reset.css: button:focus/:hover => #cc3366) que ya pasamos en otros
   botones; este quedo sin cubrir por ser nuevo de la Ronda 22. */
.fin-coupon__remove:hover,
.fin-coupon__remove:focus {
	background: none;
	color: #b91c1c;
}

/* ---- 2. Fila de descuento por cupon en verde (no mostaza) ------------------

   .fin-summary-row--discount span (regla general, usada tambien por la fila
   de descuento por pack) fuerza el mostaza -- se pisa SOLO para la fila del
   cupon via el modificador agregado en el markup. */
.fin-summary-row--discount-coupon span {
	color: var(--fin-verde-dark);
}

/* ---- 3. Mas espacio entre las tarjetas de metodo de pago ------------------- */

.fin-payment-toggle {
	gap: 28px;
}

/* ---- 4. Altura uniforme de las cards del pack en mobile -------------------- */

@media (max-width: 600px) {
	.fin-course-item {
		min-height: 100px;
	}
}