/* =========================================================================
   UNITECH · global.css  —  Design tokens (Fase 9) + utilidades base
   Las variables se pueden sobreescribir en vivo desde el Customizer
   (ver inc/customizer.php → customizer_inline_css()).
   ========================================================================= */

:root {
	/* Colores semánticos */
	--color-primary:       #273694;
	--color-primary-dark:  #1f203f;
	--color-secondary:     #4576c0;
	--color-accent-teal:   #33a9a0;
	--color-accent-coral:  #cf656c;
	--color-accent-coral-h:#e07070;
	--color-accent-blue:   #4c86d5;
	--color-accent-sky:    #76a8d4;
	--color-cobalt:        #3c4a98;
	--color-gold:          #c8ae89;
	--color-navy:          #16181c;
	--color-dark:          #1a1a2e;
	--color-brown:         #3c2f29;
	--color-bg-light:      #f4f6f8;
	--color-border:        #e2e5ea;
	--color-text-main:     #1a1a2e;
	--color-text-muted:    #6b7280;
	--color-white:         #ffffff;

	/* Tipografía */
	--font-display:  'Raleway', system-ui, sans-serif;
	--font-body:     'Source Sans 3', system-ui, sans-serif;
	--font-ui:       'Open Sans', system-ui, sans-serif;

	/* Espaciados */
	--space-xs:   0.5rem;
	--space-sm:   1rem;
	--space-md:   1.5rem;
	--space-lg:   2.5rem;
	--space-xl:   4rem;
	--space-2xl:  6rem;

	/* Layout */
	--max-content: 800px;
	--max-wide:    1200px;
	--header-h:    64px;
	--topbar-h:    36px;
	--subnav-h:    40px;

	/* Bordes y radios */
	--radius-sm:  4px;
	--radius-md:  8px;
	--radius-lg:  12px;
	--radius-xl:  20px;

	/* Sombras */
	--shadow-card:   0 2px 12px rgba(0, 0, 0, 0.06);
	--shadow-search: 0 4px 20px rgba(0, 0, 0, 0.08);
	--shadow-modal:  0 8px 40px rgba(0, 0, 0, 0.18);
	--shadow-header: 0 2px 8px rgba(0, 0, 0, 0.08);

	/* Transiciones */
	--t-fast: 0.15s ease;
	--t-base: 0.25s ease;
}

/* ---- Reset suave / base ---- */
* { box-sizing: border-box; }

body {
	font-family: var(--font-body);
	color: var(--color-text-main);
	background: var(--color-white);
	margin: 0;
	line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	color: var(--color-text-main);
	line-height: 1.2;
	margin: 0 0 0.5em;
}

img { max-width: 100%; height: auto; display: block; }

/* ---- Contenedores de sección reutilizables (usados por los patterns) ---- */
.unitech-section {
	padding-block: clamp(2.5rem, 5vw, 3.75rem);
}
.unitech-container {
	width: min(100% - 2.5rem, var(--max-wide));
	margin-inline: auto;
}

/* Encabezado de sección: título a la izquierda + enlace a la derecha */
.unitech-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-md);
	margin-bottom: var(--space-lg);
	flex-wrap: wrap;
}
.unitech-section__head h2 { margin: 0; }
.unitech-section__link {
	color: var(--color-secondary);
	font-weight: 600;
	font-size: 0.9375rem;
	white-space: nowrap;
}
.unitech-section__link::after { content: " \2192"; }

/* Badge / etiqueta */
.unitech-badge {
	display: inline-block;
	font-family: var(--font-ui);
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 0.25rem 0.625rem;
	border-radius: var(--radius-sm);
	background: var(--color-accent-teal);
	color: var(--color-white);
}

/* CTA texto en versalitas (links "CONOCE EL PROGRAMA", etc.) */
.unitech-cta-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	font-family: var(--font-ui);
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--color-secondary);
	text-decoration: none;
}
.unitech-cta-link:hover { color: var(--color-primary); }

/* Botón primario sólido (reutilizable fuera de core/button) */
.unitech-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	font-family: var(--font-body);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	line-height: 1;
	padding: 0.85rem 1.5rem;
	border: 0;
	border-radius: var(--radius-sm);
	background: var(--color-secondary);
	color: var(--color-white);
	cursor: pointer;
	text-decoration: none;
	transition: background var(--t-base);
}
.unitech-btn:hover { background: var(--color-primary); color: var(--color-white); }
.unitech-btn--primary { background: var(--color-primary); }
.unitech-btn--primary:hover { background: var(--color-primary-dark); }
.unitech-btn--full { width: 100%; }

/* Skip link accesible: oculto hasta recibir foco */
.unitech-skip:focus {
	position: fixed !important;
	top: 0.5rem;
	left: 0.5rem;
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
	z-index: 2000;
	background: var(--color-primary);
	color: #fff;
	padding: 0.6rem 1rem;
	border-radius: var(--radius-sm);
}

/* Accesibilidad: respeta reduce-motion */
@media (prefers-reduced-motion: reduce) {
	* { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}