/* ============================================================
   HOTEL LICÁN RAY — Sistema visual
   Patagonia chilena · minimalismo escandinavo-japonés · lujo discreto
   ============================================================ */

:root{
  /* Color — bosque nativo, lago Calafquén al atardecer, piedra volcánica */
  --ink:        #1c231b;   /* texto principal */
  --ink-soft:   #3c463b;
  --forest:     #2c382e;   /* secciones oscuras */
  --forest-deep:#171f19;
  --pine:       #3c5040;
  --sage:       #8c9a86;
  --lake:       #5e7d79;   /* teal lago */
  --lake-deep:  #38514f;
  --bone:       #f1ece1;   /* papel cálido (fondo claro) */
  --paper:      #f8f4ea;
  --sand:       #d2c0a3;
  --clay:       #b59873;
  --brass:      #9c7a47;   /* acento lujo discreto */
  --brass-soft: #b89764;
  --fog:        #dcd8cc;
  --line:       rgba(32,38,31,.2);
  --line-light: rgba(241,236,225,.18);

  --maxw: 1320px;
  --gut: clamp(20px, 5vw, 88px);

  --serif: "Cormorant Garamond", Georgia, serif;
  --sans:  "Jost", system-ui, -apple-system, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --shadow-soft: 0 24px 60px -28px rgba(23,31,25,.45);
  --shadow-card: 0 30px 70px -40px rgba(23,31,25,.55);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:hidden; width:100%; }
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bone);
  line-height:1.6;
  font-size:17px;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
::selection{ background:var(--brass); color:var(--paper); }

/* Grano de película sutil sobre todo el sitio */
body::after{
  content:""; position:fixed; inset:0; z-index:9000; pointer-events:none;
  opacity:.02; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- Tipografía ---------- */
h1,h2,h3,h4{ font-family:var(--serif); font-weight:500; line-height:1.04; letter-spacing:-.01em; }
.eyebrow{
  font-family:var(--sans); font-size:12px; font-weight:500;
  letter-spacing:.34em; text-transform:uppercase; color:var(--brass);
  display:inline-flex; align-items:center; gap:.85em;
}
.eyebrow::before{ content:""; width:30px; height:1px; background:var(--brass); opacity:.7; }
.eyebrow.center::after{ content:""; width:30px; height:1px; background:var(--brass); opacity:.7; }
.display{ font-size:clamp(2.6rem,7vw,6rem); font-weight:300; }
.serif-lg{ font-size:clamp(2rem,4.4vw,3.6rem); font-weight:400; }
.lead{ font-size:clamp(1.05rem,1.6vw,1.3rem); color:var(--ink-soft); font-weight:400; line-height:1.7; }
.muted{ color:var(--ink-soft); }

/* ---------- Layout helpers ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut); }
section{ position:relative; }
.section-pad{ padding-block:clamp(54px,7vw,104px); }
.dark{ background:var(--forest-deep); color:var(--paper); }
.dark .muted,.dark .lead{ color:rgba(241,236,225,.82); }
.dark .eyebrow{ color:var(--brass-soft); }
.dark .eyebrow::before,.dark .eyebrow.center::after{ background:var(--brass-soft); }

/* Reveal on scroll (emula Framer Motion) — visible por defecto (graceful) */
.reveal{ opacity:1; transform:none; }
.reveal.pre{ opacity:0; transform:translateY(30px); }
.reveal.in{ opacity:1; transform:none;
  transition:opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out); }
.reveal.d1.in{ transition-delay:.08s; } .reveal.d2.in{ transition-delay:.16s; }
.reveal.d3.in{ transition-delay:.24s; } .reveal.d4.in{ transition-delay:.32s; }
@media (prefers-reduced-motion:reduce){ .reveal,.reveal.pre{ opacity:1; transform:none; transition:none; } }

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.7em; justify-content:center;
  font-family:var(--sans); font-size:13px; letter-spacing:.18em; text-transform:uppercase;
  padding:1.05em 2em; border-radius:2px; transition:.45s var(--ease); position:relative;
  font-weight:500;
}
.btn-primary{ background:var(--brass); color:var(--paper); }
.btn-primary:hover{ background:var(--ink); transform:translateY(-2px); }
.btn-ghost{ border:1px solid var(--line); color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--bone); border-color:var(--ink); }
.dark .btn-ghost{ border-color:var(--line-light); color:var(--paper); }
.dark .btn-ghost:hover{ background:var(--paper); color:var(--ink); }
.btn-line{ font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink);
  padding-bottom:.4em; border-bottom:1px solid var(--brass); transition:.4s; }
.btn-line:hover{ color:var(--brass); letter-spacing:.26em; }

/* ============================================================
   TOP BAR + NAV
   ============================================================ */
.topbar{
  background:var(--forest-deep); color:rgba(241,236,225,.82);
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; text-align:center;
  padding:9px 16px; position:fixed; top:0; left:0; right:0; z-index:130; height:36px;
  display:flex; align-items:center; justify-content:center; transition:transform .45s var(--ease);
}
.topbar.hide{ transform:translateY(-100%); }
.topbar b{ color:var(--brass-soft); font-weight:500; }

.nav{
  position:fixed; top:36px; left:0; right:0; z-index:110;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px var(--gut); transition:top .45s var(--ease), background .5s var(--ease), padding .5s var(--ease), color .5s var(--ease);
  color:var(--paper);
}
.nav.solid{ top:0; background:rgba(241,236,225,.97); backdrop-filter:blur(14px); color:var(--ink);
  box-shadow:0 1px 0 var(--line); padding-block:12px; }
.nav.solid .wordmark .sub{ color:var(--ink-soft); }
.brand{ display:flex; align-items:center; gap:14px; }
.brand .mark{ width:34px; height:34px; flex:none; }
.wordmark{ line-height:1; }
.wordmark .name{ font-family:var(--serif); font-size:21px; letter-spacing:.04em; font-weight:500; }
.wordmark .sub{ font-family:var(--sans); font-size:8.5px; letter-spacing:.42em; text-transform:uppercase;
  color:rgba(241,236,225,.7); margin-top:3px; }
.nav-links{ display:flex; align-items:center; gap:24px; list-style:none; }
.nav-links a{ font-size:12.5px; letter-spacing:.13em; text-transform:uppercase; position:relative; opacity:.9; }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:-6px; width:0; height:1px; background:currentColor; transition:.4s var(--ease); }
.nav-links a:hover{ opacity:1; } .nav-links a:hover::after{ width:100%; }
.nav-right{ display:flex; align-items:center; gap:18px; }
.lang{ display:flex; align-items:center; gap:2px; font-size:12px; letter-spacing:.1em; }
.lang button{ padding:4px 7px; opacity:.55; transition:.3s; border-radius:2px; }
.lang button.on{ opacity:1; color:var(--brass); }
.nav .btn{ padding:.85em 1.5em; font-size:11.5px; }
.burger{ display:none; flex-direction:column; gap:5px; padding:8px; }
.burger span{ width:24px; height:1.5px; background:currentColor; transition:.4s; }

/* Mobile menu */
.mobile-menu{
  position:fixed; inset:0; z-index:115; background:var(--forest-deep); color:var(--paper);
  display:flex; flex-direction:column; justify-content:center; gap:8px; padding:var(--gut);
  transform:translateY(-100%); transition:.6s var(--ease); }
.mobile-menu.open{ transform:none; }
.mobile-menu a{ font-family:var(--serif); font-size:2rem; font-weight:300; padding:6px 0;
  border-bottom:1px solid var(--line-light); }
.mobile-menu .close{ position:absolute; top:24px; right:var(--gut); font-size:30px; font-family:var(--serif); }

/* ============================================================
   HERO CINEMATOGRÁFICO
   ============================================================ */
.hero{ position:relative; min-height:100svh; display:flex; flex-direction:column;
  justify-content:flex-end; overflow:hidden; color:var(--paper); }
.hero-scene{ position:absolute; inset:0; z-index:0; background:#2a2018 center/cover no-repeat; }
.hero-scene svg{ display:none; }
.hero-scene .layer{ position:absolute; inset:0; }
.hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1;
  animation:kburn 26s var(--ease) infinite alternate; }
.hero-tag{ display:block; font-family:var(--serif); font-style:italic; color:var(--sand);
  font-size:clamp(1.15rem,2.3vw,1.9rem); letter-spacing:.05em; margin-top:14px;
  text-shadow:0 2px 20px rgba(12,18,14,.5); }
.hero-vignette{ position:absolute; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(120% 80% at 50% 10%, transparent 30%, rgba(12,18,14,.5) 100%),
             linear-gradient(70deg, rgba(12,18,14,.78) 0%, rgba(12,18,14,.36) 46%, transparent 72%),
             linear-gradient(180deg, rgba(12,18,14,.42) 0%, transparent 30%, transparent 42%, rgba(12,18,14,.82) 100%); }
.hero-inner{ position:relative; z-index:3; width:100%; max-width:var(--maxw); margin:0 auto;
  padding:0 var(--gut) clamp(28px,5vw,60px); }
.hero h1{ font-weight:300; font-size:clamp(3rem,9.2vw,8.2rem); line-height:.94; letter-spacing:-.015em;
  text-shadow:0 2px 40px rgba(12,18,14,.35); }
.hero h1 em{ font-style:italic; color:var(--sand); }
.hero .kicker{ color:rgba(241,236,225,.92); }
.hero-sub{ max-width:430px; font-weight:400; font-size:clamp(1rem,1.5vw,1.2rem);
  color:#f6f1e6; margin-top:22px; line-height:1.65;
  text-shadow:0 1px 2px rgba(12,18,14,.6), 0 2px 22px rgba(12,18,14,.7); }
.scroll-cue{ position:absolute; left:50%; bottom:18px; transform:translateX(-50%); z-index:4;
  display:flex; flex-direction:column; align-items:center; gap:8px; font-size:10px;
  letter-spacing:.28em; text-transform:uppercase; color:rgba(241,236,225,.7); }
.scroll-cue .ln{ width:1px; height:46px; background:linear-gradient(var(--sand),transparent);
  animation:cue 2.4s var(--ease) infinite; }
@keyframes cue{ 0%{ transform:scaleY(0); transform-origin:top; } 45%{ transform:scaleY(1);transform-origin:top;}
  55%{transform:scaleY(1);transform-origin:bottom;} 100%{transform:scaleY(0);transform-origin:bottom;} }

/* clouds/fog drift */
@keyframes drift{ from{ transform:translateX(0);} to{ transform:translateX(-3%);} }
@keyframes kburn{ from{ transform:scale(1.04);} to{ transform:scale(1.12);} }

/* ---------- Barra de reservas (hero) ---------- */
.bookbar{
  position:relative; z-index:5; max-width:var(--maxw); margin:0 auto;
  width:100%; padding:0 var(--gut);
  transform:translateY(50%);
}
.bookbar-inner{
  background:#fbf8f0;
  border:1.5px solid var(--forest-deep); box-shadow:0 46px 90px -28px rgba(12,18,14,.7);
  display:grid; grid-template-columns:1.1fr 1.1fr 1fr 1.3fr auto; gap:0;
  border-radius:5px; overflow:hidden; color:var(--ink); position:relative;
}
.bookbar-inner::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; background:var(--brass); z-index:2; }
.bf{ padding:16px 22px 14px; border-right:1px solid rgba(32,38,31,.22); position:relative; transition:background .3s; }
.bf:hover{ background:rgba(156,122,71,.09); }
.bf:last-child{ border-right:none; }
.bf label{ display:flex; align-items:center; gap:6px; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--brass); margin-bottom:6px; font-weight:600; }
.bf label::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--brass); }
.bf .val{ font-family:var(--serif); font-size:1.4rem; color:var(--ink); font-weight:600; }
.bf input,.bf select{ font-family:var(--serif); font-size:1.35rem; color:var(--ink); border:none;
  background:none; width:100%; outline:none; cursor:pointer; font-weight:600; }
.bf .stepper{ display:flex; align-items:center; gap:12px; }
.bf .stepper button{ width:28px; height:28px; border:1px solid rgba(32,38,31,.2); border-radius:50%;
  font-size:16px; color:var(--ink-soft); display:grid; place-items:center; transition:.3s; }
.bf .stepper button:hover{ background:var(--ink); color:var(--bone); border-color:var(--ink); }
.bookbar .go{ background:var(--brass); color:var(--paper); display:flex; align-items:center; justify-content:center; gap:.6em;
  padding-inline:34px; letter-spacing:.14em; text-transform:uppercase; font-size:12px; font-weight:500; transition:.4s; }
.bookbar .go:hover{ background:var(--ink); }

/* ============================================================
   INTRO / BIENVENIDA
   ============================================================ */
.intro{ padding-top:clamp(78px,9vw,124px); }
.intro-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,7vw,110px); align-items:center; }
.intro h2{ font-size:clamp(1.9rem,3.8vw,3.2rem); font-weight:400; }
.intro h2 em{ font-style:italic; color:var(--brass); }
.stat-row{ display:flex; gap:46px; margin-top:38px; flex-wrap:wrap; }
.stat .n{ font-family:var(--serif); font-size:2.8rem; line-height:1; color:var(--brass); }
.stat .l{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); margin-top:8px; }
.rule{ height:1px; background:var(--line); margin:0; border:none; }

/* trust strip */
.trust{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; justify-content:center;
  padding:26px var(--gut); border-block:1px solid var(--line); background:var(--paper); }
.trust .item{ display:flex; align-items:center; gap:10px; font-size:12.5px; letter-spacing:.06em; color:var(--ink-soft); }
.trust .stars{ color:var(--brass); letter-spacing:2px; }
.trust .sep{ width:5px; height:5px; border-radius:50%; background:var(--sand); }

/* ============================================================
   VIDEO PRINCIPAL
   ============================================================ */
.video-sec{ position:relative; }
.video-stage{ position:relative; aspect-ratio:21/9; min-height:420px; overflow:hidden; background:var(--forest-deep); }
.video-stage video,.video-stage .poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.video-stage .poster{ z-index:1; }
.video-stage video{ z-index:2; opacity:0; transition:opacity 1.2s var(--ease); }
.video-stage video.ready{ opacity:1; }
.video-grade{ position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(180deg, rgba(12,18,14,.34) 0%, transparent 28%, transparent 52%, rgba(12,18,14,.62) 100%); }
.video-sound{ position:absolute; top:22px; right:22px; z-index:4; width:46px; height:46px; border-radius:50%;
  border:1px solid rgba(241,236,225,.4); background:rgba(12,18,14,.32); backdrop-filter:blur(6px);
  display:grid; place-items:center; color:var(--paper); transition:.4s var(--ease); }
.video-sound:hover{ background:var(--brass); border-color:var(--brass); }
.video-sound svg{ width:20px; height:20px; }
.video-cap{ position:absolute; left:var(--gut); bottom:34px; z-index:4; color:var(--paper); max-width:520px;
  text-shadow:0 2px 24px rgba(12,18,14,.5); }
.video-cap h3{ font-size:clamp(1.6rem,3vw,2.6rem); font-weight:300; }

/* ============================================================
   HABITACIONES
   ============================================================ */
.rooms-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; margin-bottom:42px; }
.rooms-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,34px); }
.room-card{ background:var(--paper); border:1px solid var(--line); overflow:hidden; display:flex; flex-direction:column;
  transition:.6s var(--ease); }
.room-card:hover{ box-shadow:var(--shadow-card); transform:translateY(-4px); }
.room-photo{ position:relative; aspect-ratio:4/3.2; overflow:hidden; background:linear-gradient(135deg,var(--sage),var(--lake-deep)); }
.room-photo img{ width:100%; height:100%; object-fit:cover; transition:1.4s var(--ease); }
.room-card:hover .room-photo img{ transform:scale(1.07); }
.room-tag{ position:absolute; top:14px; left:14px; background:rgba(248,244,234,.92); color:var(--ink);
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; padding:6px 11px; border-radius:2px; }
.room-body{ padding:24px 24px 26px; display:flex; flex-direction:column; flex:1; }
.room-body h3{ font-size:1.7rem; font-weight:500; }
.room-meta{ display:flex; gap:16px; flex-wrap:wrap; font-size:12px; letter-spacing:.05em; color:var(--ink-soft);
  margin:12px 0 14px; }
.room-meta span{ display:flex; align-items:center; gap:6px; }
.room-desc{ font-size:14.5px; color:var(--ink-soft); font-weight:400; line-height:1.6; flex:1; }
.room-foot{ display:flex; align-items:flex-end; justify-content:space-between; margin-top:22px;
  padding-top:18px; border-top:1px solid var(--line); }
.room-price .from{ font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); }
.room-price .amt{ font-family:var(--serif); font-size:1.9rem; color:var(--ink); line-height:1; }
.room-price .amt small{ font-family:var(--sans); font-size:11px; letter-spacing:.08em; color:var(--ink-soft); }

/* ============================================================
   EXPERIENCIAS — editorial alterno
   ============================================================ */
.exp{ display:flex; flex-direction:column; gap:0; }
.exp-row{ display:grid; grid-template-columns:1fr 1fr; min-height:clamp(380px,52vw,620px); }
.exp-row.flip .exp-art{ order:2; }
.exp-art{ position:relative; overflow:hidden; }
.exp-art .scene{ position:absolute; inset:0; }
.exp-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.exp-art::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(120deg, rgba(23,31,25,.34), transparent 55%), linear-gradient(0deg, rgba(23,31,25,.32), transparent 45%); }
.tour-card .scene{ background-size:cover; background-position:center; }
.exp-copy{ display:flex; flex-direction:column; justify-content:center; padding:clamp(36px,6vw,96px); }
.exp-copy .num{ font-family:var(--serif); font-size:1rem; color:var(--brass); letter-spacing:.1em; }
.exp-copy h3{ font-size:clamp(1.9rem,3.6vw,3rem); font-weight:300; margin:16px 0 18px; }
.exp-copy h3 em{ font-style:italic; color:var(--brass); }

/* ============================================================
   TURISMO LOCAL
   ============================================================ */
.tour-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.tour-card{ position:relative; aspect-ratio:3/4; overflow:hidden; border-radius:2px; color:var(--paper);
  display:flex; flex-direction:column; justify-content:flex-end; padding:22px; }
.tour-card .scene{ position:absolute; inset:0; z-index:0; transition:1.6s var(--ease); }
.tour-card:hover .scene{ transform:scale(1.08); }
.tour-card .shade{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, transparent 30%, rgba(12,18,14,.78)); }
.tour-card .info{ position:relative; z-index:2; }
.tour-card .dist{ font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--sand); }
.tour-card h4{ font-size:1.5rem; font-weight:400; margin-top:5px; }
.tour-card p{ font-size:12.5px; color:rgba(241,236,225,.78); margin-top:6px; font-weight:300;
  max-height:0; overflow:hidden; opacity:0; transition:.6s var(--ease); }
.tour-card:hover p{ max-height:80px; opacity:1; }

/* Destino — lista de distancias */
.dist-list{ display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(40px,6vw,80px); }
.dist-row{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding:18px 2px; border-bottom:1px solid var(--line); }
.dist-row .pl .nm{ font-family:var(--serif); font-size:1.4rem; line-height:1.1; }
.dist-row .pl .ds{ font-size:12.5px; color:var(--ink-soft); margin-top:4px; }
.dist-row .km{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--brass); white-space:nowrap; padding:7px 13px; border:1px solid var(--line); border-radius:100px; flex:none; }

/* ============================================================
   GALERÍA
   ============================================================ */
.gal{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:200px; gap:12px; }
.gal-item{ overflow:hidden; position:relative; cursor:pointer; background:linear-gradient(135deg,var(--sage),var(--lake-deep)); }
.gal-item img{ width:100%; height:100%; object-fit:cover; transition:1.3s var(--ease); }
.gal-item:hover img{ transform:scale(1.08); }
.gal-item.tall{ grid-row:span 2; } .gal-item.wide{ grid-column:span 2; }
.gal-item image-slot{ width:100%; height:100%; }
.gal-plus{ position:absolute; inset:0; display:grid; place-items:center; background:rgba(23,31,25,.0); transition:.4s; z-index:2; }
.gal-item:hover .gal-plus{ background:rgba(23,31,25,.28); }
.gal-plus span{ width:46px; height:46px; border:1px solid rgba(241,236,225,.7); border-radius:50%;
  color:var(--paper); display:grid; place-items:center; opacity:0; transform:scale(.8); transition:.4s; font-size:22px; }
.gal-item:hover .gal-plus span{ opacity:1; transform:none; }

/* ============================================================
   NOSOTROS
   ============================================================ */
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,90px); align-items:center; }
.about-photo{ position:relative; aspect-ratio:4/5; overflow:hidden; }
.about-photo img{ width:100%; height:100%; object-fit:cover; }
.about-photo .badge{ position:absolute; bottom:-1px; right:-1px; background:var(--brass); color:var(--paper);
  padding:22px 26px; max-width:230px; }
.about-photo .badge .q{ font-family:var(--serif); font-size:1.25rem; font-style:italic; line-height:1.3; }
.values{ display:grid; grid-template-columns:1fr 1fr; gap:30px 40px; margin-top:42px; }
.value .ico{ width:30px; height:30px; color:var(--brass); margin-bottom:12px; }
.value h4{ font-size:1.25rem; font-weight:500; }
.value p{ font-size:14px; color:var(--ink-soft); font-weight:300; margin-top:6px; }
.dark .value h4{ color:var(--paper); }

/* ============================================================
   MOTOR DE RESERVAS
   ============================================================ */
.resv{ background:var(--forest-deep); color:var(--paper); }
.resv-card{ background:rgba(241,236,225,.07); border:1.5px solid rgba(184,151,100,.32); border-radius:6px;
  padding:clamp(26px,4vw,52px); backdrop-filter:blur(6px); box-shadow:0 30px 70px -36px rgba(0,0,0,.6); }
.resv-step{ display:none; } .resv-step.on{ display:block; animation:fade .6s var(--ease); }
@keyframes fade{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none;} }
.resv-form{ display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:18px; }
.field{ background:rgba(241,236,225,.1); border:1.5px solid rgba(184,151,100,.5); border-radius:4px; padding:13px 16px; transition:.3s; }
.field:focus-within{ border-color:var(--brass-soft); background:rgba(241,236,225,.16); }
.field label{ display:block; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--brass-soft); margin-bottom:7px; font-weight:600; }
.field input,.field select{ width:100%; background:none; border:none; outline:none; color:#fff;
  font-family:var(--serif); font-size:1.25rem; font-weight:600; }
.field select option{ color:var(--ink); }
.field input::-webkit-calendar-picker-indicator{ filter:invert(.85); cursor:pointer; }
.field .stepper{ display:flex; align-items:center; justify-content:space-between; }
.field .stepper button{ width:28px; height:28px; border:1px solid var(--line-light); border-radius:50%; color:var(--paper); transition:.3s; }
.field .stepper button:hover{ background:var(--brass); border-color:var(--brass); }
.field .stepper .v{ font-family:var(--serif); font-size:1.3rem; }
.resv-actions{ display:flex; justify-content:space-between; align-items:center; margin-top:26px; gap:16px; flex-wrap:wrap; }
.resv-note{ font-size:12.5px; color:rgba(241,236,225,.6); display:flex; align-items:center; gap:8px; }

/* resultados */
.avail-list{ display:flex; flex-direction:column; gap:14px; margin-top:8px; }
.avail-row{ display:grid; grid-template-columns:88px 1fr auto auto; gap:22px; align-items:center;
  background:rgba(241,236,225,.04); border:1px solid var(--line-light); border-radius:3px; padding:16px 20px;
  transition:.4s var(--ease); }
.avail-row.sel{ border-color:var(--brass); background:rgba(156,122,71,.14); }
.avail-row.out{ opacity:.45; }
.avail-thumb{ width:88px; height:64px; border-radius:2px; object-fit:cover;
  background:linear-gradient(135deg,var(--sage),var(--lake-deep)); }
.avail-info h4{ font-size:1.35rem; font-weight:500; }
.avail-info .cap{ font-size:11.5px; letter-spacing:.06em; color:rgba(241,236,225,.65); margin-top:3px; }
.avail-status{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; }
.avail-status.ok{ color:var(--sage); } .avail-status.low{ color:#d8a25a; } .avail-status.no{ color:#c87b6b; }
.avail-price{ text-align:right; }
.avail-price .amt{ font-family:var(--serif); font-size:1.5rem; }
.avail-price .per{ font-size:10.5px; color:rgba(241,236,225,.6); letter-spacing:.1em; }
.avail-row .pick{ grid-column:1/-1; }

/* resumen */
.summary{ display:grid; grid-template-columns:1.3fr 1fr; gap:36px; }
.summary .line{ display:flex; justify-content:space-between; padding:13px 0; border-bottom:1px solid var(--line-light); font-size:14.5px; }
.summary .line .lab{ color:rgba(241,236,225,.7); letter-spacing:.04em; }
.summary .total{ display:flex; justify-content:space-between; align-items:baseline; margin-top:18px; }
.summary .total .amt{ font-family:var(--serif); font-size:2.6rem; color:var(--brass-soft); }
.summary-side{ background:rgba(156,122,71,.1); border:1px solid rgba(156,122,71,.3); border-radius:3px; padding:24px; }
.summary-side h4{ font-family:var(--sans); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--brass-soft); }
.perk{ display:flex; gap:11px; align-items:flex-start; margin-top:16px; font-size:13.5px; color:rgba(241,236,225,.85); }
.perk svg{ width:17px; height:17px; color:var(--brass-soft); flex:none; margin-top:2px; }

/* confirmación */
.confirm-ico{ width:74px; height:74px; border-radius:50%; border:1px solid var(--brass-soft); display:grid; place-items:center; margin:0 auto 24px; color:var(--brass-soft); }

/* ============================================================
   CONTACTO + FOOTER
   ============================================================ */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--line); }
.contact-info{ padding:clamp(30px,4vw,56px); }
.contact-map{ position:relative; min-height:360px; background:var(--fog); }
.contact-map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; filter:grayscale(.3) contrast(1.02); }
.cinfo-row{ display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--line); }
.cinfo-row:last-child{ border:none; }
.cinfo-row .ico{ width:20px; height:20px; color:var(--brass); flex:none; margin-top:3px; }
.cinfo-row .k{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); }
.cinfo-row .v{ font-family:var(--serif); font-size:1.3rem; }

.news{ display:flex; gap:12px; margin-top:18px; flex-wrap:wrap; }
.news input{ flex:1; min-width:200px; background:none; border:1px solid var(--line); border-radius:2px; padding:14px 16px;
  font-family:var(--serif); font-size:1.05rem; outline:none; color:var(--ink); }
.dark .news input{ border-color:var(--line-light); color:var(--paper); }

footer{ background:var(--forest-deep); color:rgba(241,236,225,.7); padding-top:clamp(48px,6vw,76px); }
.cta-band{ background:linear-gradient(120deg,#243029,#1a231d); color:var(--paper); border-top:1px solid rgba(156,122,71,.25); }
.cta-inner{ display:flex; align-items:center; justify-content:space-between; gap:34px; flex-wrap:wrap; padding-block:clamp(40px,5vw,68px); }
.cta-inner h2{ font-weight:300; margin-top:10px; }
.cta-actions{ display:flex; gap:14px; flex-wrap:wrap; }
.foot-top{ display:grid; grid-template-columns:1.3fr 2fr; gap:clamp(30px,5vw,70px); padding-bottom:42px; }
.foot-brand .fb-mark{ display:flex; align-items:center; gap:13px; }
.foot-brand .fb-mark svg{ width:40px; height:40px; color:var(--brass-soft); flex:none; }
.foot-brand .fb-mark .name{ font-family:var(--serif); font-size:26px; letter-spacing:.03em; color:var(--paper); }
.foot-social{ display:flex; gap:11px; margin-top:22px; }
.foot-social a{ width:40px; height:40px; border:1px solid var(--line-light); border-radius:50%; display:grid; place-items:center; transition:.35s var(--ease); color:var(--paper); }
.foot-social a:hover{ background:var(--brass); border-color:var(--brass); transform:translateY(-2px); }
.foot-social svg{ width:18px; height:18px; }
.foot-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.foot-cols h5{ font-family:var(--sans); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--brass-soft); margin-bottom:16px; }
.foot-cols a{ display:block; font-size:14px; padding:6px 0; opacity:.78; transition:.3s; }
.foot-cols a:hover{ opacity:1; color:var(--brass-soft); padding-left:5px; }
.foot-badges{ display:flex; flex-wrap:wrap; gap:14px 34px; align-items:center; padding:22px 0; border-top:1px solid var(--line-light); }
.foot-badge{ display:flex; align-items:center; gap:9px; font-size:12px; letter-spacing:.05em; color:rgba(241,236,225,.82); }
.foot-badge svg{ width:16px; height:16px; color:var(--brass-soft); flex:none; }
.foot-badge .stars{ color:var(--brass-soft); letter-spacing:2px; }
.foot-bot{ border-top:1px solid var(--line-light); padding:26px 0; display:flex; justify-content:space-between;
  flex-wrap:wrap; gap:12px; font-size:12px; letter-spacing:.04em; opacity:.6; }

/* Floating WhatsApp */
.wa{ position:fixed; right:22px; bottom:22px; z-index:90; width:60px; height:60px; border-radius:50%;
  background:#1faa55; color:#fff; display:grid; place-items:center; box-shadow:0 16px 40px -12px rgba(31,170,85,.6);
  transition:.4s var(--ease); }
.wa:hover{ transform:scale(1.08) translateY(-2px); }
.wa svg{ width:30px; height:30px; }
.wa .pulse{ position:absolute; inset:0; border-radius:50%; border:2px solid #1faa55; animation:pulse 2.4s ease-out infinite; }
@keyframes pulse{ 0%{ transform:scale(1); opacity:.7;} 100%{ transform:scale(1.7); opacity:0;} }

/* Lightbox */
.lightbox{ position:fixed; inset:0; z-index:200; background:rgba(12,18,14,.92); display:none;
  align-items:center; justify-content:center; padding:5vw; backdrop-filter:blur(6px); }
.lightbox.open{ display:flex; animation:fade .4s; }
.lightbox img{ max-width:90vw; max-height:86vh; object-fit:contain; box-shadow:var(--shadow-card); }
.lightbox .x{ position:absolute; top:24px; right:30px; color:var(--paper); font-size:34px; font-family:var(--serif); }

/* ============================================================
   PORTADA DE LUJO — foto del hotel + sello
   ============================================================ */
.hero-grid{ display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(28px,4.5vw,68px); align-items:center; width:100%; }
.hero .hero-grid h1{ font-size:clamp(2.7rem,5.6vw,5.7rem); }
.hero-copy{ position:relative; z-index:2; }
.hero-photo{ position:relative; width:100%; max-height:58vh; aspect-ratio:4/5; overflow:hidden;
  border-radius:3px; box-shadow:0 50px 110px -40px rgba(0,0,0,.7), 0 0 0 1px rgba(241,236,225,.18);
  justify-self:end; background:linear-gradient(160deg,#3a4a4e,#26332f 58%,#19211c); }
.hero-photo img{ width:100%; height:100%; object-fit:cover; position:relative; z-index:1;
  animation:kburn 20s var(--ease) infinite alternate; color:transparent; font-size:0; }
.photo-fallback{ position:absolute; inset:0; z-index:0; }
.hero-photo .grade{ position:absolute; inset:0; z-index:2; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(156,122,71,.55);
  background:linear-gradient(180deg, rgba(20,28,22,.12) 0%, transparent 35%, rgba(20,28,22,.55) 100%); }
.hero-photo .cap{ position:absolute; left:0; bottom:0; z-index:3; padding:16px 20px; color:var(--paper);
  font-size:10px; letter-spacing:.24em; text-transform:uppercase; display:flex; align-items:center; gap:9px; }
.hero-photo .cap::before{ content:""; width:22px; height:1px; background:var(--brass-soft); }
.hero-seal{ position:absolute; top:-30px; left:-30px; z-index:4; width:104px; height:104px;
  animation:spin 44s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.hero-seal .seal-text{ font-family:var(--sans); font-size:8.7px; letter-spacing:.16em; fill:var(--paper); text-transform:uppercase; }
.hero-photo:hover .hero-seal{ animation-play-state:paused; }

/* ============================================================
   GASTRONOMÍA / PAQUETES / RESEÑAS / FAQ
   ============================================================ */
.gastro-grid{ display:grid; grid-template-columns:1.05fr .95fr; align-items:stretch; }
.gastro-photo{ position:relative; overflow:hidden; min-height:420px; }
.gastro-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.gastro-photo .scene{ position:absolute; inset:0; background:linear-gradient(135deg,#3a322a,#1c2420); }
.gastro-copy{ display:flex; flex-direction:column; justify-content:center; padding:clamp(36px,6vw,90px); }
.menu-list{ margin-top:26px; display:flex; flex-direction:column; gap:0; }
.menu-list .mi{ display:flex; justify-content:space-between; gap:18px; padding:14px 0; border-bottom:1px solid var(--line); }
.dark .menu-list .mi{ border-color:var(--line-light); }
.menu-list .mi .nm{ font-family:var(--serif); font-size:1.25rem; }
.menu-list .mi .ds{ font-size:12.5px; color:var(--ink-soft); }
.dark .menu-list .mi .ds{ color:rgba(241,236,225,.6); }

.pkg-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,30px); }
.pkg-card{ border:1px solid var(--line); background:var(--paper); display:flex; flex-direction:column; overflow:hidden;
  transition:.6s var(--ease); }
.pkg-card:hover{ box-shadow:var(--shadow-card); transform:translateY(-4px); }
.pkg-art{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.pkg-art .scene{ position:absolute; inset:0; transition:1.4s var(--ease); }
.pkg-card:hover .pkg-art .scene{ transform:scale(1.07); }
.pkg-art .season{ position:absolute; top:14px; left:14px; z-index:2; background:rgba(248,244,234,.92);
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; padding:6px 11px; border-radius:2px; color:var(--ink); }
.pkg-body{ padding:26px 26px 28px; display:flex; flex-direction:column; flex:1; }
.pkg-body h3{ font-size:1.65rem; font-weight:500; }
.pkg-body p{ font-size:14px; color:var(--ink-soft); font-weight:300; margin:10px 0 16px; line-height:1.6; }
.pkg-incl{ list-style:none; display:flex; flex-direction:column; gap:9px; margin-bottom:20px; }
.pkg-incl li{ display:flex; gap:9px; align-items:flex-start; font-size:13.5px; color:var(--ink-soft); }
.pkg-incl li svg{ width:15px; height:15px; color:var(--brass); flex:none; margin-top:3px; }
.pkg-foot{ margin-top:auto; padding-top:18px; border-top:1px solid var(--line); display:flex; align-items:flex-end; justify-content:space-between; }
.pkg-price .from{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); }
.pkg-price .amt{ font-family:var(--serif); font-size:1.7rem; line-height:1; }
.pkg-price .per{ font-size:11px; color:var(--ink-soft); }

.rev-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,30px); }
.rev-card{ border:1px solid var(--line-light); border-radius:3px; padding:30px 28px; background:rgba(241,236,225,.04);
  display:flex; flex-direction:column; }
.rev-stars{ color:var(--brass-soft); letter-spacing:3px; font-size:14px; }
.rev-card .quote{ font-family:var(--serif); font-size:1.4rem; font-weight:400; line-height:1.4; margin:16px 0 22px; flex:1; }
.rev-author{ display:flex; align-items:center; gap:12px; }
.rev-author .av{ width:40px; height:40px; border-radius:50%; background:var(--brass); color:var(--paper);
  display:grid; place-items:center; font-family:var(--serif); font-size:1.1rem; }
.rev-author .nm{ font-size:13.5px; } .rev-author .src{ font-size:11px; color:rgba(241,236,225,.55); letter-spacing:.04em; }

.faq-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(40px,6vw,80px); }
.faq-item{ padding:22px 0; border-bottom:1px solid var(--line); }
.faq-item .q{ display:flex; gap:12px; align-items:center; font-family:var(--serif); font-size:1.3rem; cursor:pointer; }
.faq-item .q svg{ width:18px; height:18px; color:var(--brass); flex:none; transition:.4s; }
.faq-item.open .q svg{ transform:rotate(45deg); }
.faq-item .a{ max-height:0; overflow:hidden; transition:.5s var(--ease); font-size:14.5px; color:var(--ink-soft);
  font-weight:300; line-height:1.65; }
.faq-item.open .a{ max-height:200px; margin-top:12px; }

/* ============================================================
   VERSIÓN LITE — CTAs hero + reservas
   ============================================================ */
.bookbar-cta{ display:flex; gap:14px; flex-wrap:wrap; }
.cta-pill{ display:inline-flex; align-items:center; gap:11px; padding:16px 26px; border-radius:3px;
  font-family:var(--sans); font-size:13px; letter-spacing:.1em; text-transform:uppercase; font-weight:500;
  box-shadow:0 24px 50px -24px rgba(12,18,14,.6); transition:.4s var(--ease); }
.cta-pill svg{ width:20px; height:20px; flex:none; }
.cta-pill--wa{ background:#1faa55; color:#fff; }
.cta-pill--wa:hover{ background:#178a45; transform:translateY(-2px); }
.cta-pill--call{ background:var(--paper); color:var(--ink); }
.cta-pill--call:hover{ background:var(--ink); color:var(--paper); transform:translateY(-2px); }

.resv-lite{ display:grid; grid-template-columns:1.2fr .9fr; gap:clamp(26px,4vw,56px); align-items:center; }
.resv-lite-perks{ display:flex; flex-direction:column; gap:18px; }
.resv-lite-perks .perk{ font-size:15px; }
.resv-lite-card{ background:rgba(241,236,225,.05); border:1px solid var(--line-light); border-radius:4px;
  padding:clamp(24px,3vw,38px); display:flex; flex-direction:column; gap:12px; }
.resv-lite-card h4{ font-family:var(--serif); font-size:1.7rem; font-weight:500; color:var(--paper); }
.resv-lite-card p{ font-size:14px; color:rgba(241,236,225,.7); font-weight:300; margin-bottom:8px; }

@media (max-width:760px){
  .resv-lite{ grid-template-columns:1fr; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .rooms-grid{ grid-template-columns:repeat(2,1fr); }
  .pkg-grid,.rev-grid{ grid-template-columns:1fr 1fr; }
  .tour-grid{ grid-template-columns:repeat(2,1fr); }
  .bookbar-inner{ grid-template-columns:1fr 1fr; }
  .bookbar .go{ grid-column:1/-1; padding-block:16px; }
  .resv-form{ grid-template-columns:1fr 1fr; }
}
@media (max-width:860px){
  .nav-links{ display:none; }
  .burger{ display:flex; }
  .nav .nav-right .btn{ display:none; }
  .intro-grid,.about-grid,.contact-grid,.summary{ grid-template-columns:1fr; }
  .gastro-grid,.faq-grid{ grid-template-columns:1fr; }
  .dist-list{ grid-template-columns:1fr; }
  .foot-top{ grid-template-columns:1fr; }
  .exp-row{ grid-template-columns:1fr; }
  .exp-row.flip .exp-art{ order:0; }
  .exp-art{ min-height:300px; }
  .hero-grid{ grid-template-columns:1fr; }
  .hero-photo{ display:none; }
  .gal{ grid-template-columns:repeat(2,1fr); grid-auto-rows:160px; }
  .avail-row{ grid-template-columns:64px 1fr; }
  .avail-price{ grid-column:2; text-align:left; }
  /* Header móvil: sin barra de anuncios, menú al tope */
  .topbar{ display:none; }
  .nav{ top:0; padding-inline:16px; gap:10px; }
  .brand{ gap:10px; min-width:0; }
  .brand .mark{ width:28px; height:28px; }
  .wordmark .name{ font-size:18px; }
  .wordmark .sub{ display:none; }
  .nav-right{ gap:12px; flex:none; }
  .lang{ gap:0; }
  .lang button{ padding:4px 5px; }
  /* Hero móvil: contenido en flujo, barra de reservas sin solapamiento */
  .hero{ min-height:auto; justify-content:flex-end; padding-top:88px; padding-bottom:24px; overflow:hidden; }
  .hero-inner{ padding-bottom:22px; }
  .bookbar{ position:static; transform:none; margin:14px 0 0; }
  .scroll-cue{ display:none; }
  .intro{ padding-top:clamp(48px,8vw,72px); }
}
@media (max-width:560px){
  :root{ --gut:18px; }
  body{ font-size:16px; }
  .rooms-grid{ grid-template-columns:1fr; }
  .pkg-grid,.rev-grid{ grid-template-columns:1fr; }
  .tour-grid{ grid-template-columns:1fr 1fr; }
  .bookbar-inner{ grid-template-columns:1fr; }
  .bf{ border-right:none; border-bottom:1px solid var(--line); }
  .bf:last-child{ border-bottom:none; }
  .resv-form{ grid-template-columns:1fr; }
  .stat-row{ gap:26px; }
  .foot-cols{ grid-template-columns:1fr 1fr; }
  .hero h1{ font-size:clamp(2.9rem,14vw,4.4rem); }
  .gal{ grid-template-columns:repeat(2,1fr); grid-auto-rows:130px; }
}