/* Manere — hoja de estilos común */

:root{
  --bg:#f7f2e2;
  --bg-alt:#ede5cd;
  --ink:#1b1a16;
  --ink-2:#756f5c;
  --dark:#17191a;
  --acc:#1f7d78;
  --acc-2:#a8721c;
  --line:rgba(27,26,22,.22);
  --line-soft:rgba(27,26,22,.14);
  --line-dark:rgba(247,242,226,.26);
}

*,*::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%}

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

.band--dark a:focus-visible{outline-color:#8fd3cf}

.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 24px}

.g12{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:28px;
}

/* ---------- cabecera ---------- */

.site-head{background:var(--bg)}

.head-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:10px 32px;
  padding-top:22px;
  padding-bottom:16px;
  border-bottom:1px solid var(--line-soft);
}

.brand{
  font-size:19px;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--ink);
  text-decoration:none;
}

.site-nav ul{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:4px 20px;
  margin:0;
  padding:0;
  font-size:14px;
}

.site-nav a{
  color:var(--ink-2);
  text-decoration:none;
  padding-bottom:2px;
  border-bottom:1px solid transparent;
}

.site-nav a:hover{color:var(--acc);border-bottom-color:var(--acc)}

/* ---------- ritmo de bandas ---------- */

.band{padding:84px 0}
.band--alt{background:var(--bg-alt)}
.band--dark{background:var(--dark);color:var(--bg)}
.band--dark .cap,
.band--dark .meta{color:#b8b2a0}

.hero{padding:72px 0 0}

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

.hero h1{
  grid-column:1/9;
  grid-row:1;
  margin:0 0 30px;
  font-size:clamp(2.4rem,5.6vw,4.35rem);
  font-weight:700;
  line-height:1.02;
  letter-spacing:-.035em;
}

.hero .lede{
  grid-column:1/7;
  grid-row:2;
  margin:0;
  font-size:19px;
  color:var(--ink);
}

.hero .lede + .lede{margin-top:16px}

.toc{
  grid-column:10/13;
  grid-row:1/span 3;
  font-size:13px;
  line-height:1.45;
  align-self:start;
}

.toc h2{
  margin:0 0 10px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-2);
}

.toc ol{list-style:none;margin:0;padding:0}

.toc li{
  display:flex;
  gap:10px;
  padding:6px 0;
  border-top:1px solid var(--line-soft);
}

.toc .n{
  color:var(--acc-2);
  font-variant-numeric:tabular-nums;
  flex:0 0 auto;
}

.toc a{
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid transparent;
}

.toc a:hover{color:var(--acc);border-bottom-color:var(--acc)}

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

.sec + .sec{margin-top:84px}

.sec .num{
  grid-column:10/13;
  padding-top:20px;
  font-size:13px;
  letter-spacing:.14em;
  color:var(--acc-2);
  font-variant-numeric:tabular-nums;
}

.sec .body{
  grid-column:1/8;
  border-top:1px solid var(--line);
  padding-top:20px;
}

.band--dark .sec .body{border-top-color:var(--line-dark)}

.sec h2{
  margin:0 0 16px;
  font-size:clamp(1.4rem,2.3vw,2rem);
  font-weight:700;
  line-height:1.16;
  letter-spacing:-.022em;
}

.sec h3{
  margin:28px 0 8px;
  font-size:1.02rem;
  font-weight:700;
  letter-spacing:-.01em;
}

.sec p{margin:0 0 16px}
.sec p:last-child{margin-bottom:0}

.body ul,
.body ol.steps{margin:0 0 16px;padding-left:0;list-style:none}

.body ul li,
.body ol.steps li{
  position:relative;
  padding-left:22px;
  margin-bottom:7px;
}

.body ul li::before{
  content:"";
  position:absolute;
  left:0;
  top:.72em;
  width:9px;
  height:1px;
  background:var(--acc);
}

.body ol.steps{counter-reset:st}

.body ol.steps li{counter-increment:st;padding-left:30px}

.body ol.steps li::before{
  content:counter(st,decimal-leading-zero);
  position:absolute;
  left:0;
  top:0;
  font-size:13px;
  color:var(--acc-2);
  font-variant-numeric:tabular-nums;
}

.meta{font-size:13px;color:var(--ink-2)}

.body a{color:var(--acc);text-decoration:none;border-bottom:1px solid rgba(31,125,120,.5)}
.body a:hover{border-bottom-color:var(--acc)}
.band--dark .body a{color:#7fc9c4;border-bottom-color:rgba(127,201,196,.5)}

/* ---------- imágenes ---------- */

.figmain{grid-column:1/9;margin:0}
.figmain img{display:block;width:100%;height:auto}

.figcap{
  grid-column:10/13;
  align-self:end;
  font-size:13px;
  line-height:1.45;
  color:var(--ink-2);
}

.detail-fig{grid-column:1/5;margin:0}
.detail-fig img{display:block;width:100%;height:auto}

.detail-fig figcaption{
  margin-top:10px;
  font-size:13px;
  line-height:1.45;
  color:#b8b2a0;
}

.detail-text{grid-column:6/12}

.detail-text .num{
  display:block;
  font-size:13px;
  letter-spacing:.14em;
  color:var(--acc-2);
  margin-bottom:8px;
}

.detail-text h2{
  margin:0 0 16px;
  font-size:clamp(1.4rem,2.3vw,2rem);
  font-weight:700;
  line-height:1.16;
  letter-spacing:-.022em;
}

.detail-text p{margin:0 0 16px}
.detail-text p:last-child{margin-bottom:0}

/* ---------- páginas interiores ---------- */

.page{padding:64px 0 0}

.page h1{
  grid-column:1/9;
  margin:0 0 26px;
  font-size:clamp(2rem,4.4vw,3.3rem);
  font-weight:700;
  line-height:1.06;
  letter-spacing:-.03em;
}

.page .prose{grid-column:1/8}

.page .prose h2{
  margin:40px 0 14px;
  font-size:clamp(1.3rem,2vw,1.7rem);
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.02em;
  border-top:1px solid var(--line);
  padding-top:20px;
}

.page .prose h2:first-child{margin-top:0}

.page .prose p{margin:0 0 16px}

.page .prose ul{margin:0 0 16px;padding-left:0;list-style:none}

.page .prose ul li{position:relative;padding-left:22px;margin-bottom:7px}

.page .prose ul li::before{
  content:"";
  position:absolute;
  left:0;
  top:.72em;
  width:9px;
  height:1px;
  background:var(--acc);
}

.page .prose a{color:var(--acc);text-decoration:none;border-bottom:1px solid rgba(31,125,120,.5)}
.page .prose a:hover{border-bottom-color:var(--acc)}

.side{
  grid-column:10/13;
  font-size:13px;
  line-height:1.5;
  align-self:start;
}

.side ul{list-style:none;margin:0;padding:0}

.side li{padding:6px 0;border-top:1px solid var(--line-soft);color:var(--ink-2)}

.side .k{color:var(--acc-2);margin-right:8px;font-variant-numeric:tabular-nums}

.side a{color:var(--ink);text-decoration:none;border-bottom:1px solid rgba(31,125,120,.45)}
.side a:hover{color:var(--acc)}

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

.site-foot{padding:70px 0 54px;background:var(--bg)}

.foot-top{align-items:baseline}

.foot-name{
  grid-column:1/7;
  font-size:22px;
  font-weight:700;
  letter-spacing:-.02em;
}

.foot-nav{grid-column:7/13}

.foot-nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:4px 20px;
  font-size:14px;
}

.foot-nav a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid transparent}
.foot-nav a:hover{color:var(--acc);border-bottom-color:var(--acc)}

.foot-rule{
  border:0;
  border-top:1px solid var(--line);
  margin:22px 0 20px;
}

.foot-mail{margin:0 0 8px;font-size:17px}
.foot-mail a{color:var(--acc);text-decoration:none;border-bottom:1px solid rgba(31,125,120,.5)}
.foot-mail a:hover{border-bottom-color:var(--acc)}

.foot-note{margin:0;font-size:13px;color:var(--ink-2);max-width:62ch}

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

@media (max-width:1080px){
  .hero h1{grid-column:1/10}
  .hero .lede{grid-column:1/9}
  .toc{grid-column:10/13}
  .sec .body{grid-column:1/9}
  .sec .num{grid-column:9/13}
  .figmain{grid-column:1/10}
  .figcap{grid-column:10/13}
  .detail-fig{grid-column:1/6}
  .detail-text{grid-column:6/13}
  .page h1{grid-column:1/10}
  .page .prose{grid-column:1/9}
  .side{grid-column:9/13}
}

@media (max-width:860px){
  body{font-size:16.5px}

  .g12{grid-template-columns:minmax(0,1fr);column-gap:0}

  .g12 > *{grid-column:1/-1 !important;grid-row:auto !important}

  .band{padding:50px 0}
  .hero{padding:40px 0 0}
  .sec + .sec{margin-top:50px}

  .hero h1{margin-bottom:22px}
  .hero .lede{font-size:17.5px}

  .toc{order:-1;margin-bottom:34px}

  .toc ol{display:flex;flex-wrap:wrap;gap:6px 16px}

  .toc li{border-top:0;padding:0}

  .sec .num{
    padding-top:18px;
    border-top:1px solid var(--line);
    margin-bottom:6px;
  }

  .band--dark .sec .num{border-top-color:var(--line-dark)}

  .sec .body{border-top:0;padding-top:0}

  .figcap{margin-top:10px}

  .detail-text{margin-top:26px}

  .page .prose{margin-top:0}

  .side{margin-top:34px;border-top:1px solid var(--line);padding-top:16px}

  .foot-nav ul{justify-content:flex-start;margin-top:14px}

  .site-foot{padding:46px 0 40px}
}