/* ── Landing de ASTRAL MCP (/astral/) ─────────────────────────────────────────
   Portada del bundle standalone que se armaba en el navegador. El diseño usa
   estilos inline en cada elemento; aquí queda solo lo que no cabe en un atributo:
   el fondo de la página, los keyframes y los estados de hover.

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

/* La página es oscura de punta a punta. Se pinta el html además del wrapper para
   que el rebote del scroll en móvil no enseñe el fondo claro del tema. */
html:has(#astral-landing),
body:has(#astral-landing) {
	background: #07060d;
}

.astral-landing {
	background: #07060d;
	color: #eceaf4;
	font-family: 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
	text-wrap: pretty;
	overflow-x: hidden;
}

/* El diseño trae su propia tipografía de títulos; sin esto el tema les pone
   Poppins y cambian todas las proporciones del original. */
.astral-landing h1,
.astral-landing h2,
.astral-landing h3,
.astral-landing h4 {
	font-family: inherit;
}

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

.astral-landing p,
.astral-landing h1,
.astral-landing h2,
.astral-landing h3,
.astral-landing h4,
.astral-landing ul,
.astral-landing ol,
.astral-landing figure {
	margin: 0;
	padding: 0;
}

.astral-landing a {
	color: #a78bfa;
	text-decoration: none;
}

.astral-landing a:hover {
	color: #c4b3ff;
}

.astral-landing ::selection {
	background: rgba(167, 139, 250, .3);
}

/* Foco visible: el diseño original no lo tenía y la página se recorre entera con
   los botones de los planes y las ocho herramientas. */
.astral-landing a:focus-visible,
.astral-landing [data-astral-tool]:focus-visible {
	outline: 2px solid #a78bfa;
	outline-offset: 3px;
	border-radius: 10px;
}

/* ── Animaciones del diseño ──────────────────────────────────────────────── */
@keyframes floaty      { 0%, 100% { transform: translateY(0); }      50% { transform: translateY(-9px); } }
@keyframes driftglow   { 0%, 100% { transform: translate(0, 0); }    50% { transform: translate(34px, -26px); } }
@keyframes orbbreathe  { 0%, 100% { opacity: .92; transform: scale(1); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes orbspin     { to { transform: rotate(360deg); } }
@keyframes astralpulse { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }
@keyframes astralping {
	0%   { box-shadow: 0 0 0 0 rgba(52, 199, 123, .45); }
	70%  { box-shadow: 0 0 0 7px rgba(52, 199, 123, 0); }
	100% { box-shadow: 0 0 0 0 rgba(52, 199, 123, 0); }
}

/* `pulse` y `ping` son nombres demasiado comunes: el tema o un plugin pueden
   declararlos y ganar. Se remapean a los propios sin tocar el markup. */
.astral-landing [style*="animation:pulse"] { animation-name: astralpulse !important; }
.astral-landing [style*="animation:ping"]  { animation-name: astralping  !important; }

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

/* ── Cards de herramienta ────────────────────────────────────────────────── */
/* En el bundle el hover iba en un atributo `style-hover`, que no es HTML real. */
.astral-landing .astral-hover {
	transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

.astral-landing .astral-hover:hover {
	background: rgba(255, 255, 255, .055) !important;
	border-color: rgba(167, 139, 250, .35) !important;
	transform: translateY(-3px);
}

/* ── Modales de acciones ─────────────────────────────────────────────────── */
/* Los ocho van en el HTML y arrancan ocultos. El !important es necesario: el
   estilo inline del diseño trae `display:grid`, que le gana al `hidden`. */
[data-astral-modal][hidden] {
	display: none !important;
}

/* ── Móvil ───────────────────────────────────────────────────────────────── */
/* El diseño fija las grillas en 3 y 4 columnas con estilos inline. En pantalla
   chica hay que deshacerlo, y por eso va con !important. */
@media ( max-width: 980px ) {
	.astral-landing [style*="grid-template-columns:repeat(4,1fr)"],
	.astral-landing [style*="grid-template-columns:repeat(3,1fr)"] {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.astral-landing [style*="grid-template-columns:1.03fr 1fr"],
	.astral-landing [style*="grid-template-columns:1.1fr 1fr"],
	.astral-landing [style*="grid-template-columns:1.4fr 1fr 1fr 1fr"],
	.astral-landing [style*="grid-template-columns:1fr 1fr"] {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

@media ( max-width: 620px ) {
	.astral-landing [style*="grid-template-columns"] {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	/* Los títulos del diseño están en px fijos y en un móvil desbordan. */
	.astral-landing h1[style*="font-size"] { font-size: clamp(30px, 8.5vw, 46px) !important; }
	.astral-landing h2[style*="font-size"] { font-size: clamp(24px, 6.5vw, 36px) !important; }

	/* Secciones con 28px de padding lateral: se ajusta para ganar ancho útil. */
	.astral-landing section[style*="padding"] {
		padding-left: 18px !important;
		padding-right: 18px !important;
	}
}