/* =========================================================
   PORTADA · si-educa

   Servido como archivo, no dentro de la página: WordPress
   reescribe comillas y entidades al guardar el bloque, y eso
   rompe tanto el CSS como el JS. Aquí nadie los toca.

   Todo cuelga de #edu-portada para no filtrar nada al tema.
   ========================================================= */

#edu-portada{
	--p-tinta:#141b24;
	--p-texto:#344054;
	--p-suave:#667085;
	--p-linea:#e4e9ef;
	--p-alt:#f7f9fc;
	--p-acento:#1769aa;
	--p-acento-osc:#105487;
	--p-acento-claro:#edf6fc;
	max-width:1080px;
	margin:0 auto;
	color:var(--p-texto);
	line-height:1.6;
	font-family:inherit;
}

#edu-portada *{box-sizing:border-box}
#edu-portada [hidden]{display:none!important}


/* ---------- Presentación ---------- */

#edu-portada .p-hero{
	position:relative;
	overflow:hidden;
	margin-bottom:14px;
	padding:46px 28px 40px;
	border:1px solid var(--p-linea);
	border-radius:22px;
	background:
		radial-gradient(760px 300px at 15% -10%, #e8f2fb 0%, rgba(232,242,251,0) 62%),
		radial-gradient(620px 280px at 88% 4%, #eef7f1 0%, rgba(238,247,241,0) 60%),
		#fff;
	text-align:center;
}

#edu-portada .p-eyebrow{
	display:inline-block;
	margin-bottom:12px;
	padding:5px 14px;
	border:1px solid #cfe3f4;
	border-radius:999px;
	background:#fff;
	color:var(--p-acento);
	font-size:11px;
	font-weight:700;
	letter-spacing:.12em;
	text-transform:uppercase;
}

#edu-portada .p-hero h1{
	max-width:16ch;
	margin:0 auto 14px;
	color:var(--p-tinta);
	font-size:clamp(30px,4.6vw,46px);
	line-height:1.08;
	font-weight:700;
	letter-spacing:-.032em;
	text-wrap:balance;
}

#edu-portada .p-hero > p{
	max-width:56ch;
	margin:0 auto;
	font-size:17px;
	color:var(--p-suave);
	text-wrap:pretty;
}


/* ---------- Cifras ---------- */

#edu-portada .p-cifras{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:10px 34px;
	margin-top:22px;
}

#edu-portada .p-cifra{text-align:center}

#edu-portada .p-cifra b{
	display:block;
	color:var(--p-tinta);
	font-size:26px;
	font-weight:700;
	letter-spacing:-.02em;
	font-variant-numeric:tabular-nums;
}

#edu-portada .p-cifra span{
	font-size:12px;
	letter-spacing:.06em;
	text-transform:uppercase;
	color:var(--p-suave);
}


/* ---------- Buscador ---------- */

#edu-portada .p-buscador{
	max-width:640px;
	margin:26px auto 0;
}

#edu-portada .p-campo{position:relative}

#edu-portada .p-lupa{
	position:absolute;
	top:50%;
	left:19px;
	width:19px;
	height:19px;
	transform:translateY(-50%);
	fill:var(--p-suave);
	pointer-events:none;
}

#edu-portada .p-input{
	width:100%;
	padding:15px 20px 15px 48px;
	border:1px solid #d7e3ee;
	border-radius:999px;
	background:#fff;
	font:inherit;
	font-size:16.5px;
	color:var(--p-tinta);
	box-shadow:0 2px 10px rgba(16,24,40,.06);
}

#edu-portada .p-input::placeholder{color:#9aa5b4}

#edu-portada .p-input:focus{
	outline:none;
	border-color:var(--p-acento);
	box-shadow:0 0 0 3px rgba(23,105,170,.15);
}

#edu-portada .p-chips{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:8px;
	margin-top:14px;
}

#edu-portada .p-chip{
	display:inline-flex;
	align-items:center;
	gap:7px;
	padding:6px 15px;
	border:1px solid var(--p-linea);
	border-radius:999px;
	background:#fff;
	font:inherit;
	font-size:14px;
	color:var(--p-texto);
	cursor:pointer;
	transition:border-color .15s,color .15s;
}

#edu-portada .p-chip:hover{
	border-color:var(--p-nivel,var(--p-acento));
	color:var(--p-nivel,var(--p-acento));
}

#edu-portada .p-chip.on{
	border-color:var(--p-nivel,var(--p-acento));
	color:var(--p-nivel,var(--p-acento));
	box-shadow:inset 0 0 0 1px var(--p-nivel,var(--p-acento));
	font-weight:600;
}

#edu-portada .p-punto{
	width:9px;
	height:9px;
	border-radius:50%;
	background:var(--p-nivel,var(--p-suave));
}

#edu-portada .p-estado{
	min-height:1.2em;
	margin:12px 0 0;
	font-size:13.5px;
	color:var(--p-suave);
}


/* ---------- Resultados ---------- */

#edu-portada .p-res{
	max-width:760px;
	margin:8px auto 0;
	padding:0;
	list-style:none;
	border-top:1px solid var(--p-linea);
	text-align:left;
}

#edu-portada .p-res li{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:10px;
	padding:11px 4px;
	border-bottom:1px solid var(--p-linea);
}

#edu-portada .p-res a{
	flex:1 1 240px;
	font-size:16px;
	color:var(--p-tinta);
	text-decoration:none;
}

#edu-portada .p-res a:hover{color:var(--p-acento);text-decoration:underline}

#edu-portada .p-res mark{
	padding:0 1px;
	background:#fdf3c8;
	color:inherit;
	border-radius:3px;
}

#edu-portada .p-meta{
	display:inline-flex;
	align-items:center;
	gap:5px;
	font-size:12.5px;
	color:var(--p-suave);
}

#edu-portada .p-meta svg{width:13px;height:13px;fill:currentColor;opacity:.7}

#edu-portada .p-nivel{
	padding:2px 10px;
	border:1px solid var(--p-nivel,var(--p-linea));
	border-radius:999px;
	font-size:11.5px;
	font-weight:600;
	white-space:nowrap;
	color:var(--p-nivel,var(--p-suave));
}

#edu-portada .p-mas{
	max-width:760px;
	margin:14px auto 0;
	text-align:center;
	font-size:13.5px;
	color:var(--p-suave);
}


/* ---------- Secciones ---------- */

#edu-portada .p-seccion{margin-top:52px}

#edu-portada .p-titulo{
	display:flex;
	align-items:baseline;
	gap:12px;
	margin:0 0 18px;
}

#edu-portada .p-titulo h2{
	margin:0;
	font-size:13px;
	font-weight:700;
	letter-spacing:.09em;
	text-transform:uppercase;
	color:var(--p-suave);
}

#edu-portada .p-titulo i{
	flex:1;
	height:1px;
	background:var(--p-linea);
}


/* ---------- Ramas ---------- */

#edu-portada .p-ramas{
	display:grid;
	gap:22px;
	grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
}

#edu-portada .p-rama{
	position:relative;
	overflow:hidden;
	padding:28px;
	border:1px solid var(--p-linea);
	border-radius:18px;
	background:#fff;
	box-shadow:0 1px 2px rgba(16,24,40,.05);
}

#edu-portada .p-rama::before{
	content:"";
	position:absolute;
	inset:0 0 auto;
	height:4px;
	background:linear-gradient(90deg,#059669,#2563eb,#7c3aed);
}

#edu-portada .p-rama.vacia::before{background:var(--p-linea)}

#edu-portada .p-rama-cab{
	display:flex;
	align-items:center;
	gap:13px;
	margin-bottom:4px;
}

#edu-portada .p-rama-icono{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	flex:none;
	width:44px;
	height:44px;
	border-radius:13px;
	background:linear-gradient(160deg,#eef6fc,#e0ecf7);
}

#edu-portada .p-rama-icono svg{width:22px;height:22px;fill:var(--p-acento)}

#edu-portada .p-rama h3{
	margin:0;
	font-size:20px;
	line-height:1.25;
	letter-spacing:-.018em;
}

#edu-portada .p-rama h3 a{color:var(--p-tinta);text-decoration:none}
#edu-portada .p-rama h3 a:hover{color:var(--p-acento)}

#edu-portada .p-rama-n{
	margin:0;
	font-size:13px;
	color:var(--p-suave);
	font-variant-numeric:tabular-nums;
}

#edu-portada .p-areas{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin:18px 0 0;
	padding:0;
	list-style:none;
}

#edu-portada .p-areas li{margin:0}

#edu-portada .p-area{
	display:inline-flex;
	align-items:center;
	gap:7px;
	padding:7px 13px;
	border:1px solid var(--p-linea);
	border-radius:999px;
	background:var(--p-alt);
	font-size:14px;
	color:var(--p-texto);
	text-decoration:none;
	transition:border-color .15s,background .15s,color .15s;
}

#edu-portada .p-area:hover{
	border-color:var(--p-acento);
	background:#fff;
	color:var(--p-acento);
}

#edu-portada .p-area svg{width:15px;height:15px;fill:currentColor;opacity:.75}
#edu-portada .p-area b{font-weight:400}
#edu-portada .p-area span{font-size:12px;color:var(--p-suave);font-variant-numeric:tabular-nums}

#edu-portada .p-rama-link{
	display:inline-flex;
	align-items:center;
	gap:7px;
	margin-top:20px;
	font-size:14.5px;
	font-weight:600;
	color:var(--p-acento);
	text-decoration:none;
}

#edu-portada .p-rama-link svg{width:16px;height:16px;fill:currentColor;transition:transform .15s}
#edu-portada .p-rama-link:hover svg{transform:translateX(3px)}

#edu-portada .p-proximo{
	margin:16px 0 0;
	padding:14px 16px;
	border:1px dashed var(--p-linea);
	border-radius:12px;
	background:var(--p-alt);
	font-size:14px;
	color:var(--p-suave);
}

#edu-portada .p-vacia{
	padding:26px;
	border:1px dashed var(--p-linea);
	border-radius:14px;
	background:var(--p-alt);
	font-size:14.5px;
	color:var(--p-suave);
	text-align:center;
}


/* ---------- Cómo funciona ---------- */

#edu-portada .p-como{
	display:grid;
	gap:16px;
	grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}

#edu-portada .p-paso{
	padding:24px;
	border:1px solid var(--p-linea);
	border-radius:16px;
	background:#fff;
}

#edu-portada .p-paso-num{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:32px;
	height:32px;
	margin-bottom:12px;
	border-radius:50%;
	background:var(--p-acento-claro);
	color:var(--p-acento);
	font-size:14px;
	font-weight:700;
}

#edu-portada .p-paso b{
	display:block;
	margin-bottom:6px;
	color:var(--p-tinta);
	font-size:16px;
	letter-spacing:-.01em;
}

#edu-portada .p-paso p{margin:0;font-size:14.5px;color:var(--p-suave)}


/* ---------- Cierre ---------- */

#edu-portada .p-cierre{
	display:flex;
	align-items:flex-start;
	gap:22px;
	margin-top:52px;
	padding:32px;
	border-radius:20px;
	background:var(--p-alt);
}

#edu-portada .p-marca{
	display:flex;
	align-items:center;
	justify-content:center;
	flex:none;
	width:62px;
	height:62px;
	border-radius:16px;
	background:var(--p-tinta);
	color:#fff;
	font-size:27px;
	font-weight:700;
	letter-spacing:-.02em;
}

#edu-portada .p-cierre-eyebrow{
	display:block;
	margin-bottom:7px;
	color:var(--p-acento);
	font-size:11px;
	font-weight:700;
	letter-spacing:.13em;
	text-transform:uppercase;
}

#edu-portada .p-cierre h2{
	margin:0 0 10px;
	color:var(--p-tinta);
	font-size:21px;
	line-height:1.3;
	font-weight:700;
	letter-spacing:-.02em;
	text-wrap:pretty;
}

#edu-portada .p-cierre p{margin:0;font-size:15px;color:var(--p-suave)}

#edu-portada .p-cta{margin-top:30px;text-align:center}

#edu-portada .p-boton{
	display:inline-flex;
	align-items:center;
	gap:9px;
	padding:14px 30px;
	border-radius:999px;
	background:var(--p-acento);
	color:#fff;
	font-size:16px;
	font-weight:600;
	text-decoration:none;
	transition:background .15s;
}

#edu-portada .p-boton:hover{background:var(--p-acento-osc);color:#fff}
#edu-portada .p-boton svg{width:17px;height:17px;fill:currentColor}


/* ---------- Pie ---------- */

#edu-portada .p-pie{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:space-between;
	gap:14px;
	margin-top:44px;
	padding-top:22px;
	border-top:1px solid var(--p-linea);
	font-size:13.5px;
	color:var(--p-suave);
}

#edu-portada .p-pie strong{
	display:block;
	color:var(--p-tinta);
	font-size:15px;
}

#edu-portada .p-pie-links{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
#edu-portada .p-pie-links a{color:var(--p-suave);text-decoration:none}
#edu-portada .p-pie-links a:hover{color:var(--p-acento);text-decoration:underline}


/* ---------- Foco ---------- */

#edu-portada a:focus-visible,
#edu-portada .p-chip:focus-visible,
#edu-portada .p-input:focus-visible{
	outline:2px solid var(--p-acento);
	outline-offset:2px;
	border-radius:8px;
}


/* ---------- Móvil ---------- */

@media(max-width:640px){
	#edu-portada .p-hero{padding:32px 18px 30px;border-radius:18px}
	#edu-portada .p-cifras{gap:8px 22px}
	#edu-portada .p-cifra b{font-size:22px}
	#edu-portada .p-rama{padding:22px}
	#edu-portada .p-cierre{flex-direction:column;gap:16px;padding:24px}
	#edu-portada .p-marca{width:52px;height:52px;font-size:23px}
	#edu-portada .p-pie{flex-direction:column;align-items:flex-start}
}

@media(prefers-reduced-motion:reduce){
	#edu-portada *{transition:none!important}
}