/* ============================================================
   Niebla Baja · Café de especialidad · Pucón
   Estática · paleta crema + verde abeto lacustre
   ============================================================ */

:root{
  --bg:#F4F1EA;
  --surface:#FBFAF6;
  --fg:#23302B;
  --muted:#5C6B62;
  --accent:#2F5D4F;        /* relleno / bordes / texto chico AA (~6:1 sobre bg) */
  --accent-deep:#234A3E;   /* texto sobre surface, hover */
  --line:#DAD5C7;

  --wa:#25D366;

  --maxw:1180px;
  --gutter:clamp(1.25rem, 5vw, 4rem);

  --r-sm:10px;
  --r-md:18px;
  --r-lg:26px;

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

  --shadow:0 1px 2px rgba(35,48,43,.04),
           0 18px 40px -24px rgba(35,48,43,.28);
  --shadow-soft:0 24px 60px -34px rgba(35,48,43,.4);

  --ff-display:"Fraunces", Georgia, "Times New Roman", serif;
  --ff-body:"Hanken Grotesk", system-ui, -apple-system, sans-serif;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--ff-body);
  font-size:clamp(1rem,.97rem + .2vw,1.075rem);
  line-height:1.65;
  font-weight:400;
  letter-spacing:.005em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}

h1,h2,h3{font-family:var(--ff-display);font-weight:600;line-height:1.05;margin:0;letter-spacing:-.01em;}

:focus-visible{
  outline:2.5px solid var(--accent-deep);
  outline-offset:3px;
  border-radius:4px;
}

::selection{background:var(--accent);color:var(--surface);}

/* ---------- layout helpers ---------- */
.section{
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
  padding-block:clamp(4.5rem,9vw,8.5rem);
}

.eyebrow{
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 1.1rem;
}
.eyebrow--light{color:#CFE0D6;}

.section__title{
  font-size:clamp(1.9rem,1.3rem + 2.6vw,3.4rem);
  max-width:18ch;
  margin-bottom:1.4rem;
}

/* ---------- buttons ---------- */
.btn{
  --pad-y:.95rem;
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--ff-body);
  font-weight:600;
  font-size:.96rem;
  letter-spacing:.01em;
  padding:var(--pad-y) 1.6rem;
  border-radius:999px;
  cursor:pointer;
  border:1.5px solid transparent;
  transition:transform .4s var(--ease-out), background-color .3s var(--ease), color .3s var(--ease), box-shadow .4s var(--ease-out), border-color .3s var(--ease);
  will-change:transform;
}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0);}

.btn--solid{background:var(--accent);color:var(--surface);box-shadow:var(--shadow);}
.btn--solid:hover{background:var(--accent-deep);box-shadow:var(--shadow-soft);}

.btn--ghost{background:transparent;color:var(--accent-deep);border-color:var(--line);}
.btn--ghost:hover{border-color:var(--accent);background:var(--surface);}

.btn--block{width:100%;}

.btn--wa{
  background:var(--wa);color:#053321;font-size:1.02rem;padding:1.05rem 2rem;
  box-shadow:0 16px 38px -18px rgba(5,51,33,.6);
}
.btn--wa:hover{background:#1fbd5b;}

/* ============================================================
   Barra DEMO Digital Bee
   ============================================================ */
.db-bar{
  position:fixed;inset:0 0 auto 0;z-index:90;
  height:34px;
  background:var(--accent-deep);
  color:#EAF1EC;
  display:flex;align-items:center;justify-content:center;
  font-size:.74rem;letter-spacing:.02em;
  padding-inline:1rem;
}
.db-bar__link{
  color:#EAF1EC;display:inline-flex;gap:.35rem;align-items:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
}
.db-bar__cta{color:#FBFAF6;text-decoration:underline;text-underline-offset:2px;font-weight:600;}
.db-bar__link:hover .db-bar__cta{color:#fff;}

/* ============================================================
   Header / nav
   ============================================================ */
.site-header{
  position:sticky;top:34px;z-index:80;
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;
  max-width:var(--maxw);margin-inline:auto;
  padding:.85rem var(--gutter);
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:saturate(140%) blur(12px);
  -webkit-backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid color-mix(in srgb, var(--line) 70%, transparent);
}

.brand{display:inline-flex;align-items:center;gap:.6rem;color:var(--accent-deep);}
.brand__mark{display:inline-flex;color:var(--accent);}
.brand__name{
  font-family:var(--ff-display);font-weight:600;font-size:1.22rem;letter-spacing:-.01em;
}

.nav{display:flex;align-items:center;gap:clamp(.6rem,2vw,2rem);}
.nav a{
  font-size:.93rem;font-weight:500;color:var(--muted);
  position:relative;padding:.25rem 0;
  transition:color .25s var(--ease);
}
.nav a:not(.nav__cta)::after{
  content:"";position:absolute;left:0;bottom:-1px;height:1.5px;width:0;
  background:var(--accent);transition:width .35s var(--ease-out);
}
.nav a:not(.nav__cta):hover{color:var(--fg);}
.nav a:not(.nav__cta):hover::after{width:100%;}

.nav__cta{
  color:var(--surface);background:var(--accent);
  padding:.55rem 1.1rem;border-radius:999px;font-weight:600;
  transition:background-color .3s var(--ease), transform .35s var(--ease-out);
}
.nav__cta:hover{background:var(--accent-deep);transform:translateY(-1px);}

/* hide secondary nav links on small screens, keep brand + CTA */
@media (max-width:720px){
  .nav a:not(.nav__cta){display:none;}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;align-items:flex-end;
  padding:clamp(6rem,12vh,10rem) var(--gutter) clamp(3rem,7vw,5.5rem);
  overflow:hidden;
}
.hero__media{position:absolute;inset:0;z-index:0;}
.hero__media img{width:100%;height:100%;object-fit:cover;}
.hero__veil{
  position:absolute;inset:0;
  /* Scrim anclado abajo: garantiza AA del texto sobre cualquier zona de la foto
     (incluidos reflejos casi blancos de la ventana). Sin capa crema clara que
     aclaraba justo donde arranca el texto. */
  background:
    linear-gradient(180deg, rgba(20,30,26,.28) 0%, rgba(20,30,26,.12) 30%, rgba(20,30,26,.62) 72%, rgba(20,30,26,.78) 100%);
}

.hero__inner{position:relative;z-index:1;max-width:var(--maxw);margin-inline:auto;width:100%;}
.hero .eyebrow{color:#E8F1EA;}

.hero__title{
  font-size:clamp(2.8rem,1.6rem + 6vw,6.4rem);
  color:var(--surface);
  letter-spacing:-.02em;
  text-wrap:balance;
  max-width:15ch;
  text-shadow:0 2px 30px rgba(20,30,26,.35);
}
.hero__title em{font-style:italic;font-weight:400;color:#E9F0EB;}

.hero__lead{
  color:#F1EFE7;
  font-size:clamp(1.05rem,1rem + .5vw,1.3rem);
  max-width:46ch;
  margin:1.6rem 0 2.2rem;
  text-shadow:0 1px 16px rgba(20,30,26,.45);
}

.hero__actions{display:flex;flex-wrap:wrap;gap:.85rem;}
.hero__actions .btn--ghost{
  background:rgba(251,250,246,.12);color:var(--surface);
  border-color:rgba(251,250,246,.55);backdrop-filter:blur(4px);
}
.hero__actions .btn--ghost:hover{background:rgba(251,250,246,.22);border-color:var(--surface);}

.hero__facts{
  display:flex;flex-wrap:wrap;gap:clamp(1.4rem,4vw,3.5rem);
  margin:2.8rem 0 0;
  padding-top:1.8rem;
  border-top:1px solid rgba(251,250,246,.28);
}
.hero__facts div{display:flex;flex-direction:column;gap:.15rem;}
.hero__facts dt{
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:#E8F1EA;
}
.hero__facts dd{
  margin:0;font-family:var(--ff-display);font-size:1.15rem;color:var(--surface);
}

/* ============================================================
   HISTORIA
   ============================================================ */
.story{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem,5vw,5rem);align-items:center;
}
.story__text p{color:var(--muted);max-width:48ch;margin:0 0 1.1rem;}
.story__text p:first-of-type{color:var(--fg);}

.story__list{list-style:none;margin:1.8rem 0 0;padding:0;display:grid;gap:.7rem;}
.story__list li{
  display:flex;gap:.7rem;align-items:baseline;
  font-weight:500;color:var(--fg);
}
.story__list span{color:var(--accent);font-weight:600;font-size:1.3rem;line-height:1;}

.story__media{
  margin:0;position:relative;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow-soft);
}
.story__media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;
  transition:transform 1s var(--ease-out);}
.story__media:hover img{transform:scale(1.04);}
.story__media figcaption{
  position:absolute;left:1rem;bottom:1rem;
  background:color-mix(in srgb,var(--surface) 90%, transparent);
  color:var(--accent-deep);
  font-size:.82rem;font-weight:600;letter-spacing:.02em;
  padding:.5rem .9rem;border-radius:999px;backdrop-filter:blur(6px);
}

/* ============================================================
   CARTA
   ============================================================ */
.menu__head{max-width:42rem;margin-bottom:clamp(2.5rem,5vw,4rem);}
.menu__intro{color:var(--muted);margin:0;max-width:50ch;}

.menu__grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.1rem,2.4vw,1.9rem);
}

.card{
  background:var(--surface);
  border-radius:var(--r-md);
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  display:flex;flex-direction:column;
  transition:transform .55s var(--ease-out), box-shadow .55s var(--ease-out), border-color .4s var(--ease);
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-soft);border-color:color-mix(in srgb,var(--accent) 35%, var(--line));}

.card__media{aspect-ratio:5/4;overflow:hidden;background:var(--line);}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-out);}
.card:hover .card__media img{transform:scale(1.06);}

.card__body{padding:1.4rem 1.4rem 1.6rem;display:flex;flex-direction:column;gap:.5rem;flex:1;}
.card__top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;}
.card__top h3{font-size:1.3rem;}
.card__price{
  font-family:var(--ff-display);font-size:1.12rem;color:var(--accent-deep);
  white-space:nowrap;font-weight:600;
}
.card__body p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.55;flex:1;}

.tag{
  align-self:flex-start;margin-top:.4rem;
  font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent-deep);
  background:color-mix(in srgb,var(--accent) 14%, var(--surface));
  border:1px solid color-mix(in srgb,var(--accent) 30%, transparent);
  padding:.3rem .7rem;border-radius:999px;
}

.menu__foot{margin:clamp(2rem,4vw,3rem) 0 0;color:var(--muted);font-size:.95rem;}

/* ============================================================
   GALERIA
   ============================================================ */
.gallery__head{max-width:40rem;margin-bottom:clamp(2.2rem,4vw,3.4rem);}
.gallery__grid{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  grid-template-rows:auto auto;
  gap:clamp(1rem,2vw,1.6rem);
}
.gallery__item{margin:0;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow);background:var(--line);}
.gallery__item img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-out);}
.gallery__item:hover img{transform:scale(1.05);}
.gallery__item--tall{grid-row:1 / span 2;}
.gallery__item--tall img{aspect-ratio:3/4;}
.gallery__item:not(.gallery__item--tall) img{aspect-ratio:16/10;}

/* ============================================================
   VISITA
   ============================================================ */
.visit{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,5rem);align-items:center;
}
.visit__info p{color:var(--muted);max-width:42ch;}

.visit__hours{margin:2rem 0;display:grid;gap:0;border-top:1px solid var(--line);}
.visit__row{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.95rem 0;border-bottom:1px solid var(--line);
}
.visit__row dt{font-weight:600;color:var(--fg);}
.visit__row dd{margin:0;color:var(--accent-deep);font-family:var(--ff-display);font-size:1.05rem;}

.visit__contact{display:grid;gap:1.1rem;margin-top:1.8rem;}
.visit__contact p{margin:0;color:var(--muted);line-height:1.5;}
.visit__contact strong{color:var(--fg);font-weight:600;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;display:block;margin-bottom:.2rem;}
.visit__contact a{color:var(--accent-deep);font-weight:500;border-bottom:1px solid color-mix(in srgb,var(--accent) 40%, transparent);}
.visit__contact a:hover{border-color:var(--accent);}

/* mapa estilizado (sin librerías) */
.visit__map{margin:0;}
.map{
  position:relative;aspect-ratio:5/4;width:100%;
  border-radius:var(--r-lg);overflow:hidden;
  background:
    radial-gradient(120% 90% at 80% 10%, #EDEADF 0%, var(--surface) 60%);
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
}
.map__lake{
  position:absolute;inset:auto -10% -18% -10%;height:62%;
  background:linear-gradient(160deg, #BDD2C6 0%, #97B7A8 100%);
  border-radius:50% 50% 0 0 / 60% 60% 0 0;
  opacity:.85;
}
.map__road{position:absolute;background:var(--line);border-radius:6px;}
.map__road--1{top:18%;left:-5%;width:110%;height:7px;transform:rotate(-7deg);}
.map__road--2{top:0;left:34%;width:7px;height:62%;transform:rotate(9deg);transform-origin:top;}
.map__pin{
  position:absolute;top:30%;left:46%;color:var(--accent);
  filter:drop-shadow(0 10px 14px rgba(35,48,43,.35));
  animation:pin-drop .7s var(--ease-out) both;
}
.map__label{
  position:absolute;top:42%;left:54%;
  background:var(--surface);color:var(--accent-deep);
  font-size:.8rem;font-weight:600;padding:.3rem .7rem;border-radius:999px;
  box-shadow:var(--shadow);
}
@keyframes pin-drop{from{transform:translateY(-14px);opacity:0;}to{transform:none;opacity:1;}}
@media (prefers-reduced-motion:reduce){.map__pin{animation:none;}}

/* ============================================================
   RESERVA
   ============================================================ */
.reserve{padding-block:0;}
.reserve__inner{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-soft);
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2rem,4vw,4rem);
  padding:clamp(2rem,4vw,3.5rem);
  align-items:center;
}
.reserve__copy p{color:var(--muted);max-width:40ch;}
.reserve__note{font-size:.85rem;color:var(--accent-deep);margin-top:1rem;font-weight:500;}

.reserve__form{display:grid;gap:1.1rem;}
.field{display:grid;gap:.4rem;}
.field label{font-size:.85rem;font-weight:600;color:var(--fg);letter-spacing:.01em;}
.field--split{grid-template-columns:1fr 1fr;gap:1rem;}
.field--split > div{display:grid;gap:.4rem;}

input,select,textarea{
  font-family:var(--ff-body);font-size:1rem;color:var(--fg);
  background:var(--bg);
  border:1.5px solid var(--line);
  border-radius:var(--r-sm);
  padding:.8rem .9rem;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease);
  width:100%;
}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.9;}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--accent);
  background:var(--surface);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%, transparent);
}
textarea{resize:vertical;min-height:84px;}

.reserve__feedback{
  margin:.4rem 0 0;font-size:.92rem;color:var(--accent-deep);font-weight:500;
  background:color-mix(in srgb,var(--accent) 12%, var(--surface));
  border:1px solid color-mix(in srgb,var(--accent) 26%, transparent);
  padding:.8rem 1rem;border-radius:var(--r-sm);
}

/* ============================================================
   CTA DIGITAL BEE
   ============================================================ */
.db-cta{padding-block:0;margin-block:clamp(4.5rem,9vw,8.5rem);}
.db-cta__inner{
  background:linear-gradient(150deg, var(--accent-deep) 0%, #1c3d33 100%);
  color:#EAF1EC;
  border-radius:var(--r-lg);
  text-align:center;
  padding:clamp(3rem,6vw,5rem) var(--gutter);
  box-shadow:var(--shadow-soft);
  position:relative;overflow:hidden;
}
.db-cta__inner::before{
  content:"";position:absolute;inset:auto -20% -60% auto;width:60%;height:120%;
  background:radial-gradient(circle, rgba(151,183,168,.25) 0%, transparent 70%);
  pointer-events:none;
}
.db-cta__title{
  font-size:clamp(1.9rem,1.3rem + 2.4vw,3.1rem);color:#FBFAF6;
  margin-bottom:1rem;position:relative;
}
.db-cta__text{
  color:#D4E2D8;max-width:46ch;margin:0 auto 2rem;position:relative;
}
.db-cta .btn--wa{position:relative;}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  background:var(--surface);
  border-top:1px solid var(--line);
  padding:clamp(3rem,6vw,4.5rem) var(--gutter) 2rem;
}
.site-footer__grid{
  max-width:var(--maxw);margin-inline:auto;
  display:grid;grid-template-columns:1.4fr 1fr 1fr;
  gap:clamp(1.5rem,4vw,3rem);
  padding-bottom:2.5rem;border-bottom:1px solid var(--line);
}
.site-footer__brand .brand__name{display:block;margin-bottom:.7rem;color:var(--accent-deep);font-size:1.4rem;}
.site-footer__brand p{margin:0;color:var(--muted);max-width:34ch;font-size:.95rem;}
.site-footer__nav{display:flex;flex-direction:column;gap:.65rem;}
.site-footer__nav a{color:var(--muted);font-size:.95rem;width:fit-content;transition:color .25s var(--ease);}
.site-footer__nav a:hover{color:var(--accent-deep);}
.site-footer__contact p{margin:0 0 .55rem;color:var(--muted);font-size:.95rem;}
.site-footer__contact a{color:var(--accent-deep);}
.site-footer__contact a:hover{text-decoration:underline;text-underline-offset:2px;}

.site-footer__base{
  max-width:var(--maxw);margin:1.6rem auto 0;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;
  color:var(--muted);font-size:.84rem;
}

/* ============================================================
   WhatsApp flotante
   ============================================================ */
.wa-float{
  position:fixed;right:clamp(1rem,3vw,1.8rem);bottom:clamp(1rem,3vw,1.8rem);
  z-index:95;
  width:58px;height:58px;border-radius:50%;
  background:var(--wa);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 14px 30px -10px rgba(5,51,33,.55);
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.wa-float:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 18px 38px -12px rgba(5,51,33,.6);}

/* ============================================================
   Reveals (FOUC-safe: ocultos solo con JS activo)
   ============================================================ */
.js-on .reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.js-on .reveal.is-in{opacity:1;transform:none;}

@media (prefers-reduced-motion:reduce){
  .js-on .reveal{opacity:1;transform:none;transition:none;}
  .btn,.card,.story__media img,.card__media img,.gallery__item img{transition:none;}
  *{scroll-behavior:auto;}
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:980px){
  .menu__grid{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:768px){
  .story,.visit,.reserve__inner{grid-template-columns:1fr;}
  .story__media{order:-1;}
  .visit__map{order:-1;}
  .gallery__grid{grid-template-columns:1fr;}
  .gallery__item--tall{grid-row:auto;}
  .gallery__item--tall img,.gallery__item:not(.gallery__item--tall) img{aspect-ratio:16/10;}
  .site-footer__grid{grid-template-columns:1fr;}
}

@media (max-width:560px){
  .menu__grid{grid-template-columns:1fr;}
  .field--split{grid-template-columns:1fr;}
  .hero__facts{gap:1.4rem 2.2rem;}
  .site-header{top:34px;padding-block:.7rem;}
}