/* Lamina grabada: riel de terminos a la izquierda, cuerpo a la derecha, todo separado por filetes */
:root{
  color-scheme: dark;
  --papel:#0C0C0F;
  --papel-alto:#131317;
  --tinta:#EDEDE9;
  --tinta-media:#A6A6AE;
  --tinta-baja:#6B6B76;
  --filete:#26262E;
  --filete-fuerte:#EDEDE9;
  --abisal:#5FB8CC;
  --criptida:#A294E4;
  --filigrana:#D2924F;
  --vault:#6FC08C;
  --display:"Bodoni Moda",Didot,"Times New Roman",serif;
  --cuerpo:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --dato:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --riel:11rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--papel);color:var(--tinta);
  font-family:var(--cuerpo);font-size:16.5px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
img{max-width:100%}
.hoja{
  max-width:68rem;margin:0 auto;
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
}
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;text-wrap:balance}
p{margin:0}
a{color:inherit}

/* ---------- riel: termino a la izquierda, cuerpo a la derecha ---------- */
.tramo{display:grid;grid-template-columns:var(--riel) minmax(0,1fr);gap:0 3rem;
  padding-block:3.4rem;border-top:1px solid var(--filete)}
.tramo > .termino{
  font-family:var(--dato);font-size:.72rem;line-height:1.5;letter-spacing:.07em;
  text-transform:uppercase;color:var(--tinta-baja);padding-top:.55rem;
}
.cuerpo{min-width:0;display:grid;gap:1.15rem}
.cuerpo > p{max-width:64ch;color:var(--tinta-media)}
.cuerpo > p strong{color:var(--tinta);font-weight:600}
h2{font-size:clamp(1.55rem,3.6vw,2.05rem);line-height:1.12;letter-spacing:-.01em;max-width:22ch}
@media (max-width:760px){
  .tramo{grid-template-columns:1fr;gap:.7rem;padding-block:2.6rem}
  .tramo > .termino{padding-top:0}
}

/* ---------- cabecera ---------- */
.cabecera{padding-block:3.2rem 0}
.sello{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;align-items:baseline;
  font-family:var(--dato);font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;color:var(--tinta-baja)}
.sello a{color:var(--tinta);text-decoration:none;border-bottom:1px solid var(--filete-fuerte);padding-bottom:.1rem;margin-left:auto}
.sello a:hover{background:var(--filete-fuerte);color:var(--papel)}
.sello a:focus-visible{outline:2px solid var(--tinta);outline-offset:2px}
h1{font-size:clamp(3.2rem,12vw,7rem);line-height:.92;letter-spacing:-.025em;margin:1.6rem 0 0}
.lema{font-family:var(--display);font-style:italic;font-size:clamp(1.2rem,3.6vw,1.85rem);
  line-height:1.3;margin-top:.7rem;max-width:26ch;color:var(--tinta-media)}
.regla{border:0;border-top:1.5px solid var(--filete-fuerte);margin:3rem 0 0}

/* ---------- indice de los cuatro ---------- */
.indice{display:grid}
.item{display:grid;grid-template-columns:var(--riel) minmax(0,1fr);gap:0 3rem;
  padding-block:1.35rem;border-top:1px solid var(--filete);align-items:baseline}
.item:first-child{border-top:0}
.marca{display:flex;align-items:baseline;gap:.6rem;font-family:var(--dato);
  font-size:.82rem;letter-spacing:.09em;text-transform:uppercase;color:var(--tono)}
.marca::before{content:"";width:.56rem;height:.56rem;background:var(--tono);flex:0 0 auto;translate:0 -.05rem}
.item p{color:var(--tinta-media);font-size:.98rem;max-width:62ch;min-width:0}
.t-ab{--tono:var(--abisal)} .t-cr{--tono:var(--criptida)} .t-fi{--tono:var(--filigrana)} .t-cv{--tono:var(--vault)}
@media (max-width:760px){.item{grid-template-columns:1fr;gap:.35rem}}

/* ---------- listas de definicion ---------- */
.glosa{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1.6rem 3rem;margin-top:.4rem}
.glosa > div{min-width:0}
.glosa dt{font-family:var(--dato);font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--tinta);padding-bottom:.45rem;border-bottom:1px solid var(--filete);margin-bottom:.6rem}
.glosa dd{margin:0;font-size:.95rem;color:var(--tinta-media)}

/* ---------- la bifurcacion ---------- */
.ramas{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:2.4rem;margin-top:.4rem}
.rama{min-width:0;display:grid;gap:.9rem}
.rama h3{font-family:var(--dato);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tinta);padding-bottom:.5rem;border-bottom:1.5px solid var(--filete-fuerte)}
.rama p{font-size:.95rem;color:var(--tinta-media)}

/* ---------- fichas ---------- */
.ficha{border-top:1px solid var(--filete);padding-block:2.6rem}
.ficha:first-of-type{border-top:0;padding-top:1rem}
.ficha > .enc{display:grid;grid-template-columns:var(--riel) minmax(0,1fr);gap:0 3rem;align-items:baseline;margin-bottom:1.4rem}
.ficha h3{font-size:clamp(1.9rem,5vw,2.6rem);line-height:1;letter-spacing:-.02em;color:var(--tono);
  display:flex;align-items:baseline;gap:.75rem}
.ficha h3::before{content:"";width:.6rem;height:.6rem;background:var(--tono);flex:0 0 auto}
.ficha .apodo{font-family:var(--display);font-style:italic;color:var(--tinta-baja);font-size:1.05rem}
.ficha dl{display:grid;gap:1.3rem;margin:0}
.ficha dl > div{display:grid;grid-template-columns:var(--riel) minmax(0,1fr);gap:0 3rem}
.ficha dt{font-family:var(--dato);font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--tinta-baja);padding-top:.35rem}
.ficha dd{margin:0;min-width:0;max-width:64ch;color:var(--tinta-media);font-size:.97rem}
@media (max-width:760px){
  .ficha > .enc,.ficha dl > div{grid-template-columns:1fr;gap:.35rem}
  .ficha dt{padding-top:0}
}

/* ---------- tabla ---------- */
.marco{overflow-x:auto;margin-top:.5rem;border-top:1.5px solid var(--filete-fuerte)}
table{border-collapse:collapse;width:100%;min-width:48rem;font-size:.88rem;font-variant-numeric:tabular-nums}
caption{text-align:left;font-family:var(--dato);font-size:.72rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--tinta-baja);padding-bottom:.7rem}
th,td{padding:.72rem 1rem .72rem 0;text-align:left;border-bottom:1px solid var(--filete);vertical-align:top}
thead th{font-family:var(--dato);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  font-weight:500;white-space:nowrap;padding-top:.8rem}
thead th:nth-child(2){color:var(--abisal)} thead th:nth-child(3){color:var(--criptida)}
thead th:nth-child(4){color:var(--filigrana)} thead th:nth-child(5){color:var(--vault)}
tbody th{font-weight:400;color:var(--tinta-baja);white-space:nowrap;padding-right:2rem}
tbody td{color:var(--tinta-media)}
tbody td.marcado{color:var(--tinta);font-weight:500}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}

/* ---------- arbol ---------- */
.arbol{display:grid;border-top:1.5px solid var(--filete-fuerte)}
.arbol > div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.3rem 2rem;
  align-items:baseline;padding-block:.9rem;border-bottom:1px solid var(--filete)}
.arbol span:first-child{color:var(--tinta-media);font-size:.97rem;min-width:0}
.arbol span:last-child{font-family:var(--dato);font-size:.78rem;letter-spacing:.08em;
  text-transform:uppercase;white-space:nowrap}
.v-ab{color:var(--abisal)} .v-cr{color:var(--criptida)} .v-fi{color:var(--filigrana)} .v-cv{color:var(--vault)}

/* ---------- cita ---------- */
blockquote{margin:1.4rem 0 0;padding:0;max-width:52ch}
blockquote p{font-family:var(--display);font-size:clamp(1.15rem,2.9vw,1.5rem);line-height:1.38;color:var(--tinta)}
blockquote footer{font-family:var(--dato);font-size:.72rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--tinta-baja);margin-top:.9rem}

/* ---------- contacto ---------- */
.contacto{background:var(--papel-alto);border-top:1.5px solid var(--filete-fuerte);margin-top:0}
.correo{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;margin-top:.6rem}
.correo code{font-family:var(--dato);font-size:1.02rem;color:var(--tinta);user-select:all;word-break:break-all;
  border-bottom:1.5px solid var(--filete-fuerte);padding-bottom:.15rem}
button{font-family:var(--dato);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tinta);background:transparent;border:1px solid var(--filete-fuerte);padding:.6rem .95rem;cursor:pointer}
button:hover{background:var(--filete-fuerte);color:var(--papel)}
button:focus-visible{outline:2px solid var(--tinta);outline-offset:2px}
#aviso{font-family:var(--dato);font-size:.74rem;color:var(--tinta-baja);min-height:1.3em;margin-top:.7rem}
.pie{border-top:1px solid var(--filete);padding-block:2rem 3rem;
  font-family:var(--dato);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-baja)}
@media (prefers-reduced-motion:no-preference){button{transition:background .14s,color .14s}}