@charset "UTF-8";
/* ==========================================================================
   HOTEL CAMPESTRE CACIQUE YARIGUÍ — premium.css
   Capa de componentes tipo aplicación web. Se carga DESPUÉS de style.css.
   Solo usa tokens ya definidos en style.css. Nada de colores sueltos.

   Índice:
     P1 · COVERFLOW 3D
     P2 · TARJETAS GRANDES (habitaciones, planes, destinos)
     P3 · PILLS SEGMENTADAS Y BARRA DE FILTROS PEGAJOSA
     P4 · RATING (dial, estrellas, subpuntajes)
     P5 · MOSAICO UNIFORME DE FOTOS
     P6 · TESTIMONIOS A LA MISMA ALTURA
     P7 · DETALLES DE APLICACIÓN (barra de progreso, tooltip de conteo)
     P8 · MOVIMIENTO REDUCIDO
   ========================================================================== */

/* ==========================================================================
   P1 · COVERFLOW 3D
   Se activa poniendo data-cover en un .y-carrusel existente.
   Sin JS el carrusel sigue funcionando como scroll-snap normal.
   ========================================================================== */
.y-carrusel[data-cover]{
  --cover-persp:1500px;
  --cover-giro:20deg;
  --cover-escala:.17;
  --cover-z:110px;
  --cover-fade:.42;
  position:relative;
}

/* Máscara lateral: los lados se desvanecen contra el fondo de la sección */
.y-carrusel[data-cover]::before,
.y-carrusel[data-cover]::after{
  content:"";
  position:absolute;
  inset-block:0;
  width:clamp(24px,7vw,96px);
  pointer-events:none;
  z-index:3;
  opacity:0;
  transition:opacity var(--y-t-estado) var(--y-ease-suave);
}
.y-carrusel[data-cover]::before{ left:0;  background:linear-gradient(90deg,var(--y-cover-fondo,var(--y-crema)),transparent); }
.y-carrusel[data-cover]::after{  right:0; background:linear-gradient(270deg,var(--y-cover-fondo,var(--y-crema)),transparent); }
.y-carrusel[data-cover].is-desborde-izq::before{ opacity:1; }
.y-carrusel[data-cover].is-desborde-der::after{ opacity:1; }

/* Fondo de la máscara según la sección donde viva el carrusel */
.y-sec--alt   .y-carrusel[data-cover]{ --y-cover-fondo:var(--y-superficie-2); }
.y-sec--blanco .y-carrusel[data-cover]{ --y-cover-fondo:var(--y-superficie); }
.y-sec--selva .y-carrusel[data-cover]{ --y-cover-fondo:var(--y-selva); }

.y-carrusel[data-cover] .y-carrusel__pista{
  perspective:var(--cover-persp);
  perspective-origin:50% 45%;
  padding-block:var(--y-s6) var(--y-s8);
  scroll-padding-inline:0;
  cursor:grab;
}
.y-carrusel[data-cover] .y-carrusel__pista.is-arrastrando{
  cursor:grabbing;
  scroll-snap-type:none;
  scroll-behavior:auto;
  user-select:none;
}
.y-carrusel[data-cover] .y-carrusel__pista:focus-visible{
  outline:3px solid var(--y-turquesa);
  outline-offset:4px;
  border-radius:var(--y-r-md);
}

/* Con JS activo el centrado es real: el ítem del medio manda */
.y-carrusel[data-cover].is-cover .y-carrusel__pista{ scroll-snap-type:x mandatory; }
.y-carrusel[data-cover].is-cover .y-carrusel__item{
  scroll-snap-align:center;
  transform-style:preserve-3d;
  transform:
    perspective(var(--cover-persp))
    translate3d(0,0,calc(var(--cover-z) * -1 * var(--dist-abs,0)))
    rotateY(calc(var(--cover-giro) * -1 * var(--dist,0)))
    scale(calc(1 - var(--cover-escala) * var(--dist-abs,0)));
  opacity:calc(1 - var(--cover-fade) * var(--dist-abs,0));
  z-index:calc(100 - var(--rank,0));
  transition:transform 90ms linear, opacity 90ms linear, box-shadow var(--y-t-card) var(--y-ease-suave);
  will-change:transform,opacity;
}

/* El ítem centrado se levanta y recupera el color */
.y-carrusel[data-cover].is-cover .y-carrusel__item.is-centro{ opacity:1; }
.y-carrusel[data-cover].is-cover .y-carrusel__item.is-centro > *{
  box-shadow:var(--y-sh-3);
}
.y-carrusel[data-cover].is-cover .y-carrusel__item:not(.is-centro) .y-img{
  filter:var(--y-grado) saturate(.82);
}
.y-carrusel[data-cover].is-cover .y-carrusel__item .y-img{
  transition:filter var(--y-t-foto) var(--y-ease-suave);
}

/* Anchos: en coverflow las tarjetas son más grandes que en el carrusel normal */
.y-carrusel[data-cover] .y-carrusel__item{ flex:0 0 78vw; max-width:none; }
@media (min-width:640px){ .y-carrusel[data-cover] .y-carrusel__item{ flex-basis:50vw; max-width:440px; } }
@media (min-width:1100px){ .y-carrusel[data-cover] .y-carrusel__item{ flex-basis:400px; max-width:400px; } }

/* Barra de control: puntos + flechas + contador */
.y-cover-ctrl{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--y-s4);
  margin-top:var(--y-s2);
  flex-wrap:wrap;
}
.y-cover-puntos{
  display:flex;
  align-items:center;
  gap:var(--y-s2);
  flex-wrap:wrap;
}
.y-cover-punto{
  width:10px; height:10px;
  padding:0;
  border:0;
  border-radius:var(--y-r-chip);
  background:var(--y-linea-fuerte);
  cursor:pointer;
  transition:width var(--y-t-estado) var(--y-ease-salida),
             background-color var(--y-t-estado) var(--y-ease-suave);
  position:relative;
}
/* Área táctil de 44px sin agrandar el punto visible */
.y-cover-punto::after{
  content:"";
  position:absolute;
  inset:-17px -8px;
}
.y-cover-punto[aria-current="true"]{ width:30px; background:var(--y-turquesa); }
.y-cover-punto:focus-visible{ outline:3px solid var(--y-turquesa); outline-offset:4px; }

.y-cover-info{
  font-size:var(--y-micro);
  color:var(--y-tinta-2);
  font-variant-numeric:tabular-nums;
}
.y-sec--selva .y-cover-info{ color:var(--y-linea-clara); }
.y-sec--selva .y-cover-punto{ background:rgba(255,255,255,.3); }
.y-sec--selva .y-cover-punto[aria-current="true"]{ background:var(--y-sol); }

/* ==========================================================================
   P2 · TARJETAS GRANDES
   Modificador de rejilla: agranda la foto, sube el título y añade elevación.
   ========================================================================== */
.y-grid--xl{ gap:clamp(20px,2.6vw,32px); }

/* --- Habitación XL --- */
.y-room--xl{ border-radius:var(--y-r-lg); overflow:hidden; }
.y-room--xl .y-room__media{ aspect-ratio:4/3; }
@media (min-width:900px){ .y-room--xl .y-room__media{ aspect-ratio:16/11; } }
.y-room--xl .y-room__body{ padding:clamp(20px,2.4vw,30px); }
.y-room--xl .y-h3{ font-size:clamp(1.35rem,2.4vw,1.85rem); }

/* Cinta superior de la tarjeta: número de orden y capacidad */
.y-room__cinta{
  position:absolute;
  inset-inline:var(--y-s4);
  top:var(--y-s4);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--y-s2);
  z-index:2;
  pointer-events:none;
}
.y-room__orden{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px; height:34px;
  padding-inline:var(--y-s2);
  border-radius:var(--y-r-chip);
  background:var(--y-vidrio-claro);
  backdrop-filter:var(--y-vidrio-blur);
  -webkit-backdrop-filter:var(--y-vidrio-blur);
  border:1px solid var(--y-vidrio-borde);
  font-family:var(--y-font-display);
  font-weight:700;
  font-size:var(--y-micro);
  color:var(--y-tinta);
  font-variant-numeric:tabular-nums;
}

/* --- Plan de aventura XL --- */
.y-plan--xl .y-plan__media{ aspect-ratio:3/2; }
.y-plan--xl{ border-radius:var(--y-r-lg); }
.y-plan--xl .y-h3{ font-size:clamp(1.3rem,2.2vw,1.7rem); }

/* --- Destino XL (el que va dentro del coverflow) --- */
.y-destino--xl{ border-radius:var(--y-r-lg); overflow:hidden; }
.y-destino--xl .y-destino__media{ aspect-ratio:3/4; }
.y-destino--xl .y-destino__body{ padding:clamp(18px,2vw,26px); }

/* Zoom lento de la foto al pasar el mouse en cualquier tarjeta grande */
@media (hover:hover){
  .y-room--xl .y-room__media .y-img,
  .y-plan--xl .y-plan__media .y-img,
  .y-destino--xl .y-destino__media .y-img{
    transition:transform var(--y-t-foto) var(--y-ease-suave), filter var(--y-t-foto) var(--y-ease-suave);
  }
  .y-room--xl:hover .y-room__media .y-img,
  .y-plan--xl:hover .y-plan__media .y-img,
  .y-destino--xl:hover .y-destino__media .y-img{ transform:scale(1.045); }
}

/* ==========================================================================
   P3 · PILLS SEGMENTADAS
   .y-chips[data-seg] → indicador deslizante detrás de la pill activa.
   ========================================================================== */
.y-chips[data-seg]{
  position:relative;
  display:flex;
  flex-wrap:nowrap;
  gap:var(--y-s2);
  padding:6px;
  border-radius:var(--y-r-chip);
  background:var(--y-superficie);
  border:1px solid var(--y-linea);
  box-shadow:var(--y-sh-1);
  width:max-content;
  max-width:100%;
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
}
.y-chips[data-seg]::-webkit-scrollbar{ display:none; }
.y-sec--alt .y-chips[data-seg]{ background:var(--y-superficie); }

/* El indicador que se desliza */
.y-chips__ind{
  position:absolute;
  top:6px;
  left:0;
  height:calc(100% - 12px);
  border-radius:var(--y-r-chip);
  background:var(--y-turquesa);
  box-shadow:var(--y-sh-1);
  transform:translateX(var(--x,0px));
  width:var(--w,0px);
  transition:transform var(--y-t-estado) var(--y-ease-salida),
             width var(--y-t-estado) var(--y-ease-salida);
  pointer-events:none;
  z-index:0;
}
.y-chips[data-seg] .y-chip{
  position:relative;
  z-index:1;
  border:0;
  background:transparent;
  box-shadow:none;
  white-space:nowrap;
  scroll-snap-align:center;
  transition:color var(--y-t-estado) var(--y-ease-suave);
}
.y-chips[data-seg] .y-chip[aria-pressed="true"]{
  color:#fff;
  background:transparent;
  border:0;
}
.y-chips[data-seg] .y-chip:focus-visible{ outline:3px solid var(--y-turquesa); outline-offset:3px; }

/* Contador dentro de la pill */
.y-chip__n{
  display:inline-block;
  margin-inline-start:var(--y-s2);
  padding-inline:7px;
  border-radius:var(--y-r-chip);
  background:var(--y-superficie-2);
  color:var(--y-tinta-2);
  font-size:var(--y-micro);
  font-weight:700;
  font-variant-numeric:tabular-nums;
  transition:background-color var(--y-t-estado) var(--y-ease-suave),
             color var(--y-t-estado) var(--y-ease-suave);
}
.y-chips[data-seg] .y-chip[aria-pressed="true"] .y-chip__n{
  background:rgba(255,255,255,.22);
  color:#fff;
}

/* Barra de filtros pegajosa (galería) */
.y-filtros-sticky{
  position:sticky;
  top:calc(var(--y-nav-h,72px) + 8px);
  z-index:var(--y-z-bar);
  padding-block:var(--y-s3);
  margin-inline:calc(var(--y-gutter) * -1);
  padding-inline:var(--y-gutter);
  background:transparent;
  transition:background-color var(--y-t-nav) var(--y-ease-suave),
             box-shadow var(--y-t-nav) var(--y-ease-suave),
             backdrop-filter var(--y-t-nav) var(--y-ease-suave);
}
.y-filtros-sticky.is-pegada{
  background:var(--y-vidrio-claro);
  backdrop-filter:var(--y-vidrio-blur);
  -webkit-backdrop-filter:var(--y-vidrio-blur);
  box-shadow:0 1px 0 var(--y-linea), var(--y-sh-1);
}

/* ==========================================================================
   P4 · RATING
   Datos reales de Booking y TripAdvisor. Nada calculado ni inventado.
   ========================================================================== */
.y-rating{
  display:grid;
  gap:clamp(20px,2.6vw,32px);
  padding:clamp(22px,2.8vw,34px);
  border-radius:var(--y-r-lg);
  background:var(--y-superficie);
  border:1px solid var(--y-linea);
  box-shadow:var(--y-sh-2);
}
@media (min-width:900px){
  .y-rating{ grid-template-columns:minmax(220px,280px) 1fr; align-items:start; }
}

/* --- Columna izquierda: el dial --- */
.y-rating__resumen{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--y-s3);
  text-align:center;
  padding-bottom:clamp(20px,2.4vw,28px);
  border-bottom:1px solid var(--y-linea);
}
@media (min-width:900px){
  .y-rating__resumen{
    padding-bottom:0;
    padding-inline-end:clamp(20px,2.4vw,32px);
    border-bottom:0;
    border-inline-end:1px solid var(--y-linea);
  }
}
.y-dial{
  position:relative;
  width:clamp(116px,15vw,148px);
  aspect-ratio:1;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:
    conic-gradient(var(--y-turquesa) calc(var(--pct,0) * 1%), var(--y-superficie-2) 0);
  transition:background var(--y-t-reveal) var(--y-ease-salida);
}
.y-dial::before{
  content:"";
  position:absolute;
  inset:11px;
  border-radius:50%;
  background:var(--y-superficie);
}
.y-dial__num{
  position:relative;
  font-family:var(--y-font-display);
  font-weight:700;
  font-size:clamp(2.1rem,4vw,2.75rem);
  line-height:1;
  color:var(--y-tinta);
  font-variant-numeric:tabular-nums;
}
.y-dial__num small{
  font-family:var(--y-font-texto);
  font-size:.42em;
  font-weight:600;
  color:var(--y-tinta-2);
  margin-inline-start:2px;
}
.y-rating__etiqueta{
  font-weight:700;
  font-size:var(--y-body-sm);
  color:var(--y-tinta);
}
.y-rating__fuente{
  font-size:var(--y-micro);
  color:var(--y-tinta-2);
}
.y-rating__fuente a{ color:var(--y-turquesa); text-underline-offset:3px; }

/* --- Estrellas --- */
.y-stars{
  display:inline-flex;
  align-items:center;
  gap:3px;
  line-height:1;
}
.y-stars svg{ width:18px; height:18px; display:block; }
.y-star__base{ fill:var(--y-superficie-2); }
.y-star__fill{ fill:var(--y-sol); }
.y-stars--sm svg{ width:14px; height:14px; }
.y-stars--lg svg{ width:22px; height:22px; }

/* --- Columna derecha: subpuntajes --- */
.y-rating__detalle{ display:grid; gap:var(--y-s4); }
.y-rating__titulo{
  font-weight:700;
  font-size:var(--y-body-sm);
  color:var(--y-tinta);
}
.y-rating__lista{
  display:grid;
  gap:var(--y-s4) clamp(20px,3vw,40px);
  list-style:none;
  padding:0;
  margin:0;
}
@media (min-width:560px){ .y-rating__lista{ grid-template-columns:repeat(2,1fr); } }
.y-rating__item{ display:grid; gap:6px; }
.y-rating__fila{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--y-s3);
  font-size:var(--y-body-sm);
}
.y-rating__nombre{ color:var(--y-tinta-2); }
.y-rating__valor{
  font-weight:700;
  color:var(--y-tinta);
  font-variant-numeric:tabular-nums;
}
.y-rating__pista{
  height:8px;
  border-radius:var(--y-r-chip);
  background:var(--y-superficie-2);
  overflow:hidden;
}
.y-rating__relleno{
  display:block;
  height:100%;
  width:0;
  border-radius:var(--y-r-chip);
  background:linear-gradient(90deg,var(--y-turquesa),var(--y-turquesa-osc));
  transition:width var(--y-t-reveal) var(--y-ease-salida);
  transition-delay:var(--y-delay,0ms);
}
.y-rating__relleno.is-lleno{ width:calc(var(--pct,0) * 1%); }

/* Segunda fuente (TripAdvisor) en tarjeta compacta */
.y-rating__otra{
  display:flex;
  align-items:center;
  gap:var(--y-s3);
  padding:var(--y-s4);
  border-radius:var(--y-r-sm);
  background:var(--y-turquesa-suave);
}
.y-rating__otra-num{
  font-family:var(--y-font-display);
  font-weight:700;
  font-size:1.5rem;
  line-height:1;
  color:var(--y-tinta);
  font-variant-numeric:tabular-nums;
}
.y-rating__otra-txt{ display:grid; gap:2px; }

/* Insignia de rating compacta, para usar junto a un título */
.y-rating-badge{
  display:inline-flex;
  align-items:center;
  gap:var(--y-s2);
  padding:6px 12px 6px 8px;
  border-radius:var(--y-r-chip);
  background:var(--y-superficie);
  border:1px solid var(--y-linea);
  box-shadow:var(--y-sh-1);
  font-size:var(--y-micro);
  color:var(--y-tinta-2);
}
.y-rating-badge b{
  color:var(--y-tinta);
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
.y-rating-badge--claro{
  background:var(--y-vidrio-claro);
  backdrop-filter:var(--y-vidrio-blur);
  -webkit-backdrop-filter:var(--y-vidrio-blur);
  border-color:var(--y-vidrio-borde);
}

/* ==========================================================================
   P5 · MOSAICO UNIFORME
   Arregla los mosaicos con alturas desparejas: todas las fotos al mismo alto.
   ========================================================================== */
.y-gal--uni{
  display:grid;
  gap:var(--y-gap);
  grid-template-columns:repeat(2,1fr);
  list-style:none;
  padding:0;
  margin:0;
}
@media (min-width:760px){ .y-gal--uni{ grid-template-columns:repeat(3,1fr); } }
.y-gal--uni .y-gal-item{
  --ar:4/3 !important;
  margin:0;
  break-inside:auto;
}
/* La primera foto ocupa dos columnas y dos filas: rompe la monotonía.
   Se le quita el aspect-ratio para que estire exacto y no deje huecos. */
@media (min-width:760px){
  .y-gal--uni .y-gal-item:first-child{
    grid-column:span 2;
    grid-row:span 2;
    aspect-ratio:auto;
    height:100%;
  }
  /* Absoluta para que la foto no imponga el alto de la fila */
  .y-gal--uni .y-gal-item:first-child .y-gal-item__btn{
    position:absolute;
    inset:0;
    height:100%;
  }
  .y-gal--uni .y-gal-item:first-child .y-img{
    width:100%;
    height:100%;
    object-fit:cover;
  }
}

/* ==========================================================================
   P6 · TESTIMONIOS A LA MISMA ALTURA
   ========================================================================== */
.y-quotes-grid{
  display:grid;
  gap:var(--y-gap);
  grid-template-columns:1fr;
  align-items:stretch;
}
@media (min-width:760px){ .y-quotes-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .y-quotes-grid{ grid-template-columns:repeat(3,1fr); } }
.y-quotes-grid .y-quote{ height:100%; }
.y-quotes-grid .y-quote__txt{
  font-size:clamp(1.05rem,1.5vw,1.25rem);
  line-height:1.45;
}
/* La tarjeta de datos ya no vive dentro de la rejilla de citas */
.y-quotes-grid .y-quote--datos{ display:none; }

/* Estrellas dentro de la cita */
.y-quote__stars{ margin-bottom:var(--y-s1); }

/* ==========================================================================
   P7 · DETALLES DE APLICACIÓN
   ========================================================================== */
/* Barra de progreso de lectura, arriba del todo */
.y-progreso{
  position:fixed;
  inset-block-start:0;
  inset-inline:0;
  height:3px;
  z-index:calc(var(--y-z-nav) + 1);
  background:transparent;
  pointer-events:none;
}
.y-progreso span{
  display:block;
  height:100%;
  width:0;
  background:linear-gradient(90deg,var(--y-turquesa),var(--y-sol));
  transform-origin:left center;
}

/* Estado vacío de un filtro, con más presencia */
.y-vacio-premium{
  display:grid;
  place-items:center;
  gap:var(--y-s3);
  padding:clamp(32px,5vw,64px);
  border:1px dashed var(--y-linea-fuerte);
  border-radius:var(--y-r-md);
  text-align:center;
  color:var(--y-tinta-2);
}

/* ==========================================================================
   P8 · MOVIMIENTO REDUCIDO
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  .y-carrusel[data-cover].is-cover .y-carrusel__item{
    transform:none !important;
    opacity:1 !important;
    transition:none !important;
  }
  .y-carrusel[data-cover] .y-carrusel__pista{ perspective:none; }
  .y-carrusel[data-cover].is-cover .y-carrusel__item:not(.is-centro) .y-img{ filter:var(--y-grado); }
  .y-rating__relleno,
  .y-dial{ transition:none !important; }
  .y-chips__ind{ transition:none !important; }
  .y-progreso span{ transition:none !important; }
}

/* ==========================================================================
   P9 · UTILIDADES QUE FALTABAN EN EL SISTEMA
   Estaban declaradas en el <style> de la home y las usan las demás páginas.
   ========================================================================== */
.y-sep{ margin-top:var(--y-s7); }
.y-nav__brand-txt{ display:inline-block; }
.y-footer__col--marca{ display:grid; gap:var(--y-s3); }