/* ── Hub /apps/ · diseño v2 ────────────────────────────────────────────────────
   La maqueta pinta cada elemento con estilos inline; aquí queda solo lo que no
   cabe en un atributo: los tokens de color, los keyframes, los hovers y el
   comportamiento en móvil.

   El modo oscuro de la maqueta iba por `data-theme` y un botón propio dentro de su
   header replicado. Aquí los tokens cuelgan de `html.dark`, que es el modo del
   tema: un solo interruptor, el del header, gobierna toda la página.

   Archivo estático a propósito (como dark-mode.css o astral-landing.css): no
   depende del build de Vite, así que un cambio se ve al subirlo.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Tokens ──────────────────────────────────────────────────────────────── */
.hsi-apps-hub {
	--bg: #fff;
	--bg2: #f7f9fc;
	--fg: #0b1220;
	--fg2: #3c4a63;
	--muted: #67748f;
	--line: #e6ebf3;
	--card: #fff;
	--soft: #f2f5fa;
	--shadow: 0 1px 2px #0b122008;
	--shadow2: 0 20px 44px -32px #0b122052;
	--grid: #0b122010;

	/* Fondos de acento. En la maqueta se elegían con `dark ? A : B` en los datos;
	   aquí son tokens para que el dato sea uno solo. */
	--tint-blue: #e8f0fe;
	--tint-green: #e6f6ec;
	--tint-orange: #fdece1;
	--line-orange: #fbdac5;
	--tint-violet: #eeebfd;
	--line-violet: #ded7ff;
	--tint-amber: #fdf0dd;
	--tint-slate: #f1f4fa;
}

/* El oscuro es el del TEMA, no el de la maqueta.
   La maqueta venía con un negro azulado (#0a0e17 y compañía). El resto del sitio
   —/cursos/, /ebooks/, el aula— usa un negro neutro y más oscuro, así que aquí se
   adopta esa rampa: si no, /apps/ se veía de otro color al cambiar de página con
   el mismo interruptor. Los valores salen de assets/dark-mode.css. */
html.dark .hsi-apps-hub {
	--bg: #080809;
	--bg2: #101012;
	--fg: #f3f4f6;
	--fg2: #d1d5db;
	--muted: #9aa1ac;
	--line: #26262c;
	--card: #18181b;
	--soft: #1c1c21;
	--shadow: 0 1px 2px #0000004d;
	--shadow2: 0 20px 44px -30px #000000cc;
	--grid: #ffffff0d;

	/* Los acentos conservan su color (azul, verde, naranja, violeta, ámbar) pero
	   bajan al mismo nivel de luz que la tarjeta: sobre el fondo neutro, los tonos
	   navy de la maqueta se leían como parches de otro tema. */
	--tint-blue: #14203a;
	--tint-green: #0e2118;
	--tint-orange: #2c1a0d;
	--line-orange: #4a2914;
	--tint-violet: #1e1a36;
	--line-violet: #2c2552;
	--tint-amber: #2c220f;
	--tint-slate: #1f1f24;
}

/* ── Base ────────────────────────────────────────────────────────────────── */
/* El fondo va también en el body: sin esto, el rebote del scroll en móvil enseña
   el fondo del tema. Con valores literales porque los tokens viven en el wrapper. */
body.post-type-archive-hsi_app {
	background: #fff;
}

html.dark body.post-type-archive-hsi_app {
	background: #080809;
}

.hsi-apps-hub {
	min-height: 100vh;
	overflow-x: clip;
	background: var(--bg);
	color: var(--fg);
	font-family: 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	text-wrap: pretty;
}

/* El diseño usa una sola familia; sin esto el tema pone Poppins en los títulos y
   cambian todas las proporciones. */
.hsi-apps-hub h1,
.hsi-apps-hub h2,
.hsi-apps-hub h3,
.hsi-apps-hub h4 {
	font-family: inherit;
}

/* Reset acotado al wrapper. La maqueta traía `*{margin:0;padding:0}` global, que
   fuera de su iframe se llevaría por delante el header y el footer del tema. */
.hsi-apps-hub *,
.hsi-apps-hub *::before,
.hsi-apps-hub *::after {
	box-sizing: border-box;
}

.hsi-apps-hub p,
.hsi-apps-hub h1,
.hsi-apps-hub h2,
.hsi-apps-hub h3,
.hsi-apps-hub h4,
.hsi-apps-hub ul,
.hsi-apps-hub ol,
.hsi-apps-hub figure {
	margin: 0;
	padding: 0;
}

.hsi-apps-hub a {
	color: #2563eb;
	text-decoration: none;
}

.hsi-apps-hub a:hover {
	color: #1d4ed8;
}

.hsi-apps-hub ::selection {
	background: #c9dcfd;
	color: #0b1220;
}

/* Foco visible: el diseño no lo traía y la página se recorre entera con las
   pestañas del hero y los enlaces de las tarjetas. */
.hsi-apps-hub a:focus-visible,
.hsi-apps-hub button:focus-visible {
	outline: 2px solid #2563eb;
	outline-offset: 3px;
	border-radius: 10px;
}

/* ── Animaciones ─────────────────────────────────────────────────────────── */
/* `rise` y `blink` son nombres demasiado comunes: el tema o un plugin pueden
   declararlos y ganar. Se definen con prefijo y se remapean sin tocar el markup. */
@keyframes hxrise {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: none; }
}

@keyframes hxblink {
	0%, 100% { opacity: 1; }
	50%      { opacity: .2; }
}

.hsi-apps-hub [style*="animation:rise"]  { animation-name: hxrise !important; }
.hsi-apps-hub [style*="animation:blink"] { animation-name: hxblink !important; }

/* Las revelaciones al hacer scroll usan `animation-timeline:view()`, que solo
   existe en navegadores nuevos. Donde no está, el elemento se quedaría en el
   estado inicial (invisible): esto lo deja visible. */
@supports not (animation-timeline: view()) {
	.hsi-apps-hub [style*="animation-timeline:view()"] {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.hsi-apps-hub *,
	.hsi-apps-hub *::before,
	.hsi-apps-hub *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}

	.hsi-apps-hub [style*="animation-timeline:view()"] {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* ── Pestañas del hero ───────────────────────────────────────────────────── */
/* En la maqueta los colores del activo venían del estado del componente; aquí los
   decide el CSS a partir de aria-selected, que es lo que el JS conmuta. */
.hsi-apps-hub .hx-tab {
	border: 1px solid transparent;
	background: transparent;
	color: var(--muted);
	transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.hsi-apps-hub .hx-tab[aria-selected="true"] {
	border-color: var(--line);
	background: var(--card);
	color: var(--fg);
}

.hsi-apps-hub .hx-tab:hover {
	color: var(--fg);
}

[data-apps-panel][hidden] {
	display: none !important;
}

/* ── Hovers del diseño ───────────────────────────────────────────────────── */
/* En la maqueta iban en un atributo `style-hover`, que no es HTML real. Cada valor
   distinto tiene su clase. Los `!important` son necesarios porque compiten contra
   el estilo inline del propio elemento.
   Los dos que dependen del acento de su tarjeta lo reciben en `--hx-accent`. */
.hsi-apps-hub .hx-h1,
.hsi-apps-hub .hx-h2,
.hsi-apps-hub .hx-h3,
.hsi-apps-hub .hx-h4,
.hsi-apps-hub .hx-h5,
.hsi-apps-hub .hx-h6,
.hsi-apps-hub .hx-h7 {
	transition: background .18s ease, border-color .18s ease, transform .2s ease,
		box-shadow .2s ease, color .18s ease, filter .2s ease;
}

.hsi-apps-hub .hx-h1:hover {
	background: #1d4ed8 !important;
	transform: translateY(-1px) !important;
}

.hsi-apps-hub .hx-h2:hover {
	border-color: #2563eb !important;
	transform: translateY(-1px) !important;
}

.hsi-apps-hub .hx-h3:hover {
	transform: translateY(-4px) !important;
	border-color: var(--hx-accent, #2563eb) !important;
	box-shadow: var(--shadow2) !important;
}

.hsi-apps-hub .hx-h4:hover {
	transform: translateY(-1px) !important;
	filter: brightness(1.08) !important;
}

.hsi-apps-hub .hx-h5:hover {
	transform: translateY(-3px) !important;
	border-color: #2563eb !important;
}

.hsi-apps-hub .hx-h6:hover {
	background: var(--bg2) !important;
}

.hsi-apps-hub .hx-h7:hover {
	transform: translateX(4px) !important;
	border-color: var(--hx-accent, #2563eb) !important;
}

/* ── Ancho: el mismo del encabezado ─────────────────────────────────────────
   Las secciones ya llevan `max-width:1500px`, igual que .site-header-inner. Para
   que los bordes coincidan de verdad hace falta también su mismo padding lateral
   (Tailwind `lg:px-8` = 32px); el diseño traía 26px y el contenido quedaba 6px a la
   izquierda del logo. Va con !important porque compite con el estilo inline. */
/* Siete son <section> y el del hero es un <div>: el selector va por el atributo,
   no por la etiqueta, o el hero quedaría 6px desalineado del resto. */
@media ( min-width: 1024px ) {
	.hsi-apps-hub [style*="max-width:1500px"] {
		padding-left: 32px !important;
		padding-right: 32px !important;
	}
}

/* ── Móvil ───────────────────────────────────────────────────────────────── */
/* Casi todas las grillas del diseño son `auto-fit`, así que ya se reacomodan
   solas. La única con columnas fijas es la tabla comparativa. */
@media ( max-width: 820px ) {
	.hsi-apps-hub .hx-cmp {
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch;
	}

	.hsi-apps-hub .hx-cmp > div {
		min-width: 620px;
	}
}

@media ( max-width: 620px ) {
	/* Los títulos del diseño están en px fijos y en un móvil desbordan. */
	.hsi-apps-hub h1[style*="font-size"] { font-size: clamp(28px, 8vw, 44px) !important; }
	.hsi-apps-hub h2[style*="font-size"] { font-size: clamp(21px, 6vw, 30px) !important; }

	/* Las secciones llevan 26px de padding lateral: se ajusta para ganar ancho.
	   Por atributo y no por etiqueta, por lo mismo que arriba: el hero es un <div>. */
	.hsi-apps-hub [style*="max-width:1500px"] {
		padding-left: 18px !important;
		padding-right: 18px !important;
	}

	/* La rejilla de columnas del footer y el CTA quedan mejor en una sola. */
	.hsi-apps-hub [style*="grid-template-columns:repeat(auto-fit,minmax(280px"],
	.hsi-apps-hub [style*="grid-template-columns:repeat(auto-fit,minmax(300px"],
	.hsi-apps-hub [style*="grid-template-columns:repeat(auto-fit,minmax(330px"] {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}