/**
 * Estilos del bloque `ipropanel/hero-slider` (desktop + mobile).
 *
 * Tokens de theme.json — sin colores/spacing/tipografía literales fuera
 * de lo que Figma (480:337 desktop, 625:4520 mobile) documenta como
 * valor propio del componente. Breakpoint único del proyecto: 768px,
 * desktop-first. Único token nuevo: `shadow-hero-badge` (sin equivalente
 * entre los 9 ya declarados, ver theme.json).
 *
 * El fondo con foto llena la sección (`object-fit: cover`); los 3
 * gradientes superpuestos que trae el nodo de Figma (efecto de
 * transición entre slides del propio archivo) se simplifican a un único
 * degradado por slide — decisión documentada en docs/TECHNICAL.md.
 */

.ipropanel-hero-slider {
	position: relative;
	overflow: hidden;
	aspect-ratio: 1280 / 832;
	min-height: 480px;
}

.ipropanel-hero-slider__slides {
	position: relative;
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Los tres tiempos de este bloque (0.6s del cross-fade, 0.3s del label y
   0.2s del dot) se quedan literales a propósito, fuera de los tokens
   `motion` de S11.1: esos tokens son la escala de la RESPUESTA A UN
   PUNTERO, y estos tres son la animación del avance automático del
   carrusel. Tokenizarlos juntos metería dos escalas distintas bajo un
   mismo nombre y el primer ajuste de una movería la otra. */
.ipropanel-hero-slider__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.6s ease;
}

.ipropanel-hero-slider__slide.is-active {
	opacity: 1;
	pointer-events: auto;
	z-index: 1;
}

.ipropanel-hero-slider__link {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
}

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

.ipropanel-hero-slider__overlay {
	position: absolute;
	inset: 0;
}

/* `RD-02` — «el lado izquierdo de las imágenes lleva gradación a negro».
   El degradado ya existía, pero en `overlay-scrim` (`rgba(3,8,19,0.6)`) y sin
   modo de mezcla, o sea mucho más flojo de lo que declara el archivo: los seis
   nodos de slide lo pintan con `#030813` OPACO y `mix-blend-mode: multiply`
   (`I476:203;480:344/342/346` y `I291:2950;625:4541/4543/4545`). De ahí el
   rótulo del PDF, «degradados a negros muy claros».

   **La extensión se fija en 70 % para todas las slides.** El archivo da seis
   valores distintos —54,8 / 61,0 / 70,4 en desktop y 74,5 / 54,8 / 69,2 en
   mobile— para lo que es un solo componente, y con **R1** (las slides las
   puebla el CMS) la regla tiene que ser una. Se toma 70 % porque es el valor
   vigente, cae dentro del rango declarado en los dos breakpoints y cubre el
   copy del hero, que llega a ~67 % del ancho. Que el archivo dé seis
   extensiones para el mismo componente es hallazgo para el diseñador. */
.ipropanel-hero-slider__overlay--lateral {
	mix-blend-mode: multiply;
	background-image: linear-gradient( to right, var( --wp--preset--color--near-black ) 0%, transparent 70% );
}

/* El inferior va SIN blend, como `I476:203;480:347` / `I291:2950;625:5634`. */
.ipropanel-hero-slider__overlay--inferior {
	background-image: linear-gradient( to top, var( --wp--preset--color--near-black ) 0%, transparent 35% );
}

.ipropanel-hero-slider__content {
	position: absolute;
	z-index: 2;
	top: 31%;
	left: var( --wp--preset--spacing--section-padding-inline );
	right: var( --wp--preset--spacing--section-padding-inline );
	max-width: 640px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var( --wp--preset--spacing--heading-content-gap );
}

.ipropanel-hero-slider__marca {
	display: block;
	width: auto;
	height: 58px;
}

.ipropanel-hero-slider__title {
	margin: 0;
	font-family: var( --wp--preset--font-family--montserrat );
	font-size: var( --wp--preset--font-size--heading-1 );
	line-height: 1.2;
	color: var( --wp--preset--color--neutral-white );
}

/* 2 pesos verificados vía MCP (Figma 480:337/625:4520): la primera
   línea del titular en bold, la segunda en peso regular — antes todo
   el titular se mostraba en bold 700 uniforme. */
.ipropanel-hero-slider__title-bold {
	font-weight: 700;
}

.ipropanel-hero-slider__title-regular {
	font-weight: 400;
}

/* Desktop: 1 sola fila de 6 (480:337 nodo 725:4288) — cada badge se
   reparte el ancho disponible y el texto envuelve a 2 líneas dentro de
   su propio ancho, en vez de forzar el badge a crecer con el texto. */
.ipropanel-hero-slider__badges {
	display: flex;
	flex-wrap: nowrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* `RD-03` — «deben ir sin fondo y separados por una línea».
   Los badges nunca tuvieron `background`. Lo que les daba aspecto de chip con
   fondo era la `box-shadow`: sobre un elemento transparente, `box-shadow` pinta
   igual la sombra del ÁREA de la caja, o sea un rectángulo redondeado oscuro
   detrás de cada uno. El archivo declara `drop-shadow`
   (`I476:203;725:4289`), que es filtro sobre el CONTENIDO —la sombra sigue el
   ícono y las letras, no la caja—. Cambia la propiedad, no el valor: el token
   `shadow-hero-badge` se reusa tal cual porque su sintaxis ya es la que
   `drop-shadow()` acepta. */
.ipropanel-hero-slider__badge {
	position: relative;
	display: flex;
	flex: 1 1 0;
	min-width: 0;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 13px 10px;
	border-radius: var( --wp--custom--border-radius--lg );
	filter: drop-shadow( var( --wp--preset--shadow--shadow-hero-badge ) );
}

/* El separador es el `Vector 1` de `I476:203;725:4295` y hermanos: trazo
   `white` PURO de 1,105 px y 64,653 px de alto — no el borde a la altura del
   chip que había, ni `border-light` (blanco al 20 %). Va como `::before` sobre
   `:not(:first-child)`, que es la misma forma que mobile ya usaba: con **R1**
   el número de características lo decide el CMS (0–6 según el field group), y
   así el separador nunca cuelga ni antes de la primera ni después de la
   última, sean las que sean. */
.ipropanel-hero-slider__badge:not( :first-child )::before {
	content: '';
	position: absolute;
	inset-inline-start: -0.55px;
	inset-block-start: 50%;
	transform: translateY( -50% );
	width: 1.105px;
	height: 64.653px;
	background-color: var( --wp--preset--color--neutral-white );
}

.ipropanel-hero-slider__badge-icon {
	display: block;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

.ipropanel-hero-slider__badge-text {
	font-family: var( --wp--preset--font-family--montserrat );
	/* El preset `body` (12 → 14) NO es el de este texto: el archivo pide
	   **11 px a 414 y 13,262 a 1280** (`I291:2950;725:3742` y
	   `I476:203;725:4294`), o sea ~1 px menos en los dos extremos. Se escribe
	   el `clamp()` literal —y no un preset nuevo— porque este par de valores
	   tiene un único consumidor en todo el tema y un preset con un solo
	   cliente es un token que nadie va a reutilizar y que hay que recalibrar
	   igual (S2.7 admite el literal si se anota por qué).
	   Interpolación entre los dos anchos del diseño:
	     414 px → 0,6199rem + 0,2612 × 4,14 = 11,000
	    1280 px → 0,6199rem + 0,2612 × 12,8 = 13,262 */
	font-size: clamp( 0.6875rem, 0.6199rem + 0.2612vw, 0.8289rem );
	/* Absoluto y no factor: el archivo declara 16,578 px en los DOS
	   breakpoints pese a que el cuerpo cambia de 11 a 13,262. Con un factor
	   el interlineado seguiría al cuerpo y en mobile daría 15. */
	line-height: 16.578px;
	font-weight: 700;
	color: var( --wp--preset--color--neutral-white );
	text-align: center;
}

.ipropanel-hero-slider__cta {
	position: relative;
	z-index: 3;
	height: 48px;
	padding: 12px 32px;
	border: 0;
	border-radius: var( --wp--custom--border-radius--full );
	background-color: var( --wp--preset--color--primary-light-blue );
	box-shadow: var( --wp--preset--shadow--shadow-lg );
	cursor: pointer;
	font-family: var( --wp--preset--font-family--montserrat );
	font-size: var( --wp--preset--font-size--boton );
	line-height: 24px;
	font-weight: 600;
	/* `RD-04` (S16.3, V22): blanco, que es lo que pinta el nodo. El par da
	   **3,00 : 1** contra el 4,5 que WCAG 2.2 AA 1.4.3 exige a 16px/600, o sea
	   que NO cumple; se aplica igual porque una instrucción escrita y posterior
	   del diseñador prevalece (V22), y el número queda registrado y vuelve a
	   consulta. Revierte `D-62`, que había puesto `neutral-black` (6,99 : 1).
	   Fundamento completo en `blocks/project-info/style.css`. */
	color: var( --wp--preset--color--neutral-white );
	transition: background-color var( --wp--custom--motion--duration-estado ) var( --wp--custom--motion--easing-estado ), color var( --wp--custom--motion--duration-estado ) var( --wp--custom--motion--easing-estado );
}

/* Verificado vía MCP contra Figma (component set "Button" 257:50,
   variant Primary/Hover 393:493): el hover no es una opacidad, cambia
   fondo a amarillo + texto a negro. `:active` cubre tablet/mobile
   (INTERACTIONS.md §4: sin hover táctil, mismo look al presionar).
   Guarda `@media ( hover: hover )` y reglas separadas por S11.1 — el porqué,
   en la forma canónica de `blocks/project-info/style.css`. */
@media ( hover: hover ) {
	.ipropanel-hero-slider__cta:hover {
		background-color: var( --wp--preset--color--primary-yellow );
		color: var( --wp--preset--color--neutral-black );
	}
}

.ipropanel-hero-slider__cta:active {
	background-color: var( --wp--preset--color--primary-yellow );
	color: var( --wp--preset--color--neutral-black );
}

/* El caption vive dentro de cada `<li>` de slide, así que durante el
   crossfade de 0.6s las dos slides están parcialmente visibles y sus dos
   labels se superponen — texto sobre texto, ilegible (hallazgo A-10). Se
   encadena la opacidad en vez de superponerla: el label saliente se va en
   0.3s y el entrante aparece recién cuando el saliente ya desapareció.
   No se saca el label del slide para no tocar el markup ni el JS: el
   texto sigue asociado a su slide, que es lo correcto semánticamente. */
.ipropanel-hero-slider__label {
	position: absolute;
	z-index: 2;
	opacity: 0;
	transition: opacity 0.3s ease;
	/* Única excepción documentada a la grilla: el caption va a 40px del
	   borde del FRAME, por fuera del contenedor de 1040 (hallazgo D-11).
	   Por eso no usa `section-padding-inline` como el resto. */
	right: 40px;
	bottom: 30px;
	margin: 0;
	max-width: 45%;
	font-family: var( --wp--preset--font-family--montserrat );
	font-size: 12px;
	/* 22 px, no `1.4`. El archivo declara el interlineado del caption en
	   absoluto y con el MISMO valor en los dos breakpoints
	   (`I476:203;480:352` y `I291:2950;625:4552`), aunque el cuerpo sea 12 en
	   ambos: 12 × 1,4 daba 16,8 y el caption quedaba 5,2 px más apretado que
	   en el diseño. Es interlineado 1,83, que no es ninguna de las razones
	   que usa el resto del tema — por eso va en absoluto y no como factor. */
	line-height: 22px;
	font-weight: 700;
	color: var( --wp--preset--color--neutral-white );
	text-align: right;
}

.ipropanel-hero-slider__slide.is-active .ipropanel-hero-slider__label {
	opacity: 1;
	transition-delay: 0.3s;
}

/* Centrado en desktop, verificado vía MCP contra Figma 480:337
   (contenedor posicionado `left: 50%` + `translateX(-50%)`) — antes
   heredaba el padding lateral de la sección y quedaba a la izquierda. */
.ipropanel-hero-slider__dots {
	position: absolute;
	z-index: 2;
	left: 50%;
	transform: translateX( -50% );
	bottom: 30px;
	display: flex;
	align-items: center;
	gap: 22px;
}

/* El dot MIDE 24x24 y se VE de 15 (S11.3).
   WCAG 2.2 AA 2.5.8 pide 24x24 de objetivo táctil y el dot daba 15x15 —el
   punto más pequeño del sitio y, en mobile, el único control del hero—. La
   caja crece a 24 y un margen negativo de 4,5 devuelve el espacio que la
   caja se acaba de tomar, así que los centros no se mueven y el contenedor
   mide lo mismo: 3 x 15 + 2 x 22 = 89. Verificado midiendo dots y contenedor
   en los dos breakpoints.
   Con el gap de 22 las áreas quedan separadas 13px: cumplen sin solaparse,
   que es lo que haría que un dot robara el toque del vecino. */
.ipropanel-hero-slider__dot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin: -4.5px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: transparent;
	cursor: pointer;
}

.ipropanel-hero-slider__dot::before {
	content: '';
	display: block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: var( --wp--preset--color--neutral-white );
	opacity: 0.6;
	transition: all 0.2s ease;
}

/* Color del dot activo, verificado vía MCP: #00A5AE (preset
   `primary-light-blue`) en desktop (480:337); antes se quedaba en el
   blanco del dot inactivo (solo cambiaba de tamaño, no de color). */
.ipropanel-hero-slider__dot.is-active::before {
	width: 15px;
	height: 15px;
	margin: 0;
	opacity: 1;
	background-color: var( --wp--preset--color--primary-light-blue );
}

/* Estado hover / `:active` del dot INACTIVO (S11.1, 2026-08-11) — DECISIÓN
   PROVISIONAL, depende de `CD-A5` (abierta). `INTERACTIONS.md` §4 lo listaba
   como "pendiente de verificar"; verificado: el archivo no lo define.

   Sube la opacidad de 0,6 a 1 y NO toca ni el tamaño ni el color. Los dos son
   la señal del dot activo (15px y teal contra 7px y blanco), así que
   moverlos aquí haría que pasar el puntero pareciera haber cambiado de slide.
   El `transition: all` que el dot ya declara cubre este cambio.

   `.is-active` gana por especificidad (clase + clase contra clase +
   pseudo-clase, empate resuelto por orden de aparición, y esta regla va
   después), pero al declarar solo `opacity` —que el activo ya tiene en 1— el
   resultado es idéntico y el dot seleccionado no se mueve. */
@media ( hover: hover ) {
	.ipropanel-hero-slider__dot:hover::before {
		opacity: 1;
	}
}

.ipropanel-hero-slider__dot:active::before {
	opacity: 1;
}

@media ( max-width: 767px ) {
	.ipropanel-hero-slider {
		aspect-ratio: 414 / 736;
		min-height: 600px;
	}

	.ipropanel-hero-slider__content {
		top: 21%;
		max-width: none;
		gap: var( --wp--preset--spacing--card-gap );
	}

	.ipropanel-hero-slider__marca {
		height: 40px;
	}

	.ipropanel-hero-slider__title {
		font-size: var( --wp--preset--font-size--heading-2 );
		/* `A-26`: 32px literal, no el 1.2 heredado del desktop. Los dos
		   tramos del titular en `I291:2950;625:5840` (la instancia del frame
		   de página, no el componente del canvas) declaran `leading-[32px]`
		   sobre `text-[24px]`. Con el 1.2 daba 28,8 — y ojo: **la
		   recalibración de DT.6 lo alejó**, porque antes el font-size era
		   24,586 y daba 29,5. Este hallazgo había que medirlo después de
		   DT.6, no antes. */
		line-height: 32px;
	}

	/* Mobile mantiene los dots a la izquierda (625:4520, ya coincidía
	   con el local) — solo se deshace el centrado agregado para
	   desktop. El color activo en mobile es #00CFDA (preset
	   `secondary-extralight-blue`), distinto al de desktop (#00A5AE):
	   confirmado en el asset SVG exportado del nodo, no se unifican. */
	.ipropanel-hero-slider__dots {
		left: var( --wp--preset--spacing--section-padding-inline );
		transform: none;
		/* `Frame 14` (625:4548): activo 15px en x=0, inactivos 7px en
		   x=47 y x=86 → 32px de hueco visible entre elementos y un pitch
		   de ~43 entre centros. Los dots del tema son cajas de 15px (área
		   táctil) con el punto inactivo dibujado por `::before`, así que
		   el gap que reproduce ese pitch es 28, no 22 (hallazgo A-30). */
		gap: 28px;
	}

	.ipropanel-hero-slider__dot.is-active::before {
		background-color: var( --wp--preset--color--secondary-extralight-blue );
	}

	/* Mobile: grid 3 columnas × 2 filas (625:4520 nodos 725:3735/725:3761)
	   — estructura distinta a la fila única de 6 de desktop, no solo un
	   wrap del mismo flex. Valores leídos vía MCP del `Container`
	   725:3735: gap 8 entre filas y 9 entre columnas, badge con
	   `px-8 py-13.262`, `gap 6.631`, `rounded-15.472` y drop shadow
	   propia. Los divisores solo van entre columnas de una misma fila
	   (2ª y 3ª columna), no se arrastran entre filas. */
	.ipropanel-hero-slider__badges {
		display: grid;
		grid-template-columns: repeat( 3, 1fr );
		gap: 8px 9px;
	}

	.ipropanel-hero-slider__badge {
		position: relative;
		flex: initial;
		gap: 6.631px;
		padding: 13.262px 8px;
		border-radius: 15.472px;
		/* `RD-03`: mismo cambio que en desktop —`drop-shadow` y no
		   `box-shadow`—, con el token propio de 414. El archivo declara
		   `drop-shadow` también acá (`I291:2950;725:3737`). */
		filter: drop-shadow( var( --wp--preset--shadow--shadow-hero-badge-mobile ) );
	}

	/* La regla de desktop pone separador en todo badge que no sea el primero.
	   Acá la fila es una grilla de 3, así que el primero de CADA fila tampoco
	   lleva: se anula para `3n + 1`. Sin esto el badge 4 —primero de la
	   segunda fila— arrastraría una línea colgando a su izquierda, que es
	   justo lo que el número variable de características del CMS (**R1**,
	   0–6) hace fácil de destapar. */
	.ipropanel-hero-slider__badge:nth-child( 3n + 1 )::before {
		content: none;
	}

	/* Separador: en el archivo NO es un borde del badge sino un `Vector`
	   independiente entre columnas — una línea blanca sólida de 1.1px
	   (`inset-[0_-0.55px]` sobre un nodo de ancho 0) y **64.653px de
	   alto**, centrada verticalmente, que no llega a los bordes del
	   badge. Con `border-left` la línea ocupaba todo el alto y usaba
	   `border-light` (blanco 20 %) en vez de blanco sólido, lo que hacía
	   leer el bloque como "tarjetas sueltas" en vez de "fila dividida"
	   (hallazgo A-08/C-2). Se resuelve con un pseudo-elemento centrado en
	   el gap de 9px, sin tocar el markup. */
	.ipropanel-hero-slider__badge:not( :nth-child( 3n + 1 ) )::before {
		content: '';
		position: absolute;
		left: -4.5px;
		top: 50%;
		transform: translateY( -50% );
		width: 1.1px;
		height: 64.653px;
		background-color: var( --wp--preset--color--neutral-white );
	}

	.ipropanel-hero-slider__cta {
		width: 100%;
	}

	/* `A-46`: 241 px, no `60%`. El 60 % de 414 son 248,4 y con el título de
	   slide más largo de la semilla el caption llegaba hasta `x = 126`,
	   **pisando los dots por 7 px** — los dots terminan en 133. No se veía en
	   toda carga: el label es el de la slide activa y el hero rota cada 3 s,
	   así que el defecto solo aparecía con una de las tres.
	   El 241 sale del archivo y no de tantear: `I291:2950;625:4547` es una
	   fila de **334 px** desde `left: 44` con `justify-between`, y los dots
	   ocupan 15 + 32 + 7 + 32 + 7 = 93. 334 − 93 = **241**, que es
	   exactamente el hueco que el diseño le reserva al caption. */
	.ipropanel-hero-slider__label {
		max-width: 241px;
	}
}