/* ============================================================
   CASA DEL ROBLE — estilos
   ============================================================ */

:root{
  --verde:        #1e332b;
  --verde-claro:  #2b473c;
  --crema:        #f4f6f8;
  --blanco:       #ffffff;
  --tinta:        #16181a;
  --gris:         #5c6166;
  --gris-suave:   #e6e9ec;
  --dorado:       #e8b04b;

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --ancho: 1200px;
  --radio: 18px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--sans);
  font-weight:400;
  color:var(--tinta);
  background:var(--blanco);
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }

a{ color:inherit; }

h1,h2,h3,p{ margin:0; }

button{ font:inherit; color:inherit; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--verde); color:#fff; padding:.75rem 1.25rem;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline:2px solid var(--dorado); outline-offset:3px; }

/* ---------------------------- Marca ------------------------- */
.logo{
  font-family:var(--serif);
  font-weight:300;
  text-transform:uppercase;
  letter-spacing:.16em;
  line-height:1.1;
}
.logo--xl{ font-size:clamp(2.1rem, 7.2vw, 5rem); }
.logo--sm{ font-size:clamp(1.5rem, 3.4vw, 2.1rem); }

.logo__sub{
  font-family:var(--sans);
  font-weight:300;
  text-transform:uppercase;
  letter-spacing:.30em;
  font-size:clamp(.72rem, 2.1vw, 1.2rem);
  margin-top:.7em;
}
.logo__sub--sm{ font-size:clamp(.6rem,1.5vw,.78rem); margin-top:.6em; }

/* ---------------------------- Hero -------------------------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
  overflow:hidden;
}
.hero__media{ position:absolute; inset:0; }
.hero__img{
  width:100%; height:100%; object-fit:cover;
}
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.32) 38%, rgba(0,0,0,.68) 100%);
}
.hero__content{
  position:relative;
  padding:0 1.25rem;
  transform:translateY(4%);
}
.hero__tagline{
  margin-top:1.1em;
  font-weight:300;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:clamp(.68rem, 1.7vw, .95rem);
  opacity:.9;
}
.hero .btn{ margin-top:2.2rem; }

.hero__scroll{
  position:absolute; bottom:2rem; left:50%; translate:-50% 0;
  width:1px; height:44px;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.85));
  animation:scrollHint 2.4s var(--ease) infinite;
}
@keyframes scrollHint{
  0%,100%{ opacity:0; transform:translateY(-8px); }
  50%    { opacity:1; transform:translateY(0); }
}

/* --------------------------- Botones ------------------------ */
.btn{
  display:inline-block;
  border:0; cursor:pointer;
  border-radius:999px;
  padding:.72em 2.1em;
  font-size:clamp(.75rem, 1.6vw, .86rem);
  font-weight:500;
  letter-spacing:.02em;
  text-decoration:none;
  transition:transform .25s var(--ease), background-color .25s var(--ease), box-shadow .25s var(--ease);
}
.btn--dark{ background:var(--verde); color:#fff; }
.btn--dark:hover{
  background:var(--verde-claro);
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(30,51,43,.22);
}

.btn--light{ background:rgba(255,255,255,.14); color:#fff; backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.5); }
.btn--light:hover{ background:#fff; color:var(--verde); transform:translateY(-2px); }

.btn--sm{ padding:.55em 1.5em; font-size:.72rem; }
/* el botón chico necesita su propia sombra: la general lo desbordaba */
.btn--sm.btn--dark:hover{ box-shadow:0 4px 10px rgba(30,51,43,.2); }

/* --------------------------- Secciones ---------------------- */
.section{
  padding:clamp(3.5rem, 9vw, 7rem) 0;
}
.section--tint{ background:var(--crema); }

.section__head{
  max-width:var(--ancho);
  margin:0 auto clamp(2rem, 5vw, 3.5rem);
  padding:0 1.25rem;
  text-align:center;
}
.section__head--tight{ margin-top:clamp(2.5rem,6vw,4rem); }

.title{
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:-.01em;
  line-height:1.1;
  font-size:clamp(1.55rem, 5vw, 3.1rem);
}
.subtitle--caps{ text-transform:uppercase; letter-spacing:.02em; }
.subtitle{
  margin-top:.85em;
  font-weight:400;
  color:var(--tinta);
  font-size:clamp(.78rem, 1.9vw, .95rem);
}

.prose{
  max-width:640px;
  margin:clamp(2rem,5vw,3rem) auto 0;
  padding:0 1.25rem;
  text-align:center;
  color:var(--gris);
  font-size:clamp(.82rem, 1.9vw, .95rem);
  line-height:1.85;
}
.prose__lead{
  margin-top:1.8em;
  color:var(--tinta);
  font-weight:500;
  font-size:clamp(.95rem, 2.4vw, 1.25rem);
}

.center{ text-align:center; margin-top:clamp(1.8rem,4vw,2.6rem); }

/* --------------------------- Carrusel ----------------------- */
.carousel{ position:relative; }

.carousel__viewport{
  overflow:hidden;
  padding-block:.5rem;
}
.carousel__track{
  display:flex;
  align-items:center;
  gap:var(--gap, 24px);
  will-change:transform;
  transition:transform .6s var(--ease);
}
.carousel__track.is-dragging{ transition:none; }

.carousel__caption{
  text-align:center;
  margin-top:1.4rem;
  font-weight:500;
  font-size:clamp(.82rem, 1.9vw, .95rem);
}

.slide{
  flex:0 0 auto;
  margin:0;              /* <figure> trae margin:1em 40px del navegador */
  user-select:none;
  -webkit-user-drag:none;
}

/* -- flechas -- */
.nav{
  position:absolute; top:50%; translate:0 -50%;
  z-index:3;
  width:44px; height:44px;
  border:0; border-radius:50%;
  background:rgba(255,255,255,.72);
  box-shadow:0 4px 16px rgba(0,0,0,.12);
  cursor:pointer;
  display:grid; place-items:center;
  transition:background-color .25s var(--ease), opacity .25s var(--ease), transform .25s var(--ease);
}
.nav:hover{ background:#fff; transform:translateY(-50%) scale(1.06); }
.nav::before{
  content:"";
  width:9px; height:9px;
  border-right:1.8px solid var(--tinta);
  border-bottom:1.8px solid var(--tinta);
}
.nav--prev{ left:max(.75rem, 2vw); }
.nav--prev::before{ rotate:135deg; translate:2px 0; }
.nav--next{ right:max(.75rem, 2vw); }
.nav--next::before{ rotate:-45deg; translate:-2px 0; }

/* -- dots -- */
.dots{
  display:flex; justify-content:center; align-items:center;
  gap:8px; margin-top:1.5rem;
}
.dots button{
  width:7px; height:7px; padding:0;
  border:0; border-radius:999px;
  background:#c8cdd2; cursor:pointer;
  transition:width .35s var(--ease), background-color .35s var(--ease);
}
.dots button[aria-selected="true"]{ width:52px; background:#9aa1a8; }

/* --------------------- Carrusel: cabañas -------------------- */
.carousel--single{ --gap: 40px; }
.carousel--single .carousel__viewport{
  /* mismo ancho que la tarjeta: así no se asoma la siguiente */
  max-width:min(1000px, 88vw);
  margin-inline:auto;
  padding-inline:0;
}

.cabana{ width:min(1000px, 88vw); }
.cabana__img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:var(--radio);
  background:var(--gris-suave);
}
.cabana__bar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1.5rem;
  margin-top:1.4rem;
  flex-wrap:wrap;
}
.cabana__name{
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.02em;
  font-size:clamp(1.05rem, 2.8vw, 1.6rem);
}
/* "Detalles" arriba y "Reservar" abajo, centrados entre sí
   (alinearlos por el borde derecho los dejaba disparejos) */
.cabana__acciones{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.05rem;
}
.enlace{
  background:none; border:0; padding:0;
  font-size:clamp(.72rem, 1.6vw, .8rem);
  font-weight:500;
  color:var(--tinta);
  text-decoration:underline;
  text-underline-offset:4px;
  cursor:pointer;
  transition:opacity .25s var(--ease);
}
.enlace:hover{ opacity:.55; }

.specs{ display:flex; gap:1.6rem; margin-top:.7rem; }
.spec{ text-align:center; color:var(--tinta); }
.spec svg{ margin:0 auto; }
.spec span{
  display:block; margin-top:.3rem;
  font-size:clamp(.6rem, 1.4vw, .68rem);
  color:var(--gris);
}

/* ------------------ Carrusel: coverflow --------------------- */
/* Coverflow circular: las tarjetas se enciman y giran alrededor de la
   del centro, así que siempre se ve la anterior y la siguiente.
   Cada una se posiciona desde JS según su distancia con la del centro. */
.carousel--cover{ --w-tarjeta: min(540px, 46vw); }

.carousel--cover .carousel__track{
  position:relative;
  display:block;                                   /* ya no es una fila */
  height:calc(var(--w-tarjeta) * 0.75);            /* las tarjetas son 4:3 */
  transform:none !important;                       /* se mueven ellas, no la pista */
}

.carousel--cover .slide{
  position:absolute;
  top:50%; left:50%;
  width:var(--w-tarjeta);
  transition:transform .6s var(--ease), opacity .6s var(--ease);
}
.carousel--cover .slide img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:var(--radio);
  background:var(--gris-suave);
}
.carousel--cover .slide.is-active img{
  box-shadow:0 18px 45px rgba(0,0,0,.18);
}

/* ------------- Galería fija: áreas comunes ------------------
   No es un carrusel: tres imágenes fijas. En reposo las tres son
   idénticas. Al señalar una con el cursor, esa crece DESDE EL CENTRO
   (se reparte igual hacia arriba y hacia abajo) y muestra su nombre
   justo debajo; las otras se encogen y se lavan.
   ------------------------------------------------------------ */
.galeria__pista{
  --alto-reposo: clamp(232px, 33vw, 448px);
  --alto-activa: clamp(272px, 38vw, 528px);
  --alto-lavada: clamp(200px, 28vw, 384px);

  display:flex;
  align-items:center;          /* el crecimiento se reparte arriba y abajo */
  /* altura fija = la imagen más grande + el espacio del nombre, para que
     la fila nunca cambie de alto ni empuje lo de abajo */
  min-height:calc(var(--alto-activa) + 3.4rem);
  padding-bottom:3.4rem;
}

.galeria__item{
  flex:1 1 0;
  margin:0;
  position:relative;
  cursor:pointer;
  transition:flex-grow .5s var(--ease);
}

.galeria__marco{
  position:relative;
  overflow:hidden;
}
.galeria__marco img{
  width:100%;
  height:var(--alto-reposo);
  object-fit:cover;
  display:block;
  transition:height .5s var(--ease), transform .5s var(--ease), filter .5s var(--ease);
}
/* velo que lava las que no están señaladas */
.galeria__marco::after{
  content:"";
  position:absolute; inset:0;
  background:var(--crema);
  opacity:0;
  transition:opacity .5s var(--ease);
  pointer-events:none;
}

/* --- la señalada: zoom --- */
.galeria__item.is-active{ flex-grow:1.45; }
.galeria__item.is-active .galeria__marco img{
  height:var(--alto-activa);
  transform:scale(1.04);
}

/* --- las otras, mientras hay una señalada --- */
.galeria__pista.tiene-activa .galeria__item:not(.is-active){ flex-grow:.86; }
.galeria__pista.tiene-activa .galeria__item:not(.is-active) .galeria__marco img{
  height:var(--alto-lavada);
  filter:saturate(.35) contrast(.92);
}
.galeria__pista.tiene-activa .galeria__item:not(.is-active) .galeria__marco::after{ opacity:.62; }

/* --- el nombre: fuera del flujo, justo debajo de su propia imagen,
       para que no descentre el crecimiento --- */
.galeria__nombre{
  position:absolute;
  top:100%; left:0; right:0;
  padding-top:1.1rem;
  text-align:center;
  font-weight:500;
  font-size:clamp(.9rem, 2.2vw, 1.15rem);
  opacity:0;
  transition:opacity .35s var(--ease);
  pointer-events:none;
}
.galeria__item.is-active .galeria__nombre{ opacity:1; }

/* --------------------- Banda a sangre ----------------------- */
.band{
  position:relative;
  min-height:clamp(320px, 56vw, 620px);
  display:flex;
  align-items:center;
  overflow:hidden;
}
.band__img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
}
.band::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.45), rgba(0,0,0,0) 60%);
}
.band__title{
  position:relative; z-index:2;
  color:#fff;
  font-weight:400;
  text-transform:uppercase;
  line-height:1.35;
  letter-spacing:.01em;
  font-size:clamp(1.25rem, 3.6vw, 2.5rem);
  padding-inline:clamp(1.25rem, 5vw, 4rem);
}

/* ----------------------- Reseñas ---------------------------- */
.carousel--narrow{ --gap: 32px; }
.carousel--narrow .carousel__viewport{
  max-width:min(620px, 82vw);
  margin-inline:auto;
  padding-inline:0;
}

.resena{
  width:min(620px, 82vw);
  background:var(--blanco);
  border:1px solid var(--gris-suave);
  border-radius:var(--radio);
  padding:clamp(1.4rem, 3.5vw, 2rem);
}
.resena__stars{
  display:flex; align-items:center; justify-content:flex-end;
  gap:.35rem; color:var(--dorado);
  font-size:.9rem; font-weight:500;
}
.resena__body{
  display:flex; align-items:center; gap:clamp(1rem,3vw,2.2rem);
  margin-top:1rem;
}
.resena__avatar{
  flex:0 0 auto;
  width:66px; height:66px;
  border-radius:16px;
  background:var(--verde);
  color:#fff;
  display:grid; place-items:center;
  font-size:2rem; font-weight:600;
}
.resena__autor{
  margin-top:.6rem; text-align:center;
  font-size:.7rem; color:var(--gris);
}
.resena__texto{
  flex:1;
  text-align:center;
  font-size:clamp(.8rem, 1.9vw, .92rem);
  line-height:1.7;
  color:var(--tinta);
}

/* ---------------------- Ubicación --------------------------- */
.location{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:clamp(2rem, 5vw, 4rem);
  padding:clamp(3rem, 7vw, 5.5rem) 0;
}
.location__map{
  aspect-ratio:4/3;
  background:var(--gris-suave);
  overflow:hidden;
}
.location__map iframe{ width:100%; height:100%; border:0; display:block; }
.location__text{
  padding-inline:clamp(1.25rem, 4vw, 3rem);
  text-align:center;
}
.location__text .btn{ margin-top:1.6rem; }
.location__note{
  max-width:34ch;
  margin:2.4rem auto 0;
  font-size:clamp(.7rem, 1.6vw, .78rem);
  line-height:1.7;
  color:var(--gris);
}

/* ------------------------ Footer ---------------------------- */
.footer{
  background:var(--verde);
  color:#fff;
  padding:clamp(2.5rem, 6vw, 4rem) clamp(1.25rem, 4vw, 3rem) 0;
}
.footer__inner{
  max-width:var(--ancho);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:2rem;
}
.footer__contact{ font-size:.72rem; line-height:2; opacity:.92; }
.footer__label{ opacity:.75; }
.footer__contact a{ text-decoration:underline; text-underline-offset:3px; }
.footer__brand{ text-align:center; }
.footer__address{ margin-top:1.6rem; font-size:.72rem; opacity:.9; }
.footer__social{ display:flex; justify-content:flex-end; }
.footer__social a{ opacity:.85; transition:opacity .25s var(--ease); }
.footer__social a:hover{ opacity:1; }
.footer__copy{
  margin-top:clamp(2rem,5vw,3rem);
  padding:1rem 0;
  text-align:center;
  font-size:.6rem;
  opacity:.5;
}

/* ---------- Pop-up de la tent ("Conoce Más") ---------------- */
.ficha{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(0px, 3vw, 40px);
}
.ficha[hidden]{ display:none; }

.ficha__fondo{
  position:absolute; inset:0;
  background:rgba(10,18,15,.72);
  backdrop-filter:blur(3px);
  animation:fadeIn .3s var(--ease);
}
.ficha__panel{
  position:relative;
  width:min(940px, 100%);
  max-height:100%;
  overflow-y:auto;
  background:var(--blanco);
  border-radius:clamp(0px, 1.6vw, 18px);
  box-shadow:0 24px 70px rgba(0,0,0,.4);
  animation:fichaIn .35s var(--ease);
  padding:clamp(1.6rem, 3.5vw, 2.6rem) 0 clamp(1.8rem, 4vw, 2.8rem);
}
@keyframes fadeIn{ from{ opacity:0 } to{ opacity:1 } }
@keyframes fichaIn{ from{ opacity:0; transform:translateY(16px) scale(.99) } to{ opacity:1; transform:none } }

.ficha__cerrar{
  position:absolute; top:.9rem; right:.9rem; z-index:20;
  width:36px; height:36px;
  display:grid; place-items:center;
  border:0; border-radius:50%;
  background:rgba(22,24,26,.08); color:var(--tinta);
  font-size:1.5rem; line-height:1; cursor:pointer;
  transition:background-color .25s var(--ease);
}
.ficha__cerrar:hover{ background:rgba(22,24,26,.18); }

/* la galería del pop-up: el coverflow de amenidades, en el
   tamaño del pop-up */
.carousel--ficha{ --w-tarjeta:min(420px, 62vw); }
.carousel--ficha .nav{ width:36px; height:36px; }
.carousel--ficha .dots{ margin-top:1rem; }
.carousel--ficha .carousel__caption{ margin-top:1.1rem; }

.ficha__info{
  padding-inline:clamp(1.4rem, 4vw, 3rem);
  margin-top:clamp(1.2rem, 3vw, 2rem);
}
.ficha__nombre{
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:-.01em;
  font-size:clamp(1.3rem, 3.4vw, 2rem);
}
.ficha__info .specs{ margin-top:1rem; gap:1.8rem; }

.ficha__texto{
  margin-top:1.3rem;
  color:var(--gris);
  font-size:clamp(.82rem, 1.9vw, .93rem);
  line-height:1.8;
}

.ficha__cols{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(1.4rem, 4vw, 3rem);
  margin-top:clamp(1.6rem, 3.5vw, 2.2rem);
}
.ficha__sub{
  margin:0 0 .9rem;
  font-size:.7rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.14em;
  color:var(--tinta);
}
.ficha__lista{
  margin:0; padding:0; list-style:none;
  font-size:clamp(.78rem, 1.8vw, .86rem);
  line-height:2;
  color:var(--gris);
}
.ficha__lista li{ padding-left:1.1rem; position:relative; }
.ficha__lista li::before{
  content:""; position:absolute; left:0; top:.85em;
  width:5px; height:5px; border-radius:50%;
  background:var(--verde);
}

.chips{
  display:flex; flex-wrap:wrap; gap:.45rem;
  margin:0; padding:0; list-style:none;
}
.chips li{
  padding:.38em .85em;
  border-radius:999px;
  background:var(--crema);
  border:1px solid var(--gris-suave);
  font-size:clamp(.66rem, 1.5vw, .74rem);
  color:var(--tinta);
}

.ficha__reservar{
  display:block;
  width:fit-content;
  margin:clamp(1.8rem, 4vw, 2.4rem) auto 0;
  text-decoration:none;
}

@media (max-width: 700px){
  .ficha{ padding:0; }
  .carousel--ficha{ --w-tarjeta:74vw; }
  .ficha__panel{ width:100%; max-height:100%; height:100%; border-radius:0; }
  .ficha__cols{ grid-template-columns:1fr; }
}

/* ------------------------ Responsive ------------------------ */
@media (max-width: 860px){
  .location{ grid-template-columns:1fr; }
  .location__map{ aspect-ratio:16/11; }

  .footer__inner{ grid-template-columns:1fr; text-align:center; }
  .footer__contact{ order:2; }
  .footer__brand{ order:1; }
  .footer__social{ order:3; justify-content:center; }

  .carousel--cover{ --w-tarjeta:min(520px, 68vw); }
  .nav{ width:38px; height:38px; }
  .band::after{ background:linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.1)); }
}

@media (max-width: 700px){
  /* sin cursor no hay hover: se apilan, todas a color y con su nombre */
  .galeria__pista{ display:grid; grid-template-columns:1fr; min-height:0; padding-bottom:0; }
  .galeria__item,
  .galeria__pista.tiene-activa .galeria__item:not(.is-active){ flex:none; cursor:default; }
  .galeria__marco img,
  .galeria__item.is-active .galeria__marco img,
  .galeria__pista.tiene-activa .galeria__item:not(.is-active) .galeria__marco img{
    height:clamp(210px, 54vw, 320px);
    filter:none;
    transform:none;
  }
  .galeria__marco::after,
  .galeria__pista.tiene-activa .galeria__item:not(.is-active) .galeria__marco::after{ opacity:0; }
  .galeria__nombre,
  .galeria__item.is-active .galeria__nombre{
    position:static; opacity:1; padding:.9rem 0 1.6rem;
  }
}

@media (max-width: 560px){
  .cabana__bar{ justify-content:center; text-align:center; }
  .cabana__meta{ width:100%; }
  .specs{ justify-content:center; }
  .resena__body{ flex-direction:column; }
  .resena__stars{ justify-content:center; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}