/* ── Identidad ───────────────────────────────────────────────────────────────
   La obra de Natalia es material y sobria: hueso, carbón, ceniza, y de vez en
   cuando un azul de tinta o un rosa de acuarela. El sitio no compite con eso.
   Fondo cálido casi blanco, tipografía de alto contraste para los títulos,
   mucho aire. Nada de linen y oro: eso es de la colección, no de ella.        */

:root {
  --hueso:   #F8F6F2;
  --papel:   #FFFFFF;
  --tinta:   #171614;
  --humo:    #6B6862;
  --ceniza:  #A8A49C;
  --linea:   #E4E0D8;
  --marca:   #2C3847;   /* el azul de las tintas de Suspensión */

  --serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;

  --nav-h: 72px;
  --ancho: 1180px;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--hueso);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

img { display: block; max-width: 100%; }

/* ── Navegación ───────────────────────────────────────────────────────────── */

.nav {
  position: sticky; top: 0; z-index: 50;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 40px;
  background: rgba(248, 246, 242, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linea);
}

.nav-marca {
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.nav-links { display: flex; gap: 30px; align-items: center; }

.nav-link {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--humo);
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
  background: none; border-top: 0; border-left: 0; border-right: 0;
  cursor: pointer; font-family: inherit;
}
.nav-link:hover, .nav-link.activo { color: var(--tinta); border-bottom-color: var(--tinta); }

.nav-toggle { display: none; background: none; border: 0; cursor: pointer; font-size: 20px; }

/* ── Estructura ───────────────────────────────────────────────────────────── */

.envoltura { max-width: var(--ancho); margin: 0 auto; padding: 0 40px; }

.vista { display: none; padding: 72px 0 120px; }
.vista.activa { display: block; }

.seccion-titulo {
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ceniza);
  margin-bottom: 34px;
}

/* ── Portada ──────────────────────────────────────────────────────────────── */

.portada {
  min-height: calc(100vh - var(--nav-h));
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 60px;
}

.portada-texto h1 {
  font-family: var(--serif);
  font-size: clamp(46px, 6vw, 82px);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -.01em;
}
.portada-texto h1 em { font-style: italic; display: block; }

.portada-texto p {
  margin-top: 26px;
  max-width: 42ch;
  color: var(--humo);
  font-size: 16px;
  text-align: justify;
}

.portada-acciones { margin-top: 40px; display: flex; gap: 14px; flex-wrap: wrap; }

.portada-imagen {
  aspect-ratio: 4 / 5;
  /* la portada si recorta: es una imagen de atmosfera, no una ficha */
  background: var(--papel);
  border: 1px solid var(--linea);
  display: flex; align-items: center; justify-content: center;
  color: var(--ceniza); font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  overflow: hidden;
}
.portada-imagen img { width: 100%; height: 100%; object-fit: cover; }

/* ── Botones ──────────────────────────────────────────────────────────────── */

.btn {
  display: inline-block;
  padding: 13px 26px;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  border: 1px solid var(--tinta);
  background: none; color: var(--tinta);
  cursor: pointer; font-family: inherit;
  transition: background .2s, color .2s;
}
.btn:hover { background: var(--tinta); color: var(--hueso); }
.btn-suave { border-color: var(--linea); color: var(--humo); }
.btn-suave:hover { background: none; border-color: var(--tinta); color: var(--tinta); }

/* ── Series y obra ────────────────────────────────────────────────────────── */

.serie { margin-bottom: 86px; }

.serie-cabeza {
  display: flex; align-items: baseline; gap: 16px;
  padding-bottom: 14px; margin-bottom: 30px;
  border-bottom: 1px solid var(--linea);
}
.serie-cabeza h2 {
  font-family: var(--serif); font-size: 34px; font-weight: 400; font-style: italic;
}
.serie-cabeza .cuenta { font-size: 11px; letter-spacing: .14em; color: var(--ceniza); text-transform: uppercase; }

.serie-statement {
  max-width: 62ch; color: var(--humo); margin-bottom: 34px;
  text-align: justify;
}

/* Cada obra se ve completa y a su propia proporcion. Antes las miniaturas eran
   cuadradas con object-fit: cover, lo que recortaba las piezas alargadas y
   dejaba un borde del contenedor asomando alrededor de la obra. Ahora la
   imagen define el alto de su celda y no hay marco que se note: las fotos ya
   vienen recortadas al canto de la obra. */
.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 44px 30px;
  align-items: start;
}

.pieza { cursor: pointer; }

.pieza-marco {
  display: flex; align-items: flex-end; justify-content: center;
  min-height: 120px;
  transition: opacity .25s;
}
.pieza:hover .pieza-marco { opacity: .82; }
.pieza-marco img { width: 100%; height: auto; }

.pieza-sinfoto {
  color: var(--ceniza); font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  width: 100%; aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  background: var(--papel); border: 1px solid var(--linea);
}

.pieza-datos { margin-top: 12px; }
.pieza-titulo { font-family: var(--serif); font-size: 19px; font-style: italic; }
.pieza-linea { font-size: 12px; color: var(--humo); margin-top: 2px; }

.etiqueta {
  display: inline-block; margin-top: 7px;
  font-size: 10px; letter-spacing: .13em; text-transform: uppercase;
  padding: 3px 9px; border: 1px solid var(--linea); color: var(--humo);
}
.etiqueta.disponible { border-color: var(--marca); color: var(--marca); }
.etiqueta.vendida    { border-color: var(--linea); color: var(--ceniza); }

/* ── Ficha de obra ────────────────────────────────────────────────────────── */

.ficha { display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: start; }

.ficha-imagen {
  display: flex; align-items: center; justify-content: center;
  color: var(--ceniza); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
}
.ficha-imagen img { width: 100%; height: auto; }
.ficha-imagen:empty, .ficha-imagen:not(:has(img)) {
  min-height: 440px; background: var(--papel); border: 1px solid var(--linea);
}

.ficha h1 {
  font-family: var(--serif); font-size: 44px; font-weight: 400; font-style: italic;
  line-height: 1.1;
}
.ficha .anio { color: var(--ceniza); font-size: 16px; margin-top: 4px; }

.dato { padding: 14px 0; border-bottom: 1px solid var(--linea); }
.dato-etiqueta { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ceniza); }
.dato-valor { margin-top: 4px; }

.precio { font-family: var(--serif); font-size: 27px; margin-top: 22px; }

.aviso-render {
  margin-top: 12px; padding: 9px 13px;
  background: var(--papel); border-left: 2px solid var(--ceniza);
  font-size: 11px; color: var(--humo);
}

/* ── Texto largo ──────────────────────────────────────────────────────────── */

/* Los textos largos van justificados, sin partir palabras: el guion de corte
   ensucia la lectura y no va con la sobriedad del resto. */
.prosa { max-width: 66ch; }
.prosa p {
  margin-bottom: 1.15em;
  text-align: justify;
}
.prosa h2 {
  font-family: var(--serif); font-size: 27px; font-weight: 400;
  margin: 46px 0 16px;
}

.cv-bloque { margin-bottom: 34px; }
.cv-bloque h3 {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ceniza); margin-bottom: 10px;
}
.cv-bloque p { margin-bottom: 4px; }

/* ── Formularios ──────────────────────────────────────────────────────────── */

.form { max-width: 560px; }
.campo { margin-bottom: 20px; }
.campo label {
  display: block; font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ceniza); margin-bottom: 6px;
}
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 11px 13px;
  background: var(--papel); border: 1px solid var(--linea);
  font-family: inherit; font-size: 14px; color: var(--tinta);
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--tinta);
}
.campo textarea { min-height: 120px; resize: vertical; }
.campo-trampa { position: absolute; left: -9999px; opacity: 0; }

.form-nota { font-size: 12px; color: var(--humo); margin-top: 14px; }
.form-aviso { padding: 13px; border: 1px solid var(--linea); margin-bottom: 18px; font-size: 13px; }
.form-aviso.ok    { border-color: var(--marca); color: var(--marca); }
.form-aviso.error { border-color: #A33; color: #A33; }

/* ── Pie ──────────────────────────────────────────────────────────────────── */

.pie {
  border-top: 1px solid var(--linea);
  padding: 40px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 16px;
  font-size: 12px; color: var(--humo);
}
.pie a { border-bottom: 1px solid var(--linea); }
.pie a:hover { border-bottom-color: var(--tinta); }

.vacio { color: var(--ceniza); font-size: 14px; padding: 34px 0; }

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .nav { padding: 0 22px; }
  .nav-links {
    position: fixed; top: var(--nav-h); left: 0; right: 0;
    background: var(--hueso); border-bottom: 1px solid var(--linea);
    flex-direction: column; align-items: flex-start; gap: 0;
    padding: 14px 22px 22px; display: none;
  }
  .nav-links.abierto { display: flex; }
  .nav-link { padding: 11px 0; width: 100%; }
  .nav-toggle { display: block; }
  .envoltura { padding: 0 22px; }
  .portada { grid-template-columns: 1fr; min-height: auto; padding-top: 20px; gap: 34px; }
  .portada-imagen { aspect-ratio: 3 / 4; }
  .ficha { grid-template-columns: 1fr; gap: 32px; }
  .rejilla { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 24px 16px; }
  .pie { padding: 30px 22px; }
}

/* ── Dossier ────────────────────────────────────────────────────────────────
   No es un PDF guardado que se queda viejo: es esta misma vista, armada con lo
   que hay publicado ahora, que el navegador convierte a PDF al imprimir.     */

.dossier-barra {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px; flex-wrap: wrap;
  padding-bottom: 24px; margin-bottom: 40px;
  border-bottom: 1px solid var(--linea);
}

.dossier-portada { padding: 30px 0 50px; border-bottom: 1px solid var(--linea); margin-bottom: 40px; }
.dossier-portada h1 {
  font-family: var(--serif); font-size: 54px; font-weight: 300; letter-spacing: .02em;
}
.dossier-portada p { color: var(--humo); font-size: 14px; }

.dossier-texto { margin-bottom: 46px; }

.dossier-seccion {
  font-family: var(--serif); font-size: 30px; font-weight: 400; font-style: italic;
  margin: 46px 0 22px; padding-bottom: 10px; border-bottom: 1px solid var(--linea);
}

.dossier-obra {
  display: grid; grid-template-columns: 260px 1fr; gap: 28px;
  align-items: start; margin-bottom: 30px;
  break-inside: avoid; page-break-inside: avoid;
}
.dossier-img img { width: 100%; height: auto; }
.dossier-obra h3 { font-family: var(--serif); font-size: 23px; font-weight: 400; font-style: italic; }
.dossier-serie { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ceniza); margin-bottom: 8px; }
.dossier-dato { font-size: 13px; color: var(--humo); }

@media (max-width: 700px) {
  .dossier-obra { grid-template-columns: 1fr; gap: 14px; }
}

/* ── Impresión ─────────────────────────────────────────────────────────────
   Solo sale el dossier. Sin navegación, sin pie, sin botones: lo que quede en
   el PDF tiene que ser la obra y sus datos, nada de interfaz.               */

@media print {
  @page { margin: 16mm; }
  .no-imprimir, .nav, .pie { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .vista { display: none !important; padding: 0; }
  #v-dossier { display: block !important; }
  .envoltura { max-width: none; padding: 0; }
  .dossier-portada { page-break-after: always; padding-top: 0; border: 0; }
  .dossier-seccion { page-break-after: avoid; }
  .dossier-obra { grid-template-columns: 200px 1fr; margin-bottom: 22px; }
  .prosa p { text-align: justify; }
  a { text-decoration: none; color: inherit; }
}

/* ── Galería de la ficha ──────────────────────────────────────────────────── */

.tiras { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.tira {
  width: 76px; height: 76px; padding: 0; cursor: pointer;
  border: 1px solid var(--linea); background: var(--papel);
  opacity: .55; transition: opacity .2s, border-color .2s;
}
.tira img { width: 100%; height: 100%; object-fit: cover; }
.tira:hover, .tira.activa { opacity: 1; border-color: var(--tinta); }

/* ── En espacio ───────────────────────────────────────────────────────────── */

.rejilla-espacio {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 40px 26px; align-items: start;
}
.en-espacio { cursor: pointer; }
.en-espacio img { width: 100%; height: auto; transition: opacity .25s; }
.en-espacio:hover img { opacity: .85; }
.en-espacio figcaption {
  display: flex; align-items: baseline; gap: 10px; margin-top: 11px;
}
.en-espacio-obra { font-family: var(--serif); font-size: 18px; font-style: italic; }
.en-espacio-nota {
  font-size: 10px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ceniza); border: 1px solid var(--linea); padding: 2px 7px;
}