/* Inter Tight (OFL), mismo origen. El símbolo ₡ va en archivos aparte de ~700 bytes. */
@font-face{font-family:"Inter Tight";src:url(/work/hotel-las-tinajas/demo/fonts/InterTight-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter Tight";src:url(/work/hotel-las-tinajas/demo/fonts/InterTight-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter Tight";src:url(/work/hotel-las-tinajas/demo/fonts/InterTight-600.woff2) format("woff2");font-weight:600 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter Tight";src:url(/work/hotel-las-tinajas/demo/fonts/InterTight-colon-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+20A1}
@font-face{font-family:"Inter Tight";src:url(/work/hotel-las-tinajas/demo/fonts/InterTight-colon-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+20A1}
@font-face{font-family:"Inter Tight";src:url(/work/hotel-las-tinajas/demo/fonts/InterTight-colon-600.woff2) format("woff2");font-weight:600 700;font-style:normal;font-display:swap;unicode-range:U+20A1}

/* Dirección A: fondo marfil, tinta casi negra, un solo acento de barro (de las tinajas del logo) */
:root{
  --bg:#F7F6F3;--surface:#ECEAE4;--ink:#141414;--muted:#55554F;--accent:#955116;
  --on-ink:#F7F6F3;--on-ink-mute:#CFCCC4;--ink2:#242422;
  --line:rgba(20,20,20,.1);--line-on-ink:rgba(247,246,243,.16);
  --r:28px;--r-sm:20px;--pad:clamp(16px,3vw,40px);--ease:cubic-bezier(.2,.7,.2,1);
  --f:"Inter Tight",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:92px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.55 var(--f);overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,svg{max-width:100%;display:block}
img{height:auto}
h1,h2,h3,p,ul,dl,dd,figure{margin:0}
h1,h2,h3{font-weight:600;line-height:.98;text-wrap:balance}
b,strong{font-weight:600}
a{color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:8px}
.ess :focus-visible,.contact :focus-visible,.tier-1 :focus-visible{outline-color:var(--on-ink)}
.sr,.skip:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip:focus{position:fixed;top:8px;left:8px;z-index:60;background:var(--ink);color:var(--on-ink);padding:10px 18px;border-radius:99px;font-weight:600}
.wrap{width:100%;max-width:1440px;margin:0 auto;padding:0 var(--pad)}

.banner{background:var(--ink);color:var(--on-ink);text-align:center;font-size:.875rem;padding:5px var(--pad);font-weight:600}

/* Barra superior */
.top{position:sticky;top:0;z-index:40;background:var(--bg);box-shadow:0 1px 0 var(--line)}
.top-in{position:relative;max-width:1440px;margin:0 auto;padding:8px var(--pad);display:flex;align-items:center;gap:12px}
.brand{flex-shrink:0;display:inline-flex;align-items:center;text-decoration:none;margin-right:auto}
.logo{width:auto;height:52px}
.top-act{display:flex;align-items:center;gap:8px}
.top .top-wa{display:none}
.menu-btn{font:600 1rem/1 var(--f);background:var(--ink);color:var(--on-ink);border:0;border-radius:99px;padding:0 22px;min-height:44px;cursor:pointer}
.menu-btn:hover{background:var(--ink2)}
.nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--bg);padding:8px var(--pad) 16px;flex-direction:column;box-shadow:0 14px 24px -12px rgba(20,20,20,.18);border-top:1px solid var(--line)}
.nav.open{display:flex}
.nav a{padding:12px 4px;text-decoration:none;font-size:1.125rem;font-weight:500;min-height:44px}
.nav a:hover{color:var(--accent)}
.lang{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border-radius:99px;background:var(--surface);text-decoration:none;font-weight:600;font-size:.9375rem;padding:0 14px}
.lang:hover{background:#E1DED6}

/* Botones: píldoras. Principal = negro, secundario = gris cálido */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border-radius:99px;font:600 1.0625rem/1 var(--f);text-decoration:none;border:0;cursor:pointer;transition:transform .15s var(--ease),background-color .2s;text-align:center;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-wa,.btn-wash{background:var(--ink);color:var(--on-ink)}
.btn-wa:hover,.btn-wash:hover{background:#2C2C2A}
.btn-ghost{background:var(--surface);color:var(--ink)}
.btn-ghost:hover{background:#E1DED6}
.btn-line{background:var(--bg);color:var(--ink)}
.btn-line:hover{background:#fff}
.btn-cream{background:var(--on-ink);color:var(--ink)}
.btn-cream:hover{background:#fff}
.btn-sm{min-height:44px;padding:0 22px;font-size:1rem}
.btn-lg{min-height:56px;padding:0 32px;font-size:1.125rem}

/* 1. Portada: titular grande, línea y botones, y la foto con esquinas redondeadas */
h1{font-size:clamp(2.75rem,8.4vw,8rem);line-height:.94;letter-spacing:-.045em}
.hero{display:flex;flex-direction:column;max-width:1440px;margin:0 auto;padding:clamp(32px,6.5vw,104px) var(--pad) 0}
.hero-in{order:1;display:grid;gap:clamp(20px,3vw,36px);justify-items:start}
.hero h1{max-width:12.5em}
.hero-line{font-size:clamp(1.25rem,1.9vw,1.625rem);line-height:1.35;letter-spacing:-.01em;max-width:28em}
.hero-line b{color:var(--accent)}
.hero-act{display:flex;flex-wrap:wrap;gap:12px;width:100%}
.hero-act .btn{flex:1 1 100%}
.hero-img{order:2;width:100%;aspect-ratio:4/3;object-fit:cover;object-position:35% 60%;border-radius:20px;margin-top:clamp(32px,4.5vw,64px)}

/* Secciones */
.sec{padding:clamp(64px,9vw,136px) 0 0}
.sec h2{font-size:clamp(2.125rem,5vw,4.5rem);letter-spacing:-.04em;max-width:13em}
.sec p{max-width:38em}
.sec-head{display:grid;gap:18px;margin-bottom:clamp(28px,4vw,56px)}
.sec-head p{color:var(--muted);font-size:1.125rem}

/* 2. Habitaciones: la de aire acondicionado va oscura y grande */
.tiers{display:grid;gap:16px}
.tier{background:var(--surface);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.tier-pic{height:clamp(220px,52vw,420px);background:var(--surface)}
.tier-pic img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.tier-body{padding:clamp(20px,2.4vw,32px);display:flex;flex-direction:column;flex:1}
.tier h3{font-size:clamp(1.625rem,2.6vw,2.25rem);letter-spacing:-.03em;line-height:1.05}
.tier-feat{color:var(--muted);font-size:1rem;margin-top:6px}
.tier-prices{display:grid;gap:8px;margin-top:20px;font-variant-numeric:tabular-nums}
.tier-prices div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;background:var(--bg);border-radius:16px;padding:14px 18px}
.tier-prices dt{font-size:1.125rem}
.tier-prices dd{margin:0;font-weight:600;font-size:1.375rem;letter-spacing:-.02em}
.tier-1{background:var(--ink);color:var(--on-ink)}
.tier-1 .tier-feat{color:var(--on-ink-mute)}
.tier-1 .tier-prices div{background:var(--ink2)}
.rate{margin-top:16px;background:var(--surface);border-radius:var(--r);padding:clamp(22px,3vw,40px);display:grid;gap:22px;justify-items:start;align-items:center}
.rate p{max-width:48em;font-size:1rem;color:var(--muted)}

/* 3. Comodidades: banda oscura de esquinas redondeadas */
.ess-grid,.loc-grid,.con-grid{border-radius:var(--r);padding:clamp(24px,4.2vw,64px);display:grid;gap:clamp(32px,4vw,56px)}
.ess-grid{background:var(--ink);color:var(--on-ink)}
.ess-copy{display:grid;gap:18px;align-content:start}
.ess-copy p{color:var(--on-ink-mute)}
.ess-list{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:0 32px}
.ess-list li{border-top:1px solid var(--line-on-ink);padding:18px 0}
.ess-list strong{display:block;font-size:clamp(1.25rem,1.8vw,1.625rem);font-weight:500;letter-spacing:-.02em;line-height:1.15}
.ess-list span{display:block;margin-top:6px;color:var(--on-ink-mute);font-size:1rem}
.ess-pics{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.ess-pics div:nth-child(2){margin-top:28px}
.ess-pics img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-sm)}

/* 4. Opiniones */
.rev-head{display:grid;gap:22px;justify-items:start;margin-bottom:clamp(24px,3vw,40px)}
.rev-head h2{margin-bottom:14px}
.rev-head p{color:var(--muted);font-size:1.125rem}
.rev-grid{display:grid;gap:16px}
.rev-card{margin:0;display:flex;flex-direction:column;gap:14px;background:var(--surface);border-radius:var(--r);padding:clamp(22px,2.4vw,30px)}
.rev-card blockquote{margin:0}
.rev-card blockquote p{font-size:1.125rem;line-height:1.45;letter-spacing:-.005em}
.rev-stars{display:flex;gap:3px}
.rev-stars svg{width:18px;height:18px;fill:var(--accent)}
.rev-stars .off{opacity:.3}
.rev-card figcaption{display:flex;flex-direction:column;gap:2px;font-size:.9375rem;margin-top:auto}
.rev-card figcaption span{color:var(--muted)}

/* 5. Ubicación: mapa real en un bloque gris cálido */
.loc-grid{background:var(--surface);align-items:center}
.loc-map a{display:block}
.loc-map img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r-sm);background:var(--bg)}
.loc-map figcaption{margin-top:10px;font-size:.875rem;color:var(--muted)}
.loc-map figcaption a{text-underline-offset:3px}
.loc-copy{display:grid;gap:18px;justify-items:start}
.loc-copy p{color:var(--muted)}
.loc-ext img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-sm)}
.soc{display:flex;gap:18px;flex-wrap:wrap}
.soc a{text-decoration:underline;text-underline-offset:4px}
.soc a:hover,.foot a:hover{color:var(--accent)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.loc-copy .actions{margin-top:2px}
.loc-copy .soc{color:var(--ink)}

/* 6. Contacto: bloque oscuro con el formulario de WhatsApp */
.contact{padding-bottom:0}
.con-grid{background:var(--ink);color:var(--on-ink)}
.con-copy{display:grid;gap:18px;align-content:start}
.con-copy>p{color:var(--on-ink-mute)}
.book{display:grid;gap:16px;margin-top:6px;max-width:34rem}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fields label:last-child{grid-column:1/-1}
.fields label{display:grid;gap:6px;font-size:.9375rem;color:var(--on-ink-mute)}
.fields input,.fields select{font:400 1rem var(--f);color:var(--ink);background:var(--bg);border:0;border-radius:14px;min-height:48px;padding:0 14px;width:100%;min-width:0}
.fields input:focus-visible,.fields select:focus-visible{outline-offset:2px}
.book .btn{justify-self:start}
.con-side{display:grid;gap:18px;align-content:start}
.con-card{background:var(--ink2);border-radius:var(--r-sm);padding:12px 24px;display:grid}
.con-card div{padding:14px 0}
.con-card div+div{border-top:1px solid var(--line-on-ink)}
.con-card dt{font-size:.9375rem;color:var(--on-ink-mute)}
.con-card dd{font-size:1.375rem;font-weight:600;letter-spacing:-.02em;margin-top:2px}
.con-card a{text-decoration:none}
.con-card .soc a{text-decoration:underline;font-size:1.0625rem;font-weight:500}
.con-card a:hover{color:#fff}
.con-good{font-size:.9375rem;max-width:30em;color:var(--on-ink-mute)}

/* 7. Pie */
.foot{padding:clamp(40px,5vw,72px) 0 120px;color:var(--muted);font-size:.9375rem}
.foot .wrap{display:grid;gap:12px;justify-items:start}
.foot-in{gap:18px}
.foot-txt{display:grid;gap:8px}
.foot .logo{height:60px}

.sticky{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;gap:8px;padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));background:var(--bg);box-shadow:0 -1px 0 var(--line)}
.sticky .btn{flex:1;min-width:0;padding-left:10px;padding-right:10px;white-space:nowrap;min-height:48px}
.sticky .btn-wa{flex:1.4}

.nf-main{max-width:640px;margin:0 auto;padding:48px var(--pad);display:grid;gap:20px;justify-items:start}
.nf-main h1{font-size:clamp(2.25rem,8vw,3.5rem);letter-spacing:-.04em}
.nf-main .lead{font-size:1.1875rem}
.nf-main .lead a{text-underline-offset:3px}
.nf-main .lead a:hover{color:var(--accent)}
.nf-main .actions{margin-top:4px}

/* Movimiento: entradas suaves, una sola vez */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .45s var(--ease),transform .45s var(--ease);transition-delay:calc(var(--i,0)*60ms)}
.js .reveal.in,.show-all .reveal{opacity:1;transform:none}

@media (min-width:640px){
  .rev-grid{grid-template-columns:repeat(2,1fr)}
  .ess-list{grid-template-columns:1fr 1fr}
  .hero-act .btn{flex:0 0 auto}
  .hero-img{aspect-ratio:16/9;border-radius:28px}
}
@media (min-width:700px){
  .top .top-wa{display:inline-flex}
}
@media (min-width:900px){
  .sec-head{grid-template-columns:1.35fr 1fr;gap:56px;align-items:end}
  .rate{grid-template-columns:1fr auto;gap:32px}
  .ess-grid{grid-template-columns:1.1fr 1fr;align-items:center}
  .loc-grid{grid-template-columns:1fr 1.15fr}
  .loc-map{order:-1}
  .con-grid{grid-template-columns:1.25fr 1fr;align-items:start}
  .rev-head{grid-template-columns:1fr auto;align-items:end}
  .hero-in{grid-template-columns:1fr auto;align-items:center;gap:24px 48px}
  .hero h1{grid-column:1/-1}
  .hero-act{width:auto}
  .hero-img{aspect-ratio:16/8}
}
@media (min-width:981px){
  .tiers{grid-template-columns:1.05fr 1fr}
  .tier-1{grid-row:span 2}
  .tier-pic{height:clamp(260px,34vw,480px)}
  .logo{height:64px}
}
@media (min-width:1000px){
  .book{max-width:none;grid-template-columns:1fr}
  .sticky{display:none}
  .foot{padding-bottom:56px}
  .foot .foot-in{grid-template-columns:auto 1fr;gap:48px;align-items:center}
}
@media (min-width:1180px){
  .menu-btn{display:none}
  .nav{display:flex;position:static;flex-direction:row;padding:0;gap:4px;background:none;order:1;box-shadow:none;border:0}
  .nav a{padding:8px 14px;font-size:1rem;min-height:0}
  .brand{margin-right:auto}
  .top-in{gap:8px}
  .top-act{margin-left:8px;order:2}
  .rev-grid{grid-template-columns:repeat(4,1fr)}
  .rev-card blockquote p{font-size:1.0625rem}
}
@media (min-width:640px) and (max-width:979px){
  .logo{height:56px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
  .btn,.btn:active{transition:none;transform:none}
}

/* Guía Barra Honda (.guide): columna de lectura */
.guide .g-wrap{max-width:46rem;margin:0 auto;padding:clamp(28px,5vw,64px) var(--pad) 72px}
.guide .g-crumbs{font-size:.9375rem;color:var(--muted);margin-bottom:24px}
.guide .g-crumbs a{text-underline-offset:3px}
.guide h1{font-size:clamp(2.375rem,7vw,4.25rem);line-height:.96;letter-spacing:-.04em}
.guide .g-lead{font-size:1.25rem;line-height:1.4;letter-spacing:-.01em;margin-top:22px}
.guide .g-note{margin:28px 0 8px;background:var(--surface);border-radius:var(--r-sm);padding:20px 24px}
.guide .g-note a,.guide .g-src a,.guide .g-wrap p a{text-underline-offset:3px}
.guide .g-wrap a:hover{color:var(--accent)}
.guide .g-wrap h2{font-size:clamp(1.875rem,4.6vw,2.75rem);letter-spacing:-.035em;line-height:1;margin:56px 0 16px;scroll-margin-top:96px}
.guide .g-wrap h3{font:600 1.1875rem/1.3 var(--f);letter-spacing:-.01em;margin:24px 0 6px}
.guide .g-wrap p+p{margin-top:14px}
.guide .g-list{margin:0;padding-left:1.2em;display:grid;gap:8px}
.guide .g-list li::marker{color:var(--accent)}
.guide .g-list+p{margin-top:14px}
.guide .g-hotel{display:grid;gap:22px;background:var(--surface);border-radius:var(--r);padding:clamp(18px,2.4vw,28px)}
.guide .g-hotel img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-sm)}
.guide .g-hotel .actions{margin-top:22px}
.guide .g-hotel .btn-ghost{background:var(--bg)}
.guide .g-hotel .btn-ghost:hover{background:#fff}
.guide .g-hotel .btn:hover{color:inherit}
.guide .g-hotel .btn-wa:hover{color:var(--on-ink)}
.guide .g-faq h3{margin-top:26px}
.guide .g-faq h3:first-child{margin-top:0}
.guide .g-src{margin-top:44px;font-size:.9375rem;color:var(--muted)}
@media (min-width:760px){
  .guide .g-hotel{grid-template-columns:minmax(0,260px) 1fr;align-items:start}
  .guide .g-hotel img{aspect-ratio:3/4}
}