/* Butrane — hoja de estilos general */

:root{
  --bg:#f3eeea;
  --surface:#ece4dd;
  --seam:#f3eeea;
  --ink:#241b1d;
  --muted:#7b6a68;
  --wine:#8b2f45;
  --copper:#a8642e;
  --sans:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:Georgia,"Times New Roman",serif;
  --gap:4px;
}

*{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(--wine);text-decoration:underline;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
a:focus-visible{outline:3px solid var(--wine);outline-offset:3px}

h1,h2,h3{
  font-family:var(--sans);
  font-weight:800;
  color:var(--ink);
  margin:0 0 16px;
}
h1{
  font-size:clamp(2.2rem,6.2vw,4.1rem);
  line-height:.98;
  letter-spacing:-.035em;
}
h2{
  font-size:clamp(1.5rem,3.2vw,2.15rem);
  line-height:1.06;
  letter-spacing:-.02em;
}
h3{
  font-size:1.12rem;
  line-height:1.25;
  letter-spacing:-.01em;
  margin-bottom:8px;
}
p{margin:0 0 20px}
p:last-child,ul:last-child,ol:last-child,dl:last-child{margin-bottom:0}

ul,ol{margin:0 0 20px;padding-left:22px}
li{margin-bottom:10px}
li::marker{color:var(--wine)}

dl{margin:0}
dt{font-family:var(--sans);font-weight:700;font-size:1.05rem;margin-top:20px}
dt:first-of-type{margin-top:0}
dd{margin:6px 0 0}

.wrap{max-width:1200px;margin:0 auto;padding:0 24px}

/* ---------- mosaico ---------- */

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

.mod{background:var(--surface);padding:32px}
.mod--plain{background:transparent;padding:0}
.mod--wine{background:var(--wine);color:var(--bg)}
.mod--copper{background:var(--copper);color:var(--bg)}
.mod--ink{background:#3b2029;color:var(--bg)}
.mod--tight{padding:20px 24px}
.mod--wine h2,.mod--wine h3,.mod--copper h2,.mod--copper h3,.mod--ink h2,.mod--ink h3{color:var(--bg)}

.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}
.c12{grid-column:span 12}
.push2{grid-column:3/span 6}
.push1{grid-column:2/span 5}

.fill{min-height:96px}

.num{
  font-family:var(--sans);
  font-weight:800;
  font-size:1.3rem;
  letter-spacing:.04em;
  color:var(--copper);
  display:block;
  margin-bottom:10px;
}

.caption{
  font-family:var(--sans);
  font-size:.95rem;
  line-height:1.45;
  color:var(--muted);
  letter-spacing:-.005em;
}

.lead{font-size:1.12rem}

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

.band{padding:96px 0}
.band--alt{--bg:#e6ddd6;--surface:#f3eeea;background:#e6ddd6}
.band--dark{
  --bg:#3b2029;
  --surface:#48262f;
  --muted:#c0a5a2;
  background:#3b2029;
  color:#f3eeea;
}
.band--dark h2,.band--dark h3{color:#f3eeea}
.band--dark a{color:#f3eeea}
.band--dark a:focus-visible{outline-color:var(--copper)}
.band--dark li::marker{color:var(--copper)}

/* ---------- tiras de teselas ---------- */

.tiles{display:flex;flex-wrap:wrap;gap:var(--gap);margin:0;padding:0}
.tiles span{width:24px;height:24px;display:block;background:var(--surface)}
.tiles span:nth-child(3n+1){background:var(--wine)}
.tiles span:nth-child(5n+3){background:var(--copper)}
.tiles span:nth-child(4n+4){background:var(--surface)}

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

.site-header{padding:24px 0 0}
.brand{
  font-family:var(--sans);
  font-weight:800;
  font-size:1.35rem;
  letter-spacing:-.03em;
  text-decoration:none;
  color:var(--ink);
  display:block;
}
.brand span{
  display:block;
  font-weight:600;
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:6px;
}
.site-nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px 28px;
  font-family:var(--sans);
  font-size:.98rem;
  font-weight:600;
}
.site-nav li{margin:0}
.site-nav a{color:var(--ink);text-decoration:none;padding-bottom:3px;border-bottom:2px solid var(--wine)}
.site-nav a:hover{color:var(--wine)}
.nav-mod{display:flex;align-items:center}

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

.hero{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--gap);
  grid-auto-rows:minmax(56px,auto);
  margin-top:24px;
}
.hero__title{grid-column:1/span 8;grid-row:1/span 2;display:flex;align-items:flex-end;padding:40px}
.hero__tile-a{grid-column:9/span 2;grid-row:1}
.hero__tile-b{grid-column:11/span 2;grid-row:1}
.hero__lead{grid-column:9/span 4;grid-row:2/span 2;padding:28px}
.hero__side{grid-column:1/span 2;grid-row:3/span 2}
.hero__image{grid-column:3/span 6;grid-row:3/span 3;padding:0;background:var(--surface)}
.hero__image img{width:100%;height:auto}
.hero__caption{grid-column:9/span 4;grid-row:4/span 2;padding:24px 28px}
.hero__strip{grid-column:1/span 2;grid-row:5;background:var(--copper)}

/* ---------- imagen de detalle ---------- */

.figure{margin:0}
.figure img{width:100%;height:auto}
.figure figcaption{margin-top:12px;font-family:var(--sans);font-size:.92rem;line-height:1.5;color:var(--muted)}

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

.site-footer{background:#e6ddd6;--surface:#f3eeea;--bg:#e6ddd6;padding:72px 0 56px}
.footer-grid{margin-top:24px}
.footer-grid .mod{padding:28px}
.footer-grid h2{font-size:1.05rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px}
.footer-nav ul{list-style:none;margin:0;padding:0;font-family:var(--sans);font-size:1rem;line-height:1.9}
.footer-nav li{margin:0}
.footer-brand{font-family:var(--sans);font-weight:800;font-size:1.5rem;letter-spacing:-.03em;margin-bottom:8px}
.footer-note{font-size:.98rem;color:var(--muted)}

/* ---------- utilidades ---------- */

.skip{
  position:absolute;left:-9999px;top:0;
  background:var(--wine);color:#f3eeea;padding:10px 16px;
  font-family:var(--sans);z-index:10;text-decoration:none;
}
.skip:focus{left:8px;top:8px}

.page-head{padding:56px 0 0}
.page-head .mod{padding:40px}

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

@media (max-width:900px){
  .band{padding:64px 0}
  .site-footer{padding:56px 0 40px}
  .c3,.c4,.c5,.c6,.c7,.c8,.push1,.push2{grid-column:span 12}
  .hero{grid-auto-rows:auto}
  .hero__title,.hero__lead,.hero__image,.hero__caption{grid-column:1/span 12;grid-row:auto}
  .hero__tile-a{grid-column:1/span 6;grid-row:auto;min-height:64px}
  .hero__tile-b{grid-column:7/span 6;grid-row:auto;min-height:64px}
  .hero__side,.hero__strip{grid-column:1/span 12;grid-row:auto;min-height:32px}
  .hero__title{padding:28px;align-items:flex-start}
  .fill{min-height:56px}
}

@media (max-width:640px){
  body{font-size:17px}
  .band{padding:48px 0}
  .wrap{padding:0 16px}
  .mod{padding:24px}
  .hero{margin-top:16px}
  .site-nav ul{gap:8px 18px;font-size:.94rem}
  .tiles span{width:20px;height:20px}
}