/**
 * Sistema de diseño compartido — Casilleros Inteligentes / CUFA.
 * Usado por las 4 páginas del pitch (index + 3 detalle por modelo).
 * Paleta "steel + amber", tipografía Archivo / Archivo Narrow / Space Mono.
 */
:root{
  --steel-950:#0d1117;
  --steel-900:#12171f;
  --steel-800:#1a212c;
  --steel-700:#252f3d;
  --steel-600:#3a4657;
  --steel-400:#8593a6;
  --steel-300:#aab6c6;
  --paper:#eef1f5;
  --amber:#ffb020;
  --amber-dim:#c77f0a;
  --green:#3ddc84;
  --red:#ff5c5c;
  --blue:#4aa3ff;
  --violet:#b98cff;
  --font-display:'Archivo',sans-serif;
  --font-narrow:'Archivo Narrow',sans-serif;
  --font-mono:'Space Mono',monospace;
  --radius:12px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-display);
  background:var(--steel-950);
  color:var(--paper);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--amber);color:var(--steel-950)}
a{color:inherit}
.icon{display:inline-flex;width:100%;height:100%}
.icon svg{width:100%;height:100%}

/* ---------- CUFA signature ---------- */
.cufa-signature{
  font-family:'Bebas Neue',sans-serif;
  color:#FD4F02;
  text-decoration:none;
  letter-spacing:.03em;
}

/* ---------- NAV ---------- */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px clamp(18px,4vw,48px);
  background:rgba(13,17,23,.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--steel-800);
}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:-.02em;font-size:15px}
.brand .dot{width:11px;height:11px;border-radius:2px;background:var(--amber);box-shadow:0 0 12px var(--amber)}
.brand small{font-family:var(--font-mono);font-weight:400;color:var(--steel-400);font-size:11px;letter-spacing:0}
.navlinks{display:flex;gap:4px;font-family:var(--font-narrow);font-weight:600}
.navlinks a{
  color:var(--steel-300);text-decoration:none;font-size:13px;
  padding:7px 13px;border-radius:6px;transition:.18s;letter-spacing:.02em;
}
.navlinks a:hover{color:var(--paper);background:var(--steel-800)}
.navlinks a.active{color:var(--amber)}
.menu-btn{display:none;background:none;border:1px solid var(--steel-700);color:var(--paper);
  padding:8px 12px;border-radius:6px;font-size:18px;cursor:pointer}

/* ---------- LAYOUT ---------- */
section{padding:clamp(56px,9vw,120px) clamp(18px,5vw,80px);position:relative}
.wrap{max-width:1120px;margin:0 auto}
.eyebrow{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--amber);margin-bottom:18px;display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--amber)}
h2.big{font-size:clamp(1.9rem,4.5vw,3.2rem);font-weight:800;letter-spacing:-.03em;line-height:1.02;max-width:20ch}
.section-lede{margin-top:20px;max-width:60ch;color:var(--steel-300);font-size:1.06rem}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

/* ---------- FOOTER ---------- */
footer{
  background:var(--steel-950);border-top:1px solid var(--steel-800);
  padding:48px clamp(18px,5vw,80px);text-align:center;
}
footer .fbrand{font-weight:800;font-size:18px;letter-spacing:-.02em;margin-bottom:8px}
footer p{color:var(--steel-400);font-size:.9rem;font-family:var(--font-mono)}
footer .sig{margin-top:22px;color:var(--steel-600);font-size:.82rem}

@media(max-width:860px){
  .navlinks{display:none}
  .menu-btn{display:block}
  .navlinks.open{display:flex;position:absolute;top:60px;right:16px;flex-direction:column;
    background:var(--steel-900);border:1px solid var(--steel-700);border-radius:10px;padding:8px}
}