/* =====================================================================
   INDIUM · DURRAT TULUM
   Paleta tomada del logotipo (#7A4900). Tipografía y botones basados
   en la referencia: serif editorial + versalitas espaciadas.
   ===================================================================== */

:root{
  --marron:      #7A4900;
  --marron-hondo:#43280A;
  --marron-claro:#A9773A;
  --tinta:       #16110C;
  --papel:       #FFFFFF;
  --arena:       #F5F0E8;
  --linea:       #E4DACB;
  --texto:       #4A4038;

  --r-grande: 34px;
  --r-media:  26px;
  --r-chica:  16px;
  --r-boton:  5px;

  --ancho: 1180px;
  --paso: clamp(70px, 8.5vw, 128px);

  --display: "Playfair Display", Georgia, serif;
  --cuerpo:  "EB Garamond", Georgia, serif;
  --util:    "Jost", "Helvetica Neue", Arial, sans-serif;
}

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

html{ scroll-behavior:smooth; scroll-padding-top:96px; }

body{
  margin:0;
  background:var(--papel);
  color:var(--texto);
  font-family:var(--cuerpo);
  font-size:18px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{ display:block; max-width:100%; }
figure{ margin:0; }
[hidden]{ display:none !important; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--tinta); color:#fff; padding:12px 18px; border-radius:var(--r-boton);
  font-family:var(--util); font-size:13px;
}
.skip:focus{ left:16px; top:16px; }

:focus-visible{ outline:2px solid var(--marron); outline-offset:3px; border-radius:4px; }

/* ---------- Tipografía compartida ---------- */
.h2{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(32px,4.2vw,56px);
  line-height:1.1;
  color:var(--tinta);
  margin:6px 0 0;
  letter-spacing:-0.01em;
}
.h2 em{ font-style:italic; }

.eyebrow{
  font-family:var(--util);
  font-size:11.5px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--marron);
  margin:0;
}
.eyebrow--claro{ color:rgba(255,246,235,.72); }

.prosa{ max-width:52ch; font-size:17.5px; }
.marca{ display:block; font-size:22px; color:var(--tinta); margin-bottom:24px; }

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--util);
  font-size:13px; font-weight:500; letter-spacing:.04em;
  padding:15px 34px;
  min-width:172px;
  border:1px solid transparent;
  border-radius:999px;
  text-decoration:none;
  cursor:pointer;
  transition:transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.btn--dark, .btn--oscuro{ background:var(--tinta); color:#fff; }
.btn--dark:hover, .btn--oscuro:hover{ background:var(--marron); transform:translateY(-2px); }
.btn--claro{ background:#FBF7F1; color:var(--tinta); }
.btn--claro:hover{ background:#fff; transform:translateY(-2px); }
.btn--fantasma{ background:transparent; color:#F6EEE3; border-color:rgba(246,238,227,.45); }
.btn--fantasma:hover{ background:rgba(255,255,255,.12); transform:translateY(-2px); }
.btn--linea{ background:transparent; color:var(--tinta); border-color:var(--linea); }
.btn--linea:hover{ border-color:var(--tinta); transform:translateY(-2px); }
.btn--ancho{ width:100%; }
.btn:disabled{ opacity:.4; cursor:not-allowed; transform:none; }

/* ---------- Navegación ---------- */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.nav.es-fija{ border-bottom-color:var(--linea); box-shadow:0 6px 26px rgba(35,22,6,.05); }

.nav__inner{
  max-width:var(--ancho); margin:0 auto;
  padding:12px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
}
.nav__logo img{ height:30px; width:auto; }

.nav__links{ display:flex; align-items:center; gap:28px; }
.nav__links a{
  font-family:var(--cuerpo); font-size:16px;
  color:var(--tinta); text-decoration:none;
  position:relative; padding-bottom:2px; white-space:nowrap;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--marron); transition:width .3s ease;
}
.nav__links a:hover::after{ width:100%; }
/* el botón oscuro del menú móvil llevaba texto negro sobre negro */
.nav__links a.btn--oscuro{ color:#fff; }
.nav__links a.btn--oscuro::after{ display:none; }
.nav__cta-movil{ display:none; }

.nav__derecha{ display:flex; align-items:center; gap:12px; }

.idioma{ display:flex; border:1px solid var(--linea); border-radius:999px; overflow:hidden; }

.idioma button{
  font-family:var(--util); font-size:11.5px; letter-spacing:.1em;
  background:transparent; border:0; color:var(--texto);
  padding:9px 11px; cursor:pointer;
  transition:background .25s ease, color .25s ease;
}
.idioma button[aria-pressed="true"]{ background:var(--tinta); color:#fff; }

.nav__burger{
  display:none;
  width:42px; height:42px;
  background:transparent; border:1px solid var(--linea); border-radius:999px;
  cursor:pointer; padding:0;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.nav__burger span{ width:17px; height:1.5px; background:var(--tinta); transition:transform .3s ease; }
.nav__burger[aria-expanded="true"] span:first-child{ transform:translateY(3.2px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.2px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  max-width:var(--ancho); margin:clamp(26px,4vw,50px) auto 0;
  padding:0 24px clamp(40px,6vw,72px);
}
.hero__panel{
  background:linear-gradient(140deg, var(--marron-hondo) 0%, var(--marron) 70%, #8F5B12 100%);
  border-radius:var(--r-grande);
  padding:clamp(38px,5vw,64px);
  padding-right:clamp(38px,42%,520px);
  min-height:clamp(330px,38vw,440px);
  display:flex; flex-direction:column; justify-content:center;
  color:#FBF4EA;
}
.hero__titulo{
  font-family:var(--display); font-weight:400;
  font-size:clamp(40px,5.4vw,68px);
  line-height:1.08; letter-spacing:-0.015em;
  margin:16px 0 14px; color:#FDF8F1;
}
.hero__titulo em{ font-style:italic; }
.hero__sub{ margin:0 0 28px; font-size:17.5px; color:rgba(253,248,241,.82); max-width:34ch; }
.hero__acciones{ display:flex; flex-wrap:wrap; gap:12px; }

.hero__foto{
  position:absolute; right:24px; top:clamp(-38px,-3vw,-18px);
  width:min(46%,470px);
  border-radius:var(--r-media); overflow:hidden;
  box-shadow:0 26px 60px rgba(35,22,6,.26);
}
.hero__foto img{ width:100%; height:clamp(350px,43vw,540px); object-fit:cover; }

/* ---------- La villa ---------- */
.declara{
  max-width:var(--ancho); margin:0 auto;
  padding:var(--paso) 24px;
  display:grid; grid-template-columns:1fr minmax(320px,1.35fr) 1fr;
  align-items:center; gap:clamp(20px,4vw,56px);
}
.declara__lado{ border-radius:var(--r-media); overflow:hidden; }
.declara__lado img{ width:100%; height:clamp(240px,27vw,340px); object-fit:cover; }
.declara__lado--izq{ align-self:start; margin-top:clamp(0px,3vw,40px); }
.declara__lado--der{ align-self:end; margin-bottom:clamp(0px,3vw,30px); }

.declara__centro{ text-align:center; }
.declara__titulo{
  font-family:var(--display); font-weight:400;
  font-size:clamp(32px,4vw,50px); line-height:1.13;
  color:var(--tinta); margin:0 0 22px; letter-spacing:-0.01em;
}
.declara__titulo em{ font-style:italic; }
.declara__texto{ font-size:17px; max-width:44ch; margin:0 auto 30px; }

/* ---------- Suites ---------- */
.suites{ max-width:var(--ancho); margin:0 auto; padding:0 24px var(--paso); }
.suites__encabezado{ margin-bottom:30px; }
.suites__encabezado .prosa{ margin-top:16px; }

.tabs{
  display:flex; gap:8px; flex-wrap:wrap;
  padding-bottom:14px; margin-bottom:30px;
  border-bottom:1px solid var(--linea);
}
.tab{
  font-family:var(--util); font-size:12.5px; letter-spacing:.06em;
  background:transparent; border:1px solid var(--linea); border-radius:999px;
  color:var(--texto); padding:11px 18px; cursor:pointer;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.tab:hover{ border-color:var(--marron-claro); color:var(--tinta); }
.tab[aria-selected="true"]{ background:var(--tinta); border-color:var(--tinta); color:#fff; }

.panel{ display:none; }
.panel.es-activo{ display:block; animation:aparece .5s ease both; }
@keyframes aparece{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none; } }

.cuarto{
  display:grid; grid-template-columns:1.6fr 1fr;
  gap:clamp(18px,2.4vw,30px); align-items:start;
}
.cuarto__aside{ display:flex; flex-direction:column; gap:clamp(16px,2vw,24px); }
.cuarto__principal{
  position:relative; padding:0; border:0; background:none;
  border-radius:var(--r-media); overflow:hidden; cursor:zoom-in; width:100%;
}
.cuarto__principal img{
  width:100%; height:clamp(320px,42vw,500px); object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.3,1);
}
.cuarto__principal:hover img{ transform:scale(1.035); }
.cuarto__etiqueta{
  position:absolute; left:18px; bottom:18px;
  background:rgba(22,17,12,.72); color:#fff;
  font-family:var(--util); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  padding:8px 14px; border-radius:99px; backdrop-filter:blur(6px);
}

.cuarto__info h3{
  font-family:var(--display); font-weight:400;
  font-size:clamp(26px,2.8vw,36px); color:var(--tinta);
  margin:0 0 6px; line-height:1.12;
}
.cuarto__nota{ margin:0 0 18px; font-size:17px; }

.fichas{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:7px; }
.fichas li{
  font-family:var(--util); font-size:11.5px; letter-spacing:.05em;
  border:1px solid var(--linea); border-radius:99px;
  padding:6px 13px; color:var(--texto);
}

.bano{
  background:var(--arena); border-radius:var(--r-media);
  padding:clamp(16px,1.8vw,20px);
  display:flex; flex-direction:column; gap:16px;
}
.bano__foto{
  padding:0; border:0; background:none; cursor:zoom-in;
  border-radius:var(--r-chica); overflow:hidden;
}
.bano__foto{ width:100%; }
.bano__foto img{
  width:100%; height:clamp(150px,15vw,200px);
  object-fit:cover; transition:transform .6s ease;
}
.bano__foto:hover img{ transform:scale(1.05); }
.bano__texto h4{
  font-family:var(--display); font-weight:400; font-size:23px;
  color:var(--tinta); margin:0 0 6px;
}
.bano__texto p{ margin:0; font-size:16.5px; max-width:46ch; }

/* ---------- Espacios ---------- */
.espacios{ max-width:var(--ancho); margin:0 auto; padding:0 24px var(--paso); }
.espacios__encabezado{ margin-bottom:24px; }

.filtros{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px; }
.filtro{
  font-family:var(--util); font-size:12.5px; letter-spacing:.06em;
  background:transparent; border:1px solid var(--linea); border-radius:99px;
  color:var(--texto); padding:9px 18px; cursor:pointer;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.filtro:hover{ border-color:var(--marron-claro); color:var(--tinta); }
.filtro.es-activo{ background:var(--tinta); border-color:var(--tinta); color:#fff; }

.mosaico{ display:grid; grid-template-columns:repeat(6,1fr); grid-auto-flow:dense; gap:clamp(12px,1.6vw,20px); }
.area{
  grid-column:span 2; position:relative;
  border-radius:var(--r-media); overflow:hidden;
  padding:0; border:0; background:none; cursor:zoom-in; text-align:left;
}
.area--grande{ grid-column:span 4; }
.area img{
  width:100%; height:clamp(210px,23vw,300px); object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.7,.3,1);
}
.area:hover img{ transform:scale(1.05); }
.area__cara{
  position:absolute; inset:auto 0 0 0; padding:20px;
  background:linear-gradient(to top, rgba(22,17,12,.75), rgba(22,17,12,0));
  color:#fff;
}
.area__cara b{ font-family:var(--display); font-weight:400; font-size:22px; display:block; line-height:1.2; }
.area__cara span{ font-family:var(--util); font-size:11px; letter-spacing:.14em; text-transform:uppercase; opacity:.82; }

/* ---------- Todo incluido ---------- */
.incluido{ max-width:var(--ancho); margin:0 auto; padding:0 24px var(--paso); }
.incluido__panel{
  position:relative; border-radius:var(--r-grande); overflow:hidden;
  min-height:clamp(360px,42vw,480px); display:flex; align-items:center;
}
.incluido__panel img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.incluido__cara{
  position:relative; padding:clamp(32px,5vw,64px);
  max-width:min(100%,580px); color:#FDF7EF;
  background:linear-gradient(100deg, rgba(18,11,3,.84) 0%, rgba(18,11,3,.55) 72%, rgba(18,11,3,0) 100%);
  align-self:stretch; display:flex; flex-direction:column; justify-content:center;
}
.incluido__titulo{
  font-family:var(--display); font-weight:400;
  font-size:clamp(30px,3.8vw,48px); line-height:1.12; margin:0 0 16px;
}
.incluido__titulo em{ font-style:italic; }
.incluido__cara p{ margin:0 0 26px; font-size:17px; color:rgba(253,247,239,.88); max-width:44ch; }
.incluido__cara .btn{ align-self:flex-start; }

.grupos{
  margin-top:clamp(26px,3.4vw,44px);
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(20px,3vw,44px);
}
.grupo h3{
  font-family:var(--display); font-weight:400; font-size:26px;
  color:var(--tinta); margin:0 0 10px;
}
.grupo ul{ list-style:none; margin:0; padding:0; }
.grupo li{
  font-family:var(--util); font-size:14px; line-height:1.5;
  padding:12px 0; border-top:1px solid var(--linea);
  color:var(--tinta); display:flex; gap:10px;
}
.grupo li::before{ content:"✦"; color:var(--marron); font-size:10px; line-height:1.9; flex:0 0 auto; }

/* ---------- Reserva ---------- */
.reserva{
  max-width:var(--ancho); margin:0 auto; padding:0 24px var(--paso);
  display:grid; grid-template-columns:1fr 1.1fr;
  gap:clamp(26px,4vw,64px); align-items:start;
}
.tarifas{ display:flex; flex-wrap:wrap; gap:clamp(14px,2vw,26px); margin-top:26px; }
.tarifa{ opacity:.42; transition:opacity .3s ease; }
.tarifa.es-activa{ opacity:1; }
.tarifa b{
  display:block; font-family:var(--display); font-weight:400;
  font-size:clamp(28px,3vw,38px); color:var(--tinta); line-height:1.1;
}
.tarifa span{
  font-family:var(--util); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--marron);
}
.tarifas__nota{ font-size:15.5px; margin:14px 0 0; max-width:44ch; }

.condiciones{ list-style:none; margin:0; padding:0; }
.condiciones li{
  display:flex; justify-content:space-between; align-items:baseline; gap:20px;
  padding:12px 0; border-bottom:1px solid var(--linea);
}
.condiciones span{
  font-family:var(--util); font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--texto);
}
.condiciones b{
  font-family:var(--cuerpo); font-weight:400; font-size:18px;
  color:var(--tinta); text-align:right;
}

/* ---------- Ubicación ---------- */
.ubicacion{
  max-width:var(--ancho); margin:0 auto; padding:0 24px var(--paso);
  display:grid; grid-template-columns:1fr 1.15fr;
  gap:clamp(24px,4vw,64px); align-items:center;
}
.direccion{ font-size:17px; max-width:38ch; margin:18px 0 24px; color:var(--tinta); }
.ubicacion__foto{ border-radius:var(--r-media); overflow:hidden; }
.ubicacion__foto img{ width:100%; height:clamp(300px,36vw,460px); object-fit:cover; }

/* ---------- Contacto ---------- */
.contacto{ max-width:var(--ancho); margin:0 auto; padding:0 24px clamp(60px,8vw,110px); }
.contacto__panel{
  background:linear-gradient(150deg, var(--marron-hondo) 0%, var(--marron) 100%);
  border-radius:var(--r-grande);
  padding:clamp(32px,4.6vw,62px);
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(28px,4vw,60px); color:#FBF4EA;
}
.contacto__titulo{
  font-family:var(--display); font-weight:400;
  font-size:clamp(30px,3.6vw,46px); line-height:1.12;
  margin:14px 0 26px; color:#FDF8F1;
}
.contacto__titulo em{ font-style:italic; }
.contacto__datos{ list-style:none; margin:0; padding:0; }
.contacto__datos li{ padding:11px 0; border-top:1px solid rgba(255,246,235,.2); }
.contacto__datos span{
  display:block; font-family:var(--util); font-size:11px;
  letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,246,235,.6); margin-bottom:2px;
}
.contacto__datos a{
  font-family:var(--cuerpo); font-size:17px; color:#FDF8F1; text-decoration:none;
}
.contacto__datos a:hover{ text-decoration:underline; }

.form{ display:flex; flex-direction:column; gap:14px; }
.campo label{
  display:block; font-family:var(--util); font-size:11px;
  letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,246,235,.7); margin-bottom:6px;
}
.campo input, .campo textarea{
  width:100%; font-family:var(--cuerpo); font-size:16px;
  color:#FDF8F1; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,246,235,.24); border-radius:var(--r-boton);
  padding:12px 14px;
  transition:border-color .25s ease, background .25s ease;
}
.campo input::placeholder, .campo textarea::placeholder{ color:rgba(253,248,241,.45); }
.campo input:focus, .campo textarea:focus{
  outline:none; border-color:rgba(255,246,235,.7); background:rgba(255,255,255,.14);
}
.campo textarea{ resize:vertical; }
.campo--doble{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.campo input.es-error{ border-color:#F0B48A; }
.form__aviso{ margin:0; font-size:15px; min-height:22px; color:#FBE6CF; }
.form .btn{ align-self:flex-start; }

/* ---------- Pie ---------- */
.pie{
  border-top:1px solid var(--linea);
  padding:44px 24px 54px;
  display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center;
}
.pie__logo{ height:44px; width:auto; }
.pie__links{ display:flex; flex-wrap:wrap; justify-content:center; gap:24px; }
.pie__links a{ color:var(--tinta); text-decoration:none; font-size:16px; }
.pie__links a:hover{ color:var(--marron); }
.pie__legal{ font-family:var(--util); font-size:12px; letter-spacing:.06em; color:#8A7C6C; margin:0; }



/* =====================================================================
   Reseñas
   ===================================================================== */
.resenas{ max-width:var(--ancho); margin:0 auto; padding:0 24px var(--paso); }
.resenas__encabezado{ margin-bottom:28px; }
.resenas__aviso{
  font-family:var(--util); font-size:12px; letter-spacing:.04em;
  color:#9A8B79; margin:14px 0 0;
}
.resenas__pista{
  display:grid; grid-auto-flow:column;
  grid-auto-columns:minmax(300px,1fr);
  gap:clamp(14px,1.8vw,22px);
  overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:14px; margin:0 -6px; padding-left:6px; padding-right:6px;
  scrollbar-width:thin;
}
.resena{
  scroll-snap-align:start;
  background:var(--arena);
  border-radius:var(--r-media);
  padding:clamp(22px,2.4vw,30px);
  display:flex; flex-direction:column; gap:14px;
}
.resena__alto{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.resena__fuente{
  font-family:var(--util); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  border-radius:999px; padding:6px 13px; color:#fff; background:var(--tinta);
  white-space:nowrap;
}
.resena__fuente--booking{ background:#003580; }
.resena__fuente--logo{ background:#fff; border:1px solid var(--linea); padding:6px 12px; }
.resena__fuente--logo img{ height:14px; width:auto; display:block; }
.resena__fuente--vrbo{ background:#2E6BD6; }
.resena__estrellas{ color:var(--marron); font-size:14px; letter-spacing:.12em; }
.resena__texto{ margin:0; font-size:17px; line-height:1.6; color:var(--tinta); flex:1; }
.resena__pie{
  margin:0; font-family:var(--util); font-size:11.5px;
  letter-spacing:.1em; text-transform:uppercase; color:#8A7C6C;
}

/* =====================================================================
   Disponibilidad, calendario y cotizador
   ===================================================================== */
.dispo{ max-width:var(--ancho); margin:0 auto; padding:0 24px var(--paso); }
.dispo__encabezado{ margin-bottom:30px; }
.dispo__cuerpo{
  display:grid; grid-template-columns:1.5fr 1fr;
  gap:clamp(20px,2.6vw,34px); align-items:start;
}

.calendario{
  border:1px solid var(--linea);
  border-radius:var(--r-media);
  padding:clamp(20px,2.4vw,30px);
}
.calendario__barra{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; margin-bottom:20px;
}
.calendario__flecha{
  width:42px; height:42px; flex:0 0 auto;
  background:transparent; border:1px solid var(--linea); border-radius:999px;
  font-size:22px; line-height:1; color:var(--tinta); cursor:pointer;
  transition:border-color .25s ease, background .25s ease;
}
.calendario__flecha:hover:not(:disabled){ border-color:var(--tinta); }
.calendario__flecha:disabled{ opacity:.3; cursor:not-allowed; }

.monedas{ display:flex; border:1px solid var(--linea); border-radius:999px; overflow:hidden; }
.moneda{
  font-family:var(--util); font-size:11.5px; letter-spacing:.1em;
  background:transparent; border:0; color:var(--texto);
  padding:10px 16px; cursor:pointer;
  transition:background .25s ease, color .25s ease;
}
.moneda.es-activa{ background:var(--tinta); color:#fff; }

.calendario__meses{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.4vw,34px); }
.mes__titulo{
  font-family:var(--display); font-size:20px; color:var(--tinta);
  margin:0 0 12px; text-align:center; text-transform:capitalize;
}
.mes__rejilla{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.mes__dia{
  font-family:var(--util); font-size:10.5px; letter-spacing:.08em;
  color:#9A8B79; text-align:center; padding-bottom:6px;
}
.mes__vacio{ aspect-ratio:1; }
.dia{
  aspect-ratio:1;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--util); font-size:13px;
  background:transparent; border:0; border-radius:999px;
  color:var(--tinta); cursor:pointer;
  transition:background .2s ease, color .2s ease;
}
.dia:hover:not(:disabled){ background:var(--arena); }
.dia--pasado{ color:#C9BEB0; cursor:not-allowed; }
.dia--ocupado{
  color:#C4A98A; cursor:not-allowed;
  text-decoration:line-through; text-decoration-thickness:1px;
}
.dia--rango{ background:var(--arena); border-radius:0; }
.dia--extremo{ background:var(--tinta); color:#fff; }
.dia--extremo:hover{ background:var(--tinta); }

.calendario__leyenda{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  margin:22px 0 0; font-family:var(--util); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:#8A7C6C;
}
.calendario__leyenda i{ font-style:normal; margin-right:12px; }
.punto{ width:9px; height:9px; border-radius:50%; display:inline-block; }
.punto--libre{ background:var(--tinta); }
.punto--ocupado{ background:#DCC7AC; }
.calendario__sync{ margin-left:auto; color:var(--marron); text-transform:none; letter-spacing:.04em; }

.cotizador{
  background:var(--arena);
  border-radius:var(--r-media);
  padding:clamp(22px,2.4vw,30px);
  position:sticky; top:100px;
}
.cotizador h3{
  font-family:var(--display); font-weight:400; font-size:26px;
  color:var(--tinta); margin:0 0 16px;
}
.cotizador__fechas{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.cotizador__fecha{
  background:#fff; border-radius:var(--r-chica); padding:12px 14px;
}
.cotizador__fecha span{
  display:block; font-family:var(--util); font-size:10px;
  letter-spacing:.16em; text-transform:uppercase; color:#9A8B79; margin-bottom:2px;
}
.cotizador__fecha b{ font-family:var(--cuerpo); font-weight:400; font-size:16px; color:var(--tinta); }

.cotizador__lineas{ margin-top:18px; }
.linea{
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  padding:10px 0; font-size:16px; color:var(--texto);
}
.linea b{ font-weight:400; color:var(--tinta); white-space:nowrap; }
.linea--total{
  border-top:1px solid var(--linea); margin-top:6px; padding-top:14px;
}
.linea--total span{ font-family:var(--util); font-size:12px; letter-spacing:.14em; text-transform:uppercase; }
.linea--total b{ font-family:var(--display); font-size:26px; }
.linea--nota{ font-size:14.5px; color:#8A7C6C; padding-top:0; }
.linea__impuestos{
  font-family:var(--util); font-size:11.5px; line-height:1.5;
  color:#8A7C6C; margin:8px 0 0;
}

.cotizador__aviso{
  min-height:22px; margin:6px 0 14px;
  font-size:15px; color:var(--marron);
}
.cotizador__acciones{ display:flex; flex-direction:column; gap:10px; }
.cotizador__pago{
  margin-top:22px; padding-top:18px; border-top:1px solid var(--linea);
}
.cotizador__pago h4{
  font-family:var(--util); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:#9A8B79; margin:0 0 8px;
}
.cotizador__pago p{ margin:0; font-size:15.5px; }

/* ---------- Contacto con botones ---------- */
.contacto__texto{ margin:0; font-size:17px; color:rgba(253,248,241,.86); max-width:40ch; }
.contacto__botones{
  display:flex; flex-direction:column; gap:12px;
  align-self:center; width:100%;
}

@media (max-width:1000px){
  .dispo__cuerpo{ grid-template-columns:1fr; }
  .cotizador{ position:static; }
}
@media (max-width:900px){
  .calendario__meses{ grid-template-columns:1fr; }
  .calendario__meses .mes:nth-child(2){ display:none; }   /* en móvil, un mes a la vez */
  .resenas__pista{ grid-auto-columns:minmax(260px,86%); }
}
@media (max-width:520px){
  .cotizador__fechas{ grid-template-columns:1fr; }
  .calendario{ padding:16px; }
  .dia{ font-size:12.5px; }
}



/* ---------- Reseña con foto y botón ---------- */
.resena__foto{
  padding:0; border:0; background:none; cursor:zoom-in;
  border-radius:var(--r-chica); overflow:hidden; margin-bottom:2px;
}
.resena__foto img{
  width:100%; height:clamp(150px,15vw,190px); object-fit:cover;
  transition:transform .6s ease;
}
.resena__foto:hover img{ transform:scale(1.05); }
.resena__fuente--{ background:var(--marron); }
.resenas__pie{ margin-top:26px; }

/* ---------- Ventana de reseña ---------- */
.modal{
  position:fixed; inset:0; z-index:160;
  background:rgba(16,10,3,.7);
  display:flex; align-items:center; justify-content:center;
  padding:20px; overflow-y:auto;
  animation:fundido .3s ease both;
}
.modal__caja{
  position:relative;
  background:var(--papel);
  border-radius:var(--r-grande);
  padding:clamp(26px,3.4vw,44px);
  width:min(660px,100%);
  max-height:92vh; overflow-y:auto;
}
.modal__cerrar{
  position:absolute; top:16px; right:16px;
  width:40px; height:40px; border-radius:999px;
  background:transparent; border:1px solid var(--linea);
  color:var(--tinta); font-size:15px; cursor:pointer;
}
.modal__cerrar:hover{ border-color:var(--tinta); }
.modal__titulo{
  font-family:var(--display); font-weight:400; font-size:clamp(26px,3vw,34px);
  color:var(--tinta); margin:0 0 10px; padding-right:40px;
}
.modal__intro{ margin:0 0 22px; font-size:16.5px; max-width:52ch; }
.modal__campos{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.campo--ancho{ grid-column:1 / -1; }
.campo--claro label{ color:#8A7C6C; }
.campo--claro input, .campo--claro textarea{
  background:#FBF8F3; border-color:var(--linea); color:var(--tinta);
}
.campo--claro input::placeholder, .campo--claro textarea::placeholder{ color:#B5A895; }
.campo--claro input:focus, .campo--claro textarea:focus{
  border-color:var(--marron); background:#fff;
}
.campo--claro small{
  display:block; margin-top:5px;
  font-family:var(--util); font-size:11px; color:#9A8B79;
}
.estrellas{ display:flex; gap:4px; }
.estrella{
  background:transparent; border:0; cursor:pointer;
  font-size:24px; line-height:1; color:var(--linea); padding:0 2px;
  transition:color .2s ease;
}
.estrella.es-activa{ color:var(--marron); }
.subir{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.subir__vista{
  width:120px; height:88px; object-fit:cover; border-radius:var(--r-chica);
}
.modal__aviso{ min-height:22px; margin:16px 0 0; font-size:15.5px; color:var(--marron); }
.modal__acciones{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }

@media (max-width:600px){
  .modal__campos{ grid-template-columns:1fr; }
  .modal__acciones .btn{ width:100%; }
}



/* =====================================================================
   Bienvenida
   ===================================================================== */
body.con-intro{ overflow:hidden; }

.intro{
  position:fixed; inset:0; z-index:300;
  background:
    radial-gradient(120% 90% at 50% 40%, #6B4009 0%, #43280A 55%, #2A1904 100%);
  display:flex; align-items:center; justify-content:center;
  opacity:1; transition:opacity .8s ease, visibility .8s ease;
}
.intro.es-saliendo{ opacity:0; visibility:hidden; }

.intro__centro{ text-align:center; padding:24px; }

.intro__logo{
  width:min(340px,74vw); height:auto; margin:0 auto;
  filter:brightness(0) invert(1);
  opacity:0;
  animation:
    intro-entra 1.1s cubic-bezier(.2,.7,.3,1) .15s both,
    intro-latido 2.4s ease-in-out 1.25s 2;
}
@keyframes intro-entra{
  from{ opacity:0; transform:scale(.94) translateY(10px); filter:brightness(0) invert(1) blur(6px); }
  to{ opacity:1; transform:none; filter:brightness(0) invert(1) blur(0); }
}
@keyframes intro-latido{
  0%,100%{ transform:scale(1); }
  14%{ transform:scale(1.045); }
  28%{ transform:scale(1); }
  42%{ transform:scale(1.028); }
  56%{ transform:scale(1); }
}

.intro__linea{
  display:block; height:1px; width:0; margin:26px auto 0;
  background:rgba(253,248,241,.5);
  animation:intro-linea 1.5s cubic-bezier(.2,.7,.3,1) .9s both;
}
@keyframes intro-linea{ from{ width:0; } to{ width:min(220px,52vw); } }

.intro__leyenda{
  font-family:var(--util); font-size:11.5px; font-weight:500;
  letter-spacing:.34em; text-transform:uppercase;
  color:rgba(253,248,241,.72);
  margin:18px 0 0;
  animation:intro-leyenda 1.2s ease 1.5s both;
}
@keyframes intro-leyenda{
  from{ opacity:0; letter-spacing:.16em; }
  to{ opacity:1; letter-spacing:.34em; }
}

.intro__saltar{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
  background:transparent; border:1px solid rgba(253,248,241,.3); border-radius:999px;
  color:rgba(253,248,241,.75);
  font-family:var(--util); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  padding:11px 26px; cursor:pointer;
  opacity:0; animation:intro-leyenda .8s ease 2.2s both;
  transition:border-color .25s ease, color .25s ease;
}
.intro__saltar:hover{ border-color:rgba(253,248,241,.7); color:#fff; }

/* ---------- Fotos múltiples en la reseña ---------- */
.subir small{
  font-family:var(--util); font-size:11px; color:#9A8B79;
}
.subir__galeria{
  display:flex; flex-wrap:wrap; gap:10px; margin-top:12px;
}
.miniatura{ position:relative; }
.miniatura img{
  width:92px; height:70px; object-fit:cover; border-radius:12px;
}
.miniatura__quitar{
  position:absolute; top:-7px; right:-7px;
  width:24px; height:24px; border-radius:999px;
  background:var(--tinta); color:#fff; border:0;
  font-size:11px; line-height:1; cursor:pointer;
}
.miniatura__quitar:hover{ background:var(--marron); }

.resena__foto{ position:relative; }
.resena__cuenta{
  position:absolute; right:10px; bottom:10px;
  background:rgba(22,17,12,.72); color:#fff;
  font-family:var(--util); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  padding:5px 11px; border-radius:999px; backdrop-filter:blur(6px);
}



/* ---------- Elegir cómo reservar ---------- */
.modal__caja--angosta{ width:min(520px,100%); }
.modal__resumen{
  font-family:var(--util); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--marron); background:var(--arena);
  border-radius:999px; padding:11px 18px; display:inline-block; margin:0 0 22px;
}
.opciones{ display:grid; gap:10px; }
.opcion{
  display:grid; grid-template-columns:1fr auto; align-items:center;
  gap:4px 16px;
  border:1px solid var(--linea); border-radius:var(--r-chica);
  padding:18px 20px; text-decoration:none;
  transition:border-color .25s ease, background .25s ease, transform .25s ease;
}
.opcion:hover{ border-color:var(--tinta); transform:translateY(-2px); }
.opcion b{
  font-family:var(--display); font-weight:400; font-size:21px;
  color:var(--tinta); grid-column:1;
  display:flex; align-items:center; min-height:26px;
}
.opcion__marca{ width:auto; display:block; }
.opcion__rotulo{
  font-family:var(--util); font-style:normal; font-size:10.5px;
  letter-spacing:.16em; text-transform:uppercase; color:#9A8B79;
  margin-right:12px;
}
.opcion span{
  grid-column:1; font-size:15px; color:var(--texto); line-height:1.4;
}
.opcion__flecha{
  grid-column:2; grid-row:1 / span 2;
  font-style:normal; font-size:19px; color:var(--marron);
}
.opcion--fuerte{
  background:var(--tinta); border-color:var(--tinta);
}
.opcion--fuerte b{ color:#fff; }
.opcion--fuerte span{ color:rgba(253,248,241,.75); }
.opcion--fuerte .opcion__flecha{ color:#fff; }
.opcion--fuerte:hover{ background:#241A10; }



/* ---------- Sonido ---------- */
.bocina{
  position:fixed; right:20px; bottom:20px; z-index:120;
  height:46px; border-radius:999px;
  background:rgba(255,255,255,.92);
  border:1px solid var(--linea);
  backdrop-filter:blur(10px);
  cursor:pointer; padding:0 20px 0 18px;
  display:flex; align-items:center; gap:16px;
  box-shadow:0 6px 22px rgba(35,22,6,.1);
  transition:border-color .25s ease, transform .25s ease;
}
.bocina:hover{ border-color:var(--tinta); transform:translateY(-2px); }
.bocina__texto{
  font-family:var(--util); font-size:11px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--tinta);
  white-space:nowrap;
}

/* tres barras que se mueven cuando suena */
.bocina__icono, .bocina__icono::before, .bocina__icono::after{
  content:""; display:block;
  width:2px; height:9px; border-radius:2px;
  background:var(--tinta);
  position:absolute;
}
.bocina__icono{ position:relative; }
.bocina__icono::before{ left:-6px; height:14px; top:-2px; }
.bocina__icono::after{ left:6px; height:6px; top:2px; }

.bocina.es-sonando .bocina__icono{ animation:barra 1s ease-in-out infinite; }
.bocina.es-sonando .bocina__icono::before{ animation:barra 1.3s ease-in-out infinite .2s; }
.bocina.es-sonando .bocina__icono::after{ animation:barra .9s ease-in-out infinite .4s; }
@keyframes barra{
  0%,100%{ transform:scaleY(.55); }
  50%{ transform:scaleY(1.25); }
}
.bocina:not(.es-sonando) .bocina__icono,
.bocina:not(.es-sonando) .bocina__icono::before,
.bocina:not(.es-sonando) .bocina__icono::after{ background:#B5A895; }
.bocina:not(.es-sonando) .bocina__icono::before{ height:9px; top:0; }
.bocina:not(.es-sonando) .bocina__texto{ color:#8A7C6C; }

@media (max-width:640px){
  /* en pantallas chicas queda solo el icono */
  .bocina{ right:14px; bottom:14px; width:44px; height:44px; padding:0;
           justify-content:center; gap:0; }
  .bocina__texto{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .bocina.es-sonando .bocina__icono,
  .bocina.es-sonando .bocina__icono::before,
  .bocina.es-sonando .bocina__icono::after{ animation:none; }
}



/* ---------- Cursor jaguar ---------- */
/* Solo en equipos con puntero de verdad: en táctil no hay cursor que cambiar. */
@media (hover:hover) and (pointer:fine){
  .con-jaguar body,
  .con-jaguar .intro,
  .con-jaguar .modal,
  .con-jaguar .visor{
    cursor:url("../assets/marcas/cursor-jaguar.png") 19 19, auto;
  }

  .con-jaguar a,
  .con-jaguar button,
  .con-jaguar label,
  .con-jaguar summary,
  .con-jaguar .tab,
  .con-jaguar .filtro,
  .con-jaguar .dia:not(:disabled),
  .con-jaguar .area,
  .con-jaguar .opcion,
  .con-jaguar .estrella,
  .con-jaguar .moneda,
  .con-jaguar .miniatura__quitar{
    cursor:url("../assets/marcas/cursor-jaguar-activo.png") 24 24, pointer;
  }

  /* al escribir estorba: ahí se queda el cursor de siempre */
  .con-jaguar input,
  .con-jaguar textarea,
  .con-jaguar select{ cursor:text; }
  .con-jaguar input[type="date"],
  .con-jaguar input[type="month"],
  .con-jaguar input[type="file"],
  .con-jaguar input[type="number"]{ cursor:default; }

  .con-jaguar button:disabled,
  .con-jaguar .dia:disabled{ cursor:not-allowed; }
}



/* =====================================================================
   Recorrido: invitación
   ===================================================================== */
.paseo{ max-width:var(--ancho); margin:0 auto; padding:0 24px var(--paso); }
.paseo__panel{
  position:relative; border-radius:var(--r-grande); overflow:hidden;
  min-height:clamp(340px,40vw,460px); display:flex; align-items:center;
}
.paseo__panel img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.paseo__cara{
  position:relative; padding:clamp(32px,5vw,64px);
  max-width:min(100%,560px); color:#FDF7EF; align-self:stretch;
  display:flex; flex-direction:column; justify-content:center;
  background:linear-gradient(100deg, rgba(18,11,3,.85) 0%, rgba(18,11,3,.55) 72%, rgba(18,11,3,0) 100%);
}
.paseo__titulo{
  font-family:var(--display); font-weight:400;
  font-size:clamp(30px,3.8vw,48px); line-height:1.12; margin:14px 0 14px;
}
.paseo__titulo em{ font-style:italic; }
.paseo__cara p{ margin:0 0 26px; font-size:17px; color:rgba(253,247,239,.88); max-width:42ch; }
.paseo__cara .btn{ align-self:flex-start; }

/* =====================================================================
   Recorrido navegable
   ===================================================================== */
.paseo__botones{ display:flex; gap:10px; flex-wrap:wrap; }

.explora{
  position:fixed; inset:0; z-index:210; background:#0E0904;
  overflow:hidden; animation:fundido .4s ease both;
  touch-action:none;
}
.explora.es-mirando{ cursor:grabbing; }

.explora__escena{
  position:absolute; inset:0;
  opacity:0; transform:scale(1.14);
  transition:opacity .75s ease, transform .75s ease;
  will-change:transform, opacity;
}
.explora__escena.es-visible{ opacity:1; }
/* la escena que ya salió no debe robarse los toques de la nueva */
.explora__escena:not(.es-visible){ pointer-events:none; }
.explora__escena:not(.es-visible) .explora__pasos{ display:none; }
.explora__escena.es-entrando{ transform:scale(1.30); opacity:0; }
/* al cruzar una puerta, la escena que dejamos se nos viene encima */
.explora__escena.es-avanzando{
  transition:opacity .7s ease, transform .75s cubic-bezier(.4,0,.5,1);
  transform:scale(2.3); opacity:0;
}
.explora__escena img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  user-select:none; -webkit-user-drag:none;
}
.explora__pasos{ position:absolute; inset:0; }

/* ---------- puertas ---------- */
.puerta{
  position:absolute; transform:translate(-50%,-50%);
  width:56px; height:56px; border-radius:999px;
  background:rgba(253,248,241,.16);
  border:1px solid rgba(253,248,241,.55);
  backdrop-filter:blur(3px);
  cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center;
  transition:background .25s ease, transform .25s ease;
}
.puerta:hover, .puerta:focus-visible{
  background:rgba(253,248,241,.34); transform:translate(-50%,-50%) scale(1.1);
}
.puerta__flecha{
  color:#fff; font-size:19px; line-height:1;
  text-shadow:0 1px 6px rgba(0,0,0,.5);
}
.puerta__anillo{
  position:absolute; inset:-6px; border-radius:999px;
  border:1px solid rgba(253,248,241,.5);
  animation:latido-puerta 2.6s ease-out infinite;
}
@keyframes latido-puerta{
  0%{ transform:scale(.86); opacity:.85; }
  70%{ transform:scale(1.35); opacity:0; }
  100%{ opacity:0; }
}
.puerta__etiqueta{
  position:absolute; top:64px; left:50%; transform:translateX(-50%);
  white-space:nowrap;
  font-family:var(--util); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; background:rgba(16,10,3,.62);
  padding:6px 12px; border-radius:999px;
  opacity:0; transition:opacity .25s ease; pointer-events:none;
  backdrop-filter:blur(6px);
}
.puerta:hover .puerta__etiqueta, .puerta:focus-visible .puerta__etiqueta{ opacity:1; }
.puerta.zona-alta{ border-color:rgba(255,214,140,.7); }
.puerta.zona-exterior{ border-color:rgba(170,225,220,.75); }

.explora__cargando{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  pointer-events:none; z-index:4;
}
.explora__cargando span{
  width:34px; height:34px; border-radius:999px;
  border:2px solid rgba(253,248,241,.25);
  border-top-color:rgba(253,248,241,.9);
  animation:girando .8s linear infinite;
}
@keyframes girando{ to{ transform:rotate(360deg); } }

.explora__velo{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(14,9,4,.55) 0%, rgba(14,9,4,0) 26%),
    linear-gradient(to top, rgba(14,9,4,.55) 0%, rgba(14,9,4,0) 30%);
}

.explora__letrero{
  position:absolute; top:clamp(22px,4vh,40px); left:clamp(22px,4vw,54px);
  color:#FDF8F1; max-width:60vw; pointer-events:none;
}
.explora__zona{
  font-family:var(--util); font-size:10.5px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  color:rgba(253,248,241,.6); margin:0 0 6px;
}
.explora__nombre{
  font-family:var(--display); font-weight:400;
  font-size:clamp(26px,3.4vw,42px); line-height:1.1; margin:0;
  text-shadow:0 2px 20px rgba(0,0,0,.35);
}
.explora__pista{
  font-family:var(--util); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(253,248,241,.45); margin:12px 0 0;
}

.explora__mandos{
  position:absolute; top:clamp(20px,3.4vh,32px); right:clamp(20px,3vw,32px);
  display:flex; gap:10px;
}
.mando--ancho{
  width:auto; height:44px; padding:0 20px; border-radius:999px;
  font-family:var(--util); font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
}

/* ---------- plano ---------- */
.explora__plano-caja{
  position:absolute; right:clamp(18px,2.4vw,28px); bottom:clamp(18px,2.6vh,28px);
  width:clamp(168px,17vw,220px);
  opacity:.78;
  background:rgba(16,10,3,.6); backdrop-filter:blur(10px);
  border:1px solid rgba(253,248,241,.16); border-radius:var(--r-chica);
  padding:12px 12px 8px;
  transition:opacity .3s ease, transform .3s ease;
}
.explora__plano-caja:hover{ opacity:1; }
.explora__plano-caja.es-oculto{
  opacity:0; transform:translateY(14px); pointer-events:none;
}
#exploraPlano{ width:100%; height:auto; display:block; }
.plano__via{ stroke:rgba(253,248,241,.22); stroke-width:.5; }
.plano__punto{
  fill:var(--marron-claro); cursor:pointer;
  transition:r .2s ease, fill .2s ease;
}
.plano__punto.zona-baja{ fill:#E9B44C; }
.plano__punto.zona-alta{ fill:#C98A3E; }
.plano__punto.zona-exterior{ fill:#6FC3BC; }
.plano__punto:hover{ r:3.6; }
.plano__punto.es-aqui{
  fill:#FFFFFF; r:4;
  filter:drop-shadow(0 0 6px rgba(255,255,255,.9));
}
.explora__leyenda{
  display:flex; align-items:center; gap:5px; flex-wrap:wrap;
  margin:8px 0 0;
  font-family:var(--util); font-size:8px; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(253,248,241,.6);
}
.explora__leyenda i{ font-style:normal; margin-right:6px; }
.pinta{ width:7px; height:7px; border-radius:999px; display:inline-block; }
.pinta.zona-baja{ background:#E9B44C; }
.pinta.zona-alta{ background:#C98A3E; }
.pinta.zona-exterior{ background:#6FC3BC; }

@media (max-width:760px){
  .explora__letrero{ max-width:78vw; }
  .explora__pista{ display:none; }
  .explora__mandos{ top:auto; bottom:18px; left:18px; right:auto; }
  .explora__plano-caja{ width:150px; bottom:74px; }
  .puerta{ width:48px; height:48px; }
  .puerta__etiqueta{ font-size:10px; top:56px; }
}
@media (prefers-reduced-motion:reduce){
  .puerta__anillo{ animation:none; }
  .explora__escena{ transition:opacity .3s ease; }
}



/* ---------- La opción de Vrbo, con vida ---------- */
.opcion--vrbo{
  position:relative; overflow:hidden;
  border-color:#D9E3F5;
  background:linear-gradient(180deg, #FFFFFF 0%, #F7FAFF 100%);
  transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.opcion--vrbo:hover{
  border-color:#2E6BD6;
  transform:translateY(-3px);
  box-shadow:0 14px 34px rgba(46,107,214,.18);
}
.opcion--vrbo .opcion__marca{
  transition:transform .35s cubic-bezier(.2,.7,.3,1);
  transform-origin:left center;
}
.opcion--vrbo:hover .opcion__marca{ transform:scale(1.07); }
.opcion--vrbo .opcion__rotulo{ transition:color .3s ease; }
.opcion--vrbo:hover .opcion__rotulo{ color:#2E6BD6; }

.opcion--vrbo .opcion__flecha{ color:#2E6BD6; }
.opcion--vrbo:hover .opcion__flecha{ animation:flecha-va 1.1s ease-in-out infinite; }
@keyframes flecha-va{
  0%,100%{ transform:translateX(0); }
  50%{ transform:translateX(5px); }
}

/* renglón que aparece al acercarse */
.opcion__extra{
  grid-column:1 / -1;
  font-family:var(--util); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:#5B7CA8;
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .35s ease, opacity .35s ease, margin-top .35s ease;
}
.opcion--vrbo:hover .opcion__extra,
.opcion--vrbo:focus-visible .opcion__extra{
  max-height:60px; opacity:1; margin-top:8px;
}

/* destello que cruza la tarjeta */
.opcion__brillo{
  position:absolute; top:0; bottom:0; left:-60%; width:45%;
  background:linear-gradient(100deg, rgba(255,255,255,0) 0%,
             rgba(46,107,214,.10) 45%, rgba(255,255,255,0) 100%);
  transform:skewX(-14deg); pointer-events:none;
}
.opcion--vrbo:hover .opcion__brillo{ animation:brillo-cruza 1.1s ease-out; }
@keyframes brillo-cruza{ to{ left:120%; } }

/* mientras abre la pestaña nueva */
.opcion--vrbo.es-abriendo{
  border-color:#2E6BD6; background:#EEF4FF;
}
.opcion--vrbo.es-abriendo .opcion__flecha{
  animation:none;
  border-radius:999px; width:16px; height:16px;
  border:2px solid rgba(46,107,214,.3); border-top-color:#2E6BD6;
  font-size:0; animation:girando .7s linear infinite;
}

@media (prefers-reduced-motion:reduce){
  .opcion--vrbo:hover .opcion__flecha,
  .opcion--vrbo:hover .opcion__brillo{ animation:none; }
  .opcion__extra{ max-height:60px; opacity:1; margin-top:8px; }
}



/* ---------- Planes de pago ---------- */
.planes{ margin-top:18px; display:grid; gap:8px; }
.planes__titulo{
  font-family:var(--util); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:#9A8B79; margin:0 0 4px;
}
.plan{
  text-align:left; background:#fff; border:1px solid var(--linea);
  border-radius:var(--r-chica); padding:13px 16px; cursor:pointer;
  display:grid; grid-template-columns:1fr auto; gap:2px 12px;
  transition:border-color .25s ease, background .25s ease;
}
.plan b{
  grid-column:1; font-family:var(--cuerpo); font-weight:400;
  font-size:17px; color:var(--tinta);
}
.plan span{ grid-column:1; font-size:14.5px; color:var(--texto); line-height:1.35; }
.plan__detalle{
  grid-column:2 !important; grid-row:1 / span 2; align-self:center;
  font-family:var(--util); font-size:12px !important; letter-spacing:.04em;
  color:var(--marron) !important; white-space:nowrap;
}
.plan:hover{ border-color:var(--marron-claro); }
.plan.es-activo{ border-color:var(--tinta); background:#FFFDFA; }

.planes__resumen{
  display:flex; flex-wrap:wrap; gap:18px;
  margin-top:12px; padding-top:12px; border-top:1px solid var(--linea);
}
.dato-pago span{
  display:block; font-family:var(--util); font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; color:#9A8B79; margin-bottom:2px;
}
.dato-pago b{ font-family:var(--cuerpo); font-weight:400; font-size:19px; color:var(--tinta); }


/* ---------- Cancelación ---------- */
.cancela{ margin-top:26px; }
.cancela h3{
  font-family:var(--util); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:#9A8B79; margin:0 0 10px;
}
.cancela__lista{ list-style:none; margin:0; padding:0; max-width:460px; }
.cancela__lista li{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:9px 0; border-bottom:1px solid var(--linea); font-size:15.5px;
}
.cancela__lista b{ font-family:var(--util); font-size:12px; letter-spacing:.06em;
  color:var(--tinta); white-space:nowrap; }
.cancela__nota{
  font-family:var(--util); font-size:11.5px; line-height:1.6;
  color:#8A7C6C; margin:12px 0 0; max-width:52ch;
}



/* ---------- Una sola reseña: compacta y se abre al tocarla ---------- */
.resenas__pista.es-sola{
  display:block; overflow:visible; scroll-snap-type:none; padding-bottom:0;
}
.resena--sola{
  max-width:840px;
  display:grid; grid-template-columns:210px 1fr;
  gap:clamp(16px,2.2vw,26px);
  padding:clamp(18px,2.2vw,24px);
  align-items:start;
  cursor:default;
}
.resena__galeria{ display:grid; gap:8px; }
.resena__galeria .resena__foto img{ height:clamp(96px,11vw,120px); }

.resena--sola .resena__cuerpo{ display:flex; flex-direction:column; gap:10px; }
.resena--sola .resena__texto{ font-size:16.5px; line-height:1.55; margin:0; }

/* recogida: se ve el primer párrafo y se desvanece */
.resena__texto-caja{
  position:relative; overflow:hidden;
  max-height:118px;
  transition:max-height .55s cubic-bezier(.2,.7,.3,1);
  display:flex; flex-direction:column; gap:10px;
  cursor:pointer;
}
.resena__texto-caja::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:52px;
  background:linear-gradient(to bottom, rgba(245,240,232,0), var(--arena));
  transition:opacity .35s ease;
}
.resena--sola.es-abierta .resena__texto-caja{ max-height:1400px; cursor:default; }
.resena--sola.es-abierta .resena__texto-caja::after{ opacity:0; }

.resena__mas{
  align-self:flex-start;
  background:transparent; border:1px solid var(--linea); border-radius:999px;
  font-family:var(--util); font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--tinta);
  padding:9px 18px; cursor:pointer;
  transition:border-color .25s ease, background .25s ease;
}
.resena__mas:hover{ border-color:var(--tinta); background:#fff; }

@media (max-width:760px){
  .resena--sola{ grid-template-columns:1fr; }
  .resena__galeria{ grid-template-columns:1fr 1fr; }
  .resena__galeria .resena__foto img{ height:110px; }
  .resena__texto-caja{ max-height:132px; }
}



/* ---------- Encabezado con logotipo de marca ---------- */
.eyebrow--marca{ margin-bottom:6px; }
.eyebrow--marca img{ height:22px; width:auto; display:block; }

/* ---------- Carrusel de espacios ---------- */
.carrusel{ margin-top:4px; }
.carrusel__marco{
  position:relative; border-radius:var(--r-media); overflow:hidden;
  background:var(--arena);
}
.carrusel__marco img{
  width:100%; height:clamp(280px,46vw,560px); object-fit:cover;
  cursor:zoom-in; display:block;
}
.carrusel__flecha{
  position:absolute; top:50%; transform:translateY(-50%);
  width:52px; height:52px; border-radius:999px;
  background:rgba(255,255,255,.86); border:0; color:var(--tinta);
  font-size:26px; line-height:1; cursor:pointer;
  box-shadow:0 6px 22px rgba(35,22,6,.16);
  transition:background .25s ease, transform .25s ease;
}
.carrusel__flecha:hover{ background:#fff; transform:translateY(-50%) scale(1.06); }
.carrusel__flecha--izq{ left:16px; }
.carrusel__flecha--der{ right:16px; }

.carrusel__cara{
  position:absolute; left:0; right:0; bottom:0; padding:26px 24px 22px;
  background:linear-gradient(to top, rgba(22,17,12,.8), rgba(22,17,12,0));
  color:#fff; pointer-events:none;
}
.carrusel__cara b{
  font-family:var(--display); font-weight:400; font-size:clamp(22px,2.6vw,30px);
  display:block; line-height:1.2;
}
.carrusel__cara span{
  font-family:var(--util); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; opacity:.85;
}
.carrusel__cuenta{
  position:absolute; top:16px; right:16px;
  background:rgba(22,17,12,.6); color:#fff;
  font-family:var(--util); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  padding:6px 13px; border-radius:999px; backdrop-filter:blur(6px);
}

.carrusel__tira{
  display:flex; gap:8px; margin-top:10px;
  overflow-x:auto; padding-bottom:6px; scrollbar-width:thin;
}
.mini{
  flex:0 0 auto; padding:0; border:0; background:none; cursor:pointer;
  border-radius:10px; overflow:hidden; opacity:.55;
  transition:opacity .25s ease, outline-color .25s ease;
  outline:2px solid transparent; outline-offset:-2px;
}
.mini img{ width:92px; height:62px; object-fit:cover; display:block; }
.mini:hover{ opacity:.85; }
.mini.es-activa{ opacity:1; outline-color:var(--tinta); }

@media (max-width:600px){
  .carrusel__flecha{ width:42px; height:42px; font-size:22px; }
  .carrusel__flecha--izq{ left:10px; }
  .carrusel__flecha--der{ right:10px; }
  .mini img{ width:74px; height:52px; }
}

/* ---------- Opciones que aún no abren ---------- */
.opcion--marca{ align-items:center; }
.opcion--pronto{
  background:#FBF8F3; border-style:dashed; cursor:default;
  opacity:.85;
}
.opcion--pronto:hover{ transform:none; border-color:var(--linea); }
.opcion__pronto{
  grid-column:2 !important; grid-row:1 !important; align-self:center;
  font-family:var(--util); font-size:10px !important; letter-spacing:.16em;
  text-transform:uppercase; color:#9A8B79 !important;
  border:1px solid var(--linea); border-radius:999px; padding:5px 12px;
  white-space:nowrap;
}

/* ---------- Cupón ---------- */
.cupon{ margin-top:16px; }
.cupon label{
  display:block; font-family:var(--util); font-size:10.5px;
  letter-spacing:.16em; text-transform:uppercase; color:#9A8B79; margin-bottom:8px;
}
.cupon__fila{ display:flex; gap:8px; }
.cupon__fila input{
  flex:1; min-width:0;
  font-family:var(--util); font-size:14px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tinta); background:#fff;
  border:1px solid var(--linea); border-radius:var(--r-chica);
  padding:12px 14px;
}
.cupon__fila input:focus{ outline:none; border-color:var(--marron); }
.cupon__fila input:disabled{ background:#F3F7F1; border-color:#DCE7D8; color:#3E6042; }
.cupon__fila .btn{ padding:12px 20px; min-width:auto; white-space:nowrap; }
.cupon__aviso{
  margin:8px 0 0; min-height:18px;
  font-family:var(--util); font-size:12px; color:var(--marron);
}

/* ---------- Marcas de tarjeta ---------- */
.tarjetas{
  grid-column:1 / -1; display:flex; align-items:center; gap:12px;
  margin-top:10px; opacity:.9;
}
.tarjetas svg{ height:20px; width:auto; display:block; }
.opcion--fuerte .tarjetas{ color:rgba(253,248,241,.85); }
.opcion .tarjetas{ color:var(--marron-claro); }

/* ---------- Visor ---------- */
.visor{
  position:fixed; inset:0; z-index:150;
  background:rgba(16,10,3,.95);
  display:flex; align-items:center; justify-content:center; padding:24px;
  animation:fundido .3s ease both;
}
@keyframes fundido{ from{ opacity:0; } to{ opacity:1; } }
.visor__marco{ max-width:min(1200px,92vw); text-align:center; }
.visor__marco img{
  max-width:100%; max-height:78vh; border-radius:var(--r-media);
  object-fit:contain; margin:0 auto;
}
.visor__marco figcaption{
  font-family:var(--util); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(253,248,241,.72); margin-top:16px;
}
.visor__cerrar{
  position:absolute; top:20px; right:22px;
  width:44px; height:44px;
  background:rgba(255,255,255,.1); color:#fff;
  border:1px solid rgba(255,255,255,.25); border-radius:50%;
  font-size:16px; cursor:pointer;
}
.visor__nav{
  background:rgba(255,255,255,.08); color:#fff;
  border:1px solid rgba(255,255,255,.22); border-radius:50%;
  width:52px; height:52px; font-size:26px; line-height:1; cursor:pointer;
  flex:0 0 auto; margin:0 clamp(6px,2vw,26px);
  transition:background .25s ease;
}
.visor__nav:hover, .visor__cerrar:hover{ background:rgba(255,255,255,.2); }

/* ---------- Aparición al hacer scroll ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1); }
.reveal.es-visible{ opacity:1; transform:none; }

/* =====================================================================
   Pantallas chicas
   ===================================================================== */
@media (max-width:1080px){
  .nav__links{ gap:20px; }
  .nav__links a{ font-size:15px; }
}

@media (max-width:1000px){
  .cuarto{ grid-template-columns:1fr; }
  .reserva{ grid-template-columns:1fr; }
  .ubicacion{ grid-template-columns:1fr; }
  .contacto__panel{ grid-template-columns:1fr; }
  .grupos{ grid-template-columns:1fr; }
}

@media (max-width:900px){
  body{ font-size:17px; }

  .nav__inner{ padding:10px 20px; }
  .nav__logo img{ height:24px; }
  .nav__cta{ display:none; }
  .btn{ min-width:0; }
  .nav__burger{ display:flex; }
  .nav__links{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:flex-start; gap:0;
    background:#fff; border-bottom:1px solid var(--linea);
    padding:0 20px; max-height:0; overflow:hidden;
    transition:max-height .38s ease, padding .38s ease;
  }
  .nav__links.es-abierto{ max-height:460px; padding:10px 20px 22px; }
  .nav__links a{ padding:13px 0; width:100%; }
  .nav__cta-movil{ display:inline-flex; margin-top:10px; }

  .hero{ padding-bottom:0; }
  .hero__panel{ padding:34px 26px; min-height:0; }
  .hero__foto{ position:static; width:100%; margin-top:16px; }
  .hero__foto img{ height:clamp(260px,58vw,380px); }

  .declara{ grid-template-columns:1fr; }
  .declara__lado--der{ display:none; }
  .declara__lado--izq{ margin:0 0 26px; }
  .declara__lado--izq img{ height:clamp(220px,50vw,300px); }

  .mosaico{ grid-template-columns:repeat(2,1fr); }
  .area, .area--grande{ grid-column:span 1; }
  .area img{ height:clamp(150px,34vw,220px); }

  .incluido__cara{
    max-width:100%;
    background:linear-gradient(to top, rgba(18,11,3,.9) 42%, rgba(18,11,3,.35) 100%);
  }

  .bano__foto img{ height:clamp(180px,40vw,260px); }

  .visor__nav{ width:44px; height:44px; font-size:22px; }
}

@media (max-width:520px){
  :root{ --r-grande:26px; --r-media:20px; }
  .campo--doble{ grid-template-columns:1fr; }
  .tarifas{ gap:20px; }
  .condiciones li{ gap:12px; }
  .pie__links{ gap:16px; }
}

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