/*
 * HUD — librería de grafismos reutilizable (esquineros, eyebrow, banner,
 * barra de estado, chips, botones angulares, crosshair, grid técnico).
 *
 * Global (encolada en todas las páginas desde functions.php). Pensada para
 * superficies azul/oscuras de la marca (texto blanco + acento cian). Markup
 * vía helpers trinocex_hud_*() o copiando las clases .hud-*.
 */

:root {
	--hud-cyan:      oklch(80% 0.15 228);
	--hud-cyan-soft: oklch(85% 0.13 225 / 0.4);
	--hud-line:      oklch(100% 0 0 / 0.22);
	--hud-ink:       oklch(22% 0.08 258);
	--hud-corner:    clamp(42px, 6vw, 82px);
}

/* ---- Marco de esquineros (corner brackets) --------------------------- */
.hud-frame { position: relative; }
.hud-frame__c {
	position: absolute;
	inline-size: var(--hud-corner);
	block-size: var(--hud-corner);
	z-index: 2;
	pointer-events: none;
	filter: drop-shadow(0 0 8px oklch(85% 0.14 228 / 0.3));
}
.hud-frame__c img { display: block; inline-size: 100%; block-size: 100%; }
.hud-frame__c--tl { inset-block-start: 0; inset-inline-start: 0; }
.hud-frame__c--tr { inset-block-start: 0; inset-inline-end: 0; transform: scaleX(-1); }
.hud-frame__c--bl { inset-block-end: 0; inset-inline-start: 0; transform: scaleY(-1); }
.hud-frame__c--br { inset-block-end: 0; inset-inline-end: 0; transform: scale(-1, -1); }
.hud-frame--sm  { --hud-corner: clamp(34px, 4.5vw, 58px); }
.hud-frame--lg  { --hud-corner: clamp(60px, 9vw, 132px); }

/* ---- Slash cian (grupo de barras inclinadas) ------------------------- */
.hud-slash {
	flex: none;
	inline-size: 2.1em;
	block-size: 0.85em;
	background: repeating-linear-gradient(115deg, var(--hud-cyan) 0 4px, transparent 4px 9px);
}

/* ---- Eyebrow / etiqueta de sección ----------------------------------- */
.hud-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	font-family: var(--font-techmono, 'Share Tech Mono', monospace);
	font-size: 0.78rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--hud-cyan);
}
.hud-eyebrow__text { flex: none; color: var(--hud-cyan); }
.hud-eyebrow__sep {
	flex: none;
	inline-size: 4px; block-size: 4px;
	background: var(--hud-cyan);
	transform: rotate(45deg);
}
.hud-eyebrow__ref { flex: none; color: oklch(100% 0 0 / 0.6); }
.hud-eyebrow__rail {
	flex: 1 1 auto;
	min-inline-size: 1.5rem;
	block-size: 1px;
	background: linear-gradient(90deg, var(--hud-cyan-soft), transparent);
}
.hud-eyebrow--center { justify-content: center; }
.hud-eyebrow--center .hud-eyebrow__rail { display: none; }

/* ---- Banner de sección (frame con tab + chevrons) -------------------- */
.hud-banner {
	--cap: clamp(2rem, 5vw, 3.4rem);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(1.1rem, 4vw, 2.6rem);
	inline-size: min(100%, 58rem);
	margin-inline: auto;
	padding: clamp(1.4rem, 4vw, 2.2rem) calc(var(--cap) + clamp(1rem, 3vw, 2.2rem));
	min-block-size: 4.6rem;
}
.hud-banner::before,
.hud-banner::after {
	content: '';
	position: absolute;
	inset-inline: var(--cap);
	block-size: 2px;
	background: oklch(100% 0 0 / 0.9);
}
.hud-banner::before { inset-block-start: 0; }
.hud-banner::after  { inset-block-end: 0; }
.hud-banner__cap {
	position: absolute;
	inset-block: 0;
	inline-size: var(--cap);
	border: 2px solid oklch(100% 0 0 / 0.9);
}
.hud-banner__cap--l { inset-inline-start: 0; border-inline-end: 0; border-radius: 14px 0 0 14px; }
.hud-banner__cap--r { inset-inline-end: 0; border-inline-start: 0; border-radius: 0 14px 14px 0; }
.hud-banner__tab {
	position: absolute;
	inset-block-start: -11px;
	inset-inline-start: 50%;
	transform: translateX(-50%);
	display: flex; align-items: center; justify-content: center; gap: 4px;
	inline-size: clamp(6.5rem, 15vw, 9.5rem);
	block-size: 22px;
	background: linear-gradient(180deg, #fff, #d3e1f4);
	clip-path: polygon(15px 0, calc(100% - 15px) 0, 100% 100%, 0 100%);
	box-shadow: 0 0 14px oklch(85% 0.14 228 / 0.4);
}
.hud-banner__tab i { inline-size: 5px; block-size: 11px; background: var(--hud-cyan); transform: skewX(-20deg); }
.hud-banner__foot {
	position: absolute;
	inset-block-end: -7px;
	inset-inline-start: 50%;
	transform: translateX(-50%);
	inline-size: clamp(4.5rem, 11vw, 6.5rem);
	block-size: 14px;
	background: linear-gradient(180deg, #cfe0f3, #fff);
	clip-path: polygon(0 0, 100% 0, calc(100% - 11px) 100%, 11px 100%);
}
.hud-banner__foot::after {
	content: '';
	position: absolute; inset-inline: 24%; inset-block-end: 3px;
	block-size: 3px; background: var(--hud-cyan);
	box-shadow: 0 0 8px oklch(85% 0.14 228 / 0.7);
}
.hud-banner__chev {
	flex: none; inline-size: 0.62em; block-size: 1em;
	background: var(--hud-cyan);
	filter: drop-shadow(0 0 6px oklch(85% 0.14 228 / 0.6));
}
.hud-banner__chev--l { clip-path: polygon(100% 0, 0 50%, 100% 100%); }
.hud-banner__chev--r { clip-path: polygon(0 0, 100% 50%, 0 100%); }
.hud-banner__text {
	font-family: var(--font-orbitron, 'Orbitron', sans-serif);
	font-weight: 800;
	font-size: clamp(1.2rem, 0.6rem + 2.6vw, 2.4rem);
	letter-spacing: clamp(0.05em, 1.2vw, 0.24em);
	text-transform: uppercase;
	color: #fff;
	white-space: nowrap;
	text-shadow: 0 0 22px oklch(85% 0.14 228 / 0.4);
}

/* ---- Barra de estado (segmentos + brackets de extremo) --------------- */
.hud-statusbar { display: flex; justify-content: center; }
.hud-statusbar__bar {
	position: relative;
	display: inline-flex; align-items: stretch; flex-wrap: wrap; justify-content: center;
}
.hud-statusbar__bar::before,
.hud-statusbar__bar::after {
	content: '';
	position: absolute; inset-block: -6px; inline-size: 14px;
	border: 2px solid var(--hud-cyan);
}
.hud-statusbar__bar::before { inset-inline-start: -16px; border-inline-end: 0; }
.hud-statusbar__bar::after  { inset-inline-end: -16px; border-inline-start: 0; }
.hud-stat {
	position: relative;
	padding: 0.5rem clamp(1rem, 3vw, 1.8rem);
	font-family: var(--font-techmono, 'Share Tech Mono', monospace);
}
.hud-stat + .hud-stat::before {
	content: '';
	position: absolute; inset-block: 6px; inset-inline-start: 0;
	inline-size: 1px; background: oklch(100% 0 0 / 0.3);
}
.hud-stat__t { font-weight: 600; font-size: 0.8rem; letter-spacing: 0.16em; color: #fff; text-transform: uppercase; }
.hud-stat__d { display: flex; align-items: center; gap: 0.5em; margin-block-start: 0.35rem; font-size: 0.68rem; letter-spacing: 0.1em; color: oklch(100% 0 0 / 0.72); }
.hud-stat__d i { inline-size: 8px; block-size: 8px; background: var(--hud-cyan); box-shadow: 0 0 6px oklch(85% 0.14 228 / 0.6); }

/* ---- Chip de estado --------------------------------------------------- */
.hud-chip {
	display: inline-flex; align-items: center; gap: 0.6em;
	padding: 0.5em 0.95em;
	border: 1px solid oklch(100% 0 0 / 0.28);
	font-family: var(--font-techmono, 'Share Tech Mono', monospace);
	font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: #fff;
	clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.hud-chip i { inline-size: 8px; block-size: 8px; background: oklch(80% 0.17 160); box-shadow: 0 0 7px oklch(80% 0.17 160 / 0.85); }
.hud-chip--cyan i { background: var(--hud-cyan); box-shadow: 0 0 7px var(--hud-cyan); }

/* ---- Botón angular ---------------------------------------------------- */
.hud-btn {
	display: inline-flex; align-items: center; gap: 0.6em;
	padding: 0.8em 1.4em;
	background: var(--hud-cyan); color: var(--hud-ink);
	font-family: var(--font-orbitron, 'Orbitron', sans-serif);
	font-weight: 700; font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase;
	text-decoration: none; cursor: pointer; border: 0;
	clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
	transition: filter 0.2s ease, transform 0.2s ease;
}
.hud-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.hud-btn--ghost {
	background: transparent; color: #fff;
	box-shadow: inset 0 0 0 1px oklch(100% 0 0 / 0.4);
}
.hud-btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--hud-cyan); color: var(--hud-cyan); filter: none; }

/* ---- Panel de esquinas cortadas -------------------------------------- */
.hud-panel {
	border: 1px solid var(--hud-cyan);
	background: oklch(100% 0 0 / 0.04);
	clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}

/* ---- Crosshair de registro ------------------------------------------- */
.hud-cross { display: inline-flex; color: oklch(100% 0 0 / 0.5); }

/* ---- Grid técnico (helper de fondo blueprint) ------------------------ */
.hud-grid-bg {
	background-image:
		linear-gradient(oklch(100% 0 0 / 0.05) 1px, transparent 1px),
		linear-gradient(90deg, oklch(100% 0 0 / 0.05) 1px, transparent 1px),
		linear-gradient(oklch(100% 0 0 / 0.028) 1px, transparent 1px),
		linear-gradient(90deg, oklch(100% 0 0 / 0.028) 1px, transparent 1px);
	background-size: 104px 104px, 104px 104px, 26px 26px, 26px 26px;
}

@media (prefers-reduced-motion: reduce) {
	.hud-btn { transition: none; }
}

/* ---- Footer HUD (global; superficie navy de la marca) ---------------- */
.site-footer {
	position: relative;
	overflow: hidden;
	--hud-corner: clamp(34px, 4vw, 56px);
	border-block-start: 1px solid var(--hud-cyan-soft);
}
.site-footer::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image:
		linear-gradient(oklch(100% 0 0 / 0.05) 1px, transparent 1px),
		linear-gradient(90deg, oklch(100% 0 0 / 0.05) 1px, transparent 1px);
	background-size: 60px 60px, 60px 60px;
	opacity: 0.6;
}
.site-footer__grid,
.site-footer__bottom { position: relative; z-index: 1; }
.site-footer .hud-frame__c--tl { inset: 14px auto auto 14px; }
.site-footer .hud-frame__c--tr { inset: 14px 14px auto auto; }
.site-footer .hud-frame__c--bl { inset: auto auto 14px 14px; }
.site-footer .hud-frame__c--br { inset: auto 14px 14px auto; }
.site-footer__brand .hud-eyebrow { margin-block-end: 0.9rem; }
.site-footer__name { font-family: var(--font-mecha); letter-spacing: 0.04em; }
.site-footer__menu a { transition: color 0.2s ease; }
.site-footer__menu a:hover { color: var(--hud-cyan); }