/* Gragerda — hoja de muestras / specimen sheet */

:root{
  --bg:#eef1e8;
  --bg-alt:#e2e7dc;
  --bg-dark:#2c3a2c;
  --ink:#1f2620;
  --ink-soft:#6d7468;
  --ink-inv:#eef1e8;
  --accent:#5f7a46;
  --accent-2:#b4655a;
  --rule:#c3cbba;
  --mono:ui-monospace,Consolas,'Liberation Mono',monospace;
  --sans:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --gap:88px;
}

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

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

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  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(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}

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

/* ---------- lámina / sheet ---------- */

.sheet{
  max-width:1180px;
  margin:40px auto;
  border:1px solid var(--accent);
  background:var(--bg);
  padding:0;
}

.pad{padding:0 40px}

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

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

h1,h2,h3,.meta,.label,.num,nav,figcaption,.tag{
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:.09em;
}

h1{
  font-size:clamp(1.55rem,3.6vw,2.5rem);
  line-height:1.25;
  font-weight:600;
  margin:0;
  letter-spacing:.045em;
}

h2{
  font-size:1.02rem;
  font-weight:600;
  line-height:1.45;
  margin:0 0 18px;
}

h3{
  font-size:.86rem;
  font-weight:600;
  margin:26px 0 8px;
  color:var(--ink);
}

p{margin:0 0 18px}
p:last-child{margin-bottom:0}

.lead{font-size:1.09rem;line-height:1.7}

.num{
  display:block;
  font-size:.72rem;
  color:var(--accent-2);
  margin-bottom:6px;
  letter-spacing:.2em;
}

.tag{
  font-size:.66rem;
  color:var(--accent-2);
  letter-spacing:.22em;
}

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

.masthead{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:14px 28px;
  padding:22px 40px 18px;
  border-bottom:1px solid var(--rule);
}

.brand{
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:.95rem;
  font-weight:600;
  color:var(--ink);
  text-decoration:none;
}
.brand:hover{color:var(--accent)}

.masthead nav ul{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:8px 22px;
  margin:0;
  padding:0;
}

.masthead nav a{
  font-size:.7rem;
  letter-spacing:.16em;
  color:var(--ink-soft);
  text-decoration:none;
  padding-bottom:3px;
  border-bottom:1px solid transparent;
}
.masthead nav a:hover,
.masthead nav a[aria-current="page"]{
  color:var(--ink);
  border-bottom-color:var(--accent);
}

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

.hero{padding:52px 40px 0}

.hero-top{align-items:start;row-gap:28px}
.hero-title{grid-column:1/9}
.hero-title p{margin-top:20px;max-width:56ch;color:var(--ink-soft)}

.card{
  border:1px solid var(--rule);
  padding:16px 18px;
  background:var(--bg-alt);
}

.card dl{margin:0;font-family:var(--mono);font-size:.7rem;letter-spacing:.08em}
.card dt{color:var(--accent-2);text-transform:uppercase;letter-spacing:.16em;font-size:.63rem}
.card dd{
  margin:2px 0 12px;
  color:var(--ink);
  text-transform:none;
  letter-spacing:.03em;
  line-height:1.55;
}
.card dd:last-child{margin-bottom:0}

.hero-card{grid-column:9/13}

.hero-figure{
  margin:44px 0 0;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:24px;
  align-items:end;
}
.hero-figure img{grid-column:1/6;border:1px solid var(--rule)}
.hero-figure figcaption{
  grid-column:7/11;
  font-size:.68rem;
  line-height:1.7;
  letter-spacing:.08em;
  color:var(--ink-soft);
  text-transform:none;
  border-left:1px solid var(--accent-2);
  padding-left:14px;
}

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

.rule{
  position:relative;
  height:1px;
  background:var(--rule);
  margin:var(--gap) 40px;
}
.rule::before,.rule::after{
  content:"";
  position:absolute;
  top:-5px;
  width:1px;
  height:11px;
  background:var(--accent);
}
.rule::before{left:0}
.rule::after{right:0}

.rule-note{
  margin:var(--gap) 40px;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:24px;
  align-items:center;
}
.rule-note .line{
  grid-column:1/8;
  position:relative;
  height:1px;
  background:var(--rule);
}
.rule-note .line::before{
  content:"";position:absolute;left:0;top:-5px;width:1px;height:11px;background:var(--accent);
}
.rule-note .card{grid-column:9/13}

section.block{padding:0 40px}
section.block + section.block{margin-top:var(--gap)}

.two-col{align-items:start;row-gap:26px}
.two-col .text{grid-column:1/8}
.two-col .side{grid-column:9/13}
.wide{grid-column:1/9}

/* listas */

ul.check,ol.steps{margin:0 0 18px;padding-left:0;list-style:none}
ul.check li,ol.steps li{
  position:relative;
  padding-left:24px;
  margin-bottom:9px;
}
ul.check li::before{
  content:"";
  position:absolute;left:0;top:.72em;
  width:9px;height:1px;background:var(--accent);
}
ol.steps{counter-reset:s}
ol.steps li{counter-increment:s;padding-left:34px}
ol.steps li::before{
  content:counter(s,decimal-leading-zero);
  position:absolute;left:0;top:.1em;
  font-family:var(--mono);font-size:.7rem;
  color:var(--accent-2);letter-spacing:.1em;
}

/* tabla de patrones */

table{
  width:100%;
  border-collapse:collapse;
  font-size:.94rem;
  margin:6px 0 18px;
}
caption{
  text-align:left;
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--accent-2);
  padding-bottom:8px;
}
th,td{
  text-align:left;
  padding:9px 12px 9px 0;
  border-bottom:1px solid var(--rule);
  vertical-align:top;
}
th{
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-soft);
  font-weight:600;
}

/* ---------- sección contrastada ---------- */

.dark{
  background:var(--bg-dark);
  color:var(--ink-inv);
  margin-top:var(--gap);
  padding:64px 40px;
}
.dark h2,.dark h3{color:var(--ink-inv)}
.dark .num{color:#d9a29a}
.dark a{color:#c2d6a8}
.dark .figure-wrap{grid-column:1/5}
.dark .figure-wrap img{border:1px solid rgba(238,241,232,.35)}
.dark figcaption{
  font-size:.66rem;letter-spacing:.09em;line-height:1.7;
  text-transform:none;color:#aeb8a6;margin-top:10px;
}
.dark .dark-text{grid-column:6/12}
.dark ul.check li::before{background:#c2d6a8}
.dark :focus-visible{outline-color:#c2d6a8}

/* ---------- alternas ---------- */

.alt{
  background:var(--bg-alt);
  margin-top:var(--gap);
  padding:60px 40px;
}
.alt + .rule,.dark + .rule{margin-top:var(--gap)}

/* ---------- about ---------- */

.about-grid{align-items:start;row-gap:26px}
.about-grid .text{grid-column:1/8}
.about-grid .stack{grid-column:9/13;display:flex;flex-direction:column;gap:16px}

/* ---------- páginas legales ---------- */

.doc{grid-column:1/9}
.doc-side{grid-column:10/13}

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

.site-footer{
  max-width:1180px;
  margin:0 auto 52px;
  padding:0 40px;
}
.footer-inner{padding-top:26px;border-top:1px solid var(--rule)}
.footer-top{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:8px 24px;
  align-items:baseline;
}
.footer-top .name{
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:.26em;
  font-size:.82rem;
}
.footer-top .mail{font-size:.86rem}
.footer-line{height:1px;background:var(--rule);margin:18px 0}
.footer-nav ul{
  list-style:none;display:flex;flex-wrap:wrap;
  gap:8px 22px;margin:0 0 12px;padding:0;
}
.footer-nav a{
  font-family:var(--mono);text-transform:uppercase;
  font-size:.68rem;letter-spacing:.16em;
  color:var(--ink-soft);text-decoration:none;
}
.footer-nav a:hover{color:var(--accent);text-decoration:underline}
.footer-note{font-size:.82rem;color:var(--ink-soft);max-width:70ch;margin:0}

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

@media (max-width:900px){
  :root{--gap:52px}
  .sheet{margin:20px 14px}
  .pad,.hero,section.block,.masthead,.dark,.alt,.site-footer{padding-left:22px;padding-right:22px}
  .rule,.rule-note{margin-left:22px;margin-right:22px}
  .dark,.alt{padding-top:44px;padding-bottom:44px}
  .hero{padding-top:36px}
  .hero-title,.hero-card,.two-col .text,.two-col .side,.wide,
  .about-grid .text,.about-grid .stack,.doc,.doc-side,
  .dark .figure-wrap,.dark .dark-text,.rule-note .line,.rule-note .card{
    grid-column:1/-1;
  }
  .hero-figure{display:block}
  .hero-figure img{width:100%;max-width:420px}
  .hero-figure figcaption{
    border-left:none;border-top:1px solid var(--accent-2);
    padding:12px 0 0;margin-top:14px;max-width:52ch;
  }
  .rule-note .line{margin-bottom:20px}
  .dark .figure-wrap img{width:100%;max-width:380px}
  .dark .dark-text{margin-top:28px}
  table{font-size:.9rem}
  th,td{padding-right:8px}
}

@media (max-width:520px){
  body{font-size:16px}
  .masthead{padding-top:18px}
  .masthead nav ul{gap:6px 16px}
  .sheet{margin:12px 8px}
  .pad,.hero,section.block,.masthead,.dark,.alt,.site-footer{padding-left:16px;padding-right:16px}
  .rule,.rule-note{margin-left:16px;margin-right:16px}
  table,thead,tbody,tr,th,td{display:block}
  thead{display:none}
  tr{border-bottom:1px solid var(--rule);padding:10px 0}
  td{border:none;padding:2px 0}
  td::before{
    content:attr(data-l);
    display:block;
    font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;
    text-transform:uppercase;color:var(--accent-2);
  }
}