/* ============================================================
   Vestigia Design · páginas de obra (/mirotti/, /tahay/, ...)
   Hoja propia, escrita a mano igual que nuestro.css: el guion
   construir.py NO la escribe, solo la referencia.

   Doctrina passe-partout: el estudio enmarca, el proyecto se expone.
   Por eso el marco (barra, tipografía, tinta) es monocromo del estudio,
   y el color REAL del cliente aparece solo dentro del caso, declarado.

   Móvil primero: todo lo de abajo está escrito para 393px y crece
   en un solo corte a 900px. La columna única no es el modo degradado,
   es el modo base.
   ============================================================ */

@font-face{font-family:'Mona Sans';src:url('fuentes/mona-var.woff2') format('woff2');font-weight:200 900;font-style:normal;font-display:swap}

:root{
  --tinta:#1d1d1d;
  --papel:#fff;
  --gris:#767676;
  --gris-claro:#9a9a9a;
  --linea:rgba(29,29,29,.14);
  --fondo-suave:#f6f6f6;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:'Mona Sans',system-ui,sans-serif;
  font-weight:380;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit}

.env{padding-inline:20px;max-width:1200px;margin-inline:auto}

/* ---------- barra: el único enlace de vuelta al estudio ---------- */
.barra{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding-block:18px;border-bottom:1px solid var(--linea)}
.barra a{text-decoration:none;font-weight:520;letter-spacing:-.01em}
.barra a:hover{text-decoration:underline;text-underline-offset:3px}
/* el rótulo va con --gris, no --gris-claro: #9a9a9a sobre blanco da 2.81:1 y
   accesslint lo marcó serio. #6e6e6e pasa AA a este tamaño. */
.barra span{color:#6e6e6e;font-size:13px;letter-spacing:.06em;text-transform:uppercase}

/* ---------- encabezado editorial ----------
   El caso abre con el nombre y una línea de qué es, no con la captura:
   la imagen sin contexto se lee como plantilla de portafolio. */
.cabeza{padding-block:44px 32px}
.cabeza .rotulo{color:var(--gris);font-size:13px;letter-spacing:.06em;text-transform:uppercase;margin:0 0 14px}
.cabeza h1{margin:0;font-size:clamp(3rem,17vw,7rem);line-height:.92;letter-spacing:-.045em;font-weight:560}
.cabeza .bajada{margin:18px 0 0;font-size:clamp(1.05rem,4.4vw,1.35rem);line-height:1.35;max-width:24ch;color:var(--tinta)}
.cabeza .visitar{display:inline-block;justify-self:start;width:fit-content;margin-top:22px;
  font-size:15px;text-decoration:none;border-bottom:1px solid var(--tinta);padding-bottom:2px}
.cabeza .visitar:hover{opacity:.6}

/* ---------- pieza visual ---------- */
.pieza{margin-block:8px 40px}
.pieza img{width:100%;border:1px solid var(--linea)}
.pieza figcaption{margin-top:10px;color:var(--gris);font-size:14px}

/* ---------- prosa ---------- */
.bloque{padding-block:34px;border-top:1px solid var(--linea)}
.bloque h2{margin:0 0 16px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--gris);font-weight:520}
.bloque p{margin:0 0 16px;font-size:clamp(1.02rem,4.2vw,1.18rem);line-height:1.5;max-width:62ch}
.bloque p:last-child{margin-bottom:0}

/* ---------- hechos: lista sin viñetas de plantilla ----------
   No son tres tarjetas iguales con ícono. Son renglones con una cifra
   verificable adelante y la consecuencia en palabras del cliente. */
.hechos{list-style:none;margin:0;padding:0;display:grid;gap:26px}
.hechos li{display:grid;gap:6px;padding-left:0}
.hechos b{font-size:clamp(1.6rem,7vw,2.4rem);line-height:1;font-weight:560;letter-spacing:-.03em}
.hechos span{color:var(--gris);max-width:52ch}

/* ---------- franja de color del cliente ----------
   Acá es donde el proyecto SÍ se expone en su propia paleta. */
.paleta{margin-block:34px;border:1px solid var(--linea)}
/* Fila que se reparte sola: con 5 muestras el grid de 3 o de 6 columnas dejaba
   una celda vacía al final, y el hueco blanco se leía como error. En flex, los
   de la última fila crecen y la llenan, sea cual sea el número de tonos. */
.paleta .muestras{display:flex;flex-wrap:wrap}
.paleta .m{flex:1 1 96px;min-height:96px;display:flex;align-items:flex-end;padding:8px}
.paleta .m span{display:grid;gap:1px;font-size:11px;letter-spacing:.02em;
  background:rgba(255,255,255,.86);color:#1d1d1d;padding:3px 5px}
.paleta .m code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;color:#4a4a4a}
.paleta .pie{padding:14px 16px;color:var(--gris);font-size:14px;border-top:1px solid var(--linea)}

/* ---------- cierre ---------- */
.cierre{padding-block:44px 60px;border-top:1px solid var(--linea)}
.cierre p{margin:0 0 22px;font-size:clamp(1.25rem,5.6vw,1.9rem);line-height:1.22;letter-spacing:-.02em;max-width:20ch}
.cierre .acciones{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.cierre a{text-decoration:none;border-bottom:1px solid var(--tinta);padding-bottom:2px;font-size:16px}
.cierre a:hover{opacity:.6}

/* ---------- foco visible: obligación, no adorno ---------- */
a:focus-visible{outline:2px solid var(--tinta);outline-offset:3px}

@media (min-width:900px){
  .env{padding-inline:40px}
  .cabeza{padding-block:80px 48px;display:grid;grid-template-columns:1.35fr 1fr;gap:40px;align-items:end}
  .cabeza .rotulo{grid-column:1/-1}
  .cabeza h1{font-size:clamp(6rem,11vw,11rem)}
  .cabeza .bajada{max-width:34ch;font-size:1.3rem}
  .bloque{padding-block:56px;display:grid;grid-template-columns:220px 1fr;gap:40px}
  .bloque h2{margin:0}
  .hechos{grid-column:2}
  .paleta .m{min-height:132px}
  .cierre{padding-block:80px 110px}
}

@media (prefers-reduced-motion:no-preference){
  .cabeza h1{transition:none}
}

/* ---------- captura de cuadro (780x910) ----------
   Algunas obras solo tienen el cuadro del carrusel, no la captura ancha.
   Estirarlo a 1120px lo deja blando: se limita a su tamaño y se centra. */
.pieza--marco img{max-width:780px;margin-inline:auto}

/* ---------- franja de color, versión 2 ----------
   El chip blanco encima del color se leía como calcomanía sobre los tonos
   oscuros, y el flex con wrap dejaba la última fila con celdas más anchas que
   la de arriba (ui-reviewer 2026-08-30). Ahora: tira continua de N columnas
   iguales, y los nombres debajo sobre el papel del estudio. */
.paleta .muestras{display:grid;grid-template-columns:repeat(var(--n),1fr);height:104px}
.paleta .m{display:block;height:100%}
.paleta .leyenda{display:flex;flex-wrap:wrap;gap:4px 18px;list-style:none;
  margin:0;padding:12px 16px;border-top:1px solid var(--linea);font-size:12px;color:#5a5a5a}
/* #8a8a8a daba 3.45:1 sobre papel: el hex es dato, no adorno, y tiene que leerse. */
.paleta .leyenda code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#6b6b6b}

/* El texto que convence iba en el mismo gris de los rótulos: sube a 7:1. */
.hechos span{color:#5a5a5a}

/* El cierre hablaba en susurro frente a la portada: área de toque de 44px. */
.cierre .acciones{gap:4px}
.cierre a{display:inline-block;padding:11px 0;font-size:17px}

@media (min-width:900px){
  .paleta .muestras{height:132px}
  /* La bajada quedaba en 231px al lado de un titular gigante (Nova): se le fija
     la medida y el titular se acomoda, no al revés. */
  .cabeza{grid-template-columns:minmax(0,1fr) 400px}
  .cabeza .bajada{max-width:none}
}

/* ---------- anterior / siguiente ---------- */
.vecinos{display:grid;gap:2px;border-top:1px solid var(--linea);margin-top:34px}
.vecinos a{display:block;padding:20px 0;text-decoration:none;font-size:clamp(1.15rem,5vw,1.5rem);
  letter-spacing:-.02em;border-bottom:1px solid var(--linea)}
.vecinos a span{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:#6e6e6e;margin-bottom:6px}
.vecinos a:hover{opacity:.6}
@media (min-width:900px){
  .vecinos{grid-template-columns:1fr 1fr;gap:0 40px}
  .vecinos .sig{text-align:right}
}