/* ============================================================
   NIVUU — site.css
   Sistema de diseño de la plataforma (navbar, footer, home).
   Se carga DESPUÉS de main.css. Todo usa el prefijo "sx-" para
   no chocar con los estilos de las páginas internas.
   ============================================================ */

:root {
    --sx-ink:     #08102a;
    --sx-navy:    #0f1f4d;
    --sx-accent:  #3b6bff;
    --sx-accent-d:#2c55d9;
    --sx-light:   #f0f4ff;
    --sx-gray:    #64748b;
    --sx-line:    #e5e9f2;
    --sx-bg-soft: #f7f9fd;
    --sx-max:     1120px;
    --sx-nav-h:   64px;
}

body.sx { background: #fff; color: var(--sx-ink); }
.sx-wrap { max-width: var(--sx-max); margin: 0 auto; padding: 0 32px; }

/* ── Botones ─────────────────────────────────────────────── */
.sx-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 22px; border-radius: 8px;
    font: 600 0.92rem/1 'Inter', sans-serif;
    border: 1px solid transparent; cursor: pointer;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.sx-btn--primary { background: var(--sx-accent); color: #fff; }
.sx-btn--primary:hover { background: var(--sx-accent-d); }
.sx-btn--ghost { background: #fff; color: var(--sx-ink); border-color: var(--sx-line); }
.sx-btn--ghost:hover { border-color: var(--sx-ink); }
.sx-btn--light { background: #fff; color: var(--sx-navy); }
.sx-btn--light:hover { background: var(--sx-light); }
.sx-btn--outline-light { color: #fff; border-color: rgba(255,255,255,.28); }
.sx-btn--outline-light:hover { border-color: #fff; }
.sx-btn--sm { padding: 9px 16px; font-size: 0.85rem; }

/* ── Header / navbar ─────────────────────────────────────── */
.sx-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 200;
    height: var(--sx-nav-h);
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--sx-line);
}
.sx-nav {
    max-width: var(--sx-max); height: 100%; margin: 0 auto; padding: 0 32px;
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.sx-logo { display: block; flex-shrink: 0; }
.sx-logo img { height: 30px; width: auto; }

.sx-links { display: flex; align-items: center; gap: 4px; list-style: none; }
.sx-links > li { position: relative; }
.sx-links a, .sx-drop-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 12px; border-radius: 6px;
    font: 500 0.88rem/1 'Inter', sans-serif; color: var(--sx-gray);
    background: none; border: 0; cursor: pointer;
    transition: color .2s ease, background .2s ease;
}
.sx-links a:hover, .sx-drop-toggle:hover,
.sx-links a.is-active, .sx-drop-toggle.is-active { color: var(--sx-ink); }
.sx-caret { font-size: .62rem; transition: transform .2s ease; }
.sx-drop.open .sx-caret { transform: rotate(180deg); }

.sx-menu {
    position: absolute; top: calc(100% + 10px); left: 0; min-width: 270px;
    list-style: none; padding: 8px; background: #fff;
    border: 1px solid var(--sx-line); border-radius: 10px;
    box-shadow: 0 12px 32px rgba(8,16,42,.08);
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.sx-drop.open .sx-menu { opacity: 1; visibility: visible; transform: none; }
.sx-menu a { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; width: 100%; }
.sx-menu a:hover { background: var(--sx-bg-soft); }
.sx-menu i { font-size: 1rem; color: var(--sx-accent); margin-top: 1px; }
.sx-menu span { display: flex; flex-direction: column; gap: 3px; color: var(--sx-ink); font-weight: 600; }
.sx-menu small { font-weight: 400; font-size: .76rem; color: var(--sx-gray); }

.sx-burger {
    display: none; width: 40px; height: 40px; background: none; border: 0;
    border-radius: 8px; cursor: pointer; flex-direction: column;
    align-items: center; justify-content: center; gap: 5px;
}
.sx-burger span { display: block; width: 20px; height: 2px; background: var(--sx-ink); transition: transform .2s ease, opacity .2s ease; }
.sx-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sx-burger.open span:nth-child(2) { opacity: 0; }
.sx-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.sx-mobile {
    position: fixed; top: var(--sx-nav-h); left: 0; right: 0; bottom: 0; z-index: 199;
    background: #fff; padding: 16px 32px 32px; overflow-y: auto;
    display: none; flex-direction: column;
}
.sx-mobile.open { display: flex; }
.sx-mobile a { padding: 14px 0; font-weight: 500; color: var(--sx-ink); border-bottom: 1px solid var(--sx-line); }
.sx-mobile .sx-mobile-label { margin: 22px 0 4px; font: 600 .72rem/1 'Inter', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--sx-gray); }
.sx-mobile .sx-btn { margin-top: 24px; justify-content: center; border-bottom: 0; color: #fff; }

/* ── Secciones genéricas ─────────────────────────────────── */
.sx-section { padding: 96px 0; }
.sx-section--soft { background: var(--sx-bg-soft); border-top: 1px solid var(--sx-line); border-bottom: 1px solid var(--sx-line); }
.sx-eyebrow { display: block; margin-bottom: 14px; font: 600 .75rem/1 'Inter', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--sx-accent); }
.sx-h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); font-weight: 700; color: var(--sx-ink); max-width: 640px; }
.sx-lead { margin-top: 16px; max-width: 560px; font-size: 1.04rem; color: var(--sx-gray); line-height: 1.7; }

/* ── Hero ────────────────────────────────────────────────── */
.sx-hero { padding: calc(var(--sx-nav-h) + 96px) 0 80px; }
.sx-hero h1 { max-width: 780px; font-size: clamp(2.4rem, 5.6vw, 4rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1.06; color: var(--sx-ink); }
.sx-hero h1 em { font-style: normal; color: var(--sx-accent); }
.sx-hero p { margin-top: 24px; max-width: 580px; font-size: 1.12rem; color: var(--sx-gray); line-height: 1.7; }
.sx-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

.sx-index { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; margin-top: 80px; background: var(--sx-line); border: 1px solid var(--sx-line); border-radius: 12px; overflow: hidden; }
.sx-index a { display: block; padding: 26px 24px; background: #fff; transition: background .2s ease; }
.sx-index a:hover { background: var(--sx-bg-soft); }
.sx-index i { font-size: 1.3rem; color: var(--sx-accent); }
.sx-index strong { display: block; margin-top: 18px; font-size: .98rem; color: var(--sx-ink); }
.sx-index span { display: block; margin-top: 4px; font-size: .84rem; color: var(--sx-gray); line-height: 1.5; }

/* ── Producto (fila) ─────────────────────────────────────── */
.sx-product { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; padding: 72px 0; border-top: 1px solid var(--sx-line); }
.sx-product:first-of-type { border-top: 0; padding-top: 0; }
.sx-product-num { font: 600 .8rem/1 'Inter', sans-serif; color: var(--sx-accent); letter-spacing: .08em; }
.sx-product h3 { margin-top: 14px; font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 700; color: var(--sx-ink); }
.sx-product p { margin-top: 14px; color: var(--sx-gray); line-height: 1.7; max-width: 460px; }
.sx-product-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.sx-list { list-style: none; border: 1px solid var(--sx-line); border-radius: 12px; background: #fff; }
.sx-list li { display: flex; gap: 14px; padding: 18px 22px; border-bottom: 1px solid var(--sx-line); }
.sx-list li:last-child { border-bottom: 0; }
.sx-list i { flex-shrink: 0; margin-top: 2px; color: var(--sx-accent); }
.sx-list b { display: block; font-size: .94rem; font-weight: 600; color: var(--sx-ink); }
.sx-list small { display: block; margin-top: 2px; font-size: .84rem; color: var(--sx-gray); line-height: 1.5; }
.sx-tag { display: inline-block; margin-top: 14px; padding: 4px 10px; border: 1px solid var(--sx-line); border-radius: 999px; font-size: .74rem; font-weight: 500; color: var(--sx-gray); }

/* ── Herramientas ────────────────────────────────────────── */
.sx-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 48px; }
.sx-tool { display: flex; gap: 18px; padding: 28px; background: #fff; border: 1px solid var(--sx-line); border-radius: 12px; transition: border-color .2s ease; }
.sx-tool:hover { border-color: var(--sx-accent); }
.sx-tool i { font-size: 1.4rem; color: var(--sx-accent); }
.sx-tool b { display: block; font-size: 1rem; color: var(--sx-ink); }
.sx-tool span { display: block; margin-top: 6px; font-size: .88rem; color: var(--sx-gray); line-height: 1.6; }

/* ── Principios ──────────────────────────────────────────── */
.sx-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin-top: 56px; }
.sx-col { padding-top: 22px; border-top: 1px solid var(--sx-ink); }
.sx-col h4 { font-size: 1.02rem; font-weight: 600; color: var(--sx-ink); letter-spacing: -0.01em; }
.sx-col p { margin-top: 10px; font-size: .92rem; color: var(--sx-gray); line-height: 1.7; }

/* ── CTA / contacto ──────────────────────────────────────── */
.sx-cta { background: var(--sx-navy); color: #fff; padding: 96px 0; }
.sx-cta .sx-wrap { display: flex; align-items: center; justify-content: space-between; gap: 48px; }
.sx-cta h2 { max-width: 560px; font-size: clamp(1.8rem, 3.4vw, 2.5rem); font-weight: 700; color: #fff; }
.sx-cta p { margin-top: 14px; max-width: 480px; color: #a9b8dc; line-height: 1.7; }
.sx-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; flex-shrink: 0; }

/* ── Footer ──────────────────────────────────────────────── */
footer.sx-footer { background: #fff; color: var(--sx-gray); padding: 64px 0 32px; border-top: 1px solid var(--sx-line); }
.sx-footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 48px; }
.sx-footer-brand img { height: 30px; width: auto; }
.sx-footer-brand p { margin-top: 16px; max-width: 280px; font-size: .88rem; line-height: 1.7; }
.sx-footer h5 { margin-bottom: 16px; font: 600 .75rem/1 'Inter', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--sx-ink); }
.sx-footer ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.sx-footer ul a { font-size: .9rem; color: var(--sx-gray); transition: color .2s ease; }
.sx-footer ul a:hover { color: var(--sx-accent); }
.sx-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-top: 24px; border-top: 1px solid var(--sx-line); font-size: .84rem; }
.sx-footer-bottom div { display: flex; gap: 20px; }
.sx-footer-bottom a { color: var(--sx-gray); }
.sx-footer-bottom a:hover { color: var(--sx-accent); }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 960px) {
    .sx-links, .sx-nav > .sx-btn { display: none; }
    .sx-burger { display: flex; }
    .sx-index { grid-template-columns: 1fr 1fr; }
    .sx-index a:last-child { grid-column: 1 / -1; }
    .sx-product { grid-template-columns: 1fr; gap: 32px; padding: 56px 0; }
    .sx-cols { grid-template-columns: 1fr; gap: 32px; }
    .sx-cta .sx-wrap { flex-direction: column; align-items: flex-start; }
    .sx-footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .sx-wrap, .sx-nav { padding: 0 20px; }
    .sx-mobile { padding: 8px 20px 32px; }
    .sx-section, .sx-cta { padding: 64px 0; }
    .sx-hero { padding: calc(var(--sx-nav-h) + 56px) 0 56px; }
    .sx-index { grid-template-columns: 1fr; margin-top: 56px; }
    .sx-tools { grid-template-columns: 1fr; }
    .sx-footer-top { grid-template-columns: 1fr; gap: 32px; }
}


/* ============================================================
   PÁGINAS INTERNAS (radio, herramientas)
   ============================================================ */
.sx-page-hero { padding: calc(var(--sx-nav-h) + 72px) 0 80px; border-bottom: 1px solid var(--sx-line); }
.sx-page-hero .sx-wrap { display: grid; grid-template-columns: 1fr 480px; gap: 72px; align-items: center; }
.sx-page-hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.2rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1.08; color: var(--sx-ink); }
.sx-page-hero h1 em { font-style: normal; color: var(--sx-accent); }
.sx-page-hero p { margin-top: 20px; max-width: 480px; font-size: 1.05rem; color: var(--sx-gray); line-height: 1.7; }
.sx-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.sx-pills span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--sx-line); border-radius: 999px; font-size: .8rem; color: var(--sx-gray); }
.sx-pills i { color: var(--sx-accent); }
.sx-hero-note { margin-top: 24px; max-width: 480px; font-size: .84rem; color: var(--sx-gray); line-height: 1.6; }

/* Tarjeta de herramienta / reproductor */
.sx-card { padding: 28px; background: #fff; border: 1px solid var(--sx-line); border-radius: 14px; box-shadow: 0 12px 40px rgba(8,16,42,.05); }
.sx-result { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--sx-bg-soft); border: 1px solid var(--sx-line); border-radius: 10px; }
.sx-result + .sx-result { margin-top: 12px; }
.sx-result-body { flex: 1; min-width: 0; }
.sx-result-label { font: 600 .7rem/1 'Inter', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--sx-gray); margin-bottom: 6px; }
.sx-result-value { font: 500 1.05rem/1.4 ui-monospace, 'SFMono-Regular', Consolas, monospace; color: var(--sx-ink); word-break: break-all; }
.sx-copy { flex-shrink: 0; width: 38px; height: 38px; display: grid; place-items: center; background: #fff; border: 1px solid var(--sx-line); border-radius: 8px; color: var(--sx-gray); cursor: pointer; transition: border-color .2s ease, color .2s ease; }
.sx-copy:hover { border-color: var(--sx-accent); color: var(--sx-accent); }

.sx-strength { display: flex; align-items: center; gap: 12px; margin: 16px 0 24px; }
.sx-strength-track { flex: 1; height: 4px; background: var(--sx-line); border-radius: 4px; overflow: hidden; }
.sx-strength-fill { height: 100%; width: 0; border-radius: 4px; transition: width .25s ease, background .25s ease; }
.sx-strength-label { min-width: 80px; text-align: right; font-size: .8rem; font-weight: 600; color: var(--sx-gray); }

.sx-label { display: block; margin-bottom: 8px; font-size: .82rem; font-weight: 500; color: var(--sx-ink); }
.sx-label strong { color: var(--sx-accent); }
.sx-input { width: 100%; padding: 11px 12px; background: #fff; border: 1px solid var(--sx-line); border-radius: 8px; font: 400 .92rem 'Inter', sans-serif; color: var(--sx-ink); transition: border-color .2s ease, box-shadow .2s ease; }
.sx-input:focus { outline: 0; border-color: var(--sx-accent); box-shadow: 0 0 0 3px rgba(59,107,255,.12); }
.sx-fields { display: grid; gap: 14px; }
.sx-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sx-row-3 { display: grid; grid-template-columns: 1.2fr 1.6fr 1fr; gap: 14px; }
.sx-range { width: 100%; accent-color: var(--sx-accent); }
.sx-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 20px 0 4px; }
.sx-check { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--sx-line); border-radius: 8px; font-size: .86rem; color: var(--sx-ink); cursor: pointer; }
.sx-check input { accent-color: var(--sx-accent); width: 16px; height: 16px; }
.sx-btn--block { width: 100%; justify-content: center; margin-top: 20px; padding: 14px; }
.sx-btn:disabled { opacity: .6; cursor: default; }
.sx-alert { margin-top: 16px; padding: 12px 14px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; font-size: .86rem; color: #b91c1c; }
.sx-results { margin-top: 20px; }
.sx-note { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--sx-line); font-size: .78rem; color: var(--sx-gray); line-height: 1.6; }
.sx-note i { color: var(--sx-accent); margin-right: 4px; }
.sx-note a { color: var(--sx-accent); text-decoration: underline; }

/* Reproductor */
.sx-player { text-align: center; padding: 32px 28px; }
.sx-live { display: inline-flex; align-items: center; gap: 8px; font: 600 .72rem/1 'Inter', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--sx-accent); }
.sx-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sx-accent); }
.sx-player h2 { margin-top: 12px; font-size: 1.4rem; font-weight: 700; color: var(--sx-ink); }
.sx-player .sx-sub { margin-top: 6px; font-size: .86rem; color: var(--sx-gray); }
.sx-player .visualizer { display: flex; align-items: center; justify-content: center; gap: 3px; height: 64px; margin: 28px 0; }
.sx-player .visualizer-bar { width: 4px; height: 4px; min-height: 4px; background: var(--sx-accent); border-radius: 2px; opacity: .85; transition: height .12s ease; }
.sx-controls { display: flex; align-items: center; justify-content: center; gap: 20px; }
.sx-ctrl { width: 44px; height: 44px; display: grid; place-items: center; background: #fff; border: 1px solid var(--sx-line); border-radius: 50%; font-size: 1.2rem; color: var(--sx-gray); cursor: pointer; transition: border-color .2s ease, color .2s ease; }
.sx-ctrl:hover { border-color: var(--sx-accent); color: var(--sx-accent); }
.sx-ctrl--play { width: 64px; height: 64px; font-size: 1.8rem; background: var(--sx-accent); border-color: var(--sx-accent); color: #fff; }
.sx-ctrl--play:hover { background: var(--sx-accent-d); border-color: var(--sx-accent-d); color: #fff; }
.sx-volume { display: flex; align-items: center; gap: 10px; margin: 24px auto 0; max-width: 260px; color: var(--sx-gray); }
.sx-status { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 20px; font-size: .82rem; color: var(--sx-gray); }
.sx-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #cbd5e1; }

/* Ventajas (rejilla) */
.sx-adv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 56px; background: var(--sx-line); border: 1px solid var(--sx-line); border-radius: 12px; overflow: hidden; }
.sx-adv > div { padding: 32px 28px; background: #fff; }
.sx-adv i { font-size: 1.3rem; color: var(--sx-accent); }
.sx-adv h3 { margin-top: 18px; font-size: 1.02rem; font-weight: 600; letter-spacing: -0.01em; color: var(--sx-ink); }
.sx-adv p { margin-top: 8px; font-size: .9rem; color: var(--sx-gray); line-height: 1.65; }
.sx-adv code { padding: 1px 6px; background: var(--sx-light); border-radius: 4px; font-size: .84rem; color: var(--sx-navy); }

/* Pasos */
.sx-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin-top: 56px; }
.sx-step { padding-top: 22px; border-top: 1px solid var(--sx-ink); }
.sx-step-n { font: 600 .8rem/1 'Inter', sans-serif; letter-spacing: .08em; color: var(--sx-accent); }
.sx-step h3 { margin-top: 12px; font-size: 1.02rem; font-weight: 600; color: var(--sx-ink); letter-spacing: -0.01em; }
.sx-step p { margin-top: 8px; font-size: .92rem; color: var(--sx-gray); line-height: 1.7; }

/* Aviso */
.sx-notice { max-width: 760px; padding: 28px 32px; border: 1px solid var(--sx-line); border-radius: 12px; background: #fff; }
.sx-notice h3 { display: flex; align-items: center; gap: 10px; font-size: 1rem; font-weight: 600; color: var(--sx-ink); }
.sx-notice h3 i { color: var(--sx-accent); }
.sx-notice p { margin-top: 12px; font-size: .88rem; color: var(--sx-gray); line-height: 1.7; }
.sx-notice a { color: var(--sx-accent); text-decoration: underline; }

@media (max-width: 960px) {
    .sx-page-hero .sx-wrap { grid-template-columns: 1fr; gap: 40px; }
    .sx-adv { grid-template-columns: 1fr 1fr; }
    .sx-steps { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 600px) {
    .sx-page-hero { padding: calc(var(--sx-nav-h) + 40px) 0 56px; }
    .sx-card { padding: 20px; }
    .sx-adv { grid-template-columns: 1fr; }
    .sx-row-2, .sx-row-3, .sx-checks { grid-template-columns: 1fr; }
}


/* ============================================================
   LEGALES Y 404  (sobrescribe los .legal-* de main.css)
   ============================================================ */
.sx-legal-head { padding: calc(var(--sx-nav-h) + 64px) 0 48px; border-bottom: 1px solid var(--sx-line); }
.sx-legal-head h1 { font-size: clamp(2rem, 4.4vw, 3rem); font-weight: 700; letter-spacing: -0.04em; color: var(--sx-ink); }
.sx-legal-head p { margin-top: 14px; font-size: .92rem; color: var(--sx-gray); }

body.sx .legal-body { background: #fff; padding: 56px 32px 96px; }
body.sx .legal-body-inner { max-width: var(--sx-max); gap: 72px; grid-template-columns: 220px 1fr; }
body.sx .legal-toc { top: calc(var(--sx-nav-h) + 24px); padding: 0; background: none; border: 0; border-radius: 0; }
body.sx .legal-toc h4 { margin-bottom: 14px; font-size: .72rem; letter-spacing: .08em; color: var(--sx-ink); }
body.sx .legal-toc ul { gap: 2px; border-left: 1px solid var(--sx-line); }
body.sx .legal-toc a { padding: 6px 14px; margin-left: -1px; border-left: 1px solid transparent; border-radius: 0; font-size: .84rem; color: var(--sx-gray); }
body.sx .legal-toc a:hover { background: none; color: var(--sx-accent); border-left-color: var(--sx-accent); }
body.sx .legal-section { margin-bottom: 44px; padding-bottom: 44px; border-bottom-color: var(--sx-line); }
body.sx .legal-section h2 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; color: var(--sx-ink); }
body.sx .legal-section h2 span { padding: 0; background: none; font-size: .8rem; color: var(--sx-accent); letter-spacing: .08em; }
body.sx .legal-section p, body.sx .legal-section ul li { color: var(--sx-gray); }
body.sx .legal-section a { color: var(--sx-accent); font-weight: 500; text-decoration: underline; }
body.sx .legal-label { color: var(--sx-ink); }
body.sx .legal-alert { background: var(--sx-bg-soft); border: 1px solid var(--sx-line); border-left: 3px solid var(--sx-accent); border-radius: 8px; color: var(--sx-ink); font-weight: 400; }
body.sx .legal-placeholder { background: #fef2f2; color: #b91c1c; }
body.sx .arco-grid { gap: 12px; }
body.sx .arco-card { background: #fff; border: 1px solid var(--sx-line); border-radius: 10px; }
body.sx .arco-card strong { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: .92rem; color: var(--sx-ink); }
body.sx .arco-card strong i { color: var(--sx-accent); }

/* 404 */
.sx-404 { padding: calc(var(--sx-nav-h) + 112px) 0 128px; }
.sx-404-num { font-size: clamp(5rem, 14vw, 9rem); font-weight: 700; letter-spacing: -0.06em; line-height: 1; color: var(--sx-accent); }
.sx-404 h1 { margin-top: 16px; font-size: clamp(1.8rem, 3.4vw, 2.5rem); font-weight: 700; color: var(--sx-ink); }
.sx-404 p { margin-top: 14px; max-width: 480px; color: var(--sx-gray); line-height: 1.7; }

@media (max-width: 960px) {
    body.sx .legal-body-inner { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    body.sx .legal-body { padding: 40px 20px 64px; }
    .sx-404 { padding: calc(var(--sx-nav-h) + 64px) 0 80px; }
}


/* ============================================================
   PÁGINAS DE SERVICIO
   ============================================================ */
.sx-page-hero .sx-hero-actions { margin-top: 32px; }
.sx-use { margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--sx-line); }
.sx-use h3 { font-size: 1rem; font-weight: 600; color: var(--sx-ink); }
.sx-use .sx-pills { margin-top: 16px; }
.sx-section--soft .sx-pills span { background: #fff; }

.sx-faq { max-width: 760px; margin-top: 40px; border-top: 1px solid var(--sx-line); }
.sx-faq details { border-bottom: 1px solid var(--sx-line); }
.sx-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; font-size: 1rem; font-weight: 500; color: var(--sx-ink); cursor: pointer; list-style: none; }
.sx-faq summary::-webkit-details-marker { display: none; }
.sx-faq summary::after { content: "+"; font-size: 1.3rem; font-weight: 300; color: var(--sx-accent); }
.sx-faq details[open] summary::after { content: "–"; }
.sx-faq details p { padding: 0 0 22px; max-width: 640px; font-size: .94rem; color: var(--sx-gray); line-height: 1.7; }

.sx-related { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 40px; background: var(--sx-line); border: 1px solid var(--sx-line); border-radius: 12px; overflow: hidden; }
.sx-related a { display: block; padding: 24px; background: #fff; transition: background .2s ease; }
.sx-related a:hover { background: var(--sx-bg-soft); }
.sx-related i { font-size: 1.25rem; color: var(--sx-accent); }
.sx-related strong { display: block; margin-top: 16px; font-size: .96rem; color: var(--sx-ink); }
.sx-related span { display: block; margin-top: 4px; font-size: .84rem; color: var(--sx-gray); }

@media (max-width: 960px) { .sx-related { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .sx-related { grid-template-columns: 1fr; } }

/* Hero con ilustración */
.sx-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.sx-hero-grid h1 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); }
.sx-hero-art img { width: 100%; height: auto; border-radius: 24px; }
@media (max-width: 960px) {
    .sx-hero-grid { grid-template-columns: 1fr; gap: 40px; }
    .sx-hero-art { max-width: 560px; }
}