/* Nirdoso — hoja de estilo principal */

:root{
  --bg:#f4f0e8;
  --bg-alt:#e7e1d5;
  --bg-dark:#20242a;
  --ink:#22201b;
  --ink-soft:#776f62;
  --ink-inv:#f4f0e8;
  --accent:#2c4668;
  --accent-2:#a06a2c;
  --rule:#cdc5b5;
  --maxw:1180px;
  --gap:24px;
}

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

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

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

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

a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
a:hover{text-decoration-thickness:2px;}

a:focus-visible,
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

/* ---------- rejilla de 12 columnas ---------- */

.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 28px;
}

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

.col-4{grid-column:span 4;}
.col-5{grid-column:span 5;}
.col-6{grid-column:span 6;}
.col-7{grid-column:span 7;}
.col-8{grid-column:span 8;}
.col-9{grid-column:span 9;}

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

h1,h2,h3{margin:0;line-height:1.15;}

h1{
  font-size:clamp(2.45rem,5.6vw,4.05rem);
  font-weight:700;
  letter-spacing:-0.035em;
}

h1 .l2{display:block;padding-left:8.333%;}

h2{
  font-size:clamp(1.42rem,2.5vw,1.85rem);
  font-weight:700;
  letter-spacing:-0.015em;
  margin-bottom:18px;
}

h3{
  font-size:1.06rem;
  font-weight:700;
  letter-spacing:-0.005em;
  margin:30px 0 8px;
}

p{margin:0 0 18px;}

.lead{font-size:1.16rem;line-height:1.62;}

.cap{
  font-size:13px;
  line-height:1.5;
  color:var(--ink-soft);
  letter-spacing:0.02em;
}

.num{
  font-size:13px;
  font-weight:700;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--accent-2);
  display:block;
  margin-bottom:10px;
}

/* ---------- separador doble ---------- */

.sep{margin:0 0 26px;}
.sep::before{
  content:"";
  display:block;
  height:1px;
  background:var(--rule);
  width:100%;
}
.sep::after{
  content:"";
  display:block;
  height:3px;
  width:16.666%;
  min-width:96px;
  background:var(--accent);
  margin-top:5px;
}

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

.site-head{
  border-bottom:1px solid var(--rule);
  background:var(--bg);
}

.head-in{
  max-width:var(--maxw);
  margin:0 auto;
  padding:18px 28px;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:10px 26px;
}

.brand{
  font-size:1.18rem;
  font-weight:700;
  letter-spacing:-0.02em;
  color:var(--ink);
  text-decoration:none;
}
.brand:hover{color:var(--accent);}

.site-head nav{margin-left:auto;}

.site-head ul{
  list-style:none;
  margin:0;padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:6px 22px;
}

.site-head a:not(.brand){
  color:var(--ink);
  text-decoration:none;
  font-size:15px;
  padding-bottom:2px;
  border-bottom:2px solid transparent;
}
.site-head a:not(.brand):hover{border-bottom-color:var(--accent);color:var(--accent);}
.site-head a[aria-current="page"]{border-bottom-color:var(--accent-2);}

/* ---------- hero ---------- */

.hero{
  padding:74px 0 0;
  position:relative;
}

.hero-in{
  position:relative;
  padding-left:34px;
}

/* línea de cota vertical con topes */
.hero-in::before{
  content:"";
  position:absolute;
  left:0;top:6px;bottom:22px;
  width:1px;
  background:var(--accent-2);
}
.hero-in::after{
  content:"";
  position:absolute;
  left:-5px;top:6px;
  width:11px;height:1px;
  background:var(--accent-2);
  box-shadow:0 0 0 0 transparent;
}

.tick-bottom{
  position:absolute;
  left:-5px;bottom:22px;
  width:11px;height:1px;
  background:var(--accent-2);
}

.hero h1{max-width:100%;}

/* línea de cota horizontal bajo el título */
.dimline{
  display:flex;
  align-items:center;
  gap:14px;
  margin:30px 0 26px;
  max-width:83.333%;
}
.dimline span{
  flex:1;
  height:1px;
  background:var(--rule);
  position:relative;
}
.dimline span::before,
.dimline span::after{
  content:"";
  position:absolute;
  top:-4px;
  width:1px;height:9px;
  background:var(--accent-2);
}
.dimline span::before{left:0;}
.dimline span::after{right:0;}
.dimline em{
  font-style:normal;
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--accent-2);
  white-space:nowrap;
}

/* ---------- imagen principal con llamada ---------- */

.figblock{
  margin:40px 0 0;
  align-items:start;
}

.figblock figure{margin:0;grid-column:span 7;}

.figblock .callout{
  grid-column:9 / span 4;
  position:relative;
  padding-top:38px;
}
.figblock .callout::before{
  content:"";
  position:absolute;
  left:-14.5%;
  top:52px;
  width:16%;
  height:1px;
  background:var(--accent-2);
}
.figblock .callout p{margin-bottom:12px;}

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

section{padding:72px 0;}
section.alt{background:var(--bg-alt);}
section.r88{padding:88px 0;}
section.r104{padding:104px 0;}

.body-7{grid-column:span 7;}
.body-9{grid-column:span 9;}

/* listas prácticas */

.checklist{
  list-style:none;
  margin:0 0 20px;
  padding:0;
}
.checklist li{
  position:relative;
  padding-left:26px;
  margin-bottom:10px;
}
.checklist li::before{
  content:"";
  position:absolute;
  left:0;top:12px;
  width:12px;height:2px;
  background:var(--accent);
}

ol.steps{
  margin:0 0 20px;
  padding-left:22px;
}
ol.steps li{margin-bottom:10px;}
ol.steps li::marker{color:var(--accent-2);font-weight:700;}

.dl{margin:0 0 20px;}
.dl dt{font-weight:700;margin-top:16px;}
.dl dd{margin:2px 0 0;color:var(--ink);}

/* ---------- sección contrastada ---------- */

.dark{
  background:var(--bg-dark);
  color:var(--ink-inv);
}
.dark h2,.dark h3{color:var(--ink-inv);}
.dark .cap{color:#a9a294;}
.dark .num{color:#c69457;}
.dark a{color:#9db7dc;}
.dark .sep::before{background:#3a3f47;}
.dark .sep::after{background:#9db7dc;}
.dark .checklist li::before{background:#9db7dc;}

.dark .grid{row-gap:34px;}
.dark figure{grid-column:2 / span 4;margin:0;}
.dark .dark-text{grid-column:7 / span 6;}
.dark figure figcaption{margin-top:12px;}

/* ---------- about ---------- */

.about-rail{
  grid-column:span 9;
  position:relative;
  padding-left:30px;
  border-left:1px solid var(--rule);
}
.about-rail .blk{position:relative;padding:0 0 34px;}
.about-rail .blk::before{
  content:"";
  position:absolute;
  left:-30px;top:12px;
  width:18px;height:1px;
  background:var(--accent-2);
}
.about-rail .blk p:last-child{margin-bottom:0;}
.about-rail .blk > p,
.about-rail .blk > ul{max-width:78%;}

/* ---------- páginas de texto ---------- */

.doc{grid-column:span 9;}
.doc p,.doc li{max-width:72ch;}
.doc ul{padding-left:20px;}
.doc li{margin-bottom:8px;}

.pagehead{padding:60px 0 0;}
.pagehead h1{font-size:clamp(2.1rem,4.4vw,3.1rem);}
.pagehead .cap{margin-top:18px;max-width:58ch;}

/* ---------- contacto ---------- */

.contact-box{
  grid-column:span 7;
  border-top:1px solid var(--rule);
  padding-top:20px;
}
.contact-box .mail{
  font-size:1.12rem;
  font-weight:700;
}

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

.site-foot{
  background:var(--bg);
  padding:56px 0 30px;
}
.site-foot .top{
  border-top:1px solid var(--rule);
  padding-top:4px;
}
.site-foot .top::after{
  content:"";
  display:block;
  height:3px;
  width:16.666%;
  min-width:96px;
  background:var(--accent-2);
  margin-bottom:34px;
}
.foot-grid{row-gap:28px;}
.foot-brand{grid-column:span 5;}
.foot-brand .name{
  font-size:1.9rem;
  font-weight:700;
  letter-spacing:-0.03em;
  line-height:1.1;
  margin-bottom:10px;
}
.foot-nav{grid-column:8 / span 3;}
.foot-mail{grid-column:11 / span 2;}
.site-foot h2{
  font-size:13px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--accent-2);
  font-weight:700;
  margin-bottom:12px;
}
.site-foot ul{list-style:none;margin:0;padding:0;}
.site-foot li{margin-bottom:7px;font-size:15px;}
.site-foot a{color:var(--ink);text-decoration:none;}
.site-foot a:hover{color:var(--accent);text-decoration:underline;}
.foot-bottom{
  margin-top:40px;
  border-top:1px solid var(--rule);
  padding-top:14px;
}

/* ---------- adaptación ---------- */

@media (max-width:980px){
  .figblock figure{grid-column:span 12;}
  .figblock .callout{grid-column:span 12;padding-top:16px;}
  .figblock .callout::before{display:none;}
  .dark figure{grid-column:span 7;}
  .dark .dark-text{grid-column:span 12;}
  .body-7,.body-9,.doc,.about-rail,.contact-box{grid-column:span 12;}
  .foot-brand{grid-column:span 12;}
  .foot-nav{grid-column:span 6;}
  .foot-mail{grid-column:span 6;}
  .about-rail .blk > p,.about-rail .blk > ul{max-width:100%;}
}

@media (max-width:680px){
  body{font-size:16px;}
  .wrap,.head-in{padding-left:20px;padding-right:20px;}
  .head-in{padding-top:14px;padding-bottom:14px;}
  .site-head nav{margin-left:0;width:100%;}
  .site-head ul{gap:6px 16px;}
  .hero{padding-top:44px;}
  .hero-in{padding-left:22px;}
  h1 .l2{padding-left:0;}
  .dimline{max-width:100%;margin:22px 0 20px;}
  section{padding:48px 0;}
  section.r88{padding:52px 0;}
  section.r104{padding:56px 0;}
  .dark figure{grid-column:span 12;}
  .foot-nav,.foot-mail{grid-column:span 12;}
  .site-foot{padding-top:40px;}
  .lead{font-size:1.06rem;}
}