/**
 * Estilos del bloque `ipropanel/project-gallery` (desktop + mobile).
 *
 * Nodos: `535:10330` (desktop, dentro de `325:2010`) y el tramo superior de
 * `325:3399` (mobile: fondo `325:3400`/`325:3406`, título `325:3779`,
 * galería `325:4261`). La card es `535:10310` / `325:4261`. Breakpoint único
 * del proyecto: 768px, desktop-first.
 *
 * MÉTODO (corregido en S8.2). S8.1 midió este hero por conteo de píxeles
 * sobre el PNG porque `535:10330` "no se podía leer por MCP". Eso era cierto
 * solo de `get_metadata`, que devuelve el frame sin hijos; `get_design_context`
 * lo expande completo. Todos los valores de este archivo salen ahora del nodo.
 *
 * Desglose vertical desktop, contra los 1144,843 px del frame:
 *
 *   144 (padding-top) + 53,048 (caja de línea de la miga) + 32 (gap)
 *   + 107 (H1 a 2 líneas) + 32 (gap) + 711,843 (card) + 64 (padding-bottom)
 *   = 1143,89
 *
 * Los números de S8.1 (161 / 19,2 / 48 / 34 / 65) daban la misma posición en
 * pantalla —la miga en x=120, el H1 en y≈228 y la card en y≈368— porque los
 * errores se compensaban: repartían como padding y márgenes los 33,85 px que
 * el archivo pone como interlineado de la miga. Se reemplazan por el modelo
 * del nodo para que la auditoría de S8.5 mida contra lo mismo que el archivo.
 *
 * Mobile: el frame no pinta la miga (pregunta abierta #44), así que sus dos
 * separaciones no son un gap único. Los 24 px de H1 → card sí salen del nodo
 * (H1 termina en y=136, la card arranca en y=160); los 12 px de miga → H1 son
 * derivados. Total 581 px contra los 577 del frame: los 4 px son el precio de
 * meter la miga.
 */

.ipropanel-project-gallery {
	position: relative;
	/* SIN `overflow: hidden` desde S8.6. Lo tenía sin comentario que lo
	   justificara y recortaba la `shadow-modal` de la card, que proyecta 63px
	   hacia abajo: en mobile el `padding-bottom: 0` deja la card a ras del
	   borde de la sección y la sombra no se pintaba NUNCA; en desktop se
	   perdía la cola (proyecta 69,96 y hay 64 de padding). Hallazgo `D-66`.

	   Se quitó en vez de moverle el borde de recorte porque una sonda a 1280 y
	   414 mostró que no contenía nada: `scrollWidth == clientWidth`,
	   `scrollHeight == clientHeight` y ningún descendiente sale de la caja —
	   las tres capas de fondo (`__fondo`, `__overlay`, `::after`) son
	   `inset: 0` y la tira de miniaturas tiene su propio `overflow-x`. El alto
	   de la sección tampoco cambia al quitarlo en ninguno de los dos
	   breakpoints, así que no había margin-collapsing apoyado en el BFC.

	   Tampoco se replicó el par `padding-block` / `margin-block` negativo de
	   `related-projects` (S8.4): allí el recorte está en el contenedor de
	   scroll, pero acá estaría en la sección, que tiene fondo opaco y es
	   `position: relative` + `isolation: isolate` — o sea que pinta ENCIMA del
	   hermano siguiente, y estirarla 64px taparía el borde superior de
	   `project-info`. */

	/* El degradado horizontal va en `multiply` y tiene que mezclarse con la
	   foto, pero no con lo que haya debajo de la sección. */
	isolation: isolate;
	/* La sección es la primera de la página y el header es `fixed`, así que
	   su borde superior coincide con el del frame: los 144px del padding ya
	   incluyen los 88 que ocupa el header por encima. */
	padding-block: 144px 64px;
	background-color: var( --wp--preset--color--near-black );
}

.ipropanel-project-gallery__fondo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Degradado horizontal del nodo. Va en un elemento propio y no como segunda
   capa de `background-image` porque `background-blend-mode` mezcla las capas
   entre sí, no con la foto, que es un `<img>` aparte. */
.ipropanel-project-gallery__overlay {
	position: absolute;
	inset: 0;
	mix-blend-mode: multiply;
	background-image: linear-gradient(
		90deg,
		var( --wp--preset--color--near-black ) 0%,
		var( --wp--custom--color--overlay-scrim ) 54.536%,
		transparent 63.107%
	);
}

/* Degradado vertical, sin blend. Es un pseudo-elemento de la sección y no un
   hijo de `__overlay` porque `mix-blend-mode` agrupa al elemento con sus
   descendientes: dentro de la capa `multiply` este también se multiplicaría.
   Un tercer degradado del archivo (`#296780` con alpha 0 en todos sus stops)
   no pinta nada y se descarta — mismo caso que en `projects-hero` (S6.1). */
.ipropanel-project-gallery::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(
		180deg,
		transparent 57.997%,
		var( --wp--preset--color--near-black ) 95.211%
	);
}

.ipropanel-project-gallery__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	/* Gap uniforme del auto-layout de `535:10330`. */
	gap: 32px;
	max-width: var( --wp--style--global--wide-size );
	margin-inline: auto;
	padding-inline: var( --wp--preset--spacing--section-padding-inline );
}

.ipropanel-project-gallery__titulo {
	margin: 0;
	font-family: var( --wp--preset--font-family--montserrat );
	font-size: var( --wp--preset--font-size--heading-1-interna );
	line-height: 1.2;
	font-weight: 700;
	color: var( --wp--preset--color--neutral-white );
}

/* ---------------------------------------------------------------------- */
/* Card de galería (`535:10310` desktop / `325:4261` mobile)               */
/* ---------------------------------------------------------------------- */

.ipropanel-project-gallery__card {
	overflow: hidden;
	border: 0.888px solid var( --wp--custom--color--gray-input-border );
	border-radius: 26.652px;
	background-color: var( --wp--custom--color--card-compacta-bg );
	box-shadow: var( --wp--preset--shadow--shadow-galeria );
}

/* `aspect-ratio` y no un alto fijo de 585,688px: entre 768 y 1440 la card se
   estrecha, y el archivo solo define la proporción a 1280 (1038,224 de ancho
   interior por 585,688 de alto). Con alto fijo la imagen se deformaría.

   El primer término es **1038 y no 1038,224** (hallazgo `D-76` de S11.5c): el
   ancho interior no se calcula restando el borde declarado sino el que el
   navegador PINTA, y Chromium trunca `border-width` a píxeles CSS enteros —los
   0,888 de la card computan 1px, medido con deviceScaleFactor 1, 2 y 3—. Con
   1038,224 el visor cerraba 0,13px por debajo del nodo en desktop y **1,25px
   por encima en mobile**, donde el error del borde es mayor (1,18 → 1). O sea
   que la precisión de tres decimales del divisor producía menos exactitud, no
   más. */
.ipropanel-project-gallery__visor {
	position: relative;
	isolation: isolate;
	aspect-ratio: 1038 / 585.688;
	background-color: var( --wp--custom--color--galeria-imagen-bg );
}

.ipropanel-project-gallery__imagenes {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Las inactivas se ocultan con `visibility` y no con `display: none`: así
   conservan caja, el lazy-load del navegador puede resolverlas antes de que
   el visitante llegue a ellas, y quedan fuera del orden de tabulación y del
   árbol de accesibilidad. Sin transición: el archivo no define ninguna. */
.ipropanel-project-gallery__imagen {
	position: absolute;
	inset: 0;
	visibility: hidden;
	opacity: 0;
}

.ipropanel-project-gallery__imagen.is-active {
	visibility: visible;
	opacity: 1;
}

.ipropanel-project-gallery__imagen-src {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Viñeta lateral sobre la imagen principal (`535:10320`). Solo desktop: el
   frame mobile no la pinta. `transparent` en los stops intermedios en vez de
   `rgba(3,8,19,0)`: sobre un color tan oscuro la diferencia de interpolación
   no es perceptible. */
.ipropanel-project-gallery__vineta {
	position: absolute;
	inset: 0;
	pointer-events: none;
	mix-blend-mode: multiply;
	background-image: linear-gradient(
		270deg,
		var( --wp--custom--color--galeria-vineta-negra ) 0%,
		transparent 10.333%,
		transparent 89.085%,
		var( --wp--custom--color--galeria-vineta-oscura ) 100%
	);
}

/* `font: inherit` porque `<button>` no hereda tipografía: sin esto los dos
   botones de este bloque computan `Arial 13.3333px`, el default del navegador,
   y son los únicos de la página que no declaran la del tema (hallazgo `D-65`
   de S8.5). Hoy no se ve —llevan solo un `<img>` y su nombre accesible va en
   `aria-label`— pero el primer texto que se les ponga saldría en una fuente
   que el tema no declara.

   Va en los dos selectores y no en una regla base de `<button>`:
   `src/scss/base/_reset.scss` declara el invariante de que ahí vive
   únicamente `box-sizing`, y una regla global tocaría botones ya auditados y
   cerrados en S4.8. */
.ipropanel-project-gallery__flecha {
	position: absolute;
	top: 50%;
	z-index: 1;
	display: flex;
	font: inherit;
	align-items: center;
	justify-content: center;
	width: 49.92px;
	height: 49.92px;
	padding: 0;
	transform: translateY( -50% );
	border: 1.135px solid var( --wp--custom--color--galeria-flecha-border );
	border-radius: var( --wp--custom--border-radius--full );
	background-color: var( --wp--preset--color--primary-light-blue );
	cursor: pointer;
	transition: border-color var( --wp--custom--motion--duration-estado ) var( --wp--custom--motion--easing-estado );
}

.ipropanel-project-gallery__flecha--anterior {
	left: 17.77px;
}

.ipropanel-project-gallery__flecha--siguiente {
	right: 17.77px;
}

.ipropanel-project-gallery__flecha-icono {
	display: block;
	width: 24.036px;
	height: 24.036px;
}

/* El archivo reusa el mismo `arrow-left` rotado para "siguiente"
   (`556:1850`). */
.ipropanel-project-gallery__flecha--siguiente .ipropanel-project-gallery__flecha-icono {
	transform: rotate( 180deg );
}

/* DECISIÓN PROVISIONAL (S8.6, hallazgo `D-67`): el token
   `galeria-contador-bg` pasó de `rgba(0,0,0,0.5)` —el valor literal del nodo
   `535:10327`— a `0.55`. El contador va sobre la foto del proyecto, que sube
   el cliente: con el scrim al 50 % sobre una fachada blanca el fondo resuelve
   a `#808080` y el blanco cae a 3,95 : 1, bajo el 4,5 que pide WCAG 2.2 AA
   1.4.3 a este tamaño. Al 55 % el peor caso medido da 4,74 : 1 (el umbral
   exacto está en α ≥ 0,535; el resto es margen).

   Se subió el scrim y no se le dio `text-shadow` al texto —la otra salida de
   la pregunta #64— porque es determinista y no agrega una capa que el nodo no
   declara. Se revierte a 0,5 si `CD-F3` contesta otra cosa. */
.ipropanel-project-gallery__contador {
	position: absolute;
	right: 17.77px;
	bottom: 17.77px;
	z-index: 1;
	margin: 0;
	padding: 8.66px 17.77px;
	border-radius: 11.105px;
	background-color: var( --wp--custom--color--galeria-contador-bg );
	font-family: var( --wp--preset--font-family--inter );
	font-size: var( --wp--preset--font-size--galeria-contador );
	line-height: 22.21px;
	font-weight: 400;
	color: var( --wp--preset--color--neutral-white );
}

/* Ocultamiento ACCESIBLE de la región viva (`A-42`): fuera de pantalla pero
   dentro del árbol de accesibilidad. No puede ser `display: none` ni
   `visibility: hidden` — las dos sacan el elemento del árbol y una región viva
   fuera del árbol no anuncia, que es justamente el defecto que esto corrige.

   Scoped al bloque y no una utilidad global: hoy es el único consumidor del
   tema. Si aparece un segundo, gradúa a `src/scss/base/`. */
/* El ocultamiento accesible de esta región `aria-live` (hallazgo `A-42`) se
   declaraba acá porque el tema no tenía utilidad global. S11.3 la graduó a
   `src/scss/base/_utilidades.scss` al aparecer el segundo consumidor, tal
   como dejó anotado S8.2: el markup consume ahora
   `.ipropanel-visually-hidden` y esta regla desaparece. */

.ipropanel-project-gallery__tira {
	padding: 26.652px;
	background-color: var( --wp--custom--color--galeria-tira-bg );
}

/* El archivo dibuja 3 miniaturas y el campo `galeria` no tiene tope, así que
   la tira scrollea en vez de encoger la miniatura: el tamaño del nodo se
   conserva con cualquier cantidad (a 1280 entran 8 antes de scrollear).
   El `padding` y el `margin` negativo se cancelan —la fila arranca donde
   debe y el alto de la tira no cambia— pero corren el borde de recorte del
   `overflow` hacia afuera, que es lo que deja respirar al resplandor de la
   activa en desktop y a su escala en mobile. */
.ipropanel-project-gallery__miniaturas {
	display: flex;
	gap: 17.768px;
	margin: -8px -4px;
	padding: 8px 4px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	list-style: none;
}

.ipropanel-project-gallery__miniaturas::-webkit-scrollbar {
	display: none;
}

.ipropanel-project-gallery__miniaturas > li {
	flex: 0 0 106.61px;
	scroll-snap-align: center;
}

/* `font: inherit` por la misma razón que en `__flecha` (`D-65`). */
.ipropanel-project-gallery__miniatura {
	display: block;
	width: 100%;
	height: 71.073px;
	padding: 0;
	font: inherit;
	overflow: hidden;
	border: 1.777px solid var( --wp--custom--color--gray-input-border );
	border-radius: 11.105px;
	background: none;
	cursor: pointer;
	transition: border-color var( --wp--custom--motion--duration-estado ) var( --wp--custom--motion--easing-estado );
}

.ipropanel-project-gallery__miniatura.is-active {
	position: relative;
	z-index: 1;
	border-width: 2px;
	border-color: var( --wp--preset--color--secondary-extralight-blue );
	box-shadow: var( --wp--preset--shadow--shadow-galeria-thumb-activa );
}

/* Dentro de `hover: hover` por V20(c): en táctil el `:hover` queda pegado al
   último elemento tocado y la miniatura se vería seleccionada sin serlo. El
   archivo no define este estado — se extiende el sistema con el borde de la
   activa, que es el color que el propio diseño ya usa para esta tira. */
@media ( hover: hover ) {
	.ipropanel-project-gallery__miniatura:hover {
		border-color: var( --wp--preset--color--secondary-extralight-blue );
	}
}

/* `:active` de la miniatura (S11.1): lo que falta para cumplir
   `INTERACTIONS.md` §4 en táctil, que es justo el caso que la guarda de arriba
   deja sin respuesta. Fuera de la media query, por lo mismo. */
.ipropanel-project-gallery__miniatura:active {
	border-color: var( --wp--preset--color--secondary-extralight-blue );
}

/* Estado hover / `:active` de las flechas (S11.1, 2026-08-11) — DECISIÓN
   PROVISIONAL, depende de `CD-A5` (abierta).

   El archivo no define estado para las flechas. Mismo gesto translúcido →
   sólido que el FAQ (`Variant3`): el borde pasa de `galeria-flecha-border`
   (blanco 30 %) a blanco pleno. Se elige el BORDE y no el fondo porque el
   fondo es `primary-light-blue` y cambiarlo a amarillo —el hover del sistema
   de botones— haría pasar por un CTA lo que es un control de navegación de la
   galería. `neutral-white` es el color base del propio token a opacidad
   plena: no entra ningún valor nuevo. */
@media ( hover: hover ) {
	.ipropanel-project-gallery__flecha:hover {
		border-color: var( --wp--preset--color--neutral-white );
	}
}

.ipropanel-project-gallery__flecha:active {
	border-color: var( --wp--preset--color--neutral-white );
}

/* El `:focus-visible` propio de estos dos controles se retiró en S11.3: era
   el mismo `outline: 2px solid #00CFDA` que ahora declara UNA vez
   `src/scss/base/_focus.scss` para todo el tema, con el contorno oscuro que
   le faltaba para cumplir 1.4.11 sobre fondo claro. */

.ipropanel-project-gallery__miniatura-src {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media ( max-width: 767px ) {
	.ipropanel-project-gallery {
		padding-top: 80px;
		padding-bottom: 0;
	}

	/* El fondo del archivo (`325:3400`, 738px de alto) desborda la sección,
	   que termina en y=577 donde arranca "Descripción del Proyecto". Los
	   stops van en px desde el borde superior —las posiciones absolutas del
	   frame— y no en porcentaje: así los dos degradados quedan cortados a
	   media transición igual que en el archivo, sin depender del alto real
	   de la sección, que cambia con el largo del título. */
	.ipropanel-project-gallery::after {
		background-image:
			linear-gradient(
				180deg,
				transparent 426.9px,
				var( --wp--preset--color--near-black ) 700.4px
			),
			/* Banda extra que solo tiene mobile (`325:3409`, y=288..740). */
			linear-gradient(
				180deg,
				transparent 288px,
				var( --wp--preset--color--near-black ) 740px
			);
	}

	.ipropanel-project-gallery__inner {
		gap: 12px;
	}

	/* 12 del gap + 12 = los 24 px que el nodo pone entre el H1 y la card. */
	.ipropanel-project-gallery__card {
		margin-top: 12px;
		border-width: 1.18px;
		border-radius: var( --wp--custom--border-radius--xl );
		box-shadow: var( --wp--preset--shadow--shadow-modal );
	}

	/* 348 = 350 − 2×1, el borde que el navegador pinta, no los 2×1,18 que la
	   card declara: ver el docblock del `aspect-ratio` de desktop (`D-76`).
	   Con 346,64 el visor medía 321,25 contra los 320 de `325:4270`. */
	.ipropanel-project-gallery__visor {
		aspect-ratio: 348 / 320;
	}

	/* El frame mobile no pinta la viñeta lateral. */
	.ipropanel-project-gallery__vineta {
		display: none;
	}

	/* El frame mobile no pinta el contador; en su lugar la posición la
	   comunica la miniatura activa. Se imprime igual y se apaga acá porque
	   el bloque no sabe el ancho del cliente. */
	.ipropanel-project-gallery__contador {
		display: none;
	}

	/* Las flechas no están centradas como en desktop: el nodo las pone con
	   el borde superior en y=158,82 sobre una imagen de 320 (centro al 55%).
	   Se implementa literal y la diferencia queda registrada como pregunta. */
	.ipropanel-project-gallery__flecha {
		top: 49.63%;
		width: 34.08px;
		height: 34.08px;
		transform: none;
		border-width: 0.775px;
	}

	.ipropanel-project-gallery__flecha--anterior {
		left: 13.82px;
	}

	.ipropanel-project-gallery__flecha--siguiente {
		right: 15.74px;
	}

	.ipropanel-project-gallery__flecha-icono {
		width: 16.409px;
		height: 16.409px;
	}

	.ipropanel-project-gallery__tira {
		padding: 16px;
	}

	.ipropanel-project-gallery__miniaturas {
		gap: 16px;
	}

	/* Siguen siendo 3 por pantalla como en el nodo; con más, la tira
	   scrollea en vez de encogerlas. */
	.ipropanel-project-gallery__miniaturas > li {
		flex: 0 0 calc( ( 100% - 32px ) / 3 );
	}

	.ipropanel-project-gallery__miniatura {
		height: 63.992px;
		border-width: 1.18px;
		border-radius: var( --wp--custom--border-radius--md );
	}

	/* Mobile no marca la activa con resplandor sino agrandándola. El factor
	   es 1,05 y no el 1,07 que sugiere el ancho: el nodo dibuja la activa a
	   100,8×67,2 (`325:4266`) sobre un botón nominal de 96×64, y 96 no es el
	   ancho del hueco (94,21) sino el del componente antes de que el
	   `flex: 1` de la fila lo ajustara. El alto lo confirma: 67,2 / 64 =
	   1,05 exacto. */
	.ipropanel-project-gallery__miniatura.is-active {
		transform: scale( 1.05 );
		border-width: 1.239px;
		border-color: var( --wp--preset--color--badge-teal );
		border-radius: 10.5px;
		box-shadow: none;
	}

	@media ( hover: hover ) {
		.ipropanel-project-gallery__miniatura:hover {
			border-color: var( --wp--preset--color--badge-teal );
		}
	}
}