/* ==========================================================================
   Aiseguros — Quiénes somos

   Tres bloques con fondos alternos: intro (blanco) → misión/visión (navy) →
   valores (superficie suave). El navy en medio corta la página y hace de
   descanso visual antes de los valores.
   ========================================================================== */

.aiseg-nos {
	position: relative;
}

.aiseg-nos__intro-inner,
.aiseg-nos__mv-inner,
.aiseg-nos__values-inner {
	max-width: 1280px;
	margin-inline: auto;
}

.aiseg-nos__eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
	color: var(--aiseguros-color-secondary-ink, #12719f);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.aiseg-nos__eyebrow::before {
	content: "";
	width: 38px;
	height: 2px;
	background-color: currentColor;
}

.aiseg-nos__title-accent {
	color: var(--aiseguros-color-secondary-ink, #12719f);
}

/* ==========================================================================
   1. Introducción
   ========================================================================== */

.aiseg-nos__intro {
	padding: clamp(56px, 8vw, 104px) clamp(16px, 4vw, 40px);
	background-color: var(--aiseguros-color-white, #FFFFFF);
}

.aiseg-nos__intro-inner {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(28px, 5vw, 72px);
}

.aiseg-nos .aiseg-nos__title {
	margin: 0;
	color: var(--aiseguros-color-primary, #075685);
	font-size: clamp(1.9rem, 3.8vw, 3rem);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.aiseg-nos__copy {
	margin-top: clamp(18px, 2.4vw, 26px);
}

.aiseg-nos__copy p {
	margin: 0 0 16px;
	color: var(--aiseguros-color-body, #364e52);
	font-size: clamp(0.98rem, 1.2vw, 1.05rem);
	line-height: 1.7;
	text-wrap: pretty;
}

.aiseg-nos__copy p:last-child {
	margin-bottom: 0;
}

/* --- Imagen con dato destacado ------------------------------------------ */

.aiseg-nos__media {
	position: relative;
}

.aiseg-nos .aiseg-nos__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 5 / 4;
	object-fit: cover;
	/* Elementor fuerza `.elementor img { border-radius: 0 }` (0-1-1): hace falta
	   más especificidad para redondearla. */
	border-radius: var(--aiseguros-border-radius-lg, 28px);
	box-shadow: var(--aiseguros-shadow-lg, 0 28px 60px rgba(4, 48, 74, 0.14));
}

.aiseg-nos__badge {
	position: absolute;
	right: clamp(-8px, -1vw, 0px);
	bottom: clamp(-14px, -2vw, -8px);
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: clamp(16px, 2vw, 22px) clamp(20px, 2.4vw, 28px);
	border-radius: var(--aiseguros-border-radius-card, 18px);
	background-color: var(--aiseguros-color-accent, #079239);
	color: var(--aiseguros-color-white, #FFFFFF);
	box-shadow: 0 16px 34px rgba(7, 146, 57, 0.32);
}

.aiseg-nos__badge-value {
	font-size: clamp(1.8rem, 3vw, 2.4rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
}

.aiseg-nos__badge-label {
	max-width: 9ch;
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1.3;
}

/* ==========================================================================
   2. Misión, visión y eslogan
   ========================================================================== */

.aiseg-nos__mv {
	position: relative;
	padding: clamp(56px, 8vw, 104px) clamp(16px, 4vw, 40px);
	background-color: var(--aiseguros-color-dark, #04304a);
	overflow: hidden;
}

/* Glow: el bloque oscuro no debe quedar plano. */
.aiseg-nos__mv::before {
	content: "";
	position: absolute;
	top: -20%;
	left: 50%;
	width: min(1000px, 92%);
	height: 80%;
	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.5;
	pointer-events: none;
}

.aiseg-nos__mv-inner {
	position: relative;
	z-index: 1;
}

.aiseg-nos__cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(16px, 2.2vw, 28px);
}

.aiseg-nos__card {
	padding: clamp(24px, 3vw, 40px);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--aiseguros-border-radius-lg, 28px);
	background: rgba(255, 255, 255, 0.06);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}

.aiseg-nos__card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: 18px;
	border-radius: 50%;
	background-color: var(--aiseguros-color-secondary, #4ab3e7);
	color: var(--aiseguros-color-dark, #04304a);
}

/* El tema pinta los encabezados en navy: sobre el panel oscuro desaparecerían. */
.aiseg-nos .aiseg-nos__card-title {
	margin: 0 0 12px;
	color: var(--aiseguros-color-white, #FFFFFF);
	font-size: clamp(1.25rem, 2vw, 1.6rem);
	font-weight: 700;
	letter-spacing: -0.01em;
}

.aiseg-nos__card-text {
	margin: 0;
	color: rgba(255, 255, 255, 0.8);
	font-size: clamp(0.95rem, 1.1vw, 1rem);
	line-height: 1.7;
	text-wrap: pretty;
}

.aiseg-nos__eslogan {
	position: relative;
	margin: clamp(28px, 4vw, 48px) auto 0;
	max-width: 860px;
	padding: 0 clamp(16px, 4vw, 48px);
	text-align: center;
}

.aiseg-nos__eslogan p {
	margin: 0;
	color: var(--aiseguros-color-white, #FFFFFF);
	font-size: clamp(1.25rem, 2.6vw, 2rem);
	font-weight: 600;
	font-style: italic;
	line-height: 1.35;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.aiseg-nos__eslogan p::before {
	content: "\201C";
}

.aiseg-nos__eslogan p::after {
	content: "\201D";
}

/* ==========================================================================
   3. Valores
   ========================================================================== */

.aiseg-nos__values {
	padding: clamp(56px, 8vw, 104px) clamp(16px, 4vw, 40px);
	background-color: var(--aiseguros-color-surface, #eaf4fb);
}

.aiseg-nos .aiseg-nos__values-title {
	margin: 0 0 clamp(28px, 4vw, 48px);
	color: var(--aiseguros-color-primary, #075685);
	font-size: clamp(1.8rem, 3.4vw, 2.7rem);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.02em;
	text-align: center;
}

/* Son 7 ítems, un número que no encaja en rejillas pares. Con `grid` quedaba
   un huérfano pegado a la izquierda (6+1); con flex y `justify-content: center`
   la fila incompleta se centra y se lee como decisión, no como sobra.
   Los saltos se fuerzan por `flex-basis` para controlar el reparto: 7 · 4+3 ·
   3+3+1 · 2+2+2+1. */
.aiseg-nos__values-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(12px, 1.6vw, 20px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.aiseg-nos__value {
	flex: 1 1 calc(14.285% - 18px);
	max-width: 240px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: clamp(20px, 2.4vw, 28px) 14px;
	border: 1px solid var(--aiseguros-color-border, #cfdde6);
	border-radius: var(--aiseguros-border-radius-card, 18px);
	background-color: var(--aiseguros-color-white, #FFFFFF);
	text-align: center;
	transition:
		transform var(--aiseg-dur-base, 300ms) var(--aiseg-ease-out, ease),
		box-shadow var(--aiseg-dur-base, 300ms) var(--aiseg-ease-out, ease),
		border-color var(--aiseg-dur-base, 300ms) var(--aiseg-ease-out, ease);
}

.aiseg-nos__value:hover {
	transform: translateY(-4px);
	border-color: var(--aiseguros-color-secondary, #4ab3e7);
	box-shadow: var(--aiseguros-shadow-md, 0 14px 40px rgba(4, 48, 74, 0.10));
}

.aiseg-nos__value-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background-color: var(--aiseguros-color-surface, #eaf4fb);
	color: var(--aiseguros-color-primary, #075685);
}

/* Elementor pinta los iconos como `<svg>` sin tamaño intrínseco. */
.aiseg-nos__value-icon svg,
.aiseg-nos__value-icon i {
	width: 22px;
	height: 22px;
	font-size: 22px;
}

.aiseg-nos__value-name {
	color: var(--aiseguros-color-primary, #075685);
	font-size: 0.98rem;
	font-weight: 650;
	line-height: 1.3;
}

/* ==========================================================================
   4. Responsive
   ========================================================================== */

@media (max-width: 900px) {
	.aiseg-nos__intro-inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.aiseg-nos__cards {
		grid-template-columns: minmax(0, 1fr);
	}

	.aiseg-nos__badge {
		right: 12px;
		bottom: 12px;
	}
}

@media (max-width: 1080px) {
	.aiseg-nos__value {
		flex-basis: calc(25% - 16px);
	}
}

@media (max-width: 700px) {
	.aiseg-nos__value {
		flex-basis: calc(33.333% - 14px);
	}
}

@media (max-width: 480px) {
	.aiseg-nos__value {
		flex-basis: calc(50% - 8px);
	}
}

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

	.aiseg-nos__value:hover {
		transform: none;
	}
}