/* =================================================================
   Imagen Interactiva con Tabs
   Encabezado + tabs verticales (acordeón: la pestaña activa muestra
   descripción/botón, las demás solo el título) junto a una imagen o
   imagen interactiva. Desktop: columna fija mientras se hace scroll,
   las pestañas avanzan solas; también se puede hacer click. Mobile:
   acordeón normal, sin scroll-pin, imagen bajo la pestaña activa.
   ================================================================= */

.interactive-tabs {
	width: 100%;
	padding: 0 20px;
	box-sizing: border-box;
}

/* ── Fondo ──────────────────────────────────────────────────────── */
.interactive-tabs--bg-default {
	background-color: var(--wp--preset--color--bg);
}

.interactive-tabs--bg-light {
	background-color: var(--wp--preset--color--bg-secondary);
}

.interactive-tabs--bg-dark {
	background-color: var(--wp--preset--color--bg-dark);
}

.interactive-tabs--bg-dark .header-section__title,
.interactive-tabs--bg-dark .header-section__tagline {
	color: var(--wp--preset--color--white);
}

.interactive-tabs--bg-dark .header-section__description,
.interactive-tabs--bg-dark .header-section__description p {
	color: var(--wp--preset--color--white);
	opacity: 0.85;
}

/* ── Altura (padding vertical) ──────────────────────────────────── */
.interactive-tabs--py-sm {
	padding-block: var(--wp--preset--spacing--32);
}

.interactive-tabs--py-md {
	padding-block: var(--wp--preset--spacing--48);
}

.interactive-tabs--py-lg {
	padding-block: var(--wp--preset--spacing--64);
}

/* ── Notices ────────────────────────────────────────────────────── */
.interactive-tabs__preview-note,
.interactive-tabs__notice {
	padding: 1.5rem;
	background: var(--wp--preset--color--bg-secondary);
	border: 2px dashed rgba(0, 0, 0, 0.2);
	border-radius: 0.25rem;
	color: var(--wp--preset--color--text-muted);
	font-style: italic;
	text-align: center;
}

/* =================================================================
   Scroller: contenedor con la altura extra que activa el scroll-pin
   en desktop (un "trigger" de 100vh por pestaña). En mobile no pasa
   nada especial aquí — los triggers no ocupan espacio.
   ================================================================= */

.interactive-tabs__scroller {
	position: relative;
	z-index: 1;
	margin-top: var(--wp--preset--spacing--32);
}

.interactive-tabs__trigger {
	display: none;
}

/* =================================================================
   Split — mobile-first: acordeón vertical de una columna.

   En el HTML, <div class="interactive-tabs__nav"> envuelve las N
   pestañas — hace falta para desktop (columna aparte junto a la
   imagen). En mobile, "display: contents" hace que ese envoltorio
   desaparezca del árbol de caja: sus hijas (los tab-item) pasan a ser
   hijas flex directas de .split, hermanas de .interactive-tabs__panels,
   y el "order" (fijo por item, dinámico en el panel vía script.js) es
   lo que intercala la imagen justo debajo de la pestaña activa, sin
   mover nada en el DOM real.
   ================================================================= */

.interactive-tabs__split {
	display: flex;
	flex-direction: column;
}

.interactive-tabs__nav {
	display: contents;
}

.interactive-tabs__tab-item {
	order: var(--tab-order, 0);
	border-top: 1px solid var(--wp--preset--color--border);
}

.interactive-tabs__tab-item:last-of-type {
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.interactive-tabs__panels {
	order: 1; /* por defecto, justo tras el primer tab (order 0) */
	min-width: 0; /* evita que el panel empuje el ancho del grid/flex */
	margin-block: var(--wp--preset--spacing--24);
}

/* ── Botón de la pestaña (número + título) ─────────────────────── */
.interactive-tabs__tab {
	display: flex;
	align-items: center;
	gap: 1rem;
	width: 100%;
	padding: 1.25rem 0;
	border: 0;
	background: none;
	font-family: inherit;
	text-align: left;
	cursor: pointer;
}

.interactive-tabs__tab-title {
	font-size: var(--wp--preset--font-size--20);
	font-weight: var(--fw-semibold, 700);
	color: var(--wp--preset--color--text-heading);
	transition: color 150ms ease;
}

.interactive-tabs__tab-item.is-active .interactive-tabs__tab-title {
	color: var(--wp--preset--color--primary);
}

.interactive-tabs--bg-dark .interactive-tabs__tab-title {
	color: var(--wp--preset--color--white);
}

.interactive-tabs--bg-dark .interactive-tabs__tab-item.is-active .interactive-tabs__tab-title {
	opacity: 1;
}

/* ── Cuerpo de la pestaña activa (descripción + enlace) ─────────── */
.interactive-tabs__tab-body {
	padding: 0 0 1.5rem 0;
}

.interactive-tabs__tab-description {
	color: var(--wp--preset--color--text);
	line-height: 1.6;
	margin: 0 0 0.75rem;
}

/* El campo "Descripción" es wysiwyg: normaliza los márgenes de sus
   párrafos para que el bloque no herede el espaciado del editor. */
.interactive-tabs__tab-description > :first-child {
	margin-top: 0;
}

.interactive-tabs__tab-description > :last-child {
	margin-bottom: 0;
}

.interactive-tabs__tab-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--wp--preset--color--primary);
	font-weight: var(--fw-semibold, 700);
	text-decoration: none;
}

.interactive-tabs__tab-cta::after {
	content: "\2192"; /* → */
	transition: transform 150ms ease;
}

.interactive-tabs__tab-cta:hover::after {
	transform: translateX(3px);
}

.interactive-tabs--bg-dark .interactive-tabs__tab-description {
	color: var(--wp--preset--color--white);
	opacity: 0.85;
}

.interactive-tabs--bg-dark .interactive-tabs__tab-cta {
	color: var(--wp--preset--color--white);
}

/* ── Imagen / embed (columna derecha en desktop, inline en mobile) ── */
.interactive-tabs__panel {
	animation: interactive-tabs-fade 200ms ease;
}

@keyframes interactive-tabs-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

.interactive-tabs__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--8, 0.5rem);
}

/* "Cover": en mobile no hay una columna alta que rellenar, así que se
   recorta a una proporción fija en vez de a la altura de algo. */
.interactive-tabs__image--cover {
	aspect-ratio: 4 / 3;
	height: auto;
	object-fit: cover;
}

.interactive-tabs__embed {
	width: 100%;
}

#powerTip {
    background-color: var(--wp--preset--color--white)!important;
	color: black!important;
} 
#powerTip.n:before {
	border-top:10px solid rgba(255,255,255,1)!important;
}
#powerTip .box_view_html {
	color: black!important;
}
#powerTip .box_view_html p {
	margin: 0;
}

/* =================================================================
   Desktop (64rem+): columna fija con scroll-pin + 2 columnas con flex.

   Se descartó CSS Grid para este split: con grid-row fijo por
   nth-of-type() y el panel de imagen ocupando "grid-row: 1 / -1" al
   lado, el auto-sizing de las filas no se recalculaba de forma fiable
   cada vez que un tab-item cambiaba de alto al abrir/cerrar su cuerpo
   (comportamiento conocido de Grid con elementos que abarcan varias
   filas auto-dimensionadas). Con flexbox y "align-items: stretch" no
   hace falta calcular nada a mano: el nav (columna de tabs) y el panel
   de imagen son los dos únicos hijos flex de .split, y siempre se
   estiran al alto del más alto de los dos, se recalcula solo en cada
   cambio — sin nth-of-type, sin filas explícitas.
   ================================================================= */
@media (min-width: 64rem) {

	/* Cuánto hay que hacer scroll para pasar de una pestaña a la
	   siguiente. script.js activa cada pestaña en cuanto el trigger
	   correspondiente empieza a asomar por abajo, así que este alto ES
	   la distancia real entre pestaña y pestaña.

	   En "vh" (relativo al alto de la ventana) esto se probó varias
	   veces y el hueco seguía volviendo — el motivo: "vh" escala con el
	   alto REAL de la ventana del que prueba, no con lo que mide el
	   contenido. En un monitor grande con la ventana maximizada (fácil
	   llegar a 1300px+ de alto de página visible) cada "50vh" son ya
	   650px+, multiplicado por cada pestaña — bastaba una ventana más
	   alta que la usada aquí para pruebas para que el hueco "volviera"
	   aunque el CSS diga lo mismo. Con un valor fijo en rem, el
	   resultado es el mismo sea cual sea el alto de la ventana.

	   26rem (probado antes) resultó demasiado corto: un solo gesto de
	   scroll normal (rueda del ratón, un golpe de trackpad) cubre esa
	   distancia de sobra, y como el navegador solo revisa el estado
	   DESPUÉS del gesto (no a mitad de camino), se veían dos o tres
	   pestañas "saltadas" de golpe en una sola pasada de scroll — llegaba
	   directo de la 1 a la 4. Con más distancia, un scroll normal ya no
	   alcanza a cubrir varios tramos de una vez. */
	.interactive-tabs__trigger {
		display: block;
		height: 42rem;
	}

	/* El último trigger no necesita el mismo alto que el resto (una vez
	   activada la última pestaña no hay ninguna más a la que avanzar), pero
	   tampoco puede ser demasiado corto: con solo 6rem (probado antes) se
	   pasaba a la siguiente sección casi enseguida, sin dar tiempo a fijarse
	   en el contenido de esa última pestaña — dejaba de sentirse como un
	   paso más y se notaba como que "se escapaba" antes de tiempo. Con esto
	   queda un tramo de scroll más corto que los normales (no hace falta
	   esperar a que aparezca nada nuevo), pero con margen de sobra para
	   quedarse un rato en la última pestaña antes de soltar el bloque. */
	.interactive-tabs__trigger:last-child {
		height: 20rem;
	}

	/* Altura mínima para centrar el contenido en pantalla mientras está
	   fijo (ver "align-items: center" más abajo) sin que se quede pegado
	   arriba del todo — pero SIN llegar a ocupar la pantalla entera
	   cuando el contenido real es más bajo (el hueco vacío original).
	   "min(70vh, 40rem)": en una ventana baja/normal manda el 70vh (se
	   adapta); en una ventana muy alta manda el tope fijo de 40rem, así
	   no se dispara igual que pasaba con los triggers de arriba.

	   Se probó "top: 50%" + "transform: translateY(-50%)" (centra sin
	   necesitar una altura mínima) pero, en este bloque en concreto —
	   sticky anidado varias capas dentro de otro position:relative,
	   dentro de un contenedor MUY alto (el "scroller" mide varios miles
	   de píxeles por el scroll-pin) — provocaba un bug de pintado real:
	   el bloque anterior de la página se veía POR ENCIMA de este
	   contenido (confirmado con elementsFromPoint: el DOM/z-index
	   estaban bien, pero lo pintado en pantalla no correspondía). Quitar
	   el transform lo arregla. */
	/* Se fija a 120px del borde superior, no a 0: el header del sitio se
	   auto-muestra al hacer scroll hacia arriba y, con top:0, tapaba la
	   parte de arriba del contenido fijo. Esos 120px dejan sitio para el
	   header. */
	.interactive-tabs__sticky {
		position: sticky;
		top: 120px;
		display: flex;
		flex-direction: column;
		align-items: center;
		min-height: min(70vh, 40rem);
		z-index: 1;
	}

	.interactive-tabs__sticky > .container,
	.interactive-tabs__sticky > .interactive-tabs__split {
		width: 100%;
	}

	.interactive-tabs__split {
		display: flex;
		flex-direction: row;
		align-items: stretch;
		gap: var(--wp--preset--spacing--48);
	}

	/* En mobile es "display: contents" (ver arriba); aquí vuelve a ser
	   una caja real — la columna de la izquierda, con los tab-item
	   apilados dentro en columna. */
	.interactive-tabs__nav {
		display: flex;
		flex-direction: column;
		flex: 0 0 33.3333%;
		max-width: 33.3333%;
	}

	.interactive-tabs__panels {
		flex: 1 1 66.6666%;
		min-width: 0;
		margin-block: 0;
	}

	/* La cadena de alturas que "Cover" necesita para poder rellenar: el
	   panel ya se estira al alto del nav (align-items: stretch en
	   .split); .panel hereda esa altura, y la imagen --cover la rellena
	   recortando en vez de usar una proporción fija (solo tiene sentido
	   en la columna ancha de desktop). */
	.interactive-tabs__panels,
	.interactive-tabs__panel {
		height: 100%;
	}

	.interactive-tabs__image--cover {
		height: 100%;
		aspect-ratio: auto;
	}

	/* Sin .container (split_width: full) — deja un margen mínimo para que
	   números/títulos no toquen literalmente el borde del viewport. */
	.interactive-tabs__split--full {
		padding-inline: clamp(1.5rem, 5vw, 4rem);
	}
}

/* Reduced motion: el fundido de la imagen y el subrayado de flecha se
   quitan; el salto de pestaña sigue funcionando igual (scroll-pin
   incluido, es scroll real del navegador, no una animación nuestra). */
@media (prefers-reduced-motion: reduce) {
	.interactive-tabs__panel {
		animation: none;
	}
	.interactive-tabs__tab-cta::after {
		transition: none;
	}
}