/* ==========================================================================
   Trapicheros — hoja para paginas de texto legal y error.
   Se apoya en styles.css (paleta, tipografias, .wrap, .btn, .top, .pie).
   Aqui solo va lo propio del documento largo: columna de lectura, articulos
   numerados y avisos. Version de la landing: styles.css?v=23
   ========================================================================== */

.doc{max-width:820px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

/* Portadilla ---------------------------------------------------------------- */
.doc-hero{padding:clamp(38px,7vw,72px) 0 clamp(22px,3vw,34px)}
.doc-hero h1.d{font-size:clamp(2.3rem,5.4vw,3.7rem);margin:0 0 .3em}
.doc-hero .lede{max-width:52ch}
.doc-hero .fecha{
  font-family:var(--mono);font-size:.68rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.16em;color:var(--humo-d);margin:1.1em 0 0;
}

/* Indice -------------------------------------------------------------------- */
.indice{
  border:2px solid var(--tinta);background:var(--muro-2);
  padding:18px 20px;margin:0 0 clamp(28px,4vw,44px);
  box-shadow:5px 5px 0 var(--tinta);
}
.indice p{
  font-family:var(--mono);font-size:.66rem;font-weight:500;text-transform:uppercase;
  letter-spacing:.18em;color:var(--humo-d);margin:0 0 .9em;
}
.indice ol{margin:0;padding:0;list-style:none;columns:2;column-gap:26px}
.indice li{margin:0 0 .42em;break-inside:avoid;font-size:.92rem;line-height:1.35}
.indice a{color:var(--tinta);text-decoration:none;border-bottom:1px solid var(--muro)}
.indice a:hover{border-bottom-color:var(--turquesa-osc);color:var(--turquesa-osc)}
@media (max-width:640px){.indice ol{columns:1}}

/* Articulos ----------------------------------------------------------------- */
.art{padding:0 0 clamp(26px,3.4vw,38px);scroll-margin-top:76px}
.art + .art{border-top:1px solid var(--muro-2);padding-top:clamp(26px,3.4vw,38px)}
.art h2{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.24rem,2.5vw,1.6rem);line-height:1.05;letter-spacing:.005em;
  margin:0 0 .7em;display:flex;gap:.6em;align-items:baseline;
}
.art h2 .n{font-family:var(--mono);font-size:.72em;color:var(--turquesa-osc);flex:none}
.art h3{font-size:1rem;margin:1.5em 0 .4em}
.art p{margin:0 0 .85em}
.art ul{margin:0 0 .95em;padding-left:0;list-style:none}
.art li{position:relative;padding-left:1.35em;margin:0 0 .5em}
.art li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:.42em;height:.42em;background:var(--turquesa);
}
.art strong{font-weight:600}
.art a{color:var(--turquesa-osc);text-decoration:none;border-bottom:1px solid currentColor}

/* Aviso resaltado (el "cartel pintado") ------------------------------------- */
.aviso{
  border-left:5px solid var(--laton);background:var(--muro-2);
  padding:14px 18px;margin:0 0 1em;font-size:.96rem;
}
.aviso.rojo{border-left-color:var(--coral)}

/* Pie de documento ---------------------------------------------------------- */
.doc-fin{
  margin:clamp(30px,4vw,48px) 0 clamp(56px,8vw,90px);
  border-top:2px solid var(--tinta);padding-top:20px;
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;
}
.doc-fin .nota{font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--humo-d)}
.doc-fin .btn{margin-left:auto}
@media (max-width:520px){.doc-fin .btn{margin-left:0;width:100%}}

/* ── 404 ─────────────────────────────────────────────────────────────────── */
/* Sin cabecera ni pie: la pagina es una sola pantalla centrada con un solo
   camino de salida, el boton de inicio. */
.e404{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:var(--tinta);color:var(--muro);text-align:center;
}
.e404 .wrap{padding-top:56px;padding-bottom:56px;width:100%}
/* OJO: no usar la clase .cifra, que ya existe en styles.css (las cifras del
   hero) con padding y border-right propios. Con line-height .78 el line-box
   recorta el aire de Anton, asi que el hueco se controla con el margen. */
.e404 .e404-num{
  font-family:var(--display);font-size:clamp(4.2rem,13vw,8.4rem);line-height:.78;
  color:var(--laton);margin:0 0 .3em;letter-spacing:-.01em;
}
.e404 h1.d{font-size:clamp(1.9rem,5vw,3.1rem);margin:0 0 .45em;color:var(--muro)}
.e404 .lede{color:var(--humo);max-width:44ch;margin:0 auto 1.9em}
.e404 .acciones{display:flex;justify-content:center}
@media (max-width:640px){
  .e404 .acciones .btn{width:100%}
}