/* ===================================================================
   Zyrex Labs — White Paper (tema claro / documento "paper")
   Fondo blanco, texto oscuro, membrete navy. Reutiliza las mismas
   clases que doc.css pero con paleta clara.
   =================================================================== */
:root{
  --paper:#ffffff;
  --ink:#222a39;
  --ink-strong:#0e1320;
  --muted:#5b6675;
  --line:#e5e9ef;
  --line-soft:#eef1f5;
  --navy:#111827;
  --accent:#0e8fa0;
  --accent-2:#16b3c4;
  --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:var(--paper); color:var(--ink);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  line-height:1.72;
}
a{color:inherit;}

/* ===== Membrete (header navy, logo blanco) ===== */
.doc-header{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px clamp(20px,4vw,60px);
  background:var(--navy);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.doc-header .brand img{height:26px; width:auto; display:block;}
.back-link{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 15px; border:1px solid rgba(255,255,255,.22); border-radius:999px;
  font-size:13px; font-weight:600; letter-spacing:.02em; color:#fff;
  text-decoration:none; background:rgba(255,255,255,.06);
  transition:border-color .2s, background .2s;
}
.back-link:hover{border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.12);}

/* ===== Portada / título ===== */
.doc-hero{
  max-width:var(--maxw); margin:0 auto; padding:60px clamp(20px,4vw,60px) 26px;
}
.doc-hero .eyebrow{
  font-size:12px; font-weight:600; letter-spacing:.34em; text-transform:uppercase;
  color:var(--accent); margin:0 0 14px;
}
.doc-hero h1{
  font-size:clamp(30px,5vw,50px); font-weight:700; letter-spacing:-.02em;
  line-height:1.1; margin:0 0 14px; color:var(--ink-strong);
}
.doc-hero .doc-sub{color:var(--muted); font-size:15.5px; margin:0;}
.doc-hero .rule{
  height:3px; width:88px; border-radius:3px; margin-top:28px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
}

/* ===== Cuerpo del documento ===== */
.doc-content{
  max-width:var(--maxw); margin:0 auto; padding:8px clamp(20px,4vw,60px) 80px;
}
.doc-content h2{
  font-size:clamp(20px,2.6vw,26px); font-weight:700; letter-spacing:-.01em;
  margin:48px 0 16px; padding-bottom:10px; color:var(--ink-strong);
  border-bottom:1px solid var(--line);
}
.doc-content h3{
  font-size:clamp(17px,2vw,20px); font-weight:600; margin:30px 0 10px; color:#1a2230;
}
.doc-content p{color:var(--ink); font-size:15.5px; margin:0 0 16px;}
.doc-content strong{color:var(--ink-strong); font-weight:700;}

/* ===== Tablas (cabecera navy, cuerpo claro) ===== */
.doc-table-wrap{
  overflow-x:auto; margin:22px 0 26px;
  border:1px solid var(--line); border-radius:12px;
  box-shadow:0 1px 2px rgba(16,24,40,.04);
}
.doc-table{width:100%; border-collapse:collapse; font-size:14.5px; min-width:480px; background:#fff;}
.doc-table th{
  background:var(--navy); color:#fff; text-align:left; font-weight:600;
  padding:13px 16px;
}
.doc-table td{
  padding:12px 16px; color:var(--ink); vertical-align:top;
  border-bottom:1px solid var(--line-soft);
}
.doc-table tr:last-child td{border-bottom:none;}
.doc-table tbody tr:nth-child(even) td,
.doc-table tr:nth-child(odd):not(:first-child) td{background:#fafbfc;}
.doc-table tr:nth-child(even) td{background:#f6f8fa;}

/* ===== Flujo / pipeline ===== */
.doc-flow{list-style:none; margin:22px 0; padding:18px 20px; border:1px solid var(--line); border-radius:12px; background:#fafbfc;}
.doc-flow li{position:relative; padding:8px 0 8px 26px; color:var(--ink); font-size:14.5px;}
.doc-flow li::before{content:"↓"; position:absolute; left:4px; top:8px; color:var(--accent); 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:20px 24px; border-radius:14px;
  border:1px solid rgba(14,143,160,.30); background:linear-gradient(180deg,rgba(22,179,196,.08),rgba(14,143,160,.04));
}
.doc-contact a{color:var(--accent); font-weight:700; text-decoration:none; font-size:18px;}
.doc-contact a:hover{text-decoration:underline;}

/* ===== Footer ===== */
.doc-footer{
  border-top:1px solid var(--line); padding:30px clamp(20px,4vw,60px); background:#fafbfc;
}
.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); font-size:13.5px; text-decoration:none; transition:color .2s;}
.doc-footer a:hover{color:var(--accent);}
.doc-footer .copy{color:#8a93a1; font-size:12.5px;}

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

@media print{
  .doc-header,.doc-footer{position:static;}
  .back-link{display:none;}
  body{line-height:1.55;}
  .doc-table th{-webkit-print-color-adjust:exact; print-color-adjust:exact;}
}