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

:root{
  --bg:#1a1d15;
  --bg-alt:#22261c;
  --bg-contrast:#efeade;
  --tx:#e8e4d6;
  --tx2:#909486;
  --tx-dark:#1a1d15;
  --a1:#c07c3a;
  --a2:#8fa26a;
  --mono: ui-monospace, Consolas, 'Liberation Mono', monospace;
  --sans: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --rhythm:80px;
  --gap:24px;
}

*,*::before,*::after{box-sizing:border-box;}

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

body{
  margin:0;
  background:var(--bg);
  color:var(--tx);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.75;
  overflow-x:hidden;
}

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

a{color:var(--a1);text-underline-offset:4px;text-decoration-thickness:1px;}
a:hover{text-decoration-style:dashed;}
a:focus-visible,
:focus-visible{
  outline:2px dashed var(--a1);
  outline-offset:3px;
}

/* ---------- costuras (líneas de puntada) ---------- */

.stitch-all,
.stitch-l,
.stitch-r,
.stitch-t,
.stitch-b,
.stitch-lr,
.stitch-tb{
  background-repeat:no-repeat;
}

.stitch-all{
  background-image:
    repeating-linear-gradient(to right, var(--a1) 0 12px, transparent 12px 24px),
    repeating-linear-gradient(to right, var(--a1) 0 12px, transparent 12px 24px),
    repeating-linear-gradient(to bottom, var(--a1) 0 12px, transparent 12px 24px),
    repeating-linear-gradient(to bottom, var(--a1) 0 12px, transparent 12px 24px);
  background-size:100% 2px,100% 2px,2px 100%,2px 100%;
  background-position:0 0,0 100%,0 0,100% 0;
}

.stitch-l{
  background-image:repeating-linear-gradient(to bottom, var(--a1) 0 10px, transparent 10px 20px);
  background-size:2px 100%;
  background-position:0 0;
}
.stitch-r{
  background-image:repeating-linear-gradient(to bottom, var(--a1) 0 10px, transparent 10px 20px);
  background-size:2px 100%;
  background-position:100% 0;
}
.stitch-lr{
  background-image:
    repeating-linear-gradient(to bottom, var(--a1) 0 10px, transparent 10px 20px),
    repeating-linear-gradient(to bottom, var(--a1) 0 10px, transparent 10px 20px);
  background-size:2px 100%,2px 100%;
  background-position:0 0,100% 0;
}
.stitch-t{
  background-image:repeating-linear-gradient(to right, var(--a2) 0 10px, transparent 10px 20px);
  background-size:100% 2px;
  background-position:0 0;
}
.stitch-b{
  background-image:repeating-linear-gradient(to right, var(--a2) 0 10px, transparent 10px 20px);
  background-size:100% 2px;
  background-position:0 100%;
}
.stitch-tb{
  background-image:
    repeating-linear-gradient(to right, var(--a2) 0 10px, transparent 10px 20px),
    repeating-linear-gradient(to right, var(--a2) 0 10px, transparent 10px 20px);
  background-size:100% 2px,100% 2px;
  background-position:0 0,0 100%;
}

.pad-l{padding-left:28px;}
.pad-r{padding-right:28px;}
.pad-tb{padding-top:28px;padding-bottom:28px;}

/* separador de una columna de texto */
.rule{
  height:2px;
  border:0;
  margin:40px 0;
  background-image:repeating-linear-gradient(to right, var(--a1) 0 10px, transparent 10px 20px);
  background-size:100% 2px;
  background-repeat:no-repeat;
}

/* doble puntada entre bloques grandes */
.double-rule{
  height:8px;
  border:0;
  margin:0;
  background-image:
    linear-gradient(var(--a2),var(--a2)),
    repeating-linear-gradient(to right, var(--a1) 0 12px, transparent 12px 24px);
  background-size:100% 1px,100% 2px;
  background-position:0 0,0 6px;
  background-repeat:no-repeat;
}

/* ---------- rejilla ---------- */

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

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

.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:1 / -1;}

.at2{grid-column-start:2;}
.at4{grid-column-start:4;}
.at5{grid-column-start:5;}
.at6{grid-column-start:6;}
.at7{grid-column-start:7;}
.at8{grid-column-start:8;}
.at9{grid-column-start:9;}

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

h1,h2,h3,.meta,.navlink,.kicker{
  font-family:var(--mono);
  text-transform:uppercase;
  font-weight:600;
}

h1{
  font-size:clamp(30px,5.2vw,54px);
  line-height:1.12;
  letter-spacing:.04em;
  margin:0;
}

h2{
  font-size:clamp(19px,2.4vw,25px);
  line-height:1.3;
  letter-spacing:.09em;
  margin:0 0 22px;
}

h3{
  font-size:15px;
  line-height:1.45;
  letter-spacing:.12em;
  color:var(--a2);
  margin:34px 0 12px;
}

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

.kicker{
  font-size:12px;
  letter-spacing:.24em;
  color:var(--a2);
  margin:0 0 14px;
}

.num{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.22em;
  color:var(--a2);
  display:block;
  margin-bottom:10px;
}

.meta{
  font-size:12px;
  letter-spacing:.16em;
  color:var(--tx2);
}

.lead{
  font-size:19px;
  line-height:1.7;
  color:var(--tx);
}

.muted{color:var(--tx2);}

figcaption{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--tx2);
  margin-top:12px;
  max-width:46ch;
}

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

.check{list-style:none;padding-left:0;}
.check li{
  position:relative;
  padding-left:30px;
  margin-bottom:14px;
}
.check li::before{
  content:"×";
  position:absolute;
  left:6px;
  top:-1px;
  font-family:var(--mono);
  font-size:16px;
  color:var(--a1);
}

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

.site-header{
  padding:26px 0 22px;
  background-color:var(--bg-alt);
}

.header-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:18px 28px;
}

.brand{
  font-family:var(--mono);
  font-size:19px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--tx);
  text-decoration:none;
}
.brand span{color:var(--a1);}

.site-nav ul{
  display:flex;
  flex-wrap:wrap;
  gap:10px 26px;
  list-style:none;
  margin:0;
  padding:0;
}
.site-nav li{margin:0;}

.navlink{
  font-size:12px;
  letter-spacing:.17em;
  color:var(--tx2);
  text-decoration:none;
  padding-bottom:3px;
}
.navlink:hover{color:var(--tx);}
.navlink[aria-current="page"]{
  color:var(--tx);
  background-image:repeating-linear-gradient(to right, var(--a1) 0 6px, transparent 6px 12px);
  background-size:100% 2px;
  background-position:0 100%;
  background-repeat:no-repeat;
}

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

.hero{
  background-color:var(--bg-alt);
  padding:24px 0 0;
}

.hero-frame{
  margin:0 24px 24px;
  padding:56px 40px 48px;
}

.hero-top{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--gap);
  align-items:start;
}

.hero-title{grid-column:1 / span 8;}
.hero-title h1{max-width:16ch;}

.hero-intro{
  grid-column:9 / span 4;
  padding-left:26px;
  font-size:16px;
  line-height:1.7;
  color:var(--tx2);
  background-image:repeating-linear-gradient(to bottom, var(--a1) 0 10px, transparent 10px 20px);
  background-size:2px 100%;
  background-position:0 0;
  background-repeat:no-repeat;
}

.hero-bottom{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--gap);
  margin-top:56px;
  align-items:end;
}

.hero-note{
  grid-column:1 / span 5;
  padding-bottom:6px;
}

.hero-figure{
  grid-column:7 / span 6;
  margin:0;
}
.hero-figure .frame{padding:12px;}
.hero-figure img{width:100%;}

/* ---------- secciones ---------- */

main{display:block;}

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

.band-contrast{
  background-color:var(--bg-contrast);
  color:var(--tx-dark);
  padding:var(--rhythm) 0;
}
.band-contrast h2,
.band-contrast h3{color:var(--tx-dark);}
.band-contrast h3{color:#5d6b3c;}
.band-contrast .kicker,
.band-contrast .num{color:#5d6b3c;}
.band-contrast .muted,
.band-contrast figcaption{color:#5b5f51;}
.band-contrast a{color:#9a5c1f;}
.band-contrast .rule{
  background-image:repeating-linear-gradient(to right,#9a5c1f 0 10px, transparent 10px 20px);
}
.band-contrast .stitch-l,
.band-contrast .stitch-r,
.band-contrast .stitch-lr{
  background-image:repeating-linear-gradient(to bottom,#9a5c1f 0 10px, transparent 10px 20px);
}
.band-contrast .stitch-lr{
  background-image:
    repeating-linear-gradient(to bottom,#9a5c1f 0 10px, transparent 10px 20px),
    repeating-linear-gradient(to bottom,#9a5c1f 0 10px, transparent 10px 20px);
}
.band-contrast .check li::before{color:#9a5c1f;}
.band-contrast li::marker{color:#9a5c1f;}

.block + .block{margin-top:var(--rhythm);}

.aside-note{
  font-size:15.5px;
  line-height:1.7;
  color:var(--tx2);
  padding:26px 0 26px 26px;
}
.aside-note h3{margin-top:0;}

.detail-figure{margin:0;}
.detail-figure .frame{padding:10px;}
.detail-figure img{width:100%;}

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

.page-head{
  background-color:var(--bg-alt);
  padding:24px 0 0;
}
.page-head-frame{
  margin:0 24px 24px;
  padding:52px 40px 44px;
}
.page-head h1{max-width:20ch;}
.page-head .lead{
  margin-top:26px;
  max-width:62ch;
  color:var(--tx2);
}

.prose{max-width:70ch;}
.prose h2{margin-top:0;}

/* About: tres bloques de anchura distinta */
.about-blocks .about-b{padding:30px 28px;}
.about-blocks .about-b + .about-b{margin-top:64px;}
.about-b1{grid-column:1 / span 8;}
.about-b2{grid-column:5 / span 6;text-align:right;}
.about-b2 ul{text-align:left;display:inline-block;}
.about-b3{grid-column:3 / span 7;}

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

.site-footer{
  background-color:var(--bg-alt);
  padding-top:0;
}
.footer-frame{
  margin:24px;
  padding:44px 32px;
}
.footer-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--gap);
  align-items:start;
}
.footer-left{grid-column:1 / span 6;}
.footer-right{grid-column:8 / span 5;}
.footer-left .brand{font-size:17px;}
.footer-left p{
  margin-top:16px;
  font-size:15px;
  color:var(--tx2);
  max-width:44ch;
}
.footer-right ul{
  list-style:none;
  margin:0 0 22px;
  padding:0;
}
.footer-right li{margin-bottom:9px;}
.footer-mail{
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.08em;
}
.footer-bottom{
  margin-top:34px;
  padding-top:22px;
  font-size:12px;
  letter-spacing:.12em;
  font-family:var(--mono);
  text-transform:uppercase;
  color:var(--tx2);
  background-image:repeating-linear-gradient(to right, var(--a2) 0 10px, transparent 10px 20px);
  background-size:100% 1px;
  background-position:0 0;
  background-repeat:no-repeat;
}

/* ---------- tablet ---------- */

@media (max-width:900px){
  :root{--rhythm:56px;--gap:20px;}

  .hero-title{grid-column:1 / -1;}
  .hero-intro{
    grid-column:1 / -1;
    padding-left:0;
    padding-top:22px;
    background-image:repeating-linear-gradient(to right, var(--a1) 0 10px, transparent 10px 20px);
    background-size:100% 2px;
    background-position:0 0;
  }
  .hero-bottom{margin-top:40px;}
  .hero-note{grid-column:1 / -1;}
  .hero-figure{grid-column:1 / -1;}

  .c4,.c5,.c6,.c7,.c8{grid-column:1 / -1;}
  .at2,.at4,.at5,.at6,.at7,.at8,.at9{grid-column-start:1;}

  .about-b1,.about-b2,.about-b3{grid-column:1 / -1;}
  .about-b2{text-align:left;}

  .footer-left,.footer-right{grid-column:1 / -1;}
}

/* ---------- móvil ---------- */

@media (max-width:600px){
  :root{--rhythm:48px;}
  body{font-size:16.5px;}
  .wrap{padding:0 18px;}

  .hero-frame,
  .page-head-frame{
    margin:0 12px 16px;
    padding:34px 20px 30px;
  }
  .footer-frame{margin:16px 12px;padding:32px 20px;}

  .hero-title h1{max-width:none;}
  .pad-l{padding-left:18px;}
  .pad-r{padding-right:18px;}
  .aside-note{padding:20px 0 20px 18px;}
  .about-blocks .about-b{padding:22px 18px;}
  .about-blocks .about-b + .about-b{margin-top:40px;}

  .site-nav ul{gap:8px 18px;}
  .brand{font-size:16px;letter-spacing:.22em;}
}