/* =========================================================
   Advansys SRL — internal document pages (privacidad, certificado)
   Builds on styles.css tokens.
   ========================================================= */

body.doc{ background:var(--paper); }

/* ---- title band (navy, brand-coherent) ---- */
.doc-hero{
  position:relative; background:var(--navy); color:#fff; overflow:hidden;
  padding-top:140px; padding-bottom:clamp(48px,6vw,76px);
}
.doc-hero__bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(120% 120% at 92% 0%, #000 0%, transparent 60%);
          mask-image:radial-gradient(120% 120% at 92% 0%, #000 0%, transparent 60%);
}
.doc-hero .wrap{ position:relative; z-index:1; }
.doc-hero .kicker{ color:var(--brand-light); }
.doc-hero .kicker::before{ border-color:var(--brand-light); }
.doc-hero h1{
  color:#fff; font-size:clamp(32px,4.6vw,56px); margin-top:22px; max-width:18ch;
  letter-spacing:-.022em; line-height:1.02;
}
.doc-hero__meta{
  display:flex; gap:10px; flex-wrap:wrap; margin-top:26px;
  font-family:var(--ff-mono); font-size:12.5px; letter-spacing:.04em;
}
.doc-hero__meta .pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px; border:1px solid rgba(255,255,255,.2); border-radius:100px;
  color:#C7D5E8;
}
.doc-hero__meta .pill b{ color:#fff; font-weight:700; }
.doc-hero__meta .pill .dot{ width:6px; height:6px; border-radius:100px; background:#4ECB8E; }

.breadcrumb{ display:flex; align-items:center; gap:10px; font-size:14px; color:#9FB1CA; margin-bottom:6px; }
.breadcrumb a{ color:#9FB1CA; transition:.18s ease; }
.breadcrumb a:hover{ color:#fff; }
.breadcrumb svg{ width:14px; height:14px; opacity:.6; }

/* ---- layout: sticky TOC + prose ---- */
.doc-body{ padding-block:clamp(56px,7vw,96px); }
.doc-layout{ display:grid; grid-template-columns:248px 1fr; gap:clamp(40px,6vw,88px); align-items:start; }

.toc{ position:sticky; top:104px; }
.toc__label{
  font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3); padding-bottom:14px; margin-bottom:6px; border-bottom:1px solid var(--line);
}
.toc__list{ display:flex; flex-direction:column; }
.toc__list a{
  font-size:14.5px; color:var(--ink-2); padding:8px 0 8px 16px; border-left:2px solid var(--line);
  transition:.18s ease; line-height:1.35;
}
.toc__list a:hover{ color:var(--navy); border-left-color:var(--line-2); }
.toc__list a.is-active{ color:var(--brand); border-left-color:var(--brand); font-weight:600; }

/* ---- prose ---- */
.prose{ max-width:72ch; }
.prose .intro{
  font-family:var(--ff-display); font-weight:500; font-size:clamp(20px,2.3vw,27px);
  line-height:1.4; color:var(--navy); letter-spacing:-.012em; text-wrap:pretty;
  padding-bottom:36px; margin-bottom:8px; border-bottom:1px solid var(--line);
}
.prose .intro b{ color:var(--brand); font-weight:700; }
.prose section{ scroll-margin-top:100px; padding-top:42px; }
.prose h2{
  font-size:clamp(22px,2.4vw,30px); letter-spacing:-.012em; display:flex; gap:16px; align-items:baseline;
}
.prose h2 .h-n{ font-family:var(--ff-mono); font-size:14px; color:var(--brand); font-weight:700; flex:none; }
.prose p{ margin-top:16px; color:var(--ink-2); font-size:17px; line-height:1.68; }
.prose p b, .prose li b{ color:var(--navy); font-weight:700; }
.prose a{ color:var(--brand); font-weight:600; border-bottom:1px solid var(--line-2); }
.prose a:hover{ border-bottom-color:var(--brand); }

.prose ul.checks{ margin-top:20px; display:flex; flex-direction:column; gap:14px; }
.prose ul.checks li{
  position:relative; padding-left:38px; color:var(--ink-2); font-size:17px; line-height:1.6;
}
.prose ul.checks li::before{
  content:""; position:absolute; left:0; top:1px; width:24px; height:24px; border-radius:7px;
  background:var(--tint);
}
.prose ul.checks li::after{
  content:""; position:absolute; left:7px; top:7px; width:10px; height:6px;
  border-left:2px solid var(--brand); border-bottom:2px solid var(--brand);
  transform:rotate(-45deg);
}

/* ---- callout ---- */
.callout{
  margin-top:32px; display:flex; gap:18px; align-items:flex-start;
  padding:24px 26px; border-radius:var(--r); background:#FFF7ED;
  border:1px solid #F4D9A8; border-left:3px solid #E0922F;
}
.callout__ico{ flex:none; width:26px; height:26px; color:#C9791F; margin-top:1px; }
.callout__ico svg{ width:26px; height:26px; }
.callout p{ margin:0; color:#7A5212; font-size:16px; line-height:1.62; }
.callout p b{ color:#5C3D0C; }

/* ============================================================
   STEPS timeline (certificado)
   ============================================================ */
.steps{ counter-reset:step; margin-top:8px; max-width:78ch; }
.step{
  position:relative; padding:0 0 44px 78px; counter-increment:step;
}
.step:last-child{ padding-bottom:0; }
.step::before{ /* number node */
  content:counter(step,decimal-leading-zero);
  position:absolute; left:0; top:0; width:52px; height:52px; border-radius:13px;
  display:grid; place-items:center;
  font-family:var(--ff-display); font-weight:700; font-size:19px; color:#fff;
  background:var(--brand); box-shadow:0 10px 22px -12px rgba(42,111,219,.8);
}
.step::after{ /* connector */
  content:""; position:absolute; left:25px; top:60px; bottom:6px; width:2px;
  background:linear-gradient(var(--line-2), var(--line));
}
.step:last-child::after{ display:none; }
.step h3{ font-size:21px; letter-spacing:-.012em; padding-top:6px; }
.step p{ margin-top:12px; color:var(--ink-2); font-size:17px; line-height:1.66; }
.step p b{ color:var(--navy); font-weight:700; }

/* ---- end CTA ---- */
.doc-cta{
  margin-top:clamp(48px,6vw,80px); padding:clamp(32px,4vw,52px);
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r);
  display:flex; gap:30px; align-items:center; justify-content:space-between; flex-wrap:wrap;
}
.doc-cta__t .kicker{ margin-bottom:14px; }
.doc-cta__t h3{ font-size:clamp(22px,2.4vw,28px); letter-spacing:-.012em; }
.doc-cta__t p{ margin-top:10px; color:var(--ink-2); font-size:16.5px; }

/* ---- fix: btn inside .prose inherits .prose a color (overrides btn white text) ---- */
.prose a.btn{
  border-bottom: none;
  text-decoration: none;
}
.prose a.btn.btn--primary{
  color: #fff;
}
.prose a.btn.btn--primary:hover{
  color: #fff;
  box-shadow: 0 14px 36px -10px rgba(42,111,219,.65), 0 0 0 4px var(--tint);
  transform: translateY(-2px);
}
.prose a.btn.btn--ghost{
  color: var(--navy);
}

@media (max-width:880px){
  .doc-layout{ grid-template-columns:1fr; gap:36px; }
  .toc{ position:static; top:auto; }
  .toc__list{ display:grid; grid-template-columns:1fr 1fr; gap:2px 24px; }
}
@media (max-width:560px){
  .toc__list{ grid-template-columns:1fr; }
  .step{ padding-left:64px; }
  .step::before{ width:46px; height:46px; font-size:17px; }
  .step::after{ left:22px; }
}