:root{
  --paper:#f2ebe0;
  --paper-2:#e7d9c6;
  --dark:#4a2c1e;
  --ink:#241a14;
  --muted:#6e5b4c;
  --accent:#c05a2b;
  --accent-2:#6b7a5a;
  --rule:6px;
}

*,*::before,*::after{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%;}

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

.skip{position:absolute;left:-9999px;}
.skip:focus{position:static;display:block;padding:12px 20px;background:var(--accent);color:var(--paper);}

/* ---------- estructura de bandas ---------- */

.band{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--rule);
  background:var(--ink);
  border-bottom:var(--rule) solid var(--ink);
}

.cell{
  background:var(--paper);
  padding:72px 44px;
  min-width:0;
}

.cell--alt{background:var(--paper-2);}
.cell--dark{background:var(--dark);color:var(--paper);}
.cell--accent{background:var(--accent);color:var(--paper);}
.cell--olive{background:var(--accent-2);}
.cell--tight{padding:28px 44px;}

.cell--dark a,.cell--accent a{color:var(--paper);}
.cell--dark a:focus-visible,.cell--accent a:focus-visible{background:var(--paper);color:var(--ink);}

.c1-8{grid-column:1/8;}
.c8-13{grid-column:8/13;}
.c1-5{grid-column:1/5;}
.c5-13{grid-column:5/13;}
.c1-6{grid-column:1/6;}
.c6-9{grid-column:6/9;}
.c9-13{grid-column:9/13;}
.c1-7{grid-column:1/7;}
.c1-13{grid-column:1/13;}
.c9-13b{grid-column:9/13;}

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

.site-head{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--rule);
  background:var(--ink);
  border-bottom:var(--rule) solid var(--ink);
}

.brand{
  grid-column:1/5;
  background:var(--paper-2);
  padding:26px 44px;
  display:flex;
  align-items:center;
}

.brand a{
  color:var(--ink);
  text-decoration:none;
  font-weight:700;
  font-size:1.5rem;
  letter-spacing:-0.02em;
}
.brand a:hover{color:var(--accent);}

.main-nav{
  grid-column:5/13;
  background:var(--paper);
  padding:26px 44px;
  display:flex;
  align-items:center;
}

.main-nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:10px 26px;
}

.main-nav a{
  color:var(--ink);
  text-decoration:none;
  font-size:15px;
  letter-spacing:0.01em;
  border-bottom:2px solid transparent;
  padding-bottom:2px;
}
.main-nav a:hover{border-bottom-color:var(--accent);color:var(--accent);}
.main-nav a[aria-current="page"]{border-bottom-color:var(--accent);font-weight:700;}

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

.hero{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-template-rows:auto auto auto;
  gap:5px;
  background:var(--ink);
  border-bottom:var(--rule) solid var(--ink);
}

.hero-title{
  grid-column:1/8;
  grid-row:1/3;
  background:var(--paper);
  padding:72px 44px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.hero-title h1{
  margin:0;
  font-size:clamp(2.1rem,5.2vw,4.1rem);
  font-weight:700;
  line-height:1.03;
  letter-spacing:-0.035em;
}
.hero-title h1 span{display:block;}
.hero-title h1 span:nth-child(2){color:var(--accent);}

.hero-kicker{
  margin:0 0 26px;
  font-size:13px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--accent-2);
  font-weight:700;
}

.hero-intro{
  grid-column:8/13;
  grid-row:1;
  background:var(--accent);
  color:var(--paper);
  padding:52px 40px;
}
.hero-intro p{margin:0;font-size:1.05rem;line-height:1.65;}

.hero-field{
  grid-column:8/13;
  grid-row:2;
  background:var(--dark);
  min-height:130px;
}

.hero-nav{
  grid-column:1/13;
  grid-row:3;
  background:var(--paper-2);
  padding:20px 44px;
}
.hero-nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px 28px;
  font-size:14px;
}
.hero-nav a{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--accent);padding-bottom:2px;}
.hero-nav a:hover{color:var(--accent);}
.hero-nav span{color:var(--accent-2);font-weight:700;margin-right:8px;}

/* ---------- tipografía de contenido ---------- */

h2{
  margin:0 0 22px;
  font-size:clamp(1.3rem,2.3vw,1.95rem);
  font-weight:700;
  line-height:1.18;
  letter-spacing:-0.018em;
}

h3{
  margin:32px 0 12px;
  font-size:1.06rem;
  font-weight:700;
  letter-spacing:-0.005em;
}

p{margin:0 0 18px;max-width:66ch;}
p:last-child{margin-bottom:0;}

.num{
  display:block;
  margin:0 0 14px;
  font-size:13px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--accent-2);
  font-weight:700;
}
.cell--dark .num{color:#a9b79a;}

.lead{font-size:1.1rem;}

.cap{
  font-size:13px;
  line-height:1.55;
  color:var(--muted);
  letter-spacing:0.01em;
  margin:0;
  max-width:40ch;
}
.cell--dark .cap{color:#c8b6a6;}

.side-note{
  font-size:15px;
  color:var(--muted);
  border-left:3px solid var(--accent-2);
  padding-left:16px;
  margin-top:26px;
}

ul.list,ol.list{margin:0 0 18px;padding:0 0 0 22px;max-width:64ch;}
ul.list{list-style:none;padding-left:0;}
ul.list li{position:relative;padding-left:24px;margin-bottom:10px;}
ul.list li::before{
  content:"";
  position:absolute;
  left:0;
  top:0.62em;
  width:11px;
  height:3px;
  background:var(--accent);
}
ol.list li{margin-bottom:10px;padding-left:6px;}
ol.list::marker,ol.list li::marker{color:var(--accent);font-weight:700;}
.cell--dark ul.list li::before{background:#d9803f;}

dl{margin:0;max-width:64ch;}
dt{font-weight:700;margin-top:20px;}
dd{margin:4px 0 0;color:var(--muted);}

/* ---------- figuras ---------- */

.fig-main{
  margin:0;
  border:5px solid var(--ink);
  background:var(--paper-2);
  line-height:0;
}
.fig-main img{display:block;width:100%;height:auto;}

.fig-detail{
  margin:0;
  border:5px solid var(--paper);
  line-height:0;
}
.fig-detail img{display:block;width:100%;height:auto;}
.fig-detail figcaption{
  line-height:1.55;
  padding-top:14px;
  font-size:13px;
  color:#c8b6a6;
  max-width:34ch;
}

.cell--figure{padding:44px;display:flex;align-items:center;}
.cell--caption{display:flex;flex-direction:column;justify-content:flex-end;}

/* ---------- panel vertical (about) ---------- */

.panel{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--rule);
  background:var(--ink);
  border-bottom:var(--rule) solid var(--ink);
}
.panel .cell{grid-column:1/8;}
.panel .cell--wide{grid-column:1/13;}

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

.mail{
  font-size:1.25rem;
  font-weight:700;
  letter-spacing:-0.01em;
  word-break:break-word;
}

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

.site-foot{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--rule);
  background:var(--ink);
  border-top:var(--rule) solid var(--ink);
}

.foot-cell{padding:44px;min-width:0;}
.foot-name{grid-column:1/5;background:var(--paper-2);}
.foot-nav{grid-column:5/9;background:var(--paper);}
.foot-mail{grid-column:9/13;background:var(--dark);color:var(--paper);}
.foot-mail a{color:var(--paper);}

.foot-name .logo{
  font-size:1.5rem;
  font-weight:700;
  letter-spacing:-0.02em;
  margin:0 0 10px;
}

.foot-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:15px;}
.foot-nav a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--accent);}
.foot-nav a:hover{color:var(--accent);}

.foot-mail p{font-size:14px;line-height:1.6;color:#d8c8ba;max-width:34ch;}
.foot-mail .mail{color:var(--paper);display:inline-block;margin-bottom:12px;}

.copy{font-size:13px;color:var(--muted);margin:14px 0 0;}
.foot-mail .copy{color:#b9a595;}

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

@media (max-width:1000px){
  .cell{padding:56px 34px;}
  .cell--tight{padding:24px 34px;}
  .hero-title{padding:56px 34px;}
  .hero-intro{padding:40px 32px;}
  .hero-nav,.brand,.main-nav{padding:20px 34px;}
  .foot-cell{padding:34px;}
}

@media (max-width:860px){
  body{font-size:16px;}
  .band,.hero,.panel,.site-head,.site-foot{grid-template-columns:1fr;}
  .band > *,.panel > *,.site-head > *,.site-foot > *{grid-column:1/-1 !important;}
  .hero > *{grid-column:1/-1 !important;grid-row:auto !important;}
  .hero-field{min-height:88px;}
  .cell{padding:44px 24px;}
  .cell--tight{padding:22px 24px;}
  .hero-title{padding:48px 24px;}
  .hero-intro{padding:34px 24px;}
  .hero-nav,.brand,.main-nav{padding:18px 24px;}
  .cell--figure{padding:24px;}
  .foot-cell{padding:28px 24px;}
  .cap{max-width:none;}
  .brand{justify-content:flex-start;}
}