/*
 * Helena Sunday · secciones.css
 *
 * Secciones propias del sitio: hero con pila de vídeos, marquesina, cifras,
 * bento de servicios, «por qué yo», rejilla de tarjetas de vídeo, pasos,
 * llamada final y el diálogo de vídeo.
 *
 * Misma disciplina que el tema: 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 (--helenasunday-shape-*, --helenasunday-spring,
 * --helenasunday-ease-effect). Va detrás de extras.css y gana sus empates.
 *
 * Todo el movimiento vive dentro de prefers-reduced-motion: no-preference, de
 * modo que con movimiento reducido cada pieza se queda en su estado final.
 */

/* Tinta de las sombras: la tinta del texto en claro. En oscuro esa tinta es
   clara y la sombra se volvería un halo, así que pasa a la superficie. */
:root {
	--helenasunday-shadow-ink: var(--wp--preset--color--on-surface);
}

:root[data-theme="dark"] {
	--helenasunday-shadow-ink: var(--wp--preset--color--surface);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--helenasunday-shadow-ink: var(--wp--preset--color--surface);
	}
}

/* Utilidad local: oculta visualmente sin quitar del árbol de accesibilidad.
 * El tema no trae una clase "screen-reader-text" propia (misma nota que en
 * formulario.css, que declara la suya para su propio encolado): la usa
 * interacciones.js para el valor final del contador de cifras, que no puede
 * depender de que la página también cargue el formulario. */
.helenasunday-oculto-visualmente {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* -------------------------------------------------------------------------
 * 1. Tipografía de display
 * ---------------------------------------------------------------------- */

.helenasunday-display {
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	/* -0.02em y no la -0.035em de la v1: ese tracking se afinó para
	   Bricolage Grotesque (revisión 1); Poppins es más redonda y abierta, y
	   a igual tracking se lee más apretada. Mismo valor que pisa el filtro
	   de theme.json para h1-h6 (helenasunday-config.php): esta clase es la
	   que de verdad llega al navegador (gana por especificidad de clase a
	   la regla de elemento del tema), así que mantenerlas iguales evita dos
	   tracking distintos conviviendo en la misma página. */
	letter-spacing: -0.02em;
	line-height: 1;
}

/* Revisión 3: los titulares pasan a Poppins 600 (seminegrita) en todo el
   sitio, también el del hero, que antes era el único en 800. Se deja la
   regla explícita para que el hero no dependa de la de arriba si esta
   cambia. Las etiquetas pequeñas (pegatina #publi de la tarjeta, número del
   bento, etiqueta de «Por qué yo») siguen en 700: no son titulares y a ese
   tamaño la seminegrita se lee floja. */
.helenasunday-hero__title {
	font-weight: 600;
}

/* El titular del hero no cabe en la escala del tema (su máximo es
   xxx-large), así que se escala a partir de ese preset y no de un valor
   propio. */
/* El del hero se mide contra su propia columna (cqi) y contra el alto de la
   pantalla (svh), no contra el ancho de la ventana: la columna de texto no
   crece en proporción a la ventana, y un vw que da tres líneas a 1440 daba
   cuatro a 1280. Tres líneas en escritorio (feedback 26 sep). El svh evita
   que en un portátil bajo la columna de texto supere el alto disponible y
   empuje la pila fuera de la pantalla. */
@media (min-width: 1024px) {
	.helenasunday-hero__cols > .wp-block-column:first-child {
		container-type: inline-size;
	}

	.helenasunday-hero .helenasunday-hero__title {
		font-size: clamp(
			var(--wp--preset--font-size--xx-large),
			min(var(--helenasunday-hero-h1-cqi, 9.6cqi), 7.4svh),
			calc(var(--wp--preset--font-size--xxx-large) * 1.45)
		);
	}
}

.helenasunday-hero__title,
.helenasunday-page-title {
	font-size: clamp(
		var(--wp--preset--font-size--xxx-large),
		6.4vw,
		calc(var(--wp--preset--font-size--xxx-large) * 1.75)
	);
	letter-spacing: -0.045em;
	line-height: 0.96;
	margin-block: var(--wp--preset--spacing--20) 0;
}

/* En tableta (una columna, sin la regla de escritorio de arriba) el 6,4vw
   hacía el titular más grande que en escritorio: 52 px a 820 frente a 46 a
   1440. Se topa al mismo techo que el de escritorio. */
@media (max-width: 1023px) {
	.helenasunday-hero .helenasunday-hero__title {
		font-size: clamp(
			var(--wp--preset--font-size--xxx-large),
			6.4vw,
			calc(var(--wp--preset--font-size--xxx-large) * 1.25)
		);
	}
}

/* Revisión 2: un escalón menos que el titular del hero (ver
   docs/DIRECCION-VISUAL.md, "Tamaños"). El multiplicador baja de 1.5 a 1.35
   sobre la misma escala ya reducida en el filtro de theme.json
   (helenasunday-config.php, 'fontSizes'): las dos rebajas se suman, no hace
   falta tocar el vw. */
.helenasunday-page-title {
	font-size: clamp(
		var(--wp--preset--font-size--xxx-large),
		5.6vw,
		calc(var(--wp--preset--font-size--xxx-large) * 1.35)
	);
}

/* H2 de sección: mismo ajuste. El multiplicador baja de 1.1 a 1.03 para que,
   sobre la escala ya reducida, el máximo se acerque al objetivo de la tabla
   "Tamaños" en vez del tamaño, mucho mayor, que salía con la escala v1. */
h2.helenasunday-display.has-xxx-large-font-size {
	font-size: clamp(
		var(--wp--preset--font-size--xx-large),
		4.6vw,
		calc(var(--wp--preset--font-size--xxx-large) * 1.03)
	);
}

.helenasunday-hero__lead {
	max-width: 36em;
	line-height: 1.5;
	margin-block-start: var(--wp--preset--spacing--30);
}

.helenasunday-hero .wp-block-buttons {
	margin-block-start: var(--wp--preset--spacing--40);
}

.helenasunday-hero__note {
	margin-block-start: var(--wp--preset--spacing--30);
	letter-spacing: 0.01em;
}

/* Cabecera de sección: eyebrow, titular y entradilla. */
.helenasunday-section-head {
	margin-block-end: var(--wp--preset--spacing--50);
}

.helenasunday-section-head > *,
.helenasunday-page-intro > * {
	max-width: 46em;
	margin-inline: 0 !important;
}

.helenasunday-section-head > * + * {
	margin-block-start: var(--wp--preset--spacing--20);
}

.helenasunday-section-head--compact {
	margin-block-end: var(--wp--preset--spacing--40);
}

.helenasunday-section-head > p:last-child:not(:first-child) {
	margin-block-start: var(--wp--preset--spacing--30);
	line-height: 1.5;
}

.helenasunday-center {
	justify-content: center;
	margin-block-start: var(--wp--preset--spacing--50);
}

/* -------------------------------------------------------------------------
 * 2. Hero: pila de tarjetas y pegatinas
 * ---------------------------------------------------------------------- */

/* La tarjeta lateral gira sobre su propio centro (--helenasunday-rot) pegada
   al borde derecho: la rotación saca su esquina un par de píxeles fuera de
   la pila, lo que a 390px de ancho dejaba un pixel de scroll horizontal en
   toda la página. clip, no hidden: no necesita crear un nuevo contexto de
   scroll, solo recortar. */
.helenasunday-hero {
	overflow-x: clip;
}

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

.helenasunday-hero-stack {
	position: relative;
	/* La altura la fija la tarjeta del centro: 9:16 sobre el 50% del ancho,
	   más el margen que dejan los giros. */
	aspect-ratio: 1 / 1.08;
	max-width: 540px;
	margin-inline: auto;
}

.helenasunday-hero-stack > .helenasunday-video-card {
	position: absolute;
	width: 50%;
	margin: 0;
}

.helenasunday-hero-stack > .helenasunday-video-card--back {
	left: 0;
	top: 9%;
	--helenasunday-rot: -7deg;
	z-index: 1;
}

.helenasunday-hero-stack > .helenasunday-video-card--front {
	left: 25%;
	top: 0;
	--helenasunday-rot: 1.5deg;
	z-index: 3;
}

.helenasunday-hero-stack > .helenasunday-video-card--side {
	right: 0;
	top: 12%;
	--helenasunday-rot: 8deg;
	z-index: 2;
}

/* La tarjeta de atrás y la lateral quedan tapadas en parte: sin textos,
   para que la pila se lea como una sola pieza y el ojo vaya a la del
   centro. Su nombre accesible sigue en el alt de la portada. Al pasar por
   encima o con el foco suben al frente. */
.helenasunday-hero-stack > .helenasunday-video-card--back .helenasunday-video-card__info,
.helenasunday-hero-stack > .helenasunday-video-card--back .helenasunday-video-card__badge,
.helenasunday-hero-stack > .helenasunday-video-card--side .helenasunday-video-card__info,
.helenasunday-hero-stack > .helenasunday-video-card--side .helenasunday-video-card__badge,
.helenasunday-hero-stack > .helenasunday-video-card--back::after,
.helenasunday-hero-stack > .helenasunday-video-card--side::after {
	display: none;
}

.helenasunday-hero-stack > .helenasunday-video-card:hover,
.helenasunday-hero-stack > .helenasunday-video-card:focus-within {
	z-index: 4;
}

.helenasunday-stickers {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 5;
}

.helenasunday-sticker {
	position: absolute;
	display: inline-block;
	padding: 0.5em 1em;
	border-radius: var(--helenasunday-shape-full);
	font-family: var(--wp--preset--font-family--poppins);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	letter-spacing: -0.01em;
	white-space: nowrap;
	box-shadow:
		0 2px 4px color-mix(in srgb, var(--helenasunday-shadow-ink) 12%, transparent),
		0 10px 24px color-mix(in srgb, var(--helenasunday-shadow-ink) 14%, transparent);
	rotate: var(--helenasunday-sticker-rot, 0deg);
}

/* Revisión 2: las tres pegatinas pasan de la tinta profunda (tertiary,
   surface, primary) a los tres container flúor, cada una con su "on-*" de
   tinta encima (docs/DIRECCION-VISUAL.md, "Paleta": "Subrayador rosa,
   pegatinas, tarjetas" / "Subrayador amarillo, pegatinas, bento" / "Fondos
   de tarjeta, pegatinas"). Un flúor nunca lleva texto blanco: por eso el
   color ya no es on-primary en ninguna. */
.helenasunday-sticker--publi {
	top: 4%;
	left: -2%;
	background-color: var(--wp--preset--color--tertiary-container);
	color: var(--wp--preset--color--on-tertiary-container);
	--helenasunday-sticker-rot: -8deg;
}

.helenasunday-sticker--fans {
	bottom: 6%;
	left: 6%;
	background-color: var(--wp--preset--color--secondary-container);
	color: var(--wp--preset--color--on-secondary-container);
	--helenasunday-sticker-rot: 4deg;
}

.helenasunday-sticker--ugc {
	top: 38%;
	right: -3%;
	background-color: var(--wp--preset--color--primary-container);
	color: var(--wp--preset--color--on-primary-container);
	font-size: var(--wp--preset--font-size--large);
	--helenasunday-sticker-rot: 10deg;
}

@media (prefers-reduced-motion: no-preference) {
	.helenasunday-sticker {
		animation: helenasunday-flotar 5.2s ease-in-out infinite alternate;
	}

	.helenasunday-sticker--fans {
		animation-duration: 6.4s;
		animation-delay: -2.1s;
	}

	.helenasunday-sticker--ugc {
		animation-duration: 4.6s;
		animation-delay: -3.3s;
	}
}

@keyframes helenasunday-flotar {
	from {
		translate: 0 -2px;
	}

	to {
		translate: 0 3px;
	}
}

/* Retrato de «Sobre mí»: misma idea, una sola pieza. */
.helenasunday-portrait-wrap {
	position: relative;
	max-width: 420px;
	margin-inline: auto;
}

.helenasunday-portrait-wrap .helenasunday-portrait {
	margin: 0;
	rotate: 2deg;
}

.helenasunday-portrait img {
	display: block;
	width: 100%;
	aspect-ratio: 9 / 16;
	object-fit: cover;
	border-radius: var(--helenasunday-shape-3xl);
}

.helenasunday-portrait-wrap .helenasunday-sticker--publi {
	top: 6%;
	left: -6%;
}

.helenasunday-portrait-wrap .helenasunday-sticker--ugc {
	top: auto;
	bottom: 10%;
	right: -4%;
}

/* -------------------------------------------------------------------------
 * 3. Tarjeta de vídeo
 *
 * Un grupo con un core/image enlazado a YouTube (la portada) y dos textos.
 * El enlace es el único elemento interactivo y ocupa toda la tarjeta; los
 * textos van por encima sin capturar el puntero. La inclinación la escribe
 * interacciones.js en --helenasunday-tilt-x / -y; la elevación y el play, el CSS.
 * ---------------------------------------------------------------------- */

.helenasunday-video-card {
	--helenasunday-rot: 0deg;
	--helenasunday-tilt-x: 0deg;
	--helenasunday-tilt-y: 0deg;
	--helenasunday-lift: 0px;
	/* Velo y tinta de la tarjeta: siempre una pantalla oscura con texto
	   claro, también en el esquema oscuro (donde inverse-surface se vuelve
	   clara). Ver el bloque de esquema oscuro más abajo. */
	--helenasunday-card-veil: var(--wp--preset--color--inverse-surface);
	--helenasunday-card-ink: var(--wp--preset--color--on-inverse-surface);

	position: relative;
	aspect-ratio: 9 / 16;
	border-radius: var(--helenasunday-shape-2xl);
	overflow: hidden;
	isolation: isolate;
	background-color: var(--helenasunday-card-veil);
	color: var(--helenasunday-card-ink);
	transform:
		perspective(900px)
		translateY(var(--helenasunday-lift))
		rotate(var(--helenasunday-rot))
		rotateX(var(--helenasunday-tilt-x))
		rotateY(var(--helenasunday-tilt-y));
	box-shadow:
		0 2px 4px color-mix(in srgb, var(--helenasunday-shadow-ink) 8%, transparent),
		0 12px 28px color-mix(in srgb, var(--helenasunday-shadow-ink) 10%, transparent);
}

.helenasunday-video-card > * {
	margin: 0;
}

.helenasunday-video-card__media,
.helenasunday-video-card__media a,
.helenasunday-video-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.helenasunday-video-card__media img {
	object-fit: cover;
	border-radius: 0;
}

.helenasunday-video-card__media a {
	display: block;
	z-index: 0;
	cursor: pointer;
}

/* Velo inferior: garantiza el contraste del texto sobre cualquier portada.
   Bajo el texto la superficie oscura va al 90%, lo que deja la peor
   combinación (portada blanca) por encima de 9:1. */
.helenasunday-video-card::after {
	content: "";
	position: absolute;
	inset: 45% 0 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		to bottom,
		transparent,
		color-mix(in srgb, var(--helenasunday-card-veil) 78%, transparent) 42%,
		color-mix(in srgb, var(--helenasunday-card-veil) 92%, transparent) 70%
	);
}

:root[data-theme="dark"] .helenasunday-video-card {
	--helenasunday-card-veil: var(--wp--preset--color--surface);
	--helenasunday-card-ink: var(--wp--preset--color--on-surface);
}

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

.helenasunday-video-card__info,
.helenasunday-video-card__badge {
	z-index: 2;
	pointer-events: none;
}

.helenasunday-video-card__info {
	position: absolute;
	inset: auto 0 0;
	padding: var(--wp--preset--spacing--30);
}

.helenasunday-video-card__info > * {
	margin: 0;
}

.helenasunday-video-card__brand {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.9;
}

.helenasunday-video-card__title {
	margin-block-start: 0.25em !important;
	font-family: var(--wp--preset--font-family--poppins);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.05;
	text-wrap: balance;
}

/* Mismo naranja flúor que la pegatina "#publi" del hero (revisión 2): es la
   misma etiqueta, solo que sobre la portada de una tarjeta de vídeo en vez
   de flotando. */
.helenasunday-video-card__badge {
	position: absolute;
	top: var(--wp--preset--spacing--20);
	left: var(--wp--preset--spacing--20);
	padding: 0.3em 0.8em;
	border-radius: var(--helenasunday-shape-full);
	background-color: var(--wp--preset--color--tertiary-container);
	color: var(--wp--preset--color--on-tertiary-container);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.04em;
}

/* Botón de reproducir: dos capas del propio enlace, un disco y un triángulo.
   Así el play forma parte del objetivo del clic y no hay un elemento más. */
.helenasunday-video-card__media a::before,
.helenasunday-video-card__media a::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 42%;
	translate: -50% -50%;
	scale: var(--helenasunday-play, 1);
	pointer-events: none;
	/* Por encima de la portada, que también va posicionada. */
	z-index: 1;
}

.helenasunday-video-card__media a::before {
	width: 3.75em;
	height: 3.75em;
	border-radius: 50%;
	background-color: color-mix(in srgb, var(--wp--preset--color--surface) 88%, transparent);
	backdrop-filter: blur(6px);
	box-shadow: 0 6px 18px color-mix(in srgb, var(--helenasunday-shadow-ink) 25%, transparent);
}

.helenasunday-video-card__media a::after {
	width: 1.25em;
	height: 1.4em;
	margin-left: 0.15em;
	background-color: var(--wp--preset--color--primary);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.helenasunday-hero-stack .helenasunday-video-card__media a::before {
	width: 3em;
	height: 3em;
}

.helenasunday-hero-stack .helenasunday-video-card__media a::after {
	width: 1em;
	height: 1.1em;
}

/* Foco: el anillo va en la tarjeta entera, no en el enlace, que el recorte
   de las esquinas taparía. */
.helenasunday-video-card:has(a:focus-visible) {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 4px;
}

.helenasunday-video-card__media a:focus-visible {
	outline: none;
}

.helenasunday-video-card:hover,
.helenasunday-video-card:focus-within {
	--helenasunday-lift: -6px;
	--helenasunday-play: 1.14;
	box-shadow:
		0 4px 8px color-mix(in srgb, var(--helenasunday-shadow-ink) 12%, transparent),
		0 22px 44px color-mix(in srgb, var(--helenasunday-shadow-ink) 18%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
	.helenasunday-video-card {
		transition:
			transform 0.45s var(--helenasunday-spring),
			box-shadow 0.35s var(--helenasunday-ease-effect);
	}

	/* Mientras el puntero la inclina, la tarjeta sigue al cursor sin
	   retraso: el muelle solo actúa al entrar y al salir. */
	.helenasunday-video-card.is-tilting {
		transition:
			transform 0.12s var(--helenasunday-ease-effect),
			box-shadow 0.35s var(--helenasunday-ease-effect);
	}

	.helenasunday-video-card__media a::before,
	.helenasunday-video-card__media a::after {
		transition: scale 0.42s var(--helenasunday-spring);
	}

	.helenasunday-video-card__media img {
		transition: scale 0.6s var(--helenasunday-ease-effect);
	}

	.helenasunday-video-card:hover .helenasunday-video-card__media img {
		scale: 1.04;
	}
}

/* Rejilla de tarjetas. */
.helenasunday-video-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
}

.helenasunday-video-grid > * {
	margin: 0 !important;
}

.helenasunday-video-grid--four {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* -------------------------------------------------------------------------
 * 4. Marquesina de marcas
 * ---------------------------------------------------------------------- */

h2.helenasunday-marquee__title {
	display: block;
	margin-block: 0 var(--wp--preset--spacing--30);
	text-align: center;
	color: var(--helenasunday-tono-texto-suave);
}

.helenasunday-marquee {
	position: relative;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent, currentColor 8%, currentColor 92%, transparent);
	mask-image: linear-gradient(to right, transparent, currentColor 8%, currentColor 92%, transparent);
}

.helenasunday-marquee__inner {
	display: flex;
	width: max-content;
}

.helenasunday-marquee__list {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.helenasunday-marquee__list li {
	display: flex;
	align-items: center;
	font-family: var(--wp--preset--font-family--poppins);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 600;
	letter-spacing: -0.02em;
	white-space: nowrap;
	color: var(--helenasunday-tono-texto);
}

/* Separador: un rombo de marca (magenta) entre marca y marca. */
.helenasunday-marquee__list li::after {
	content: "";
	width: 0.35em;
	height: 0.35em;
	margin-inline: 0.9em;
	background-color: var(--helenasunday-tono-acento);
	rotate: 45deg;
	border-radius: 2px;
}

.helenasunday-marquee__toggle {
	display: block;
	margin: var(--wp--preset--spacing--20) auto 0;
	padding: 0.35em 1em;
	border: 1px solid var(--helenasunday-tono-borde);
	border-radius: var(--helenasunday-shape-full);
	background: transparent;
	color: var(--helenasunday-tono-texto-suave);
	font: inherit;
	font-size: var(--wp--preset--font-size--x-small);
	cursor: pointer;
}

.helenasunday-marquee__toggle[hidden] {
	display: none;
}

.helenasunday-marquee__toggle:hover {
	color: var(--helenasunday-tono-texto);
	border-color: var(--helenasunday-tono-texto);
}

/* La animación solo corre con JS (".helenasunday-js" en el <html>, igual que
   hace el tema para las entradas de sección): el botón de pausa lo crea
   interacciones.js, así que sin JS no hay forma de pararla, y una animación
   de más de cinco segundos sin pausa incumple WCAG 2.2.2. Sin el script, la
   marquesina cae directamente al mismo aspecto estático de más abajo. */
@media (prefers-reduced-motion: no-preference) {
	.helenasunday-js .helenasunday-marquee__inner {
		animation: helenasunday-marquesina 38s linear infinite;
	}

	.helenasunday-js .helenasunday-marquee:hover .helenasunday-marquee__inner,
	.helenasunday-js .helenasunday-marquee:focus-within .helenasunday-marquee__inner,
	.helenasunday-marquee.is-paused .helenasunday-marquee__inner {
		animation-play-state: paused;
	}
}

@keyframes helenasunday-marquesina {
	to {
		transform: translateX(-50%);
	}
}

/* Sin animación: con movimiento reducido, o sin JS (mismo motivo que arriba:
   sin el botón de pausa, la marquesina no se podría parar). Lista estática,
   centrada y en varias líneas; la copia duplicada y el botón de pausa sobran
   en los dos casos. */
@media (prefers-reduced-motion: reduce) {
	.helenasunday-marquee {
		-webkit-mask-image: none;
		mask-image: none;
	}

	.helenasunday-marquee__inner {
		width: auto;
		justify-content: center;
	}

	.helenasunday-marquee__list {
		flex-shrink: 1;
		min-width: 0;
		flex-wrap: wrap;
		justify-content: center;
		row-gap: 0.3em;
	}

	.helenasunday-marquee__list[aria-hidden="true"],
	.helenasunday-marquee__toggle {
		display: none;
	}
}

html:not(.helenasunday-js) .helenasunday-marquee {
	-webkit-mask-image: none;
	mask-image: none;
}

html:not(.helenasunday-js) .helenasunday-marquee__inner {
	width: auto;
	justify-content: center;
}

html:not(.helenasunday-js) .helenasunday-marquee__list {
	flex-shrink: 1;
	min-width: 0;
	flex-wrap: wrap;
	justify-content: center;
	row-gap: 0.3em;
}

html:not(.helenasunday-js) .helenasunday-marquee__list[aria-hidden="true"],
html:not(.helenasunday-js) .helenasunday-marquee__toggle {
	display: none;
}

/* -------------------------------------------------------------------------
 * 5. Cifras
 * ---------------------------------------------------------------------- */

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

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

/* Revisión 3: sin fondo propio. La tarjeta es un velo de la tinta del tono
   sobre el fondo de la página, así que sigue al fundido claro/oscuro. */
.helenasunday-stat {
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	border-radius: var(--helenasunday-shape-2xl);
	background-color: var(--helenasunday-tono-velo);
	border: 1px solid var(--helenasunday-tono-borde-suave);
}

.helenasunday-stat > * {
	margin: 0;
}

/* Revisión 2: multiplicador de 1.15 a 1.08 sobre la escala ya reducida
   (helenasunday-config.php, 'fontSizes'), en línea con el resto de clamp()
   de titulares (ver el comentario junto a la cabecera del hero). */
.helenasunday-count {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: clamp(
		var(--wp--preset--font-size--xx-large),
		5vw,
		calc(var(--wp--preset--font-size--xxx-large) * 1.08)
	);
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--helenasunday-tono-acento);
	white-space: nowrap;
}

.helenasunday-stat__label {
	margin-block-start: var(--wp--preset--spacing--10) !important;
	font-weight: 500;
}

/* -------------------------------------------------------------------------
 * 6. Bento
 * ---------------------------------------------------------------------- */

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

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

.helenasunday-bento__item {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--helenasunday-shape-2xl);
	min-height: 15em;
	box-sizing: border-box;
}

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

.helenasunday-bento__item h3 {
	line-height: 1.02;
}

.helenasunday-bento__item p {
	line-height: 1.5;
}

.helenasunday-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10);
	margin-block-end: auto !important;
}

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

.helenasunday-chips .helenasunday-chip {
	border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.helenasunday-bento__num {
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.08em;
	/* Revisión 2: 0,88 y no el 0,8 de la v1. Con la paleta anterior 0,8
	   bastaba (el límite lo marcaba el esquema oscuro, ver el historial de
	   este comentario); con el magenta nuevo de "primary", la tarjeta "01"
	   -fondo primary, texto on-primary blanco- cae a 4,09:1 en claro a 0,8,
	   por debajo de AA. 0,88 la deja en ~4,58:1 sin notarse casi diferencia
	   en el efecto "número fantasma". Comprobado con el script de contraste
	   en claro y en oscuro, las cuatro páginas. */
	opacity: 0.88;
	margin-block-end: auto !important;
}

.helenasunday-bento__num:has(+ .helenasunday-chips) {
	margin-block-end: 0 !important;
}

.helenasunday-bento__item--hero {
	grid-column: span 2;
	grid-row: span 2;
	justify-content: flex-end;
}

/* Revisión 2: sin multiplicador que tocar (ya no lo llevaba). El recorte le
   llega solo de haber reducido "xx-large"/"xxx-large" en el filtro de
   theme.json (helenasunday-config.php, 'fontSizes'). */
.helenasunday-bento__item--hero h3.wp-block-heading {
	font-size: clamp(
		var(--wp--preset--font-size--xx-large),
		4vw,
		var(--wp--preset--font-size--xxx-large)
	) !important;
}

.helenasunday-bento__item--hero > p:last-child {
	font-size: var(--wp--preset--font-size--large);
	max-width: 26em;
}

.helenasunday-bento__item--wide {
	grid-column: span 2;
}

.helenasunday-bento--three {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.helenasunday-bento--three .helenasunday-bento__item,
.helenasunday-bento--four .helenasunday-bento__item {
	min-height: 0;
}

.helenasunday-bento--four {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

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

	.helenasunday-bento__item:hover {
		transform: translateY(-4px);
		box-shadow: 0 16px 36px color-mix(in srgb, var(--helenasunday-shadow-ink) 10%, transparent);
	}
}

/* -------------------------------------------------------------------------
 * 7. Por qué yo (sección oscura)
 * ---------------------------------------------------------------------- */

.helenasunday-why {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

/* Revisión 3: fuera el brillo magenta de la esquina. Era un fondo de
   sección, y ahora el único fondo es el de la página (tonos.css). */

.helenasunday-why__intro {
	opacity: 0.88;
}

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

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

.helenasunday-why__item {
	padding-block-start: var(--wp--preset--spacing--30);
	border-block-start: 1px solid var(--helenasunday-tono-borde-suave);
}

.helenasunday-why__item > * {
	margin: 0;
}

/* Revisión 2: sin multiplicador que tocar, igual que el titular del bento
   (arriba); el recorte viene solo de la escala reducida. Revisión 3: el
   color es el acento del tono (tonos.css): magenta sobre claro y rosa flúor
   sobre oscuro, donde sí puede ser texto (7,4:1). Si la sección asoma con
   el tono claro activo, pasa a magenta y se sigue leyendo. */
.helenasunday-why__big {
	font-size: clamp(
		var(--wp--preset--font-size--xx-large),
		3.6vw,
		var(--wp--preset--font-size--xxx-large)
	);
	color: var(--helenasunday-tono-acento);
	white-space: nowrap;
}

.helenasunday-why__label {
	margin-block-start: var(--wp--preset--spacing--20) !important;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.35;
	font-size: var(--wp--preset--font-size--x-small);
}

.helenasunday-why__text {
	margin-block-start: var(--wp--preset--spacing--20) !important;
	line-height: 1.55;
	opacity: 0.88;
}

/* -------------------------------------------------------------------------
 * 8. Pasos, preguntas y prosa
 * ---------------------------------------------------------------------- */

.helenasunday-steps {
	gap: var(--wp--preset--spacing--30);
}

.helenasunday-step {
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	border-radius: var(--helenasunday-shape-2xl);
	background-color: var(--helenasunday-tono-velo);
}

.helenasunday-step > * + * {
	margin-block-start: var(--wp--preset--spacing--20);
}

.helenasunday-faq {
	display: grid;
	gap: var(--wp--preset--spacing--10);
}

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

/* Revisión 3: la pregunta ya no lleva fondo en el marcado (era surface
   sobre una sección surface-container); lo pone aquí el velo del tono. */
.helenasunday-faq .helenasunday-faq-item {
	border-radius: var(--helenasunday-shape-xl);
	background-color: var(--helenasunday-tono-velo);
}

.helenasunday-faq .helenasunday-faq-item > summary {
	font-weight: 600;
}

.helenasunday-prose p {
	line-height: 1.65;
}

.helenasunday-prose > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.helenasunday-prose > .helenasunday-eyebrow + * {
	margin-block-start: var(--wp--preset--spacing--20);
}

/* -------------------------------------------------------------------------
 * 9. Portfolio, media kit y llamada final
 * ---------------------------------------------------------------------- */

.helenasunday-pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10);
	margin-block-start: var(--wp--preset--spacing--40);
}

.helenasunday-pill {
	display: inline-flex;
	align-items: center;
	padding: 0.55em 1.15em;
	border-radius: var(--helenasunday-shape-full);
	background-color: var(--wp--preset--color--surface-container-high);
	color: var(--wp--preset--color--on-surface);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
}

.helenasunday-pill:hover {
	background-color: var(--wp--preset--color--primary-container);
	color: var(--wp--preset--color--on-primary-container);
}

@media (prefers-reduced-motion: no-preference) {
	html:has(.helenasunday-pills) {
		scroll-behavior: smooth;
	}

	.helenasunday-pill {
		transition:
			background-color 0.2s var(--helenasunday-ease-effect),
			transform 0.4s var(--helenasunday-spring);
	}

	.helenasunday-pill:hover {
		transform: translateY(-2px);
	}

	.helenasunday-pill:active {
		transform: scale(0.97);
		transition-duration: 0.08s;
	}
}

/* Revisión 3: la compensación de la cabecera en las anclas ya no va aquí,
   la pone tonos.css para toda la página (scroll-padding-top). */

.helenasunday-reasons {
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--wp--preset--spacing--20);
}

.helenasunday-reasons li {
	position: relative;
	padding-inline-start: 1.9em;
	line-height: 1.5;
}

/* Marca de verificación dibujada con dos bordes, sin icono. */
.helenasunday-reasons li::before {
	content: "";
	position: absolute;
	left: 0.2em;
	top: 0.2em;
	width: 0.45em;
	height: 0.85em;
	border: solid var(--helenasunday-tono-acento);
	border-width: 0 0.18em 0.18em 0;
	rotate: 40deg;
}

.helenasunday-kit-cols {
	gap: var(--wp--preset--spacing--50);
}

.helenasunday-kit-form {
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--helenasunday-shape-3xl);
	border: 1px solid var(--wp--preset--color--outline-variant);
}

.helenasunday-privacy-note {
	margin-block-start: var(--wp--preset--spacing--30);
	line-height: 1.5;
}

.helenasunday-cta-band {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
	border-radius: var(--helenasunday-shape-3xl);
	text-align: center;
}

.helenasunday-cta-band::before {
	content: "";
	position: absolute;
	inset: -40% -10% auto auto;
	width: 60%;
	aspect-ratio: 1;
	z-index: -1;
	border-radius: 50%;
	background: radial-gradient(
		closest-side,
		color-mix(in srgb, var(--wp--preset--color--tertiary-container) 90%, transparent),
		transparent
	);
}

.helenasunday-cta-band > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.helenasunday-cta-band .wp-block-buttons {
	justify-content: center;
	margin-block-start: var(--wp--preset--spacing--40);
}

/* -------------------------------------------------------------------------
 * 10. Diálogo de vídeo
 * ---------------------------------------------------------------------- */

.helenasunday-video-dialog {
	padding: 0;
	border: 0;
	border-radius: var(--helenasunday-shape-2xl);
	background-color: var(--wp--preset--color--inverse-surface);
	color: var(--wp--preset--color--on-inverse-surface);
	overflow: visible;
	max-width: none;
	max-height: none;
}

.helenasunday-video-dialog::backdrop {
	background-color: color-mix(in srgb, var(--wp--preset--color--inverse-surface) 82%, transparent);
	backdrop-filter: blur(6px);
}

.helenasunday-video-dialog__frame {
	width: min(92vw, 1100px);
	aspect-ratio: 16 / 9;
	max-height: 86vh;
	border-radius: inherit;
	overflow: hidden;
}

.helenasunday-video-dialog.is-vertical .helenasunday-video-dialog__frame {
	width: auto;
	height: min(86vh, 900px);
	max-width: 92vw;
	aspect-ratio: 9 / 16;
}

.helenasunday-video-dialog iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.helenasunday-video-dialog__close {
	position: absolute;
	top: calc(var(--wp--preset--spacing--20) * -1);
	right: calc(var(--wp--preset--spacing--20) * -1);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75em;
	height: 2.75em;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--on-surface);
	cursor: pointer;
	box-shadow: 0 6px 18px color-mix(in srgb, var(--helenasunday-shadow-ink) 30%, transparent);
}

.helenasunday-video-dialog__close svg {
	width: 1.25em;
	height: 1.25em;
}

.helenasunday-video-dialog__close:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

html:has(.helenasunday-video-dialog[open]) {
	overflow: hidden;
}

/* -------------------------------------------------------------------------
 * 11. Responsive
 * ---------------------------------------------------------------------- */

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

@media (max-width: 900px) {
	.helenasunday-stats,
	.helenasunday-video-grid--four,
	.helenasunday-bento--four {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

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

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

	.helenasunday-bento__item--hero {
		grid-row: auto;
	}
}

@media (max-width: 781px) {
	.helenasunday-hero-stack {
		max-width: 420px;
		margin-block-start: var(--wp--preset--spacing--30);
	}

	.helenasunday-video-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20);
	}

	.helenasunday-video-card {
		border-radius: var(--helenasunday-shape-xl);
	}

	.helenasunday-video-card__title {
		font-size: var(--wp--preset--font-size--medium);
	}

	.helenasunday-video-card__info {
		padding: var(--wp--preset--spacing--20);
	}

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

	.helenasunday-bento__item--hero,
	.helenasunday-bento__item--wide {
		grid-column: auto;
	}

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

	.helenasunday-marquee__list li {
		font-size: var(--wp--preset--font-size--x-large);
	}

	.helenasunday-cta-band {
		padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
	}

	.helenasunday-sticker {
		font-size: var(--wp--preset--font-size--small);
	}

	.helenasunday-sticker--ugc {
		font-size: var(--wp--preset--font-size--medium);
	}
}

@media (max-width: 480px) {
	.helenasunday-stat {
		padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20);
	}

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

/* -------------------------------------------------------------------------
 * Botones de llamada a la acción (feedback del 26 de septiembre de 2026)
 *
 * Nacieron en el hero y ahora son los de toda la web: cualquier «Pide mi
 * media kit» lleva la clase helenasunday-cta-principal y cualquier «Ver
 * portfolio», helenasunday-cta-secundario.
 *
 * - «Pide mi media kit» (helenasunday-cta-principal) un 40 % más grande:
 *   la fuente del botón del tema (small) por 1,4 y el mismo relleno del
 *   tema (0,75 × 1,5 rem sobre esa fuente) pasado a em, para que escale con
 *   ella sin escribir un valor de espaciado nuevo.
 * - Icono de carpetas en lugar de la flecha: Tabler «folders» (MIT) como
 *   máscara, así toma el color del texto del botón en cualquier tono. Al
 *   pasar por encima la carpeta de delante se inclina, como al abrirla.
 * - «Ver portfolio» conserva su tamaño; su contorno baja al 10 % del texto
 *   del tono. (0,5,0) para ganar a la regla de contorno de tonos.css
 *   (0,4,0), que se carga detrás.
 * ---------------------------------------------------------------------- */

.helenasunday-seccion .wp-block-button.helenasunday-cta-principal > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	font-size: calc(var(--wp--preset--font-size--small) * 1.4);
	padding: 0.865em 1.45em 0.865em 1.73em;
}

/* Si una fila lleva el botón principal (más alto), los demás se centran en
   vertical con él. */
.wp-block-buttons:has(> .helenasunday-cta-principal) {
	align-items: center;
}

.helenasunday-icono-carpetas {
	display: inline-block;
	flex: none;
	width: 1.25em;
	height: 1.25em;
	background-color: currentColor;
	-webkit-mask: var(--helenasunday-mascara-carpetas) center / contain no-repeat;
	mask: var(--helenasunday-mascara-carpetas) center / contain no-repeat;
	transform-origin: 30% 80%;
}

:root {
	--helenasunday-mascara-carpetas: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M9 3h3l2 2h5a2 2 0 0 1 2 2v7a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2'/><path d='M17 16v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2h2'/></svg>");
}

@media (prefers-reduced-motion: no-preference) {
	.helenasunday-icono-carpetas {
		transition: transform 0.45s var(--helenasunday-spring);
	}

	.wp-block-button__link:hover .helenasunday-icono-carpetas,
	.wp-block-button__link:focus-visible .helenasunday-icono-carpetas {
		transform: rotate(-9deg) translateY(-1px) scale(1.06);
	}
}

/* Botón secundario («Ver portfolio»): mismo tamaño que un botón normal y
   contorno al 10 % del texto del tono, en toda la web. (0,5,0) para ganar a
   la regla de contorno de tonos.css (0,4,0), que se carga detrás. */
.helenasunday-seccion .wp-block-button.is-style-outline.helenasunday-cta-secundario > .wp-block-button__link {
	border-color: color-mix(in srgb, var(--helenasunday-tono-texto, var(--wp--preset--color--on-surface)) 10%, transparent);
}

/* -------------------------------------------------------------------------
 * Stickers del bento (feedback del 26 de septiembre de 2026)
 *
 * Ilustraciones tipo pegatina que apoyan el concepto de cada servicio,
 * generadas con la paleta del sitio (origen en assets/stickers/ del
 * proyecto). Van a sangre en la esquina superior derecha: se salen del
 * borde y la tarjeta las recorta. Decorativas: alt vacío en el marcado.
 *
 * SVG CON TRAZO QUE NO ESCALA. Son SVG vectorizados de la hoja original
 * (se sirven desde stickers/ de este mu-plugin, la biblioteca de medios no
 * admite SVG): los rellenos son formas que escalan con la pegatina, pero la
 * línea de tinta es un trazo con vector-effect: non-scaling-stroke, así que
 * mide 1,5 px en pantalla a cualquier tamaño. Por eso ya no hace falta una
 * escala común: cada pegatina tiene el tamaño que le va a su tarjeta (la
 * grande, más; las pequeñas, menos) y el grosor de línea sigue siendo el
 * mismo en todas. Para cambiar un tamaño se toca solo su ancho.
 *
 * Cada tarjeta declara el ancho de su pegatina (--helenasunday-sticker-w)
 * y su proporción alto/ancho (la del viewBox del SVG), que las tarjetas
 * pequeñas usan para reservar arriba el alto justo.
 * ---------------------------------------------------------------------- */

.helenasunday-bento__item:has(> .helenasunday-bento__sticker--anuncios) { --helenasunday-sticker-w: 220px; --helenasunday-sticker-proporcion: 1.464; }
.helenasunday-bento__item:has(> .helenasunday-bento__sticker--redes) { --helenasunday-sticker-w: 165px; --helenasunday-sticker-proporcion: 0.950; }
.helenasunday-bento__item:has(> .helenasunday-bento__sticker--colaboraciones) { --helenasunday-sticker-w: 140px; --helenasunday-sticker-proporcion: 0.844; }
.helenasunday-bento__item:has(> .helenasunday-bento__sticker--foto) { --helenasunday-sticker-w: 128px; --helenasunday-sticker-proporcion: 0.990; }
.helenasunday-bento__item:has(> .helenasunday-bento__sticker--belleza) { --helenasunday-sticker-w: 140px; --helenasunday-sticker-proporcion: 1.186; }
.helenasunday-bento__item:has(> .helenasunday-bento__sticker--produccion) { --helenasunday-sticker-w: 170px; --helenasunday-sticker-proporcion: 0.945; }

.helenasunday-bento__item:has(> .helenasunday-bento__sticker) {
	position: relative;
	overflow: clip;
	isolation: isolate;
}

.helenasunday-bento__item > .helenasunday-bento__sticker {
	position: absolute;
	top: calc(var(--wp--preset--spacing--20) * -1);
	right: calc(var(--wp--preset--spacing--20) * -1);
	width: var(--helenasunday-sticker-w);
	max-width: none;
	margin: 0 !important;
	z-index: -1;
	pointer-events: none;
	rotate: 8deg;
	transform-origin: 70% 30%;
}

.helenasunday-bento__item > .helenasunday-bento__sticker img {
	display: block;
	width: 100%;
	height: auto;
	/* Sombra de pegatina, del color de la tinta y muy suave. */
	filter: drop-shadow(0 6px 10px color-mix(in srgb, var(--helenasunday-shadow-ink) 14%, transparent));
}

.helenasunday-bento__item--hero > .helenasunday-bento__sticker {
	rotate: 10deg;
}

/* Las pequeñas tienen el texto más apretado: la pegatina se sale más por el
   lado (no por arriba, que se perdería el dibujo). */
.helenasunday-bento__item:not(.helenasunday-bento__item--hero, .helenasunday-bento__item--wide) > .helenasunday-bento__sticker {
	top: calc(var(--wp--preset--spacing--10) * -1);
	right: calc(var(--wp--preset--spacing--40) * -1);
}

.helenasunday-bento__item--wide > .helenasunday-bento__sticker {
	top: calc(var(--wp--preset--spacing--10) * -1);
	rotate: 6deg;
}

/* El texto deja libre la esquina del sticker: las chips de la grande, el
   titular de las pequeñas y el texto de las anchas. */
.helenasunday-bento__item--hero:has(> .helenasunday-bento__sticker) > .helenasunday-chips {
	max-width: calc(100% - var(--helenasunday-sticker-w) + var(--wp--preset--spacing--40));
}

/* En las pequeñas no cabe texto al lado de la pegatina (un titular como
   «Colaboraciones» es más ancho que el hueco): el texto empieza debajo. Se
   reserva arriba el alto de la pegatina: ancho por proporción, más lo que
   añade el giro (sen 8° ≈ 0,14 del ancho), menos lo que se sale por arriba.
   El número sube a su esquina de siempre. */
.helenasunday-bento__item:not(.helenasunday-bento__item--hero, .helenasunday-bento__item--wide):has(> .helenasunday-bento__sticker) {
	--helenasunday-sticker-reserva: calc(var(--helenasunday-sticker-w) * (var(--helenasunday-sticker-proporcion) + 0.15) - var(--wp--preset--spacing--10));
	padding-block-start: var(--helenasunday-sticker-reserva);
}

/* El número, fuera del flujo en su esquina: si se quedara dentro, arrastraría
   el texto hacia arriba y anularía la reserva. El titular empuja con margen
   automático para que el texto siga abajo cuando sobre sitio. */
.helenasunday-bento__item:not(.helenasunday-bento__item--hero, .helenasunday-bento__item--wide):has(> .helenasunday-bento__sticker) > .helenasunday-bento__num {
	position: absolute;
	top: var(--wp--preset--spacing--40);
	left: var(--wp--preset--spacing--40);
}

.helenasunday-bento__item:not(.helenasunday-bento__item--hero, .helenasunday-bento__item--wide):has(> .helenasunday-bento__sticker) > h3 {
	margin-block-start: auto !important;
}

/* En las anchas el texto se queda a la izquierda de la pegatina: el ancho de
   la tarjeta menos lo que la pegatina entra en la caja de contenido: su
   ancho, menos lo que se sale por la derecha (spacing-20) y el relleno de
   la tarjeta (spacing-40), más un margen para el giro (spacing-20). */
.helenasunday-bento__item--wide:has(> .helenasunday-bento__sticker) > :is(h3, p:not(.helenasunday-bento__num)) {
	max-width: calc(100% - var(--helenasunday-sticker-w) + var(--wp--preset--spacing--40));
}

/* Una columna: las pegatinas altas se achican para no pisar el titular. */
@media (max-width: 781px) {
	.helenasunday-bento__item:has(> .helenasunday-bento__sticker--anuncios) { --helenasunday-sticker-w: 100px; }
	.helenasunday-bento__item:has(> .helenasunday-bento__sticker--belleza) { --helenasunday-sticker-w: 120px; }
}

@media (prefers-reduced-motion: no-preference) {
	.helenasunday-bento__item > .helenasunday-bento__sticker {
		transition: rotate 0.5s var(--helenasunday-spring), scale 0.5s var(--helenasunday-spring);
	}

	/* Al pasar por la tarjeta, la pegatina se endereza un poco y crece,
	   como si se despegara. */
	.helenasunday-bento__item:hover > .helenasunday-bento__sticker {
		rotate: 2deg;
		scale: 1.06;
	}
}

/* -------------------------------------------------------------------------
 * Bento apilado en móvil
 *
 * En una columna, cada tarjeta se pega arriba (sticky) un poco más abajo
 * que la anterior, así la de debajo asoma una franja, y la siguiente sube
 * por encima: mientras sube hay tiempo de leer la que está pegada. CSS puro:
 * funciona sin JS. Las secciones recortan con overflow-x: clip, que no crea
 * contenedor de scroll y no rompe el sticky (hidden sí lo haría).
 * ---------------------------------------------------------------------- */

@media (max-width: 781px) {
	/* Todas las tarjetas igual de altas (1fr en filas implícitas = la más
	   alta manda), para que la pila sea un taco (feedback del 26 sep). */
	.helenasunday-bento {
		gap: var(--wp--preset--spacing--40);
		grid-auto-rows: 1fr;
	}

	/* La pausa del final: una fila vacía más, del mismo alto que una tarjeta.
	   Con la última ya apilada, la pila sigue pegada mientras se recorre esa
	   fila y solo después sube entera. Tiene que ser una fila y no un
	   relleno: el sticky se limita a la caja de contenido del contenedor y
	   el relleno no cuenta. */
	.helenasunday-bento::after {
		content: "";
	}

	.helenasunday-bento > .helenasunday-bento__item {
		--helenasunday-pila-i: 0;
		position: sticky;
		top: calc(var(--helenasunday-cabecera-alto) + var(--wp--preset--spacing--20) + var(--helenasunday-pila-i) * var(--wp--preset--spacing--20));
		min-height: 16em;
		/* Un borde de sombra hacia arriba separa cada tarjeta de la que
		   tapa. */
		box-shadow: 0 -10px 24px color-mix(in srgb, var(--helenasunday-shadow-ink) 12%, transparent);
	}

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

	/* En móvil la pegatina se sale más por la esquina en lugar de
	   encogerse (el grosor de línea no depende del tamaño: SVG). */
	.helenasunday-bento__item > .helenasunday-bento__sticker,
	.helenasunday-bento__item--wide > .helenasunday-bento__sticker {
		top: calc(var(--wp--preset--spacing--40) * -1);
		right: calc(var(--wp--preset--spacing--40) * -1);
	}

	.helenasunday-bento__item--wide:has(> .helenasunday-bento__sticker) > :is(h3, p:not(.helenasunday-bento__num)) {
		max-width: none;
	}

	.helenasunday-bento__item:has(> .helenasunday-bento__sticker) > h3,
	.helenasunday-bento__item--hero:has(> .helenasunday-bento__sticker) > .helenasunday-chips {
		padding-inline-end: 34%;
		max-width: none;
	}

	/* En la pila la grande marca el alto de todas (1fr), y sus chips solo
	   repiten lo que dice el párrafo (Meta Ads, TikTok Ads, ganchos, 9:16).
	   Sin ellas la pila baja unos 130 px y las pequeñas dejan de tener medio
	   cuerpo vacío. */
	.helenasunday-bento__item--hero > .helenasunday-chips {
		display: none;
	}

	/* Sin chips, el párrafo sube hasta la altura del móvil de la pegatina:
	   un poco más de aire bajo el titular para que empiece por debajo. */
	.helenasunday-bento__item--hero:has(> .helenasunday-bento__sticker) > h3 {
		margin-block-end: var(--wp--preset--spacing--20) !important;
	}
}