/* Ferdebuen · Quimera Digital — estilos
   El muro gris es el del catálogo impreso; el naranja, el del símbolo QD. */

:root {
  --muro: #393536;
  --muro-hondo: #2c2829;
  --linea: #4d4749;
  --texto: #ece8e5;
  --tenue: #a8a1a3;
  --naranja: #f7931e;
  --tinta-boton: #2a1803;

  --f-texto: "Source Sans 3", "Myriad Pro", "Segoe UI", system-ui, sans-serif;
  --f-titulo: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;

  --margen: clamp(1.25rem, 4vw, 3.5rem);
  --ancho: 84rem;

  color-scheme: dark;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* El sitio tiene un solo tema (el muro de la exposición); se fija igual en claro y oscuro. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --muro: #393536; } }
:root[data-theme="dark"] { --muro: #393536; }

*, *::before, *::after { box-sizing: inherit; }
html { scroll-padding-top: env(safe-area-inset-top, 0px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--muro);
  color: var(--texto);
  font: 400 1.0625rem/1.55 var(--f-texto);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--naranja); outline-offset: 3px; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Encabezado ---------- */
.cabeza {
  max-width: var(--ancho); margin: 0 auto;
  padding: 1.25rem var(--margen) 0;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
}
.cabeza .logo img { height: 5rem; width: auto; }
.nav { display: flex; gap: 1.75rem; flex-wrap: wrap; padding-bottom: .35rem; }
.nav a {
  font: 500 1.15rem/1 var(--f-titulo); letter-spacing: .02em;
  text-decoration: none; color: var(--tenue); padding: .35rem 0;
  border-bottom: 2px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--texto); border-bottom-color: var(--naranja); }

main { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen); }

/* ---------- Tipografía ---------- */
.titulo {
  font: 500 clamp(2.6rem, 6vw, 4.75rem)/.95 var(--f-titulo);
  letter-spacing: -.005em; margin: 0;
}
.titulo-sec { font: 500 clamp(1.9rem, 3.4vw, 2.6rem)/1 var(--f-titulo); margin: 0 0 1.5rem; }
.dato { color: var(--tenue); font-size: .95rem; }
.prosa { max-width: 38rem; }
.prosa p { margin: 0 0 1em; }

.coleccion-tag {
  display: inline-flex; align-items: center; gap: .55rem;
  font: 500 1.15rem/1 var(--f-titulo); letter-spacing: .02em;
  color: var(--tenue); text-decoration: none;
}
.coleccion-tag:hover { color: var(--texto); }
.punto {
  width: .8em; height: .8em; border-radius: 50%; flex: none;
  background: var(--c, var(--naranja));
  box-shadow: 0 0 0 1px rgba(255,255,255,.12);
}

/* ---------- Botones ---------- */
.botones:empty { display: none; }
.botones { display: flex; flex-wrap: wrap; gap: .75rem; }
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.9rem; padding: .6rem 1.35rem;
  font: 600 1rem/1 var(--f-texto); text-decoration: none; cursor: pointer;
  border-radius: 2px; border: 1.5px solid var(--naranja);
  background: var(--naranja); color: var(--tinta-boton);
}
.boton:hover { background: #ffa53e; border-color: #ffa53e; }
.boton.sec { background: transparent; color: var(--texto); border-color: var(--linea); }
.boton.sec:hover { border-color: var(--texto); }
.boton[aria-disabled="true"] { background: transparent; color: var(--tenue); border-color: var(--linea); cursor: default; pointer-events: none; }

/* ---------- Loop de portada ---------- */
.loop {
  display: grid; gap: clamp(1.5rem, 4vw, 4rem);
  grid-template-columns: minmax(0, min(calc(100vh - 11rem), 58%)) minmax(16rem, 1fr);
  align-items: end; padding: clamp(1.75rem, 4vw, 3rem) 0 clamp(3rem, 7vw, 5.5rem);
}
.lienzo { position: relative; aspect-ratio: 1 / 1; background: var(--muro-hondo); overflow: hidden; }
.lienzo a { position: absolute; inset: 0; }
.lienzo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.1s ease;
}
.lienzo img.visible { opacity: 1; }
.loop-info { display: flex; flex-direction: column; gap: 1.4rem; padding-bottom: .25rem; }
.loop-info .dato-sup { color: var(--tenue); font-size: .95rem; margin: 0; }
.loop-info .disp { margin: 0; color: var(--tenue); }
.loop-info .disp strong { color: var(--texto); font-weight: 600; }

/* El temporizador: los once puntos del logotipo se encienden mientras corre cada obra */
.temporizador { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.puntos { display: flex; gap: .55rem; }
.puntos i {
  width: .85rem; height: .85rem; border-radius: 50%;
  background: var(--c); opacity: .18; transition: opacity .35s ease;
}
.puntos i.on { opacity: 1; }
.controles { display: flex; gap: .25rem; }
.controles button {
  width: 2.5rem; height: 2.5rem; display: grid; place-items: center;
  background: none; border: 1px solid transparent; border-radius: 50%;
  color: var(--tenue); cursor: pointer; padding: 0;
}
.controles button:hover { color: var(--texto); border-color: var(--linea); }
.controles svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }

/* ---------- Bloques de la portada ---------- */
.bloque { padding: clamp(3rem, 7vw, 5.5rem) 0; border-top: 1px solid var(--linea); }
.lema {
  display: grid; gap: 2rem clamp(2rem, 6vw, 6rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start;
}
.lema blockquote {
  margin: 0; font: 400 clamp(2.2rem, 4.6vw, 3.6rem)/1.02 var(--f-titulo); max-width: 14ch;
}

.colecciones { display: grid; gap: 3rem 2.5rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.col-ficha { text-decoration: none; display: flex; flex-direction: column; gap: .8rem; }
.col-ficha .mosaico { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(6px, .8vw, 10px); aspect-ratio: 1/1; background: transparent; }
.col-ficha .mosaico img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1/1; }
.col-ficha .pie { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.col-ficha .nombre { font: 500 1.6rem/1 var(--f-titulo); display: inline-flex; align-items: center; gap: .55rem; }
.col-ficha:hover .nombre { color: #fff; }
.col-ficha:hover .mosaico { outline: 1px solid var(--tenue); outline-offset: 4px; }

.edicion { display: grid; gap: 2rem clamp(2rem, 6vw, 6rem); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.edicion h3 { font: 500 1.5rem/1.05 var(--f-titulo); margin: 0 0 .6rem; }
.edicion p { margin: 0; color: var(--tenue); max-width: 30ch; }

/* ---------- Colección ---------- */
.franja {
  display: flex; gap: .4rem 1.6rem; flex-wrap: wrap;
  padding: 1.6rem 0 1.4rem; border-bottom: 1px solid var(--linea);
}
.franja a { font: 500 1.08rem/1 var(--f-titulo); }
.franja a[aria-current="page"] { color: var(--texto); }
.col-cabeza { padding: clamp(2rem, 5vw, 3.5rem) 0 2rem; display: flex; justify-content: space-between; align-items: end; gap: 1rem 2rem; flex-wrap: wrap; }
.col-cabeza .titulo { display: flex; align-items: center; gap: .9rem; }
.col-cabeza .titulo .punto { width: .45em; height: .45em; }
.obras { display: grid; gap: 2.75rem 1.75rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); padding-bottom: 4rem; }
.ficha { text-decoration: none; display: flex; flex-direction: column; gap: .75rem; }
.ficha img { aspect-ratio: 1/1; width: 100%; object-fit: cover; background: var(--muro-hondo); }
.ficha:hover img { outline: 1px solid var(--tenue); outline-offset: 4px; }
.ficha .nombre { font: 500 1.5rem/1 var(--f-titulo); }
.ficha .resumen { color: var(--tenue); font-size: .92rem; line-height: 1.4; }

/* ---------- Obra ---------- */
.obra {
  display: grid; gap: clamp(1.75rem, 4vw, 4rem);
  grid-template-columns: minmax(0, min(calc(100vh - 16rem), 60%)) minmax(17rem, 1fr);
  padding: clamp(1.5rem, 4vw, 2.75rem) 0 clamp(3rem, 6vw, 5rem); align-items: start;
}
.obra .lienzo { cursor: zoom-in; border: 0; padding: 0; width: 100%; display: block; }
.obra .lienzo img { opacity: 1; transition: none; }
.obra-info { display: flex; flex-direction: column; gap: 1.75rem; }
.renglon { border-top: 1px solid var(--linea); padding-top: 1.25rem; display: flex; flex-direction: column; gap: .8rem; }
.renglon .enc { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.renglon h2 { font: 500 1.45rem/1 var(--f-titulo); margin: 0; }
.renglon .precio { color: var(--texto); font-weight: 600; }
.renglon p { margin: 0; color: var(--tenue); font-size: .95rem; }
.estado { font-weight: 600; color: var(--texto); }
.estado.no { color: var(--tenue); text-decoration: line-through; text-decoration-thickness: 1px; }

/* Medidor de la edición: 25 marcas, las vendidas quedan vacías */
.medidor { display: grid; grid-template-columns: repeat(25, minmax(0, 1fr)); gap: 3px; max-width: 24rem; }
.medidor i { height: .9rem; background: var(--texto); }
.medidor i.vendida { background: transparent; box-shadow: inset 0 0 0 1px var(--linea); }

.incluye { color: var(--tenue); font-size: .95rem; margin: 0; }
.vecinas { display: flex; justify-content: space-between; gap: 1rem; padding: 1.4rem 0; border-top: 1px solid var(--linea); }
.vecinas a { text-decoration: none; color: var(--tenue); font: 500 1.15rem/1 var(--f-titulo); }
.vecinas a:hover { color: var(--texto); }

dialog.zoom { padding: 0; border: 0; background: transparent; max-width: 100vw; max-height: 100vh; }
dialog.zoom::backdrop { background: rgba(20, 18, 19, .94); }
dialog.zoom img { width: min(94vw, 94vh); height: auto; cursor: zoom-out; }

/* ---------- Artista ---------- */
.artista { display: grid; gap: clamp(2rem, 5vw, 5rem); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: clamp(2rem, 5vw, 3.5rem) 0 5rem; align-items: start; }
.artista .retrato img { width: 100%; height: auto; }
.artista .retrato { margin: 0; }
.artista .retrato figcaption { color: var(--tenue); font-size: .9rem; margin-top: .6rem; }

/* ---------- El concepto ---------- */
.concepto { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); padding: clamp(2rem, 5vw, 3.5rem) 0 5rem; align-items: start; }
.concepto .titulo, .artista .titulo { margin-bottom: 1.5rem; }
.concepto h2 { font: 500 1.9rem/1 var(--f-titulo); margin: 2.5rem 0 1rem; }
.concepto .botones { margin-top: 2rem; }
.cubo-escena { --l: clamp(200px, 26vw, 360px); position: sticky; top: calc(env(safe-area-inset-top, 0px) + 18vh); height: calc(var(--l) * 1.8); display: grid; place-items: center; perspective: calc(var(--l) * 4.5); background: transparent; }
.cubo { position: relative; z-index: 1; width: var(--l); height: var(--l); transform-style: preserve-3d; will-change: transform; }
.cubo-escena .sombra { position: absolute; left: 50%; top: 50%; width: calc(var(--l) * 2); height: calc(var(--l) * 2); overflow: visible; pointer-events: none; z-index: 0;
  /* cae sobre el fondo, detrás del cubo, hacia abajo y a la derecha, como si la luz viniera de arriba a la izquierda */
  transform: translate(calc(-50% + var(--l) * .14), calc(-50% + var(--l) * .18)) scale(.97); filter: blur(calc(var(--l) * .05)); }
.cubo-escena .sombra polygon { fill: rgba(0, 0, 0, .5); }
.cara { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: #000; overflow: hidden; }
.cara img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s ease; }
.cara img.visible { opacity: 1; }
.cara.fr { transform: translateZ(calc(var(--l) / 2)); }
.cara.at { transform: rotateY(180deg) translateZ(calc(var(--l) / 2)); }
.cara.de { transform: rotateY(90deg) translateZ(calc(var(--l) / 2)); }
.cara.iz { transform: rotateY(-90deg) translateZ(calc(var(--l) / 2)); }
.cara.ar { transform: rotateX(90deg) translateZ(calc(var(--l) / 2)); }
.cara.ab { transform: rotateX(-90deg) translateZ(calc(var(--l) / 2)); }
@media (max-width: 760px) {
  .concepto { grid-template-columns: minmax(0, 1fr); }
  .cubo-escena { --l: 46vw; position: relative; top: auto; order: -1; height: calc(var(--l) * 1.7); }
}
.artista h2 { font: 500 1.9rem/1 var(--f-titulo); margin: 2.5rem 0 1rem; }
.artista h2:first-of-type { margin-top: 1.5rem; }

/* ---------- Pie ---------- */
.pie-sitio {
  max-width: var(--ancho); margin: 0 auto; padding: 2.5rem var(--margen) 3rem;
  border-top: 1px solid var(--linea);
  display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; align-items: center;
  color: var(--tenue); font-size: .92rem;
}
.pie-sitio .firma { display: flex; align-items: center; gap: .9rem; }
.pie-sitio img { width: 2.25rem; height: 2.25rem; border-radius: 6px; }
.pie-sitio a { color: var(--tenue); }

/* ---------- Modo sala ---------- */
body.sala { background: #1c1a1b; overflow: hidden; height: 100%; }
html.sala { height: 100%; }
.sala-escena { position: fixed; inset: 0; display: grid; place-items: center; }
.sala-escena .lienzo { width: min(88vh, 92vw); background: transparent; }
.sala-escena .lienzo a { cursor: none; }
.sala-pie {
  position: fixed; left: 0; right: 0; bottom: 0;
  padding: 1.25rem clamp(1.25rem, 3vw, 2.5rem) calc(1.25rem + env(safe-area-inset-bottom, 0px));
  display: flex; justify-content: space-between; align-items: end; gap: 1.5rem; pointer-events: none;
}
.sala-pie .titulo { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.sala-pie .dato { margin-top: .4rem; }
.qr { background: #fff; padding: 8px; width: 7.5rem; pointer-events: auto; }
.qr svg { width: 100%; height: auto; display: block; }
.qr-txt { color: var(--tenue); font-size: .8rem; text-align: center; margin-top: .4rem; }
.sala-mando {
  position: fixed; top: calc(1rem + env(safe-area-inset-top, 0px)); right: 1rem;
  display: flex; gap: .25rem; transition: opacity .4s ease;
}

body.sala.quieto .sala-mando { opacity: 0; }
body.sala.quieto { cursor: none; }
.sala-escena .puntos { position: fixed; top: calc(1.4rem + env(safe-area-inset-top, 0px)); left: clamp(1.25rem, 3vw, 2.5rem); }
.sala-escena .puntos i { width: .55rem; height: .55rem; }

/* ---------- Adaptación ---------- */
@media (max-width: 64rem) {
  .colecciones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 52rem) {
  .loop, .obra, .artista, .lema { grid-template-columns: minmax(0, 1fr); }
  .edicion { grid-template-columns: minmax(0, 1fr); }
  .cabeza .logo img { height: 3.4rem; }
  .sala-pie .qr { width: 5.5rem; }
}
@media (max-width: 34rem) {
  .colecciones { grid-template-columns: minmax(0, 1fr); }
  .nav { gap: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .lienzo img, .puntos i, .sala-mando { transition: none; }
}
.controles a { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; color: var(--tenue); border-radius: 50%; }
.controles a:hover { color: var(--texto); }
.controles a svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }

/* ---------- Portada: mosaico vivo ---------- */
.portada {
  display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center;
  grid-template-columns: minmax(16rem, 5fr) minmax(0, 7fr);
  padding: clamp(1.75rem, 4vw, 3rem) 0 clamp(3rem, 7vw, 5.5rem);
}
.portada-texto { display: flex; flex-direction: column; gap: 1.6rem; }
.portada-texto .titulo { font-size: clamp(2.5rem, 5vw, 4.4rem); line-height: .98; max-width: 12ch; }
.portada-texto .prosa { margin: 0; color: var(--tenue); max-width: 32rem; }
.puntos.fijos i { opacity: 1; }
.portada-arte { width: min(100%, calc(100vh - 10rem)); justify-self: end; display: flex; flex-direction: column; gap: .8rem; }
.rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(6px, .8vw, 10px); aspect-ratio: 1 / 1; }
.celda { position: relative; overflow: hidden; background: var(--muro-hondo); aspect-ratio: 1 / 1; }
.celda a { position: absolute; inset: 0; }
.celda img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.celda img.visible { opacity: 1; }
.celda .rotulo {
  position: absolute; left: 0; bottom: 0; pointer-events: none;
  background: var(--muro); color: var(--texto);
  font: 500 1rem/1 var(--f-titulo); letter-spacing: .02em; padding: .45rem .7rem .4rem 0;
}
.celda .rotulo:empty { display: none; }
.celda a:hover ~ .rotulo, .celda a:focus-visible ~ .rotulo { color: var(--naranja); }
.rejilla-pie { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }

/* ---------- Compra ---------- */
.aviso { background: var(--naranja); color: var(--tinta-boton); font-weight: 600; padding: .8rem 1rem; margin: 1.5rem 0 0; }
.compra { display: flex; flex-direction: column; gap: .9rem; }
.pago { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.ce summary { list-style: none; width: fit-content; }
.ce summary::-webkit-details-marker { display: none; }
.ce[open] summary { border-color: var(--texto); }
.ce-form { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1rem; margin-top: 1.1rem; padding: 1.1rem; background: var(--muro-hondo); }
.ce-form label { display: flex; flex-direction: column; gap: .3rem; font-size: .9rem; color: var(--tenue); }
.ce-form .ancho { grid-column: 1 / -1; }
.ce-form input, .ce-form textarea {
  font: inherit; color: var(--texto); background: var(--muro); border: 1px solid var(--linea);
  border-radius: 2px; padding: .55rem .65rem; width: 100%;
}
.ce-form input:focus, .ce-form textarea:focus { border-color: var(--naranja); outline: none; }
.ce-form p { margin: 0; }
.ce-form .boton { justify-self: start; }
.trampa { position: absolute !important; left: -9999px; }
.medidor i.apartada { background: var(--tenue); opacity: .45; }

/* ---------- La exposición ---------- */
.expo { padding: clamp(2rem, 5vw, 3.5rem) 0 5rem; }
.expo-cabeza { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 1.5rem clamp(2rem, 6vw, 6rem); align-items: end; }
.ficha-tecnica { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .45rem 1.25rem; font-size: .95rem; }
.ficha-tecnica dt { color: var(--tenue); }
.ficha-tecnica dd { margin: 0; }
.expo-intro { margin: 2.5rem 0 3rem; max-width: 46rem; }
.galeria { columns: 3 18rem; column-gap: 1.25rem; margin-bottom: 4rem; }
.galeria figure { margin: 0 0 1.25rem; break-inside: avoid; }
.galeria button { all: unset; display: block; cursor: zoom-in; width: 100%; }
.galeria button:focus-visible { outline: 2px solid var(--naranja); outline-offset: 3px; }
.galeria img { width: 100%; height: auto; }
.galeria figcaption { color: var(--tenue); font-size: .9rem; margin-top: .45rem; }
.galeria-vacia { border: 1px dashed var(--linea); padding: 3rem 1.5rem; text-align: center; margin: 0 0 4rem; }
.prensa { border-top: 1px solid var(--linea); padding-top: 3rem; margin-bottom: 4rem; }
.prensa h2 { font: 500 1.9rem/1 var(--f-titulo); margin: 0 0 1rem; }
.prensa .prosa { max-width: 46rem; margin-bottom: 2rem; }
/* Columnas en proporción a cada página (1.85 y 0.926) para que ambas midan lo mismo de alto sin recortarse */
.prensa-paginas { display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(0, .926fr); gap: 1.25rem; align-items: start; }
.prensa-paginas figure { margin: 0; }
.prensa-paginas button { all: unset; display: block; cursor: zoom-in; width: 100%; }
.prensa-paginas button:focus-visible { outline: 2px solid var(--naranja); outline-offset: 3px; }
.prensa-paginas img { width: 100%; height: auto; display: block; }
.prensa-paginas figcaption { color: var(--tenue); font-size: .9rem; margin-top: .45rem; }
@media (max-width: 760px) { .prensa-paginas { grid-template-columns: minmax(0, 1fr); } }
dialog.zoom.expo img { width: auto; max-width: 94vw; max-height: 92vh; }
.expo-textos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem clamp(2rem, 6vw, 6rem); border-top: 1px solid var(--linea); padding-top: 3rem; }
.expo-textos h2 { font: 500 1.9rem/1 var(--f-titulo); margin: 0 0 1rem; }

.gracias { padding: clamp(3rem, 8vw, 6rem) 0; display: flex; flex-direction: column; gap: 1.5rem; }

@media (max-width: 52rem) {
  .portada, .expo-cabeza, .expo-textos { grid-template-columns: minmax(0, 1fr); }
  .portada-arte { width: 100%; justify-self: stretch; order: -1; }
  .ce-form { grid-template-columns: minmax(0, 1fr); }
}
.ce summary.boton { display: inline-flex; }
.ce-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.boton { white-space: nowrap; }
.ce summary::marker { content: ""; font-size: 0; }
.boton { box-sizing: border-box; }

/* ---------- Cinturón de mockups (portada) ---------- */
.cinturon .cint-cabeza { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 34rem); gap: .5rem 3rem; align-items: end; margin-bottom: 1.75rem; }
.cinturon .cint-cabeza .titulo-sec { margin: 0; }
.cint-pista { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(220px, 26vw, 340px); gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .75rem; scrollbar-width: thin; }
.cint-pieza { scroll-snap-align: start; color: var(--tenue); text-decoration: none; }
.cint-pieza img { width: 100%; height: auto; display: block; aspect-ratio: 1 / 1; }
.cint-pieza span { display: block; margin-top: .5rem; font-size: .9rem; }
.cint-pieza:hover span { color: var(--texto); }
.prosa.venta strong { color: var(--texto); }
.venta-fila { display: flex; gap: 1rem; align-items: flex-start; max-width: 38rem; }
.venta-fila .prosa { flex: 1; min-width: 0; }
.retrato-mini { flex: none; display: block; width: 6rem; height: 6rem; }
.retrato-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 760px) { .cinturon .cint-cabeza { grid-template-columns: minmax(0, 1fr); } .cint-pista { grid-auto-columns: 72vw; } }

/* ---------- Ficha: acceso al mockup ---------- */
.ver-mockup { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: .9rem; margin-top: 1rem; padding: .5rem .9rem .5rem .5rem; border: 1px solid var(--linea); cursor: zoom-in; color: var(--texto); max-width: 22rem; }
.ver-mockup img { width: 4.5rem; height: 4.5rem; flex: none; }
.ver-mockup span { display: flex; flex-direction: column; gap: .15rem; font-weight: 600; }
.ver-mockup small { color: var(--tenue); font-weight: 400; font-size: .85rem; }
.ver-mockup:hover, .ver-mockup:focus-visible { border-color: var(--naranja); }

/* ---------- Selector de idioma ---------- */
.nav a.idioma { color: var(--tenue); letter-spacing: .04em; white-space: nowrap; border-bottom-color: transparent; }
.nav a.idioma .activo { color: var(--texto); font-weight: 600; }
.nav a.idioma:hover { color: var(--texto); }