/* Brorito — hoja de estilo común */

:root {
  --paper: #fcfbf9;
  --paper-alt: #efeeea;
  --ink: #141414;
  --ink-soft: #6a6a66;
  --accent: #c22a22;
  --accent-2: #3c5a4a;
  --rhythm: 76px;
  --gap: 24px;
}

* { 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: 18px;
  line-height: 1.9;
  overflow-x: hidden;
}

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

a { color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(194, 42, 34, .38); }
a:hover { border-bottom-color: var(--accent); }

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

/* ---------- rejilla de 12 columnas ---------- */

.sheet {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 28px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gap);
}

.col-main { grid-column: 2 / span 6; }
.col-wide { grid-column: 2 / span 8; }

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

.topbar {
  border-bottom: 1px solid rgba(20, 20, 20, .16);
}

.topbar .sheet {
  align-items: baseline;
  padding-top: 22px;
  padding-bottom: 18px;
  row-gap: 10px;
}

.brand {
  grid-column: 1 / span 4;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 21px;
  letter-spacing: .06em;
  color: var(--ink);
  border-bottom: 0;
}

.brand span {
  display: block;
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-2);
  line-height: 1.6;
}

.nav {
  grid-column: 5 / span 8;
  justify-self: end;
}

.nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
}

.nav a {
  font-size: 15px;
  letter-spacing: .04em;
  color: var(--ink);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}

.nav a:hover { border-bottom-color: var(--accent); }
.nav a[aria-current="page"] { border-bottom-color: var(--accent); color: var(--accent); }

/* ---------- lomo cosido ---------- */

.spine {
  grid-column: 1 / span 1;
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding-top: 14px;
}

.spine i {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--accent);
}

.spine i:nth-child(3n) { background: var(--accent-2); width: 13px; }

/* ---------- portada ---------- */

.hero .sheet { padding-top: var(--rhythm); padding-bottom: var(--rhythm); }

.hero h1 {
  grid-column: 2 / span 9;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: 46px;
  line-height: 1.3;
  letter-spacing: -.005em;
  max-width: 17ch;
}

.rule-double {
  grid-column: 2 / span 8;
  margin: 30px 0 26px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid rgba(20, 20, 20, .3);
  height: 4px;
}

.lede {
  grid-column: 2 / span 8;
  margin: 0;
  font-size: 21px;
  line-height: 1.75;
  color: var(--ink);
}

.hero-figure {
  grid-column: 7 / span 6;
  margin: 46px 0 0;
}

.hero-figure img { width: 100%; }

figcaption {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-soft);
  text-align: left;
}

/* ---------- ritmo de secciones ---------- */

.band { padding: var(--rhythm) 0; }
.band--alt { background: var(--paper-alt); }

.folio,
.band p.folio,
.prose p.folio {
  grid-column: 1 / span 12;
  margin: 0 0 34px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gap);
}

.folio > span {
  grid-column: 1 / span 3;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-2);
}

.folio::after {
  content: "";
  grid-column: 1 / span 12;
  grid-row: 2;
  border-top: 1px solid rgba(20, 20, 20, .22);
  margin-top: 10px;
}

.band h2 {
  grid-column: 2 / span 8;
  margin: 0 0 22px;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: 31px;
  line-height: 1.3;
}

.band h3 {
  grid-column: 2 / span 6;
  margin: 34px 0 10px;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.35;
}

.band p { grid-column: 2 / span 6; margin: 0 0 26px; }
.band p.intro { grid-column: 2 / span 8; font-size: 20px; }

.band ul, .band ol {
  grid-column: 2 / span 6;
  margin: 0 0 26px;
  padding-left: 22px;
}

.band li { margin-bottom: 12px; }
.band li::marker { color: var(--accent); }

.term { display: block; font-size: 15px; color: var(--ink-soft); margin-top: 2px; }

/* ---------- separador tipográfico ---------- */

.dinkus {
  grid-column: 1 / span 12;
  display: flex;
  justify-content: center;
  gap: 9px;
  margin: 8px 0 40px;
}

.dinkus i { display: block; width: 16px; height: 2px; background: var(--accent); }

/* ---------- sección oscura con imagen de detalle ---------- */

.band--dark {
  background: var(--ink);
  color: var(--paper);
}

.band--dark .folio > span { color: #93b0a1; }
.band--dark .folio::after { border-top-color: rgba(252, 251, 249, .28); }
.band--dark h2, .band--dark h3 { color: var(--paper); }
.band--dark p { color: var(--paper); }
.band--dark li::marker { color: #e2665e; }
.band--dark figcaption { color: #a5a5a0; }
.band--dark a { color: #e2665e; border-bottom-color: rgba(226, 102, 94, .45); }
.band--dark .dinkus i { background: #e2665e; }
.band--dark :focus-visible { outline-color: #e2665e; }

.detail-figure {
  grid-column: 2 / span 4;
  margin: 0;
}

.detail-figure img { width: 100%; }

.band--dark .detail-text { grid-column: 7 / span 6; }
.band--dark .detail-text p { grid-column: auto; }
.band--dark .detail-text h2,
.band--dark .detail-text h3 { grid-column: auto; }
.band--dark .detail-text ul { grid-column: auto; padding-left: 22px; }

/* ---------- listas de comprobación ---------- */

.check {
  grid-column: 2 / span 7;
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
}

.check li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 14px;
}

.check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  width: 18px;
  height: 2px;
  background: var(--accent);
}

/* ---------- tabla de referencia ---------- */

.specs { grid-column: 2 / span 8; margin: 0 0 26px; }

.specs dl {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(150px, 1fr) 2fr;
  column-gap: var(--gap);
}

.specs dt {
  padding: 12px 0;
  border-top: 1px solid rgba(20, 20, 20, .18);
  font-size: 15px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--accent-2);
  line-height: 1.6;
}

.specs dd {
  margin: 0;
  padding: 12px 0;
  border-top: 1px solid rgba(20, 20, 20, .18);
}

/* ---------- páginas interiores ---------- */

.page-head .sheet { padding-top: var(--rhythm); padding-bottom: 12px; }

.page-head h1 {
  grid-column: 2 / span 8;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: 38px;
  line-height: 1.3;
}

.page-head .kicker {
  grid-column: 2 / span 8;
  margin: 0 0 16px;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-2);
}

.page-head .rule-double { margin-bottom: 0; }

.prose .sheet { padding-top: 46px; padding-bottom: var(--rhythm); }

.prose h2 {
  grid-column: 2 / span 6;
  margin: 38px 0 12px;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: 25px;
  line-height: 1.3;
}

.prose h2:first-of-type { margin-top: 0; }

.prose p { grid-column: 2 / span 6; margin: 0 0 26px; }
.prose ul { grid-column: 2 / span 6; margin: 0 0 26px; padding-left: 22px; }
.prose li { margin-bottom: 12px; }
.prose li::marker { color: var(--accent); }

.dropcap::first-letter {
  float: left;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 66px;
  line-height: .82;
  color: var(--accent);
  padding: 6px 12px 0 0;
}

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

.site-footer {
  border-top: 1px solid rgba(20, 20, 20, .2);
  padding: 54px 24px 60px;
  text-align: center;
}

.site-footer .mark {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  letter-spacing: .08em;
  margin: 0 0 20px;
}

.site-footer nav ul {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.site-footer nav li { display: flex; align-items: center; }

.site-footer nav li + li::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 14px;
  margin: 0 16px;
  background: rgba(20, 20, 20, .35);
}

.site-footer nav a { font-size: 15px; color: var(--ink); border-bottom: 1px solid transparent; }
.site-footer nav a:hover { border-bottom-color: var(--accent); }

.site-footer .mail { margin: 0 0 14px; font-size: 17px; }

.site-footer .note {
  margin: 0 auto;
  max-width: 56ch;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-soft);
}

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

@media (max-width: 900px) {
  :root { --rhythm: 56px; --gap: 18px; }
  .hero h1 { font-size: 38px; grid-column: 2 / span 11; }
  .page-head h1 { font-size: 32px; grid-column: 2 / span 11; }
  .hero-figure { grid-column: 2 / span 11; }
  .detail-figure { grid-column: 2 / span 6; }
  .band--dark .detail-text { grid-column: 2 / span 11; margin-top: 30px; }
  .col-main, .band p, .band h3, .band ul, .band ol,
  .prose p, .prose h2, .prose ul { grid-column: 2 / span 11; }
  .band h2, .band p.intro, .lede, .rule-double,
  .check, .specs, .page-head h1, .page-head .kicker { grid-column: 2 / span 11; }
  .folio > span { grid-column: 1 / span 8; }
}

@media (max-width: 620px) {
  :root { --rhythm: 46px; }
  body { font-size: 17px; line-height: 1.85; }
  .sheet { padding: 0 18px; grid-template-columns: 26px repeat(11, 1fr); }
  .hero h1 { font-size: 30px; }
  .page-head h1 { font-size: 27px; }
  .lede { font-size: 19px; }
  .band h2 { font-size: 25px; }
  .brand { grid-column: 1 / span 12; }
  .nav { grid-column: 1 / span 12; justify-self: start; }
  .spine { flex-direction: row; flex-wrap: wrap; gap: 7px; padding-top: 6px; }
  .spine i { width: 2px; height: 16px; }
  .spine i:nth-child(3n) { height: 10px; width: 2px; }
  .specs dl { grid-template-columns: 1fr; }
  .specs dd { border-top: 0; padding-top: 0; }
  .dropcap::first-letter { font-size: 52px; }
}