.fre3d {
  --fre3d-paper: #f1eee6;
  --fre3d-ink: #141510;
  --fre3d-line: rgba(241, 238, 230, .24);
  position: relative;
  isolation: isolate;
  min-height: 680px;
  height: min(920px, 94svh);
  overflow: hidden;
  background: #2e302b;
  color: var(--fre3d-paper);
  font-family: Inter, Arial, Helvetica, sans-serif;
}

.fre3d *, .fre3d *::before, .fre3d *::after { box-sizing: border-box; }
.fre3d button { font: inherit; }
.fre3d__canvas, .fre3d__vignette, .fre3d__weather-scene, .fre3d__particles { position: absolute; inset: 0; }
.fre3d__canvas { z-index: 0; }
.fre3d__vignette {
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(9,10,8,.63), rgba(9,10,8,.1) 42%, transparent 70%),
    linear-gradient(180deg, rgba(8,9,7,.22), transparent 31%, transparent 58%, rgba(8,9,7,.7)),
    radial-gradient(circle at 56% 38%, transparent 34%, rgba(8,9,7,.1));
}

.fre3d__weather-scene { z-index: 1; overflow: hidden; pointer-events: none; transition: background-color .9s ease, opacity .9s ease; }
.fre3d[data-weather="overcast"] .fre3d__weather-scene,
.fre3d[data-weather="rain"] .fre3d__weather-scene,
.fre3d[data-weather="snow"] .fre3d__weather-scene { background: linear-gradient(180deg,rgba(72,82,84,.35),rgba(92,102,101,.08) 56%,transparent 78%); }
.fre3d[data-day="false"] .fre3d__weather-scene { background-color: rgba(9,18,30,.34); mix-blend-mode: multiply; }
.fre3d__sun { position: absolute; top: 11%; right: 15%; width: clamp(72px,8vw,124px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle,rgba(255,248,214,.96) 0 31%,rgba(255,220,143,.55) 43%,rgba(255,211,119,0) 72%); opacity: 0; transform: scale(.84); transition: opacity .8s ease,transform 1s ease; }
.fre3d[data-weather="clear"][data-day="true"] .fre3d__sun,
.fre3d[data-weather="partly-cloudy"][data-day="true"] .fre3d__sun { opacity: .72; transform: scale(1); }
.fre3d[data-weather="partly-cloudy"] .fre3d__sun { opacity: .45; }
.fre3d[data-day="false"] .fre3d__sun { opacity: .46; background: radial-gradient(circle at 42% 42%,#ecf2f3 0 29%,#a8bbc7 35%,rgba(153,180,196,0) 68%); }
.fre3d__cloud { position: absolute; width: clamp(190px,24vw,390px); height: clamp(42px,6vw,84px); border-radius: 50%; background: rgba(223,228,223,.34); filter: blur(8px); opacity: 0; box-shadow: 62px -25px 0 8px rgba(225,230,225,.3),142px -8px 0 17px rgba(215,221,218,.27),218px 4px 0 3px rgba(225,230,225,.24); transition: opacity .9s ease; animation: fre3d-cloud-drift 34s ease-in-out infinite alternate; }
.fre3d__cloud--one { top: 13%; left: 43%; }
.fre3d__cloud--two { top: 29%; left: 68%; transform: scale(.76); animation-duration: 43s; animation-direction: alternate-reverse; }
.fre3d[data-weather="partly-cloudy"] .fre3d__cloud--one { opacity: .5; }
.fre3d[data-weather="partly-cloudy"] .fre3d__cloud--two { opacity: .2; }
.fre3d[data-weather="overcast"] .fre3d__cloud,
.fre3d[data-weather="fog"] .fre3d__cloud,
.fre3d[data-weather="rain"] .fre3d__cloud,
.fre3d[data-weather="snow"] .fre3d__cloud { opacity: .68; }
.fre3d[data-weather="rain"] .fre3d__cloud,
.fre3d[data-weather="snow"] .fre3d__cloud { filter: blur(10px) brightness(.74); }
.fre3d__mist { position: absolute; right: -12%; bottom: 20%; width: 72%; height: 18%; border-radius: 50%; background: rgba(224,230,226,.42); filter: blur(28px); opacity: 0; }
.fre3d[data-weather="fog"] .fre3d__mist { opacity: .72; animation: fre3d-mist-drift 18s ease-in-out infinite alternate; }
.fre3d__particles { width: 100%; height: 100%; }

.fre3d__heading {
  position: absolute;
  z-index: 3;
  top: clamp(34px, 6vw, 82px);
  left: clamp(24px, 6vw, 92px);
  width: min(630px, calc(100% - 48px));
  pointer-events: none;
  text-shadow: 0 2px 24px rgba(0,0,0,.34);
}

.fre3d__eyebrow, .fre3d__meta, .fre3d__disclaimer {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .19em;
  text-transform: uppercase;
}

.fre3d__eyebrow { display: flex; align-items: center; gap: 12px; color: rgba(241,238,230,.82); }
.fre3d__eyebrow span { width: 34px; height: 1px; background: currentColor; }
.fre3d__heading h2 {
  max-width: 620px;
  margin: 18px 0 14px;
  color: var(--fre3d-paper);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(52px, 7vw, 102px);
  font-weight: 400;
  line-height: .86;
  letter-spacing: -.055em;
}
.fre3d__heading > p:last-child { max-width: 470px; margin: 0; color: rgba(241,238,230,.79); font-size: clamp(14px,1.25vw,17px); line-height: 1.58; }

.fre3d__mode {
  position: absolute;
  z-index: 5;
  top: 24px;
  right: 72px;
  display: flex;
  padding: 4px;
  border: 1px solid var(--fre3d-line);
  border-radius: 999px;
  background: rgba(17,18,14,.64);
  backdrop-filter: blur(12px);
}
.fre3d__mode button {
  min-width: 86px;
  padding: 9px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(241,238,230,.66);
  cursor: pointer;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.fre3d__mode button[aria-pressed="true"] { background: var(--fre3d-paper); color: var(--fre3d-ink); }

.fre3d__weather-card { position: absolute; z-index: 5; top: 78px; right: 72px; display: grid; grid-template-columns: 42px minmax(0,1fr); align-items: center; gap: 11px; width: min(252px,calc(100% - 48px)); padding: 12px 14px; border: 1px solid var(--fre3d-line); border-radius: 2px; background: rgba(17,18,14,.66); color: var(--fre3d-paper); cursor: pointer; text-align: left; box-shadow: 0 12px 32px rgba(0,0,0,.18); backdrop-filter: blur(14px) saturate(.8); transition: background-color .18s ease,transform .18s ease; }
.fre3d__weather-card:hover,.fre3d__weather-card:focus-visible { background: rgba(17,18,14,.82); transform: translateY(-2px); }
.fre3d__weather-icon { position: relative; display: block; width: 38px; height: 38px; border-radius: 50%; background: radial-gradient(circle,#fff0b9 0 24%,rgba(244,207,121,.26) 28% 55%,transparent 58%); }
.fre3d[data-weather="unavailable"] .fre3d__weather-icon { border: 1px solid rgba(241,238,230,.34); background: transparent; }
.fre3d[data-weather="unavailable"] .fre3d__weather-icon::after { position: absolute; inset: 50% 8px auto; height: 1px; background: rgba(241,238,230,.58); content: ""; }
.fre3d[data-weather="partly-cloudy"] .fre3d__weather-icon::after,
.fre3d[data-weather="overcast"] .fre3d__weather-icon::after,
.fre3d[data-weather="fog"] .fre3d__weather-icon::after,
.fre3d[data-weather="rain"] .fre3d__weather-icon::after,
.fre3d[data-weather="snow"] .fre3d__weather-icon::after { position: absolute; right: -1px; bottom: 5px; width: 25px; height: 10px; border-radius: 999px; background: #d9dfdc; box-shadow: -6px -4px 0 -1px #d9dfdc,5px -6px 0 -2px #d9dfdc; content: ""; }
.fre3d[data-weather="overcast"] .fre3d__weather-icon,
.fre3d[data-weather="fog"] .fre3d__weather-icon,
.fre3d[data-weather="rain"] .fre3d__weather-icon,
.fre3d[data-weather="snow"] .fre3d__weather-icon { background: transparent; }
.fre3d[data-weather="rain"] .fre3d__weather-icon::before,
.fre3d[data-weather="snow"] .fre3d__weather-icon::before { position: absolute; right: 3px; bottom: -1px; color: #dbeaf1; font-size: 15px; letter-spacing: 3px; content: "///"; transform: rotate(16deg); }
.fre3d[data-weather="snow"] .fre3d__weather-icon::before { right: 1px; bottom: -2px; content: "•••"; transform: none; }
.fre3d__weather-copy { display: grid; min-width: 0; gap: 3px; }
.fre3d__weather-copy > span { color: rgba(241,238,230,.56); font-size: 9px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.fre3d__weather-copy strong { overflow: hidden; color: var(--fre3d-paper); font: 400 16px/1.15 Georgia,"Times New Roman",serif; text-overflow: ellipsis; white-space: nowrap; }
.fre3d__weather-copy small { color: rgba(241,238,230,.55); font-size: 9px; }

.fre3d__card {
  position: absolute;
  z-index: 4;
  left: clamp(24px, 6vw, 92px);
  bottom: 116px;
  display: grid;
  grid-template-columns: 46px minmax(0,390px);
  gap: 18px;
  width: min(510px, calc(100% - 48px));
  padding: 22px 24px 24px;
  border: 1px solid var(--fre3d-line);
  background: rgba(17,18,14,.66);
  backdrop-filter: blur(14px) saturate(.75);
}
.fre3d__counter { margin: 1px 0 0; font: 21px/1 Georgia, serif; }
.fre3d__counter small { color: rgba(241,238,230,.46); font-size: 12px; }
.fre3d__meta { color: rgba(241,238,230,.56); }
.fre3d__card h3 { margin: 8px 0 7px; color: var(--fre3d-paper); font: 400 clamp(22px,2.3vw,34px)/1.05 Georgia,serif; }
.fre3d__card div > p:last-child { margin: 0; color: rgba(241,238,230,.7); font-size: 13px; line-height: 1.55; }

.fre3d__views {
  position: absolute;
  z-index: 5;
  right: clamp(24px,4vw,64px);
  bottom: 34px;
  left: clamp(24px,4vw,64px);
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  border-top: 1px solid var(--fre3d-line);
}
.fre3d__views button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 16px 16px 0;
  border: 0;
  background: transparent;
  color: rgba(241,238,230,.58);
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .11em;
  text-align: left;
  text-transform: uppercase;
}
.fre3d__views button::before { position: absolute; top: -1px; right: 100%; left: 0; height: 2px; background: var(--fre3d-paper); content: ""; transition: right .26s ease; }
.fre3d__views button:hover, .fre3d__views button:focus-visible, .fre3d__views button.is-active { color: var(--fre3d-paper); }
.fre3d__views button.is-active::before { right: 20%; }
.fre3d__views button span { color: rgba(241,238,230,.39); font: 14px Georgia,serif; letter-spacing: 0; }
.fre3d__disclaimer { position: absolute; z-index: 4; right: 20px; bottom: 91px; color: rgba(241,238,230,.46); font-size: 9px; }

.fre3d__loading, .fre3d__fallback { position: absolute; z-index: 9; inset: 0; display: flex; align-items: center; justify-content: center; background: #22231f; }
.fre3d__loading[hidden], .fre3d__fallback[hidden] { display: none; }
.fre3d__loading { gap: 13px; color: rgba(241,238,230,.72); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.fre3d__loading span { width: 9px; height: 9px; border: 1px solid rgba(241,238,230,.38); border-top-color: var(--fre3d-paper); border-radius: 50%; animation: fre3d-spin .9s linear infinite; }
.fre3d__fallback {
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(28px,8vw,120px);
  background: linear-gradient(130deg,rgba(15,16,13,.58),rgba(15,16,13,.94)), url("https://fitzroyexpediciones.com.ar/wp-content/uploads/2026/08/fre-autumn-el-chalten.webp") center/cover, #30322c;
}
.fre3d__fallback h3 { max-width: 650px; margin: 20px 0 12px; color: var(--fre3d-paper); font: 400 clamp(42px,7vw,88px)/.95 Georgia,serif; }
.fre3d__fallback > p:last-child { max-width: 520px; color: rgba(241,238,230,.68); line-height: 1.6; }

.fre3d__marker { position: relative; display: grid; width: 30px; height: 30px; place-items: center; border: 0; border-radius: 50%; background: rgba(241,238,230,.16); cursor: pointer; box-shadow: 0 0 0 1px rgba(241,238,230,.34); backdrop-filter: blur(5px); }
.fre3d__marker span { width: 7px; height: 7px; border-radius: 50%; background: var(--fre3d-paper); box-shadow: 0 0 14px rgba(241,238,230,.9); }
.fre3d__marker:hover, .fre3d__marker:focus-visible { transform: scale(1.14); }
.fre3d__marker b { position: absolute; top: 38px; left: 50%; padding: 5px 8px; border: 1px solid rgba(241,238,230,.28); border-radius: 2px; background: rgba(17,18,14,.78); color: var(--fre3d-paper); font-size: 9px; letter-spacing: .11em; text-transform: uppercase; white-space: nowrap; transform: translateX(-50%); backdrop-filter: blur(8px); }
.fre3d__marker--town { width: 38px; height: 38px; background: rgba(179,91,47,.55); box-shadow: 0 0 0 2px rgba(241,238,230,.68),0 10px 24px rgba(0,0,0,.28); }

.fre3d .maplibregl-ctrl-top-right { top: 76px; right: 12px; }
.fre3d .maplibregl-ctrl-group { overflow: hidden; border: 1px solid var(--fre3d-line); border-radius: 2px; background: rgba(17,18,14,.7); box-shadow: none; backdrop-filter: blur(10px); }
.fre3d .maplibregl-ctrl-group button { width: 36px; height: 36px; }
.fre3d .maplibregl-ctrl button .maplibregl-ctrl-icon { filter: invert(1) opacity(.76); }
.fre3d .maplibregl-ctrl-attrib { color: #35372f; font-size: 9px; }
.fre3d .maplibregl-cooperative-gesture-screen { background: rgba(17,18,14,.72); color: var(--fre3d-paper); font-size: 13px; backdrop-filter: blur(6px); }
.fre3d button:focus-visible { outline: 2px solid var(--fre3d-paper); outline-offset: 3px; }

@keyframes fre3d-spin { to { transform: rotate(360deg); } }
@keyframes fre3d-cloud-drift { from { transform: translate3d(-6%,0,0) scale(.92); } to { transform: translate3d(9%,7px,0) scale(1.04); } }
@keyframes fre3d-mist-drift { from { transform: translate3d(-7%,0,0); } to { transform: translate3d(7%,-10px,0); } }

@media (max-width: 820px) {
  .fre3d { height: 88svh; min-height: 690px; }
  .fre3d__vignette { background: linear-gradient(180deg,rgba(8,9,7,.58),transparent 34%,transparent 48%,rgba(8,9,7,.86)), radial-gradient(circle at 50% 36%,transparent 20%,rgba(8,9,7,.18)); }
  .fre3d__heading { top: 28px; left: 22px; width: calc(100% - 44px); }
  .fre3d__heading h2 { max-width: 430px; margin-top: 14px; font-size: clamp(46px,15vw,72px); }
  .fre3d__heading > p:last-child { max-width: 380px; font-size: 13px; }
  .fre3d__mode { top: auto; right: 18px; bottom: 280px; }
  .fre3d__mode button { min-width: 75px; padding: 8px 10px; }
  .fre3d__weather-card { top: auto; right: 18px; bottom: 330px; width: 226px; padding: 10px 12px; }
  .fre3d__card { right: 18px; bottom: 142px; left: 18px; grid-template-columns: 34px 1fr; width: auto; padding: 17px 18px 18px; }
  .fre3d__card div > p:last-child { display: none; }
  .fre3d__views { right: 0; bottom: 28px; left: 0; display: flex; overflow-x: auto; padding-left: 18px; border-top: 0; scrollbar-width: none; scroll-snap-type: x proximity; }
  .fre3d__views::-webkit-scrollbar { display: none; }
  .fre3d__views button { flex: 0 0 auto; min-width: 156px; padding: 17px 20px 15px 0; border-top: 1px solid var(--fre3d-line); scroll-snap-align: start; }
  .fre3d__views button.is-active::before { right: 28px; }
  .fre3d__disclaimer { display: none; }
  .fre3d .maplibregl-ctrl-top-right { top: 168px; right: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .fre3d *, .fre3d *::before, .fre3d *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}