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

:root{
  --bg:#e9eeeb;
  --bg-alt:#d9e1dd;
  --dark:#1e2a26;
  --ink:#171f1c;
  --ink-2:#63706b;
  --on-dark:#e9eeeb;
  --rust:#8f4a28;
  --teal:#3d6f66;
  --mono:ui-monospace,Consolas,'Liberation Mono',monospace;
  --sans:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --pad-y:72px;
  --pad-x:44px;
}

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

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

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:17px/1.75 var(--sans);
  overflow-x:hidden;
}

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

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

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

p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}

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

h1,h2,h3,.label,.num,.sitemark{
  font-family:var(--mono);
  text-transform:uppercase;
  font-weight:600;
  overflow-wrap:break-word;
}

h1{
  font-size:clamp(28px,4.4vw,52px);
  line-height:1.14;
  letter-spacing:.04em;
  margin:0;
}

h2{
  font-size:clamp(19px,2.1vw,26px);
  line-height:1.28;
  letter-spacing:.12em;
  margin:0 0 24px;
}

h3{
  font-size:15px;
  line-height:1.4;
  letter-spacing:.16em;
  margin:32px 0 12px;
  color:var(--ink);
}

.label{
  font-size:12px;
  letter-spacing:.22em;
  color:var(--teal);
  margin:0 0 18px;
}

.num{
  font-size:13px;
  letter-spacing:.2em;
  color:var(--teal);
  display:block;
  margin-bottom:14px;
}

.lede{font-size:18px;line-height:1.7}
.small{font-size:15px;line-height:1.65;color:var(--ink-2)}

.prose{max-width:66ch}

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

ul,ol{margin:0 0 1.15em;padding-left:1.3em}
ul{list-style:none;padding-left:0}
ul li{position:relative;padding-left:26px;margin-bottom:10px}
ul li::before{
  content:"";
  position:absolute;
  left:0;top:.72em;
  width:12px;height:3px;
  background:var(--rust);
}
ol li{margin-bottom:10px}
ol{padding-left:1.4em}
ol li::marker{font-family:var(--mono);color:var(--teal);font-size:14px}

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

.topbar{
  background:var(--dark);
  color:var(--on-dark);
  border-bottom:6px solid var(--dark);
  padding:20px var(--pad-x);
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:14px 32px;
}

.sitemark{
  font-size:17px;
  letter-spacing:.34em;
  color:var(--on-dark);
  text-decoration:none;
}
a.sitemark:hover{text-decoration:none}

.topnav{margin-left:auto}
.topnav ul{display:flex;flex-wrap:wrap;gap:10px 26px;margin:0;padding:0;list-style:none}
.topnav li{padding:0;margin:0}
.topnav li::before{display:none}
.topnav a{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--on-dark);
  text-decoration:none;
  padding-bottom:4px;
  border-bottom:3px solid transparent;
  display:inline-block;
}
.topnav a:hover{border-bottom-color:var(--on-dark)}
.topnav a[aria-current="page"]{border-bottom-color:var(--on-dark)}
.topbar :focus-visible{outline-color:var(--on-dark)}

/* ---------- rejilla de bandas ---------- */

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

.cell{
  background:var(--bg);
  padding:var(--pad-y) var(--pad-x);
  min-width:0;
}

.cell--alt{background:var(--bg-alt)}
.cell--dark{background:var(--dark);color:var(--on-dark)}
.cell--dark h2,.cell--dark h3{color:var(--on-dark)}
.cell--dark .num,.cell--dark .label{color:#9dc0b7}
.cell--dark .small{color:#b9c7c2}
.cell--dark ul li::before{background:#c08258}
.cell--dark :focus-visible{outline-color:var(--on-dark)}

.c3{grid-column:span 3}
.c4{grid-column:span 4}
.c5{grid-column:span 5}
.c7{grid-column:span 7}
.c8{grid-column:span 8}
.c12{grid-column:span 12}

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

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

.hero__title{
  grid-column:1 / span 7;
  grid-row:1 / span 2;
  background:var(--bg);
  padding:var(--pad-y) var(--pad-x);
  display:flex;
  align-items:center;
}

.hero__intro{
  grid-column:8 / span 5;
  grid-row:1;
  background:var(--rust);
  color:#f6f2ee;
  padding:var(--pad-y) var(--pad-x);
}
.hero__intro a{color:#f6f2ee}
.hero__intro :focus-visible{outline-color:#f6f2ee}

.hero__field{
  grid-column:8 / span 5;
  grid-row:2;
  background:var(--teal);
  min-height:96px;
}

.hero__index{
  grid-column:1 / span 12;
  grid-row:3;
  background:var(--bg-alt);
  padding:26px var(--pad-x);
}
.hero__index ul{display:flex;flex-wrap:wrap;gap:10px 30px;margin:0;padding:0}
.hero__index li{padding:0;margin:0}
.hero__index li::before{display:none}
.hero__index a{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink);
  text-decoration:none;
  border-bottom:2px solid var(--rust);
  padding-bottom:2px;
}
.hero__index a:hover{color:var(--rust)}

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

.figure{margin:0}
.figure img{border:5px solid var(--dark);width:100%}
.figure figcaption{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.12em;
  color:var(--teal);
  margin-top:14px;
  line-height:1.6;
}
.figure--detail img{border:5px solid #0f1714}
.cell--dark .figure figcaption{color:#9dc0b7}

.cell--img{display:flex;align-items:flex-start;justify-content:flex-start}
.cell--img-end{display:flex;align-items:center;justify-content:flex-end}

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

.panel{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:6px;
  background:var(--dark);
  border-bottom:6px solid var(--dark);
}
.panel__field{
  grid-column:1 / span 12;
  padding:var(--pad-y) var(--pad-x);
  background:var(--bg);
  display:grid;
  grid-template-columns:repeat(12,1fr);
}
.panel__text{grid-column:1 / span 7;min-width:0}
.panel__field--tall{padding-top:104px;padding-bottom:104px}
.panel__field--dark{background:var(--dark);color:var(--on-dark)}
.panel__field--dark h2{color:var(--on-dark)}
.panel__field--dark .label{color:#9dc0b7}
.panel__field--dark ul li::before{background:#c08258}
.panel__field--alt{background:var(--bg-alt)}
.panel__field--short{padding-top:52px;padding-bottom:52px}



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

.contact-line{
  font-family:var(--mono);
  font-size:15px;
  letter-spacing:.08em;
  line-height:2;
  text-transform:none;
}
.contact-line strong{
  display:block;
  text-transform:uppercase;
  letter-spacing:.24em;
  font-weight:600;
}

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

.foot{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:6px;
  background:var(--dark);
  border-top:6px solid var(--dark);
}
.foot__cell{padding:52px var(--pad-x);min-width:0}
.foot__cell--name{grid-column:span 3;background:var(--dark);color:var(--on-dark)}
.foot__cell--nav{grid-column:span 4;background:var(--bg-alt)}
.foot__cell--mail{grid-column:span 5;background:var(--bg)}
.foot__cell--name .sitemark{display:block;margin-bottom:16px}
.foot__cell--name p{color:#b9c7c2;font-size:14px;line-height:1.7}
.foot__cell--name :focus-visible{outline-color:var(--on-dark)}
.foot__cell ul{margin:0;padding:0}
.foot__cell li{padding-left:0;margin-bottom:9px}
.foot__cell li::before{display:none}
.foot__cell--nav a{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink);
  text-decoration:none;
  border-bottom:2px solid transparent;
}
.foot__cell--nav a:hover{border-bottom-color:var(--rust)}
.foot__cell--mail .small{margin-top:14px}

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

@media (max-width:980px){
  :root{--pad-y:48px;--pad-x:26px}
  body{font-size:16px}
  .cell,.c3,.c4,.c5,.c7,.c8,.c12{grid-column:1 / -1}
  .panel__text{grid-column:1 / -1}
  .hero__title,.hero__intro,.hero__field,.hero__index{grid-column:1 / -1}
  .hero__title{grid-row:auto}
  .hero__intro{grid-row:auto}
  .hero__field{grid-row:auto;min-height:64px}
  .hero__index{grid-row:auto}
  .foot__cell--name,.foot__cell--nav,.foot__cell--mail{grid-column:1 / -1}
  .cell--img-end{justify-content:flex-start}
  .topbar{padding:18px 26px}
  .topnav{margin-left:0;width:100%}
}

@media (max-width:520px){
  :root{--pad-y:38px;--pad-x:20px}
  h1{letter-spacing:.02em}
  h2{letter-spacing:.08em}
  .figure img{border-width:4px}
}