/* Vesami — hoja de estilo común
   Sistema modular «tessera»: retícula de 12 columnas, juntas visibles de 4px */

:root{
  --paper:#f5f0df;
  --paper-alt:#e9e1c9;
  --ink-dark:#2f2a1e;
  --text:#241f16;
  --text-soft:#736b55;
  --accent:#8a6a1f;
  --accent-2:#4a6b52;
  --seam:4px;
  --serif:Georgia,'Times New Roman',serif;
  --sans:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}

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

body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--sans);
  font-size:18px;
  line-height:1.9;
  overflow-x:hidden;
}

.wrap{
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
}

/* ---------- retícula modular ---------- */

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

.mod{
  background:var(--paper-alt);
  padding:24px;
}

.mod--paper{background:var(--paper)}
.mod--dark{background:var(--ink-dark);color:var(--paper)}
.mod--flat{padding:0}

.c2{grid-column:span 2}
.c3{grid-column:span 3}
.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:span 12}

.fill-a{background:var(--accent)}
.fill-b{background:var(--accent-2)}
.fill-c{background:var(--ink-dark)}
.fill-d{background:var(--paper-alt)}
.tile{min-height:96px}

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

h1,h2,h3{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.3;
  margin:0 0 24px;
}

h1{font-size:2.15rem}
h2{font-size:1.6rem}
h3{font-size:1.2rem;margin-bottom:12px}

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

.lead{font-size:1.05rem}

.caption,figcaption{
  font-size:14px;
  line-height:1.7;
  color:var(--text-soft);
  font-family:var(--sans);
}

.mod--dark .caption,.mod--dark figcaption{color:#cfc7ac}

.num{
  font-family:var(--serif);
  font-size:14px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent-2);
  display:block;
  margin-bottom:12px;
}

.mod--dark .num{color:#9db8a4}

a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
.mod--dark a{color:#d9bd7a}

a:focus-visible,
:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:2px;
}
.mod--dark a:focus-visible{outline-color:#d9bd7a}

ul{margin:0 0 24px;padding:0;list-style:none}
ul li{
  position:relative;
  padding-left:24px;
  margin-bottom:12px;
}
ul li::before{
  content:"";
  position:absolute;
  left:0;
  top:.75em;
  width:8px;
  height:8px;
  background:var(--accent);
}
.mod--dark ul li::before{background:#d9bd7a}

/* ---------- separador de teselas ---------- */

.seam-row{
  height:24px;
  margin:0;
  border:0;
  background:
    repeating-linear-gradient(90deg,
      var(--accent) 0 24px,
      transparent 24px 28px,
      var(--paper-alt) 28px 52px,
      transparent 52px 56px,
      var(--accent-2) 56px 80px,
      transparent 80px 84px,
      var(--ink-dark) 84px 108px,
      transparent 108px 112px);
}

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

.site-head{
  background:var(--paper);
  padding:24px 0;
}

.head-grid{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:12px 24px;
}

.brand{
  font-family:var(--serif);
  font-size:1.35rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text);
  text-decoration:none;
}
.brand:hover{color:var(--accent)}

.site-nav ul{display:flex;flex-wrap:wrap;gap:4px;margin:0}
.site-nav li{padding:0;margin:0}
.site-nav li::before{display:none}
.site-nav a{
  display:block;
  padding:6px 12px;
  background:var(--paper-alt);
  font-size:15px;
  line-height:1.5;
  color:var(--text);
  text-decoration:none;
}
.site-nav a:hover{background:var(--accent);color:var(--paper)}
.site-nav a[aria-current="page"]{
  background:var(--ink-dark);
  color:var(--paper);
}

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

.hero{margin-top:24px}

.hero-title{
  grid-column:1 / 9;
  background:var(--paper-alt);
  padding:48px 32px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.hero-title h1{margin-bottom:0;font-size:2.4rem}

.hero-tile-1{grid-column:9 / 11;background:var(--accent)}
.hero-tile-2{grid-column:11 / 13;background:var(--accent-2)}

.hero-intro{
  grid-column:9 / 13;
  background:var(--paper-alt);
  padding:24px;
}

.hero-side{grid-column:1 / 3;background:var(--ink-dark)}

.hero-figure{
  grid-column:3 / 9;
  margin:0;
  background:var(--paper-alt);
}
.hero-figure img{display:block;width:100%;height:auto}

.hero-caption{
  grid-column:9 / 13;
  background:var(--paper-alt);
  padding:24px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:24px;
}

.hero-tile-3{grid-column:1 / 3;background:var(--accent)}
.hero-tile-4{grid-column:3 / 5;background:var(--paper-alt)}
.hero-tile-5{grid-column:5 / 13;background:var(--accent-2)}
.strip{min-height:24px}

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

.band{padding:72px 0}
.band--alt{background:var(--paper-alt)}
.band--alt .mod{background:var(--paper)}
.band--dark{background:var(--ink-dark);color:var(--paper)}
.band--dark h2,.band--dark h3{color:var(--paper)}
.band--dark .mod{background:#3a3427;color:var(--paper)}
.band--dark .mod--flat{background:transparent}

.detail-figure{margin:0;background:transparent}
.detail-figure img{display:block;width:100%;height:auto}
.detail-figure figcaption{padding-top:12px}

.offset-2{grid-column:3 / 9}
.offset-right{grid-column:8 / 13}
.start-1-8{grid-column:1 / 9}
.start-2-7{grid-column:2 / 8}
.start-5-13{grid-column:5 / 13}
.start-1-6{grid-column:1 / 7}
.start-7-13{grid-column:7 / 13}

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

.site-foot{background:var(--paper);padding-bottom:48px}
.foot-grid{margin-top:24px}
.foot-grid .mod{background:var(--paper-alt);min-height:100%}
.foot-grid h2{font-size:1.05rem;margin-bottom:12px}
.foot-grid ul{margin:0}
.foot-grid li{margin-bottom:6px;font-size:15px}
.foot-nav li::before{background:var(--accent-2)}
.foot-note{font-size:14px;line-height:1.7;color:var(--text-soft)}

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

@media (max-width:980px){
  .hero-title{grid-column:1 / 13;padding:32px 24px}
  .hero-title h1{font-size:2rem}
  .hero-tile-1{grid-column:1 / 7;min-height:24px}
  .hero-tile-2{grid-column:7 / 13;min-height:24px}
  .hero-intro{grid-column:1 / 13}
  .hero-side{display:none}
  .hero-figure{grid-column:1 / 13}
  .hero-caption{grid-column:1 / 13}
  .hero-tile-3{grid-column:1 / 5}
  .hero-tile-4{grid-column:5 / 9}
  .hero-tile-5{grid-column:9 / 13}

  .c4,.c5,.c6,.c7,.c8{grid-column:span 12}
  .c2,.c3{grid-column:span 6}
  .offset-2,.offset-right,.start-1-8,.start-2-7,
  .start-5-13,.start-1-6,.start-7-13{grid-column:1 / 13}
  .tile{min-height:48px}
}

@media (max-width:640px){
  body{font-size:17px}
  .wrap{padding:0 16px}
  .band{padding:48px 0}
  h1,.hero-title h1{font-size:1.75rem}
  h2{font-size:1.35rem}
  .mod{padding:20px}
  .hero-title{padding:24px 20px}
  .site-nav ul{gap:4px}
  .site-nav a{font-size:14px;padding:6px 10px}
  .c2,.c3{grid-column:span 12}
  .tile{min-height:36px}
}