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

:root{
  --bg:#eef1e8;
  --bg-alt:#e2e7dc;
  --bg-dark:#2c3a2c;
  --ink:#1f2620;
  --ink-soft:#6d7468;
  --ink-invert:#eef1e8;
  --accent:#5f7a46;
  --accent-2:#b4655a;
  --rule:#c6ceba;
  --serif:Georgia,'Times New Roman',serif;
  --sans:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --step:80px;
}

*{box-sizing:border-box}

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

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.72;
  overflow-wrap:break-word;
}

img{max-width:100%}

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

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

.wrap{
  max-width:1200px;
  margin:0 auto;
  padding:0 32px;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:24px;
}

.band{padding:var(--step) 0}
.band--alt{background:var(--bg-alt)}
.band--dark{background:var(--bg-dark);color:var(--ink-invert)}
.band--dark a{color:#cbd7bb}
.band--dark a:focus-visible{outline-color:var(--ink-invert)}

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

h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0}

h1{
  font-size:clamp(32px,4.6vw,52px);
  line-height:1.14;
  letter-spacing:-.01em;
}

h2{
  font-size:clamp(23px,2.4vw,28px);
  line-height:1.28;
  padding-top:3px;
}

h3{
  font-style:italic;
  font-size:20px;
  line-height:1.4;
  margin:36px 0 10px;
}

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

.label{
  font-family:var(--sans);
  font-size:12px;
  line-height:1.5;
  letter-spacing:.16em;
  color:var(--ink-soft);
}
.band--dark .label{color:#a9b5a1}

.lead{font-size:18px;line-height:1.66}

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

.site-header{padding:26px 0 22px;border-bottom:1px solid var(--rule)}
.site-header .wrap{align-items:baseline;row-gap:12px}

.brand{
  grid-column:1/4;
  font-family:var(--serif);
  font-size:21px;
  color:var(--ink);
  text-decoration:none;
  letter-spacing:.01em;
}
.brand:hover{text-decoration:underline;text-underline-offset:4px}

.site-nav{grid-column:4/13;display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:flex-end}
.site-nav a{
  color:var(--ink);
  text-decoration:none;
  font-size:15px;
  padding-bottom:2px;
  border-bottom:1px solid transparent;
}
.site-nav a:hover{border-bottom-color:var(--accent)}
.site-nav a[aria-current="page"]{border-bottom-color:var(--accent-2)}

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

.hero{padding:72px 0 64px}
.hero-title{grid-column:1/8}
.hero-intro{grid-column:9/13;align-self:start}
.hero-intro .label{display:block;margin-bottom:14px}

.axis{position:relative;height:104px;margin-top:38px}
.axis::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--accent);
}
.axis span{position:absolute;top:0;width:1px;background:var(--accent)}
.axis span::after{
  content:"";position:absolute;bottom:-4px;left:-3px;width:7px;height:7px;background:var(--accent);
}
.axis span:nth-child(1){left:0;height:92px}
.axis span:nth-child(2){left:26%;height:58px}
.axis span:nth-child(3){left:63%;height:34px}
.axis span:nth-child(3)::after{background:var(--accent-2)}

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

.figure-main{
  grid-column:1/13;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:24px;
  margin:0 0 var(--step);
}
.figure-main img{grid-column:4/13;width:100%;height:auto;display:block}
.figure-main figcaption{
  grid-column:1/4;
  grid-row:1;
  align-self:end;
  padding-bottom:2px;
  font-size:13px;
  line-height:1.55;
  color:var(--ink-soft);
}

/* ---------- secciones de texto ---------- */

.sec-head{grid-column:1/4}
.sec-head::before{
  content:"";display:block;width:8px;height:8px;background:var(--accent-2);margin-bottom:20px;
}
.band--dark .sec-head::before{background:#cbd7bb}
.sec-head .label{display:block;margin-top:14px}

.sec-body{grid-column:4/11}
.sec-body + .sec-head{margin-top:56px}

.list{margin:20px 0 0;padding:0;list-style:none}
.list li{position:relative;padding-left:22px;margin-bottom:12px}
.list li::before{
  content:"";position:absolute;left:0;top:11px;width:6px;height:6px;background:var(--accent);
}
.band--dark .list li::before{background:#cbd7bb}
.list li:last-child{margin-bottom:0}

.list--num{counter-reset:paso}
.list--num li{padding-left:34px}
.list--num li::before{
  counter-increment:paso;
  content:counter(paso,decimal-leading-zero);
  background:none;
  top:0;
  width:auto;height:auto;
  font-size:12px;
  letter-spacing:.1em;
  color:var(--accent-2);
}

.note{
  margin-top:26px;
  padding-top:18px;
  border-top:1px solid var(--rule);
  font-size:15px;
  color:var(--ink-soft);
}
.band--dark .note{border-top-color:#4b5a49;color:#a9b5a1}

/* ---------- sección oscura con imagen de detalle ---------- */

.detail-figure{grid-column:1/6;margin:0}
.detail-figure img{width:100%;height:auto;display:block}
.detail-figure figcaption{margin-top:12px;font-size:13px;line-height:1.55;color:#a9b5a1}
.detail-text{grid-column:7/13}
.detail-head{margin-bottom:24px}
.detail-head::before{
  content:"";display:block;width:8px;height:8px;background:#cbd7bb;margin-bottom:20px;
}
.detail-head .label{display:block;margin-top:12px}

/* ---------- página About ---------- */

.about-grid{row-gap:0}
.about-head{grid-column:1/4;padding-bottom:44px}
.about-body{
  grid-column:4/11;
  border-left:1px solid var(--rule);
  padding:0 0 44px 32px;
}
.about-head:last-of-type,.about-body:last-of-type{padding-bottom:0}
.about-body:last-of-type{padding-bottom:6px}

/* ---------- páginas legales ---------- */

.page-head{padding:64px 0 44px}
.page-head h1{grid-column:1/9}
.page-head .label{grid-column:1/9;display:block;margin-bottom:16px}

.doc{grid-column:1/9}
.doc h2{margin:44px 0 12px}
.doc h2:first-child{margin-top:0}

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

.site-footer{background:var(--bg-dark);color:var(--ink-invert);padding:56px 0 48px}
.site-footer a{color:#cbd7bb}
.site-footer a:focus-visible{outline-color:var(--ink-invert)}

.foot-name{
  grid-column:1/7;
  font-family:var(--serif);
  font-size:26px;
  line-height:1.2;
}
.foot-mail{grid-column:7/13;justify-self:end;align-self:center;font-size:17px}
.foot-rule{grid-column:1/13;height:1px;background:#4b5a49;margin:26px 0 24px}
.foot-nav{grid-column:1/9;display:flex;flex-wrap:wrap;gap:10px 26px;font-size:15px}
.foot-note{grid-column:1/9;margin-top:22px;font-size:14px;line-height:1.6;color:#a9b5a1}

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

@media (max-width:1000px){
  .hero-title{grid-column:1/9}
  .hero-intro{grid-column:9/13}
  .sec-body{grid-column:4/12}
  .about-body{grid-column:4/12}
  .doc,.page-head h1,.page-head .label{grid-column:1/11}
}

@media (max-width:820px){
  :root{--step:48px}
  body{font-size:16px}
  .wrap{padding:0 20px;column-gap:16px}
  .site-header{padding:20px 0 16px}
  .brand{grid-column:1/13}
  .site-nav{grid-column:1/13;justify-content:flex-start;gap:8px 20px;margin-top:8px}
  .hero{padding:44px 0 40px}
  .hero-title,.hero-intro{grid-column:1/13}
  .hero-intro{margin-top:28px}
  .axis{height:66px;margin-top:26px}
  .axis span:nth-child(1){height:56px}
  .axis span:nth-child(2){height:38px}
  .axis span:nth-child(3){height:24px}
  .figure-main img{grid-column:1/13}
  .figure-main figcaption{grid-column:1/13;grid-row:2;margin-top:12px;align-self:start}
  .sec-head,.sec-body{grid-column:1/13}
  .sec-head{margin-bottom:18px}
  .sec-body + .sec-head{margin-top:44px}
  .sec-head::before{margin-bottom:14px}
  .detail-figure,.detail-text{grid-column:1/13}
  .detail-text{margin-top:32px}
  .about-head,.about-body{grid-column:1/13}
  .about-head{padding-bottom:16px}
  .about-body{border-left:0;padding:0 0 40px 0}
  .doc,.page-head h1,.page-head .label{grid-column:1/13}
  .page-head{padding:40px 0 28px}
  .foot-name,.foot-mail,.foot-nav,.foot-note{grid-column:1/13}
  .foot-mail{justify-self:start;margin-top:8px}
  .site-footer{padding:44px 0 40px}
}