/* ==========================================================================
   CINV — Portada
   ==========================================================================
   Solo lo que existe únicamente en la portada. Todo lo compartido (badge,
   card, filtros, stats, buscador) vive en main.css y no se redefine acá.
   ========================================================================== */


/* ── Slider ──────────────────────────────────────────────────────────────── */

.hero-slider { position: relative; border-bottom: 1px solid var(--border); }

.hero-slider__grid {
	display: grid;
	/* 80 / 20, como en el diseño: la imagen manda y el texto acompaña. */
	grid-template-columns: 3.7fr 1.3fr;
	min-height: 520px;
}

.hero-slider__media { position: relative; overflow: hidden; }

.hero-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	background-size: cover;
	background-position: center;
	transition: opacity .7s ease;
}
.hero-slide.is-active { opacity: 1; }

.hero-slider__panel {
	background: var(--bg-card);
	border-left: 1px solid var(--border);
	padding: var(--sp-5) var(--sp-5);
	display: flex;
	flex-direction: column;
}

.hero-slider__dots {
	display: flex;
	justify-content: flex-end;
	gap: var(--sp-2);
	margin-bottom: auto;
}
.hero-dot {
	width: 10px; height: 10px;
	border-radius: 50%;
	border: 1px solid var(--text-dim);
	background: transparent;
	padding: 0;
	transition: background var(--transicion), border-color var(--transicion);
}
.hero-dot.is-active { background: var(--accent); border-color: var(--accent); }

.hero-slide__texto { display: none; }
.hero-slide__texto.is-active { display: flex; flex-direction: column; flex: 1; }

.hero-slide__meta {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	flex-wrap: wrap;
	margin: var(--sp-4) 0 var(--sp-2);
}

.hero-slide__titulo {
	font-size: 1.25rem;
	line-height: 1.35;
	letter-spacing: -.01em;
	margin-bottom: var(--sp-3);
}

.hero-slide__bajada {
	font-size: 13.5px;
	color: var(--text-dim);
	margin-bottom: var(--sp-4);
}

.hero-slide__texto .btn-link { align-self: flex-start; margin-top: auto; }


/* ── Buscador y cifras ───────────────────────────────────────────────────── */

.home-buscador { padding-block: var(--sp-8); }
.home-buscador__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-5);
}


/* ── Últimas publicaciones ───────────────────────────────────────────────── */

.pub-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: var(--sp-4);
}
.pub-grid__col { display: flex; flex-direction: column; gap: var(--sp-4); }

/* Fila de dos tarjetas compactas bajo la segunda entrada. */
.pub-grid__fila {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sp-4);
	flex: 1;
}

/* Tarjeta grande ---------------------------------------------------------- */

.card-destacada {
	position: relative;
	min-height: 420px;
	display: flex;
	align-items: flex-end;
}
.card-destacada__img {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, #16233a, #0f1a2b);
}
.card-destacada__img img { width: 100%; height: 100%; object-fit: cover; }

.card-destacada__overlay {
	position: relative;
	width: 100%;
	padding: var(--sp-5);
	/* El degradado asegura contraste del texto sobre cualquier foto, que es
	   algo que no se puede garantizar imagen por imagen. */
	background: linear-gradient(to top, rgba(10, 17, 31, .95) 20%, transparent);
}
.card-destacada__titulo { font-size: var(--fs-xl); margin-block: var(--sp-3) var(--sp-2); }
.card-destacada__bajada {
	color: var(--text-dim);
	font-size: 14px;
	margin-bottom: var(--sp-3);
	max-width: 480px;
}

/* La tarjeta grande siempre lleva texto claro: su fondo es la foto oscurecida,
   no la paleta del sitio, también en modo claro. */
.card-destacada__overlay,
.card-destacada__titulo,
.card-destacada__bajada,
.card-destacada .card-meta { color: #e8edf5; }

.card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-4);
	font-family: var(--mono);
	font-size: var(--fs-xs);
	color: var(--text-dim);
}
.card-meta__item { display: inline-flex; align-items: center; gap: var(--sp-1); }
.card-meta .icon { width: 12px; height: 12px; }

/* Tarjeta chica ----------------------------------------------------------- */

.card-entrada { padding: 22px; flex: 1; }
.card-entrada__thumb {
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--r-md);
	overflow: hidden;
	background: linear-gradient(135deg, #16233a, #0f1a2b);
	margin-bottom: var(--sp-3);
}
.card-entrada__thumb img { width: 100%; height: 100%; object-fit: cover; }
.card-entrada__titulo { font-size: 1.05rem; margin-block: var(--sp-2); }
.card-entrada__bajada { color: var(--text-dim); font-size: var(--fs-sm); }

.card-entrada--compacta .card-entrada__titulo { margin-bottom: 0; }


/* ── Categorías destacadas ───────────────────────────────────────────────── */

.cat-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sp-4);
}
.cat-card {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	padding: var(--sp-5);
}
.cat-card__icono {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px; height: 38px;
	border-radius: var(--r-sm);
	background: var(--accent-veil);
	color: var(--accent);
	font-size: 16px;
	margin-bottom: var(--sp-3);
}
.cat-card__titulo { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.cat-card__desc { color: var(--text-dim); font-size: 13.5px; margin-bottom: var(--sp-3); }



/* ── 3D Neural Cartography ───────────────────────────────────────────────── */
/* La presentación viene del diseño; de dónde salen los datos está por definir
   (ver cinv_cartografia_items en inc/queries.php). El CSS no depende de eso. */

.model-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sp-4);
}

.model-card {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	display: block;
	transition: border-color var(--transicion);
}
a.model-card:hover { border-color: var(--accent-dim); }

.model-card__thumb {
	position: relative;
	aspect-ratio: 4 / 5;
	/* Degradado radial de respaldo: la tarjeta se ve completa aunque todavía no
	   haya imagen cargada, que es el estado esperable mientras la fuente de
	   contenido esté sin definir. */
	background: radial-gradient(circle, #1c2c44, #0a111f);
}
.model-card__thumb img { width: 100%; height: 100%; object-fit: cover; }

.model-card__tag {
	position: absolute;
	top: var(--sp-3);
	left: var(--sp-3);
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 5px var(--sp-2);
	border-radius: var(--r-sm);
	background: var(--accent-veil);
	color: var(--accent);
	/* El velo del acento se apoya en el degradado oscuro de la miniatura, que
	   no cambia con el modo claro: acá el acento oscuro sería ilegible. */
	backdrop-filter: blur(4px);
}
:root[data-theme="light"] .model-card__tag {
	background: rgba(10, 17, 31, .55);
	color: #7cf0a6;
}

.model-card__body { padding: 18px var(--sp-4); }
.model-card__titulo { font-size: var(--fs-base); margin-bottom: var(--sp-1); }
.model-card__desc { color: var(--text-dim); font-size: var(--fs-sm); }

/* ── Responsive provisorio ───────────────────────────────────────────────── */
/* Ver la nota de main.css: el responsive definitivo está diferido por el PRD. */

@media (max-width: 860px) {
	.hero-slider__grid { grid-template-columns: 1fr; min-height: 0; }
	.hero-slider__media { height: 320px; }
	.hero-slider__panel { border-left: none; border-top: 1px solid var(--border); }

	.pub-grid { grid-template-columns: 1fr; }
	.pub-grid__fila { grid-template-columns: 1fr; }
	.card-destacada { min-height: 320px; }
	.cat-grid { grid-template-columns: 1fr; }
	.model-grid { grid-template-columns: 1fr; }
}