/* =====================================================================
   creaite. — Variante 2: "Grid técnico"
   Estética blueprint / sistema: retícula de 12 columnas visible,
   bloques en celdas con borde de 1px, etiquetas [ ASÍ ] y marcas "+".
   ===================================================================== */

/* ---------- tokens ---------- */
:root {
  --k: #000; --w1: #e6e6e6; --w2: #c4c4c4; --g1: #757575; --g2: #2e2e2e; --o: #ff4d00;
  --nav-h: 3rem;
  --pad: 1rem;                 /* margen lateral de la retícula */
  --cols: 4;                   /* columnas visibles (12 en desktop) */
  --cell: 1rem;                /* padding interno de las celdas */
  --strip-h: 2.25rem;          /* alto de la cabecera de cada card destacada */
  --line: var(--g2);
  --lines: inset 1px 1px 0 var(--line), 1px 1px 0 var(--line);
}
@media (min-width: 1024px) {
  :root { --pad: 2rem; --cols: 12; --cell: 1.25rem; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 1rem); }
body {
  margin: 0; padding-top: var(--nav-h);
  background: var(--k); color: var(--w1);
  font-family: "Geist", Arial, sans-serif; font-size: .9375rem; line-height: 1.4;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
::selection { background: var(--o); color: #000; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p, h1, h2, h3, h4, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 1px solid var(--o); outline-offset: 2px; }
.ico { width: 1em; height: 1em; flex: none; transition: transform .2s; }

/* ---------- retícula de fondo: 12 (4 en móvil) columnas con líneas finas ---------- */
body::before {
  content: ""; position: fixed; z-index: -1; pointer-events: none;
  top: 0; bottom: 0; left: var(--pad); right: calc(var(--pad) - 1px);
  max-width: calc(120rem - 2 * var(--pad) + 1px); margin: 0 auto;
  background: repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px calc((100% - 1px) / var(--cols)));
}

/* ---------- tipografía ---------- */
.f-display { letter-spacing: -.045em; font-size: 2.75rem; font-weight: 600; line-height: .95; }
.f-h1 { letter-spacing: -.04em; font-size: 2.25rem; font-weight: 600; line-height: 1; }
.f-h2 { letter-spacing: -.035em; font-size: 1.5rem; font-weight: 600; line-height: 1.05; }
.f-h3 { letter-spacing: -.025em; font-size: 1.125rem; font-weight: 600; line-height: 1.2; }
.label {
  font-size: .6875rem; font-weight: 500; line-height: 1rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--g1); font-variant-numeric: tabular-nums;
}
.muted { color: var(--g1); }
@media (min-width: 1024px) {
  .f-display { font-size: 5.75rem; }
  .f-h1 { font-size: 4rem; }
  .f-h2 { font-size: 2.25rem; }
  .f-h3 { font-size: 1.5rem; }
}

/* ---------- layout ---------- */
.grid-layout {
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 0;
  width: 100%; max-width: 120rem; margin: 0 auto; padding: 0 var(--pad);
}
/* celda: fondo negro + líneas de 1px compartidas con las vecinas */
.cell { position: relative; background: var(--k); box-shadow: var(--lines); padding: var(--cell); min-width: 0; }
.cells > * { grid-column: 1 / -1; }
/* marcas "+" en las esquinas de bloques clave */
.mark::before, .mark::after {
  content: "+"; position: absolute; z-index: 3; pointer-events: none;
  font-size: 1rem; font-weight: 400; line-height: 1; color: var(--o);
}
.mark::before { top: -.5rem; left: -.3rem; }
.mark::after { bottom: -.55rem; right: -.35rem; }

/* botones-enlace */
.btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem 1rem; border: 1px solid var(--w1); background: var(--w1); color: var(--k);
  font-size: .8125rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
  transition: background .15s, color .15s, border-color .15s;
}
.btn:hover, .btn:focus-visible { background: var(--o); border-color: var(--o); color: var(--k); }
.btn-ghost { background: transparent; color: var(--w1); border-color: var(--g2); }

/* ---------- NAV ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: var(--k); }
.nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); }
.nav-grid { height: var(--nav-h); }
.nav-cell {
  display: flex; align-items: center; height: var(--nav-h); padding: 0 var(--cell);
  box-shadow: inset 1px 0 0 var(--line); font-size: .75rem; font-weight: 600; min-width: 0;
}
.nav-cell:last-child { box-shadow: inset 1px 0 0 var(--line), inset -1px 0 0 var(--line); }
.nav-logo { grid-column: 1 / 3; }
.wordmark { font-size: 1.25rem; font-weight: 800; letter-spacing: -.055em; line-height: 1; color: var(--w1); }
.nav-links, .nav-lang { display: none; }
.nav-clock { grid-column: 3 / 4; justify-content: center; gap: .35rem; padding: 0 .25rem; font-variant-numeric: tabular-nums; letter-spacing: .04em; white-space: nowrap; }
.clock-city { color: var(--g1); }
.nav-clock time::after { content: ""; display: inline-block; width: .35rem; height: .35rem; margin-left: .4rem; border-radius: 50%; background: var(--o); vertical-align: middle; animation: blink 2s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.nav-burger { grid-column: 4 / 5; justify-content: center; padding: 0; }
.nav-links a { position: relative; color: var(--w2); transition: color .15s; white-space: nowrap; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--o); }
.nav-links a[aria-current="page"]::before { content: "["; margin-right: .2em; }
.nav-links a[aria-current="page"]::after { content: "]"; margin-left: .2em; }
.nav-count { font-size: .6em; color: var(--g1); margin-left: .15em; vertical-align: super; line-height: 0; }
/* selector ES / EN */
.lang { display: flex; align-items: center; gap: .35rem; font-size: .75rem; font-weight: 600; color: var(--g1); }
.lang a { color: var(--g1); padding: .2rem .35rem; border: 1px solid transparent; transition: color .15s; }
.lang a:hover { color: var(--o); }
.lang a[aria-current="true"] { color: var(--w1); border-color: var(--g2); pointer-events: none; }
@media (min-width: 1024px) {
  .nav-links { grid-column: 3 / 10; display: flex; gap: 1.5rem; }
  .nav-clock { grid-column: 10 / 12; justify-content: flex-start; padding: 0 var(--cell); }
  .nav-lang { grid-column: 12 / 13; display: flex; justify-content: center; padding: 0; }
  .nav-burger { display: none; }
}
/* menú móvil */
.burger { display: flex; align-items: center; gap: .4rem; width: 100%; height: 100%; justify-content: center; font-size: .75rem; font-weight: 600; }
.burger .lines { display: flex; width: .9rem; flex-direction: column; gap: .25rem; }
.burger .lines span { height: 1.5px; width: 100%; background: var(--w1); transition: transform .3s ease-in-out; }
.menu-open .burger .lines span:first-child { transform: translateY(2.75px) rotate(45deg); }
.menu-open .burger .lines span:last-child { transform: translateY(-2.75px) rotate(-45deg); }
@media (max-width: 359px) { .burger p { display: none; } }
.mobile-menu {
  position: fixed; inset: var(--nav-h) 0 auto 0; z-index: 999; background: var(--k);
  margin: 0 var(--pad); box-shadow: inset 1px 0 0 var(--line), inset -1px -1px 0 var(--line);
  display: flex; flex-direction: column;
  clip-path: inset(0 0 100% 0); transition: clip-path .35s cubic-bezier(.7,0,.3,1), visibility 0s .35s; visibility: hidden;
}
.menu-open .mobile-menu { clip-path: inset(0); visibility: visible; transition: clip-path .35s cubic-bezier(.7,0,.3,1); }
.mobile-menu a {
  display: flex; align-items: baseline; gap: .75rem; padding: .8rem var(--cell);
  border-bottom: 1px solid var(--line); font-size: 1.5rem; font-weight: 600; letter-spacing: -.03em;
}
.mobile-menu a:hover { color: var(--o); }
.mm-n { font-size: .6875rem; color: var(--g1); letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.mm-lang { padding: .8rem var(--cell); }
.mm-lang .lang a { font-size: .875rem; padding: .3rem .5rem; border-bottom: 1px solid transparent; }
.mm-lang .lang a[aria-current="true"] { border-color: var(--g2); }
@media (min-width: 1024px) { .mobile-menu { display: none; } }

/* ---------- HOME: hero ---------- */
.hero { margin-top: 2.5rem; }
.hero-statement { display: flex; flex-direction: column; justify-content: space-between; gap: 2.5rem; min-height: 22rem; }
.hero-statement h1 { max-width: 12ch; }
.svc-links { margin-top: 1rem; }
.svc-links a {
  display: grid; grid-template-columns: 2rem 1fr auto; align-items: center; gap: .5rem;
  padding: .9rem 0; border-bottom: 1px solid var(--line); font-size: 1.0625rem; font-weight: 600; letter-spacing: -.02em;
  transition: color .15s;
}
.svc-links li:first-child a { border-top: 1px solid var(--line); }
.svc-links .n { font-size: .6875rem; color: var(--g1); letter-spacing: .08em; }
.svc-links a:hover { color: var(--o); }
.svc-links a:hover .ico { transform: translateX(.3rem); }
@media (min-width: 1024px) {
  .hero { margin-top: 4rem; }
  .hero-statement { grid-column: 1 / 9; min-height: 34rem; padding: 2rem var(--cell) var(--cell); }
  .hero-services { grid-column: 9 / 13; display: flex; flex-direction: column; justify-content: space-between; }
  .svc-links a { font-size: 1.25rem; padding: 1.1rem 0; }
}

/* ---------- HOME: featured (cards apiladas con sticky) ---------- */
.featured { margin-top: 4rem; padding-bottom: 4rem; }
.featured-head { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
.featured-head .label { display: flex; align-items: center; }
.featured-all { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .8125rem; font-weight: 600; transition: color .15s; }
.featured-all:hover { color: var(--o); }
.featured-all:hover .ico { transform: translateX(.3rem); }
@media (min-width: 1024px) {
  .featured { margin-top: 6rem; }
  .featured-head .label { grid-column: 1 / 3; }
  .featured-head h2 { grid-column: 3 / 10; }
  .featured-head .featured-all { grid-column: 10 / 13; }
}

/* cada card se queda pegada un poco más abajo que la anterior: las cabeceras se apilan como fichas */
.sticky-row {
  grid-column: 1 / -1; position: sticky;
  top: calc(var(--nav-h) + var(--i) * var(--strip-h));
  margin-top: 1.5rem;
}
.card { background: var(--k); box-shadow: var(--lines); }
.card-strip {
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; align-items: center; gap: 1rem;
  height: var(--strip-h); padding: 0 var(--cell); background: var(--k);
  box-shadow: inset 1px 1px 0 var(--line), inset -1px -1px 0 var(--line);
  font-size: .6875rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--g1);
  font-variant-numeric: tabular-nums;
}
.strip-n { color: var(--o); }
.strip-client { color: var(--w1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.card-body { display: flex; flex-direction: column; gap: 1rem; padding: var(--cell); box-shadow: inset 1px 0 0 var(--line), inset -1px 0 0 var(--line); }
.card-name a:hover { color: var(--o); }
.card-body .desc { color: var(--w2); font-size: .875rem; line-height: 1.45; }
.card-spec { display: none; }
.card-body .btn { align-self: flex-start; }
.card-media { order: -1; position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.card-media a { position: absolute; inset: 0 1px; display: block; overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.card-media a:hover img { transform: scale(1.03); }
@media (max-width: 1023px) {
  .card-media { box-shadow: inset 0 -1px 0 var(--line); }
  .card-media a { bottom: 1px; }
}
@media (min-width: 1024px) {
  .sticky-row { margin-top: 3rem; }
  .card-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .card-body { grid-column: 1 / 6; justify-content: space-between; padding: 1.5rem var(--cell) var(--cell); }
  .card-body .desc { font-size: 1rem; max-width: 34ch; }
  .card-spec { display: block; border-top: 1px solid var(--line); }
  .card-spec > div { display: grid; grid-template-columns: 5rem 1fr; gap: .5rem; padding: .55rem 0; border-bottom: 1px solid var(--line); font-size: .8125rem; }
  .card-spec dt { font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--g1); padding-top: .1rem; }
  .card-media { order: 0; grid-column: 6 / 13; }
  .card-media a { inset: 0 1px 1px 0; }
}

/* ---------- SERVICES ---------- */
.svc-hero { margin-top: 2.5rem; }
.svc-title { display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; min-height: 14rem; }
.svc-intro p { color: var(--w2); font-size: 1rem; line-height: 1.45; }
.svc-process { margin-top: 2.5rem; }
.process-label { padding-top: .6rem; padding-bottom: .6rem; }
.process-steps { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr); }
.step { display: grid; grid-template-columns: 2.5rem 1fr; align-items: baseline; gap: .25rem .5rem; }
.step .n { grid-row: span 2; font-size: .6875rem; letter-spacing: .08em; color: var(--o); }
.step-desc { color: var(--g1); font-size: .8125rem; }
.step-arrow {
  position: absolute; z-index: 2; left: 50%; bottom: -.7rem; transform: translateX(-50%) rotate(90deg);
  width: 1.4rem; height: 1.4rem; display: grid; place-items: center;
  background: var(--k); box-shadow: 0 0 0 1px var(--line); color: var(--o); font-size: .8rem; line-height: 1;
}
.svc-list { margin-top: 2.5rem; }
.svc-item { display: flex; flex-direction: column; gap: 1rem; min-height: 15rem; }
.svc-item .n { font-size: .6875rem; letter-spacing: .08em; color: var(--o); }
.svc-item h2 { margin-top: auto; }
.svc-item p { color: var(--w2); font-size: .9375rem; line-height: 1.45; max-width: 46ch; }
.svc-quote { margin-top: 2.5rem; }
.svc-quote blockquote { padding-top: 2rem; padding-bottom: 2rem; }
.quote-author { display: flex; align-items: center; gap: .75rem; }
.quote-author img { width: 3rem; height: 3rem; object-fit: cover; filter: grayscale(1); box-shadow: 0 0 0 1px var(--line); }
.who p { font-size: .875rem; font-weight: 600; }
.who span { font-size: .75rem; color: var(--g1); }
@media (min-width: 1024px) {
  .svc-hero { margin-top: 4rem; }
  .svc-title { grid-column: 1 / 8; min-height: 22rem; }
  .svc-intro { grid-column: 8 / 13; display: flex; align-items: flex-end; }
  .svc-intro p { font-size: 1.125rem; }
  .svc-process, .svc-list, .svc-quote { margin-top: 4rem; }
  .process-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .step { padding-top: 1.5rem; padding-bottom: 1.5rem; }
  .step-arrow { left: auto; right: -.7rem; bottom: auto; top: 50%; transform: translateY(-50%); }
  .svc-item { grid-column: span 6; min-height: 22rem; padding: 1.5rem; }
  .svc-item p { font-size: 1rem; }
  .quote-label { grid-column: 1 / 4; }
  .svc-quote blockquote { grid-column: 4 / 10; }
  .quote-author { grid-column: 10 / 13; align-items: flex-end; }
}

/* ---------- SHOWCASE ---------- */
.sc-head { margin-top: 2.5rem; grid-auto-flow: row dense; }
.sc-title { display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; min-height: 12rem; }
.sc-counter, .sc-view-cell { display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; }
.sc-count { color: var(--o); font-variant-numeric: tabular-nums; }
.sc-cat-list { display: flex; flex-direction: column; gap: .35rem; margin-top: .75rem; }
.sc-cat { display: flex; align-items: baseline; gap: .6rem; text-align: left; font-size: .9375rem; font-weight: 600; color: var(--w2); transition: color .15s; }
.sc-cat .box::before { content: "[ ]"; white-space: pre; font-variant-numeric: tabular-nums; color: var(--g1); }
.sc-cat[aria-pressed="true"] { color: var(--w1); }
.sc-cat[aria-pressed="true"] .box::before { content: "[x]"; color: var(--o); }
.sc-cat:hover { color: var(--o); }
.sc-cats.has-filter .sc-cat[aria-pressed="false"] { color: var(--g1); }
.sc-cats.has-filter .sc-cat[aria-pressed="false"]:hover { color: var(--o); }
.sc-view { display: flex; }
.sc-view button { flex: 1; padding: .55rem .75rem; border: 1px solid var(--g2); font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--g1); }
.sc-view button + button { border-left: 0; }
.sc-view button[aria-checked="true"] { background: var(--w1); border-color: var(--w1); color: var(--k); }
.sc-view button[aria-checked="false"]:hover { color: var(--o); }
.sc-head .sc-counter { grid-column: 1 / 3; }
.sc-head .sc-view-cell { grid-column: 3 / 5; }
@media (min-width: 1024px) {
  .sc-head { margin-top: 4rem; }
  .sc-head .sc-title { grid-column: 1 / 6; min-height: 18rem; }
  .sc-head .sc-counter { grid-column: 6 / 8; }
  .sc-head .sc-cats { grid-column: 8 / 11; }
  .sc-head .sc-view-cell { grid-column: 11 / 13; }
}
.sc-list { margin-top: 2.5rem; padding-bottom: 1px; }
.sc-list > * { grid-column: 1 / -1; }
.sc-empty { padding: 2rem var(--cell); background: var(--k); box-shadow: var(--lines); color: var(--g1); }
/* filas = tabla técnica */
.sc-row {
  position: relative; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) 3rem 1.25rem; align-items: center; gap: .75rem;
  padding: 1rem var(--cell); background: var(--k); box-shadow: var(--lines);
  font-size: 1rem; font-weight: 600; letter-spacing: -.01em; transition: background .15s, color .15s;
}
.sc-row .n, .sc-row .year { font-size: .75rem; color: var(--g1); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.sc-row .c-type { display: none; color: var(--g1); font-size: .8125rem; font-weight: 500; letter-spacing: 0; }
.sc-row .go { display: flex; justify-content: flex-end; }
.sc-row.sc-row-th { padding-top: .6rem; padding-bottom: .6rem; font-size: .6875rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--g1); }
.sc-row.sc-row-th span:last-child { text-align: right; }
a.sc-row:hover { background: #0b0b0b; color: var(--o); }
a.sc-row:hover .go .ico { transform: translateX(.3rem); }
.sc-thumb {
  position: absolute; z-index: 5; right: 18%; top: 50%; width: 15rem; aspect-ratio: 16 / 9;
  transform: translateY(-50%); pointer-events: none; opacity: 0; visibility: hidden;
  background: var(--k); box-shadow: 0 0 0 1px var(--w1); transition: opacity .15s;
}
.sc-thumb::before { content: "+"; position: absolute; top: -.55rem; left: -.35rem; color: var(--o); font-weight: 400; z-index: 1; }
.sc-thumb img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) and (min-width: 768px) {
  a.sc-row:hover .sc-thumb, a.sc-row:focus-visible .sc-thumb { opacity: 1; visibility: visible; }
}
@media (min-width: 768px) {
  .sc-row { grid-template-columns: 4rem minmax(0, 2fr) minmax(0, 3fr) 4rem 2rem; padding-top: 1.25rem; padding-bottom: 1.25rem; font-size: 1.25rem; }
  .sc-row .c-type { display: block; }
}
@media (min-width: 1024px) {
  .sc-row { font-size: 1.5rem; }
  .sc-list { margin-top: 4rem; }
}
/* cuadrícula = 2 columnas grandes */
.sc-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.sc-tile { display: flex; flex-direction: column; background: var(--k); box-shadow: var(--lines); }
.sc-tile-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; margin: 1px 0 0 1px; }
.sc-tile-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.sc-tile-cap {
  display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto auto; align-items: center; gap: .75rem;
  padding: .85rem var(--cell); border-top: 1px solid var(--line); font-size: 1rem; font-weight: 600;
}
.sc-tile-cap .n, .sc-tile-cap .year { font-size: .75rem; color: var(--g1); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.sc-tile:hover { color: var(--o); }
.sc-tile:hover img { transform: scale(1.03); }
.sc-tile:hover .ico { transform: translateX(.3rem); }
@media (min-width: 768px) { .sc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sc-tile-cap { font-size: 1.25rem; } }

/* ---------- DETALLE DE PROYECTO ---------- */
.project { margin-top: 1.5rem; }
.project-grid { align-items: start; }
.project-side, .project-main { grid-column: 1 / -1; min-width: 0; }
.project-side-inner { display: flex; flex-direction: column; }
.project-side-inner > * { background: var(--k); box-shadow: var(--lines); padding: var(--cell); }
.project-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .65rem !important; padding-bottom: .65rem !important; }
.back-link { display: inline-flex; align-items: center; gap: .5rem; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.back-link:hover { color: var(--o); }
.view-toggle { display: none; }
.view-btn { width: 1.75rem; height: 1.5rem; display: grid; place-items: center; color: var(--g1); border: 1px solid var(--g2); }
.view-btn + .view-btn { border-left: 0; }
.view-btn svg { width: .75rem; height: .75rem; }
.view-btn[aria-checked="true"] { background: var(--w1); color: var(--k); border-color: var(--w1); }
.project-head { display: flex; flex-direction: column; gap: .75rem; }
.project-meta { padding: 0 !important; }
.meta-row { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: .75rem; padding: .7rem var(--cell); border-bottom: 1px solid var(--line); font-size: .8125rem; font-weight: 600; }
.meta-row:last-child { border-bottom: 0; }
.meta-row dt { font-size: .6875rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--g1); padding-top: .1rem; }
.meta-row ul { display: flex; flex-direction: column; gap: .2rem; }
.meta-client { display: flex; align-items: center; gap: .5rem; }
.logo-dot { width: 1.1rem; height: 1.1rem; overflow: hidden; box-shadow: 0 0 0 1px var(--line); flex: none; }
.logo-dot img { width: 100%; height: 100%; object-fit: cover; }
.meta-link { display: inline-flex; align-items: center; gap: .3rem; color: var(--w1); word-break: break-all; }
.meta-link:hover { color: var(--o); }
.project-body { display: flex; flex-direction: column; gap: .75rem; color: var(--w2); font-size: .875rem; line-height: 1.5; }
.project-body .f-p { font-size: inherit; font-weight: 400; }
.more-title { font-size: .6875rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--g1); margin-bottom: .5rem; }
.more-list li + li { border-top: 1px solid var(--line); }
.more-item { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .6rem 0; font-size: .875rem; font-weight: 600; }
.more-left { display: flex; align-items: center; gap: .6rem; }
.more-logo { width: 1.75rem; height: 1.75rem; overflow: hidden; box-shadow: 0 0 0 1px var(--line); flex: none; }
.more-logo img { width: 100%; height: 100%; object-fit: cover; }
.more-item:hover { color: var(--o); }
.more-item:hover .ico { transform: translateX(.3rem); }
/* galería: celdas con líneas de 1px entre imágenes (sin huecos negros) */
.project-main { margin-top: 1.5rem; }
.project-gallery { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.gallery-item { margin: 0; background: var(--k); }
.gallery-item .frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #0b0b0b; }
.gallery-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; color: transparent; }
@media (min-width: 1024px) {
  .project { margin-top: 0; }
  .project-grid { align-items: stretch; }
  /* la columna ocupa toda la altura de la galería para que el bloque sticky tenga recorrido */
  .project-side { grid-column: 1 / 5; align-self: stretch; }
  .project-side-inner {
    position: sticky; top: var(--nav-h);
    height: calc(100vh - var(--nav-h)); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--g2) transparent;
    padding: 0 1px 1px 0;
  }
  .more-projects { margin-top: auto; }
  .view-toggle { display: flex; }
  .project-main { grid-column: 5 / 13; margin-top: 0; }
  .project-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 0; border-left: 0; }
  .project-gallery .gallery-item:nth-child(3n) { grid-column: 1 / -1; }
  .project-gallery.rows { grid-template-columns: minmax(0, 1fr); }
  .project-gallery.rows .gallery-item:nth-child(3n) { grid-column: auto; }
}

/* ---------- CONTACTO ---------- */
.contact { margin-top: 4rem; }
.contact-label { display: flex; flex-direction: column; gap: 1.5rem; justify-content: space-between; }
.contact-mail { display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem; }
.contact-mail a { overflow-wrap: anywhere; transition: color .15s; }
.contact-mail a:hover { color: var(--o); }
.contact-cta { display: flex; align-items: flex-end; }
.contact-cta .btn { width: 100%; padding-top: 1.1rem; padding-bottom: 1.1rem; }
@media (min-width: 1024px) {
  .contact { margin-top: 6rem; }
  .contact-label { grid-column: 1 / 5; min-height: 12rem; }
  .contact-mail { grid-column: 5 / 10; }
  .contact-cta { grid-column: 10 / 13; }
}

/* ---------- FOOTER ---------- */
.site-footer { margin-top: 4rem; padding-bottom: 1px; }
.footer-grid .cell { display: flex; flex-direction: column; gap: .15rem; }
.footer-grid .label { margin-bottom: .75rem; }
.footer-nav a, .footer-social a { display: flex; align-items: center; gap: .6rem; padding: .3rem 0; font-size: .9375rem; font-weight: 600; width: fit-content; transition: color .15s; }
.footer-nav .n { font-size: .6875rem; color: var(--g1); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.footer-nav a:hover, .footer-social a:hover, .footer-nav a[aria-current="page"] { color: var(--o); }
.footer-social .ico { transform: rotate(-45deg); width: .8em; height: .8em; }
.news-text { color: var(--w2); font-size: .875rem; line-height: 1.45; margin-bottom: 1rem; }
.newsletter-form { display: flex; border: 1px solid var(--g2); }
.newsletter-form input {
  flex: 1; min-width: 0; padding: .75rem; background: transparent; border: 0; color: var(--w1);
  font: inherit; font-size: .875rem; font-weight: 500; outline: none;
}
.newsletter-form input::placeholder { color: var(--g1); }
.newsletter-form:focus-within { border-color: var(--w1); }
.newsletter-form button { display: flex; align-items: center; gap: .4rem; padding: 0 .9rem; border-left: 1px solid var(--g2); font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.newsletter-form button:hover { background: var(--o); color: var(--k); }
.status { min-height: 1rem; margin-top: .5rem; font-size: .75rem; color: var(--o); }
.footer-bottom .cell { padding-top: .7rem; padding-bottom: .7rem; font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--g1); font-variant-numeric: tabular-nums; }
.footer-bottom .coords { color: var(--w2); }
.human-machine { display: inline-flex; gap: .5rem; font-size: .6875rem; font-weight: 600; letter-spacing: .08em; color: var(--g1); }
.human-machine span { transition: color .2s; }
body[data-mode="human"] .human-machine [data-hm="human"],
body[data-mode="machine"] .human-machine [data-hm="machine"] { color: var(--o); }
@media (min-width: 1024px) {
  .site-footer { margin-top: 6rem; }
  .footer-nav { grid-column: 1 / 5; }
  .footer-social { grid-column: 5 / 9; }
  .footer-news { grid-column: 9 / 13; }
  .footer-grid .cell { min-height: 18rem; }
  .coords { grid-column: 1 / 5; }
  .footer-copy { grid-column: 5 / 10; }
  .footer-hm { grid-column: 10 / 13; text-align: right; }
}

/* modo machine: imágenes en escala de grises (blueprint) */
body[data-mode="machine"] img { filter: grayscale(1) contrast(1.05); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}