/* Plinotro — hoja de estilo general */

:root{
  --bg:#1d1815;
  --bg-alt:#251f1a;
  --cream:#f1ebdf;
  --fg:#eae4d8;
  --fg2:#9a8f82;
  --ink:#1d1815;
  --gold:#c08a45;
  --green:#728a63;
  --rule:rgba(234,228,216,.16);
  --rule-ink:rgba(29,24,21,.18);
  --r:72px;
}

*{box-sizing:border-box}

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

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font:400 17px/1.7 system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}

a{color:var(--gold);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- retícula de 12 columnas con margen izquierdo vacío ---------- */

.wrap{
  width:100%;
  max-width:1220px;
  margin:0 auto;
  padding:0 24px;
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:24px;
}

.rail{
  grid-column:1 / 4;
  border-right:1px solid rgba(192,138,69,.45);
  padding-right:20px;
  text-align:right;
  align-self:stretch;
}

.col{
  grid-column:4 / 13;
  display:grid;
  grid-template-columns:repeat(9,minmax(0,1fr));
  column-gap:24px;
}

/* texto corriente: 6 columnas; listas y tablas de comprobación: 8 columnas */
.col > *{grid-column:1 / 7;min-width:0}
.col > .wide{grid-column:1 / 9}

/* ---------- tipografía ---------- */

h1,h2,h3{margin:0 0 20px}

h1{
  font-size:clamp(38px,6.6vw,72px);
  font-weight:700;
  line-height:1.04;
  letter-spacing:-.03em;
  max-width:15ch;
}

h2{
  font-size:clamp(23px,3vw,31px);
  font-weight:600;
  line-height:1.22;
  letter-spacing:-.01em;
}

h3{
  font-size:19px;
  font-weight:600;
  line-height:1.35;
  margin-top:12px;
}

p{margin:0 0 24px;max-width:72ch}

.lead p{font-size:19px;line-height:1.65}

.cap{
  font-size:13px;
  line-height:1.5;
  color:var(--fg2);
  margin:0;
}

.num{
  display:block;
  font-size:13px;
  letter-spacing:.06em;
  color:var(--green);
  margin-bottom:8px;
}

.ini{
  display:block;
  font-size:clamp(54px,8vw,104px);
  line-height:.82;
  font-weight:700;
  color:var(--gold);
  letter-spacing:-.04em;
}

/* ---------- líneas guía ---------- */

.guide{border-top:1px solid var(--rule);padding-top:28px;margin-top:8px}
.contrast .guide{border-top-color:var(--rule-ink)}

.lead{
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  padding:28px 0 4px;
  margin:36px 0 0;
}
.lead p + p{border-top:1px solid var(--rule);padding-top:28px}
.lead p:last-child{margin-bottom:28px}

/* ---------- cabecera y navegación ---------- */

.site-head{padding:26px 0;border-bottom:1px solid var(--rule)}
.site-head .rail{border-right-color:rgba(192,138,69,.3)}

.brand{
  font-size:18px;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--fg);
  text-decoration:none;
}
.brand:hover{color:var(--gold)}

.site-nav{grid-column:1 / 10;align-self:center}
.site-nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:6px 22px;
  font-size:15px;
}
.site-nav a{color:var(--fg);text-decoration:none;padding-bottom:2px;border-bottom:1px solid transparent}
.site-nav a:hover{border-bottom-color:var(--gold);color:var(--gold)}
.site-nav a[aria-current="page"]{border-bottom-color:var(--gold);color:var(--gold)}

.skip{
  position:absolute;
  left:-9999px;
  top:0;
  background:var(--gold);
  color:var(--ink);
  padding:10px 16px;
  z-index:5;
}
.skip:focus{left:8px;top:8px}

/* ---------- secciones ---------- */

section{padding:var(--r) 0}
.alt{background:var(--bg-alt)}

.contrast{
  background:var(--cream);
  color:var(--ink);
}
.contrast .rail{border-right-color:rgba(29,24,21,.22)}
.contrast .cap{color:#6b6053}
.contrast .num{color:#566b47}
.contrast a{color:#8a5f21}
.contrast a:focus-visible{outline-color:#8a5f21}

/* ---------- portada ---------- */

.hero{padding-top:calc(var(--r) - 8px);padding-bottom:36px}
.hero .rail{padding-top:6px}

.figrow{margin-top:var(--r);align-items:start}
.figrow .rail{border-right:1px solid rgba(192,138,69,.45);padding-top:4px}
.figrow figure{grid-column:6 / 13;margin:0}
.contrast .figrow .rail{border-right-color:rgba(29,24,21,.22)}

/* ---------- imagen de detalle en la sección clara ---------- */

.split{align-items:start}
.split .text{grid-column:1 / 6}
.split figure{grid-column:6 / 10;margin:0}
.split figure .cap{margin-top:14px}

/* ---------- listas ---------- */

ul.checks,ol.steps{
  margin:0 0 28px;
  padding-left:22px;
}
ul.checks{list-style:square}
ul.checks li,ol.steps li{margin-bottom:12px;padding-left:6px;max-width:70ch}
ul.checks li::marker{color:var(--gold)}
ol.steps li::marker{color:var(--gold);font-variant-numeric:tabular-nums}
.contrast ul.checks li::marker,.contrast ol.steps li::marker{color:#8a5f21}

ul.index{list-style:none;margin:0 0 12px;padding:0}
ul.index li{
  border-top:1px solid var(--rule);
  padding:14px 0;
  display:flex;
  gap:18px;
  align-items:baseline;
}
ul.index li:last-child{border-bottom:1px solid var(--rule)}
ul.index .n{color:var(--green);font-size:13px;flex:0 0 auto}
ul.index a{text-decoration:none;border-bottom:1px solid rgba(192,138,69,.5)}
ul.index a:hover{border-bottom-color:var(--gold)}

dl.pairs{margin:0 0 24px}
dl.pairs dt{font-weight:600;margin-top:16px}
dl.pairs dd{margin:4px 0 0;color:var(--fg2)}
.contrast dl.pairs dd{color:#6b6053}

.note{
  border-left:2px solid var(--green);
  padding:4px 0 4px 18px;
  color:var(--fg2);
  font-size:16px;
}
.contrast .note{color:#574f45}

/* ---------- pie ---------- */

.site-foot{
  background:var(--bg-alt);
  border-top:1px solid var(--rule);
  padding:56px 0;
  color:var(--fg2);
}
.site-foot .rail{border-right:1px solid rgba(192,138,69,.35)}
.site-foot .col{align-content:start}
.foot-main{
  grid-column:1 / 10;
  display:flex;
  flex-wrap:wrap;
  gap:24px 40px;
  justify-content:space-between;
}
.foot-name{font-size:18px;font-weight:700;color:var(--fg);margin:0 0 14px}
.foot-nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  font-size:15px;
}
.foot-nav li + li::before{content:"/";color:var(--gold);padding:0 12px}
.foot-nav a{color:var(--fg2);text-decoration:none}
.foot-nav a:hover{color:var(--gold)}
.foot-mail{font-size:15px;text-align:right}
.foot-mail p{margin:0 0 6px}
.foot-legal{
  grid-column:1 / 10;
  border-top:1px solid var(--rule);
  margin-top:36px;
  padding-top:18px;
  font-size:13px;
  color:var(--fg2);
}
.foot-legal p{margin:0;max-width:60ch}

/* ---------- adaptación a pantallas estrechas ---------- */

@media (max-width:1000px){
  .col > *{grid-column:1 / 8}
  .col > .wide{grid-column:1 / 10}
  .figrow figure{grid-column:5 / 13}
  .split .text{grid-column:1 / 6}
  .split figure{grid-column:6 / 10}
}

@media (max-width:820px){
  :root{--r:44px}
  body{font-size:16px}
  .wrap{grid-template-columns:minmax(0,1fr);column-gap:0;padding:0 20px}
  .rail{
    grid-column:1;
    border-right:0;
    border-left:2px solid var(--gold);
    padding:0 0 0 14px;
    text-align:left;
    margin-bottom:20px;
  }
  .contrast .rail,.figrow .rail,.site-head .rail,.site-foot .rail,.contrast .figrow .rail{
    border-right:0;
    border-left:2px solid var(--gold);
  }
  .col,.site-nav,.foot-main,.foot-legal{grid-column:1;grid-template-columns:minmax(0,1fr)}
  .col > *,.col > .wide,.figrow figure,.split .text,.split figure{grid-column:1}
  .figrow{margin-top:36px}
  .figrow .rail{margin-bottom:16px}
  .split figure{margin-top:28px}
  h1{max-width:none}
  .ini{font-size:52px}
  .lead p{font-size:17px}
  .foot-main{flex-direction:column;gap:24px}
  .foot-mail{text-align:left}
  .site-head{padding:20px 0}
  .site-head .rail{margin-bottom:14px}
}