/* ── electus.do ─────────────────────────────────────────────
   Papel de libro contable: verde-gris pálido, bandeado,
   filete de margen. Tinta indigo de sello, ocre de archivo.
   Prosa en serif · toda cifra en monoespaciada tabular.
   ─────────────────────────────────────────────────────────── */

:root{
  --paper:#eaede4;
  --paper-2:#e2e6db;
  --card:#f4f6f0;
  --ink:#14171a;
  --ink-2:#4e555c;
  --ink-3:#838b91;
  --rule:#c4cbba;
  --rule-2:#d5dbcc;
  --indigo:#333b78;
  --ochre:#a8761b;

  --serif:'Iowan Old Style','Charter','Bitstream Charter',Palatino,'Palatino Linotype',Georgia,'Times New Roman',serif;
  --mono:ui-monospace,'SF Mono',SFMono-Regular,'Cascadia Mono',Menlo,Consolas,'Liberation Mono',monospace;

  --w:min(100% - 2.5rem, 68rem);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 1rem/1.62 var(--serif);
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
}

.wrap{width:var(--w);margin-inline:auto}

.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--ink);color:var(--paper);padding:.7rem 1rem;
  font:500 .85rem var(--mono);text-decoration:none;
}
.skip:focus{left:0}

:where(a):focus-visible,:where(button):focus-visible,
:where(input,select,textarea):focus-visible{
  outline:2px solid var(--indigo);outline-offset:2px;
}

/* numerals — everything countable is machine type */
.num,.cal-d,.stamp,.eyebrow,.tag,.capa-p,.src,.legend,.axis,.cluster,
.registro-cap,.foot-end,.opt{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}

/* ── masthead ─────────────────────────────────────────────── */
.masthead{border-bottom:1px solid var(--rule);background:var(--paper)}
.masthead-in{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;padding:.95rem 0;flex-wrap:wrap;
}
.wordmark{font-size:1.12rem;letter-spacing:-.015em;font-weight:600}
.wordmark .dot{color:var(--ochre)}
.stamp{
  font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--indigo);border:1px solid currentColor;
  padding:.26rem .5rem;border-radius:1px;
}

/* ── hero ─────────────────────────────────────────────────── */
.hero{padding:3.2rem 0 0}

.eyebrow{
  margin:0 0 1.1rem;font-size:.68rem;text-transform:uppercase;
  letter-spacing:.14em;color:var(--ink-3);
}

.hero h1{
  margin:0;font-weight:400;
  font-size:clamp(1.72rem,7.4vw,3.1rem);
  line-height:1.14;letter-spacing:-.021em;text-wrap:balance;
}
.hero h1 em{font-style:italic;color:var(--indigo)}

.lede{
  margin:1.5rem 0 0;max-width:44ch;
  font-size:1.045rem;line-height:1.66;color:var(--ink-2);
}

/* ── SIGNATURE · el registro ──────────────────────────────── */
.registro{margin:3.1rem auto 0;padding-bottom:3.4rem}

.registro-cap{
  font-size:.66rem;text-transform:uppercase;letter-spacing:.11em;
  color:var(--ink-3);margin-bottom:.85rem;
}

.track{
  position:relative;height:54px;
  border:1px solid var(--rule);
  background:
    repeating-linear-gradient(90deg,
      transparent 0 calc(100%/66 - 1px),
      var(--rule-2) calc(100%/66 - 1px) calc(100%/66));
}

.seg{position:absolute;top:0;bottom:0}

/* Posiciones del registro. Escala 1962—2028 = 66 años.
   Van en la hoja y no en atributos style= porque la CSP
   de electus.do no permite estilos en línea. */
.seg-pdf{left:0;width:78.8%}          /* 1962 — 2014 */
.seg-futuro{left:93.9%;width:6.1%}    /* 2024 — 2028 */
.tick-16{left:81.8%}                  /* 2016 */
.tick-20{left:87.9%}                  /* 2020 */
.tick-23{left:92.4%}                  /* 2023 */
.tick-24{left:93.9%}                  /* 2024 */

.seg-pdf{
  background:
    repeating-linear-gradient(-45deg,
      rgba(168,118,27,.19) 0 5px,
      transparent 5px 10px);
  border-right:1px solid var(--rule);
}
.seg-label{
  position:absolute;left:.6rem;top:50%;transform:translateY(-50%);
  font:500 .6rem/1.2 var(--mono);letter-spacing:.06em;
  text-transform:uppercase;color:var(--ochre);
  white-space:nowrap;
}

.seg-futuro{
  background:repeating-linear-gradient(90deg,
    var(--rule) 0 3px,transparent 3px 7px);
  opacity:.6;
}

.tick{position:absolute;top:0;bottom:0;width:3px;background:var(--indigo)}
.tick i{display:none}

.cluster{
  margin:.7rem 0 0;text-align:right;
  font-size:.68rem;color:var(--ink-2);line-height:1.45;
}
.cluster span{color:var(--indigo);font-weight:600}

.axis{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:.75rem;margin-top:.5rem;
  font-size:.66rem;color:var(--ink-3);
}
.axis-mid{display:none}

.legend{
  list-style:none;margin:1.4rem 0 0;padding:0;
  display:grid;gap:.45rem;font-size:.68rem;color:var(--ink-2);
}
.legend li{display:flex;align-items:center;gap:.5rem}
.sw{width:15px;height:9px;flex:none;border:1px solid var(--rule)}
.sw-pdf{background:repeating-linear-gradient(-45deg,rgba(168,118,27,.45) 0 3px,transparent 3px 6px)}
.sw-ok{background:var(--indigo);border-color:var(--indigo)}
.sw-fut{background:repeating-linear-gradient(90deg,var(--rule) 0 2px,transparent 2px 5px)}

/* ── bandas ───────────────────────────────────────────────── */
.band{padding:3.1rem 0;border-top:1px solid var(--rule)}
.band.alt{background:var(--paper-2)}

.rule-h{
  margin:0 0 1.4rem;font-weight:400;
  font-size:clamp(1.32rem,4.6vw,1.72rem);letter-spacing:-.014em;
  display:flex;align-items:center;gap:.9rem;
}
.rule-h::after{content:"";flex:1;height:1px;background:var(--rule)}

.intro{
  margin:0 0 1.9rem;max-width:52ch;
  color:var(--ink-2);font-size:1rem;line-height:1.64;
}

/* ── ledger (cifras) ──────────────────────────────────────── */
.ledger{margin:0;border-top:1px solid var(--rule)}

.ledger .row{
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-areas:"dt num" "src num";
  gap:0 1rem;align-items:baseline;
  padding:.95rem .7rem;
  border-bottom:1px solid var(--rule-2);
}
.ledger .row:nth-child(odd){background:rgba(255,255,255,.42)}

.ledger dt{grid-area:dt;font-size:.97rem;line-height:1.4}
.ledger .sub{
  display:block;margin-top:.18rem;
  font-size:.79rem;color:var(--ink-3);font-style:italic;
}
.ledger .num{
  grid-area:num;margin:0;justify-self:end;
  font-size:clamp(1.18rem,5.4vw,1.62rem);
  font-weight:500;letter-spacing:-.028em;color:var(--indigo);
}
.ledger .num abbr{font-size:.62em;text-decoration:none;margin-left:.1em}
.ledger .src{
  grid-area:src;margin:.35rem 0 0;
  font-size:.66rem;color:var(--ink-3);letter-spacing:.02em;
}

/* ── inventario ───────────────────────────────────────────── */
.inv{list-style:none;margin:0;padding:0;display:grid;gap:0}
.inv li{
  padding:1.15rem .7rem;border-top:1px solid var(--rule-2);
  display:grid;gap:.4rem;
}
.inv li:first-child{border-top:1px solid var(--rule)}
.inv h3{margin:0;font-size:1rem;font-weight:600;line-height:1.35;letter-spacing:-.01em}
.inv p{margin:0;font-size:.9rem;color:var(--ink-2);line-height:1.55;max-width:56ch}

.tag{
  justify-self:start;font-size:.6rem;text-transform:uppercase;
  letter-spacing:.09em;padding:.22rem .45rem;border:1px solid currentColor;
  border-radius:1px;
}
.t-baja{color:var(--indigo)}
.t-media{color:var(--ink-3)}
.t-alta{color:var(--ochre)}

/* ── capas ────────────────────────────────────────────────── */
.capas{display:grid;gap:1rem}
.capa{
  background:var(--card);border:1px solid var(--rule);
  padding:1.35rem 1.2rem;display:grid;gap:.55rem;align-content:start;
}
.capa-open{border-color:var(--indigo);border-width:1px 1px 1px 3px}
.capa-k{
  margin:0;font:500 .62rem/1 var(--mono);text-transform:uppercase;
  letter-spacing:.12em;color:var(--ink-3);
}
.capa h3{margin:0;font-size:1.2rem;font-weight:600;letter-spacing:-.015em}
.capa-open h3{color:var(--indigo)}
.capa-d{margin:0;font-size:.9rem;line-height:1.58;color:var(--ink-2)}
.capa-p{
  margin:.3rem 0 0;padding-top:.7rem;border-top:1px solid var(--rule-2);
  font-size:.68rem;color:var(--ink-3);
}
.capa-open .capa-p{color:var(--indigo)}

/* ── calendario ───────────────────────────────────────────── */
.cal{list-style:none;margin:0;padding:0;counter-reset:none}
.cal li{
  display:grid;gap:.3rem;padding:1.05rem 0 1.05rem 1.1rem;
  border-top:1px solid var(--rule-2);position:relative;
}
.cal li:first-child{border-top:1px solid var(--rule)}
.cal li::before{
  content:"";position:absolute;left:0;top:1.35rem;
  width:5px;height:5px;background:var(--rule);border-radius:50%;
}
.cal li.is-now::before{background:var(--indigo);box-shadow:0 0 0 3px rgba(51,59,120,.16)}
.cal-d{font-size:.66rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.08em}
.cal li.is-now .cal-d{color:var(--indigo)}
.cal-t{font-size:1.02rem;font-weight:600;letter-spacing:-.01em}
.cal-n{font-size:.87rem;color:var(--ink-2);line-height:1.55;max-width:54ch}

/* ── principios ───────────────────────────────────────────── */
.princ{list-style:none;margin:0;padding:0;display:grid;gap:0}
.princ li{
  padding:1rem .7rem;border-top:1px solid var(--rule-2);
  font-size:.94rem;line-height:1.6;color:var(--ink-2);max-width:62ch;
}
.princ li:first-child{border-top:1px solid var(--rule)}
.princ b{color:var(--ink);font-weight:600}

/* ── formulario ───────────────────────────────────────────── */
.form{display:grid;gap:1rem;max-width:38rem}
.f{display:grid;gap:.35rem}
.f label{font-size:.78rem;font-weight:600;letter-spacing:.01em}
.opt{font-size:.66rem;font-weight:400;color:var(--ink-3);text-transform:none;letter-spacing:0}

.f input,.f select,.f textarea{
  font:400 .95rem/1.5 var(--serif);color:var(--ink);
  background:var(--card);border:1px solid var(--rule);
  border-radius:1px;padding:.62rem .7rem;width:100%;
}
.f textarea{resize:vertical;min-height:4.5rem}
.f input::placeholder,.f textarea::placeholder{color:var(--ink-3)}
.f input:hover,.f select:hover,.f textarea:hover{border-color:var(--ink-3)}
.f .bad{border-color:var(--ochre)}

.f-act{gap:.7rem}
#btn{
  justify-self:start;font:500 .85rem/1 var(--mono);
  letter-spacing:.04em;text-transform:uppercase;
  background:var(--indigo);color:var(--card);
  border:1px solid var(--indigo);border-radius:1px;
  padding:.8rem 1.35rem;cursor:pointer;
  transition:background .16s ease,color .16s ease;
}
#btn:hover:not(:disabled){background:transparent;color:var(--indigo)}
#btn:disabled{opacity:.5;cursor:progress}

.note{margin:0;font-size:.82rem;color:var(--ink-2);min-height:1.2em}
.note.ok{color:var(--indigo);font-weight:600}
.note.err{color:var(--ochre)}

/* ── pie ──────────────────────────────────────────────────── */
.foot{
  border-top:1px solid var(--rule);background:var(--paper-2);
  padding:2.7rem 0 2rem;font-size:.87rem;
}
.foot-lead{margin:0 0 1.9rem;max-width:48ch;color:var(--ink-2);line-height:1.6}
.foot-lead b{color:var(--ink)}

.foot-cols{display:grid;gap:1.9rem}
.foot h4{
  margin:0 0 .7rem;font:500 .62rem/1 var(--mono);
  text-transform:uppercase;letter-spacing:.12em;color:var(--ink-3);
}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.foot li{font-size:.84rem;color:var(--ink-2);line-height:1.45}
.foot a{color:var(--indigo);text-decoration:none;border-bottom:1px solid rgba(51,59,120,.3)}
.foot a:hover{border-bottom-color:var(--indigo)}
.foot p{margin:0 0 .7rem;color:var(--ink-2);line-height:1.58;max-width:46ch}
.foot .mini{font-size:.79rem;color:var(--ink-3);font-style:italic}

.foot-end{
  display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;
  margin:2.2rem 0 0;padding-top:1.1rem;
  border-top:1px solid var(--rule);
  font-size:.66rem;color:var(--ink-3);
}

/* ── ≥ 560px ──────────────────────────────────────────────── */
@media (min-width:560px){
  .track{height:64px}
  .tick i{
    display:block;position:absolute;top:calc(100% + .45rem);left:50%;
    transform:translateX(-50%) rotate(-90deg);transform-origin:top center;
    font:500 .6rem/1 var(--mono);color:var(--indigo);letter-spacing:.02em;
  }
  .registro{padding-bottom:5rem}
  .cluster{display:none}
  .axis-mid{display:block;font-style:italic;font-family:var(--serif);font-size:.78rem}
  .legend{grid-template-columns:repeat(3,auto);justify-content:start;gap:1.4rem}
  .ledger .row{grid-template-columns:1fr auto 12rem;grid-template-areas:"dt num src";padding:1.05rem .8rem}
  .ledger .src{margin:0;justify-self:end;text-align:right}
  .inv li{grid-template-columns:1fr auto;grid-template-areas:"h tag" "p p";align-items:start;gap:.4rem 1.2rem}
  .inv h3{grid-area:h}
  .inv p{grid-area:p}
  .tag{grid-area:tag;justify-self:end}
  .cal li{grid-template-columns:11rem 1fr;grid-template-areas:"d t" "d n";gap:.25rem 1.4rem;padding-left:1.1rem}
  .cal-d{grid-area:d;padding-top:.16rem}
  .cal-t{grid-area:t}
  .cal-n{grid-area:n}
  .form{grid-template-columns:1fr 1fr;gap:1rem 1.1rem}
  .f-full{grid-column:1/-1}
  .foot-cols{grid-template-columns:1fr 1fr;gap:2.4rem}
  .foot-end{justify-content:space-between}
}

/* ── ≥ 880px ──────────────────────────────────────────────── */
@media (min-width:880px){
  .hero{padding-top:4.6rem}
  .band{padding:4.2rem 0}
  .track{height:78px}
  .capas{grid-template-columns:repeat(3,1fr);gap:1.1rem}
  .registro{padding-bottom:5.6rem}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}