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

:root{
  --bg:#1a1d15;
  --bg-alt:#22261c;
  --paper:#efeade;
  --fg:#e8e4d6;
  --muted:#909486;
  --copper:#c07c3a;
  --olive:#8fa26a;
  --serif:Georgia,'Times New Roman',serif;
  --sans:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --step:84px;
}

*{box-sizing:border-box;}

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

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

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

.wrap{
  max-width:1180px;
  margin:0 auto;
  padding:0 28px;
}

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

.col-a{grid-column:1 / 8;}
.col-b{grid-column:2 / 9;}
.col-c{grid-column:3 / 10;}
.col-d{grid-column:4 / 11;}

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

h1,h2,h3{font-family:var(--serif);font-weight:400;text-transform:none;}

h1{
  font-size:clamp(2rem,5.1vw,3.4rem);
  line-height:1.14;
  margin:0;
  letter-spacing:-0.01em;
}

h2{
  font-size:clamp(1.5rem,2.8vw,2.05rem);
  line-height:1.24;
  margin:0 0 18px;
}

h3{
  font-style:italic;
  font-size:1.16rem;
  line-height:1.4;
  margin:34px 0 10px;
}

p{margin:0 0 19px;}

p.lead{font-size:1.12rem;line-height:1.66;}

.label{
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--olive);
  margin:0 0 14px;
  display:block;
}

.note{color:var(--muted);font-size:14.5px;line-height:1.62;}

a{color:var(--copper);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
a:hover{text-decoration-thickness:2px;}

:focus-visible{outline:2px solid var(--copper);outline-offset:3px;}

/* ---------- cruces de registro ---------- */

.mark{
  display:block;
  width:20px;
  height:20px;
  position:relative;
  border:1px solid rgba(143,162,106,.5);
  border-radius:50%;
}
.mark::before,.mark::after{content:"";position:absolute;background:var(--olive);}
.mark::before{left:50%;top:-7px;width:1px;height:calc(100% + 14px);transform:translateX(-50%);}
.mark::after{top:50%;left:-7px;height:1px;width:calc(100% + 14px);transform:translateY(-50%);}
.mark--copper{border-color:rgba(192,124,58,.55);}
.mark--copper::before,.mark--copper::after{background:var(--copper);}

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

.site-head{padding:26px 0 0;}
.site-head .grid{align-items:baseline;row-gap:10px;}

.brand{
  grid-column:1 / 4;
  font-family:var(--serif);
  font-size:1.4rem;
  letter-spacing:.02em;
  color:var(--fg);
  text-decoration:none;
}
.brand:hover{color:var(--copper);}

.site-nav{grid-column:5 / 13;}
.site-nav ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:flex-end;
}
.site-nav a{
  font-size:13px;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--fg);
  text-decoration:none;
  padding-bottom:3px;
  border-bottom:1px solid transparent;
}
.site-nav a:hover,.site-nav a[aria-current="page"]{border-bottom-color:var(--copper);color:var(--copper);}

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

.band{padding:var(--step) 0;}
.band--alt{background:var(--bg-alt);}
.band--tight{padding:calc(var(--step) * .6) 0 var(--step);}

.sep{
  position:relative;
  height:8px;
  margin:0 0 30px;
  border:0;
}
.sep::before,.sep::after{content:"";position:absolute;height:2px;top:0;left:0;width:100%;}
.sep::before{background:var(--copper);}
.sep::after{background:var(--olive);top:6px;left:24px;width:calc(100% - 24px);}

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

.hero{padding:58px 0 0;}
.hero-frame{
  position:relative;
  border-top:1px solid rgba(232,228,214,.18);
  border-bottom:1px solid rgba(232,228,214,.18);
  padding:52px 0 46px;
}
.hero-frame .mark{position:absolute;}
.hero-frame .m-tl{top:-10px;left:-10px;}
.hero-frame .m-tr{top:-10px;right:-10px;}
.hero-frame .m-bl{bottom:-10px;left:-10px;}
.hero-frame .m-br{bottom:-10px;right:-10px;}

.hero h1{grid-column:1 / 10;}
.hero h1 .row2{position:relative;display:inline-block;}
.hero h1 .row2::after{
  content:"";
  position:absolute;
  left:-2px;right:-2px;
  bottom:.20em;
  height:2px;
  background:var(--copper);
}

.hero-body{margin-top:44px;row-gap:34px;}
.hero-body .intro{grid-column:1 / 6;}
.hero-body .topics{grid-column:8 / 12;}

ul.squares{list-style:none;margin:0;padding:0;}
ul.squares li{
  position:relative;
  padding-left:20px;
  margin-bottom:9px;
  font-size:15.5px;
  line-height:1.6;
}
ul.squares li::before{
  content:"";
  position:absolute;
  left:0;top:.62em;
  width:7px;height:7px;
  background:var(--copper);
}
ul.squares.olive li::before{background:var(--olive);}

/* ---------- imágenes ---------- */

.figure-main{grid-column:3 / 11;position:relative;margin:0;}
.figure-main .shot{position:relative;display:block;}
.figure-main img{display:block;width:100%;height:auto;}
.figure-main .mark{position:absolute;}
.figure-main .m-tl{top:-10px;left:-10px;}
.figure-main .m-tr{top:-10px;right:-10px;}
.figure-main .m-bl{bottom:-10px;left:-10px;}
.figure-main .m-br{bottom:-10px;right:-10px;}
figcaption{
  margin-top:16px;
  font-size:13px;
  line-height:1.55;
  color:var(--muted);
  max-width:46ch;
}

/* ---------- sección contrastada ---------- */

.paper{background:var(--paper);color:#1a1d15;}
.paper h2,.paper h3{color:#1a1d15;}
.paper .label{color:#6b7a4d;}
.paper .note{color:#5c5f52;}
.paper a{color:#9a5f24;}
.paper .sep::before{background:#9a5f24;}
.paper .sep::after{background:#6b7a4d;}
.paper ul.squares li::before{background:#9a5f24;}

.paper-grid{row-gap:38px;align-items:start;}
.paper-grid .figure-detail{grid-column:1 / 6;margin:0;}
.paper-grid .side{grid-column:7 / 13;}
.figure-detail img{display:block;width:100%;height:auto;}
.paper figcaption{color:#5c5f52;}

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

.page-head{padding:52px 0 0;}
.page-head .inner{
  grid-column:1 / 10;
  border-top:1px solid rgba(232,228,214,.18);
  padding-top:34px;
}
.page-head h1{font-size:clamp(1.8rem,4vw,2.7rem);}
.page-head p.lead{margin-top:22px;max-width:62ch;}

.doc{row-gap:calc(var(--step) * .72);align-items:start;}
.doc .rail-mark{grid-column:1 / 2;align-self:start;margin-top:14px;}
.doc .doc-sec{grid-column:3 / 10;}

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

.site-foot{
  background:var(--paper);
  color:#1a1d15;
  padding:54px 0 46px;
  margin-top:var(--step);
}
.site-foot .sep{margin-bottom:34px;}
.site-foot .sep::before{background:#9a5f24;}
.site-foot .sep::after{background:#6b7a4d;}
.site-foot .f-main{grid-column:1 / 8;}
.site-foot .f-nav{grid-column:8 / 13;}
.site-foot .f-grid{row-gap:30px;}
.site-foot .fname{font-family:var(--serif);font-size:1.35rem;margin:0 0 12px;}
.site-foot p{color:#3f4338;font-size:15px;line-height:1.65;margin:0 0 12px;}
.site-foot a{color:#9a5f24;}
.site-foot ul{list-style:none;margin:0 0 16px;padding:0;}
.site-foot li{margin-bottom:8px;font-size:15px;}
.site-foot .f-small{font-size:13px;color:#5c5f52;}

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

@media (max-width:900px){
  :root{--step:50px;}
  body{font-size:16.5px;}

  .col-a,.col-b,.col-c,.col-d{grid-column:1 / -1;}

  .brand{grid-column:1 / -1;}
  .site-nav{grid-column:1 / -1;margin-top:14px;}
  .site-nav ul{justify-content:flex-start;gap:10px 20px;}

  .hero{padding:34px 0 0;}
  .hero-frame{padding:34px 0 30px;}
  .hero h1,.hero-body .intro,.hero-body .topics{grid-column:1 / -1;}
  .hero-body{margin-top:30px;}
  .hero h1 .row2::after{bottom:.16em;height:2px;}

  .figure-main{grid-column:1 / -1;}
  .paper-grid .figure-detail,.paper-grid .side{grid-column:1 / -1;}
  .paper-grid .figure-detail{max-width:420px;}

  .page-head .inner{grid-column:1 / -1;}
  .doc .rail-mark{display:none;}
  .doc .doc-sec{grid-column:1 / -1;}

  .site-foot .f-main,.site-foot .f-nav{grid-column:1 / -1;}
}

@media (max-width:480px){
  .wrap{padding:0 20px;}
  .hero-frame .mark,.figure-main .mark{width:16px;height:16px;}
}