/* Kobrase — hoja de estilo única para todas las páginas */

:root{
  --bg:#181a19;
  --bg-alt:#202422;
  --bg-light:#eef0ee;
  --text:#e6e9e6;
  --text-dim:#8f9691;
  --text-dark:#181a19;
  --text-dark-dim:#4c5450;
  --accent:#5fae86;
  --accent-deep:#2f6b4f;
  --gold:#d8c07a;
  --gold-deep:#7a6420;
  --serif:Georgia,'Times New Roman',serif;
  --sans:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --step:80px;
}

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

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

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.8;
  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;}
a:focus-visible,:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

h1,h2,h3{font-family:var(--serif);font-weight:700;margin:0;}
h1{font-size:clamp(2.25rem,5.4vw,4rem);line-height:1.04;letter-spacing:-.015em;}
h2{font-size:clamp(1.3rem,1.9vw,1.55rem);line-height:1.2;letter-spacing:-.005em;}
h3{font-size:1.0625rem;line-height:1.35;margin:0 0 8px;}
p{margin:0 0 1.35em;}
p:last-child{margin-bottom:0;}

/* ---------- rejilla ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:0 24px;}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;}

/* ---------- bandas ---------- */
.band{padding-block:calc(var(--step)/2);}
.band--alt{background:var(--bg-alt);}
.band--light{background:var(--bg-light);color:var(--text-dark);}
.band--light a{color:var(--accent-deep);}
.band--light .caption{color:var(--gold-deep);}
.band > .grid + .grid{margin-top:var(--step);}

/* ---------- cabecera ---------- */
.site-head{padding:22px 0 10px;}
.head-inner{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 28px;}
.wordmark{font-family:var(--serif);font-size:1.25rem;font-weight:700;letter-spacing:.01em;color:var(--text);text-decoration:none;}
.site-nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px;margin:0;padding:0;}
.site-nav a{font-size:.9375rem;color:var(--text-dim);text-decoration:none;padding-bottom:2px;border-bottom:1px solid transparent;}
.site-nav a:hover{color:var(--text);border-bottom-color:var(--accent);}

/* ---------- portada ---------- */
.hero{padding:56px 0 40px;}
.hero-title{grid-column:1 / 8;}
.hero-lead{grid-column:9 / 13;align-self:start;color:var(--text-dim);font-size:1rem;}
.hero-lead strong{color:var(--text);font-weight:600;}

.axis{position:relative;height:104px;margin-top:36px;}
.axis::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:var(--accent);}
.axis i{position:absolute;top:0;width:1px;background:rgba(95,174,134,.5);}
.axis i::after{content:"";position:absolute;left:-3px;bottom:-4px;width:8px;height:8px;background:var(--gold);}
.axis i:nth-child(1){left:0;height:96px;}
.axis i:nth-child(2){left:31%;height:52px;}
.axis i:nth-child(3){left:67%;height:74px;}

/* ---------- imagen principal ---------- */
.media{margin:0;align-items:end;padding-bottom:calc(var(--step)/2);}
.media img{grid-column:4 / 13;grid-row:1;width:100%;}
.media figcaption{grid-column:1 / 4;grid-row:1;align-self:end;}

.caption{font-size:12px;line-height:1.55;color:var(--gold);margin:0;}

/* ---------- secciones de texto ---------- */
.sec-head{grid-column:1 / 4;}
.sec-head h2::before{content:"";display:block;width:8px;height:8px;background:var(--accent);margin-bottom:18px;}
.band--light .sec-head h2::before{background:var(--accent-deep);}
.sec-num{display:block;font-size:12px;color:var(--gold);letter-spacing:.08em;margin-top:14px;}
.band--light .sec-num{color:var(--gold-deep);}
.prose{grid-column:4 / 11;}
.prose h3{margin-top:34px;}
.prose ul,.prose ol{margin:0 0 1.35em;padding-left:1.1em;}
.prose li{margin-bottom:.5em;padding-left:.25em;}
.prose li::marker{color:var(--accent);}
.band--light .prose li::marker{color:var(--accent-deep);}
.prose li:last-child{margin-bottom:0;}

/* ---------- imagen de detalle en la banda clara ---------- */
.detail-fig{grid-column:2 / 6;margin:0;}
.detail-fig img{width:100%;}
.detail-fig figcaption{margin-top:10px;}
.detail-text{grid-column:7 / 13;}
.detail-text h2::before{content:"";display:block;width:8px;height:8px;background:var(--accent-deep);margin-bottom:18px;}
.detail-text .lede{margin-top:20px;}

/* ---------- página "sobre el proyecto" ---------- */
.axis-grid{position:relative;}
.axis-grid::before{content:"";position:absolute;top:0;bottom:0;left:calc(25% - 6px);width:1px;background:rgba(143,150,145,.35);}
.axis-grid .grid + .grid{margin-top:var(--step);}

/* ---------- contacto ---------- */
.contact-line{font-family:var(--serif);font-size:1.25rem;margin-top:8px;}

/* ---------- pie ---------- */
.site-foot{background:var(--bg-light);color:var(--text-dark);padding:56px 0 44px;}
.foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 24px;}
.foot-name{font-family:var(--serif);font-size:1.5rem;font-weight:700;}
.foot-mail{font-size:1rem;}
.site-foot a{color:var(--accent-deep);}
.foot-rule{height:1px;background:rgba(24,26,25,.22);margin:20px 0 18px;}
.foot-nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px 26px;margin:0 0 16px;padding:0;}
.foot-nav a{font-size:.9375rem;}
.foot-note{font-size:12px;line-height:1.65;color:var(--text-dark-dim);max-width:62ch;margin:0;}

/* ---------- adaptación a pantallas estrechas ---------- */
@media (max-width:880px){
  :root{--step:48px;}
  body{font-size:16.5px;}
  .grid{gap:16px;}
  .hero{padding:36px 0 28px;}
  .hero-title,.hero-lead,.sec-head,.prose,.detail-fig,.detail-text{grid-column:1 / -1;}
  .media img,.media figcaption{grid-column:1 / -1;grid-row:auto;}
  .media figcaption{margin-top:10px;}
  .media{padding-bottom:var(--step);}
  .axis{height:72px;margin-top:26px;}
  .axis i:nth-child(1){height:66px;}
  .axis i:nth-child(2){height:36px;}
  .axis i:nth-child(3){height:50px;}
  .sec-head{margin-bottom:18px;}
  .sec-num{margin-top:8px;}
  .axis-grid::before{display:none;}
  .detail-text{margin-top:26px;}
  .site-head{padding:16px 0 6px;}
  .site-foot{padding:40px 0 36px;}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important;}
}