/*
 * GRAFISMOS — catálogo del sistema visual HUD / mecha-frame.
 * Solo se encola en is_page('grafismos') (ver functions.php). Vectorial puro.
 */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600;700;800;900&display=swap');

@font-face {
	font-family: 'JetBrains Mono';
	src: url('../fonts/jetbrains-mono-400.woff2') format('woff2');
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: 'JetBrains Mono';
	src: url('../fonts/jetbrains-mono-600.woff2') format('woff2');
	font-weight: 600;
	font-display: swap;
}

.gf {
	--gf-blue:   oklch(52% 0.17 252);
	--gf-cyan:   oklch(80% 0.15 228);
	--gf-cyan-d: oklch(62% 0.17 240);
	--gf-ink:    oklch(22% 0.08 258);
	--gf-mono:   'JetBrains Mono', ui-monospace, "SFMono-Regular", Menlo, monospace;
	--gf-disp:   'Orbitron', system-ui, sans-serif;

	position: relative;
	isolation: isolate;
	color: #fff;
	background-color: var(--gf-blue);
	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;
	overflow: hidden;
	padding: clamp(3rem, 7vw, 6rem) clamp(2rem, 6vw, 5.5rem) clamp(3.5rem, 8vw, 6.5rem);
}

/* ---- Esquineros (corner brackets) ------------------------------------- */
.gf__corner {
	position: absolute;
	inline-size: clamp(92px, 12vw, 168px);
	block-size: clamp(92px, 12vw, 168px);
	z-index: 2;
	pointer-events: none;
	filter: drop-shadow(0 0 10px oklch(85% 0.14 228 / 0.35));
}
.gf__corner--tl { inset-block-start: 18px; inset-inline-start: 18px; }
.gf__corner--tr { inset-block-start: 18px; inset-inline-end: 18px; transform: scaleX(-1); }
.gf__corner--bl { inset-block-end: 18px; inset-inline-start: 18px; transform: scaleY(-1); }
.gf__corner--br { inset-block-end: 18px; inset-inline-end: 18px; transform: scale(-1, -1); }
.gf__corner img { display: block; inline-size: 100%; block-size: 100%; }

/* ---- Marcas de registro de borde (crosshairs en los lados) ------------ */
.gf__reg {
	position: absolute;
	z-index: 1;
	color: oklch(100% 0 0 / 0.55);
}
.gf__reg--t { inset-block-start: 26px; inset-inline-start: 50%; transform: translateX(-50%); }
.gf__reg--b { inset-block-end: 26px; inset-inline-start: 50%; transform: translateX(-50%); }
.gf__reg--l { inset-inline-start: 26px; inset-block-start: 50%; transform: translateY(-50%); }
.gf__reg--r { inset-inline-end: 26px; inset-block-start: 50%; transform: translateY(-50%); }

/* ---- Cabecera --------------------------------------------------------- */
.gf__head {
	position: relative;
	z-index: 3;
	text-align: center;
	margin-block-end: clamp(2.5rem, 6vh, 4.5rem);
}
.gf__title {
	margin: clamp(0.6rem, 2vh, 1.1rem) 0 0;
	font-family: var(--font-mecha); /* Mechaside: logo / título gigante */
	font-weight: 400;
	font-size: clamp(2.4rem, 1rem + 7.5vw, 6.5rem);
	line-height: 0.98;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #fff;
	text-shadow: 0 0 28px oklch(85% 0.14 228 / 0.45);
}
.gf__sub {
	margin: clamp(0.9rem, 2.5vh, 1.5rem) 0 0;
	font-family: var(--gf-mono);
	font-size: clamp(0.72rem, 0.68rem + 0.3vw, 0.95rem);
	letter-spacing: 0.34em;
	text-indent: 0.34em;
	color: oklch(100% 0 0 / 0.8);
}

/* Etiqueta con corchetes/segmentos ( ‹‹ SYSTEM 01 ›› ). */
.gf__tag {
	display: inline-flex;
	align-items: center;
	gap: 0.7em;
	font-family: var(--gf-mono);
	font-weight: 600;
	font-size: 0.74rem;
	letter-spacing: 0.28em;
	text-indent: 0.28em;
	color: var(--gf-cyan);
}
.gf__tag::before,
.gf__tag::after {
	content: '';
	inline-size: 2.4em;
	block-size: 6px;
	background: repeating-linear-gradient(90deg, var(--gf-cyan) 0 5px, transparent 5px 9px);
}

/* ---- Galería de primitivas ------------------------------------------- */
.gf__grid {
	position: relative;
	z-index: 3;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
	gap: clamp(1rem, 2.4vw, 1.75rem);
	inline-size: min(100%, 78rem);
	margin-inline: auto;
}
.gf__cell {
	position: relative;
	display: flex;
	flex-direction: column;
	min-block-size: 11rem;
	padding: clamp(1.1rem, 2.5vw, 1.6rem);
	background: oklch(100% 0 0 / 0.05);
	border: 1px solid oklch(100% 0 0 / 0.16);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}
.gf__cell::before,
.gf__cell::after {
	content: '';
	position: absolute;
	inline-size: 10px;
	block-size: 10px;
	border: 1.5px solid var(--gf-cyan);
}
.gf__cell::before { inset-block-start: -1px; inset-inline-start: -1px; border-inline-end: 0; border-block-end: 0; }
.gf__cell::after  { inset-block-end: -1px; inset-inline-end: -1px; border-inline-start: 0; border-block-start: 0; }
.gf__demo {
	flex: 1 1 auto;
	display: grid;
	place-items: center;
	min-block-size: 6.5rem;
	margin-block-end: 1rem;
}
.gf__cap {
	font-family: var(--gf-mono);
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: oklch(100% 0 0 / 0.72);
}
.gf__cap b { color: var(--gf-cyan); font-weight: 600; }

/* Esquinero de muestra (en su celda). */
.gf__demo-corner { inline-size: 130px; block-size: 130px; filter: drop-shadow(0 0 8px oklch(85% 0.14 228 / 0.4)); }
.gf__demo-corner img { inline-size: 100%; block-size: 100%; }

/* Barra segmentada. */
.gf__bar { display: flex; gap: 5px; }
.gf__bar i { inline-size: 16px; block-size: 12px; background: oklch(100% 0 0 / 0.16); }
.gf__bar i.on { background: var(--gf-cyan); box-shadow: 0 0 8px oklch(85% 0.14 228 / 0.7); }

/* Chip de estado. */
.gf__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(--gf-mono);
	font-size: 0.74rem;
	letter-spacing: 0.12em;
	color: #fff;
	clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.gf__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); }

/* Botón angular. */
.gf__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.7em 1.3em;
	background: var(--gf-cyan);
	color: var(--gf-ink);
	font-family: var(--gf-disp);
	font-weight: 700;
	font-size: 0.82rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

/* Marco angular (panel con esquinas cortadas). */
.gf__panel {
	display: grid;
	place-items: center;
	inline-size: 86%;
	min-block-size: 5rem;
	border: 1px solid var(--gf-cyan);
	background: oklch(100% 0 0 / 0.04);
	font-family: var(--gf-mono);
	font-size: 0.72rem;
	letter-spacing: 0.2em;
	color: oklch(100% 0 0 / 0.8);
	clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}

/* Divisor con flechas. */
.gf__divider { display: flex; align-items: center; gap: 0.6em; inline-size: 90%; color: var(--gf-cyan); }
.gf__divider .ln { flex: 1; block-size: 1px; background: linear-gradient(90deg, transparent, var(--gf-cyan), transparent); }

/* ---- Barra de estado: 3 segmentos conectados con brackets de extremo --
   («SYSTEM 01 / TECH GRID / BLUEPRINT MODE»). Reutilizable: cambia el texto
   de cada .gf__leg; añade/quita segmentos libremente. -------------------- */
.gf__legend {
	position: relative;
	z-index: 3;
	display: flex;
	justify-content: center;
	margin-block-start: clamp(2.5rem, 6vh, 4.5rem);
}
.gf__legend-bar {
	position: relative;
	display: inline-flex;
	align-items: stretch;
	flex-wrap: wrap;
	justify-content: center;
}
.gf__legend-bar::before,
.gf__legend-bar::after {
	content: '';
	position: absolute;
	inset-block: -6px;
	inline-size: 14px;
	border: 2px solid var(--gf-cyan);
}
.gf__legend-bar::before { inset-inline-start: -16px; border-inline-end: 0; }
.gf__legend-bar::after  { inset-inline-end: -16px; border-inline-start: 0; }
.gf__leg {
	position: relative;
	padding: 0.5rem clamp(1rem, 3vw, 1.8rem);
	font-family: var(--gf-mono);
}
/* divisor vertical entre segmentos (no en el primero) */
.gf__leg + .gf__leg::before {
	content: '';
	position: absolute;
	inset-block: 6px;
	inset-inline-start: 0;
	inline-size: 1px;
	background: oklch(100% 0 0 / 0.32);
}
.gf__leg-t { font-weight: 600; font-size: 0.8rem; letter-spacing: 0.16em; color: #fff; }
.gf__leg-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); }
.gf__leg-d i { inline-size: 8px; block-size: 8px; background: var(--gf-cyan); box-shadow: 0 0 6px oklch(85% 0.14 228 / 0.6); }

/* =======================================================================
   FRAMES REUTILIZABLES (texto vivo intercambiable)
   ======================================================================= */
.gf__frames {
	position: relative;
	z-index: 3;
	inline-size: min(100%, 78rem);
	margin-inline: auto;
	margin-block-end: clamp(2rem, 5vh, 3.5rem);
	display: flex;
	flex-direction: column;
	gap: clamp(1.5rem, 4vh, 2.5rem);
}
.gf__frame-demo {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.1rem;
	padding: clamp(1.8rem, 4vw, 3rem) clamp(1rem, 3vw, 2rem) clamp(1.1rem, 2.5vw, 1.6rem);
	background: oklch(100% 0 0 / 0.05);
	border: 1px solid oklch(100% 0 0 / 0.16);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}
.gf__frame-demo::before,
.gf__frame-demo::after {
	content: '';
	position: absolute;
	inline-size: 10px;
	block-size: 10px;
	border: 1.5px solid var(--gf-cyan);
}
.gf__frame-demo::before { inset-block-start: -1px; inset-inline-start: -1px; border-inline-end: 0; border-block-end: 0; }
.gf__frame-demo::after  { inset-block-end: -1px; inset-inline-end: -1px; border-inline-start: 0; border-block-start: 0; }

/* ---- Banner de sección (estilo «BASE DE DISEÑO») --------------------- */
.gf__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.5rem, 4vw, 2.4rem) calc(var(--cap) + clamp(1rem, 3vw, 2.2rem));
	min-block-size: 5rem;
}
/* rieles superior e inferior (entre los dos brackets de extremo) */
.gf__banner::before,
.gf__banner::after {
	content: '';
	position: absolute;
	inset-inline: var(--cap);
	block-size: 2px;
	background: oklch(100% 0 0 / 0.92);
}
.gf__banner::before { inset-block-start: 0; }
.gf__banner::after  { inset-block-end: 0; }
/* brackets de extremo: corchetes redondeados [ ] que cierran el marco */
.gf__banner__cap {
	position: absolute;
	inset-block: 0;
	inline-size: var(--cap);
	border: 2px solid oklch(100% 0 0 / 0.92);
}
.gf__banner__cap--l { inset-inline-start: 0; border-inline-end: 0; border-radius: 14px 0 0 14px; }
.gf__banner__cap--r { inset-inline-end: 0; border-inline-start: 0; border-radius: 0 14px 14px 0; }
/* tab metálico superior con slashes cian */
.gf__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, #ffffff, #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);
}
.gf__banner__tab i {
	inline-size: 5px;
	block-size: 11px;
	background: var(--gf-cyan);
	transform: skewX(-20deg);
}
/* tab acento inferior */
.gf__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, #ffffff);
	clip-path: polygon(0 0, 100% 0, calc(100% - 11px) 100%, 11px 100%);
}
.gf__banner__foot::after {
	content: '';
	position: absolute;
	inset-inline: 24%;
	inset-block-end: 3px;
	block-size: 3px;
	background: var(--gf-cyan);
	box-shadow: 0 0 8px oklch(85% 0.14 228 / 0.7);
}
/* chevrons cian que flanquean el texto */
.gf__banner__chev {
	flex: none;
	inline-size: 0.62em;
	block-size: 1em;
	background: var(--gf-cyan);
	filter: drop-shadow(0 0 6px oklch(85% 0.14 228 / 0.6));
}
.gf__banner__chev--l { clip-path: polygon(100% 0, 0 50%, 100% 100%); }
.gf__banner__chev--r { clip-path: polygon(0 0, 100% 50%, 0 100%); }
/* texto editable */
.gf__banner__text {
	font-family: var(--gf-disp);
	font-weight: 800;
	font-size: clamp(1.3rem, 0.6rem + 3vw, 2.8rem);
	letter-spacing: clamp(0.05em, 1.2vw, 0.26em);
	text-transform: uppercase;
	color: #fff;
	white-space: nowrap;
	text-shadow: 0 0 22px oklch(85% 0.14 228 / 0.4);
}

/* ---- Eyebrow / etiqueta de sección (estilo «SYSTEM 01») ------------- */
.gf__eyebrow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(0.55rem, 2vw, 1rem);
	inline-size: min(100%, 32rem);
	margin-inline: auto;
}
.gf__eyebrow__text {
	flex: none;
	font-family: var(--gf-disp);
	font-weight: 700;
	font-size: clamp(0.9rem, 0.7rem + 1vw, 1.5rem);
	letter-spacing: 0.18em;
	text-indent: 0.18em;
	text-transform: uppercase;
	color: #fff;
	white-space: nowrap;
}
.gf__slash {
	flex: none;
	inline-size: 2.1em;
	block-size: 0.85em;
	background: repeating-linear-gradient(115deg, var(--gf-cyan) 0 4px, transparent 4px 9px);
}
.gf__eyebrow__rail {
	flex: 1 1 auto;
	min-inline-size: 1.5rem;
	block-size: 14px;
	color: oklch(100% 0 0 / 0.9);
}
.gf__eyebrow__rail svg { display: block; inline-size: 100%; block-size: 100%; }
.gf__eyebrow__rail--l svg { transform: scaleX(-1); }

/* =======================================================================
   TESTEO DE TIPOGRAFÍAS — especímenes de las 4 fuentes del sistema.
   ======================================================================= */
.gf__type {
	position: relative;
	z-index: 3;
	inline-size: min(100%, 78rem);
	margin-inline: auto;
	margin-block-start: clamp(1.5rem, 4vh, 2.5rem);
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 25rem), 1fr));
	gap: clamp(1rem, 2.4vw, 1.75rem);
}
.gf__spec {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	padding: clamp(1.4rem, 3vw, 2rem);
	background: oklch(100% 0 0 / 0.05);
	border: 1px solid oklch(100% 0 0 / 0.16);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}
.gf__spec::before,
.gf__spec::after {
	content: '';
	position: absolute;
	inline-size: 10px;
	block-size: 10px;
	border: 1.5px solid var(--gf-cyan);
}
.gf__spec::before { inset-block-start: -1px; inset-inline-start: -1px; border-inline-end: 0; border-block-end: 0; }
.gf__spec::after  { inset-block-end: -1px; inset-inline-end: -1px; border-inline-start: 0; border-block-start: 0; }

/* la fuente del espécimen tiñe toda la tarjeta; la etiqueta de rol va mono */
.gf__spec--mecha    { font-family: var(--font-mecha); }
.gf__spec--orbitron { font-family: var(--font-orbitron); }
.gf__spec--tomorrow { font-family: var(--font-tomorrow); }
.gf__spec--techmono { font-family: var(--font-techmono); }

.gf__spec__role {
	font-family: var(--font-techmono);
	font-size: 0.66rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gf-cyan);
}
.gf__spec__name {
	font-size: clamp(1.7rem, 1rem + 2.2vw, 2.6rem);
	line-height: 1;
	color: #fff;
}
.gf__spec__sample {
	font-size: 1.05rem;
	line-height: 1.5;
	color: oklch(100% 0 0 / 0.92);
}
.gf__spec__glyphs {
	font-size: 0.95rem;
	letter-spacing: 0.05em;
	line-height: 1.5;
	color: oklch(100% 0 0 / 0.65);
	word-break: break-word;
}
.gf__spec__weights {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1rem;
	margin-block-start: auto;
	padding-block-start: 0.6rem;
	border-block-start: 1px solid oklch(100% 0 0 / 0.12);
	font-size: 0.95rem;
	color: oklch(100% 0 0 / 0.8);
}
.gf__spec__weights b { font-weight: inherit; }