/* Acordeon de servicios y galeria en mosaico.
 *
 * Sale de la muestra que aprobó Giovanni. Los dos efectos son CSS puro: no
 * hay una sola linea de JavaScript ni ninguna libreria.
 *
 * Motivo del cambio: spa, confiteria y galeria eran los tres el mismo
 * bloque de foto + texto. Cambiaba el contenido, no la forma, y al llegar
 * al final de la pagina se sentia que ya lo habias visto.
 *
 * Va en archivo aparte porque lo comparten varias paginas, y porque este
 * proyecto ya tuvo el problema de copiar CSS en cada archivo y despues
 * olvidarse de actualizar uno.
 */

/* ══════════════════ ANCLAS DEL MENU ══════════════════ */
/* La barra de arriba es fija y llega hasta los 133 px. Sin esto, al hacer
   clic en "Spa & Piscina" o "Galeria" la seccion se alinea con el borde de
   la ventana y el titulo queda tapado detras de la barra. Se reservaba el
   alto de la barra mas un respiro.
   Los valores siguen a los de .nav-space, que cambia en cada corte. */
section[id]{scroll-margin-top:164px;}
@media(max-width:760px){section[id]{scroll-margin-top:152px;}}
@media(max-width:560px){section[id]{scroll-margin-top:172px;}}

/* ══════════════════ ACORDEON ══════════════════ */

.svc{margin-top:clamp(28px, 3.5vw, 44px);}
.svc-fila{display:flex;gap:12px;height:clamp(320px, 40vw, 420px);}

/* Curva propia para el acordeon. La del sitio (--ease) arranca disparada y
   frena de golpe: va bien para un boton o una tarjeta que se levanta, pero
   en un panel que se abre entero se siente brusco. Esta sale despacio,
   toma velocidad en el medio y se acomoda sin golpe. */
.svc{--ease-abrir:cubic-bezier(.42,.06,.2,1);}

/* Cada panel es un boton y no un div: al tocarlo abre la foto en grande, y
   asi el acordeon tambien funciona con el teclado. Un acordeon que solo
   responde al mouse deja afuera a quien navega tabulando. */
.svc-panel{
  position:relative;flex:1 1 0;min-width:0;
  border:none;padding:0;margin:0;font:inherit;color:inherit;text-align:left;
  border-radius:var(--r-md);overflow:hidden;cursor:pointer;
  background:var(--olive);
  /* Se anima flex-grow y no width: no obliga a recalcular el layout de la
     pagina en cada cuadro de la animacion. */
  transition:flex-grow .9s var(--ease-abrir);
}
.svc-fila:hover .svc-panel,
.svc-fila:focus-within .svc-panel{flex-grow:.62;}
.svc-fila .svc-panel:hover,
.svc-fila .svc-panel:focus-visible{flex-grow:2.6;}
.svc-panel:focus-visible{outline:2px solid var(--cream);outline-offset:3px;}
.svc-claro .svc-panel:focus-visible{outline-color:var(--olive);}

.svc-panel img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.88) brightness(.82);
  transition:transform 1s var(--ease-abrir), filter .7s var(--ease-abrir);
}
.svc-panel:hover img{transform:scale(1.05);filter:saturate(1) brightness(1);}
.svc-panel::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top, rgba(8,32,34,.88) 0%, rgba(8,32,34,.3) 42%, rgba(8,32,34,.12) 100%);
}

.svc-txt{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:20px 20px 22px;color:var(--cream);}
.svc-txt h3{font-family:'Fraunces',serif;font-size:20px;font-weight:500;letter-spacing:-.01em;line-height:1.15;}
.svc-txt p{
  margin-top:8px;font-size:13.5px;line-height:1.55;color:rgba(255,254,250,.9);
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .75s var(--ease-abrir), opacity .5s ease .14s;
}
.svc-panel:hover .svc-txt p,
.svc-panel:focus-visible .svc-txt p{max-height:190px;opacity:1;}

/* Sin mouse el acordeon no tiene sentido. La primera version apilaba los
   paneles uno debajo del otro, pero las dos secciones juntas se comian 2.9
   pantallas de scroll — casi un cuarto de la pagina.
   Ahora se desliza de costado, que es el gesto que la gente espera en un
   telefono y ocupa el alto de un solo panel. */
@media(hover:none), (max-width:820px){
  .svc-fila{
    flex-direction:row;height:auto;gap:12px;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    /* sale del margen de la columna para que las fotos lleguen al borde de
       la pantalla, y se lo devuelve como padding para que la primera y la
       ultima no queden pegadas */
    margin-inline:-24px;padding-inline:24px;scroll-padding-inline:24px;
    scrollbar-width:none;
  }
  .svc-fila::-webkit-scrollbar{display:none;}
  /* 78% y no 100%: se asoma un pedazo de la siguiente, que es lo que avisa
     que hay mas para deslizar. Sin eso nadie sabe que puede correrlas. */
  .svc-panel{flex:0 0 78%;height:330px;scroll-snap-align:center;}
  .svc-fila:hover .svc-panel,.svc-fila .svc-panel:hover,
  .svc-fila:focus-within .svc-panel,.svc-fila .svc-panel:focus-visible{flex-grow:0;}
  .svc-panel img{filter:none;}
  .svc-txt p{max-height:none;opacity:1;}
}
@media(max-width:640px){
  .svc-fila{margin-inline:-18px;padding-inline:18px;scroll-padding-inline:18px;}
}
@media(prefers-reduced-motion:reduce){
  .svc-panel,.svc-panel img,.svc-txt p{transition:none !important;}
}

/* ---- variante clara, para la seccion que va sobre fondo arena ---- */
.svc-claro .svc-panel{background:var(--sand-deep);}
.svc-claro .svc-panel::after{
  background:linear-gradient(to top, rgba(28,31,27,.86) 0%, rgba(28,31,27,.28) 42%, rgba(28,31,27,.06) 100%);
}

/* ---- banda oscura a todo el ancho ---- */
/* El 100vw incluye la barra de scroll y por eso suele provocar desborde
   lateral; el calc con 100% lo evita porque 100% si la descuenta. */
.banda{
  width:100vw;margin-left:calc(50% - 50vw);
  background:var(--olive-deep);color:var(--cream);
  padding:clamp(56px, 7vw, 92px) 0;
  position:relative;overflow:hidden;
}
.banda .tag-pill{background:rgba(255,254,250,.14);color:var(--cream);}
.banda h2{color:var(--cream);}
.banda h2 em{color:#E8C9AF;}
.banda .svc-intro{color:rgba(255,254,250,.78);}
.banda .sec-head h2{color:var(--cream);}
.banda .sec-head h2 em{color:#E8C9AF;}

/* El mosaico sobre la banda oscura: el hueco de la foto que todavia no
   cargo tiene que ser oscuro tambien, o parpadea en claro al aparecer. */
.banda .mosaico button{background:var(--olive);}

.svc-cab{max-width:640px;}
.svc-cab h2{
  font-family:'Fraunces',serif;font-weight:400;letter-spacing:-.02em;
  font-size:clamp(28px, 4vw, 44px);line-height:1.06;margin-top:14px;
}
.svc-intro{margin-top:14px;font-size:15.5px;line-height:1.7;color:var(--ink-soft);max-width:52ch;}

/* ══════════════════ GALERIA EN MOSAICO ══════════════════ */
/* Tamanos distintos por foto. Entran seis en vez de cuatro sin sentirse
   mas cargado, y ninguna se agranda: las nuestras son de 800px y todo lo
   que las estire deja ver el pixelado. */
.mosaico{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;grid-auto-flow:dense;}
.mosaico button{
  border:none;padding:0;background:var(--sand-deep);font:inherit;color:inherit;
  border-radius:var(--r-md);overflow:hidden;display:block;position:relative;cursor:pointer;width:100%;
}
.mosaico img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease);}
.mosaico button:hover img{transform:scale(1.05);}
.mosaico button:focus-visible{outline:2px solid var(--olive);outline-offset:3px;}
.mos-alta{grid-row:span 2;aspect-ratio:3/4.8;}
.mos-ancha{grid-column:span 2;aspect-ratio:16/9;}
.mos-normal{aspect-ratio:1/1;}

.mos-cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:14px 15px;text-align:left;
  font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--cream);
  background:linear-gradient(to top, rgba(8,32,34,.8), transparent);
  opacity:0;transition:opacity .4s var(--ease);
}
.mosaico button:hover .mos-cap,
.mosaico button:focus-visible .mos-cap{opacity:1;}

@media(max-width:860px){
  .mosaico{grid-template-columns:repeat(2,1fr);}
  .mos-ancha{grid-column:span 2;aspect-ratio:16/10;}
  .mos-alta{grid-row:span 2;aspect-ratio:3/4.4;}
}
@media(hover:none){.mos-cap{opacity:1;}}
@media(prefers-reduced-motion:reduce){.mosaico img{transition:none !important;}}

/* ══════════════════ OTRAS UNIDADES ══════════════════ */
/* Va al pie de cada pagina de unidad, sobre la banda oscura. Antes, desde
   una unidad no habia forma de llegar a otra sin volver a la home: alguien
   mirando Suites y necesitando mas lugar no tenia como pasar a Family. */
.otras-cab{margin-bottom:clamp(24px, 3vw, 34px);}
.otras-cab h2{
  font-family:'Fraunces',serif;font-weight:400;letter-spacing:-.02em;
  font-size:clamp(26px, 3.4vw, 38px);line-height:1.08;margin-top:14px;
}

.otras-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;}

.otra{
  display:flex;flex-direction:column;
  border-radius:var(--r-md);overflow:hidden;
  background:rgba(255,254,250,.06);
  border:1px solid rgba(255,254,250,.12);
  transition:transform .45s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
}
.otra:hover{
  transform:translateY(-5px);
  background:rgba(255,254,250,.11);
  border-color:rgba(232,201,175,.4);
}
.otra:focus-visible{outline:2px solid var(--cream);outline-offset:3px;}

.otra-img{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--olive);}
.otra-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease);}
.otra:hover .otra-img img{transform:scale(1.06);}

.otra-txt{display:flex;flex-direction:column;gap:6px;padding:14px 15px 16px;}
.otra-nom{
  font-family:'Fraunces',serif;font-size:16px;font-weight:600;
  letter-spacing:-.01em;line-height:1.2;color:var(--cream);
}
.otra-meta{
  display:flex;flex-wrap:wrap;gap:5px;align-items:center;
  font-size:11px;font-weight:600;color:rgba(255,254,250,.72);
  font-family:'JetBrains Mono',monospace;letter-spacing:.02em;
}
.otra-meta span[aria-hidden]{opacity:.45;}

/* En pantallas angostas se deslizan de costado, igual que el acordeon: son
   cinco tarjetas y apiladas se comerian media pantalla de scroll. */
@media(max-width:900px){
  .otras-grid{
    display:flex;gap:12px;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    margin-inline:-24px;padding-inline:24px;scroll-padding-inline:24px;
    scrollbar-width:none;
  }
  .otras-grid::-webkit-scrollbar{display:none;}
  /* 62% deja asomar la siguiente, que es lo que avisa que hay mas */
  .otra{flex:0 0 62%;scroll-snap-align:center;}
}
@media(max-width:640px){
  .otras-grid{margin-inline:-18px;padding-inline:18px;scroll-padding-inline:18px;}
  .otra{flex:0 0 76%;}
}
@media(prefers-reduced-motion:reduce){
  .otra,.otra-img img{transition:none !important;}
}

/* ══════════════════ PILDORA DE SECCION ══════════════════ */
/* Estaba solo en index.html. Al sumar la banda de otras unidades a las
   paginas de unidad, la pildora aparecia sin estilo: se veia como texto
   resaltado en vez de pildora. Va al compartido, que es donde corresponde. */
.tag-pill{
  display:inline-flex;padding:6px 14px;border-radius:var(--r-pill);
  background:var(--olive-pale);color:var(--olive-deep);
  font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;font-weight:700;
  margin-bottom:16px;
}