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

:root{
  --bg:#f7f3ea;
  --bg-alt:#ece6d8;
  --bg-dark:#1c2a22;
  --ink:#221f19;
  --ink-soft:#786f60;
  --ink-inv:#f7f3ea;
  --green:#2f5c44;
  --ocre:#a8722c;
  --serif:Georgia,'Times New Roman',serif;
  --sans:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --gap:28px;
}

*{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.8;
  overflow-x:hidden;
}

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

a{color:var(--green);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(--green);outline-offset:3px;}

/* ---------- estructura ---------- */

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

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

.c3{grid-column:span 3;}
.c4{grid-column:span 4;}
.c5{grid-column:span 5;}
.c6{grid-column:span 6;}
.c7{grid-column:span 7;}

.mid6{grid-column:4 / span 6;}
.mid8{grid-column:3 / span 8;}
.left7{grid-column:1 / span 7;}
.left4{grid-column:2 / span 4;}
.right4{grid-column:8 / span 4;}
.right5{grid-column:8 / span 5;}
.leftimg{grid-column:1 / span 5;}
.rightcol{grid-column:7 / span 6;}

/* eje vertical */
.axis{position:relative;}
.axis::before{
  content:"";
  position:absolute;
  top:0;bottom:0;left:50%;
  width:1px;
  background:var(--ocre);
  opacity:.45;
}

/* ritmo de secciones */
.r1{padding:64px 0;}
.r2{padding:80px 0;}
.r3{padding:96px 0;}
.r4{padding:64px 0;}

.alt{background:var(--bg-alt);}
.dark{background:var(--bg-dark);color:var(--ink-inv);}
.dark a{color:#cbe0d1;}
.dark .num{color:#c9a06a;}
.dark .cap{color:#a9b5ad;}

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

h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;}

h1{
  font-size:clamp(2.15rem,5vw,3.6rem);
  line-height:1.05;
  margin:0 0 28px;
  text-align:center;
}
h1 .l{display:block;}

h2{
  font-size:clamp(1.5rem,2.7vw,2.1rem);
  line-height:1.15;
  margin:0 0 18px;
}

h3{
  font-size:1.12rem;
  line-height:1.3;
  margin:0 0 10px;
}

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

.lead{font-size:1.08rem;}

.num{
  display:block;
  font-family:var(--sans);
  font-size:13px;
  line-height:1;
  color:var(--ocre);
  margin-bottom:14px;
  letter-spacing:.06em;
}

.cap{
  font-size:13px;
  line-height:1.6;
  color:var(--ink-soft);
  margin:0;
}

.center{text-align:center;}

/* listas */
ul.check,ul.plain{list-style:none;padding:0;margin:0 0 20px;}
ul.check li,ul.plain li{
  position:relative;
  padding-left:22px;
  margin-bottom:12px;
}
ul.check li::before{
  content:"";
  position:absolute;
  left:0;top:.72em;
  width:9px;height:1px;
  background:var(--green);
}
ul.plain li::before{
  content:"";
  position:absolute;
  left:0;top:.6em;
  width:6px;height:6px;
  border:1px solid var(--ocre);
  border-radius:50%;
}
.dark ul.check li::before{background:#9dc4ab;}

ol.steps{padding-left:0;margin:0 0 20px;list-style:none;counter-reset:s;}
ol.steps li{
  counter-increment:s;
  position:relative;
  padding-left:34px;
  margin-bottom:14px;
}
ol.steps li::before{
  content:counter(s,decimal-leading-zero);
  position:absolute;left:0;top:.15em;
  font-size:13px;
  color:var(--ocre);
}

dl.terms{margin:0;}
dl.terms dt{font-family:var(--serif);font-size:1.08rem;margin-top:20px;}
dl.terms dd{margin:6px 0 0;color:var(--ink);}

/* separador en arco */
.arc{
  grid-column:5 / span 4;
  height:34px;
  border-top:1px solid var(--ocre);
  border-radius:200px 200px 0 0;
  opacity:.7;
}

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

.site-head{
  border-bottom:1px solid rgba(120,111,96,.28);
  background:var(--bg);
}
.head-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:10px 26px;
  padding-top:20px;
  padding-bottom:20px;
  text-align:center;
}
.brand{
  font-family:var(--serif);
  font-size:1.35rem;
  letter-spacing:.02em;
  color:var(--ink);
  text-decoration:none;
}
.brand:hover{color:var(--green);}

.nav{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px 18px;
  margin:0;padding:0;
  font-size:15px;
}
.nav a{color:var(--ink);text-decoration:none;}
.nav a:hover{color:var(--green);text-decoration:underline;text-underline-offset:4px;}
.nav li+li{position:relative;padding-left:18px;}
.nav li+li::before{
  content:"";
  position:absolute;left:0;top:.7em;
  width:5px;height:1px;background:var(--ocre);
}

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

.hero{padding:80px 0 0;}
.hero .grid{row-gap:26px;}
.hero-side p{font-size:15px;line-height:1.7;color:var(--ink-soft);}
.hero-side h2{
  font-family:var(--sans);
  font-size:13px;
  line-height:1.4;
  letter-spacing:.06em;
  color:var(--ocre);
  margin:0 0 8px;
}

.figure-main{
  margin:56px auto 0;
  max-width:680px;
  text-align:center;
}
.figure-main img{margin:0 auto;width:100%;}
.figure-main figcaption{margin-top:14px;}

.figure-detail{margin:0;}
.figure-detail img{width:100%;}
.figure-detail figcaption{margin-top:12px;color:#a9b5ad;font-size:13px;line-height:1.6;}

/* ---------- páginas internas ---------- */

.page-head{padding:72px 0 0;}
.page-head h1{margin-bottom:22px;}
.page-head .cap{text-align:center;}

.pair{border-top:1px solid rgba(120,111,96,.3);padding-top:18px;}
.dark .pair{border-top-color:rgba(247,243,234,.25);}

.contact-box{
  border-top:1px solid var(--ocre);
  padding-top:20px;
}

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

.site-foot{
  background:var(--bg-alt);
  padding:0 0 56px;
  text-align:center;
}
.foot-arc{
  width:33%;
  max-width:360px;
  height:30px;
  margin:0 auto 32px;
  border-top:1px solid var(--ocre);
  border-radius:200px 200px 0 0;
  opacity:.7;
}
.foot-name{
  font-family:var(--serif);
  font-size:1.3rem;
  margin:0 0 16px;
}
.foot-nav{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px 16px;
  margin:0 0 18px;padding:0;
  font-size:15px;
}
.foot-nav li+li{position:relative;padding-left:16px;}
.foot-nav li+li::before{
  content:"";
  position:absolute;left:0;top:.7em;
  width:5px;height:1px;background:var(--ocre);
}
.foot-mail{margin:0 0 14px;}
.foot-note{
  max-width:560px;
  margin:0 auto;
  font-size:13px;
  line-height:1.7;
  color:var(--ink-soft);
}

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

@media (max-width:900px){
  .grid{column-gap:20px;row-gap:26px;}
  .c3,.c4,.c5,.c6,.c7,
  .mid6,.mid8,.left7,.left4,.right4,.right5,
  .leftimg,.rightcol{grid-column:1 / -1;}
  .arc{grid-column:1 / -1;width:60%;margin:0 auto;}
  .axis::before{display:none;}
  .r1,.r4{padding:40px 0;}
  .r2{padding:48px 0;}
  .r3{padding:56px 0;}
  .hero{padding:48px 0 0;}
  .page-head{padding:48px 0 0;}
  .figure-main{margin-top:36px;}
  .site-foot{padding-bottom:40px;}
  .foot-arc{width:60%;margin-bottom:26px;}
}

@media (max-width:520px){
  body{font-size:16px;}
  .wrap{padding:0 18px;}
  .head-inner{gap:8px 14px;}
  .nav{font-size:14px;gap:4px 12px;}
  .nav li+li{padding-left:12px;}
}