/*
 * Helena Sunday · pagina-sobre-mi.css
 *
 * Solo para «Sobre mí» (lo encola helenasunday_pagina_assets() por el slug
 * de la página, detrás de secciones.css y tonos.css, así que gana sus
 * empates). Lleva a esta página el lenguaje de la portada: stickers SVG a
 * sangre, subrayador, dibujos a rotulador y ritmo claro/oscuro.
 *
 * Ritmo de tonos: hero (claro) · historia (oscuro) · oficio (claro) ·
 * estudio (oscuro) · cifras (claro) · llamada final (oscuro).
 *
 * Misma disciplina que el resto del mu-plugin: color, tipografía y
 * espaciado salen de var(--wp--preset--...); radios y curvas, de los tokens
 * del tema. Los píxeles que hay son anchos de pegatina (igual que en
 * secciones.css) y grosores de borde. Todo el movimiento vive bajo
 * prefers-reduced-motion: no-preference; sin JS o con movimiento reducido,
 * cada pieza se queda en su estado final visible.
 */

/* -------------------------------------------------------------------------
 * 1. Hero: el retrato pasa a polaroid
 *
 * La foto es una miniatura provisional de YouTube (docs/MATERIALES.md) con
 * rótulo quemado arriba. En 4:5 y anclada abajo, el rótulo queda fuera del
 * encuadre y la cara dentro. Cuando llegue el retrato de verdad, basta con
 * cambiar la imagen: el recorte se puede quedar o volver a 9:16.
 * ---------------------------------------------------------------------- */

.helenasunday-sm-polaroid {
	max-width: 430px;
}

/* (0,2,0), igual que la regla de giro de secciones.css; gana por orden. */
.helenasunday-sm-polaroid .helenasunday-portrait {
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--20) 0;
	border-radius: var(--helenasunday-shape-xl);
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--on-surface);
	box-shadow:
		0 2px 6px color-mix(in srgb, var(--helenasunday-shadow-ink) 10%, transparent),
		0 24px 48px color-mix(in srgb, var(--helenasunday-shadow-ink) 16%, transparent);
	rotate: 3deg;
	transform-origin: 50% 90%;
}

/* (0,2,1) para ganar al 9:16 de .helenasunday-portrait img (0,1,1). */
.helenasunday-sm-polaroid .helenasunday-portrait img {
	aspect-ratio: 4 / 5;
	object-position: 50% 74%;
	border-radius: var(--helenasunday-shape-l);
}

.helenasunday-sm-polaroid .helenasunday-portrait figcaption {
	margin: 0;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--10) var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--playfair);
	font-style: italic;
	font-weight: 500;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.2;
	text-align: center;
	text-wrap: balance;
	color: var(--wp--preset--color--on-surface);
}

/* Tres pegatinas alrededor de la polaroid (las dos de antes y «Talla
   petite»). Pisan las posiciones del retrato de secciones.css. */
.helenasunday-sm-polaroid .helenasunday-sticker--publi {
	top: 5%;
	left: -9%;
}

.helenasunday-sm-polaroid .helenasunday-sticker--ugc {
	top: 34%;
	bottom: auto;
	right: -7%;
}

.helenasunday-sm-polaroid .helenasunday-sticker--fans {
	top: auto;
	bottom: 21%;
	left: -8%;
	--helenasunday-sticker-rot: -5deg;
}

@media (prefers-reduced-motion: no-preference) {
	.helenasunday-sm-polaroid .helenasunday-portrait {
		transition:
			rotate 0.55s var(--helenasunday-spring),
			translate 0.55s var(--helenasunday-spring),
			box-shadow 0.35s var(--helenasunday-ease-effect);
	}

	/* Al pasar por encima la foto se endereza y se levanta, como al cogerla
	   de la mesa. Los corazones los suelta pagina-sobre-mi.js. */
	.helenasunday-sm-polaroid:hover .helenasunday-portrait {
		rotate: 0deg;
		translate: 0 -6px;
		box-shadow:
			0 4px 10px color-mix(in srgb, var(--helenasunday-shadow-ink) 10%, transparent),
			0 32px 60px color-mix(in srgb, var(--helenasunday-shadow-ink) 18%, transparent);
	}
}

/* -------------------------------------------------------------------------
 * 2. Mi historia: recorrido por etapas
 *
 * Una lista ordenada del core (semántica de pasos para el lector de
 * pantalla). Cada <li> es título (<strong>) más texto; el círculo con el
 * número, el riel y la pegatina de cada etapa son decoración en CSS.
 *
 * El riel tiene dos capas: la pista discontinua (::before de la lista) y la
 * línea que se dibuja (::after), escalada con --helenasunday-sm-progreso.
 * Sin JS vale 1: la línea está entera y todos los hitos, visibles. Con JS
 * (pagina-sobre-mi.js) la lista recibe .helenasunday-sm-recorrido--vivo, el
 * progreso sigue al scroll y cada hito entra con muelle cuando la línea
 * llega a su círculo.
 * ---------------------------------------------------------------------- */

.helenasunday-sm-historia__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: var(--wp--preset--spacing--60);
	align-items: start;
}

.helenasunday-sm-historia__grid > * {
	margin: 0 !important;
}

/* La cabecera acompaña al recorrido mientras se lee. */
.helenasunday-sm-historia__head {
	position: sticky;
	top: calc(var(--helenasunday-cabecera-alto) + var(--wp--preset--spacing--40));
}

.helenasunday-sm-recorrido {
	--helenasunday-sm-nodo: var(--wp--preset--spacing--50);
	--helenasunday-sm-progreso: 1;
	/* Ancho de la pegatina de cada etapa (como los px del bento). */
	--helenasunday-sm-sticker-ancho: 104px;
	position: relative;
	display: grid;
	gap: var(--wp--preset--spacing--50);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: helenasunday-sm-paso;
}

.helenasunday-sm-recorrido::before,
.helenasunday-sm-recorrido::after {
	content: "";
	position: absolute;
	left: calc(var(--helenasunday-sm-nodo) / 2 - 1.5px);
	top: calc(var(--helenasunday-sm-nodo) / 2);
	width: 3px;
	/* El JS mide del primer círculo al último; sin JS, hasta el final. */
	height: var(--helenasunday-sm-riel, calc(100% - var(--helenasunday-sm-nodo) / 2));
	border-radius: var(--helenasunday-shape-full);
}

/* Pista: el camino que falta por recorrer, a trazos. */
.helenasunday-sm-recorrido::before {
	background-image: repeating-linear-gradient(
		to bottom,
		var(--helenasunday-tono-borde-suave) 0 8px,
		transparent 8px 16px
	);
}

/* La línea, en el acento del tono (rosa flúor sobre el oscuro). */
.helenasunday-sm-recorrido::after {
	background-color: var(--helenasunday-tono-acento);
	transform-origin: 50% 0;
	transform: scaleY(var(--helenasunday-sm-progreso));
}

.helenasunday-sm-recorrido > li {
	position: relative;
	z-index: 1;
	counter-increment: helenasunday-sm-paso;
	min-height: var(--helenasunday-sm-sticker-ancho);
	margin: 0;
	padding-inline: calc(var(--helenasunday-sm-nodo) + var(--wp--preset--spacing--40)) calc(var(--helenasunday-sm-sticker-ancho) + var(--wp--preset--spacing--30));
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.55;
	color: var(--helenasunday-tono-texto-suave);
}

.helenasunday-sm-recorrido > li > strong {
	display: block;
	margin-block-end: var(--wp--preset--spacing--10);
	padding-block-start: 0.35em;
	font-family: var(--wp--preset--font-family--poppins);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.12;
	color: var(--helenasunday-tono-texto);
	text-wrap: balance;
}

/* El círculo de cada etapa, con su número (el texto alternativo vacío lo
   deja fuera del árbol de accesibilidad: la lista ya numera). Tapa el riel
   con el fondo del tono. */
.helenasunday-sm-recorrido > li::before {
	content: counter(helenasunday-sm-paso, decimal-leading-zero) / "";
	position: absolute;
	left: 0;
	top: 0;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: var(--helenasunday-sm-nodo);
	height: var(--helenasunday-sm-nodo);
	border-radius: 50%;
	border: 2px solid var(--helenasunday-tono-acento);
	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--small);
	font-weight: 700;
	letter-spacing: 0.04em;
}

/* La pegatina de cada etapa: novias (belleza), editoriales (foto), empiezo
   a grabar (caja) y UGC para marcas (sello). Mismos SVG de trazo constante
   que el bento; decorativas. */
.helenasunday-sm-recorrido > li::after {
	content: "";
	position: absolute;
	top: calc(var(--wp--preset--spacing--20) * -1);
	right: 0;
	width: var(--helenasunday-sm-sticker-ancho);
	aspect-ratio: 1;
	background: var(--helenasunday-sm-sticker) center / contain no-repeat;
	filter: drop-shadow(0 6px 10px color-mix(in srgb, var(--helenasunday-shadow-ink) 22%, transparent));
	rotate: var(--helenasunday-sm-sticker-giro, 8deg);
	pointer-events: none;
}

.helenasunday-sm-recorrido > li:nth-child(1) { --helenasunday-sm-sticker: url("stickers/belleza.svg"); --helenasunday-sm-sticker-giro: -7deg; }
.helenasunday-sm-recorrido > li:nth-child(2) { --helenasunday-sm-sticker: url("stickers/foto.svg"); --helenasunday-sm-sticker-giro: 6deg; }
.helenasunday-sm-recorrido > li:nth-child(3) { --helenasunday-sm-sticker: url("stickers/caja.svg"); --helenasunday-sm-sticker-giro: -4deg; }
.helenasunday-sm-recorrido > li:nth-child(4) { --helenasunday-sm-sticker: url("stickers/sello.svg"); --helenasunday-sm-sticker-giro: 9deg; }

@media (prefers-reduced-motion: no-preference) {
	.helenasunday-sm-recorrido > li {
		transition:
			opacity 0.35s var(--helenasunday-ease-effect),
			translate 0.6s var(--helenasunday-spring);
	}

	.helenasunday-sm-recorrido > li::before {
		transition:
			scale 0.5s var(--helenasunday-spring),
			background-color 0.25s var(--helenasunday-ease-effect),
			color 0.25s var(--helenasunday-ease-effect);
	}

	.helenasunday-sm-recorrido > li::after {
		transition:
			scale 0.6s var(--helenasunday-spring) 0.12s,
			rotate 0.6s var(--helenasunday-spring) 0.12s,
			opacity 0.25s var(--helenasunday-ease-effect) 0.12s;
	}

	/* Estado de espera: solo con el JS vivo. El círculo se queda a la
	   vista, vacío, para que se vea el camino que falta. */
	.helenasunday-sm-recorrido--vivo > li:not(.is-alcanzado) {
		translate: 0 var(--wp--preset--spacing--30);
	}

	.helenasunday-sm-recorrido--vivo > li:not(.is-alcanzado) > strong {
		opacity: 0;
	}

	/* El texto suelto del <li> no tiene elemento propio: se oculta con el
	   color, y el título, con su opacidad. */
	.helenasunday-sm-recorrido--vivo > li:not(.is-alcanzado) {
		color: transparent;
	}

	.helenasunday-sm-recorrido--vivo > li:not(.is-alcanzado)::before {
		background-color: var(--helenasunday-tono-fondo);
		color: var(--helenasunday-tono-acento);
		scale: 0.8;
	}

	.helenasunday-sm-recorrido--vivo > li:not(.is-alcanzado)::after {
		opacity: 0;
		scale: 0.4;
		rotate: 0deg;
	}

	.helenasunday-sm-recorrido > li > strong {
		transition: opacity 0.35s var(--helenasunday-ease-effect);
	}

	.helenasunday-sm-recorrido--vivo > li {
		transition:
			color 0.4s var(--helenasunday-ease-effect) 0.08s,
			translate 0.6s var(--helenasunday-spring);
	}

	/* Al pasar por una etapa ya alcanzada, su pegatina se despega. */
	.helenasunday-sm-recorrido > li:hover::after {
		scale: 1.1;
		rotate: 0deg;
	}
}

/* -------------------------------------------------------------------------
 * 3. El oficio: bento de tres con pegatinas
 *
 * Reutiliza el bento de la portada (secciones.css): pegatina a sangre en la
 * esquina, recortada por la tarjeta, y el texto que empieza debajo de la
 * reserva que calcula secciones.css con el ancho y la proporción de cada
 * pegatina (alto/ancho del viewBox).
 * ---------------------------------------------------------------------- */

.helenasunday-bento__item:has(> .helenasunday-bento__sticker--lupa) { --helenasunday-sticker-w: 195px; --helenasunday-sticker-proporcion: 1.056; }
.helenasunday-bento__item:has(> .helenasunday-bento__sticker--foco) { --helenasunday-sticker-w: 185px; --helenasunday-sticker-proporcion: 1.077; }
.helenasunday-bento__item:has(> .helenasunday-bento__sticker--idea) { --helenasunday-sticker-w: 200px; --helenasunday-sticker-proporcion: 0.947; }
.helenasunday-bento__item:has(> .helenasunday-bento__sticker--estudio) { --helenasunday-sticker-w: 270px; --helenasunday-sticker-proporcion: 0.893; }

.helenasunday-sm-oficio__bento .helenasunday-bento__item {
	min-height: 25em;
}

/* El foco tiene la cabeza arriba: si se sale por arriba se pierde la
   lámpara. Entra un poco en la tarjeta y se sale solo por el lado.
   (0,4,0) frente a la regla de las pequeñas de secciones.css (0,3,0). */
.helenasunday-sm-oficio__bento .helenasunday-bento__item > .helenasunday-bento__sticker--foco {
	top: var(--wp--preset--spacing--20);
}

/* Y la reserva de arriba crece lo mismo que baja la pegatina (secciones.css
   la calcula para una que sube spacing-10). */
.helenasunday-sm-oficio__bento .helenasunday-bento__item:has(> .helenasunday-bento__sticker--foco) {
	padding-block-start: calc(var(--helenasunday-sticker-w) * (var(--helenasunday-sticker-proporcion) + 0.15) + var(--wp--preset--spacing--20));
}

.helenasunday-sm-oficio__bento .helenasunday-bento__item > p:not(.helenasunday-bento__num) {
	font-size: var(--wp--preset--font-size--medium);
}

/* Despegar: la pegatina se endereza, sube un poco y su sombra se abre, como
   si se levantara de la tarjeta por una esquina. Pisa el gesto más discreto
   del bento de inicio, solo en esta página: (0,4,1) frente a (0,3,1). */
@media (prefers-reduced-motion: no-preference) {
	.helenasunday-seccion .helenasunday-bento__item > .helenasunday-bento__sticker img {
		transition: filter 0.35s var(--helenasunday-ease-effect);
	}

	.helenasunday-seccion .helenasunday-bento__item:hover > .helenasunday-bento__sticker {
		rotate: -3deg;
		scale: 1.1;
		translate: calc(var(--wp--preset--spacing--10) * -1) var(--wp--preset--spacing--10);
	}

	.helenasunday-seccion .helenasunday-bento__item > .helenasunday-bento__sticker {
		transition:
			rotate 0.55s var(--helenasunday-spring),
			scale 0.55s var(--helenasunday-spring),
			translate 0.55s var(--helenasunday-spring);
	}

	.helenasunday-seccion .helenasunday-bento__item:hover > .helenasunday-bento__sticker img {
		filter: drop-shadow(0 14px 18px color-mix(in srgb, var(--helenasunday-shadow-ink) 22%, transparent));
	}
}

/* -------------------------------------------------------------------------
 * 4. Mi estudio: bento con el equipo
 *
 * No va en .helenasunday-bento para no heredar la pila pegajosa de móvil de
 * la portada: aquí las cuatro tarjetas pequeñas son un velo del tono (sin
 * fondo propio) y apiladas se transparentarían. La grande sí es una
 * tarjeta de color con la pegatina del estudio.
 * ---------------------------------------------------------------------- */

.helenasunday-sm-estudio__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
}

.helenasunday-sm-estudio__grid > * {
	margin: 0 !important;
}

.helenasunday-sm-estudio__grid .helenasunday-bento__item--hero {
	min-height: 30em;
}

.helenasunday-sm-estudio__item {
	min-height: 14em;
	background-color: var(--helenasunday-tono-velo);
	border: 1px solid var(--helenasunday-tono-borde-suave);
	color: var(--helenasunday-tono-texto);
}

.helenasunday-sm-estudio__item > h3 {
	margin-block-start: auto !important;
	line-height: 1.1;
}

.helenasunday-sm-estudio__item > p:last-child {
	color: var(--helenasunday-tono-texto-suave);
}

.helenasunday-sm-estudio__tag {
	align-self: flex-start;
	padding: 0.3em 0.85em;
	border-radius: var(--helenasunday-shape-full);
	background-color: var(--helenasunday-tono-acento);
	color: var(--helenasunday-tono-sobre-acento);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.04em;
}

/* -------------------------------------------------------------------------
 * 5. En cifras
 *
 * Cabecera a la izquierda con la pegatina, cuatro tarjetas a la derecha.
 * Cada tarjeta lleva una pila de avatares con la red al final (o un corazón
 * en la de «me gusta»). Los avatares se recortan contra el anterior con un
 * borde del color de la tarjeta. La tarjeta es el velo translúcido de la
 * portada (secciones.css); el borde necesita un color opaco, así que
 * --helenasunday-sm-tarjeta es ese mismo velo mezclado ya con el fondo del
 * tono: da el color que se ve y sigue al fundido claro/oscuro. El porcentaje
 * es el del velo en cada tono (4,5 % en claro, 7 % en oscuro, tonos.css).
 * ---------------------------------------------------------------------- */

.helenasunday-sm-cifras__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: var(--wp--preset--spacing--60);
	align-items: center;
}

.helenasunday-sm-cifras__grid > * {
	margin: 0 !important;
}

.helenasunday-sm-cifras__head {
	margin-block-end: 0;
}

.helenasunday-sm-cifras__head > .helenasunday-sm-cifras__sticker {
	width: 170px;
	margin-block-start: var(--wp--preset--spacing--40) !important;
	rotate: -6deg;
}

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

/* El velo en oscuro es más denso (tonos.css). */
:root[data-helenasunday-tono="oscuro"].helenasunday-tonos .helenasunday-sm-cifras,
html:not(.helenasunday-tonos) .helenasunday-seccion--oscura.helenasunday-sm-cifras {
	--helenasunday-sm-velo: 7%;
}

/* (0,2,0): gana a la rejilla de cuatro de secciones.css. */
.helenasunday-sm-cifras .helenasunday-sm-cifras__stats {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.helenasunday-sm-cifras .helenasunday-stat {
	--helenasunday-sm-tarjeta: color-mix(in srgb, var(--helenasunday-tono-tinta) var(--helenasunday-sm-velo, 4.5%), var(--helenasunday-tono-fondo));
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
	padding: var(--wp--preset--spacing--40);
}

/* Pila y corazón ocupan el mismo alto: las cuatro tarjetas alinean la
   cifra a la misma altura. */
.helenasunday-sm-cifras .helenasunday-stat > :is(.helenasunday-sm-pila, .helenasunday-sm-like) {
	margin-block-end: var(--wp--preset--spacing--20);
}

.helenasunday-sm-cifras .helenasunday-stat > .helenasunday-sm-pila {
	height: calc(var(--wp--preset--spacing--40) * 1.4);
}

/* Pila de avatares. Tamaño atado a la escala de espaciado del tema. */
.helenasunday-sm-pila {
	--helenasunday-sm-avatar: calc(var(--wp--preset--spacing--40) * 1.15);
	--helenasunday-sm-solape: calc(var(--helenasunday-sm-avatar) * -0.3);
	--helenasunday-sm-abre: 0px;
	display: flex;
	align-items: center;
}

.helenasunday-sm-pila > * {
	--helenasunday-sm-i: 0;
	position: relative;
	display: grid;
	place-items: center;
	flex: none;
	box-sizing: border-box;
	width: var(--helenasunday-sm-avatar);
	height: var(--helenasunday-sm-avatar);
	margin-inline-start: var(--helenasunday-sm-solape);
	border: 3px solid var(--helenasunday-sm-tarjeta, var(--wp--preset--color--surface));
	border-radius: 50%;
	overflow: hidden;
	translate: calc(var(--helenasunday-sm-abre) * var(--helenasunday-sm-i)) 0;
}

.helenasunday-sm-pila > :first-child {
	margin-inline-start: 0;
}

.helenasunday-sm-pila > :nth-child(2) { --helenasunday-sm-i: 1; }
.helenasunday-sm-pila > :nth-child(3) { --helenasunday-sm-i: 2; }
.helenasunday-sm-pila > :nth-child(4) { --helenasunday-sm-i: 3; }
.helenasunday-sm-pila > :nth-child(5) { --helenasunday-sm-i: 4; }
.helenasunday-sm-pila > :nth-child(6) { --helenasunday-sm-i: 5; }
.helenasunday-sm-pila > :nth-child(7) { --helenasunday-sm-i: 6; }

/* Respaldo si falta la foto: un círculo neutro. Neutro también porque
   asoma en el borde antialias de la foto (circular, con transparencia): un
   color de la paleta dejaba un halo. */
.helenasunday-sm-pila__avatar {
	background-color: var(--wp--preset--color--surface-container-high);
}

.helenasunday-sm-pila__avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Logotipos oficiales de cada red (redes/oficial/, decisión del 26 sep:
   solo los oficiales) en un disco claro. El disco es claro en los dos
   esquemas: el negro de TikTok desaparecería sobre uno oscuro. */
.helenasunday-sm-pila {
	--helenasunday-sm-disco: var(--wp--preset--color--surface);
}

:root[data-theme="dark"] .helenasunday-sm-pila {
	--helenasunday-sm-disco: var(--wp--preset--color--on-surface);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .helenasunday-sm-pila {
		--helenasunday-sm-disco: var(--wp--preset--color--on-surface);
	}
}

.helenasunday-sm-pila__red {
	background-color: var(--helenasunday-sm-disco);
}

.helenasunday-sm-pila__red img {
	display: block;
	width: 58%;
	height: 58%;
}

.helenasunday-sm-like svg {
	display: block;
	width: 55%;
	height: 55%;
}

/* «Me gusta»: un solo corazón, algo mayor, con el mismo peso que la pila. */
.helenasunday-sm-like {
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: calc(var(--wp--preset--spacing--40) * 1.4);
	height: calc(var(--wp--preset--spacing--40) * 1.4);
	border-radius: 50%;
	border: 3px solid var(--helenasunday-sm-tarjeta, var(--wp--preset--color--surface));
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
}

@media (prefers-reduced-motion: no-preference) {
	.helenasunday-sm-pila > * {
		transition: translate 0.5s var(--helenasunday-spring);
	}

	.helenasunday-stat:hover > .helenasunday-sm-pila {
		--helenasunday-sm-abre: calc(var(--helenasunday-sm-avatar) * 0.12);
	}

	.helenasunday-sm-like {
		transition: scale 0.5s var(--helenasunday-spring);
	}

	.helenasunday-stat:hover > .helenasunday-sm-like {
		scale: 1.12;
	}

	.helenasunday-sm-cifras__sticker {
		transition: rotate 0.6s var(--helenasunday-spring), scale 0.6s var(--helenasunday-spring);
	}

	.helenasunday-sm-cifras__head:hover > .helenasunday-sm-cifras__sticker {
		rotate: 2deg;
		scale: 1.06;
	}
}

/* -------------------------------------------------------------------------
 * 6. Responsive
 * ---------------------------------------------------------------------- */

@media (max-width: 1100px) {
	.helenasunday-sm-estudio__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.helenasunday-sm-estudio__grid .helenasunday-bento__item--hero {
		grid-column: 1 / -1;
		grid-row: auto;
		min-height: 22em;
	}
}

@media (max-width: 900px) {
	.helenasunday-sm-historia__grid,
	.helenasunday-sm-cifras__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--50);
	}

	.helenasunday-sm-historia__head {
		position: static;
	}

	.helenasunday-sm-oficio__bento .helenasunday-bento__item {
		min-height: 0;
	}

	.helenasunday-sm-cifras__head > .helenasunday-sm-cifras__sticker {
		position: absolute;
		top: 0;
		right: 0;
		width: 110px;
		margin: 0 !important;
	}

	.helenasunday-sm-cifras__head {
		position: relative;
	}

	.helenasunday-sm-cifras__head > .helenasunday-eyebrow {
		min-height: 3.5em;
	}
}

@media (max-width: 781px) {
	.helenasunday-sm-polaroid {
		max-width: 320px;
		margin-block-start: var(--wp--preset--spacing--40);
	}

	.helenasunday-sm-polaroid .helenasunday-sticker--publi {
		left: -4%;
	}

	.helenasunday-sm-polaroid .helenasunday-sticker--ugc {
		right: -4%;
	}

	.helenasunday-sm-polaroid .helenasunday-sticker--fans {
		left: -4%;
	}

	.helenasunday-sm-recorrido {
		--helenasunday-sm-nodo: calc(var(--wp--preset--spacing--40) * 1.5);
		--helenasunday-sm-sticker-ancho: 72px;
	}

	/* En una columna estrecha la pegatina solo reserva sitio junto al
	   título; el texto pasa por debajo. */
	.helenasunday-sm-recorrido > li {
		min-height: 0;
		padding-inline: calc(var(--helenasunday-sm-nodo) + var(--wp--preset--spacing--30)) 0;
	}

	.helenasunday-sm-recorrido > li > strong {
		padding-inline-end: calc(var(--helenasunday-sm-sticker-ancho) + var(--wp--preset--spacing--10));
		font-size: var(--wp--preset--font-size--large);
		min-height: calc(var(--helenasunday-sm-sticker-ancho) * 0.8);
	}

	.helenasunday-sm-recorrido > li::after {
		top: calc(var(--wp--preset--spacing--10) * -1);
	}

	.helenasunday-sm-estudio__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.helenasunday-sm-estudio__item {
		min-height: 0;
	}

	.helenasunday-sm-estudio__item > h3 {
		margin-block-start: var(--wp--preset--spacing--20) !important;
	}

	.helenasunday-bento__item:has(> .helenasunday-bento__sticker--estudio) {
		--helenasunday-sticker-w: 170px;
	}

	/* La pila de la portada en móvil pone la pegatina más adentro: aquí la
	   tarjeta grande no está en .helenasunday-bento y no la recibe. */
	.helenasunday-sm-estudio__grid .helenasunday-bento__item--hero > .helenasunday-bento__sticker {
		top: calc(var(--wp--preset--spacing--30) * -1);
		right: calc(var(--wp--preset--spacing--40) * -1);
	}

	.helenasunday-sm-estudio__grid .helenasunday-bento__item--hero > .helenasunday-chips {
		max-width: none;
		padding-inline-end: 48%;
	}

	/* El titular va debajo de la pegatina: no necesita el hueco lateral
	   que secciones.css reserva en móvil (0,3,1) a los titulares. */
	.helenasunday-sm-estudio__grid .helenasunday-bento__item--hero > h3 {
		padding-inline-end: 0;
	}
}

@media (max-width: 560px) {
	.helenasunday-sm-cifras .helenasunday-sm-cifras__stats {
		grid-template-columns: minmax(0, 1fr);
	}

	/* En una columna la tarjeta es ancha: la pila recupera el tamaño de
	   escritorio (la escala de espaciado se encoge en móvil). */
	.helenasunday-sm-pila {
		--helenasunday-sm-avatar: calc(var(--wp--preset--spacing--50) * 1.1);
	}

	.helenasunday-sm-cifras .helenasunday-stat > .helenasunday-sm-pila,
	.helenasunday-sm-like {
		height: calc(var(--wp--preset--spacing--50) * 1.3);
	}

	.helenasunday-sm-like {
		width: calc(var(--wp--preset--spacing--50) * 1.3);
	}
}

/* Capa de corazones del botón final: se posiciona sobre el botón. */
.helenasunday-sm-cta .helenasunday-cta-principal {
	position: relative;
}