/* ==========================================================================
   LMS Programas y Sesiones — Estilos de frontend
   Los colores --lms-primary / --lms-secondary se definen por Programa
   (ver LMS_PS_Templates::print_brand_vars), así cada cliente conserva su
   propia paleta sin tocar este archivo.
   ========================================================================== */

/* Los colores de marca (--lms-primary / --lms-secondary) los define
   LMS_PS_Templates::print_brand_vars() en :root, con el valor de cada
   Programa. A propósito NO se vuelven a declarar aquí en .lms-page:
   si se declaran en el mismo elemento donde vive el contenido, esa
   asignación directa siempre le gana a la heredada desde :root, sin
   importar qué color se haya guardado en el Programa. Por eso los
   colores "no se cogían" antes. Cada var() de abajo trae además su
   propio valor de respaldo por si el bloque de :root no llegara a
   imprimirse (por ejemplo, un plugin de seguridad que bloquee estilos
   inline).
*/
.lms-page {
	--lms-ink: #201a26;
	--lms-muted: #6b6470;
	--lms-bg: #ffffff;
	--lms-bg-soft: #faf8fb;
	--lms-radius: 14px;
	--lms-max: 1120px;

	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: var(--lms-ink);
	background: var(--lms-bg);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

.lms-page * { box-sizing: border-box; }
.lms-page img { max-width: 100%; height: auto; display: block; }
.lms-page a { color: inherit; }

/* ---------- Franja de marca (full width) ---------- */
.lms-banner {
	width: 100%;
	padding: 56px 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--lms-primary, #3c1053), var(--lms-primary, #3c1053));
	background: linear-gradient(135deg, var(--lms-primary, #3c1053) 0%, color-mix(in srgb, var(--lms-primary, #3c1053) 60%, black 25%) 100%);
}
.lms-banner-logo { max-height: 140px; width: auto; margin: 0 auto; }
.lms-banner-title-fallback { color: #fff; font-size: 28px; margin: 0; text-align: center; }

/* ---------- Volver al programa ---------- */
.lms-volver {
	max-width: var(--lms-max);
	margin: 20px auto 0;
	padding: 0 24px;
}
.lms-volver a {
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
	color: var(--lms-primary, #3c1053);
}
.lms-volver a:hover { text-decoration: underline; }

/* ---------- Secciones generales ---------- */
.lms-section {
	max-width: var(--lms-max);
	margin: 0 auto;
	padding: 48px 24px;
}
.lms-heading-centrado {
	text-align: center;
	font-size: clamp(26px, 3.4vw, 38px);
	color: var(--lms-primary, #3c1053);
	margin: 0 0 32px;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.lms-sesion-titulo {
	max-width: var(--lms-max);
	margin: 36px auto 0;
	padding: 0 24px;
	font-size: clamp(24px, 3.2vw, 34px);
	color: var(--lms-primary, #3c1053);
	font-weight: 800;
	letter-spacing: -0.01em;
}

/* ---------- Video + texto (intro / sesión) ---------- */
.lms-intro-grid {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 40px;
	align-items: center;
}
@media (max-width: 820px) {
	.lms-intro-grid { grid-template-columns: 1fr; }
}
.lms-video-wrap {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	border-radius: var(--lms-radius);
	overflow: hidden;
	background: #000;
	box-shadow: 0 12px 30px -14px rgba(0,0,0,.35);
}
.lms-video-wrap iframe {
	position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.lms-intro-text h2 {
	font-size: clamp(22px, 2.6vw, 30px);
	color: var(--lms-primary, #3c1053);
	margin: 0 0 14px;
	font-weight: 800;
}
.lms-intro-text p, .lms-rich-text { color: var(--lms-ink); font-size: 16.5px; }
.lms-rich-text p:first-child { margin-top: 0; }

/* ---------- Frase de poder ---------- */
.lms-frase-poder {
	width: 100%;
	background: var(--lms-secondary, #c9a15a);
	padding: 22px 24px;
}
.lms-frase-poder p {
	max-width: var(--lms-max);
	margin: 0 auto;
	text-align: center;
	color: #fff;
	font-size: clamp(19px, 2.4vw, 26px);
	font-weight: 800;
	text-shadow: 0 1px 2px rgba(0,0,0,.15);
}

/* ---------- Tarjetas de sesiones (listado del Programa) ---------- */
.lms-sesion-cards {
	display: flex;
	flex-direction: column;
	gap: 28px;
}
.lms-sesion-card {
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: 28px;
	align-items: center;
	background: var(--lms-bg-soft);
	border-radius: var(--lms-radius);
	overflow: hidden;
	border: 1px solid #eee6f0;
}
@media (max-width: 720px) {
	.lms-sesion-card { grid-template-columns: 1fr; }
}
.lms-sesion-card-img { height: 100%; min-height: 200px; }
.lms-sesion-card-img img { width: 100%; height: 100%; object-fit: cover; min-height: 200px; }
.lms-sesion-card-texto { padding: 24px 28px 24px 0; }
@media (max-width: 720px) {
	.lms-sesion-card-texto { padding: 0 20px 24px; }
}
.lms-sesion-card-texto h3 {
	color: var(--lms-primary, #3c1053);
	font-size: 22px;
	margin: 0 0 10px;
	font-weight: 700;
}
.lms-sesion-card-texto p { color: var(--lms-muted); margin: 0 0 16px; }

/* ---------- Botones ---------- */
.lms-btn {
	display: inline-block;
	padding: 13px 28px;
	border-radius: 999px;
	font-weight: 700;
	text-decoration: none;
	font-size: 15px;
	transition: transform .15s ease, box-shadow .15s ease;
	color: #fff !important; /* Forzado: algunos temas/Elementor traen su propio color de enlace con !important y tapaban el texto del botón. */
}
.lms-btn:hover, .lms-btn:focus, .lms-btn:visited { color: #fff !important; }
.lms-btn-primary { background: var(--lms-primary, #3c1053); }
.lms-btn-secondary { background: var(--lms-secondary, #c9a15a); }

/* ---------- Resumen ---------- */
.lms-resumen { background: var(--lms-bg-soft); border-radius: var(--lms-radius); }
.lms-resumen-texto { max-width: 820px; margin: 0 auto; }
.lms-resumen-texto p { margin: 0 0 16px; }

/* ---------- Galería "Fotomomentos" ---------- */
.lms-galeria-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 10px;
}
.lms-galeria-item {
	display: block;
	border-radius: 8px;
	overflow: hidden;
	aspect-ratio: 1 / 1;
}
.lms-galeria-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s ease; }
.lms-galeria-item:hover img { transform: scale(1.06); }

/* Lightbox simple (ver assets/js/frontend.js) */
.lms-lightbox-overlay {
	position: fixed; inset: 0; background: rgba(10,6,14,.9);
	display: flex; align-items: center; justify-content: center;
	z-index: 9999; padding: 24px;
}
.lms-lightbox-overlay img { max-width: 92vw; max-height: 88vh; border-radius: 6px; }
.lms-lightbox-close {
	position: absolute; top: 18px; right: 24px; color: #fff;
	font-size: 32px; line-height: 1; cursor: pointer; background: none; border: 0;
}

/* ---------- Videos finales ---------- */
.lms-videos-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}
@media (max-width: 760px) {
	.lms-videos-grid { grid-template-columns: 1fr; }
}
.lms-video-card { text-decoration: none; display: block; }
.lms-video-thumb {
	position: relative;
	aspect-ratio: 16 / 9;
	background-size: cover;
	background-position: center;
	border-radius: 10px;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 10px 24px -14px rgba(0,0,0,.4);
}
.lms-video-play {
	width: 56px; height: 56px; border-radius: 50%;
	background: rgba(0,0,0,.55); color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-size: 20px; padding-left: 4px;
}

/* ---------- Testimonios / comentarios ---------- */
.lms-testimonios { background: var(--lms-bg-soft); border-radius: var(--lms-radius); }
.lms-testimonios-lista { list-style: none; margin: 0 0 40px; padding: 0; display: grid; gap: 16px; }
.lms-testimonio {
	background: #fff; border: 1px solid #eee6f0; border-radius: 12px; padding: 18px 20px;
}
.lms-testimonio-cabeza { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.lms-testimonio-cabeza img { border-radius: 50%; }
.lms-testimonio-autor { display: block; color: var(--lms-primary, #3c1053); }
.lms-testimonio-fecha { display: block; font-size: 12.5px; color: var(--lms-muted); }
.lms-rating-display { display: block; color: var(--lms-secondary, #c9a15a); letter-spacing: 2px; margin-bottom: 6px; }
.lms-sin-testimonios { color: var(--lms-muted); }

.lms-rating-field { margin-bottom: 6px; }
.lms-rating-stars { display: inline-flex; flex-direction: row-reverse; gap: 4px; font-size: 26px; }
.lms-rating-stars input { position: absolute; opacity: 0; width: 0; height: 0; }
.lms-rating-stars label { color: #ddd4e0; cursor: pointer; }
.lms-rating-stars input:checked ~ label,
.lms-rating-stars label:hover,
.lms-rating-stars label:hover ~ label { color: var(--lms-secondary, #c9a15a); }

.lms-testimonios #commentform input[type="text"],
.lms-testimonios #commentform input[type="email"],
.lms-testimonios #commentform textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid #ddd4e0;
	border-radius: 8px;
	font-family: inherit;
	font-size: 15px;
	margin-bottom: 14px;
}
.lms-testimonios #commentform .form-submit input {
	background: var(--lms-primary, #3c1053);
	color: #fff;
	border: 0;
	padding: 13px 28px;
	border-radius: 999px;
	font-weight: 700;
	cursor: pointer;
}
.lms-testimonios #commentform p { margin: 0 0 6px; }
.lms-testimonios #commentform label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 14px; }

/* ---------- Franja final (reemplaza el footer del tema) ---------- */
.lms-mini-footer {
	width: 100%;
	background: var(--lms-primary, #3c1053);
	padding: 18px 24px;
	margin-top: 8px;
}
.lms-mini-footer p {
	max-width: var(--lms-max);
	margin: 0 auto;
	text-align: center;
	color: #fff !important;
	font-size: 13.5px;
	letter-spacing: .02em;
}
.lms-mini-footer-sep { margin: 0 8px; opacity: .6; }