/* ============================================================
   IGNACIO ESTUDIO
   Paleta: negro / cemento / blanco. Minimalista.
   ============================================================ */

:root {
  /* Paleta del manual de marca Ignacio Estudio (v1.0 2026) */
  --negro: #171512;        /* Negro mineral · texto y bordes */
  --carbon: #292622;       /* Carbón · fondos oscuros */
  --cemento-900: #8A7D6D;  /* Hormigón · materialidad */
  --cemento: #C7B39A;      /* Piedra · fondos suaves */
  --cemento-200: #EEE5D8;  /* Marfil */
  --cemento-100: #EEE5D8;  /* Marfil · fondos claros */
  --blanco: #EEE5D8;       /* Marfil · texto sobre oscuro */
  --acento: #D8A35D;       /* Luz cálida · solo líneas y llamados */

  --line: 2px;
  --gutter: clamp(16px, 4vw, 56px);
  --nav-h: 64px;

  /* Tipografía de marca: sans serif geométrica (Urbanist, elegida por el cliente; libre para uso comercial).
     Títulos en mayúsculas con espaciado amplio (Light/Regular); jerarquías en Medium/Bold;
     textos técnicos en caja mixta. --font-mono queda como alias para las etiquetas chicas. */
  --font-display: "Urbanist", "Avenir Next", "Avenir", "Helvetica Neue", Arial, sans-serif;
  --font-mono: var(--font-display);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-display);
  font-size: clamp(14px, .95vw, 16px);
  line-height: 1.5;
  background: var(--negro);
  color: var(--blanco);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.home { overflow: hidden; background: var(--carbon); } /* sin franja negra bajo el hero (barras del navegador / landscape iOS) */
body.viewer-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--blanco); color: var(--negro); }

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 500;
}

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 0 var(--gutter);
  color: var(--blanco);
  background: linear-gradient(180deg, rgba(23,21,18,.55), rgba(23,21,18,0));
}
.nav__brand { display: flex; align-items: center; gap: .8rem; }
.nav__mark { width: 40px; height: 34px; flex: none; }
.nav__name { display: flex; flex-direction: column; line-height: 1.15; }
.nav__name b { font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .14em; }
.nav__name span { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }

.nav__menu {
  position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; gap: 1.8rem;
  pointer-events: none;
}
.nav__menu a { position: relative; padding: .4em 0; pointer-events: auto; }
.nav__menu a::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: var(--line);
  background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.nav__menu a:hover::after, .nav__menu a.is-active::after { transform: scaleX(1); }

.nav__links { display: flex; gap: 1.1rem; margin-left: auto; }
.nav__links a {
  display: grid; place-items: center; width: 28px; height: 28px;
  opacity: .9; transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.nav__links a:hover { opacity: 1; transform: translateY(-1px); }

.nav__burger {
  display: none; width: 40px; height: 40px; flex-direction: column; justify-content: center; align-items: center; gap: 6px;
}
.nav__burger span { display: block; width: 22px; height: 2px; background: currentColor; transition: transform .3s var(--ease); }
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* Títulos del menú largos (el panel admite hasta 20 caracteres por título y 64 entre los 4). Medido con
   Playwright: con los títulos actuales (34) nada cambia por encima de 1100 px. Entre 901 y 1100 px el menú
   va más apretado (menos aire y espaciado, letra apenas menor, siempre en una línea) y la marca pierde el
   subtítulo, que ya se encimaba con el menú entre 901 y 958 px. Si aun así los títulos no entran centrados
   en la página, main.js agrega .nav--compact: el menú se centra entre la marca y los íconos. */
@media (min-width: 901px) {
  .nav__menu a { white-space: nowrap; }
  .nav--compact .nav__menu { position: static; inset: auto; flex: 1 1 auto; min-width: 0; }
}
/* Solo cuando el menú no entra centrado con el aspecto normal (main.js pone .nav--sin-sub): el top bar no cambia si sobra lugar */
@media (min-width: 901px) and (max-width: 1100px) {
  .nav--sin-sub .nav__name span { display: none; }
  .nav--sin-sub .nav__menu { gap: clamp(.9rem, 1.6vw, 1.2rem); font-size: clamp(.6rem, .95vw, .66rem); letter-spacing: .08em; }
}


/* ---------- Hero (inicio) ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  height: 100svh;   /* el inicio es la foto de portada a pantalla completa (escritorio) */
  display: grid; grid-template-rows: 1fr auto;
  padding: calc(var(--nav-h) + 1rem) var(--gutter) 1rem;
  background: var(--carbon);
}
.hero__media { position: absolute; inset: 0; z-index: -2; background: var(--carbon); }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--foco, 42% 100%); }   /* --foco: enfoque elegido en el panel */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(23,21,18,.25) 0%, rgba(23,21,18,0) 20%);
}
.hero__foot {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding-top: .8rem;
  border-top: var(--line) solid currentColor;
  text-shadow: 0 1px 3px rgba(0,0,0,.55);
}

/* ---------- Páginas de categoría ---------- */
.page--wall { color: var(--negro); background: var(--cemento); }
.page--wall::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  /* velo .3: texto negro sobre las manchas oscuras del cemento ≥ 4.5:1 en todos los tamaños */
  background: linear-gradient(rgba(238,229,216,.3), rgba(238,229,216,.3)), url("../assets/img/cemento-fondo.jpg") center / cover no-repeat;
}
.page--wall ::selection { background: var(--negro); color: var(--blanco); }
.page--wall .nav { color: var(--negro); background: rgba(238,229,216,.15); }
.cat { padding: calc(var(--nav-h) + 1rem) calc(var(--gutter) / 2) clamp(3rem, 6vw, 5rem); min-height: 100svh; }
.cat__head {
  /* fit-content(62%): un título largo (hasta 20 caracteres, editable en el panel) se parte en dos líneas por
     palabra y la intro conserva su lugar; con los títulos actuales no cambia nada */
  display: grid; grid-template-columns: fit-content(62%) 1fr; gap: 0 clamp(1.5rem, 4vw, 4rem); align-items: end;
  width: 92.5%; margin-inline: auto;
  padding-bottom: .7rem; margin-bottom: 1.4rem;
  border-bottom: var(--line) solid var(--acento);
}
.cat__head > div:last-child { padding-bottom: .35rem; }
.cat__kicker { color: var(--negro); margin-bottom: .3rem; font-size: .7rem; }
/* hyphens también en escritorio: una sola palabra larga (p. ej. "Reacondicionamientos") se parte con guion
   en vez de empujar la intro a una columna de 120-220 px */
.cat__title { font-weight: 300; font-stretch: 100%; font-size: clamp(2.2rem, 5vw, 4.4rem); letter-spacing: .12em; text-transform: uppercase; line-height: .9; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
.cat__intro { max-width: none; font-size: .88rem; line-height: 1.45; color: var(--negro); }
.cat__count { color: var(--negro); margin-top: .3rem; font-size: .7rem; }
.cat__empty { padding: clamp(3rem, 10vw, 8rem) 0; text-align: center; color: var(--negro); max-width: 40ch; margin: 0 auto; }

/* Proyecto: lámina sobre el cemento */
#projects { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 1.8vw, 1.6rem); align-items: start; width: 92.5%; margin-inline: auto; }
.proj {
  display: grid; grid-template-columns: 1fr; gap: .7rem;
  padding: clamp(.8rem, 1.1vw, 1rem);
  background: rgba(238,229,216,.15);
  border: 1px solid rgba(23,21,18,.12);
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 24px 48px -28px rgba(0, 0, 0, .55), 0 2px 6px rgba(0,0,0,.08);
  opacity: 0; transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.proj.in { opacity: 1; transform: none; }
.proj__info { display: grid; grid-template-columns: minmax(0, 1fr) fit-content(56%); grid-template-areas: 'title place' 'desc desc'; column-gap: .8rem; align-items: baseline; }
.proj__title { grid-area: title; font-weight: 500; font-size: clamp(.9rem, 1vw, 1rem); letter-spacing: .1em; text-transform: uppercase; line-height: 1.15; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proj__place { grid-area: place; color: var(--negro); margin: 0; font-size: .66rem; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proj__desc { grid-area: desc; margin-top: .4rem; font-size: .8rem; line-height: 1.5; color: var(--negro); height: 3em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.proj__media { display: grid; gap: 5px; min-width: 0; }
.proj__lead { position: relative; overflow: hidden; padding: 0; display: block; width: 100%; aspect-ratio: 4 / 3; background: var(--carbon); cursor: zoom-in; }
.proj__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s var(--ease); }
.proj__slide.is-active { opacity: 1; }
.proj__bg { position: absolute; inset: -8%; width: 116%; height: 116%; object-fit: cover; filter: blur(22px) brightness(.72) saturate(.85); }
.proj__fg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transform: scale(1); transition: transform 4.5s linear; }
.proj__slide.is-active .proj__fg { transform: scale(1.025); }
.proj__lead::before {
  content: "Ver galería →"; position: absolute; left: 0; bottom: 0; z-index: 2;
  padding: .75em 1em; background: var(--negro); color: var(--acento);
  font: 500 .62rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase;
  transform: translateY(100%); transition: transform .3s var(--ease);
}
.proj__lead:hover::before, .proj__lead:focus-visible::before { transform: none; }
.proj__lead::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(23,21,18,.08);
}
.proj__lead:focus-visible { outline: 2px solid var(--negro); outline-offset: 2px; }
.proj__none { aspect-ratio: 3 / 1; display: grid; place-items: center; background: rgba(23,21,18,.06); opacity: .7; }

/* Pie */
.foot {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 1rem var(--gutter) 1.4rem;
  border-top: var(--line) solid currentColor;
}
.foot a:hover { text-decoration: underline; text-underline-offset: .3em; }
/* Top bar en páginas de trabajos: al hacer scroll toma fondo cemento sólido para que las
   tarjetas no se vean a través (arriba de todo queda igual que antes). */
.page--wall .nav { transition: background .25s var(--ease), box-shadow .25s var(--ease); }
.page--wall.is-scrolled .nav { background: rgba(199,179,154,.96); box-shadow: inset 0 -1px 0 rgba(23,21,18,.2); }

/* Solo celular/tablet (ver Responsive): accesos del inicio, "Otras categorías" y número y cantidad
   del menú desplegable. En escritorio no se muestran. */
.hero__index, .cat__more, .nav__menu__n, .nav__menu__c { display: none; }
.hero__media picture { display: contents; }

/* Acceso a una categoría (mosaico): foto con velo inferior, número en chapa negra, nombre y cantidad */
.tile {
  position: relative; isolation: isolate; overflow: hidden; display: block;
  aspect-ratio: 4 / 5; background: var(--carbon); color: var(--blanco);
  -webkit-tap-highlight-color: transparent;
}
.tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.72) contrast(1.06) brightness(.9); }
.tile::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(23,21,18,.1) 0%, rgba(23,21,18,0) 30%, rgba(23,21,18,.6) 56%, rgba(23,21,18,.94) 100%);
  box-shadow: inset 0 0 0 1px rgba(238,229,216,.1);
}
.tile__n { position: absolute; top: 0; left: 0; z-index: 2; padding: .55em .7em; background: var(--negro); color: var(--acento); font: 500 .7rem/1 var(--font-mono); letter-spacing: .12em; }
.tile__body { position: absolute; inset: auto 0 0 0; z-index: 2; display: grid; gap: .5rem; padding: .8rem .8rem .85rem; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
/* Título de hasta 20 caracteres: puede ocupar dos líneas; una palabra que no entra se separa con guion
   (hyphens, español) y solo como último recurso se parte (overflow-wrap) */
.tile__t { font-weight: 600; font-size: clamp(.74rem, 3.5vw, .9rem); letter-spacing: .14em; text-transform: uppercase; line-height: 1.15; overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }
.tile__t::before { content: ""; display: block; width: 18px; height: 2px; margin-bottom: .6rem; background: var(--acento); }
.tile__c { display: flex; justify-content: space-between; gap: .5rem; font: 500 .7rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(238,229,216,.86); }
.tile:active { opacity: .82; }
.tile:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }

/* Celular angosto: con 3 íconos el top bar no comprime la hamburguesa ni los íconos;
   la marca sí puede partirse en dos líneas (IGNACIO / ESTUDIO) como siempre */
.nav__burger, .nav__links, .nav__links a { flex: none; }
.nav__brand { flex: 0 1 auto; min-width: 0; }
@media (max-width: 420px) {
  .nav { gap: .9rem; }
  .nav__links { gap: .55rem; }
}
@media (max-width: 350px) {
  .foot__firma { letter-spacing: .07em; }
  .nav__mark { width: 32px; height: 27px; }
  .nav__name b { letter-spacing: .08em; }
  .nav__links { gap: .35rem; }
}

/* ---------- Visor (lightbox) ---------- */
.viewer {
  position: fixed; inset: 0; z-index: 100;
  display: grid; grid-template-rows: auto 1fr auto;
  background: var(--negro); color: var(--blanco); /* opaco: la página no se transparenta detrás de la barra y la foto */
}
.viewer[hidden] { display: none; }
.viewer__bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem var(--gutter); border-bottom: var(--line) solid var(--acento); }
.viewer__bar button:hover { text-decoration: underline; text-underline-offset: .3em; }
/* La foto va en absoluto: no participa del alto de la fila 1fr (una foto vertical empujaba flechas y
   leyenda fuera de pantalla) y se centra con margin:auto dentro del escenario. --stage-x/y = márgenes. */
.viewer__stage { position: relative; min-height: 0; --stage-x: var(--gutter); --stage-y: 1rem; }
.viewer__stage img {
  position: absolute; inset: var(--stage-y) var(--stage-x); margin: auto;
  width: auto; height: auto;
  max-width: calc(100% - 2 * var(--stage-x)); max-height: calc(100% - 2 * var(--stage-y));
  object-fit: contain;
}
.viewer__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; display: grid; place-items: center;
  border: var(--line) solid var(--blanco); background: var(--negro); font-size: 1.3rem;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.viewer__nav:hover { background: var(--blanco); color: var(--negro); }
.viewer__nav--prev { left: var(--gutter); }
.viewer__nav--next { right: var(--gutter); }
.viewer__foot { padding: .9rem var(--gutter); border-top: var(--line) solid var(--acento); opacity: .9; max-height: 8em; overflow-y: auto; } /* leyenda larga (Urbanismo) no empuja la foto */
.viewer__bar #viewerTitle { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer__bar #viewerCount, .viewer__bar button { flex: none; }
.viewer__nav[hidden] { display: none; } /* display:grid pisaba a hidden: galerías de 1 foto mostraban flechas */

/* Táctil: sin resalte gris al tocar ni menú "guardar imagen" al mantener; foco visible con teclado */
.proj__lead, .viewer button, .wa-float, .foot a { -webkit-tap-highlight-color: transparent; }
.proj__lead img { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
:where(.cat, .foot, .viewer) :focus-visible, .wa-float:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.proj.in--now { transition: none; } /* tarjetas ya en pantalla al cargar: sin fundido de entrada */

/* ---------- WhatsApp flotante ---------- */
.wa-float {
  position: fixed; right: var(--gutter); bottom: var(--gutter); z-index: 50;
  display: grid; place-items: center;
  width: 60px; height: 60px; border-radius: 50%;
  background: #25d366; color: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  transition: transform .2s var(--ease), background .2s var(--ease);
}
.wa-float svg { width: 32px; height: 32px; }
.wa-float__label { display: none; }
.wa-float:hover { background: #1ebe5d; transform: scale(1.06); }
.wa-float:active { transform: scale(.96); }

/* ---------- Responsive ---------- */
@media (hover: none) {
  /* Táctil: la etiqueta "Ver galería" se ve siempre (no hay hover); sin estados hover "pegados" */
  .proj__lead::before { transform: none; }
  .viewer__nav:hover { background: var(--negro); color: inherit; }
  .wa-float:hover { transform: none; background: #25d366; }
  /* Visor: "Cerrar" de 44px en cualquier pantalla táctil (también tablet apaisada), sin engordar la barra */
  .viewer__bar { padding-block: .35rem; }
  .viewer__bar button { min-height: 44px; padding-inline: .9em; margin-right: -.9em; }
}

@media (max-width: 900px) {
  /* --- Top bar: sin cambios --- */
  .nav__burger { display: flex; margin-left: auto; }
  .nav__links { margin-left: 0; }
  /* Menú desplegable: filas de 56px (número · nombre · cantidad), fondo opaco: no se lee la página detrás */
  .nav__menu {
    display: none; position: absolute; inset: 100% 0 auto 0;
    flex-direction: column; gap: 0; align-items: stretch;
    background: var(--negro); border-bottom: var(--line) solid var(--acento);
    box-shadow: 0 18px 40px -18px rgba(0,0,0,.6);
  }
  .nav__menu a {
    display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; align-items: center;
    min-height: 56px; padding: 0 var(--gutter); border-top: 1px solid rgba(238,229,216,.12);
    font: 500 .86rem/1.2 var(--font-display); letter-spacing: .16em;
    -webkit-tap-highlight-color: transparent;
  }
  .nav__menu a::after { display: none; }
  .nav__menu__n, .nav__menu__c { display: block; font: 500 .7rem/1 var(--font-mono); letter-spacing: .12em; opacity: .75; }
  .nav__menu__c::after { content: "  →"; white-space: pre; }
  .nav__menu a.is-active { box-shadow: inset 3px 0 0 var(--acento); }
  .nav__menu a.is-active .nav__menu__n { color: var(--acento); opacity: 1; }
  .nav__menu a:active { background: rgba(238,229,216,.06); }
  .nav__menu a:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }
  .page--wall .nav__menu { background: var(--cemento); }
  .page--wall .nav__menu a { border-top-color: rgba(23,21,18,.15); }
  .page--wall .nav__menu__n, .page--wall .nav__menu__c { opacity: .85; }
  .page--wall .nav__menu a.is-active .nav__menu__n { color: inherit; }
  .page--wall .nav__menu a:active { background: rgba(23,21,18,.06); }
  .nav.is-open .nav__menu { display: flex; }
  .nav.is-open { background: var(--negro); }
  .page--wall .nav.is-open { background: var(--cemento); }

  /* Inicio en celular (vertical y apaisado): hormigón oscuro con textura real, fijo detrás del contenido.
     El top bar toma fondo al scrollear para que los accesos no se vean a través. */
  body.home { overflow: auto; background: var(--cemento); }
  /* Fondo: la misma textura gris de cemento (con el mismo velo) que tienen de fondo las páginas de categoría */
  body.home::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(rgba(238,229,216,.3), rgba(238,229,216,.3)), url("../assets/img/cemento-fondo.jpg") center / cover no-repeat, var(--cemento);
  }
  /* Sobre el cemento claro, el texto que apoya directo en el fondo va en negro */
  .home .hero__index__head { color: var(--negro); border-bottom-color: rgba(23,21,18,.35); }
  .home .hero__foot { color: var(--negro); text-shadow: none; border-top-color: rgba(23,21,18,.35); }
  .home .nav { transition: background .25s var(--ease), box-shadow .25s var(--ease); }
  .home.is-scrolled .nav { background: rgba(23,21,18,.95); box-shadow: inset 0 -1px 0 rgba(238,229,216,.12); }
  .home .hero { background: transparent; }
  .hero::after, .hero__spacer { display: none; }
  .hero__index { display: block; position: relative; z-index: 1; }
  .hero__index__head {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    padding-bottom: .75rem; margin-bottom: .8rem; border-bottom: 1px solid rgba(238,229,216,.3);
    font-size: .7rem; color: var(--blanco);
  }
  .hero__index__head span:first-child { display: flex; align-items: center; gap: .7rem; }
  .hero__index__head span:first-child::before { content: ""; width: 22px; height: 2px; background: var(--acento); }
  .hero__index__head span:last-child { opacity: .85; }

  /* Los 4 accesos del inicio, brutalistas: grilla de filetes de 1px, foto en escala de grises
     sin velo y faja negra plana debajo (nombre; número + cantidad + flecha). Sin chapas, sombras
     ni transiciones. Al tocar, la faja se invierte. */
  .hero__index .tiles { gap: 1px; padding: 1px; background: rgba(238,229,216,.3); }
  .hero__index .tile {
    display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto;
    grid-template-areas: 'img img' 't t' 'n c'; background: var(--negro);
  }
  .hero__index .tile::after, .hero__index .tile__t::before { content: none; }
  .hero__index .tile__img {
    position: static; grid-area: img; min-height: 0; border-bottom: 1px solid rgba(238,229,216,.3);
  }
  .hero__index .tile__body { display: contents; }
  .hero__index .tile__t {
    grid-area: t; padding: .8rem .75rem .45rem;
    font-weight: 500; font-size: clamp(.72rem, 3.4vw, .86rem); letter-spacing: .18em;
  }
  .hero__index .tile__n,
  .hero__index .tile__c { font-weight: 400; font-size: .7rem; letter-spacing: .12em; color: rgba(238,229,216,.55); }
  .hero__index .tile__n { position: static; grid-area: n; padding: 0 .6rem .8rem .75rem; background: none; color: var(--acento); }
  .hero__index .tile__c { grid-area: c; padding: 0 .75rem .8rem 0; white-space: nowrap; }
  .hero__index .tile__c span:first-child { overflow: hidden; text-overflow: ellipsis; }
  .hero__index .tile__c span:last-child { display: none; }   /* sin flecha: todo el mosaico es el link */
  .hero__index .tile:active { opacity: 1; background: var(--blanco); color: var(--negro); }
  .hero__index .tile:focus-visible { z-index: 2; outline-offset: 2px; }   /* encima de los vecinos: el contorno se ve entero */
  .hero__index .tile:active .tile__n,
  .hero__index .tile:active .tile__c { color: rgba(23,21,18,.65); }

  /* Accesos del inicio en FILAS de ancho completo y más altas, con la foto de portada de cada categoría de fondo:
     número · nombre · cantidad →, sobre un velo oscuro para que se lea. Vale en vertical y en apaisado. */
  .hero__index .tiles { grid-template-columns: 1fr; gap: 1px; }
  .hero__index .tile {
    position: relative; overflow: hidden; aspect-ratio: auto; min-height: 120px;
    grid-template-columns: 2.6rem minmax(0, 1fr) auto; grid-template-rows: 1fr; grid-template-areas: 'n t c';
    align-items: center; padding-inline: .9rem;
  }
  .hero__index .tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; z-index: 0; }
  .hero__index .tile::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg, rgba(23,21,18,.78) 0%, rgba(23,21,18,.55) 55%, rgba(23,21,18,.35) 100%);
  }
  .hero__index .tile__n, .hero__index .tile__t, .hero__index .tile__c { position: relative; z-index: 2; padding: 0; }
  .hero__index .tile__t { font-size: clamp(.95rem, 4.4vw, 1.15rem); letter-spacing: .2em; color: var(--blanco); }
  .hero__index .tile__n { font-size: .85rem; }
  .hero__index .tile__c { font-size: .85rem; color: rgba(238,229,216,.9); display: flex; gap: .55rem; align-items: baseline; }
  .hero__index .tile__c span:last-child { display: inline; }   /* flecha visible */
  .hero__index .tile:active::after { background: rgba(238,229,216,.92); }
  /* un nombre que de verdad no entra (hasta 20 letras en una palabra) se parte con guion; los de hoy entran enteros */
  @media (max-width: 380px) {   /* pantallas angostas: nombre arriba, cantidad abajo (entran enteros) */
    .hero__index .tile { grid-template-columns: 2.2rem minmax(0, 1fr); grid-template-rows: auto auto; grid-template-areas: 'n t' 'n c'; align-content: center; row-gap: .35rem; }
    .hero__index .tile__t { font-size: clamp(.9rem, 5vw, 1rem); letter-spacing: .14em; }
    .hero__index .tile__n { align-self: center; grid-row: 1 / 3; }
    .hero__index .tile__c { font-size: .78rem; }
  }
  .hero__index .tile:active .tile__t, .hero__index .tile:active .tile__c, .hero__index .tile:active .tile__n { color: var(--negro); }

  /* Páginas de trabajos: "Otras categorías" al final (mismo mosaico que el inicio, en fajas anchas) */
  .cat__more { display: block; margin-top: clamp(2.5rem, 8vw, 4rem); }
  .cat__more__head {
    display: flex; align-items: center; gap: .7rem;
    padding-bottom: .75rem; margin-bottom: .8rem; border-bottom: var(--line) solid var(--acento);
    color: var(--negro);
  }
  .cat__more .tiles { grid-template-columns: 1fr; }
  .cat__more .tile { aspect-ratio: 5 / 2; }
  .cat__kicker { display: inline-block; padding: .5em .65em; background: var(--negro); color: var(--acento); line-height: 1; margin-bottom: .7rem; }

  /* Piso de la mono en táctil: 11.2px (antes 10.5px). No alcanza al top bar */
  .cat .mono, .foot, .viewer .mono, .hero__foot, .proj__place { font-size: .7rem; }
  .proj__lead::before { font-size: .7rem; }

  /* Cabecera y grilla */
  #projects { grid-template-columns: repeat(2, 1fr); width: 100%; }
  .cat { padding-inline: var(--gutter); }
  .cat__head { width: auto; grid-template-columns: 1fr; gap: .6rem 0; padding-bottom: .9rem; }
  .cat__head > div:last-child { padding-bottom: 0; }
  /* Título largo (hasta 20 caracteres): dos líneas por palabra; una palabra que no entra (p. ej. 20 letras
     en 320 px) se separa con guion y nunca desborda la pantalla */
  .cat__title { overflow-wrap: anywhere; }

  /* Tarjeta: título y lugar apilados (antes doble ellipsis en 326px) */
  .proj__info { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'title' 'place' 'desc'; row-gap: .2rem; }
  .proj__title { white-space: normal; overflow: visible; text-overflow: clip; }
  .proj__place { text-align: left; white-space: normal; overflow: visible; }
  .proj__desc { height: auto; -webkit-line-clamp: 3; }
  .proj__lead { aspect-ratio: 1 / 1; }                    /* 56% de fotos verticales: en 1-2 col el 4/3 las dejaba al 52% del ancho */
  .proj__bg { filter: blur(14px) brightness(.72) saturate(.85); }   /* mismo look en caja chica, menos GPU */
  .proj { content-visibility: auto; contain-intrinsic-height: auto 520px; }   /* no pinta las tarjetas fuera de pantalla (solo alto: un ancho intrínseco desbordaría el viewport) */

  /* Pie y WhatsApp */
  .foot a { display: inline-block; padding: .8em 0; margin: -.8em 0; }   /* "Inicio ↑": zona táctil ≥ 28px */
  .foot { padding-right: calc(var(--gutter) + 76px); }   /* tablet y apaisado: "Inicio ↑" no queda debajo del WhatsApp */
  .wa-float { bottom: calc(var(--gutter) + env(safe-area-inset-bottom, 0px)); }
}

/* Celular y tablet en vertical */
@media (max-width: 900px) and (orientation: portrait) {
  /* Inicio en vertical: portada (foto de celular del panel o, si no hay, la de escritorio recortada)
     fundida arriba y abajo con el hormigón; debajo, mosaico 2×2 de accesos. Sin animaciones. */
  .hero { height: auto; min-height: 100svh; grid-template-rows: auto auto 1fr auto; padding-top: var(--nav-h); }
  .hero__media {
    position: relative; inset: auto; z-index: 0; overflow: hidden; background: none; margin-inline: calc(-1 * var(--gutter));
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 64%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 64%, transparent 100%);
  }
  /* La foto de celular trae su proporción (--ratio-m, la escribe el generador): se ve entera, sin recortes sorpresa */
  .hero__media img { height: auto; aspect-ratio: var(--ratio-m, 1170 / 914); max-height: 58svh; object-position: var(--foco-m, 50% 42%); }
  .hero__index { margin-top: -1.4rem; }   /* la cabecera "Trabajos" apoya sobre el fundido de la portada */
  .hero__foot {
    align-self: end; margin-top: 2rem; padding-right: 5.5rem; padding-bottom: env(safe-area-inset-bottom, 0px);
    border-top-width: 1px; border-top-color: rgba(238,229,216,.3);
  }

  /* Visor: flechas en fila bajo la foto (no tapan imagen ni leyenda). Orden DOM: barra, escenario, prev, next, pie */
  .viewer { grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr auto auto; }
  .viewer__bar, .viewer__stage, .viewer__foot { grid-column: 1 / -1; }
  .viewer__stage { --stage-y: .75rem; }
  .viewer__nav {
    position: static; transform: none; width: auto; height: 52px;
    border: 0; border-top: 1px solid rgba(238,229,216,.25); background: transparent; font-size: 1.25rem;
  }
  .viewer__nav--prev { border-right: 1px solid rgba(238,229,216,.25); }
  .viewer__nav:active { background: var(--blanco); color: var(--negro); }
  .viewer__foot { padding-bottom: calc(.9rem + env(safe-area-inset-bottom, 0px)); }
}

/* Tablet vertical: accesos más apaisados (2×2 de 4:5 ocupaba casi dos pantallas) */
@media (min-width: 600px) and (max-width: 900px) and (orientation: portrait) {
  .tile { aspect-ratio: 4 / 3; }
}

/* Celular apaisado (alto ~320–414px) */
@media (max-width: 900px) and (orientation: landscape) {
  /* Inicio apaisado: la foto ocupa la primera pantalla (como antes) y, al bajar, los 4 accesos en fila */
  .hero { display: block; height: auto; min-height: 100svh; padding: 0 var(--gutter) 1rem; }
  .hero__media {
    position: relative; inset: auto; z-index: 0; height: 100svh; margin-inline: calc(-1 * var(--gutter));
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 70%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0, #000 70%, transparent 100%);
  }
  .hero__media img { object-position: var(--foco-x, 42%) 10%; }   /* cover alineado arriba: el cartel queda debajo del top bar */
  .hero__index { margin-top: -3rem; }
  .hero__index__head { padding-right: 5.5rem; }   /* el WhatsApp no tapa la cabecera en la primera pantalla */
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tile { aspect-ratio: 3 / 4; }
  .cat__more .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cat__more .tile { aspect-ratio: 4 / 3; }
  .hero__foot { margin-top: 1.5rem; padding-right: 5.5rem; border-top-width: 1px; border-top-color: rgba(238,229,216,.3); }
  .viewer__bar { padding-block: .25rem; }
  .viewer__stage { --stage-y: .5rem; --stage-x: calc(var(--gutter) + 48px); }   /* reserva el ancho de las flechas: nunca sobre la foto */
  .viewer__nav { top: 50%; bottom: auto; transform: translateY(-50%); width: 44px; height: 44px; }
  .viewer__foot { padding-block: .45rem; max-height: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

@media (max-width: 600px) {
  .nav__name span { display: none; }                      /* top bar: sin cambios */
  /* Pie: el texto usa todo el ancho y el WhatsApp queda en el espacio reservado debajo (antes la firma
     se partía en dos renglones por el margen derecho) */
  .foot { row-gap: .7rem; padding-right: var(--gutter); padding-bottom: calc(5.75rem + env(safe-area-inset-bottom, 0px)); }
  .foot__firma { flex-basis: 100%; order: 3; }
  .proj { padding: 1rem; }
  #projects { grid-template-columns: 1fr; }
}

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

/* ---------- Tipografía: textos técnicos en caja mixta ---------- */
/* Lugares y leyendas del visor son información técnica: caja mixta, sin espaciado de título */
.proj__place { text-transform: none; letter-spacing: .02em; font-weight: 500; }
.viewer__foot { text-transform: none; letter-spacing: .01em; font-weight: 400; font-size: .78rem; line-height: 1.5; }
@media (max-width: 380px) {
  /* El título de categoría más largo (COMERCIALES) entra en 320px */
  .cat__title { font-size: clamp(1.7rem, 9vw, 2.2rem); letter-spacing: .1em; }
}

/* ---------- Portada clara (panel → Portada del sitio → tono "claro"; la clase la pone el generador) ---------- */
/* Donde el top bar y el pie van sobre la foto (escritorio y celular apaisado) pasan a negro. En celular
   vertical el top bar queda sobre el hormigón oscuro y no cambia; al bajar o abrir el menú vuelve el fondo negro. */
.home--claro .hero::after { display: none; }
/* Velos marfil arriba y abajo: la foto puede tener esquinas oscuras; con el velo, el negro del menú, los íconos
   y el pie da ≥ 4.5:1 en todo el ancho (medido sobre la portada de hormigón en 1024–1920 px) */
@media (min-width: 901px), (orientation: landscape) {
  .home--claro:not(.is-scrolled) .nav:not(.is-open) { color: var(--negro); background: linear-gradient(180deg, rgba(238,229,216,.6), rgba(238,229,216,.4) 65%, rgba(238,229,216,0)); }
}
@media (min-width: 901px) {
  .home--claro .hero__foot { color: var(--negro); text-shadow: none; }
  .home--claro .hero::after { display: block; background: linear-gradient(0deg, rgba(238,229,216,.45) 0, rgba(238,229,216,.45) 3.5rem, rgba(238,229,216,0) 7rem); }
}
/* Celular: foto clara con canto seco contra el hormigón (sin fundido) y los accesos debajo, sin pisarla */
@media (max-width: 900px) {
  .home--claro .hero__media { -webkit-mask-image: none; mask-image: none; }
  .home--claro .hero__index { margin-top: 1.6rem; }
}