/* =========================================================================
   OREM Campus — design system (Brandbook 2026)
   Burgundy #6B1D33 líder · Pearl #FAF8F5 base · Playfair Display + Prompt
   ========================================================================= */

/* ---------- Fuentes (self-hosted, subset latin) ---------- */
@font-face {
	font-family: 'Playfair Display';
	src: url('../fonts/playfair-display-var.woff2') format('woff2');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Prompt';
	src: url('../fonts/prompt-300.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Prompt';
	src: url('../fonts/prompt-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Prompt';
	src: url('../fonts/prompt-500.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Prompt';
	src: url('../fonts/prompt-600.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
	--orem-burgundy: #6B1D33;
	--orem-burgundy-hover: #862B45;
	--orem-burgundy-deep: #4C1526;
	--orem-ink: #2B2B2B;
	--orem-ink-soft: #5f5a56;
	--orem-pearl: #FAF8F5;
	--orem-silk: #F3E3D8;
	--orem-champagne: #E8D8C5;
	--orem-pink: #F1B7C9;
	--orem-butter: #F3DA9E;
	--orem-butter-nude: #F6EED9;
	--orem-line: #EFE6DB;
	--orem-card: #FFFFFF;
	--orem-radius: 16px;
	--orem-radius-sm: 10px;
	--orem-shadow: 0 1px 2px rgba(43, 43, 43, .04), 0 8px 24px rgba(107, 29, 51, .07);
	--orem-shadow-lift: 0 2px 4px rgba(43, 43, 43, .05), 0 14px 34px rgba(107, 29, 51, .12);
	--orem-font-display: 'Playfair Display', 'Times New Roman', serif;
	--orem-font-ui: 'Prompt', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--orem-maxw: 1180px;
}

/* ---------- Base / overrides GeneratePress ---------- */
body.orem-campus {
	background: var(--orem-pearl) !important;
	color: var(--orem-ink);
	font-family: var(--orem-font-ui);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
.orem-campus .grid-container { max-width: var(--orem-maxw); }
.orem-campus.separate-containers .inside-article,
.orem-campus.separate-containers .site-main > *,
.orem-campus.separate-containers .paging-navigation {
	background: transparent;
	padding-left: 0;
	padding-right: 0;
}
.orem-campus.separate-containers .site-main { margin: 0; }
.orem-campus #content { max-width: var(--orem-maxw); margin: 0 auto; padding: 8px 20px 48px; }

/* !important: GeneratePress imprime la tipografía del Customizer (Raleway)
   después de este archivo y con selectores propios — la marca manda. */
.orem-campus h1, .orem-campus h2,
.orem-campus h1.entry-title, .orem-campus .entry-title {
	font-family: var(--orem-font-display) !important;
	font-weight: 500;
	color: var(--orem-burgundy);
	line-height: 1.18;
	letter-spacing: .2px;
}
.orem-campus h3, .orem-campus h4, .orem-campus h5 {
	font-family: var(--orem-font-ui) !important;
	font-weight: 500;
	color: var(--orem-ink);
	line-height: 1.35;
}
body.orem-campus, .orem-campus p, .orem-campus li, .orem-campus a, .orem-campus button, .orem-campus input, .orem-campus select {
	font-family: var(--orem-font-ui);
}
.orem-campus a { color: var(--orem-burgundy); text-decoration: none; }
.orem-campus a:hover { color: var(--orem-burgundy-hover); }
.orem-campus p { margin: 0 0 1em; }

.orem-campus :focus-visible {
	outline: 2px solid var(--orem-burgundy);
	outline-offset: 2px;
	border-radius: 4px;
}

.orem-overline {
	font: 600 11.5px/1.4 var(--orem-font-ui);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--orem-burgundy);
	margin: 0 0 6px;
}
.orem-sectiontitle { font-size: 26px; margin: 0 0 18px; }

/* ---------- Botones ---------- */
.orem-btn,
.orem-campus .orem-btn {
	display: inline-block;
	background: var(--orem-burgundy);
	color: var(--orem-pearl) !important;
	font: 500 15px/1 var(--orem-font-ui);
	padding: 14px 26px;
	border: 1px solid var(--orem-burgundy);
	border-radius: var(--orem-radius-sm);
	cursor: pointer;
	transition: background .16s ease, transform .16s ease;
	text-align: center;
}
.orem-btn:hover { background: var(--orem-burgundy-hover); border-color: var(--orem-burgundy-hover); transform: translateY(-1px); }
.orem-btn--ghost {
	background: transparent;
	color: var(--orem-burgundy) !important;
	border-color: var(--orem-champagne);
}
.orem-btn--ghost:hover { background: var(--orem-butter-nude); color: var(--orem-burgundy) !important; }
.orem-btn--sm { padding: 10px 18px; font-size: 14px; }

/* ---------- Header ---------- */
.orem-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(250, 248, 245, .92);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--orem-champagne);
}
.orem-header__inner {
	max-width: var(--orem-maxw);
	margin: 0 auto;
	padding: 12px 20px;
	display: flex;
	align-items: center;
	gap: 28px;
}
.orem-header__logo { display: flex; align-items: center; gap: 10px; }
.orem-header__logo img { display: block; height: 34px; width: auto; }
.orem-header__tagline {
	font: 500 11px/1 var(--orem-font-ui);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--orem-ink-soft);
	border-left: 1px solid var(--orem-champagne);
	padding-left: 10px;
}
.orem-header__nav { display: flex; gap: 22px; margin-left: 8px; }
.orem-header__nav a {
	font: 400 15px/1 var(--orem-font-ui);
	color: var(--orem-ink);
	padding: 10px 2px;
	border-bottom: 2px solid transparent;
}
.orem-header__nav a:hover { color: var(--orem-burgundy); }
.orem-header__nav a.is-active {
	color: var(--orem-burgundy);
	font-weight: 500;
	border-bottom-color: var(--orem-burgundy);
}
.orem-header__actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.orem-header__toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.orem-header__toggle-bar {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--orem-burgundy);
	margin: 5px 0;
	border-radius: 2px;
	transition: transform .18s ease, opacity .18s ease;
}
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

/* ---------- Footer ---------- */
.orem-footer {
	border-top: 1px solid var(--orem-champagne);
	background: var(--orem-pearl);
	margin-top: 56px;
}
.orem-footer__inner {
	max-width: var(--orem-maxw);
	margin: 0 auto;
	padding: 36px 20px 28px;
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: flex-start;
}
.orem-footer__brand p { margin: 10px 0 0; font-size: 13.5px; color: var(--orem-ink-soft); }
.orem-footer__nav { display: flex; flex-wrap: wrap; gap: 18px; margin-left: auto; }
.orem-footer__nav a { font-size: 14px; color: var(--orem-ink); }
.orem-footer__nav a:hover { color: var(--orem-burgundy); }
.orem-footer__legal { width: 100%; margin: 6px 0 0; font-size: 12.5px; color: var(--orem-ink-soft); }

/* =========================================================================
   Catálogo de cursos (loop de Sensei)
   ========================================================================= */
.orem-campus .archive-header h1,
.orem-campus header.archive-header h1 { font-size: 34px; margin: 18px 0 6px; }

ul.course-container {
	list-style: none;
	margin: 22px 0 34px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
	gap: 26px;
}
ul.course-container li.course {
	position: relative;
	background: var(--orem-card);
	border: 1px solid var(--orem-line);
	border-radius: var(--orem-radius);
	box-shadow: var(--orem-shadow);
	overflow: hidden;
	display: flex;
	transition: transform .18s ease, box-shadow .18s ease;
	margin: 0;
	padding: 0;
}
ul.course-container li.course:hover { transform: translateY(-3px); box-shadow: var(--orem-shadow-lift); }

li.course section.course-content { display: flex; flex-direction: column; flex: 1; width: 100%; }
li.course section.entry { padding: 16px 20px 2px; flex: 0 0 auto; }

li.course h3.course-title { font-size: 17px; margin: 0 0 6px; }
li.course h3.course-title a { color: var(--orem-ink); pointer-events: none; }
/* Toda la card es un solo enlace (overlay). El destino lo decide el server:
   curso propio → consumir en el campus; a la venta → producto en la tienda. */
.orem-card__overlay { position: absolute; inset: 0; z-index: 4; border-radius: var(--orem-radius); }
/* Foco de teclado visible en la card completa (accesibilidad) */
.orem-card__overlay:focus-visible { outline: 2px solid var(--orem-burgundy); outline-offset: 3px; }
li.course:hover h3.course-title a { color: var(--orem-burgundy); }

li.course .sensei-course-meta { font-size: 13px; color: var(--orem-ink-soft); }
/* Sensei imprime su propia frase de progreso — la sustituye nuestra barra */
li.course .sensei-course-meta .course-lesson-progress { display: none; }
li.course section.entry > p { font-size: 14px; color: var(--orem-ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 8px 0 0; }

/* Media */
.orem-card__mediawrap { position: relative; }
.orem-media { display: block; aspect-ratio: 3 / 2; background: linear-gradient(135deg, var(--orem-silk), var(--orem-butter-nude)); }
.orem-media__img, .orem-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.orem-media__fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	font: 500 64px/1 var(--orem-font-display);
	color: var(--orem-burgundy);
	opacity: .75;
}

/* Chips de estado */
.orem-chip {
	position: absolute;
	top: 12px;
	left: 12px;
	font: 500 11.5px/1 var(--orem-font-ui);
	letter-spacing: .04em;
	padding: 7px 11px;
	border-radius: 999px;
	background: var(--orem-champagne);
	color: var(--orem-ink);
}
.orem-chip--done { background: var(--orem-burgundy); color: var(--orem-pearl); }
.orem-chip--active { background: var(--orem-champagne); }
.orem-chip--new { background: var(--orem-butter-nude); }

/* Footer de card: progreso + CTA */
.orem-card__footer { padding: 10px 20px 18px; margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.orem-progress { height: 6px; border-radius: 999px; background: var(--orem-line); overflow: hidden; }
.orem-progress--lg { height: 8px; }
.orem-progress__bar { display: block; height: 100%; background: var(--orem-burgundy); border-radius: 999px; transition: width .4s ease; }
.orem-card__progresslabel { font-size: 12.5px; color: var(--orem-ink-soft); }
.orem-card__cta { font: 500 14px/1 var(--orem-font-ui); color: var(--orem-burgundy); margin-top: 2px; }

/* Barra de filtros/orden (clases que agrega campus.js) */
.orem-filterbar { list-style: none; display: flex; gap: 10px; padding: 0; margin: 8px 0 4px; }
.orem-filterbar li { margin: 0; }
.orem-filterbar a {
	display: inline-block;
	font: 400 14px/1 var(--orem-font-ui);
	color: var(--orem-ink);
	background: transparent;
	border: 1px solid var(--orem-champagne);
	padding: 9px 16px;
	border-radius: 999px;
	transition: background .15s ease;
}
.orem-filterbar a:hover { background: var(--orem-butter-nude); }
.orem-filterbar a.active { background: var(--orem-burgundy); border-color: var(--orem-burgundy); color: var(--orem-pearl); }

.orem-sortform { float: right; margin: 6px 0 0; }
.orem-sortform select,
.orem-campus select {
	font: 400 14px var(--orem-font-ui);
	color: var(--orem-ink);
	background: #fff;
	border: 1px solid var(--orem-champagne);
	border-radius: var(--orem-radius-sm);
	padding: 9px 12px;
}
.orem-sortform select:focus { border-color: var(--orem-burgundy); }

/* Buscador del catálogo (lo inyecta campus.js) */
/* .orem-search (catálogo) usa la regla unificada de buscadores de arriba. */

/* Paginación (clase que agrega campus.js) */
.orem-pagination ul { list-style: none; display: flex; gap: 8px; padding: 0; justify-content: center; }
.orem-pagination a, .orem-pagination span {
	display: inline-block;
	min-width: 40px;
	text-align: center;
	padding: 9px 12px;
	border-radius: var(--orem-radius-sm);
	border: 1px solid var(--orem-champagne);
	font: 400 14px var(--orem-font-ui);
	color: var(--orem-ink);
	background: #fff;
}
.orem-pagination a:hover { background: var(--orem-butter-nude); }
.orem-pagination .current, .orem-pagination span.current { background: var(--orem-burgundy); color: var(--orem-pearl); border-color: var(--orem-burgundy); }

/* =========================================================================
   Página de curso (single)
   ========================================================================= */
.orem-campus .single-course h1,
.orem-campus article.type-course h1 { font-size: 32px; margin: 14px 0 12px; }

.orem-course-hero { border-radius: var(--orem-radius); overflow: hidden; margin: 6px 0 4px; }
.orem-course-hero--noimg { display: none; }
.orem-course-hero__img { width: 100%; max-height: 340px; object-fit: cover; display: block; }

.orem-course-status {
	background: var(--orem-card);
	border: 1px solid var(--orem-line);
	border-radius: var(--orem-radius);
	box-shadow: var(--orem-shadow);
	padding: 18px 20px;
	margin: 14px 0 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
}
.orem-course-status--locked p { margin: 0; color: var(--orem-ink-soft); }
.orem-course-status__hint { font-size: 13.5px; }

/* Portada (featured image que renderiza Sensei en el single course) —
   una sola, redondeada y contenida (antes: gigante + duplicada por mi hero). */
.orem-campus .wp-block-post-featured-image,
.orem-campus figure.wp-block-post-featured-image {
	border-radius: var(--orem-radius);
	overflow: hidden;
	margin: 6px 0 18px;
}
.orem-campus .wp-block-post-featured-image img {
	width: 100%;
	max-height: 320px;
	object-fit: cover;
	display: block;
}

/* ---- Temario (bloque course outline de Sensei) ---- */
.orem-campus .wp-block-sensei-lms-course-outline { margin: 20px 0; }

/* Cada módulo = tarjeta */
.orem-campus .wp-block-sensei-lms-course-outline-module {
	background: var(--orem-card);
	border: 1px solid var(--orem-line);
	border-radius: var(--orem-radius);
	overflow: hidden;
	box-shadow: var(--orem-shadow);
	margin: 0 0 14px !important;
}

/* Header del módulo: Champagne + Ink (ADIÓS MENTA), legible en TODOS los
   estados (colapsado/expandido/hover y colores por-módulo del editor). */
.orem-campus .wp-block-sensei-lms-course-outline-module__header {
	background: var(--orem-champagne) !important;
	color: var(--orem-ink) !important;
	padding: 15px 22px !important;
	border: 0 !important;
	transition: background .15s ease;
}
.orem-campus .wp-block-sensei-lms-course-outline-module__header:hover {
	background: var(--orem-silk) !important;
}
.orem-campus .wp-block-sensei-lms-course-outline-module__header *,
.orem-campus .wp-block-sensei-lms-course-outline-module__title,
.orem-campus .wp-block-sensei-lms-course-outline-module__name {
	color: var(--orem-ink) !important;
	font-family: var(--orem-font-ui) !important;
	font-weight: 600 !important;
}
/* Chevron / íconos del temario en burgundy */
.orem-campus .wp-block-sensei-lms-course-outline-module__header svg,
.orem-campus .wp-block-sensei-lms-course-outline-module__header svg * {
	fill: var(--orem-burgundy) !important;
	color: var(--orem-burgundy) !important;
}

/* Descripción del módulo + sub-etiqueta "Lecciones" */
.orem-campus .wp-block-sensei-lms-course-outline-module__description { padding: 14px 22px 2px !important; color: var(--orem-ink-soft) !important; }
.orem-campus .wp-block-sensei-lms-course-outline-module__lessons-title {
	background: transparent !important;
	color: var(--orem-ink-soft) !important;
	font: 600 11.5px/1 var(--orem-font-ui) !important;
	letter-spacing: .1em !important;
	text-transform: uppercase;
	padding: 12px 22px 6px !important;
}

/* Lecciones (filas) */
.orem-campus .wp-block-sensei-lms-course-outline-lesson {
	color: var(--orem-ink) !important;
	font-weight: 300 !important;
	padding: 13px 22px !important;
	border-top: 1px solid var(--orem-line) !important;
	transition: background .12s ease, color .12s ease;
}
.orem-campus .wp-block-sensei-lms-course-outline-lesson:hover {
	color: var(--orem-burgundy) !important;
	background: var(--orem-butter-nude) !important;
}
.orem-campus .wp-block-sensei-lms-course-outline-lesson svg { fill: var(--orem-burgundy) !important; }

/* Lecciones sueltas fuera de módulo */
.orem-campus .wp-block-sensei-lms-course-outline > .wp-block-sensei-lms-course-outline-lesson {
	background: var(--orem-card);
	border: 1px solid var(--orem-line);
	border-radius: var(--orem-radius-sm);
	margin-bottom: 8px;
}

/* Botón "Tomar curso" (bloque de Sensei) — burgundy */
.orem-campus .wp-block-sensei-lms-button-take-course button,
.orem-campus .sensei-course-theme__button,
.orem-campus .wp-block-button__link,
.orem-campus button[type="submit"],
.orem-campus input[type="submit"] {
	background: var(--orem-burgundy) !important;
	color: var(--orem-pearl) !important;
	border: 1px solid var(--orem-burgundy) !important;
	border-radius: var(--orem-radius-sm) !important;
	font: 500 15px/1.2 var(--orem-font-ui) !important;
	padding: 13px 24px !important;
	transition: background .16s ease;
}
.orem-campus .wp-block-sensei-lms-button-take-course button:hover,
.orem-campus .wp-block-button__link:hover,
.orem-campus button[type="submit"]:hover,
.orem-campus input[type="submit"]:hover { background: var(--orem-burgundy-hover) !important; }

/* =========================================================================
   Dashboard /mis-cursos
   ========================================================================= */
.orem-dash { display: block; }
.orem-dash__hello { margin: 26px 0 26px; }
.orem-dash__hello h1 { font-size: 38px; margin: 0 0 8px; }
.orem-dash__sub { color: var(--orem-ink-soft); font-size: 16.5px; margin: 0; }

/* Tira de estadísticas (señal premium tipo dashboard de aprendizaje) */
.orem-stats {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 14px 40px;
	margin: 22px 0 0;
	padding: 18px 26px;
	background: var(--orem-card);
	border: 1px solid var(--orem-line);
	border-radius: var(--orem-radius);
	box-shadow: var(--orem-shadow);
}
.orem-stats li { display: flex; flex-direction: column; }
.orem-stats__n { font-family: var(--orem-font-display); font-size: 30px; font-weight: 600; color: var(--orem-burgundy); line-height: 1; }
.orem-stats__l { font-size: 12.5px; color: var(--orem-ink-soft); letter-spacing: .03em; margin-top: 5px; text-transform: lowercase; }

.orem-welcome {
	background: var(--orem-butter-nude);
	border: 1px solid var(--orem-champagne);
	border-radius: var(--orem-radius);
	padding: 20px 24px;
	margin: 0 0 26px;
}
.orem-welcome h2 { font-size: 21px; margin: 0 0 10px; }
.orem-welcome ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.orem-welcome li { font-size: 14.5px; color: var(--orem-ink); }

.orem-continue {
	display: grid;
	grid-template-columns: minmax(260px, 420px) 1fr;
	background: var(--orem-card);
	border: 1px solid var(--orem-line);
	border-radius: 20px;
	box-shadow: var(--orem-shadow);
	overflow: hidden;
	margin: 0 0 40px;
}
.orem-continue__media .orem-media { height: 100%; aspect-ratio: auto; min-height: 240px; }
.orem-continue__body { padding: 26px 30px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.orem-continue__lesson { font-size: 27px; margin: 0; }
.orem-continue__course { color: var(--orem-ink-soft); margin: 0; font-size: 14.5px; }
.orem-continue .orem-progress { width: 100%; max-width: 420px; }
.orem-continue .orem-btn { margin-top: 8px; }

.orem-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
	gap: 24px;
}
.orem-dcard {
	position: relative;
	background: var(--orem-card);
	border: 1px solid var(--orem-line);
	border-radius: var(--orem-radius);
	box-shadow: var(--orem-shadow);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform .18s ease, box-shadow .18s ease;
	margin: 0;
}
.orem-dcard:hover { transform: translateY(-3px); box-shadow: var(--orem-shadow-lift); }
.orem-dcard__body { padding: 15px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.orem-dcard__body h3 { font-size: 16.5px; margin: 0; }
.orem-dcard__body h3 a { color: var(--orem-ink); }
.orem-dcard__body h3 a::after { content: ''; position: absolute; inset: 0; }
.orem-dcard .orem-card__cta { margin-top: auto; }

.orem-mycourses { margin: 0 0 42px; }
.orem-mycourses .orem-sectiontitle { margin: 0 0 14px; }
.orem-dashsearch__empty { color: var(--orem-ink-soft); font-size: 14.5px; margin: 0 0 18px; }

/* "Mis cursos" es un <details>: el <summary> reemplaza el <h2> y agrega el
   toggle. list-style/marker se quita a mano por soporte Safari viejo. */
.orem-mycourses__summary {
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 10px;
	list-style: none;
	user-select: none;
}
.orem-mycourses__summary::-webkit-details-marker { display: none; }
.orem-mycourses__summary::before {
	content: '›';
	display: inline-block;
	font-size: 22px;
	line-height: 1;
	transform: rotate(0deg);
	transition: transform 0.2s ease;
	color: var(--orem-ink-soft);
}
.orem-mycourses[open] > .orem-mycourses__summary::before { transform: rotate(90deg); }
.orem-mycourses__count {
	font-size: 13px;
	font-weight: 600;
	color: var(--orem-ink-soft);
	background: var(--orem-surface-soft, #f3ece4);
	border-radius: 999px;
	padding: 2px 10px;
}
.orem-mycourses > *:not(.orem-mycourses__summary) { margin-top: 14px; }

/* =========================================================================
   Buscadores (Mis cursos + catálogo) — ancho completo, ícono integrado en el
   input (imposible encimarse), caja clara. !important + especificidad para
   ganarle a los estilos de input de GeneratePress/Sensei (pisaban padding,
   fondo y radio → el campo se "perdía" y el ícono se encimaba).
   ========================================================================= */
.orem-dashsearch,
.orem-search { position: relative; margin: 0 0 22px; width: 100%; }
body.orem-campus .orem-dashsearch input[type="search"],
body.orem-campus .orem-search input[type="search"] {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	box-sizing: border-box !important;
	height: auto !important;
	margin: 0 !important;
	font: 400 15px/1.4 var(--orem-font-ui) !important;
	color: var(--orem-ink) !important;
	background: #fff url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='18'%20height='18'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%235f5a56'%20stroke-width='2'%20stroke-linecap='round'%3E%3Ccircle%20cx='11'%20cy='11'%20r='7'/%3E%3Cline%20x1='21'%20y1='21'%20x2='16.65'%20y2='16.65'/%3E%3C/svg%3E") no-repeat 18px center !important;
	background-size: 18px 18px !important;
	border: 1px solid var(--orem-champagne) !important;
	border-width: 1px !important; /* longhand: gana al border-width sub-pixel de GP */
	border-radius: 999px !important;
	padding: 14px 20px 14px 48px !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	box-shadow: 0 1px 2px rgba(43, 43, 43, .05) !important; /* definición del campo */
}
body.orem-campus .orem-dashsearch input[type="search"]::placeholder,
body.orem-campus .orem-search input[type="search"]::placeholder { color: var(--orem-ink-soft) !important; opacity: 1 !important; }
body.orem-campus .orem-dashsearch input[type="search"]:focus,
body.orem-campus .orem-search input[type="search"]:focus {
	border-color: var(--orem-burgundy) !important;
	box-shadow: 0 0 0 3px rgba(107, 29, 51, .08) !important;
	outline: none !important;
}
/* quitar la X nativa de webkit para un look limpio */
body.orem-campus .orem-dashsearch input[type="search"]::-webkit-search-cancel-button,
body.orem-campus .orem-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

/* Precio en las cards del catálogo (CRO) */
.orem-card__price { font-family: var(--orem-font-ui); margin: 2px 0 2px; }
.orem-card__price-now { font-weight: 600; font-size: 16px; color: var(--orem-burgundy); }
.orem-card__price-was { font-size: 13px; color: var(--orem-ink-soft); text-decoration: line-through; margin-left: 6px; }

/* CTA tipo botón en las cards del catálogo (CRO: acción clara y consistente) */
.orem-card__cta--btn {
	align-self: flex-start;
	background: var(--orem-burgundy);
	color: var(--orem-pearl);
	padding: 9px 16px;
	border-radius: var(--orem-radius-sm);
	font-weight: 500;
	font-size: 13.5px;
	transition: background .16s ease;
}
li.course:hover .orem-card__cta--btn { background: var(--orem-burgundy-hover); }
.orem-discover { margin: 0 0 10px; }
.orem-grid--discover { grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); }
.orem-dcard--discover .orem-media { aspect-ratio: 16 / 10; }

.orem-empty {
	background: var(--orem-card);
	border: 1px dashed var(--orem-champagne);
	border-radius: 20px;
	text-align: center;
	padding: 54px 24px;
	margin: 0 0 42px;
}
.orem-empty h2 { margin: 0 0 8px; }
.orem-empty p { color: var(--orem-ink-soft); max-width: 480px; margin: 0 auto 20px; }
.orem-empty__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Login requerido */
.orem-dash--guest { display: flex; justify-content: center; padding: 40px 0; }
.orem-authcard {
	background: var(--orem-card);
	border: 1px solid var(--orem-line);
	border-radius: 20px;
	box-shadow: var(--orem-shadow);
	max-width: 560px;
	padding: 38px 40px;
}
.orem-authcard h1 { font-size: 30px; margin: 0 0 10px; }
.orem-authcard ol { margin: 0 0 22px; padding-left: 20px; display: grid; gap: 6px; font-size: 15px; }

/* =========================================================================
   Woohoo (curso completado)
   ========================================================================= */
.orem-woohoo { display: flex; flex-direction: column; align-items: center; padding: 44px 0 20px; }
.orem-woohoo__card {
	background: var(--orem-card);
	border: 1px solid var(--orem-line);
	border-radius: 22px;
	box-shadow: var(--orem-shadow);
	max-width: 640px;
	width: 100%;
	text-align: center;
	padding: 52px 42px;
	position: relative;
}
.orem-woohoo__spark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: var(--orem-butter-nude);
	color: var(--orem-burgundy);
	font-size: 26px;
	margin-bottom: 16px;
}
.orem-woohoo__card h1 { font-size: 36px; margin: 0 0 10px; }
.orem-woohoo__sub { color: var(--orem-ink-soft); max-width: 460px; margin: 0 auto 26px; }
.orem-woohoo__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.orem-woohoo__extra { max-width: 640px; margin-top: 26px; }

/* =========================================================================
   Página logged-out (instrucciones de acceso)
   ========================================================================= */
.orem-campus.page-id-253382 #content { max-width: 640px; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 860px) {
	.orem-header__nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--orem-pearl);
		border-bottom: 1px solid var(--orem-champagne);
		flex-direction: column;
		gap: 0;
		padding: 8px 20px 14px;
		box-shadow: var(--orem-shadow);
	}
	.orem-header__nav.is-open { display: flex; }
	.orem-header__nav a { padding: 13px 2px; border-bottom: 1px solid var(--orem-line); }
	.orem-header__nav a.is-active { border-bottom-color: var(--orem-line); }
	.orem-header__toggle { display: block; }
	.orem-header { position: relative; }
	.orem-header__inner { position: relative; }

	.orem-continue { grid-template-columns: 1fr; }
	.orem-continue__media .orem-media { min-height: 0; aspect-ratio: 16 / 9; }
	.orem-continue__body { padding: 20px 20px 24px; }
	.orem-continue__lesson { font-size: 22px; }
	.orem-dash__hello h1 { font-size: 30px; }
	.orem-sortform { float: none; }
	.orem-woohoo__card { padding: 40px 24px; }
	.orem-authcard { padding: 30px 22px; }
}

/* =========================================================================
   Pulido world-class (micro-interacciones)
   ========================================================================= */
html { scroll-behavior: smooth; }
/* offset para que los anclas no queden bajo el header sticky */
.orem-campus [id] { scroll-margin-top: 88px; }

/* Transiciones suaves consistentes en elementos interactivos */
.orem-campus a,
.orem-btn,
.orem-dcard,
ul.course-container li.course,
.orem-card__cta--btn,
.orem-chip { transition: color .16s ease, background-color .16s ease, transform .18s ease, box-shadow .18s ease, border-color .16s ease; }

/* Fade-in elegante de portadas al cargar (JS añade .is-loaded) */
.orem-media__img { opacity: 0; transition: opacity .5s ease; }
.orem-media__img.is-loaded { opacity: 1; }

/* Botón "volver arriba" flotante */
.orem-totop {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 80;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--orem-burgundy);
	color: var(--orem-pearl);
	border: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--orem-shadow-lift);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s ease, background .16s ease;
	cursor: pointer;
}
.orem-totop.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.orem-totop:hover { background: var(--orem-burgundy-hover); }
.orem-totop svg { width: 20px; height: 20px; }

/* Tipografía de lectura cómoda en el contenido de lección (single course) */
.orem-campus .entry-content { font-size: 16.5px; line-height: 1.7; }
.orem-campus .entry-content p { margin: 0 0 1.1em; }

/* Duración de lección en el temario (⏱ N min) */
.orem-lesson-dur { margin-left: 10px; font-size: 12px; color: var(--orem-ink-soft); font-weight: 400; white-space: nowrap; }
.orem-lesson-dur::before { content: "⏱ "; }

/* Recursos descargables dentro de la lección → tarjeta de descarga */
.orem-campus .entry-content a[href$=".pdf"],
.orem-campus .entry-content a[href$=".zip"],
.orem-campus .entry-content a[href$=".docx"],
.orem-campus .entry-content a[href$=".xlsx"],
.orem-campus .entry-content a[href$=".pptx"],
.orem-campus .sensei-course-theme__main-content a[href$=".pdf"],
.orem-campus .sensei-course-theme__main-content a[href$=".zip"],
.orem-campus .sensei-course-theme__main-content a[href$=".docx"],
.orem-campus .sensei-course-theme__main-content a[href$=".xlsx"],
.orem-campus .sensei-course-theme__main-content a[href$=".pptx"] {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: #fff;
	color: var(--orem-burgundy) !important;
	border: 1px solid var(--orem-champagne);
	border-radius: var(--orem-radius-sm);
	padding: 11px 18px;
	margin: 4px 0;
	font-weight: 500;
	text-decoration: none;
	box-shadow: var(--orem-shadow);
}
.orem-campus .entry-content a[href$=".pdf"]:hover,
.orem-campus .sensei-course-theme__main-content a[href$=".pdf"]:hover,
.orem-campus .entry-content a[href$=".zip"]:hover,
.orem-campus .entry-content a[href$=".docx"]:hover { background: var(--orem-butter-nude); }
.orem-campus .entry-content a[href$=".pdf"]::before,
.orem-campus .entry-content a[href$=".zip"]::before,
.orem-campus .entry-content a[href$=".docx"]::before,
.orem-campus .entry-content a[href$=".xlsx"]::before,
.orem-campus .entry-content a[href$=".pptx"]::before,
.orem-campus .sensei-course-theme__main-content a[href$=".pdf"]::before,
.orem-campus .sensei-course-theme__main-content a[href$=".zip"]::before,
.orem-campus .sensei-course-theme__main-content a[href$=".docx"]::before { content: "⤓"; font-size: 18px; line-height: 1; }

/* Confeti elegante de celebración (página de curso completado) */
.orem-confetti {
	position: fixed;
	top: -12px;
	width: 9px;
	height: 9px;
	border-radius: 2px;
	z-index: 90;
	pointer-events: none;
	animation: orem-confetti-fall 2.8s cubic-bezier(.25, .6, .4, 1) forwards;
}
@keyframes orem-confetti-fall {
	0% { transform: translateY(0) translateX(0) rotate(0); opacity: 1; }
	100% { transform: translateY(94vh) translateX(var(--x, 0)) rotate(420deg); opacity: 0; }
}

@media (max-width: 600px) {
	.orem-stats { gap: 12px 26px; padding: 16px 18px; }
	.orem-stats__n { font-size: 25px; }
	.orem-totop { right: 14px; bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.orem-media__img { opacity: 1; }
	.orem-campus *, .orem-campus *::before, .orem-campus *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}

/* =========================================================================
   Catálogo: sección "Ya en tu biblioteca" (2026-07-20)
   Arriba el bloque de venta (no comprados); un divisor separa los cursos que
   la alumna ya tiene, presentados de forma subordinada. El peso lo lleva el
   encabezado + la posición; las cards solo se atenúan levemente (sin romper
   layout). Full-width tanto en grid como en flex-wrap.
   ========================================================================= */
.orem-campus ul.course-container .orem-libsep {
	grid-column: 1 / -1;
	flex-basis: 100%;
	width: 100%;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px 14px;
	margin: 30px 0 8px;
	padding-top: 22px;
	border-top: 1px solid #E8D8C5;
}
.orem-campus ul.course-container .orem-libsep--top {
	margin-top: 2px;
	padding-top: 0;
	border-top: 0;
}
.orem-libsep__label {
	font-family: 'Playfair Display', 'Times New Roman', serif;
	font-size: 1.2rem;
	font-weight: 500;
	color: #6B1D33;
}
.orem-libsep__link {
	font-family: 'Prompt', sans-serif;
	font-size: .85rem;
	color: #862B45;
	text-decoration: none;
	white-space: nowrap;
}
.orem-libsep__link:hover { text-decoration: underline; }

/* Cards ya compradas: presencia discreta (secundaria a las de venta). */
.orem-campus ul.course-container li.orem-card--owned {
	opacity: .94;
	transition: opacity .16s ease;
}
.orem-campus ul.course-container li.orem-card--owned:hover { opacity: 1; }