/*
 * Helena Sunday · pagina-media-kit.css
 *
 * Solo para la página «Media kit» (la encola helenasunday_pagina_assets en
 * helenasunday-secciones.php, detrás de secciones.css y tonos.css, cuyas
 * propiedades lee y a cuyas reglas gana en los empates por ir detrás).
 *
 * Tres secciones: hero con la maqueta del media kit en abanico (claro),
 * «Lo que vas a recibir» con el bento de stickers y «Qué pasa después»
 * (claro), y el formulario (oscuro). El formulario y su pantalla de gracias
 * son de formulario.css/.js: aquí solo se toca lo que rodea a la tarjeta.
 *
 * Misma disciplina que el resto del sitio: ni un hex ni un tamaño de fuente
 * en rem. Color, tipografía y espaciado salen de var(--wp--preset--...);
 * radios y curvas, de los tokens del tema. Los tamaños de la maqueta se
 * miden en cqi contra el propio abanico, como un documento que escala
 * entero, con los presets como suelo para que nada quede ilegible.
 *
 * Todo el movimiento vive dentro de prefers-reduced-motion: no-preference;
 * con movimiento reducido cada pieza se queda en su estado final.
 */

/* -------------------------------------------------------------------------
 * 1. Hero
 * ---------------------------------------------------------------------- */

.helenasunday-mk-hero {
	--helenasunday-mk-hero-alto: calc(100svh - var(--helenasunday-cabecera-alto) - var(--wp--preset--spacing--40) - var(--wp--preset--spacing--50));
}

.helenasunday-mk-hero__cols {
	gap: var(--wp--preset--spacing--50);
	margin-block: 0;
}

/* Titular del hero: dos líneas («Pide mi / media kit»), un escalón por
   encima del titular de página y por debajo del de inicio. */
.helenasunday-mk-hero .helenasunday-mk-hero__titulo {
	font-size: clamp(
		calc(var(--wp--preset--font-size--xxx-large) * 1.15),
		7.2vw,
		calc(var(--wp--preset--font-size--xxx-large) * 1.9)
	);
	line-height: 0.95;
}

/* «media kit» no se parte: el titular queda en «Pide mi / media kit». */
.helenasunday-mk-hero__titulo em {
	white-space: nowrap;
}

.helenasunday-mk-hero .helenasunday-hero__lead {
	max-width: 30em;
}

.helenasunday-mk-hero__botones {
	margin-block-start: var(--wp--preset--spacing--40) !important;
}

/* Tres garantías cortas bajo los botones, con la misma marca de
   verificación dibujada con bordes que las razones del formulario. */
.helenasunday-mk-hero__garantias {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30);
	margin: var(--wp--preset--spacing--40) 0 0 !important;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	color: var(--helenasunday-tono-texto-suave);
}

.helenasunday-mk-hero__garantias li {
	position: relative;
	margin: 0;
	padding-inline-start: 1.5em;
}

.helenasunday-mk-hero__garantias li::before {
	content: "";
	position: absolute;
	left: 0.25em;
	top: 0.2em;
	width: 0.4em;
	height: 0.75em;
	border: solid var(--helenasunday-tono-acento);
	border-width: 0 0.16em 0.16em 0;
	rotate: 40deg;
}

/* Escritorio: las columnas llenan la primera pantalla. */
@media (min-width: 1024px) {
	.helenasunday-mk-hero > .helenasunday-mk-hero__cols {
		min-height: var(--helenasunday-mk-hero-alto);
	}
}

/* Por debajo de 1024 px, texto arriba y maqueta debajo, como en el hero de
   inicio. !important para ganar al flex-basis en línea de cada columna y
   al nowrap del core. */
@media (max-width: 1023px) {
	.helenasunday-mk-hero > .helenasunday-mk-hero__cols {
		flex-wrap: wrap !important;
	}

	.helenasunday-mk-hero > .helenasunday-mk-hero__cols > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* -------------------------------------------------------------------------
 * 2. Maqueta del media kit en abanico
 *
 * Tres páginas de verdad (bloques del core con su texto): portada, cifras
 * y marcas. Cada una se coloca con transform (desplazamiento y giro desde
 * sus propiedades --mk-x, --mk-y, --mk-rot); al pasar por el abanico se
 * abre cambiando solo esas propiedades. El cambio de orden al pasar por
 * una página lo orquesta pagina-media-kit.js con la propiedad individual
 * `translate`, que se compone con este transform sin pisarlo (misma idea
 * que baraja.js en inicio). Sin JS, la página que está debajo del cursor
 * sube con :hover.
 *
 * Unidad: el abanico es contenedor (cqi). Una página mide 56cqi de ancho,
 * así que 1cqi ≈ 1,8 % de la página. Todo el interior escala con ella.
 * ---------------------------------------------------------------------- */

.helenasunday-mk-abanico {
	position: relative;
	container-type: inline-size;
	/* Cuadrado, del ancho de su columna y sin pasar del 92 % del hueco de la
	   primera pantalla. */
	width: min(100%, calc(var(--helenasunday-mk-hero-alto) * 0.92));
	aspect-ratio: 1;
	margin-inline: auto;
}

/* En escritorio puede rebasar su columna por la derecha, sobre el margen de
   la página, como la pila de vídeos de inicio (tonos.css): como mucho la
   mitad de lo que sobra entre la caja de contenido y la ventana, menos el
   margen lateral. */
@media (min-width: 1024px) {
	.helenasunday-mk-abanico {
		--mk-rebase: max(0px, calc((100vw - var(--wp--style--global--content-size)) / 2 - var(--wp--preset--spacing--50)));
		width: min(calc(100% + var(--mk-rebase)), calc(var(--helenasunday-mk-hero-alto) * 0.92));
		margin-inline: 0;
	}
}

/* En una columna, la maqueta no pasa de un ancho cómodo. */
@media (max-width: 1023px) {
	.helenasunday-mk-abanico {
		width: min(100%, 520px);
		margin-block-start: var(--wp--preset--spacing--20);
	}
}

.helenasunday-mk-abanico > .helenasunday-mk-pagina {
	--mk-x: 0%;
	--mk-y: 0%;
	--mk-rot: 0deg;

	position: absolute;
	box-sizing: border-box;
	width: 56%;
	aspect-ratio: 3 / 4;
	margin: 0 !important;
	padding: 5.5cqi 5cqi;
	display: flex;
	flex-direction: column;
	gap: 1.8cqi;
	overflow: hidden;
	isolation: isolate;
	border-radius: var(--helenasunday-shape-xl);
	transform: translate(var(--mk-x), var(--mk-y)) rotate(var(--mk-rot));
	box-shadow:
		0 2px 4px color-mix(in srgb, var(--helenasunday-shadow-ink) 8%, transparent),
		0 18px 40px color-mix(in srgb, var(--helenasunday-shadow-ink) 16%, transparent);
}

.helenasunday-mk-pagina > * {
	margin: 0 !important;
}

/* Reposo (misma especificidad que la regla de arriba, que pone las
   propiedades a cero, y detrás de ella): la portada delante, cifras detrás a la izquierda y marcas detrás
   a la derecha. El z-index de aquí es el orden de base que lee el JS. */
.helenasunday-mk-abanico > .helenasunday-mk-pagina--portada {
	left: 22%;
	top: 7%;
	--mk-rot: -2deg;
	z-index: 3;
}

.helenasunday-mk-abanico > .helenasunday-mk-pagina--cifras {
	left: 1%;
	top: 18%;
	--mk-rot: -9deg;
	z-index: 2;
}

.helenasunday-mk-abanico > .helenasunday-mk-pagina--marcas {
	left: 43%;
	top: 15%;
	--mk-rot: 8deg;
	z-index: 1;
}

/* Abierto: las de atrás se separan y giran un poco más, la portada se
   endereza y sube. Con el cursor (o con .is-abierto, que pone el JS al
   tocar en móvil). */
.helenasunday-mk-abanico:is(:hover, .is-abierto) > .helenasunday-mk-pagina--portada {
	--mk-y: -3%;
	--mk-rot: 0deg;
}

.helenasunday-mk-abanico:is(:hover, .is-abierto) > .helenasunday-mk-pagina--cifras {
	--mk-x: -9%;
	--mk-y: 2%;
	--mk-rot: -13deg;
}

.helenasunday-mk-abanico:is(:hover, .is-abierto) > .helenasunday-mk-pagina--marcas {
	--mk-x: 9%;
	--mk-y: 1%;
	--mk-rot: 12deg;
}

/* Sin JS la página bajo el cursor sube de golpe (con JS manda el z-index en
   línea que pone pagina-media-kit.js). */
.helenasunday-mk-abanico > .helenasunday-mk-pagina:hover {
	z-index: 4;
}

@media (prefers-reduced-motion: no-preference) {
	.helenasunday-mk-abanico > .helenasunday-mk-pagina {
		transition:
			transform 0.6s var(--helenasunday-spring),
			scale 0.45s var(--helenasunday-spring),
			box-shadow 0.35s var(--helenasunday-ease-effect);
	}

	.helenasunday-mk-abanico > .helenasunday-mk-pagina:hover {
		scale: 1.025;
		box-shadow:
			0 4px 8px color-mix(in srgb, var(--helenasunday-shadow-ink) 10%, transparent),
			0 26px 56px color-mix(in srgb, var(--helenasunday-shadow-ink) 20%, transparent);
	}
}

/* Etiqueta de cabecera de cada página, como el eyebrow del sitio. */
.helenasunday-mk-pagina__etiqueta {
	font-size: clamp(var(--wp--preset--font-size--x-small), 2.3cqi, var(--wp--preset--font-size--small));
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.2;
}

/* --- Portada ------------------------------------------------------------ */

/* Un sol amarillo asomando por la esquina (Sunday), plano como una
   pegatina. */
.helenasunday-mk-pagina--portada::before {
	content: "";
	position: absolute;
	top: -16%;
	right: -22%;
	width: 62%;
	aspect-ratio: 1;
	z-index: -1;
	border-radius: 50%;
	background-color: var(--wp--preset--color--secondary-container);
}

.helenasunday-mk-pagina__avatar {
	width: 17cqi;
	margin-block-start: auto !important;
}

.helenasunday-mk-pagina__avatar img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50%;
	outline: 0.7cqi solid var(--wp--preset--color--surface);
}

/* El nombre con la tipografía del logotipo: «Helena» en Poppins 600 y
   «Sunday» en Playfair itálica (clase del logotipo, marca.css). */
.helenasunday-mk-pagina__nombre {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 7.4cqi;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1;
}

.helenasunday-mk-pagina__lema {
	font-size: clamp(var(--wp--preset--font-size--x-small), 2.6cqi, var(--wp--preset--font-size--small));
	font-weight: 500;
	line-height: 1.35;
}

.helenasunday-mk-pagina__pie {
	margin-block-start: auto !important;
	padding-block-start: 1.6cqi;
	border-block-start: 1px solid color-mix(in srgb, currentColor 35%, transparent);
	font-size: clamp(var(--wp--preset--font-size--x-small), 2.2cqi, var(--wp--preset--font-size--small));
	font-weight: 600;
}

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

.helenasunday-mk-pagina--cifras {
	gap: 0.6cqi;
}

.helenasunday-mk-pagina--cifras .helenasunday-mk-pagina__etiqueta {
	margin-block-end: 1.2cqi !important;
	color: var(--wp--preset--color--primary);
}

.helenasunday-mk-cifra {
	display: flex;
	flex-direction: column;
	padding: 1.3cqi 1.8cqi;
	border-radius: var(--helenasunday-shape-m);
	border-block-end: 1px solid var(--wp--preset--color--outline-variant);
}

.helenasunday-mk-cifra > * {
	margin: 0 !important;
}

/* La cifra de TikTok, subrayada con el amarillo del rotulador. */
.helenasunday-mk-cifra--destacada {
	border-block-end-color: transparent;
	background-color: var(--wp--preset--color--secondary-container);
	color: var(--wp--preset--color--on-secondary-container);
}

/* .helenasunday-count (secciones.css) trae tamaño y color de las cifras de
   inicio; aquí se reescala a la página. El contador de interacciones.js
   sigue funcionando: solo lee el texto. */
.helenasunday-mk-pagina .helenasunday-mk-cifra__valor.helenasunday-count {
	font-size: 6.4cqi;
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--primary);
}

.helenasunday-mk-cifra--destacada .helenasunday-mk-cifra__valor.helenasunday-count {
	color: var(--wp--preset--color--on-secondary-container);
}

.helenasunday-mk-cifra__red {
	font-size: clamp(var(--wp--preset--font-size--x-small), 2.2cqi, var(--wp--preset--font-size--small));
	font-weight: 500;
	line-height: 1.25;
}

/* --- Marcas ------------------------------------------------------------- */

.helenasunday-mk-pagina--marcas .helenasunday-mk-pagina__etiqueta {
	color: var(--wp--preset--color--primary-container);
}

.helenasunday-mk-marcas {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	gap: 1.4cqi;
	margin-block-start: 1.4cqi !important;
	padding: 0;
	list-style: none;
}

.helenasunday-mk-marcas li {
	margin: 0;
	padding: 0.9cqi 2.2cqi;
	border: 1px solid color-mix(in srgb, currentColor 38%, transparent);
	border-radius: var(--helenasunday-shape-full);
	font-size: clamp(var(--wp--preset--font-size--x-small), 2.7cqi, var(--wp--preset--font-size--medium));
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
}

/* La primera, rellena: la colaboración más vista del periodo. */
.helenasunday-mk-marcas li:first-child {
	border-color: transparent;
	background-color: var(--wp--preset--color--primary-container);
	color: var(--wp--preset--color--on-primary-container);
}

/* --- Pegatinas y chispas sobre el abanico ------------------------------- */

.helenasunday-mk-pegatinas .helenasunday-sticker {
	font-size: clamp(var(--wp--preset--font-size--small), 3.4cqi, var(--wp--preset--font-size--large));
}

/* Encima del borde de la portada, entre su etiqueta y el sol: no tapa
   texto de ninguna página. */
.helenasunday-mk-pegatina--pdf {
	top: -1%;
	left: 49%;
	background-color: var(--wp--preset--color--secondary-container);
	color: var(--wp--preset--color--on-secondary-container);
	--helenasunday-sticker-rot: -9deg;
}

.helenasunday-mk-pegatina--gratis {
	bottom: 7%;
	right: 3%;
	background-color: var(--wp--preset--color--tertiary-container);
	color: var(--wp--preset--color--on-tertiary-container);
	--helenasunday-sticker-rot: 7deg;
}

@media (prefers-reduced-motion: no-preference) {
	.helenasunday-mk-pegatina--gratis {
		animation-duration: 6.1s;
		animation-delay: -2.4s;
	}
}

.helenasunday-mk-pegatinas.helenasunday-dibujo--chispas > .helenasunday-dibujo__svg {
	top: 1%;
	right: 12%;
	width: 3.2em;
	rotate: 14deg;
}

/* -------------------------------------------------------------------------
 * 3. «Lo que vas a recibir»: bento con stickers
 *
 * Las reglas de pegatina a sangre son las del bento de inicio
 * (secciones.css); aquí solo el ancho y la proporción alto/ancho de cada
 * una (la del viewBox de su SVG). Las cuatro tarjetas son anchas (dos por
 * fila), así que el texto se queda a la izquierda de la pegatina.
 * ---------------------------------------------------------------------- */

.helenasunday-bento__item:has(> .helenasunday-bento__sticker--audiencia) { --helenasunday-sticker-w: 170px; --helenasunday-sticker-proporcion: 0.943; }
.helenasunday-bento__item:has(> .helenasunday-bento__sticker--cifras) { --helenasunday-sticker-w: 160px; --helenasunday-sticker-proporcion: 0.980; }
.helenasunday-bento__item:has(> .helenasunday-bento__sticker--formatos) { --helenasunday-sticker-w: 180px; --helenasunday-sticker-proporcion: 0.824; }
.helenasunday-bento__item:has(> .helenasunday-bento__sticker--sello) { --helenasunday-sticker-w: 132px; --helenasunday-sticker-proporcion: 1.256; }

.helenasunday-mk-bento .helenasunday-bento__item {
	min-height: 13.5em;
}

@media (max-width: 781px) {
	.helenasunday-bento__item:has(> .helenasunday-bento__sticker--audiencia) { --helenasunday-sticker-w: 128px; }
	.helenasunday-bento__item:has(> .helenasunday-bento__sticker--cifras) { --helenasunday-sticker-w: 120px; }
	.helenasunday-bento__item:has(> .helenasunday-bento__sticker--formatos) { --helenasunday-sticker-w: 132px; }
	.helenasunday-bento__item:has(> .helenasunday-bento__sticker--sello) { --helenasunday-sticker-w: 100px; }

	.helenasunday-mk-bento .helenasunday-bento__item {
		min-height: 14em;
	}
}

/* -------------------------------------------------------------------------
 * 4. «Qué pasa después»: tres pasos unidos por una línea discontinua
 * ---------------------------------------------------------------------- */

.helenasunday-mk-despues {
	--mk-num: calc(var(--wp--preset--font-size--large) * 2.3);
	margin-block-start: var(--wp--preset--spacing--60) !important;
}

.helenasunday-mk-despues__titulo {
	margin-block-end: var(--wp--preset--spacing--40) !important;
}

.helenasunday-mk-pasos {
	gap: var(--wp--preset--spacing--40);
	margin-block-end: 0;
}

.helenasunday-mk-paso {
	position: relative;
}

.helenasunday-mk-paso > * {
	margin: 0 !important;
}

.helenasunday-mk-paso > * + * {
	margin-block-start: var(--wp--preset--spacing--10) !important;
}

.helenasunday-mk-paso > h3 {
	margin-block-start: var(--wp--preset--spacing--30) !important;
}

.helenasunday-mk-paso > p:last-child {
	line-height: 1.5;
	max-width: 24em;
}

/* padding 0: el core añade relleno a lo que tiene fondo (AGENTS.md). */
.helenasunday-mk-paso__num {
	display: grid;
	place-items: center;
	width: var(--mk-num);
	height: var(--mk-num);
	padding: 0;
	border-radius: 50%;
	background-color: var(--helenasunday-tono-acento);
	color: var(--helenasunday-tono-sobre-acento);
	font-family: var(--wp--preset--font-family--poppins);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1;
}

/* El último paso es el que cierra el trato: número en amarillo flúor. */
.helenasunday-mk-paso:last-child .helenasunday-mk-paso__num {
	background-color: var(--wp--preset--color--secondary-container);
	color: var(--wp--preset--color--on-secondary-container);
}

/* La línea que une un número con el siguiente, por el hueco entre
   columnas. Se «dibuja» de izquierda a derecha al entrar (clip-path), con
   la clase que pone motion.js cuando termina la cascada. */
.helenasunday-mk-paso:not(:last-child)::after {
	content: "";
	position: absolute;
	top: calc(var(--mk-num) / 2 - 1px);
	left: calc(var(--mk-num) + var(--wp--preset--spacing--20));
	right: calc(var(--wp--preset--spacing--20) - var(--wp--preset--spacing--40));
	border-block-start: 2px dashed var(--helenasunday-tono-borde);
}

@media (prefers-reduced-motion: no-preference) {
	.helenasunday-mk-paso:not(:last-child)::after {
		transition: clip-path 0.7s var(--helenasunday-ease-effect) 0.35s;
	}

	.helenasunday-js .helenasunday-mk-paso:not(.helenasunday-mk-paso--visto):not(:last-child)::after {
		clip-path: inset(0 100% 0 0);
	}
}

/* Una columna: número a la izquierda, texto a la derecha, y la línea en
   vertical bajando al número siguiente. */
@media (max-width: 781px) {
	.helenasunday-mk-pasos {
		gap: var(--wp--preset--spacing--40) !important;
	}

	.helenasunday-mk-paso {
		display: grid;
		grid-template-columns: var(--mk-num) minmax(0, 1fr);
		column-gap: var(--wp--preset--spacing--30);
		align-items: start;
	}

	.helenasunday-mk-paso > .helenasunday-mk-paso__num {
		grid-row: 1 / span 2;
	}

	.helenasunday-mk-paso > h3 {
		margin-block-start: calc(var(--wp--preset--spacing--10) * 0.8) !important;
	}

	.helenasunday-mk-paso > * + p {
		grid-column: 2;
	}

	.helenasunday-mk-paso:not(:last-child)::after {
		top: calc(var(--mk-num) + var(--wp--preset--spacing--10));
		bottom: calc(var(--wp--preset--spacing--10) - var(--wp--preset--spacing--40));
		left: calc(var(--mk-num) / 2 - 1px);
		right: auto;
		border-block-start: 0;
		border-inline-start: 2px dashed var(--helenasunday-tono-borde);
	}

	@media (prefers-reduced-motion: no-preference) {
		.helenasunday-js .helenasunday-mk-paso:not(.helenasunday-mk-paso--visto):not(:last-child)::after {
			clip-path: inset(0 0 100% 0);
		}
	}
}

/* -------------------------------------------------------------------------
 * 5. Formulario: la columna de las razones
 *
 * La tarjeta del formulario no se toca (formulario.css). A la izquierda,
 * un sticker de bocadillo con idea junto al titular y una firma con la
 * cara de Helena, de la que sale la flecha a rotulador hacia el formulario.
 * ---------------------------------------------------------------------- */

.helenasunday-kit-aside {
	--mk-idea-w: 118px;
	position: relative;
}

.helenasunday-kit-aside__sticker {
	position: absolute;
	top: calc(var(--wp--preset--spacing--30) * -1);
	right: 0;
	width: var(--mk-idea-w);
	margin: 0 !important;
	pointer-events: none;
	rotate: 9deg;
	transform-origin: 60% 70%;
}

.helenasunday-kit-aside__sticker img {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 6px 10px color-mix(in srgb, var(--helenasunday-shadow-ink) 18%, transparent));
}

/* El eyebrow y el titular dejan libre la esquina del sticker. */
.helenasunday-kit-aside > :is(.helenasunday-eyebrow, h2) {
	max-width: calc(100% - var(--mk-idea-w) + var(--wp--preset--spacing--20));
}

@media (prefers-reduced-motion: no-preference) {
	.helenasunday-kit-aside__sticker {
		animation: helenasunday-mk-balanceo 5.5s ease-in-out infinite alternate;
	}
}

@keyframes helenasunday-mk-balanceo {
	from {
		rotate: 6deg;
		translate: 0 -2px;
	}

	to {
		rotate: 12deg;
		translate: 0 3px;
	}
}

/* Firma: avatar con el aro del logotipo, nombre con su tipografía y una
   línea debajo. La flecha curva sale de su derecha hacia el formulario. */
.helenasunday-kit-firma {
	display: grid;
	grid-template-columns: auto auto;
	align-items: center;
	column-gap: var(--wp--preset--spacing--20);
	width: fit-content;
	max-width: 100%;
	margin-block-start: var(--wp--preset--spacing--50) !important;
}

.helenasunday-kit-firma > * {
	margin: 0 !important;
}

.helenasunday-kit-firma__avatar {
	grid-row: 1 / span 2;
	width: calc(var(--wp--preset--font-size--large) * 2.6);
}

.helenasunday-kit-firma__avatar img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50%;
	outline: 2px solid var(--wp--preset--color--primary-container);
	outline-offset: 3px;
}

.helenasunday-kit-firma__nombre {
	align-self: end;
	font-family: var(--wp--preset--font-family--poppins);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	line-height: 1.1;
}

.helenasunday-kit-firma__cargo {
	align-self: start;
	line-height: 1.4;
}

.helenasunday-kit-firma.helenasunday-dibujo--flecha-curva > .helenasunday-dibujo__svg {
	left: 100%;
	top: -0.6em;
	width: 5.2em;
	margin-left: var(--wp--preset--spacing--10);
	rotate: -6deg;
}

/* Entre 782 y 1180 px la columna es estrecha y el sticker bajaba hasta la
   primera razón: se achica. */
@media (min-width: 782px) and (max-width: 1180px) {
	.helenasunday-kit-aside {
		--mk-idea-w: 84px;
	}
}

@media (max-width: 781px) {
	.helenasunday-kit-aside {
		--mk-idea-w: 92px;
	}

	.helenasunday-kit-aside__sticker {
		top: calc(var(--wp--preset--spacing--20) * -1);
	}

	.helenasunday-kit-firma {
		margin-block-start: var(--wp--preset--spacing--40) !important;
	}

	.helenasunday-kit-firma.helenasunday-dibujo--flecha-curva > .helenasunday-dibujo__svg {
		display: none;
	}
}

/* Al llegar desde el botón del hero (#pedir), la tarjeta del formulario
   late una vez con un aro rosa, para que el ojo sepa dónde mirar. */
@media (prefers-reduced-motion: no-preference) {
	html:has(#pedir) {
		scroll-behavior: smooth;
	}

	#pedir:target .helenasunday-kit-form,
	.helenasunday-kit-form.helenasunday-mk-latido {
		animation: helenasunday-mk-latido 1.1s var(--helenasunday-ease-effect) 0.45s 1 both;
	}
}

@keyframes helenasunday-mk-latido {
	from {
		box-shadow: 0 0 0 0 color-mix(in srgb, var(--wp--preset--color--primary-container) 85%, transparent);
	}

	to {
		box-shadow: 0 0 0 18px color-mix(in srgb, var(--wp--preset--color--primary-container) 0%, transparent);
	}
}