/* ==========================================================================
   Descubre El Salvador — Shared stylesheet
   Palette grounded in the Bandera Magna (Tory Blue #0F47AF) + coat-of-arms
   amber, torogoz teal, coffee brown and Pacific sunset coral.
   ========================================================================== */

:root{
  /* -- flag & national palette -- */
  --blue:        #0f47af;   /* bandera magna */
  --blue-deep:   #082a63;
  --blue-bright: #2a63d6;
  --sky:         #eef3fc;
  --sky-mid:     #dbe6f8;
  --white:       #ffffff;
  --ink:         #0c1a2b;
  --gold:        #f2a900;   /* escudo nacional */
  --gold-light:  #ffcf4d;
  --torogoz:     #16947f;   /* ave nacional */
  --torogoz-light:#4fd6bd;
  --coral:       #e2572b;   /* atardecer del Pacífico */
  --coral-light: #f2865c;
  --coffee:      #4a2e23;   /* café de altura */
  --line:        rgba(12,26,43,0.10);
  --line-soft:   rgba(12,26,43,0.06);
  --shadow-sm:   0 10px 30px -18px rgba(15,71,175,0.35);
  --shadow-lg:   0 30px 60px -30px rgba(8,42,99,0.45);
  --ease:        cubic-bezier(.22,.88,.30,1);
  --ease-out:    cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{max-width:100%;overflow-x:hidden;}
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:'Work Sans', sans-serif;
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:'Fraunces', serif;
  font-weight:600;
  margin:0;
  letter-spacing:-0.01em;
  color:var(--blue-deep);
}
p{margin:0;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
ul{margin:0;padding:0;}
button{font-family:inherit;}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Work Sans', sans-serif;
  font-size:0.72rem;font-weight:700;
  letter-spacing:0.18em;text-transform:uppercase;
  color:var(--torogoz);
}
.eyebrow::before{
  content:"";width:22px;height:2px;background:currentColor;border-radius:2px;
}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px;}
@media (max-width:640px){.wrap{padding:0 20px;}}

/* ---------------------------------- NAV ---------------------------------- */
header.site-nav{
  position:sticky;top:0;z-index:200;
  background:rgba(255,255,255,0.86);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-soft);
  transition:box-shadow .3s var(--ease);
}
header.site-nav.scrolled{box-shadow:0 8px 30px -20px rgba(8,42,99,0.35);}
.nav-inner{
  max-width:1320px;margin:0 auto;padding:14px 28px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
}
.brand{
  display:flex;align-items:center;gap:9px;font-family:'Fraunces',serif;font-weight:700;
  font-size:1.05rem;color:var(--blue-deep);white-space:nowrap;flex:none;
}
.brand svg{width:28px;height:28px;flex:none;}
.nav-links{display:flex;gap:22px;font-size:0.87rem;font-weight:500;list-style:none;flex:none;}
.nav-links li{white-space:nowrap;}
.nav-links a{
  position:relative;padding:6px 0;color:var(--ink);opacity:0.78;transition:opacity .2s var(--ease);white-space:nowrap;
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;
  background:var(--gold);transform:scaleX(0);transform-origin:right;
  transition:transform .35s var(--ease-out);
}
.nav-links a:hover{opacity:1;}
.nav-links a:hover::after,
.nav-links a.active::after{transform:scaleX(1);transform-origin:left;}
.nav-links a.active{opacity:1;font-weight:600;}
.nav-cta{
  background:var(--blue);color:var(--white);
  padding:11px 20px;border-radius:100px;font-size:0.83rem;font-weight:600;
  white-space:nowrap;flex:none;transition:transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
  box-shadow:0 10px 24px -14px rgba(15,71,175,0.65);
}
.nav-cta:hover{background:var(--blue-bright);transform:translateY(-2px);}
.nav-toggle{
  display:none;background:none;border:none;cursor:pointer;padding:4px;flex:none;
  flex-direction:column;gap:5px;
}
.nav-toggle span{width:24px;height:2px;background:var(--blue-deep);border-radius:2px;transition:transform .3s var(--ease), opacity .3s var(--ease);}
.mobile-panel{
  display:none;position:fixed;inset:0;z-index:190;background:var(--white);
  padding:100px 32px 40px;opacity:0;transform:translateY(-8px);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
  pointer-events:none;
}
.mobile-panel.open{opacity:1;transform:none;pointer-events:auto;}
.mobile-panel ul{display:flex;flex-direction:column;gap:6px;list-style:none;}
.mobile-panel a{
  display:block;padding:16px 4px;font-family:'Fraunces',serif;font-size:1.5rem;
  border-bottom:1px solid var(--line-soft);color:var(--blue-deep);
}
.mobile-utils{display:none;gap:10px;margin-bottom:22px;}
@media (max-width:480px){
  .mobile-utils{display:flex;}
}
@media (max-width:1180px){
  .nav-links{display:none;}
  .nav-toggle{display:flex;}
  .mobile-panel{display:block;}
}
@media (max-width:1180px) and (min-width:481px){
  /* still show weather + lang inline on tablets, just hide the long link list */
  .nav-utils .weather-pill span.w-label{display:none;}
}
@media (max-width:480px){
  .nav-inner{padding:12px 16px;gap:8px;}
  .brand{font-size:0.92rem;}
  .brand svg{width:24px;height:24px;}
  .nav-utils{display:none;}
  .nav-cta{padding:10px 14px;font-size:0.78rem;}
}
body.menu-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
body.menu-open .nav-toggle span:nth-child(2){opacity:0;}
body.menu-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ------------------------------ PAGE HEADER (interior pages) ------------------------------ */
.page-header{
  position:relative;overflow:hidden;
  background:linear-gradient(160deg, var(--blue-deep) 0%, var(--blue) 65%, var(--blue-bright) 130%);
  color:var(--white);padding:150px 0 90px;
}
.page-header .eyebrow{color:var(--gold-light);}
.page-header h1{
  font-size:clamp(2.4rem,5.4vw,4rem);color:var(--white);max-width:820px;margin-top:14px;
}
.page-header p{max-width:560px;margin-top:18px;color:rgba(255,255,255,0.82);font-size:1.05rem;}
.breadcrumbs{font-size:0.82rem;color:rgba(255,255,255,0.6);margin-top:0;}
.breadcrumbs a{color:rgba(255,255,255,0.75);}
.breadcrumbs a:hover{color:var(--gold-light);}
.page-header .deco-wave{position:absolute;bottom:-2px;left:0;width:100%;line-height:0;}

/* ---------------------------------- HERO (home) ---------------------------------- */
.hero{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,#08214d 0%, var(--blue-deep) 45%, var(--blue) 100%);
  color:var(--white);padding-top:64px;
}
.hero-bg{
  position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center 62%;
}
.hero-scrim{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg, rgba(6,24,56,0.80) 0%, rgba(8,33,77,0.85) 40%, rgba(15,71,175,0.92) 100%);
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:2;
  background:radial-gradient(ellipse at 78% 12%, rgba(242,169,0,0.18), transparent 55%),
             radial-gradient(ellipse at 10% 85%, rgba(79,214,189,0.16), transparent 50%);
  pointer-events:none;
}
.hero-inner{
  max-width:1240px;margin:0 auto;padding:88px 32px 0;position:relative;z-index:3;
}
.hero h1{
  font-size:clamp(2.7rem,7vw,5.4rem);line-height:1.0;font-weight:600;max-width:920px;color:var(--white);
  opacity:0;transform:translateY(24px);animation:rise .9s var(--ease-out) .15s forwards;
}
.hero h1 em{font-style:italic;font-weight:300;color:var(--gold-light);}
.hero-sub{
  max-width:520px;margin-top:22px;font-size:1.08rem;color:rgba(255,255,255,0.84);
  opacity:0;transform:translateY(18px);animation:rise .9s var(--ease-out) .32s forwards;
}
.hero-actions{
  display:flex;gap:14px;margin-top:34px;flex-wrap:wrap;
  opacity:0;transform:translateY(18px);animation:rise .9s var(--ease-out) .48s forwards;
}
@keyframes rise{to{opacity:1;transform:none;}}

.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:14px 26px;border-radius:100px;font-weight:600;font-size:0.92rem;
  cursor:pointer;border:1px solid transparent;
  transition:transform .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease), color .3s var(--ease);
}
.btn svg{width:16px;height:16px;transition:transform .3s var(--ease);}
.btn:hover svg{transform:translateX(3px);}
.btn-primary{background:var(--gold);color:var(--blue-deep);box-shadow:0 14px 30px -16px rgba(242,169,0,0.65);}
.btn-primary:hover{transform:translateY(-2px);background:var(--gold-light);}
.btn-ghost{border-color:rgba(255,255,255,0.4);color:var(--white);}
.btn-ghost:hover{background:rgba(255,255,255,0.12);transform:translateY(-2px);}
.btn-dark{background:var(--blue-deep);color:var(--white);}
.btn-dark:hover{background:var(--blue);transform:translateY(-2px);}

.hero-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  margin-top:68px;border-top:1px solid rgba(255,255,255,0.18);position:relative;z-index:3;
}
.hero-stats div{padding:22px 0;border-right:1px solid rgba(255,255,255,0.18);}
.hero-stats div:last-child{border-right:none;}
.hero-stats .num{
  font-family:'Fraunces',serif;font-size:1.9rem;font-weight:600;color:var(--gold-light);
  display:inline-block;
}
.hero-stats .lbl{font-size:0.78rem;color:rgba(255,255,255,0.65);margin-top:2px;}
@media (max-width:760px){
  .hero-stats{grid-template-columns:repeat(2,1fr);}
  .hero-stats div{border-bottom:1px solid rgba(255,255,255,0.18);}
}

.skyline{position:relative;z-index:2;margin-top:56px;}
.skyline svg{width:100%;height:auto;display:block;}
.skyline .peak{transform-origin:bottom center;animation:float 7s ease-in-out infinite;}
.skyline .peak.p2{animation-delay:.6s;}
.skyline .peak.p3{animation-delay:1.2s;}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}
.smoke{transform-origin:bottom center;animation:smoke 4s ease-in-out infinite;}
@keyframes smoke{0%{opacity:.15;transform:translateY(0) scale(1);}50%{opacity:.5;transform:translateY(-8px) scale(1.08);}100%{opacity:.15;transform:translateY(0) scale(1);}}

/* ---------------------------------- SECTIONS ---------------------------------- */
section{padding:100px 0;}
@media (max-width:760px){section{padding:64px 0;}}
.section-head{max-width:640px;margin-bottom:52px;}
.section-head h2{font-size:clamp(2rem,4vw,2.9rem);margin-top:10px;}
.section-head p{margin-top:14px;color:rgba(12,26,43,0.65);font-size:1.02rem;}
.section-head.light h2,.section-head.light .eyebrow{color:var(--white);}
.section-head.light p{color:rgba(255,255,255,0.72);}
.section-head.light .eyebrow{color:var(--gold-light);}

.bg-sky{background:var(--sky);}
.bg-white{background:var(--white);}
.bg-blue{background:linear-gradient(155deg,var(--blue-deep),var(--blue));color:var(--white);}
.bg-coffee{background:var(--coffee);color:var(--white);}
.bg-blue .section-head p, .bg-coffee .section-head p{color:rgba(255,255,255,0.7);}
.bg-blue h3, .bg-coffee h3, .bg-blue h4, .bg-coffee h4{color:var(--white);}

/* ---------------------------------- INTRO / FACTS ---------------------------------- */
.intro-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:64px;align-items:start;}
@media (max-width:860px){.intro-grid{grid-template-columns:1fr;gap:36px;}}
.intro-lead{font-family:'Fraunces',serif;font-size:1.5rem;font-weight:500;line-height:1.4;color:var(--blue-deep);}
.intro-body p{margin-top:16px;color:rgba(12,26,43,0.68);}
.fact-list{display:flex;flex-direction:column;border-top:1px solid var(--line);}
.fact-list .fact{
  display:flex;justify-content:space-between;gap:12px;padding:16px 0;border-bottom:1px solid var(--line);
  font-size:0.95rem;transition:padding-left .3s var(--ease);
}
.fact-list .fact:hover{padding-left:6px;background:var(--sky);}
.fact-list .fact span:first-child{color:rgba(12,26,43,0.55);}
.fact-list .fact span:last-child{font-weight:600;text-align:right;color:var(--blue-deep);}
@media (max-width:480px){
  .fact-list .fact{flex-direction:column;gap:4px;}
  .fact-list .fact span:last-child{text-align:left;}
}

/* ---------------------------------- CARD GRIDS ---------------------------------- */
.dest-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:rgba(255,255,255,0.14);border-radius:22px;overflow:hidden;}
@media (max-width:960px){.dest-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.dest-grid{grid-template-columns:1fr;}}
.dest-card{
  background:var(--blue-deep);padding:34px 28px;min-height:300px;
  display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;
  transition:background .4s var(--ease);
}
.dest-card::before{
  content:"";position:absolute;inset:0;opacity:0;
  background:radial-gradient(circle at 85% 0%, rgba(242,169,0,0.18), transparent 60%);
  transition:opacity .4s var(--ease);
}
.dest-card:hover{background:#0a3480;}
.dest-card:hover::before{opacity:1;}
.dest-card.has-photo{background-size:cover;background-position:center;}
.dest-card.has-photo:hover{background-size:cover;}
.dest-card.has-photo::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg, rgba(8,42,99,0.18) 0%, rgba(6,26,64,0.62) 55%, rgba(4,18,48,0.92) 100%);
  transition:opacity .4s var(--ease);
}
.dest-card.has-photo:hover::after{opacity:0.85;}
.dest-card.has-photo .dest-num{position:relative;z-index:1;}
.dest-card.has-photo .icon{z-index:1;}
.dest-card.has-photo > div:last-child{position:relative;z-index:1;}
.dest-num{font-family:'Fraunces',serif;font-size:0.85rem;color:rgba(255,255,255,0.45);}
.dest-card h3{font-size:1.5rem;margin-top:56px;color:var(--white);}
.dest-card .region{font-size:0.78rem;color:var(--gold-light);margin-top:6px;letter-spacing:0.04em;text-transform:uppercase;}
.dest-card p{font-size:0.92rem;color:rgba(255,255,255,0.74);margin-top:14px;}
.dest-card .icon{position:absolute;top:28px;right:26px;width:38px;height:38px;opacity:0.9;transition:transform .4s var(--ease);}
.dest-card:hover .icon{transform:translateY(-4px) rotate(-4deg);}
.dest-card .more{
  margin-top:18px;font-size:0.8rem;font-weight:600;color:var(--gold-light);
  display:inline-flex;align-items:center;gap:6px;opacity:0;transform:translateX(-6px);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.dest-card:hover .more{opacity:1;transform:none;}

/* ruta / timeline (numbered — real sequence) */
.ruta-line{position:relative;}
.ruta-stop{
  display:grid;grid-template-columns:70px 1fr;gap:24px;
  padding:30px 0;border-top:1px solid var(--line);
  transition:background .3s var(--ease);
}
.ruta-stop:hover{background:var(--sky);}
.ruta-stop:last-child{border-bottom:1px solid var(--line);}
.ruta-stop .stop-num{font-family:'Fraunces',serif;font-size:1.1rem;color:var(--coral);font-weight:600;}
.ruta-stop h4{font-size:1.3rem;color:var(--coffee);}
.ruta-stop p{color:rgba(12,26,43,0.68);margin-top:8px;font-size:0.96rem;max-width:640px;}
.ruta-stop .tag{
  display:inline-block;margin-top:12px;font-size:0.74rem;font-weight:600;
  letter-spacing:0.06em;text-transform:uppercase;color:var(--torogoz);
}

/* experience / feature cards */
.exp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
@media (max-width:960px){.exp-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.exp-grid{grid-template-columns:1fr;}}
.exp-card{
  background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.14);
  border-radius:18px;padding:28px 22px;transition:transform .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
}
.exp-card:hover{transform:translateY(-6px);background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.28);}
.exp-card .icon{width:34px;height:34px;color:var(--gold-light);margin-bottom:20px;transition:transform .35s var(--ease);}
.exp-card:hover .icon{transform:scale(1.12) rotate(-6deg);}
.exp-card h4{font-size:1.15rem;}
.exp-card p{margin-top:10px;font-size:0.88rem;color:rgba(255,255,255,0.68);}

/* light-bg card variant (for interior pages on white) */
.exp-card.on-light{background:var(--sky);border-color:var(--line);}
.exp-card.on-light .icon{color:var(--blue);}
.exp-card.on-light h4{color:var(--blue-deep);}
.exp-card.on-light p{color:rgba(12,26,43,0.65);}
.exp-card.on-light:hover{background:var(--sky-mid);}

/* gastronomy */
.gastro-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:60px;align-items:center;}
@media (max-width:860px){.gastro-grid{grid-template-columns:1fr;gap:40px;}}
.pupusa-art{aspect-ratio:1/1;border-radius:26px;box-shadow:var(--shadow-lg);overflow:hidden;background-size:cover;background-position:center;}

/* destination detail photo banner */
.section-photo{
  width:100%;aspect-ratio:21/8;border-radius:24px;background-size:cover;background-position:center;
  margin-bottom:40px;box-shadow:var(--shadow-lg);position:relative;overflow:hidden;
}
.section-photo.no-img{
  background:linear-gradient(135deg, var(--blue-deep), var(--blue) 55%, var(--torogoz) 130%);
  display:flex;align-items:center;justify-content:center;
}
.section-photo.no-img svg{width:64px;height:64px;opacity:0.5;}
@media (max-width:760px){.section-photo{aspect-ratio:16/10;margin-bottom:28px;}}
.gastro-copy p{margin-top:14px;color:rgba(12,26,43,0.7);}
.gastro-copy h2{font-size:clamp(1.9rem,4vw,2.6rem);}
.flavor-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;}
.flavor-tags span{
  background:var(--sky);border:1px solid var(--line);padding:8px 16px;border-radius:100px;
  font-size:0.82rem;font-weight:500;transition:background .25s var(--ease), transform .25s var(--ease);
}
.flavor-tags span:hover{background:var(--gold-light);transform:translateY(-2px);}

/* planning cards */
.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
@media (max-width:860px){.plan-grid{grid-template-columns:1fr;}}
.plan-card{
  background:rgba(255,255,255,0.07);border-radius:20px;padding:30px;border:1px solid rgba(255,255,255,0.15);
  transition:transform .35s var(--ease), background .35s var(--ease);
}
.plan-card:hover{transform:translateY(-6px);background:rgba(255,255,255,0.11);}
.plan-card h4{font-size:1.1rem;margin-bottom:12px;color:var(--white);}
.plan-card ul{font-size:0.9rem;color:rgba(255,255,255,0.78);list-style:none;}
.plan-card li{margin-bottom:10px;padding-left:20px;position:relative;}
.plan-card li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;border-radius:2px;background:var(--gold);}

/* FAQ (SEO-friendly, uses <details>) */
.faq{max-width:800px;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-item summary{
  cursor:pointer;list-style:none;padding:22px 0;display:flex;justify-content:space-between;align-items:center;
  font-family:'Fraunces',serif;font-size:1.1rem;color:var(--blue-deep);gap:20px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary .plus{
  flex:none;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;position:relative;transition:transform .3s var(--ease);
}
.faq-item summary .plus::before,.faq-item summary .plus::after{
  content:"";position:absolute;background:var(--blue);border-radius:2px;
}
.faq-item summary .plus::before{width:10px;height:2px;}
.faq-item summary .plus::after{width:2px;height:10px;}
.faq-item[open] summary .plus{transform:rotate(45deg);background:var(--blue);}
.faq-item[open] summary .plus::before,.faq-item[open] summary .plus::after{background:var(--white);}
.faq-item .faq-a{padding:0 0 24px;color:rgba(12,26,43,0.68);font-size:0.96rem;max-width:680px;}

/* breadcrumb schema block visually hidden helper */
.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* CTA band */
.cta{
  background:linear-gradient(120deg, var(--coral), #c94a26);
  color:var(--white);text-align:center;padding:90px 32px;position:relative;overflow:hidden;
}
.cta h2{font-size:clamp(2rem,5vw,3.2rem);max-width:700px;margin:0 auto;color:var(--white);}
.cta p{margin-top:16px;color:rgba(255,255,255,0.88);max-width:520px;margin-left:auto;margin-right:auto;}
.cta .btn-primary{background:var(--white);color:var(--coral);margin-top:30px;box-shadow:0 14px 30px -16px rgba(0,0,0,0.35);}
.cta .btn-primary:hover{background:var(--sky);}

/* ---------------------------------- FOOTER ---------------------------------- */
footer{background:var(--ink);color:rgba(255,255,255,0.75);padding:64px 0 28px;}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr 1fr;}}
footer h5{font-family:'Fraunces',serif;color:var(--white);font-size:0.95rem;margin-bottom:14px;}
footer a{display:block;font-size:0.88rem;padding:6px 0;color:rgba(255,255,255,0.6);transition:color .25s var(--ease), padding-left .25s var(--ease);}
footer a:hover{color:var(--gold-light);padding-left:4px;}
.foot-brand{font-family:'Fraunces',serif;font-weight:700;font-size:1.3rem;color:var(--white);display:flex;align-items:center;gap:10px;}
.foot-brand svg{width:28px;height:28px;}
.foot-bottom{
  margin-top:50px;padding-top:24px;border-top:1px solid rgba(255,255,255,0.12);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:0.78rem;color:rgba(255,255,255,0.45);
}

/* ---------------------------------- REVEAL / SCROLL ANIMATION ---------------------------------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);}
.reveal.in{opacity:1;transform:none;}
.reveal-scale{opacity:0;transform:scale(.94);transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);}
.reveal-scale.in{opacity:1;transform:none;}
/* stagger via inline --d custom property, set by JS or inline style */
.reveal{transition-delay:var(--d,0ms);}
.reveal-scale{transition-delay:var(--d,0ms);}

/* ---------------------------------- WEATHER + LANG WIDGETS ---------------------------------- */
.util-pill{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--sky);border:1px solid var(--line);
  padding:7px 12px;border-radius:100px;font-size:0.8rem;font-weight:600;color:var(--blue-deep);
  cursor:pointer;transition:background .25s var(--ease), transform .25s var(--ease);white-space:nowrap;flex:none;
}
.util-pill:hover{background:var(--sky-mid);transform:translateY(-1px);}
.weather-pill .w-icon{font-size:0.98rem;line-height:1;}
.nav-utils{display:flex;align-items:center;gap:8px;flex:none;}
@media (max-width:1180px){.nav-utils .weather-pill span.w-label{display:none;}}

.lang-pill{position:relative;}
.lang-pill .lang-menu{
  position:absolute;top:calc(100% + 8px);right:0;background:var(--white);
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);
  padding:6px;min-width:120px;opacity:0;transform:translateY(-6px);pointer-events:none;
  transition:opacity .25s var(--ease), transform .25s var(--ease);z-index:250;
}
.lang-pill.open .lang-menu{opacity:1;transform:none;pointer-events:auto;}
.lang-pill .lang-menu a{
  display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:8px;font-size:0.85rem;
  font-weight:600;color:var(--ink);
}
.lang-pill .lang-menu a:hover{background:var(--sky);}
.lang-pill .lang-menu a.current{color:var(--blue);}

.weather-overlay{
  position:fixed;inset:0;background:rgba(8,26,43,0.55);z-index:400;
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease);
  display:flex;align-items:flex-start;justify-content:center;padding:110px 20px 40px;overflow-y:auto;
}
.weather-overlay.open{opacity:1;pointer-events:auto;}
.weather-card{
  background:var(--white);border-radius:24px;max-width:420px;width:100%;
  box-shadow:var(--shadow-lg);padding:30px;transform:translateY(16px);opacity:0;
  transition:transform .35s var(--ease-out), opacity .35s var(--ease-out);
}
.weather-overlay.open .weather-card{transform:none;opacity:1;}
.weather-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;}
.weather-card h4{font-size:1.05rem;color:var(--blue-deep);}
.weather-close{
  background:var(--sky);border:none;border-radius:50%;width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none;color:var(--blue-deep);
  transition:background .2s var(--ease);
}
.weather-close:hover{background:var(--sky-mid);}
.weather-locations{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap;}
.weather-locations button{
  border:1px solid var(--line);background:var(--white);border-radius:100px;
  padding:7px 14px;font-size:0.78rem;font-weight:600;color:var(--blue-deep);cursor:pointer;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.weather-locations button.active{background:var(--blue);border-color:var(--blue);color:var(--white);}
.weather-now{display:flex;align-items:center;justify-content:space-between;margin-top:22px;flex-wrap:wrap;gap:14px;}
.weather-now .icon-big{font-size:2.6rem;line-height:1;}
.weather-now .temp-big{font-family:'Fraunces',serif;font-size:2.6rem;font-weight:700;color:var(--blue-deep);}
.weather-now .desc{font-size:0.85rem;font-weight:600;color:rgba(12,26,43,0.6);margin-top:4px;}
.weather-meta{font-size:0.8rem;color:rgba(12,26,43,0.6);line-height:1.9;text-align:right;}
.weather-days{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:26px;}
.weather-day{text-align:center;background:var(--sky);border-radius:14px;padding:12px 4px;}
.weather-day .d-label{font-size:0.68rem;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:rgba(12,26,43,0.55);}
.weather-day .d-icon{font-size:1.25rem;margin:6px 0;}
.weather-day .d-temp{font-size:0.82rem;font-weight:700;color:var(--blue-deep);}
.weather-units{display:flex;background:var(--sky);border-radius:100px;padding:4px;margin-top:24px;}
.weather-units button{
  flex:1;border:none;background:none;padding:10px;border-radius:100px;font-weight:700;font-size:0.85rem;
  cursor:pointer;color:rgba(12,26,43,0.5);transition:background .25s var(--ease), color .25s var(--ease);
}
.weather-units button.active{background:var(--gold);color:var(--blue-deep);}
.weather-loading{padding:30px 0;text-align:center;color:rgba(12,26,43,0.5);font-size:0.9rem;}

/* back to top */
.to-top{
  position:fixed;right:22px;bottom:22px;z-index:150;
  width:46px;height:46px;border-radius:50%;background:var(--blue);color:var(--white);
  display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease), background .3s var(--ease);
  box-shadow:0 12px 24px -12px rgba(15,71,175,0.6);
}
.to-top.show{opacity:1;transform:none;pointer-events:auto;}
.to-top:hover{background:var(--blue-bright);}

/* progress bar tied to scroll */
.scroll-progress{position:fixed;top:0;left:0;height:3px;background:var(--gold);z-index:300;width:0%;transition:width .1s linear;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .reveal,.reveal-scale{opacity:1;transform:none;transition:none;}
  .hero h1,.hero-sub,.hero-actions{animation:none;opacity:1;transform:none;}
  .skyline .peak,.smoke{animation:none;}
}