/* Visor de fotos a pantalla completa.
 *
 * Estaba escrito dentro de index.html. Se saco a un archivo compartido para
 * poder usarlo tambien en las 6 paginas de unidad, donde las fotos eran
 * enlaces directos al JPG: al tocar una, el visitante salia del sitio a un
 * archivo suelto y tenia que volver con el boton atras.
 */

/* ---- VISOR DE FOTOS ---- */
.visor{
  position:fixed;inset:0;z-index:200;
  background:rgba(6,22,24,.94);
  display:none;align-items:center;justify-content:center;
  padding:56px 20px;
  /* lo horizontal lo maneja visor.js (deslizar entre fotos); el navegador se
     queda con lo vertical y con el zoom de dos dedos */
  touch-action:pan-y pinch-zoom;
}
.visor.abierto{display:flex;}
.visor img{
  max-width:100%;max-height:100%;
  border-radius:var(--r-md);object-fit:contain;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.7);
}
.visor-cap{
  position:absolute;bottom:20px;left:0;right:0;text-align:center;
  color:var(--cream);font-size:13.5px;font-weight:600;opacity:.85;
}
.visor-btn{
  position:absolute;background:rgba(255,254,250,.12);border:none;cursor:pointer;
  width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:background .3s;
}
.visor-btn:hover{background:rgba(255,254,250,.24);}
.visor-btn svg{width:20px;height:20px;stroke:var(--cream);fill:none;stroke-width:2.2;}
.visor-cerrar{top:18px;right:18px;}
.visor-prev{left:18px;top:50%;transform:translateY(-50%);}
.visor-next{right:18px;top:50%;transform:translateY(-50%);}
@media(max-width:560px){
  .visor{padding:70px 12px;}
  .visor-prev{left:8px;} .visor-next{right:8px;}
  .visor-btn{width:40px;height:40px;}
}

/* ---- RESEÑAS ---- */
.resenas-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media(max-width:760px){.resenas-grid{grid-template-columns:1fr;}}
.resena{
  background:var(--cream);border:1px solid var(--line-soft);border-radius:var(--r-md);
  padding:26px 26px 22px;box-shadow:var(--shadow-card);
  display:flex;flex-direction:column;position:relative;
}
.resena::before{
  content:'”';position:absolute;top:10px;right:20px;
  font-family:'Fraunces',serif;font-size:64px;line-height:1;
  color:var(--olive);opacity:.13;pointer-events:none;
}
.resena blockquote{
  font-size:14.5px;line-height:1.7;color:var(--ink-soft);
  flex:1;position:relative;z-index:1;
}
/* ---- las resenas dejan de estar quietas ----
   Dos cosas, y ninguna toca lo que las hace utiles: que se vean varias a la
   vez y que el texto se lea. Por eso el zoom es minimo (1.2%): mas que eso
   empieza a desdibujar la letra mientras dura la transicion.
   El selector lleva .resenas-grid adelante para ganarle en especificidad a
   .reveal.in, que tambien controla el transform al aparecer. */
.resenas-grid .resena{
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.resenas-grid .resena:hover{
  transform:translateY(-5px) scale(1.012);
  box-shadow:var(--shadow-lift);
  border-color:rgba(168,93,64,.35);
}
/* la comilla se despierta con la tarjeta */
.resena::before{transition:opacity .5s var(--ease), transform .5s var(--ease);}
.resenas-grid .resena:hover::before{opacity:.24;transform:translateY(-2px) rotate(-4deg);}

/* Aparecen una despues de otra en vez de las cuatro juntas. Se apoya en el
   .reveal que ya existe: solo se le agrega un retardo por posicion. */
.resenas-grid .resena:nth-child(2){transition-delay:.09s;}
.resenas-grid .resena:nth-child(3){transition-delay:.18s;}
.resenas-grid .resena:nth-child(4){transition-delay:.27s;}
.resenas-grid .resena:hover{transition-delay:0s;}

@media(prefers-reduced-motion:reduce){
  .resenas-grid .resena,.resena::before{transition:none !important;}
  .resenas-grid .resena:hover{transform:none;}
}

.resena figcaption{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft);
  font-size:12.5px;font-weight:800;color:var(--olive);
  letter-spacing:.03em;
}
.resenas-pie{margin-top:26px;display:flex;justify-content:center;}
.btn-google{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--cream);border:1px solid var(--line);
  padding:13px 24px;border-radius:var(--r-pill);
  font-size:13.5px;font-weight:700;color:var(--ink);
  box-shadow:var(--shadow-soft);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.btn-google:hover{transform:translateY(-2px);box-shadow:var(--shadow-card);}
.btn-google svg{flex:0 0 auto;}