/* ═══════════════════════════════════════════════════════════
   XSmart — Landing
   Base + estados :hover reales (reemplazan a style-hover)
   ═══════════════════════════════════════════════════════════ */

html { scroll-behavior: smooth; background: #060608; }
body {
  margin: 0;
  background: #060608;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
a { text-decoration: none; }
::selection { background: rgba(124, 58, 237, 0.35); color: #E4E7EA; }
:focus-visible { outline: 1px solid rgba(124, 58, 237, 0.6); outline-offset: 3px; }

/* ─── Navegación ─── */
.nav-link {
  color: #999EA5;
  font-size: 13px;
  letter-spacing: 0.02em;
  transition: color 250ms ease-out;
}
.nav-link:hover { color: #E4E7EA; }

.nav-cta {
  color: #E4E7EA;
  font-size: 13px;
  padding: 8px 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  transition: border-color 250ms ease-out, background 250ms ease-out;
}
.nav-cta:hover {
  border-color: rgba(124, 58, 237, 0.45);
  background: rgba(124, 58, 237, 0.06);
}

/* ─── Botones ─── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 32px;
  background: #E4E7EA;
  color: #060608;
  font-size: 15px;
  font-weight: 500;
  border-radius: 9px;
  transition: box-shadow 250ms ease-out, transform 250ms ease-out;
}
.btn-primary:hover {
  box-shadow: 0 0 32px rgba(124, 58, 237, 0.35);
  transform: translateY(-1px);
}

/* Variante del CTA final (un poco más grande y con glow mayor) */
.btn-primary--lg {
  min-height: 52px;
  padding: 0 40px;
}
.btn-primary--lg:hover {
  box-shadow: 0 0 36px rgba(124, 58, 237, 0.4);
  transform: translateY(-1px);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 32px;
  color: #999EA5;
  font-size: 15px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 9px;
  transition: color 250ms ease-out, border-color 250ms ease-out;
}
.btn-secondary:hover {
  color: #E4E7EA;
  border-color: rgba(255, 255, 255, 0.25);
}

/* ─── Tarjetas de verticales ─── */
.card-feature {
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  background: linear-gradient(160deg, #101014 0%, #0A0A0C 60%);
  padding: clamp(32px, 5vw, 56px);
  position: relative;
  overflow: hidden;
  transition: border-color 300ms ease-out;
}
.card-feature:hover { border-color: rgba(124, 58, 237, 0.45); }

.card {
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  background: #0A0A0C;
  padding: 32px 28px;
  transition: border-color 300ms ease-out, background 300ms ease-out;
}
.card:hover {
  border-color: rgba(124, 58, 237, 0.45);
  background: #101014;
}

/* ─── Enlaces de footer ─── */
.footer-link {
  color: #6C7178;
  font-size: 13px;
  transition: color 250ms ease-out;
}
.footer-link:hover { color: #999EA5; }

/* ─── Páginas legales (privacidad / términos) ─── */
.legal {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(120px, 14vw, 180px) clamp(20px, 5vw, 48px) clamp(80px, 10vw, 120px);
}
.legal__eyebrow {
  margin: 0 0 24px;
  font-size: 12px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: #6C7178;
  font-family: 'Space Grotesk', sans-serif;
}
.legal h1 {
  margin: 0 0 16px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: #E4E7EA;
  text-wrap: balance;
}
.legal__meta {
  margin: 0 0 56px;
  font-size: 14px;
  color: #6C7178;
}
.legal h2 {
  margin: 56px 0 16px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: clamp(20px, 3vw, 26px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #E4E7EA;
}
.legal p,
.legal li {
  font-size: 16px;
  line-height: 1.75;
  color: #999EA5;
}
.legal p { margin: 0 0 18px; }
.legal a { color: #C3C8CD; border-bottom: 1px solid rgba(124, 58, 237, 0.45); }
.legal a:hover { color: #E4E7EA; }
.legal ul { margin: 0 0 18px; padding-left: 22px; }
.legal li { margin: 0 0 10px; }
.legal strong { color: #C3C8CD; font-weight: 500; }
.legal__note {
  margin: 0 0 48px;
  padding: 20px 24px;
  border: 1px solid rgba(124, 58, 237, 0.35);
  border-radius: 12px;
  background: rgba(124, 58, 237, 0.06);
}
.legal__note p { margin: 0; color: #C3C8CD; font-size: 15px; }
.legal__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  color: #999EA5;
  font-size: 14px;
  transition: color 250ms ease-out;
}
.legal__back:hover { color: #E4E7EA; }

/* ─── Navbar compacta en móviles angostos (evita recortar el CTA) ─── */
@media (max-width: 420px) {
  header nav { padding-left: 12px !important; padding-right: 12px !important; }
  header nav > div:last-child { gap: 14px !important; }
}

/* ─── Accesibilidad: movimiento reducido ─── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   Fase 5 · Diferenciación estética
   (todo por CSS; los selectores de atributo apuntan a los
    estilos inline existentes, sin tocar el HTML)
   ═══════════════════════════════════════════════════════════ */

/* 1 · Labels técnicos en monoespaciada (Space Mono) */
[style*="letter-spacing:0.36em"],                                                    /* eyebrows numerados */
[style*="letter-spacing:0.28em"],                                                    /* hero tags · insignia · headers de footer */
.legal__eyebrow,                                                                     /* eyebrow de páginas legales */
span[style*="Space Grotesk"][style*="font-size:13px"]:not([style*="letter-spacing"]),/* V.01 + números de método */
span[style*="Space Grotesk"][style*="font-size:12px"]:not([style*="letter-spacing"]) /* V.02–V.05 */
{
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, monospace !important;
}

/* 3 · Tick de acento morado en los eyebrows (fluye inline: sirve centrado o alineado a la izquierda) */
[style*="letter-spacing:0.36em"]::before,
.legal__eyebrow::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 10px;
  vertical-align: middle;
  position: relative;
  top: -1px;
  background: #7C3AED;
  border-radius: 1.5px;
  box-shadow: 0 0 8px rgba(124, 58, 237, 0.7);
}

/* 3 · Divisores full-width con degradado que se desvanece en los bordes */
main > section[style*="border-top:1px solid rgba(255,255,255,0.07)"],
footer[style*="border-top:1px solid rgba(255,255,255,0.07)"] {
  border-image: linear-gradient(90deg, transparent, rgba(255,255,255,0.10) 20%, rgba(124,58,237,0.30) 50%, rgba(255,255,255,0.10) 80%, transparent) 1 !important;
}

/* 2 · Grano sutil sobre el fondo (film grain, estático) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}