/* ==========================================================================
   Aiseguros — Blog (rejilla asimétrica tipo "bento")

   Reparto: la primera tarjeta de cada grupo de tres ocupa la columna ancha y
   dos filas; las otras dos se apilan en la columna estrecha. El atributo
   `data-slot` lo reasigna el JS sobre las tarjetas VISIBLES, así el patrón
   sobrevive al filtrado por categoría.

   OJO: nada de `overflow: hidden` ni `transform` en `.aiseg-blog`. Un ancestro
   con `transform`/`filter` se convierte en bloque contenedor de los
   `position: fixed` (header y botón "volver arriba") y los rompería.
   ========================================================================== */

.aiseg-blog {
	--aiseg-blog-gap: clamp(12px, 1.4vw, 20px);
	--aiseg-blog-row: clamp(196px, 21vw, 264px);
	--aiseg-blog-veil: 0.85;
	--aiseg-blog-radius: var(--aiseguros-border-radius-lg, 28px);
	/* Cuánto sube el contenido al pasar el ratón. Debe coincidir con el alto del
	   botón más su margen superior, para que al reposo quede justo fuera de la
	   tarjeta (la recorta su `overflow: hidden`). */
	--aiseg-blog-reveal: 52px;

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

/* Glow radial: evita que el bloque de color quede plano (directriz del cliente). */
.aiseg-blog::before {
	content: "";
	position: absolute;
	top: -10%;
	left: 50%;
	width: min(1100px, 90%);
	height: 70%;
	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-blog__inner {
	position: relative;
	z-index: 1;
	max-width: 1280px;
	margin-inline: auto;
}

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

.aiseg-blog__head {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	align-items: end;
	gap: clamp(16px, 3vw, 48px);
	margin-bottom: clamp(28px, 4vw, 44px);
}

.aiseg-blog .aiseg-blog__title-main {
	margin: 0;
	color: var(--aiseguros-color-white, #FFFFFF);
	font-size: clamp(1.9rem, 4vw, 3.1rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

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

.aiseg-blog__subtitle {
	margin: 0;
	color: rgba(255, 255, 255, 0.72);
	font-size: clamp(0.98rem, 1.2vw, 1.06rem);
	line-height: 1.65;
}

/* ==========================================================================
   2. Botonera de filtros
   ========================================================================== */

.aiseg-blog__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: clamp(20px, 2.6vw, 28px);
}

.aiseg-blog__filter {
	flex-shrink: 0;
	padding: 9px 20px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: var(--aiseguros-border-radius-pill, 999px);
	background: transparent;
	color: rgba(255, 255, 255, 0.86);
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition:
		background-color var(--aiseg-dur-base, 300ms) var(--aiseg-ease-out, ease),
		border-color var(--aiseg-dur-base, 300ms) var(--aiseg-ease-out, ease),
		color var(--aiseg-dur-base, 300ms) var(--aiseg-ease-out, ease);
}

.aiseg-blog__filter:hover,
.aiseg-blog__filter:focus-visible {
	border-color: var(--aiseguros-color-secondary, #4ab3e7);
	background-color: rgba(255, 255, 255, 0.08);
	color: var(--aiseguros-color-white, #FFFFFF);
}

.aiseg-blog__filter.is-active {
	border-color: var(--aiseguros-color-secondary, #4ab3e7);
	background-color: var(--aiseguros-color-secondary, #4ab3e7);
	color: var(--aiseguros-color-dark, #04304a);
}

.aiseg-blog__head-side {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}

.aiseg-blog__archivo {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 12px 24px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: var(--aiseguros-border-radius-pill, 999px);
	color: var(--aiseguros-color-white, #FFFFFF);
	font-size: 0.88rem;
	font-weight: 650;
	text-decoration: none;
	transition:
		background-color var(--aiseg-dur-base, 300ms) var(--aiseg-ease-out, ease),
		color var(--aiseg-dur-base, 300ms) var(--aiseg-ease-out, ease),
		border-color var(--aiseg-dur-base, 300ms) var(--aiseg-ease-out, ease);
}

.aiseg-blog__archivo:hover,
.aiseg-blog__archivo:focus-visible {
	border-color: var(--aiseguros-color-secondary, #4ab3e7);
	background-color: var(--aiseguros-color-secondary, #4ab3e7);
	color: var(--aiseguros-color-dark, #04304a);
}

/* ==========================================================================
   3. Rejilla bento
   ========================================================================== */

.aiseg-blog__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	grid-auto-rows: var(--aiseg-blog-row);
	gap: var(--aiseg-blog-gap);
}

/* La destacada se ancla a la columna ancha y ocupa dos filas; las secundarias
   se auto-colocan en la estrecha. */
.aiseg-blog__card[data-slot="lead"] {
	grid-column: 1;
	grid-row: span 2;
}

/*
 * Con un filtro activo se abandona el bento: tres tarjetas iguales de la misma
 * categoría se comparan mejor que una grande y dos pequeñas.
 * Especificidad 0-2-0 para ganar a la regla de `[data-slot="lead"]`.
 */
/*
 * ⚠️ Especificidad 0-2-0 (`.aiseg-blog` delante). El bloque de móvil fija
 * `grid-auto-rows` en `.aiseg-blog__grid` (0-1-0) y, al ir DESPUÉS en el
 * archivo, ganaba: las tarjetas pasaban a 4/3 (268px de alto) dentro de filas
 * de 240px y se montaban unas sobre otras al activar cualquier filtro.
 */
.aiseg-blog .aiseg-blog__grid--simple {
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	grid-auto-rows: auto;
}

.aiseg-blog .aiseg-blog__grid--simple .aiseg-blog__card {
	grid-column: auto;
	grid-row: auto;
	aspect-ratio: 4 / 3;
}

/* Integridad del patrón cuando el filtro deja menos de tres tarjetas. */
.aiseg-blog__grid[data-visible="1"] {
	grid-template-columns: minmax(0, 1fr);
}

.aiseg-blog__grid[data-visible="2"] {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.aiseg-blog__grid[data-visible="1"] .aiseg-blog__card,
.aiseg-blog__grid[data-visible="2"] .aiseg-blog__card {
	grid-column: auto;
	grid-row: span 2;
}

/* ==========================================================================
   4. Tarjeta
   ========================================================================== */

.aiseg-blog__card {
	position: relative;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	border-radius: var(--aiseg-blog-radius);
	/* Borde tenue: sobre el fondo navy, el pie de la foto se funde con la sección
	   y sin él se perdería el contorno de la tarjeta. */
	border: 1px solid rgba(255, 255, 255, 0.10);
	background-color: var(--aiseguros-color-dark, #04304a);
	box-shadow: 0 22px 50px rgba(2, 24, 38, 0.45);
	isolation: isolate;
}

/*
 * ⚠️ El archivo NO usa el velo con `backdrop-filter`. Desenfocar el fondo con
 * una máscara es de lo más caro que se puede pedir al compositor: se pinta
 * después que el resto y aparecía como un resplandor que entraba tarde en las
 * esquinas de abajo. Sobre las fotos del archivo un degradado plano da el
 * mismo contraste y se pinta con la tarjeta.
 */
.aiseg-blog--archivo .aiseg-blog__veil::before {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	background: linear-gradient(to top, rgba(4, 48, 74, 0.92) 0%, rgba(4, 48, 74, 0.55) 45%, rgba(4, 48, 74, 0) 78%);
	-webkit-mask-image: none;
	mask-image: none;
}

/* En el archivo el fondo es claro y esa misma sombra —pensada para que la
   tarjeta despegue del navy— se lee como una mancha gris. Aquí basta una
   sombra corta que solo define el borde. */
.aiseg-blog--archivo .aiseg-blog__card {
	border-color: var(--aiseguros-color-border, #cfdde6);
	box-shadow: 0 2px 10px rgba(4, 48, 74, 0.07);
}

.aiseg-blog--archivo .aiseg-blog__card:hover {
	box-shadow: 0 10px 26px rgba(4, 48, 74, 0.13);
}

.aiseg-blog__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

/* `object-fit: cover` reproduce el encuadre de `background-size: cover` pero
   conserva srcset y lazy-load. */
.aiseg-blog__card .aiseg-blog__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Elementor fuerza `.elementor img { border-radius: 0 }` (0-1-1): el radio
	   lo aporta el `overflow: hidden` de la tarjeta, no la imagen. */
	transition: transform 900ms var(--aiseg-ease-out, ease);
}

.aiseg-blog__img--empty {
	background:
		radial-gradient(circle at 30% 20%, rgba(74, 179, 231, 0.45), transparent 60%),
		linear-gradient(135deg, var(--aiseguros-color-primary, #075685), var(--aiseguros-color-dark, #04304a));
}

.aiseg-blog__card:hover .aiseg-blog__img,
.aiseg-blog__card:focus-within .aiseg-blog__img {
	transform: scale(1.06);
}

/* Degradado de legibilidad. */
.aiseg-blog__veil {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		to top,
		rgba(4, 48, 74, var(--aiseg-blog-veil)) 0%,
		rgba(4, 48, 74, calc(var(--aiseg-blog-veil) * 0.72)) 26%,
		rgba(4, 48, 74, 0.12) 62%,
		rgba(4, 48, 74, 0) 100%
	);
	pointer-events: none;
}

/* Desenfoque del pie, en capa aparte del color.
   Va en un `::before` y no en el propio velo porque el velo ya se desvanece
   hacia arriba en su degradado: aplicarle además una máscara lo atenuaría dos
   veces y el texto perdería contraste, justo lo contrario de lo que se busca.
   Así el color mantiene su curva y el desenfoque tiene la suya.
   La máscara es lo que hace que el blur se disuelva en vez de cortarse en una
   línea recta a media foto. */
.aiseg-blog__veil::before {
	content: "";
	position: absolute;
	inset: 0;
	-webkit-backdrop-filter: blur(var(--aiseg-blog-blur, 14px));
	backdrop-filter: blur(var(--aiseg-blog-blur, 14px));
	-webkit-mask-image: linear-gradient(to top, #000 0%, #000 24%, rgba(0, 0, 0, 0.45) 46%, transparent 72%);
	mask-image: linear-gradient(to top, #000 0%, #000 24%, rgba(0, 0, 0, 0.45) 46%, transparent 72%);
}

.aiseg-blog__body {
	position: relative;
	z-index: 2;
	width: 100%;
	padding: clamp(16px, 2vw, 30px);
	color: var(--aiseguros-color-white, #FFFFFF);
	/* Al reposo el contenido baja lo que mide el botón, que queda recortado bajo
	   el borde de la tarjeta. Al pasar el ratón vuelve a 0: el título y la
	   categoría suben y el botón entra en escena. */
	transform: translateY(var(--aiseg-blog-reveal));
	transition: transform 420ms var(--aiseg-ease-out, ease);
}

.aiseg-blog__card:hover .aiseg-blog__body,
.aiseg-blog__card:focus-within .aiseg-blog__body {
	transform: translateY(0);
}

/* Píldora de categoría — glass sobre la foto. */
.aiseg-blog__pill {
	display: inline-block;
	margin-bottom: 10px;
	padding: 6px 14px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: var(--aiseguros-border-radius-pill, 999px);
	background: rgba(4, 48, 74, 0.55);
	-webkit-backdrop-filter: blur(10px) saturate(150%);
	backdrop-filter: blur(10px) saturate(150%);
	color: var(--aiseguros-color-white, #FFFFFF);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1;
}

/* El tema pinta los encabezados en navy: sobre la foto quedarían invisibles. */
.aiseg-blog .aiseg-blog__title {
	color: var(--aiseguros-color-white, #FFFFFF);
}

.aiseg-blog__title {
	margin: 0;
	font-size: 1.16rem;
	font-weight: 650;
	line-height: 1.28;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

/* ==========================================================================
   4b. Botón que aparece al pasar el ratón
   ========================================================================== */

.aiseg-blog__action {
	display: flex;
	margin-top: 12px;
	height: 40px;
	opacity: 0;
	transition: opacity 260ms var(--aiseg-ease-out, ease);
}

.aiseg-blog__card:hover .aiseg-blog__action,
.aiseg-blog__card:focus-within .aiseg-blog__action {
	opacity: 1;
}

.aiseg-blog__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 20px;
	border-radius: var(--aiseguros-border-radius-pill, 999px);
	background-color: var(--aiseguros-color-white, #FFFFFF);
	color: var(--aiseguros-color-dark, #04304a);
	font-size: 0.85rem;
	font-weight: 650;
	line-height: 1;
	white-space: nowrap;
}

/* ==========================================================================
   4c. Enlace superpuesto — toda la tarjeta es clicable
   ========================================================================== */

.aiseg-blog__overlay {
	position: absolute;
	inset: 0;
	z-index: 5;
	border-radius: inherit;
	text-indent: -9999px;
	overflow: hidden;
}

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

.aiseg-blog__overlay:focus-visible {
	outline: none;
}

/* --- Tarjeta destacada -------------------------------------------------- */

.aiseg-blog__card[data-slot="lead"] .aiseg-blog__title {
	font-size: clamp(1.5rem, 2.9vw, 2.5rem);
	font-weight: 700;
	line-height: 1.14;
}

.aiseg-blog__card[data-slot="lead"] .aiseg-blog__pill {
	margin-bottom: 14px;
}

/* ==========================================================================
   Rendimiento: nada de desenfoque MIENTRAS el reveal está en vuelo
   ==========================================================================

   `backdrop-filter` obliga al compositor a recalcular el fondo desenfocado en
   CADA fotograma. Si además un ancestro está desplazándose —la rejilla lleva
   `aiseg-anim-up` y se mueve 48px durante 1100ms— el desenfoque se recalcula
   ~65 veces seguidas, con máscara incluida. Eso es la resistencia que se nota
   al bajar justo después de cargar, y desaparece sola porque el reveal ocurre
   una única vez.

   Se aplica el desenfoque cuando el contenedor YA está revelado. Durante el
   deslizamiento no se echa de menos: son 48px y menos de un segundo.
   ========================================================================== */

.aiseg-js .aiseg-anim-fade:not(.is-in) .aiseg-blog__pill,
.aiseg-js .aiseg-anim-up:not(.is-in) .aiseg-blog__pill,
.aiseg-js .aiseg-anim-zoom:not(.is-in) .aiseg-blog__pill,
.aiseg-js .aiseg-anim-fade:not(.is-in) .aiseg-blog__veil::before,
.aiseg-js .aiseg-anim-up:not(.is-in) .aiseg-blog__veil::before,
.aiseg-js .aiseg-anim-zoom:not(.is-in) .aiseg-blog__veil::before {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/* ==========================================================================
   5. Filtrado — el JS conmuta `.is-out` y el atributo `hidden`
   ========================================================================== */

/* Transición corta y propia de la tarjeta. El reveal al hacer scroll vive en
   `.aiseg-blog__grid` justamente para no imponer aquí sus 1100ms. */
.aiseg-blog__card {
	transition:
		opacity 200ms var(--aiseg-ease-out, ease),
		transform 200ms var(--aiseg-ease-out, ease);
}

.aiseg-blog__grid .aiseg-blog__card.is-out {
	opacity: 0;
	transform: scale(0.96);
}

.aiseg-blog__grid[hidden] {
	display: none;
}

.aiseg-blog__card[hidden] {
	display: none;
}

.aiseg-blog__empty {
	margin: 0;
	padding: clamp(40px, 8vw, 72px) 0;
	color: rgba(255, 255, 255, 0.7);
	text-align: center;
}

/* ==========================================================================
   6. Pie / CTA
   ========================================================================== */

.aiseg-blog__foot {
	display: flex;
	justify-content: center;
	margin-top: clamp(28px, 4vw, 44px);
}

.aiseg-blog__cta {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px 14px 28px;
	border-radius: var(--aiseguros-border-radius-pill, 999px);
	background-color: var(--aiseguros-color-accent, #079239);
	color: var(--aiseguros-color-white, #FFFFFF);
	font-size: 0.95rem;
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 10px 26px rgba(7, 146, 57, 0.28);
	transition:
		background-color var(--aiseg-dur-base, 300ms) var(--aiseg-ease-out, ease),
		box-shadow var(--aiseg-dur-base, 300ms) var(--aiseg-ease-out, ease);
}

.aiseg-blog__cta:hover,
.aiseg-blog__cta:focus-visible {
	background-color: #067f31;
	box-shadow: 0 14px 34px rgba(7, 146, 57, 0.38);
	color: var(--aiseguros-color-white, #FFFFFF);
}

.aiseg-blog__cta-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.18);
	transition: transform var(--aiseg-dur-base, 300ms) var(--aiseg-ease-spring, ease);
}

.aiseg-blog__cta:hover .aiseg-blog__cta-icon {
	transform: rotate(45deg);
}

/* ==========================================================================
   7. Responsive
   ========================================================================== */

@media (max-width: 1024px) {
	.aiseg-blog__grid {
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	}
}

/* Una sola columna: todas las tarjetas iguales. */
@media (max-width: 860px) {
	.aiseg-blog__head {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
	}

	.aiseg-blog__grid,
	.aiseg-blog__grid[data-visible="1"],
	.aiseg-blog__grid[data-visible="2"] {
		grid-template-columns: minmax(0, 1fr);
		grid-auto-rows: clamp(240px, 54vw, 330px);
	}

	.aiseg-blog__card[data-slot="lead"],
	.aiseg-blog__grid[data-visible="1"] .aiseg-blog__card,
	.aiseg-blog__grid[data-visible="2"] .aiseg-blog__card {
		grid-column: auto;
		grid-row: auto;
	}

	.aiseg-blog__card[data-slot="lead"] .aiseg-blog__title {
		font-size: clamp(1.35rem, 5vw, 1.8rem);
	}
}

@media (max-width: 520px) {
	.aiseg-blog__filters {
		/* Se desliza en horizontal en vez de romper en varias líneas. */
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		margin-inline: calc(clamp(16px, 4vw, 40px) * -1);
		padding-inline: clamp(16px, 4vw, 40px);
	}

	.aiseg-blog__filters::-webkit-scrollbar {
		display: none;
	}
}

/* Sin ratón (táctil) no hay hover: el botón se muestra siempre y el contenido
   no se desplaza, para que nunca quede inalcanzable. */
@media (hover: none) {
	.aiseg-blog {
		--aiseg-blog-reveal: 0px;
	}

	.aiseg-blog__action {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aiseg-blog__card .aiseg-blog__img,
	.aiseg-blog__body,
	.aiseg-blog__action,
	.aiseg-blog__cta-icon {
		transition: none;
	}

	.aiseg-blog__card:hover .aiseg-blog__img {
		transform: none;
	}
}