/* ==========================================================================
   Blog / Articulos - PC Emprende
   Estetica editorial para las entradas: paleta de marca (Marino #274A6E y
   Electrico #2E7CF6) y titulos en Manrope. Solo actua dentro de .pce-article
   para no afectar al resto del area de miembros.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@600;700;800&family=Inter:wght@400;500;600&display=swap');

.pce-article{
	--pce-navy:#274A6E;
	--pce-electric:#2E7CF6;
	--pce-electric-weak:#EAF2FE;
	--pce-ink:#111827;
	--pce-body:#374151;
	--pce-soft:#6B7280;
	--pce-line:#E6EAF0;
	--pce-bg-soft:#F6F8FB;
	--pce-radius:18px;
	--pce-shadow:0 1px 2px rgba(16,24,40,.05);
	--pce-shadow-pop:0 18px 48px rgba(39,74,110,.14);
	font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
	color:var(--pce-body);
	font-size:1.0625rem;
	line-height:1.75;
}

.pce-article__back{
	display:inline-flex;
	align-items:center;
	gap:.4rem;
	margin-bottom:1.25rem;
	font-size:.8125rem;
	font-weight:600;
	letter-spacing:.02em;
	text-transform:uppercase;
	color:var(--pce-electric);
	text-decoration:none;
}

.pce-article__back:hover{ color:var(--pce-navy); }

/* ---------- Cabecera del articulo ---------- */

.pce-article__head{
	max-width:760px;
	margin:0 auto 1.75rem;
}

.pce-article__kicker{
	display:inline-block;
	margin-bottom:.85rem;
	padding:.3rem .75rem;
	border-radius:999px;
	background:var(--pce-electric-weak);
	color:var(--pce-electric);
	font-size:.75rem;
	font-weight:700;
	letter-spacing:.08em;
	text-transform:uppercase;
}

.pce-article__title{
	margin:0 0 .75rem;
	font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
	font-weight:800;
	font-size:clamp(1.9rem,4.2vw,2.9rem);
	line-height:1.15;
	letter-spacing:-.02em;
	color:var(--pce-navy);
}

.pce-article__meta{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:.6rem;
	font-size:.875rem;
	color:var(--pce-soft);
}

.pce-article__meta span{
	display:inline-flex;
	align-items:center;
	gap:.35rem;
}

.pce-article__meta span + span::before{
	content:'';
	width:4px;
	height:4px;
	border-radius:50%;
	background:#C9D2DE;
	margin-right:.25rem;
}

/* ---------- Imagen destacada ---------- */

.pce-article__thumb{
	margin:0 0 2.5rem;
	border-radius:var(--pce-radius);
	overflow:hidden;
	box-shadow:var(--pce-shadow-pop);
	background:var(--pce-navy);
}

.pce-article__thumb img{
	display:block;
	width:100%;
	height:auto;
	aspect-ratio:16 / 9;
	object-fit:cover;
}

/* ---------- Cuerpo ---------- */

.pce-article__body{
	max-width:760px;
	margin:0 auto;
}

.pce-article__body > p:first-of-type{
	font-size:1.1875rem;
	line-height:1.7;
	color:var(--pce-ink);
}

.pce-article__body p{ margin:0 0 1.35rem; }

.pce-article__body h2{
	margin:3rem 0 1rem;
	padding-top:1.5rem;
	border-top:1px solid var(--pce-line);
	font-family:'Manrope',sans-serif;
	font-weight:800;
	font-size:clamp(1.45rem,2.6vw,1.95rem);
	line-height:1.25;
	letter-spacing:-.015em;
	color:var(--pce-navy);
}

.pce-article__body h3{
	margin:2rem 0 .6rem;
	font-family:'Manrope',sans-serif;
	font-weight:700;
	font-size:1.2rem;
	line-height:1.35;
	color:var(--pce-navy);
}

.pce-article__body a{
	color:var(--pce-electric);
	font-weight:500;
	text-decoration:none;
	border-bottom:2px solid var(--pce-electric-weak);
}

.pce-article__body a:hover{ border-bottom-color:var(--pce-electric); }

.pce-article__body strong{ color:var(--pce-ink); font-weight:600; }

.pce-article__body img{
	display:block;
	width:100%;
	height:auto;
	border-radius:var(--pce-radius);
	margin:2rem 0;
	box-shadow:var(--pce-shadow-pop);
}

/* ---------- Listas con icono ---------- */

.pce-article__body ul{
	list-style:none;
	margin:0 0 1.75rem;
	padding:0;
}

.pce-article__body ul li{
	position:relative;
	margin:0 0 .7rem;
	padding:.9rem 1rem .9rem 3.1rem;
	background:var(--pce-bg-soft);
	border:1px solid var(--pce-line);
	border-radius:14px;
	font-size:1rem;
}

.pce-article__body ul li::before{
	content:'';
	position:absolute;
	left:1rem;
	top:calc(.9rem + 2px);
	width:20px;
	height:20px;
	border-radius:50%;
	background:var(--pce-electric);
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E");
	background-size:13px;
	background-repeat:no-repeat;
	background-position:center;
}

.pce-article__body h2 + p,
.pce-article__body h3 + p{ margin-top:0; }

/* ---------- Cita destacada ---------- */

.pce-article__body blockquote,
.pce-article__body .wp-block-quote{
	position:relative;
	margin:2.25rem 0;
	padding:1.6rem 1.75rem 1.6rem 3.25rem;
	background:linear-gradient(135deg,var(--pce-navy),#1d3b58);
	border:0;
	border-radius:var(--pce-radius);
	box-shadow:var(--pce-shadow-pop);
}

.pce-article__body blockquote::before,
.pce-article__body .wp-block-quote::before{
	content:'\201C';
	position:absolute;
	left:1.05rem;
	top:.35rem;
	font-family:'Manrope',Georgia,serif;
	font-size:3.5rem;
	line-height:1;
	color:rgba(255,255,255,.35);
}

.pce-article__body blockquote p,
.pce-article__body .wp-block-quote p{
	margin:0;
	font-family:'Manrope',sans-serif;
	font-size:1.15rem;
	font-weight:600;
	line-height:1.55;
	color:#fff;
}

/* ---------- Tabla ---------- */

.pce-article__body .wp-block-table{ margin:2rem 0; }

.pce-article__body .wp-block-table table{
	width:100%;
	border-collapse:separate;
	border-spacing:0;
	overflow:hidden;
	border:1px solid var(--pce-line);
	border-radius:var(--pce-radius);
	font-size:.9375rem;
}

.pce-article__body .wp-block-table thead th{
	background:var(--pce-navy);
	color:#fff;
	font-weight:600;
	font-size:.8125rem;
	letter-spacing:.04em;
	text-transform:uppercase;
	text-align:left;
	padding:.9rem 1.1rem;
}

.pce-article__body .wp-block-table td{
	padding:.9rem 1.1rem;
	border-top:1px solid var(--pce-line);
	vertical-align:top;
}

.pce-article__body .wp-block-table tbody tr:nth-child(even) td{ background:var(--pce-bg-soft); }

/* ---------- Columnas como tarjetas ---------- */

.pce-article__body .wp-block-columns{
	gap:1rem;
	margin:1.5rem 0;
}

.pce-article__body .wp-block-columns .wp-block-column{
	position:relative;
	padding:1.4rem 1.35rem;
	background:#fff;
	border:1px solid var(--pce-line);
	border-top:3px solid var(--pce-electric);
	border-radius:var(--pce-radius);
	box-shadow:var(--pce-shadow);
}

.pce-article__body .wp-block-columns .wp-block-column h3{
	margin:.1rem 0 .5rem;
	font-size:1.0625rem;
}

.pce-article__body .wp-block-columns .wp-block-column p{
	margin:0;
	font-size:.9375rem;
	line-height:1.65;
	color:var(--pce-body);
}

/* ---------- Boton ---------- */

.pce-article__body .wp-block-button,
.pce-article__body .wp-block-buttons{
	margin:1.75rem 0 2.25rem;
}

.pce-article__body .wp-block-button__link{
	display:inline-flex;
	align-items:center;
	gap:.5rem;
	padding:.85rem 1.6rem;
	border-radius:999px;
	background:var(--pce-electric);
	color:#fff;
	font-family:'Manrope',sans-serif;
	font-weight:700;
	font-size:.9375rem;
	text-decoration:none;
	border-bottom:0;
	box-shadow:0 10px 24px rgba(46,124,246,.32);
	transition:transform .15s ease, background .15s ease;
}

.pce-article__body .wp-block-button__link:hover{
	transform:translateY(-2px);
	background:var(--pce-navy);
}

/* ---------- Pie del articulo ---------- */

.pce-article__foot{
	max-width:760px;
	margin:3.5rem auto 0;
	padding-top:1.75rem;
	border-top:1px solid var(--pce-line);
}

.pce-article__cta{
	padding:1.75rem;
	border-radius:var(--pce-radius);
	background:linear-gradient(135deg,var(--pce-navy),#1a3550);
	color:#fff;
}

.pce-article__cta h2{
	margin:0 0 .5rem;
	padding:0;
	border:0;
	font-family:'Manrope',sans-serif;
	font-weight:800;
	font-size:1.35rem;
	color:#fff;
}

.pce-article__cta p{
	margin:0 0 1.1rem;
	color:rgba(255,255,255,.86);
	font-size:.9375rem;
}

.pce-article__cta .wp-block-button__link{
	background:#fff;
	color:var(--pce-navy);
	box-shadow:none;
}

.pce-article__cta .wp-block-button__link:hover{
	background:var(--pce-electric-weak);
	color:var(--pce-navy);
}

/* ---------- Pie: navegacion entre entradas ---------- */

.pce-article__nav{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	gap:.75rem;
	margin-top:1.5rem;
}

.pce-article__nav a{
	flex:1 1 240px;
	padding:1rem 1.15rem;
	border:1px solid var(--pce-line);
	border-radius:14px;
	background:#fff;
	font-size:.875rem;
	font-weight:500;
	color:var(--pce-navy);
	text-decoration:none;
	border-bottom:1px solid var(--pce-line);
	transition:border-color .15s ease, box-shadow .15s ease;
}

.pce-article__nav a:hover{
	border-color:var(--pce-electric);
	box-shadow:var(--pce-shadow-pop);
}

.pce-article__nav span{
	display:block;
	margin-bottom:.2rem;
	font-size:.6875rem;
	font-weight:700;
	letter-spacing:.08em;
	text-transform:uppercase;
	color:var(--pce-soft);
}

/* ---------- Movil ---------- */

@media (max-width:640px){
	.pce-article{ font-size:1rem; line-height:1.7; }
	.pce-article__thumb{ border-radius:14px; margin-bottom:1.75rem; }
	.pce-article__body h2{ margin-top:2.25rem; }
	.pce-article__body ul li{ padding:.85rem .9rem .85rem 2.9rem; }
	.pce-article__body blockquote,
	.pce-article__body .wp-block-quote{ padding:1.35rem 1.25rem 1.35rem 2.75rem; }
	.pce-article__body .wp-block-columns .wp-block-column{ padding:1.15rem 1.05rem; }
	.pce-article__body .wp-block-table table{ font-size:.875rem; }
	.pce-article__body .wp-block-table thead th,
	.pce-article__body .wp-block-table td{ padding:.7rem .8rem; }
}
