/* Prurvina — hoja de estilo general */

:root{
  --bg:#181a19;
  --bg-alt:#202422;
  --bg-contrast:#eef0ee;
  --text:#e6e9e6;
  --muted:#8f9691;
  --text-dark:#181a19;
  --accent:#5fae86;
  --accent2:#d8c07a;
  --col-gap:24px;
}

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

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

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.7;
  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;}

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

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

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

h1,h2,h3{margin:0;}

h1{
  font-size:clamp(2.45rem,6vw,4.4rem);
  font-weight:700;
  letter-spacing:-0.035em;
  line-height:1.03;
}

h2{
  font-size:clamp(1.45rem,2.6vw,2.05rem);
  font-weight:600;
  letter-spacing:-0.018em;
  line-height:1.22;
  margin-bottom:1.1rem;
}

h3{
  font-size:1.06rem;
  font-weight:600;
  letter-spacing:0.01em;
  margin-bottom:.45rem;
}

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

.cap{
  font-size:13px;
  line-height:1.5;
  color:var(--muted);
  font-style:italic;
  margin-top:.7rem;
}

.lead{font-size:1.06rem;color:var(--text);}

.muted{color:var(--muted);}

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

.site-header{
  padding:26px 0 20px;
  border-bottom:1px solid rgba(143,150,145,.28);
}

.header-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:14px 28px;
}

.brand{
  font-size:1.12rem;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--text);
  text-decoration:none;
}
.brand:hover{color:var(--accent);}

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

.site-nav a{
  font-size:14px;
  color:var(--muted);
  text-decoration:none;
  letter-spacing:.02em;
  padding-bottom:2px;
  border-bottom:1px solid transparent;
}
.site-nav a:hover{color:var(--text);border-bottom-color:var(--accent);}
.site-nav a[aria-current="page"]{color:var(--text);border-bottom-color:var(--accent2);}

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

.hero{padding:84px 0 76px;}

.hero h1{grid-column:1 / 9;}

.hero-lead{
  grid-column:1 / 5;
  margin-top:34px;
  color:var(--text);
}

.hero-meta{
  grid-column:1 / 5;
  margin-top:20px;
  font-size:13px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent2);
}

.hero-figure{
  grid-column:9 / 13;
  grid-row:2 / 5;
  margin-top:-1.4rem;
  max-width:480px;
  justify-self:end;
}

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

.band-a{background:var(--bg);}
.band-b{background:var(--bg-alt);}

.band-contrast{
  background:var(--bg-contrast);
  color:var(--text-dark);
}
.band-contrast .cap{color:#55605a;}
.band-contrast .snum{color:#8a7433;}
.band-contrast a{color:#2f6b4d;}

section{padding:96px 0;}

.snum{
  grid-column:1 / 2;
  font-size:13px;
  letter-spacing:.18em;
  color:var(--accent2);
  margin:.55rem 0 0;
}

.col-narrow{grid-column:3 / 9;}
.col-wide{grid-column:3 / 11;}
.col-full{grid-column:3 / 13;}

.rule{
  border:0;
  border-top:1px solid rgba(95,174,134,.5);
  margin:0;
}
.band-contrast .rule{border-top-color:rgba(24,26,25,.35);}

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

ul.plain,ol.plain{margin:0;padding:0 0 0 1.1rem;}
ul.plain li,ol.plain li{margin-bottom:.7rem;}
ul.plain li::marker{color:var(--accent);}
ol.plain li::marker{color:var(--accent);font-variant-numeric:tabular-nums;}

.cols2{
  grid-column:3 / 13;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:48px;
  row-gap:0;
  margin-top:1.6rem;
}
.cols2 ul{margin:0;}

.block-gap{margin-top:2.2rem;}

/* ---------- sección de detalle con imagen ---------- */

.detail-figure{
  grid-column:3 / 8;
  max-width:460px;
}

.detail-text{grid-column:8 / 13;}

/* ---------- página Sobre el proyecto ---------- */

.about-labels{
  grid-column:1 / 4;
  margin:.4rem 0 0;
  padding:0;
  list-style:none;
}
.about-labels li{
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  padding:14px 0;
  border-top:1px solid rgba(95,174,134,.4);
}
.about-labels li:last-child{border-bottom:1px solid rgba(95,174,134,.4);}

.about-text{grid-column:5 / 12;}

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

.page-head{padding:70px 0 30px;}
.page-head h1{grid-column:1 / 10;font-size:clamp(2rem,4.4vw,3.1rem);}
.page-head .lead{grid-column:1 / 7;margin-top:26px;color:var(--muted);}

.doc{grid-column:3 / 11;}
.doc h2{margin-top:0;}
.doc-block{margin-bottom:3.2rem;}
.doc-block:last-child{margin-bottom:0;}

/* ---------- contacto ---------- */

.contact-line{
  font-size:1.2rem;
  letter-spacing:.01em;
}

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

.site-footer{
  background:var(--bg-contrast);
  color:var(--text-dark);
  padding:70px 0 56px;
}

.footer-grid{row-gap:34px;}

.footer-brand{grid-column:1 / 6;}
.footer-brand .name{
  font-size:clamp(1.9rem,4vw,2.8rem);
  font-weight:700;
  letter-spacing:-0.03em;
  line-height:1.05;
}
.footer-brand p{
  margin-top:.9rem;
  font-size:13px;
  line-height:1.6;
  color:#55605a;
  max-width:30ch;
}

.footer-nav{grid-column:6 / 9;}
.footer-nav ul{list-style:none;margin:0;padding:0;}
.footer-nav li{margin-bottom:.55rem;}
.footer-nav a{
  color:var(--text-dark);
  font-size:14px;
  text-decoration:none;
  border-bottom:1px solid rgba(24,26,25,.25);
}
.footer-nav a:hover{border-bottom-color:#2f6b4d;color:#2f6b4d;}

.footer-contact{grid-column:9 / 13;}
.footer-contact .label{
  font-size:13px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#8a7433;
  margin-bottom:.6rem;
}
.footer-contact a{
  color:var(--text-dark);
  font-size:1.02rem;
  word-break:break-word;
}
.footer-contact .note{
  margin-top:1.1rem;
  font-size:13px;
  color:#55605a;
}

/* ---------- adaptación ---------- */

@media (max-width:900px){
  .wrap{padding:0 24px;}
  section{padding:64px 0;}
  .hero{padding:56px 0 52px;}

  .hero h1{grid-column:1 / 13;}
  .hero-lead,.hero-meta{grid-column:1 / 13;}
  .hero-figure{
    grid-column:1 / 13;
    grid-row:auto;
    margin-top:38px;
    justify-self:start;
    max-width:420px;
  }

  .snum{grid-column:1 / 13;margin:0 0 .6rem;}
  .col-narrow,.col-wide,.col-full,.cols2,
  .detail-figure,.detail-text,
  .about-labels,.about-text,.doc{grid-column:1 / 13;}

  .detail-figure{margin-bottom:34px;max-width:100%;}

  .page-head{padding:52px 0 22px;}
  .page-head h1,.page-head .lead{grid-column:1 / 13;}

  .footer-brand,.footer-nav,.footer-contact{grid-column:1 / 13;}
}

@media (max-width:640px){
  body{font-size:16.5px;}
  .wrap{padding:0 20px;}
  section{padding:56px 0;}
  .cols2{grid-template-columns:minmax(0,1fr);row-gap:0;}
  .cols2 ul + ul{margin-top:.7rem;}
  .site-nav ul{gap:8px 18px;}
}