WePlan La Fortuna

:root {
–gold: #C9A84C;
–gold-light: #E2C98A;
–gold-dark: #8B6914;
–green-deep: #122B1C;
–green-mid: #1E4D34;
–green-light: #3A8A60;
–red: #B83228;
–red-dark: #8C2219;
–cream: #F8F4EC;
–dark: #0C1610;
–dark-mid: #162212;
–text-muted: rgba(248,244,236,0.55);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:’Jost’,sans-serif;background:var(–dark);color:var(–cream);overflow-x:hidden;cursor:none;}

/* CUSTOM CURSOR */
.cursor{position:fixed;width:8px;height:8px;background:var(–gold);border-radius:50%;pointer-events:none;z-index:9999;transition:transform 0.15s ease,opacity 0.15s;transform:translate(-50%,-50%);}
.cursor-ring{position:fixed;width:36px;height:36px;border:1px solid rgba(201,168,76,0.5);border-radius:50%;pointer-events:none;z-index:9998;transition:transform 0.35s ease,width 0.3s,height 0.3s,opacity 0.3s;transform:translate(-50%,-50%);}
body:hover .cursor{opacity:1;}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:500;padding:2rem 3.5rem;display:flex;align-items:center;justify-content:space-between;transition:all 0.5s ease;}
nav.scrolled{background:rgba(12,22,16,0.96);backdrop-filter:blur(20px);padding:1.1rem 3.5rem;border-bottom:1px solid rgba(201,168,76,0.18);}
.logo{font-family:’Cormorant Garamond’,serif;font-size:1.9rem;font-weight:600;color:var(–gold);letter-spacing:0.08em;text-decoration:none;line-height:1;}
.logo span{font-weight:300;color:var(–cream);font-size:1rem;display:block;letter-spacing:0.25em;text-transform:uppercase;margin-top:-2px;}
.nav-right{display:flex;align-items:center;gap:1.75rem;}
.lang-wrap{display:flex;align-items:center;gap:4px;}
.lang-btn{background:none;border:none;font-family:’Jost’,sans-serif;font-size:0.72rem;font-weight:500;letter-spacing:0.2em;color:var(–text-muted);cursor:pointer;padding:0.25rem 0.5rem;text-transform:uppercase;transition:color 0.3s;border-radius:2px;}
.lang-btn.active{background:var(–gold);color:var(–dark);}
.lang-divider{width:1px;height:12px;background:rgba(248,244,236,0.2);}
.hamburger{cursor:none;display:flex;flex-direction:column;gap:6px;padding:4px;background:none;border:none;}
.hamburger span{display:block;width:26px;height:1px;background:var(–cream);transition:all 0.45s cubic-bezier(0.77,0,0.175,1);transform-origin:center;}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;width:0;}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* MENU OVERLAY */
.menu-overlay{position:fixed;inset:0;z-index:499;background:var(–dark-mid);display:flex;flex-direction:column;justify-content:center;padding:5rem 4rem 3rem;transform:translateX(100%);transition:transform 0.7s cubic-bezier(0.77,0,0.175,1);overflow:hidden;}
.menu-overlay::after{content:»;position:absolute;bottom:-20%;right:-10%;width:700px;height:700px;border-radius:50%;border:1px solid rgba(201,168,76,0.06);pointer-events:none;}
.menu-overlay::before{content:»;position:absolute;top:-30%;left:-5%;width:500px;height:500px;border-radius:50%;border:1px solid rgba(201,168,76,0.04);pointer-events:none;}
.menu-overlay.open{transform:translateX(0);}
.menu-num{font-size:0.65rem;letter-spacing:0.25em;color:var(–gold);margin-bottom:0.3rem;opacity:0;transition:opacity 0.5s 0s;}
.menu-overlay.open .menu-num{opacity:0.6;}
.menu-overlay.open .menu-num:nth-of-type(1){transition-delay:0.15s;}
.menu-links{list-style:none;margin-bottom:3rem;}
.menu-links li{border-bottom:1px solid rgba(201,168,76,0.1);overflow:hidden;}
.menu-links li:first-child{border-top:1px solid rgba(201,168,76,0.1);}
.menu-links a{display:flex;align-items:center;justify-content:space-between;padding:1.6rem 0;font-family:’Cormorant Garamond’,serif;font-size:clamp(2.8rem,6vw,5.5rem);font-weight:300;color:var(–cream);text-decoration:none;letter-spacing:0.03em;transform:translateY(110%);transition:transform 0.65s cubic-bezier(0.77,0,0.175,1),color 0.3s,padding-left 0.4s;line-height:1;}
.menu-overlay.open .menu-links li:nth-child(1) a{transform:translateY(0);transition-delay:0.1s;}
.menu-overlay.open .menu-links li:nth-child(2) a{transform:translateY(0);transition-delay:0.16s;}
.menu-overlay.open .menu-links li:nth-child(3) a{transform:translateY(0);transition-delay:0.22s;}
.menu-overlay.open .menu-links li:nth-child(4) a{transform:translateY(0);transition-delay:0.28s;}
.menu-links a:hover{color:var(–gold);padding-left:1.5rem;}
.menu-arrow{font-size:1.5rem;opacity:0.25;transition:opacity 0.3s,transform 0.3s;}
.menu-links a:hover .menu-arrow{opacity:0.8;transform:translateX(8px);}
.menu-footer{display:flex;flex-wrap:wrap;gap:2rem;font-size:0.75rem;letter-spacing:0.15em;color:rgba(248,244,236,0.25);text-transform:uppercase;opacity:0;transition:opacity 0.5s 0.4s;}
.menu-overlay.open .menu-footer{opacity:1;}

/* HERO */
.hero{position:relative;height:100vh;min-height:680px;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.hero-svg-bg{position:absolute;inset:0;width:100%;height:100%;}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,18,10,0.45) 0%,rgba(8,18,10,0.05) 40%,rgba(8,18,10,0.6) 100%);}
.hero-content{position:relative;z-index:2;text-align:center;max-width:860px;padding:0 2rem;}
.hero-eyebrow{display:inline-flex;align-items:center;gap:1.2rem;font-size:0.72rem;letter-spacing:0.35em;text-transform:uppercase;color:var(–gold);margin-bottom:2.2rem;opacity:0;animation:fadeUp 1s ease forwards 0.4s;}
.hero-eyebrow::before,.hero-eyebrow::after{content:»;width:35px;height:1px;background:var(–gold);}
h1.hero-title{font-family:’Cormorant Garamond’,serif;font-size:clamp(3.8rem,9vw,8rem);font-weight:300;line-height:1.02;letter-spacing:-0.01em;color:var(–cream);opacity:0;animation:fadeUp 1.1s ease forwards 0.6s;}
h1.hero-title em{font-style:italic;color:var(–gold);}
.hero-tagline{margin-top:1.8rem;font-size:1rem;font-weight:300;letter-spacing:0.06em;color:rgba(248,244,236,0.7);line-height:1.7;opacity:0;animation:fadeUp 1s ease forwards 0.85s;max-width:600px;margin-left:auto;margin-right:auto;}
.hero-cta{margin-top:3rem;display:flex;justify-content:center;gap:1.25rem;flex-wrap:wrap;opacity:0;animation:fadeUp 1s ease forwards 1.05s;}
.btn-primary{display:inline-flex;align-items:center;gap:0.8rem;background:var(–red);color:white;border:none;padding:0.9rem 2.4rem;font-family:’Jost’,sans-serif;font-size:0.78rem;font-weight:500;letter-spacing:0.22em;text-transform:uppercase;text-decoration:none;cursor:none;transition:background 0.35s,transform 0.35s,box-shadow 0.35s;position:relative;overflow:hidden;}
.btn-primary::after{content:»;position:absolute;inset:0;background:var(–red-dark);transform:scaleX(0);transform-origin:left;transition:transform 0.4s ease;}
.btn-primary:hover::after{transform:scaleX(1);}
.btn-primary-inner{position:relative;z-index:1;display:flex;align-items:center;gap:0.8rem;}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 12px 35px rgba(184,50,40,0.35);}
.btn-ghost{display:inline-flex;align-items:center;gap:0.8rem;background:transparent;color:var(–cream);border:1px solid rgba(248,244,236,0.35);padding:0.9rem 2.4rem;font-family:’Jost’,sans-serif;font-size:0.78rem;font-weight:500;letter-spacing:0.22em;text-transform:uppercase;text-decoration:none;cursor:none;transition:all 0.35s;}
.btn-ghost:hover{border-color:var(–gold);color:var(–gold);transform:translateY(-3px);}
.btn-ghost-gold{border-color:rgba(201,168,76,0.5);color:var(–gold);}
.btn-ghost-gold:hover{border-color:var(–gold);background:rgba(201,168,76,0.08);}
.scroll-hint{position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:0.6rem;color:rgba(248,244,236,0.35);font-size:0.65rem;letter-spacing:0.28em;text-transform:uppercase;opacity:0;animation:fadeIn 1s ease forwards 1.5s;}
.scroll-bar{width:1px;height:55px;background:linear-gradient(to bottom,var(–gold),transparent);animation:scrollAnim 2.2s ease-in-out infinite;}
@keyframes scrollAnim{0%{transform:scaleY(0);transform-origin:top;}50%{transform:scaleY(1);transform-origin:top;}51%{transform:scaleY(1);transform-origin:bottom;}100%{transform:scaleY(0);transform-origin:bottom;}}

/* CANVAS PARTICLES */
#particleCanvas{position:absolute;inset:0;pointer-events:none;z-index:1;}

/* MARQUEE STRIP */
.marquee-strip{background:var(–gold);padding:0.75rem 0;overflow:hidden;white-space:nowrap;}
.marquee-inner{display:inline-flex;gap:3rem;animation:marquee 22s linear infinite;}
.marquee-item{font-size:0.7rem;letter-spacing:0.25em;text-transform:uppercase;color:var(–dark);font-weight:600;display:flex;align-items:center;gap:1.5rem;}
.marquee-item::after{content:’◆’;font-size:0.5rem;}
@keyframes marquee{0%{transform:translateX(0);}100%{transform:translateX(-50%);};}

/* STATS */
.stats-band{background:var(–green-mid);padding:4.5rem 3.5rem;position:relative;overflow:hidden;}
.stats-band::before{content:»;position:absolute;right:-8%;top:-80%;width:500px;height:500px;border-radius:50%;border:1px solid rgba(201,168,76,0.08);}
.stats-band::after{content:»;position:absolute;left:-5%;bottom:-60%;width:350px;height:350px;border-radius:50%;border:1px solid rgba(201,168,76,0.06);}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:2.5rem;max-width:1100px;margin:0 auto;}
.stat-item{text-align:center;}
.stat-num{font-family:’Cormorant Garamond’,serif;font-size:3.8rem;font-weight:300;color:var(–gold);line-height:1;}
.stat-unit{font-size:1.8rem;vertical-align:super;}
.stat-label{margin-top:0.6rem;font-size:0.72rem;letter-spacing:0.18em;text-transform:uppercase;color:rgba(248,244,236,0.5);line-height:1.5;}

/* HOTELS */
.hotels-section{background:var(–dark);padding:7rem 3.5rem;}
.section-header{display:grid;grid-template-columns:1fr 1fr;gap:4rem;max-width:1100px;margin:0 auto 4.5rem;align-items:end;}
.eyebrow{font-size:0.72rem;letter-spacing:0.3em;text-transform:uppercase;color:var(–gold);margin-bottom:1rem;display:flex;align-items:center;gap:0.8rem;}
.eyebrow::after{content:»;flex:0 0 45px;height:1px;background:var(–gold);}
.section-title{font-family:’Cormorant Garamond’,serif;font-size:clamp(2.8rem,5vw,4.2rem);font-weight:300;line-height:1.1;color:var(–cream);}
.section-title em{font-style:italic;color:var(–gold);}
.section-desc{color:var(–text-muted);line-height:1.9;font-weight:300;font-size:0.97rem;}
.hotels-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:1.75rem;max-width:1100px;margin:0 auto;}
.hotel-card{background:var(–dark-mid);border:1px solid rgba(201,168,76,0.12);overflow:hidden;transition:transform 0.45s ease,border-color 0.45s;cursor:none;position:relative;}
.hotel-card:hover{transform:translateY(-10px);border-color:rgba(201,168,76,0.45);}
.card-img{height:210px;overflow:hidden;position:relative;}
.card-img-inner{width:100%;height:100%;transition:transform 0.65s ease;}
.hotel-card:hover .card-img-inner{transform:scale(1.07);}
.card-badge{position:absolute;top:1rem;left:1rem;font-size:0.63rem;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;padding:0.3rem 0.85rem;}
.badge-luxury{background:var(–gold);color:var(–dark);}
.badge-mid{background:var(–green-light);color:white;}
.badge-boutique{background:rgba(201,168,76,0.85);color:var(–dark);}
.badge-premium{background:linear-gradient(135deg,#C9A84C,#E2C98A);color:var(–dark);}
.badge-value{background:rgba(58,138,96,0.9);color:white;}
.card-body{padding:1.6rem;}
.card-cat{font-size:0.68rem;letter-spacing:0.22em;text-transform:uppercase;color:var(–gold);margin-bottom:0.5rem;}
.card-name{font-family:’Cormorant Garamond’,serif;font-size:1.65rem;font-weight:400;color:var(–cream);line-height:1.2;margin-bottom:0.7rem;}
.card-desc{font-size:0.83rem;color:var(–text-muted);line-height:1.75;margin-bottom:1.3rem;}
.card-footer{display:flex;align-items:center;justify-content:space-between;padding-top:1.1rem;border-top:1px solid rgba(201,168,76,0.12);}
.price-from{font-size:0.65rem;letter-spacing:0.12em;text-transform:uppercase;color:rgba(248,244,236,0.35);}
.price-amt{font-family:’Cormorant Garamond’,serif;font-size:1.55rem;font-weight:600;color:var(–gold);}
.price-night{font-size:0.72rem;color:rgba(248,244,236,0.35);}
.btn-sm{background:var(–red);color:white;border:none;padding:0.55rem 1.15rem;font-family:’Jost’,sans-serif;font-size:0.68rem;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;cursor:none;transition:background 0.3s;}
.btn-sm:hover{background:var(–red-dark);}

/* NATURE / EXPERIENCES */
.nature-section{background:linear-gradient(150deg,var(–green-deep) 0%,var(–dark) 60%);padding:7rem 3.5rem;position:relative;overflow:hidden;}
.nature-section::before{content:»;position:absolute;top:0;right:0;width:45%;height:100%;background:url(«data:image/svg+xml,%3Csvg xmlns=’http://www.w3.org/2000/svg’ width=’500′ height=’600′ viewBox=’0 0 500 600’%3E%3Cellipse cx=’250′ cy=’300′ rx=’200′ ry=’280′ fill=’none’ stroke=’rgba(201,168,76,0.04)’ stroke-width=’1’/%3E%3Cellipse cx=’250′ cy=’300′ rx=’150′ ry=’220′ fill=’none’ stroke=’rgba(201,168,76,0.03)’ stroke-width=’1’/%3E%3C/svg%3E») center/contain no-repeat;pointer-events:none;}
.nature-grid{display:grid;grid-template-columns:1fr 1fr;gap:5rem;max-width:1100px;margin:0 auto;align-items:center;}
.nature-text p{color:var(–text-muted);line-height:1.95;font-weight:300;margin-top:1.6rem;font-size:0.97rem;}
.nature-cta{margin-top:2.8rem;}
.facts-list{display:flex;flex-direction:column;gap:1.25rem;}
.facts-intro{font-size:0.72rem;letter-spacing:0.3em;text-transform:uppercase;color:var(–gold);padding-bottom:0.5rem;border-bottom:1px solid rgba(201,168,76,0.2);margin-bottom:0.25rem;}
.fact-item{display:flex;gap:1.5rem;align-items:flex-start;padding:1.4rem 1.6rem;background:rgba(248,244,236,0.03);border:1px solid rgba(201,168,76,0.1);transition:all 0.35s;}
.fact-item:hover{background:rgba(248,244,236,0.06);border-color:rgba(201,168,76,0.28);}
.fact-icon{font-size:1.5rem;line-height:1;flex-shrink:0;margin-top:2px;}
.fact-title{font-family:’Cormorant Garamond’,serif;font-size:1.15rem;font-weight:600;color:var(–gold-light);margin-bottom:0.3rem;}
.fact-desc{font-size:0.82rem;color:var(–text-muted);line-height:1.65;}

/* TESTIMONIAL / CTA BAND */
.cta-band{background:var(–green-mid);padding:5rem 3.5rem;text-align:center;position:relative;overflow:hidden;}
.cta-band::before{content:’»‘;position:absolute;top:-2rem;left:50%;transform:translateX(-50%);font-family:’Cormorant Garamond’,serif;font-size:20rem;color:rgba(201,168,76,0.05);line-height:1;pointer-events:none;}
.cta-band-inner{max-width:700px;margin:0 auto;position:relative;}
.cta-quote{font-family:’Cormorant Garamond’,serif;font-size:clamp(1.8rem,4vw,3rem);font-weight:300;font-style:italic;line-height:1.4;color:var(–cream);margin-bottom:2.5rem;}
.cta-quote em{color:var(–gold);font-style:normal;}

/* FOOTER */
footer{background:#070D09;padding:5rem 3.5rem 2.5rem;border-top:1px solid rgba(201,168,76,0.12);}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;max-width:1100px;margin:0 auto 3.5rem;}
.footer-logo{font-family:’Cormorant Garamond’,serif;font-size:1.7rem;font-weight:600;color:var(–gold);letter-spacing:0.08em;display:block;margin-bottom:1rem;text-decoration:none;}
.footer-logo span{font-weight:300;color:var(–cream);font-size:0.85rem;display:block;letter-spacing:0.25em;text-transform:uppercase;}
.footer-desc{font-size:0.83rem;color:rgba(248,244,236,0.35);line-height:1.85;font-weight:300;}
.footer-col h4{font-size:0.68rem;letter-spacing:0.25em;text-transform:uppercase;color:var(–gold);margin-bottom:1.3rem;font-weight:500;}
.footer-col ul{list-style:none;}
.footer-col li{margin-bottom:0.7rem;}
.footer-col a{font-size:0.83rem;color:rgba(248,244,236,0.38);text-decoration:none;font-weight:300;transition:color 0.3s;}
.footer-col a:hover{color:var(–gold);}
.footer-bottom{max-width:1100px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding-top:2rem;border-top:1px solid rgba(201,168,76,0.08);font-size:0.72rem;color:rgba(248,244,236,0.2);flex-wrap:wrap;gap:1rem;}

/* ANIMATIONS */
@keyframes fadeUp{from{opacity:0;transform:translateY(32px);}to{opacity:1;transform:translateY(0);}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
.reveal{opacity:0;transform:translateY(38px);transition:opacity 0.85s ease,transform 0.85s ease;}
.reveal.visible{opacity:1;transform:translateY(0);}

/* RESPONSIVE */
@media(max-width:900px){
nav{padding:1.5rem 1.75rem;}
nav.scrolled{padding:1rem 1.75rem;}
.section-header{grid-template-columns:1fr;gap:1.5rem;}
.nature-grid{grid-template-columns:1fr;gap:3rem;}
.footer-grid{grid-template-columns:1fr 1fr;gap:2rem;}
.hotels-section,.nature-section{padding:5rem 1.75rem;}
}
@media(max-width:600px){
nav{padding:1.25rem 1.25rem;}
.menu-overlay{padding:3rem 1.5rem 2rem;}
.menu-links a{font-size:2.6rem;padding:1.2rem 0;}
h1.hero-title{font-size:3.4rem;}
.hero-cta{flex-direction:column;align-items:center;}
.footer-grid{grid-template-columns:1fr;}
.hotels-section,.nature-section{padding:4rem 1.25rem;}
.stats-band{padding:3rem 1.25rem;}
.footer-bottom{flex-direction:column;text-align:center;}
.cursor,.cursor-ring{display:none;}
}

WePlanLa Fortuna

// ─── TRANSLATIONS ─────────────────────────────────────────────
const T = {
es:{
‘hero.eyebrow’:’La Fortuna · Costa Rica · Pura Vida’,
‘hero.title’:’Donde la
naturaleza
te llama’,
‘hero.tagline’:’Hospedaje selecto al pie del Volcán Arenal — Experiencias personalizadas hechas a tu medida.’,
‘hero.cta1′:’Explorar Hoteles →’,’hero.cta2′:’Ver Experiencias’,’hero.cta3′:’Planear mi viaje’,’hero.scroll’:’Scroll’,
‘marquee.1′:’Volcán Arenal’,’marquee.2′:’Aguas Termales’,’marquee.3′:’Selva Tropical’,’marquee.4′:’Hoteles de Lujo’,’marquee.5′:’Pura Vida’,’marquee.6′:’Costa Rica’,
‘stat1′:’Altura del Volcán Arenal’,’stat2′:’Especies de aves en la región’,’stat3′:’Temperatura máxima termal’,’stat4′:’Caída de la Catarata La Fortuna’,
‘hotels.eyebrow’:’Nuestros Hoteles’,’hotels.title’:’Hospedaje con
alma de selva‘,
‘hotels.desc’:’Desde ecolodges boutique hasta resorts de ultra lujo con vistas directas al Volcán Arenal. Cada propiedad es seleccionada a mano para garantizar que tu estadía sea tan memorable como el destino mismo.’,
‘badge.luxury’:’Lujo’,’badge.premium’:’Premium · Great Value’,’badge.value’:’Great Value’,
‘cat.luxury’:’Lujo’,’cat.premium’:’Colección Premium’,’cat.value’:’Confort & Valor’,
‘hj.desc’:’Villas privadas de diseño entre la selva con piscinas propias y vistas al volcán. Exclusividad y confort en perfecto equilibrio con la naturaleza.’,
‘h1.desc’:’Villas privadas con jacuzzi termal al aire libre con vista al volcán. Gastronomía de autor, spa de categoría mundial y reconocido entre los mejores hoteles de Costa Rica.’,
‘ht.desc’:’Icónico resort con el río termal más famoso de Costa Rica fluyendo por sus jardines. Aguas calentadas directamente por el volcán, spa de élite y gastronomía tropical.’,
‘hs.desc’:’Complejo de lujo con más de 20 piscinas termales privadas, zoológico de vida silvestre y vistas panorámicas al Volcán Arenal. Una experiencia integral única.’,
‘h2.desc’:’Vistas privilegiadas del volcán desde cada habitación. Piscinas termales, spa y gastronomía de calidad en una ubicación inmejorable.’,
‘ha.desc’:’Boutique hotel de lujo íntimo frente al volcán. Perfectamente diseñado para parejas, con suites exclusivas, piscina termal privada y atención personalizada excepcional.’,
‘hm.desc’:’Ecolodge en plena selva lluviosa con senderos guiados, observación de aves y río privado. Una inmersión auténtica en el ecosistema tropical costarricense.’,
‘hll.desc’:’Resort familiar con lagos propios, zoológico, piscinas termales y vista al volcán. Excelente opción para grupos y familias que buscan actividades completas.’,
‘ho.desc’:’El hotel más cercano al cráter del Volcán Arenal, con vistas incomparables. Historia, naturaleza y senderismo en el corazón mismo del parque nacional.’,
‘price.from’:’Desde’,’price.night’:’/noche’,’btn.hotel’:’Ver Hotel →’,
‘nat.eyebrow’:’La Fortuna’,’nat.title’:’Un destino que
lo tiene todo‘,
‘nat.desc’:’La Fortuna de San Carlos es uno de los destinos más biodiversos del planeta. Aquí el Volcán Arenal y el Lago Arenal conviven con aguas termales, cataratas y selva virgen — todo en menos de 15 kilómetros.’,
‘nat.cta’:’Planear mi viaje →’,
‘facts.intro’:’Podrás disfrutar de’,
‘f1.t’:’Actividades en el Volcán Arenal’,’f1.d’:’Uno de los 10 volcanes más impresionantes del mundo. Vistas garantizadas desde los mejores hoteles de la zona.’,
‘f2.t’:’Aguas Termales’,’f2.d’:’Piscinas calentadas por energía volcánica entre 28°C y 42°C. Una terapia natural sin igual en el mundo.’,
‘f3.t’:’Biodiversidad’,’f3.d’:’Costa Rica alberga el 6% de la biodiversidad mundial. La Fortuna, su epicentro verde.’,
‘f4.t’:’Catarata La Fortuna’,’f4.d’:’75 metros de caída libre entre selva tropical virgen. Una de las cataratas más impresionantes de toda Centroamérica.’,
‘f5.t’:’Tours de Aventura’,’f5.d’:’Canopy, rafting, kayak, senderismo y más — La Fortuna es la capital de la aventura en Costa Rica.’,
‘cta.quote’:’»La naturaleza no es un lugar que visitar. Es tu hogar.«‘,
‘cta.btn’:’Escribirnos ahora →’,
‘footer.desc’:’Agencia especializada en experiencias de lujo y confort en La Fortuna de San Carlos, Costa Rica. Diseñamos viajes que cambian vidas.’,
‘footer.explore’:’Explorar’,’footer.contact’:’Contacto’,’footer.social’:’Redes’,
‘footer.rights’:’Todos los derechos reservados.’,’footer.made’:’Hecho con ❤️ en Costa Rica 🇨🇷’,
‘nav.hotels’:’Hoteles’,’nav.exp’:’Experiencias’,’nav.contact’:’Contáctanos’,’nav.blog’:’Blog’,
},
en:{
‘hero.eyebrow’:’La Fortuna · Costa Rica · Pura Vida’,
‘hero.title’:’Where nature
calls you home’,
‘hero.tagline’:’Curated lodging at the foot of Arenal Volcano — Personalized experiences tailored just for you.’,
‘hero.cta1′:’Explore Hotels →’,’hero.cta2′:’See Experiences’,’hero.cta3′:’Plan my trip’,’hero.scroll’:’Scroll’,
‘marquee.1′:’Arenal Volcano’,’marquee.2′:’Hot Springs’,’marquee.3′:’Tropical Rainforest’,’marquee.4′:’Luxury Hotels’,’marquee.5′:’Pura Vida’,’marquee.6′:’Costa Rica’,
‘stat1′:’Arenal Volcano height’,’stat2′:’Bird species in the region’,’stat3′:’Maximum thermal temperature’,’stat4′:’La Fortuna Waterfall drop’,
‘hotels.eyebrow’:’Our Hotels’,’hotels.title’:’Lodging with a
jungle soul‘,
‘hotels.desc’:’From boutique eco-lodges to ultra-luxury resorts with direct views of Arenal Volcano. Every property is hand-picked to ensure your stay is as unforgettable as the destination itself.’,
‘badge.luxury’:’Luxury’,’badge.premium’:’Premium · Great Value’,’badge.value’:’Great Value’,
‘cat.luxury’:’Luxury’,’cat.premium’:’Premium Collection’,’cat.value’:’Comfort & Value’,
‘hj.desc’:’Private design villas nestled in the jungle with their own pools and volcano views. Exclusivity and comfort in perfect harmony with nature.’,
‘h1.desc’:’Private villas with open-air thermal jacuzzis overlooking the volcano. Signature cuisine, world-class spa, and ranked among Costa Rica\’s finest hotels.’,
‘ht.desc’:’Iconic resort with Costa Rica\’s most famous thermal river flowing through its gardens. Volcano-heated waters, elite spa, and tropical cuisine.’,
‘hs.desc’:’Luxury complex with over 20 private thermal pools, a wildlife zoo, and panoramic views of Arenal Volcano. A truly comprehensive experience.’,
‘h2.desc’:’Privileged volcano views from every room. Thermal pools, spa, and quality gastronomy in an unbeatable location.’,
‘ha.desc’:’Intimate luxury boutique hotel facing the volcano. Perfectly designed for couples, with exclusive suites, private thermal pool, and exceptional personalized service.’,
‘hm.desc’:’Eco-lodge in the heart of the rainforest with guided trails, birdwatching, and a private river. An authentic immersion in Costa Rica\’s tropical ecosystem.’,
‘hll.desc’:’Family resort with private lakes, zoo, thermal pools, and volcano views. Excellent choice for groups and families seeking a full range of activities.’,
‘ho.desc’:’The hotel closest to Arenal Volcano\’s crater, with unmatched views. History, nature, and hiking at the heart of the national park.’,
‘price.from’:’From’,’price.night’:’/night’,’btn.hotel’:’View Hotel →’,
‘nat.eyebrow’:’La Fortuna’,’nat.title’:’A destination that
has it all‘,
‘nat.desc’:’La Fortuna de San Carlos is one of the most biodiverse destinations on Earth. Arenal Volcano and Lake Arenal coexist with hot springs, waterfalls and virgin jungle — all within 15 kilometers.’,
‘nat.cta’:’Plan my trip →’,
‘facts.intro’:’You will be able to enjoy’,
‘f1.t’:’Arenal Volcano Activities’,’f1.d’:’One of the 10 most impressive volcanoes in the world. Spectacular views guaranteed from top area hotels.’,
‘f2.t’:’Hot Springs’,’f2.d’:’Pools heated by volcanic energy between 28°C and 42°C. A natural therapy unlike anything else in the world.’,
‘f3.t’:’Biodiversity’,’f3.d’:’Costa Rica holds 6% of the world\’s biodiversity. La Fortuna is its green epicenter.’,
‘f4.t’:’La Fortuna Waterfall’,’f4.d’:’A 75-meter free fall through virgin tropical rainforest. One of Central America\’s most breathtaking waterfalls.’,
‘f5.t’:’Adventure Tours’,’f5.d’:’Canopy, rafting, kayak, hiking and more — La Fortuna is Costa Rica\’s adventure capital.’,
‘cta.quote’:’»Nature is not a place to visit. It is your home.«‘,
‘cta.btn’:’Write to us →’,
‘footer.desc’:’Specialized agency for luxury and comfort experiences in La Fortuna de San Carlos, Costa Rica. We design life-changing journeys.’,
‘footer.explore’:’Explore’,’footer.contact’:’Contact’,’footer.social’:’Social’,
‘footer.rights’:’All rights reserved.’,’footer.made’:’Made with ❤️ in Costa Rica 🇨🇷’,
‘nav.hotels’:’Hotels’,’nav.exp’:’Experiences’,’nav.contact’:’Contact Us’,’nav.blog’:’Blog’,
}
};

let lang = ‘es’;
function setLang(l){
lang = l;
document.getElementById(‘btn-es’).classList.toggle(‘active’, l===’es’);
document.getElementById(‘btn-en’).classList.toggle(‘active’, l===’en’);
document.documentElement.lang = l;
document.querySelectorAll(‘[data-i18n]’).forEach(el=>{
const k=el.getAttribute(‘data-i18n’);
if(T[l][k]!==undefined) el.textContent=T[l][k];
});
document.querySelectorAll(‘[data-i18n-html]’).forEach(el=>{
const k=el.getAttribute(‘data-i18n-html’);
if(T[l][k]!==undefined) el.innerHTML=T[l][k];
});
}

// ─── MENU ─────────────────────────────────────────────────────
function toggleMenu(){
const m=document.getElementById(‘menuOverlay’);
const h=document.getElementById(‘hamburger’);
m.classList.toggle(‘open’); h.classList.toggle(‘open’);
document.body.style.overflow=m.classList.contains(‘open’)?’hidden’:»;
}
function closeMenu(){
document.getElementById(‘menuOverlay’).classList.remove(‘open’);
document.getElementById(‘hamburger’).classList.remove(‘open’);
document.body.style.overflow=»;
}

// ─── NAVBAR SCROLL ────────────────────────────────────────────
window.addEventListener(‘scroll’,()=>{
document.getElementById(‘navbar’).classList.toggle(‘scrolled’,window.scrollY>60);
});

// ─── PARALLAX ─────────────────────────────────────────────────
window.addEventListener(‘scroll’,()=>{
const svg=document.querySelector(‘.hero-svg-bg’);
if(svg) svg.style.transform=`translateY(${window.scrollY*0.28}px)`;
});

// ─── SCROLL REVEAL ────────────────────────────────────────────
const observer=new IntersectionObserver(entries=>{
entries.forEach(e=>{
if(e.isIntersecting) setTimeout(()=>e.target.classList.add(‘visible’),80);
});
},{threshold:0.1});
document.querySelectorAll(‘.reveal’).forEach((el,i)=>{
if(el.closest(‘.hotels-grid’)) el.style.transitionDelay=`${(Array.from(el.closest(‘.hotels-grid’).children).indexOf(el))*0.14}s`;
if(el.closest(‘.facts-list’)) el.style.transitionDelay=`${(Array.from(el.closest(‘.facts-list’).children).indexOf(el))*0.1}s`;
if(el.closest(‘.stats-grid’)) el.style.transitionDelay=`${(Array.from(el.closest(‘.stats-grid’).children).indexOf(el))*0.1}s`;
observer.observe(el);
});

// ─── PARTICLES (LEAVES) ───────────────────────────────────────
const canvas=document.getElementById(‘particleCanvas’);
const ctx=canvas.getContext(‘2d’);
function resizeC(){canvas.width=canvas.offsetWidth;canvas.height=canvas.offsetHeight;}
resizeC(); window.addEventListener(‘resize’,resizeC);
const pts=[];
const leafColors=[‘rgba(58,138,96,0.55)’,’rgba(29,90,52,0.5)’,’rgba(201,168,76,0.4)’,’rgba(82,183,136,0.35)’];
function drawLeaf(ctx,w,h){
ctx.beginPath();
ctx.moveTo(0,-h);
ctx.bezierCurveTo(w*0.8,-h*0.6, w,-h*0.1, 0,h*0.3);
ctx.bezierCurveTo(-w,-h*0.1, -w*0.8,-h*0.6, 0,-h);
ctx.fill();
ctx.beginPath();
ctx.moveTo(0,-h);ctx.lineTo(0,h*0.3);
ctx.strokeStyle=’rgba(0,0,0,0.15)’;ctx.lineWidth=0.5;ctx.stroke();
}
for(let i=0;i{
p.swingT+=1; p.x+=p.vx+Math.sin(p.swingT*p.swing)*0.4;
p.y+=p.vy; p.angle+=p.as;
if(p.y{mx=e.clientX;my=e.clientY;cur.style.left=mx+’px’;cur.style.top=my+’px’;});
(function movRing(){
rx+=(mx-rx)*0.12; ry+=(my-ry)*0.12;
ring.style.left=rx+’px’; ring.style.top=ry+’px’;
requestAnimationFrame(movRing);
})();
document.querySelectorAll(‘a,button,.hotel-card’).forEach(el=>{
el.addEventListener(‘mouseenter’,()=>{ring.style.width=’60px’;ring.style.height=’60px’;ring.style.borderColor=’rgba(201,168,76,0.8)’;});
el.addEventListener(‘mouseleave’,()=>{ring.style.width=’36px’;ring.style.height=’36px’;ring.style.borderColor=’rgba(201,168,76,0.5)’;});
});