/* ═══ 1. LA CABECERA DE LA GALERÍA ═════════════════════════
   Un filete la separa de los destacados: se entiende que
   empieza otra cosa sin necesidad de un título gigante. */
.taller{ margin-top:clamp(3.5rem,7vw,5.5rem); padding-top:clamp(2.2rem,4vw,3.2rem);
  border-top:1px solid var(--filete-db); }
.taller[hidden]{ display:none; }

.taller-cabeza{ display:flex; flex-wrap:wrap; gap:.6rem 1.4rem;
  align-items:baseline; justify-content:space-between; }
.taller-cabeza h3{ font-size:var(--t-l); font-variation-settings:"wdth" 104;
  max-width:22ch; margin:0; }
.taller-cuenta{ font-size:var(--t-xs); color:var(--hueso-med);
  font-variant-numeric:tabular-nums; letter-spacing:.02em; }


/* ═══ 2. LOS FILTROS ═══════════════════════════════════════
   Botones de contorno, no pestañas: no cambian de página, solo
   apagan lo que no toca. El activo se llena de cobre para que
   se sepa de un vistazo qué se está viendo.

   La fila se desliza a lo ancho en pantalla angosta en vez de
   partirse en dos renglones: seis filtros en móvil se ven
   mejor corridos que amontonados. */
.filtros{ display:flex; gap:.5rem; margin-top:1.8rem; padding-bottom:.4rem;
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.filtros::-webkit-scrollbar{ display:none; }

.filtro{ flex:none; display:inline-flex; align-items:baseline; gap:.45rem;
  padding:.5rem .95rem; cursor:pointer;
  font:inherit; font-size:var(--t-xs); font-weight:600;
  font-variation-settings:"wdth" 96; letter-spacing:.05em;
  color:var(--hueso-med); background:transparent;
  border:1px solid var(--filete-db); border-radius:100px;
  transition:color .18s var(--curva), border-color .18s var(--curva),
             background .18s var(--curva); }
.filtro:hover{ color:var(--hueso); border-color:var(--filete); }
.filtro .cifra{ font-size:.6875rem; font-weight:500; color:var(--hueso-med);
  font-variant-numeric:tabular-nums; transition:color .18s var(--curva); }
.filtro[aria-pressed="true"]{ color:var(--noche); background:var(--cobre-luz);
  border-color:var(--cobre-luz); }
.filtro[aria-pressed="true"] .cifra{ color:rgba(19,18,17,.62); }


/* ═══ 3. LA RETÍCULA ═══════════════════════════════════════                     */
.taller-obras{ display:grid; grid-template-columns:1fr; gap:clamp(2rem,4vw,3.5rem);
  margin-top:1.6rem; }
@media (min-width:720px){
  .taller-obras{ grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:clamp(1.5rem,4vw,3.5rem); row-gap:clamp(3rem,6vw,5rem); }
}

.placa{ position:relative; margin:0;
  break-inside:avoid;
  border:1px solid var(--filete-db);
  border-radius:var(--radio); background:var(--carbon); overflow:hidden;
  box-shadow:var(--luz-alta);
  transition:border-color .25s var(--curva), box-shadow .25s var(--curva); }
.placa:hover,.placa:focus-within{
  border-color:var(--filete); box-shadow:var(--luz-alta),var(--sombra); }
.placa[hidden]{ display:none; }
.placa:focus{ outline:none; }   /* el foco al "ver más" no dibuja marco */

/* El marco de la foto: sin aspect-ratio y sin object-fit, igual que
   .lienzo en los destacados. Son las dos formas de recortar y esta
   sección existe para no recortar. El hueco queda reservado antes de
   que la foto baje porque sitio.js le escribe al <img> sus medidas
   nativas (montaFoto). */
.marco-placa{ position:relative; background:var(--noche);
  border-bottom:1px solid var(--filete-db); }
.marco-placa picture{ display:block; }
.marco-placa img{ display:block; width:100%; height:auto;
  opacity:0; filter:contrast(1.14) saturate(1.05) brightness(1.01);
  transition:opacity .45s var(--curva); }
.marco-placa img.cargada{ opacity:1; }

.lienzo img{ filter:contrast(1.07) saturate(1.03) brightness(1.01); }

/* el pie: una línea de título y una de dato. Nada más, y nada
   encima de la foto: ni aquí ni en los destacados se pinta un
   dato sobre una imagen. */
.placa figcaption{ padding:.75rem .85rem .85rem; }
/* dos renglones como mucho, y el corte con puntos suspensivos.
   Con una sola línea, "Cocina integral 07" se cortaba a media
   palabra en la columna angosta del teléfono. */
.placa h4{ margin:0; font-size:var(--t-s); font-weight:600;
  font-variation-settings:"wdth" 104; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; }
.placa .dato-placa{ display:block; margin-top:.22rem; font-size:.75rem;
  color:var(--hueso-med); font-variation-settings:"wdth" 96; }

/* toda la pieza es el botón que abre el visor */
.abre-placa{ position:absolute; inset:0; z-index:3; width:100%; height:100%;
  padding:0; border:0; background:transparent; cursor:zoom-in;
  font-size:0; color:transparent; }


/* ═══ 4. EL PIE DE LA GALERÍA ══════════════════════════════
   El botón dice siempre lo mismo y el avance va aparte, en
   cifras. Así el diccionario de idioma.js traduce el botón con
   una línea, no con una por cada número posible. */
.taller-pie{ margin-top:1.8rem; display:flex; flex-wrap:wrap; gap:.9rem;
  align-items:center; justify-content:center; }
.taller-avance{ font-size:var(--t-xs); color:var(--hueso-med);
  font-variant-numeric:tabular-nums; letter-spacing:.02em; }
.taller-avance[hidden]{ display:none; }


/* ═══ 5. EL VISOR, AHORA CON PASO ══════════════════════════
   Con una foto por proyecto bastaba abrir y cerrar. Con
   setenta y nueve, cerrar el visor para abrir la siguiente es
   el camino largo: se pasa con las flechas del teclado o con
   los botones, sin salir. */
.visor-marco{ position:relative; }

dialog.visor{
  --visor-alto:calc(92vh - 5.4rem);
  width:min(94vw, var(--foto-w, 1000px),
            calc(var(--visor-alto) * var(--foto-prop, 1.3333)));
  max-width:none;
  min-width:min(94vw, 17rem);   /* que el pie no se estrangule */
  overflow:hidden;              /* la foto sigue el radio del marco */
}
@supports (height:100dvh){
  dialog.visor{ --visor-alto:calc(92dvh - 5.4rem); } }

/* El alto lo pone la foto, no la hoja: `height:auto` sobre un
   ancho ya calculado. No hay object-fit en todo este bloque, y
   es la garantía de la sección: sin object-fit no hay forma de
   recortar nada, ni por un descuido futuro.

   El hueco ya está reservado antes de que la foto baje porque
   sitio.js le escribe al <img> sus atributos width y height
   nativos: el navegador saca de ahí la proporción y deja el
   cuadro hecho. Sin eso, el marco daría un salto al terminar
   de bajar cada foto —con las flechas, una vez por foto— y las
   flechas se moverían de sitio a media galería. */
.visor picture{ display:block; }
.visor img{ display:block; width:100%; height:auto;
  opacity:0; transition:opacity .32s var(--curva); }
.visor img.cargada{ opacity:1; }


.paso{ position:absolute; top:50%; transform:translateY(-50%); z-index:4;
  width:2.9rem; height:2.9rem; display:grid; place-items:center; cursor:pointer;
  padding:0; border:1px solid rgba(237,230,221,.28); border-radius:50%;
  background:rgba(19,18,17,.62); color:#EDE6DD;
  backdrop-filter:blur(6px);
  transition:background .18s var(--curva), border-color .18s var(--curva),
             opacity .18s var(--curva); }
.paso:hover{ background:rgba(19,18,17,.85); border-color:#EDE6DD; }
.paso[disabled]{ opacity:.28; cursor:default; }
.paso[hidden]{ display:none; }
.paso svg{ width:1.1rem; height:1.1rem; fill:none; stroke:currentColor;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.paso--antes{ left:.7rem; }
.paso--luego{ right:.7rem; }
.visor-cuenta{ font-variant-numeric:tabular-nums; color:var(--hueso-med);
  font-size:var(--t-xs); flex:none; }
/* el título se recorta con puntos suspensivos en vez de empujar
   al botón de cerrar fuera del cuadro. En una caja flexible eso
   solo funciona si el elemento puede encogerse: de ahí min-width. */
.visor-pie #visor-txt{ flex:1 1 auto; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

@media (max-width:520px){
  .paso{ width:2.4rem; height:2.4rem; }
  .paso--antes{ left:.45rem; }
  .paso--luego{ right:.45rem; }
}

/* ═══ 6. LOS DOS TEMAS ═════════════════════════════════════
   Casi todo salió gratis de las fichas de color. Lo que sí hay
   que decir a mano son las tres cosas que 02-temas.css y
   05-contraste.css ya dicen para .obra y .lienzo — se
   copian aquí con los MISMOS valores para que las dos mitades
   de la sección no se vean de temas distintos. */
[data-tema="noche"] .marco-placa{ background:#090808; }

[data-tema="dia"] .marco-placa{ background:#E6E5E1;
  border-bottom-color:var(--filete-db); }
[data-tema="dia"] .placa{ background:var(--carbon);
  box-shadow:0 1px 2px rgba(30,29,27,.05),0 14px 32px -26px rgba(30,29,27,.55); }
[data-tema="dia"] .placa:hover,[data-tema="dia"] .placa:focus-within{
  border-color:var(--filete);
  box-shadow:0 2px 4px rgba(30,29,27,.06),0 22px 44px -28px rgba(30,29,27,.6); }
[data-tema="dia"] .marco-placa img{ filter:contrast(1.09) saturate(1.02) brightness(1.02); }
[data-tema="dia"] .filtro[aria-pressed="true"]{ color:#FFFFFF;
  background:var(--cobre-luz); border-color:var(--cobre-luz); }
[data-tema="dia"] .filtro[aria-pressed="true"] .cifra{ color:rgba(255,255,255,.72); }


/* sin animación por preferencia del sistema: nada se mueve */
@media (prefers-reduced-motion:reduce){
  .placa,.marco-placa img{ transition:opacity .2s linear; }
  .visor img{ opacity:1; transition:none; }
}