/* Gramevi — hoja de estilo general */

:root{
  --bg:#efeff1;
  --bg-alt:#e1e1e5;
  --bg-dark:#251e2c;
  --ink:#1b1a1f;
  --ink-2:#6a6872;
  --ink-inv:#efeff1;
  --acc:#5c3a6b;
  --acc-2:#a07a2a;
  --sans:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:Georgia,"Times New Roman",serif;
  --gap:24px;
  --pad:32px;
}

*,*::before,*::after{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-wrap:break-word;
}

/* ---------- rejilla ---------- */

.wrap{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 var(--pad);
}

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

.c-a{grid-column:2 / 8;}   /* 6 columnas, campo libre a la derecha */
.c-b{grid-column:2 / 9;}   /* 7 columnas */
.c-c{grid-column:1 / 6;}   /* 5 columnas, pegado al borde izquierdo */
.c-d{grid-column:6 / 12;}  /* 6 columnas desplazadas a la derecha */
.c-e{grid-column:7 / 12;}  /* 5 columnas a la derecha */

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

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

h1{
  font-size:clamp(2.5rem,6.6vw,4.9rem);
  line-height:.98;
  letter-spacing:-.038em;
}

h2{
  font-size:clamp(1.55rem,3.1vw,2.35rem);
  line-height:1.06;
  letter-spacing:-.024em;
}

h3{
  font-size:1.12rem;
  line-height:1.25;
  letter-spacing:-.012em;
  margin:34px 0 8px;
}

p{margin:18px 0 0;}
p:first-child{margin-top:0;}

.lead{
  font-size:1.22rem;
  line-height:1.6;
}

.sub{
  font-family:var(--sans);
  font-size:.82rem;
  line-height:1.5;
  letter-spacing:.01em;
  color:var(--ink-2);
  font-weight:600;
}

.num{
  font-family:var(--sans);
  font-weight:700;
  font-size:.78rem;
  color:var(--acc-2);
  letter-spacing:.06em;
  display:block;
  margin-bottom:14px;
}

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

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

.dark a{color:#d9c08a;}
.dark a:focus-visible{outline-color:var(--acc-2);}

ul{
  margin:20px 0 0;
  padding:0;
  list-style:none;
}
ul li{
  position:relative;
  padding-left:22px;
  margin-bottom:12px;
}
ul li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:9px;
  height:3px;
  background:var(--acc);
}
.dark ul li::before{background:var(--acc-2);}

ol{margin:20px 0 0;padding-left:20px;}
ol li{margin-bottom:12px;}
ol li::marker{font-family:var(--sans);font-weight:700;color:var(--acc-2);}

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

.site-head{
  padding:26px 0 22px;
  border-bottom:1px solid rgba(27,26,31,.14);
}
.site-head .inner{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:12px 28px;
  justify-content:space-between;
}
.brand{
  font-family:var(--sans);
  font-weight:800;
  font-size:1.16rem;
  letter-spacing:-.02em;
  color:var(--ink);
  text-decoration:none;
}
.brand:hover{text-decoration:none;}
.site-nav ul{
  display:flex;
  flex-wrap:wrap;
  gap:8px 22px;
  margin:0;
}
.site-nav li{padding:0;margin:0;}
.site-nav li::before{display:none;}
.site-nav a{
  font-family:var(--sans);
  font-size:.92rem;
  font-weight:600;
  color:var(--ink);
  text-decoration:none;
  padding-bottom:3px;
  border-bottom:2px solid transparent;
}
.site-nav a:hover{border-bottom-color:var(--acc);}
.site-nav a[aria-current="page"]{border-bottom-color:var(--acc-2);}

/* ---------- ritmo de secciones ---------- */

.sec{margin-top:64px;}
.sec--media{margin-top:112px;}

.band{
  background:var(--bg-alt);
  padding:96px 0;
  margin-top:112px;
}
.band .sec{margin-top:64px;}
.band .sec:first-child{margin-top:0;}

.band--dark{
  background:var(--bg-dark);
  color:var(--ink-inv);
}
.band--dark h1,.band--dark h2,.band--dark h3{color:var(--ink-inv);}
.band--dark .sub{color:#a9a5b2;}

/* ---------- portada ---------- */

.hero{padding:96px 0 0;}
.hero h1{grid-column:1 / 8;}
.hero .bar{
  grid-column:10 / 11;
  align-self:start;
  width:14px;
  height:1.96em;
  font-size:clamp(2.5rem,6.6vw,4.9rem);
  background:var(--acc-2);
  justify-self:start;
}
.hero .lead{grid-column:1 / 6;margin-top:44px;}
.hero .hero-note{grid-column:1 / 6;margin-top:18px;}

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

.fig{margin:0;}

.fig-main{grid-column:1 / 9;margin:0;}
.fig-main img{
  display:block;
  width:100%;
  height:auto;
}
.fig-main figcaption{
  margin-top:14px;
  text-align:right;
  grid-column:1 / 9;
}

.fig-detail{grid-column:8 / 12;margin:0;}
.fig-detail img{display:block;width:100%;height:auto;}
.fig-detail figcaption{margin-top:12px;}

.dark-text{grid-column:2 / 7;align-self:center;}

/* ---------- plaquitas separadoras ---------- */

.rule{height:3px;background:var(--acc);margin-top:56px;}
.rule--a{grid-column:1 / 4;}
.rule--b{grid-column:2 / 7;background:var(--acc-2);}
.rule--c{grid-column:4 / 6;}
.rule--d{grid-column:6 / 11;background:var(--acc-2);}
.rule--e{grid-column:1 / 3;}

/* ---------- página "El proyecto" ---------- */

.about-block{margin-top:56px;}
.about-block:first-of-type{margin-top:0;}
.about-block .plate{
  grid-column:1 / 2;
  height:3px;
  background:var(--acc);
  margin-top:.75em;
}
.about-block .plate--alt{background:var(--acc-2);}
.about-block .body{grid-column:3 / 9;}

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

.doc h2{margin-top:56px;}
.doc h2:first-of-type{margin-top:0;}
.doc .c-a p:first-of-type{margin-top:0;}

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

.site-foot{
  background:var(--bg-alt);
  margin-top:112px;
  padding:64px 0 72px;
}
.site-foot .plate{
  grid-column:1 / 5;
  height:6px;
  background:var(--acc);
  margin-bottom:40px;
}
.site-foot .foot-main{grid-column:1 / 8;}
.site-foot .foot-side{grid-column:9 / 13;align-self:end;text-align:right;}
.foot-name{
  font-family:var(--sans);
  font-weight:800;
  font-size:clamp(1.7rem,3.6vw,2.6rem);
  letter-spacing:-.03em;
  line-height:1;
  margin:0;
}
.foot-nav ul{display:flex;flex-wrap:wrap;gap:8px 22px;margin:24px 0 0;}
.foot-nav li{padding:0;margin:0;}
.foot-nav li::before{display:none;}
.foot-nav a{
  font-family:var(--sans);
  font-size:.92rem;
  font-weight:600;
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid rgba(92,58,107,.45);
}
.foot-nav a:hover{border-bottom-color:var(--acc);}
.foot-legal{margin-top:28px;}

/* ---------- adaptación a pantallas medianas ---------- */

@media (max-width:900px){
  :root{--gap:18px;--pad:24px;}

  .c-a,.c-b,.c-c,.c-d,.c-e{grid-column:1 / 10;}

  .hero{padding:64px 0 0;}
  .hero h1{grid-column:1 / 12;}
  .hero .bar{grid-column:12 / 13;}
  .hero .lead,.hero .hero-note{grid-column:1 / 10;}

  .fig-main,.fig-main figcaption{grid-column:1 / 12;}
  .fig-detail{grid-column:1 / 8;}
  .dark-text{grid-column:1 / 11;margin-top:36px;}

  .site-foot .foot-main{grid-column:1 / 9;}
  .site-foot .foot-side{grid-column:1 / 9;text-align:left;margin-top:32px;}
  .about-block .body{grid-column:2 / 12;}
}

/* ---------- móvil ---------- */

@media (max-width:640px){
  body{font-size:17px;}
  :root{--pad:20px;}

  .c-a,.c-b,.c-c,.c-d,.c-e,
  .fig-main,.fig-main figcaption,.fig-detail,.dark-text,
  .about-block .body,
  .site-foot .foot-main,.site-foot .foot-side{grid-column:1 / 13;}

  .hero{padding:48px 0 0;}
  .hero h1{grid-column:1 / 12;}
  .hero .bar{grid-column:12 / 13;width:10px;}
  .hero .lead{margin-top:32px;}

  .sec{margin-top:40px;}
  .sec--media{margin-top:64px;}
  .band{padding:56px 0;margin-top:64px;}
  .band .sec{margin-top:40px;}
  .site-foot{margin-top:64px;padding:48px 0 56px;}

  .fig-main figcaption{text-align:left;}
  .about-block .plate{grid-column:1 / 4;margin-top:0;margin-bottom:18px;}
  .rule{margin-top:40px;}
  .rule--a{grid-column:1 / 6;}
  .rule--b{grid-column:1 / 9;}
  .rule--c{grid-column:1 / 5;}
  .rule--d{grid-column:1 / 8;}
  .rule--e{grid-column:1 / 4;}
  .site-foot .plate{grid-column:1 / 8;}
  .dark-text{margin-top:28px;}
}