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

:root{
  --bg:#171514;
  --bg-alt:#201c19;
  --bg-light:#ede9e3;
  --text:#e6e1da;
  --muted:#9a9088;
  --text-dark:#171514;
  --accent:#f08a24;
  --accent2:#2f7a6e;
  --accent2-text:#3f9a8c;
  --gap:24px;
  --mono:ui-monospace,Consolas,'Liberation Mono',monospace;
  --sans:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

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

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

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  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(--accent);text-decoration:none;border-bottom:1px solid rgba(240,138,36,.45)}
a:hover{border-bottom-color:var(--accent)}
a:focus-visible,:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

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

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

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

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

.col-text{grid-column:1 / span 6}
.shift .col-text{grid-column:4 / span 6}

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

h1,h2,h3,.mono{
  font-family:var(--mono);
  text-transform:uppercase;
  font-weight:600;
}

h1{
  font-size:clamp(26px,3.4vw,40px);
  line-height:1.22;
  letter-spacing:.04em;
  margin:0;
}

h2{
  font-size:clamp(17px,1.6vw,21px);
  line-height:1.45;
  letter-spacing:.1em;
  margin:0 0 18px;
}

h3{
  font-size:14px;
  letter-spacing:.14em;
  margin:32px 0 12px;
  color:var(--text);
}

.num{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.24em;
  color:var(--accent2-text);
  margin:0 0 10px;
}

.caption{
  font-family:var(--mono);
  font-size:12px;
  line-height:1.7;
  letter-spacing:.08em;
  color:var(--muted);
  text-transform:uppercase;
  margin:0;
}

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

.sep{
  height:1px;
  background:var(--accent);
  width:calc((100% - 5 * var(--gap)) / 6 * 2 + var(--gap));
  margin:0 0 26px;
}

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

.site-header{padding:34px 0 0}

.nav-row{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:14px 32px;
  grid-column:1 / span 12;
}

.brand{
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--text);
  border:0;
}
.brand:hover{color:var(--accent)}

.site-nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:12px 30px;
}

.site-nav a{
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
  border:0;
}
.site-nav a:hover{color:var(--accent)}

.rule-nav{
  grid-column:1 / span 5;
  height:1px;
  background:var(--accent);
  margin-top:26px;
}

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

.hero{padding:56px 0 0}

.hero-title{grid-column:1 / span 7}
.hero-title .l2{display:block}
.hero-title .l1{
  display:block;
  margin-left:calc((100% - 6 * var(--gap)) / 7 * 2 + var(--gap));
}

.hero-topics{
  grid-column:10 / span 3;
  list-style:none;
  margin:6px 0 0;
  padding:0;
  border-top:1px solid rgba(154,144,136,.35);
}
.hero-topics li{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  padding:9px 0;
  border-bottom:1px solid rgba(154,144,136,.35);
}

.hero-intro{grid-column:1 / span 6;margin-top:44px}
.hero-intro .sep{margin-bottom:24px}

.hero-figure{
  grid-column:8 / span 5;
  margin:44px 0 0;
  align-self:start;
}
.hero-figure .frame{
  border:1px solid var(--accent);
  padding:8px;
}
.hero-figure img{width:100%}

.hero-caption{
  grid-column:1 / span 3;
  align-self:end;
  margin:28px 0 0;
  padding-top:14px;
  border-top:1px solid var(--accent2);
}

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

main{padding-bottom:8px}

.section{padding:64px 0}
.section--alt{background:var(--bg-alt)}

.section--light{
  background:var(--bg-light);
  color:var(--text-dark);
}
.section--light h2,.section--light h3{color:var(--text-dark)}
.section--light .caption{color:#5f574f}
.section--light .num{color:#1f5a51}
.section--light a{color:var(--text-dark);border-bottom:1px solid var(--accent)}
.section--light li::marker{color:var(--accent)}

.sec-head{grid-column:1 / span 6}
.shift .sec-head{grid-column:4 / span 6}

ul.list,ol.list{
  margin:0 0 20px;
  padding-left:20px;
}
ul.list li,ol.list li{margin:0 0 10px;padding-left:4px}
ul.list li::marker{color:var(--accent)}
ol.list li::marker{color:var(--accent2-text);font-family:var(--mono);font-size:14px}

.terms{margin:0 0 20px}
.terms dt{
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent);
  margin:22px 0 6px;
}
.section--light .terms dt{color:#1f5a51}
.terms dd{margin:0}

/* sección de contenidos / índice */
.index-list{
  grid-column:1 / span 12;
  list-style:none;
  margin:8px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  column-gap:var(--gap);
  border-top:1px solid rgba(154,144,136,.3);
}
.index-list li{
  padding:14px 0;
  border-bottom:1px solid rgba(154,144,136,.3);
  font-size:15px;
}
.index-list a{border:0;color:var(--text)}
.index-list a:hover{color:var(--accent)}
.index-list .n{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.2em;
  color:var(--accent2-text);
  display:block;
}

/* sección con imagen de detalle */
.detail-figure{grid-column:1 / span 4;margin:0}
.detail-figure img{width:100%}
.detail-figure figcaption{margin-top:12px}
.detail-text{grid-column:6 / span 6}

/* contacto */
.contact-block{grid-column:1 / span 6}
.contact-mail{
  font-family:var(--mono);
  font-size:clamp(15px,1.8vw,20px);
  letter-spacing:.06em;
  word-break:break-word;
}

/* ---------- páginas interiores ---------- */

.page{padding:56px 0 8px}
.page-title{grid-column:1 / span 8}
.page-intro{grid-column:1 / span 6;margin-top:36px}

.doc{grid-column:1 / span 6;margin-top:56px}
.doc h2{
  position:relative;
  padding-left:38px;
  margin-bottom:16px;
}
.doc h2::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:24px;
  height:1px;
  background:var(--accent);
}
.doc + .doc{margin-top:56px}

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

.site-footer{
  padding:56px 0 64px;
  background:var(--bg);
  border-top:0;
}
.rule-footer{
  grid-column:1 / span 5;
  height:1px;
  background:var(--accent);
  margin-bottom:34px;
}
.f-brand{grid-column:1 / span 5}
.f-nav{grid-column:6 / span 3}
.f-contact{grid-column:9 / span 4}

.f-brand .name{
  font-family:var(--mono);
  font-size:15px;
  letter-spacing:.3em;
  text-transform:uppercase;
  margin:0 0 14px;
}
.f-brand p{font-size:15px;color:var(--muted);margin:0}

.f-nav ul{list-style:none;margin:0;padding:0}
.f-nav li{margin:0 0 10px}
.f-nav a,.f-contact a{
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  border:0;
}
.f-nav a:hover,.f-contact a:hover{color:var(--accent)}
.f-contact .mail{
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.06em;
  text-transform:none;
  color:var(--accent);
  word-break:break-word;
}
.f-contact p{font-size:14px;line-height:1.7;color:var(--muted);margin:16px 0 0}

/* ---------- adaptativo ---------- */

@media (max-width:1000px){
  .hero-title{grid-column:1 / span 9}
  .hero-topics{grid-column:1 / span 12;margin-top:30px}
  .hero-topics li{display:inline-block;border-bottom:0;padding:6px 0;margin-right:22px}
  .hero-topics{border-top:1px solid rgba(154,144,136,.35);border-bottom:1px solid rgba(154,144,136,.35);padding:6px 0}
  .hero-intro{grid-column:1 / span 7}
  .hero-figure{grid-column:8 / span 5}
  .hero-caption{grid-column:1 / span 5}
  .index-list{grid-template-columns:repeat(2,1fr)}
  .detail-figure{grid-column:1 / span 5}
  .detail-text{grid-column:7 / span 6}
  .page-title{grid-column:1 / span 11}
  .col-text,.sec-head,.shift .col-text,.shift .sec-head,
  .page-intro,.doc,.contact-block{grid-column:1 / span 8}
  .f-brand{grid-column:1 / span 12}
  .f-nav{grid-column:1 / span 6;margin-top:30px}
  .f-contact{grid-column:7 / span 6;margin-top:30px}
}

@media (max-width:760px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  .grid{grid-template-columns:1fr;column-gap:0}
  .nav-row,.rule-nav,.hero-title,.hero-topics,.hero-intro,.hero-figure,
  .hero-caption,.col-text,.sec-head,.shift .col-text,.shift .sec-head,
  .index-list,.detail-figure,.detail-text,.contact-block,
  .page-title,.page-intro,.doc,.rule-footer,.f-brand,.f-nav,.f-contact{
    grid-column:1;
  }
  .hero{padding-top:40px}
  .hero-title .l1{margin-left:0}
  .hero-figure{margin-top:32px;max-width:420px}
  .hero-caption{margin-top:16px;align-self:start}
  .section{padding:40px 0}
  .sep{width:120px}
  .index-list{grid-template-columns:1fr}
  .detail-figure{max-width:340px;margin-bottom:30px}
  .site-footer{padding:40px 0 48px}
  .f-nav,.f-contact{margin-top:28px}
  .page{padding-top:40px}
  .doc,.doc + .doc{margin-top:40px}
  .site-nav ul{gap:10px 22px}
}