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

:root{
  --base:#f5ece6;
  --base-alt:#eaddd3;
  --dark:#25304d;
  --ink:#241c19;
  --muted:#7d6c62;
  --accent:#2f3d63;
  --accent2:#b05a3c;
  --line:6px;
  --serif:Georgia,'Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}

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

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

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

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

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

h1,h2,h3{font-family:var(--serif);font-weight:700;margin:0}

h1{
  font-size:clamp(2.1rem,5.4vw,3.9rem);
  line-height:1.06;
  letter-spacing:-.01em;
}
h1 .l{display:block}

h2{
  font-size:clamp(1.45rem,2.6vw,2rem);
  line-height:1.2;
  margin:0 0 .7em;
}

h3{
  font-style:italic;
  font-weight:400;
  font-size:1.2rem;
  line-height:1.35;
  margin:0 0 .55em;
}

.wrap{max-width:1240px;margin:0 auto}

/* ---------- barra superior ---------- */

.topbar{
  background:var(--base);
  border-bottom:var(--line) solid var(--ink);
  padding:18px 44px;
}
.topbar .wrap{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:14px 28px;
}
.brand{
  font-size:1.3rem;
  letter-spacing:.06em;
  text-decoration:none;
  color:var(--ink);
}
.brand:hover{text-decoration:underline}
.mainnav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:6px 24px;
}
.mainnav a{
  font-family:var(--sans);
  font-size:13px;
  letter-spacing:.04em;
  color:var(--accent);
}
.mainnav [aria-current="page"]{color:var(--ink);text-decoration-color:var(--accent2)}

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

.hero{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-template-rows:auto 128px auto;
  gap:5px;
  background:var(--ink);
  border-bottom:var(--line) solid var(--ink);
}
.hero > *{background:var(--base)}

.hero-title{
  grid-column:1 / span 7;
  grid-row:1 / span 2;
  padding:64px 44px 56px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.hero-title .kicker{
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.14em;
  color:var(--accent2);
  margin:0 0 22px;
}
.hero-intro{
  grid-column:8 / span 5;
  grid-row:1;
  background:var(--accent);
  color:var(--base);
  padding:44px 40px;
  font-size:17px;
}
.hero-intro p{margin-bottom:1em}
.hero-field{
  grid-column:8 / span 5;
  grid-row:2;
  background:var(--accent2);
}
.hero-index{
  grid-column:1 / span 12;
  grid-row:3;
  padding:18px 44px;
  background:var(--base-alt);
}
.hero-index ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px 30px;
}
.hero-index a{
  font-family:var(--sans);
  font-size:13px;
  letter-spacing:.03em;
}

/* ---------- bandas ---------- */

.band{
  border-top:var(--line) solid var(--ink);
  padding:72px 44px;
  background:var(--base);
}
.band:first-of-type{border-top:0}
.band--alt{background:var(--base-alt)}
.band--dark{background:var(--dark);color:var(--base)}
.band--dark h2,.band--dark h3{color:var(--base)}
.band--dark a{color:#cdd6ee}
.band--dark a:focus-visible{background:var(--base);color:var(--ink);outline-color:var(--base)}

.cols{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:44px;
  row-gap:36px;
}
.c3{grid-column:span 3}
.c4{grid-column:span 4}
.c5{grid-column:span 5}
.c6{grid-column:span 6}
.c7{grid-column:span 7}
.c8{grid-column:span 8}

.bridge{
  border-left:5px solid var(--ink);
  padding-left:40px;
}
.band--dark .bridge{border-left-color:var(--base)}

.num{
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.16em;
  color:var(--accent2);
  display:block;
  margin-bottom:14px;
}
.band--dark .num{color:#e3a58c}

.lede{font-size:21px;line-height:1.55}

.note{
  font-family:var(--sans);
  font-size:13px;
  line-height:1.6;
  color:var(--muted);
}
.band--dark .note{color:#c3bdb4}

/* listas */

.list{
  list-style:none;
  margin:0;
  padding:0;
}
.list li{
  padding:10px 0 10px 22px;
  border-top:1px solid var(--accent2);
  position:relative;
  font-size:17px;
  line-height:1.5;
}
.list li:last-child{border-bottom:1px solid var(--accent2)}
.list li::before{
  content:"";
  position:absolute;
  left:0;
  top:19px;
  width:9px;
  height:9px;
  background:var(--accent);
}
.band--dark .list li{border-color:#7d6c62}
.band--dark .list li::before{background:#e3a58c}

.plain{margin:0;padding-left:20px}
.plain li{margin-bottom:.5em}

/* ---------- imagen principal ---------- */

.figure-main{
  margin:0;
  border:5px solid var(--ink);
  aspect-ratio:4 / 3;
  overflow:hidden;
  background:var(--base-alt);
}
.figure-main img{width:100%;height:100%;object-fit:cover}

.figure-detail{margin:0}
.figure-detail .shot{
  border:5px solid var(--base);
  aspect-ratio:4 / 5;
  overflow:hidden;
}
.figure-detail img{width:100%;height:100%;object-fit:cover}
figcaption{
  font-family:var(--sans);
  font-size:12px;
  line-height:1.6;
  color:var(--muted);
  margin-top:12px;
}
.band--dark figcaption{color:#c3bdb4}

.caption-side{
  font-family:var(--sans);
  font-size:13px;
  line-height:1.7;
  color:var(--muted);
}
.caption-side .mark{
  display:block;
  color:var(--accent2);
  letter-spacing:.14em;
  font-size:12px;
  margin-bottom:12px;
}

/* ---------- panel de About ---------- */

.panel{border-top:var(--line) solid var(--ink)}
.panel .field{
  border-bottom:var(--line) solid var(--ink);
  padding:66px 44px;
}
.field--a{background:var(--base)}
.field--b{background:var(--dark);color:var(--base);padding-top:88px;padding-bottom:88px}
.field--b h2{color:var(--base)}
.field--b a{color:#cdd6ee}
.field--c{background:var(--base-alt);padding-top:56px;padding-bottom:56px}
.field .inner{max-width:1240px;margin:0 auto}
.field .col7{max-width:none}
@media (min-width:901px){
  .field .col7{width:58.333%}
}

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

.foot{
  border-top:var(--line) solid var(--ink);
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:5px;
  background:var(--ink);
}
.foot > div{padding:40px 44px}
.foot-name{grid-column:span 3;background:var(--base-alt)}
.foot-nav{grid-column:span 4;background:var(--base)}
.foot-mail{grid-column:span 5;background:var(--dark);color:var(--base)}
.foot-mail a{color:#cdd6ee}
.foot-mail a:focus-visible{background:var(--base);color:var(--ink);outline-color:var(--base)}
.foot-name .name{font-size:1.25rem;letter-spacing:.06em;display:block;margin-bottom:10px}
.foot-name .line{font-family:var(--sans);font-size:12px;color:var(--muted);line-height:1.6}
.foot-nav ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.foot-nav a{font-family:var(--sans);font-size:13px}
.foot-mail .line{font-family:var(--sans);font-size:13px;line-height:1.7;color:#c3bdb4;margin-top:12px}
.foot-mail .mail{font-size:19px}

/* ---------- páginas de texto ---------- */

.page-head{
  border-bottom:var(--line) solid var(--ink);
  padding:70px 44px 54px;
  background:var(--base-alt);
}
.page-head .kicker{
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.14em;
  color:var(--accent2);
  margin:0 0 20px;
}
.page-head h1{font-size:clamp(1.9rem,4vw,3rem)}
.prose h2{margin-top:0}
.prose .blk + .blk{margin-top:40px}

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

@media (max-width:900px){
  body{font-size:17px}
  .topbar{padding:16px 22px}
  .hero{grid-template-rows:none;grid-template-columns:1fr}
  .hero-title,.hero-intro,.hero-field,.hero-index{grid-column:1 / -1;grid-row:auto}
  .hero-title{padding:40px 22px 34px}
  .hero-intro{padding:30px 22px}
  .hero-field{min-height:64px}
  .hero-index{padding:16px 22px}
  .band{padding:48px 22px}
  .cols{column-gap:0;row-gap:28px}
  .c3,.c4,.c5,.c6,.c7,.c8{grid-column:1 / -1}
  .bridge{
    border-left:0;
    padding-left:0;
    border-top:5px solid var(--ink);
    padding-top:28px;
  }
  .band--dark .bridge{border-top-color:var(--base)}
  .field .field,.panel .field{padding:44px 22px}
  .field--b,.field--c{padding-top:44px;padding-bottom:44px}
  .page-head{padding:44px 22px 34px}
  .foot{grid-template-columns:1fr}
  .foot > div{grid-column:1 / -1;padding:30px 22px}
  .lede{font-size:19px}
}

@media (max-width:520px){
  .mainnav ul{gap:6px 16px}
  .hero-index ul{gap:6px 18px}
}