/* ── La foto dentro de la tarjeta ─────────────────────────────────
   Va a la derecha, cuadrada y a toda la altura de la tarjeta (como
   en la referencia): la tarjeta con foto mide al menos lo que mide la
   foto, y si el texto es mas largo la foto se estira con ella. El
   precio nunca se va de la pantalla porque vive en la columna de
   texto, no al lado de la foto. */
.linea.con-foto{
  grid-template-columns:minmax(0,1fr) var(--foto,108px);
  min-height:var(--foto,108px);
}
.con-foto .foto-producto{grid-column:2;grid-row:1;align-self:stretch;}

.foto-producto{
  position:relative; display:block; width:100%; height:100%; min-height:var(--foto,108px);
  padding:0; border:0; border-radius:0; overflow:hidden;
  cursor:zoom-in; background:var(--muro-hondo);
  -webkit-tap-highlight-color:transparent;
}
.foto-producto img{
  display:block; width:100%; height:100%; object-fit:cover;
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.foto-producto:hover img{transform:scale(1.03);}
/* La marca de "se puede ampliar": un icono dibujado, en la esquina. */
.foto-producto .ampliar{
  position:absolute; right:6px; bottom:6px; width:22px; height:22px;
  padding:4px; border-radius:7px; color:#fff;
  background:rgba(42,26,20,.62);
}
.foto-producto:focus-visible,.cerrar-foto:focus-visible{
  outline:3px solid var(--bermellon-hondo); outline-offset:3px;
}
/* Si la foto no llega, la tarjeta vuelve a ser una tarjeta sin foto. */
.linea.con-foto.sin-imagen{grid-template-columns:minmax(0,1fr);min-height:0;}
.con-foto.sin-imagen .foto-producto{display:none;}

/* ── Vista ampliada ─────────────────────────────────────────────── */
#foto-ampliada{
  width:min(94vw,760px); max-height:94dvh; padding:12px;
  border:0; border-radius:16px; background:var(--muro); color:var(--tinta);
  box-shadow:0 30px 90px rgba(25,17,13,.30);
}
#foto-ampliada::backdrop{background:rgba(25,17,13,.80);}
#foto-ampliada form{display:flex; justify-content:flex-end; margin-bottom:8px;}
.cerrar-foto{
  min-height:44px; min-width:44px; padding:8px 14px;
  border:1px solid var(--linea); border-radius:10px;
  background:var(--muro); color:var(--tinta);
  font:600 14px/1 var(--texto); cursor:pointer;
}
.cerrar-foto:hover{border-color:var(--bermellon-hondo); color:var(--bermellon-hondo);}
#foto-grande{
  display:block; width:100%; max-height:72dvh; object-fit:contain;
  border-radius:10px; background:var(--muro-hondo);
}
#foto-titulo{
  margin:10px 0 2px; text-align:center;
  font:700 16px/1.3 var(--texto);
}

@media (prefers-reduced-motion:reduce){
  .foto-producto img{transition:none;}
  .foto-producto:hover img{transform:none;}
}

/* ── Papel: sin fotos. Edge incrusta cada miniatura sin comprimir y el
   PDF pasa de 0,8 MB a 4,2 MB por 16 fotos de 25 mm que aportan poco
   en un archivo que circula por WhatsApp. La fila vuelve a ser una
   fila sin foto, como cuando la imagen no llega. ─────────────────── */
@media print{
  #foto-ampliada,.foto-producto{display:none !important;}
  .linea.con-foto{grid-template-columns:minmax(0,1fr); min-height:0; break-inside:avoid;}
}