/*
 * Home v3 (propuesta armada con los textos y las ideas del documento del cliente).
 * Los textos, imágenes y enlaces viven en la página y se editan desde el panel.
 * Aquí solo hay estilo y decoración. Reutiliza las piezas de home.css y home-v2.css.
 */

.pp3-pers > *,
.pp3-equipo__grid > *,
.pp3-cifras > * {
	margin-block: 0;
}

/* Cifras (bajo los botones del hero) */
.pp3-cifras {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	max-width: 34rem;
	margin-top: 0.6rem;
	width: 100%;
}

.pp3-cifra {
	padding: 1.1rem 0.8rem 1rem;
	border: 2px solid var(--pp-ink);
	border-radius: 20px;
	background: var(--pp-white);
	box-shadow: 5px 5px 0 var(--pp-sky);
	text-align: center;
}

.pp3-cifra > * {
	margin-block: 0;
}

.pp3-cifra:nth-child(2) {
	background: var(--pp-coral-soft);
	box-shadow: 5px 5px 0 var(--pp-ink);
	rotate: -1.5deg;
}

.pp3-cifra__num {
	color: var(--pp-ink);
	font-family: var(--pp-font-title);
	font-size: clamp(1.9rem, 5vw, 3rem);
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1;
}

.pp3-cifra__txt {
	margin-top: 0.35rem !important;
	color: #3f6068;
	font-size: clamp(0.85rem, 1.9vw, 1rem);
	font-weight: 600;
	line-height: 1.25;
}

/* ------------------------------------------------------------------ */
/* Equipo (tarjetas que giran)                                         */
/* ------------------------------------------------------------------ */

.pp3-equipo .pp-container {
	display: flex;
	flex-direction: column;
	gap: clamp(2rem, 4vw, 3rem);
}

.pp3-equipo .pp-container > * {
	margin-block: 0;
}

.pp3-fundadora {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
	max-width: 46rem;
	margin-inline: auto;
	text-align: center;
}

.pp3-fundadora > * {
	margin-block: 0;
}

.pp3-fundadora__texto {
	color: #2f4f57;
	font-size: clamp(1.05rem, 2.2vw, 1.2rem);
	line-height: 1.6;
}

.pp3-fundadora__cita {
	position: relative;
	padding: 1.2rem 1.6rem;
	border-left: 6px solid var(--pp-coral);
	border-radius: 0 16px 16px 0;
	background: var(--pp-paper);
	color: var(--pp-ink);
	font-family: var(--pp-font-title);
	font-size: clamp(1.15rem, 2.6vw, 1.5rem);
	font-weight: 700;
	line-height: 1.35;
	text-align: left;
}

.pp3-equipo__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.6rem;
}

.pp3-flip {
	display: grid;
	min-height: 19rem;
	color: var(--pp-ink);
}

.pp3-flip > * {
	grid-area: 1 / 1;
	margin-block: 0;
}

.pp3-flip__cara,
.pp3-flip__dorso {
	display: flex;
	flex-direction: column;
	border: 2px solid var(--pp-ink);
	border-radius: 24px;
	background: var(--pp-white);
	box-shadow: 6px 6px 0 var(--pp-sky);
	text-align: center;
}

/* Cara (foto completa arriba, datos abajo): la foto llega hasta el borde de la
   tarjeta, por eso el padding va en el texto, no en toda la tarjeta. */
.pp3-flip__cara {
	align-items: center;
	justify-content: flex-start;
	gap: 0;
	padding: 0 0 1.1rem;
	overflow: hidden;
}

/* Dorso (solo texto): centrado con el padding de siempre. */
.pp3-flip__dorso {
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	padding: 1.4rem 1.2rem;
	background: var(--pp-coral-soft);
	box-shadow: 6px 6px 0 var(--pp-ink);
}

.pp3-flip__cara > *,
.pp3-flip__dorso > * {
	margin-block: 0;
}

.pp3-flip__foto {
	width: 100%;
	aspect-ratio: 3 / 4;
	margin: 0 0 1rem !important;
}

.pp3-flip__foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 22%;
	filter: grayscale(100%);
}

.pp3-flip__nombre {
	padding-inline: 1.2rem;
	margin-bottom: 0.25rem !important;
	margin-top: 1rem !important;
	color: var(--pp-ink);
	font-family: var(--pp-font-title);
	font-size: 1.3rem;
	font-weight: 800;
	line-height: 1.15;
}

.pp3-flip__rol {
	padding-inline: 1.2rem;
	margin-bottom: 0.5rem !important;
	color: var(--pp-teal);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.3;
}

.pp3-flip__texto {
	color: var(--pp-ink);
	font-size: 1rem;
	line-height: 1.5;
}

/* Con JavaScript, la tarjeta gira. Sin él, se ven ambas caras, una bajo la otra. */
.pp-js .pp3-flip {
	cursor: pointer;
	perspective: 900px;
}

.pp-js .pp3-flip__cara,
.pp-js .pp3-flip__dorso {
	backface-visibility: hidden;
	transition: transform 0.6s cubic-bezier(0.3, 0.7, 0.3, 1);
}

.pp-js .pp3-flip__dorso {
	transform: rotateY(180deg);
}

.pp-js .pp3-flip.is-girada .pp3-flip__cara {
	transform: rotateY(-180deg);
}

.pp-js .pp3-flip.is-girada .pp3-flip__dorso {
	transform: rotateY(0);
}

.pp-js .pp3-flip:focus-visible {
	outline: 3px solid var(--pp-coral);
	outline-offset: 4px;
	border-radius: 24px;
}

/* ------------------------------------------------------------------ */
/* Testimonios                                                         */
/* ------------------------------------------------------------------ */

.pp3-testi .pp-container {
	display: flex;
	flex-direction: column;
	gap: clamp(2rem, 4vw, 3rem);
}

.pp3-testi .pp-container > * {
	margin-block: 0;
}

/* ------------------------------------------------------------------ */
/* Clase gratuita                                                      */
/* ------------------------------------------------------------------ */

.pp3-clase {
	background: var(--pp-sky);
	background-image: radial-gradient(rgb(255 255 255 / 0.45) 2px, transparent 2px);
	background-size: 28px 28px;
}

.pp3-clase__inner {
	position: relative;
	z-index: 1;
}

.pp3-clase__inner > * {
	margin-block: 0;
}

.pp3-clase .pp-stack {
	max-width: 44rem;
	margin-inline: auto;
	align-items: center;
	text-align: center;
}

.pp3-clase .pp-lead {
	color: var(--pp-ink);
}

.pp3-clase__gratis {
	display: inline-block;
	padding: 0.35rem 1.1rem;
	border: 2px solid var(--pp-ink);
	border-radius: 999px;
	background: var(--pp-white);
	box-shadow: 4px 4px 0 var(--pp-ink);
	color: var(--pp-ink);
	font-family: var(--pp-font-title);
	font-size: clamp(1.1rem, 2.6vw, 1.5rem);
	font-weight: 800;
	line-height: 1.2;
	rotate: -1.5deg;
}

.pp3-clase__form {
	width: 100%;
	max-width: 36rem;
}

.pp3-clase__form summary {
	display: block;
	width: fit-content;
	margin-inline: auto;
	padding: 1rem 2.4rem;
	border: 2px solid var(--pp-ink);
	border-radius: 999px;
	background: var(--pp-coral);
	box-shadow: 5px 5px 0 var(--pp-ink);
	color: var(--pp-ink);
	font-family: var(--pp-font-title);
	font-size: clamp(1.15rem, 3vw, 1.5rem);
	font-weight: 800;
	line-height: 1.2;
	cursor: pointer;
	list-style: none;
	transition: translate 0.15s ease, box-shadow 0.15s ease;
}

.pp3-clase__form summary::-webkit-details-marker {
	display: none;
}

.pp3-clase__form summary:hover {
	translate: -2px -2px;
	box-shadow: 7px 7px 0 var(--pp-ink);
}

.pp3-clase__form[open] summary {
	background: var(--pp-white);
}

.pp3-clase__form[open] > *:not(summary) {
	animation: pp3-aparece 0.4s ease both;
}

.pp3-clase__intro {
	margin: 1.5rem 0 1rem;
	color: var(--pp-ink);
	font-size: 1.1rem;
	font-weight: 600;
	text-align: center;
}

.pp3-clase__form .pp-form {
	padding: 1.6rem 1.4rem;
	border: 2px solid var(--pp-ink);
	border-radius: 24px;
	background: var(--pp-white);
	box-shadow: 6px 6px 0 var(--pp-ink);
	text-align: left;
}

.pp3-clase__form .pp-form__enviar {
	align-self: center;
}

/* El título del formulario es solo para las pestañas de las otras versiones */
.pp3-clase__form .pp-form__titulo {
	display: none;
}

.pp3-clase .pp-inscripcion__nota {
	max-width: 32rem;
	color: var(--pp-ink);
	font-size: 0.9rem;
}

.pp3-clase .pp3-stk--e { top: 10%; left: 7%; rotate: -10deg; --dur: 6s; }
.pp3-clase .pp3-stk--f { bottom: 9%; right: 7%; rotate: 8deg; --dur: 7s; --delay: -2s; }

@media (prefers-reduced-motion: reduce) {
	.pp-js .pp3-flip__cara,
	.pp-js .pp3-flip__dorso {
		transition: none;
	}

	.pp3-clase__form[open] > *:not(summary) {
		animation: none;
	}
}

/* ------------------------------------------------------------------ */
/* Piezas propias de la v3 sobre la base de la v2                      */
/* ------------------------------------------------------------------ */

.pp3-frase {
	margin: 0;
	padding-left: 1rem;
	border-left: 5px solid var(--pp-coral);
	color: var(--pp-white);
	font-family: var(--pp-font-title);
	font-size: clamp(1.15rem, 2.4vw, 1.5rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.25;
}

.pp3-personal .pp-container {
	display: flex;
	flex-direction: column;
	gap: clamp(2rem, 4vw, 3rem);
}

.pp3-personal .pp-container > * {
	margin-block: 0;
}

/* Sobre el celeste claro (pp-grid--paper) el manuscrito coral queda bajo el contraste mínimo: se usa teal. */
.pp3-personal .pp3-toque {
	color: var(--pp-teal);
}

.pp3-pers {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.6rem;
	max-width: 62rem;
	margin-inline: auto;
	width: 100%;
}

.pp3-pers__item {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: 1.8rem 1.6rem;
	border: 2px solid var(--pp-ink);
	border-radius: 24px;
	background: var(--pp-white);
	box-shadow: 6px 6px 0 var(--pp-sky);
}

.pp3-pers__item > * {
	margin-block: 0;
}

.pp3-pers__item:nth-child(2) {
	background: var(--pp-coral-soft);
	box-shadow: 6px 6px 0 var(--pp-ink);
	rotate: -1deg;
}

.pp3-pers__icono {
	width: 4.6rem;
	margin: 0;
}

.pp3-pers__icono img {
	display: block;
	width: 100%;
	height: auto;
}

.pp3-pers__titulo {
	color: var(--pp-ink);
	font-family: var(--pp-font-title);
	font-size: 1.35rem;
	font-weight: 800;
	line-height: 1.15;
}

.pp3-pers__texto {
	color: #2f4f57;
	line-height: 1.5;
}

.pp3-equipo__grid .pp3-flip:nth-child(odd) {
	rotate: -1.2deg;
}

.pp3-equipo__grid .pp3-flip:nth-child(even) {
	rotate: 1.2deg;
}

@media (max-width: 1024px) {
	.pp3-equipo__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 820px) {
	.pp3-pers {
		grid-template-columns: 1fr;
		max-width: 28rem;
	}
}

@media (max-width: 600px) {
	.pp3-equipo__grid {
		grid-template-columns: 1fr;
	}

	.pp3-equipo__grid .pp3-flip {
		max-width: 24rem;
		width: 100%;
		margin-inline: auto;
	}

	.pp3-cifras {
		gap: 0.6rem;
	}

	.pp3-clase .pp3-stk--e,
	.pp3-clase .pp3-stk--f {
		display: none;
	}
}

.pp3-stk {
	position: absolute;
	z-index: 0;
	width: clamp(64px, 9vw, 120px);
	pointer-events: none;
}

.pp3-toque {
	margin: 0;
	color: var(--pp-coral);
	font-family: var(--pp-font-hand);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	rotate: -1deg;
}

/* Sin JavaScript la sugerencia no tiene sentido (se ven ambas caras). */
html:not(.pp-js) .pp3-toque {
	display: none;
}

/* Hero de la v3: el titular del cliente es más largo que el de la v2, así que va algo más chico. */
.pp3-hero .pp2-hero__title {
	font-size: clamp(2.2rem, 4.8vw, 3.9rem);
	line-height: 1.38;
}

.pp3-hero .pp-btns .wp-block-button__link {
	font-size: 1.05rem;
}

/* El manuscrito coral no tiene contraste sobre el celeste: aquí va en tinta. */
.pp3-clase .pp-kicker {
	color: var(--pp-ink);
}

/* Tarjeta de la clase gratuita (formato de la v2): el botón despliega el formulario dentro de ella. */
.pp3-panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.2rem;
	text-align: center;
}

.pp3-panel > * {
	margin-block: 0;
}

.pp3-panel .pp3-clase__gratis {
	font-size: clamp(1.15rem, 2.4vw, 1.4rem);
}

.pp3-panel__texto {
	color: #3f6068;
	font-size: 1.05rem;
}

.pp3-panel .pp3-clase__form {
	max-width: none;
}

.pp3-panel .pp3-clase__form summary {
	font-size: clamp(1.05rem, 2.6vw, 1.3rem);
}

.pp3-panel .pp3-clase__intro {
	margin-top: 1.4rem;
}

/* Dentro de la tarjeta el formulario no lleva marco propio */
.pp3-panel .pp3-clase__form .pp-form {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.pp3-panel {
	align-self: center;
}

/* Contraste: el manuscrito coral no cumple sobre el celeste claro; ahí va en teal. */
.pp3-personal .pp-kicker,
.pp3-testi .pp-kicker,
.pp2-cursos .pp-kicker {
	color: var(--pp-teal);
}

/* Tarjeta "Historia y Ciencias Sociales": el birrete no debe tapar el texto en la columna angosta. */
.pp2-cursos .pp2-curso--c > .pp2-stk {
	width: 84px;
}

/* ------------------------------------------------------------------ */
/* Hero: palabras que rotan (solo se ven al editar; en el sitio las mueve el script) */
/* ------------------------------------------------------------------ */

.pp3-palabras,
.pp3-palabras-nota {
	display: none;
}

.editor-styles-wrapper .pp3-palabras-nota {
	display: block;
	margin: 1rem 0 0;
	padding: 0.6rem 0.9rem 0;
	border: 2px dashed var(--pp-sky);
	border-bottom: 0;
	border-radius: 12px 12px 0 0;
	color: var(--pp-teal);
	font-size: 0.85rem;
}

.editor-styles-wrapper .pp3-palabras {
	display: block;
	margin: 0;
	padding: 0.4rem 0.9rem 0.8rem 2.2rem;
	border: 2px dashed var(--pp-sky);
	border-top: 0;
	border-radius: 0 0 12px 12px;
}

.pp3-hero .pp2-hero__title mark {
	transition: opacity 0.4s ease, translate 0.4s ease;
}

.pp3-hero .pp2-hero__title mark.is-saliendo {
	opacity: 0;
	translate: 0 0.25em;
}

/* ------------------------------------------------------------------ */
/* Metodología: el subrayado ondulado no debe chocar con el texto de abajo */
/* ------------------------------------------------------------------ */

.pp2-metodo .wp-block-heading.is-style-ondas {
	margin-bottom: 0.9rem;
	padding-bottom: 0.35em;
}

/* ------------------------------------------------------------------ */
/* Equipo: tarjetas de colores tipo polaroid, con movimiento            */
/* ------------------------------------------------------------------ */

.pp3-equipo {
	padding-bottom: clamp(4.5rem, 8vw, 6.5rem);
}

.pp3-equipo .pp-container {
	position: relative;
	z-index: 1;
}

.pp3-flip {
	min-height: 21rem;
	transition: translate 0.25s ease, rotate 0.25s ease;
}

@media (hover: hover) {
	.pp3-flip:hover {
		translate: 0 -8px;
		rotate: 0deg !important;
	}
}

/* cinta adhesiva sobre cada tarjeta (decorativa) */
.pp3-flip::before {
	content: "";
	position: absolute;
	z-index: 2;
	top: -14px;
	left: 50%;
	width: 84px;
	height: 26px;
	translate: -50% 0;
	rotate: -3deg;
	background: rgb(255 87 87 / 0.6);
	border-inline: 2px dashed rgb(255 255 255 / 0.85);
	pointer-events: none;
}

.pp3-flip {
	position: relative;
}

.pp3-flip:nth-child(2)::before,
.pp3-flip:nth-child(4)::before {
	background: rgb(107 189 205 / 0.75);
	rotate: 3deg;
}

/* caras de colores distintos */
.pp3-flip:nth-child(1) .pp3-flip__cara {
	background: var(--pp-coral-soft);
	box-shadow: 7px 7px 0 var(--pp-ink);
}

.pp3-flip:nth-child(2) .pp3-flip__cara {
	background: var(--pp-white);
}

.pp3-flip:nth-child(3) .pp3-flip__cara {
	background: var(--pp-paper);
	box-shadow: 7px 7px 0 var(--pp-teal);
}

.pp3-flip:nth-child(4) .pp3-flip__cara {
	background: var(--pp-white);
	box-shadow: 7px 7px 0 var(--pp-coral);
}

.pp3-flip__dorso {
	background: var(--pp-ink);
	box-shadow: 7px 7px 0 var(--pp-coral);
}

.pp3-flip__dorso .pp3-flip__texto {
	color: var(--pp-white);
	font-family: var(--pp-font-title);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.4;
}

.pp3-flip__foto {
	width: 8.4rem;
	height: 8.4rem;
}

.pp3-flip__foto img {
	border: 3px solid var(--pp-ink);
	background: var(--pp-white);
}

.pp3-flip__chapa {
	margin: 0;
	padding: 0.15rem 0.8rem;
	border: 2px solid var(--pp-ink);
	border-radius: 999px;
	background: var(--pp-coral);
	color: var(--pp-ink);
	font-family: var(--pp-font-title);
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* indicador de giro (decorativo, solo con JavaScript) */
.pp-js .pp3-flip__cara::after {
	content: "\21BB";
	position: absolute;
	right: 0.9rem;
	bottom: 0.7rem;
	color: var(--pp-teal);
	font-size: 1.3rem;
	line-height: 1;
}

.pp3-flip__cara {
	position: relative;
}

.pp3-equipo .pp3-stk--g { top: 8%; left: 5%; rotate: -12deg; --dur: 6s; }
.pp3-equipo .pp3-stk--h { top: 12%; right: 6%; rotate: 8deg; --dur: 7s; --delay: -2s; }
.pp3-equipo .pp3-stk--i { bottom: 6%; left: 8%; rotate: 10deg; --dur: 8s; --delay: -1s; width: clamp(50px, 6vw, 84px); }

@media (max-width: 820px) {
	.pp3-equipo .pp3-stk--g,
	.pp3-equipo .pp3-stk--h {
		width: 56px;
	}

	.pp3-equipo .pp3-stk--i {
		display: none;
	}
}

/* ------------------------------------------------------------------ */
/* Metodología: encabezado centrado, pasos a la izquierda, foto con nota a la derecha */
/* ------------------------------------------------------------------ */

.pp3-metodo__cab {
	max-width: 46rem;
	margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
}

.pp3-metodo__cab .pp-title {
	padding-bottom: 0.4em;
	line-height: 1.15;
}

.pp3-metodo__cab .pp-lead {
	color: #cfe6eb;
}

.pp3-metodo .pp2-metodo__foto {
	margin-bottom: 4.5rem;
}

/* La frase clave, como nota pegada sobre la foto (rellena el costado derecho) */
.pp3-nota {
	position: absolute;
	right: -14%;
	bottom: -14%;
	z-index: 3;
	width: 78%;
	margin: 0;
	padding: 1.1rem 1.3rem;
	border: 2px solid var(--pp-ink);
	border-radius: 6px 6px 22px 6px;
	background: var(--pp-coral-soft);
	box-shadow: 6px 6px 0 var(--pp-ink);
	color: var(--pp-ink);
	font-family: var(--pp-font-title);
	font-size: clamp(1rem, 1.5vw, 1.2rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.3;
	rotate: 2.5deg;
}

@media (max-width: 1024px) {
	.pp3-nota {
		right: -4%;
		bottom: -12%;
		width: 84%;
	}
}

@media (max-width: 600px) {
	.pp3-nota {
		right: -2%;
		bottom: -16%;
		width: 88%;
		font-size: 1rem;
	}

	.pp3-metodo .pp2-metodo__foto {
		margin-bottom: 5.5rem;
	}
}

/* ================================================================== */
/* Ronda 4 (reunión 2026-09-25): más serio, menos decoración           */
/* ================================================================== */

/* Hero: imágenes más juntas y sin adornos flotantes */
.pp3-hero .pp2-collage {
	aspect-ratio: 1 / 1.14;
}

.pp3-hero .pp2-collage .pp2-polaroid--a {
	top: 0;
	width: 54%;
}

.pp3-hero .pp2-collage .pp2-polaroid--b {
	width: 52%;
}

.pp3-hero .pp2-collage::after {
	display: none;
}

/* Banda: ahora lleva las cifras */
.pp2-marquee p strong {
	color: var(--pp-ink);
	font-size: 1.5em;
	letter-spacing: 0.02em;
}

/* ------------------------------------------------------------------ */
/* Hecho a tu medida: tarjetas que giran (cursor, clic o toque)          */
/* ------------------------------------------------------------------ */

.pp3-flip--pers {
	min-height: 17rem;
	rotate: 0deg !important;
}

.pp3-flip--pers::before {
	display: none;
}

.pp3-flip--pers .pp3-flip__cara,
.pp3-flip--pers .pp3-flip__dorso {
	border: 2px solid var(--pp-ink);
	border-radius: 22px;
}

.pp3-flip--pers .pp3-flip__cara {
	background: var(--pp-white);
	box-shadow: 6px 6px 0 var(--pp-sky);
	/* Sin foto (a diferencia de las tarjetas del equipo), el ícono y el título quedan
	   centrados en toda la tarjeta en vez de pegados arriba: mobile y escritorio. */
	justify-content: center;
	align-items: center;
	gap: 0.9rem;
	padding: 1.6rem 1.4rem;
}

.pp3-flip--pers:nth-child(2) .pp3-flip__cara {
	background: var(--pp-coral-soft);
	box-shadow: 6px 6px 0 var(--pp-ink);
}

.pp3-flip--pers .pp3-flip__dorso {
	background: var(--pp-ink);
	box-shadow: 6px 6px 0 var(--pp-coral);
}

.pp3-flip--pers .pp3-flip__dorso .pp3-flip__texto {
	color: var(--pp-white);
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.5;
}

.pp3-idea__icono {
	width: 5rem;
	margin: 0;
}

.pp3-idea__icono img {
	display: block;
	width: 100%;
	height: auto;
}

@media (hover: hover) {
	.pp-js .pp3-flip--pers:hover .pp3-flip__cara {
		transform: rotateY(-180deg);
	}

	.pp-js .pp3-flip--pers:hover .pp3-flip__dorso {
		transform: rotateY(0);
	}

	.pp3-flip--pers:hover {
		translate: 0 0;
	}
}

@media (max-width: 820px) {
	.pp3-flip--pers {
		min-height: 14rem;
	}
}

/* ------------------------------------------------------------------ */
/* Cursos: Lectora alta a la izquierda; Matemáticas ancha arriba a la    */
/* derecha; Ciencias e Historia debajo, una al lado de la otra            */
/* ------------------------------------------------------------------ */

.pp3-cursos .pp2-bento {
	grid-template-columns: repeat(10, 1fr);
	gap: 1.6rem;
}

.pp3-cursos .pp2-curso--a {
	grid-column: span 4;
	grid-row: span 2;
}

.pp3-cursos .pp2-curso--b {
	grid-column: span 6;
	grid-row: auto;
}

.pp3-cursos .pp2-curso--c,
.pp3-cursos .pp2-curso--d {
	grid-column: span 3;
	grid-row: auto;
}

.pp3-cursos .pp2-curso--b {
	min-height: 18rem;
}

.pp3-cursos .pp2-curso--c,
.pp3-cursos .pp2-curso--d {
	min-height: 16rem;
}

/* Ciencias en celeste e Historia en blanco */
.pp3-cursos .pp2-curso--c {
	--fondo: var(--pp-sky);
	--texto: var(--pp-ink);
	--sombra: var(--pp-ink);
}

.pp3-cursos .pp2-curso--d {
	--fondo: var(--pp-white);
	--texto: var(--pp-ink);
	--sombra: var(--pp-sky);
}

@media (max-width: 1024px) {
	.pp3-cursos .pp2-bento {
		grid-template-columns: repeat(6, 1fr);
	}

	.pp3-cursos .pp2-curso--a,
	.pp3-cursos .pp2-curso--b {
		grid-column: span 6;
		grid-row: auto;
	}

	.pp3-cursos .pp2-curso--c,
	.pp3-cursos .pp2-curso--d {
		grid-column: span 3;
	}

	/* La tarjeta "a" pasa a ocupar todo el ancho y pierde su segunda fila: sin esto,
	   conserva las proporciones de la columna angosta (texto al 88%, sticker grande)
	   y el texto se mete bajo la ilustración. */
	.pp3-cursos .pp2-curso--a {
		min-height: 20rem;
	}

	.pp3-cursos .pp2-curso--a > * {
		max-width: 62%;
	}

	.pp3-cursos .pp2-curso--a > .pp2-stk {
		width: 34%;
	}
}

@media (max-width: 720px) {
	.pp3-cursos .pp2-bento {
		grid-template-columns: 1fr;
	}

	.pp3-cursos .pp2-curso--a,
	.pp3-cursos .pp2-curso--b,
	.pp3-cursos .pp2-curso--c,
	.pp3-cursos .pp2-curso--d {
		grid-column: auto;
		min-height: 15rem;
	}
}

/* ------------------------------------------------------------------ */
/* Equipo: sobrio, tarjetas derechas, sin cinta ni colores                */
/* ------------------------------------------------------------------ */

.pp3-equipo__grid .pp3-flip:nth-child(n) {
	rotate: 0deg;
}

.pp3-equipo .pp3-flip::before {
	display: none;
}

.pp3-equipo .pp3-flip {
	min-height: auto;
}

.pp3-equipo .pp3-flip__cara,
.pp3-equipo .pp3-flip:nth-child(n) .pp3-flip__cara {
	border: 1px solid rgb(1 59 69 / 0.2);
	border-radius: 14px;
	background: var(--pp-white);
	box-shadow: 0 14px 28px -18px rgb(1 59 69 / 0.4);
}

.pp3-equipo .pp3-flip__dorso {
	border: 1px solid var(--pp-ink);
	border-radius: 14px;
	background: var(--pp-ink);
	box-shadow: 0 14px 28px -18px rgb(1 59 69 / 0.5);
}

/* Marco: la misma cuadrícula de puntos que usa el resto del sitio (pp-grid--paper),
   clara en vez de oscura. Es un grupo nativo de WordPress (no una clase fija): el color
   de fondo de cada tarjeta se elige desde el panel del bloque (Color > Fondo) y queda
   como estilo en línea, por eso aquí solo se define el patrón de puntos y el tamaño —
   el color que se ve por defecto es el que trae cada tarjeta al crearla. */
.pp3-equipo .pp3-flip__marco {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	box-sizing: border-box;
	padding: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	overflow: hidden;
	background-image:
		linear-gradient(rgb(255 255 255 / 0.8) 2px, transparent 2px),
		linear-gradient(90deg, rgb(255 255 255 / 0.8) 2px, transparent 2px);
	background-size: 26px 26px;
}

/* La foto (la figura del bloque imagen) llena el marco completo; sin esto, al ser un
   hijo flex del marco quedaría del tamaño de la imagen en vez de ocupar todo el espacio. */
.pp3-equipo .pp3-flip__foto:not(.pp3-flip__foto--marcador) {
	width: 100%;
	height: 100%;
	margin: 0 !important;
}

/* Foto real: llena el marco completo (recorte automático si la foto no calza exacto
   en proporción 3:4). "center" en vez de "arriba": si alguien sube una foto nueva
   desde el panel con más o menos aire sobre la cabeza que las actuales, el recorte
   se reparte parejo en vez de amontonarse abajo. */
.pp3-equipo .pp3-flip__foto:not(.pp3-flip__foto--marcador) img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border: none;
	border-radius: 0;
	background: transparent;
}

.pp3-equipo .pp3-flip__foto--marcador img {
	width: 88%;
	height: auto;
	aspect-ratio: 1;
	object-fit: contain;
	object-position: center bottom;
	filter: none;
	border: none;
	background: transparent;
}

.pp3-equipo .pp3-flip__nombre {
	font-size: 1.2rem;
}

.pp3-equipo .pp3-flip__chapa {
	border: 1px solid var(--pp-teal);
	background: transparent;
	color: var(--pp-teal);
	font-size: 0.72rem;
}

.pp3-equipo .pp3-flip__dorso .pp3-flip__texto {
	font-size: 1rem;
	font-weight: 600;
}

@media (hover: hover) {
	.pp3-equipo .pp3-flip:hover {
		translate: 0 -4px;
	}
}

/* Ajustes de la ronda 4 */

/* Cursos: en las tarjetas chicas el título es algo menor y el sticker no pisa el texto */
.pp3-cursos .pp2-curso--c .pp2-curso__titulo,
.pp3-cursos .pp2-curso--d .pp2-curso__titulo {
	font-size: clamp(1.4rem, 2.2vw, 1.9rem);
	line-height: 1.1;
}

.pp3-cursos .pp2-curso--c > .pp2-stk,
.pp3-cursos .pp2-curso--d > .pp2-stk {
	width: 72px;
}

.pp3-cursos .pp2-curso--c .pp2-curso__texto,
.pp3-cursos .pp2-curso--d .pp2-curso__texto {
	padding-right: 3rem;
}

/* Hecho a tu medida: solo la tarjeta del medio es rosada (evita la regla de colores del equipo) */
.pp3-flip--pers.pp3-flip:nth-child(n) .pp3-flip__cara {
	background: var(--pp-white);
	box-shadow: 6px 6px 0 var(--pp-sky);
}

.pp3-flip--pers.pp3-flip:nth-child(2) .pp3-flip__cara {
	background: var(--pp-coral-soft);
	box-shadow: 6px 6px 0 var(--pp-ink);
}

/* Equipo: las fotos y los nombres quedan alineados aunque un cargo ocupe más líneas */
.pp3-equipo .pp3-flip__cara {
	justify-content: flex-start;
	/*padding-top: 2rem;*/
}

/* ------------------------------------------------------------------ */
/* Celular y tablet (una sola columna): todo centrado                    */
/* ------------------------------------------------------------------ */

@media (max-width: 900px) {
	/* Inicio: rótulo, título, texto y botones */
	.pp3-hero .pp2-hero__copy {
		align-items: center;
		text-align: center;
	}

	.pp3-hero .pp-kicker,
	.pp3-hero .pp-lead {
		margin-inline: auto;
	}

	.pp3-hero .pp-btns {
		justify-content: center;
	}

	.pp3-hero .pp2-collage {
		justify-self: center;
	}

	/* Metodología: "paso a paso" y el bloque de pasos */
	.pp2-metodo__inner .pp-stack {
		align-items: center;
	}

	.pp2-metodo__inner .pp-stack > .pp-kicker {
		margin-inline: auto;
	}

	/* Contacto: rótulo, título, textos y foto */
	.pp2-inscripcion .pp-inscripcion__inner > :first-child {
		align-items: center;
		text-align: center;
	}

	.pp2-inscripcion .pp-kicker,
	.pp2-inscripcion .pp-lead,
	.pp2-inscripcion .pp-inscripcion__nota,
	.pp2-inscripcion .wp-block-heading.is-style-trazo {
		margin-inline: auto;
	}

	.pp2-inscripcion .pp2-inscripcion__foto {
		margin-inline: auto;
	}
}

/* ================================================================== */
/* Página "Cursos" (plantilla "Página interior")                        */
/* Todo el texto es del cliente; aquí solo hay estilo.                  */
/* ================================================================== */

.ppc-paes .pp-container,
.ppc-principales .pp-container,
.ppc-electivos .pp-container,
.ppc-como .pp-container,
.ppc-incluye .pp-container,
.ppc-testi .pp-container,
.ppc-faq .pp-container,
.ppc-cierre .pp-container {
	display: flex;
	flex-direction: column;
	gap: clamp(2rem, 4vw, 3rem);
}

.ppc-paes .pp-container > *,
.ppc-principales .pp-container > *,
.ppc-electivos .pp-container > *,
.ppc-como .pp-container > *,
.ppc-incluye .pp-container > *,
.ppc-testi .pp-container > *,
.ppc-faq .pp-container > *,
.ppc-cierre .pp-container > *,
.ppc-pruebas > *,
.ppc-cursos > *,
.ppc-cols > *,
.ppc-eles > *,
.ppc-ruta > *,
.ppc-inc > *,
.ppc-acordeones > *,
.ppc-sellos > * {
	margin-block: 0;
}

.ppc-paes .pp-kicker,
.ppc-principales .pp-kicker,
.ppc-electivos .pp-kicker,
.ppc-incluye .pp-kicker,
.ppc-testi .pp-kicker,
.ppc-faq .pp-kicker {
	color: var(--pp-teal);
}

/* --- Portada: sellos de confianza --- */
.ppc-sellos {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.ppc-sello {
	margin: 0;
	padding: 0.35rem 0.95rem;
	border: 2px solid var(--pp-ink);
	border-radius: 999px;
	background: var(--pp-white);
	color: var(--pp-ink);
	font-family: var(--pp-font-title);
	font-size: 0.85rem;
	font-weight: 700;
}

/* --- ¿Qué es la PAES? --- */
.ppc-pruebas {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1.1rem;
}

.ppc-prueba {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	padding: 1.4rem 1rem 1.2rem;
	border: 2px solid var(--pp-ink);
	border-radius: 20px;
	background: var(--pp-white);
	box-shadow: 5px 5px 0 var(--pp-sky);
	text-align: center;
}

.ppc-prueba > * {
	margin-block: 0;
}

.ppc-prueba--oblig {
	background: var(--pp-coral-soft);
	box-shadow: 5px 5px 0 var(--pp-coral);
}

.ppc-prueba__ico {
	width: 4.4rem;
	margin: 0;
}

.ppc-prueba__ico img {
	display: block;
	width: 100%;
	height: auto;
}

.ppc-prueba__tipo {
	padding: 0.1rem 0.7rem;
	border: 2px solid var(--pp-ink);
	border-radius: 999px;
	background: var(--pp-white);
	color: var(--pp-ink);
	font-family: var(--pp-font-title);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ppc-prueba__nombre {
	color: var(--pp-ink);
	font-family: var(--pp-font-title);
	font-size: 1.05rem;
	font-weight: 800;
	line-height: 1.2;
}

.ppc-prueba__datos {
	display: flex;
	gap: 1.1rem;
	margin-top: auto;
}

.ppc-prueba__datos > * {
	margin-block: 0;
}

.ppc-prueba__num {
	margin: 0;
	color: var(--pp-ink);
	font-family: var(--pp-font-title);
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1.1;
}

.ppc-prueba__lbl {
	margin: 0;
	color: #3f6068;
	font-size: 0.78rem;
}

.ppc-escala {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.6rem 1.2rem;
	padding: 1.4rem 1.6rem;
	border: 2px solid var(--pp-ink);
	border-radius: 20px;
	background: var(--pp-ink);
	color: var(--pp-white);
}

.ppc-escala > * {
	margin-block: 0;
}

.ppc-escala__txt {
	margin: 0;
	font-weight: 600;
}

.ppc-escala__barra {
	display: flex;
	flex: 1 1 16rem;
	align-items: center;
	gap: 0.8rem;
	max-width: 30rem;
}

.ppc-escala__barra > * {
	margin-block: 0;
}

.ppc-escala__num {
	margin: 0;
	color: var(--pp-white);
	font-family: var(--pp-font-title);
	font-size: 1.6rem;
	font-weight: 800;
}

.ppc-escala__linea {
	flex: 1;
	height: 10px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--pp-sky), var(--pp-coral));
}

.ppc-fuente {
	margin: 0;
	color: #3f6068;
	font-size: 0.85rem;
	text-align: center;
}

/* --- Cursos principales (con foto) --- */
.ppc-cursos {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.ppc-curso {
	display: grid;
	grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
	gap: 2rem 2.4rem;
	align-items: center;
	padding: clamp(1.4rem, 3vw, 2.2rem);
	border: 2px solid var(--pp-ink);
	border-radius: 24px;
	background: var(--pp-coral-soft);
	box-shadow: 7px 7px 0 var(--pp-coral);
	color: var(--pp-ink);
}

.ppc-curso--mate {
	background: var(--pp-ink);
	box-shadow: 7px 7px 0 var(--pp-sky);
	color: var(--pp-white);
}

.ppc-curso--mate .ppc-curso__foto {
	order: 2;
}

.ppc-curso--mate {
	grid-template-columns: minmax(0, 1fr) minmax(0, 17rem);
}

.ppc-curso > * {
	margin-block: 0;
}

.ppc-curso__foto {
	width: 100%;
	margin: 0;
}

.ppc-curso__foto img {
	display: block;
	width: 100%;
	height: auto;
}

.ppc-curso__cuerpo {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
}

.ppc-curso__cuerpo > * {
	margin-block: 0;
}

.ppc-curso__tit > * {
	margin-block: 0;
}

.ppc-curso__num {
	display: inline-block;
	margin-bottom: 0.5rem !important;
	padding: 0.1rem 0.7rem;
	border: 2px solid currentcolor;
	border-radius: 999px;
	font-family: var(--pp-font-title);
	font-size: 0.8rem;
	font-weight: 800;
}

.ppc-curso__nombre {
	color: inherit;
	font-family: var(--pp-font-title);
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.1;
}

.ppc-curso__lema {
	margin-top: 0.4rem !important;
	font-weight: 600;
	opacity: 0.85;
}

.ppc-cols {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.2rem;
	padding-top: 1.1rem;
	border-top: 2px solid rgb(1 59 69 / 0.2);
}

.ppc-curso--mate .ppc-cols {
	border-top-color: rgb(255 255 255 / 0.25);
}

.ppc-col > * {
	margin-block: 0;
}

.ppc-col__titulo {
	margin-bottom: 0.4rem !important;
	color: #b23a3a;
	font-family: var(--pp-font-title);
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ppc-curso--mate .ppc-col__titulo {
	color: var(--pp-coral);
}

.ppc-col__texto {
	font-size: 0.95rem;
	line-height: 1.55;
}

.ppc-curso__btn {
	justify-content: flex-start;
}

.ppc-curso--mate .ppc-curso__btn .wp-block-button__link {
	border-color: var(--pp-white);
	box-shadow: 4px 4px 0 var(--pp-white);
}

/* --- Cursos electivos (tarjetas ilustradas) --- */
.ppc-eles {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.6rem;
}

.ppc-ele {
	display: flex;
	gap: 1.3rem;
	align-items: flex-start;
	padding: 1.6rem;
	border: 2px solid var(--pp-ink);
	border-radius: 22px;
	background: var(--pp-white);
	box-shadow: 6px 6px 0 var(--pp-sky);
}

.ppc-ele > * {
	margin-block: 0;
}

.ppc-ele:nth-child(2) {
	background: var(--pp-sky);
	box-shadow: 6px 6px 0 var(--pp-ink);
}

.ppc-ele__ico {
	flex: none;
	width: 5.2rem;
	margin: 0;
}

.ppc-ele__ico img {
	display: block;
	width: 100%;
	height: auto;
}

.ppc-ele__cuerpo {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.ppc-ele__cuerpo > * {
	margin-block: 0;
}

.ppc-ele__tipo {
	color: #b23a3a;
	font-family: var(--pp-font-title);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ppc-ele:nth-child(2) .ppc-ele__tipo {
	color: var(--pp-ink);
}

.ppc-ele__nombre {
	color: var(--pp-ink);
	font-family: var(--pp-font-title);
	font-size: 1.4rem;
	font-weight: 800;
	line-height: 1.15;
}

.ppc-ele__lema {
	font-weight: 600;
}

.ppc-ele__txt {
	color: #2f4f57;
	font-size: 0.95rem;
	line-height: 1.55;
}

.ppc-ele:nth-child(2) .ppc-ele__txt,
.ppc-ele:nth-child(2) .ppc-ele__lema {
	color: var(--pp-ink);
}

/* --- Cinco pasos (fondo oscuro) --- */
.ppc-como .pp-title {
	color: var(--pp-white);
}

.ppc-ruta {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1.1rem;
}

.ppc-paso {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	padding: 1.3rem 1rem 1.3rem;
	border: 2px solid rgb(107 189 205 / 0.6);
	border-radius: 20px;
	background: rgb(255 255 255 / 0.07);
	text-align: center;
}

.ppc-paso > * {
	margin-block: 0;
}

.ppc-paso__ico {
	width: 4rem;
	margin: 0;
}

.ppc-paso__ico img {
	display: block;
	width: 100%;
	height: auto;
}

.ppc-paso__num {
	padding: 0.05rem 0.7rem;
	border-radius: 999px;
	background: var(--pp-coral);
	color: var(--pp-ink);
	font-family: var(--pp-font-title);
	font-size: 0.8rem;
	font-weight: 800;
}

.ppc-paso__titulo {
	color: var(--pp-white);
	font-family: var(--pp-font-title);
	font-size: 1.1rem;
	font-weight: 800;
	line-height: 1.2;
}

.ppc-paso__txt {
	color: #cfe6eb;
	font-size: 0.93rem;
	line-height: 1.5;
}

/* --- Qué incluye --- */
.ppc-inc {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.4rem;
}

.ppc-inc__item {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 0.3rem 1rem;
	padding: 1.3rem;
	border: 2px solid var(--pp-ink);
	border-radius: 20px;
	background: var(--pp-white);
	box-shadow: 5px 5px 0 var(--pp-sky);
}

.ppc-inc__item:nth-child(even) {
	background: var(--pp-paper);
}

.ppc-inc__item > * {
	margin-block: 0;
}

.ppc-inc__ico {
	flex: none;
	width: 3.6rem;
	margin: 0;
}

.ppc-inc__ico img {
	display: block;
	width: 100%;
	height: auto;
}

.ppc-inc__titulo {
	flex: 1 1 8rem;
	align-self: center;
	color: var(--pp-ink);
	font-family: var(--pp-font-title);
	font-size: 1.1rem;
	font-weight: 800;
	line-height: 1.2;
}

.ppc-inc__txt {
	flex: 1 1 100%;
	color: #2f4f57;
	font-size: 0.95rem;
	line-height: 1.5;
}

/* --- Preguntas frecuentes (acordeones) --- */
.ppc-acordeones {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	max-width: 46rem;
	margin-inline: auto;
	width: 100%;
}

.ppc-acordeon {
	border: 2px solid var(--pp-ink);
	border-radius: 18px;
	background: var(--pp-white);
	box-shadow: 5px 5px 0 var(--pp-sky);
	transition: box-shadow 0.2s ease, background-color 0.2s ease;
}

.ppc-acordeon[open] {
	background: var(--pp-paper);
	box-shadow: 5px 5px 0 var(--pp-coral);
}

.ppc-acordeon summary {
	position: relative;
	padding: 1rem 3.4rem 1rem 1.4rem;
	cursor: pointer;
	list-style: none;
}

.ppc-acordeon summary::-webkit-details-marker {
	display: none;
}

.ppc-acordeon summary strong {
	color: var(--pp-ink);
	font-family: var(--pp-font-title);
	font-size: clamp(1rem, 2.2vw, 1.2rem);
	font-weight: 800;
}

.ppc-acordeon summary::after {
	content: "+";
	position: absolute;
	top: 50%;
	right: 1.2rem;
	color: var(--pp-coral);
	font-family: var(--pp-font-title);
	font-size: 1.8rem;
	font-weight: 800;
	line-height: 1;
	translate: 0 -50%;
	transition: rotate 0.25s ease;
}

.ppc-acordeon[open] summary::after {
	rotate: 45deg;
}

.ppc-acordeon > .ppc-ele__txt {
	margin: 0;
	padding: 0 1.4rem 1.2rem;
}

/* --- Cierre --- */
.ppc-cierre {
	background: var(--pp-sky);
	background-image: radial-gradient(rgb(255 255 255 / 0.45) 2px, transparent 2px);
	background-size: 28px 28px;
}

.ppc-cierre .pp-kicker,
.ppc-cierre .pp-lead {
	color: var(--pp-ink);
}

.ppc-cierre .pp-btns {
	justify-content: center;
}

/* --- Responsive --- */
@media (max-width: 1100px) {
	.ppc-pruebas {
		grid-template-columns: repeat(3, 1fr);
	}

	.ppc-ruta {
		grid-template-columns: repeat(3, 1fr);
	}

	.ppc-inc {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 900px) {
	.ppc-hero .ppc-sellos {
		justify-content: center;
	}

	.ppc-curso,
	.ppc-curso--mate {
		grid-template-columns: 1fr;
	}

	.ppc-curso__foto,
	.ppc-curso--mate .ppc-curso__foto {
		order: 0;
		max-width: 16rem;
		margin-inline: auto;
	}

	.ppc-eles {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 720px) {
	.ppc-cols {
		grid-template-columns: 1fr;
	}

	.ppc-pruebas {
		grid-template-columns: repeat(2, 1fr);
	}

	.ppc-ruta {
		grid-template-columns: 1fr 1fr;
	}

	.ppc-inc {
		grid-template-columns: 1fr;
	}

	.ppc-curso__cuerpo {
		text-align: center;
	}

	.ppc-cols {
		text-align: left;
	}

	.ppc-curso__btn {
		justify-content: center;
	}
}

@media (max-width: 520px) {
	.ppc-ele {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.ppc-ruta {
		grid-template-columns: 1fr;
	}

	.ppc-pruebas {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ppc-acordeon,
	.ppc-acordeon summary::after {
		transition: none;
	}
}

/* Ajustes de la página Cursos */
.ppc-como .pp-lead {
	color: #cfe6eb;
}

.ppc-ele__lema {
	font-size: 1.05rem;
	line-height: 1.4;
}

.ppc-prueba__num {
	white-space: nowrap;
	font-size: 1.05rem;
}

.ppc-prueba__datos {
	gap: 0.9rem;
}

/* ------------------------------------------------------------------ */
/* Portadas de páginas interiores (propuestas A y B)                     */
/* ------------------------------------------------------------------ */

.ppc-migas {
	margin: 0;
	color: var(--pp-sky);
	font-family: var(--pp-font-title);
	font-size: 0.9rem;
	font-weight: 700;
}

.ppc-migas a {
	color: inherit;
	text-decoration: none;
}

.ppc-migas a:hover {
	text-decoration: underline;
}

/* A: banda oscura, más baja, con un resumen de la prueba a la derecha */
.ppc-hero-a {
	padding-block: clamp(2.6rem, 6vw, 4.5rem);
}

.ppc-hero-a__in {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

.ppc-hero-a__in > *,
.ppc-hero-a__copia > *,
.ppc-resumen > * {
	margin-block: 0;
}

.ppc-hero-a__copia {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.2rem;
}

.ppc-hero-a__titulo {
	color: var(--pp-white);
	font-size: clamp(2.2rem, 4.6vw, 3.6rem);
	line-height: 1.08;
}

.ppc-hero-a .pp-lead {
	color: #cfe6eb;
}

.ppc-hero-a .ppc-sello {
	border-color: var(--pp-sky);
	background: transparent;
	color: var(--pp-white);
}

.ppc-hero-a .pp-btns .is-style-outline .wp-block-button__link {
	border-color: var(--pp-white);
	box-shadow: 4px 4px 0 var(--pp-sky);
}

.ppc-resumen {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	padding: clamp(1.3rem, 3vw, 1.9rem);
	border: 2px solid var(--pp-ink);
	border-radius: 22px;
	background: var(--pp-white);
	box-shadow: 8px 8px 0 var(--pp-coral);
	rotate: 1.2deg;
}

.ppc-resumen__titulo {
	color: var(--pp-ink);
	font-family: var(--pp-font-title);
	font-size: 1.3rem;
	font-weight: 800;
}

.ppc-resumen__sub {
	margin-top: 0.3rem !important;
	color: #b23a3a;
	font-family: var(--pp-font-title);
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ppc-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.ppc-chip {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.45rem 0.9rem 0.45rem 0.5rem;
	border: 2px solid var(--pp-ink);
	border-radius: 999px;
	background: var(--pp-paper);
}

.ppc-chip > * {
	margin-block: 0;
}

.ppc-chip__ico {
	width: 2.2rem;
	margin: 0;
}

.ppc-chip__ico img {
	display: block;
	width: 100%;
	height: auto;
}

.ppc-chip__txt {
	margin: 0;
	color: var(--pp-ink);
	font-family: var(--pp-font-title);
	font-size: 0.88rem;
	font-weight: 700;
	line-height: 1.2;
}

/* B: título grande y una sola foto */
.ppc-hero-b {
	padding-block: clamp(3rem, 7vw, 5rem);
}

.ppc-hero-b__in {
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

.ppc-hero-b__in > *,
.ppc-hero-b__copia > * {
	margin-block: 0;
}

.ppc-hero-b__copia {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.3rem;
}

.ppc-hero-b__titulo {
	font-size: clamp(2.4rem, 5.4vw, 4.4rem);
	line-height: 1.06;
}

.ppc-hero-b__foto {
	justify-self: center;
	width: min(100%, 22rem);
	rotate: 3deg;
}

.ppc-hero-b__foto > * {
	margin-block: 0;
}

@media (max-width: 900px) {
	.ppc-hero-a__in,
	.ppc-hero-b__in {
		grid-template-columns: 1fr;
	}

	.ppc-hero-a__copia,
	.ppc-hero-b__copia {
		align-items: center;
		text-align: center;
	}

	.ppc-hero-a .pp-btns,
	.ppc-hero-b .pp-btns,
	.ppc-hero-a .ppc-sellos,
	.ppc-hero-b .ppc-sellos {
		justify-content: center;
	}

	.ppc-hero-a .pp-lead,
	.ppc-hero-b .pp-lead,
	.ppc-hero-b .pp-kicker {
		margin-inline: auto;
	}

	.ppc-chips {
		justify-content: center;
	}

	.ppc-resumen {
		rotate: 0deg;
		text-align: center;
	}

	.ppc-hero-b__foto {
		width: min(100%, 17rem);
	}
}

/* Resumen de la prueba (portada A): etiquetas en cuadrícula ordenada */
.ppc-chips {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.6rem;
}

.ppc-chip {
	border-radius: 14px;
}

.ppc-resumen {
	rotate: 0deg;
}

.ppc-hero-a__in > *,
.ppc-hero-b__in > * {
	min-width: 0;
}

.ppc-hero-a__copia > *,
.ppc-hero-b__copia > * {
	max-width: 100%;
}

.ppc-chips > * {
	margin: 0;
}

.ppc-chips .ppc-chip {
	align-items: center;
}

/* ================================================================== */
/* Cursos: ronda de espacios, márgenes y acabado                        */
/* ================================================================== */

/* Encabezados de sección: más aire entre título, trazo y bajada */
.ppc-paes .pp-stack,
.ppc-principales .pp-stack,
.ppc-electivos .pp-stack,
.ppc-como .pp-stack,
.ppc-incluye .pp-stack,
.ppc-testi .pp-stack,
.ppc-faq .pp-stack {
	gap: 1.25rem;
}

.ppc-paes .pp-title,
.ppc-principales .pp-title,
.ppc-electivos .pp-title,
.ppc-como .pp-title,
.ppc-incluye .pp-title,
.ppc-testi .pp-title,
.ppc-faq .pp-title {
	padding-bottom: 0.3em;
}

/* Navegación interna bajo la portada */
.ppc-navi {
	padding-block: 0.9rem;
	border-block: 1px solid rgb(1 59 69 / 0.12);
	background: var(--pp-white);
}

.ppc-navi .pp-container > * {
	margin-block: 0;
}

.ppc-navi__lista {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.6rem;
	margin: 0;
	overflow-x: auto;
	padding-bottom: 0.2rem;
	scrollbar-width: none;
}

.ppc-navi__lista::-webkit-scrollbar {
	display: none;
}

.ppc-navi__lista a {
	flex: none;
	padding: 0.4rem 1rem;
	border: 2px solid var(--pp-ink);
	border-radius: 999px;
	background: var(--pp-white);
	color: var(--pp-ink);
	font-family: var(--pp-font-title);
	font-size: 0.88rem;
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.ppc-navi__lista a:hover,
.ppc-navi__lista a:focus-visible {
	background: var(--pp-ink);
	color: var(--pp-white);
}

@media (min-width: 901px) {
	.ppc-navi__lista {
		justify-content: center;
	}
}

/* Escala de puntaje: una columna centrada, sin partir la frase */
.ppc-escala {
	flex-direction: column;
	gap: 0.9rem;
	text-align: center;
}

.ppc-escala__barra {
	width: 100%;
	max-width: 32rem;
	flex: none;
}

/* Números de los pasos: contraste suficiente */
.ppc-paso {
	gap: 0.75rem;
}

.ppc-paso__num {
	border: 2px solid var(--pp-coral);
	background: var(--pp-white);
	color: var(--pp-ink);
}

/* Migas y título de resumen en la portada A */
.ppc-migas a {
	display: inline-block;
	padding: 0.5rem 0.2rem;
}

.ppc-resumen__titulo {
	margin-bottom: 0.3rem !important;
}

/* Elevación suave al pasar el cursor (solo con cursor) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.ppc-prueba,
	.ppc-ele,
	.ppc-inc__item,
	.ppc-paso,
	.ppc-curso {
		transition: translate 0.25s ease, box-shadow 0.25s ease;
	}

	.ppc-prueba:hover,
	.ppc-ele:hover,
	.ppc-inc__item:hover,
	.ppc-paso:hover {
		translate: 0 -5px;
	}

	.ppc-curso:hover {
		translate: 0 -3px;
	}
}

/* ================================================================== */
/* Cursos: portada oscura con foto y sello + barra de navegación flotante */
/* ================================================================== */

.ppc-visual {
	position: relative;
	justify-self: center;
	width: min(100%, 20rem);
	margin-bottom: 1.6rem !important;
}

.ppc-visual > * {
	margin-block: 0;
}

.ppc-visual__foto {
	width: 100%;
	margin: 0;
	rotate: 3deg;
}

.ppc-visual__foto img {
	display: block;
	width: 100%;
	height: auto;
}

.ppc-badge {
	position: absolute;
	top: -1.6rem;
	right: -2.6rem;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 8.6rem;
	aspect-ratio: 1;
	border: 3px solid var(--pp-coral);
	border-radius: 50%;
	background: var(--pp-ink);
	box-shadow: 5px 5px 0 var(--pp-coral);
	color: var(--pp-white);
	text-align: center;
	rotate: -9deg;
}

.ppc-badge > * {
	margin: 0;
}

.ppc-badge__num {
	font-family: var(--pp-font-title);
	font-size: 1.45rem;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
}

.ppc-badge__txt {
	max-width: 5.5rem;
	margin-top: 0.3rem !important;
	font-family: var(--pp-font-title);
	font-size: 0.72rem;
	font-weight: 800;
	line-height: 1.15;
}

.ppc-visual__chip {
	position: absolute;
	bottom: -1.3rem;
	left: -1.4rem;
	z-index: 3;
	margin: 0;
	padding: 0.4rem 1rem;
	border: 2px solid var(--pp-ink);
	border-radius: 999px;
	background: var(--pp-white);
	box-shadow: 3px 3px 0 var(--pp-sky);
	color: var(--pp-ink);
	font-family: var(--pp-font-title);
	font-size: 0.85rem;
	font-weight: 800;
	rotate: -2deg;
}

/* Barra de navegación interna: flotante, con borde y sombra de color, sobre el borde de la portada */
.ppc-navi {
	position: relative;
	z-index: 4;
	margin-top: -1.9rem;
	padding: 0;
	border: 0;
	background: transparent;
}

.ppc-navi .pp-container {
	display: flex;
	justify-content: center;
}

.ppc-navi__lista {
	max-width: 100%;
	padding: 0.45rem;
	border: 2px solid var(--pp-ink);
	border-radius: 999px;
	background: var(--pp-white);
	box-shadow: 5px 5px 0 var(--pp-coral);
}

.ppc-navi__lista a {
	border: 0;
	background: transparent;
	padding: 0.5rem 1.05rem;
}

.ppc-navi__lista a:hover,
.ppc-navi__lista a:focus-visible {
	background: var(--pp-ink);
	color: var(--pp-white);
}

/* La sección que sigue deja sitio a la barra que se monta encima */
.ppc-navi + .pp-section {
	padding-top: calc(clamp(4rem, 9vw, 7rem) + 1.9rem);
}

@media (max-width: 900px) {
	.ppc-visual {
		width: min(100%, 15rem);
		margin-bottom: 2.2rem !important;
	}

	.ppc-badge {
		right: -1.6rem;
		width: 6.8rem;
	}

	.ppc-badge__num {
		font-size: 1.15rem;
	}

	.ppc-badge__txt {
		font-size: 0.62rem;
	}

	.ppc-navi {
		margin-top: -1.6rem;
	}

	.ppc-navi .pp-container {
		justify-content: flex-start;
	}
}

/* Ajustes finales de la portada oscura y de la barra flotante */
.ppc-visual {
	width: min(100%, 17rem);
}

.ppc-badge {
	right: auto;
	left: -3.4rem;
	top: -1.4rem;
	rotate: -9deg;
}

/* La barra flotante no ocupa espacio propio: se posa sobre el borde entre la portada y la sección siguiente */
.ppc-navi {
	height: 0;
	margin-top: 0;
	overflow: visible;
}

.ppc-navi .pp-container {
	position: absolute;
	top: -1.7rem;
	right: 0;
	left: 0;
}

.ppc-navi + .pp-section {
	padding-top: calc(clamp(4rem, 9vw, 7rem) + 1.2rem);
}

@media (min-width: 901px) {
	.ppc-navi__lista {
		overflow: visible;
	}
}

@media (max-width: 900px) {
	.ppc-badge {
		left: -1.2rem;
		top: -1.2rem;
	}

	.ppc-visual {
		width: min(100%, 14rem);
	}

	.ppc-navi .pp-container {
		top: -1.5rem;
		padding-right: 0;
	}

	.ppc-navi__lista {
		box-shadow: 4px 4px 0 var(--pp-coral);
	}
}

/* ------------------------------------------------------------------ */
/* Cursos principales: más aire entre la foto y el texto                  */
/* ------------------------------------------------------------------ */

.ppc-curso {
	column-gap: clamp(2.6rem, 5vw, 3.6rem);
}

/* La polaroid lleva una sombra desplazada: se le da espacio para que no toque el texto */
.ppc-curso:not(.ppc-curso--mate) .ppc-curso__foto {
	margin-right: 0.9rem;
}

.ppc-curso--mate .ppc-curso__foto {
	margin-left: 0.9rem;
}

@media (max-width: 900px) {
	.ppc-curso:not(.ppc-curso--mate) .ppc-curso__foto,
	.ppc-curso--mate .ppc-curso__foto {
		margin-inline: auto;
	}
}

/* ------------------------------------------------------------------ */
/* Ejemplo de pregunta PAES (espacio para el contenido del cliente)      */
/* ------------------------------------------------------------------ */

.ppc-ejemplo .pp-container {
	display: flex;
	flex-direction: column;
	gap: clamp(2rem, 4vw, 3rem);
}

.ppc-ejemplo .pp-container > *,
.ppc-ej > *,
.ppc-opciones > * {
	margin-block: 0;
}

.ppc-ejemplo .pp-kicker {
	color: var(--pp-teal);
}

.ppc-ejemplo .pp-stack {
	gap: 1.25rem;
}

.ppc-ejemplo .pp-title {
	padding-bottom: 0.3em;
}

.ppc-ej {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
	gap: 2rem;
	align-items: start;
	max-width: 62rem;
	margin-inline: auto;
	width: 100%;
}

.ppc-hoja {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	padding: clamp(1.4rem, 3vw, 2rem);
	border: 2px solid var(--pp-ink);
	border-radius: 20px;
	background: var(--pp-white);
	box-shadow: 7px 7px 0 var(--pp-sky);
}

.ppc-hoja > * {
	margin-block: 0;
}

.ppc-hoja__etiqueta {
	width: fit-content;
	padding: 0.15rem 0.85rem;
	border: 2px solid var(--pp-ink);
	border-radius: 999px;
	background: var(--pp-coral-soft);
	color: var(--pp-ink);
	font-family: var(--pp-font-title);
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.ppc-hoja__pregunta {
	color: var(--pp-ink);
	font-size: 1.05rem;
	line-height: 1.6;
}

.ppc-opciones {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.ppc-opcion {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	padding: 0.6rem 0.9rem;
	border: 2px solid rgb(1 59 69 / 0.25);
	border-radius: 14px;
	background: var(--pp-paper);
}

.ppc-opcion > * {
	margin: 0;
}

.ppc-opcion__letra {
	display: grid;
	flex: none;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border: 2px solid var(--pp-ink);
	border-radius: 50%;
	background: var(--pp-white);
	color: var(--pp-ink);
	font-family: var(--pp-font-title);
	font-size: 0.9rem;
	font-weight: 800;
}

.ppc-opcion__txt {
	color: #2f4f57;
	font-size: 0.98rem;
	line-height: 1.4;
}

.ppc-resp {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: clamp(1.4rem, 3vw, 2rem);
	border: 2px solid var(--pp-ink);
	border-radius: 20px;
	background: var(--pp-ink);
	box-shadow: 7px 7px 0 var(--pp-coral);
	color: var(--pp-white);
}

.ppc-resp > * {
	margin-block: 0;
}

.ppc-resp__titulo {
	color: var(--pp-white);
	font-family: var(--pp-font-title);
	font-size: 1.3rem;
	font-weight: 800;
	line-height: 1.2;
}

.ppc-resp__txt {
	color: #dcecef;
	font-size: 0.98rem;
	line-height: 1.55;
}

.ppc-resp__nota {
	margin: 0;
	color: #9fd4de;
	font-size: 0.85rem;
	line-height: 1.45;
}

.ppc-resp__detalle {
	border: 2px solid var(--pp-sky);
	border-radius: 14px;
	background: rgb(255 255 255 / 0.06);
}

.ppc-resp__detalle summary {
	position: relative;
	padding: 0.8rem 3rem 0.8rem 1rem;
	color: var(--pp-white);
	cursor: pointer;
	list-style: none;
}

.ppc-resp__detalle summary::-webkit-details-marker {
	display: none;
}

.ppc-resp__detalle summary::after {
	content: "+";
	position: absolute;
	top: 50%;
	right: 1rem;
	color: var(--pp-coral);
	font-family: var(--pp-font-title);
	font-size: 1.6rem;
	font-weight: 800;
	line-height: 1;
	translate: 0 -50%;
	transition: rotate 0.25s ease;
}

.ppc-resp__detalle[open] summary::after {
	rotate: 45deg;
}

.ppc-resp__detalle > p {
	margin: 0;
	padding: 0 1rem 0.9rem;
}

@media (max-width: 900px) {
	.ppc-ej {
		grid-template-columns: 1fr;
	}
}

/* Ejemplo de pregunta: hoja y panel forman una sola tarjeta del mismo alto (sin huecos blancos) */
.ppc-ej {
	gap: 0;
	align-items: stretch;
	overflow: hidden;
	border: 2px solid var(--pp-ink);
	border-radius: 24px;
	box-shadow: 8px 8px 0 var(--pp-coral);
}

.ppc-ej .ppc-hoja {
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.ppc-ej .ppc-resp {
	justify-content: center;
	border: 0;
	border-left: 2px solid var(--pp-ink);
	border-radius: 0;
	box-shadow: none;
}

.ppc-ej .ppc-resp__detalle {
	margin-top: 0.6rem;
}

@media (max-width: 900px) {
	.ppc-ej .ppc-resp {
		border-left: 0;
		border-top: 2px solid var(--pp-ink);
	}
}


/* ------------------------------------------------------------------ */
/* Reto desplegable: una pregunta PAES que se abre hacia abajo            */
/* ------------------------------------------------------------------ */

.ppc-reto {
	max-width: 62rem;
	margin-inline: auto;
	width: 100%;
	border: 0;
	background: transparent;
}

.ppc-reto > summary {
	position: relative;
	display: block;
	padding: 1.3rem 4.2rem 1.3rem 1.6rem;
	border: 2px solid var(--pp-ink);
	border-radius: 20px;
	background: var(--pp-coral-soft);
	box-shadow: 6px 6px 0 var(--pp-coral);
	color: #3f6068;
	font-size: 1rem;
	line-height: 1.4;
	cursor: pointer;
	list-style: none;
	transition: translate 0.2s ease, box-shadow 0.2s ease;
}

.ppc-reto > summary::-webkit-details-marker {
	display: none;
}

.ppc-reto > summary strong {
	color: var(--pp-ink);
	font-family: var(--pp-font-title);
	font-size: clamp(1.15rem, 2.6vw, 1.5rem);
	font-weight: 800;
	letter-spacing: -0.02em;
}

.ppc-reto > summary::after {
	content: "+";
	position: absolute;
	top: 50%;
	right: 1.3rem;
	display: grid;
	place-items: center;
	width: 2.2rem;
	height: 2.2rem;
	border: 2px solid var(--pp-ink);
	border-radius: 50%;
	background: var(--pp-coral);
	color: var(--pp-ink);
	font-family: var(--pp-font-title);
	font-size: 1.4rem;
	font-weight: 800;
	line-height: 1;
	translate: 0 -50%;
	transition: rotate 0.25s ease;
}

.ppc-reto[open] > summary::after {
	rotate: 45deg;
}

@media (hover: hover) {
	.ppc-reto > summary:hover {
		translate: -2px -2px;
		box-shadow: 8px 8px 0 var(--pp-coral);
	}
}

.ppc-reto[open] > .ppc-ej {
	margin-top: 1.6rem;
	animation: pp3-aparece 0.4s ease both;
}

/* Alternativas clicables */
.pp-js .ppc-opcion {
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, translate 0.15s ease;
}

.pp-js .ppc-opcion:hover {
	border-color: var(--pp-ink);
	background: var(--pp-white);
}

.pp-js .ppc-opcion:focus-visible {
	outline: 3px solid var(--pp-coral);
	outline-offset: 2px;
}

.ppc-opcion.is-correcta {
	border-color: var(--pp-teal);
	background: var(--pp-teal);
}

.ppc-opcion.is-correcta .ppc-opcion__txt {
	color: var(--pp-white);
	font-weight: 600;
}

.ppc-opcion.is-correcta .ppc-opcion__letra {
	border-color: var(--pp-white);
	background: var(--pp-white);
	color: var(--pp-teal);
}

.ppc-opcion.is-incorrecta {
	border-color: var(--pp-coral);
	background: var(--pp-coral-soft);
}

.ppc-opcion.is-incorrecta .ppc-opcion__letra {
	border-color: var(--pp-coral);
	background: var(--pp-coral);
	color: var(--pp-ink);
}

/* Panel: antes de responder solo se ve la pista; después, el resultado y la explicación */
.pp-js .ppc-feedback {
	display: none;
}

.pp-js .ppc-reto.is-respondido .ppc-feedback {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	animation: pp3-aparece 0.35s ease both;
}

.ppc-feedback > * {
	margin-block: 0;
}

.pp-js .ppc-reto.is-respondido .ppc-pista {
	display: none;
}

.pp-js .ppc-reto:not(.es-acierto) .ppc-acierto,
.pp-js .ppc-reto.es-acierto .ppc-error {
	display: none;
}

.ppc-pista,
.ppc-acierto,
.ppc-error {
	margin: 0;
	font-size: 1rem;
	line-height: 1.5;
}

.ppc-pista {
	color: #9fd4de;
	font-weight: 600;
}

.ppc-acierto,
.ppc-error {
	padding: 0.7rem 0.9rem;
	border-radius: 12px;
	color: var(--pp-ink);
	font-weight: 600;
}

.ppc-acierto {
	background: #b8e6ec;
}

.ppc-error {
	background: var(--pp-coral-soft);
}

/* La clave de respuesta no se muestra en el sitio (sí al editar) */
.pp-js .ppc-correcta {
	display: none;
}

.ppc-correcta {
	margin: 0;
	color: var(--pp-sky);
	font-size: 0.8rem;
}

.ppc-resp__btn {
	margin: 0;
}

@media (prefers-reduced-motion: reduce) {
	.ppc-reto > summary,
	.ppc-reto > summary::after,
	.ppc-reto[open] > .ppc-ej,
	.pp-js .ppc-reto.is-respondido .ppc-feedback {
		animation: none;
		transition: none;
	}
}

/* El efecto al pasar el cursor no debe pisar el color de una alternativa ya respondida */
.pp-js .ppc-opcion.is-correcta:hover {
	border-color: var(--pp-teal);
	background: var(--pp-teal);
}

.pp-js .ppc-opcion.is-incorrecta:hover {
	border-color: var(--pp-coral);
	background: var(--pp-coral-soft);
}

/* ------------------------------------------------------------------ */
/* Textos oficiales (2026-10-05): 5 beneficios y foto de banda           */
/* ------------------------------------------------------------------ */

/* Metodología: 5 beneficios en una fila en pantallas anchas */
.pp3-metodo .pp2-pilares {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 1180px) {
	/* 5 ítems en una grilla de 3 columnas dejaban la segunda fila con solo 2 tarjetas,
	   pegadas a la izquierda con un hueco grande a la derecha. Flex con wrap centra
	   cualquier fila que quede incompleta (acá y si el conteo de pilares cambia). */
	.pp3-metodo .pp2-pilares {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.pp3-metodo .pp2-pilares > .pp2-pilar {
		flex: 0 1 calc(33.333% - 1rem);
		min-width: 220px;
	}
}

/* El resumen (ícono + título) es un grupo normal, no un <details>: WordPress no admite
   bloques anidados dentro de un resumen nativo (ver home3_gen.py). Necesita su propio
   flex interno para mantenerlos apilados y centrados. */
.pp3-metodo .pp2-pilar__resumen {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
}

.pp3-metodo .pp2-pilar__resumen > * {
	margin: 0;
}

/* En pantallas anchas el cuerpo (texto) va siempre visible; el clic no hace nada ahí
   (lo activa el JS en cualquier ancho, pero el CSS solo lo usa en celular, ver abajo). */
.pp3-metodo .pp2-pilar__cuerpo {
	margin: 0;
}

/* Franja de foto en "A tu medida": ancha, con borde y sombra de la marca */
.pp3-banda {
	width: 100%;
	max-width: 62rem;
	margin: 0 auto !important;
	border: 2px solid var(--pp-ink);
	border-radius: 22px;
	box-shadow: 8px 8px 0 var(--pp-sky);
	overflow: hidden;
}

.pp3-banda img {
	display: block;
	width: 100%;
	height: clamp(180px, 26vw, 300px);
	object-fit: cover;
	object-position: 50% 35%;
}

/* Beneficios de metodología: ícono arriba y texto debajo, para que 5 columnas no se pisen.
   Centrado en escritorio y tablet (antes solo lo estaba en celular). */
.pp3-metodo .pp2-pilar {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.6rem;
}

.pp3-metodo .pp2-pilar > * {
	margin: 0;
	position: static;
	width: auto;
	max-width: 100%;
	rotate: 0deg;
}

.pp3-metodo .pp2-pilar__icono {
	width: 3.2rem;
}

.pp3-metodo .pp2-pilar__titulo {
	grid-column: auto;
	grid-row: auto;
	margin: 0;
	padding: 0;
	text-align: center;
}

.pp3-metodo .pp2-pilar__titulo {
	align-self: stretch;
	width: 100%;
	justify-self: stretch;
}

@media (max-width: 760px) {
	/* En celular quedaban 5 tarjetas apiladas con el texto completo: se ve larguísimo.
	   Pasan a 2 columnas, cerradas por defecto, con ícono + título centrados; tocar
	   despliega el texto (clase "is-abierto", la pone activar() en home-v3.js — mismo
	   mecanismo que las tarjetas que giran del equipo). En pantallas más anchas el
	   cuerpo queda siempre visible y el clic no hace nada. */
	.pp3-metodo .pp2-pilares {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.9rem;
		padding: 1.1rem 0.9rem;
	}

	.pp3-metodo .pp2-pilar {
		position: relative;
		padding: 1.1rem 0.8rem;
		border: 1px solid rgb(255 255 255 / 0.25);
		border-radius: 16px;
		background: rgb(255 255 255 / 0.06);
		cursor: pointer;
	}

	.pp3-metodo .pp2-pilar__icono {
		width: 2.4rem;
	}

	.pp3-metodo .pp2-pilar__titulo {
		text-align: center;
		font-size: 0.98rem;
	}

	/* Insignia "+"/"×" en la esquina de la tarjeta (no al lado del ícono): así no empuja
	   el ícono/título fuera del centro. */
	.pp3-metodo .pp2-pilar::after {
		content: "+";
		position: absolute;
		top: 0.6rem;
		right: 0.7rem;
		color: var(--pp-coral);
		font-family: var(--pp-font-title);
		font-size: 1.3rem;
		font-weight: 800;
		line-height: 1;
	}

	.pp3-metodo .pp2-pilar.is-abierto::after {
		content: "×";
	}

	.pp3-metodo .pp2-pilar__cuerpo {
		display: none;
	}

	.pp3-metodo .pp2-pilar.is-abierto .pp2-pilar__cuerpo {
		display: block;
		margin-top: 0.6rem;
	}

	.pp3-metodo .pp2-pilar__texto {
		text-align: center;
		font-size: 0.85rem;
	}
}

/* Cursos (Lo que preparamos): Competencia Lectora ya no queda vacía; la foto llena el espacio */
.pp3-cursos .pp2-curso--c > *,
.pp3-cursos .pp2-curso--d > * {
	max-width: 80%;
}

.pp3-cursos .pp2-curso--c .pp2-curso__texto,
.pp3-cursos .pp2-curso--d .pp2-curso__texto {
	padding-right: 0;
}

.pp3-cursos__foto {
	width: 78%;
	max-width: none !important;
	margin: 1.2rem auto 0 !important;
	rotate: -2deg;
}

.pp3-cursos__foto img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* Banda de "A tu medida": foto de un estudiante mirando al frente (encuadre centrado) */
.pp3-banda img {
	object-position: 50% 22%;
	height: clamp(200px, 26vw, 320px);
}

/* Cursos (Lo que preparamos): lista de focos igual en las cuatro tarjetas, anclada arriba de las etiquetas */
.pp3-cursos .pp2-curso > .pp3-foco {
	margin-top: 1.1rem !important;
	margin-bottom: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	font-size: 0.92rem;
	line-height: 1.4;
	font-weight: 600;
}

.pp3-cursos .pp2-curso > .pp3-foco li {
	position: relative;
	padding-left: 1.05rem;
}

.pp3-cursos .pp2-curso > .pp3-foco li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 0.42rem;
	height: 0.42rem;
	border-radius: 50%;
	background: var(--pp-coral);
}

/* Quitar la foto que se había agregado solo a Lectora */
.pp3-cursos__foto {
	display: none;
}

/* Tarjetas de la columna angosta: la lista no debe pisar la ilustración */
.pp3-cursos .pp2-curso--c > .pp3-foco,
.pp3-cursos .pp2-curso--d > .pp3-foco {
	max-width: 80%;
}

/* Cursos (Lo que preparamos): bloque de datos de la prueba, igual en las cuatro tarjetas */
.pp3-cursos .pp2-curso > .pp3-stats {
	margin-top: 1.1rem !important;
	display: flex;
	gap: 0.6rem;
	padding: 0.7rem 0;
	border-top: 2px solid rgb(1 59 69 / 0.2);
	border-bottom: 2px solid rgb(1 59 69 / 0.2);
}

.pp3-cursos .pp2-curso--b > .pp3-stats,
.pp3-cursos .pp2-curso--b > .pp3-stats * {
	border-color: rgb(255 255 255 / 0.25);
}

.pp3-cursos .pp2-curso > .pp3-stats > * {
	margin: 0;
	flex: 1;
}

.pp3-stat__n {
	font-family: var(--pp-font-title);
	font-size: 1.35rem;
	font-weight: 800;
	line-height: 1.1;
}

.pp3-stat__l {
	font-size: 0.78rem;
	font-weight: 600;
	opacity: 0.85;
}

.pp3-stat__n {
	white-space: nowrap;
	font-size: 1.2rem;
}

/* ------------------------------------------------------------------ */
/* Lo que preparamos, estructura 2 + 2: Lectora y Matemáticas protagonistas */
/* ------------------------------------------------------------------ */

.pp3-cursos .pp2-bento {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.8rem;
	align-items: stretch;
}

.pp3-cursos .pp2-curso--a,
.pp3-cursos .pp2-curso--b,
.pp3-cursos .pp2-curso--c,
.pp3-cursos .pp2-curso--d {
	grid-column: auto;
	grid-row: auto;
}

.pp3-cursos .pp2-curso--a,
.pp3-cursos .pp2-curso--b {
	min-height: 25rem;
	padding: clamp(1.8rem, 3vw, 2.4rem);
}

.pp3-cursos .pp2-curso--a .pp2-curso__titulo,
.pp3-cursos .pp2-curso--b .pp2-curso__titulo {
	font-size: clamp(2.1rem, 3.6vw, 3rem);
}

/* Lectora y Matemáticas: la ilustración queda como acento, sin invadir el texto */
.pp3-cursos .pp2-curso--a > *,
.pp3-cursos .pp2-curso--b > * {
	max-width: 70%;
}

.pp3-cursos .pp2-curso--a > .pp2-stk,
.pp3-cursos .pp2-curso--b > .pp2-stk {
	max-width: none;
	width: 34%;
	right: -2%;
	bottom: -3%;
}

.pp3-cursos .pp2-curso--a > .pp3-stats,
.pp3-cursos .pp2-curso--b > .pp3-stats {
	max-width: 70%;
}

/* Ciencias e Historia: más compactas, abajo */
.pp3-cursos .pp2-curso--c,
.pp3-cursos .pp2-curso--d {
	min-height: 0;
	padding: 1.5rem 1.5rem 1.4rem;
}

.pp3-cursos .pp2-curso--c > *,
.pp3-cursos .pp2-curso--d > * {
	max-width: 100%;
}

.pp3-cursos .pp2-curso--c > .pp2-stk,
.pp3-cursos .pp2-curso--d > .pp2-stk {
	width: 22%;
}

.pp3-cursos .pp2-curso--c .pp2-curso__titulo,
.pp3-cursos .pp2-curso--d .pp2-curso__titulo {
	font-size: clamp(1.5rem, 2.2vw, 1.9rem);
}

@media (max-width: 900px) {
	.pp3-cursos .pp2-bento {
		grid-template-columns: 1fr;
	}

	.pp3-cursos .pp2-curso--a > *,
	.pp3-cursos .pp2-curso--b > *,
	.pp3-cursos .pp2-curso--a > .pp3-stats,
	.pp3-cursos .pp2-curso--b > .pp3-stats {
		max-width: 100%;
	}

	.pp3-cursos .pp2-curso--a > .pp2-stk,
	.pp3-cursos .pp2-curso--b > .pp2-stk {
		width: 40%;
		position: relative;
		right: auto;
		bottom: auto;
		margin: 0.5rem auto 0;
	}
}

/* Jerarquía: Lectora y Matemáticas protagonistas (borde y sombra fuertes, títulos grandes);
   Ciencias e Historia más livianas (borde fino, sombra chica, sin bloque de datos). */
.pp3-cursos .pp2-curso--a,
.pp3-cursos .pp2-curso--b {
	border-width: 3px;
	border-radius: 30px;
	box-shadow: 12px 12px 0 var(--sombra);
}

.pp3-cursos .pp2-curso--a .pp2-curso__texto,
.pp3-cursos .pp2-curso--b .pp2-curso__texto {
	font-size: 1.05rem;
}

.pp3-cursos .pp2-curso--c,
.pp3-cursos .pp2-curso--d {
	border-width: 1.5px;
	border-radius: 20px;
	box-shadow: 4px 4px 0 var(--sombra);
	background-image: none;
}

.pp3-cursos .pp2-curso--c .pp2-curso__texto,
.pp3-cursos .pp2-curso--d .pp2-curso__texto {
	font-size: 0.92rem;
	line-height: 1.5;
}

.pp3-cursos .pp2-curso--c .pp3-foco,
.pp3-cursos .pp2-curso--d .pp3-foco {
	font-size: 0.85rem;
	font-weight: 500;
	opacity: 0.9;
}

.pp3-cursos .pp2-curso--c .pp2-curso__num,
.pp3-cursos .pp2-curso--d .pp2-curso__num {
	opacity: 0.8;
}

/* Estructura elegida: Lectura y Matemática a lo ancho, una fila cada una del mismo tamaño;
   Ciencias e Historia lado a lado debajo. Sin bloque de datos. */
.pp3-cursos .pp2-bento {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.6rem;
}

.pp3-cursos .pp2-curso--a,
.pp3-cursos .pp2-curso--b {
	grid-column: 1 / -1;
	min-height: 0;
	padding: clamp(1.8rem, 3vw, 2.4rem);
	border-width: 2px;
	border-radius: 26px;
	box-shadow: 8px 8px 0 var(--sombra);
}

.pp3-cursos .pp2-curso--a .pp2-curso__titulo,
.pp3-cursos .pp2-curso--b .pp2-curso__titulo {
	font-size: clamp(1.9rem, 3vw, 2.5rem);
}

.pp3-cursos .pp2-curso--a > *,
.pp3-cursos .pp2-curso--b > * {
	max-width: 62%;
}

.pp3-cursos .pp2-curso--a > .pp2-stk,
.pp3-cursos .pp2-curso--b > .pp2-stk {
	width: 26%;
	right: 2%;
	bottom: 4%;
}

.pp3-cursos .pp2-curso--c,
.pp3-cursos .pp2-curso--d {
	grid-column: span 1;
	border-width: 2px;
	border-radius: 24px;
	box-shadow: 6px 6px 0 var(--sombra);
	padding: 1.6rem 1.6rem 1.5rem;
}

.pp3-cursos .pp2-curso--c .pp2-curso__texto,
.pp3-cursos .pp2-curso--d .pp2-curso__texto {
	font-size: 0.98rem;
	font-weight: 400;
}

.pp3-cursos .pp2-curso--c .pp3-foco,
.pp3-cursos .pp2-curso--d .pp3-foco {
	font-size: 0.92rem;
	font-weight: 600;
	opacity: 1;
}

@media (max-width: 900px) {
	.pp3-cursos .pp2-bento {
		grid-template-columns: 1fr;
	}

	.pp3-cursos .pp2-curso--c,
	.pp3-cursos .pp2-curso--d {
		grid-column: auto;
	}

	.pp3-cursos .pp2-curso--a > *,
	.pp3-cursos .pp2-curso--b > * {
		max-width: 100%;
	}

	.pp3-cursos .pp2-curso--a > .pp2-stk,
	.pp3-cursos .pp2-curso--b > .pp2-stk {
		position: relative;
		right: auto;
		bottom: auto;
		width: 36%;
		margin: 0.6rem auto 0;
	}

	/* Las tarjetas quedaban larguísimas en celular con el texto completo: se recorta a
	   3 líneas y el JS (home-v3.js) agrega "Seguir leyendo" solo si de verdad sobra texto. */
	.pp3-cursos .pp2-curso__texto {
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.pp3-cursos .pp2-curso.is-expandida .pp2-curso__texto {
		-webkit-line-clamp: unset;
		overflow: visible;
	}

	.pp2-curso__mas {
		align-self: center;
		margin: 0 !important;
		padding: 0;
		border: 0;
		background: none;
		color: inherit;
		font-family: inherit;
		font-size: 0.85rem;
		font-weight: 700;
		text-decoration: underline;
		opacity: 0.85;
		cursor: pointer;
	}
}

/* Lo que preparamos: bloque centrado con márgenes laterales (ya no se estira de borde a borde) */
.pp3-cursos .pp2-bento {
	max-width: 58rem;
	margin-inline: auto;
	width: 100%;
}

@media (min-width: 1200px) {
	.pp3-cursos .pp2-curso--a > .pp2-stk,
	.pp3-cursos .pp2-curso--b > .pp2-stk {
		width: 22%;
	}
}

/* ================================================================== */
/* Página "Metodología" (plantilla "Página interior")                  */
/* Todo el texto lo edita el cliente; aquí solo hay estilo.            */
/* ================================================================== */

.ppm-hero {
	padding-block: clamp(3.5rem, 8vw, 6rem);
}

.ppm-hero__in {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: clamp(2.5rem, 5vw, 4.5rem);
	align-items: center;
}

.ppm-hero__in > * {
	margin-block: 0;
	min-width: 0;
}

.ppm-hero__copia {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.3rem;
}

.ppm-hero__copia > * {
	margin-block: 0;
}

.ppm-migas {
	color: var(--pp-sky);
	font-family: var(--pp-font-title);
	font-size: 0.9rem;
	font-weight: 700;
}

.ppm-migas a {
	color: inherit;
	text-decoration: none;
}

.ppm-hero .pp-kicker {
	color: var(--pp-coral);
}

.ppm-hero__titulo {
	color: var(--pp-white);
	font-size: clamp(2.2rem, 4.6vw, 3.6rem);
	line-height: 1.12;
}

.ppm-hero .pp-lead {
	color: #cfe6eb;
}

.ppm-hero .pp-btns .is-style-outline .wp-block-button__link {
	border-color: var(--pp-white);
	box-shadow: 4px 4px 0 var(--pp-sky);
}

.ppm-polaroid {
	justify-self: center;
	width: min(100%, 26rem);
	margin: 0 !important;
	rotate: 3deg;
}

/* Pasos: línea de trabajo en cuatro tarjetas */
.ppm-pasos .pp-container {
	display: flex;
	flex-direction: column;
	gap: clamp(2rem, 4vw, 3rem);
}

.ppm-pasos .pp-container > * {
	margin-block: 0;
}

.ppm-pasos .pp-stack {
	gap: 1.25rem;
}

.ppm-pasos .pp-kicker {
	color: var(--pp-teal);
}

.ppm-pasos__lista {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.3rem;
}

.ppm-paso {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	padding: 1.6rem 1.4rem 1.5rem;
	border: 2px solid var(--pp-ink);
	border-radius: 22px;
	background: var(--pp-white);
	box-shadow: 6px 6px 0 var(--pp-sky);
}

.ppm-paso > * {
	margin-block: 0;
}

.ppm-paso:nth-child(2) {
	background: var(--pp-coral-soft);
	box-shadow: 6px 6px 0 var(--pp-ink);
}

.ppm-paso__num {
	display: grid;
	place-items: center;
	width: 2.8rem;
	height: 2.8rem;
	border: 2px solid var(--pp-ink);
	border-radius: 50%;
	background: var(--pp-coral);
	color: var(--pp-ink);
	font-family: var(--pp-font-title);
	font-size: 1rem;
	font-weight: 800;
}

.ppm-paso__titulo {
	color: var(--pp-ink);
	font-family: var(--pp-font-title);
	font-size: 1.2rem;
	font-weight: 800;
	line-height: 1.2;
}

.ppm-paso__txt {
	color: #2f4f57;
	font-size: 0.97rem;
	line-height: 1.55;
}

/* Beneficios: cinco tarjetas con íconos */
.ppm-ben-sec .pp-container {
	display: flex;
	flex-direction: column;
	gap: clamp(2rem, 4vw, 3rem);
}

.ppm-ben-sec .pp-container > * {
	margin-block: 0;
}

.ppm-ben-sec .pp-kicker {
	color: var(--pp-teal);
}

.ppm-bens {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.3rem;
}

.ppm-ben {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	padding: 1.6rem 1.4rem;
	border: 2px solid var(--pp-ink);
	border-radius: 22px;
	background: var(--pp-white);
	box-shadow: 6px 6px 0 var(--pp-coral);
}

.ppm-ben > * {
	margin-block: 0;
}

.ppm-ben__ico {
	width: 3.6rem;
	margin: 0 0 0.4rem !important;
}

.ppm-ben__ico img {
	display: block;
	width: 100%;
	height: auto;
}

.ppm-ben__titulo {
	color: var(--pp-ink);
	font-family: var(--pp-font-title);
	font-size: 1.1rem;
	font-weight: 800;
	line-height: 1.2;
}

.ppm-ben__txt {
	color: #2f4f57;
	font-size: 0.95rem;
	line-height: 1.5;
}

.ppm-ben:nth-child(4),
.ppm-ben:nth-child(5) {
	box-shadow: 6px 6px 0 var(--pp-sky);
}

/* Llamado final: celeste con cuadrícula, igual que el resto de cierres */
.ppm-cta {
	background: var(--pp-sky);
	background-image: radial-gradient(rgb(255 255 255 / 0.45) 2px, transparent 2px);
	background-size: 28px 28px;
}

.ppm-cta .pp-stack {
	max-width: 44rem;
	margin-inline: auto;
	align-items: center;
	text-align: center;
}

.ppm-cta .pp-kicker,
.ppm-cta .pp-lead {
	color: var(--pp-ink);
}

.ppm-cta .pp-btns {
	justify-content: center;
}

@media (max-width: 1024px) {
	.ppm-pasos__lista {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ppm-bens {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.ppm-hero__in {
		grid-template-columns: 1fr;
	}

	.ppm-hero__copia {
		align-items: center;
		text-align: center;
	}

	.ppm-hero .pp-btns {
		justify-content: center;
	}

	.ppm-hero .pp-lead {
		margin-inline: auto;
	}

	.ppm-polaroid {
		width: min(100%, 18rem);
	}
}

@media (max-width: 600px) {
	.ppm-pasos__lista,
	.ppm-bens {
		grid-template-columns: 1fr;
	}
}

/* Beneficios de Metodología: 3 arriba y 2 abajo, centradas (cuadrícula de 6 columnas) */
@media (min-width: 1025px) {
	.ppm-bens {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.ppm-ben {
		grid-column: span 2;
	}

	.ppm-ben:nth-child(n + 4) {
		grid-column: span 3;
	}
}

/* Metodología: títulos con subrayado ondulado con aire suficiente bajo la línea */
.ppm-hero__titulo.is-style-ondas,
.ppm-pasos .pp-title,
.ppm-ben-sec .pp-title,
.ppm-testi .pp-title {
	padding-bottom: 0.45em;
	margin-bottom: 0.4rem;
}

.ppm-hero .pp-lead {
	margin-top: 0.4rem;
}

.ppm-pasos__lista,
.ppm-bens {
	gap: 1.8rem;
}

.ppm-testi .pp-container {
	display: flex;
	flex-direction: column;
	gap: clamp(2rem, 4vw, 3rem);
}

.ppm-testi .pp-container > * {
	margin-block: 0;
}

.ppm-hero .pp2-polaroid {
	position: relative;
}

.ppm-stk {
	position: absolute;
	z-index: 4;
	margin: 0;
	pointer-events: none;
}

.ppm-stk img {
	display: block;
	width: 100%;
	height: auto;
}

.ppm-stk--b { width: 26%; top: -10%; right: -9%; rotate: 8deg; --dur: 6s; }
.ppm-stk--t { width: 22%; bottom: -8%; left: -8%; rotate: -10deg; --dur: 7s; --delay: -2s; }
.ppm-stk--e { width: 9rem; top: -1rem; right: 4%; rotate: 10deg; --dur: 6s; }
.ppm-cta { position: relative; overflow: hidden; }
.ppm-cta .ppm-stk--e { position: absolute; }

/* Testimonios: tarjetas con el mismo lenguaje que el Home */
.ppm-testi .pp2-nota { flex: 0 0 min(400px, 84%); }

/* Metodología: un solo sticker en el encabezado, ubicado fuera del texto */
.ppm-stk--t { width: 13%; bottom: -6%; left: -9%; rotate: -10deg; }
.ppm-hero__foto { position: relative; justify-self: center; width: min(100%, 26rem); }
.ppm-stk--t { left: -7%; bottom: -7%; }

/* ================================================================== */
/* Metodología: "tu camino". Cuatro paradas sobre un recorrido punteado  */
/* ================================================================== */
.ppm-camino {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2.4rem 3.2rem;
	max-width: 60rem;
	margin: 0 auto;
	padding: 1.5rem 0;
}

/* El recorrido: una línea punteada sinuosa detrás de las paradas (solo decorativa) */
.ppm-camino::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 620' preserveAspectRatio='none'%3E%3Cpath d='M300 20 C 520 90, 80 190, 300 310 S 80 530, 300 600' fill='none' stroke='%23FF5757' stroke-width='5' stroke-dasharray='2 14' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	pointer-events: none;
}

.ppm-camino > * {
	position: relative;
	z-index: 1;
	margin: 0;
}

.ppm-parada {
	display: flex;
	align-items: flex-start;
	gap: 1.1rem;
	padding: 1.5rem 1.5rem 1.4rem;
	border: 2px solid var(--pp-ink);
	border-radius: 24px;
	background: var(--pp-white);
	box-shadow: 6px 6px 0 var(--pp-sky);
}

.ppm-parada:nth-child(even) {
	margin-top: 3rem;
	background: var(--pp-coral-soft);
	box-shadow: 6px 6px 0 var(--pp-ink);
}

.ppm-parada__num {
	display: grid;
	flex: none;
	place-items: center;
	width: 3.2rem;
	height: 3.2rem;
	margin: 0 !important;
	border: 2px solid var(--pp-ink);
	border-radius: 50%;
	background: var(--pp-coral);
	color: var(--pp-ink);
	font-family: var(--pp-font-title);
	font-size: 1.1rem;
	font-weight: 800;
	box-shadow: 3px 3px 0 var(--pp-ink);
}

.ppm-parada__cuerpo > * {
	margin-block: 0;
}

.ppm-parada__cuerpo {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.ppm-parada__titulo {
	color: var(--pp-ink);
	font-family: var(--pp-font-title);
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1.2;
}

.ppm-parada__txt {
	color: #2f4f57;
	font-size: 0.97rem;
	line-height: 1.55;
}

@media (max-width: 760px) {
	.ppm-camino {
		grid-template-columns: 1fr;
		gap: 1.4rem;
		padding-left: 0.6rem;
	}

	.ppm-camino::before {
		background-size: 100% 100%;
		left: 1.4rem;
		right: auto;
		width: 80px;
		inset: 0 auto 0 0;
	}

	.ppm-parada:nth-child(even) {
		margin-top: 0;
	}
}

/* Metodología: fichas de beneficio que giran; la cara de atrás usa el mismo oscuro de la marca */
.ppm-ben.pp3-flip {
	min-height: 15rem;
	rotate: 0deg !important;
}

.ppm-ben.pp3-flip::before {
	display: none;
}

.ppm-ben .pp3-flip__cara,
.ppm-ben .pp3-flip__dorso {
	align-items: flex-start;
	justify-content: flex-start;
	padding: 1.5rem;
	border: 2px solid var(--pp-ink);
	border-radius: 22px;
	text-align: left;
}

.ppm-ben .pp3-flip__cara {
	background: var(--pp-white);
	box-shadow: 6px 6px 0 var(--pp-coral);
}

.ppm-ben .pp3-flip__dorso {
	background: var(--pp-ink);
	box-shadow: 6px 6px 0 var(--pp-sky);
}

.ppm-ben .pp3-flip__dorso .pp3-flip__texto {
	color: var(--pp-white);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5;
}

.ppm-ben .pp3-flip__nombre {
	font-size: 1.15rem;
}

.ppm-ben .pp3-flip__cara::after {
	content: "↻";
	position: absolute;
	right: 1rem;
	bottom: 0.8rem;
	color: var(--pp-teal);
	font-size: 1.3rem;
}

.ppm-ben .pp3-flip__cara {
	position: relative;
}

/* Fichas de beneficio: solo la cara muestra borde y color; el contenedor no añade caja propia */
.ppm-ben.pp3-flip {
	display: grid;
	border: 0;
	padding: 0;
	background: none;
	box-shadow: none;
	border-radius: 0;
}

.ppm-ben .pp3-flip__cara,
.ppm-ben .pp3-flip__dorso {
	min-height: 15rem;
	gap: 0.6rem;
}

.ppm-ben .pp3-flip__cara::after {
	top: 1rem;
	right: 1.1rem;
	bottom: auto;
}

.ppm-ben .pp3-flip__nombre {
	padding-right: 1.5rem;
}

/* ================================================================== */
/* Metodología v2: idea, clase en línea de tiempo y testimonio destacado */
/* ================================================================== */

.ppm-hero .ppm-stk--t { width: 13%; bottom: -6%; left: -9%; rotate: -10deg; }

.ppm-cab .pp-title { margin-bottom: 0.4rem; }

/* Tres verbos */
.ppm-idea .pp-container { display: flex; flex-direction: column; gap: clamp(2rem, 4vw, 3rem); }
.ppm-idea .pp-container > * { margin-block: 0; }
.ppm-verbos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.8rem; }
.ppm-verbo {
	display: flex; flex-direction: column; gap: 0.5rem; padding: 1.8rem 1.6rem;
	border: 2px solid var(--pp-ink); border-radius: 24px; background: var(--pp-white);
	box-shadow: 6px 6px 0 var(--pp-sky);
}
.ppm-verbo:nth-child(2) { background: var(--pp-coral-soft); box-shadow: 6px 6px 0 var(--pp-ink); }
.ppm-verbo > * { margin: 0; }
.ppm-verbo__num { color: var(--pp-coral); font-family: var(--pp-font-hand); font-size: 1.8rem; font-weight: 700; line-height: 1; }
.ppm-verbo__t { color: var(--pp-ink); font-family: var(--pp-font-title); font-size: 1.4rem; font-weight: 800; }
.ppm-verbo__txt { color: #2f4f57; line-height: 1.55; }

/* Camino: el contenedor de paradas sin la línea de la versión anterior (solo fichas) */
.ppm-camino { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.2rem 3rem; max-width: 60rem; margin: 0 auto; }
.ppm-camino::before {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 620' preserveAspectRatio='none'%3E%3Cpath d='M300 20 C 520 90, 80 190, 300 310 S 80 530, 300 600' fill='none' stroke='%23FF5757' stroke-width='5' stroke-dasharray='2 14' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.ppm-camino > * { position: relative; z-index: 1; margin: 0; }
.ppm-parada { display: flex; align-items: flex-start; gap: 1.1rem; padding: 1.5rem; border: 2px solid var(--pp-ink); border-radius: 24px; background: var(--pp-white); box-shadow: 6px 6px 0 var(--pp-sky); }
.ppm-parada:nth-child(even) { margin-top: 3rem; background: var(--pp-coral-soft); box-shadow: 6px 6px 0 var(--pp-ink); }
.ppm-parada__num { display: grid; flex: none; place-items: center; width: 3.2rem; height: 3.2rem; margin: 0 !important; border: 2px solid var(--pp-ink); border-radius: 50%; background: var(--pp-coral); color: var(--pp-ink); font-family: var(--pp-font-title); font-weight: 800; box-shadow: 3px 3px 0 var(--pp-ink); }
.ppm-parada__cuerpo { display: flex; flex-direction: column; gap: 0.4rem; }
.ppm-parada__cuerpo > * { margin: 0; }
.ppm-parada__titulo { color: var(--pp-ink); font-family: var(--pp-font-title); font-size: 1.25rem; font-weight: 800; }
.ppm-parada__txt { color: #2f4f57; font-size: 0.97rem; line-height: 1.55; }

/* Clase en línea de tiempo */
.ppm-clase-sec .pp-container { display: flex; flex-direction: column; gap: clamp(2.5rem, 5vw, 3.5rem); }
.ppm-clase-sec .pp-container > * { margin-block: 0; }
.ppm-clase { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.2rem; }
.ppm-clase::before {
	content: ""; position: absolute; top: 1.45rem; left: 8%; right: 8%; height: 6px; border-radius: 3px;
	background: repeating-linear-gradient(90deg, var(--pp-coral) 0 18px, transparent 18px 28px);
}
.ppm-clase__item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.7rem; text-align: center; }
.ppm-clase__item > * { margin: 0; }
.ppm-clase__num {
	display: grid; place-items: center; width: 3rem; height: 3rem; border: 2px solid var(--pp-ink); border-radius: 50%;
	background: var(--pp-white); color: var(--pp-ink); font-family: var(--pp-font-title); font-weight: 800; box-shadow: 3px 3px 0 var(--pp-coral);
}
.ppm-clase__item:nth-child(even) .ppm-clase__num { background: var(--pp-coral); box-shadow: 3px 3px 0 var(--pp-ink); }
.ppm-clase__t { color: var(--pp-ink); font-family: var(--pp-font-title); font-size: 1.05rem; font-weight: 800; line-height: 1.2; }
.ppm-clase__txt { color: #2f4f57; font-size: 0.92rem; line-height: 1.5; }

/* Testimonios: uno destacado a la izquierda, dos a la derecha */
.ppm-testi .pp-container { display: flex; flex-direction: column; gap: clamp(2rem, 4vw, 3rem); }
.ppm-testi .pp-container > * { margin-block: 0; }
.ppm-testi__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 1.8rem; align-items: stretch; }
.ppm-testi__dest {
	display: flex; flex-direction: column; gap: 1rem; padding: 2.2rem; border: 2px solid var(--pp-ink);
	border-radius: 28px; background: var(--pp-ink); color: var(--pp-white); box-shadow: 8px 8px 0 var(--pp-coral);
}
.ppm-testi__dest > * { margin: 0; }
.ppm-testi__etiqueta { width: fit-content; padding: 0.15rem 0.85rem; border: 2px solid var(--pp-white); border-radius: 999px; background: var(--pp-coral); color: var(--pp-ink); font-family: var(--pp-font-title); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.ppm-testi__foto { width: 6rem; }
.ppm-testi__foto img { display: block; width: 100%; height: auto; }
.ppm-testi__quote { font-size: clamp(1.15rem, 2.2vw, 1.45rem); font-weight: 600; line-height: 1.45; }
.ppm-testi__autor { color: var(--pp-sky); font-family: var(--pp-font-title); font-weight: 800; }
.ppm-testi__otros { display: flex; flex-direction: column; gap: 1.4rem; }
.ppm-testi__n { flex: none; }

/* Cierre */
.ppm-cta { background: var(--pp-sky); background-image: radial-gradient(rgb(255 255 255 / 0.45) 2px, transparent 2px); background-size: 28px 28px; position: relative; overflow: hidden; }
.ppm-cta .pp-kicker, .ppm-cta .pp-lead { color: var(--pp-ink); }
.ppm-cta .pp-btns { justify-content: center; }
.ppm-cta .ppm-stk--e { position: absolute; width: 9rem; top: 1.5rem; right: 6%; rotate: 10deg; }

@media (max-width: 1024px) {
	.ppm-clase { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2rem; }
	.ppm-clase::before { display: none; }
}
@media (max-width: 900px) {
	.ppm-verbos { grid-template-columns: 1fr; }
	.ppm-testi__grid { grid-template-columns: 1fr; }
	.ppm-camino { grid-template-columns: 1fr; }
	.ppm-parada:nth-child(even) { margin-top: 0; }
	.ppm-camino::before { display: none; }
}
@media (max-width: 600px) {
	.ppm-clase { grid-template-columns: 1fr; }
	.ppm-cta .ppm-stk--e { width: 6rem; }
}

/* Testimonios: el contenido no se recorta (la sección ya no oculta la segunda tarjeta) */
.ppm-testi { overflow: visible; padding-bottom: clamp(4rem, 8vw, 6rem); }
.ppm-testi__dest { justify-content: center; }

/* ------------------------------------------------------------------ */
/* Metodología: identidad propia con los tokens de la guía de estilos */
/* (bloques nativos + clases met-*; los textos se editan en el panel)  */
/* ------------------------------------------------------------------ */

/* El hero necesita más ancho que el resto de las secciones (la tarjeta de pregunta tiene
   mucho texto: pasaje + pregunta + 4 alternativas + retroalimentación). En vez de quitarle
   espacio a la columna de texto, se le da más ancho al contenedor completo, parejo para
   los dos lados. */
.met-hero .pp-container {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 56px;
	align-items: center;
	max-width: 1380px;
}

/* Antes tenía 2 columnas: en esta tarjeta angosta (la mitad del hero) el texto de cada
   alternativa no calzaba y se desbordaba de su columna. Hereda 1 columna (igual que en
   Cursos, donde la tarjeta es más ancha y sí entra en 2). */

/* El panel de "pista" y el de retroalimentación quedaban pegados a las alternativas de
   arriba (sus márgenes están en 0, igual que el resto de la tarjeta). El espacio sale de
   las alternativas (no de "pista"/retroalimentación, que se muestran y ocultan una a la
   otra): así es el mismo aire se vea el panel que se vea. */
/* .ppc-ej es una grilla de 2 columnas pensada para Cursos (hoja de la pregunta a la
   izquierda, "Así la trabajamos en clase" a la derecha). La pregunta de Metodología no
   tiene esa segunda columna: todo (texto, pregunta, alternativas, respuesta) va en una
   sola columna, en el orden del contenido. El padding interno normalmente lo pone
   ".ppc-hoja" (que acá no se usa) dentro del borde de ".ppc-ej": sin eso el texto queda
   pegado al borde, así que se agrega directo aquí. */
.met-pregunta .ppc-ej {
	display: block;
	padding: clamp(1.4rem, 3vw, 2rem);
}

.met-pregunta .ppc-opciones {
	margin-bottom: 1.1rem !important;
}
.met-pregunta .ppc-pista,
.met-pregunta .ppc-feedback {
	margin-top: 0 !important;
}

.met-hero > .pp-container > * { min-width: 0; }

.met-pregunta {
	padding: 34px;
	border: 2px solid var(--pp-ink);
	border-radius: 28px;
	background: var(--pp-white);
	box-shadow: 10px 10px 0 var(--pp-sky);
	rotate: 1deg;
}

.met-pregunta > * { margin-block: 0; }

.met-chip {
	display: inline-block;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--pp-ink);
	color: var(--pp-white);
	font-family: var(--pp-font-title);
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.met-pregunta__txt {
	margin: 18px 0 0 !important;
	font-size: 1.15rem;
	font-weight: 500;
}

.met-pregunta__pregunta {
	margin: 18px 0 22px !important;
	font-size: 1.15rem;
	font-weight: 500;
}

@media (max-width: 900px) {
	/* Con todo el texto (pasaje + pregunta + 4 alternativas + retroalimentación) la tarjeta
	   intercalada en la página quedaba gigante en celular, probamos recortar el párrafo con
	   "Seguir leyendo" y poner las alternativas en 2 columnas, pero seguía viéndose muy
	   larga. Solución: en celular la tarjeta se abre como una ventana propia a pantalla
	   completa (con su propio scroll) en vez de empujar el resto de la página — así se
	   puede mostrar el contenido completo sin recortes. El "+' rosado ya gira a "×" al
	   abrir (CSS de .ppc-reto más abajo), así que sirve de botón para cerrar. JS en
	   home-v3.js bloquea el scroll del fondo mientras está abierta. */
	.met-pregunta[open] {
		position: fixed;
		inset: 0;
		z-index: 1000;
		width: 100%;
		max-width: none;
		height: 100%;
		margin: 0;
		padding: 0;
		rotate: 0deg;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		background: var(--pp-paper);
	}

	.met-pregunta[open] > summary {
		position: sticky;
		top: 0;
		z-index: 1;
		margin: 0;
		border-radius: 0;
		box-shadow: none;
	}

	.met-pregunta[open] > .ppc-ej {
		margin: 0;
		max-width: none;
		padding: 1.6rem 1.4rem 3rem;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}
}

html.pp-modal-abierto {
	overflow: hidden;
}

@media (max-width: 600px) {
	/* En celular angosto las 4 alternativas apiladas (una por fila) ocupan mucho alto.
	   Se ponen de a 2 por fila, con letra arriba y texto abajo (en vez de al lado) para
	   que cada columna angosta no tenga que partir cada palabra. */
	.met-pregunta .ppc-opciones {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.5rem;
	}

	.met-pregunta .ppc-opcion {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.45rem;
		padding: 0.6rem 0.7rem;
	}

	.met-pregunta .ppc-opcion__letra {
		width: 1.6rem;
		height: 1.6rem;
		font-size: 0.78rem;
	}

	.met-pregunta .ppc-opcion__txt {
		font-size: 0.88rem;
		line-height: 1.3;
	}
}

.met-opciones { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.met-opciones li {
	padding: 12px 16px;
	border: 2px solid var(--pp-ink);
	border-radius: 16px;
	background: var(--pp-white);
}
.met-opciones li:nth-child(2) { background: var(--pp-coral-soft); }
.met-opciones li b { margin-right: 8px; color: var(--pp-teal); font-family: var(--pp-font-title); }

/* Pilares: tarjetas grandes con el verbo como título */
.met-pilares {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 26px;
	margin-top: 70px;
}
.met-pilares > * {
	margin-block: 0 !important;
}

.met-pilar {
	padding: 32px;
	border: 2px solid var(--pp-ink);
	border-radius: 24px;
	background: var(--pp-white);
	box-shadow: 6px 6px 0 var(--pp-ink);
}
.met-pilar:nth-child(1) { background: var(--pp-coral-soft); rotate: -1.2deg; }
.met-pilar:nth-child(2) { background: var(--pp-paper); box-shadow: 6px 6px 0 var(--pp-teal); rotate: 0.6deg; }
.met-pilar:nth-child(3) { box-shadow: 6px 6px 0 var(--pp-sky); rotate: -0.4deg; }
.met-pilar > * { margin-block: 0; }
.met-pilar h3 {
	margin: 14px 0 10px !important;
	color: var(--pp-ink);
	font-family: var(--pp-font-title);
	font-size: 1.7rem;
	font-weight: 800;
	letter-spacing: -0.01em;
}

/* Camino: línea vertical que se llena al bajar (JS en home-v3.js) */
.met-camino {
	position: relative;
	max-width: 880px;
	margin: 80px auto 0;
	--met-avance: 0;
}
.met-camino::before,
.met-camino::after {
	content: "";
	position: absolute;
	left: 29px;
	top: 30px;
	width: 4px;
	border-radius: 99px;
}
.met-camino::before { bottom: 30px; background: var(--pp-sky); }
.met-camino::after {
	height: calc((100% - 60px) * var(--met-avance));
	background: var(--pp-coral);
	transition: height 0.25s linear;
}

.met-paso {
	position: relative;
	margin: 0 0 60px !important;
	padding-left: 90px;
}
.met-paso:last-child { margin-bottom: 0 !important; }
.met-paso > * { margin-block: 0; }

.met-paso__num {
	position: absolute !important;
	left: 0;
	top: 0;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
	border: 3px solid var(--pp-ink);
	border-radius: 50%;
	background: var(--pp-white);
	color: var(--pp-ink);
	font-family: var(--pp-font-title);
	font-size: 1.3rem;
	font-weight: 900;
	transition: background 0.4s ease;
}
/* Tinta con borde coral, no coral de fondo: el número (16-18px en móvil) no pasa
   contraste en tinta sobre coral puro, igual que en otras fichas del sitio. */
.met-paso.is-on .met-paso__num { background: var(--pp-ink); border-color: var(--pp-coral); color: var(--pp-white); }

.met-paso__card {
	padding: 30px 34px;
	border: 2px solid var(--pp-ink);
	border-radius: 24px;
	background: var(--pp-white);
	box-shadow: 6px 6px 0 var(--pp-sky);
}
.met-paso:nth-child(odd) .met-paso__card { rotate: -0.5deg; }
.met-paso:nth-child(even) .met-paso__card { rotate: 0.5deg; background: var(--pp-paper); }
/* El verbo en teal no pasa contraste sobre esa tarjeta en celeste a su tamaño pequeño. */
.met-paso:nth-child(even) .met-paso__verbo { color: var(--pp-ink); }
.met-paso__verbo {
	margin: 0 0 7px !important;
	color: var(--pp-teal);
	font-family: var(--pp-font-title);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.met-paso__card h3 {
	margin: 0 0 10px !important;
	color: var(--pp-ink);
	font-family: var(--pp-font-title);
	font-size: 1.5rem;
	font-weight: 800;
}
.met-paso__card p:last-child { margin-bottom: 0; }

/* Razones: columnas con cifra grande y borde superior coral */
.met-razones {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 26px;
	margin-top: 55px;
}
.met-razones > * {
	margin-block: 0 !important;
}
.met-razon {
	padding: 28px 28px 32px;
	border-top: 6px solid var(--pp-coral);
	background: var(--pp-paper);
	border-radius: 0 0 24px 24px;
}
.met-razon > * { margin-block: 0; }
.met-razon__num {
	color: var(--pp-teal) !important;
	font-family: var(--pp-font-title);
	font-size: 2.6rem !important;
	font-weight: 900;
	line-height: 1;
}
.met-razon h3 {
	margin: 14px 0 10px !important;
	color: var(--pp-ink);
	font-family: var(--pp-font-title);
	font-size: 1.3rem;
	font-weight: 800;
}

/* Cierre: texto a la izquierda y botones a la derecha, sobre teal oscuro */
.met-cierre .pp-container {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
	gap: 50px;
	align-items: center;
}
.met-cierre .pp-stack > * { margin-block: 0; }
.met-cierre .pp-title { color: var(--pp-white); }
.met-cierre .pp-lead { color: #d6eef2; }

@media (max-width: 900px) {
	.met-hero .pp-container,
	.met-cierre .pp-container { grid-template-columns: 1fr; gap: 44px; }
	.met-pilares,
	.met-razones { grid-template-columns: 1fr; }
	/* Igual que el cierre y el hero de Equipo: en una columna el texto se centra en vez de
	   quedar pegado a la izquierda. */
	.met-hero__copia { text-align: center; }
	.met-hero__copia .pp-kicker,
	.met-hero__copia .pp-lead { margin-inline: auto; }
	.met-hero__copia .pp-btns { justify-content: center; }
	.met-cierre__texto { justify-items: center; text-align: center; }
	.met-cierre__texto .pp-btns { justify-content: center; }
	/* "Diagnosticar/Ejercitar/Consolidar": en una sola columna se veían pegadas a la
	   izquierda, a diferencia del resto de las tarjetas con pasos numerados del sitio
	   (p. ej. "Cómo lo trabajamos" de Cursos), que sí quedan centradas. */
	.met-pilar { text-align: center; }
}
@media (max-width: 600px) {
	.met-pregunta { padding: 24px; box-shadow: 6px 6px 0 var(--pp-sky); }
	.met-paso { padding-left: 70px; }
	.met-paso__num { width: 48px; height: 48px; font-size: 1.05rem; }
	.met-camino::before, .met-camino::after { left: 23px; }
	.met-paso__card { padding: 24px; }
}
@media (prefers-reduced-motion: reduce) {
	.met-camino::after, .met-paso__num { transition: none; }
}

/* Metodología: aire bajo el manuscrito del hero y textos legibles sobre el fondo oscuro del camino */
.met-hero .pp3-toque { margin: 14px 0 22px; }
.met-camino-sec .pp-kicker { color: var(--pp-sky); }
.met-camino-sec .pp-title { color: var(--pp-white); }
.met-camino-sec .pp-lead { color: #d6eef2; }

/* Metodología: patrón de líneas visible en todas las secciones y cierre en celeste (separado del pie oscuro) */
.met-hero,
.met-cierre {
	background-color: var(--pp-paper);
	background-image:
		linear-gradient(rgb(1 59 69 / 0.07) 2px, transparent 2px),
		linear-gradient(90deg, rgb(1 59 69 / 0.07) 2px, transparent 2px);
	background-size: 64px 64px;
	background-position: center top;
}
.met-camino-sec.pp-grid--dark {
	background-image:
		linear-gradient(rgb(255 255 255 / 0.12) 2px, transparent 2px),
		linear-gradient(90deg, rgb(255 255 255 / 0.12) 2px, transparent 2px);
}
.met-cierre .pp-kicker { color: var(--pp-teal); }
.met-cierre .pp-title { color: var(--pp-ink); }
.met-cierre .pp-lead { color: var(--pp-ink); }

/* Metodología: fotos de relleno (se reemplazan desde el panel) */
.met-foto { max-width: 880px; margin: 0 auto 70px !important; }
.met-foto img,
.met-cierre__foto img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 7;
	object-fit: cover;
	border: 2px solid var(--pp-ink);
	border-radius: 24px;
	box-shadow: 8px 8px 0 var(--pp-coral);
}
.met-cierre__aside { display: grid; gap: 28px; justify-items: start; }
.met-cierre__foto { margin: 0 !important; width: min(100%, 340px); rotate: 1.5deg; }
.met-cierre__foto img { aspect-ratio: 4 / 3; box-shadow: 8px 8px 0 var(--pp-teal); }

/* Metodología: patrón de líneas del camino con su tamaño de celda (el camino vuelve a ser vertical) */
.met-camino-sec.pp-grid--dark {
	background-size: 64px 64px;
	background-position: center top;
}

/* Metodología: foto del cierre más pequeña (en móvil no debe ocupar el ancho completo) */
.met-cierre__foto { width: min(100%, 280px) !important; }
@media (max-width: 600px) {
	.met-cierre__foto { width: min(100%, 200px) !important; }
}

/* Metodología: pasos más compactos (misma estructura, menos aire) */
.met-camino { margin-top: 44px; max-width: 760px; }
.met-camino::before, .met-camino::after { left: 25px; }
.met-paso { padding-left: 86px !important; margin-bottom: 26px !important; }
.met-paso__num { width: 54px; height: 54px; font-size: 1.15rem; }
.met-paso__card { padding: 20px 26px; }
.met-paso__verbo { margin-bottom: 4px !important; }
.met-paso__card h3 { font-size: 1.25rem; margin-bottom: 6px !important; }
.met-paso__card p { font-size: 0.95rem; line-height: 1.5; }
@media (max-width: 600px) {
	.met-camino::before, .met-camino::after { left: 21px; }
	.met-paso { padding-left: 70px !important; }
	.met-paso__num { width: 46px; height: 46px; font-size: 1rem; }
	.met-paso__card { padding: 18px 20px; }
}

/* Metodología: foto del cierre como polaroid a la derecha (el texto y los botones quedan a la izquierda,
   solo en desktop/tablet — "justify-items: start" en celular pisaba el centrado de más arriba porque
   esta regla, al venir después en el archivo, le ganaba a la del media query de mobile). */
.met-cierre .pp-container { align-items: center; }
.met-cierre__texto { display: grid; gap: 22px; }
.met-cierre__texto > * { margin-block: 0; }
@media (min-width: 901px) {
	.met-cierre__texto { justify-items: start; }
}
.met-cierre__foto { width: min(100%, 300px) !important; margin: 0 auto !important; justify-self: center; }
.met-cierre__foto img { border: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
@media (max-width: 900px) {
	.met-cierre__foto { width: min(100%, 240px) !important; }
}

/* Metodología: polaroid del cierre más pequeña (el marco suma ancho) */
.met-cierre__foto { width: min(100%, 230px) !important; }
@media (max-width: 900px) {
	.met-cierre__foto { width: min(100%, 190px) !important; }
}

/* Metodología: tamaño final de la polaroid del cierre (selector más específico para ganar a la regla de la polaroid) */
.met-cierre .wp-block-image.met-cierre__foto { width: min(100%, 230px) !important; }
@media (max-width: 900px) {
	.met-cierre .wp-block-image.met-cierre__foto { width: min(100%, 180px) !important; }
}

/* Metodología: en móvil la polaroid queda chica (150 px + marco) */
@media (max-width: 900px) {
	.met-cierre .wp-block-image.met-cierre__foto { width: min(100%, 150px) !important; }
}

/* Metodología: razones con ícono y tarjetas blancas sobre el fondo celeste suave */
.met-razon { background: var(--pp-white); }
.met-razon__ico { width: 64px; margin: 0 0 14px !important; }
.met-razon__ico img { width: 64px; height: 64px; object-fit: contain; }

/* ------------------------------------------------------------------ */
/* Carrusel de testimonios con 3 tarjetas (Cursos, Metodología, Home v3): */
/* en pantallas anchas caben las 3 sin recortar la última; se centran   */
/* y se ocultan las flechas y los puntos, que ahí no sirven de nada.    */
/* Los carruseles con 4 tarjetas (Home v1 y v2) siguen con scroll.      */
/* ------------------------------------------------------------------ */
@media (min-width: 1100px) {
	.pp-carousel:has(.pp-carousel__track > .pp2-nota:nth-child(3):last-child) .pp-carousel__track {
		overflow: visible;
		justify-content: center;
		flex-wrap: wrap;
	}
	.pp-carousel:has(.pp-carousel__track > .pp2-nota:nth-child(3):last-child) .pp2-nota {
		flex: 0 1 340px;
	}
	.pp-carousel:has(.pp-carousel__track > .pp2-nota:nth-child(3):last-child) .pp-carousel__controles {
		display: none;
	}
}

/* ------------------------------------------------------------------ */
/* Equipo: identidad propia (credencial, fichas con credenciales,       */
/* valores de trabajo en equipo). Reutiliza .pp3-cifras para las cifras. */
/* ------------------------------------------------------------------ */
.eq-hero .pp-container {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
	gap: 70px;
	align-items: center;
	max-width: 1320px;
}
.eq-hero > .pp-container > * { min-width: 0; }

/* Credencial tipo carnet, con cinta y zona de color detrás de la foto */
.eq-credencial {
	position: relative;
	width: min(100%, 360px);
	margin: 0 auto;
	padding: 0 0 28px;
	border: 2px solid var(--pp-ink);
	border-radius: 26px;
	background: var(--pp-white);
	box-shadow: 10px 10px 0 var(--pp-coral);
	rotate: 1.2deg;
}
/* Cinta: tira que "entra" por arriba de la tarjeta */
.eq-credencial::before {
	content: "";
	position: absolute;
	top: -48px;
	left: 50%;
	translate: -50% 0;
	width: 34px;
	height: 50px;
	border: 2px solid var(--pp-ink);
	border-radius: 8px;
	background: var(--pp-coral);
}
/* Anilla metálica donde se engancha la cinta */
.eq-credencial::after {
	content: "";
	position: absolute;
	top: -13px;
	left: 50%;
	translate: -50% 0;
	width: 28px;
	height: 28px;
	border: 2px solid var(--pp-ink);
	border-radius: 50%;
	background: var(--pp-sky);
}
.eq-credencial > * { margin-block: 0; }
.eq-credencial__avatar {
	width: 100%;
	margin: 0 0 20px !important;
	padding: 36px 24px 22px;
	background: var(--pp-teal);
	border-radius: 24px 24px 0 0;
}
.eq-credencial__avatar img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	height: auto;
	border: 2px solid var(--pp-ink);
	border-radius: 18px;
	object-fit: cover;
	filter: grayscale(100%);
	background: var(--pp-white);
	box-shadow: 5px 5px 0 var(--pp-ink);
}
.eq-credencial__nombre {
	margin: 0 24px 2px !important;
	color: var(--pp-ink);
	font-family: var(--pp-font-title);
	font-size: 1.35rem;
	font-weight: 900;
	text-align: center;
}
.eq-credencial__rol {
	margin: 0 24px 18px !important;
	color: var(--pp-teal);
	font-size: 0.92rem;
	font-weight: 700;
	text-align: center;
}
.eq-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0 !important; }
.eq-chips > * { margin: 0 !important; }
.eq-chip {
	display: inline-flex;
	align-items: center;
	padding: 5px 12px;
	border: 2px solid var(--pp-ink);
	border-radius: 999px;
	background: var(--pp-paper);
	color: var(--pp-ink);
	font-family: var(--pp-font-title);
	font-size: 0.74rem;
	font-weight: 700;
}
/* En la credencial del hero: ficha con filas en vez de pills sueltas */
.eq-credencial .eq-chips { flex-direction: column; flex-wrap: nowrap; gap: 0; justify-content: flex-start; margin: 0 24px !important; border-top: 2px solid var(--pp-paper); }
.eq-credencial .eq-chip {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 2px;
	border: 0;
	border-bottom: 2px solid var(--pp-paper);
	border-radius: 0;
	background: none;
	font-size: 0.82rem;
}
.eq-credencial .eq-chip::before {
	content: "";
	width: 9px;
	height: 9px;
	flex: 0 0 9px;
	border-radius: 50%;
	background: var(--pp-coral);
}

/* Fichas del equipo */
.eq-equipo__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 26px;
	margin-top: 60px;
}
.eq-equipo__grid > * {
	margin-block: 0 !important;
}
.eq-persona {
	flex: 1 1 300px;
	max-width: 340px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 28px;
	border: 2px solid var(--pp-ink);
	border-radius: 24px;
	background: var(--pp-white);
	box-shadow: 6px 6px 0 var(--pp-ink);
}
.eq-persona:nth-child(3n+2) { background: var(--pp-paper); box-shadow: 6px 6px 0 var(--pp-teal); rotate: 0.6deg; }
.eq-persona:nth-child(3n+3) { background: var(--pp-coral-soft); box-shadow: 6px 6px 0 var(--pp-sky); rotate: -0.6deg; }
.eq-persona:nth-child(3n+1) { rotate: 0.3deg; }
.eq-persona__top { display: flex; align-items: center; gap: 14px; }
.eq-persona__avatar { width: 80px; flex: 0 0 80px; margin: 0 !important; }
.eq-persona__avatar img {
	width: 80px;
	height: 80px;
	border: 2px solid var(--pp-ink);
	border-radius: 50%;
	object-fit: cover;
	object-position: center 18%;
	filter: grayscale(100%);
}
.eq-persona__datos { display: grid; gap: 2px; }
.eq-persona h3 {
	margin: 0 !important;
	color: var(--pp-ink);
	font-family: var(--pp-font-title);
	font-size: 1.2rem;
	font-weight: 800;
}
/* Teal y coral a este tamaño no pasan WCAG sobre el celeste ni el coral suave de las
   tarjetas pares/impares: se usa tinta, que sí pasa sobre las 3 tarjetas. */
.eq-persona__rol { margin: 0 !important; color: var(--pp-ink); font-size: 0.85rem; font-weight: 700; }
.eq-persona .eq-chips { justify-content: flex-start; }
.eq-persona__bio { margin: 0 !important; color: #3f6068; font-size: 0.95rem; }
.eq-persona__lema {
	margin: 4px 0 0 !important;
	color: var(--pp-ink);
	font-family: var(--pp-font-hand);
	font-size: 1.2rem;
	font-weight: 700;
	rotate: -1deg;
}

/* Valores de trabajo en equipo (3 tarjetas con ícono) */
.eq-valores {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 26px;
	margin-top: 55px;
}
.eq-valores > * {
	margin-block: 0 !important;
}
.eq-valor {
	padding: 30px;
	border: 2px solid var(--pp-ink);
	border-radius: 24px;
	background: var(--pp-white);
	box-shadow: 6px 6px 0 var(--pp-coral);
}
.eq-valor:nth-child(2) { background: var(--pp-paper); box-shadow: 6px 6px 0 var(--pp-ink); }
.eq-valor__ico { width: 56px; margin: 0 0 14px !important; }
.eq-valor__ico img { width: 56px; height: 56px; object-fit: contain; }
.eq-valor h3 {
	margin: 0 0 8px !important;
	color: var(--pp-ink);
	font-family: var(--pp-font-title);
	font-size: 1.25rem;
	font-weight: 800;
}
.eq-valor p { margin: 0; color: #3f6068; }

/* Cierre: dos fichas polaroid en vez de una foto ancha */
.eq-cierre .pp-container {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
	gap: 50px;
	align-items: center;
}
.eq-cierre__texto { display: grid; gap: 22px; justify-items: start; }
.eq-cierre__texto > * { margin-block: 0; }
/* Antes dos polaroids apiladas (la foto real de Pancha + un avatar de ejemplo detrás).
   Pancha pidió dejar solo su foto, sin nada detrás: ahora es una polaroid única, más grande,
   con una "chapa" pegada en la esquina como sticker (mismo estilo de credencial que las
   tarjetas del equipo en el Home) para que no se vea como si le faltara algo al lado. */
.eq-cierre__fotos { position: relative; justify-self: center; width: min(100%, 230px); }
.eq-cierre__fotos .wp-block-image.pp2-polaroid { width: 100% !important; rotate: -3deg; }
.eq-cierre__chapa {
	position: absolute;
	right: -0.8rem;
	bottom: -0.6rem;
	z-index: 2;
	rotate: 6deg;
}

@media (max-width: 900px) {
	.eq-hero .pp-container,
	.eq-cierre .pp-container { grid-template-columns: 1fr; gap: 44px; }
	.eq-valores { grid-template-columns: 1fr; }
	.eq-hero__copia { text-align: center; }
	.eq-hero__copia .pp-kicker,
	.eq-hero__copia .pp-lead { margin-inline: auto; }
	.eq-hero__copia .pp-btns { justify-content: center; }
	.eq-cierre__texto { justify-items: center; text-align: center; }
	.eq-cierre__texto .pp-btns { justify-content: center; }
}

/* Equipo: cifras centradas (el componente no trae margen automático) y colores del cierre sobre fondo oscuro */
#por-que-nuestro-equipo .pp3-cifras {
	margin-inline: auto;
}
.eq-cierre .pp-kicker { color: var(--pp-teal); }


/* ------------------------------------------------------------------ */
/* Opiniones: identidad propia (tarjeta de calificación, muro de        */
/* opiniones en vez de carrusel, puntos de confianza).                  */
/* ------------------------------------------------------------------ */
.op-hero .pp-container {
	max-width: 46rem;
	margin-inline: auto;
}
.op-hero .pp-btns {
	justify-content: center;
}

.op-hero__estrellas {
	color: var(--pp-coral);
	font-size: 1.7rem;
	letter-spacing: 0.12em;
	rotate: -2deg;
}
/* Muro de opiniones: las mismas notas adhesivas de las otras páginas, pero en
   cuadrícula fija en vez de carrusel con scroll. */
.op-muro {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.8rem 1.6rem;
	margin-top: 60px;
}
.op-muro > * { margin-block: 0; }
.op-muro .pp2-nota {
	flex: 1 1 300px;
	max-width: 360px;
}
.op-muro .pp2-nota:nth-child(5) {
	--papel: #ffe9c7;
	rotate: 1deg;
}
.op-muro .pp2-nota:nth-child(6) {
	--papel: var(--pp-paper);
	rotate: -1.5deg;
}

/* Confianza: 3 tarjetas con ícono (mismo lenguaje que el resto del sitio) */
.op-confianza__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 26px;
	margin-top: 55px;
}
.op-confianza__grid > * { margin-block: 0; }
.op-punto {
	padding: 30px;
	border: 2px solid var(--pp-ink);
	border-radius: 24px;
	background: var(--pp-white);
	box-shadow: 6px 6px 0 var(--pp-sky);
}
.op-punto:nth-child(2) { background: var(--pp-coral-soft); box-shadow: 6px 6px 0 var(--pp-ink); }
.op-punto__ico { width: 56px; margin: 0 0 14px !important; }
.op-punto__ico img { width: 56px; height: 56px; object-fit: contain; }
.op-punto h3 {
	margin: 0 0 8px !important;
	color: var(--pp-ink);
	font-family: var(--pp-font-title);
	font-size: 1.2rem;
	font-weight: 800;
}
.op-punto p { margin: 0; color: #3f6068; }

@media (max-width: 900px) {
	.op-confianza__grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ */
/* Contraste: el kicker manuscrito coral (y el manuscrito pp3-toque)    */
/* no pasa WCAG sobre el celeste suave (pp-grid--paper): se usa teal,   */
/* igual que ya se hacía en met-camino-sec y los cierres. */
/* ------------------------------------------------------------------ */
.met-hero .pp-kicker,
.met-hero .pp3-toque,
#que-buscamos .pp-kicker,
.eq-hero .pp-kicker,
#el-equipo .pp-kicker,
.op-hero .pp-kicker,
#lo-que-mas-valoran .pp-kicker {
	color: var(--pp-teal);
}

/* La tarjeta de pregunta de Metodología es blanca (la de Cursos es oscura): el texto de
   "pista" (#9fd4de, pensado para fondo oscuro) no pasa contraste aquí. */
.met-pregunta .ppc-pista {
	color: var(--pp-teal);
}