/* ============================================================
   Altos del Sur — cabañas de montaña, El Bolsón
   Dos estaciones, un solo sitio.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body,h1,h2,h3,p,ul,dl,dd,figure{margin:0}
ul{padding:0;list-style:none}
img,svg,iframe,picture{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}

/* ── Estaciones ───────────────────────────────────────────── */
:root{
  --wrap:1220px;
  --pad:clamp(1.15rem,4vw,2.5rem);
  --sec:clamp(4.5rem,9vw,8.5rem);
  --r:14px;
  --ease:cubic-bezier(.33,.1,.2,1);
  --dur:.65s;
}

html[data-season="verano"]{
  --bg:#FAF6EC;
  --bg2:#F1E9D8;
  --card:#FFFFFF;
  --ink:#1B2A1D;
  --ink2:#5A6656;
  --line:#DFD4BE;
  --accent:#3D6B34;
  --accent-ink:#FFFFFF;
  --accent-soft:rgba(61,107,52,.10);
  --tint:#B5761C;
  --scrim:linear-gradient(178deg,rgba(16,28,16,.62) 0%,rgba(16,28,16,.10) 34%,rgba(16,28,16,.30) 62%,rgba(12,22,12,.86) 100%);
  --scrim-m:linear-gradient(180deg,rgba(14,26,14,.34) 0%,rgba(14,26,14,.04) 22%,rgba(14,26,14,.10) 40%,rgba(12,22,12,.38) 62%,rgba(10,18,10,.72) 88%,rgba(10,18,10,.80) 100%);
  --shadow:0 1px 2px rgba(30,40,25,.06),0 18px 44px -22px rgba(30,40,25,.30);
}
html[data-season="invierno"]{
  --bg:#14100C;
  --bg2:#1C1712;
  --card:#231D16;
  --ink:#F2EBE0;
  --ink2:#A99A87;
  --line:#33291F;
  --accent:#C79A62;
  --accent-ink:#1A130C;
  --accent-soft:rgba(199,154,98,.15);
  --tint:#9FB6C4;
  --scrim:linear-gradient(178deg,rgba(14,10,6,.60) 0%,rgba(14,10,6,.14) 32%,rgba(14,10,6,.44) 62%,rgba(10,7,4,.90) 100%);
  --scrim-m:linear-gradient(180deg,rgba(14,10,6,.34) 0%,rgba(14,10,6,.04) 22%,rgba(14,10,6,.12) 40%,rgba(10,7,4,.44) 62%,rgba(8,6,3,.78) 88%,rgba(8,6,3,.86) 100%);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 22px 50px -24px rgba(0,0,0,.75);
}

body{
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:clamp(1rem,.98rem + .18vw,1.09rem);
  line-height:1.72;
  color:var(--ink);
  background:var(--bg);
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease);
  overflow-x:hidden;
}

h1,h2,h3{font-family:"Fraunces","Iowan Old Style",Georgia,serif;font-weight:400;line-height:1.06;letter-spacing:-.018em}
h1{font-size:clamp(2.35rem,1.2rem + 4.6vw,4.4rem);font-variation-settings:"opsz" 120,"SOFT" 0}
h2{font-size:clamp(1.85rem,1.1rem + 2.6vw,3.05rem);font-variation-settings:"opsz" 72}
h3{font-size:1.32rem;font-variation-settings:"opsz" 30}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:var(--sec)}
.grid-2{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2.2rem,5vw,5rem);align-items:start}

.kicker{
  font-size:.76rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tint);margin-bottom:1rem;
  transition:color var(--dur) var(--ease);
}
.lede{color:var(--ink2);font-size:1.1rem;max-width:56ch;margin-top:1.1rem}
.section-head{max-width:64ch;margin-bottom:clamp(2.4rem,5vw,4rem)}
.prose p{color:var(--ink2);margin-top:1.1rem}
.prose p:first-child{margin-top:0}

.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:200;background:var(--accent);color:#fff;padding:.7rem 1.1rem;border-radius:8px}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:4px}

/* ── Conmutación de contenido por estación ────────────────── */
html[data-season="verano"] [data-s="invierno"],
html[data-season="invierno"] [data-s="verano"]{display:none}

/* contenedores que hacen crossfade en lugar de cortar */
.hero-title,.season-label,.section-head h2,.section-head .lede,
.lugar-text h2,.cta-body h2{display:grid}
.hero-title>[data-s],.season-label>[data-s],
.section-head h2>[data-s],.section-head .lede>[data-s],
.lugar-text h2>[data-s],.cta-body h2>[data-s]{
  grid-area:1/1;transition:opacity .5s var(--ease),transform .5s var(--ease);
}
html[data-season="verano"] .hero-title>[data-s="invierno"],
html[data-season="verano"] .season-label>[data-s="invierno"],
html[data-season="verano"] .section-head h2>[data-s="invierno"],
html[data-season="verano"] .section-head .lede>[data-s="invierno"],
html[data-season="verano"] .lugar-text h2>[data-s="invierno"],
html[data-season="verano"] .cta-body h2>[data-s="invierno"],
html[data-season="invierno"] .hero-title>[data-s="verano"],
html[data-season="invierno"] .season-label>[data-s="verano"],
html[data-season="invierno"] .section-head h2>[data-s="verano"],
html[data-season="invierno"] .section-head .lede>[data-s="verano"],
html[data-season="invierno"] .lugar-text h2>[data-s="verano"],
html[data-season="invierno"] .cta-body h2>[data-s="verano"]{
  display:block;opacity:0;visibility:hidden;transform:translateY(-6px);
}

/* bloques que reaparecen con un fade suave */
.hacer-grid,.gal-rail,.prose p[data-s]{animation:rise .55s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* revelado al entrar en pantalla (sólo si hay JS con IntersectionObserver) */
.js-reveal .reveal{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js-reveal .reveal.on{opacity:1;transform:none}

/* ── Botones ──────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.92rem 1.6rem;border-radius:999px;font-weight:500;font-size:.98rem;
  letter-spacing:.005em;transition:transform .25s var(--ease),background-color .3s,color .3s,border-color .3s,box-shadow .3s;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 10px 26px -12px var(--accent)}
.btn-ghost{border:1px solid rgba(255,255,255,.5);color:#fff;backdrop-filter:blur(6px);background:rgba(255,255,255,.08)}
.cta .btn-ghost,.hero .btn-ghost{color:#fff}

/* ── Nav ──────────────────────────────────────────────────── */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  display:flex;align-items:center;gap:1.4rem;
  padding:.85rem var(--pad);
  transition:background-color .4s var(--ease),border-color .4s,padding .4s;
  border-bottom:1px solid transparent;
}
.nav.solid{background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px) saturate(1.3);border-bottom-color:var(--line)}
.brand{display:flex;align-items:center;gap:.7rem;flex-shrink:0}
.brand-mark{width:34px;height:22px;fill:currentColor;flex-shrink:0}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.brand-text strong{font-family:"Fraunces",serif;font-weight:500;font-size:1.16rem;letter-spacing:-.01em}
.brand-text em{font-style:normal;font-size:.66rem;letter-spacing:.19em;text-transform:uppercase;opacity:.68}
.nav:not(.solid) .brand,.nav:not(.solid) .nav-links a{color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.45)}

.nav-links{display:flex;gap:1.7rem;margin-left:auto;font-size:.94rem}
.nav-links a{position:relative;padding-block:.3rem;opacity:.9}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:currentColor;transition:right .3s var(--ease)}
.nav-links a:hover::after{right:0}
.nav-actions{display:flex;align-items:center;gap:.7rem;margin-left:auto}
.nav-links+.nav-actions{margin-left:0}

.nav-tel{font-size:.9rem;font-weight:500;letter-spacing:.01em;padding:.4rem .2rem;opacity:.92;border-bottom:1.5px solid transparent;transition:border-color .3s}
.nav-tel:hover{border-bottom-color:currentColor}
.nav:not(.solid) .nav-tel{color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.45)}
.btn-wa{background:var(--accent);color:var(--accent-ink);padding:.6rem 1.1rem;border-radius:999px;display:inline-flex;align-items:center;gap:.45rem;font-size:.9rem;font-weight:500;transition:transform .25s var(--ease),background-color .4s}
.btn-wa svg{width:16px;height:16px;fill:currentColor}
.btn-wa:hover{transform:translateY(-2px)}

/* Interruptor de estación */
.season-switch{display:inline-flex;align-items:center;gap:.6rem;padding:.32rem .8rem .32rem .32rem;border-radius:999px;border:1px solid var(--line);background:color-mix(in srgb,var(--card) 80%,transparent);backdrop-filter:blur(10px);transition:background-color .4s,border-color .4s,box-shadow .3s}
.nav:not(.solid) .season-switch{border-color:rgba(255,255,255,.35);background:rgba(24,20,16,.34);color:#fff}
.season-switch:hover{box-shadow:0 6px 18px -8px rgba(0,0,0,.4)}
.season-track{position:relative;width:52px;height:28px;border-radius:999px;background:var(--accent-soft);border:1px solid var(--line);flex-shrink:0;transition:background-color .5s var(--ease),border-color .5s}
html[data-season="invierno"] .season-track{background:rgba(159,182,196,.18)}
.season-thumb{position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:var(--tint);display:grid;place-items:center;transition:transform .55s var(--ease),background-color .5s var(--ease)}
html[data-season="invierno"] .season-thumb{transform:translateX(24px)}
.season-thumb svg{grid-area:1/1;width:14px;height:14px;transition:opacity .35s var(--ease),transform .55s var(--ease)}
.ico-sun{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round}
.ico-snow{fill:none;stroke:#14100C;stroke-width:1.7;stroke-linecap:round}
html[data-season="verano"] .ico-snow{opacity:0;transform:rotate(-90deg) scale(.4)}
html[data-season="invierno"] .ico-sun{opacity:0;transform:rotate(90deg) scale(.4)}
.season-label{font-size:.87rem;font-weight:500;min-width:8.8em}
.season-label>[data-s]{text-align:left}

/* Selector de idioma. Vive en las acciones y no adentro del menu: metido entre
   los links de seccion, y encima con una sola opcion visible, no se leia como
   interruptor — nadie encontraba el ingles. Las dos siempre a la vista. */
.lang-switch{
  display:inline-flex;align-items:center;padding:2px;border-radius:999px;
  border:1px solid var(--line);background:color-mix(in srgb,var(--card) 80%,transparent);
  backdrop-filter:blur(10px);font-size:.74rem;font-weight:600;letter-spacing:.08em;
  transition:background-color .4s,border-color .4s
}
.lang-switch>*{padding:.36rem .6rem;border-radius:999px;line-height:1;transition:background-color .35s,color .35s,opacity .3s}
.lang-switch .lang-on{background:var(--accent);color:var(--accent-ink)}
.lang-switch a{opacity:.72}
.lang-switch a:hover{opacity:1;background:var(--accent-soft)}
.nav:not(.solid) .lang-switch{border-color:rgba(255,255,255,.35);background:rgba(24,20,16,.34)}
.nav:not(.solid) .lang-switch a{color:#fff}

.burger{display:none;width:38px;height:38px;place-items:center;gap:5px;flex-direction:column}
.burger span{display:block;width:20px;height:1.6px;background:currentColor;transition:transform .3s var(--ease),opacity .3s}
.nav.open .burger span:first-child{transform:translateY(3.3px) rotate(45deg)}
.nav.open .burger span:last-child{transform:translateY(-3.3px) rotate(-45deg)}

/* ── Hero ─────────────────────────────────────────────────── */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate;overflow:hidden}
/* en pantallas muy altas un hero de 100svh deja el resto del sitio demasiado abajo */
@media (min-height:1120px){.hero{min-height:1080px}}
/* se extiende por debajo del borde para que el parallax no deje un hueco */
.hero-media{position:absolute;inset:0 0 -14% 0;z-index:-1;will-change:transform}

/* nieve: sólo en invierno, sólo sobre el hero, y nunca por encima del texto */
.nieve{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;opacity:0;transition:opacity 1.4s var(--ease)}
html[data-season="invierno"] .nieve{opacity:1}
.nieve i{position:absolute;top:-6%;border-radius:50%;background:#fff;animation:caer linear infinite}

/* Hojas de otoño. Mismo mecanismo que la nieve, pero la hoja se bambolea al
   caer: sin la rotación se lee como confeti. */
.hojas{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;opacity:0;transition:opacity 1.4s var(--ease)}
html[data-season="invierno"] .hojas{opacity:1}
.hojas i{
  position:absolute;top:-8%;border-radius:0 100% 0 100%;
  animation:hojear linear infinite;transform-origin:center
}
@keyframes hojear{
  from{transform:translate3d(0,0,0) rotate(0)}
  to{transform:translate3d(var(--deriva),118vh,0) rotate(var(--giro,540deg))}
}
@keyframes caer{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(var(--deriva),115vh,0)}
}

/* Motas de sol: la mitad cálida entre diciembre y febrero. Suben en vez de caer
   y laten, que es lo que hace la luz colándose entre los árboles. La opacidad va
   por --op porque el fundido de entrada y salida lo maneja el keyframe. */
.soles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;opacity:0;transition:opacity 1.4s var(--ease)}
html[data-season="verano"] .soles{opacity:1}
.soles i{
  position:absolute;bottom:-8%;border-radius:50%;opacity:0;
  background:radial-gradient(circle,#FFF8E4 0%,#FFE7AE 38%,rgba(255,214,128,0) 74%);
  box-shadow:0 0 12px rgba(255,226,158,.55);
  animation:flotar linear infinite
}
@keyframes flotar{
  from{transform:translate3d(0,0,0) scale(.85);opacity:0}
  14%{opacity:var(--op,.6)}
  50%{transform:translate3d(calc(var(--deriva) * .5),-58vh,0) scale(1.15)}
  86%{opacity:var(--op,.6)}
  to{transform:translate3d(var(--deriva),-118vh,0) scale(.85);opacity:0}
}

/* Mariquitas: la mitad cálida de septiembre a noviembre. Cruzan el cuadro en vez
   de caer, y son pocas — a partir de media docena dejan de leerse como bichos y
   pasan a leerse como manchas rojas sobre la foto. */
.bichos{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;opacity:0;transition:opacity 1.4s var(--ease)}
html[data-season="verano"] .bichos{opacity:1}
.bichos i{
  position:absolute;left:0;border-radius:46% 46% 50% 50%;background:#B8352C;
  animation:volar linear infinite
}
.bichos i::before{
  content:"";position:absolute;left:26%;top:-24%;width:48%;height:36%;
  background:#241713;border-radius:50% 50% 30% 30%
}
.bichos i::after{
  content:"";position:absolute;top:8%;bottom:0;left:calc(50% - .5px);width:1px;
  background:#241713
}
@keyframes volar{
  from{transform:translate3d(-12vw,0,0) rotate(var(--giro))}
  50%{transform:translate3d(50vw,calc(var(--caida) * .35),0) rotate(calc(var(--giro) * -1))}
  to{transform:translate3d(112vw,var(--caida),0) rotate(var(--giro))}
}
/* El hero rota entre las fotos de la estación activa. Las fotos son verticales y
   el hero apaisado, así que cover ya recorta más de la mitad del alto: --foco
   fija qué franja se ve en cada una, y el acercamiento arranca justo ahí, en el
   encuadre más abierto que permite cover. */
.hero-media .layer{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  object-position:center var(--foco,50%);
  transform-origin:center var(--foco,50%);
  transition:opacity 1.5s var(--ease);
}
.hero-media .layer.on{opacity:1}

/* Sólo en verano: en invierno el movimiento ya lo pone la nieve. 4% en ocho
   segundos, casi imperceptible, y siempre partiendo de la foto más abierta. */
html[data-season="verano"] .hero-media .layer.on{animation:acercar 13s linear both}
@keyframes acercar{from{transform:scale(1)}to{transform:scale(1.025)}}
@media (prefers-reduced-motion:reduce){
  html[data-season="verano"] .hero-media .layer.on{animation:none}
}
/* dos capas: el degradé vertical de la estación + uno lateral que sostiene la lectura del título */
.hero-scrim{position:absolute;inset:0;background:var(--scrim),linear-gradient(97deg,rgba(6,12,10,.55) 0%,rgba(6,12,10,.22) 42%,rgba(6,12,10,0) 72%);transition:background var(--dur) var(--ease)}

.hero-body{color:#fff;padding:0 var(--pad) clamp(2rem,4vw,3.2rem);width:100%;max-width:calc(var(--wrap) + 2*var(--pad));margin-inline:auto}
.hero-body .eyebrow{font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;opacity:.9;margin-bottom:1.1rem}
.hero-title{max-width:16ch;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.hero-score{display:flex;align-items:center;gap:.5rem;margin-top:1.6rem;font-size:.85rem;color:rgba(255,255,255,.8)}
.hero-score .stars{color:#F2B441;letter-spacing:.06em;font-size:.9rem}
.hero-score strong{font-family:"Fraunces",serif;font-size:1rem;font-weight:500}

.hero-strip{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:.5rem clamp(1.2rem,4vw,3.2rem);
  padding:1.05rem var(--pad);
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(12px);border-top:1px solid var(--line);
  font-size:.83rem;letter-spacing:.09em;text-transform:uppercase;font-weight:500;color:var(--ink2);
  transition:background-color var(--dur) var(--ease),border-color var(--dur)
}
/* sin los puntitos que los separaban, el aire lo hace el gap y nada mas */
.hero-strip span{white-space:nowrap}

/* ── El lugar ─────────────────────────────────────────────── */
.lugar{background:var(--bg);transition:background-color var(--dur) var(--ease)}
.lugar-text h2{margin-bottom:1.5rem}
.ticks{margin-top:2rem;display:grid;gap:.75rem}
.ticks li{position:relative;padding-left:1.9rem;color:var(--ink2);font-size:.98rem}
.ticks li::before{content:"";position:absolute;left:0;top:.52em;width:11px;height:6px;border-left:1.8px solid var(--accent);border-bottom:1.8px solid var(--accent);transform:rotate(-45deg);transition:border-color var(--dur)}

.lugar-media{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.fig{position:relative;border-radius:var(--r);overflow:hidden;background:var(--bg2);box-shadow:var(--shadow)}
.fig::after{content:"";display:block;padding-top:76%}
.fig-tall{grid-column:1/-1}
.fig-tall::after{padding-top:64%}
.fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .8s var(--ease),transform 1.2s var(--ease)}
html[data-season="verano"] .fig img[data-s="invierno"],
html[data-season="invierno"] .fig img[data-s="verano"]{display:block;opacity:0;transform:scale(1.05)}

/* ── Cabañas ──────────────────────────────────────────────── */
.cabanas{background:var(--bg2);transition:background-color var(--dur) var(--ease)}
.cab-list{display:grid;gap:clamp(3rem,6vw,5.5rem)}
.cab{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.8rem,4vw,3.5rem);align-items:center}
.cab:nth-child(even) .cab-gallery{order:2}

.cab-gallery{position:relative;border-radius:var(--r);overflow:hidden;background:var(--card);box-shadow:var(--shadow)}
.cab-gallery::after{content:"";display:block;padding-top:68%}
.cab-gallery img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s var(--ease)}
.cab-gallery img.on{opacity:1}
.gal-nav{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center;padding:0 .7rem;pointer-events:none}
.gal-nav button{pointer-events:auto;width:40px;height:40px;border-radius:50%;background:rgba(12,16,20,.42);color:#fff;font-size:1.5rem;line-height:0;backdrop-filter:blur(8px);opacity:0;transition:opacity .3s,background-color .3s,transform .3s}
.cab-gallery:hover .gal-nav button,.gal-nav button:focus-visible{opacity:1}
.gal-nav button:hover{background:rgba(12,16,20,.72);transform:scale(1.08)}
.gal-dots{position:absolute;left:0;right:0;bottom:.85rem;display:flex;justify-content:center;gap:.4rem}
.gal-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.45);transition:width .35s var(--ease),background-color .35s}
.gal-dots i.on{width:20px;background:#fff}

.cab-meta{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}
.cab-meta span{font-size:.74rem;letter-spacing:.11em;text-transform:uppercase;font-weight:600;color:var(--tint);padding:.3rem .7rem;border:1px solid var(--line);border-radius:999px;transition:color var(--dur),border-color var(--dur)}
.cab-info h3{font-size:clamp(1.5rem,1.1rem + 1.1vw,2.1rem);margin-bottom:.8rem}
.cab-info>p{color:var(--ink2)}
.chips{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.3rem}
.chips li{font-size:.84rem;padding:.36rem .82rem;border-radius:8px;background:var(--card);border:1px solid var(--line);color:var(--ink2);transition:background-color var(--dur),border-color var(--dur),color var(--dur)}
.chips .chip-acc{background:var(--accent-soft);border-color:transparent;color:var(--accent);font-weight:500}
html[data-season="invierno"] .chips .chip-acc{color:var(--accent)}
.link-wa{display:inline-block;margin-top:1.5rem;font-weight:500;color:var(--accent);border-bottom:1.5px solid transparent;transition:border-color .3s,color var(--dur)}
.link-wa:hover{border-bottom-color:currentColor}

/* ── Servicios ────────────────────────────────────────────── */
.serv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,3vw,2.2rem)}
.serv-col{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:clamp(1.5rem,3vw,2.2rem);transition:background-color var(--dur),border-color var(--dur)}
.serv-col h3{font-size:1.16rem;margin-bottom:1.2rem;padding-bottom:1rem;border-bottom:1px solid var(--line);transition:border-color var(--dur)}
.serv-col li{position:relative;padding-left:1.35rem;color:var(--ink2);font-size:.97rem;line-height:1.55;margin-bottom:.72rem}
.serv-col li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--tint);transition:background-color var(--dur)}

/* ── Qué hacer ────────────────────────────────────────────── */
.hacer{background:var(--bg2);transition:background-color var(--dur) var(--ease)}
.hacer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.4vw,1.6rem)}
.do-card{perspective:1400px;cursor:pointer;min-height:26rem}
.do-inner{position:relative;height:100%;transform-style:preserve-3d;transition:transform .75s var(--ease)}
.do-card.on .do-inner{transform:rotateY(180deg)}
.do-front,.do-back{
  position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;
  transition:background-color var(--dur),border-color var(--dur),box-shadow .35s;
}
.do-back{transform:rotateY(180deg);justify-content:center;overflow-y:auto}
.do-card:hover .do-front,.do-card:hover .do-back{box-shadow:var(--shadow)}
.do-front>picture{flex-shrink:0}
.do-front>img,.do-front>picture>img{width:100%;height:clamp(150px,15vw,190px);object-fit:cover;flex-shrink:0}
.do-body{padding:clamp(1.2rem,2.2vw,1.6rem)}
.do-front .do-body{flex:1}
.do-dist{display:inline-block;font-size:.71rem;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--tint);margin-bottom:.7rem;transition:color var(--dur)}
.do-card h3{font-size:1.24rem;margin-bottom:.55rem}
.do-card p{color:var(--ink2);font-size:.94rem;line-height:1.6}
.do-back p+p{margin-top:.8rem}
.do-more{
  display:block;padding:0 clamp(1.2rem,2.2vw,1.6rem) clamp(1.2rem,2.2vw,1.6rem);
  font-size:.79rem;letter-spacing:.11em;text-transform:uppercase;font-weight:600;color:var(--accent);
  transition:color var(--dur);
}
.do-back .do-more{padding:1.2rem 0 0}

/* ── Galería ──────────────────────────────────────────────── */
.gal-rail{display:flex;gap:.85rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--pad) 1rem;scrollbar-width:none;-ms-overflow-style:none}
/* se sigue pudiendo arrastrar; lo unico que se va es la barra */
.gal-rail::-webkit-scrollbar{display:none}
.gal-rail>picture,.gal-rail>img{flex:0 0 min(78vw,460px);scroll-snap-align:center}
.gal-rail img{width:100%;height:clamp(240px,42vw,380px);object-fit:cover;border-radius:var(--r);box-shadow:var(--shadow)}

/* ── Burbujas de opiniones ────────────────────────────────── */
/* van salpicadas por los márgenes y aparecen al pasar por cada sección */
.section{position:relative}
.burbuja{
  position:absolute;z-index:5;width:15.5rem;
  padding:1.05rem 1.3rem 1.15rem;
  border-radius:20px 20px 20px 7px;
  box-shadow:0 1px 3px rgba(20,25,20,.10),0 16px 38px -18px rgba(20,25,20,.55);
  opacity:0;transform:translateY(16px) scale(.93);
  transition:opacity .65s var(--ease),transform .65s var(--ease);
}
.burbuja.on{opacity:1;transform:none}
.burbuja p{font-family:"Fraunces",serif;font-size:1.03rem;line-height:1.32;font-style:italic;font-variation-settings:"opsz" 30}
.burbuja p::before{content:"“"}
.burbuja p::after{content:"”"}
.burbuja cite{
  display:block;margin-top:.7rem;padding-top:.6rem;font-style:normal;
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;opacity:.7;
  border-top:1px solid currentColor;
}
.burbuja cite{border-top-color:color-mix(in srgb,currentColor 22%,transparent)}

/* alternan de lado sección a sección: sobre una foto a la izquierda, o en el
   aire que deja el section-head a la derecha */
/* se posicionan contra la sección, no contra el .wrap: así la de la izquierda cae
   en el aire del padding inferior en vez de encima de la última columna */
.b-der{top:var(--sec);right:max(var(--pad),calc(50% - 610px));border-radius:20px 20px 7px 20px}
.b-izq{bottom:calc(var(--sec) * .3);left:max(var(--pad),calc(50% - 610px))}
.b-foto{bottom:-1rem;left:1.2rem;width:14rem}

.b1{background:#E9DCC2;color:#3A3324}
.b2{background:#3C6B33;color:#F2F7EE}
.b3{background:#A57C42;color:#FFF8EC}
.b4{background:#2E4B5F;color:#E9F2F8}
.b5{background:#7A5740;color:#F6EDE1}
.b6{background:#A9C7DA;color:#12252F}
html[data-season="invierno"] .b1{background:#4A3A2B;color:#F5ECDE}
html[data-season="invierno"] .b3{background:#9FB6C4;color:#16222A}
html[data-season="invierno"] .b5{background:#5E4433;color:#F3E9DC}

/* ── El clima adentro de las burbujas ─────────────────────── */
/* Mismo criterio que el hero: la perilla elige la mitad del ano y el mes elige
   cual de las dos animaciones corre en esa mitad. Las dos mitades conviven en el
   DOM para que el interruptor las cambie sin regenerar nada.
   La densidad del hero no se puede copiar: el cuadro mide 250x120 px y con 22
   piezas se lee como ruido encima de la frase. Van entre 2 y 8, mas chicas y
   mas lentas. --recorrido y --cruce los escribe app.js con el alto y el ancho
   medidos: un translate en % mide la pieza, no el cuadro. */
.burbuja{--recorrido:190px;--cruce:280px;--fx-borde:transparent}
.burbuja p,.burbuja cite{position:relative;z-index:1}
.b-fx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;border-radius:inherit}
.b-fx i{position:absolute;top:-16px}
/* fuera de pantalla no gastan cuadros */
.burbuja:not(.fx-on) .b-fx i{animation-play-state:paused}
html[data-season="verano"] .b-fx .frio{display:none}
html[data-season="invierno"] .b-fx .calor{display:none}

/* Sobre las burbujas claras el copo blanco desaparece: se lo dibuja con un pelo
   de contorno en vez de subirle la opacidad, que lo unico que hace es aplanarlo. */
.b1,.b6{--fx-borde:rgba(46,62,72,.38)}
html[data-season="invierno"] .b1{--fx-borde:transparent}
html[data-season="invierno"] .b3{--fx-borde:rgba(34,50,60,.38)}

.b-fx .copo{border-radius:50%;background:#fff;box-shadow:0 0 0 .6px var(--fx-borde);animation:b-caer linear infinite}
.b-fx .hoja{border-radius:0 100% 0 100%;box-shadow:0 0 0 .6px rgba(28,20,12,.20);animation:b-hojear linear infinite}
.b-fx .bicho{
  left:0;top:auto;border-radius:46% 46% 50% 50%;background:#B8352C;
  box-shadow:0 0 0 .6px rgba(28,14,11,.40);animation:b-volar linear infinite
}
.b-fx .bicho::before{content:"";position:absolute;left:26%;top:-22%;width:48%;height:36%;background:#241713;border-radius:50% 50% 30% 30%}
.b-fx .bicho::after{content:"";position:absolute;top:8%;bottom:0;left:calc(50% - .5px);width:1px;background:#241713}

@keyframes b-caer{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(var(--deriva),var(--recorrido),0)}
}
@keyframes b-hojear{
  from{transform:translate3d(0,0,0) rotate(0)}
  to{transform:translate3d(var(--deriva),var(--recorrido),0) rotate(var(--giro,540deg))}
}
@keyframes b-volar{
  from{transform:translate3d(-18px,0,0) rotate(var(--giro))}
  50%{transform:translate3d(calc(var(--cruce) * .5),var(--caida),0) rotate(calc(var(--giro) * -1))}
  to{transform:translate3d(var(--cruce),0,0) rotate(var(--giro))}
}
@media (prefers-reduced-motion:reduce){.b-fx{display:none}}

/* ── Ubicación ────────────────────────────────────────────── */
.ubi-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(1.6rem,4vw,3rem);align-items:start}
.ubi-h{font-size:1.05rem;letter-spacing:.02em;padding-bottom:.9rem;margin-bottom:.5rem;border-bottom:1px solid var(--line);transition:border-color var(--dur)}
.dist{display:grid}
.dist li{border-bottom:1px solid var(--line);transition:border-color var(--dur)}
.dist button{display:flex;width:100%;text-align:left;align-items:baseline;justify-content:space-between;gap:1rem;padding:.78rem .6rem;margin-inline:-.6rem;border-radius:9px;transition:background-color .25s}
.dist button:hover{background:var(--accent-soft)}
.dist li.on button{background:var(--accent-soft)}
.dist span{color:var(--ink2);font-size:.96rem;line-height:1.35;transition:color .25s}
.dist button:hover span,.dist li.on span{color:var(--ink)}
.dist b{font-family:"Fraunces",serif;font-weight:500;font-size:1rem;color:var(--accent);white-space:nowrap;transition:color var(--dur)}
.dist-reset{margin-top:1rem;font-size:.86rem;font-weight:500;color:var(--accent)}
.dist-nota{margin-top:1rem;font-size:.78rem;color:var(--ink2);opacity:.75}
.mapa-dir{margin-top:1rem;font-size:.88rem;color:var(--ink2);line-height:1.6}
.mapa-dir strong{color:var(--ink);font-weight:500}
.mapa-dir a{color:var(--ink2);border-bottom:1px solid var(--accent)}
.datos{margin-top:2rem;display:grid;gap:1.1rem}
.datos>div{display:grid;grid-template-columns:8.5rem 1fr;gap:1rem;padding-bottom:1.1rem;border-bottom:1px solid var(--line);transition:border-color var(--dur)}
.datos dt{font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--tint);padding-top:.28em;transition:color var(--dur)}
.datos dd{color:var(--ink2)}
.datos a{color:var(--ink);border-bottom:1px solid var(--accent)}
.mapa{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);height:clamp(300px,45vw,460px)}
.mapa iframe{width:100%;height:100%;border:0}
/* saturate bajo: sin eso el invert deja los parques de un verde chillón */
html[data-season="invierno"] .mapa iframe{filter:invert(.93) hue-rotate(180deg) saturate(.38) brightness(1.04) contrast(.88)}

/* ── CTA final ────────────────────────────────────────────── */
.cta{position:relative;isolation:isolate;text-align:center;color:#fff;padding-block:clamp(5rem,10vw,9rem);overflow:hidden}
.cta-media{position:absolute;inset:0;z-index:-1}
.cta-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,14,10,.52),rgba(8,14,10,.68))}
.cta-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .9s var(--ease)}
html[data-season="verano"] .cta-media img[data-s="invierno"],
html[data-season="invierno"] .cta-media img[data-s="verano"]{display:block;opacity:0}
.cta-body{max-width:52rem}
.cta-body h2{justify-items:center}
.cta-body p{margin-top:1.2rem;color:rgba(255,255,255,.85);font-size:1.08rem}
.cta .hero-cta{justify-content:center}
.cta-mail{margin-top:1.4rem;font-size:.92rem;color:rgba(255,255,255,.82)}
.cta-mail a{color:#fff;border-bottom:1px solid rgba(255,255,255,.45)}
.cta-mail a:hover{border-bottom-color:#fff}

/* ── Footer ───────────────────────────────────────────────── */
.footer{background:var(--bg2);border-top:1px solid var(--line);padding-top:clamp(3rem,6vw,4.5rem);transition:background-color var(--dur),border-color var(--dur)}
.footer-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem 2.5rem;padding-bottom:2.2rem}
.footer-contacto{font-size:.92rem;color:var(--ink2);line-height:1.7}
.footer-contacto a{color:var(--ink);border-bottom:1px solid var(--accent);transition:border-color var(--dur)}
.footer-contacto a:hover{border-bottom-width:2px}
.footer-social{display:flex;gap:.6rem}
.footer-social a{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--ink2);
  transition:color .3s,border-color .3s,background-color .3s,transform .3s var(--ease);
}
.footer-social svg{width:19px;height:19px;fill:currentColor}
.footer-social a:hover{color:var(--accent-ink);background:var(--accent);border-color:var(--accent);transform:translateY(-2px)}
.footer-legal{border-top:1px solid var(--line);padding:1.5rem var(--pad);text-align:center;font-size:.83rem;color:var(--ink2);transition:border-color var(--dur)}
.creditos{display:block;margin-top:.5rem;font-size:.72rem;opacity:.6;max-width:62ch;margin-inline:auto;line-height:1.5}

/* ── FAB WhatsApp ─────────────────────────────────────────── */
.fab-wa{position:fixed;right:1.1rem;bottom:1.1rem;z-index:90;width:54px;height:54px;border-radius:50%;background:#25D366;display:none;place-items:center;box-shadow:0 10px 28px -10px rgba(0,0,0,.55)}
.fab-wa svg{width:26px;height:26px;fill:#fff}

/* ── Responsive ───────────────────────────────────────────── */
/* sin márgenes libres las burbujas pasan a ser un bloque más del flujo */
@media (max-width:1240px){
  /* relative y no static: la capa del clima va absoluta adentro y con static se
     escaparía a la sección entera. inset:auto porque relative sí
     aplica el top/right de .b-der y la corría fuera del wrap. */
  .burbuja{position:relative;inset:auto;width:auto;max-width:26rem;margin:0 auto clamp(2rem,4vw,3rem);border-radius:20px 20px 20px 7px}
  .b-foto{margin-top:1.2rem}
}
@media (max-width:1180px){
  .nav-tel{display:none}
}
@media (max-width:1000px){
  .grid-2,.ubi-grid{grid-template-columns:1fr}
  .cab{grid-template-columns:1fr}
  .cab:nth-child(even) .cab-gallery{order:0}
  .serv-grid,.hacer-grid{grid-template-columns:repeat(2,1fr)}
  .mapa{order:2}
}
@media (max-width:860px){
  html{scroll-padding-top:74px}
  .nav-links{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;padding:.5rem var(--pad) 1.2rem;
    background:var(--bg);border-bottom:1px solid var(--line);
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
  }
  .nav.open .nav-links{opacity:1;visibility:visible;transform:none}
  .nav:not(.solid) .nav-links a{color:var(--ink);text-shadow:none}
  .nav-links a{padding:.7rem 0;border-bottom:1px solid var(--line);font-size:1rem}
  .nav-links a:last-child{border-bottom:0}
  .nav.open{background:var(--bg);border-bottom-color:transparent}
  .nav.open .brand{color:var(--ink);text-shadow:none}
  .burger{display:flex}
  .nav .btn-wa{display:none}
  .fab-wa{display:grid}
  .season-label{display:none}
  .season-switch{padding:.3rem}
  /* el selector de idioma suma 64px a una fila que ya venia justa: en el celular
     va compacto o se lleva la hamburguesa fuera de pantalla */
  .nav-actions{gap:.5rem}
  .lang-switch{font-size:.68rem;letter-spacing:.05em}
  .lang-switch>*{padding:.3rem .42rem}
  .lugar-media{gap:.6rem}
}
@media (max-width:620px){
  /* el FAB de WhatsApp flota fijo abajo a la derecha y se comia los ultimos dos
     items de la tira: el padding derecho corre el bloque centrado fuera de su columna */
  .hero-strip{font-size:.7rem;gap:.45rem 1.1rem;padding:.9rem 4.4rem .9rem var(--pad)}
  /* con el idioma a la vista la bajada de la marca ya no entra en la fila */
  .brand-text em{display:none}
  .serv-grid,.hacer-grid{grid-template-columns:1fr}
  .datos>div{grid-template-columns:1fr;gap:.2rem}
  .hero-cta .btn{flex:1 1 100%}
  .fig-tall::after{padding-top:72%}
  .dist button{flex-direction:column;align-items:flex-start;gap:.15rem}
  .do-card{min-height:24rem}

  /* En vertical el bloque de texto se comía dos tercios del hero y la cabaña
     quedaba tapada. Se achica la tipografía, se recorta la bajada y el foco de
     cada foto sube (--foco-m) para que el sujeto caiga en la franja limpia. */
  .hero-title{font-size:1.95rem;line-height:1.14;max-width:15ch}
  .hero-cta{margin-top:1.4rem;gap:.55rem}
  .hero-cta .btn{padding:.8rem 1.4rem}
  .hero-score{margin-top:1.1rem}
    .hero-body{padding-bottom:1.5rem}
  /* En vertical la foto entra entera de alto y el recorte es a lo ancho, así que
     el --foco no interviene: lo que tapaba la cabaña era el degradado. El de
     escritorio es lateral (el texto ocupa media pantalla); acá el texto ocupa
     todo el ancho, así que va uno vertical mucho más liviano y la legibilidad
     la sostiene la sombra del texto. */
  .hero-scrim{background:var(--scrim-m)}
  .hero-title{text-shadow:0 1px 3px rgba(0,0,0,.55),0 2px 24px rgba(0,0,0,.5)}
    .hero-score,  /* una sola línea que se arrastra: apilado en tres se comía otro cuarto de pantalla */
}

/* ── Visor de fotos ───────────────────────────────────────── */
/* El carrusel es un scroller nativo con snap: el swipe del dedo lo maneja el
   navegador, no JS, así que arrastra con la inercia de siempre. */
.zoomable{cursor:zoom-in}
.lb{position:fixed;inset:0;z-index:200;background:rgba(5,9,13,.97);backdrop-filter:blur(14px);display:flex;flex-direction:column;opacity:0;transition:opacity .28s var(--ease)}
.lb[hidden]{display:none}
.lb.on{opacity:1}
.lb-track{
  flex:1;min-height:0;display:flex;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;overscroll-behavior:contain;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.lb-track::-webkit-scrollbar{display:none}
/* La diapositiva lleva alto propio y la foto lo llena con contain. Con grid +
   place-items:center la fila se autodimensiona al contenido, así que el
   max-height:100% de la foto quedaba circular y no clampeaba: las fotos más
   grandes que el visor se salían y overflow-y:hidden las cortaba. Además así
   todas ocupan el mismo cuadro y el carrusel deja de saltar de tamaño. */
.lb-slide{flex:0 0 100%;height:100%;scroll-snap-align:center;padding:3.6rem clamp(1rem,5vw,4.6rem) 1rem}
.lb-slide img{width:100%;height:100%;object-fit:contain}
.lb-bar{
  display:flex;align-items:center;gap:1rem;padding:.9rem 1.1rem calc(.9rem + env(safe-area-inset-bottom));
  color:rgba(255,255,255,.82);font-size:.86rem;line-height:1.4;
}
.lb-cap{flex:1;min-width:0}
.lb-num{font-variant-numeric:tabular-nums;color:rgba(255,255,255,.55);flex-shrink:0}
.lb-x{
  position:absolute;top:.7rem;right:.7rem;z-index:2;width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;font-size:1.7rem;line-height:0;
  display:grid;place-items:center;backdrop-filter:blur(8px);transition:background-color .3s;
}
.lb-x:hover{background:rgba(255,255,255,.22)}
.lb-nav{
  position:absolute;top:50%;translate:0 -50%;z-index:2;width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;font-size:1.9rem;line-height:0;
  display:grid;place-items:center;backdrop-filter:blur(8px);transition:background-color .3s,opacity .3s;
}
.lb-nav:hover{background:rgba(255,255,255,.22)}
.lb-nav[disabled]{opacity:.25;pointer-events:none}
.lb-prev{left:.8rem}
.lb-next{right:.8rem}
/* con el dedo se pasa arrastrando: las flechas sólo estorban */
@media (hover:none){.lb-nav{display:none}}

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