/* Birveme — hoja de estilos general */

:root{
  --paper:#f4eee1;
  --paper-alt:#e8dfcc;
  --ink:#1a1814;
  --muted:#736c5b;
  --blue:#2b4a8c;
  --ochre:#8a6a1e;
  --dark:#141414;
  --gap:24px;
}

*{box-sizing:border-box}

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

body{
  margin:0;
  background:var(--paper);
  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%;height:auto;display:block}

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

.wrap{max-width:1160px;margin:0 auto;padding:0 24px}

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

.c4{grid-column:1 / span 4}
.c5{grid-column:1 / span 5}
.c6{grid-column:1 / span 6}
.c7{grid-column:1 / span 7}
.c8{grid-column:1 / span 8}
.c9{grid-column:1 / span 9}
.c12{grid-column:1 / -1}

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

h1,h2,h3{margin:0;line-height:1.12}

h1{
  font-size:clamp(38px,6.2vw,72px);
  font-weight:700;
  letter-spacing:-0.03em;
}
h1 .h1-line2{display:block;margin-left:8.33%}

h2{
  font-size:clamp(24px,3vw,32px);
  font-weight:700;
  letter-spacing:-0.01em;
  margin-bottom:18px;
}

h3{
  font-size:19px;
  font-weight:700;
  margin:28px 0 10px;
}

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

.lead{font-size:20px;line-height:1.6}

.num{
  display:block;
  font-size:13px;
  line-height:1.4;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ochre);
  margin-bottom:10px;
}

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

.list{margin:0 0 18px;padding-left:0;list-style:none}
.list li{position:relative;padding-left:22px;margin-bottom:9px}
.list li::before{
  content:"";
  position:absolute;
  left:0;top:.72em;
  width:9px;height:2px;
  background:var(--blue);
}

ol.list{counter-reset:step}
ol.list li{counter-increment:step}
ol.list li::before{
  content:counter(step,decimal-leading-zero);
  width:auto;height:auto;top:0;
  background:none;
  color:var(--ochre);
  font-size:13px;
  letter-spacing:.06em;
}

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

.site-header{border-bottom:1px solid rgba(26,24,20,.18)}
.site-header .wrap{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:12px 32px;
  padding-top:20px;
  padding-bottom:20px;
}
.brand{
  font-size:20px;
  font-weight:700;
  letter-spacing:-0.01em;
  color:var(--ink);
  text-decoration:none;
}
.brand:hover{text-decoration:none;color:var(--blue)}
.site-nav ul{
  display:flex;
  flex-wrap:wrap;
  gap:10px 24px;
  margin:0;padding:0;
  list-style:none;
}
.site-nav a{
  font-size:15px;
  color:var(--ink);
  text-decoration:none;
  padding-bottom:2px;
  border-bottom:1px solid transparent;
}
.site-nav a:hover{border-bottom-color:var(--blue);color:var(--blue)}
.site-nav a[aria-current="page"]{border-bottom-color:var(--ochre)}

/* ---------- ritmo de secciones ---------- */

.r72{padding:72px 0}
.r88{padding:88px 0}
.r104{padding:104px 0}
.alt{background:var(--paper-alt)}

.sep{
  position:relative;
  height:8px;
  border-top:1px solid rgba(43,74,140,.4);
  margin-bottom:34px;
}
.sep::after{
  content:"";
  position:absolute;
  left:0;top:4px;
  width:calc((100% - 11 * var(--gap)) / 12 * 2 + var(--gap));
  height:3px;
  background:var(--blue);
}

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

.hero{padding:76px 0 0}
.hero-inner{position:relative;padding-left:30px}
.dimline{
  position:absolute;
  left:0;top:4px;bottom:4px;
  width:13px;
  border-top:1px solid var(--ochre);
  border-bottom:1px solid var(--ochre);
}
.dimline::before{
  content:"";
  position:absolute;
  left:6px;top:0;bottom:0;
  width:1px;
  background:var(--ochre);
}
.hrule{
  display:flex;
  align-items:center;
  gap:18px;
  margin:38px 0 30px;
}
.hrule::before,.hrule::after{
  content:"";
  flex:1 1 auto;
  height:9px;
  border-top:1px solid var(--ochre);
}
.hrule::before{border-left:1px solid var(--ochre)}
.hrule::after{border-right:1px solid var(--ochre)}
.hrule span{
  flex:0 0 auto;
  font-size:13px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ochre);
}

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

.figmain{margin:56px 0 0}
.figmain img{grid-column:1 / span 7;width:100%}
.figmain figcaption{
  grid-column:8 / span 4;
  position:relative;
  padding-top:26px;
}
.figmain figcaption::before{
  content:"";
  position:absolute;
  left:calc(-1 * var(--gap) - 4px);
  top:14px;
  width:44px;height:1px;
  background:var(--ochre);
}

/* ---------- sección oscura ---------- */

.dark{background:var(--dark);color:var(--paper)}
.dark h2,.dark h3{color:var(--paper)}
.dark .cap{color:#b3aa96}
.dark .num{color:#c39d3f}
.dark a{color:#a9c1f0}
.dark a:focus-visible{outline-color:var(--paper)}
.dark .sep{border-top-color:rgba(244,238,225,.35)}
.dark .sep::after{background:#a9c1f0}
.dark .list li::before{background:#a9c1f0}

.detail-grid{align-items:start;row-gap:32px}
.detail-text{grid-column:1 / span 6}
.detail-fig{grid-column:8 / span 5;margin:0}
.detail-fig img{width:100%}
.detail-fig figcaption{margin-top:12px}

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

.spine{
  position:relative;
  padding-left:32px;
  border-left:1px solid rgba(138,106,30,.65);
}
.spine .block{margin-bottom:44px}
.spine .block:last-child{margin-bottom:0}
.spine .block h2{position:relative}
.spine .block h2::before{
  content:"";
  position:absolute;
  left:-32px;top:.62em;
  width:22px;height:1px;
  background:var(--ochre);
}

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

.doc h2{margin-top:44px}
.doc h2:first-of-type{margin-top:0}

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

.site-footer{
  position:relative;
  margin-top:0;
  border-top:1px solid rgba(26,24,20,.4);
  background:var(--paper-alt);
}
.site-footer::before{
  content:"";
  position:absolute;
  left:0;right:0;top:4px;
  height:1px;
  background:rgba(26,24,20,.4);
}
.footer-top{padding:52px 0 34px;row-gap:28px}
.footer-brand{grid-column:1 / span 5}
.footer-brand .fname{
  font-size:30px;
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:1.1;
  margin-bottom:12px;
}
.footer-nav{grid-column:7 / span 3}
.footer-contact{grid-column:10 / span 3}
.footer-h{
  font-size:13px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ochre);
  margin-bottom:12px;
}
.footer-nav ul{list-style:none;margin:0;padding:0}
.footer-nav li{margin-bottom:8px}
.footer-nav a{color:var(--ink);text-decoration:none;border-bottom:1px solid transparent}
.footer-nav a:hover{color:var(--blue);border-bottom-color:var(--blue)}
.footer-bottom{
  border-top:1px solid rgba(26,24,20,.22);
  padding:18px 0 40px;
}

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

@media (max-width:900px){
  .grid{grid-template-columns:repeat(6,1fr)}
  .c4,.c5,.c6,.c7,.c8,.c9,.c12{grid-column:1 / -1}
  .figmain img,.figmain figcaption,
  .detail-text,.detail-fig,
  .footer-brand,.footer-nav,.footer-contact{grid-column:1 / -1}
  .figmain figcaption{padding-top:18px}
  .figmain figcaption::before{left:0;top:6px}
  .detail-fig{max-width:420px}
  .footer-top{row-gap:30px}
  .sep::after{width:140px}
}

@media (max-width:640px){
  body{font-size:16px}
  .lead{font-size:18px}
  h1 .h1-line2{margin-left:0}
  .hero{padding-top:44px}
  .hero-inner{padding-left:22px}
  .r72{padding:48px 0}
  .r88{padding:52px 0}
  .r104{padding:56px 0}
  .hrule{gap:12px;margin:28px 0 24px}
  .hrule span{font-size:12px;letter-spacing:.12em}
  .figmain{margin-top:36px}
  .spine{padding-left:22px}
  .spine .block h2::before{left:-22px;width:14px}
  .footer-brand .fname{font-size:26px}
}