/* DIsruptIA SEO — componentes visuales de academias y lecciones.
   Tokens (--dseo-*) los imprime Dseo_Tokens desde los ajustes.
   Estándar: "un escalón bajo el curso de pago", nunca "un documento" (PED-7). */

/* ---------- Base tipográfica de las vistas dseo ---------- */
.dseo-vista {
	--dseo-borde: rgba(11, 31, 58, 0.14);
	--dseo-suave: rgba(15, 101, 255, 0.06);
	--dseo-suave-acento: rgba(233, 30, 140, 0.07);
	line-height: 1.7;
	font-size: 1.06rem;
}
.dseo-vista h2 {
	margin-top: 2.2em;
	padding-bottom: 0.3em;
	border-bottom: 3px solid var(--dseo-primario, #0F65FF);
	border-image: linear-gradient(90deg, var(--dseo-primario, #0F65FF) 0 55%, var(--dseo-acento, #E91E8C) 55% 70%, transparent 70%) 1;
}
.dseo-vista h3 { margin-top: 1.6em; }
.dseo-vista img { max-width: 100%; height: auto; border-radius: 12px; }

/* ---------- Migas ---------- */
.dseo-breadcrumbs { font-size: 0.85em; opacity: 0.85; margin-bottom: 1.5em; }
.dseo-breadcrumbs .dseo-sep { margin: 0 0.45em; opacity: 0.6; }

/* ---------- TL;DR ---------- */
.dseo-tldr {
	border-left: 4px solid var(--dseo-primario, #0F65FF);
	background: var(--dseo-suave);
	padding: 1em 1.2em;
	border-radius: 0 10px 10px 0;
	font-size: 1.02em;
}

/* ---------- Escena narrativa (PED-1) ---------- */
.dseo-escena {
	position: relative;
	background: linear-gradient(160deg, var(--dseo-suave), var(--dseo-suave-acento));
	border: 1px solid var(--dseo-borde);
	border-radius: 14px;
	padding: 1.4em 1.5em 1.1em;
	margin: 1.8em 0;
}
.dseo-escena::before {
	content: var(--dseo-rotulo-escena, "LA ESCENA");
	display: block;
	font-size: 0.72em;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--dseo-acento, #E91E8C);
	margin-bottom: 0.7em;
}
.dseo-dialogo { margin: 0.5em 0; padding-left: 0.9em; border-left: 3px solid var(--dseo-borde); }
.dseo-voz { font-weight: 700; color: var(--dseo-primario, #0F65FF); }

/* ---------- Concepto clave (PED-2) ---------- */
.dseo-concepto {
	border: 1.5px solid var(--dseo-primario, #0F65FF);
	border-radius: 12px;
	padding: 1.1em 1.3em;
	margin: 1.5em 0;
	background: var(--dseo-suave);
}
.dseo-concepto > strong:first-child { color: var(--dseo-primario, #0F65FF); }

/* ---------- Actividad generativa (PED-2) ---------- */
.dseo-actividad {
	border: 2px dashed var(--dseo-acento, #E91E8C);
	border-radius: 12px;
	padding: 1.2em 1.4em;
	margin: 1.8em 0;
	background: var(--dseo-suave-acento);
}
.dseo-actividad::before {
	content: "✏ HAZLO TÚ ANTES DE SEGUIR";
	display: block;
	font-size: 0.74em;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--dseo-acento, #E91E8C);
	margin-bottom: 0.6em;
}
.dseo-actividad details {
	margin-top: 0.8em;
	border-top: 1px solid var(--dseo-borde);
	padding-top: 0.6em;
}
.dseo-actividad summary { cursor: pointer; font-weight: 600; color: var(--dseo-primario, #0F65FF); }

/* ---------- Pasos numerados ---------- */
.dseo-pasos { counter-reset: dseo-paso; list-style: none; padding-left: 0; margin: 1.4em 0; }
.dseo-pasos > li {
	counter-increment: dseo-paso;
	position: relative;
	padding: 0.35em 0 0.9em 3em;
}
.dseo-pasos > li::before {
	content: counter(dseo-paso);
	position: absolute;
	left: 0;
	top: 0.2em;
	width: 2em;
	height: 2em;
	border-radius: 50%;
	background: var(--dseo-primario, #0F65FF);
	color: #fff;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}
.dseo-pasos > li:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 0.95em;
	top: 2.5em;
	bottom: 0;
	width: 2px;
	background: var(--dseo-borde);
}

/* ---------- Prompt copiable ---------- */
.dseo-prompt { position: relative; margin: 1.4em 0; }
.dseo-prompt pre {
	background: #0B1F3A;
	color: #EAF1FF;
	border-radius: 12px;
	padding: 1.2em 1.3em;
	overflow-x: auto;
	white-space: pre-wrap;
	font-size: 0.92em;
	line-height: 1.55;
}
.dseo-copiar {
	position: absolute;
	top: 0.7em;
	right: 0.7em;
	background: var(--dseo-primario, #0F65FF);
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: 0.3em 1em;
	font-size: 0.8em;
	font-weight: 600;
	cursor: pointer;
}
.dseo-copiar:hover { background: var(--dseo-acento, #E91E8C); }

/* ---------- Destacado y tabla ---------- */
.dseo-destacado {
	border: 1px solid var(--dseo-acento, #E91E8C);
	border-radius: 10px;
	padding: 0.9em 1.1em;
	margin: 1.3em 0;
	background: var(--dseo-suave-acento);
}
.dseo-tabla { overflow-x: auto; margin: 1.4em 0; border-radius: 10px; border: 1px solid var(--dseo-borde); }
.dseo-tabla table { min-width: 520px; border-collapse: collapse; width: 100%; margin: 0; }
.dseo-tabla th { background: var(--dseo-primario, #0F65FF); color: #fff; text-align: left; }
.dseo-tabla th, .dseo-tabla td { border-bottom: 1px solid var(--dseo-borde); padding: 0.6em 0.8em; }
.dseo-tabla tr:nth-child(even) td { background: var(--dseo-suave); }

/* ---------- Quiz (PED-3) ---------- */
.dseo-quiz {
	border: 1px solid var(--dseo-borde);
	border-radius: 14px;
	padding: 1.3em 1.5em;
	margin: 2em 0;
}
.dseo-quiz::before {
	content: "◎ PONTE A PRUEBA";
	display: block;
	font-size: 0.74em;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--dseo-primario, #0F65FF);
	margin-bottom: 0.4em;
}
.dseo-reactivo { padding: 0.9em 0; border-top: 1px solid var(--dseo-borde); }
.dseo-reactivo:first-of-type { border-top: 0; }
.dseo-pregunta { font-weight: 700; margin: 0 0 0.5em; }
.dseo-opciones { list-style: none; padding-left: 0; margin: 0.4em 0; }
.dseo-opciones li {
	border: 1.5px solid var(--dseo-borde);
	border-radius: 10px;
	padding: 0.55em 0.9em;
	margin: 0.45em 0;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.dseo-opciones li:hover { border-color: var(--dseo-primario, #0F65FF); }
.dseo-opciones li.dseo-ok { border-color: #1a9e4b; background: rgba(26, 158, 75, 0.12); font-weight: 600; }
.dseo-opciones li.dseo-mal { border-color: #d63638; background: rgba(214, 54, 56, 0.1); animation: dseo-tiembla 0.35s; }
.dseo-opciones li.dseo-cerrado { cursor: default; }
@keyframes dseo-tiembla { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.dseo-solucion { margin-top: 0.5em; }
.dseo-solucion summary { cursor: pointer; font-size: 0.9em; color: var(--dseo-primario, #0F65FF); }
.dseo-solucion.dseo-sugerida summary { color: var(--dseo-acento, #E91E8C); font-weight: 700; }

/* ---------- Checklist con memoria (PED-4) ---------- */
.dseo-checklist { list-style: none; padding-left: 0; margin: 1.2em 0; }
.dseo-checklist li {
	display: flex;
	gap: 0.7em;
	align-items: flex-start;
	border: 1px solid var(--dseo-borde);
	border-radius: 10px;
	padding: 0.6em 0.9em;
	margin: 0.45em 0;
}
.dseo-checklist li.dseo-hecho { opacity: 0.55; text-decoration: line-through; }
.dseo-caja { width: 1.15em; height: 1.15em; margin-top: 0.2em; accent-color: var(--dseo-primario, #0F65FF); flex-shrink: 0; }

/* ---------- Ficha del curso, temario, FAQ, autor, CTA, navegación ---------- */
.dseo-curricular {
	background: var(--dseo-suave);
	border-radius: 14px;
	padding: 1.2em 1.5em;
	margin: 1.8em 0;
}
.dseo-curricular ul { list-style: none; padding-left: 0; margin: 0.4em 0 0; }
.dseo-curricular li { margin: 0.4em 0; }

.dseo-temario-lista { list-style: none; counter-reset: dseo-lec; padding-left: 0; }
.dseo-temario-lista > li {
	counter-increment: dseo-lec;
	position: relative;
	border: 1px solid var(--dseo-borde);
	border-radius: 12px;
	padding: 0.9em 1.1em 0.9em 3.4em;
	margin: 0.6em 0;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.dseo-temario-lista > li:hover { border-color: var(--dseo-primario, #0F65FF); box-shadow: 0 2px 10px rgba(15, 101, 255, 0.12); }
.dseo-temario-lista > li::before {
	content: counter(dseo-lec, decimal-leading-zero);
	position: absolute;
	left: 1em;
	top: 0.95em;
	font-weight: 800;
	color: var(--dseo-acento, #E91E8C);
}
.dseo-temario-lista > li > a { font-weight: 700; text-decoration: none; }
.dseo-temario-lista p { margin: 0.25em 0 0; font-size: 0.92em; opacity: 0.9; }

.dseo-faq-item { border-bottom: 1px solid var(--dseo-borde); padding: 0.55em 0; }
.dseo-faq-item summary { cursor: pointer; }
.dseo-faq-item summary h3 { display: inline; font-size: 1.02em; margin: 0; }
.dseo-faq-item p { margin: 0.5em 0 0.3em; }

.dseo-autor {
	display: flex;
	gap: 1em;
	align-items: flex-start;
	border-top: 1px solid var(--dseo-borde);
	margin-top: 2.2em;
	padding-top: 1.3em;
}
.dseo-autor img { border-radius: 50%; flex-shrink: 0; }
.dseo-autor-nombre { margin: 0 0 0.25em; }
.dseo-autor-bio { margin: 0; font-size: 0.92em; opacity: 0.9; }

.dseo-fechas { font-size: 0.85em; opacity: 0.75; margin-top: 1em; }

.dseo-cta {
	background: linear-gradient(135deg, rgba(15, 101, 255, 0.09), rgba(233, 30, 140, 0.09));
	border: 1px solid var(--dseo-borde);
	border-radius: 14px;
	padding: 1.4em 1.6em;
	margin: 2.2em 0 1em;
	text-align: center;
}
.dseo-cta-boton {
	display: inline-block;
	background: var(--dseo-primario, #0F65FF);
	color: #fff !important;
	padding: 0.7em 1.7em;
	border-radius: 999px;
	text-decoration: none;
	font-weight: 700;
}
.dseo-cta-boton:hover { background: var(--dseo-acento, #E91E8C); }

.dseo-nav-lecciones {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.8em;
	margin-top: 2.2em;
	padding-top: 1.3em;
	border-top: 1px solid var(--dseo-borde);
}
.dseo-nav-lecciones a { text-decoration: none; font-weight: 600; }
.dseo-nav-academia { opacity: 0.85; }

.dseo-academias-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1.4em;
	margin: 1.5em 0;
}
.dseo-academia-card {
	border: 1px solid var(--dseo-borde);
	border-radius: 14px;
	padding: 1em;
	transition: box-shadow 0.15s;
}
.dseo-academia-card:hover { box-shadow: 0 4px 16px rgba(15, 101, 255, 0.14); }
.dseo-academia-card img { width: 100%; height: auto; border-radius: 10px; }
.dseo-academia-card h3 { margin: 0.6em 0 0.3em; }
.dseo-academia-card p { margin: 0; font-size: 0.92em; opacity: 0.9; }

/* ================= Cabecera y pie propios (Dseo_Chrome) ================= */

.dseo-header {
	position: sticky;
	top: 0;
	z-index: 900;
	background: #fff;
	border-bottom: 1px solid var(--dseo-borde, rgba(11,31,58,.14));
	box-shadow: 0 1px 12px rgba(15, 23, 42, 0.06);
}
.dseo-header-inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0.7em 1.2em;
	display: flex;
	align-items: center;
	gap: 1.5em;
	flex-wrap: wrap;
}
.dseo-marca { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.dseo-marca img { height: 44px; width: auto; display: block; }
.dseo-marca-texto { font-weight: 800; font-size: 1.15rem; color: var(--dseo-primario, #1D4ED8); }

.dseo-nav { display: flex; align-items: center; gap: 1.35em; margin-left: auto; flex-wrap: wrap; }
.dseo-nav a {
	text-decoration: none;
	font-weight: 600;
	font-size: 0.95rem;
	color: #0F172A;
	padding: 0.35em 0;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
}
.dseo-nav a:hover { color: var(--dseo-primario, #1D4ED8); border-bottom-color: var(--dseo-primario, #1D4ED8); }
.dseo-nav .dseo-nav-cta {
	background: var(--dseo-primario, #1D4ED8);
	color: #fff;
	padding: 0.5em 1.1em;
	border-radius: 999px;
	border-bottom: 0;
}
.dseo-nav .dseo-nav-cta:hover { background: var(--dseo-acento, #F59E0B); color: #0F172A; border-bottom-color: transparent; }

.dseo-nav-toggle { display: none; }
.dseo-nav-boton { display: none; cursor: pointer; margin-left: auto; padding: 0.5em; }
.dseo-nav-boton span { display: block; width: 24px; height: 2px; background: #0F172A; margin: 5px 0; border-radius: 2px; }

@media (max-width: 860px) {
	.dseo-nav-boton { display: block; }
	.dseo-nav {
		display: none;
		width: 100%;
		flex-direction: column;
		align-items: flex-start;
		gap: 0.2em;
		padding-top: 0.6em;
	}
	.dseo-nav a { width: 100%; padding: 0.7em 0; border-bottom: 1px solid rgba(15,23,42,.08); }
	.dseo-nav .dseo-nav-cta { width: auto; margin-top: 0.6em; }
	.dseo-nav-toggle:checked ~ .dseo-nav { display: flex; }
}

.dseo-footer {
	background: #0F172A;
	color: #E2E8F0;
	margin-top: 4em;
	padding: 2.6em 1.2em 1.6em;
}
.dseo-footer-inner {
	max-width: 1180px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: 2em;
}
@media (max-width: 760px) { .dseo-footer-inner { grid-template-columns: 1fr; gap: 1.6em; } }
.dseo-footer-col a {
	display: block;
	color: #CBD5E1;
	text-decoration: none;
	padding: 0.28em 0;
	font-size: 0.94rem;
}
.dseo-footer-col a:hover { color: #fff; text-decoration: underline; }
.dseo-footer-marca { font-weight: 800; font-size: 1.1rem; color: #fff; margin: 0 0 0.4em; }
.dseo-footer-col p { font-size: 0.94rem; line-height: 1.6; color: #94A3B8; }
.dseo-footer-titulo { font-weight: 700; color: #fff; margin: 0 0 0.5em; font-size: 0.98rem; }
.dseo-footer-legal,
.dseo-footer-copy {
	max-width: 1180px;
	margin: 1.6em auto 0;
	padding-top: 1.2em;
	border-top: 1px solid rgba(255,255,255,.12);
	font-size: 0.82rem;
	color: #94A3B8;
	line-height: 1.6;
}
.dseo-footer-copy { border-top: 0; padding-top: 0.4em; margin-top: 0.4em; }

/* ================= Refinamientos de lectura ================= */

.dseo-vista .entry-content,
.dseo-vista .wp-block-post-content { max-width: 780px; margin-left: auto; margin-right: auto; }
.dseo-vista p { line-height: 1.75; }
.dseo-vista h2 { font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2rem); line-height: 1.25; }
.dseo-vista h3 { font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.45rem); }
.dseo-vista a { text-underline-offset: 3px; }
