/* FOTOS DE LA UNIDAD Y PLANO — solo lo cargan las 6 paginas de unidad.
 *
 * El sitio viejo mostraba entre 5 y 8 fotos por departamento y, en varios,
 * la planta esquematica al final. La demo tenia 2 fotos y nada de plano:
 * quien entraba a decidir si le entraba la familia no tenia con que.
 *
 * Van despues de la ficha y fuera del .wrap de la ficha, a lo ancho de la
 * pagina: dentro de la columna de texto (que comparte fila con el sidebar
 * de consulta) las miniaturas quedaban de 220px y no se distinguia nada.
 *
 * Cada miniatura pesa ~30kB y es la que se descarga; la version de 1400px
 * vive en data-src y solo la pide el visor al hacer click. Sin eso, sumar
 * 39 fotos volvia a inflar las paginas como antes de la auditoria.
 */

/* ---- PORTADA DE LA UNIDAD ----
   Estaba dentro del <style> de cada pagina y habia quedado en dos versiones:
   2 paginas con dos recuadros al costado y 4 con uno solo. Ahora es una sola.
   Los tres recuadros son botones y abren el mismo grupo que la grilla. */
/* Las filas van con minmax(0,1fr), no en automatico. Con "auto" la fila se
   estira al alto natural de la foto y se lleva puesto el height del
   contenedor: en Suites, donde el tercer recuadro es una foto vertical, la
   portada se iba de 560 a 1356px y el recuadro terminaba tapado por la ficha.
   El minimo en 0 es lo que permite que la foto se recorte en vez de empujar. */
.rd-gallery{
  margin-top:20px;display:grid;grid-template-columns:1.6fr 1fr;
  grid-template-rows:minmax(0,1fr);gap:14px;height:560px;
}
@media(max-width:860px){
  .rd-gallery{grid-template-columns:1fr;grid-template-rows:auto auto;height:auto;}
}
.rd-gallery button{
  border:none;padding:0;background:none;cursor:pointer;
  display:block;position:relative;overflow:hidden;width:100%;min-height:0;
}
.rd-gallery button:focus-visible{outline:2px solid var(--olive);outline-offset:3px;}
.rd-gallery .main{border-radius:var(--r-lg);height:100%;}
@media(max-width:860px){.rd-gallery .main{height:320px;}}
.rd-gallery .side{
  display:grid;grid-template-rows:minmax(0,1fr) minmax(0,1fr);
  gap:14px;height:100%;min-height:0;
}
@media(max-width:860px){
  .rd-gallery .side{grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr);height:190px;}
}
.rd-gallery .side button{border-radius:var(--r-md);height:100%;}
.rd-gallery img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease);}
.rd-gallery .side button:hover img{transform:scale(1.06);}

/* El tercer recuadro dice cuantas fotos hay y las abre todas. Antes era un
   link a index.html#galeria: al tocar "ver mas fotos" te sacaba de la
   habitacion que estabas mirando y te llevaba a la galeria del hotel. */
.rd-mas::after{content:'';position:absolute;inset:0;background:rgba(8,32,34,.42);transition:background .35s;}
.rd-mas:hover::after{background:rgba(8,32,34,.55);}
.rd-mas-chip{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  background:var(--cream);color:var(--ink);
  padding:11px 18px;border-radius:var(--r-pill);
  font-family:'Public Sans',system-ui,sans-serif;font-size:13px;font-weight:700;
  box-shadow:var(--shadow-lift);transition:transform .4s var(--ease);
}
.rd-mas-chip svg{width:15px;height:15px;color:var(--olive);flex:0 0 auto;}
.rd-mas:hover .rd-mas-chip{transform:translate(-50%,-50%) scale(1.05);}
@media(prefers-reduced-motion:reduce){
  .rd-gallery img,.rd-mas-chip{transition:none;}
  .rd-gallery .side button:hover img{transform:none;}
  .rd-mas:hover .rd-mas-chip{transform:translate(-50%,-50%);}
}

.rd-extra{padding:var(--sp-lg) 0 var(--sp-2xl);}
.rd-extra h2{
  font-family:'Fraunces',serif;font-weight:500;font-size:23px;
  letter-spacing:-.01em;margin-bottom:5px;
}
.rd-extra .rd-extra-sub{color:var(--ink-faint);font-size:13.5px;margin-bottom:22px;}

/* ---- GRILLA DE FOTOS ---- */
.fotos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;}
@media(max-width:560px){.fotos-grid{grid-template-columns:repeat(2,1fr);gap:9px;}}

.fotos-grid button{
  display:block;position:relative;width:100%;aspect-ratio:4/3;
  border:none;padding:0;cursor:pointer;overflow:hidden;
  background:var(--sand-deep);border-radius:var(--r-md);
}
.fotos-grid img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease);}
/* la parrilla del Luxury II es un fotograma vertical: centrada, el recuadro
   4:3 le cortaba la parte de arriba de la parrilla */
.fotos-grid img[src*="lux2c26-terraza"]{object-position:50% 30%;}
.fotos-grid button:hover img{transform:scale(1.05);}
.fotos-grid button:focus-visible{outline:2px solid var(--olive);outline-offset:3px;}

/* El epigrafe aparece al pasar por encima.
   El degradado esta calculado, no elegido a ojo: con el primero que puse
   (.92 abajo, .72 a media altura) el renglon caia justo donde la opacidad
   ya habia bajado a .58, y sobre las fotos con ventanal — "Cocina y comedor,
   con vista" — el contraste medido daba 4.25, abajo del minimo AA de 4.5.
   Ahora el tramo donde cae el texto no baja de .80. */
.fotos-grid button::after{
  content:attr(data-cap);
  position:absolute;left:0;right:0;bottom:0;
  padding:32px 12px 12px;text-align:left;
  font-family:'Public Sans',system-ui,sans-serif;
  font-size:12px;font-weight:700;line-height:1.35;color:var(--cream);
  background:linear-gradient(to top,
    rgba(8,44,46,.94) 0%, rgba(8,44,46,.86) 42%,
    rgba(8,44,46,.45) 70%, rgba(8,44,46,0) 100%);
  opacity:0;transition:opacity .35s var(--ease);
}
.fotos-grid button:hover::after,
.fotos-grid button:focus-visible::after{opacity:1;}
/* En tactil no hay hover: el epigrafe queda siempre puesto */
@media(hover:none){
  .fotos-grid button::after{opacity:1;}
  .fotos-grid button:hover img{transform:none;}
}
@media(prefers-reduced-motion:reduce){
  .fotos-grid img{transition:none;}
  .fotos-grid button:hover img{transform:none;}
}

/* ---- PLANO ---- */
/* Banda clara para cortar antes de la banda oscura de "otras unidades".
   El 100vw sale del .wrap a proposito; funciona porque las paginas llevan
   overflow-x:hidden en el body. */
.rd-plano{
  width:100vw;margin-left:calc(50% - 50vw);
  background:var(--sand-deep);
  padding:var(--sp-2xl) 0;
}

.planos-fila{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-start;}
/* La tarjeta se ajusta al plano, no al ancho de la pagina: los planos van
   de 300 a 654px y una caja de 1170px dejaba el dibujo perdido en el medio.
   Puede encogerse (asi las dos suites entran en una fila) pero no por debajo
   de 420px, y ahi recien pasa a la fila de abajo. */
.planos-fila > .plano-caja{flex:0 1 auto;min-width:min(100%,420px);}

.plano-caja{
  display:block;max-width:100%;cursor:pointer;
  background:var(--cream);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(20px,3.4vw,38px);
  font-family:'Public Sans',system-ui,sans-serif;
  transition:box-shadow .5s var(--ease), transform .5s var(--ease);
}
.plano-caja:hover{box-shadow:var(--shadow-lift);transform:translateY(-3px);}
.plano-caja:focus-visible{outline:2px solid var(--olive);outline-offset:3px;}
/* Los planos son dibujos de linea sobre blanco y vienen chicos (de 300 a
   654px de ancho). Se muestran a tamano nativo — agrandarlos los emborrona —
   y el multiply funde ese blanco con el crema de la tarjeta. */
.plano-caja img{margin:0 auto;max-width:100%;height:auto;mix-blend-mode:multiply;}
@media(prefers-reduced-motion:reduce){
  .plano-caja{transition:none;}
  .plano-caja:hover{transform:none;}
}