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

:root{
  --bg:#1d1815;
  --bg-alt:#251f1a;
  --bg-contrast:#f1ebdf;
  --tx:#eae4d8;
  --tx-soft:#9a8f82;
  --tx-dark:#1d1815;
  --ac:#c08a45;
  --ac2:#728a63;
  --step:84px;
  --gap:24px;
}

*{box-sizing:border-box;}

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

body{
  margin:0;
  background:var(--bg);
  color:var(--tx);
  font-family:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:18px;
  line-height:1.9;
  overflow-x:hidden;
}

h1,h2,h3{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  line-height:1.3;
  margin:0;
}

h1{font-size:clamp(30px,4.6vw,52px);}
h2{font-size:clamp(24px,3vw,33px);}
h3{font-size:clamp(19px,2vw,22px);}

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

a{color:var(--ac);text-decoration:none;border-bottom:1px solid rgba(192,138,69,.45);}
a:hover{border-bottom-color:var(--ac);}
a:focus-visible,
li a:focus-visible{outline:2px solid var(--ac);outline-offset:3px;border-radius:1px;}

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

/* ---------- retícula ---------- */

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

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

/* columnas de texto: 7 columnas, desplazadas una a la derecha cada vez */
.col7{grid-column:1 / span 7;}
.off1{grid-column:2 / span 7;}
.off2{grid-column:3 / span 7;}
.off3{grid-column:4 / span 7;}

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

.rm{
  display:block;
  width:16px;
  height:16px;
  position:relative;
  background:radial-gradient(circle,transparent 3.5px,var(--ac2) 3.5px,var(--ac2) 4.5px,transparent 4.6px);
}
.rm::before,.rm::after{content:"";position:absolute;background:var(--ac);}
.rm::before{left:50%;top:0;width:1px;height:100%;transform:translateX(-50%);}
.rm::after{top:50%;left:0;height:1px;width:100%;transform:translateY(-50%);}

/* ---------- separadores dobles ---------- */

.sep{margin:0;padding:0;border:0;}
.sep span{display:block;height:2px;background:var(--ac);max-width:520px;}
.sep span + span{background:var(--ac2);margin-left:24px;margin-top:6px;}

/* ---------- cabecera y navegación ---------- */

.site-head{
  border-bottom:1px solid rgba(154,143,130,.28);
  padding:22px 0;
}
.site-head .wrap{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:14px 28px;
}
.brand{
  font-family:Georgia,"Times New Roman",serif;
  font-size:23px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--tx);
  border-bottom:0;
}
.brand span{color:var(--ac2);}
.site-nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:6px 22px;
}
.site-nav a{
  font-size:15px;
  color:var(--tx-soft);
  border-bottom:1px solid transparent;
  letter-spacing:.02em;
}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--tx);border-bottom-color:var(--ac);}

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

.hero{padding:var(--step) 0 calc(var(--step) - 20px);}
.hero-frame{position:relative;padding:38px 0 34px;}
.hero-frame::before{
  content:"";
  position:absolute;
  inset:0;
  border:1px solid rgba(154,143,130,.22);
  pointer-events:none;
}
.hero-frame .rm{position:absolute;}
.hero-frame .rm:nth-of-type(1){top:-8px;left:-8px;}
.hero-frame .rm:nth-of-type(2){top:-8px;right:-8px;}
.hero-frame .rm:nth-of-type(3){bottom:-8px;left:-8px;}
.hero-frame .rm:nth-of-type(4){bottom:-8px;right:-8px;}

.hero-inner{padding:0 30px;}

.hero h1{grid-column:1 / span 9;position:relative;}
.hero h1::after{
  content:"";
  position:absolute;
  left:0;
  right:14%;
  bottom:.26em;
  height:2px;
  background:var(--ac);
  opacity:.85;
}
.hero-lead{grid-column:1 / span 5;margin-top:36px;}
.hero-lead p{font-size:19px;}
.hero-list{grid-column:7 / span 4;margin-top:40px;}
.hero-list p{
  font-size:14px;
  color:var(--ac2);
  letter-spacing:.14em;
  text-transform:uppercase;
  margin:0 0 14px;
  line-height:1.6;
}
.hero-list ul{list-style:none;margin:0;padding:0;}
.hero-list li{
  font-size:15px;
  line-height:1.65;
  color:var(--tx-soft);
  padding-left:20px;
  position:relative;
  margin-bottom:11px;
}
.hero-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:7px;
  height:7px;
  background:var(--ac);
}

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

.main-figure{margin:0;padding-bottom:var(--step);}
.fig-holder{grid-column:3 / span 8;position:relative;}
.fig-holder .rm{position:absolute;}
.fig-holder .rm:nth-of-type(1){top:-8px;left:-8px;}
.fig-holder .rm:nth-of-type(2){top:-8px;right:-8px;}
.fig-holder .rm:nth-of-type(3){bottom:-8px;left:-8px;}
.fig-holder .rm:nth-of-type(4){bottom:-8px;right:-8px;}
.fig-holder img{width:100%;aspect-ratio:3/2;object-fit:cover;}
figcaption{
  font-size:14px;
  line-height:1.6;
  color:var(--tx-soft);
  margin-top:14px;
  max-width:46ch;
}

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

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

.sec-num{
  font-size:14px;
  letter-spacing:.18em;
  color:var(--ac2);
  text-transform:uppercase;
  display:block;
  margin-bottom:12px;
}

.tsec{margin-bottom:var(--step);}
.tsec:last-child{margin-bottom:0;}
.tsec h2{margin-bottom:22px;}
.tsec .sep{margin-bottom:26px;}
.tsec h3{margin:34px 0 14px;}

ul.plain,ol.plain{padding-left:0;margin:0 0 26px;}
ul.plain{list-style:none;}
ul.plain li{
  position:relative;
  padding-left:22px;
  margin-bottom:12px;
  line-height:1.75;
}
ul.plain li::before{
  content:"";
  position:absolute;
  left:0;
  top:.66em;
  width:7px;
  height:7px;
  background:var(--ac);
}
ol.plain{list-style:none;counter-reset:s;}
ol.plain li{
  counter-increment:s;
  position:relative;
  padding-left:34px;
  margin-bottom:12px;
  line-height:1.75;
}
ol.plain li::before{
  content:counter(s,decimal-leading-zero);
  position:absolute;
  left:0;
  top:.06em;
  font-size:14px;
  letter-spacing:.08em;
  color:var(--ac2);
}

.note{
  font-size:15px;
  line-height:1.75;
  color:var(--tx-soft);
  border-left:2px solid var(--ac2);
  padding-left:18px;
  margin-top:30px;
}

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

.contrast{
  background:var(--bg-contrast);
  color:var(--tx-dark);
  padding:var(--step) 0;
}
.contrast h2,.contrast h3{color:var(--tx-dark);}
.contrast .sec-num{color:#5c7350;}
.contrast a{color:#8a5d1f;border-bottom-color:rgba(138,93,31,.5);}
.contrast a:focus-visible{outline-color:#8a5d1f;}
.contrast figcaption{color:#6a6055;}
.contrast .sep span{background:#8a5d1f;}
.contrast .sep span + span{background:#5c7350;}
.contrast ul.plain li::before{background:#8a5d1f;}

.detail-figure{grid-column:2 / span 4;margin:0;}
.detail-figure img{width:100%;aspect-ratio:4/5;object-fit:cover;}
.detail-text{grid-column:7 / span 6;}

/* ---------- listado de contenidos ---------- */

.toc{grid-column:2 / span 10;}
.toc ol{list-style:none;counter-reset:t;margin:26px 0 0;padding:0;}
.toc li{
  counter-increment:t;
  border-top:1px solid rgba(154,143,130,.25);
  padding:18px 0 18px 46px;
  position:relative;
}
.toc li::before{
  content:counter(t,decimal-leading-zero);
  position:absolute;
  left:0;
  top:20px;
  font-size:14px;
  color:var(--ac2);
  letter-spacing:.08em;
}
.toc h3{margin:0 0 4px;}
.toc p{font-size:16px;color:var(--tx-soft);line-height:1.7;margin:0;}

/* ---------- contacto ---------- */

.contact{grid-column:3 / span 7;}
.contact p{max-width:58ch;}
.contact .mail{font-size:20px;}

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

.page-head{padding:var(--step) 0 44px;}
.page-head .head-in{grid-column:2 / span 8;position:relative;}
.page-head h1::after{
  content:"";
  display:block;
  width:220px;
  height:2px;
  background:var(--ac);
  margin-top:22px;
}
.page-head p{
  margin-top:24px;
  color:var(--tx-soft);
  font-size:17px;
  max-width:60ch;
}

.doc{padding-bottom:var(--step);}
.doc-body{grid-column:3 / span 7;position:relative;}
.doc-body section{margin-bottom:58px;}
.doc-body section:last-child{margin-bottom:0;}
.doc-body h2{margin-bottom:18px;}
.doc-body .sep{margin-bottom:24px;}

.rail{
  grid-column:1 / span 1;
  display:flex;
  flex-direction:column;
  gap:150px;
  padding-top:14px;
}

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

.site-foot{
  background:var(--bg-contrast);
  color:var(--tx-dark);
  padding:52px 0 58px;
}
.site-foot .sep{margin-bottom:40px;}
.site-foot .sep span{background:#8a5d1f;}
.site-foot .sep span + span{background:#5c7350;}
.foot-a{grid-column:1 / span 7;}
.foot-b{grid-column:8 / span 5;}
.foot-a .brand{color:var(--tx-dark);display:inline-block;margin-bottom:16px;}
.foot-a .brand span{color:#5c7350;}
.foot-a p{font-size:16px;line-height:1.75;color:#4a423a;max-width:44ch;}
.foot-b ul{list-style:none;margin:0 0 20px;padding:0;}
.foot-b li{margin-bottom:9px;}
.foot-b a{color:#8a5d1f;border-bottom-color:rgba(138,93,31,.4);font-size:16px;}
.foot-b a:focus-visible{outline-color:#8a5d1f;}
.foot-note{font-size:14px;color:#6a6055;margin-top:26px;line-height:1.7;}

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

@media (max-width:900px){
  :root{--step:58px;--gap:18px;}
  .hero h1{grid-column:1 / span 12;}
  .hero-lead,.hero-list{grid-column:1 / span 12;}
  .hero-list{margin-top:32px;}
  .fig-holder,.toc,.contact,.doc-body,.detail-text,.page-head .head-in{grid-column:1 / span 12;}
  .detail-figure{grid-column:1 / span 8;margin-bottom:34px;}
  .col7,.off1,.off2,.off3{grid-column:1 / span 12;}
  .rail{display:none;}
  .foot-a,.foot-b{grid-column:1 / span 12;}
  .foot-b{margin-top:34px;}
}

@media (max-width:620px){
  :root{--step:50px;}
  body{font-size:17px;line-height:1.85;}
  .wrap{padding:0 20px;}
  .hero-inner{padding:0 16px;}
  .hero-frame{padding:28px 0 26px;}
  .site-head .wrap{flex-direction:column;align-items:flex-start;}
  .site-nav ul{gap:4px 16px;}
  .detail-figure{grid-column:1 / span 12;}
  .sep span{max-width:78%;}
  .toc li{padding-left:38px;}
}