/* ===================================================================
   Zyrex Labs — Páginas de documento (Whitepaper, Legal, Soporte)
   Diseño sencillo e informativo, coherente con el landing.
   =================================================================== */
:root{
  --bg:#07060f; --ink:#ffffff; --muted:#c4c4cf; --muted-2:rgba(255,255,255,.55);
  --teal:#36e0c8; --cyan:#1fb8d4; --violet:#7c5cff;
  --line:rgba(255,255,255,.10); --card:rgba(255,255,255,.03);
  --pad-x:clamp(20px,4vw,60px); --maxw:880px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:#050409; color:var(--ink);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  line-height:1.7;
}
.bg-layer{
  position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(900px 560px at 78% 6%, rgba(70,50,140,.26), transparent 60%),
    radial-gradient(820px 620px at 20% 88%, rgba(40,30,95,.22), transparent 62%),
    linear-gradient(180deg,#08070f 0%,#07060d 55%,#050409 100%);
}
a{color:inherit;}

/* ===== Header ===== */
.doc-header{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px var(--pad-x);
  background:rgba(5,4,9,.72); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.doc-header .brand img{height:28px; width:auto; display:block;}
.back-link{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px; border:1px solid rgba(255,255,255,.18); border-radius:999px;
  font-size:13px; font-weight:600; letter-spacing:.02em; color:var(--ink);
  text-decoration:none; background:rgba(255,255,255,.04);
  transition:border-color .2s, background .2s;
}
.back-link:hover{border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.08);}

/* ===== Hero ===== */
.doc-hero{
  max-width:var(--maxw); margin:0 auto; padding:64px var(--pad-x) 28px;
}
.doc-hero .eyebrow{
  font-size:12px; font-weight:300; letter-spacing:.42em; text-transform:uppercase;
  color:var(--teal); margin:0 0 14px;
}
.doc-hero h1{
  font-size:clamp(30px,5vw,50px); font-weight:600; letter-spacing:-.03em;
  line-height:1.1; margin:0 0 14px;
  background:linear-gradient(96deg,#7c7c87,#d9d9e2 60%,#f3f3f7);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.doc-hero .doc-sub{color:var(--muted-2); font-size:15px; margin:0;}
.doc-hero .rule{height:1px; background:linear-gradient(90deg,var(--teal),var(--cyan),transparent); margin-top:30px; opacity:.7;}

/* ===== Contenido ===== */
.doc-content{
  max-width:var(--maxw); margin:0 auto; padding:8px var(--pad-x) 90px;
}
.doc-content h2{
  font-size:clamp(20px,2.6vw,26px); font-weight:600; letter-spacing:-.01em;
  margin:46px 0 14px; padding-top:14px; color:#f3f3f7;
}
.doc-content h3{
  font-size:clamp(17px,2vw,20px); font-weight:600; margin:30px 0 10px; color:#eaeaf2;
}
.doc-content p{color:var(--muted); font-size:15.5px; margin:0 0 16px;}
.doc-content strong{color:var(--ink);}

/* ===== Tablas ===== */
.doc-table-wrap{overflow-x:auto; margin:22px 0 26px; border:1px solid var(--line); border-radius:14px;}
.doc-table{width:100%; border-collapse:collapse; font-size:14.5px; min-width:480px;}
.doc-table th{
  background:#111827; color:#fff; text-align:left; font-weight:600;
  padding:13px 16px; border-bottom:1px solid rgba(255,255,255,.12);
}
.doc-table td{
  padding:12px 16px; color:var(--muted); vertical-align:top;
  border-bottom:1px solid var(--line);
}
.doc-table tr:last-child td{border-bottom:none;}
.doc-table tr:nth-child(even) td{background:rgba(255,255,255,.018);}

/* ===== Pipeline / flujo ===== */
.doc-flow{list-style:none; margin:22px 0; padding:18px 20px; border:1px solid var(--line); border-radius:14px; background:var(--card);}
.doc-flow li{position:relative; padding:8px 0 8px 26px; color:var(--muted); font-size:14.5px;}
.doc-flow li::before{content:"↓"; position:absolute; left:4px; top:8px; color:var(--teal); font-weight:700;}
.doc-flow li:first-child::before{content:"●"; font-size:10px; top:11px;}

/* ===== Caja de contacto / email ===== */
.doc-contact{
  margin:26px 0; padding:22px 24px; border-radius:16px;
  border:1px solid rgba(54,224,200,.28); background:linear-gradient(180deg,rgba(54,224,200,.06),rgba(31,184,212,.03));
}
.doc-contact a{color:var(--teal); font-weight:600; text-decoration:none; font-size:18px;}
.doc-contact a:hover{text-decoration:underline;}

/* ===== Footer ===== */
.doc-footer{
  border-top:1px solid var(--line); padding:34px var(--pad-x);
}
.doc-footer-inner{
  max-width:var(--maxw); margin:0 auto;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px;
}
.doc-footer nav{display:flex; flex-wrap:wrap; gap:22px;}
.doc-footer a{color:var(--muted-2); font-size:13.5px; text-decoration:none; transition:color .2s;}
.doc-footer a:hover{color:var(--ink);}
.doc-footer .copy{color:var(--muted-2); font-size:12.5px;}

@media (max-width:560px){
  .doc-hero{padding-top:44px;}
  .doc-footer-inner{flex-direction:column; align-items:flex-start;}
}