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

:root{
  --bg:#eef1e8;
  --bg-alt:#e2e7dc;
  --bg-dark:#2c3a2c;
  --ink:#1f2620;
  --ink-soft:#6d7468;
  --ink-inv:#eef1e8;
  --accent:#5f7a46;
  --accent-2:#b4655a;
  --sans: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
  --band: 128px;
  --gutter: 24px;
}

*{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;
}

/* ---------- rejilla de 12 columnas ---------- */

.grid{
  max-width:1220px;
  margin:0 auto;
  padding:0 28px;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:var(--gutter);
}

.col-text{ grid-column:4 / 10; }      /* 6 columnas centradas */
.col-list{ grid-column:4 / 11; }      /* 7 columnas, alineado a la izquierda */
.col-wide{ grid-column:3 / 11; }      /* 8 columnas para la imagen principal */

/* ---------- bandas y ritmo ---------- */

.band{ padding:var(--band) 0; }
.band--alt{ background:var(--bg-alt); }
.band--dark{ background:var(--bg-dark); color:var(--ink-inv); }
.band--tight{ padding-top:0; }

.band + .band{ padding-top:0; }
.band--alt + .band, .band--dark + .band,
.band + .band--alt, .band + .band--dark{ padding-top:var(--band); }

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

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

h1{
  font-size:clamp(2.15rem,5.1vw,3.55rem);
  line-height:.98;
  letter-spacing:-.028em;
  max-width:16ch;
}

h2{
  font-size:clamp(1.5rem,2.7vw,2.05rem);
  line-height:1.08;
  letter-spacing:-.02em;
  margin-bottom:26px;
}

h3{
  font-size:1.14rem;
  line-height:1.25;
  letter-spacing:-.01em;
  margin:44px 0 14px;
}

p{ margin:0 0 24px; max-width:68ch; }
p:last-child{ margin-bottom:0; }

.lede{
  font-size:1.16rem;
  color:var(--ink-soft);
  font-family:var(--serif);
}

.eyebrow{
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent-2);
  margin:0 0 22px;
}

.caption{
  font-family:var(--sans);
  font-size:.78rem;
  line-height:1.55;
  letter-spacing:.02em;
  color:var(--ink-soft);
  text-align:center;
  margin:22px auto 0;
  max-width:52ch;
}

a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
a:hover{ color:var(--accent-2); }

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

.band--dark a{ color:#c6d3b3; }
.band--dark a:hover{ color:#e6bdb6; }
.band--dark a:focus-visible{ outline-color:#c6d3b3; }
.band--dark .caption{ color:#a9b6a4; }
.band--dark .eyebrow{ color:#d09b93; }

/* ---------- listas ---------- */

ul,ol{ margin:0 0 24px; padding-left:1.25em; }
li{ margin-bottom:12px; }
li::marker{ color:var(--accent); }
ol li::marker{ font-family:var(--sans); font-size:.85em; font-weight:700; }

.plain{ list-style:none; padding-left:0; }
.plain li{
  padding-left:1.6em;
  position:relative;
}
.plain li::before{
  content:"—";
  position:absolute;
  left:0;
  color:var(--accent-2);
}

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

.site-head{ padding:34px 0 0; }

.nav{
  grid-column:1 / -1;
  display:flex;
  flex-wrap:wrap;
  gap:14px 34px;
  align-items:baseline;
  font-family:var(--sans);
  font-size:.78rem;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.nav a{ color:var(--ink); text-decoration:none; }
.nav a:hover{ color:var(--accent); }
.nav .brand{
  font-weight:800;
  letter-spacing:.1em;
  margin-right:auto;
}

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

.hero{
  min-height:76vh;
  display:flex;
  align-items:flex-end;
  padding:96px 0 96px;
}
.hero .grid{ width:100%; }
.hero-inner{
  grid-column:3 / 11;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.hero h1{ margin:0 auto; max-width:19ch; }
.hero .lede{ margin:30px auto 0; max-width:46ch; }

/* ---------- imágenes ---------- */

.figure-main{
  grid-column:3 / 11;
  margin:0;
  padding:96px 0;
}
.figure-main img{
  width:100%;
  height:auto;
  display:block;
}

.dark-layout{
  grid-column:2 / 12;
  display:grid;
  grid-template-columns:repeat(10,1fr);
  column-gap:var(--gutter);
  align-items:start;
}
.dark-figure{
  grid-column:1 / 5;
  margin:0;
}
.dark-figure img{
  width:100%;
  height:auto;
  display:block;
}
.dark-figure .caption{ text-align:left; margin-left:0; }
.dark-text{ grid-column:6 / 11; }
.dark-text p{ max-width:60ch; }

/* ---------- páginas de texto ---------- */

.page-head{ padding:96px 0 0; }
.page-head h1{ max-width:20ch; }
.page-head .lede{ margin-top:26px; }

.doc .col-text > h2{ margin-top:88px; }
.doc .col-text > h2:first-child{ margin-top:0; }

.about-first{ font-size:21px; line-height:1.62; }

.rule-dash{
  border:0;
  height:auto;
  text-align:center;
  margin:76px 0;
  color:var(--accent-2);
  font-family:var(--sans);
  overflow:visible;
}
.rule-dash::before{
  content:"— — —";
  letter-spacing:.4em;
  font-size:.8rem;
}

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

.site-foot{
  background:var(--bg-alt);
  padding:120px 0;
  margin-top:var(--band);
}
.foot-inner{
  grid-column:4 / 10;
  text-align:center;
}
.foot-brand{
  font-family:var(--sans);
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-size:.95rem;
  margin:0 0 30px;
}
.foot-nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px 32px;
  font-family:var(--sans);
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:30px;
}
.foot-nav a{ color:var(--ink); text-decoration:none; }
.foot-nav a:hover{ color:var(--accent); }
.foot-mail{ margin:0 0 26px; }
.foot-note{
  font-family:var(--sans);
  font-size:.78rem;
  line-height:1.6;
  color:var(--ink-soft);
  margin:0 auto;
  max-width:56ch;
}

/* ---------- adaptación a pantallas medianas y pequeñas ---------- */

@media (max-width:1000px){
  .col-text,.col-list,.col-wide,
  .figure-main,.hero-inner,.dark-layout,.foot-inner{
    grid-column:2 / 12;
  }
}

@media (max-width:720px){
  :root{ --band:72px; }
  body{ font-size:17px; }
  .grid{ padding:0 20px; column-gap:16px; }
  .col-text,.col-list,.col-wide,
  .figure-main,.hero-inner,.dark-layout,.foot-inner{
    grid-column:1 / -1;
  }
  .hero{ min-height:auto; padding:64px 0 40px; }
  .hero-inner{ text-align:left; align-items:flex-start; }
  .hero h1{ max-width:none; }
  .hero .lede{ margin-left:0; text-align:left; }
  .figure-main{ padding:56px 0; }
  .caption{ text-align:left; margin-left:0; }
  .dark-layout{ display:block; }
  .dark-figure{ margin-bottom:44px; }
  .site-head{ padding-top:26px; }
  .nav{ gap:10px 22px; font-size:.72rem; letter-spacing:.12em; }
  .nav .brand{ width:100%; margin-right:0; }
  .page-head{ padding-top:56px; }
  .doc .col-text > h2{ margin-top:60px; }
  .site-foot{ padding:80px 0; }
  .foot-inner{ text-align:left; }
  .foot-nav{ justify-content:flex-start; }
  .rule-dash{ margin:56px 0; text-align:left; }
  .about-first{ font-size:19px; }
}