/*
 * Finaurum — Single Course landing (Ronda 2).
 * Override completo de wp-content/plugins/tutor/templates/single-course.php
 * (finaurum-child/tutor/single-course.php + partials lead-info/course-topics/
 * course-entry-box/instructors). Layout de 1 columna centrada (NO el grid
 * tutor-row/col-xl-8/col-xl-4 nativo) — asi luce el mockup AI Studio.
 * Consume los tokens/utilidades de finaurum-tokens.css (.fin-h1/.fin-h2/.fin-h3/
 * .fin-body/.fin-card/.fin-btn-* /.fin-underline). Enqueue condicional ya
 * cableado en functions.php (is_singular('courses')).
 */

/* ==========================================================================
   0. Wrapper general
   ========================================================================== */

.fin-course-page-wrapper {
	background: var(--fin-bg);
	overflow-x: hidden;
}

.fin-course-section {
	padding: 72px 24px;
}

.fin-course-section-alt {
	background: var(--fin-bg-alt);
}

.fin-course-container {
	max-width: 900px;
	margin: 0 auto;
}

.fin-course-container-wide {
	max-width: 1100px;
	margin: 0 auto;
}

.fin-course-eyebrow {
	display: inline-block;
	font-family: var(--fin-font-body);
	font-weight: 800;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fin-verde);
	margin-bottom: 12px;
}

/* Ronda 27 (fidelidad desktop): TODOS los CTA primarios de esta landing llevan
   una flecha "→" al final en el mockup, EXCEPTO el boton chico del nav
   (confirmado leyendo las clases reales del mockup — el boton del nav no trae
   svg, todos los demas .fin-btn-primary si). Se agrega via ::after (pseudo
   elemento, no requiere tocar el markup de cada boton) y se excluye
   .fin-course-nav-cta explicitamente. Scopeado a body.single-courses para no
   afectar .fin-btn-primary de otras pantallas (dashboard/checkout/thank-you). */
body.single-courses .fin-btn-primary:not(.fin-course-nav-cta)::after {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='white'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cline%20x1='5'%20y1='12'%20x2='19'%20y2='12'/%3E%3Cpolyline%20points='12%205%2019%2012%2012%2019'/%3E%3C/svg%3E");
}

/* ==========================================================================
   1. NAV — header dedicado de la landing de curso (NO el header global del
   sitio: se oculta abajo por body.single-courses + se reemplaza por este).
   NO sticky (spec cliente Ronda 3) — solo el boton flotante lo es.
   ========================================================================== */

body.single-courses [data-elementor-id="22"] {
	display: none !important;
}

/* Footer global de Elementor (id 26) duplicado en la landing de curso — esta
   pagina ya tiene su propio footer dedicado (.fin-course-footer, ver seccion
   12 mas abajo), asi que el global queda oculto SOLO en single-courses.
   Confirmado body class real + data-elementor-id via wp_remote_get (Fix QA
   visual 2026-07-15): body.single-courses + <footer data-elementor-id="26">.
   OJO: cuando el usuario RELOCALICE/rearme el footer nuevo de Finaurum como
   el footer GLOBAL de Elementor, esta regla hay que REVERTIRLA (si no, el
   sitio se queda sin footer visible en las paginas de curso). */
body.single-courses footer[data-elementor-id="26"] {
	display: none !important;
}

/* Ronda 9, L3: `.fin-card` es un token GLOBAL (finaurum-tokens.css), compartido con
   el dashboard del alumno y el thank-you (ninguno de los 2 lo re-define — el
   checkout SÍ tiene su propio `.fin-card` local en finaurum-checkout.css, así que
   ese no se ve afectado en ningún sentido). Para no tocar el look de dashboard/
   thank-you, el padding/radius/sombra nuevos del mockup se scopean acá, SOLO a la
   landing de curso (body.single-courses), en vez de editar el token global.
   Afecta: Por qué este curso, Es para vos, Instructor, Temario, FAQ (las 5 cards
   que solo consumen el token sin override propio). Precio y Testimonio tienen
   sombra/radius propios (ver L3b/L3c más abajo, scopeados igual para poder ganarle
   en especificidad a esta regla). */
body.single-courses .fin-card {
	padding: 48px;
	border-radius: 32px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.fin-course-nav {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 20px 32px;
	background: #ffffff;
	border-bottom: 1px solid rgba(12, 60, 96, 0.08);
	flex-wrap: wrap;
}

.fin-course-nav-logo {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	line-height: 1;
	cursor: default;
	user-select: none;
}

/* Ronda 27 (fidelidad desktop): badge circular "F" con anillo mostaza, ausente
   en el real (solo texto). Ver span.fin-course-nav-logo-icon agregado en
   single-course.php + wrapper .fin-course-nav-logo-text-col para el texto
   apilado que antes colgaba directo de .fin-course-nav-logo. */
.fin-course-nav-logo-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 2px solid var(--fin-mostaza);
	background: #ffffff;
	font-family: var(--fin-font-heading);
	font-weight: 700;
	font-size: 15px;
	color: var(--fin-navy);
	flex-shrink: 0;
}

.fin-course-nav-logo-text-col {
	display: flex;
	flex-direction: column;
	line-height: 1;
}

.fin-course-nav-logo-text {
	font-family: var(--fin-font-heading);
	font-weight: 700;
	font-size: 22px;
	color: var(--fin-navy);
}

.fin-course-nav-logo-sub {
	font-family: var(--fin-font-body);
	font-weight: 700;
	font-size: 9px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fin-gray);
	margin-top: 2px;
}

.fin-course-nav-links {
	display: flex;
	align-items: center;
	gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.fin-course-nav-links a {
	font-family: var(--fin-font-body);
	font-weight: 700;
	font-size: 14px;
	color: var(--fin-navy);
	text-decoration: none;
	transition: color .15s ease;
}
.fin-course-nav-links a:hover {
	color: var(--fin-verde);
}

.fin-course-nav-cta.fin-btn {
	padding: 12px 26px;
	font-size: 14px;
}

.fin-course-nav-toggle {
	display: none;
}

@media (max-width: 900px) {
	.fin-course-nav-links {
		display: none;
	}
}

/* Boton flotante "Quiero el curso" — aparece al scrollear pasado el Hero */
.fin-float-cta {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 999;
	opacity: 0;
	visibility: hidden;
	transform: translateY(16px);
	transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
	box-shadow: 0 12px 32px rgba(0, 118, 68, 0.35);
}
.fin-float-cta.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* ==========================================================================
   2. HERO
   ========================================================================== */

.fin-course-hero {
	padding: 88px 24px 56px;
	text-align: center;
	/* Ronda 27 (fidelidad desktop): el mockup tiene un fondo con gradiente
	   radial sutil crema/mostaza detras del hero (getComputedStyle en el
	   propio <section> dio "none" — es un blob decorativo hijo con blur; se
	   aproxima con un radial-gradient liviano en vez de replicar el blob
	   exacto, opacidad muy baja para no afectar contraste del texto). */
	background: radial-gradient(ellipse 900px 480px at 50% 0%, rgba(246, 204, 18, 0.07), transparent 70%);
}

.fin-course-hero-inner {
	max-width: 860px;
	margin: 0 auto;
}

.fin-course-hero h1.fin-h1 {
	text-align: center;
	margin-bottom: 20px;
}

.fin-course-hero-tagline {
	font-family: var(--fin-font-body);
	font-weight: 700;
	font-size: 20px;
	color: var(--fin-navy);
	margin: 0 0 18px;
}

.fin-course-hero-hook {
	font-family: var(--fin-font-body);
	font-size: 18px;
	line-height: 1.65;
	color: var(--fin-gray);
	max-width: 680px;
	margin: 0 auto 32px;
}

.fin-course-hero-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
}

.fin-course-hero-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	margin: 0 auto 20px;
	color: #ffffff;
}
.fin-course-hero-icon svg {
	width: 28px;
	height: 28px;
}

/* Ronda 9, L4: el mockup no tiene icono en el Hero para este curso — oculto vía
   CSS (reversible), sin tocar lead-info.php. No verificado en los otros 4 cursos
   del catálogo — si algún otro curso SÍ debería mostrar su ícono, hay que
   scopear esta regla a la landing puntual en vez de ocultarlo global. */
.fin-course-hero-icon {
	display: none;
}

@media (max-width: 768px) {
	.fin-course-hero { padding: 56px 20px 40px; }
	.fin-course-hero-tagline { font-size: 17px; }
	.fin-course-hero-hook { font-size: 16px; }
}

/* ==========================================================================
   3. VIDEO intro (condicional — solo si el curso tiene _video de Tutor)
   ========================================================================== */

.fin-course-video-wrap {
	max-width: 900px;
	margin: 0 auto 72px;
	padding: 0 24px;
}

.fin-course-video {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 24px;
	overflow: hidden;
	background: var(--fin-navy);
	background-size: cover;
	background-position: center;
	cursor: pointer;
}

.fin-course-video-poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.55;
}

.fin-course-video-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--fin-verde);
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
	transition: transform .15s ease;
}
.fin-course-video-play:hover { transform: translate(-50%, -50%) scale(1.06); }
.fin-course-video-play svg { width: 28px; height: 28px; margin-left: 4px; }

.fin-course-video.is-playing .fin-course-video-play,
.fin-course-video.is-playing .fin-course-video-poster { display: none; }

/* Placeholder (curso sin video real cargado en Tutor) — mismo look oscuro +
   play del mockup, pero no interactivo (no hay fuente que reproducir). */
.fin-course-video--placeholder {
	cursor: default;
}
.fin-course-video--placeholder .fin-course-video-play {
	cursor: default;
}

.fin-course-video-frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ==========================================================================
   4. TESTIMONIOS — cinta infinita estilo Ali
   ========================================================================== */

.fin-testimonios h2.fin-h2 {
	text-align: center;
	font-size: 54px;
	font-weight: 700;
	margin-bottom: 44px;
}

.fin-testimonios-viewport {
	overflow: hidden;
	padding: 20px 0px;
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.fin-testimonios-track {
	display: flex;
	gap: 20px;
	width: max-content;
	animation: fin-course-marquee 42s linear infinite;
}
.fin-testimonios-viewport:hover .fin-testimonios-track {
	animation-play-state: paused;
}

@keyframes fin-course-marquee {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

.fin-testimonial-card {
	flex: 0 0 320px;
}

/* Ronda 9, L3c: radius/sombra/padding propios, mas livianos que el resto de las
   cards (rounded-2xl=16px, shadow-sm, p-6=24px) — antes heredaba el padding
   pesado. Scopeado con el mismo prefijo body.single-courses que .fin-card (L3)
   para igualar especificidad y ganarle por orden de aparicion en el archivo. */
body.single-courses .fin-testimonial-card {
	padding: 24px;
	border-radius: 16px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

.fin-testimonial-stars {
	color: var(--fin-mostaza);
	font-size: 15px;
	letter-spacing: 2px;
	margin-bottom: 12px;
}

.fin-testimonial-quote {
	font-family: var(--fin-font-body);
	font-size: 14px;
	line-height: 1.6;
	color: #485460e6;
	margin: 0 0 20px;
}

.fin-testimonial-author {
	display: flex;
	align-items: center;
	gap: 12px;
	border-top: 1px solid rgba(12, 60, 96, 0.05);
	padding-top: 16px;
	margin-top: 16px;
}

.fin-testimonial-author span{
	display: flex;
    flex-direction: column;
}

.fin-testimonial-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--fin-font-heading);
	font-weight: 700;
	font-size: 15px;
	color: #ffffff;
	flex-shrink: 0;
	border:1px solid #f6cc12;
}

.fin-testimonial-name {
	font-family: var(--fin-font-body);
	font-weight: 700;
	font-size: 12px;
	color: var(--fin-navy);
	display: block;
}

.fin-testimonial-role {
	font-family: var(--fin-font-body);
	font-size: 10px;
	color: var(--fin-gray);
}

/* ==========================================================================
   5. POR QUE ESTE CURSO
   ========================================================================== */

.fin-course-porque {
	text-align: center;
	max-width: 760px;
}

.fin-course-porque h2 {
	margin-bottom: 20px;
}

.fin-course-porque p {
	margin: 0;
}

/* ==========================================================================
   6. ES PARA VOS
   ========================================================================== */

.fin-esparavos-card {
	max-width: 900px;
}

.fin-esparavos-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin-bottom: 28px;
}

@media (max-width: 768px) {
	.fin-esparavos-grid { grid-template-columns: 1fr; }
}

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

.fin-esparavos-col-yes {
	background: #ecfdf580;
	border: 1px solid #d0fae580;
}

.fin-esparavos-col-no {
	background:#fff7ed66;
	border: 1px solid #ffedd44d;
}

.fin-esparavos-col-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--fin-font-body);
	font-weight: 800;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 0 0 16px;
}
.fin-esparavos-col-yes .fin-esparavos-col-title,
.fin-esparavos-col-no .fin-esparavos-col-title {
	color: var(--fin-navy);
	font-family: 'Inter';
    font-weight: 700;
	font-size: 15px;
	
}

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

.fin-esparavos-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-family: var(--fin-font-body);
	font-size: 15px;
	line-height: 1.5;
	color: var(--fin-gray);
}

.fin-esparavos-list svg {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-top: 2px;
}
.fin-esparavos-col-yes svg { color: var(--fin-verde); }
.fin-esparavos-col-no svg { color: var(--fin-coral);  }

/* Ronda 27 (fidelidad desktop): badge circular alrededor del icono check/x del
   titulo de cada columna (yes/no) — el mockup envuelve el icono en un circulo
   de 32px con bg al 10% de opacidad del color de la columna; el real lo tenia
   suelto sin circulo. Ver span.fin-esparavos-col-icon agregado en single-course.php. */
.fin-esparavos-col-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	flex-shrink: 0;
}
.fin-esparavos-col-icon svg { width: 16px; height: 16px; }
.fin-esparavos-col-yes .fin-esparavos-col-icon { background: #0090541a; }
.fin-esparavos-col-no .fin-esparavos-col-icon { background: rgba(242, 186, 156, 0.15); }

.fin-esparavos-cta {
	text-align: center;
}

/* ==========================================================================
   7. INSTRUCTOR
   ========================================================================== */

.fin-instructor-card {
	max-width: 760px;
	display: flex;
	align-items: center;
	gap: 28px;
}

.fin-instructor-photo-wrap {
	flex-shrink: 0;
	position: relative;
	/* Ronda 27 (fidelidad desktop): el mockup inclina la foto -2deg (efecto
	   polaroid). Se habia puesto transform:none en una ronda anterior — se
	   revierte esa decision porque el mockup SI la tiene inclinada. */
	transform: rotate(-2deg);
}

.fin-instructor-photo {
	width: 280px;
	height: 280px;
	border-radius: 12px;
	background: var(--fin-bg-alt);
	border: 1px solid rgba(12, 60, 96, 0.1);
	padding: 12px;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
	display: block;
}

.fin-instructor-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 8px;
	border: 1px solid rgba(12, 60, 96, 0.05);
	display: block;
}

.fin-instructor-name {
	font-family: var(--fin-font-heading);
	font-weight: 700;
	font-size: 26px;
	color: var(--fin-navy);
	margin: 0 0 6px;
}

.fin-instructor-role {
	font-family: var(--fin-font-body);
	font-size: 13px;
	font-weight: 700;
	color: var(--fin-verde-dark);
	margin: 0 0 10px;
}

.fin-instructor-bio {
	font-family: var(--fin-font-body);
	font-size: 15px;
	line-height: 1.6;
	color: var(--fin-gray);
	margin: 0;
}

@media (max-width: 600px) {
	.fin-instructor-card { flex-direction: column; text-align: center; }
	/* Ronda 33 (fidelidad tablet): este valor vivia en el bucket <=768 que
	   mezclaba mobile+tablet -- a 768 el mockup usa 48px (md:text-5xl), solo
	   <640 usa 30px (text-3xl base). Movido aca para no afectar tablet. */
	.fin-cta-final h2 { font-size: 30px; font-weight:700; }
}

/* ==========================================================================
   8. TEMARIO
   ========================================================================== */

.fin-temario-card {
	max-width: 820px;
}

.fin-temario-head h2 {
	margin: 0 0 8px;
}

.fin-temario-hint {
	font-family: var(--fin-font-body);
	font-style: italic;
	font-size: 14px;
	color: var(--fin-gray);
	margin: 0 0 28px;
}

/* Ronda 27 (fidelidad desktop): el mockup es una lista CONTINUA (una sola
   caja exterior redondeada + divisores finos entre filas), no N cajas
   individuales con gap+borde+radius propio como tenia el real. */
.fin-accordion {
	display: flex;
	flex-direction: column;
	border: 1px solid rgba(12, 60, 96, 0.1);
	border-radius: 16px;
	overflow: hidden;
}

.fin-acc-item {
	border-bottom: 1px solid rgba(12, 60, 96, 0.1);
}
.fin-acc-item:last-child {
	border-bottom: none;
}

.fin-acc-header {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 20px;
	background: #ffffff;
	border: none;
	cursor: pointer;
	text-align: left;
	font-family: var(--fin-font-body);
}

.fin-acc-right {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.fin-acc-state {
	font-family: var(--fin-font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: rgba(72, 84, 96, 0.5);
}

.fin-acc-badge {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--fin-navy);
	color: var(--fin-mostaza);
	font-weight: 900;
	font-size: 10px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.fin-acc-title {
	flex: 1;
	min-width: 0;
	font-weight: 700;
	font-size: 15px;
	color: var(--fin-navy);
	overflow-wrap: anywhere;
	word-break: break-word;
}

.fin-acc-chevron {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	color: var(--fin-gray);
	transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1);
}
.fin-acc-item.is-open .fin-acc-chevron {
	transform: rotate(180deg);
	color: var(--fin-verde);
}
/* RONDA 47: restaura mecanismo de expand/collapse animado de Ronda 45, perdido en una tercera regresion del archivo (mismo patron recurrente documentado en Rondas 43/44 -- ver Contexto_Finaurum.md Ronda 47). */
.fin-acc-item.is-open .fin-acc-body {
	opacity: 1;
	padding-top: 4px;
	padding-bottom: 18px;
}

.fin-acc-body {
	padding: 0 20px 0 116px;
	overflow: hidden;
	opacity: 0;
	max-height: 0;
	transition: max-height .32s cubic-bezier(0.4,0,0.2,1), opacity .28s ease, padding-top .32s cubic-bezier(0.4,0,0.2,1), padding-bottom .32s cubic-bezier(0.4,0,0.2,1);
	/* Ronda 27: el mockup tinta el contenido del modulo abierto con el crema
	   de fondo (--fin-bg-alt) en vez de blanco solido — refuerza cual item
	   esta expandido dentro de la lista continua. */
	background: var(--fin-bg-alt);
}

.fin-acc-lesson-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.fin-acc-lesson {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--fin-font-body);
	font-size: 14px;
	color: var(--fin-gray);
}

.fin-acc-lesson svg {
	width: 16px;
	height: 16px;
	color: var(--fin-verde);
	flex-shrink: 0;
}

.fin-temario-resource {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--fin-verde-dark);
	margin-top: 6px;
}

.fin-temario-cta {
	text-align: center;
	margin-top: 28px;
}

/* ==========================================================================
   9. PRECIO
   ========================================================================== */

.fin-precio-card {
	max-width: 640px;
	text-align: center;
	border-top: 5px solid var(--fin-mostaza);
	padding-top: 40px;
}

/* Ronda 9, L3b: el precio conserva una sombra propia mas pesada que el resto de
   las cards (que ahora usan la sombra casi plana de L3) + borde navy/10. Scopeado
   con el mismo prefijo body.single-courses que .fin-card (L3) para igualar
   especificidad y ganarle por orden de aparicion en el archivo (box-shadow). */
body.single-courses .fin-precio-card {
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
	border-color: rgba(12, 60, 96, 0.1);
}

.fin-precio-card h2 {
	font-size: 34px;
	/* R32: 16px, remedido en vivo contra el mockup (heading->subtitulo). */
	margin-bottom: 16px;
	font-weight:700;
}

.fin-precio-subtitle {
	font-family: var(--fin-font-body);
	/* R31: remedido en vivo -- 16px, no 15px. A 576px de ancho, 15px alcanzaba
	   a entrar en 1 sola linea (el mockup, a 16px, wrapea a 2) -- sin este
	   ajuste el max-width solo no bastaba para igualar el wrap real. */
	font-size: 16px;
	color: var(--fin-gray);
	margin: 0 0 28px;
}

.fin-precio-amount-row {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
}

.fin-precio-usd {
	font-family: var(--fin-font-heading);
	font-weight: 700;
	font-size: 44px;
	color: var(--fin-navy);
}

.fin-precio-tag {
	font-family: var(--fin-font-body);
	font-weight: 800;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	/* Ronda 27 (fidelidad desktop): mockup usa gray al 50% de opacidad (mas
	   tenue), no el gris solido — texto "· PAGO ÚNICO" con el separador
	   agregado en course-entry-box.php. */
	color: rgba(72, 84, 96, 0.5);
}

.fin-precio-ars {
	font-family: var(--fin-font-body);
	font-size: 15px;
	/* Ronda 27 (fidelidad desktop): mockup muestra el ARS en navy, no en verde
	   — confirmado con getComputedStyle en el mockup (rgb(12,60,96)). */
	color: var(--fin-navy);
	font-weight: 700;
	/* R32: 8px, remedido en vivo (precio->ARS). */
	margin: 8px 0 0;
}

.fin-precio-disclaimer {
	font-family: var(--fin-font-body);
	font-size: 13px;
	color: var(--fin-gray);
	margin: 18px auto 0;
	/* R31: remedido en vivo contra el mockup -- max-w-xl real es 576px, no
	   440px (numero anterior sin remedir). */
	max-width: 576px;
}

.fin-precio-cta {
	width: 100%;
	margin-top: 24px;
	font-size: 18px;
	padding: 20px;
}

.fin-precio-checklist-label {
	font-family: var(--fin-font-body);
	font-weight: 800;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--fin-navy);
	margin: 32px 0 16px;
}

.fin-precio-checklist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 28px;
}

.fin-precio-checklist li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--fin-font-body);
	font-size: 13px;
	color: var(--fin-gray);
}

.fin-precio-checklist svg {
	width: 16px;
	height: 16px;
	color: var(--fin-verde);
	flex-shrink: 0;
}

.fin-precio-help {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px dashed rgba(12, 60, 96, 0.15);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap;
}

.fin-precio-help p {
	font-family: var(--fin-font-body);
	font-size: 14px;
	color: var(--fin-gray);
	margin: 0;
}

.fin-precio-help .fin-btn {
	padding: 10px 22px;
	font-size: 13px;
}

/* ==========================================================================
   10. FAQ
   ========================================================================== */

.fin-faq-card {
	max-width: 760px;
}

.fin-faq-card h2 {
	margin-bottom: 24px;
}

body.single-courses .fin-faq-question {
	border-bottom: 1px solid #0c3c600d;
	padding:24px;
}
.fin-faq-item:last-child { border-bottom: none; }

.fin-faq-question {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 4px;
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
	font-family: var(--fin-font-body);
	font-weight: 700;
	font-size: 15px;
	color: var(--fin-navy);
}

/* Certificacion R9 — residual encontrado en vivo: el <span> de la pregunta
   heredaba white-space:nowrap (UA stylesheet de <button>), desbordando el
   texto largo fuera del viewport a 375px (causaba scroll horizontal de toda
   la pagina, .fin-float-cta corrido fuera de pantalla como sintoma). Fix:
   permitir wrap + que el item de flex pueda encogerse. */
.fin-faq-question > span:not(.fin-faq-chevron):not(.fin-faq-icon) {
	flex: 1 1 auto;
	min-width: 0;
	white-space: normal;
}

.fin-faq-question > span:not(.fin-faq-chevron):not(.fin-faq-icon):hover{
	color:#0c3c60;
}

/* Ronda 27 (fidelidad desktop): icono "?" circular mostaza antes de cada
   pregunta — presente en el mockup, ausente en el real (texto plano). */
.fin-faq-icon {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	color: var(--fin-mostaza);
}

.fin-faq-chevron {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	color: var(--fin-gray);
	transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1);
}
.fin-faq-item.is-open .fin-faq-chevron { transform: rotate(180deg); }
/* RONDA 47: idem restauracion Ronda 45 (ver .fin-acc-body arriba). */
.fin-faq-item.is-open .fin-faq-answer {
	opacity: 1;
	padding-top: 8px;
	padding-bottom: 24px;
}

.fin-faq-answer {
	padding: 0 24px 0 60px;
	font-family: var(--fin-font-body);
	font-size: 14px;
	line-height: 1.6;
	color: #485460cc;
	background-color:#faf5ec73;
	border-bottom: 1px solid #0c3c600d;
	overflow: hidden;
	opacity: 0;
	max-height: 0;
	transition: max-height .32s cubic-bezier(0.4,0,0.2,1), opacity .28s ease, padding-top .32s cubic-bezier(0.4,0,0.2,1), padding-bottom .32s cubic-bezier(0.4,0,0.2,1);
}

button.fin-faq-question:hover, [type=button]:focus:not(:focus-visible), [type=submit]:focus:not(:focus-visible), button:focus:not(:focus-visible){
	color:#0c3c60;
}

/* ==========================================================================
   11. CTA FINAL + footer link
   ========================================================================== */

.fin-cta-final {
	text-align: center;
	background: linear-gradient(180deg, var(--fin-bg-alt), var(--fin-bg));
}

.fin-cta-final h2 {
	font-size: 48px;
	font-weight: 700;
	margin: 0 0 8px;
}

.fin-cta-final-italic {
	display: block;
	/* Ronda 27 (fidelidad desktop): fit-content + margin auto para que, al
	   combinarse con .fin-underline (agregada en single-course.php), el
	   subrayado mostaza (width:100% relativo a ESTE elemento) quede justo
	   debajo del texto "no la próxima." y no estirado a todo el ancho de la
	   seccion. */
	width: fit-content;
	margin: 0 auto;
	font-family: var(--fin-font-heading);
	font-style: italic;
	font-weight: 400;
	color: var(--fin-verde-dark);
}

.fin-cta-final .fin-btn {
	margin-top: 28px;
	padding: 20px 44px;
	font-size: 18px;
}

/* ==========================================================================
   12. FOOTER — bloque self-contained de la landing de curso (Ronda 4).
   Reemplaza el link suelto "Ver todos los cursos". Todo el estilo esta
   scoped a .fin-course-footer para que el bloque completo se pueda mover
   tal cual al footer global de Elementor mas adelante sin arrastrar reglas
   sueltas.
   ========================================================================== */

.fin-course-footer {
	background: var(--fin-navy);
	padding: 56px 24px 40px;
}

.fin-course-footer-inner {
	max-width: 1100px;
	margin: 0 auto;
}

.fin-course-footer-accent {
	display: block;
	width: 48px;
	height: 3px;
	border-radius: 2px;
	background: var(--fin-verde);
	margin: 0 0 24px;
}

.fin-course-footer-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

.fin-course-footer-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--fin-font-body);
	font-weight: 800;
	font-size: 14px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--fin-verde);
	text-decoration: none;
	transition: opacity .15s ease;
}
.fin-course-footer-back:hover { opacity: 0.8; }

.fin-course-footer-legal {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.fin-course-footer-legal a {
	font-family: var(--fin-font-body);
	/* R31: remedido en vivo contra el mockup -- 11px, no 14px. */
	font-size: 11px;
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
}
.fin-course-footer-legal a:hover {
	color: #ffffff;
	text-decoration: underline;
}

.fin-course-footer-legal span {
	color: rgba(255, 255, 255, 0.4);
	font-size: 13px;
}

.fin-course-footer-divider {
	height: 1px;
	background: rgba(255, 255, 255, 0.12);
	margin: 28px 0;
}

.fin-course-footer-row-bottom {
	align-items: flex-start;
}

.fin-course-footer-copy {
	font-family: var(--fin-font-body);
	/* R31: remedido en vivo contra el mockup -- 10px, no 13px. */
	font-size: 10px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.65);
	margin: 0;
	max-width: 480px;
}

.fin-course-footer-disclaimer {
	font-family: var(--fin-font-body);
	font-style: italic;
	/* R31: remedido en vivo contra el mockup -- 10px, no 13px. */
	font-size: 10px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.5);
	margin: 0;
	max-width: 480px;
	text-align: right;
}

@media (max-width: 768px) {
	.fin-course-footer {
		padding: 40px 20px 32px;
	}
}

/* Ronda 33 (fidelidad tablet): el bloque de arriba forzaba column+left-align
   en TODO <=768, pero el mockup mantiene fila (sm:flex-row / md:flex-row) en
   el rango tablet (640-1023px) -- solo colapsa a columna debajo de eso.
   Estas reglas quedan acotadas a mobile real (<=600) para no romper tablet. */
@media (max-width: 600px) {
	.fin-course-footer-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}
	.fin-course-footer-row-bottom {
		gap: 12px;
	}
	.fin-course-footer-copy,
	.fin-course-footer-disclaimer {
		max-width: 100%;
		text-align: left;
	}
}

/* Ronda 33 (fidelidad tablet, 601-1023px): fila restaurada (hereda de la
   regla base .fin-course-footer-row, display:flex sin flex-direction propio
   = row). .fin-course-footer-copy necesita angostarse para convivir con
   .fin-course-footer-disclaimer -- ambos a max-width:480px (valor desktop,
   R31) no entran juntos en un contenedor de ~728px. Medido en vivo contra
   el mockup a 768px: copy ~230px / disclaimer ~470px de un total ~705px. */
@media (min-width: 601px) and (max-width: 1023px) {
	.fin-course-footer-copy {
		max-width: 200px;
	}
	.fin-course-footer-disclaimer {
		max-width: 420px;
	}
}

/* Ronda 9, L2b (ajustado en Certificacion R9): el mockup mide 30px reales
   (confirmado via getComputedStyle en vivo, Chrome DevTools MCP) para estos
   3 headings (Es para vos / Temario / FAQ) — se afino de 32px (valor literal
   del diff original) a 30px (valor medido real del mockup). */
.fin-esparavos-card h2,
.fin-temario-head h2,
.fin-faq-card h2 {
	font-size: 30px;
	font-weight:700;
}

/* ==========================================================================
   Responsive general — escala de secciones en mobile (375)
   ========================================================================== */

@media (max-width: 768px) {
	.fin-course-section { padding: 48px 20px; }
	.fin-course-nav { padding: 16px 20px; }
	.fin-precio-card { padding-top: 28px; }
	.fin-precio-usd { font-size: 36px; }
	.fin-testimonial-card { flex-basis: 260px; }
}

@media (max-width: 480px) {
	.fin-course-hero h1.fin-h1 { font-size: 32px; }
	.fin-course-porque h2,
	.fin-temario-head h2,
	.fin-faq-card h2 { font-size: 26px !important; }
}

/* ==========================================================================
   RONDA 28 (2026-07-24) — Deltas estructurales grandes vs mockup, DESKTOP
   1440px. Ver Contexto_Finaurum.md Ronda 28 para el detalle punto por punto.
   Todo scopeado a body.single-courses / clases .fin-course-* exclusivas de
   este template — cero riesgo de regresion sobre dashboard/checkout/
   thank-you/player.
   ========================================================================== */

/* --------------------------------------------------------------------------
   R28.1 — Ancho de card unificado: las 6 cards de contenido (Por que este
   curso, Es para vos, Instructor, Temario, Precio, FAQ) a 832px, centradas
   (heredan margin:0 auto de .fin-course-container). Gana por especificidad
   sobre los max-width sueltos definidos mas arriba en este mismo archivo.
   -------------------------------------------------------------------------- */
body.single-courses .fin-course-porque,
body.single-courses .fin-esparavos-card,
body.single-courses .fin-instructor-card,
body.single-courses .fin-temario-card,
body.single-courses .fin-precio-card,
body.single-courses .fin-faq-card {
	max-width: 832px;
}

/* --------------------------------------------------------------------------
   R28.2 — Divisores ornamentales SVG (mostaza ondulado punteado) entre
   secciones. Markup: finaurum_course_divider() en tutor/single-course.php.
   -------------------------------------------------------------------------- */
.fin-course-divider {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 72px;
	background: var(--fin-bg-alt);
	margin: -36px 0;
	position: relative;
	z-index: 1;
}
.fin-course-divider svg {
	display: block;
}

/* --------------------------------------------------------------------------
   R28.4 — "Es para vos": bloques apilados a ancho completo (columna unica),
   no 2 columnas lado a lado.
   -------------------------------------------------------------------------- */
body.single-courses .fin-esparavos-grid {
	grid-template-columns: 1fr;
	gap: 24px;
}

/* --------------------------------------------------------------------------
   R28.5 — Precio: barra mostaza superior solida (pseudo-elemento, sin tocar
   markup). Reemplaza el border-top de 5px por una barra de 8px que respeta
   el border-radius de la card (overflow:hidden en el contenedor).
   -------------------------------------------------------------------------- */
body.single-courses .fin-precio-card {
	border-top: none;
	position: relative;
	overflow: hidden;
}
body.single-courses .fin-precio-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 8px;
	background: var(--fin-mostaza);
}

/* --------------------------------------------------------------------------
   R28.6 — Precio: tipografia.
   -------------------------------------------------------------------------- */
body.single-courses .fin-precio-tag {
	font-size: 18px;
	font-weight:700;
}
body.single-courses .fin-precio-ars {
	font-family: var(--fin-font-heading);
	font-size: 22px;
	font-weight: 700;
}
body.single-courses .fin-precio-usd {
	font-weight: 700 !important;
	letter-spacing: -1.15px;
}

/* --------------------------------------------------------------------------
   R28.7 — "Por que este curso": es CSS, no copy. Alineado a la izquierda,
   tamanos reducidos + acento mostaza corto bajo el heading.
   -------------------------------------------------------------------------- */
body.single-courses .fin-course-porque {
	text-align: left;
}
body.single-courses .fin-course-porque h2 {
	text-align: left;
	font-size: 24px;
	font-weight:700;
	padding-bottom: 16px;
}
body.single-courses .fin-course-porque h2::after {
	content: "";
	display: block;
	width: 48px;
	height: 4px;
	border-radius: 2px;
	background: var(--fin-mostaza);
	margin-top: 12px;
}
body.single-courses .fin-course-porque p {
	text-align: left;
	font-size: 18px;
}

/* --------------------------------------------------------------------------
   R28.8 — Testimonios: cita en italica, avatar uniforme mostaza/20%, card en
   columna con el autor empujado a la base, ancho de card 350px.
   -------------------------------------------------------------------------- */
body.single-courses .fin-testimonial-card {
	flex: 0 0 350px;
	display: flex;
	flex-direction: column;
}
body.single-courses .fin-testimonial-quote {
	font-style: italic;
}
body.single-courses .fin-testimonial-avatar {
	width: 32px;
	height: 32px;
	background-color: rgba(246, 204, 18, 0.2) !important;
	color: var(--fin-navy);
}
body.single-courses .fin-testimonial-author {
	margin-top: auto;
}
body.single-courses .fin-testimonial-card:hover {
	box-shadow: 0 4px 12px rgba(12, 60, 96, 0.1);
	border: 1px solid rgba(246, 204, 18, 0.25);
}

/* --------------------------------------------------------------------------
   R28.9 — Temario: titulos de modulo en Playfair Display 17px, fila mas alta.
   -------------------------------------------------------------------------- */
body.single-courses .fin-acc-title {
	font-family: var(--fin-font-heading);
	font-size: 17px;
}
body.single-courses .fin-acc-header {
	padding: 24px 20px;
}

/* --------------------------------------------------------------------------
   R28.10 — Header/logo: badge "F" 40px anillo navy + arco mostaza sup-der,
   contenedor centrado 1240px (x=125), sub agrandado, punto mostaza.
   -------------------------------------------------------------------------- */
body.single-courses .fin-course-nav {
	display: block;
	padding: 0;
	box-shadow: 0 1px 3px rgba(12, 60, 96, 0.06);
}
body.single-courses .fin-course-nav-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	max-width: 1240px;
	margin: 0 auto;
	padding: 20px 25px;
	flex-wrap: wrap;
}
body.single-courses .fin-course-nav-logo-icon {
	width: 40px;
	height: 40px;
	border: 2px solid var(--fin-navy);
	border-top: 4px solid var(--fin-mostaza);
	border-right: 4px solid var(--fin-mostaza);
	font-size: 16px;
}
body.single-courses .fin-course-nav-logo-sub {
	font-size: 16px;
	letter-spacing: 1.6px;
}
body.single-courses .fin-course-nav-logo-dot {
	color: var(--fin-mostaza);
}
body.single-courses .fin-course-nav-links a:hover {
	color: var(--fin-navy);
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   R28.11 — Hero: 2 blobs difuminados (mostaza arriba-derecha, verde
   abajo-izquierda) reemplazando el radial-gradient simetrico anterior.
   -------------------------------------------------------------------------- */
body.single-courses .fin-course-hero {
	background: none;
	position: relative;
	overflow: hidden;
}
body.single-courses .fin-course-hero::before,
body.single-courses .fin-course-hero::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	filter: blur(64px);
	pointer-events: none;
	z-index: 0;
}
body.single-courses .fin-course-hero::before {
	width: 450px;
	height: 450px;
	top: 10%;
	right: 10%;
	background: rgba(246, 204, 18, 0.05);
}
body.single-courses .fin-course-hero::after {
	width: 350px;
	height: 350px;
	bottom: 5%;
	left: 5%;
	background: rgba(0, 144, 84, 0.05);
}
body.single-courses .fin-course-hero-inner {
	position: relative;
	z-index: 1;
}

/* ==========================================================================
   RONDA 28 — Importantes (🟡), implementados junto con los bloqueantes por
   ser CSS-only de bajo riesgo.
   ========================================================================== */

/* Subrayado a mano: de bloque relleno a trazo (stroke), mas organico. */
body.single-courses .fin-underline::after {
	height: 10px;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%2010'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,5%20Q30,10%2060,3%20Q85,-2%20100,5'%20fill='none'%20stroke='%23f6cc12'%20stroke-width='4'/%3E%3C/svg%3E");
}

/* H1: 62px -> 68px (letter-spacing en em ya escala solo: -1.55px -> -1.7px). */
body.single-courses .fin-course-hero h1.fin-h1 {
	font-size: 68px;
	font-weight:700;
}

/* Temario / FAQ: separador bajo el heading de seccion. */
body.single-courses .fin-temario-head h2 {
	padding-bottom: 16px;
	border-bottom: 1px solid rgba(12, 60, 96, 0.05);
}
body.single-courses .fin-faq-card h2 {
	padding-bottom: 16px;
	border-bottom: 1px solid rgba(12, 60, 96, 0.05);
}

/* FAQ: contenedor propio (border + rounded-2xl) que enmarca las 8 filas,
   separado de la card exterior. Markup: div.fin-faq-list en single-course.php. */
body.single-courses .fin-faq-list {
	border: 1px solid rgba(12, 60, 96, 0.1);
	border-radius: 16px;
	overflow: hidden;
}
body.single-courses .fin-faq-list .fin-faq-item:last-child {
	border-bottom: none;
}
body.single-courses .fin-faq-question {
	padding: 24px;
}
body.single-courses .fin-faq-question:hover {
	background-color: rgba(250, 250, 250, 0.5);
}

/* Hover CTA: de translateY+sombra verde a scale sutil + sombra neutra
   (scopeado a la landing de curso — .fin-btn-primary es token GLOBAL,
   no se toca fuera de body.single-courses). */
body.single-courses .fin-btn-primary:hover {
	transform: scale(1.02);
	box-shadow: 0 8px 20px rgba(12, 60, 96, 0.18);
}

/* CTA final: fondo plano en vez de gradiente. */
body.single-courses .fin-cta-final {
	background: rgb(250, 244, 237);
	border-top:1px solid #0c3c601a;
}

/* Acordeon: opacidad de divisores 0.1 -> 0.05. */
body.single-courses .fin-accordion {
	border-color: rgba(12, 60, 96, 0.05);
}
body.single-courses .fin-acc-item {
	border-bottom-color: rgba(12, 60, 96, 0.05);
}


/* --------------------------------------------------------------------------
   RONDA 29 (fidelidad desktop): fix bandas blancas entre secciones +
   ritmo vertical. El divisor ahora comparte el fondo crema de las secciones
   adyacentes (antes: transparent -> quedaba como banda blanca sobre
   --fin-bg #fdfdfd) y usa margin negativo para no sumar altura extra al
   gap normal de 144px (72+72 de padding) cuando hay un divisor de por medio
   -- el mockup mantiene ~144px de gap con o sin divisor, el SVG solo 'flota'
   sobre el crema continuo, no empuja el layout.
   -------------------------------------------------------------------------- */
body.single-courses #fin-precio {
	padding-bottom: 32px;
}
body.single-courses #fin-faq {
	padding-top: 32px;
}


/* --------------------------------------------------------------------------
   RONDA 29 P1: pill de acceso, checklist grid 2 columnas + colores mixtos,
   bloque de dudas con 2da linea + layout space-between, CTA final (color
   navy + blob mostaza), punto mostaza del H1, subtitulo de Testimonios,
   cinta+flecha decorativas del Instructor. Todo scopeado a body.single-courses.
   -------------------------------------------------------------------------- */

body.single-courses .fin-precio-access-pill {
	display: inline-block;
	font-family: var(--fin-font-body);
	font-size: 13px;
	font-weight: 700;
	color: var(--fin-verde);
	background: rgba(0, 144, 84, 0.05);
	border: 1px solid rgba(0, 144, 84, 0.1);
	border-radius: 999px;
	padding: 6px 14px;
	letter-spacing: 0.01em;
	margin: 4px 0 0;
	max-width: 460px;
}

body.single-courses .fin-precio-checklist-wrap {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid rgba(12, 60, 96, 0.05);
}

body.single-courses .fin-precio-checklist-wrap .fin-precio-checklist-label {
	margin: 0 0 16px;
	text-align: center;
}

body.single-courses .fin-precio-checklist {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px 24px;
	text-align: left;
	max-width: 448px;
	margin: 0 auto;
}

body.single-courses .fin-precio-checklist li {
	font-size: 12px;
	gap: 10px;
}

body.single-courses .fin-precio-checklist li svg {
	color: var(--fin-ci-color, var(--fin-verde));
}

body.single-courses .fin-precio-help {
	justify-content: space-between;
	text-align: left;
	flex-wrap: wrap;
}

body.single-courses .fin-precio-help-text {
	flex: 1 1 auto;
}

body.single-courses .fin-precio-help-title {
	font-family: var(--fin-font-body);
	font-weight: 700;
	font-size: 15px;
	color: var(--fin-navy);
	margin: 0 0 4px;
}

body.single-courses .fin-precio-help-desc {
	font-family: var(--fin-font-body);
	font-size: 12px;
	color: var(--fin-gray);
	margin: 0;
}

body.single-courses .fin-cta-final-italic {
	color: var(--fin-navy);
}

body.single-courses .fin-cta-final {
	position: relative;
	overflow: hidden;
}

body.single-courses .fin-cta-final::before {
	content: '';
	position: absolute;
	top: 20%;
	left: 5%;
	width: 350px;
	height: 350px;
	border-radius: 50%;
	background: rgba(246, 204, 18, 0.2);
	filter: blur(64px);
	pointer-events: none;
	z-index: 0;
}

body.single-courses .fin-cta-final > * {
	position: relative;
	z-index: 1;
}

body.single-courses .fin-h1-dot {
	color: var(--fin-mostaza);
}

body.single-courses .fin-testimonios-subtitle {
	text-align: center;
	font-family: var(--fin-font-body);
	font-size: 16px;
	color: #485460b3;
	max-width: 620px;
	margin: -28px auto 44px;
}

body.single-courses .fin-instructor-ribbon {
	position: absolute;
	top: -16px;
	left: 50%;
	transform: translateX(-50%) rotate(12deg);
	width: 64px;
	height: 20px;
	background: rgba(246, 204, 18, 0.3);
	border: 1px solid rgba(246, 204, 18, 0.2);
	z-index: 20;
}

body.single-courses .fin-instructor-arrow {
	position: absolute;
	left: -24px;
	bottom: -24px;
	width: 41px;
	height: 41px;
	color: var(--fin-mostaza);
	z-index: 5;
}

/* ==========================================================================
   RONDA 30 (2026-07-25) — Pulido cosmetico final DESKTOP (1440px), post-QA
   independiente sobre Rondas 27-29 (0 bloqueantes). Deltas puramente CSS
   (salvo el path del divisor y el nombre/rol de 2 testimonios, en PHP). Todo
   scopeado a body.single-courses / clases .fin-course-*, cero riesgo sobre
   dashboard/checkout/thank-you/player.
   ========================================================================== */

/* R30.1 (corregido R31, 2026-07-25) — Precio: CTA primario. R30 asumio
   "width:auto" (pill que se ajusta al contenido) sin remedir el mockup en
   vivo -- termino midiendo 373px real. Remedido ahora contra el mockup real
   (getBoundingClientRect en vivo): el boton del mockup es w-full DENTRO de
   un wrapper max-w-md=448px, o sea ancho FIJO 448px, no un pill auto-width.
   Padding tambien remedido: 18px 32px (no 20px 48px). */
body.single-courses .fin-precio-cta {
	width: 448px;
	padding: 18px 32px;
	/* R32: 52px, remedido en vivo (disclaimer->CTA). */
	margin-top: 52px;
}

/* R30.2 — Instructor: escala tipografica agrandada. */
body.single-courses .fin-instructor-name {
	font-size: 36px;
	font-weight: 700;
}
body.single-courses .fin-instructor-role {
	font-size: 15px;
	color: var(--fin-verde);
}
body.single-courses .fin-instructor-bio {
	font-size: 17px;
	line-height: 28.9px;
}

/* R30.3 — Precio: gradiente sutil del card (blanco -> crema), de arriba a
   abajo. */
body.single-courses .fin-precio-card {
	background: linear-gradient(180deg, #ffffff 0%, var(--fin-bg-alt) 100%);
}

/* R30.4 (corregido R31, 2026-07-25) — Precio: ritmo interno real del mockup
   es 32px UNIFORME (Tailwind space-y-8 entre los hijos directos del card),
   remedido en vivo con getBoundingClientRect entre los 6 bloques
   consecutivos del mockup -- NO 48px como asumio R30 (numero de memoria,
   nunca remedido contra el mockup real esa ronda). De paso se agregan los
   max-width que le faltaban a 3 bloques para que el ancho tambien coincida
   con el mockup (remedido elemento por elemento, no todos usan el mismo):
   subtitulo y fila de dudas = max-w-xl (576px); wrap de "el curso incluye"
   = max-w-xl (576px) por fuera, el grid interno ya estaba OK en max-w-md
   (448px, sin cambios). */
/* R32 (2026-07-25): ritmo interno YA NO es uniforme -- el mockup usa gaps
   variables por padding especifico de cada bloque (py-4 precio, py-2
   disclaimer, pt-3/pb-4 wrapper CTA), remedido boundary a boundary con
   getBoundingClientRect contra el mockup en vivo. R30.4/R31 asumieron
   32px parejo -- incorrecto. help se deja en 32px (unico boundary que
   ya estaba bien). */
body.single-courses .fin-precio-subtitle {
	margin-bottom: 48px;
	max-width: 576px;
	margin-left: auto;
	margin-right: auto;
}
body.single-courses .fin-precio-access-pill {
	margin-top: 20px;
}
body.single-courses .fin-precio-disclaimer {
	margin-top: 56px;
}
body.single-courses .fin-precio-checklist-wrap {
	margin-top: 48px;
	max-width: 576px;
	margin-left: auto;
	margin-right: auto;
}
body.single-courses .fin-precio-help {
	margin-top: 32px;
	max-width: 576px;
	margin-left: auto;
	margin-right: auto;
}

/* R30.5/6 — Divisores: path SVG corregido en PHP (finaurum_course_divider(),
   2 ondas largas con cola en vez de 4 parejas) + onda bajada 28px dentro de
   su slot (translateY no afecta el flujo -- el contenedor flex sigue del
   mismo alto, la onda queda pegada al card de abajo: 80px arriba / 24px
   abajo en vez de 52/52). */
body.single-courses .fin-course-divider svg {
	transform: translateY(28px);
}

/* R30.7 — Nav: links con menos peso visual. El hover NO se toca (ya estaba
   bien: navy + underline). */
body.single-courses .fin-course-nav-links {
	gap: 24px;
}
body.single-courses .fin-course-nav-links a {
	font-weight: 500;
	color: rgba(12, 60, 96, 0.8);
}

/* R31 (2026-07-25) — Hero: el mockup tiene UN SOLO CTA en el hero ("Quiero
   el curso"); el real tiene 2 (+ "Ver mas", que hace scroll a #fin-temario).
   Decision por defecto del pedido: paridad visual con el mockup gana --
   se oculta el 2do boton via CSS (sin tocar el PHP/markup, sigue existiendo
   en el DOM por si se decide reactivar). Documentado como decision
   consciente, no como bug. */
body.single-courses .fin-course-hero-actions .fin-btn-secondary {
	display: none;
}

/* R30.8 — Hero: tipografia + card de video. */
body.single-courses .fin-course-hero-tagline {
	font-size: 22px;
	color: var(--fin-gray);
}
body.single-courses .fin-course-hero-hook {
	font-size: 21px;
}
body.single-courses .fin-course-video-wrap {
	max-width: 944px;
}
body.single-courses .fin-course-video {
	border-radius: 28px;
	border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   RONDA 30 — Opcionales (🟢), bajo impacto, agrupados en el mismo lote por
   ser CSS-only. Se omite deliberadamente el opcional de "borde sutil en las
   juntas de secciones alternas": el fondo crema continuo entre secciones es
   un bloqueante YA CERRADO en Ronda 29 -- agregar un borde ahi es el patron
   exacto que rompio ese fix la primera vez, no vale el riesgo por un
   opcional de impacto minimo.
   ========================================================================== */

/* Temario: hover de fila de modulo. */
body.single-courses .fin-acc-header:hover {
	background-color: rgba(250, 245, 236, 0.5);
}

/* Temario: panel abierto -- opacidad del fondo crema mas tenue (100% -> 40%). */
body.single-courses .fin-acc-body {
	background: rgba(250, 245, 236, 0.4);
}

/* Temario: hint sin italica. */
body.single-courses .fin-temario-hint {
	font-style: normal;
	margin-top:15px;
}

/* Precio: separador del bloque de dudas, dashed -> solid (el del checklist
   ya era solid desde Ronda 29, no se toca). */
body.single-courses .fin-precio-help {
	border-top-style: solid;
}

/* Footer: quitar la barra verde decorativa (no existe en el mockup);
   contenedor 1100 -> 1240. */
body.single-courses .fin-course-footer-accent {
	display: none;
}
/* R32: + padding 0 32px -- caja de CONTENIDO renderizada del mockup es
   1176px (1240 max-width menos 64 de px-8), no 1240 pleno. max-width NO se
   toca (ya estaba correcto desde R30), se agrega el padding que faltaba. */
body.single-courses .fin-course-footer-inner {
	max-width: 1240px;
	padding: 0 32px;
}

/* CTA final: padding vertical 72 -> 96. */
body.single-courses .fin-cta-final {
	padding-top: 96px;
	padding-bottom: 96px;
}


/* ==========================================================================
   RONDA 33 (2026-07-25) -- Fidelidad TABLET (768px), curso Tu plata bajo
   control. Ver Contexto_Finaurum.md Ronda 33 para el detalle punto por punto.
   Reinsertado al final del archivo (no en su posicion original cerca del Hero)
   porque .fin-course-hero h1.fin-h1 tiene un override de mayor especificidad
   (body.single-courses ..., R28) y .fin-testimonios h2.fin-h2 tiene un
   override de igual especificidad pero definido mas abajo en el archivo (L378)
   -- en ambos casos una regla nueva puesta 'cerca' de la seccion pierde la
   cascada en vez de ganarla. Poner los overrides de tablet al final del
   archivo (o igualar la especificidad + quedar despues) es el patron seguro
   en este CSS append-only.
   ========================================================================== */
@media (min-width: 641px) and (max-width: 1023px) {
	body.single-courses .fin-course-hero h1.fin-h1 { font-size: 52px; }
	.fin-testimonios h2.fin-h2 { font-size: 46px; font-weight:700 }
}


/* ==========================================================================
   RONDA 34 (2026-07-25) -- Fidelidad TABLET (768px), curso Tu plata bajo
   control. QA independiente encontro que Ronda 33 corrigio 4 deltas de
   tipografia/footer pero NO audito el espaciado del layout (gap vertical
   entre cards, inset lateral, padding de Hero/Testimonios/Footer), que es
   donde estaba el dano real. Ver Contexto_Finaurum.md Ronda 34 para el
   detalle punto por punto. Reglas nuevas, no se toco ninguna regla previa
   (patron seguro en este CSS append-only: selectores nuevos con igual o
   mayor especificidad, insertados al final, ganan la cascada sin tocar
   las reglas de mobile/desktop ya validadas).
   ========================================================================== */

/* R34.1/R34.2 -- Gap vertical entre cards (96->144) + inset lateral/ancho de
   card (x20/w728 -> x24/w720). Ambos blockers comparten la MISMA causa raiz:
   .fin-course-section tenia padding:48px 20px en el bucket viejo <=768
   (Ronda temprana, mobile+tablet mezclados). Se restaura el valor DESKTOP
   (72px 24px, que es igual al del mockup en tablet) solo para el rango
   tablet real (601-1023px) -- el bucket viejo <=768 sigue intacto para
   mobile (<=600) y para las otras propiedades que comparte (.fin-course-nav,
   .fin-precio-card, .fin-precio-usd, .fin-testimonial-card), que NO son
   parte de este pedido y no se tocan. Los 2 overrides ID existentes
   (#fin-precio{padding-bottom:32px}, #fin-faq{padding-top:32px}, R29,
   incondicionales) siguen ganando por especificidad y preservan el gap
   corto de 64px entre Precio y FAQ sin cambios. */
@media (min-width: 601px) and (max-width: 1023px) {
	.fin-course-section { padding: 72px 24px; }
}

/* R34.3 -- Hero: el H1 arranca en y=139 real vs y=176 mockup (remedido en
   vivo a 768px). hero_top real ~83px (estructural, no se toca) + padding-top
   93px = y=176. Solo se toca padding-top (longhand) para no alterar
   padding-bottom/horizontal del bucket viejo <=768 (40px/20px, sin cambios). */
@media (min-width: 601px) and (max-width: 1023px) {
	.fin-course-hero { padding-top: 93px; }
}

/* R34.4 -- Testimonios: H2 a 48px del tope real vs 81px mockup (remedido en
   vivo). El fix general de R34.1 ya deja la seccion en 72px (mismo patron
   que desktop, que tiene el mismo residual de 9px sin cerrar -- 72 vs 81 --
   documentado y aceptado desde antes). Se agrega un ajuste puntual por ID
   (mayor especificidad que .fin-course-section) para cerrar el delta
   completo solo en Testimonios, sin heredar el residual de desktop. */
@media (min-width: 601px) and (max-width: 1023px) {
	#fin-testimonios { padding-top: 81px; }
}

/* R34.5 -- Footer: inset lateral x52 real vs x24 mockup (Δ28px/lado) +
   padding vertical 40/32 real vs 56/56 mockup (remedido en vivo). En
   desktop ambos coinciden en x=125, o sea que es especifico de tablet.
   El inset real de 52px sale de 2 capas apiladas: .fin-course-footer
   (20px, bucket viejo <=768) + .fin-course-footer-inner (32px, R32,
   incondicional -- valor correcto para DESKTOP, no tocar fuera de este
   rango). Fix: outer a 0px lateral + inner a 24px lateral SOLO en el rango
   tablet (601-1023px) -- total 24px, igual al mockup. Vertical: 56px
   parejo arriba/abajo (outer, shorthand completo -- gana entero sobre el
   bucket viejo <=768 para este rango por ser posterior en el archivo). */
@media (min-width: 601px) and (max-width: 1023px) {
	.fin-course-footer { padding: 56px 0; }
	body.single-courses .fin-course-footer-inner { padding: 0 24px; }
}

/* R34.7 -- Marco interior mostaza del video card: el mockup tiene un div
   decorativo (border border-brand-mostaza/10, inset 2.5% via scale-95,
   radius igual al contenedor) que el real no tenia en NINGUN breakpoint
   (incluido desktop). Fix via pseudo-elemento unico, sin media query --
   mismo elemento en los 2 breakpoints, .fin-course-video ya tiene
   position:relative + overflow:hidden (base, linea 314-318) asi que no
   hace falta tocar nada mas. inset:2.5% escala proporcional al alto/ancho
   real del contenedor en cada breakpoint (equivalente al scale-95 del
   mockup), sin necesidad de valores distintos por media query. */
body.single-courses .fin-course-video::after {
	content: "";
	position: absolute;
	inset: 2.5%;
	border-radius: 24px;
	border: 1px solid rgba(246, 204, 18, 0.1);
	pointer-events: none;
}

/* ==========================================================================
   RONDA 36 (2026-07-25) -- Hero CTA: paridad tipografica con el boton del
   mockup (weight/size/padding), y subtitulo con el mismo max-width que el
   mockup para reproducir el corte de linea en 2 lineas ("...presupuestos y"
   / "activar el ahorro real"). Boton scopeado SOLO al CTA primario del Hero
   (.fin-course-hero-actions) -- .fin-btn-primary es token GLOBAL usado en
   Precio / CTA final / nav, no se toca fuera de ese contenedor.
   ========================================================================== */
body.single-courses .fin-course-hero-actions .fin-btn-primary {
	font-size: 16px;
	font-weight: 700;
	padding: 16px 40px;
}

body.single-courses .fin-course-hero-tagline {
	max-width: 672px;
	margin-left: auto;
	margin-right: auto;
}


/* ==========================================================================
   RONDA 44 (2026-07-25) -- FAQ: padding movil + restauracion del fix de
   bug magenta en doble-click (perdido por una regresion post-Ronda-43: el
   archivo vivo volvio a un estado anterior a las Rondas 41-43 -- confirmado
   por lectura forense, md5 pre-r44 = d783c651fe9434c579d653cb9aa8a6d7, sin
   ::selection ni user-select:none en .fin-acc-header/.fin-faq-question, y
   .fin-acc-body de vuelta en padding-left:58px). Se reconfirmaron ambas
   geometrias en vivo antes de reaplicar (Modulo 0 .fin-acc-title left =
   462.484375px, identico a Ronda 42/43 -- la estructura no cambio, solo el
   CSS se habia perdido).
   ========================================================================== */

/* FAQ: en el mockup (Tailwind p-5 sm:p-6) el padding baja a 20px por debajo
   de 640px -- reproducido aca, arriba de 640px rige el 24px uniforme. */
@media (max-width: 640px) {
	body.single-courses .fin-faq-question {
		padding: 20px;
	}
}

/* Restauracion del fix de bug magenta (ex-Ronda 41/43): un doble-click sobre
   el header del acordeon (Temario o FAQ) dispara seleccion nativa de texto;
   sin ::selection declarado, el navegador usa su highlight por defecto
   (puede verse magenta/rosa segun SO). user-select:none evita la seleccion:
   el fallback ::selection queda igual como blindaje adicional. background-
   color explicito en focus/focus-visible/active para no depender de ningun
   default del navegador en esos estados. */
body.single-courses .fin-acc-header,
body.single-courses .fin-faq-question {
	user-select: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
}
body.single-courses .fin-acc-header,
body.single-courses .fin-acc-header:focus,
body.single-courses .fin-acc-header:focus-visible,
body.single-courses .fin-acc-header:active {
	background-color: #ffffff;
}
body.single-courses .fin-faq-question,
body.single-courses .fin-faq-question:focus,
body.single-courses .fin-faq-question:focus-visible,
body.single-courses .fin-faq-question:active {
	background-color: transparent;
}
body.single-courses .fin-acc-header::selection,
body.single-courses .fin-acc-header *::selection,
body.single-courses .fin-faq-question::selection,
body.single-courses .fin-faq-question *::selection {
	background-color: rgba(12, 60, 96, 0.15);
	color: inherit;
}

/* ==========================================================================
   RONDA 62 (2026-07-28) -- 3 fixes MOBILE (<=600px), landing de curso.
   Alcance estricto: SOLO mobile, SOLO estos 3 puntos (reportados con
   capturas a 375px). No se toca desktop/tablet (no hay media queries que
   los alcancen). No se toca tutor-player.css ni la Q&A (otro agente
   trabaja en paralelo sobre esos archivos).
   ========================================================================== */

/* FIX 1 -- Testimonios: el H2 "Lo que dicen nuestros alumnos" no tenia
   override de tamano para mobile (quedaba en 54px, el mismo valor de
   desktop) -- a 375px wrapea a 3 lineas ("Lo que dicen"/"nuestros"/
   "alumnos") y el .fin-underline (inline-block que envuelve "nuestros
   alumnos") wrapea INTERNAMENTE en 2 lineas, con su ::after (width:100%
   relativo a la caja, position:absolute bottom:-0.14em) quedando pegado
   al fondo de la caja completa -- desalineado del texto y pisando el
   subtitulo de abajo (confirmado con getBoundingClientRect en vivo).
   Fix: font-size reducido (entra en 1 sola linea a este ancho) +
   white-space:nowrap en el .fin-underline de ESTA seccion (scopeado a
   .fin-testimonios para no afectar los otros 2 usos de .fin-underline --
   Precio y CTA final -- cuyo texto varia por curso). */
@media (max-width: 480px) {
	body.single-courses .fin-testimonios h2.fin-h2 {
		font-size: 28px;
	}
	body.single-courses .fin-testimonios .fin-underline {
		white-space: nowrap;
	}
}

/* FIX 2 -- Temario: badge "MODULO N" + titulo + estado/chevron competian
   por los mismos ~195px de ancho util del header (body.single-courses
   .fin-card tiene padding:48px UNCONDICIONAL desde Ronda 9 -- pensado
   para desktop, nunca acotado a >600px -- deja solo ~239px de ancho de
   contenido en .fin-temario-card a 375px). El titulo terminaba con
   ~10px de ancho real (medido con getBoundingClientRect) y se cortaba
   contra el borde. Fix: header pasa a 2 filas en mobile (badge +
   estado/chevron arriba, titulo abajo a ancho completo via
   flex-wrap+order) y se reduce el padding del card + el indent del
   body del acordeon (116px, calibrado para el layout de 1 fila de
   desktop, sobraba en la fila nueva). Iconos (svg de tipo de leccion y
   de adjunto, visibles en mobile pese a la regla display:none de Ronda
   41 -- confirmado en vivo, drift conocido de este archivo) realineados
   al inicio de la primera linea del texto. */
@media (max-width: 480px) {
	body.single-courses .fin-temario-card {
		padding: 24px 16px;
	}
	body.single-courses .fin-acc-header {
		flex-wrap: wrap;
		justify-content: space-between;
		row-gap: 8px;
		padding: 14px 16px;
	}
	body.single-courses .fin-acc-badge {
		order: 1;
	}
	body.single-courses .fin-acc-right {
		order: 2;
	}
	body.single-courses .fin-acc-title {
		order: 3;
		flex: 1 1 100%;
		font-size: 14px;
	}
	body.single-courses .fin-acc-body {
		padding: 4px 16px 16px 16px;
	}
	body.single-courses .fin-acc-lesson,
	body.single-courses .fin-temario-resource {
		align-items: flex-start;
	}
	body.single-courses .fin-acc-lesson svg,
	body.single-courses .fin-temario-resource svg {
		margin-top: 2px;
		flex-shrink: 0;
	}
}

/* FIX 3 -- Precio: el CTA "Quiero sumarme hoy mismo" tiene un ancho FIJO
   de 448px (body.single-courses .fin-precio-cta, Ronda 30/31 -- fidelidad
   DESKTOP contra el mockup) sin acotar a un media query -- a 375px
   desborda 142px por fuera del viewport (confirmado con
   getBoundingClientRect en vivo: right=517 vs viewport=375). El mismo
   padding:48px unconditional de .fin-card angosta ademas el card
   contenedor. Fix: en mobile el CTA vuelve a full-width (relativo al
   card, ya angostado en este mismo bloque) + white-space:normal como
   red de seguridad para que el label wrapee en vez de desbordar si algun
   curso tuviera un texto mas largo. */
@media (max-width: 600px) {
	body.single-courses .fin-precio-card {
		padding: 28px 20px;
	}
	body.single-courses .fin-precio-cta {
		width: 100%;
		padding: 16px 20px;
		font-size: 16px;
		white-space: normal;
	}
}


/* ==========================================================================
   RONDA 65 (2026-07-28) -- Precio: el fin-underline envolvia el TITULO
   COMPLETO del curso (course-entry-box.php), no solo la ultima palabra.
   A 375px, cuando el h2 wrapea a 2-3 lineas, el after (width:100%
   relativo a la caja fin-underline) quedaba anclado al ancho/alto de la
   caja ENTERA en vez de a la palabra puntual -- sobresaliendo a los
   costados y superponiendose con el subtitulo de abajo. Fix real: el
   PHP (course-entry-box.php) ahora envuelve SOLO la ultima palabra del
   titulo en fin-underline (generico via preg_split -- no hardcodea la
   palabra por curso), asi que la caja ya nace del ancho de una sola
   palabra, sin depender del wrap del h2. Esta regla es SOLO un refuerzo
   defensivo (no la causa del fix): evita que una unica palabra larga
   pudiera romper internamente en 2 lineas en un titulo futuro con una
   ultima palabra mas extensa. Scopeado a fin-precio-card para NO afectar
   los otros 2 usos de fin-underline (Testimonios -- scopeado propio en
   Ronda 62 -- y CTA final, que sigue envolviendo una frase completa y no
   se toca en esta ronda).
   ========================================================================== */
body.single-courses .fin-precio-card .fin-underline {
	white-space: nowrap;
}