:root {
  --panel:#0f1117;
  --line: #cbd2d9;
  --radius:16px;
  --bg: #fff;
  --text: #1c2b33;
  --blue: #0064e0;
  --black: #000;
  --white: #fff;
  --border: #cbd2d9;
  --light: #f8f9fb;
  --muted: #5d6c7b;
  --max: 1080px;
}

* {
  box-sizing: border-box;
}

html, body {
  height:100%
}

body {
  color: var(--text);
  font: 16px/1.5 "Noto Sans", Helvetica, Arial;
  margin: 0;
}

section {
  padding: 48px 0;
}

a {
  color: inherit;
  text-decoration:none;

  &:hover {
    opacity:.85;
  }
}

p {
  margin-bottom: 24px;
}

figcaption {
  color: var(--muted);
  font-size: 11px;
  padding-top: 6px;
  text-align: right;
}

.wrap {
  margin:0 auto;
  width: min(var(--max), calc(100% - 48px));
}

.header {
  backdrop-filter: blur(16px);
  padding: 12px;
  position:sticky;
  top: 0;
  z-index: 5;
}

.hero {
  padding: 96px 0 24px;

  &.homepage h1 {

    @media (min-width: 768px) {
      max-width: 75%;
    }
  }

  h1 {
    font-family: "Baskervville", serif;
    font-size: clamp(36px, 3vw, 48px);
    line-height: 1.2;
    margin-bottom: 24px;
  }
}

.meta .highlight {
  background: var(--white);
  color: var(--black);
}

.footer {
  color: var(--muted);
  font-size: 11px;
  text-align: center;
  padding: 48px;
}

.two-columns {
  align-items: start;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.facts{
  display: grid;
  gap: 12px;
}

.fact{
  align-items:baseline;
  display:grid;
  justify-content:space-between;
  padding: 12px;
  border-radius:14px;
  background: var(--light);
  color: var(--black);
  min-height: 96px;
}

.k {
  color:var(--blue);
  font-size: 14px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px 20px;
}

.card {
  border-radius: var(--radius);
  grid-column: span 6;
  padding: 16px;
  min-height: 528px;
  overflow: hidden;
  position: relative;

  img {
    position: absolute;
  }

  &.democrateam {
    background: #e3dce9;

    img {
      bottom: -80px;
      left: 24px;
      max-width: 80%;
    }
  }

  &.madrid {
    background: #e1effe;
  }

  &.aap {
    background: #dff4f0;

    img {
      bottom: -112px;
    }
  }

  &.beruby {
    background: #fceae4;

    img {
      bottom: 0;
      max-width: 90%;
      right: -70px;

    }
  }
}

.card img {
  display: block;
  margin-inline: auto;
  max-width: 100%;
}

.card .stack li{
  font-size:12px; color:var(--white);
  padding:6px 10px; border-radius:999px;
  border:1px solid var(--line);
  background: var(--black);
}

.card a {
  font-weight: bold;
  position: relative;
  z-index: 5;

  &:hover {
    text-decoration: underline;
  }
}

.card h3 {
  margin:0;
  font-size: clamp(36px, 3vw, 48px);
  line-height: 72px;
  letter-spacing:-.2px;
  font-family: "Baskervville", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.section {
  padding: 48px 0;
}

.section.projects {
  padding-top: 96px;
}


.hero {

  &.democrateam {
    background: #e3dce9;
    padding: 48px 0 96px;
  }

  &.madrid {
    background: #e1effe;
    padding: 48px 0 96px;
  }

  &.aap {
    background: #dff4f0;
    padding: 48px 0 96px;
  }

  &.beruby {
    background: #fceae4;
    padding: 48px 0 96px;
  }
}


/* CLEAN PREVIOUS STYLES */

.header.project {
  border-radius: 0;
  top: 0;
  width: 100%;
}


.header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 0;
  gap:16px;
}

.header .wrap.end {
 justify-content: end;
}

.brand{display:flex; flex-direction:column; gap:2px}
.logo{font-weight:650; letter-spacing:.2px}

.nav{display:flex; gap:18px; flex-wrap:wrap}
.nav a{color:var(--muted); font-size:14px}
.nav a:hover{color:var(--text)}




.lead{
  margin:0 0 18px;
  color:var(--muted);
  font-size:clamp(16px, 1.6vw, 18px);
}

.cta{display:flex; gap:12px; flex-wrap:wrap; margin:18px 0 14px}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(231,233,238,.08);
  transition:transform .08s ease, background .2s ease, border-color .2s ease;
  font-weight:600;
}
.btn:hover{background:rgba(231,233,238,.12); transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:transparent}

.meta{
  display:flex; gap:6px; flex-wrap:wrap;
  list-style:none; padding:0; margin:12px 0 0;
  color:var(--muted); font-size:13px
}
.meta li{padding:6px 10px; border-radius:999px; background: var(--black);}
.meta a{color:var(--white)}


.meta .status {
  /*background: var(--white) !important;*/
}

.status {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:11px;
}

.dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 0 0 rgba(34,197,94,.6);
  animation:pulse 2s infinite;
}

@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(34,197,94,.6); }
  70%{ box-shadow:0 0 0 6px rgba(34,197,94,0); }
  100%{ box-shadow:0 0 0 0 rgba(34,197,94,0); }
}


.ext {
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:600;
}

.section h2{margin:0; font-size:20px; letter-spacing:-.2px}
.section:last-of-type {padding-bottom:0;}

.pill{
  font-size:12px; color:var(--black);
  padding:6px 10px; border-radius:999px;
  border:1px solid var(--line);
  background: var(--white);
}

.stack{
  display:flex; gap:8px; flex-wrap:wrap;
  list-style:none; padding:0; margin:0 0 12px;
}
.stack li{
  font-size:12px; color:var(--muted);
  padding:6px 10px; border-radius:999px;
  border:1px solid var(--line);
  background:rgba(11,12,15,.25);
}
.links{
  background: var(--blue);
  border-radius: var(--radius);
  color: var(--white);
  display: block;
  margin-top: 24px;
  padding: 12px;
}
.links a{background: none;color:var(--white);}
.links a:hover{opacity:1; text-decoration:underline}

.two{
  display:grid;
  grid-template-columns: .75fr 1.25fr;
  gap:18px;
  align-items:start;
}
.two p{color:var(--muted); margin:10px 0 0}


.contact{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(135deg,#000,#333);
  padding:16px;
  color: var(--white);
}

.contact p {
  color: #ffffff80;
}

.contact .section-head {
  margin-bottom:0;
}

.small{display:flex; gap:10px; align-items:center; color:var(--white); font-size:14px}
.small a{color:var(--white); opacity:.9}
.small a:hover{opacity:1}



/*.footlinks{display:flex; gap:10px; align-items:center}
.footlinks a{color:var(--muted)}
.footlinks a:hover{color:var(--text)}
*/
@media (max-width: 820px){
  .card{grid-column:span 12}
  .two{grid-template-columns:1fr}
}

/* Gallery */

.card {
  background: var(--light);
}

.card:hover a {
  opacity: 1;
}




/* Projects */

.summary {
  font-size: 24px;
  font-style: italic;
}

.meta div {
  background: var(--black);
  border-radius: var(--radius);
  color: var(--white);
  display:flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px;
}

.meta div .k {
  color:var(--white)
}

.gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.gallery img {
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  display:block;
  width:100%;
}

@media (min-width: 760px){
  .gallery{
    grid-template-columns:repeat(3,1fr);
  }
}

.panel {
  border-radius: var(--radius);
  padding:16px;
  background: var(--light);
  color: var(--black);
}

.panel h3 {
  font-size: 14px;
  letter-spacing: .08em;
  margin: 0 0 8px;
  text-transform:uppercase;
}

.skills {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  list-style:none;
  margin:0 0 18px;
  padding:0;
}

.skills li {
  background: var(--white);
  border-radius: 999px;
  color: var(--black);
  font-size: 12px;
  padding: 6px 10px;
}

.list {
  list-style: none;
  margin: 0;
  padding:0;
}

.list li {
  color:var(--muted);
  font-size: 14px;
  padding: 6px 0;
}







.gallery-hero{
  height:100vh;
  padding:0;
}

.gallery-hero-grid{
  height:100%;
  width:min(1200px, calc(100% - 56px));
  margin:0 auto;
  display:grid;
  grid-template-columns: 1.35fr .65fr;
  grid-template-rows: 1fr 1fr;
  gap:14px;
  align-items:stretch;
  padding:22px 0;
}

.g{
  margin:0;
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  box-shadow:0 18px 60px rgba(0,0,0,.28);
}

.g img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.g1{ grid-row:1 / span 2; grid-column:1; }
.g2{ grid-row:1; grid-column:2; }
.g3{ grid-row:2; grid-column:2; }

@media (max-width: 820px){
  .gallery-hero-grid{
    grid-template-columns:1fr;
    grid-template-rows: 1.1fr .9fr .9fr;
    padding:18px 0;
  }
  .g1{ grid-row:1; }
  .g2{ grid-row:2; }
  .g3{ grid-row:3; }
}

/*figure{
  overflow:hidden;
}*/

figure img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.05);
  transition:transform .5s ease;
}

figure:hover img{
  transform:scale(1);
}

.lang{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  color:var(--white-60);
}

.lang a {
  color:inherit;
  text-decoration:none;
}

.lang a.active{
  color:var(--blue);
  font-weight:600;
}

.lang a:hover{
  color:var(--black);
  text-decoration: underline;
}



/* BASELINE  */

/* Grid overlay: baseline + columns */
:root{
  --baseline: 24px;          /* ritmo vertical */
  --col: 200px;              /* ancho de columna guía */
  --gutter: 20px;           /* separación entre columnas guía */
  --grid-color: rgba(0,0,0,.12);
}

html{ line-height: calc(var(--baseline) * 3); } /* p.ej. 24px si baseline=8px */

body::before{
  /*content:"";*/
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background:
    /* horizontales (baseline) */
    repeating-linear-gradient(
      to bottom,
      var(--grid-color) 0 1px,
      transparent 1px var(--baseline)
    ),
    /* verticales (columnas + gutter) */
    repeating-linear-gradient(
      to right,
      rgba(0,128,255,.14) 0 1px,
      transparent 1px var(--col),
      rgba(0,128,255,.10) var(--col) calc(var(--col) + 1px),
      transparent calc(var(--col) + 1px) calc(var(--col) + var(--gutter))
    );
}