/* ================================================================
   ARXIU96 — dirección "La Señal": la onda y los medidores como
   sistema. Neutro claro, tinta, azul eléctrico.
   Tipografía: Archivo (titulares y párrafos) + IBM Plex Mono (todo lo
   que es dato: fichas, referencias, precios, pies de foto, menú) —
   la misma pareja que las fichas y placas físicas del archivo.
   ================================================================ */

:root {
  --bg: #f6f6f2;
  --ink: #101012;
  --gray: #5c5c60;
  --line: #d9d9d4;
  --line-strong: #101012;
  --signal: #1439c9;
  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  /* Dorado de marca (paquete arxiu96_logotipos): solo para el séptimo anillo del
     símbolo. No es color de interfaz — el acento de la web sigue siendo --signal. */
  --gold: #b4a06a;
  --pad: clamp(1.25rem, 4vw, 4rem);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.kicker, .head-note, .hero-specs,
.catalog-row .cat, .catalog-row .status, .catalog-row .ref,
.client-index, .contact-note, .footer {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--signal);
  margin-right: 0.75rem;
  vertical-align: baseline;
}

/* ---------- Topbar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
  padding: 0.85rem var(--pad);
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-weight: 900;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  text-decoration: none;
}

/* Logotipo: imagen del paquete de marca (arxiu96_logotipo_web — grotesca
   espaciada). Es un PNG recortado a 3× (380×48) para que salga nítido en
   retina; el SVG del paquete es texto vivo sin fuente y no sirve en web.
   Altura fija: la caja de la imagen es la altura de mayúsculas + 1,6 px de aire. */
.logotype {
  display: block;
  height: 16px;
  width: auto;
  /* Si la imagen falla, el alt "ARXIU96" se muestra con esta tipografía. */
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.32em;
  line-height: 16px;
  color: var(--ink);
}

/* Símbolo reducido: por debajo de ~64 px los ocho anillos se empastan.
   La cabecera usa cuatro, con el trazo al peso del contorno del logotipo. */
.mark {
  display: block;
  width: 2.1rem;
  height: 2.1rem;
  flex-shrink: 0;
  overflow: visible;
}

/* Símbolo completo: solo a tamaño grande, donde el degradado de trazo se lee. */
.mark-full {
  display: block;
  width: 4.5rem;
  height: 4.5rem;
  color: var(--gray);
  overflow: visible;
}

/* Séptimo anillo del símbolo en dorado, como en el paquete de marca. */
.mark .ring-gold,
.mark-full .ring-gold {
  stroke: var(--gold);
}

.nav {
  display: flex;
  gap: 1.75rem;
  justify-self: center;
}

.nav a {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--gray);
  text-decoration: none;
}

.nav a:hover { color: var(--ink); }
.nav a:active { transform: translateY(1px); }

.nav-cta { color: var(--signal) !important; }
.nav-cta:hover { color: #0c2485 !important; }

.nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
  padding-bottom: 2px;
}

/* ---------- Selector de idioma ---------- */

.lang-switch {
  justify-self: end;
  display: flex;
  gap: 0.35rem;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--line-strong);
}

.lang-link { color: var(--gray); text-decoration: none; }
.lang-link.is-active { color: var(--ink); }
.lang-link:hover { color: var(--signal); }

.lang-notice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: var(--ink);
  color: var(--bg);
  font-size: 0.82rem;
  text-align: center;
  padding: 0.65rem var(--pad);
}

.lang-notice button {
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--bg);
  color: var(--bg);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.6rem;
  cursor: pointer;
}

.lang-notice[hidden] { display: none; }

/* ---------- Pie: enlaces y aviso legal ---------- */

.footer-links { display: flex; gap: 1.25rem; }
.footer-links a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.footer-links a:hover { color: var(--ink); border-bottom-color: var(--ink); }

.footer-legal { flex-basis: 100%; font-size: 0.78rem; }

/* ---------- Hero ---------- */

.hero {
  padding: clamp(4rem, 12vh, 7.5rem) var(--pad) clamp(3rem, 8vh, 5rem);
  border-bottom: 2px solid var(--line-strong);
}

.kicker {
  color: var(--gray);
  margin-bottom: 1.75rem;
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3rem, 8.5vw, 6.5rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

/* Entrada del hero: las líneas del titular suben desde detrás de una máscara */
.hero h1.reveal { opacity: 1; transform: none; transition: none; }

.hero h1 .line { display: block; overflow: hidden; }

.hero h1 .line-inner {
  display: block;
  transform: translateY(112%);
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero h1 .line:nth-child(2) .line-inner { transition-delay: 0.14s; }

.hero h1.is-visible .line-inner { transform: none; }

/* El punto azul del kicker parpadea dos veces al cargar, como una luz de REC */
.hero .kicker .dot { animation: rec-blink 0.8s ease-out 0.25s 2; }

@keyframes rec-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}

.wave {
  margin: clamp(2rem, 5vh, 3.5rem) 0;
}

.wave svg {
  display: block;
  width: 100%;
  height: clamp(70px, 10vw, 120px);
}

.wave-path {
  stroke: var(--ink);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 2600;
  stroke-dashoffset: 2600;
}

.wave.is-visible .wave-path {
  animation: draw 2.1s cubic-bezier(0.65, 0, 0.35, 1) 0.45s forwards;
}

@keyframes draw {
  to { stroke-dashoffset: 0; }
}

.playhead {
  stroke: var(--signal);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  transition: opacity 0.4s ease 2.5s;
  animation: sweep 14s linear infinite;
}

.wave.is-visible .playhead { opacity: 1; }

@keyframes sweep {
  from { transform: translateX(0); }
  to   { transform: translateX(1104px); }
}

.hero-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2rem;
}

.hero-sub {
  max-width: 36em;
  color: var(--gray);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
}

.hero-specs {
  color: var(--gray);
  white-space: nowrap;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem 2rem;
  margin-top: 2.25rem;
}

.btn { white-space: nowrap; }

.hero-actions .service-link { margin-top: 0; }

/* Botón primario: la única acción sólida de la página */
.btn {
  display: inline-block;
  padding: 0.95rem 1.9rem;
  background: var(--ink);
  color: var(--bg);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background 0.2s ease;
}

.btn:hover { background: var(--signal); color: #fff; }
.btn:active { transform: translateY(1px); }

/* ---------- Cabecera de página interior ---------- */

.page-head {
  padding: clamp(3rem, 9vh, 5.5rem) var(--pad) clamp(2rem, 5vh, 3rem);
  border-bottom: 2px solid var(--line-strong);
}

.page-head h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 7.5vw, 5.5rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-bottom: 1.75rem;
}

.page-head-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2rem;
  flex-wrap: wrap;
}

.page-lede {
  max-width: 36em;
  color: var(--gray);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
}

.page-count {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--signal);
  white-space: nowrap;
}

/* ---------- Filtros del catálogo ---------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}

.chip {
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--line-strong);
  background: transparent;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.chip:hover { border-color: var(--signal); color: var(--signal); }
.chip:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

.chip[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}

.chip[aria-pressed="true"]:hover { color: var(--bg); }

.sample-note {
  font-size: 0.85rem;
  font-style: italic;
  color: var(--gray);
  border: 1px dashed #b9b9b2;
  padding: 0.6rem 0.8rem;
  margin-bottom: 2rem;
}

/* ---------- Grupos del catálogo ---------- */

.catalog-group + .catalog-group { margin-top: 2.75rem; }

.catalog-group[hidden] { display: none; }

.group-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
}

.empty-state {
  padding: 2.5rem 0;
  color: var(--gray);
}

/* ---------- Cómo funciona ---------- */

.how {
  padding: clamp(2.5rem, 6vh, 4rem) var(--pad);
  border-bottom: 2px solid var(--line-strong);
}

.how-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 2.5rem;
}

/* ---------- Pieza destacada del archivo ---------- */

.piece {
  display: grid;
  grid-template-columns: minmax(280px, 460px) 1fr;
  gap: 3rem;
  align-items: end;
  padding: clamp(2.5rem, 6vh, 4rem) var(--pad);
  border-bottom: 2px solid var(--line-strong);
}

.piece-photo { margin: 0; }

.piece-photo img {
  display: block;
  width: 100%;
  height: auto;
}

.piece-note {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-bottom: 0.5rem;
  max-width: 26em;
}

.piece-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 4.6vw, 3.5rem);
  letter-spacing: -0.02em;
}

.piece-text { color: var(--gray); }

/* El enlace bajo la pieza destacada: solo tan ancho como su texto (el
   contenedor es una columna flex y lo estiraría a todo el ancho). */
.piece-note .service-link { align-self: flex-start; margin-top: 0.75rem; }

/* ---------- Servicios ---------- */

.services { border-bottom: 2px solid var(--line-strong); }

.service {
  display: grid;
  grid-template-columns: minmax(4rem, 10rem) 1fr;
  gap: 1rem;
  padding: clamp(2.5rem, 6vh, 4rem) var(--pad);
}

.service + .service { border-top: 1px solid var(--line); }

.service-index {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  color: var(--signal);
}

.service h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 4.6vw, 3.5rem);
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
}

.service-lede {
  font-weight: 600;
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}

.service-body p { max-width: 38em; }

.service-body > p:not(.service-lede) { color: var(--gray); }

.service-link {
  position: relative;
  display: inline-block;
  margin-top: 1.25rem;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  color: var(--signal);
  padding-bottom: 7px;
}

/* Subrayado plano que al hover se convierte en una onda: el pulso de la casa */
.service-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3px;
  height: 2px;
  background: var(--signal);
  transition: opacity 0.2s ease;
}

.service-link::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 7px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='7' viewBox='0 0 14 7'%3E%3Cpath d='M0 3.5 Q3.5 0 7 3.5 T14 3.5' fill='none' stroke='%231439c9' stroke-width='2'/%3E%3C/svg%3E");
  background-size: 14px 7px;
  background-repeat: repeat-x;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.service-link:hover { color: #0c2485; }
.service-link:hover::after { opacity: 0; }
.service-link:hover::before {
  opacity: 1;
  animation: wave-slide 0.5s ease-out 1;
}

@keyframes wave-slide {
  from { background-position-x: 0; }
  to   { background-position-x: 14px; }
}

.service-link:active { transform: translateY(1px); }

/* ---------- Catálogo ---------- */

.catalog {
  padding: clamp(2.5rem, 6vh, 4rem) var(--pad);
  border-bottom: 2px solid var(--line-strong);
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.section-head h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  letter-spacing: -0.02em;
}

.head-note {
  color: var(--signal);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}

a.head-note:hover { border-bottom-color: var(--signal); }
a.head-note:active { color: #0c2485; }

.catalog-list { list-style: none; }

.catalog-row {
  position: relative;
  display: grid;
  grid-template-columns: 3.5rem 6.5rem 1fr 9rem 8rem;
  gap: 1.25rem;
  align-items: center;
  padding: 0.95rem 0;
  border-top: 1px solid var(--line);
  transition: background 0.15s ease;
}

.catalog-row:last-child { border-bottom: 1px solid var(--line); }

.catalog-row:hover { background: #efefe9; }

.meter {
  display: flex;
  gap: 3px;
  align-items: flex-end;
  height: 22px;
}

.meter i {
  display: block;
  width: 5px;
  background: var(--ink);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: height 0.2s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.catalog-row.is-visible .meter i { transform: scaleY(1); }
.catalog-row.is-visible .meter i:nth-child(2) { transition-delay: 0s, 0.07s; }
.catalog-row.is-visible .meter i:nth-child(3) { transition-delay: 0s, 0.14s; }
.catalog-row.is-visible .meter i:nth-child(4) { transition-delay: 0s, 0.21s; }

.meter .m-accent { background: var(--signal); }

.catalog-row:hover .meter i { height: 22px !important; }
.catalog-row:hover .meter i:nth-child(1) { height: 12px !important; }
.catalog-row:hover .meter i:nth-child(3) { height: 17px !important; }

.meter.has-photo {
  height: 2.75rem;
  width: 2.75rem;
  overflow: hidden;
  border: 1px solid var(--line);
}

.meter.has-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(55%);
  transition: filter 0.25s ease;
}

.catalog-row:hover .meter.has-photo img { filter: grayscale(0%); }

.catalog-row .ref { font-weight: 700; letter-spacing: 0.05em; }

.catalog-row .item { font-family: var(--font-mono); font-weight: 500; font-size: 1.02rem; letter-spacing: 0; }

.catalog-row .cat { color: var(--gray); }

.catalog-row .status { text-align: right; }

.catalog-row .st-out { color: var(--gray); }

.row-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.row-link:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

/* ---------- Ficha (equipo / proyecto) ---------- */

.ficha-specs .fact { display: grid; grid-template-columns: 10rem 1fr; gap: 1rem; align-items: baseline; }
.ficha-specs .fact-label { margin-bottom: 0; }

@media (max-width: 640px) {
  .ficha-specs .fact { grid-template-columns: 1fr; gap: 0.2rem; }
}

.ficha-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
  padding: clamp(2.5rem, 6vh, 4rem) var(--pad);
  border-bottom: 2px solid var(--line-strong);
}

.ficha-gallery img { display: block; width: 100%; height: 260px; object-fit: cover; }

.linked-pieces { display: flex; flex-direction: column; }
.linked-pieces li { border-top: 1px solid var(--line); }
.linked-pieces li:last-child { border-bottom: 1px solid var(--line); }
.linked-pieces a { display: block; padding: 0.9rem 0; color: inherit; text-decoration: none; font-weight: 500; }
.linked-pieces a:hover { color: var(--signal); }

/* ---------- Cabecera de las páginas de sección (Arxiu, Projectes, Taller,
   Lloguer, Aviso legal): nombre de sección a 48px, una línea de subtítulo
   a 18px en gris medio, 72px de separación inferior. Sin eyebrow ni
   etiqueta. La home tiene su hero y las fichas su propia cabecera. ---------- */

.index-head h1 { font-size: 48px; margin-bottom: 0.5rem; }

/* Arxiu: cabecera de colección. Dos frases; sin recuento, sin etiquetas. */
.arx-head .page-lede { max-width: 30em; color: var(--ink); }

/* ---------- Arxiu: rejilla de tarjetas ----------
   Cada pieza igual que la anterior: imagen 1:1, referencia pequeña arriba,
   nombre, año. Nada más: ni precio ni botón. La repetición es lo que
   comunica archivo. */
.arx-index { padding-top: clamp(2rem, 5vh, 3rem); }
.arx-index .catalog-group + .catalog-group { margin-top: clamp(3rem, 7vh, 4.5rem); }
.arx-index .group-title { margin-bottom: 1.25rem; }

.arx-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 2.5rem 2rem;
  max-width: 1100px;
}

.arx-card { position: relative; }

.arx-card-photo { margin: 0 0 0.9rem; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--line); background: var(--bg); }
.arx-card-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease-out; }
.arx-card:hover .arx-card-photo img { transform: scale(1.03); }

.arx-card-ref { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; color: var(--gray); margin-bottom: 0.3rem; }
.arx-card-name { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; line-height: 1.25; }
.arx-card:hover .arx-card-name { color: var(--signal); }
.arx-card-year { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--gray); margin-top: 0.2rem; font-variant-numeric: tabular-nums; }

.arx-rent { margin-top: clamp(3rem, 8vh, 5rem); font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.04em; }
.arx-rent a { color: var(--gray); text-decoration: none; border-bottom: 1px solid transparent; }
.arx-rent a:hover { color: var(--signal); border-bottom-color: var(--signal); }

@media (max-width: 640px) {
  .arx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1rem; }
  .arx-card-name { font-size: 0.95rem; }
}

@media (prefers-reduced-motion: reduce) {
  .arx-card-photo img { transition: none; }
}

/* ---------- Filtros del índice de proyectos ----------
   NO EXISTEN hasta que haya 6 proyectos o más — un filtro sobre 3 elementos
   es ridículo y delata lo que intenta disimular. Cuando lleguen a 6, añadir
   en el HTML, justo encima de .project-index:
     <div class="project-filters" role="group" aria-label="Filtrar por tipo">
       <button type="button" class="is-active" data-filter="tots">Tots</button>
       <button type="button" data-filter="esdeveniments">Esdeveniments</button>
       <button type="button" data-filter="espais">Espais</button>
       <button type="button" data-filter="festes">Festes</button>
       <button type="button" data-filter="peces">Peces</button>
     </div>
   Sin cajas, sin botones visibles, sin subrayado — solo color. */

.project-filters { display: flex; gap: 1.75rem; margin-bottom: 2.5rem; }

.project-filters button {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--gray);
  cursor: pointer;
}

.project-filters button.is-active { color: var(--ink); }
.project-filters button:hover { color: var(--ink); }

/* ---------- Índice de proyectos: lista vertical, no rejilla ----------
   A propósito: 3 proyectos en rejilla de 3 se leen como "solo tenemos 3";
   los mismos 3 en lista vertical a todo ancho se leen como selección.
   Orden: cronológico inverso por defecto. Sin paginación hasta los 20.
   A partir de 12 proyectos, añadir la clase "is-two-col" a .project-index
   (no antes). */

.projects-section { padding: clamp(2.5rem, 6vh, 4rem) 0; border-bottom: 2px solid var(--line-strong); }

.projects-wrap { max-width: 1320px; margin: 0 auto; padding: 0 48px; }

.project-index {
  display: flex;
  flex-direction: column;
  gap: 96px;
}

.project-index.is-two-col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 56px 48px;
}

.project-entry {
  display: block;
  color: inherit;
  text-decoration: none;
}

.project-entry-image { aspect-ratio: 3 / 2; overflow: hidden; }

.project-entry-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease-out;
}

.project-entry:hover .project-entry-image img { transform: scale(1.02); }

.project-entry-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  margin-top: 1.25rem;
}

.project-entry-row + .project-entry-row { margin-top: 0.3rem; }

.project-type {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}

.project-entry-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.02em;
}

.project-meta { font-family: var(--font-mono); font-size: 13px; color: var(--gray); text-align: right; white-space: nowrap; }
.project-roles { font-family: var(--font-mono); font-size: 13px; color: var(--gray); margin-top: 0.6rem; }

.next-project {
  border-top: 2px solid var(--line-strong);
  padding: 2rem var(--pad);
  text-align: right;
}

.next-project a {
  color: inherit;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
}

.next-project a:hover { color: var(--signal); }

@media (max-width: 760px) {
  .projects-wrap { padding: 0 20px; }
  .project-index { gap: 56px; }
  .project-index.is-two-col { grid-template-columns: 1fr; }
  .project-entry-row { flex-direction: column; align-items: flex-start; gap: 0.2rem; }
  .project-meta { text-align: left; }
  .next-project { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .project-entry-image img { transition: none; }
}

/* ---------- Clientes ---------- */

.clients {
  padding: clamp(2.5rem, 6vh, 4rem) var(--pad);
  border-bottom: 2px solid var(--line-strong);
}

.clients-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}

.clients-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.client {
  border-top: 1px solid var(--line);
  padding-top: 1.25rem;
}

.client-index { display: block; margin-bottom: 0.75rem; }

.client p:last-child { color: var(--gray); font-size: 0.98rem; }

/* ---------- Estudio ---------- */

.studio {
  padding: clamp(2.5rem, 6vh, 4rem) var(--pad);
  border-bottom: 2px solid var(--line-strong);
}

.studio-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 3rem;
  align-items: start;
}

.studio-manifesto {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.studio-manifesto p {
  font-weight: 500;
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  line-height: 1.35;
  letter-spacing: -0.02em;
  max-width: 24em;
}

.studio-facts {
  display: flex;
  flex-direction: column;
}

.fact {
  border-top: 1px solid var(--line);
  padding: 1.1rem 0;
}

.fact:last-child { border-bottom: 1px solid var(--line); }

.fact-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  margin-bottom: 0.5rem;
}

.fact p:not(.fact-label) { color: var(--gray); font-size: 0.98rem; }

/* Hueco pendiente de contenido real: visible a propósito */
.placeholder {
  border: 1px dashed #b9b9b2;
  padding: 0.6rem 0.8rem;
  font-style: italic;
}

/* ---------- Contacto ---------- */

.contact {
  padding: clamp(4rem, 12vh, 7rem) var(--pad);
  border-bottom: 2px solid var(--line-strong);
}

.contact-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 7.5vw, 5.5rem);
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}

.contact-mail {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-weight: 600;
  font-size: clamp(1.1rem, 2.4vw, 1.6rem);
  letter-spacing: -0.01em;
  text-decoration: none;
  border-bottom: 2px solid var(--signal);
  padding-bottom: 3px;
}

.contact-mail:hover { color: var(--signal); }
.contact-mail:active { color: #0c2485; border-bottom-color: #0c2485; }

/* Medidor de volumen junto al email: la web "sube de volumen" en la conversión */
.vu {
  display: inline-flex;
  gap: 3px;
  align-items: flex-end;
  height: 20px;
}

.vu i {
  display: block;
  width: 4px;
  height: 20px;
  background: var(--signal);
  transform: scaleY(0.15);
  transform-origin: bottom;
  transition: transform 0.25s ease;
}

.contact-mail:hover .vu i { animation: vu-bounce 0.5s ease-in-out infinite alternate; }
.contact-mail:hover .vu i:nth-child(2) { animation-delay: -0.15s; }
.contact-mail:hover .vu i:nth-child(3) { animation-delay: -0.3s; }
.contact-mail:hover .vu i:nth-child(4) { animation-delay: -0.45s; }

@keyframes vu-bounce {
  from { transform: scaleY(0.2); }
  to   { transform: scaleY(1); }
}

.contact-note {
  margin-top: 1.75rem;
  color: var(--gray);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}

/* ---------- Ficha de proyecto (formulario) ---------- */

.brief {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  border-top: 1px solid var(--line);
  padding-top: 1.25rem;
}

.brief-hp { display: none; }

.brief-title {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.brief-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 0.4rem;
}

.brief-optional { text-transform: none; letter-spacing: 0.02em; }

.brief-type {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.brief-type .brief-label { width: 100%; }

.pill input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.pill span {
  display: inline-block;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.pill input:checked + span { background: var(--ink); color: var(--bg); }
.pill input:focus-visible + span { outline: 2px solid var(--signal); outline-offset: 2px; }
.pill:hover span { border-color: var(--signal); color: var(--signal); }
.pill input:checked + span:hover { color: var(--bg); }

.brief-field input,
.brief-field textarea {
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  padding: 0.45rem 0;
  font-family: var(--font);
  font-size: 1.05rem;
  color: var(--ink);
  border-radius: 0;
  resize: vertical;
}

.brief-field input:focus,
.brief-field textarea:focus {
  outline: none;
  border-bottom: 2px solid var(--signal);
  margin-bottom: -1px;
}

.brief-field ::placeholder { color: #a4a4a0; opacity: 1; }

.brief-submit {
  align-self: flex-start;
  border: 0;
  cursor: pointer;
  font-family: var(--font);
}

/* ---------- Footer ---------- */

.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  padding: 1.75rem var(--pad) 2.25rem;
  color: var(--gray);
}

/* Sin símbolo en el pie mientras no haya icono definido: el primer texto ocupa su sitio. */
.footer > span:first-child { margin-right: auto; }

/* ---------- Reveal on scroll ---------- */

/* Solo se oculta cuando hay JS (html.js lo pone un script inline en el
   <head>): si main.js no carga o está cacheado, el contenido sigue visible. */
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--d, 0ms);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .playhead { animation: none; opacity: 1; transition: none; }
  .wave-path { stroke-dasharray: none; stroke-dashoffset: 0; }
  .wave.is-visible .wave-path { animation: none; }
  .meter i { transform: none; transition: none; }
  .contact-mail:hover .vu i { animation: none; transform: scaleY(0.6); }
  .service-link:hover::before { animation: none; }
  .hero h1 .line-inner { transform: none; transition: none; }
  .hero .kicker .dot { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Lloguer ---------- */

.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--ink);
  color: var(--bg);
  font-size: 1.05rem;
  font-weight: 700;
  padding: 1.1rem 2.2rem;
  text-decoration: none;
}

.btn-whatsapp:hover { background: var(--signal); }
.btn-whatsapp:active { transform: translateY(1px); }

.steps-list { display: flex; flex-direction: column; gap: 0; margin-bottom: 2rem; }
.steps-list .fact { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; align-items: baseline; }

/* ---------- Ficha de equipo: foto de detalle (segunda imagen) ---------- */

.ficha-detail {
  margin: 0;
  padding: 0 var(--pad) clamp(2.5rem, 6vh, 4rem);
  border-bottom: 2px solid var(--line-strong);
}

/* Proporción única de las fotos de detalle: 3:2, criterio fijo del sistema
   (la de la cámara con la que se hará la sesión). Nunca se recorta: la foto
   se encaja entera en el marco 3:2 y, si viene en otra proporción, el fondo
   de la web rellena los lados. Archivos exportados a 1500×1000. */
.ficha-detail img { display: block; width: 100%; max-width: 1100px; aspect-ratio: 3 / 2; object-fit: contain; object-position: center; background: var(--bg); }

.ficha-detail figcaption {
  margin-top: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--gray);
}

/* Dos (o más) fotos de detalle en la misma ficha: fila de dos columnas,
   cada una con su pie; en móvil, apiladas. El contenedor asume el
   padding y el filete inferior que llevaría una .ficha-detail suelta. */
.ficha-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  padding: 0 var(--pad) clamp(2.5rem, 6vh, 4rem);
  border-bottom: 2px solid var(--line-strong);
}

.ficha-details .ficha-detail { padding: 0; border-bottom: 0; }

@media (max-width: 760px) {
  .ficha-details { grid-template-columns: 1fr; gap: 2rem; }
}

/* ---------- Ficha de equipo: especificación clave junto a la foto ---------- */

.piece--ficha { align-items: start; }
.piece--ficha .piece-note { max-width: none; gap: 0; padding-bottom: 0; }
.piece--ficha .piece-note > .fact-label:first-child { margin-bottom: 0.5rem; }

.ficha-specs .fact { grid-template-columns: 8.5rem 1fr; padding: 0.85rem 0; }
.ficha-specs .fact-label { color: var(--gray); }
.ficha-specs .fact p:not(.fact-label) { font-family: var(--font-mono); color: var(--ink); font-size: 0.92rem; line-height: 1.45; }

/* ---------- Ficha de equipo: especificaciones completas, a todo ancho ---------- */

.specs {
  padding: clamp(2.5rem, 6vh, 4rem) var(--pad);
  border-bottom: 2px solid var(--line-strong);
}

/* Dos columnas (2×2 con cuatro grupos): columnas anchas, valores sin partir. En móvil, una. */
.specs-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem 4rem;
  max-width: 1100px;
}

.specs-group h3 {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: 0.75rem;
}

.specs-group dl { margin: 0; }

.specs-group .row {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
  gap: 1.25rem;
  align-items: baseline;
  padding: 0.7rem 0;
  border-top: 1px solid var(--line);
}

.specs-group .row:last-child { border-bottom: 1px solid var(--line); }
.specs-group dt { font-family: var(--font-mono); color: var(--gray); font-size: 0.82rem; }

.specs-group dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.specs-note { margin-top: 1.5rem; color: var(--gray); font-size: 0.85rem; }

@media (max-width: 640px) {
  .specs-grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* ---------- Taller: Taula 01 ---------- */

.opening { margin: 0; }
.opening-media { max-height: 78vh; overflow: hidden; }
.opening-media img { display: block; width: 100%; height: 100%; max-height: 78vh; object-fit: cover; }
.opening-media .sample-note { min-height: 46vh; margin: 0; display: flex; align-items: center; justify-content: center; text-align: center; }
.opening-caption { padding: 1.75rem var(--pad) 0; }

.opening-caption h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 4.6vw, 3.5rem);
  letter-spacing: -0.02em;
  margin-bottom: 0.35rem;
}

.opening-caption p { color: var(--gray); font-size: 18px; }

.prose { max-width: 620px; }
.prose p + p { margin-top: 1rem; }

.why-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2.5rem; }
.why-grid .fact h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 0.35rem; }
.why-grid .fact p { color: var(--gray); font-size: 0.98rem; }

.variants { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.variant-photo { aspect-ratio: 4 / 5; overflow: hidden; margin-bottom: 1rem; }
.variant-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.variant-photo .sample-note { height: 100%; margin: 0; display: flex; align-items: center; justify-content: center; text-align: center; }

.variant h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  margin-bottom: 0.3rem;
}

.variant p { color: var(--gray); font-size: 0.98rem; }
.variant .dims { font-family: var(--font-mono); font-size: 0.9rem; color: var(--ink); font-weight: 500; margin-top: 0.4rem; }
.variants-notes { margin-top: 2rem; color: var(--gray); font-size: 0.98rem; display: flex; flex-direction: column; gap: 0.3rem; }

.taller-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 2rem; }
.taller-gallery > * { aspect-ratio: 4 / 3; }
.taller-gallery img { display: block; width: 100%; height: 100%; object-fit: cover; }
.taller-gallery .sample-note { margin: 0; display: flex; align-items: center; justify-content: center; text-align: center; }

.sonat-count { font-size: 1.15rem; margin-bottom: 1.25rem; }
.sonat-list { list-style: none; display: flex; flex-direction: column; }
.sonat-list li { display: flex; align-items: center; gap: 1rem; border-top: 1px solid var(--line); padding: 0.9rem 0; }
.sonat-list li:last-child { border-bottom: 1px solid var(--line); }
.sonat-thumb { width: 2.75rem; height: 2.75rem; flex: none; background: var(--line); overflow: hidden; }
.sonat-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sonat-list a { color: inherit; text-decoration: none; font-weight: 500; }
.sonat-list a:hover { color: var(--signal); }
.sonat-list span { font-family: var(--font-mono); color: var(--gray); font-size: 0.85rem; }

@media (max-width: 760px) {
  .why-grid, .variants, .taller-gallery { grid-template-columns: 1fr; }
}

/* ---------- Responsive ---------- */

/* Botón del menú y ES/EN del panel: solo en móvil. Texto en mono, sin icono (el icono está por decidir). */
.nav-toggle { display: none; }
.lang-switch--panel { display: none; }

@media (max-width: 760px) {
  .topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem var(--pad);
    /* Sin backdrop-filter en móvil: crearía un contenedor para el panel fijo
       y este quedaría encerrado en la cabecera. Fondo sólido. */
    backdrop-filter: none;
    background: var(--bg);
  }
  .topbar > .lang-switch { display: none; }

  .nav-toggle {
    display: inline-block;
    background: none;
    border: 0;
    padding: 0.25rem 0;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--ink);
    cursor: pointer;
  }
  .nav-toggle-close { display: none; }
  .topbar.is-open .nav-toggle-open { display: none; }
  .topbar.is-open .nav-toggle-close { display: inline; }

  /* Panel desplegable: ocupa la pantalla bajo la cabecera; los cuatro
     nombres de sección en Archivo, a tamaño de titular, uno por línea,
     con el mismo filete que el resto de la web. ES/EN al pie del panel. */
  .nav {
    display: none;
    position: fixed;
    inset: var(--topbar-h, 3.6rem) 0 0 0;
    width: 100%;
    justify-self: stretch; /* la regla de escritorio lo centra y encogería el panel */
    z-index: 9;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    padding: 1.5rem var(--pad) 2rem;
    background: var(--bg);
    border-top: 1px solid var(--line);
    overflow-y: auto;
  }
  .topbar.is-open + .lang-notice,
  .topbar.is-open ~ main { visibility: hidden; }
  .topbar.is-open .nav { display: flex; }

  .nav a {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.9rem, 8vw, 2.4rem);
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--ink);
    padding: 1rem 0;
    border-bottom: 1px solid var(--line);
  }
  .nav a[aria-current="page"] { border-bottom: 1px solid var(--line); padding-bottom: 1rem; color: var(--gray); }
  .nav a.nav-cta { color: var(--signal) !important; }
  .nav .lang-switch--panel {
    display: flex;
    margin-top: 1.75rem;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--line-strong);
    gap: 0.35rem;
  }
  .nav .lang-switch--panel a {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    line-height: 1;
    padding: 0;
    border: 0;
    color: var(--gray);
  }
  .nav .lang-switch--panel a.is-active { color: var(--ink); }
  body.nav-open { overflow: hidden; }

  .hero-foot { flex-direction: column; gap: 1rem; }

  .service { grid-template-columns: 1fr; gap: 0.25rem; }

  .catalog-row {
    grid-template-areas:
      "meter ref status"
      "meter item item";
    grid-template-columns: 3rem auto 1fr;
    row-gap: 0.35rem;
  }
  .catalog-row .meter { grid-area: meter; align-self: center; }
  .catalog-row .ref { grid-area: ref; }
  .catalog-row .item { grid-area: item; }
  .catalog-row .status { grid-area: status; }
  .catalog-row .cat { display: none; }

  .clients-grid { grid-template-columns: 1fr; }

  .studio-grid { grid-template-columns: 1fr; gap: 2rem; }

  .contact-grid { grid-template-columns: 1fr; gap: 3rem; }

  .how-grid { grid-template-columns: 1fr; }

  .piece { grid-template-columns: 1fr; gap: 1.75rem; align-items: start; }
  .piece-photo img { max-height: none; width: 100%; }
}

/* ---------- Ficha de pieza (brief Arxiu): foto · placa · dos frases ·
   ficha mínima · detalles · on ha sonat · lloguer ---------- */

.ficha-hero { padding: 1.5rem var(--pad) 0; }
.ficha-hero .kicker { margin-bottom: 1.25rem; }
.ficha-hero-photo { margin: 0; }
/* Foto principal 1:1: se limita el ancho para que no ocupe dos pantallas. */
.ficha-hero-photo img { display: block; width: 100%; max-width: 760px; height: auto; border: 1px solid var(--line); }

/* La placa: el mismo objeto que el logotipo. Símbolo, referencia, nombre en
   caja alta espaciada como el logotipo, año. Filete de tinta, como una
   placa física atornillada a la pieza. */
.plate-wrap {
  display: grid;
  grid-template-columns: minmax(260px, 380px) minmax(0, 1fr);
  gap: 3rem 4rem;
  align-items: start;
  padding: clamp(2.5rem, 6vh, 4rem) var(--pad);
  border-bottom: 2px solid var(--line-strong);
}

.plate {
  border: 2px solid var(--ink);
  padding: 1.25rem 1.4rem 1.2rem;
  display: grid;
  gap: 0.75rem;
  background: var(--bg);
}

.plate-mark { width: 1.75rem; height: 1.75rem; margin-bottom: 0.5rem; } /* sin uso hasta que haya icono */
.plate-ref { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; }
.plate-name { font-family: var(--font); font-weight: 600; font-size: clamp(1.05rem, 1.7vw, 1.35rem); text-transform: uppercase; letter-spacing: 0.16em; line-height: 1.35; }
.plate-year { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.06em; color: var(--gray); font-variant-numeric: tabular-nums; }

.criteria p { font-size: clamp(1.15rem, 1.8vw, 1.45rem); line-height: 1.45; letter-spacing: -0.01em; max-width: 30em; }
.criteria .draft { font-style: italic; color: var(--gray); }

.mini-specs { padding: clamp(2rem, 5vh, 3rem) var(--pad); border-bottom: 2px solid var(--line-strong); }
.mini-specs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1.5rem 2.5rem; max-width: 1100px; }
.mini-specs .fact { border-top: 1px solid var(--line); border-bottom: 0; padding: 0.85rem 0 0; }
.mini-specs .fact-label { color: var(--gray); margin-bottom: 0.35rem; }
.mini-specs .fact p:not(.fact-label) { font-family: var(--font-mono); color: var(--ink); font-size: 0.92rem; }

.ficha-details { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); max-width: 1100px; border-bottom: 0; padding-bottom: 0; }

.ficha-rent { padding: 0 var(--pad) clamp(3rem, 8vh, 5rem); }
.ficha-rent .arx-rent { margin-top: clamp(2rem, 5vh, 3rem); }

@media (max-width: 760px) {
  .plate-wrap { grid-template-columns: 1fr; gap: 2rem; }
  .plate { max-width: 380px; }
}

/* ---------- Home (brief): cuatro bloques. Apertura con una sola imagen ---------- */
.hero--home { padding-bottom: clamp(3rem, 8vh, 5rem); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr); gap: 3rem 4rem; align-items: center; }
.hero--home h1 { font-size: clamp(2.8rem, 6.5vw, 5.5rem); margin-bottom: 1.5rem; }
.hero--home .hero-sub { max-width: 32em; }
.hero-image { margin: 0; max-width: 520px; justify-self: end; width: 100%; }
.hero-image img { display: block; width: 100%; height: auto; border: 1px solid var(--line); }
.hero-image figcaption { margin-top: 0.6rem; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; color: var(--gray); }

/* El archivo en la home: una fila, mismo tratamiento que /arxiu */
.home-arxiu { padding-bottom: clamp(3rem, 7vh, 4.5rem); }
.arx-grid--row { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.5rem 1.25rem; max-width: none; }
.arx-grid--row .arx-card-name { font-size: 0.95rem; }

/* Espais: dos líneas y un enlace */
.espais { padding: clamp(3rem, 8vh, 5rem) var(--pad); border-bottom: 2px solid var(--line-strong); }
.espais h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.7rem, 3.2vw, 2.6rem); letter-spacing: -0.02em; line-height: 1.1; max-width: 22em; margin-bottom: 1rem; }
.espais p { max-width: 36em; color: var(--gray); }
.espais p + p { margin-top: 0.25rem; }

/* Cierre de la home: dos líneas */
.footer--home { display: block; padding: 2rem var(--pad) 2.5rem; }
.footer-line { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.04em; color: var(--ink); }
.footer-line a { text-decoration: none; border-bottom: 1px solid var(--line); }
.footer-line a:hover { border-bottom-color: var(--ink); }
.footer-line--small { margin-top: 0.5rem; font-size: 0.7rem; color: var(--gray); }

@media (max-width: 1000px) { .arx-grid--row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2rem; }
  .hero-image { justify-self: start; max-width: 100%; }
}
@media (max-width: 640px) { .arx-grid--row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Arquitectura 21-09-2026: home de cuatro bloques, Contacte, Lloguer dentro de Arxiu ---------- */
.services-now { padding: clamp(2.5rem, 6vh, 4rem) var(--pad); border-bottom: 2px solid var(--line-strong); }
.services-list { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 3rem; max-width: 1100px; }
.services-list li { border-top: 1px solid var(--line); padding-top: 1rem; }
.services-list h2 { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; letter-spacing: -0.02em; margin: 0.35rem 0 0.5rem; }
.services-list p:not(.fact-label) { color: var(--gray); max-width: 26em; }
.services-list .service-link { margin-top: 0.9rem; }

.home-contact { padding: clamp(3rem, 8vh, 5rem) var(--pad); border-bottom: 2px solid var(--line-strong); }
.home-contact h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing: -0.02em; margin-bottom: 1rem; }
.home-contact p + p { margin-top: 1rem; }

.contact-page { padding: clamp(2rem, 5vh, 3rem) var(--pad) clamp(3rem, 8vh, 5rem); border-bottom: 2px solid var(--line-strong); }
.contact-list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 3rem; max-width: 900px; margin: 2.5rem 0; }
.contact-list li { border-top: 1px solid var(--line); padding-top: 1rem; scroll-margin-top: 5rem; }
.contact-list p:not(.fact-label) { color: var(--gray); }
.contact-list .service-link { margin-top: 0.75rem; }
.contact-page .contact-note a { color: inherit; }

.eq-list { list-style: none; max-width: 760px; }
.eq-list li { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; border-top: 1px solid var(--line); padding: 0.8rem 0; }
.eq-list li:last-child { border-bottom: 1px solid var(--line); }
.eq-list a { text-decoration: none; color: inherit; font-weight: 500; }
.eq-list a:hover { color: var(--signal); }
.eq-list .ref { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; color: var(--gray); margin-right: 0.75rem; }
.eq-cat { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; color: var(--gray); }

.roles-line { font-family: var(--font-mono); font-size: 0.95rem; letter-spacing: 0.04em; margin-bottom: 0.75rem; }

@media (max-width: 760px) {
  .services-list, .contact-list { grid-template-columns: 1fr; }
}

/* Lloguer como conversación: tesis, y en las fichas un enlace de disponibilidad + uno a cómo trabajamos */
.rent-thesis { font-size: clamp(1.15rem, 1.8vw, 1.45rem); line-height: 1.45; letter-spacing: -0.01em; max-width: 30em; }
.arx-rent-sep { color: var(--line); margin: 0 0.25rem; }
#principio { padding-top: clamp(2rem, 5vh, 3rem); }