/* Nuventu — hoja de estilo general */

:root{
  --bg:#171514;
  --bg-alt:#201c19;
  --paper:#ede9e3;
  --ink:#e6e1da;
  --mute:#9a9088;
  --ink-dark:#171514;
  --amber:#f08a24;
  --teal:#2f7a6e;
  --g:24px;
  --rhythm:72px;
  --rule:rgba(230,225,218,.16);
  --rule-dark:rgba(23,21,20,.22);
}

*{box-sizing:border-box}

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

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Georgia,'Times New Roman',serif;
  font-size:18px;
  line-height:1.7;
  overflow-x:hidden;
}

h1,h2,h3,.sans{
  font-family:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-weight:800;
}

p{margin:0 0 calc(var(--rhythm)/3)}
p:last-child{margin-bottom:0}

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

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

/* ---------- Rejilla de 12 columnas con margen reglado ---------- */

.wrap{max-width:1240px;margin:0 auto;padding:0 32px}

.grid{
  position:relative;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:var(--g);
  row-gap:0;
}

/* línea vertical de acento en el límite del margen izquierdo */
.grid--ruled::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:calc((100% - 11 * var(--g)) / 12 * 3 + 3 * var(--g) - var(--g)/2);
  width:1px;
  background:var(--amber);
  opacity:.55;
}

.field{grid-column:1 / 4}
.col-text{grid-column:4 / 10}
.col-wide{grid-column:4 / 12}
.col-full{grid-column:4 / 13}

/* ---------- Bandas ---------- */

.band{padding:calc(var(--rhythm)*1.5) 0;background:var(--bg)}
.band--alt{background:var(--bg-alt)}
.band--paper{background:var(--paper);color:var(--ink-dark)}
.band--paper .num{color:var(--teal)}
.band--paper .guide{background:var(--rule-dark)}
.band--paper .grid--ruled::before{opacity:.75}
.band--paper .cap{color:#5d564f}

.num{
  font-family:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-weight:800;
  font-size:.82rem;
  letter-spacing:.16em;
  color:var(--teal);
  margin:.55rem 0 0;
  text-transform:uppercase;
}

h2{
  font-size:clamp(1.5rem,3.1vw,2.15rem);
  line-height:1.08;
  letter-spacing:-.02em;
  margin:0 0 calc(var(--rhythm)/3);
  max-width:22ch;
}

h3{
  font-size:1.06rem;
  line-height:1.3;
  letter-spacing:-.01em;
  margin:calc(var(--rhythm)/2) 0 .5rem;
}

.guide{
  height:1px;
  background:var(--rule);
  border:0;
  margin:0 0 calc(var(--rhythm)/3);
}

.lede{font-size:1.16rem;color:var(--ink)}
.cap{
  font-family:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:.8rem;
  line-height:1.5;
  color:var(--mute);
  letter-spacing:.01em;
  margin:.4rem 0 0;
}

/* ---------- Cabecera ---------- */

.site-head{border-bottom:1px solid var(--rule);background:var(--bg)}
.site-head .inner{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:12px 28px;
  padding:22px 0;
}
.brand{
  font-family:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-weight:800;
  font-size:1.12rem;
  letter-spacing:.02em;
  color:var(--ink);
  text-decoration:none;
}
.brand:hover{color:var(--amber)}
.site-nav ul{display:flex;flex-wrap:wrap;gap:6px 22px;list-style:none;margin:0;padding:0}
.site-nav a{
  font-family:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:.92rem;
  color:var(--ink);
  text-decoration:none;
  padding-bottom:2px;
  border-bottom:1px solid transparent;
}
.site-nav a:hover{border-bottom-color:var(--amber);color:var(--amber)}
.site-nav a[aria-current="page"]{border-bottom-color:var(--amber)}

/* ---------- Portada ---------- */

.hero{padding:calc(var(--rhythm)*1.4) 0 calc(var(--rhythm)*1.1)}

.hero h1{
  grid-column:4 / 12;
  position:relative;
  font-size:clamp(2.15rem,5.6vw,4.1rem);
  line-height:.98;
  letter-spacing:-.035em;
  margin:0 0 calc(var(--rhythm)/2);
}
.hero h1 .line2{display:block;color:var(--mute)}
.drop{
  position:absolute;
  right:100%;
  margin-right:calc(var(--g)*1.4);
  top:-.08em;
  font-size:2.35em;
  line-height:.82;
  color:var(--amber);
  letter-spacing:-.06em;
}

.hero-intro{grid-column:4 / 10;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:calc(var(--rhythm)/3) 0}
.hero-intro p{margin-bottom:calc(var(--rhythm)/3)}
.hero-sub{grid-column:4 / 10;padding-top:calc(var(--rhythm)/3);border-bottom:1px solid var(--rule);padding-bottom:calc(var(--rhythm)/3)}
.hero-sub p{color:var(--mute);font-size:1rem;margin:0}

/* ---------- Figuras ---------- */

.fig{
  grid-column:1 / 13;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:var(--g);
  margin:0;
}
.fig img{grid-column:6 / 13;width:100%}
.fig figcaption{grid-column:1 / 4;align-self:end}

.fig-detail{margin:0;grid-column:4 / 8}
.fig-detail img{width:100%}

.detail-text{grid-column:8 / 13}

/* ---------- Listas ---------- */

ul.checks,ol.steps{margin:0;padding:0;list-style:none}
ul.checks li,ol.steps li{
  position:relative;
  padding-left:26px;
  margin-bottom:.6rem;
}
ul.checks li::before{
  content:"";
  position:absolute;
  left:0;
  top:.72em;
  width:10px;
  height:1px;
  background:var(--amber);
}
ol.steps{counter-reset:step}
ol.steps li{counter-increment:step;padding-left:36px}
ol.steps li::before{
  content:counter(step,decimal-leading-zero);
  position:absolute;
  left:0;
  top:.15em;
  font-family:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.08em;
  color:var(--teal);
}
.band--paper ul.checks li::before{background:var(--ink-dark)}

dl.terms{margin:0}
dl.terms dt{
  font-family:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-weight:800;
  font-size:.98rem;
  margin-top:1rem;
}
dl.terms dd{margin:.15rem 0 0}

.contact-line{
  font-family:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:1.05rem;
}

/* ---------- Pie ---------- */

.site-foot{background:var(--bg-alt);border-top:1px solid var(--rule);padding:calc(var(--rhythm)*.9) 0}
.foot-inner{
  grid-column:4 / 13;
  border-left:1px solid var(--amber);
  padding-left:calc(var(--g));
  display:flex;
  flex-wrap:wrap;
  gap:18px 40px;
  align-items:flex-start;
  justify-content:space-between;
}
.foot-name{
  font-family:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-weight:800;
  font-size:1.05rem;
  margin:0 0 .35rem;
}
.foot-note{font-size:.9rem;color:var(--mute);margin:0;max-width:44ch}
.foot-nav ul{display:flex;flex-wrap:wrap;list-style:none;margin:.2rem 0 0;padding:0;gap:4px 0}
.foot-nav li{font-family:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:.9rem}
.foot-nav li + li::before{content:"/";color:var(--amber);margin:0 10px}
.foot-nav a{color:var(--ink);text-decoration:none}
.foot-nav a:hover{color:var(--amber);text-decoration:underline}
.foot-mail{font-family:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:.95rem;text-align:right}
.foot-mail p{margin:0 0 .3rem;color:var(--mute);font-size:.85rem}

/* ---------- Páginas de texto ---------- */

.page-head{padding:calc(var(--rhythm)*1.2) 0 calc(var(--rhythm)/2)}
.page-head h1{
  grid-column:4 / 11;
  font-size:clamp(1.9rem,4.4vw,3rem);
  line-height:1;
  letter-spacing:-.03em;
  margin:0 0 calc(var(--rhythm)/3);
}
.page-head .lede{grid-column:4 / 10;border-top:1px solid var(--rule);padding-top:calc(var(--rhythm)/3)}

.doc h2{
  position:relative;
  max-width:26ch;
}
.doc .initial{
  color:var(--amber);
  font-size:1.5em;
  line-height:.8;
  margin-right:.12em;
}
.doc .block{grid-column:4 / 10;padding-bottom:calc(var(--rhythm)/1.5)}
.doc .side{grid-column:1 / 4}

/* ---------- Adaptación ---------- */

@media (max-width:900px){
  :root{--g:16px;--rhythm:44px}
  body{font-size:17px}
  .wrap{padding:0 20px}
  .grid{grid-template-columns:1fr;column-gap:0}
  .grid--ruled::before{left:0}
  .field,.col-text,.col-wide,.col-full,
  .hero h1,.hero-intro,.hero-sub,
  .fig,.fig img,.fig figcaption,.fig-detail,.detail-text,
  .page-head h1,.page-head .lede,
  .doc .block,.doc .side,.foot-inner{grid-column:1 / -1}
  .grid--ruled > *{padding-left:18px}
  .fig{display:block;padding-left:18px}
  .fig figcaption{margin-top:.5rem}
  .drop{position:static;font-size:1em;margin:0;color:var(--amber)}
  .band{padding:calc(var(--rhythm)*1.6) 0}
  .hero{padding:calc(var(--rhythm)*1.4) 0}
  .foot-inner{border-left:0;padding-left:18px;display:block}
  .foot-mail{text-align:left;margin-top:18px}
  .foot-nav{margin-top:14px}
  .site-head .inner{padding:18px 0}
  .num{margin-top:0}
  h2{max-width:none}
}

@media (max-width:420px){
  .foot-nav li + li::before{margin:0 7px}
}