/* =============================================================
   landing-nav.css — Tokens de la landing · body · Nav principal
   ============================================================= */

/* === TOKENS PROPIOS DE LA LANDING === */
:root {
  --ink:    #0f0a07;
  --ink-2:  #1a1410;
  --copper: #c95f2e;
  --gold:   #d4a955;
}

/* === BODY DE LA LANDING === */
html { scroll-behavior: smooth; }

body {
  font-size:    15px;
  line-height:  1.55;
  overflow-x:   hidden;
}

/* Sobreescribe el SVG base (0.08 → 0.06) para la landing */
body::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.4 0 0 0 0 0.3 0 0 0 0 0.2 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* === NAV === */
nav {
  position:        sticky;
  top:             0;
  background:      rgba(244,237,226,0.92);
  backdrop-filter: blur(12px);
  border-bottom:   1px solid rgba(199,184,158,0.4);
  z-index:         50;
  padding:         14px 0;
}

.nav-inner {
  max-width:       1200px;
  margin:          0 auto;
  padding:         0 24px;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             24px;
}

.logo {
  font-family:     var(--font-serif);
  font-style:      italic;
  font-size:       22px;
  font-weight:     400;
  letter-spacing:  -0.02em;
  color:           var(--ink);
  text-decoration: none;
  line-height:     1;
}

.logo-suffix {
  font-size:      15px;
  font-weight:    300;
  color:          var(--copper);
  margin-left:    1px;
  letter-spacing: 0.01em;
}

.logo strong {
  background:      var(--copper);
  color:           var(--cream);
  padding:         2px 6px;
  margin-right:    4px;
  border-radius:   4px;
  font-style:      normal;
  font-weight:     700;
  font-family:     var(--font-sans);
  font-size:       16px;
  letter-spacing:  0;
}

.nav-links {
  display:     flex;
  gap:         28px;
  align-items: center;
}

.nav-links a {
  color:           var(--ink-soft);
  text-decoration: none;
  font-size:       14px;
  font-weight:     500;
  transition:      color 0.15s;
}

.nav-links a:hover { color: var(--ink); }

/* === BOTONES — landing === */
.btn {
  background:      var(--ink);
  color:           var(--cream);
  padding:         10px 20px;
  border-radius:   6px;
  font-weight:     600;
  font-size:       13.5px;
  text-decoration: none;
  border:          none;
  cursor:          pointer;
  transition:      all 0.2s;
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  font-family:     inherit;
  letter-spacing:  0.01em;
}

.btn:hover         { background: var(--copper-deep); transform: translateY(-1px); }
.btn.copper        { background: var(--copper); }
.btn.copper:hover  { background: var(--copper-deep); }
.btn.lg            { padding: 16px 28px; font-size: 15px; border-radius: 8px; }
.btn.ghost         { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn.ghost:hover   { background: var(--ink); color: var(--cream); }

/* Botón "Pedir demo" del nav — copper para mayor visibilidad */
.nav-links .btn       { background: var(--copper); }
.nav-links .btn:hover { background: var(--copper-deep); }

/* === LAYOUT BASE === */
section { position: relative; z-index: 2; }

.container {
  max-width: 1200px;
  margin:    0 auto;
  padding:   0 24px;
}