/* ==============================
   MARGINALIA — SINGLE SOURCE CSS
   ============================== */

/* --- Base reset --- */
*,
*::before,
*::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { text-decoration: none; }

/* --- Typography & colors --- */
:root{
  --ink: #1a1a1a;
  --ink-2: #444;
  --rule: #d9d9d9;
  --paper: #ffffff;

  --measure: 75ch;                        /* wider reading width */
  --rail: clamp(13rem, 15vw, 15rem);      /* slim sidebar */
}

body {
  color: var(--ink);
  background: var(--paper);
  font: 16px/1.7 Arial, Helvetica, sans-serif;
}
h1, h2, h3, h4 { color: #333; margin: 0 0 .6rem 0; }

hr {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 2.5rem 0;   /* space above and below */
}

/* =================
   Header / Masthead
   ================= */
.m-head{
  width: min(1300px, 96%);
  margin: 2.5rem auto 2rem;
  text-align: center;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--rule);
}
.m-title{
  font-family: "Special Elite", monospace;
  font-size: 5.2rem;
  letter-spacing: .06em;
  text-transform: none;
  color: #111;
  margin: 0;
  line-height: 1.25;
}
.m-kicker{
  font-family: Verdana, Arial, Helvetica, sans-serif;
  margin-top: .2rem;
  font-size: 1.5rem;
  color: #555;
  line-height: 1.5;
}
.m-nav{
  margin-top: 1.2rem;
  padding-top: .8rem;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.6rem;
}
.m-nav a{
  font-family: Verdana, Arial, Helvetica, sans-serif;
  color: #333;
  font-size: 1.05rem;
  letter-spacing: .04em;
}
.m-nav a:hover{ color: #a22; }

/* ==============
   Main Layout
   ============== */
main, article, aside {
  width: auto !important;
  float: none !important;
  margin: 0;
  padding: 0;
}

main.m-layout{
  width: min(1300px, 96%);
  margin: 1.5rem auto 3rem;
  display: grid;
  grid-template-columns: minmax(0, var(--measure)) var(--rail);
  column-gap: 2rem;
  justify-content: center;
}
.m-article{ grid-column: 1; }
.m-rail{
  grid-column: 2;
  align-self: start;
  position: sticky;
  top: 1.5rem;
}

/* ======================
   Aside (refined)
   ====================== */
.m-rail{
  background: #fcfcfc;
  border: 1px solid #f0f0f0;
  border-radius: 10px;
  padding: .8rem 1rem;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 0.9rem;
  line-height: 1.4;
}

.a-sec{
  padding: .2rem 0 1rem;
  border-bottom: 1px solid #eee;
}
.a-sec:last-child{ border-bottom: none; }

.a-h{
  margin: 0 0 .5rem;
  font: 700 .82rem/1 Verdana, Arial, Helvetica, sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #444;
  font-size: 0.9rem;
}

.a-link{
  color:#333;
  font-size: 0.9rem;
}
.a-link:hover{ color:#a22; }

.a-archive{
  display: grid;
  gap: .25rem;
  margin: .1rem 0 .6rem;
}

.a-list{
  list-style: none;
  margin: .4rem 0 0;
  padding: 0;
}
.a-list li{
  padding: .3rem 0;
  border-top: 1px dotted #e6e6e6;
}
.a-list li:first-child{ border-top: none; }

.a-note{
  margin: .2rem 0 .6rem;
  color:#555;
  font-size: .85rem;
  line-height: 1.4;
}

.a-actions{
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  margin: 0;
}

/* ▼▼▼ corrected: target .a-btn (not .a-link) ▼▼▼ */
.a-actions .a-btn{
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: .35rem .6rem;
  background:#fff;
  font-size: 0.85rem;
  color:#333;                 /* ensure neutral color */
  display:inline-block;
}
.a-actions .a-btn:hover{
  border-color:#bbb;
  background:#fafafa;
  color:#a22;                 /* same red as menu hover */
}

/* =========
   Footer
   ========= */

/* Full-bleed container so the rules can span edge-to-edge */
.footer1{
  width: 100%;
  margin: 0 auto 2.5rem auto;
  clear: both;
}

/* Top rule above icons spans full width */
.lowbar{
  width: 100%;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 1em;
  color: #333;
  line-height: 1.8;
  border-top: 1px solid var(--rule);
  padding-top: 1.2rem;
  padding-bottom: 2rem;

  display: flex;
  flex-direction: column;
  align-items: stretch;   /* let the divider fill full width */
  gap: .8rem;
}

/* Icons row */
.redes{
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
.redes a{
  color:#333;
  font-size: 1.4rem;
}
.redes a:hover{ color:#a22; }

/* Divider under icons spans full width */
.footer-divider{
  width: 100%;
  border-top: 1px solid var(--rule);
  margin: .4rem 0 .6rem;
}

/* Content under divider aligned with main container (article+aside) */
.footer-bottom{
  width: min(1300px, 96%);  /* EXACT same width as header/main */
  margin-left: auto;
  margin-right: auto;

  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;        /* do not wrap left/right blocks */
  gap: .6rem;
}

.footer-left,
.footer-right{
  margin: 0;
  font-size: .95rem;
  line-height: 1.6;
  letter-spacing: .02em;
  color: #333;
}

.footer-right{
  text-align: right;
  white-space: nowrap;      /* keep "acerca · contacto · licencias · métricas" on one line */
}
.footer-right a{ color: #333; }
.footer-right a:hover{ color: #a22; }

/* =======
   Global link color normalization
   ======= */

/* make all anchors neutral by default; adopt red on hover/focus */
a { color:#333; }
a:visited { color:#333; }
a:hover,
a:focus { color:#a22; }

/* keep read-links consistent with the global style */
.m-read { color:#333; }
.m-read:hover,
.m-read:focus { color:#a22; }

/* =======
   Mobile
   ======= */
@media (max-width: 950px){
  main.m-layout{
    grid-template-columns: 1fr;
    width: min(100%, 96%);
  }
  .m-article{ grid-column: 1; }
  .m-rail{
    grid-column: 1;
    position: static;
    margin-top: 1.4rem;
  }

  .footer1{ width: 100%; }
  .lowbar{
    gap: .6rem;
    padding-top: 1rem;
    padding-bottom: 1.8rem;
  }
  .footer-bottom{
    width: 96%;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    text-align: center;
  }
  .footer-left, .footer-right{
    font-size: .9rem;
    white-space: normal;    /* allow wrap on small screens */
    text-align: center;
  }
}