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

:root{
  --bg:#f1e9dc;
  --bg-alt:#e5d8c4;
  --bg-dark:#3a2a1d;
  --ink:#2a2018;
  --ink-soft:#7a6a57;
  --ink-invert:#f1e9dc;
  --accent:#9c5a2c;
  --accent-2:#59705b;
  --sans:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --serif:Georgia,'Times New Roman',serif;
}

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

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

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--serif);
  font-size:18px;
  line-height:1.7;
  overflow-x:hidden;
}

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

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

.band-dark a{color:#e0a877;}

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

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

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

.c6{grid-column:1 / span 6;}
.c7{grid-column:1 / span 7;}
.c8{grid-column:1 / span 8;}
.c9{grid-column:1 / span 9;}
.c10{grid-column:1 / span 10;}
.side{grid-column:9 / span 4;}

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

.r72{padding-top:72px;padding-bottom:72px;}
.r88{padding-top:88px;padding-bottom:88px;}
.r104{padding-top:104px;padding-bottom:104px;}

.band-alt{background:var(--bg-alt);}
.band-dark{background:var(--bg-dark);color:var(--ink-invert);}
.band-dark .kicker,.band-dark .cap{color:#b9a98f;}
.band-dark .sep-thin{background:#6b5540;}

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

h1,h2,h3,.brand,.nav a,.kicker,.num{font-family:var(--sans);}

h1{
  font-size:clamp(2.6rem,6.2vw,4.6rem);
  line-height:.98;
  letter-spacing:-.035em;
  font-weight:800;
  margin:0;
}
h1 .l2{display:block;padding-left:8.333%;}

h2{
  font-size:clamp(1.5rem,3vw,2.15rem);
  line-height:1.06;
  letter-spacing:-.02em;
  font-weight:800;
  margin:0 0 18px;
}

h3{
  font-size:1.12rem;
  line-height:1.25;
  letter-spacing:-.01em;
  font-weight:700;
  margin:34px 0 10px;
}

p{margin:0 0 18px;}
p.lead{font-size:1.18rem;line-height:1.62;}

.kicker{
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent-2);
  font-weight:700;
  margin:0 0 14px;
}

.num{
  font-family:var(--sans);
  font-size:.72rem;
  letter-spacing:.2em;
  color:var(--accent-2);
  font-weight:700;
  display:block;
  margin-bottom:10px;
}

.cap{
  font-family:var(--sans);
  font-size:.82rem;
  line-height:1.5;
  color:var(--ink-soft);
}

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

.sep{margin:0 0 30px;}
.sep-thin{height:1px;background:#c8b79c;width:100%;}
.sep-thick{height:3px;background:var(--accent);width:16.66%;min-width:96px;margin-top:6px;}

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

.site-head{border-bottom:1px solid #cdbb9f;background:var(--bg);}
.head-inner{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px 32px;padding:20px 0;}
.brand{font-weight:800;letter-spacing:-.02em;font-size:1.32rem;color:var(--ink);text-decoration:none;}
.brand:hover{text-decoration:none;color:var(--accent);}
.nav{margin-left:auto;}
.nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;margin:0;padding:0;}
.nav a{font-size:.82rem;letter-spacing:.11em;text-transform:uppercase;font-weight:600;color:var(--ink);text-decoration:none;padding-bottom:2px;border-bottom:1px solid transparent;}
.nav a:hover{border-bottom-color:var(--accent);color:var(--accent);}

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

.hero{padding-top:80px;padding-bottom:72px;}
.hero-inner{position:relative;padding-left:46px;}
.dimline{
  position:absolute;left:0;top:6px;bottom:6px;width:1px;background:var(--accent-2);
}
.dimline::before,.dimline::after{
  content:"";position:absolute;left:-7px;width:15px;height:1px;background:var(--accent-2);
}
.dimline::before{top:0;}
.dimline::after{bottom:0;}

.hero h1{grid-column:1 / span 8;}

.hrule{
  grid-column:1 / span 9;
  display:flex;align-items:center;gap:14px;
  margin:36px 0 30px;
  color:var(--accent-2);
}
.hrule span{
  font-family:var(--sans);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  white-space:nowrap;color:var(--accent-2);font-weight:700;
}
.hrule i{flex:1;height:1px;background:var(--accent-2);position:relative;}
.hrule i::before,.hrule i::after{content:"";position:absolute;top:-4px;width:1px;height:9px;background:var(--accent-2);}
.hrule i::before{left:0;}
.hrule i::after{right:0;}

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

.figmain{margin:0;}
.figmain .shot{grid-column:1 / span 7;}
.figmain img{border:1px solid #cdbb9f;}
.figmain figcaption{grid-column:9 / span 4;align-self:end;position:relative;padding-top:14px;}
.figmain figcaption::before{
  content:"";position:absolute;left:-24px;top:24px;width:24px;height:1px;background:var(--accent-2);
}

/* ---------- listas ---------- */

ul.check,ol.steps{padding-left:0;list-style:none;margin:0 0 20px;}
ul.check li{position:relative;padding-left:26px;margin-bottom:11px;}
ul.check li::before{content:"";position:absolute;left:0;top:.62em;width:12px;height:3px;background:var(--accent);}
ol.steps{counter-reset:s;}
ol.steps li{position:relative;padding-left:44px;margin-bottom:14px;counter-increment:s;}
ol.steps li::before{
  content:counter(s,decimal-leading-zero);
  position:absolute;left:0;top:.15em;
  font-family:var(--sans);font-size:.78rem;font-weight:700;letter-spacing:.12em;color:var(--accent-2);
}
.band-dark ul.check li::before{background:#c98a52;}

/* ---------- sección oscura con imagen de detalle ---------- */

.detail-grid{align-items:start;row-gap:32px;}
.detail-fig{grid-column:1 / span 5;margin:0;}
.detail-fig img{border:1px solid #5a4531;}
.detail-fig figcaption{margin-top:12px;}
.detail-text{grid-column:7 / span 6;}

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

.rail{position:relative;padding-left:34px;}
.rail::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--accent-2);}
.rail .tick{position:relative;}
.rail .tick::before{content:"";position:absolute;left:-34px;top:.72em;width:20px;height:1px;background:var(--accent-2);}

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

.site-foot{background:var(--bg-alt);padding:60px 0 28px;}
.foot-top{height:1px;background:#c8b79c;}
.foot-top2{height:3px;background:var(--accent);width:16.66%;min-width:96px;margin-top:5px;margin-bottom:46px;}
.foot-grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;row-gap:36px;}
.foot-a{grid-column:1 / span 6;}
.foot-b{grid-column:8 / span 2;}
.foot-c{grid-column:10 / span 3;}
.foot-a .brand{font-size:1.9rem;display:inline-block;margin-bottom:12px;}
.foot-grid h2,.foot-grid p{font-size:.95rem;}
.foot-grid ul{list-style:none;margin:0;padding:0;}
.foot-grid li{margin-bottom:8px;}
.foot-grid a{font-size:.95rem;}
.foot-head{font-family:var(--sans);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-2);font-weight:700;margin:0 0 14px;}
.foot-end{border-top:1px solid #c8b79c;margin-top:46px;padding-top:16px;}

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

@media (max-width:1000px){
  .figmain .shot{grid-column:1 / span 8;}
  .figmain figcaption{grid-column:9 / span 4;}
  .detail-fig{grid-column:1 / span 6;}
  .detail-text{grid-column:7 / span 6;}
}

@media (max-width:820px){
  body{font-size:17px;}
  .wrap{padding:0 22px;}
  .grid{grid-template-columns:1fr;column-gap:0;row-gap:0;}
  .c6,.c7,.c8,.c9,.c10,.side,
  .hero h1,.hrule,.figmain .shot,.figmain figcaption,
  .detail-fig,.detail-text{grid-column:1 / -1;}
  h1 .l2{padding-left:0;}
  .r72,.r88,.r104{padding-top:48px;padding-bottom:48px;}
  .hero{padding-top:44px;padding-bottom:44px;}
  .hero-inner{padding-left:26px;}
  .figmain figcaption{margin-top:16px;padding-top:0;}
  .figmain figcaption::before{display:none;}
  .detail-fig{max-width:420px;}
  .foot-grid{grid-template-columns:1fr;}
  .foot-a,.foot-b,.foot-c{grid-column:1 / -1;}
  .site-foot{padding-top:44px;}
  .foot-top2{margin-bottom:32px;}
  .head-inner{padding:16px 0;}
  .nav{margin-left:0;width:100%;}
}

@media (max-width:420px){
  .nav ul{gap:8px 16px;}
  .rail{padding-left:22px;}
  .rail .tick::before{left:-22px;width:14px;}
}