/* ============================================================
   SSP Contable — estilo compartido de páginas legales.
   Alineado al sitio principal (morado #a855f7, Poppins/Manrope,
   fondo #0b0813). Solo diseño; el contenido vive en cada HTML.
   ============================================================ */
:root{
  --bg:#0b0813; --bg-2:#100b1c; --panel:#17111f; --panel-2:#1d1528;
  --line:rgba(255,255,255,.09);
  --primary:#a855f7; --primary-2:#c084fc; --primary-lo:#7c2fd4;
  --magenta:#e879f9; --rose:#fb7185;
  --txt:#f7f5fc; --mut:#d3cce0; --mut-2:#aba2bd;
  --card-bg:rgba(168,85,247,.08); --card-border:rgba(168,85,247,.22);
  --disp:'Poppins',system-ui,sans-serif;
  --body:'Manrope',system-ui,sans-serif;
  --grad:linear-gradient(135deg,#c084fc,#e879f9 55%,#fb7185);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--bg);color:var(--txt);line-height:1.8;
  -webkit-font-smoothing:antialiased}
::selection{background:rgba(168,85,247,.35);color:#fff}
a{color:inherit}

.bg-grid{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:60px 60px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 15%,transparent 78%);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 15%,transparent 78%)}

/* nav */
nav{position:fixed;top:0;left:0;width:100%;z-index:100;padding:14px 40px;
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(11,8,19,.9);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line)}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.nav-logo img{width:38px;height:38px;border-radius:10px;object-fit:contain;
  box-shadow:0 0 18px rgba(168,85,247,.35)}
.nav-logo span{font-family:var(--disp);font-weight:800;font-size:1rem;letter-spacing:.2px;
  color:var(--txt)}
.nav-logo span b,.nav-logo .text-primary{color:var(--primary-2)}
.nav-back{color:var(--mut);text-decoration:none;font-size:.88rem;transition:color .2s}
.nav-back:hover{color:var(--primary-2)}

/* layout */
.wrapper{position:relative;z-index:1;max-width:860px;margin:0 auto;padding:130px 40px 100px}
.page-tag{display:inline-block;background:rgba(168,85,247,.1);border:1px solid rgba(168,85,247,.3);
  color:var(--primary-2);font-family:var(--disp);font-size:.72rem;font-weight:700;
  text-transform:uppercase;letter-spacing:2px;padding:5px 14px;border-radius:50px;margin-bottom:18px}
h1{font-family:var(--disp);font-size:clamp(2rem,4vw,3rem);font-weight:800;line-height:1.08;
  letter-spacing:-.02em;margin-bottom:12px}
h1 span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.meta{font-size:.85rem;color:var(--mut-2);margin-bottom:50px;padding-bottom:30px;
  border-bottom:1px solid var(--line)}
.meta strong{color:var(--mut)}

/* índice */
.toc{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:28px 32px;margin-bottom:52px}
.toc h3{font-family:var(--disp);font-size:.85rem;font-weight:800;text-transform:uppercase;
  letter-spacing:2px;color:var(--primary-2);margin-bottom:16px}
.toc ol{padding-left:20px}
.toc li{margin-bottom:8px}
.toc a{color:var(--mut);text-decoration:none;font-size:.88rem;transition:color .2s}
.toc a:hover{color:var(--primary-2)}

/* secciones */
.legal-section{margin-bottom:52px;scroll-margin-top:100px}
.legal-section h2{font-family:var(--disp);font-size:1.35rem;font-weight:800;color:var(--txt);
  margin-bottom:16px;display:flex;align-items:center;gap:10px}
.legal-section h2 .num{background:rgba(168,85,247,.14);border:1px solid rgba(168,85,247,.3);
  color:var(--primary-2);width:32px;height:32px;border-radius:8px;display:flex;align-items:center;
  justify-content:center;font-size:.85rem;flex-shrink:0}
.legal-section h3{font-size:1rem;font-weight:700;color:var(--primary-2);margin:20px 0 10px}
.legal-section p{color:var(--mut);font-size:.95rem;margin-bottom:12px}
.legal-section ul{padding-left:20px;color:var(--mut);font-size:.95rem}
.legal-section li{margin-bottom:8px}
.legal-section strong{color:var(--txt)}

/* cajas */
.info-box,.asis-box{background:var(--card-bg);border:1px solid var(--card-border);
  border-radius:12px;padding:20px 24px;margin:16px 0}
.info-box p,.asis-box p{margin:4px 0;color:var(--mut);font-size:.93rem}
.info-box strong,.asis-box strong{color:var(--txt)}
.asis-box{background:rgba(168,85,247,.14);border-color:rgba(168,85,247,.42)}
.highlight-box{background:rgba(168,85,247,.07);border:1px solid rgba(168,85,247,.25);
  border-left:3px solid var(--primary);border-radius:0 12px 12px 0;padding:16px 20px;margin:16px 0}
.highlight-box p{margin:4px 0;color:var(--mut);font-size:.92rem}
.warning-box{background:rgba(251,113,133,.08);border:1px solid rgba(251,113,133,.3);
  border-left:3px solid var(--rose);border-radius:0 12px 12px 0;padding:16px 20px;margin:16px 0}
.warning-box p{margin:0;color:var(--mut);font-size:.92rem}

/* tablas */
.plan-table,.data-table{width:100%;border-collapse:collapse;margin:20px 0;font-size:.88rem}
.plan-table th,.data-table th{background:rgba(168,85,247,.12);color:var(--primary-2);
  padding:12px 16px;text-align:left;border:1px solid var(--line);font-family:var(--disp);font-weight:700}
.plan-table td,.data-table td{padding:11px 16px;border:1px solid var(--line);color:var(--mut);
  vertical-align:top}
.plan-table tr:nth-child(even) td,.data-table tr:nth-child(even) td{background:rgba(168,85,247,.05)}

.divider{height:1px;background:var(--line);margin:50px 0}

footer{position:relative;z-index:1;text-align:center;padding:40px;border-top:1px solid var(--line);
  color:var(--mut-2);font-size:.82rem}
footer a{color:var(--primary-2);text-decoration:none}
footer a:hover{text-decoration:underline}
footer strong{color:var(--mut)}

@media(max-width:600px){
  .wrapper{padding:110px 24px 80px}
  nav{padding:12px 18px}
  .toc{padding:22px 20px}
}