/* Landing-only layout. All colour/type comes from tokens.css (the brand).
   Compartido por / (en) y /es/ (es): cámbialo aquí una vez. */
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 var(--space-6); }

.nav { display: flex; align-items: center; justify-content: space-between;
       padding: var(--space-6) 0; }
.logo { font-family: var(--font-heading); font-weight: var(--font-weight-bold);
        font-size: var(--scale-lg); letter-spacing: .01em; }
.logo b { color: var(--color-primary); font-weight: inherit; }
.nav-right { display: flex; align-items: center; gap: var(--space-4); }
.nav a.signin { color: var(--color-text-muted); text-decoration: none; font-size: var(--scale-sm); }
.nav a.signin:hover { color: var(--color-text); }

/* Selector de idioma (SEO: son <a> reales a /·/es/, no JS). */
.lang { display: flex; align-items: center; gap: var(--space-2); font-size: var(--scale-sm); }
.lang a { color: var(--color-text-muted); text-decoration: none; }
.lang a:hover { color: var(--color-text); }
.lang a[aria-current="true"] { color: var(--color-text); font-weight: var(--font-weight-medium); }
.lang .sep { color: var(--color-border); }

.hero { padding: var(--space-12) 0 var(--space-16); max-width: 46rem; }
.eyebrow { display: inline-block; font-family: var(--font-mono); font-size: var(--scale-sm);
           color: var(--color-accent); letter-spacing: .08em; text-transform: uppercase;
           margin-bottom: var(--space-4); }
.hero h1 { font-family: var(--font-heading); font-weight: var(--font-weight-bold);
           font-size: var(--scale-2xl); line-height: 1.08; margin: 0 0 var(--space-4); }
.hero p.lead { font-size: var(--scale-lg); color: var(--color-text-muted);
               line-height: 1.5; margin: 0 0 var(--space-8); }

.cta { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.btn-primary, .btn-ghost {
  display: inline-block; padding: var(--space-3) var(--space-6); border-radius: var(--radius-md);
  font-weight: var(--font-weight-medium); text-decoration: none; font-size: var(--font-size-base);
  transition: transform .04s ease, filter .15s ease; }
.btn-primary { background: var(--color-primary); color: var(--color-primary-contrast); }
.btn-primary:hover { filter: brightness(1.06); }
.btn-primary:active { transform: translateY(1px); }
.btn-ghost { color: var(--color-text); border: 1px solid var(--color-border); }
.btn-ghost:hover { border-color: var(--color-primary); color: var(--color-primary); }
.cta small { color: var(--color-text-muted); font-size: var(--scale-sm); }

.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6);
            padding: var(--space-8) 0 var(--space-12); }
.feature { background: var(--color-surface); border: 1px solid var(--color-border);
           border-radius: var(--radius-lg); padding: var(--space-6); }
.feature .ico { width: 34px; height: 34px; color: var(--color-accent); margin-bottom: var(--space-4); }
.feature h3 { font-family: var(--font-heading); font-size: var(--scale-md);
              margin: 0 0 var(--space-2); }
.feature p { color: var(--color-text-muted); font-size: var(--scale-sm); line-height: 1.5; margin: 0; }

.strip { border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
         padding: var(--space-8) 0; margin-bottom: var(--space-12); }
.strip .row { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.strip .col h4 { font-family: var(--font-mono); font-size: var(--scale-sm);
                 color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .06em;
                 margin: 0 0 var(--space-2); }
.strip .col p { margin: 0; font-size: var(--scale-md); }
.strip .tag { color: var(--color-primary); }

footer.site { border-top: 1px solid var(--color-border); padding: var(--space-8) 0;
              color: var(--color-text-muted); font-size: var(--scale-sm);
              display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); }

@media (max-width: 760px) {
  .features { grid-template-columns: 1fr; }
  .hero h1 { font-size: var(--scale-xl); }
}