/**
 * Aiseguros — Comparativa
 *
 * Dos tarjetas enfrentadas al estilo de una tabla de precios, pero SIN precios:
 * lo que se compara son coberturas.
 *
 * Va sobre fondo navy a propósito. En la página de un seguro queda entre la
 * sección de contenido (blanca) y las preguntas frecuentes (surface, azul muy
 * claro); sin el contraste oscuro, tres bloques claros seguidos se leen como
 * uno solo y la comparativa se pierde.
 *
 * Las dos tarjetas son idénticas en peso visual. `.is-destacada` existe como
 * escape, pero por defecto no se usa: la agencia es independiente y no
 * recomienda un producto por encima del otro.
 */

.aiseg-cmp {
	position: relative;
	overflow: hidden;
	background-color: var(--aiseguros-color-dark, #04304a);
	padding: clamp(56px, 8vw, 104px) 0;
	font-family: 'Mona Sans', var(--aiseguros-font-body, sans-serif);
}

/* Halo del secundario para que el navy no quede plano (mismo recurso que el
   hero y la sección de blog). */
.aiseg-cmp::before {
	content: '';
	position: absolute;
	top: -220px;
	left: 50%;
	width: min(880px, 120vw);
	height: 520px;
	transform: translateX(-50%);
	background: var(--aiseguros-glow-blue, radial-gradient(circle at center, rgba(74, 179, 231, 0.35) 0%, rgba(74, 179, 231, 0) 70%));
	opacity: 0.55;
	pointer-events: none;
}

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

/* ==========================================================================
   1. Encabezado
   ========================================================================== */

.aiseg-cmp__head {
	text-align: center;
	max-width: 60ch;
	margin: 0 auto clamp(34px, 5vw, 54px);
}

.aiseg-cmp__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: 16px;
}

/* Líneas a ambos lados: el encabezado va centrado, no alineado a la izquierda
   como en el resto de secciones. */
.aiseg-cmp__eyebrow::before,
.aiseg-cmp__eyebrow::after {
	content: '';
	width: 28px;
	height: 2px;
	background-color: currentColor;
	flex-shrink: 0;
}

.aiseg-cmp__title {
	font-size: clamp(1.9rem, 3.4vw, 2.85rem);
	line-height: 1.08;
	letter-spacing: -0.025em;
	font-weight: 800;
	color: var(--aiseguros-color-white, #FFFFFF);
	margin: 0 0 16px;
}

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

.aiseg-cmp__subtitle {
	font-size: clamp(1rem, 1.3vw, 1.09rem);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.78);
	margin: 0;
}

/* ==========================================================================
   2. Las tarjetas
   ========================================================================== */

.aiseg-cmp__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px;
	align-items: stretch;
}

.aiseg-cmp__card {
	display: flex;
	flex-direction: column;
	background-color: var(--aiseguros-color-white, #FFFFFF);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--aiseguros-border-radius-card, 18px);
	padding: clamp(26px, 3.4vw, 38px);
	box-shadow: var(--aiseguros-shadow-md, 0 14px 40px rgba(4, 48, 74, 0.10));
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
	            box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) {
	.aiseg-cmp__card:hover {
		transform: translateY(-6px);
		box-shadow: var(--aiseguros-shadow-lg, 0 28px 60px rgba(4, 48, 74, 0.14));
	}
}

/* Escape para resaltar una columna. No se usa por defecto — ver la nota de
   cabecera del widget. */
.aiseg-cmp__card.is-destacada {
	border-color: var(--aiseguros-color-accent, #079239);
	box-shadow: 0 28px 60px rgba(4, 48, 74, 0.22);
}

.aiseg-cmp__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background-color: var(--aiseguros-color-surface, #eaf4fb);
	color: var(--aiseguros-color-primary, #075685);
	margin-bottom: 20px;
	flex-shrink: 0;
}

.aiseg-cmp__icon i,
.aiseg-cmp__icon svg {
	font-size: 1.4rem;
	width: 1.4rem;
	height: 1.4rem;
	fill: currentColor;
}

.aiseg-cmp__name {
	font-size: clamp(1.25rem, 1.9vw, 1.55rem);
	line-height: 1.2;
	letter-spacing: -0.02em;
	font-weight: 800;
	color: var(--aiseguros-color-primary, #075685);
	margin: 0 0 10px;
}

.aiseg-cmp__lema {
	font-size: 1rem;
	line-height: 1.55;
	color: var(--aiseguros-color-body, #364e52);
	margin: 0 0 22px;
	/* Iguala la altura del bloque entre tarjetas cuando una frase ocupa dos
	   líneas y la otra tres, para que las listas arranquen a la misma altura. */
	min-height: 3.1em;
}

/* Separador antes de los beneficios, como en la referencia. */
.aiseg-cmp__list {
	list-style: none;
	margin: 0;
	padding: 22px 0 0;
	border-top: 1px solid var(--aiseguros-color-border, #cfdde6);
	display: flex;
	flex-direction: column;
	gap: 13px;
}

.aiseg-cmp__list li {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	font-size: 0.97rem;
	line-height: 1.5;
	color: var(--aiseguros-color-body, #364e52);
}

.aiseg-cmp__list svg {
	flex-shrink: 0;
	/* Centra el check con la primera línea del texto, no con el bloque entero. */
	margin-top: 0.28em;
	color: var(--aiseguros-color-accent, #079239);
}

/* ==========================================================================
   3. Cierre
   ========================================================================== */

.aiseg-cmp__cierre {
	text-align: center;
	max-width: 62ch;
	margin: clamp(30px, 4vw, 44px) auto 0;
}

.aiseg-cmp__cierre p {
	font-size: 1.02rem;
	line-height: 1.62;
	color: rgba(255, 255, 255, 0.82);
	margin: 0 0 22px;
}

.aiseg-cmp__btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 14px 26px;
	border-radius: var(--aiseguros-border-radius-pill, 999px);
	background-color: var(--aiseguros-color-accent, #079239);
	color: var(--aiseguros-color-white, #FFFFFF);
	font-size: 0.97rem;
	font-weight: 700;
	text-decoration: none;
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
	            background-color 0.3s ease;
}

.aiseg-cmp__btn svg {
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) {
	.aiseg-cmp__btn:hover {
		background-color: #067d31;
		transform: translateY(-2px);
	}

	.aiseg-cmp__btn:hover svg {
		transform: translate(2px, -2px);
	}
}

.aiseg-cmp__btn:focus-visible {
	outline: 3px solid var(--aiseguros-color-secondary, #4ab3e7);
	outline-offset: 3px;
}

/* ==========================================================================
   4. Adaptación
   ========================================================================== */

/* Entre 720 y 900 las columnas se estrechan mucho: se recorta el relleno y la
   letra para que las viñetas no se partan en cuatro líneas. Va aquí, después de
   las reglas base, porque tiene su misma especificidad y sólo gana por orden. */
@media (min-width: 721px) and (max-width: 900px) {
	.aiseg-cmp__grid {
		gap: 16px;
	}

	.aiseg-cmp__card {
		padding: 24px 20px;
	}

	.aiseg-cmp__list li {
		font-size: 0.92rem;
		gap: 9px;
	}
}

/* El corte va en 720 y no en el ~860 habitual: una comparativa apilada deja de
   ser una comparativa, porque obliga a recordar la primera columna mientras se
   lee la segunda. En tablet vertical (768) las dos caben, apretadas pero
   legibles, y eso vale más que el ancho de línea. */
@media (max-width: 720px) {
	.aiseg-cmp__grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	/* Apiladas ya no compiten por altura, así que el relleno artificial de la
	   frase sobra y sólo deja un hueco. */
	.aiseg-cmp__lema {
		min-height: 0;
	}
}

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

	.aiseg-cmp__icon {
		width: 46px;
		height: 46px;
		border-radius: 12px;
		margin-bottom: 16px;
	}

	.aiseg-cmp__btn {
		width: 100%;
		justify-content: center;
	}
}

/* Móvil girado: hay poca altura, así que se recupera el lado a lado y se
   aprieta el aire vertical. Sin esto la sección obliga a varias pantallas de
   scroll para comparar dos columnas que caben juntas. */
@media (max-height: 550px) and (orientation: landscape) {
	.aiseg-cmp {
		padding: 44px 0;
	}

	.aiseg-cmp__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}

	.aiseg-cmp__head {
		margin-bottom: 26px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aiseg-cmp__card,
	.aiseg-cmp__btn,
	.aiseg-cmp__btn svg {
		transition: none;
	}
}