/* Meridiana visual refinement — shared by all language versions. */
:root{
  --ink:#08080a;
  --ink-2:#111115;
  --ink-3:#17171c;
  --gold:#cba84c;
  --gold-lite:#f0d785;
  --paper:#f7f3eb;
  --muted:#b4aea4;
  --line:rgba(240,215,133,.14);
  --shadow:0 24px 70px rgba(0,0,0,.42);
}

html{background:#08080a}
body{
  background:
    radial-gradient(circle at 12% 18%,rgba(203,168,76,.075),transparent 28rem),
    radial-gradient(circle at 90% 62%,rgba(227,196,106,.045),transparent 34rem),
    var(--ink);
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:100;
  pointer-events:none;
  opacity:.16;
  background-image:repeating-linear-gradient(118deg,rgba(255,255,255,.018) 0,rgba(255,255,255,.018) 1px,transparent 1px,transparent 4px);
  mix-blend-mode:soft-light;
}

::selection{background:var(--gold);color:#100d07}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--gold-lite);
  outline-offset:4px;
}

/* Floating navigation */
header,header.solid{
  padding:.7rem 0 0;
  background:transparent;
  border:0;
  backdrop-filter:none;
}
.nav{
  min-height:62px;
  padding:.72rem 1.15rem;
  border:1px solid rgba(255,255,255,.11);
  border-radius:999px;
  background:linear-gradient(135deg,rgba(18,18,22,.88),rgba(8,8,10,.74));
  box-shadow:0 12px 40px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.035);
  backdrop-filter:blur(18px) saturate(1.25);
}
.brand b{font-size:1.34rem;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.brand i{color:var(--gold-lite);opacity:.92}
.nav nav a,.nav a.back,.langs a{transition:color .2s ease,opacity .2s ease,border-color .2s ease}
.nav nav a{position:relative}
.nav nav a::after{
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:-.45rem;
  height:1px;
  background:var(--gold);
  transition:right .25s ease;
}
.nav nav a:hover::after{right:0}

/* Hero: cinematic image plus a soft glass reading plane */
.hero{min-height:max(720px,100svh)}
.hero-media img{filter:saturate(.9) contrast(1.05)}
.hero::after{
  background:
    radial-gradient(circle at 66% 43%,transparent 0,rgba(8,8,10,.12) 28%,rgba(8,8,10,.55) 70%),
    linear-gradient(90deg,rgba(8,8,10,.82),rgba(8,8,10,.22) 62%,rgba(8,8,10,.44)),
    linear-gradient(180deg,rgba(8,8,10,.58),transparent 38%,var(--ink) 100%);
}
.hero-inner{position:relative;isolation:isolate}
.hero-inner::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:-2rem;
  top:5.7rem;
  bottom:2.8rem;
  width:min(690px,calc(100% + 2rem));
  border:1px solid rgba(255,255,255,.1);
  border-radius:26px;
  background:linear-gradient(145deg,rgba(15,15,18,.61),rgba(8,8,10,.25));
  box-shadow:var(--shadow),inset 0 1px rgba(255,255,255,.045);
  backdrop-filter:blur(7px);
}
.hero h1{font-size:clamp(3rem,7.4vw,6.2rem);text-wrap:balance;text-shadow:0 12px 34px rgba(0,0,0,.42)}
.hero h1 em{color:var(--gold-lite);text-shadow:0 0 32px rgba(203,168,76,.2)}
.hero p:not(.eyebrow){color:#e5ded3}
.eyebrow{display:flex;align-items:center;gap:.8rem;color:var(--gold-lite)}
.eyebrow::before{content:"";width:34px;height:1px;background:currentColor;opacity:.75}
.hero-meta{padding-top:1.25rem;border-top:1px solid rgba(255,255,255,.1);max-width:610px}

/* Buttons */
.btn{border-radius:999px;padding:1rem 1.7rem;box-shadow:0 10px 26px rgba(0,0,0,.2);transform:translateY(0)}
.btn:hover{transform:translateY(-2px)}
.btn-gold{
  background:linear-gradient(135deg,var(--gold-lite),var(--gold));
  color:#171106;
  box-shadow:0 13px 32px rgba(203,168,76,.18);
}
.btn-line{background:rgba(255,255,255,.035);backdrop-filter:blur(8px)}
.btn-wa{box-shadow:0 12px 28px rgba(37,211,102,.18)}

/* Editorial rhythm */
section{padding:clamp(5.5rem,9vw,8rem) 0}
h1,h2{color:var(--paper);text-wrap:balance}
h2{font-size:clamp(2.2rem,5vw,3.6rem)}
.lead{font-size:clamp(1rem,1.6vw,1.12rem);line-height:1.8}
.rule{opacity:.75}

/* Photography */
.drinks{gap:1.35rem}
.tile,.duo figure,.serata .wide,.bike-grid picture{
  border:1px solid rgba(255,255,255,.1);
  border-radius:18px;
  box-shadow:0 18px 50px rgba(0,0,0,.24);
}
.tile::after,.duo figure::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);
  border-radius:inherit;
}
.duo figure{position:relative}
.tile img,.duo img,.serata .wide img{filter:saturate(.94) contrast(1.04);transition:transform 1.1s cubic-bezier(.2,.8,.2,1),filter .5s ease}
.tile:hover img,.duo figure:hover img{filter:saturate(1.08) contrast(1.03);transform:scale(1.045)}
.tile figcaption{padding:3.6rem 1.5rem 1.35rem;background:linear-gradient(transparent,rgba(6,6,8,.92))}
.tile h3{font-size:1.5rem}

/* Feature and information surfaces */
.bike{
  background:
    linear-gradient(135deg,rgba(203,168,76,.055),transparent 42%),
    var(--ink-2);
}
.badge{border-radius:999px;background:linear-gradient(135deg,var(--gold-lite),var(--gold));padding:.42rem .82rem}
.bike-grid picture{overflow:hidden}
.bike li{padding:1rem 0}
.info{gap:clamp(2rem,6vw,5rem)}
.map,.mapbox{border:1px solid rgba(255,255,255,.1);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}
dt{display:flex;align-items:center;gap:.6rem}
dt::before{content:"";width:18px;height:1px;background:var(--gold)}

/* Secondary pages */
body > main > .hero:not(:first-child),main > .hero{border-bottom:1px solid var(--line)}
main > .hero:not(:has(.hero-inner)){min-height:520px;padding:8.5rem 0 5.5rem;display:grid;align-items:end}
main > .hero:not(:has(.hero-inner)) .wrap{
  position:relative;
  padding:clamp(1.5rem,4vw,2.8rem);
  border:1px solid rgba(255,255,255,.1);
  border-radius:22px;
  background:linear-gradient(145deg,rgba(15,15,18,.66),rgba(8,8,10,.3));
  box-shadow:var(--shadow);
  backdrop-filter:blur(7px);
}
.cards{gap:1.35rem}
.card{
  position:relative;
  overflow:hidden;
  padding:2rem;
  border-color:rgba(240,215,133,.13);
  border-radius:16px;
  background:linear-gradient(145deg,rgba(25,25,30,.92),rgba(13,13,16,.94));
  box-shadow:0 14px 38px rgba(0,0,0,.16);
}
.card::before{content:"";position:absolute;inset:0 auto 0 0;width:2px;background:linear-gradient(var(--gold-lite),transparent)}
.card h3{font-size:1.42rem}
.form-wrap{
  border-color:rgba(240,215,133,.16);
  border-radius:20px;
  background:linear-gradient(145deg,rgba(23,23,28,.96),rgba(12,12,15,.96));
  box-shadow:var(--shadow);
}
input,select,textarea{border-radius:9px;background:rgba(6,6,8,.72)}
.route{border-color:rgba(240,215,133,.13)!important;border-radius:16px!important;background:linear-gradient(145deg,rgba(24,24,29,.94),rgba(12,12,15,.94))!important}

/* Footer and contact button */
footer{background:rgba(5,5,7,.48);padding:4.5rem 0}
.fab{width:60px;height:60px;right:24px;bottom:24px;box-shadow:0 15px 38px rgba(0,0,0,.4),0 0 0 7px rgba(37,211,102,.08)}

@media(max-width:900px){
  header,header.solid{padding:.5rem 0 0}
  .nav{min-height:56px;padding:.62rem .9rem}
  .hero-inner::before{left:-1rem;width:calc(100% + 2rem)}
  .hero h1{font-size:clamp(3rem,13vw,5.2rem)}
}

@media(max-width:620px){
  .wrap{width:min(92vw,1180px)}
  .brand b{font-size:1.03rem;letter-spacing:.22em}
  .brand i{display:none}
  .langs{gap:.42rem;margin-left:auto}
  .nav a.back{display:none}
  .hero{min-height:760px}
  .hero-inner{padding:7rem 0 3.4rem}
  .hero-inner::before{top:5.7rem;bottom:1.5rem;left:-.8rem;width:calc(100% + 1.6rem);border-radius:20px}
  .hero h1{font-size:clamp(2.85rem,14.5vw,4.25rem)}
  .hero-meta{gap:.8rem 1.4rem}
  .btn{width:100%;justify-content:center}
  section{padding:5.2rem 0}
  .tile,.duo figure,.serata .wide,.map,.mapbox{border-radius:13px}
  main > .hero:not(:has(.hero-inner)){min-height:560px;padding:7rem 0 3rem}
  main > .hero:not(:has(.hero-inner)) .wrap{border-radius:18px}
  .fab{right:16px;bottom:16px;width:56px;height:56px}
}

@media(prefers-reduced-motion:reduce){
  .btn,.tile img,.duo img{transition:none}
  .btn:hover{transform:none}
}

/* FAQ */
.faq dl{margin-top:2.6rem;display:grid;gap:1.75rem;max-width:66ch}
.faq dt{font-weight:600;color:var(--paper);margin-bottom:.5rem;align-items:baseline}
.faq dd{margin:0 0 0 1.55rem;color:var(--muted);line-height:1.7}
.faq dd a{color:var(--paper);border-bottom:1px solid var(--gold)}
.faq dd a:hover{color:var(--gold)}