/* ============================================================
   Brandetripe — hoja de estilo única
   Dirección visual: "márgenes cosidos" (papel frío, negro y verde)
   ============================================================ */

:root{
  --paper:#f1f2f0;
  --paper-alt:#e3e5e2;
  --ink-bg:#141614;
  --text:#171917;
  --text-2:#6a6e6a;
  --text-inv:#f1f2f0;
  --accent:#2a6b3c;
  --accent-2:#8a6a20;

  --col-gap:28px;
  --rhythm:80px;
  --wrap:1180px;
}

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

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

body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  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;}

/* ---------- puntada / stitch ---------- */

.st{
  --stc:var(--accent);
  background-image:
    repeating-linear-gradient(90deg,var(--stc) 0 11px,transparent 11px 19px),
    repeating-linear-gradient(90deg,var(--stc) 0 11px,transparent 11px 19px),
    repeating-linear-gradient(0deg,var(--stc) 0 11px,transparent 11px 19px),
    repeating-linear-gradient(0deg,var(--stc) 0 11px,transparent 11px 19px);
  background-size:100% 2px,100% 2px,2px 100%,2px 100%;
  background-position:0 0,0 100%,0 0,100% 0;
  background-repeat:no-repeat;
}
.st-l{
  --stc:var(--accent);
  background-image:repeating-linear-gradient(0deg,var(--stc) 0 11px,transparent 11px 19px);
  background-size:2px 100%;background-position:0 0;background-repeat:no-repeat;
}
.st-r{
  --stc:var(--accent);
  background-image:repeating-linear-gradient(0deg,var(--stc) 0 11px,transparent 11px 19px);
  background-size:2px 100%;background-position:100% 0;background-repeat:no-repeat;
}
.st-b{
  --stc:var(--accent);
  background-image:repeating-linear-gradient(90deg,var(--stc) 0 11px,transparent 11px 19px);
  background-size:100% 2px;background-position:0 100%;background-repeat:no-repeat;
}
.st-t{
  --stc:var(--accent);
  background-image:repeating-linear-gradient(90deg,var(--stc) 0 11px,transparent 11px 19px);
  background-size:100% 2px;background-position:0 0;background-repeat:no-repeat;
}
.st-gold{--stc:var(--accent-2);}
.st-pale{--stc:#5f8a6b;}

/* separador de puntada a lo ancho de la columna de texto */
.rule{
  border:0;margin:34px 0;height:2px;
  background-image:repeating-linear-gradient(90deg,var(--accent-2) 0 9px,transparent 9px 17px);
  background-size:100% 2px;background-repeat:no-repeat;
}
/* costura doble entre bloques mayores */
.rule-double{
  border:0;margin:0;height:8px;
  background-image:
    linear-gradient(var(--text),var(--text)),
    repeating-linear-gradient(90deg,var(--accent) 0 11px,transparent 11px 19px);
  background-size:100% 1px,100% 2px;
  background-position:0 0,0 6px;
  background-repeat:no-repeat;
  opacity:.85;
}

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

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px;}

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

.c1-8{grid-column:1 / span 8;}
.c9-12{grid-column:9 / span 4;}
.c1-5{grid-column:1 / span 5;}
.c1-6{grid-column:1 / span 6;}
.c1-7{grid-column:1 / span 7;}
.c2-8{grid-column:2 / span 7;}
.c6-12{grid-column:6 / span 7;}
.c7-12{grid-column:7 / span 6;}
.c8-12{grid-column:8 / span 5;}
.c1-4{grid-column:1 / span 4;}
.c5-10{grid-column:5 / span 6;}
.c3-9{grid-column:3 / span 7;}

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

h1,h2,h3{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  letter-spacing:-.012em;
  margin:0;
}
h1{font-size:clamp(2.1rem,4.6vw,3.6rem);line-height:1.05;}
h2{font-size:clamp(1.42rem,2.3vw,2.05rem);line-height:1.12;margin:0 0 18px;}
h3{font-size:1.14rem;line-height:1.3;margin:30px 0 10px;}

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

.lead{font-size:1.06rem;line-height:1.72;}

.cap,figcaption{
  font-size:13px;line-height:1.55;color:var(--text-2);
  font-family:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.num{
  font-size:13px;color:var(--accent-2);letter-spacing:.06em;
  display:block;margin-bottom:10px;
}
.eyebrow{
  font-size:13px;color:var(--accent-2);margin:0 0 20px;
}

a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
a:hover{text-decoration-thickness:2px;}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

/* listas */
ul.check,ul.plain{list-style:none;padding:0;margin:0 0 20px;}
ul.check li,ul.plain li{position:relative;padding-left:26px;margin-bottom:12px;}
ul.check li::before{
  content:"";position:absolute;left:0;top:.72em;width:12px;height:2px;
  background-image:repeating-linear-gradient(90deg,var(--accent) 0 4px,transparent 4px 7px);
}
ul.plain li::before{
  content:"";position:absolute;left:2px;top:.66em;width:7px;height:7px;
  border:1.5px solid var(--accent-2);
}
ol.steps{padding-left:0;margin:0 0 20px;list-style:none;counter-reset:s;}
ol.steps li{counter-increment:s;position:relative;padding-left:38px;margin-bottom:14px;}
ol.steps li::before{
  content:counter(s,decimal-leading-zero);
  position:absolute;left:0;top:0;color:var(--accent-2);font-size:13px;
  font-family:Georgia,"Times New Roman",serif;
}

dl.gloss{margin:0;}
dl.gloss dt{font-family:Georgia,"Times New Roman",serif;font-size:1.05rem;margin-top:22px;}
dl.gloss dd{margin:6px 0 0;color:var(--text);}

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

.site-head{padding:26px 0 18px;}
.head-in{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:14px 28px;}
.brand{
  font-family:Georgia,"Times New Roman",serif;font-size:1.3rem;
  color:var(--text);text-decoration:none;letter-spacing:.01em;
}
.brand:hover{text-decoration:underline;text-underline-offset:4px;}
.brand small{display:block;font-family:inherit;font-size:12px;color:var(--accent-2);letter-spacing:.05em;}
.site-nav ul{display:flex;flex-wrap:wrap;gap:6px 22px;list-style:none;margin:0;padding:0;}
.site-nav a{font-size:14.5px;color:var(--text);text-decoration:none;padding-bottom:3px;}
.site-nav a:hover,.site-nav a[aria-current="page"]{
  background-image:repeating-linear-gradient(90deg,var(--accent) 0 5px,transparent 5px 9px);
  background-size:100% 2px;background-position:0 100%;background-repeat:no-repeat;
}

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

.hero{padding:6px 0 var(--rhythm);}
.hero-pad{padding:24px;}
.hero-in{padding:clamp(26px,3.4vw,42px);}
.hero-grid{row-gap:44px;}
.hero-lead{padding-left:26px;}
.hero-side{padding-right:26px;align-self:end;}
.hero-side .cap{margin:0 0 14px;}
.hero-fig{margin:0;align-self:end;}
.hero-fig .shot{padding:12px;}
.hero-fig figcaption{margin-top:12px;max-width:34ch;}
h1 .sub{display:block;color:var(--accent);}

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

.band{padding:var(--rhythm) 0;}
.band-alt{background:var(--paper-alt);}
.band-ink{background:var(--ink-bg);color:var(--text-inv);}
.band-ink h2,.band-ink h3{color:var(--text-inv);}
.band-ink .cap,.band-ink figcaption,.band-ink .num{color:#a9b0a9;}
.band-ink a{color:#8fc79f;}
.band-ink .st,.band-ink .st-l,.band-ink .st-r,.band-ink .st-t,.band-ink .st-b{--stc:#3d6f4b;}

.blk{margin-bottom:var(--rhythm);}
.blk:last-child{margin-bottom:0;}
.pad-l{padding-left:26px;}
.pad-r{padding-right:26px;}
.pad-both{padding:0 26px;}
.inset{padding:26px;}

.note{background:var(--paper-alt);padding:24px 26px;}
.band-alt .note{background:var(--paper);}

/* sección oscura con la imagen de detalle */
.ink-grid{row-gap:40px;align-items:start;}
.detail-fig{margin:0;}
.detail-fig .shot{padding:10px;}
.detail-fig figcaption{margin-top:12px;}

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

.site-foot{background:var(--paper-alt);margin-top:0;}
.foot-rule{padding-top:0;}
.foot-pad{padding:16px;}
.foot-in{padding:clamp(24px,3vw,38px);}
.foot-grid{row-gap:32px;}
.foot-brand{font-family:Georgia,"Times New Roman",serif;font-size:1.25rem;margin:0 0 12px;}
.foot-nav ul{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:9px;}
.foot-nav a{color:var(--text);text-decoration:none;font-size:15px;}
.foot-nav a:hover{text-decoration:underline;text-underline-offset:3px;}
.foot-mail{font-size:15px;}
.foot-legal{margin-top:34px;font-size:13px;color:var(--text-2);}

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

.page-head{padding:10px 0 var(--rhythm);}
.page-head .st{padding:clamp(24px,3vw,38px);}
.page-head h1{max-width:20ch;}
.page-head .lead{margin-top:22px;max-width:62ch;color:var(--text-2);}

.prose h2{margin-top:0;}
.prose .blk p,.prose .blk li{max-width:74ch;}

/* ---------- responsive ---------- */

@media (max-width:980px){
  :root{--rhythm:56px;--col-gap:22px;}
  .c1-8,.c9-12,.c1-5,.c1-6,.c1-7,.c2-8,.c6-12,.c7-12,.c8-12,.c1-4,.c5-10,.c3-9{
    grid-column:1 / -1;
  }
  .hero-lead,.hero-side{padding:0;}
  .hero-lead{padding-top:26px;}
  .st-l,.st-r{background-image:repeating-linear-gradient(90deg,var(--stc) 0 11px,transparent 11px 19px);background-size:100% 2px;background-position:0 0;}
  .pad-l,.pad-r,.pad-both{padding-left:0;padding-right:0;}
  .hero-grid{row-gap:32px;}
}

@media (max-width:640px){
  :root{--rhythm:48px;}
  body{font-size:16.5px;}
  .wrap{padding:0 16px;}
  .hero-pad{padding:14px;}
  .hero-in{padding:20px;}
  .inset,.note{padding:20px 18px;}
  .foot-pad{padding:10px;}
  .foot-in{padding:22px 18px;}
  .site-nav ul{gap:6px 16px;}
}