/*
 * Home v2: más imágenes, subrayados variados y presentaciones distintas por sección.
 * Se apoya en las piezas comunes de home.css. Todo el contenido (textos, imágenes,
 * enlaces) vive en la página y se edita desde el panel; aquí solo hay estilo.
 * Las inclinaciones usan la propiedad `rotate` y los movimientos `translate`, para
 * no pelear con las animaciones de aparición (que usan `transform`).
 */

/* ------------------------------------------------------------------ */
/* Estilos de título: cada uno decora las palabras en color coral      */
/* ------------------------------------------------------------------ */

/* En estos estilos, el color coral del editor solo elige QUÉ palabras se decoran. */
.wp-block-heading.is-style-etiqueta mark,
.wp-block-heading.is-style-marcador mark,
.wp-block-heading.is-style-ondas mark,
.wp-block-heading.is-style-circulo mark,
.wp-block-heading.is-style-doble mark {
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* Etiqueta: las palabras van sobre una pastilla coral, como un sticker */
.wp-block-heading.is-style-etiqueta mark.has-inline-color {
	padding: 0 0.2em 0.05em;
	border-radius: 0.26em;
	background: var(--pp-coral) !important;
	color: var(--pp-white) !important;
}

/* Marcador: subrayador celeste detrás de las palabras */
.wp-block-heading.is-style-marcador mark.has-inline-color {
	margin-inline: -0.1em;
	padding: 0 0.12em;
	background: linear-gradient(transparent 52%, rgb(107 189 205 / 0.75) 52%, rgb(107 189 205 / 0.75) 92%, transparent 92%) !important;
	color: inherit !important;
}

/* Ondas: subrayado ondulado en coral */
.wp-block-heading.is-style-ondas mark.has-inline-color {
	padding-bottom: 0.2em;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 8' preserveAspectRatio='none'%3E%3Cpath d='M0 4Q6.5-1 13 4T26 4' fill='none' stroke='%23FF5757' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 100% / 0.72em 0.26em !important;
	color: inherit !important;
}

/* Círculo: la palabra queda encerrada en un garabato hecho a mano */
.wp-block-heading.is-style-circulo mark.has-inline-color {
	margin-inline: -0.05em;
	padding: 0.26em 0.2em 0.32em;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 70' preserveAspectRatio='none'%3E%3Cpath d='M16 38C8 14 64 5 104 6c52 1 92 12 88 32-4 24-60 30-98 28C46 64 4 56 14 28' fill='none' stroke='%23FF5757' stroke-width='3.2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat center / 100% 100% !important;
	color: inherit !important;
}

/* Doble: dos líneas rectas bajo las palabras elegidas (la segunda más corta) */
.wp-block-heading.is-style-doble mark.has-inline-color {
	padding-bottom: 0.4em;
	background:
		linear-gradient(var(--pp-coral), var(--pp-coral)) left bottom / 100% 4px no-repeat,
		linear-gradient(var(--pp-sky), var(--pp-sky)) left calc(100% - 10px) / 68% 4px no-repeat !important;
	color: inherit !important;
}

/* La banda inclinada y los stickers sobresalen del ancho: se recorta sin crear scroll. */
.wp-site-blocks {
	overflow-x: clip;
}

/* ------------------------------------------------------------------ */
/* Piezas nuevas                                                       */
/* ------------------------------------------------------------------ */

.pp2-stk {
	margin: 0;
	filter: drop-shadow(0 12px 14px rgb(1 59 69 / 0.22));
}

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

@keyframes pp2-bob {
	0%,
	100% {
		translate: 0 0;
	}

	50% {
		translate: 0 -14px;
	}
}

.pp2-flota {
	animation: pp2-bob var(--dur, 6s) ease-in-out var(--delay, 0s) infinite;
}

/* Polaroid: foto con marco blanco, cinta y pie manuscrito */
.wp-block-image.pp2-polaroid {
	position: relative;
	margin: 0;
	padding: 0.7rem 0.7rem 0.4rem;
	border: 2px solid var(--pp-ink);
	border-radius: 6px;
	background: var(--pp-white);
	box-shadow: 8px 8px 0 var(--pp-sky);
	transition: translate 0.25s ease, rotate 0.25s ease, box-shadow 0.25s ease;
}

.wp-block-image.pp2-polaroid::before {
	content: "";
	position: absolute;
	z-index: 2;
	top: -16px;
	left: 50%;
	width: 96px;
	height: 30px;
	translate: -50% 0;
	rotate: -3deg;
	background: rgb(107 189 205 / 0.72);
	border-inline: 2px dashed rgb(255 255 255 / 0.85);
}

.wp-block-image.pp2-polaroid img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border: 2px solid var(--pp-ink);
}

.wp-block-image.pp2-polaroid figcaption {
	margin: 0.35rem 0 0.15rem;
	color: var(--pp-ink);
	font-family: var(--pp-font-hand);
	font-size: 1.55rem;
	font-weight: 700;
	line-height: 1.1;
	text-align: center;
}

.wp-block-image.pp2-polaroid:hover {
	translate: 0 -6px;
	box-shadow: 11px 11px 0 var(--pp-sky);
}

.pp2-polaroid--sin-pie {
	padding-bottom: 0.7rem !important;
}

/* ------------------------------------------------------------------ */
/* Hero: collage                                                       */
/* ------------------------------------------------------------------ */

.pp2-hero {
	padding-bottom: clamp(5rem, 9vw, 7.5rem);
}

.pp2-hero__inner {
	display: grid;
	grid-template-columns: 1.02fr 0.98fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

.pp2-hero__inner > * {
	margin-block: 0;
}

.pp2-hero__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.4rem;
}

.pp2-hero__copy > * {
	margin-block: 0;
}

.pp2-hero__title {
	font-size: clamp(2.6rem, 6.8vw, 4.9rem);
	letter-spacing: -0.05em;
	/* El fondo de cada línea de la etiqueta mide ~1.22em: el interlineado debe superarlo. */
	line-height: 1.42;
}

.pp2-collage {
	position: relative;
	isolation: isolate;
	/* Ancho definido (no width + max-width): así la proporción se calcula sobre el ancho real. */
	width: min(100%, 540px);
	aspect-ratio: 1 / 1.5;
	justify-self: end;
}

.pp2-collage::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: auto auto -6% -8%;
	width: 62%;
	aspect-ratio: 1;
	background: url("../img/decoracion/puntos.png") center / contain no-repeat;
	opacity: 0.8;
}

.pp2-collage::after {
	content: "";
	position: absolute;
	z-index: -1;
	top: -4%;
	right: 30%;
	width: 26%;
	aspect-ratio: 1;
	background: url("../img/decoracion/espiral.png") center / contain no-repeat;
}

.pp2-collage > * {
	position: absolute;
	margin: 0;
}

/* Cada bloque de imagen trae `position: relative` (en el editor, y la polaroid la usa para su cinta): dentro del collage deben flotar libres. */
.pp2-collage > .wp-block-image,
.pp2-collage > .wp-block-image.pp2-polaroid {
	position: absolute;
}

.pp2-collage .pp2-polaroid--a {
	left: 0;
	top: 2%;
	width: 50%;
	rotate: -6deg;
	z-index: 2;
}

.pp2-collage .pp2-polaroid--b {
	right: 0;
	bottom: 0;
	width: 47%;
	rotate: 5deg;
	z-index: 3;
}

.pp2-collage .pp2-stk--estrella {
	right: 5%;
	top: 0;
	width: 24%;
	rotate: 12deg;
	z-index: 4;
	--dur: 5.5s;
}

.pp2-collage .pp2-stk--burbuja {
	left: 4%;
	bottom: 2%;
	width: 31%;
	rotate: -8deg;
	z-index: 4;
	--dur: 7s;
	--delay: -2s;
}

/* Banda en movimiento */
.pp2-marquee {
	position: relative;
	z-index: 5;
	/* Se superpone a la sección de arriba y a la de abajo: así el borde inclinado no deja una cuña. */
	margin: calc(-1.4rem - 1.4vw) -4vw calc(-1.4rem - 2.3vw);
	padding: 0.7rem 0;
	overflow: hidden;
	rotate: -1.3deg;
	background: var(--pp-coral);
	/* Sin borde: una línea oscura fina casi horizontal se dibuja con escalones visibles. */
	box-shadow: 0 10px 18px -10px rgb(1 59 69 / 0.45);
}

.pp2-marquee__pista {
	display: flex;
	width: max-content;
	animation: pp2-scroll 40s linear infinite;
}

.pp2-marquee p {
	flex: none;
	margin: 0;
	padding-right: 2.2rem;
	color: var(--pp-white);
	font-family: var(--pp-font-title);
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Sin JavaScript la banda queda estática y centrada */
.pp2-marquee > p {
	padding-inline: 1rem;
	text-align: center;
	white-space: normal;
}

/* Una vuelta = el ancho de una mitad de la pista (la calcula el script según la pantalla). */
@keyframes pp2-scroll {
	to {
		translate: calc(var(--pp2-mitad, 50%) * -1) 0;
	}
}

/* ------------------------------------------------------------------ */
/* Cursos: tarjetas de tamaños distintos                               */
/* ------------------------------------------------------------------ */

/*
 * El borde de arriba sigue la inclinación de la banda (tan 1.3° × ancho ≈ 2.27vw): así la
 * frontera blanco/celeste queda siempre bajo la banda, en cualquier ancho de pantalla.
 */
.pp2-cursos {
	--pp2-inclina: 2.27vw;
	position: relative;
	margin-top: calc(var(--pp2-inclina) * -1);
	padding-top: calc(clamp(5rem, 10vw, 8rem) + var(--pp2-inclina));
	clip-path: polygon(0 var(--pp2-inclina), 100% 0, 100% 100%, 0 100%);
}

.pp2-bento {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 1.5rem;
	margin: clamp(2rem, 4vw, 3rem) 0 0;
}

.pp2-bento > * {
	margin-block: 0;
}

.pp2-curso {
	--fondo: var(--pp-white);
	--texto: var(--pp-ink);
	--sombra: var(--pp-sky);
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	min-height: 320px;
	padding: 1.7rem 1.6rem;
	overflow: hidden;
	border: 2px solid var(--pp-ink);
	border-radius: 26px;
	background: var(--fondo);
	box-shadow: 7px 7px 0 var(--sombra);
	color: var(--texto);
	transition: translate 0.2s ease, rotate 0.2s ease, box-shadow 0.2s ease;
}

.pp2-curso:hover {
	translate: -3px -3px;
	rotate: -0.6deg;
	box-shadow: 10px 10px 0 var(--sombra);
}

.pp2-curso > * {
	margin-block: 0;
	max-width: 62%;
}

.pp2-curso > .pp2-stk {
	position: absolute;
	right: -2%;
	bottom: -2%;
	max-width: none;
	width: 46%;
}

.pp2-curso--a {
	grid-column: span 5;
	grid-row: span 2;
	--fondo: var(--pp-coral-soft);
	--texto: var(--pp-ink);
	--sombra: var(--pp-coral);
}

.pp2-curso--b {
	grid-column: span 4;
	--fondo: var(--pp-ink);
	--texto: var(--pp-white);
	--sombra: var(--pp-coral);
}

.pp2-curso--c {
	grid-column: span 3;
	--fondo: var(--pp-sky);
	--sombra: var(--pp-ink);
}

.pp2-curso--d {
	grid-column: span 7;
	--fondo: var(--pp-white);
	--sombra: var(--pp-coral);
}

.pp2-curso--a > .pp2-stk {
	width: 58%;
	right: -6%;
	bottom: -5%;
}

.pp2-curso--a .pp2-curso__tags,
.pp2-curso--c .pp2-curso__tags {
	max-width: 42%;
}

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

.pp2-curso--a > * {
	max-width: 88%;
}

.pp2-curso--c > * {
	max-width: 100%;
}

.pp2-curso--c > .pp2-stk {
	max-width: none;
	width: 50%;
	right: -5%;
	bottom: 0;
}

.pp2-curso__num {
	width: fit-content;
	padding: 0.15rem 0.7rem;
	border: 2px solid currentcolor;
	border-radius: 999px;
	font-family: var(--pp-font-title);
	font-size: 0.85rem;
	font-weight: 800;
	letter-spacing: 0.08em;
}

.pp2-curso__titulo {
	color: inherit;
	font-family: var(--pp-font-title);
	font-size: clamp(1.7rem, 3vw, 2.3rem);
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1;
}

.pp2-curso__texto {
	font-size: 0.98rem;
	line-height: 1.55;
}

.pp2-curso__tags {
	margin-top: auto !important;
	font-family: var(--pp-font-title);
	font-size: 0.74rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity: 0.9;
}

/* Sobre el celeste claro el coral del texto manuscrito queda bajo el contraste mínimo: se usa teal. */
.pp2-cursos .pp-kicker,
.pp2-opiniones .pp-kicker {
	color: var(--pp-teal);
}

/* ------------------------------------------------------------------ */
/* Metodología: recorrido de niveles                                   */
/* ------------------------------------------------------------------ */

.pp2-metodo .pp-title,
.pp2-metodo .pp-lead {
	color: var(--pp-white);
}

.pp2-metodo .pp-lead {
	opacity: 0.88;
}

.pp2-metodo__inner {
	display: grid;
	grid-template-columns: 0.95fr 1.05fr;
	gap: clamp(2.5rem, 6vw, 5rem);
	align-items: center;
}

.pp2-metodo__inner > * {
	margin-block: 0;
}

.pp2-metodo__foto {
	position: relative;
	justify-self: center;
	width: 100%;
	max-width: 430px;
	margin: 0;
}

.pp2-metodo__foto .pp2-polaroid {
	rotate: -4deg;
}

.pp2-metodo__foto .pp2-stk {
	position: absolute;
	right: -12%;
	top: -8%;
	width: 34%;
	rotate: 10deg;
	z-index: 3;
}

.pp2-metodo__foto .pp2-metodo__trofeo {
	right: auto;
	top: auto;
	left: -11%;
	bottom: -5%;
	width: 26%;
	rotate: -9deg;
}

.pp2-ruta {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
	counter-reset: nivel;
}

.pp2-ruta {
	margin-top: 1.6rem;
}

.pp2-ruta > * {
	margin-block: 0;
}

.pp2-nivel {
	position: relative;
	display: grid;
	grid-template-columns: 4rem 1fr;
	column-gap: 1.2rem;
	padding: 1.3rem 1.4rem 1.3rem 1.2rem;
	border: 2px solid var(--pp-sky);
	border-radius: 22px;
	background: rgb(255 255 255 / 0.07);
	counter-increment: nivel;
}

.pp2-nivel > * {
	grid-column: 2;
	margin-block: 0;
}

.pp2-nivel::before {
	content: counter(nivel);
	grid-column: 1;
	grid-row: 1 / span 2;
	align-self: start;
	display: grid;
	place-items: center;
	width: 3.6rem;
	height: 3.6rem;
	border: 2px solid var(--pp-ink);
	border-radius: 50%;
	background: var(--pp-coral);
	box-shadow: 3px 3px 0 var(--pp-sky);
	color: var(--pp-white);
	font-family: var(--pp-font-title);
	font-size: 1.6rem;
	font-weight: 800;
}

.pp2-nivel:not(:last-child):not(:has(+ .pp2-ruta__stk))::after {
	content: "";
	position: absolute;
	left: calc(1.2rem + 1.8rem - 1px);
	top: calc(100% + 0.2rem);
	height: 1.2rem;
	border-left: 3px dashed var(--pp-sky);
}

.pp2-nivel__titulo {
	color: var(--pp-white);
	font-family: var(--pp-font-title);
	font-size: 1.3rem;
	font-weight: 800;
}

.pp2-nivel__texto {
	color: var(--pp-paper);
	font-size: 0.97rem;
	opacity: 0.92;
}

.pp2-pilares {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
	margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
	padding: 1.6rem 1.4rem;
	border: 2px dashed var(--pp-sky);
	border-radius: 28px;
}

.pp2-pilares > * {
	margin-block: 0;
}

.pp2-pilar {
	display: grid;
	grid-template-columns: 4.4rem 1fr;
	align-items: center;
	gap: 0 0.9rem;
}

.pp2-pilar > * {
	margin-block: 0;
}

.pp2-pilar > figure {
	grid-row: 1 / span 2;
	transition: rotate 0.25s ease;
}

.pp2-pilar:hover > figure {
	rotate: -8deg;
}

.pp2-pilar__titulo {
	align-self: end;
	color: var(--pp-white);
	font-family: var(--pp-font-title);
	font-size: 1.1rem;
	font-weight: 800;
}

.pp2-pilar__texto {
	align-self: start;
	color: var(--pp-paper);
	font-size: 0.84rem;
	line-height: 1.4;
	opacity: 0.9;
}

/* ------------------------------------------------------------------ */
/* Equipo: polaroids                                                   */
/* ------------------------------------------------------------------ */

.pp2-equipo__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
	padding-inline: clamp(0rem, 3vw, 2rem);
}

.pp2-equipo__grid > * {
	margin-block: 0;
}

.pp2-profe {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
	text-align: center;
}

.pp2-profe > * {
	margin-block: 0;
}

.pp2-profe .wp-block-image.pp2-polaroid {
	width: 100%;
	max-width: 290px;
	margin-bottom: 0.9rem;
}

.pp2-profe:nth-child(1) .pp2-polaroid {
	rotate: -3.5deg;
}

.pp2-profe:nth-child(2) .pp2-polaroid {
	rotate: 2.5deg;
	margin-top: 1.6rem;
}

.pp2-profe:nth-child(3) .pp2-polaroid {
	rotate: -2deg;
}

.pp2-profe .pp2-polaroid img {
	aspect-ratio: 1;
	background: var(--pp-paper);
}

.pp2-profe__nombre {
	color: var(--pp-ink);
	font-family: var(--pp-font-title);
	font-size: 1.35rem;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.pp2-profe__rol {
	width: fit-content;
	padding: 0.1rem 0.8rem;
	border-radius: 999px;
	background: var(--pp-ink);
	color: var(--pp-white);
	font-family: var(--pp-font-title);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.pp2-profe__dato {
	max-width: 15rem;
	margin-top: 0.4rem !important;
	color: var(--pp-coral);
	font-family: var(--pp-font-hand);
	font-size: 1.45rem;
	font-weight: 700;
	line-height: 1.1;
}

/* ------------------------------------------------------------------ */
/* Opiniones: notas adhesivas                                          */
/* ------------------------------------------------------------------ */

.pp2-opiniones .pp-carousel__track,
.pp2-opiniones .pp-carousel__track > * {
	margin-block: 0;
}

.pp2-opiniones .pp-carousel__track {
	padding: 1.6rem 0.8rem 2rem;
}

.pp2-nota {
	--papel: var(--pp-coral-soft);
	position: relative;
	flex: 0 0 min(400px, 84%);
	scroll-snap-align: center;
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	padding: 2.2rem 1.7rem 1.6rem;
	border: 2px solid var(--pp-ink);
	border-radius: 6px 6px 26px 6px;
	background: var(--papel);
	box-shadow: 7px 7px 0 var(--pp-ink);
	transition: rotate 0.25s ease, translate 0.25s ease;
}

.pp2-nota:nth-child(1) {
	rotate: -2deg;
}

.pp2-nota:nth-child(2) {
	--papel: var(--pp-paper);
	rotate: 1.5deg;
}

.pp2-nota:nth-child(3) {
	--papel: #dff5ea;
	rotate: -1deg;
}

.pp2-nota:nth-child(4) {
	--papel: var(--pp-white);
	rotate: 2deg;
}

.pp2-nota:hover {
	rotate: 0deg;
	translate: 0 -6px;
}

.pp2-nota::before {
	content: "";
	position: absolute;
	top: -15px;
	left: 50%;
	width: 88px;
	height: 28px;
	translate: -50% 0;
	rotate: 2deg;
	background: rgb(255 87 87 / 0.55);
	border-inline: 2px dashed rgb(255 255 255 / 0.85);
}

.pp2-nota > * {
	margin-block: 0;
}

.pp2-nota__foto {
	width: 4.2rem;
	margin: 0;
}

.pp2-nota__foto img {
	display: block;
	width: 100%;
	height: auto;
}

.pp2-nota__texto {
	color: var(--pp-ink);
	font-size: 1.06rem;
	line-height: 1.55;
	display: -webkit-box;
	-webkit-line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Reseñas reales: largo muy variable. Se recortan a 6 líneas parejas y, si el texto
   no entra completo, el JS agrega el botón "Leer más" para no alargar la página. */
.pp2-nota.is-expandida .pp2-nota__texto {
	-webkit-line-clamp: unset;
	overflow: visible;
}

.pp2-nota__mas {
	margin-block: 0 !important;
	padding: 0;
	border: 0;
	background: none;
	color: var(--pp-teal);
	font-family: inherit;
	font-size: 0.85rem;
	font-weight: 700;
	text-decoration: underline;
	cursor: pointer;
}

.pp2-nota__autor {
	margin-top: auto !important;
	color: var(--pp-ink);
	font-family: var(--pp-font-title);
	font-size: 1rem;
	font-weight: 800;
}

.pp2-nota__rol {
	color: var(--pp-ink);
	font-size: 0.85rem;
}

/* ------------------------------------------------------------------ */
/* Inscripción: banda celeste con foto                                 */
/* ------------------------------------------------------------------ */

.pp2-inscripcion {
	background-color: var(--pp-sky) !important;
	background-image:
		linear-gradient(rgb(255 255 255 / 0.35) 2px, transparent 2px),
		linear-gradient(90deg, rgb(255 255 255 / 0.35) 2px, transparent 2px) !important;
	background-size: 64px 64px !important;
}

.pp2-inscripcion .pp-kicker {
	color: var(--pp-ink);
}

.pp2-inscripcion .pp-lead {
	color: var(--pp-ink);
}

.pp2-inscripcion .pp-inscripcion__nota {
	color: var(--pp-ink);
}

.pp2-inscripcion .wp-block-heading.is-style-trazo::after {
	background: var(--pp-white);
}

.pp2-inscripcion .wp-block-heading.is-style-trazo::before {
	background: var(--pp-ink);
}

.pp2-inscripcion__foto {
	position: relative;
	margin-top: 2.2rem !important;
	max-width: 330px;
}

.pp2-inscripcion__foto .pp2-polaroid {
	rotate: 3.5deg;
}

.pp2-inscripcion__foto .pp2-stk {
	position: absolute;
	z-index: 3;
}

.pp2-inscripcion__foto .pp2-stk--estrella {
	left: -16%;
	top: -8%;
	width: 34%;
	rotate: -12deg;
}

.pp2-flecha {
	position: absolute;
	right: -42%;
	top: 18%;
	width: 46%;
	aspect-ratio: 1;
	background: url("../img/decoracion/flecha.png") center / contain no-repeat;
	rotate: 6deg;
	pointer-events: none;
}

.pp2-inscripcion .pp-inscripcion__panel {
	box-shadow: 9px 9px 0 var(--pp-ink);
}

.pp2-inscripcion .pp-inscripcion__panel:hover {
	box-shadow: 9px 9px 0 var(--pp-ink);
}

/* ------------------------------------------------------------------ */
/* Pantallas medianas y móviles                                        */
/* ------------------------------------------------------------------ */

@media (max-width: 1200px) and (min-width: 901px) {
	.pp2-collage {
		aspect-ratio: 1 / 1.66;
	}
}

@media (max-width: 1000px) {
	.pp2-curso--a {
		min-height: 400px;
	}

	.pp2-bento {
		grid-template-columns: repeat(6, 1fr);
	}

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

	.pp2-curso--b,
	.pp2-curso--c {
		grid-column: span 3;
	}

	.pp2-curso--a > * {
		max-width: 60%;
	}

	.pp2-curso--a > .pp2-stk {
		width: 44%;
	}

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

@media (max-width: 900px) {
	.pp2-hero__inner,
	.pp2-metodo__inner {
		grid-template-columns: 1fr;
	}

	.pp2-collage {
		justify-self: center;
		width: min(100%, 440px);
		aspect-ratio: 1 / 1.68;
	}

	.pp2-hero {
		padding-bottom: 6rem;
	}

	.pp2-metodo__foto {
		max-width: 300px;
	}

	.pp2-metodo__foto .pp2-stk {
		right: -4%;
	}

	.pp2-profe .wp-block-image.pp2-polaroid {
		max-width: 230px;
	}

	.pp2-equipo__grid {
		grid-template-columns: 1fr;
		justify-items: center;
		gap: 2.5rem;
	}

	.pp2-profe:nth-child(2) .pp2-polaroid {
		margin-top: 0;
	}

	.pp2-flecha {
		display: none;
	}

	.pp2-inscripcion__foto {
		max-width: 260px;
	}
}

@media (max-width: 640px) {
	.wp-block-image.pp2-polaroid figcaption {
		font-size: 1.3rem;
	}

	.pp2-bento {
		grid-template-columns: 1fr;
	}

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

	.pp2-curso {
		min-height: 250px;
	}

	.pp2-curso > * {
		max-width: 66%;
	}

	.pp2-curso--a > *,
	.pp2-curso--c > * {
		max-width: 66%;
	}

	.pp2-curso > .pp2-stk,
	.pp2-curso--a > .pp2-stk,
	.pp2-curso--c > .pp2-stk {
		width: 46%;
		right: -3%;
		bottom: -2%;
	}

	.pp2-pilares {
		grid-template-columns: 1fr;
	}

	.pp2-nivel {
		grid-template-columns: 3.2rem 1fr;
		column-gap: 0.9rem;
	}

	.pp2-nivel::before {
		width: 3rem;
		height: 3rem;
		font-size: 1.35rem;
	}

	.pp2-nivel:not(:last-child)::after {
		left: calc(1.2rem + 1.5rem - 1px);
	}

	.pp2-marquee p {
		font-size: 1.1rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pp2-flota,
	.pp2-marquee__pista {
		animation: none;
	}
}