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

:root{
  --bg:#f4f2ed;
  --bg-alt:#e6e3dc;
  --dark:#16151a;
  --ink:#16151a;
  --muted:#6d6a63;
  --blue:#1f3fa8;
  --red:#c0452e;
  --rule:#c9c5bc;
  --sans:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --serif:Georgia,'Times New Roman',serif;
  --mono:ui-monospace,'SFMono-Regular',Consolas,'Liberation Mono',monospace;
  --gap:24px;
  --step:88px;
}

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

.wrap{max-width:1200px;margin:0 auto;padding:0 28px;width:100%}

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

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

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

h1{
  font-size:clamp(2.4rem,6.2vw,4.6rem);
  line-height:.98;
  letter-spacing:-.03em;
}
h1 .l2{display:block;color:var(--muted);font-weight:700}

h2{
  font-size:clamp(1.55rem,3vw,2.3rem);
  line-height:1.06;
  letter-spacing:-.02em;
  margin-bottom:18px;
}

h3{
  font-size:1.1rem;
  line-height:1.3;
  letter-spacing:.01em;
  margin:34px 0 8px;
}

p{margin:0 0 20px}
.lead{font-size:1.18rem;color:#2a282d}

.cap{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
}

/* ---------- perforación (motivo de película) ---------- */

.perf{
  height:9px;
  background:repeating-linear-gradient(to right,var(--ink) 0 8px,transparent 8px 24px);
  opacity:.3;
}
.perf--light{background:repeating-linear-gradient(to right,var(--bg) 0 8px,transparent 8px 24px);opacity:.45}

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

.site-head{border-bottom:1px solid var(--rule)}
.site-head .wrap{
  display:flex;flex-wrap:wrap;align-items:baseline;
  gap:14px 28px;padding-top:20px;padding-bottom:18px;
}
.brand{
  font-family:var(--sans);font-weight:800;font-size:1.22rem;
  letter-spacing:-.02em;color:var(--ink);text-decoration:none;
}
.brand:hover{color:var(--blue)}
.brand span{color:var(--red)}
.site-nav{margin-left:auto}
.site-nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px 22px;margin:0;padding:0}
.site-nav a{
  font-family:var(--sans);font-size:.9rem;font-weight:600;
  color:var(--ink);text-decoration:none;letter-spacing:.01em;
  padding-bottom:2px;border-bottom:2px solid transparent;
}
.site-nav a:hover{border-bottom-color:var(--blue);color:var(--blue)}
.site-nav a[aria-current="page"]{border-bottom-color:var(--red)}

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

.hero{padding:64px 0 76px}
.hero .grid{row-gap:56px;align-items:end}

.hero-rail{grid-column:1/3;grid-row:1/3;border-left:2px solid var(--ink);padding-left:14px}
.hero-rail ol{list-style:none;margin:0;padding:0}
.hero-rail li{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;
  color:var(--muted);display:flex;align-items:center;gap:9px;
  padding:9px 0;border-bottom:1px solid var(--rule);
}
.hero-rail li:last-child{border-bottom:0}
.hero-rail li::before{
  content:"";width:7px;height:7px;background:var(--red);flex:0 0 7px;
}
.hero-rail li:nth-child(2n)::before{background:var(--blue)}

.hero-text{grid-column:3/13;grid-row:1}
.hero-text p{max-width:34em;margin-top:26px}

.hero-fig{grid-column:8/13;grid-row:2;justify-self:end;max-width:620px;margin:0;width:100%}
.hero-fig img{border:2px solid var(--ink);width:100%}
.hero-fig figcaption{margin-top:9px;text-align:right}

.hero-note{grid-column:3/9;grid-row:2;align-self:end}
.hero-note p{margin:0;font-size:.98rem;color:var(--muted)}
.hero-note .kicker{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--red);display:block;margin-bottom:8px;
}

/* ---------- bandas y escenas ---------- */

.band{padding:var(--step) 0}
.band--alt{background:var(--bg-alt)}
.band--dark{background:var(--dark);color:var(--bg)}
.band--dark h2,.band--dark h3{color:var(--bg)}
.band--dark .cap{color:#a5a19a}
.band--dark a{color:#9fb2ee}
.band--dark a:focus-visible{background:#2a2833;outline-color:#9fb2ee}

.scene-mark{
  grid-column:1/13;
  display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);
  align-items:baseline;
  border-bottom:1px solid var(--rule);
  padding-bottom:11px;margin-bottom:38px;
}
.band--dark .scene-mark{border-bottom-color:#3a3841}
.scene-mark .num{
  grid-column:1/2;
  font-family:var(--mono);font-size:.95rem;font-weight:700;
  color:var(--red);letter-spacing:.06em;
}
.scene-mark .kicker{
  grid-column:2/10;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);
}

.scene h2{grid-column:2/11}
.scene .body{grid-column:2/9}
.scene .body>:last-child{margin-bottom:0}

.list{grid-column:2/11;margin:8px 0 0;padding:0 0 0 20px;columns:2;column-gap:44px}
.list li{margin:0 0 12px;break-inside:avoid;padding-left:4px}
.list li::marker{color:var(--blue)}
.list--single{columns:1}

.note{
  grid-column:2/11;margin-top:30px;
  border-left:2px solid var(--red);padding:2px 0 2px 18px;
  color:var(--muted);font-size:.98rem;
}
.note p{margin:0}

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

.detail-fig{grid-column:2/7;margin:0}
.detail-fig img{border:2px solid #43414b;width:100%}
.detail-fig figcaption{margin-top:10px}
.detail-text{grid-column:8/13}
.detail-text>:last-child{margin-bottom:0}

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

.page-head{padding:62px 0 10px}
.page-head .grid{row-gap:22px}
.page-head .num{
  grid-column:1/2;
  font-family:var(--mono);font-size:.95rem;font-weight:700;color:var(--red);
}
.page-head h1{grid-column:2/12;font-size:clamp(2.1rem,4.6vw,3.4rem)}
.page-head .lead{grid-column:2/9;margin:0}

.doc{padding:56px 0 var(--step)}
.doc .block{
  grid-column:1/13;
  display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);
  padding-top:34px;border-top:1px solid var(--rule);
}
.doc .block:first-child{border-top:0;padding-top:0}
.doc .block .num{
  grid-column:1/2;
  font-family:var(--mono);font-size:.9rem;font-weight:700;color:var(--red);
}
.doc .block h2{grid-column:2/11}
.doc .block .body{grid-column:2/9}
.doc .block .body>:last-child{margin-bottom:0}
.doc .block .list{grid-column:2/11}
.doc .block+.block{margin-top:38px}

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

.site-foot{background:var(--dark);color:var(--bg)}
.site-foot .perf-row{padding:20px 0 34px}
.site-foot .cols{
  display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);
  row-gap:34px;padding-bottom:52px;
}
.foot-a{grid-column:1/7}
.foot-b{grid-column:8/13}
.foot-name{font-family:var(--sans);font-weight:800;font-size:1.3rem;letter-spacing:-.02em;margin:0 0 12px}
.foot-name span{color:var(--red)}
.foot-a p{color:#b8b4ac;font-size:.98rem;max-width:34em;margin:0}
.site-foot ul{list-style:none;margin:0 0 18px;padding:0}
.site-foot li{margin-bottom:8px}
.site-foot a{color:var(--bg);text-decoration:none;border-bottom:1px solid #4b4954;font-family:var(--sans);font-size:.94rem}
.site-foot a:hover{border-bottom-color:#9fb2ee;color:#cdd6f3}
.site-foot a:focus-visible{outline:2px solid #9fb2ee;outline-offset:3px;background:#2a2833}
.foot-mail{font-family:var(--mono);font-size:.86rem;letter-spacing:.02em}
.foot-legal{border-top:1px solid #2e2c36;padding:20px 0 40px;color:#8b877f;font-size:.84rem;font-family:var(--sans)}

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

@media (max-width:1000px){
  .hero-fig{grid-column:6/13}
  .hero-note{grid-column:3/6}
  .detail-fig{grid-column:2/8}
  .detail-text{grid-column:2/12;margin-top:34px}
  .scene .body,.doc .block .body{grid-column:2/11}
}

@media (max-width:760px){
  :root{--step:52px;--gap:16px}
  body{font-size:17px}
  .wrap{padding:0 20px}
  .site-head .wrap{padding-top:16px;padding-bottom:14px}
  .site-nav{margin-left:0;width:100%}
  .site-nav ul{gap:6px 18px}

  .hero{padding:40px 0 48px}
  .hero .grid{row-gap:34px}
  .hero-rail{grid-column:1/13;grid-row:auto;border-left:0;border-top:2px solid var(--ink);padding:0}
  .hero-rail ol{display:flex;flex-wrap:wrap;gap:0 18px}
  .hero-rail li{border-bottom:0;padding:10px 0}
  .hero-text,.hero-note,.hero-fig{grid-column:1/13;grid-row:auto;justify-self:stretch;max-width:none}

  .scene-mark{margin-bottom:26px}
  .scene-mark .num{grid-column:1/3}
  .scene-mark .kicker{grid-column:3/13}
  .scene h2,.scene .body,.list,.note,
  .detail-fig,.detail-text,
  .page-head h1,.page-head .lead,
  .doc .block h2,.doc .block .body,.doc .block .list{grid-column:1/13}
  .page-head .num,.doc .block .num{grid-column:1/13;margin-bottom:6px}
  .list{columns:1}
  .page-head{padding:36px 0 6px}
  .doc{padding:34px 0 var(--step)}

  .foot-a,.foot-b{grid-column:1/13}
}