/* ==========================================================================
   Aiseguros — Entrada individual del blog
   Referencia: docs/referencias/Blog-post.png
   ========================================================================== */

.aiseg-post {
	/* El aire superior lo pone ya la cabecera `.aiseg-ph--post`. */
	padding: clamp(32px, 4.5vw, 52px) clamp(16px, 4vw, 40px) clamp(56px, 8vw, 96px);
	background-color: var(--aiseguros-color-white, #FFFFFF);
}

.aiseg-post__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	/* `stretch` para que la celda lateral tenga alto y su sticky recorrido. */
	align-items: stretch;
	gap: clamp(28px, 4vw, 64px);
	max-width: 1180px;
	margin-inline: auto;
}

/* ==========================================================================
   0. Cabecera compacta (reutiliza `.aiseg-ph` del widget pagehead)
   ========================================================================== */

/* Menos alto que en las subpáginas: aquí el protagonismo lo tiene la foto
   destacada que va justo debajo, no el banner. */
.aiseg-ph--post {
	--aiseg-ph-min: 0px;
	/* El relleno superior no puede bajar de ~130px: el header flota y termina
	   en 119px. Lo que sí se recorta es el inferior y el tamaño del título. */
	padding-block: clamp(126px, 12vw, 138px) clamp(22px, 2.6vw, 30px);
}

/* Más contenido que en una subpágina: los titulares largos parten en dos líneas
   y son los que disparaban el alto. */
.aiseg-ph--post .aiseg-ph__title {
	font-size: clamp(1.45rem, 2.6vw, 2rem);
	line-height: 1.16;
}

.aiseg-ph--post .aiseg-ph__crumbs {
	margin-top: clamp(14px, 1.8vw, 18px);
}

.aiseg-ph--post .aiseg-ph__crumbs ol {
	padding: 7px 16px;
	font-size: 0.82rem;
}

/* La foto es apaisada y el banner muy bajo: se encuadra hacia arriba para no
   cortar las caras por la mitad. Algo más de velo que en las subpáginas, porque
   aquí el texto ocupa casi todo el alto disponible. */
.aiseg-ph--post {
	--aiseg-ph-overlay: 0.76;
}

/* Encuadre de respaldo. `single.php` lo pisa con un `style` en línea que trae el
   foco propio de cada categoría (`aiseguros_banner_de_categoria()`). */
.aiseg-ph--post .aiseg-ph__img {
	object-position: center 32%;
}

/* El último nivel puede ser un titular largo: se limita el ancho para no romper
   la píldora en varias líneas. El recorte lo gestiona el marquee de abajo. */
.aiseg-ph--post .aiseg-ph__crumbs li[aria-current] {
	max-width: 38ch;
	min-width: 0;
}

/* --- Marquee del título en la miga ---------------------------------------
   Estado base = texto recortado con puntos suspensivos. Es lo que se ve si el
   título cabe, si no hay JS o si el usuario pidió reducir movimiento; el
   desplazamiento es una mejora encima, nunca un requisito.
   ------------------------------------------------------------------------- */

.aiseg-post__marquee {
	display: block;
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.aiseg-post__marquee-track {
	display: inline-block;
	white-space: nowrap;
}

/* El JS añade `is-scrolling` SÓLO si el texto desborda de verdad: animar algo
   que ya se lee entero es ruido. */
.aiseg-post__marquee.is-scrolling {
	display: flex;
	text-overflow: clip;
}

.aiseg-post__marquee.is-scrolling .aiseg-post__marquee-track {
	flex-shrink: 0;
	/* El hueco viaja con el texto: sin él las dos copias se pegarían. */
	padding-right: 3ch;
	animation: aiseg-marquee var(--aiseg-marquee-dur, 12s) linear infinite;
}

/* Se detiene al pasar el ratón o al enfocar con teclado, para poder leerlo. */
.aiseg-post__marquee.is-scrolling:hover .aiseg-post__marquee-track,
.aiseg-ph__crumbs:focus-within .aiseg-post__marquee-track {
	animation-play-state: paused;
}

@keyframes aiseg-marquee {
	to {
		transform: translateX(calc(var(--aiseg-marquee-dist, 0px) * -1));
	}
}

/* ==========================================================================
   1. Foto destacada con autoría y compartir sobrepuestos
   ========================================================================== */

.aiseg-post__hero {
	position: relative;
	margin: 0 0 clamp(22px, 3vw, 32px);
	border-radius: var(--aiseguros-border-radius-lg, 28px);
	overflow: hidden;
	background-color: var(--aiseguros-color-dark, #04304a);
}

.aiseg-post .aiseg-post__hero-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 11;
	object-fit: cover;
	transition: transform 900ms var(--aiseg-ease-out, ease);
}

/* La figura ya lleva `overflow: hidden`, así que el zoom no se sale del radio. */
.aiseg-post__hero:hover .aiseg-post__hero-img,
.aiseg-post__hero:focus-within .aiseg-post__hero-img {
	transform: scale(1.04);
}

/* Mismo recurso que las tarjetas del blog: degradado para leer el texto
   sobrepuesto, más un desenfoque enmascarado que se disuelve hacia arriba. */
.aiseg-post__hero-veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(4, 48, 74, 0.82) 0%,
		rgba(4, 48, 74, 0.5) 22%,
		rgba(4, 48, 74, 0) 48%
	);
	pointer-events: none;
}

.aiseg-post__hero-veil::before {
	content: "";
	position: absolute;
	inset: 0;
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	-webkit-mask-image: linear-gradient(to top, #000 0%, #000 18%, transparent 46%);
	mask-image: linear-gradient(to top, #000 0%, #000 18%, transparent 46%);
}

.aiseg-post__hero-bar {
	position: absolute;
	inset: auto 0 0 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: clamp(16px, 2.2vw, 26px);
}

/* --- Autoría ------------------------------------------------------------- */

.aiseg-post__autor {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

/* El logo del sitio hace de avatar: firma la agencia, no una persona. */
.aiseg-post__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	padding: 8px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

/* Mismo recurso que el logo del footer: el original es a color y sobre el velo
   oscuro no se distinguiría, así que se pasa a blanco puro. */
.aiseg-post .aiseg-post__avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: brightness(0) invert(1);
}

.aiseg-post__autor-txt {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.aiseg-post__autor-nombre {
	color: var(--aiseguros-color-white, #FFFFFF);
	font-size: 0.94rem;
	font-weight: 650;
	line-height: 1.2;
}

.aiseg-post__fecha {
	color: rgba(255, 255, 255, 0.78);
	font-size: 0.8rem;
	line-height: 1.3;
}

/* --- Compartir ----------------------------------------------------------- */

.aiseg-post__share {
	display: flex;
	align-items: center;
	gap: 8px;
}

.aiseg-post__share-txt {
	margin-right: 2px;
	color: rgba(255, 255, 255, 0.78);
	font-size: 0.78rem;
	font-weight: 600;
}

.aiseg-post__share-btn {
	/* Ancla del aviso "¡Copiado!". */
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: var(--aiseguros-color-white, #FFFFFF);
	cursor: pointer;
	transition:
		background-color var(--aiseg-dur-base, 300ms) var(--aiseg-ease-out, ease),
		transform var(--aiseg-dur-base, 300ms) var(--aiseg-ease-out, ease);
}

.aiseg-post__share-btn:hover,
.aiseg-post__share-btn:focus-visible {
	background-color: var(--aiseguros-color-secondary, #4ab3e7);
	color: var(--aiseguros-color-dark, #04304a);
	transform: translateY(-2px);
}

/* Confirmación de "enlace copiado", sin alertas ni JS de terceros. */
.aiseg-post__copiar.is-ok::after,
.aiseg-post__copiar.is-error::after {
	content: "¡Copiado!";
	position: absolute;
	transform: translateY(-34px);
	padding: 4px 10px;
	border-radius: var(--aiseguros-border-radius-pill, 999px);
	background-color: var(--aiseguros-color-dark, #04304a);
	color: var(--aiseguros-color-white, #FFFFFF);
	font-size: 0.7rem;
	font-weight: 600;
	white-space: nowrap;
}

.aiseg-post__copiar.is-error::after {
	content: "No se pudo copiar";
	background-color: #b3261e;
}

/* ==========================================================================
   2. Encabezado y cuerpo
   ========================================================================== */

.aiseg-post__head {
	margin-bottom: clamp(20px, 2.6vw, 30px);
}

/* Sobre la foto, arriba a la izquierda. Va en glass porque ahí el fondo es la
   imagen y un relleno plano no garantizaría contraste con cualquier foto. */
.aiseg-post__cat {
	position: absolute;
	top: clamp(16px, 2.2vw, 26px);
	left: clamp(16px, 2.2vw, 26px);
	z-index: 2;
	display: inline-block;
	padding: 8px 17px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: var(--aiseguros-border-radius-pill, 999px);
	background: rgba(4, 48, 74, 0.55);
	-webkit-backdrop-filter: blur(12px) saturate(150%);
	backdrop-filter: blur(12px) saturate(150%);
	color: var(--aiseguros-color-white, #FFFFFF);
	font-size: 0.74rem;
	font-weight: 650;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	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);
}

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

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

/* --- Contenido ----------------------------------------------------------- */

.aiseg-post__contenido {
	/* Medida de lectura cómoda: ~70 caracteres por línea. */
	max-width: 68ch;
	color: var(--aiseguros-color-body, #364e52);
	font-size: clamp(1rem, 1.25vw, 1.09rem);
	line-height: 1.75;
}

.aiseg-post__contenido > * + * {
	margin-top: 1.15em;
}

.aiseg-post .aiseg-post__contenido h2 {
	margin-top: 1.9em;
	color: var(--aiseguros-color-primary, #075685);
	font-size: clamp(1.3rem, 2.2vw, 1.65rem);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.aiseg-post .aiseg-post__contenido h3 {
	margin-top: 1.6em;
	color: var(--aiseguros-color-primary, #075685);
	font-size: clamp(1.12rem, 1.7vw, 1.3rem);
	font-weight: 700;
}

.aiseg-post__contenido p {
	text-wrap: pretty;
}

.aiseg-post__contenido strong {
	color: var(--aiseguros-color-primary, #075685);
}

.aiseg-post__contenido ul,
.aiseg-post__contenido ol {
	padding-left: 1.3em;
}

/* Para listas cuyo texto ya trae su marcador (✅ y similares): sin esto se
   pintan dos, el del navegador y el del texto. Se aplica con la clase en el
   <ul>: <ul class="aiseg-lista-marcada">. */
.aiseg-post__contenido ul.aiseg-lista-marcada {
	list-style: none;
	padding-left: 0;
}

.aiseg-post__contenido li + li {
	margin-top: 0.55em;
}

.aiseg-post__contenido a {
	color: var(--aiseguros-color-secondary-ink, #12719f);
	text-underline-offset: 3px;
}

.aiseg-post__contenido img {
	max-width: 100%;
	height: auto;
	border-radius: var(--aiseguros-border-radius-card, 18px);
}

.aiseg-post__contenido blockquote {
	margin-left: 0;
	padding: 4px 0 4px 22px;
	border-left: 3px solid var(--aiseguros-color-secondary, #4ab3e7);
	color: var(--aiseguros-color-primary, #075685);
	font-size: 1.1em;
	font-style: italic;
}

.aiseg-post__volver {
	margin: clamp(32px, 4vw, 48px) 0 0;
	padding-top: clamp(20px, 2.6vw, 28px);
	border-top: 1px solid var(--aiseguros-color-border, #cfdde6);
}

.aiseg-post__volver a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--aiseguros-color-secondary-ink, #12719f);
	font-size: 0.94rem;
	font-weight: 650;
	text-decoration: none;
}

.aiseg-post__volver a:hover,
.aiseg-post__volver a:focus-visible {
	gap: 12px;
}

/* ==========================================================================
   3. Columna lateral
   ========================================================================== */

.aiseg-post__side-inner {
	position: sticky;
	top: 118px;
}

.aiseg-post .aiseg-post__side-titulo {
	margin: 0 0 18px;
	color: var(--aiseguros-color-primary, #075685);
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.aiseg-post__otras {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.aiseg-post__otra a {
	display: flex;
	flex-direction: column;
	gap: 10px;
	color: inherit;
	text-decoration: none;
}

.aiseg-post__otra-img {
	display: block;
	overflow: hidden;
	border-radius: var(--aiseguros-border-radius-card, 18px);
}

.aiseg-post .aiseg-post__otra-img img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	transition: transform 900ms var(--aiseg-ease-out, ease);
}

.aiseg-post__otra a:hover .aiseg-post__otra-img img,
.aiseg-post__otra a:focus-visible .aiseg-post__otra-img img {
	transform: scale(1.06);
}

.aiseg-post__otra-txt {
	color: var(--aiseguros-color-primary, #075685);
	font-size: 0.96rem;
	font-weight: 650;
	line-height: 1.35;
	text-wrap: pretty;
}

.aiseg-post__otra a:hover .aiseg-post__otra-txt {
	color: var(--aiseguros-color-secondary-ink, #12719f);
}

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

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

	.aiseg-post__side-inner {
		position: static;
	}

	.aiseg-post__otras {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	}
}

@media (max-width: 620px) {
	/* La barra sobrepuesta no cabe en una línea: se apila y el compartir baja. */
	.aiseg-post__hero-bar {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.aiseg-post .aiseg-post__hero-img {
		aspect-ratio: 4 / 5;
	}
}

@media (prefers-reduced-motion: reduce) {
	/* Nada de texto en movimiento: vuelve a los puntos suspensivos. */
	.aiseg-post__marquee.is-scrolling {
		display: block;
		text-overflow: ellipsis;
	}

	.aiseg-post__marquee.is-scrolling .aiseg-post__marquee-track {
		padding-right: 0;
		animation: none;
	}

	.aiseg-post__share-btn,
	.aiseg-post__otra-img img {
		transition: none;
	}

	.aiseg-post__share-btn:hover {
		transform: none;
	}

	.aiseg-post__otra a:hover .aiseg-post__otra-img img {
		transform: none;
	}
}