/* Plazobrogu — hoja de estilo única para todas las páginas */

:root{
  --bg:#1c1416;
  --bg-alt:#241a1d;
  --bg-light:#f0e7dc;
  --tx:#eee4da;
  --tx-2:#a08f8c;
  --tx-dark:#1c1416;
  --tx-2-light:#6b5a53;
  --acc:#c98f3f;
  --acc-deep:#8c5a18;
  --acc-2:#8fa07c;
  --line:#0f0a0b;
  --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(--tx);
  font-family:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.8;
  overflow-x:hidden;
}

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

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

a:focus-visible,
:focus-visible{
  outline:3px solid var(--acc);
  outline-offset:3px;
}

h1,h2,h3{
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400;
  line-height:1.05;
  margin:0 0 22px;
  letter-spacing:-0.01em;
}

h1{font-size:clamp(2.1rem,5.4vw,3.9rem);}
h2{font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.12;}
h3{font-size:1.13rem;line-height:1.25;margin-bottom:12px;}

p{margin:0 0 20px;}
p:last-child,ul:last-child,ol:last-child{margin-bottom:0;}

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

strong{font-weight:600;color:#fff6ea;}

/* ---------- rejilla de 12 columnas con perímetros oscuros ---------- */

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

.band--first{border-top:0;}

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

.cell--alt{background:var(--bg-alt);}
.cell--acc{background:var(--acc);color:var(--tx-dark);}
.cell--acc a{color:#3a2208;}
.cell--light{background:var(--bg-light);color:var(--tx-dark);}
.cell--light a{color:var(--acc-deep);}
.cell--light .num{color:#4e6038;}
.cell--light .caption{color:var(--tx-2-light);}
.cell--light li::marker{color:var(--acc-deep);}
.cell--light strong{color:#000;}
.cell--flat{padding:0;}

.s2{grid-column:span 2;}
.s3{grid-column:span 3;}
.s4{grid-column:span 4;}
.s5{grid-column:span 5;}
.s6{grid-column:span 6;}
.s7{grid-column:span 7;}
.s8{grid-column:span 8;}
.s12{grid-column:span 12;}

/* ---------- elementos tipográficos menores ---------- */

.num{
  font-size:13px;
  letter-spacing:0.16em;
  color:var(--acc-2);
  margin:0 0 14px;
  font-family:Georgia,'Times New Roman',serif;
}

.caption{
  font-size:13px;
  line-height:1.65;
  color:var(--tx-2);
  margin:0;
}

.lead{font-size:19px;line-height:1.7;}

.rule{
  border:0;
  border-top:1px solid var(--acc-2);
  opacity:.55;
  margin:26px 0;
}

.aside-note{
  font-size:15px;
  line-height:1.7;
  color:var(--tx-2);
}

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

.masthead{
  background:var(--bg-alt);
  border-bottom:6px solid var(--line);
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:14px 28px;
  padding:20px var(--pad-x);
}

.brand{
  font-family:Georgia,'Times New Roman',serif;
  font-size:1.35rem;
  color:var(--tx);
  text-decoration:none;
  letter-spacing:.02em;
}
.brand:hover{color:var(--acc);}

.masthead nav ul{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:8px 22px;
  margin:0;
  padding:0;
}
.masthead nav li{margin:0;}
.masthead nav a{
  font-size:14.5px;
  color:var(--tx-2);
  text-decoration:none;
  padding-bottom:2px;
  border-bottom:1px solid transparent;
}
.masthead nav a:hover{color:var(--tx);border-bottom-color:var(--acc);}

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

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

.hero__title{
  grid-column:span 7;
  grid-row:span 2;
  background:var(--bg);
  padding:88px var(--pad-x) 72px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.hero__title h1{max-width:15ch;}

.hero__intro{
  grid-column:span 5;
  background:var(--acc);
  color:var(--tx-dark);
  padding:var(--pad-y) var(--pad-x);
}
.hero__intro p{font-size:18px;line-height:1.7;}

.hero__field{
  grid-column:span 5;
  background:var(--bg-light);
  min-height:118px;
}

.hero__index{
  grid-column:span 12;
  background:var(--bg-alt);
  padding:28px var(--pad-x);
}
.hero__index p{margin:0 0 12px;}
.hero__index ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:10px 26px;
}
.hero__index li{margin:0;}
.hero__index a{font-size:15px;}

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

.figure-main{
  margin:0;
  border:5px solid var(--line);
  background:var(--line);
}
.figure-main img{width:100%;}

.figure-detail{margin:0;}
.figure-detail img{width:100%;border:5px solid var(--line);}
.figure-detail figcaption{margin-top:14px;}
.cell--flat .figure-detail figcaption{padding:0 22px 26px;}

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

.field{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:5px;
  padding:var(--pad-y) var(--pad-x);
  border-top:6px solid var(--line);
  background:var(--bg);
}
.field--alt{background:var(--bg-alt);}
.field--light{background:var(--bg-light);color:var(--tx-dark);}
.field--light a{color:var(--acc-deep);}
.field--light .num{color:#4e6038;}
.field--light .caption{color:var(--tx-2-light);}
.field--light li::marker{color:var(--acc-deep);}
.field__text{grid-column:1 / span 7;min-width:0;}
.field__text--mid{grid-column:3 / span 7;}
.field__text--end{grid-column:5 / span 7;}

@media (max-width:820px){
  .field__text,
  .field__text--mid,
  .field__text--end{grid-column:1 / -1;}
}

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

.site-footer{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:5px;
  background:var(--line);
  border-top:6px solid var(--line);
}
.site-footer .cell{padding:48px var(--pad-x);}
.site-footer h2{font-size:1.25rem;margin-bottom:14px;}
.site-footer ul{list-style:none;margin:0;padding:0;}
.site-footer li{margin-bottom:9px;}
.site-footer a{font-size:15px;}
.footer-brand{
  font-family:Georgia,'Times New Roman',serif;
  font-size:1.5rem;
  margin:0 0 12px;
}

/* ---------- adaptación a pantallas medianas y pequeñas ---------- */

@media (max-width:1000px){
  :root{--pad-y:52px;--pad-x:30px;}
  .hero__title{padding:60px var(--pad-x) 48px;}
}

@media (max-width:820px){
  .band > .cell,
  .panel > .cell,
  .panel > .cell.wide,
  .site-footer .cell{grid-column:1 / -1;}
  .hero__title,
  .hero__intro,
  .hero__field,
  .hero__index{grid-column:1 / -1;grid-row:auto;}
  .hero__field{min-height:74px;}
  .hero__title h1{max-width:none;}
}

@media (max-width:520px){
  :root{--pad-y:40px;--pad-x:20px;}
  body{font-size:16.5px;}
  .masthead{padding:18px var(--pad-x);}
  .masthead nav ul{gap:6px 16px;}
  .hero__index ul{flex-direction:column;gap:8px;}
}