/* Box Studio v2 — capa de tema para el resto del sitio (landing, blog, calculadoras, legales…)
 * Las páginas conservan su CSS propio, con la paleta ya remapeada a oscuro; este archivo
 * unifica cromo (nav, hero, footer), tipografía, formularios y movimiento con la app. */
:root {
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --line: rgba(150, 195, 225, .12);
  --line-strong: rgba(150, 195, 225, .24);
  --accent-soft: rgba(93,242,168, .13);
  --accent-glow: rgba(93,242,168, .35);
  --ink-strong: #e4eef4;
  --panel: #0b1118;
  --surface: #0b1118;
  --font-display: 'Chakra Petch', 'Segoe UI', system-ui, sans-serif;
  --font-num: 'JetBrains Mono', ui-monospace, Consolas, monospace;
}
html { color-scheme: dark; scroll-behavior: smooth; }
body {
  color: var(--ink) !important;
  background:
    radial-gradient(900px 520px at 50% -8%, rgba(35, 90, 115, .35), transparent 70%),
    linear-gradient(rgba(93,242,168,.035) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(93,242,168,.035) 1px, transparent 1px) 0 0 / 44px 44px,
    var(--paper) !important;
  background-attachment: fixed !important;
  -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(93,242,168,.28); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
a { transition: color 150ms ease, opacity 150ms ease; }
h1, h2, h3, h4, .logo, nav, button, .btn, label, th { font-family: var(--font-display) !important; }
h1, h2, h3 { color: var(--ink-strong); letter-spacing: .01em; }
code, kbd, pre, .mono, .stat-num, .num { font-family: var(--font-num) !important; }

/* ── NAV ─────────────────────────────────────────────── */
nav {
  background: rgba(6, 10, 14, .82) !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 100;
}
nav::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: .5; pointer-events: none; }
nav .logo, nav .nav-logo, nav .brand {
  color: var(--ink-strong) !important; display: inline-flex; align-items: center; gap: .55rem;
  font-weight: 600 !important; letter-spacing: .02em !important; text-decoration: none !important;
}
nav .logo::before, nav .nav-logo::before, nav .brand::before {
  content: ''; width: 26px; height: 26px; flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke-linejoin='round'%3E%3Cpath d='M16 3 4 9.5v13L16 29l12-6.5v-13z' stroke='%235df2a8' stroke-width='1.6'/%3E%3Cpath d='M4 9.5 16 16l12-6.5M16 16v13' stroke='%235df2a8' stroke-width='1.6' opacity='.55'/%3E%3Cpath d='M10 6.2 22 12.8' stroke='%23ff7a45' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
nav .logo span, nav .nav-logo span, nav .brand span { color: var(--accent) !important; }
nav a { text-decoration: none; }
nav .nav-links a, nav .links a, nav ul a {
  color: var(--muted) !important; font-size: .78rem !important; letter-spacing: .06em; text-transform: uppercase;
  padding: .4rem .7rem; border-radius: 8px; transition: color 150ms ease, background-color 150ms ease, transform 160ms var(--ease-out);
}
nav a.cta, nav .cta, nav a.nav-cta {
  background: var(--accent) !important; color: var(--paper) !important; font-weight: 700; border-radius: 8px !important;
  transition: box-shadow 200ms ease, transform 160ms var(--ease-out);
}
nav a.cta:active, nav .cta:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  nav .nav-links a:not(.cta):hover, nav .links a:hover, nav ul a:hover { color: var(--ink-strong) !important; background: rgba(255,255,255,.05); text-decoration: none; }
  nav a.cta:hover, nav .cta:hover { box-shadow: 0 0 22px -2px var(--accent-glow); text-decoration: none; }
}

/* ── HERO / SECCIONES ────────────────────────────────── */
.page-hero, .hero:not(:has(.hero-inner)), header.hero {
  background: linear-gradient(180deg, rgba(13, 26, 36, .85), rgba(5, 8, 12, 0)) !important;
  border-bottom: 1px solid var(--line) !important; position: relative;
}
.page-hero::before, .hero:not(:has(.hero-inner))::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(600px 240px at 12% 0%, rgba(93,242,168,.10), transparent 70%);
}
.page-hero > *, .hero:not(:has(.hero-inner)) > * { position: relative; }
.page-hero h1, .hero h1 { color: var(--ink-strong) !important; }
.page-hero h1 span, .hero h1 span, h1 em { color: var(--accent) !important; font-style: normal; }

/* tarjetas y bloques */
.feature-item, .step-card, .card, .post-card, .blog-card, .download-card, .box, .panel, .term, .result-box, .info-card,
.preset-btn, .faq-item {
  border-radius: 12px; border-color: var(--line) !important;
  transition: border-color 200ms ease, transform 200ms var(--ease-out), background-color 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .feature-item:hover, .post-card:hover, .blog-card:hover, .download-card:hover, .card:hover { border-color: var(--line-strong) !important; transform: translateY(-2px); }
}
.cta-block { background: linear-gradient(135deg, #0b1620, #0e2230) !important; border: 1px solid var(--line-strong); border-radius: 14px !important; }
.cta-block a { background: var(--accent) !important; color: var(--paper) !important; border-radius: 8px !important; }

/* ── FORMULARIOS ─────────────────────────────────────── */
input, select, textarea {
  font-family: var(--font-num) !important; background: rgba(255,255,255,.03) !important; color: var(--ink) !important;
  border: 1px solid var(--line-strong) !important; border-radius: 8px !important;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent) !important; background: var(--accent-soft) !important; box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }
select option { background: #0b1017; color: #e4eef4; }
input::placeholder, textarea::placeholder { color: #5d6e7c; }
input[type=range] { accent-color: var(--accent); }

button, .btn {
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms var(--ease-out), box-shadow 200ms ease;
}
button:active, .btn:active, a.btn:active { transform: scale(.97); }
button:disabled { opacity: .4; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) {
  button[class*="btn"]:hover, .btn:hover { box-shadow: 0 0 20px -4px var(--accent-glow); }
}

/* ── TABLAS ──────────────────────────────────────────── */
table { border-collapse: collapse; }
th { background: rgba(93,242,168,.08); color: var(--ink-strong); letter-spacing: .06em; }
th, td { border-color: var(--line) !important; }
tr:nth-child(even) td { background: rgba(255,255,255,.015); }

/* ── FOOTER ──────────────────────────────────────────── */
footer { background: #04070a !important; border-top: 1px solid var(--line) !important; color: var(--muted) !important; }
footer a { color: var(--muted) !important; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { footer a:hover { color: var(--accent) !important; } }

/* scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ── ajustes de landing ─────────────────────────────── */
nav ul { gap: .2rem !important; }
nav ul a, nav .nav-links a { white-space: nowrap; padding: .35rem .5rem !important; }
nav ul a::after { display: none; }
.counter-badge { background: rgba(255,255,255,.06) !important; color: var(--ink) !important; border: 1px solid var(--line-strong); }
.compatible span { background: rgba(255,255,255,.05) !important; color: var(--ink) !important; border: 1px solid var(--line); }
.compatible span:hover { background: var(--accent) !important; color: var(--paper) !important; }
.lang-switch { border: 1px solid var(--line-strong); }
.btn[style*="FF5E5B"], .btn[style*="ff5e5b"] { color: #fff !important; }