/* RUNNBAK — estilos compartidos por todas las páginas */

:root{
  --bg:oklch(0.16 0.005 90);
  --fg:oklch(0.97 0.005 90);
  --accent:oklch(0.75 0.13 195);
  --live:oklch(0.75 0.2 25);
  --ink:#0b0b0b;
  --line:oklch(1 0 0 / 0.15);
  --hairline:oklch(1 0 0 / 0.1);
  --field:oklch(1 0 0 / 0.25);
  --muted:oklch(0.97 0.005 90 / 0.6);
  --shell:1400px;
  --gutter:48px;
  /* Tipografía: Lora (títulos, serif contemporáneo) sobre Outfit (texto, sans
     geométrica legible). Lora llega a 700; Outfit, de 400 a 900 sin itálica. */
  --font-display:'Lora', Georgia, 'Times New Roman', serif;
  --font-body:'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-body);
  font-size:16px;
  /* Fénix solo trae peso 400: sin síntesis, un font-weight:700 sobre los
     títulos cae al 400 real en vez de fabricar una negrita falsa y fea.
     Outfit sí tiene sus pesos reales, así que no se ve afectada. */
  font-synthesis:none;
  text-wrap:pretty;
  overflow-x:hidden;
}

a{color:inherit}
::selection{background:var(--accent);color:var(--ink)}

/* Playfair en peso alto para que los títulos tengan presencia; el text-transform
   se mantiene por marca, pero con tracking suave (el negativo aprieta el serif). */
h1,h2,h3{font-family:var(--font-display);text-transform:uppercase;font-weight:700;letter-spacing:0.005em}

.eyebrow{
  font-size:13px;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--accent);margin-bottom:20px;
}
.section-title{font-size:clamp(32px,4vw,52px);margin:0}

/* Nav */
.nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:20px var(--gutter);
  background:oklch(0.16 0.005 90 / 0.9);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--hairline);
}
.brand{display:flex;align-items:center;gap:12px}
/* El logo es blanco con fondo transparente, así que se apoya en el fondo
   oscuro de la nav. Se dimensiona por alto para conservar su proporción. */
.brand-mark{height:44px;width:auto;flex:none;display:block}
.brand-name{
  font-family:var(--font-display);font-weight:700;font-size:24px;letter-spacing:0.04em;
  text-decoration:none;
}
.nav-links{
  display:flex;align-items:center;gap:36px;
  font-size:14px;font-weight:600;letter-spacing:0.03em;text-transform:uppercase;
}
.nav-links a{text-decoration:none;opacity:0.9;transition:opacity 0.15s ease}
.nav-links a:hover{opacity:1}
/* La página actual se atenúa: ya estás aquí, no es un destino. */
.nav-links a[aria-current="page"]{opacity:0.6}

/* Botones */
.btn{
  display:inline-block;text-decoration:none;
  padding:20px 40px;
  font-weight:800;font-size:16px;letter-spacing:0.05em;text-transform:uppercase;
  border:2px solid transparent;
  font-family:inherit;
  cursor:pointer;
  transition:transform 0.15s ease,opacity 0.15s ease;
}
.btn:active{transform:translateY(1px)}
.btn-accent{background:var(--accent);color:var(--ink)}
.btn-accent:hover{opacity:0.88}
.btn-outline{border-color:oklch(1 0 0 / 0.3);color:var(--fg);background:transparent}
.btn-outline:hover{border-color:var(--fg)}
.btn-ink{background:var(--ink);color:var(--fg)}
.btn-ink:hover{opacity:0.88}
.btn-nav{background:var(--accent);color:var(--ink);padding:12px 24px;text-decoration:none}
.nav-links .btn-nav{opacity:1}
.nav-links .btn-nav:hover{opacity:0.88}

:where(a,button,input,select):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

/* CTA de cierre */
.cta{padding:100px var(--gutter);background:var(--accent);color:var(--ink);text-align:center}
.cta h2{font-size:clamp(32px,5vw,60px);margin:0;line-height:1.04}
.cta .btn{margin-top:32px;padding:22px 48px}

/* Footer */
.footer{
  padding:48px var(--gutter);max-width:var(--shell);margin:0 auto;
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:20px;border-top:1px solid var(--hairline);
}
.footer-name{font-family:var(--font-display);font-weight:700;font-size:20px;letter-spacing:0.04em;text-transform:uppercase}
.footer-links{
  display:flex;gap:28px;flex-wrap:wrap;
  font-size:14px;color:oklch(0.97 0.005 90 / 0.5);
}
.footer-links a{text-decoration:none;transition:color 0.15s ease}
.footer-links a:hover{color:var(--fg)}

@media (max-width:1024px){
  :root{--gutter:32px}
}
@media (max-width:640px){
  :root{--gutter:20px}
  .nav{flex-wrap:wrap;gap:16px}
  /* Los cuatro enlaces no caben a 375 px con el tamaño de escritorio: se
     encogen aquí para que la fila entre completa sin desbordar la página. */
  .nav-links{gap:12px;font-size:12px;width:100%;justify-content:space-between}
  .nav-links .btn-nav{padding:10px 14px}
  .cta{padding-block:64px}
  .btn{padding:18px 28px;font-size:15px}
  .footer{justify-content:center;text-align:center}
  .footer-links{justify-content:center;gap:18px}
}
@media (max-width:360px){
  .nav-links{gap:8px;font-size:11px}
  .nav-links .btn-nav{padding:9px 10px}
}