/*
 * Widget «Equipo en acordeón» (estructura de nextnet.ai/our-team).
 *
 * Las clases del HTML (accordion, row, col-md-4, d-none, d-lg-block…) son las
 * del modelo y algunas coinciden con Bootstrap de Houzez, así que todo va bajo
 * .on3-acc (lista) y .on3-acc-img (foto de la persona) para no depender de Bootstrap ni tocar otras partes de la web.
 * Colores y tipografías se cambian desde los controles del widget.
 */

.on3-acc {
	--on3-acc-texto: var(--e-global-color-text, #232833);
	--on3-acc-texto-abierto: var(--e-a-color-black, #000);
	--on3-acc-suave: #5D7291;
	--on3-acc-linea: #DDE4EE;
	--on3-acc-acento: var(--e-global-color-5386da5, #FF5823);
	--on3-acc-ease: cubic-bezier(.65, 0, .35, 1);
	/* Margen de nombres, cruz y contenido respecto al borde (control del widget). */
	--on3-acc-lateral: clamp(24px, 5vw, 80px);
	width: 100%;
}

.on3-acc .container { max-width: none; width: 100%; margin: 0; padding: 0; }
.on3-acc .row { display: flex; flex-wrap: wrap; margin: 0; }
.on3-acc .row > [class*="col-"] { position: relative; min-width: 0; padding: 0; }
/* Utilidades de Bootstrap (Houzez) que el HTML del modelo trae con !important:
   dentro del widget mandan los espaciados de este archivo. */
.on3-acc .py-5 { padding-top: 0 !important; padding-bottom: 0 !important; }
.on3-acc .mb-4 { margin-bottom: 0 !important; }
.on3-acc .mt-4 { margin-top: 0 !important; }

/* Líneas de borde a borde de la pantalla; el contenido mantiene el margen de la
   página. border-image-outset pinta fuera de la caja sin crear scroll horizontal. */
.on3-acc .accordion {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--on3-acc-linea);
	border-image: linear-gradient(var(--on3-acc-linea), var(--on3-acc-linea)) 1 / 1px 0 0 0 / 0 100vw;
}
.on3-acc .accordion > li {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--on3-acc-linea);
	border-image: linear-gradient(var(--on3-acc-linea), var(--on3-acc-linea)) 1 / 0 0 1px 0 / 0 100vw;
}

/* Fila: nombre en grande y cargo; icono + a la derecha. */
.on3-acc .accordion-heading {
	position: relative;
	display: block;
	padding: 30px var(--on3-acc-lateral);
	color: var(--on3-acc-texto);
	text-decoration: none;
	cursor: pointer;
	transition: opacity .4s;
}
/* Como nextnet: tres columnas iguales. Nombre en la primera, cargo en la del medio
   y, al abrir, la descripción cae en esa misma columna (alineada con el cargo). */
.on3-acc .accordion-heading .row {
	display: grid !important; /* la fila trae .d-flex de Bootstrap con !important */
	margin: 0;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: center;
	column-gap: 24px;
}
/* Bootstrap de Houzez limita .col-md-4 al 33 %: aquí manda la rejilla. */
.on3-acc .accordion-heading .row > [class*="col-"] { flex: none; width: auto; max-width: none; }
.on3-acc .accordion-heading .col-md-4:first-child { grid-column: 1; text-align: left; }
.on3-acc .accordion-heading .col-md-4:nth-child(2) { grid-column: 2; justify-content: flex-start; text-align: left; }
.on3-acc .accordion-heading .h4 {
	margin: 0;
	font-family: "Alliance", var(--e-global-typography-primary-font-family, "Satoshi"), sans-serif;
	font-size: clamp(26px, 2.65vw, 40px);
	font-weight: 500;
	line-height: 1.15;
	color: var(--on3-acc-texto);
	transition: color .3s;
}
.on3-acc .accordion-heading .h4 strong { font-weight: inherit; }
.on3-acc li.open .accordion-heading .h4 { color: var(--on3-acc-texto-abierto); }
.on3-acc .on3-acc-cargo {
	margin: 0;
	font-family: var(--e-global-typography-primary-font-family, "Satoshi"), sans-serif;
	font-size: 17px;
	line-height: 1.4;
	color: var(--on3-acc-suave);
}

.on3-acc .on3-acc-icono {
	position: absolute;
	top: 50%;
	right: var(--on3-acc-lateral);
	width: 26px;
	height: 26px;
	margin-top: -13px;
	transition: transform .3s var(--on3-acc-ease);
}
.on3-acc .on3-acc-icono::before,
.on3-acc .on3-acc-icono::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	margin-top: -1px;
	background: var(--on3-acc-texto);
	transition: background-color .3s;
}
.on3-acc .on3-acc-icono::after { transform: rotate(90deg); }
.on3-acc li.open .on3-acc-icono { transform: rotate(45deg); }
.on3-acc .accordion-heading:hover .on3-acc-icono::before,
.on3-acc .accordion-heading:hover .on3-acc-icono::after,
.on3-acc li.open .on3-acc-icono::before,
.on3-acc li.open .on3-acc-icono::after { background: var(--on3-acc-acento); }
.on3-acc .accordion-heading:focus-visible { outline: 3px solid var(--on3-acc-acento); outline-offset: 4px; }


/* Desplegable: se abre con la altura real del contenido. */
.on3-acc .accordion-item {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition: grid-template-rows .5s var(--on3-acc-ease), opacity .4s;
}
.on3-acc li.open .accordion-item { grid-template-rows: 1fr; opacity: 1; }
.on3-acc .on3-acc-pliegue { min-height: 0; overflow: hidden; }
.on3-acc .accordion-item .row {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 24px;
	margin: 0;
	padding: 4px var(--on3-acc-lateral) 36px !important;
}
.on3-acc .accordion-item .row > [class*="col-"] { flex: none; width: auto; max-width: none; }
.on3-acc .accordion-item .order-md-1 { grid-column: 1; grid-row: 1; }
.on3-acc .accordion-item .order-md-2 { grid-column: 2; grid-row: 1; }
.on3-acc .accordion-item .order-md-3 { grid-column: 3; grid-row: 1; }

.on3-acc .on3-acc-desc {
	font-family: var(--e-global-typography-primary-font-family, "Satoshi"), sans-serif;
	font-size: 16px;
	line-height: 1.55;
	color: var(--on3-acc-suave);
	opacity: 1;
}
.on3-acc .on3-acc-desc p { margin: 0 0 .8em; }
.on3-acc .on3-acc-desc p:last-child { margin-bottom: 0; }

.on3-acc .on3-acc-enlaces { display: flex; flex-wrap: wrap; gap: 10px; }
.on3-acc .btn-hakkies {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	border: 1.5px solid var(--on3-acc-linea);
	border-radius: 999px;
	font-family: var(--e-global-typography-primary-font-family, "Satoshi"), sans-serif;
	font-size: 14px;
	line-height: 1.3;
	color: var(--on3-acc-texto);
	text-decoration: none;
	transition: border-color .3s, color .3s;
}
.on3-acc .btn-hakkies:hover,
.on3-acc .btn-hakkies:focus-visible { border-color: var(--on3-acc-acento); color: var(--on3-acc-acento); }

/* Foto dentro de la fila: solo sin ratón (táctil) o en pantallas pequeñas. */
.on3-acc .on3-acc-foto-movil { margin-bottom: 0; }
.on3-acc .on3-acc-foto-movil img { display: block; width: 100%; max-width: 280px; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: top center; }

@media (min-width: 1025px) and (hover: hover) {
	.on3-acc .on3-acc-foto-movil { display: none; }
}
/* En móvil no se muestra foto (ni en la fila ni aparte). */
@media (max-width: 767px) {
	.on3-acc .on3-acc-foto-movil { display: none !important; }
}

/* Tablet y móvil: nombre y cargo uno bajo otro; enlaces debajo de la descripción
   (en tres columnas los nombres no caben por debajo de escritorio). */
@media (max-width: 1024px) {
	.on3-acc .accordion-heading { padding: 22px calc(var(--on3-acc-lateral) + 32px) 22px var(--on3-acc-lateral); }
	.on3-acc .accordion-heading .row { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
	.on3-acc .accordion-heading .col-md-4:first-child,
	.on3-acc .accordion-heading .col-md-4:nth-child(2) { grid-column: 1; justify-content: flex-start; text-align: left; }
	.on3-acc .accordion-item .row { grid-template-columns: minmax(0, 1fr); padding: 4px var(--on3-acc-lateral) 28px !important; row-gap: 20px; }
	.on3-acc .accordion-item .order-md-3 { grid-column: 1; grid-row: 1; }
	.on3-acc .accordion-item .order-md-2 { grid-column: 1; grid-row: 2; }
	.on3-acc .accordion-item .order-md-1 { grid-column: 1; grid-row: 3; }
	.on3-acc .on3-acc-icono { width: 20px; height: 20px; margin-top: -10px; }
}

/* Foto de la persona (escritorio con ratón): fija en la tercera columna, entre la
   descripción y la cruz, dentro del acordeón (no sigue al ratón ni pisa nada).
   .on3-acc-img es el carril a lo alto de la lista y .overlay el marco, que el JS
   mueve solo en vertical siguiendo al ratón (como nextnet.ai), sin salir de la lista. Aparece con
   fundido y desenfoque, y cada foto nueva se descubre de abajo arriba encima de
   la anterior (JS, como en nextnet.ai). */
.on3-acc-img { display: none; }
@media (min-width: 1025px) and (hover: hover) {
	.on3-acc { position: relative; }
	.on3-acc-img {
		--on3-acc-foto: 280px;
		position: absolute;
		top: 0;
		bottom: 0;
		/* Inicio de la 3.ª columna (3 columnas con 24px de separación dentro del
		   margen lateral) hasta 50px antes de la cruz. */
		left: calc(var(--on3-acc-lateral) + (200% - 4 * var(--on3-acc-lateral) + 48px) / 3);
		right: calc(var(--on3-acc-lateral) + 50px);
		z-index: 2;
		display: block;
		pointer-events: none;
	}
	.on3-acc-img > .overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: min(var(--on3-acc-foto), 100%);
		margin: 0 auto;
		aspect-ratio: 3 / 4;
		overflow: hidden;
		opacity: 0;
		filter: blur(20px);
		transition: opacity .4s, filter .4s;
		will-change: opacity, transform;
	}
	.on3-acc-img.active > .overlay { opacity: 1; filter: blur(0); }
	.on3-acc-img .float-image-wrap { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; overflow: hidden; background: #F2F5F9; }
	/* Un solo marco con las fotos apiladas; el JS añade cada foto nueva encima y la
	   descubre de abajo arriba con clip-path. */
	.on3-acc-img .mouse-pos-list-image-inner { position: absolute; inset: 0; margin: 0; }
	.on3-acc-img .award-preview { position: absolute; inset: 0; display: block; overflow: hidden; }
	.on3-acc-img .award-preview img {
		position: absolute;
		inset: 0;
		width: 100%;
		max-width: none;
		height: 100%;
		object-fit: cover;
		object-position: top center;
		will-change: clip-path;
		filter: grayscale(100%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.on3-acc .accordion-item,
	.on3-acc .on3-acc-icono,
	.on3-acc-img > .overlay { transition: none; }
}