/*
 * Acuántico OS — hoja de estilos base.
 *
 * Principio de diseño (§0 de la especificación): el escritorio es una capa
 * VISUAL sobre HTML semántico real. Nada aquí depende de JavaScript para
 * ser legible o navegable — JS solo añade adornos (ver shell.js).
 *
 * Paleta: oscuro, texto siempre blanco, acentos en rojo — reutilizando el
 * mismo rojo (#ff2a2a) que el propio contenido del sitio ya usaba en sus
 * bloques HTML a mano (TechLab, CyberScan), para continuidad de marca.
 */

:root {
	--ap-bg: #0a0a0a;
	--ap-surface: #121212;
	--ap-surface-raised: #1a1a1a;
	--ap-surface-card: linear-gradient(155deg, #1d1d1d 0%, #151515 100%);
	--ap-border: #262626;
	--ap-border-soft: rgba(255, 255, 255, 0.06);
	--ap-text: #f4f4f4;
	--ap-text-dim: #b8b8b8;
	--ap-accent: #ff2a2a;
	--ap-accent-soft: rgba(255, 42, 42, 0.16);
	--ap-accent-dim: #7a1414;
	--ap-focus: #ff6b6b;
	--ap-radius: 10px;
	--ap-radius-lg: 16px;
	--ap-dock-height: 64px;
	--ap-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
	--ap-shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 10px 24px rgba(0, 0, 0, 0.35);
	--ap-shadow-card-hover: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 18px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 42, 42, 0.35);
	--ap-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--ap-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

* {
	box-sizing: border-box;
}

html {
	background: var(--ap-bg);
}

body.acuantico-os {
	background: var(--ap-bg);
	background-image:
		radial-gradient(ellipse 80% 50% at 20% -10%, rgba(255, 42, 42, 0.12), transparent),
		radial-gradient(ellipse 60% 40% at 90% 10%, rgba(90, 20, 130, 0.10), transparent);
	background-attachment: fixed;
	color: var(--ap-text);
	font-family: var(--ap-font);
	margin: 0;
	min-height: 100vh;
	line-height: 1.6;
	padding-bottom: calc(var(--ap-dock-height) + 24px);
}

a {
	color: var(--ap-accent);
	text-decoration: none;
}

a:hover,
a:focus-visible {
	text-decoration: underline;
}

:focus-visible {
	outline: 2px solid var(--ap-focus);
	outline-offset: 2px;
}

/* ---------- skip link (accesibilidad, §41 de la especificación) ---------- */

.ap-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--ap-accent);
	color: #fff;
	padding: 12px 20px;
	z-index: 1000;
	border-radius: 0 0 var(--ap-radius) 0;
}

.ap-skip-link:focus {
	left: 0;
}

/* Patrón estándar "solo lector de pantalla": el texto real siempre está
   presente en el DOM para accesibilidad, aunque la versión visual de al
   lado sea la que se anima/manipula por JS. */
.ap-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- ventana única de contenido ---------- */

.ap-window {
	/* 1180px, no 880px: bastante contenido existente en el sitio (tarjetas
	   a 3 columnas, secciones anchas) se diseñó para un ancho de página
	   normal tipo Astra, no para una "ventana" estrecha — con 880px se
	   recortaba en seco por el overflow:hidden de abajo. */
	position: relative;
	/* La onda de osciloscopio (.ap-oscilloscope, más abajo) es fija y de
	   fondo — tiene que quedar POR DEBAJO de esta ventana (y de todo lo
	   que hay dentro, anuncios de AdSense incluidos, que heredan este
	   mismo contexto de apilamiento al ser descendientes normales). */
	z-index: 1;
	max-width: 1180px;
	margin: 32px auto;
	background: var(--ap-surface);
	border: 1px solid var(--ap-border);
	border-radius: var(--ap-radius-lg);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 30px 80px rgba(0, 0, 0, 0.55);
	/* overflow-x: auto en vez de hidden: si aun así algo desborda (contenido
	   antiguo con anchos fijos en px), se puede desplazar en vez de
	   desaparecer en silencio. overflow-y visible para no cortar verticalmente. */
	overflow-x: auto;
}


.ap-window-frame {
	position: relative;
	display: flex;
	align-items: center;
	padding: 10px 16px;
	background: var(--ap-surface-raised);
	border-bottom: 1px solid var(--ap-border);
	border-radius: var(--ap-radius-lg) var(--ap-radius-lg) 0 0;
	overflow: hidden;
}

.ap-window-frame::before {
	/* línea de acento superior — un detalle que separa "panel premium" de
	   "caja gris con borde" */
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--ap-accent) 20%, var(--ap-accent) 80%, transparent);
	opacity: 0.75;
}

.ap-window-dots {
	display: flex;
	gap: 8px;
}

.ap-window-dots span {
	width: 12px;
	height: 12px;
	border-radius: 50%;
}

/* colores de controles de ventana estilo escritorio Linux/GNOME */
.ap-window-dots span:nth-child(1) { background: #ff5f57; }
.ap-window-dots span:nth-child(2) { background: #febc2e; }
.ap-window-dots span:nth-child(3) { background: #28c840; }

@media (max-width: 640px) {
	/* En móvil no se simula marco de ventana de escritorio — contenido
	   nativo a pantalla completa (ver §0, decisión ya tomada). */
	.ap-window-frame {
		display: none;
	}
}

.ap-window-title {
	font-size: 13px;
	color: var(--ap-text-dim);
	font-family: var(--ap-font-mono);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ap-window-body {
	padding: 28px 32px 40px;
}

@media (max-width: 640px) {
	/* En móvil no simulamos ventana flotante: contenido a pantalla completa
	   (§0 principio "el móvil no necesita simular escritorio Garuda"). */
	.ap-window {
		margin: 0;
		border-radius: 0;
		border-left: none;
		border-right: none;
	}
	.ap-window-body {
		/* El padding superior se aumenta respecto al de escritorio a
		   propósito: .ap-lang-nav es "position: fixed" y centrado en la
		   parte de arriba de la pantalla en TODAS las páginas. En portada
		   cae en el hueco vacío entre el reloj y los iconos de la barra de
		   estado (sin choque visual), pero en páginas interiores caería
		   encima de la miga de pan (que empieza pegada arriba y ocupa todo
		   el ancho) tapando parte de su texto. Este hueco extra es lo que
		   evita ese solape en cualquier página con miga de pan. */
		padding: 56px 18px 32px;
	}
}

/* ---------- breadcrumbs ---------- */

.ap-breadcrumb {
	font-size: 13px;
	color: var(--ap-text-dim);
	margin-bottom: 18px;
}

.ap-breadcrumb a {
	color: var(--ap-text-dim);
}

.ap-breadcrumb a:hover {
	color: var(--ap-accent);
}

/* ---------- contenido ---------- */

.ap-decrypt-banner {
	font-family: var(--ap-font-mono);
	text-align: center;
	font-size: 84px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	margin: 14px 0 32px;
	line-height: 1.1;
}

.ap-decrypt-visual {
	display: inline-block;
}

/* Carácter todavía sin resolver: apagado, borroso, parpadeando entre
   glifos — lectura de "estática/ruido" mientras se prueban combinaciones. */
.ap-char {
	display: inline-block;
	white-space: pre;
	color: #8a2626;
	text-shadow: none;
	filter: blur(0.4px);
	opacity: 0.85;
}

/* Carácter recién fijado: destello blanco que se relaja al rojo de marca,
   con un ligero "pop" de escala — la sensación de "encontrado". */
.ap-char.ap-decrypt-char-locked {
	animation: ap-char-lock 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.3) forwards;
}

@keyframes ap-char-lock {
	0% {
		color: #fff;
		text-shadow: 0 0 16px #fff, 0 0 32px rgba(255, 255, 255, 0.6);
		filter: blur(0);
		transform: scale(1.18);
	}
	55% {
		color: #ff8080;
		text-shadow: 0 0 20px rgba(255, 42, 42, 0.8);
		transform: scale(1.03);
	}
	100% {
		color: var(--ap-accent);
		text-shadow: 0 0 18px rgba(255, 42, 42, 0.45);
		filter: blur(0);
		transform: scale(1);
	}
}

.ap-decrypt-banner.is-done .ap-char {
	color: var(--ap-accent);
	text-shadow: 0 0 18px rgba(255, 42, 42, 0.45);
	opacity: 1;
	filter: none;
}

.ap-decrypt-banner::after {
	content: "_";
	display: inline-block;
	font-family: var(--ap-font-mono);
	color: var(--ap-accent);
	text-shadow: 0 0 18px rgba(255, 42, 42, 0.45);
	margin-left: 3px;
	animation: ap-cursor-blink 1s step-end infinite;
}

.ap-decrypt-banner.is-done::after {
	display: none;
}

@keyframes ap-cursor-blink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0; }
}

@media (max-width: 640px) {
	.ap-decrypt-banner {
		font-size: 30px;
		letter-spacing: 0.04em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ap-decrypt-banner::after {
		animation: none;
	}
	.ap-char.ap-decrypt-char-locked {
		animation: none;
	}
}

.ap-window-body h1:not(.ap-decrypt-banner) {
	font-size: 28px;
	margin: 0 0 20px;
	color: var(--ap-text);
}

/* Encabezado por defecto para h2 SIN estilo propio (contenido antiguo con
   color/alineación en línea sigue mandando siempre: el estilo inline gana
   por especificidad, así que esto no le afecta). */
.ap-window-body h2 {
	color: var(--ap-accent);
	font-size: 20px;
	margin: 32px 0 12px;
}

/* Encabezado de sección "propio" (ej. "Tutoriales de Radio" que añade
   acuantico-core) — opt-in explícito, nunca aplicado al contenido legado. */
.ap-section-heading {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--ap-text) !important;
	font-size: 21px;
	margin: 36px 0 14px;
}

.ap-section-heading::before {
	content: "";
	flex-shrink: 0;
	width: 4px;
	height: 20px;
	border-radius: 2px;
	background: var(--ap-accent);
	box-shadow: 0 0 10px rgba(255, 42, 42, 0.6);
}

.ap-content img,
.ap-content iframe,
.ap-content video {
	max-width: 100%;
	height: auto;
	border-radius: 6px;
}

/* Los iframes de YouTube necesitan conservar su proporción: la regla
   genérica height:auto de arriba los dejaba bajos y descentrados. */
.ap-content .wp-block-embed-youtube {
	width: 100%;
	max-width: 900px;
	margin: 32px auto;
}

.ap-content .wp-block-embed-youtube .wp-block-embed__wrapper {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border: 1px solid var(--ap-border-soft);
	border-radius: 12px;
	background: #000;
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.3);
}

.ap-content .wp-block-embed-youtube .wp-block-embed__wrapper::before {
	display: none;
}

.ap-content .wp-block-embed-youtube iframe {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: 0;
}

/* Red de seguridad: bastante contenido antiguo del sitio trae anchos fijos
   en píxeles inline (flex: 1 1 240px, width:400px, etc.) pensados para un
   layout de página normal ancha. No podemos reescribir cada página, así
   que forzamos que ningún hijo directo pueda ser más ancho que la ventana. */
.ap-content > * {
	max-width: 100%;
}

.ap-content [style*="display: flex"],
.ap-content [style*="display:flex"] {
	flex-wrap: wrap !important;
}

/* ---------- bloques de Discovery ---------- */

.ap-discovery {
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid var(--ap-border);
}

.ap-discovery h3 {
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ap-text-dim);
	margin: 0 0 12px;
}

.ap-next-step {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	background:
		radial-gradient(120% 180% at 0% 0%, rgba(255, 42, 42, 0.14), transparent 55%),
		var(--ap-surface-card);
	border: 1px solid var(--ap-border);
	border-radius: var(--ap-radius-lg);
	padding: 20px 24px;
	margin-bottom: 28px;
	font-size: 17px;
	font-weight: 600;
	box-shadow: var(--ap-shadow-card);
	transition: transform 0.22s var(--ap-ease), box-shadow 0.22s var(--ap-ease), border-color 0.22s var(--ap-ease);
}

.ap-next-step::after {
	content: "→";
	flex-shrink: 0;
	font-size: 20px;
	color: var(--ap-accent);
	transition: transform 0.22s var(--ap-ease);
}

.ap-next-step:hover {
	border-color: var(--ap-accent-soft);
	box-shadow: var(--ap-shadow-card-hover);
	transform: translateY(-2px);
	text-decoration: none;
}

.ap-next-step:hover::after {
	transform: translateX(4px);
}

.ap-next-step .ap-eyebrow {
	display: block;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ap-accent);
	margin-bottom: 6px;
	font-family: var(--ap-font-mono);
	font-weight: 700;
}

.ap-related-grid,
.ap-hub-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 16px;
}

.ap-related-card,
.ap-hub-card {
	position: relative;
	background: var(--ap-surface-card);
	border: 1px solid var(--ap-border);
	border-radius: var(--ap-radius-lg);
	color: var(--ap-text);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	box-shadow: var(--ap-shadow-card);
	transition: transform 0.22s var(--ap-ease), box-shadow 0.22s var(--ap-ease), border-color 0.22s var(--ap-ease);
	overflow: hidden; /* la miniatura debe respetar el radio del borde */
}

/* Fila simple (LED + título): así son las tarjetas de "Relacionado"/
   "Pruébalo" (sin miniatura) y las de hub cuando el post no tiene imagen
   destacada — fallback, no debería verse casi nunca (§ comprobado: los 40
   posts de radio/ia-local/conciencia-digital sí tienen miniatura). */
.ap-related-card,
.ap-hub-card--no-thumb {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 16px 18px;
}

.ap-related-card::before,
.ap-hub-card--no-thumb::before {
	/* pequeño indicador de "entrada" tipo LED, coherente con el resto de
	   la marca (los mismos puntos rojos que ya usaba el contenido antiguo) */
	content: "";
	flex-shrink: 0;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ap-accent);
	box-shadow: 0 0 8px rgba(255, 42, 42, 0.7);
}

/* Tarjeta de hub CON miniatura: imagen arriba, título abajo — el formato
   "artículo con foto" que se espera en un listado de contenidos (Radio,
   IA local, Privacidad). */
.ap-hub-card:not(.ap-hub-card--no-thumb) {
	display: flex;
	flex-direction: column;
}

.ap-hub-card-media {
	display: block;
	aspect-ratio: 16 / 10;
	background: var(--ap-surface);
	overflow: hidden;
}

/* object-fit: contain, no cover — las miniaturas de este sitio van de
   1:1 (cuadradas) a 2.2:1 (panorámicas); con "cover" en una caja fija
   de 16:10 las cuadradas perdían ~35% de ancho por cada lado, cortando
   texto/logos del propio diseño de la imagen. "contain" garantiza que
   la imagen se vea COMPLETA siempre, a costa de una franja de fondo en
   los casos más extremos — preferible a perder contenido visual. */
.ap-hub-card-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform 0.3s var(--ap-ease);
}

.ap-hub-card:hover .ap-hub-card-img {
	transform: scale(1.02);
}

.ap-hub-card:not(.ap-hub-card--no-thumb) .ap-hub-card-body {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
}

.ap-hub-card:not(.ap-hub-card--no-thumb) .ap-hub-card-body::before {
	content: "";
	flex-shrink: 0;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ap-accent);
	box-shadow: 0 0 8px rgba(255, 42, 42, 0.7);
}

.ap-related-card:hover,
.ap-hub-card:hover {
	border-color: var(--ap-accent-soft);
	box-shadow: var(--ap-shadow-card-hover);
	transform: translateY(-3px);
	text-decoration: none;
}

.ap-related-card:active,
.ap-hub-card:active {
	transform: translateY(-1px);
}

/* ---------- "sigue explorando" (cierre de hub de tema) ---------- */

.ap-explore-lede {
	color: var(--ap-text-dim);
	font-size: 14px;
	line-height: 1.6;
	text-align: center;
	max-width: 640px;
	margin: 0 auto 26px;
}

.ap-explore-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 16px;
}

.ap-explore-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: var(--ap-surface-card);
	border: 1px solid var(--ap-border);
	border-radius: var(--ap-radius-lg);
	padding: 22px 20px;
	color: var(--ap-text);
	text-decoration: none;
	box-shadow: var(--ap-shadow-card);
	transition: transform 0.22s var(--ap-ease), box-shadow 0.22s var(--ap-ease), border-color 0.22s var(--ap-ease);
}

.ap-explore-card:hover {
	border-color: var(--ap-accent-soft);
	box-shadow: var(--ap-shadow-card-hover);
	transform: translateY(-3px);
	text-decoration: none;
}

.ap-explore-card:active {
	transform: translateY(-1px);
}

.ap-explore-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: var(--ap-accent-soft);
	box-shadow: 0 0 0 1px var(--ap-border-soft) inset;
	font-size: 19px;
	line-height: 1;
}

.ap-explore-icon img {
	width: 24px;
	height: 24px;
	filter: drop-shadow(0 0 3px rgba(255, 42, 42, .55));
}

.ap-explore-title {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ap-text);
}

.ap-explore-desc {
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--ap-text-dim);
	flex-grow: 1;
	margin: 0;
}

.ap-explore-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--ap-accent);
	font-family: var(--ap-font-mono);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-top: 4px;
}

.ap-explore-cta::after {
	content: "→";
	display: inline-block;
	transition: transform 0.22s var(--ap-ease);
}

.ap-explore-card:hover .ap-explore-cta::after {
	transform: translateX(4px);
}

/* ---------- paginación de hub (ap_hub id="...") ---------- */

.ap-hub-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 28px;
	padding: 16px;
	background: var(--ap-surface-card);
	border: 1px solid var(--ap-border);
	border-radius: var(--ap-radius-lg);
	box-shadow: var(--ap-shadow-card);
}

.ap-hub-page-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 22px;
	border: 1px solid var(--ap-accent-soft);
	border-radius: 999px;
	background: var(--ap-accent);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	font-family: var(--ap-font-mono);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	text-decoration: none;
	box-shadow: 0 0 0 rgba(255, 42, 42, 0);
	transition: transform 0.2s var(--ap-ease), box-shadow 0.2s var(--ap-ease), background 0.2s var(--ap-ease);
}

a.ap-hub-page-link:hover {
	background: #ff4444;
	box-shadow: 0 0 22px rgba(255, 42, 42, 0.55);
	transform: translateY(-2px) scale(1.03);
	text-decoration: none;
	color: #fff;
}

a.ap-hub-page-link:active {
	transform: translateY(0) scale(0.99);
}

.ap-hub-page-link.is-disabled {
	background: transparent;
	border-color: var(--ap-border);
	color: var(--ap-text-dim);
	opacity: 0.4;
	cursor: default;
	box-shadow: none;
}

.ap-hub-page-status {
	color: var(--ap-text);
	font-size: 14px;
	font-weight: 700;
	font-family: var(--ap-font-mono);
	padding: 0 4px;
	white-space: nowrap;
}

@media (max-width: 480px) {
	.ap-hub-pagination {
		gap: 10px;
		padding: 14px 10px;
		flex-wrap: wrap;
	}
	.ap-hub-page-link {
		padding: 10px 16px;
		font-size: 12.5px;
	}
	.ap-hub-page-status {
		order: -1;
		flex-basis: 100%;
		text-align: center;
		margin-bottom: 6px;
		font-size: 13px;
	}
}

/* ---------- dock de navegación (desktop) / barra inferior (móvil) ---------- */

.ap-dock {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: var(--ap-dock-height);
	background: rgba(15, 15, 15, 0.82);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-top: 1px solid var(--ap-border-soft);
	box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.03) inset, 0 -20px 40px rgba(0, 0, 0, 0.35);
	z-index: 100;
}

.ap-dock-inner {
	max-width: 960px;
	margin: 0 auto;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 0 12px;
	overflow-x: auto;
}

.ap-dock-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 6px 14px;
	border-radius: 10px;
	color: var(--ap-text-dim);
	font-size: 11px;
	white-space: nowrap;
	flex-shrink: 0;
	transition: color 0.18s var(--ap-ease), background 0.18s var(--ap-ease), transform 0.18s var(--ap-ease);
}

.ap-dock-item:hover {
	color: var(--ap-text);
	background: rgba(255, 255, 255, 0.06);
	text-decoration: none;
	transform: translateY(-2px);
}

.ap-dock-item.is-current {
	color: var(--ap-text);
	background: var(--ap-accent-soft);
	box-shadow: 0 0 0 1px rgba(255, 42, 42, 0.3) inset;
	text-decoration: none;
}

.ap-dock-icon {
	display: flex;
	line-height: 1;
}

.ap-dock-icon svg,
.ap-dock-icon img {
	width: 30px;
	height: 30px;
}

/* Brillo neón sutil en los 5 iconos recoloreados a rojo (Radio, IA local,
   Privacidad, Herramientas, Contacto) — el logo de Inicio (.ap-dock-logo,
   una <img>, no <svg>) queda fuera de este selector a propósito, no le
   pega el mismo tratamiento. */
.ap-dock-icon svg {
	filter: drop-shadow(0 0 3px rgba(255, 42, 42, 0.55));
}

.ap-dock-logo {
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

/* "Bandeja de sistema" del dock: reloj (hora arriba, fecha debajo, como
   una bandeja de SO real) + botón de cookies pequeño junto a él — solo PC.
   En móvil el dock ya va muy justo de espacio (ver compactación de abajo)
   y el acceso a cookies vive en la barra de estado Android en su lugar
   (mobile-home.php), así que la bandeja entera se oculta ahí. */
.ap-dock-tray {
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	gap: 10px;
}

.ap-dock-clock {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	line-height: 1.25;
	font-variant-numeric: tabular-nums;
	color: var(--ap-text-dim);
	white-space: nowrap;
	pointer-events: none;
}

.ap-dock-clock-time {
	font-size: 15px;
	font-weight: 600;
	color: var(--ap-text);
}

.ap-dock-clock-date {
	font-size: 12px;
	text-transform: capitalize;
}

.ap-consent-reopen--desktop,
.ap-terms-link--desktop {
	font-size: 14px;
	line-height: 1;
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 8px;
	opacity: 0.75;
	text-decoration: none;
	transition: opacity 0.18s var(--ap-ease), background 0.18s var(--ap-ease), border-color 0.18s var(--ap-ease);
}

.ap-consent-reopen--desktop:hover,
.ap-terms-link--desktop:hover {
	opacity: 1;
	background: rgba(255, 255, 255, 0.06);
	border-color: var(--ap-border-soft);
}

@media (max-width: 640px) {
	.ap-dock-tray {
		display: none;
	}
}

@media (max-width: 480px) {
	/* Ajusta los 6 iconos del dock para que quepan sin scroll horizontal
	   en teléfonos estrechos (~360-390px), en vez de depender del scroll. */
	.ap-dock-inner {
		gap: 0;
		padding: 0 4px;
		justify-content: space-between;
	}
	.ap-dock-item {
		padding: 6px 4px;
		font-size: 9.5px;
	}
	.ap-dock-icon svg,
	.ap-dock-icon img {
		width: 24px;
		height: 24px;
	}
}

/* ---------- selector de idioma ---------- */

.ap-lang-nav {
	position: fixed;
	top: 14px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 6px;
	z-index: 100;
	background: rgba(18, 18, 18, 0.85);
	backdrop-filter: blur(8px);
	border: 1px solid var(--ap-border);
	border-radius: 999px;
	padding: 4px;
}

.ap-lang-nav a {
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 12px;
	color: var(--ap-text-dim);
	font-family: var(--ap-font-mono);
}

.ap-lang-nav a.is-current {
	background: var(--ap-accent);
	color: #fff;
}

/* ---------- barra de estado estilo Android (solo móvil, todas las páginas) ---------- */

.ap-android-home {
	display: none; /* oculto en escritorio: ahí la portada es solo la ventana Garuda normal */
}

@media (max-width: 640px) {
	.ap-android-home {
		display: block;
		margin: 0 0 18px;
		/* Fija: se queda siempre visible al hacer scroll, en vez de
		   desplazarse con el contenido — sticky en vez de fixed a
		   propósito: al seguir contando en el flujo normal, el propio
		   navegador reserva su alto real automáticamente (nunca hace
		   falta adivinar un padding-top de compensación como sí exige
		   el dock fijo de abajo). Mismo z-index que el resto del chrome
		   fijo global (dock/selector de idioma). */
		position: sticky;
		top: 0;
		z-index: 90;
		background: rgba(15, 15, 15, 0.82);
		backdrop-filter: blur(14px);
		-webkit-backdrop-filter: blur(14px);
		border-bottom: 1px solid var(--ap-border-soft);
	}

	.ap-status-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 8px 16px;
		font-size: 12px;
		font-family: var(--ap-font-mono);
		color: var(--ap-text-dim);
	}

	.ap-status-left {
		display: flex;
		align-items: center;
		gap: 8px;
	}

	.ap-status-icons {
		display: flex;
		align-items: center;
		gap: 6px;
	}

	.ap-status-icon {
		display: block;
		color: var(--ap-text-dim);
	}

	/* Envoltorio del icono de cookies en la barra de estado — mismo hueco
	   visual que el resto de iconos (decorativos), pero interactivo de
	   verdad: reset de <button> para que no aporte padding/borde propios. */
	.ap-status-icon-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		background: transparent;
		border: none;
		color: inherit;
		cursor: pointer;
		text-decoration: none;
	}

	.ap-status-battery-label {
		margin-left: 2px;
	}

}

/* ---------- publicidad ----------
 * Los anuncios los sirve por completo Google AdSense Auto ads (Side rail y
 * Anchor oficiales), insertados por Site Kit. El tema no aporta CSS de
 * anuncios. Historial de los rieles artesanales retirados: inc/ads.php.
 */

/* ---------- diálogo de consentimiento ---------- */
/*
 * Misma "ventana de escritorio" que .ap-window (marco con puntos, radio,
 * sombra), pero flotante y centrada en vez de contenido de página — sí
 * visible en móvil (a diferencia de .ap-window-frame, que ahí se oculta):
 * pedir consentimiento no es un adorno de escritorio que se pueda apagar
 * en pantallas pequeñas.
 */

.ap-consent {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.ap-consent[hidden] {
	display: none;
}

.ap-consent-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}

.ap-consent-window {
	position: relative;
	width: 100%;
	max-width: 480px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	background: var(--ap-surface);
	border: 1px solid var(--ap-border);
	border-radius: var(--ap-radius-lg);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 30px 80px rgba(0, 0, 0, 0.6);
	animation: ap-consent-in 0.22s var(--ap-ease);
}

@keyframes ap-consent-in {
	from { opacity: 0; transform: translateY(8px) scale(0.98); }
	to   { opacity: 1; transform: none; }
}

.ap-consent-body {
	padding: 22px 24px 24px;
}

.ap-consent-body h2 {
	margin: 0 0 10px;
	font-size: 19px;
	color: var(--ap-text);
}

.ap-consent-intro {
	margin: 0 0 18px;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--ap-text-dim);
}

.ap-consent-categories {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 18px;
	padding-top: 4px;
	border-top: 1px solid var(--ap-border-soft);
}

/* Sin esto, el "display: flex" de arriba gana sobre el [hidden] nativo del
   navegador (misma especificidad, pero regla de autor vs. la hoja de
   estilos por defecto del navegador) y el desplegable se ve siempre
   abierto, aunque el atributo hidden esté puesto — comprobado en vivo. */
.ap-consent-categories[hidden] {
	display: none;
}

.ap-consent-cat {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 8px 4px;
	cursor: pointer;
}

.ap-consent-cat.is-locked {
	cursor: default;
	opacity: 0.7;
}

.ap-consent-cat input {
	margin-top: 3px;
	accent-color: var(--ap-accent);
	flex-shrink: 0;
}

.ap-consent-cat span {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ap-consent-cat strong {
	font-size: 13.5px;
	color: var(--ap-text);
	font-weight: 600;
}

.ap-consent-cat small {
	font-size: 12px;
	line-height: 1.5;
	color: var(--ap-text-dim);
}

.ap-consent-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ap-consent-actions[hidden] {
	display: none;
}

.ap-consent-btn {
	flex: 1 1 auto;
	padding: 10px 14px;
	font-size: 13px;
	font-family: inherit;
	font-weight: 600;
	color: var(--ap-text-dim);
	background: var(--ap-surface-raised);
	border: 1px solid var(--ap-border);
	border-radius: var(--ap-radius);
	cursor: pointer;
	transition: color 0.18s var(--ap-ease), background 0.18s var(--ap-ease), border-color 0.18s var(--ap-ease);
}

.ap-consent-btn:hover {
	color: var(--ap-text);
	border-color: var(--ap-text-dim);
}

.ap-consent-btn.is-primary {
	color: var(--ap-text);
	background: var(--ap-accent);
	border-color: var(--ap-accent);
}

.ap-consent-btn.is-primary:hover {
	background: var(--ap-focus);
	border-color: var(--ap-focus);
}

.ap-consent-btn:focus-visible,
.ap-consent-reopen:focus-visible,
.ap-terms-link:focus-visible {
	outline: 2px solid var(--ap-focus);
	outline-offset: 2px;
}

.ap-consent-footnote {
	margin: 16px 0 0;
	text-align: center;
	font-size: 12px;
}

.ap-consent-footnote a {
	color: var(--ap-text-dim);
}

.ap-consent-footnote a:hover {
	color: var(--ap-accent);
}

/* Botón "reabrir" — base compartida entre la variante de escritorio
   (bandeja del dock, junto al reloj) y la de móvil (sustituye al icono de
   Bluetooth de la barra de estado): reset del estilo nativo de <button>
   para que no meta chrome de navegador de por medio. El tamaño/posición
   concretos los pone cada variante (.ap-consent-reopen--desktop más
   arriba, .ap-status-icon-btn más abajo). */
.ap-consent-reopen {
	font-family: inherit;
	background: transparent;
	border: none;
	cursor: pointer;
}

/* ---------- transición entre páginas: "minimizar ventana" ---------- */
/*
 * View Transitions nativas de documento completo (Chrome/Edge recientes).
 * Cero JavaScript, cero intercepción de clics — los <a href> siguen siendo
 * navegación real de toda la vida (§0 del tema: "nada depende de JS para
 * ser navegable"); en navegadores sin soporte esta regla simplemente no
 * hace nada y la navegación es la instantánea de siempre.
 *
 * A propósito NO se anima "root" (fondo del escritorio + dock) — eso daría
 * la sensación de que la PESTAÑA/VENTANA REAL del navegador se encoge, que
 * es justo lo que no se quiere. Solo .ap-window (la ventana falsa que
 * contiene el contenido, con su marco de puntos) tiene view-transition-name
 * propio, así que es la ÚNICA que la API anima por separado; el resto del
 * escritorio (fondo, dock) queda fuera de esa animación y se ve estático,
 * como si de verdad hubiera una ventana de app minimizándose sobre un
 * escritorio quieto. Solo en desktop — en móvil .ap-window no simula
 * ventana flotante (ver su propio media query arriba), así que ahí no
 * tiene sentido nombrarla.
 *
 * .ap-dock y .ap-lang-nav son position:fixed — sin su PROPIO grupo nombrado
 * (con animation:none) quedan capturados dentro de "root" como parte de una
 * única instantánea de página completa, y esa instantánea de "root" puede
 * desplazarse ligeramente entre la página vieja y la nueva (p. ej. si
 * cambia el scroll o el alto de página) aunque su animación esté en
 * "none" — el propio contenedor fixed hereda ese desplazamiento. Sacarlos
 * a su propio grupo, quieto de verdad, es el arreglo documentado por
 * Chrome para "la barra fija se mueve durante la transición".
 */
@view-transition {
	navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
	animation: none;
	mix-blend-mode: normal;
}

@media (min-width: 641px) {
	.ap-window {
		view-transition-name: ap-app-window;
	}
}

.ap-dock {
	view-transition-name: ap-dock;
}

.ap-lang-nav {
	view-transition-name: ap-lang-nav;
}

::view-transition-old(ap-dock),
::view-transition-new(ap-dock),
::view-transition-old(ap-lang-nav),
::view-transition-new(ap-lang-nav) {
	animation: none;
	mix-blend-mode: normal;
}

::view-transition-group(ap-dock),
::view-transition-group(ap-lang-nav) {
	animation-duration: 0s;
}

::view-transition-old(ap-app-window),
::view-transition-new(ap-app-window) {
	transform-origin: 50% 100%;
}

/* La duración del propio grupo (el "morphing" de tamaño que hace la API
   por defecto entre la caja vieja y la nueva, con su propia duración por
   defecto) tiene que durar LO MISMO que la animación de contenido de abajo
   — si no, el cambio de forma termina antes que el fundido y la transición
   se ve cortada a mitad. */
::view-transition-group(ap-app-window) {
	animation-duration: 0.42s;
}

@media not (prefers-reduced-motion: reduce) {
	::view-transition-old(ap-app-window) {
		animation: ap-window-minimize 0.32s cubic-bezier(0.4, 0, 0.6, 1) both;
	}
	::view-transition-new(ap-app-window) {
		animation: ap-window-restore 0.34s cubic-bezier(0.16, 1, 0.3, 1) both;
		animation-delay: 0.08s;
	}
}

@keyframes ap-window-minimize {
	from {
		transform: scale(1) translateY(0);
		opacity: 1;
	}
	to {
		transform: scale(0.82) translateY(56px);
		opacity: 0;
	}
}

@keyframes ap-window-restore {
	from {
		transform: scale(0.9) translateY(28px);
		opacity: 0;
	}
	to {
		transform: scale(1) translateY(0);
		opacity: 1;
	}
}

/* ---------- ondas de osciloscopio (decorativas, fijas, sin JS) ---------- */
/*
 * position:fixed + pointer-events:none: nunca interfiere con scroll ni
 * clics, ni afecta al layout de nadie (fuera del flujo normal). Ancho Y
 * ALTO completos del viewport — 5 filas repartidas de arriba a abajo, no
 * solo una franja central. Fondo transparente — el negro de fondo lo pone
 * ya el propio body.acuantico-os, esta capa no pinta nada más que las
 * líneas.
 *
 * Solo escritorio: oculto por defecto (display:none, mismo criterio que
 * apagar del todo la animación — con display:none el navegador no pinta
 * ni anima nada de lo que hay dentro, coste real cero) y solo se activa
 * a partir del mismo breakpoint de 641px que ya usa el tema en el resto
 * de sitios para separar escritorio de móvil (ver más abajo, sección de
 * view-transitions). El HTML/SVG se sigue enviando en el móvil (unos
 * pocos KB, no cambia el marcado según User-Agent), así que la página no
 * varía según dispositivo — sin eso, la caché de página tendría que
 * servir una variante distinta por User-Agent, con el riesgo de
 * mezclarlas; con CSS puro no hay ese riesgo.
 */
.ap-oscilloscope {
	display: none;
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	pointer-events: none;
	overflow: hidden;
	background: transparent;
	/* Por debajo de .ap-window (z-index:1) y de todo lo que vive dentro
	   (incluidos los anuncios de AdSense) — solo por encima del fondo
	   plano de la página. El dock/selector de idioma/diálogo de cookies
	   (100/100/1000) siguen intocables por encima de todo, como siempre. */
	z-index: 0;
}

@media (min-width: 641px) {
	.ap-oscilloscope {
		display: block;
	}
}

.ap-oscilloscope-svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* El <g> interior contiene la pieza de onda dibujada DOS veces seguidas
   (mismo ancho que el viewBox) — desplazarlo exactamente 800px y volver a
   0 en bucle produce un scroll infinito sin salto visible: la segunda
   copia siempre ocupa el sitio exacto que deja la primera. --fwd y --rev
   van en sentidos opuestos a propósito (onda 2 contraria a la onda 1). */
.ap-oscilloscope-track--fwd {
	animation: ap-osc-scroll-fwd 9s linear infinite;
}

.ap-oscilloscope-track--rev {
	animation: ap-osc-scroll-rev 9s linear infinite;
}

@keyframes ap-osc-scroll-fwd {
	from { transform: translateX(0); }
	to   { transform: translateX(-800px); }
}

@keyframes ap-osc-scroll-rev {
	from { transform: translateX(0); }
	to   { transform: translateX(800px); }
}

/* Trazo base: la única onda que queda, siempre visible. Rojo puro y
   saturado (no el --ap-accent normal, que se queda corto aquí) para que
   se lea como un rojo neón vivo de verdad sobre el fondo negro. Lleva el
   único glow (feGaussianBlur) del osciloscopio: al animarse solo con
   transform:translateX (nunca cambia de forma), el navegador puede
   cachear el resultado ya difuminado como una textura y solo desplazarla
   — barato de verdad, sin recalcular el desenfoque en cada fotograma.
   Antes llevaba un segundo trazo de "pulso" (stroke-dashoffset, un
   destello viajando por encima) — se quitó entero: a diferencia de este
   scroll, stroke-dashoffset cambia la geometría del trazo en cada
   fotograma, 10 elementos recalculándose sin parar en toda la página —
   la causa real detectada por consumo/temperatura anormal al abrir el
   sitio. */
.ap-oscilloscope-base {
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke: #ff1414;
	stroke-width: 2;
	opacity: 0.7;
	filter: url(#ap-osc-glow);
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
		animation: none !important;
	}
	/* El bloque de arriba no alcanza a las pseudo-elementos de view
	   transition (no son parte del árbol normal que "*" recorre) — se
	   apagan aquí explícitamente para respetar la preferencia del
	   visitante también en la navegación entre páginas. */
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}
}