/* ==========================================================================
   Aiseguros Seguros — intro + tarjetas anchas que se apilan al hacer scroll

   Referencias:
   - Intro: docs/referencias/servicios-intro.png (+ servicios-intro-img.png)
   - Apilado: docs/referencias/"Cards que se ocultan detras de otras…".png

   Mecánica del apilado: cada tarjeta es `position: sticky` y TODAS se pegan al
   mismo `top`, así la siguiente cubre por completo a la anterior. El JS añade
   un escalado + velo para dar sensación de profundidad. Se resuelve con sticky
   (no con el `pin` de ScrollTrigger) para no generar pin-spacers ni pelear con
   Lenis, y para no crear bloques contenedores que romperían el header fijo.
   ========================================================================== */

.aiseg-seg {
	position: relative;
	/* OJO: nada de `overflow: hidden` aquí. Un ancestro con overflow distinto de
	   `visible` se convierte en el contenedor de scroll del `position: sticky`
	   de las tarjetas y éstas dejan de pegarse (se van hacia arriba). */
	background-color: var(--aiseguros-color-white, #FFFFFF);
	padding: clamp(56px, 8vw, 96px) 0 clamp(40px, 6vw, 80px);
	font-family: 'Mona Sans', var(--aiseguros-font-body, sans-serif);

	/* Punto donde se pegan las tarjetas (alto del header fijo + aire). */
	--aiseg-seg-top: 118px;
}

.aiseg-seg__inner {
	position: relative;
	z-index: 1;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 32px;
}

/* ==========================================================================
   1. Intro
   ========================================================================== */

.aiseg-seg__intro {
	display: grid;
	grid-template-columns: 1fr 0.92fr;
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
	margin-bottom: clamp(28px, 4vw, 44px);
}

/* ---------- Texto ---------- */

.aiseg-seg__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--aiseguros-color-secondary, #4ab3e7);
	margin-bottom: 18px;
}

/* Línea corta antes del texto (como en la referencia). */
.aiseg-seg__eyebrow::before {
	content: '';
	width: 34px;
	height: 2px;
	background-color: currentColor;
	flex-shrink: 0;
}

.aiseg-seg__title {
	font-size: clamp(2rem, 3.6vw, 3rem);
	line-height: 1.06;
	letter-spacing: -0.025em;
	font-weight: 800;
	color: var(--aiseguros-color-primary, #075685);
	margin: 0 0 18px;
	max-width: 15ch;
}

.aiseg-seg__title-accent {
	color: var(--aiseguros-color-secondary, #4ab3e7);
}

.aiseg-seg__subtitle {
	font-size: clamp(1rem, 1.2vw, 1.08rem);
	line-height: 1.65;
	color: var(--aiseguros-color-body, #364e52);
	margin: 0 0 32px;
	max-width: 46ch;
}

.aiseg-seg__intro-actions {
	display: flex;
	align-items: center;
	gap: 26px;
	flex-wrap: wrap;
}

/* Enlace secundario con círculo (equivalente al "watch video"). */
.aiseg-seg__link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--aiseguros-color-primary, #075685);
	text-decoration: none;
	transition: color 0.25s ease;
}

.aiseg-seg__link-circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1.5px solid rgba(74, 179, 231, 0.5);
	color: var(--aiseguros-color-secondary, #4ab3e7);
	font-size: 13px;
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.aiseg-seg__link-circle i,
.aiseg-seg__link-circle svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.aiseg-seg__link:hover {
	color: var(--aiseguros-color-secondary, #4ab3e7);
}

.aiseg-seg__link:hover .aiseg-seg__link-circle {
	background-color: var(--aiseguros-color-secondary, #4ab3e7);
	color: var(--aiseguros-color-white, #FFFFFF);
	transform: scale(1.06);
}

/* ---------- Visual (foto + mancha + iconos flotantes) ---------- */

.aiseg-seg__intro-visual {
	position: relative;
	--aiseg-circle: 78%;
	min-height: 460px;
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
	/* El recorte sobresale por abajo para que la banda le corte los pies. */
	margin-bottom: -78px;
}

/* Mancha orgánica de marca detrás de la foto. */
.aiseg-seg__blob {
	position: absolute;
	/* Círculo perfecto: es la circunferencia sobre la que se alinean los iconos. */
	right: 0;
	bottom: 0;
	width: var(--aiseg-circle, 78%);
	aspect-ratio: 1 / 1;
	background: linear-gradient(160deg, rgba(74, 179, 231, 0.22), rgba(7, 86, 133, 0.12));
	border-radius: 50%;
	pointer-events: none;
}

/* La imagen del intro es un RECORTE con fondo transparente: se muestra
   completa (`contain`), sin máscara ni sombra de caja. La sombra va con
   `drop-shadow`, que sigue la silueta en vez del rectángulo. */
.aiseg-seg .aiseg-seg__intro-img {
	position: relative;
	z-index: 1;
	width: var(--aiseg-circle, 78%);
	max-height: 100%;
	object-fit: contain;
	object-position: center bottom;
	border-radius: 0;
	filter: drop-shadow(0 22px 34px rgba(4, 48, 74, 0.22));
}

/* Iconos flotantes en curva, sobre el borde izquierdo de la foto. */
/* Los iconos se posicionan sobre el borde del círculo. La caja de la lista
   coincide EXACTAMENTE con el círculo, y cada icono se coloca en un ángulo
   del arco izquierdo con coordenadas polares:
       x = 50% + 50%·cos(θ)   ·   y = 50% − 50%·sin(θ) */
.aiseg-seg__floats {
	position: absolute;
	z-index: 2;
	right: 0;
	bottom: 0;
	width: var(--aiseg-circle, 78%);
	aspect-ratio: 1 / 1;
	list-style: none;
	margin: 0;
	padding: 0;
	pointer-events: none;
}

.aiseg-seg__float {
	position: absolute;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background-color: var(--aiseguros-color-white, #FFFFFF);
	color: var(--aiseguros-color-secondary, #4ab3e7);
	font-size: 20px;
	/* Dos sombras en una: la caída bajo el icono y el halo azul alrededor.
	   Se usa `box-shadow` y no `outline` porque su extensión SÍ se puede animar
	   y siempre se dibuja POR FUERA, así que nunca tapa el círculo blanco. */
	box-shadow:
		0 10px 26px rgba(4, 48, 74, 0.16),
		0 0 0 8px rgba(74, 179, 231, 0.12);
	animation: aiseg-respirar 2s ease-in-out infinite;
}

/* Escalonado: con 4 iconos y un ciclo de 2s, un cuarto de ciclo entre cada uno
   reparte el efecto y evita que respiren todos a la vez. */
.aiseg-seg__float:nth-child(1) { animation-delay: 0s; }
.aiseg-seg__float:nth-child(2) { animation-delay: 0.5s; }
.aiseg-seg__float:nth-child(3) { animation-delay: 1s; }
.aiseg-seg__float:nth-child(4) { animation-delay: 1.5s; }

/* El halo se expande y se diluye; la sombra de caída no se toca para que el
   icono no parezca despegarse del fondo. */
@keyframes aiseg-respirar {
	0%,
	100% {
		box-shadow:
			0 10px 26px rgba(4, 48, 74, 0.16),
			0 0 0 8px rgba(74, 179, 231, 0.12);
	}

	50% {
		box-shadow:
			0 10px 26px rgba(4, 48, 74, 0.16),
			0 0 0 19px rgba(74, 179, 231, 0.02);
	}
}

@media (prefers-reduced-motion: reduce) {
	.aiseg-seg__float {
		animation: none;
	}
}

/* Ángulos 140° · 167° · 193° · 220° del arco izquierdo.
   Posiciones fijas: es lo que se ve si el navegador no soporta trigonometría en
   CSS o si no hay JS. */
.aiseg-seg__float:nth-child(1) { left: 11.7%; top: 17.9%; }
.aiseg-seg__float:nth-child(2) { left: 1.3%;  top: 38.8%; }
.aiseg-seg__float:nth-child(3) { left: 1.3%;  top: 61.2%; }
.aiseg-seg__float:nth-child(4) { left: 11.7%; top: 82.1%; }

/* --- Recorrido por la circunferencia al hacer scroll ----------------------
   El JS escribe UNA sola variable (`--aiseg-spin`) en la lista, y el CSS deriva
   de ahí las cuatro posiciones. Así cada frame es una única escritura de estilo
   en vez de ocho, y la fórmula polar vive en un solo sitio:
       x = 50% + 50%·cos(θ)      y = 50% − 50%·sin(θ)
   ------------------------------------------------------------------------- */
@supports (left: calc(50% + 50% * cos(45deg))) {
	/* ⚠️ El valor por defecto va en la LISTA, no en el icono: una declaración
	   propia del elemento gana sobre la heredada, así que ponerla en el icono
	   bloquearía la que el JS escribe en la lista. */
	.aiseg-seg__floats {
		--aiseg-spin: 0deg;
	}

	/* ⚠️ Hay que repetir los `nth-child`: las posiciones estáticas de respaldo
	   tienen especificidad 0-2-0 y le ganarían a un `.aiseg-seg__float` suelto
	   (0-1-0), por mucho que vaya después. */
	.aiseg-seg__float:nth-child(1),
	.aiseg-seg__float:nth-child(2),
	.aiseg-seg__float:nth-child(3),
	.aiseg-seg__float:nth-child(4) {
		--aiseg-ang: calc(var(--aiseg-base) + var(--aiseg-spin, 0deg));

		left: calc(50% + 50% * cos(var(--aiseg-ang)));
		top: calc(50% - 50% * sin(var(--aiseg-ang)));
	}

	.aiseg-seg__float:nth-child(1) { --aiseg-base: 140deg; }
	.aiseg-seg__float:nth-child(2) { --aiseg-base: 167deg; }
	.aiseg-seg__float:nth-child(3) { --aiseg-base: 193deg; }
	.aiseg-seg__float:nth-child(4) { --aiseg-base: 220deg; }
}

.aiseg-seg__float i,
.aiseg-seg__float svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* ==========================================================================
   2. Banda inferior del intro (dato + contacto)
   ========================================================================== */

.aiseg-seg__banner {
	/* Por encima del recorte: le tapa la parte inferior. */
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: stretch;
	gap: clamp(24px, 4vw, 56px);
	background-color: var(--aiseguros-color-dark, #04304a);
	border-radius: var(--aiseguros-border-radius-lg, 28px);
	overflow: hidden;
	margin-bottom: clamp(40px, 6vw, 72px);
}

.aiseg-seg__banner-stat {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	text-align: center;
	padding: clamp(26px, 3vw, 38px) clamp(28px, 3.4vw, 46px);
	background-color: var(--aiseguros-color-secondary, #4ab3e7);
	color: var(--aiseguros-color-white, #FFFFFF);
}

.aiseg-seg__banner-value {
	font-size: clamp(2rem, 3.2vw, 2.7rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
}

.aiseg-seg__banner-label {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.9;
}

.aiseg-seg__banner-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 14px;
	padding: clamp(24px, 3vw, 34px) clamp(24px, 3vw, 38px) clamp(24px, 3vw, 34px) 0;
	color: var(--aiseguros-color-white, #FFFFFF);
}

.aiseg-seg__banner-title {
	font-size: clamp(1.05rem, 1.5vw, 1.28rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0;
}

.aiseg-seg__banner-contact {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
	color: inherit;
	align-self: flex-start;
}

.aiseg-seg__banner-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	border-radius: 50%;
	background-color: var(--aiseguros-color-accent, #079239);
	color: var(--aiseguros-color-white, #FFFFFF);
	font-size: 17px;
	transition: transform 0.25s ease;
}

.aiseg-seg__banner-contact:hover .aiseg-seg__banner-icon {
	transform: scale(1.07);
}

.aiseg-seg__banner-icon i,
.aiseg-seg__banner-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.aiseg-seg__banner-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.aiseg-seg__banner-small {
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}

.aiseg-seg__banner-phone {
	font-size: clamp(1.1rem, 1.7vw, 1.4rem);
	font-weight: 700;
	letter-spacing: -0.02em;
}

/* ==========================================================================
   3. Pila de tarjetas
   ========================================================================== */

.aiseg-seg__stack {
	display: flex;
	flex-direction: column;
	/* Sin separación: la siguiente tarjeta entra directamente sobre la anterior
	   en vez de asomar antes por debajo. */
	gap: 0;
}

.aiseg-seg__card {
	position: sticky;
	/* Todas al MISMO top: la siguiente cubre por completo a la anterior. */
	top: var(--aiseg-seg-top);
	display: grid;
	grid-template-columns: 1fr 1fr;
	/* La tarjeta ocupa casi todo el alto visible, de modo que sólo se vea una
	   a la vez y las demás queden ocultas detrás. */
	min-height: min(520px, calc(100vh - var(--aiseg-seg-top) - 40px));
	overflow: hidden;
	border-radius: var(--aiseguros-border-radius-lg, 28px);
	background-color: var(--aiseguros-color-dark, #04304a);
	box-shadow: var(--aiseguros-shadow-lg, 0 28px 60px rgba(4, 48, 74, 0.14));
	/* El JS anima `scale`; el origen arriba hace que la tarjeta "se hunda". */
	transform-origin: center top;
}

/* El `will-change` sólo mientras la sección está en pantalla: son 7 tarjetas
   grandes y mantenerlas promocionadas todo el rato no compensa. La clase la
   pone y la quita el ScrollTrigger de `initStackedCards`. */
.aiseg-seg.is-activa .aiseg-seg__card {
	will-change: transform;
}

/* Velo que oscurece la tarjeta cuando otra se le pone encima (lo anima el JS). */
.aiseg-seg__dim {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	opacity: 0;
	background-color: rgba(4, 48, 74, 0.72);
}

/* ---------- Panel de texto ---------- */

.aiseg-seg__panel {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	padding: clamp(32px, 3.4vw, 52px);
	color: var(--aiseguros-color-white, #FFFFFF);
}

.aiseg-seg__panel::before {
	content: '';
	position: absolute;
	width: 420px;
	height: 420px;
	left: -160px;
	bottom: -200px;
	background: var(--aiseguros-glow-blue, radial-gradient(circle at center, rgba(74, 179, 231, 0.35) 0%, rgba(74, 179, 231, 0) 70%));
	pointer-events: none;
}

.aiseg-seg__icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background-color: rgba(74, 179, 231, 0.16);
	border: 1px solid rgba(74, 179, 231, 0.4);
	color: var(--aiseguros-color-secondary, #4ab3e7);
	font-size: 26px;
	margin-bottom: auto;
}

.aiseg-seg__icon i,
.aiseg-seg__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.aiseg-seg__num {
	position: relative;
	display: block;
	font-size: 0.95rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.5);
	margin: 28px 0 10px;
}

.aiseg-seg__name {
	position: relative;
	/* El tema pinta los encabezados en navy; aquí van sobre panel navy. */
	color: var(--aiseguros-color-white, #FFFFFF);
	font-size: clamp(1.5rem, 2.3vw, 2.05rem);
	line-height: 1.12;
	letter-spacing: -0.02em;
	font-weight: 800;
	margin: 0 0 14px;
}

.aiseg-seg__text {
	position: relative;
	font-size: 0.98rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.72);
	margin: 0 0 26px;
	max-width: 420px;
}

.aiseg-seg__cta {
	position: relative;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background-color: var(--aiseguros-color-accent, #079239);
	color: var(--aiseguros-color-white, #FFFFFF);
	padding: 6px 6px 6px 22px;
	border-radius: 999px;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: transform 0.3s ease;
}

.aiseg-seg__cta:hover {
	color: var(--aiseguros-color-white, #FFFFFF);
	transform: translateY(-2px);
}

.aiseg-seg__cta-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: var(--aiseguros-color-dark, #04304a);
	flex-shrink: 0;
}

.aiseg-seg__cta-icon i {
	font-size: 13px;
	transform: rotate(-45deg);
	transition: transform 0.3s ease;
}

.aiseg-seg__cta:hover .aiseg-seg__cta-icon i {
	transform: rotate(0deg);
}

/* ---------- Foto de la tarjeta ---------- */

.aiseg-seg__media {
	position: relative;
	overflow: hidden;
}

.aiseg-seg__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
	.aiseg-seg__intro {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.aiseg-seg__title,
	.aiseg-seg__subtitle {
		max-width: none;
	}

	.aiseg-seg__intro-visual {
		min-height: 380px;
		justify-content: center;
	}

	.aiseg-seg .aiseg-seg__intro-img {
		width: 70%;
	}

	.aiseg-seg__floats {
		left: 4%;
	}
}

@media (max-width: 900px) {
	.aiseg-seg {
		--aiseg-seg-top: 96px;
	}

	.aiseg-seg__card {
		grid-template-columns: 1fr;
		grid-template-rows: 220px auto;
		min-height: 0;
	}

	.aiseg-seg__stack {
		gap: 18px;
	}

	.aiseg-seg__media { grid-row: 1; }
	.aiseg-seg__panel { grid-row: 2; }

	.aiseg-seg__icon {
		width: 60px;
		height: 60px;
		font-size: 22px;
		margin-bottom: 20px;
	}

	.aiseg-seg__num { margin-top: 0; }

	.aiseg-seg__banner {
		grid-template-columns: 1fr;
	}

	.aiseg-seg__banner-body {
		padding: clamp(24px, 3vw, 34px);
	}
}

@media (max-width: 600px) {
	.aiseg-seg__inner {
		padding: 0 20px;
	}

	.aiseg-seg__intro-visual {
		min-height: 320px;
	}

	.aiseg-seg .aiseg-seg__intro-img {
		width: 82%;
	}

	.aiseg-seg__float {
		width: 50px;
		height: 50px;
		font-size: 17px;
		outline-width: 6px;
	}

	/* En pantallas pequeñas el apilado estorba: lista normal. */
	.aiseg-seg__card {
		position: static;
		transform: none !important;
	}

	.aiseg-seg__dim { display: none; }

	.aiseg-seg__cta {
		align-self: stretch;
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aiseg-seg__card {
		position: static;
		transform: none !important;
	}

	.aiseg-seg__dim { display: none; }

	.aiseg-seg__cta,
	.aiseg-seg__cta-icon i,
	.aiseg-seg__link-circle,
	.aiseg-seg__banner-icon {
		transition: none !important;
	}
}

/* ==========================================================================
   Móvil en HORIZONTAL: la tarjeta vuelve a dos columnas
   ==========================================================================

   A 844×390 la tarjeta medía 563px —el 144 % de la pantalla— porque el bloque
   de ≤900px la apila (foto arriba, panel abajo) y el ancho en horizontal supera
   los 600px que desactivan el apilado sticky. Resultado: tarjetas montándose
   unas sobre otras y ninguna legible entera.

   En horizontal sobra ancho y falta alto, así que se hace justo lo contrario:
   foto y panel LADO A LADO, que es como ya se ven en escritorio.
   ========================================================================== */

@media (max-height: 550px) and (orientation: landscape) {
	.aiseg-seg__card {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
		grid-template-rows: auto;
		min-height: 0;
		/* ⚠️ Sin apilado: en 390px de alto no hay recorrido para que funcione y
		   sólo consigue tapar unas tarjetas con otras. */
		position: static;
		transform: none !important;
	}

	.aiseg-seg__media { grid-row: 1; grid-column: 1; }
	.aiseg-seg__panel { grid-row: 1; grid-column: 2; padding: 22px 24px; }

	.aiseg-seg__dim { display: none; }

	.aiseg-seg__stack { gap: 14px; }

	.aiseg-seg__icon {
		width: 44px;
		height: 44px;
		font-size: 17px;
		margin-bottom: 10px;
	}

	.aiseg-seg__name { font-size: 1.15rem; }

	.aiseg-seg__text {
		font-size: 0.88rem;
		line-height: 1.45;
	}

	.aiseg-seg__num { margin-bottom: 2px; }
}