/*
 * Helena Sunday · pagina-portfolio.css
 *
 * Solo se carga en la página Portfolio (helenasunday_pagina_assets, en
 * helenasunday-secciones.php). Rediseño v2: hero con cifras del propio
 * portfolio, una sola rejilla de los 15 vídeos con filtros reales
 * (pagina-portfolio.js) y la llamada final.
 *
 * Misma disciplina que el resto del sitio: 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).
 * El único color literal es el «black» de la máscara del check, que no se
 * pinta: solo recorta.
 *
 * Ritmo de tonos: hero claro · vídeos oscuro · llamada final clara.
 */

:root {
	--helenasunday-portfolio-check: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5l10 -10'/></svg>");
}

/* -------------------------------------------------------------------------
 * 1. Hero: texto y cifras
 * ---------------------------------------------------------------------- */

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

.helenasunday-portfolio-hero .helenasunday-page-title {
	margin-block-start: var(--wp--preset--spacing--20);
}

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

/* Bento de cifras: la grande (vídeos) ocupa las dos filas de la izquierda;
   #publi y marcas se apilan a la derecha. */
.helenasunday-portfolio-cifras {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	grid-template-rows: repeat(2, minmax(13.5em, auto));
	gap: var(--wp--preset--spacing--30);
}

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

.helenasunday-portfolio-cifra {
	--helenasunday-sticker-w: 118px;
	position: relative;
	overflow: clip;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: var(--wp--preset--spacing--10);
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--helenasunday-shape-2xl);
}

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

.helenasunday-portfolio-cifra--grande {
	--helenasunday-sticker-w: 210px;
	grid-row: span 2;
}

/* El contador (interacciones.js) colorea la cifra con el acento del tono;
   sobre la tarjeta manda la tinta de la tarjeta (has-*-color del marcado),
   que es la que tiene contraste con su fondo. */
.helenasunday-portfolio-cifra .helenasunday-portfolio-cifra__num {
	color: inherit;
	font-size: clamp(
		var(--wp--preset--font-size--xx-large),
		4.4vw,
		calc(var(--wp--preset--font-size--xxx-large) * 1.1)
	);
	line-height: 0.95;
}

.helenasunday-portfolio-cifra--grande .helenasunday-portfolio-cifra__num {
	font-size: clamp(
		calc(var(--wp--preset--font-size--xxx-large) * 1.2),
		9vw,
		calc(var(--wp--preset--font-size--xxx-large) * 2.4)
	);
	letter-spacing: -0.05em;
}

.helenasunday-portfolio-cifra__label {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.35;
	max-width: 18em;
}

.helenasunday-portfolio-cifra--grande .helenasunday-portfolio-cifra__label {
	font-size: var(--wp--preset--font-size--medium);
	max-width: 14em;
}

/* Pegatina a sangre en la esquina, como en el bento de Inicio: se sale del
   borde y la tarjeta la recorta. Decorativa (alt vacío en el marcado). */
.helenasunday-portfolio-cifra > .helenasunday-portfolio-cifra__sticker {
	position: absolute;
	top: calc(var(--wp--preset--spacing--20) * -1);
	right: calc(var(--wp--preset--spacing--30) * -1);
	width: var(--helenasunday-sticker-w);
	max-width: none;
	z-index: -1;
	pointer-events: none;
	rotate: 9deg;
	transform-origin: 70% 30%;
}

.helenasunday-portfolio-cifra--grande > .helenasunday-portfolio-cifra__sticker {
	top: var(--wp--preset--spacing--30);
	right: calc(var(--wp--preset--spacing--20) * -1);
	rotate: -8deg;
}

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

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

	.helenasunday-portfolio-cifra > .helenasunday-portfolio-cifra__sticker {
		transition: rotate 0.5s var(--helenasunday-spring), scale 0.5s var(--helenasunday-spring);
	}

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

	/* La pegatina se endereza y crece, como si se despegara. */
	.helenasunday-portfolio-cifra:hover > .helenasunday-portfolio-cifra__sticker {
		rotate: 0deg;
		scale: 1.07;
	}
}

/* -------------------------------------------------------------------------
 * 2. Vídeos: cabecera y filtros
 * ---------------------------------------------------------------------- */

.helenasunday-portfolio-videos {
	/* Se resuelven aquí, con el tono de la sección, y así llegan ya
	   calculados a las tarjetas, que redefinen --helenasunday-tono-* con el
	   juego claro (tonos.css). */
	--helenasunday-portfolio-foco: var(--helenasunday-tono-acento);
	--helenasunday-portfolio-aro: color-mix(in srgb, var(--helenasunday-tono-texto) 14%, transparent);
}

.helenasunday-portfolio-videos__head {
	margin-block-end: var(--wp--preset--spacing--40);
}

/* Sin JS el contenedor lleva «hidden» y no se ve: las 15 tarjetas quedan a
   la vista y no hay botones que no hagan nada. El JS lo muestra. */
.helenasunday-portfolio-filtros[hidden] {
	display: none !important;
}

/* La barra se queda pegada bajo la cabecera mientras se recorre la rejilla:
   con 15 tarjetas (8 filas en móvil) cambiar de categoría no obliga a
   volver arriba. */
.helenasunday-portfolio-filtros {
	position: sticky;
	top: calc(var(--helenasunday-cabecera-alto) + var(--wp--preset--spacing--20));
	z-index: 5;
	margin-block: 0 var(--wp--preset--spacing--40) !important;
	pointer-events: none;
}

.helenasunday-portfolio-filtros__barra {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
}

/* La caja es el cristal (fondo, borde, sombra); la pista, dentro, es lo que
   se desplaza. Separadas para poder fundir los bordes de la pista cuando hay
   más filtros fuera de la vista sin recortar el borde ni la sombra. */
.helenasunday-portfolio-filtros__caja {
	max-width: 100%;
	box-sizing: border-box;
	border-radius: var(--helenasunday-shape-full);
	border: 1px solid var(--helenasunday-tono-borde-suave);
	/* Fondo opaco: sobre las portadas, un cristal translúcido dejaba pasar
	   rótulos blancos por detrás del texto. */
	background-color: var(--helenasunday-tono-fondo);
	box-shadow: 0 10px 30px color-mix(in srgb, var(--helenasunday-shadow-ink) 16%, transparent);
	overflow: hidden;
	pointer-events: auto;
}

.helenasunday-portfolio-filtros__pista {
	position: relative;
	display: flex;
	gap: 0.25em;
	box-sizing: border-box;
	padding: 0.3em;
	/* Si no caben (móvil), se desplazan en horizontal dentro de la pista,
	   nunca la página. */
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	font-size: var(--wp--preset--font-size--small);
}

/* Fundido del borde por el que quedan filtros (lo marca el JS). */
.helenasunday-portfolio-filtros__pista.hay-mas-fin {
	-webkit-mask-image: linear-gradient(to right, black calc(100% - 3.5em), transparent);
	mask-image: linear-gradient(to right, black calc(100% - 3.5em), transparent);
}

.helenasunday-portfolio-filtros__pista.hay-mas-inicio {
	-webkit-mask-image: linear-gradient(to right, transparent, black 3.5em);
	mask-image: linear-gradient(to right, transparent, black 3.5em);
}

.helenasunday-portfolio-filtros__pista.hay-mas-inicio.hay-mas-fin {
	-webkit-mask-image: linear-gradient(to right, transparent, black 3.5em, black calc(100% - 3.5em), transparent);
	mask-image: linear-gradient(to right, transparent, black 3.5em, black calc(100% - 3.5em), transparent);
}

.helenasunday-portfolio-filtros__pista::-webkit-scrollbar {
	display: none;
}

/* La pastilla que se desliza bajo el filtro activo. La crea el JS, que le
   da posición y ancho; va detrás de los botones. */
.helenasunday-portfolio-filtros__pastilla {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	border-radius: var(--helenasunday-shape-full);
	background-color: var(--helenasunday-tono-acento);
	pointer-events: none;
}

.helenasunday-portfolio-filtro {
	position: relative;
	z-index: 1;
	flex: none;
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 44px;
	margin: 0;
	padding: 0 1.1em;
	border: 0;
	border-radius: var(--helenasunday-shape-full);
	background: transparent;
	color: var(--helenasunday-tono-texto);
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

/* El check: sin marcar no ocupa sitio; al activarse crece con el muelle y
   se dibuja de izquierda a derecha, igual que las píldoras del formulario
   del media kit (formulario.css, que aquí no se carga). */
.helenasunday-portfolio-filtro::before {
	content: "";
	flex: none;
	width: 0;
	height: 1em;
	margin-inline-end: 0;
	background-color: currentColor;
	-webkit-mask: var(--helenasunday-portfolio-check) center / contain no-repeat;
	mask: var(--helenasunday-portfolio-check) center / contain no-repeat;
	clip-path: inset(0 100% 0 0);
}

.helenasunday-portfolio-filtro[aria-pressed="true"]::before {
	width: 1em;
	margin-inline-end: 0.4em;
	clip-path: inset(0 0 0 0);
}

/* Cuántos vídeos hay en cada categoría: una burbuja pequeña, decorativa (el
   número lo anuncia el estado de abajo). */
.helenasunday-portfolio-filtro__n {
	display: inline-grid;
	place-items: center;
	min-width: 1.6em;
	height: 1.6em;
	margin-inline-start: 0.5em;
	padding: 0 0.35em;
	box-sizing: border-box;
	border-radius: var(--helenasunday-shape-full);
	background-color: color-mix(in srgb, currentColor 14%, transparent);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.helenasunday-portfolio-filtro:hover {
	background-color: var(--helenasunday-tono-velo);
}

.helenasunday-portfolio-filtro[aria-pressed="true"] {
	color: var(--helenasunday-tono-sobre-acento);
}

/* Hasta que el JS coloca la pastilla (o si fallara), y en reposo, el activo
   se rellena por sí mismo con el mismo color que la pastilla. Mientras la
   pastilla viaja el JS le quita «is-asentado» para que no se vea el relleno
   antes de que llegue. */
.helenasunday-portfolio-filtros:not(.is-listo) .helenasunday-portfolio-filtro[aria-pressed="true"],
.helenasunday-portfolio-filtro[aria-pressed="true"].is-asentado {
	background-color: var(--helenasunday-tono-acento);
}

/* Foco: el anillo del tema es magenta, que sobre el oscuro se queda en
   2,9:1. Aquí va el acento del tono (rosa flúor en oscuro) y hacia dentro,
   porque la pista recorta lo que se sale. */
.helenasunday-portfolio-filtro:focus-visible {
	outline: 2px solid var(--helenasunday-tono-texto);
	outline-offset: -4px;
}

.helenasunday-portfolio-filtro[aria-pressed="true"]:focus-visible {
	outline-color: var(--helenasunday-tono-sobre-acento);
}

.helenasunday-portfolio-filtros__estado {
	margin: 0;
	padding: 0.35em 0.9em;
	border-radius: var(--helenasunday-shape-full);
	background-color: var(--helenasunday-tono-fondo);
	color: var(--helenasunday-tono-texto-suave);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	pointer-events: auto;
}

/* Mientras el JS mide la posición final no debe haber transiciones. */
.helenasunday-portfolio-filtros.is-quieto *,
.helenasunday-portfolio-filtros.is-quieto *::before {
	transition: none !important;
}

@media (prefers-reduced-motion: no-preference) {
	.helenasunday-portfolio-filtro {
		/* Sin transición de fondo: el relleno del activo aparece cuando la
		   pastilla ya está debajo y se va de golpe cuando esta sale; un
		   fundido dejaría un fantasma. */
		transition:
			color 0.2s var(--helenasunday-ease-effect) 0.06s,
			scale 0.4s var(--helenasunday-spring);
	}

	.helenasunday-portfolio-filtro::before {
		transition:
			width 0.5s var(--helenasunday-spring),
			margin-inline-end 0.5s var(--helenasunday-spring),
			clip-path 0.28s var(--helenasunday-ease-effect) 0.12s;
	}

	/* Pulsación: se hunde un poco y vuelve con el muelle. */
	.helenasunday-portfolio-filtro:active {
		scale: 0.95;
		transition-duration: 0.2s, 0.08s;
	}
}

/* -------------------------------------------------------------------------
 * 3. La rejilla
 * ---------------------------------------------------------------------- */

/* Cuatro columnas en escritorio, dos en móvil. Posicionada para que las
   tarjetas que salen puedan quedarse en su sitio (absolutas) mientras se
   desvanecen, y con las filas arriba: si la altura se anima, las filas no
   se estiran y la medida final del FLIP no cambia a mitad de camino. */
.helenasunday-seccion .helenasunday-portfolio-rejilla {
	position: relative;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-content: start;
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
}

.helenasunday-portfolio-rejilla > .helenasunday-video-card[hidden] {
	display: none !important;
}

.helenasunday-portfolio-rejilla > .helenasunday-video-card.is-saliendo {
	position: absolute;
	margin: 0 !important;
	z-index: 0;
	pointer-events: none;
}

/* Sobre el fondo oscuro la sombra (tinta clara en claro) no se ve y el pie
   de la tarjeta se funde con la sección: un aro finísimo del texto del tono
   marca el borde. Contorno y no sombra para no pisar las sombras de
   secciones.css al pasar el cursor. */
.helenasunday-portfolio-rejilla > .helenasunday-video-card {
	outline: 1px solid var(--helenasunday-portfolio-aro);
	outline-offset: 0;
}

/* Foco de la tarjeta: secciones.css usa el magenta, que sobre el oscuro no
   llega a 3:1. Mismo anillo con el acento del tono de la sección.
   (0,3,1) gana a (0,2,1) de secciones.css. */
.helenasunday-portfolio-rejilla > .helenasunday-video-card:has(a:focus-visible) {
	outline: 3px solid var(--helenasunday-portfolio-foco);
	outline-offset: 4px;
}

/* «Ver más vídeos»: botón nativo que el JS muestra solo si quedan tarjetas
   por pintar del filtro activo. Píldora de contorno sobre el tono de la
   sección, con un «+» dibujado con dos trazos que gira al pasar. */
.helenasunday-portfolio-mas[hidden] {
	display: none !important;
}

.helenasunday-portfolio-mas {
	display: flex;
	justify-content: center;
	margin-block-start: var(--wp--preset--spacing--50) !important;
}

.helenasunday-portfolio-mas__boton {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	min-height: 48px;
	margin: 0;
	padding: 0 1.5em 0 1.7em;
	border: 1px solid var(--helenasunday-tono-borde);
	border-radius: var(--helenasunday-shape-full);
	background: transparent;
	color: var(--helenasunday-tono-texto);
	font: inherit;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.helenasunday-portfolio-mas__icono {
	position: relative;
	width: 1em;
	height: 1em;
	flex: none;
}

.helenasunday-portfolio-mas__icono::before,
.helenasunday-portfolio-mas__icono::after {
	content: "";
	position: absolute;
	inset: 50% 0 auto;
	height: 2px;
	margin-block-start: -1px;
	border-radius: var(--helenasunday-shape-full);
	background-color: currentColor;
}

.helenasunday-portfolio-mas__icono::after {
	rotate: 90deg;
}

.helenasunday-portfolio-mas__boton:hover {
	background-color: var(--helenasunday-tono-acento);
	border-color: var(--helenasunday-tono-acento);
	color: var(--helenasunday-tono-sobre-acento);
}

.helenasunday-portfolio-mas__boton:focus-visible {
	outline: 2px solid var(--helenasunday-tono-acento);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
	.helenasunday-portfolio-mas__boton {
		transition:
			background-color 0.2s var(--helenasunday-ease-effect),
			border-color 0.2s var(--helenasunday-ease-effect),
			color 0.2s var(--helenasunday-ease-effect),
			scale 0.4s var(--helenasunday-spring);
	}

	.helenasunday-portfolio-mas__icono {
		transition: rotate 0.5s var(--helenasunday-spring);
	}

	.helenasunday-portfolio-mas__boton:hover .helenasunday-portfolio-mas__icono,
	.helenasunday-portfolio-mas__boton:focus-visible .helenasunday-portfolio-mas__icono {
		rotate: 90deg;
	}

	.helenasunday-portfolio-mas__boton:active {
		scale: 0.96;
		transition-duration: 0.2s, 0.2s, 0.2s, 0.08s;
	}
}

/* -------------------------------------------------------------------------
 * 4. Pantallas estrechas
 * ---------------------------------------------------------------------- */

@media (max-width: 1100px) {
	.helenasunday-portfolio-cifra--grande {
		--helenasunday-sticker-w: 170px;
	}
}

@media (max-width: 781px) {
	.helenasunday-portfolio-hero__cols {
		gap: var(--wp--preset--spacing--50);
	}

	.helenasunday-portfolio-cifras {
		grid-template-rows: none;
		grid-auto-rows: minmax(11.5em, auto);
	}

	.helenasunday-portfolio-cifra--grande {
		--helenasunday-sticker-w: 165px;
		grid-row: auto;
		grid-column: 1 / -1;
		min-height: 13em;
	}

	.helenasunday-portfolio-cifra--grande .helenasunday-portfolio-cifra__num {
		font-size: calc(var(--wp--preset--font-size--xxx-large) * 1.9);
	}

	.helenasunday-portfolio-cifra {
		--helenasunday-sticker-w: 96px;
		padding: var(--wp--preset--spacing--30);
	}

	.helenasunday-portfolio-cifra--grande > .helenasunday-portfolio-cifra__sticker {
		top: calc(var(--wp--preset--spacing--10) * -1);
		right: calc(var(--wp--preset--spacing--10) * -1);
	}

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

	/* En móvil la pista ocupa el ancho y el estado se queda solo para el
	   lector de pantalla: las burbujas ya dicen cuántos hay. */
	.helenasunday-portfolio-filtros__barra {
		display: block;
	}

	/* Un poco más juntas y sin burbuja: así asoma «Hogar y gadgets» bajo el
	   fundido y se ve que la pista sigue. El número lo sigue anunciando el
	   estado. */
	.helenasunday-portfolio-filtro {
		padding-inline: 0.9em;
	}

	.helenasunday-portfolio-filtro__n {
		display: none;
	}

	.helenasunday-portfolio-filtros__estado {
		position: absolute !important;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}
}

/* Antes de que llegue pagina-portfolio.js (que va diferido), la rejilla
 * pintaría las 42 tarjetas y después ocultaría 30: un salto de altura al
 * cargar. Con JS (la clase helenasunday-js la pone el tema en el <head>,
 * antes de pintar) se ocultan ya desde el CSS de la 13 en adelante, que son
 * justo las que el script oculta en «Todo». Cuando el script está listo
 * marca la rejilla con «is-lista» y desde ahí manda el atributo hidden. Sin
 * JS no hay clase y se ven todas. */
.helenasunday-js .helenasunday-portfolio-rejilla:not(.is-lista) > :nth-child(n+13) {
	display: none;
}