/* Skegutru — hoja de estilo común */

:root{
  --paper:#ffffff;
  --band:#eef0f3;
  --ink:#0b0c10;
  --muted:#565c66;
  --ultra:#1b2ecc;
  --coral:#ff4e36;
  --serif:Georgia,'Times New Roman',serif;
  --sans:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --gap:24px;
}

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

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

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

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

a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--coral);}
a:hover{color:var(--coral);}
a:focus-visible,button:focus-visible{outline:2px solid var(--coral);outline-offset:3px;}

h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.05;margin:0;}
h1{font-size:clamp(2.35rem,5.6vw,4.3rem);letter-spacing:-.01em;}
h2{font-size:clamp(1.45rem,2.5vw,2.05rem);}
h3{font-size:clamp(1.12rem,1.7vw,1.32rem);line-height:1.2;}

p{margin:0 0 1.15em;}
p:last-child{margin-bottom:0;}

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

.wrap{width:min(1200px,100% - 8vw);margin-inline:auto;}

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

.c7{grid-column:1 / 8;}
.c9{grid-column:1 / 10;}
.c6{grid-column:1 / 7;}

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

.site-head{border-bottom:1px solid rgba(11,12,16,.16);}
.head-inner{
  display:flex;flex-wrap:wrap;align-items:baseline;
  gap:16px 32px;padding:20px 0 18px;
}
.brand{
  font-family:var(--serif);font-size:1.32rem;letter-spacing:.01em;
  border:0;color:var(--ink);
}
.brand:hover{color:var(--coral);}
.site-nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px 26px;margin:0;padding:0;}
.site-nav a{font-size:.94rem;border-bottom:1px solid transparent;padding-bottom:2px;color:var(--muted);}
.site-nav a:hover{color:var(--ink);border-bottom-color:var(--coral);}
.site-nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--coral);}

/* ---------- portada: hero ---------- */

.hero{padding:76px 0 12px;}
.hero-inner{position:relative;padding-left:34px;}
.hero-inner::before{
  content:"";position:absolute;left:0;top:6px;bottom:22px;
  width:1px;background:var(--ultra);
}
.hero-inner::after{
  content:"";position:absolute;left:-7px;top:6px;width:15px;height:1px;
  background:var(--ultra);
}
.hero-tick-b{position:absolute;left:-7px;bottom:22px;width:15px;height:1px;background:var(--ultra);}

.hero-title{grid-column:1 / 9;}
.hero-title .l2{display:block;margin-left:12.5%;}

.dimline{
  grid-column:1 / 9;display:flex;align-items:center;gap:14px;
  margin:34px 0 30px;color:var(--ultra);
}
.dimline .tick{flex:0 0 auto;width:1px;height:13px;background:var(--ultra);}
.dimline .rule{flex:1 1 auto;height:1px;background:var(--ultra);}
.dimline .dim-label{
  flex:0 1 auto;font-size:13px;line-height:1.4;color:var(--ultra);
}

.hero-intro{grid-column:1 / 7;color:var(--ink);}

/* ---------- figura principal ---------- */

.figure-main{margin:44px 0 0;}
.figure-main img{grid-column:1 / 8;width:100%;}
.figure-main figcaption{
  grid-column:9 / 13;position:relative;align-self:end;
  font-size:13px;line-height:1.55;color:var(--muted);padding-bottom:6px;
}
.figure-main figcaption::before{
  content:"";position:absolute;left:calc(-1 * var(--gap));top:.75em;
  width:var(--gap);height:1px;background:var(--ultra);
}

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

.sec{padding:72px 0;}
.sec--band{background:var(--band);}
.sec--tall{padding:88px 0;}
.sec--taller{padding:104px 0;}

.sec-head{margin-bottom:22px;}
.num{
  display:block;font-family:var(--sans);font-size:13px;letter-spacing:.06em;
  color:var(--ultra);margin-bottom:10px;
}

.sep{position:relative;height:0;border-top:1px solid rgba(11,12,16,.2);margin:0 0 26px;}
.sep::after{
  content:"";position:absolute;left:0;top:0;height:3px;
  width:calc(16.66% - 8px);background:var(--coral);
}

.lede{font-size:1.06rem;}

.list{list-style:none;margin:22px 0 0;padding:0;}
.list li{position:relative;padding-left:22px;margin-bottom:12px;}
.list li::before{
  content:"";position:absolute;left:0;top:.78em;width:9px;height:1px;background:var(--coral);
}
.list li:last-child{margin-bottom:0;}

.sub{margin-top:30px;}
.sub h3{margin-bottom:8px;}

.caption{font-size:13px;line-height:1.55;color:var(--muted);}

/* ---------- sección de contraste ---------- */

.sec--ultra{background:var(--ultra);color:#fff;padding:104px 0;}
.sec--ultra h2,.sec--ultra h3{color:#fff;}
.sec--ultra .num{color:#fff;opacity:.72;}
.sec--ultra .sep{border-top-color:rgba(255,255,255,.4);}
.sec--ultra .sep::after{background:var(--coral);}
.sec--ultra a{color:#fff;}
.sec--ultra .list li::before{background:var(--coral);}

.ultra-grid{align-items:start;row-gap:32px;}
.ultra-figure{grid-column:2 / 6;margin:0;}
.ultra-figure img{width:100%;}
.ultra-figure figcaption{font-size:13px;line-height:1.55;color:rgba(255,255,255,.82);margin-top:12px;}
.ultra-text{grid-column:7 / 13;}

/* ---------- página "sobre el proyecto" ---------- */

.spine{position:relative;padding-left:30px;}
.spine::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--ultra);
}
.spine .block{position:relative;margin-bottom:46px;}
.spine .block:last-child{margin-bottom:0;}
.spine .block::before{
  content:"";position:absolute;left:-30px;top:.7em;width:16px;height:1px;background:var(--ultra);
}
.spine .block h2{margin-bottom:14px;}

.page-head{padding:60px 0 34px;}
.page-head h1{grid-column:1 / 10;}
.page-head .kicker{
  grid-column:1 / 10;font-size:13px;color:var(--ultra);margin:0 0 16px;
}
.page-head .page-intro{grid-column:1 / 8;margin-top:26px;color:var(--muted);}

.prose h2{margin:0 0 14px;}
.prose section{margin-bottom:44px;}
.prose section:last-child{margin-bottom:0;}

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

.site-foot{margin-top:0;padding-top:0;}
.foot-rule{border-top:1px solid rgba(11,12,16,.2);position:relative;}
.foot-rule::after{
  content:"";position:absolute;left:0;top:3px;height:3px;
  width:calc(16.66% - 8px);background:var(--ultra);
}
.foot-inner{padding:52px 0 30px;row-gap:36px;}
.foot-brand{grid-column:1 / 7;}
.foot-brand .foot-name{font-family:var(--serif);font-size:1.9rem;line-height:1.1;margin:0 0 12px;}
.foot-brand p{font-size:.95rem;color:var(--muted);max-width:44ch;}
.foot-col{grid-column:span 3;}
.foot-col h2{font-family:var(--sans);font-size:13px;line-height:1.4;color:var(--ultra);margin:0 0 14px;font-weight:400;}
.foot-col ul{list-style:none;margin:0;padding:0;}
.foot-col li{margin-bottom:9px;font-size:.95rem;}
.foot-col a{border-bottom:1px solid transparent;color:var(--muted);}
.foot-col a:hover{color:var(--coral);border-bottom-color:var(--coral);}
.foot-col a.mail{color:var(--ink);border-bottom-color:var(--coral);}
.foot-bottom{border-top:1px solid rgba(11,12,16,.16);padding:16px 0 42px;font-size:13px;color:var(--muted);}

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

@media (max-width:1000px){
  .hero-title{grid-column:1 / 11;}
  .hero-intro{grid-column:1 / 10;}
  .dimline{grid-column:1 / 11;}
  .figure-main img{grid-column:1 / 10;}
  .figure-main figcaption{grid-column:10 / 13;}
  .ultra-figure{grid-column:1 / 6;}
  .ultra-text{grid-column:6 / 13;}
  .c7,.c9,.c6{grid-column:1 / 11;}
  .page-head h1,.page-head .kicker,.page-head .page-intro{grid-column:1 / 12;}
  .foot-brand{grid-column:1 / 8;}
  .foot-col{grid-column:span 5;}
}

@media (max-width:720px){
  body{font-size:16.5px;}
  .wrap{width:min(1200px,100% - 10vw);}
  .grid{grid-template-columns:1fr;}
  .hero{padding:44px 0 4px;}
  .hero-inner{padding-left:22px;}
  .hero-title,.hero-intro,.dimline,
  .figure-main img,.figure-main figcaption,
  .ultra-figure,.ultra-text,
  .c7,.c9,.c6,
  .page-head h1,.page-head .kicker,.page-head .page-intro,
  .foot-brand,.foot-col{grid-column:1;}
  .hero-title .l2{margin-left:0;}
  .dimline{margin:26px 0 24px;}
  .figure-main{row-gap:16px;margin-top:32px;}
  .figure-main figcaption{padding-left:20px;padding-bottom:0;}
  .figure-main figcaption::before{left:0;top:.75em;width:12px;}
  .ultra-figure{max-width:340px;}
  .sec,.sec--tall,.sec--taller,.sec--ultra{padding:48px 0;}
  .sec--ultra{padding:56px 0;}
  .foot-inner{row-gap:28px;padding-top:40px;}
  .sep::after{width:38%;}
  .foot-rule::after{width:38%;}
  .site-nav ul{gap:8px 20px;}
  .spine{padding-left:20px;}
  .spine .block::before{left:-20px;width:12px;}
}