/* ==================================================================
   VISOR DE FOTOS
   Al tocar una foto se despliega desde su propio sitio hasta ocupar la
   pantalla. La animacion arranca en la posicion y el tamano exactos de
   la miniatura, para que se entienda de donde sale y no aparezca de la
   nada. Funciona igual con el dedo: se desliza para pasar de una a otra.
   ================================================================== */

.visor{
  position:fixed;inset:0;z-index:100;
  background:rgba(6,10,14,.96);
  display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.visor[data-abierto="si"]{opacity:1;pointer-events:auto}
@supports (backdrop-filter:blur(6px)){
  .visor{backdrop-filter:blur(8px)}
}

/* barra de arriba: contador y cerrar */
.visor-barra{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem clamp(1rem,3vw,2rem);
}
.visor-cuenta{
  font:600 .82rem/1 var(--dato);letter-spacing:.18em;text-transform:uppercase;
  color:var(--inox-bajo);font-variant-numeric:tabular-nums;
}
.visor-cerrar{
  width:46px;height:46px;flex:none;cursor:pointer;
  background:none;border:1px solid var(--linea);color:var(--inox-alto);
  font:300 1.7rem/1 var(--cuerpo);display:grid;place-items:center;
  transition:border-color .2s,background .2s;
}
.visor-cerrar:hover{border-color:var(--rojo);background:var(--rojo);color:#fff}

/* la foto
   El limite va en unidades de pantalla y no en porcentajes: dentro de una
   rejilla, un max-height en % no tiene contra que resolverse y la foto sale
   diminuta. Restando la barra y el pie sabemos el hueco exacto que queda. */
.visor-marco{
  margin:0;min-height:0;display:grid;place-items:center;position:relative;
  padding-inline:clamp(3.6rem,7vw,5rem);
}
.visor-marco img{
  max-width:100%;
  max-height:calc(100svh - 172px);
  width:auto;height:auto;
  transform-origin:top left;will-change:transform;
  box-shadow:0 30px 90px -30px rgba(0,0,0,.9);
}
@media (max-width:640px){
  .visor-marco{padding-inline:.6rem}
  .visor-marco img{max-height:calc(100svh - 200px)}
}

/* pie: titulo y boton de cotizar */
.visor-pie{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:1rem 1.6rem;padding:1rem clamp(1rem,3vw,2rem) clamp(1.1rem,3vw,1.8rem);
}
.visor-pie h3{
  margin:0;font:600 clamp(1.05rem,.95rem + .5vw,1.5rem)/1.15 var(--display);
  text-transform:uppercase;color:var(--inox-alto);
}
.visor-pie p{
  margin:.3rem 0 0;font:500 .78rem/1.4 var(--dato);letter-spacing:.12em;
  text-transform:uppercase;color:var(--inox-bajo);
}

/* flechas */
.visor-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:52px;height:52px;cursor:pointer;flex:none;
  background:rgba(10,15,20,.72);border:1px solid var(--linea);
  color:var(--inox-alto);display:grid;place-items:center;
  transition:background .2s,border-color .2s,opacity .2s;
}
.visor-nav:hover{background:var(--rojo);border-color:var(--rojo)}
.visor-nav[disabled]{opacity:.25;cursor:default}
.visor-nav[disabled]:hover{background:rgba(10,15,20,.72);border-color:var(--linea)}
.visor-nav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2}
.visor-ant{left:clamp(.4rem,1.5vw,1.2rem)}
.visor-sig{right:clamp(.4rem,1.5vw,1.2rem)}

@media (max-width:640px){
  .visor-nav{width:44px;height:44px}
  .visor-pie{padding-bottom:1.4rem}
}

/* mientras el visor esta abierto, el fondo no se mueve */
body[data-visor="si"]{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .visor{transition:none}
}