/* =====================================================================
   documento.css — páginas legales, con aspecto de documento formal
   (usa styles.css para el armazón)
   ===================================================================== */

.doc-page{
  position:relative;
  z-index:2;
  padding:150px 0 110px;
}
.doc-back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:34px;
  font-family:var(--mono);
  font-size:0.8rem;
  color:var(--ink-soft);
}
.doc-back:hover{color:var(--ink);}

/* la "hoja" */
.doc{
  max-width:760px;
  margin:0 auto;
  border:1px solid var(--line);
  border-radius:6px;
  background:rgba(23,16,41,0.35);
  padding:64px;
}

/* encabezado centrado, tipo portada */
.doc-head{
  text-align:center;
  padding-bottom:34px;
  margin-bottom:40px;
  border-bottom:1px solid var(--line);
}
.doc-label{
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
.doc-head h1{
  margin-top:16px;
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.7rem, 3.4vw, 2.35rem);
  letter-spacing:-0.01em;
  line-height:1.2;
}
.doc-date{
  margin-top:14px;
  font-family:var(--mono);
  font-size:0.78rem;
  color:var(--ink-soft);
}

/* cláusulas numeradas */
.doc-clauses{
  list-style:none;
  counter-reset:clause;
}
.doc-clauses > li{
  padding:26px 0;
  border-bottom:1px solid var(--line);
}
.doc-clauses > li:last-child{border-bottom:0; padding-bottom:0;}
.doc-clauses > li h2{
  counter-increment:clause;
  font-family:var(--display);
  font-size:1.1rem;
  font-weight:600;
  color:var(--ink);
}
.doc-clauses > li h2::before{
  content:counter(clause) ".";
  margin-right:10px;
  font-family:var(--mono);
  font-size:0.92rem;
  color:var(--lavender);
}
.doc-clauses > li p{
  margin-top:10px;
  color:var(--ink-soft);
  font-size:0.97rem;
  line-height:1.8;
  text-align:justify;
  hyphens:auto;
}
.doc-clauses a{color:var(--lavender); text-decoration:underline; text-underline-offset:2px;}
.doc-clauses a:hover{color:#fff;}
.doc-clauses strong{color:var(--ink); font-weight:600;}

/* pie del documento, centrado */
.doc-foot{
  margin-top:44px;
  padding-top:26px;
  border-top:1px solid var(--line);
  text-align:center;
  font-family:var(--mono);
  font-size:0.76rem;
  line-height:1.7;
  color:var(--ink-faint);
}

@media (max-width:640px){
  .doc-page{padding:108px 0 72px;}
  .doc{padding:30px 20px;}
  .doc-head h1{font-size:clamp(1.5rem, 6vw, 1.9rem);}
  .doc-clauses > li{padding:22px 0;}
  .doc-clauses > li p{text-align:left; hyphens:manual;}
}