/* Krastazalma — hoja de estilo única */

:root{
  --bg:#101a24;
  --bg-alt:#16232f;
  --bg-light:#e9edf0;
  --ink:#e3e9ee;
  --ink-dim:#8b9aa6;
  --ink-dark:#101a24;
  --accent:#3fb3ae;
  --accent-2:#d8a15a;
  --serif:Georgia,'Times New Roman',serif;
  --sans:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --gap:28px;
  --pad:96px;
}

*,*::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.72;
  overflow-x:hidden;
}

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

a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(63,179,174,.5);}
a:hover{border-bottom-color:var(--accent);}
a:focus-visible,
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

p{margin:0 0 1.15em;}
p:last-child{margin-bottom:0;}

h1,h2,h3{font-family:var(--serif);font-weight:400;text-transform:none;}
h1{font-size:clamp(2.1rem,5.4vw,3.65rem);line-height:1.06;letter-spacing:-.01em;margin:0;}
h2{font-size:clamp(1.55rem,2.9vw,2.15rem);line-height:1.18;margin:0 0 .7em;}
h3{font-size:1.18rem;font-style:italic;line-height:1.35;margin:2.1em 0 .55em;}

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

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

.meta{
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-dim);
  line-height:1.6;
}

.num{
  grid-column:1 / 2;
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.2em;
  color:var(--accent-2);
  padding-top:.55rem;
}

/* ---------- Cabecera ---------- */

.site-head{border-bottom:1px solid rgba(63,179,174,.35);}
.site-head .wrap{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:14px 32px;
  padding-top:26px;
  padding-bottom:26px;
}
.brand{
  font-family:var(--serif);
  font-size:1.32rem;
  letter-spacing:.02em;
  color:var(--ink);
  border-bottom:0;
}
.brand:hover{color:var(--accent);}
.site-nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px 26px;margin:0;padding:0;}
.site-nav a{
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-dim);
  border-bottom:1px solid transparent;
}
.site-nav a:hover{color:var(--ink);border-bottom-color:var(--accent);}

/* ---------- Portada ---------- */

.hero{padding:78px 0 var(--pad);}
.hero .grid{align-items:start;}
.hero .eyebrow{grid-column:1 / 9;margin:0 0 26px;}
.hero h1{grid-column:1 / 9;grid-row:2;}
.hero .lede{grid-column:1 / 5;grid-row:3;padding-top:38px;color:var(--ink);}
.hero .lede p{font-size:1.02rem;}
.hero figure{
  grid-column:9 / 13;
  grid-row:2 / span 2;
  margin:0;
  align-self:start;
  max-width:480px;
  padding-top:calc(2.12 * clamp(2.1rem,5.4vw,3.65rem));
}
figure figcaption{
  font-family:var(--serif);
  font-style:italic;
  font-size:.9rem;
  line-height:1.5;
  color:var(--ink-dim);
  margin-top:14px;
}

/* ---------- Secciones ---------- */

.band{border-top:1px solid rgba(63,179,174,.4);}
.band--alt{background:var(--bg-alt);}
.band > .wrap{padding-top:var(--pad);padding-bottom:var(--pad);}

.col-a{grid-column:2 / 8;}
.col-b{grid-column:3 / 11;}
.col-wide{grid-column:2 / 12;}

.lead{font-size:1.06rem;}

ul.list,ol.list{margin:1.4em 0 0;padding-left:1.15em;}
ul.list{list-style:none;padding-left:0;}
ul.list li{position:relative;padding-left:24px;margin-bottom:.62em;}
ul.list li::before{
  content:"";
  position:absolute;
  left:0;top:.78em;
  width:11px;height:1px;
  background:var(--accent);
}
ol.list li{margin-bottom:.62em;padding-left:.3em;}
ol.list li::marker{color:var(--accent-2);font-size:.85em;letter-spacing:.1em;}

.two-col{
  grid-column:2 / 12;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 56px;
  margin-top:2.2em;
}
.two-col > div{min-width:0;}
.two-col h3{margin-top:0;}
.two-col ul.list{margin-top:.8em;}

.rule{
  grid-column:1 / 13;
  height:1px;
  background:rgba(63,179,174,.4);
  margin:3.2em 0 0;
}

.note{
  color:var(--ink-dim);
  font-size:.96rem;
  border-left:1px solid var(--accent-2);
  padding-left:18px;
  margin-top:2.1em;
}

/* ---------- Sección contrastada ---------- */

.band--light{background:var(--bg-light);color:var(--ink-dark);border-top:1px solid rgba(16,26,36,.18);}
.band--light h2,.band--light h3{color:var(--ink-dark);}
.band--light .meta{color:#5c6b76;}
.band--light .num{color:#a97c33;}
.band--light a{color:#1c6f6c;border-bottom-color:rgba(28,111,108,.5);}
.band--light figcaption{color:#5c6b76;}
.band--light ul.list li::before{background:#1c6f6c;}
.band--light .note{color:#41505b;border-left-color:#a97c33;}
.band--light .rule{background:rgba(16,26,36,.2);}

.light-fig{grid-column:2 / 6;margin:0;}
.light-text{grid-column:7 / 12;}

/* ---------- About ---------- */

.about-marks{
  grid-column:1 / 4;
  padding-top:.4rem;
}
.about-marks div{
  border-top:1px solid rgba(63,179,174,.4);
  padding:14px 0;
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-dim);
}
.about-marks div:first-child{border-top:0;padding-top:0;}
.about-body{grid-column:6 / 13;}

/* ---------- Páginas de texto ---------- */

.page-head{padding:70px 0 0;}
.page-head h1{grid-column:1 / 10;font-size:clamp(1.9rem,4.2vw,3rem);}
.page-head .eyebrow{grid-column:1 / 10;margin:0 0 22px;}
.doc{grid-column:3 / 11;}
.doc h2{margin-top:2.4em;}
.doc h2:first-of-type{margin-top:0;}

/* ---------- Pie ---------- */

.site-foot{background:var(--bg-light);color:var(--ink-dark);}
.site-foot .wrap{
  display:grid;
  grid-template-columns:1.4fr .9fr 1fr;
  gap:40px;
  padding-top:64px;
  padding-bottom:64px;
}
.foot-name{
  font-family:var(--serif);
  font-size:clamp(1.9rem,4vw,2.7rem);
  line-height:1.05;
  margin:0 0 12px;
}
.site-foot p{color:#41505b;font-size:.95rem;}
.site-foot a{color:#1c6f6c;border-bottom-color:rgba(28,111,108,.5);}
.site-foot ul{list-style:none;margin:0;padding:0;}
.site-foot li{margin-bottom:.5em;}
.site-foot .foot-nav a{
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  border-bottom:1px solid transparent;
}
.site-foot .foot-nav a:hover{border-bottom-color:#1c6f6c;}
.foot-mail{font-family:var(--serif);font-size:1.05rem;}
.site-foot .meta{color:#5c6b76;}
.foot-bottom{border-top:1px solid rgba(16,26,36,.2);}
.foot-bottom .wrap{
  display:block;
  padding-top:20px;
  padding-bottom:26px;
}

/* ---------- Adaptación ---------- */

@media (max-width:1000px){
  :root{--pad:72px;--gap:22px;}
  .hero .lede{grid-column:1 / 6;}
  .col-a{grid-column:2 / 10;}
  .col-b{grid-column:2 / 11;}
  .light-fig{grid-column:2 / 7;}
  .light-text{grid-column:7 / 13;}
  .about-body{grid-column:5 / 13;}
}

@media (max-width:760px){
  :root{--pad:56px;--gap:0px;}
  body{font-size:16px;}
  .wrap{padding:0 20px;}
  .grid{display:block;}
  .hero{padding:44px 0 var(--pad);}
  .hero .lede{padding-top:26px;}
  .hero figure,
  .light-fig{padding-top:34px;max-width:100%;}
  .num{padding-top:0;margin-bottom:14px;display:block;}
  .two-col{grid-template-columns:1fr;gap:0;margin-top:1.6em;}
  .two-col > div + div{margin-top:1.8em;}
  .rule{margin-top:2.4em;}
  .about-marks{margin-bottom:30px;}
  .about-marks div:first-child{border-top:1px solid rgba(63,179,174,.4);padding-top:14px;}
  .site-head .wrap{padding-top:20px;padding-bottom:20px;}
  .site-nav ul{gap:6px 18px;}
  .site-foot .wrap{grid-template-columns:1fr;gap:32px;}
}