/* ============================================================
   HumArTech — main.css
   Variables, reset, tipografía, header, footer, utilidades.
   Compartido por: index, contact, error, legal, privacy.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600;0,700;1,400&family=DM+Sans:wght@400;500;700&display=swap');

/* ── Variables ─────────────────────────────────────────────── */
:root {
	--brand:             #e8632a;
	--brand-hover:       #c9501e;
	--brand-subtle:      #fdf0ea;

	--text:              #1a1816;
	--text-muted:        #6b6560;
	--text-faint:        #a09890;

	--surface:           #ffffff;
	--surface-alt:       #f7f4f1;
	--border:            #e4ddd7;
	--border-strong:     #cec6be;

	--radius-sm:         .375rem;
	--radius-md:         .75rem;
	--radius-lg:         1.25rem;

	--shadow-sm:         0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);
	--shadow-md:         0 4px 16px rgba(0,0,0,.09), 0 2px 6px rgba(0,0,0,.06);
	--shadow-lg:         0 8px 32px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.07);

	--font-display:      'Lora', Georgia, serif;
	--font-body:         'DM Sans', system-ui, sans-serif;

	--container:         1200px;
	--container-pad:     clamp(1rem, 4vw, 2.5rem);
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	font-size: 17px;
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	font-family:      var(--font-body);
	font-size:        1rem;
	line-height:      1.65;
	color:            var(--text);
	background:       var(--surface-alt);
	min-height:       100vh;
	display:          flex;
	flex-direction:   column;
	-webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

a {
	color:           var(--brand);
	text-decoration: none;
	transition:      color .15s;
}
a:hover { color: var(--brand-hover); }

/* ── Contenedor ────────────────────────────────────────────── */
.container {
	width:     100%;
	max-width: var(--container);
	margin:    0 auto;
	padding:   0 var(--container-pad);
}

/* ── Tipografía compartida ─────────────────────────────────── */
h1, h2, h3, h4 {
	font-family: var(--font-display);
	line-height: 1.2;
	color:       var(--text);
}

h1 { font-size: clamp(1.9rem, 4.5vw, 2.8rem); font-weight: 700; }
h2 { font-size: clamp(1.4rem, 3vw,   2rem);   font-weight: 700; }
h3 { font-size: clamp(1.1rem, 2vw,   1.4rem); font-weight: 600; }

p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

code, pre {
	font-family: 'JetBrains Mono', 'Fira Code', monospace;
	font-size:   .9em;
}

/* ── Site header ───────────────────────────────────────────── */
.site-header {
	background:    var(--surface);
	border-bottom: 1px solid var(--border);
	padding:       1.25rem 0;
}

.site-header__inner {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             1rem;
	flex-wrap:       wrap;
}

.site-header__brand {
	display:     flex;
	align-items: baseline;
	gap:         .6rem;
}

.site-header__logo {
	font-family:     var(--font-display);
	font-size:       1.5rem;
	font-weight:     700;
	color:           var(--brand);
	text-decoration: none;
	letter-spacing:  -.02em;
}
.site-header__logo:hover { color: var(--brand-hover); }

.site-header__sep {
	color:       var(--border-strong);
	font-weight: 300;
	font-size:   1.3rem;
}

.site-header__section {
	font-size:  .95rem;
	color:      var(--text-muted);
	font-style: italic;
	font-family: var(--font-display);
}

.site-header__nav {
	display:     flex;
	align-items: center;
	gap:         1.25rem;
}

.site-header__nav a {
	font-size:   .9rem;
	color:       var(--text-muted);
	font-weight: 500;
	transition:  color .15s;
}
.site-header__nav a:hover { color: var(--brand); }

.site-header__nav .active {
	color:       var(--brand);
	font-weight: 700;
}

/* ── Site footer ───────────────────────────────────────────── */
.site-footer {
	margin-top:    auto;
	background:    var(--surface);
	border-top:    1px solid var(--border);
	padding:       1.5rem 0;
	font-size:     .85rem;
	color:         var(--text-muted);
}

.site-footer__inner {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             .75rem 2rem;
	flex-wrap:       wrap;
}

.site-footer__left,
.site-footer__right {
	display:     flex;
	align-items: center;
	gap:         1rem;
	flex-wrap:   wrap;
}

.site-footer a {
	color:      var(--text-muted);
	transition: color .15s;
}
.site-footer a:hover { color: var(--brand); }

/* ── Página main ───────────────────────────────────────────── */
.page-main {
	flex:    1;
	padding: 2.5rem 0 3rem;
}

/* ── Utilidades ────────────────────────────────────────────── */
.text-muted  { color: var(--text-muted); }
.text-faint  { color: var(--text-faint); }
.text-brand  { color: var(--brand); }
.font-display { font-family: var(--font-display); }

.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;
}