/* ============================================================
   Vestigia — hoja de estilo única.
   Sin dependencias externas. Ninguna petición a terceros.
   ============================================================ */

:root{
  --ink:        #10171A;
  --ink-soft:   #3D4E54;
  --ink-mute:   #6B7B81;
  --paper:      #E8EAE6;
  --paper-hi:   #F3F5F1;
  --patina:     #1E5C4F;
  --patina-hi:  #2C8471;
  --oxide:      #8C3A22;
  --rule:       rgba(16,23,26,.16);
  --rule-soft:  rgba(16,23,26,.08);

  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --measure: 68ch;
  --shell: 1120px;
  --gap: clamp(1.5rem, 4vw, 3.5rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation:none !important;transition:none !important}
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1rem,.97rem + .18vw,1.075rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

/* fondo: retícula tenue, como papel de registro */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(to right, rgba(16,23,26,.035) 1px, transparent 1px);
  background-size:calc(100%/12) 100%;
  opacity:.9;
}
main,header,footer{position:relative;z-index:1}

a{color:var(--patina);text-decoration:none;border-bottom:1px solid rgba(30,92,79,.35)}
a:hover{color:var(--patina-hi);border-bottom-color:currentColor}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--patina);outline-offset:3px;border-radius:2px
}

h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.15;letter-spacing:-.012em;margin:0 0 .6em}
h1{font-size:clamp(2.1rem,1.4rem + 3.1vw,3.55rem)}
h2{font-size:clamp(1.55rem,1.2rem + 1.5vw,2.25rem)}
h3{font-size:clamp(1.18rem,1.05rem + .55vw,1.45rem)}
p{margin:0 0 1.1em;max-width:var(--measure)}
ul,ol{max-width:var(--measure);padding-left:1.15em}
li{margin-bottom:.45em}
strong{font-weight:600}
hr{border:0;border-top:1px solid var(--rule);margin:var(--gap) 0}

/* ---------- estructura ---------- */
.shell{max-width:var(--shell);margin:0 auto;padding:0 clamp(1.1rem,4vw,2.5rem)}
.band{padding:clamp(3rem,7vw,5.5rem) 0;border-top:1px solid var(--rule-soft)}
.band--flush{border-top:0}
.band--dark{background:var(--ink);color:var(--paper-hi);border-top:0}
.band--dark h2,.band--dark h3{color:var(--paper-hi)}
.band--dark a{color:#7FD6BE;border-bottom-color:rgba(127,214,190,.4)}
.band--dark .rail{color:rgba(243,245,241,.55)}

.split{display:grid;grid-template-columns:minmax(0,10.5rem) minmax(0,1fr);gap:clamp(1rem,3vw,3rem);align-items:start}
@media (max-width:760px){.split{grid-template-columns:1fr;gap:.75rem}}

/* etiqueta de riel: referencia normativa, no decoración */
.rail{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-mute);line-height:1.5;padding-top:.55rem;
  border-top:2px solid var(--ink);display:block
}
@media (max-width:760px){.rail{border-top:0;border-left:2px solid var(--ink);padding:0 0 0 .6rem;margin-bottom:.5rem}}

.lede{font-size:clamp(1.1rem,1rem + .5vw,1.32rem);color:var(--ink-soft);line-height:1.55;max-width:60ch}

/* ---------- cabecera ---------- */
.masthead{border-bottom:1px solid var(--rule);background:var(--paper);position:sticky;top:0;z-index:50}
.masthead__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:.85rem;padding-bottom:.85rem}
.wordmark{font-family:var(--serif);font-size:1.32rem;letter-spacing:.02em;color:var(--ink);border:0;display:inline-flex;align-items:baseline;gap:.5rem}
.wordmark span{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute)}
.nav{display:flex;gap:1.35rem;align-items:center;flex-wrap:wrap}
.nav a{font-size:.92rem;color:var(--ink-soft);border-bottom:1px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--patina)}
.nav__cta{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  background:var(--ink);color:var(--paper-hi) !important;padding:.55rem .85rem;border:0 !important;border-radius:2px}
.nav__cta:hover{background:var(--patina)}
.navtoggle{display:none;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  background:none;border:1px solid var(--rule);border-radius:2px;padding:.5rem .7rem;color:var(--ink);cursor:pointer}
@media (max-width:860px){
  .navtoggle{display:block}
  .nav{display:none;width:100%;flex-direction:column;align-items:flex-start;gap:.9rem;padding:1rem 0 .4rem}
  .nav.is-open{display:flex}
  .masthead__in{flex-wrap:wrap}
}

/* ---------- hero ---------- */
.hero{padding:clamp(3rem,8vw,6rem) 0 clamp(2rem,5vw,3.5rem)}
.hero h1{max-width:19ch}
.hero .lede{margin-top:1.2rem}
.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--patina);margin:0 0 1.4rem}

/* ---------- bitácora (elemento firma) ---------- */
.bitacora{border-top:2px solid var(--ink);margin-top:clamp(2.5rem,5vw,3.5rem)}
.bitacora__cap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);padding:.6rem 0}
.entry{display:grid;grid-template-columns:8.5rem 1fr auto;gap:1rem;align-items:baseline;
  padding:.85rem 0;border-top:1px solid var(--rule-soft);font-size:.95rem}
.entry time{font-family:var(--mono);font-size:.78rem;letter-spacing:.04em;color:var(--ink-mute);white-space:nowrap}
.entry p{margin:0;max-width:none}
.entry__src{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute);white-space:nowrap}
.entry--live{background:linear-gradient(to right, rgba(140,58,34,.07), transparent 70%)}
.entry--live time{color:var(--oxide)}
.entry--live strong{color:var(--oxide)}
@media (max-width:700px){
  .entry{grid-template-columns:1fr;gap:.25rem}
  .entry__src{order:3}
}
.count{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600}

@media (prefers-reduced-motion: no-preference){
  .entry{animation:rise .5s cubic-bezier(.2,.7,.3,1) both}
  .entry:nth-child(2){animation-delay:.05s}
  .entry:nth-child(3){animation-delay:.1s}
  .entry:nth-child(4){animation-delay:.15s}
  .entry:nth-child(5){animation-delay:.2s}
  .entry:nth-child(6){animation-delay:.25s}
}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- botones ---------- */
.actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.8rem}
.btn{font-family:var(--mono);font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;
  display:inline-block;padding:.8rem 1.25rem;border-radius:2px;border:1px solid var(--ink) !important;
  background:var(--ink);color:var(--paper-hi) !important}
.btn:hover{background:var(--patina);border-color:var(--patina) !important}
.btn--ghost{background:transparent;color:var(--ink) !important}
.btn--ghost:hover{background:var(--ink);color:var(--paper-hi) !important}
.band--dark .btn{background:var(--paper-hi);color:var(--ink) !important;border-color:var(--paper-hi) !important}
.band--dark .btn:hover{background:var(--patina-hi);border-color:var(--patina-hi) !important;color:var(--ink) !important}

/* ---------- tarjetas / listas de servicio ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr));gap:1px;background:var(--rule);
  border:1px solid var(--rule);margin-top:2rem}
.card{background:var(--paper);padding:clamp(1.3rem,2.5vw,1.9rem);display:flex;flex-direction:column}
.card h3{margin-bottom:.45em}
.card p{font-size:.96rem;color:var(--ink-soft)}
.card__tag{font-family:var(--mono);font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;color:var(--patina);margin-bottom:.9rem}
.card__more{margin-top:auto;padding-top:.9rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase}

/* ---------- tablas ---------- */
.tbl{width:100%;border-collapse:collapse;margin:1.6rem 0;font-size:.94rem}
.tbl caption{text-align:left;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-mute);padding-bottom:.7rem}
.tbl th,.tbl td{text-align:left;padding:.7rem .8rem .7rem 0;border-bottom:1px solid var(--rule-soft);vertical-align:top}
.tbl th{font-family:var(--mono);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-mute);
  border-bottom:1px solid var(--ink);font-weight:400}
.tbl td:first-child{font-weight:600;white-space:nowrap;padding-right:1.4rem}
.tbl--wrap td:first-child{white-space:normal}
@media (max-width:640px){.tbl,.tbl td:first-child{font-size:.88rem;white-space:normal}}

/* ---------- nota / aviso ---------- */
.note{border-left:2px solid var(--patina);padding:.2rem 0 .2rem 1.1rem;margin:1.6rem 0;color:var(--ink-soft);font-size:.95rem}
.note--oxide{border-left-color:var(--oxide)}
.note p:last-child{margin-bottom:0}

/* ---------- lista de definiciones ---------- */
.deflist{margin:1.5rem 0;max-width:var(--measure)}
.deflist dt{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--patina);
  padding-top:1.1rem;border-top:1px solid var(--rule-soft);margin-top:1.1rem}
.deflist dd{margin:.5rem 0 0}

/* ---------- socios ---------- */
.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));gap:clamp(1.5rem,4vw,3rem);margin-top:2rem}
.person__ph{aspect-ratio:4/5;background:
  repeating-linear-gradient(45deg, rgba(16,23,26,.05) 0 8px, transparent 8px 16px), var(--paper-hi);
  border:1px solid var(--rule);display:flex;align-items:flex-end;padding:0;margin-bottom:1rem;border-radius:2px;overflow:hidden}
.person__ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.person__ph span{font-family:var(--mono);font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-mute);position:absolute;padding:1rem;background:linear-gradient(to top,rgba(16,23,26,.6),transparent)}
.person h3{margin-bottom:.15em}
.person__role{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--patina);margin-bottom:1rem}

/* ---------- formulario ---------- */
.form{max-width:34rem;margin-top:1.8rem}
.field{margin-bottom:1.15rem}
.field label{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:.4rem}
.field input,.field textarea,.field select{width:100%;font-family:var(--sans);font-size:1rem;color:var(--ink);
  background:var(--paper-hi);border:1px solid var(--rule);border-radius:2px;padding:.7rem .8rem}
.field textarea{min-height:8rem;resize:vertical}
.field small{display:block;color:var(--ink-mute);font-size:.82rem;margin-top:.35rem}
.consent{display:flex;gap:.65rem;align-items:flex-start;font-size:.9rem;color:var(--ink-soft);margin:1.2rem 0}
.consent input{margin-top:.32rem;width:auto;flex:none}

/* ---------- pie ---------- */
.colophon{background:var(--ink);color:rgba(243,245,241,.7);padding:clamp(2.5rem,5vw,3.5rem) 0 2rem;font-size:.9rem}
.colophon a{color:rgba(243,245,241,.9);border-bottom-color:rgba(243,245,241,.25)}
.colophon a:hover{color:#7FD6BE}
.colophon__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:2rem}
.colophon h4{font-family:var(--mono);font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;
  color:rgba(243,245,241,.45);margin-bottom:.9rem}
.colophon ul{list-style:none;padding:0;margin:0}
.colophon li{margin-bottom:.45em}
.colophon__base{margin-top:2.5rem;padding-top:1.3rem;border-top:1px solid rgba(243,245,241,.15);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.05em;color:rgba(243,245,241,.5);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--ink);color:var(--paper-hi);padding:.7rem 1rem;border-radius:2px}