/* Skidelderu — hoja de estilos general */

:root{
  --bg:#14161a;
  --bg-alt:#1d2026;
  --bg-contrast:#e4e4e1;
  --tx:#d8dbdf;
  --tx2:#8a9098;
  --tx-dark:#14161a;
  --ac:#e8a33d;
  --ac2:#4fb79a;
  --mono:ui-monospace,Consolas,'Liberation Mono',monospace;
  --sans:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --gut:24px;
}

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

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

body{
  margin:0;
  background:var(--bg);
  color:var(--tx);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.75;
  overflow-x:hidden;
}

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

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

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

/* ---------- rejilla ---------- */

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

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

/* ritmo de secciones */
.s-a{padding:72px 0}
.s-b{padding:88px 0}
.s-c{padding:104px 0}
.alt{background:var(--bg-alt)}

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

h1,h2,h3,.eyebrow,.brand,nav a,.dim-label,.fig-note p:first-child,.tick-label{
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:.09em;
  font-weight:600;
}

h1{
  font-size:clamp(28px,4.2vw,46px);
  line-height:1.22;
  letter-spacing:.04em;
  margin:0;
}
.h1-b{display:block;padding-left:calc((100% - 7 * var(--gut)) / 8);color:var(--tx2)}

h2{
  font-size:clamp(19px,2.1vw,24px);
  line-height:1.4;
  margin:0 0 20px;
}
h3{
  font-size:15px;
  letter-spacing:.12em;
  color:var(--ac2);
  margin:32px 0 10px;
}

p{margin:0 0 20px}
p:last-child{margin-bottom:0}

.eyebrow{
  font-size:12px;
  letter-spacing:.22em;
  color:var(--tx2);
  margin:0 0 22px;
}
.eyebrow .num{color:var(--ac2);margin-right:12px}

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

.small{font-size:14px;line-height:1.7;color:var(--tx2)}

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

.site-head{border-bottom:1px solid rgba(216,219,223,.14)}
.site-head .wrap{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:14px 28px;
  padding-top:22px;
  padding-bottom:22px;
}
.brand{
  font-size:15px;
  letter-spacing:.28em;
  color:var(--tx);
  text-decoration:none;
}
.brand:hover{color:var(--ac)}
.site-head nav ul{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:8px 22px;
  margin:0;
  padding:0;
}
.site-head nav a{
  font-size:12px;
  letter-spacing:.16em;
  color:var(--tx2);
  text-decoration:none;
  padding-bottom:3px;
  border-bottom:1px solid transparent;
}
.site-head nav a:hover{color:var(--tx);border-bottom-color:var(--ac)}
.site-head nav a[aria-current="page"]{color:var(--tx);border-bottom-color:var(--ac)}

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

.hero{padding:78px 0 24px}
.hero-rule{
  grid-column:1 / 2;
  position:relative;
  border-left:1px solid rgba(216,219,223,.3);
  min-height:100%;
}
.hero-rule::before,.hero-rule::after{
  content:"";
  position:absolute;
  left:-6px;
  width:13px;
  height:1px;
  background:var(--ac);
}
.hero-rule::before{top:0}
.hero-rule::after{bottom:0}

.hero-main{grid-column:2 / 10}

.dimline{display:flex;align-items:center;gap:16px;margin:34px 0 30px}
.dimline .seg{flex:1;height:1px;background:rgba(216,219,223,.3);position:relative}
.dimline .seg::before{content:"";position:absolute;top:-5px;width:1px;height:11px;background:var(--ac)}
.dimline .seg-l::before{left:0}
.dimline .seg-r::before{right:0}
.dim-label{font-size:11px;letter-spacing:.24em;color:var(--tx2)}

.hero-intro{grid-column:2 / 8;margin-top:0}

/* ---------- imagen principal ---------- */

.fig-main{grid-column:1 / 8;margin:0}
.fig-main img{width:100%}
.fig-note{
  grid-column:9 / 13;
  position:relative;
  padding-left:18px;
  align-self:start;
  margin-top:6px;
}
.fig-note::before{
  content:"";
  position:absolute;
  left:calc(-1 * var(--gut) - 6px);
  top:12px;
  width:calc(var(--gut) + 20px);
  height:1px;
  background:var(--ac2);
}
.fig-note .tick-label{
  display:block;
  font-size:11px;
  letter-spacing:.22em;
  color:var(--ac2);
  margin-bottom:10px;
}
.fig-note p{font-size:14px;line-height:1.7;color:var(--tx2)}

/* ---------- bloques de texto ---------- */

.col7{grid-column:1 / 8}
.col9{grid-column:1 / 10}
.col6{grid-column:1 / 7}
.side{grid-column:9 / 13;align-self:start}

.sep{
  border:0;
  height:1px;
  background:rgba(216,219,223,.16);
  position:relative;
  margin:0;
}
.sep::after{
  content:"";
  position:absolute;
  left:0;
  top:1px;
  height:3px;
  width:16.6%;
  background:var(--ac);
}

/* listas */
ul.list{list-style:none;margin:8px 0 22px;padding:0}
ul.list li{position:relative;padding-left:26px;margin-bottom:12px}
ul.list li::before{
  content:"";
  position:absolute;
  left:0;
  top:14px;
  width:13px;
  height:1px;
  background:var(--ac);
}
ol.steps{margin:8px 0 22px;padding-left:24px}
ol.steps li{margin-bottom:12px;padding-left:6px}
ol.steps li::marker{font-family:var(--mono);color:var(--ac2);font-size:14px}

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

.contrast{background:var(--bg-contrast);color:var(--tx-dark)}
.contrast h2{color:var(--tx-dark)}
.contrast h3{color:#1f6f5e}
.contrast .eyebrow{color:#5d6168}
.contrast .eyebrow .num{color:#1f6f5e}
.contrast a{color:#8a5a12}
.contrast ul.list li::before{background:#8a5a12}
.contrast .sep{background:rgba(20,22,26,.2)}

.fig-detail{grid-column:2 / 7;margin:0}
.fig-detail img{width:100%}
.fig-detail figcaption{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#5d6168;
  margin-top:12px;
  line-height:1.6;
}
.contrast-text{grid-column:8 / 13;align-self:center}

/* ---------- páginas internas: composición About ---------- */

.ruled{
  grid-column:1 / 10;
  position:relative;
  border-left:1px solid rgba(216,219,223,.28);
  padding-left:32px;
}
.ruled .block{position:relative;padding-bottom:34px}
.ruled .block::before{
  content:"";
  position:absolute;
  left:-32px;
  top:14px;
  width:18px;
  height:1px;
  background:var(--ac);
}
.ruled .block h2{margin-bottom:16px}
.ruled .block:last-child{padding-bottom:0}

.page-head{padding:64px 0 8px}
.page-head h1{grid-column:1 / 10}
.page-head .eyebrow{grid-column:1 / 10}
.page-head .lead{grid-column:1 / 8;margin-top:26px}

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

.site-foot{
  border-top:1px solid rgba(216,219,223,.22);
  margin-top:0;
  padding-top:4px;
}
.site-foot .rule2{
  height:3px;
  width:16.6%;
  background:var(--ac);
  margin:0;
}
.foot-inner{padding:56px 0 28px}
.foot-brand{grid-column:1 / 6}
.foot-brand .brand-lg{
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:.24em;
  font-size:22px;
  display:block;
  margin-bottom:16px;
}
.foot-brand p{font-size:14px;line-height:1.7;color:var(--tx2)}
.foot-nav{grid-column:7 / 10}
.foot-contact{grid-column:10 / 13}
.foot-col h2{
  font-size:11px;
  letter-spacing:.22em;
  color:var(--ac2);
  margin-bottom:16px;
}
.foot-col ul{list-style:none;margin:0;padding:0}
.foot-col li{margin-bottom:10px;font-size:14px}
.foot-col a{color:var(--tx2);text-decoration:none;border-bottom:1px solid transparent;font-size:14px}
.foot-col a:hover{color:var(--ac);border-bottom-color:var(--ac)}
.foot-col a.mail{color:var(--ac);text-decoration:underline;text-underline-offset:3px}
.foot-bottom{
  border-top:1px solid rgba(216,219,223,.14);
  padding:18px 0 44px;
}
.foot-bottom p{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--tx2);
  margin:0;
}

/* ---------- responsive ---------- */

@media (max-width:960px){
  .hero-main{grid-column:2 / 13}
  .hero-intro{grid-column:2 / 13}
  .fig-main{grid-column:1 / 10}
  .fig-note{grid-column:10 / 13}
  .col7,.col6{grid-column:1 / 11}
  .col9,.ruled{grid-column:1 / 13}
  .side{grid-column:1 / 13;margin-top:26px}
  .fig-detail{grid-column:1 / 7}
  .contrast-text{grid-column:7 / 13}
  .foot-brand{grid-column:1 / 7}
  .foot-nav{grid-column:7 / 10}
  .foot-contact{grid-column:10 / 13}
}

@media (max-width:760px){
  body{font-size:16px;line-height:1.72}
  .wrap{padding:0 20px}
  .grid{grid-template-columns:1fr;column-gap:0}
  .hero{padding:48px 0 16px}
  .s-a{padding:48px 0}
  .s-b{padding:52px 0}
  .s-c{padding:56px 0}
  .hero-rule{display:none}
  .hero-main,.hero-intro,.fig-main,.fig-note,.col6,.col7,.col9,.side,
  .fig-detail,.contrast-text,.ruled,
  .foot-brand,.foot-nav,.foot-contact,
  .page-head h1,.page-head .eyebrow,.page-head .lead{grid-column:1 / -1}
  .h1-b{padding-left:0}
  .fig-note{margin-top:22px;padding-left:0}
  .fig-note::before{position:static;display:block;width:52px;margin-bottom:14px}
  .lead{font-size:17px}
  .ruled{padding-left:20px}
  .ruled .block::before{left:-20px;width:12px}
  .sep::after{width:34%}
  .site-foot .rule2{width:34%}
  .foot-nav,.foot-contact{margin-top:34px}
  .fig-detail{margin-bottom:30px}
  .page-head{padding:44px 0 4px}
}