/*
Theme Name: Lyrax
Theme URI: https://lyrax.tech
Author: Lyrax
Description: Sitio de una página para Lyrax: Arquitectura Empresarial con Ardoq y Process Mining. Español e inglés, con formulario de contacto integrado.
Version: 1.0.1
Requires at least: 6.3
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lyrax
*/

/* ---------- Tokens (Manual de marca Lyrax 1.0) ---------- */
:root {
	--noche: #15122E;
	--violeta: #6A4CFF;
	--violeta-hover: #5638F0;
	--ambar: #F2B84B;
	--violeta-claro: #B8A9FF;
	--gris: #5A5670;
	--niebla: #F3F2F7;
	--blanco: #FFFFFF;
	--linea: #D6D3E2;
	--linea-suave: #E4E2EC;
	--texto-claro: #D9D4F2;
	--error: #C2323A;
	--ok: #1E7F5C;

	--font-display: 'Sora', system-ui, sans-serif;
	--font-body: 'IBM Plex Sans', system-ui, sans-serif;
	--font-mono: 'IBM Plex Mono', ui-monospace, monospace;

	--container: 1200px;
	--gutter: clamp(16px, 4vw, 40px);
	--section-y: clamp(72px, 10vw, 128px);
	--radius: 12px;
	--header-h: 72px;

	/* Colores del isotipo (ver parts/star-inner.php) */
	--lx-a: var(--ambar);
	--lx-b: var(--violeta);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + 16px);
	-webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

body {
	margin: 0;
	background: var(--blanco);
	color: var(--noche);
	font-family: var(--font-body);
	font-size: 1.0625rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; }
a { color: var(--violeta); }
a:hover { color: var(--noche); }
h1, h2, h3, p, ul, ol, figure { margin: 0; }

:focus-visible {
	outline: 2px solid var(--violeta);
	outline-offset: 3px;
	border-radius: 4px;
}
.on-dark :focus-visible { outline-color: var(--violeta-claro); }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: 16px; top: -100px;
	z-index: 100;
	padding: 10px 16px;
	background: var(--blanco);
	color: var(--noche);
	border-radius: 8px;
	font-weight: 500;
}
.skip-link:focus { top: 12px; }

.container {
	width: 100%;
	max-width: calc(var(--container) + var(--gutter) * 2);
	margin: 0 auto;
	padding: 0 var(--gutter);
}
.container.narrow { max-width: calc(760px + var(--gutter) * 2); }

.on-dark {
	--lx-b: var(--violeta-claro);
	background: var(--noche);
	color: var(--blanco);
}

/* ---------- Tipografía ---------- */
.eyebrow {
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--violeta);
	margin-bottom: 20px;
}
.eyebrow-amber { color: var(--ambar); }

.display {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4.25rem);
	line-height: 1.08;
	letter-spacing: -.015em;
	text-wrap: balance;
}

.h2 {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(1.875rem, 1.3rem + 2.2vw, 3rem);
	line-height: 1.12;
	letter-spacing: -.01em;
	text-wrap: balance;
}

.lead {
	margin-top: 24px;
	font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
	line-height: 1.6;
	color: var(--gris);
	max-width: 60ch;
	text-wrap: pretty;
}
.on-dark .lead { color: var(--texto-claro); }

/* ---------- Botones ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 12px 24px;
	border: 1px solid transparent;
	border-radius: 999px;
	font: 500 1rem/1.2 var(--font-body);
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn-primary { background: var(--violeta); color: var(--blanco); }
.btn-primary:hover { background: var(--violeta-hover); color: var(--blanco); }
.btn-primary:disabled { opacity: .6; cursor: progress; }
.btn-ghost { border-color: rgba(184, 169, 255, .45); color: var(--blanco); }
.btn-ghost:hover { border-color: var(--violeta-claro); color: var(--blanco); background: rgba(184, 169, 255, .08); }

/* ---------- Logotipo ---------- */
.brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: inherit;
}
.brand-star { width: 40px; height: 40px; flex: none; }
.brand-word { display: flex; flex-direction: column; gap: 5px; }
.brand-name {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 20px;
	letter-spacing: .24em;
	line-height: 1;
}
.brand-sub {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 8px;
	letter-spacing: .7em;
	line-height: 1;
	color: var(--lx-b);
}
.lx-star { display: block; overflow: visible; }

/* ---------- Encabezado ---------- */
.site-header {
	--lx-b: var(--violeta-claro);
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--noche);
	color: var(--blanco);
	border-bottom: 1px solid transparent;
	transition: border-color .2s ease;
}
.site-header.is-scrolled { border-bottom-color: rgba(184, 169, 255, .16); }

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: var(--header-h);
}
.header-brand { color: var(--blanco); text-decoration: none; padding: 8px 0; }
.header-brand:hover { color: var(--blanco); }

.site-nav { display: flex; align-items: center; gap: 32px; }
.site-nav ul { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.site-nav a {
	color: var(--texto-claro);
	text-decoration: none;
	font-size: .9375rem;
	font-weight: 500;
}
.site-nav a:hover { color: var(--blanco); }

.lang-switch {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 36px;
	padding: 0 12px;
	border: 1px solid rgba(184, 169, 255, .45);
	border-radius: 999px;
	font-family: var(--font-mono);
	font-size: .8125rem !important;
	letter-spacing: .08em;
}
.lang-switch:hover { border-color: var(--violeta-claro); }

.nav-toggle {
	display: none;
	width: 44px; height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--blanco);
	cursor: pointer;
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
	display: block;
	width: 22px; height: 1.5px;
	margin: 0 auto;
	background: currentColor;
	transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ''; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -7px; }
.nav-toggle-bars::after { top: 7px; }
.nav-open .nav-toggle-bars { background: transparent; }
.nav-open .nav-toggle-bars::before { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle-bars::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 960px) {
	.nav-toggle { display: block; }
	.site-nav {
		position: fixed;
		inset: var(--header-h) 0 auto 0;
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
		padding: 8px var(--gutter) 28px;
		background: var(--noche);
		border-bottom: 1px solid rgba(184, 169, 255, .16);
		visibility: hidden;
		opacity: 0;
		transform: translateY(-8px);
		transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
	}
	.nav-open .site-nav {
		visibility: visible;
		opacity: 1;
		transform: none;
		transition: opacity .2s ease, transform .2s ease;
	}
	.site-nav ul { flex-direction: column; gap: 0; }
	.site-nav ul a {
		display: block;
		padding: 14px 0;
		font-size: 1.0625rem;
		border-bottom: 1px solid rgba(184, 169, 255, .12);
	}
	.lang-switch { align-self: flex-start; margin-top: 12px; }
}

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; }
.hero-inner {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	align-items: center;
	gap: clamp(32px, 6vw, 96px);
	min-height: min(760px, calc(100svh - var(--header-h)));
	padding-top: clamp(48px, 8vw, 96px);
	padding-bottom: clamp(64px, 9vw, 120px);
}
.hero .lead { margin-top: 28px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }

.hero-art {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
}
.hero-star { position: relative; width: 82%; height: auto; }
.starfield {
	position: absolute;
	inset: -10%;
	width: 120%; height: 120%;
	fill: var(--violeta-claro);
	opacity: .55;
}

@media (max-width: 860px) {
	.hero-inner { grid-template-columns: 1fr; min-height: 0; }
	.hero-art { order: -1; width: min(260px, 64vw); margin: 0 auto; }
}

/* ---------- Secciones ---------- */
.section { padding: var(--section-y) 0; }
.section-mist { background: var(--niebla); }
.section-white { background: var(--blanco); }

.section-head { margin-bottom: clamp(40px, 6vw, 72px); }
.section-head.narrow { max-width: 760px; }
.split {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: clamp(32px, 6vw, 96px);
	align-items: end;
}
.split-reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
@media (max-width: 860px) {
	.split, .split-reverse { grid-template-columns: 1fr; align-items: start; }
}

/* Resultados: lista como una pequeña constelación vertical */
.outcomes-title {
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--gris);
	margin-bottom: 16px;
}
.outcomes ul {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
}
.outcomes ul::before {
	content: '';
	position: absolute;
	left: 5px; top: 14px; bottom: 14px;
	width: 1.5px;
	background: var(--violeta-claro);
}
.outcomes li {
	position: relative;
	padding: 8px 0 8px 32px;
	font-weight: 500;
	line-height: 1.45;
}
.outcomes li::before {
	content: '';
	position: absolute;
	left: 0; top: 13px;
	width: 11px; height: 11px;
	border-radius: 50%;
	background: var(--violeta);
	box-shadow: 0 0 0 4px var(--niebla);
}
.section-white .outcomes li::before { box-shadow: 0 0 0 4px var(--blanco); }
.outcomes-inline { margin-top: 40px; }

/* Tarjetas de servicio: 3 + 2 en escritorio */
.cards {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.card {
	grid-column: span 2;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 32px 28px;
	background: var(--blanco);
	border: 1px solid var(--linea-suave);
	border-radius: var(--radius);
}
.card:nth-child(n+4) { grid-column: span 3; }
.card-mist { background: var(--niebla); border-color: transparent; }
.card-num {
	font-family: var(--font-mono);
	font-size: .875rem;
	color: var(--violeta);
}
.card-title {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 1.25rem;
	line-height: 1.3;
}
.card p { color: var(--gris); font-size: 1rem; line-height: 1.55; }

@media (max-width: 960px) {
	.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.card, .card:nth-child(n+4) { grid-column: span 1; }
	.card:last-child:nth-child(odd) { grid-column: span 2; }
}
@media (max-width: 600px) {
	.cards { grid-template-columns: 1fr; }
	.card:last-child:nth-child(odd) { grid-column: span 1; }
	.card { padding: 28px 24px; }
}

/* Diagrama de Process Mining */
.pm-diagram {
	padding: clamp(20px, 3vw, 36px);
	background: var(--niebla);
	border-radius: var(--radius);
}
.pm-diagram svg { display: block; width: 100%; height: auto; overflow: visible; }
.pm-events circle { fill: var(--violeta-claro); }
.pm-feed path {
	fill: none;
	stroke: var(--violeta-claro);
	stroke-width: 1.2;
	stroke-dasharray: 2 5;
	stroke-linecap: round;
}
.pm-path path {
	fill: none;
	stroke: var(--violeta);
	stroke-width: 2.5;
	stroke-linecap: round;
}
.pm-rework {
	fill: none;
	stroke: var(--violeta);
	stroke-width: 1.5;
	stroke-dasharray: 5 5;
	stroke-linecap: round;
	opacity: .55;
}
.pm-nodes circle { fill: var(--violeta); stroke: var(--niebla); stroke-width: 4; }
.pm-vega { fill: var(--ambar); }

/* ---------- Enfoque ---------- */
.steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(24px, 4vw, 56px);
	list-style: none;
	margin: 0;
	padding: 0;
}
.steps::before {
	content: '';
	position: absolute;
	left: 6px; right: 0; top: 6px;
	height: 1.5px;
	background: linear-gradient(90deg, var(--violeta-claro), rgba(184, 169, 255, .15));
}
.step { position: relative; display: flex; flex-direction: column; gap: 12px; padding-top: 40px; }
.step-dot {
	position: absolute;
	left: 0; top: 0;
	width: 13px; height: 13px;
	border-radius: 50%;
	background: var(--violeta-claro);
	box-shadow: 0 0 0 5px var(--noche);
}
.step:last-child .step-dot { background: var(--ambar); }
.step-num { font-family: var(--font-mono); font-size: .875rem; color: var(--violeta-claro); }
.step-title { font-family: var(--font-display); font-weight: 400; font-size: 1.625rem; line-height: 1.2; }
.step p { color: var(--texto-claro); }

@media (max-width: 760px) {
	.steps { grid-template-columns: 1fr; gap: 36px; padding-left: 36px; }
	.steps::before { left: 6px; right: auto; top: 6px; bottom: 6px; width: 1.5px; height: auto; background: linear-gradient(180deg, var(--violeta-claro), rgba(184, 169, 255, .15)); }
	.step { padding-top: 0; }
	.step-dot { left: -36px; top: 4px; }
}

/* ---------- Contacto ---------- */
.contact {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	gap: clamp(40px, 6vw, 96px);
	align-items: start;
}
.contact-intro { position: sticky; top: calc(var(--header-h) + 40px); }
.contact-star { width: 120px; height: 120px; margin-top: 48px; }
@media (max-width: 860px) {
	.contact { grid-template-columns: 1fr; }
	.contact-intro { position: static; }
	.contact-star { display: none; }
}

.contact-form {
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding: clamp(24px, 4vw, 44px);
	background: var(--blanco);
	border-radius: var(--radius);
	border: 1px solid var(--linea-suave);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.field label,
.field legend {
	padding: 0;
	font-size: .9375rem;
	font-weight: 500;
	color: var(--noche);
}
.field legend { margin-bottom: 8px; }
.optional { font-weight: 400; color: var(--gris); }

.field input[type="text"],
.field input[type="email"],
.field textarea {
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	border: 1px solid var(--linea);
	border-radius: 8px;
	background: var(--blanco);
	color: var(--noche);
	font: 400 1rem/1.5 var(--font-body);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { resize: vertical; min-height: 140px; }
.field input:hover, .field textarea:hover { border-color: var(--violeta-claro); }
.field input:focus, .field textarea:focus {
	outline: none;
	border-color: var(--violeta);
	box-shadow: 0 0 0 3px rgba(106, 76, 255, .18);
}
.field [aria-invalid="true"],
fieldset[aria-invalid="true"] .choice span { border-color: var(--error); }
.field [aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(194, 50, 58, .18); }

.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; cursor: pointer; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice span {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 8px 16px;
	border: 1px solid var(--linea);
	border-radius: 999px;
	font-size: .9375rem;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.choice:hover span { border-color: var(--violeta-claro); }
.choice input:checked + span { background: var(--noche); border-color: var(--noche); color: var(--blanco); }
.choice input:focus-visible + span { outline: 2px solid var(--violeta); outline-offset: 3px; }

.form-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 4px;
}
.privacy { font-size: .875rem; color: var(--gris); max-width: 32ch; }

.notice {
	padding: 14px 16px;
	border-radius: 8px;
	font-weight: 500;
	line-height: 1.45;
}
.notice:focus { outline: none; }
.notice-ok { background: #E6F4EE; color: var(--ok); }
.notice-error { background: #FBEAEB; color: var(--error); }

.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Pie ---------- */
.site-footer { padding: 56px 0 40px; }
.footer-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
}
.footer-tagline {
	margin-top: 20px;
	font-size: .75rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--violeta-claro);
}
.footer-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 24px;
	font-size: .875rem;
	color: var(--texto-claro);
}
.footer-meta a { color: var(--texto-claro); }
.footer-meta a:hover { color: var(--blanco); }

/* ---------- Páginas internas ---------- */
.page-body { min-height: 60vh; }
.entry-content { margin-top: 32px; }
.entry-content > * + * { margin-top: 1em; }
.entry-content h2, .entry-content h3 { font-family: var(--font-display); font-weight: 500; margin-top: 1.6em; }