/* Balaton Sailing Group — Mediterranean palette, animated waves.
   v1 2026-10-24. Bright, sunny, Mar Menor. */
:root{
  --sea:#1B7FBF;        /* sea blue (primary) */
  --sea-deep:#125E8C;   /* darker sea for hovers */
  --turq:#2EC4B6;       /* turquoise (accent) */
  --sun:#FFC94D;        /* sun gold */
  --terra:#E2725B;      /* terracotta (warm accent) */
  --ink:#16324A;        /* deep ink (text) */
  --cream:#FFF8EC;      /* sand cream (page bg) */
  --white:#ffffff;
  --max:1100px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  overflow-x:hidden;
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink);
  background:var(--cream);
  line-height:1.6;
}
img{max-width:100%;height:auto}
.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}
.narrow{max-width:760px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;z-index:100;border-radius:0 0 8px 0}
.skip:focus{left:0}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,248,236,.94);
  backdrop-filter:blur(6px);
  border-bottom:3px solid var(--sun);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 22px;max-width:var(--max);margin:0 auto;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand-logo{width:58px;height:58px;display:block}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-text strong{font-size:1.15rem;letter-spacing:.4px}
.brand-text span{font-size:.85rem;color:var(--sea);font-weight:600}
.site-header nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.site-header nav a{
  text-decoration:none;color:var(--ink);font-weight:600;font-size:.95rem;
  padding:8px 12px;border-radius:999px;transition:background .15s,color .15s;
}
.site-header nav a:hover{background:var(--sun)}
.site-header nav .nav-cta{background:var(--sea);color:#fff}
.site-header nav .nav-cta:hover{background:var(--sea-deep)}
.lang-switch{display:inline-flex;border:2px solid var(--sea);border-radius:999px;overflow:hidden;margin-left:8px}
.lang-switch a{padding:5px 12px;font-size:.85rem;text-decoration:none;color:var(--sea);font-weight:700}
.lang-switch a[aria-current="true"]{background:var(--sea);color:#fff}

/* ---------- hero ---------- */
.hero{
  position:relative;
  background:
    linear-gradient(180deg, rgba(255,248,236,.82) 0%, rgba(255,248,236,.55) 45%, rgba(255,248,236,.94) 100%),
    url("assets/hero.jpg") center 30%/cover no-repeat;
  color:var(--ink);
  overflow:hidden;
}
.hero-inner{position:relative;z-index:2;padding:96px 22px 150px;max-width:var(--max);margin:0 auto}
.eyebrow{
  text-transform:uppercase;letter-spacing:3px;font-weight:700;font-size:.85rem;
  color:var(--terra);margin:0 0 10px;
}
.hero h1{font-size:clamp(2.2rem,5.2vw,3.6rem);line-height:1.12;margin:0 0 18px;font-weight:800}
.lede{font-size:clamp(1.05rem,2vw,1.3rem);max-width:34em;margin:0 0 26px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 34px}
.btn{
  display:inline-block;background:var(--sea);color:#fff;text-decoration:none;font-weight:700;
  padding:13px 26px;border-radius:999px;border:2px solid var(--sea);
  transition:background .15s,transform .1s;font-size:1rem;
}
.btn:hover{background:var(--sea-deep)}
.btn:active{transform:scale(.98)}
.btn-ghost{background:transparent;color:var(--sea);border-color:var(--sea)}
.btn-ghost:hover{background:var(--sea);color:#fff}
.btn-sun{background:var(--sun);border-color:var(--sun);color:var(--ink)}
.btn-sun:hover{background:#f0b32e}
.facts{
  list-style:none;display:flex;gap:28px;flex-wrap:wrap;margin:0;padding:0;
  background:rgba(255,255,255,.75);border:2px solid var(--sun);border-radius:16px;
  padding:16px 22px;width:fit-content;
}
.facts li{display:flex;flex-direction:column;line-height:1.25}
.facts strong{font-size:1.05rem;color:var(--sea-deep)}
.facts span{font-size:.85rem;opacity:.85}

/* animated waves (hero bottom + dividers) */
.waves{position:relative;line-height:0;z-index:1;overflow:hidden}
.waves svg{display:block;width:200%;height:110px;animation:drift 16s linear infinite}
.waves.w2 svg{height:80px;animation-duration:23s;animation-direction:reverse;opacity:.65}
.waves.w3 svg{height:60px;animation-duration:31s;opacity:.4}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){
  .waves svg{animation:none}
  html{scroll-behavior:auto}
}

/* ---------- bands (sections) ---------- */
.band{padding:74px 0 84px;position:relative}
.band-alt{background:linear-gradient(180deg,#fff 0%,var(--cream) 100%)}
.band h2{
  font-size:clamp(1.7rem,3.4vw,2.4rem);margin:0 0 22px;font-weight:800;position:relative;padding-bottom:14px;
}
.band h2::after{
  content:"";position:absolute;left:0;bottom:0;width:74px;height:5px;border-radius:3px;
  background:linear-gradient(90deg,var(--sun) 0%,var(--turq) 100%);
}
.band p{margin:0 0 16px;max-width:46em}
.band h3{font-size:1.2rem;margin:26px 0 10px;color:var(--sea-deep)}
.closing{font-size:1.15rem;font-weight:600;color:var(--terra)}
a{color:var(--sea)}
a:hover{color:var(--sea-deep)}

/* photo strip inside sections */
.photo{
  border-radius:18px;overflow:hidden;box-shadow:0 10px 30px rgba(22,50,74,.16);
  margin:26px 0 8px;
}
.photo img{display:block;width:100%}
.photo figcaption{padding:10px 16px;font-size:.85rem;color:#5a6b7a;background:#fff}
.two-col{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:start}
@media (max-width:840px){.two-col{grid-template-columns:1fr}}

/* panel (cards) */
.panel{
  background:#fff;border-radius:16px;padding:22px 26px;
  box-shadow:0 8px 24px rgba(22,50,74,.10);border-top:5px solid var(--turq);
}
.panel h3{margin-top:0}
.ticks{list-style:none;margin:0;padding:0}
.ticks li{padding:7px 0 7px 34px;position:relative}
.ticks li::before{
  content:"";position:absolute;left:0;top:7px;width:22px;height:22px;border-radius:50%;
  background:var(--sun) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5" fill="none" stroke="%2316324A" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/14px no-repeat;
}

/* big numbers (fees / facts) */
.fee-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin:26px 0}
.fee{
  background:#fff;border-radius:16px;padding:24px;text-align:center;
  box-shadow:0 8px 24px rgba(22,50,74,.10);border-top:5px solid var(--sea);
}
.fee.alt{border-top-color:var(--terra)}
.fee .price{font-size:2.2rem;font-weight:800;color:var(--sea-deep);line-height:1.1}
.fee.alt .price{color:var(--terra)}
.fee .label{font-weight:700;margin-top:8px}
.fee .note{font-size:.85rem;opacity:.8;margin-top:6px}

/* boats list */
.boat-list{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:14px}
.boat-list li{
  background:#fff;border-radius:14px;padding:16px 20px;display:flex;gap:16px;align-items:center;
  box-shadow:0 6px 18px rgba(22,50,74,.08);border-left:6px solid var(--turq);
}
.boat-list .b-num{
  flex:0 0 auto;width:46px;height:46px;border-radius:50%;background:var(--sun);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.2rem;color:var(--ink);
}

/* contact */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:24px}
.contact-card{
  background:#fff;border-radius:14px;padding:18px 20px;text-decoration:none;color:var(--ink);
  display:flex;gap:14px;align-items:center;box-shadow:0 6px 18px rgba(22,50,74,.08);
  border-left:6px solid var(--sea);transition:transform .12s;
}
.contact-card:hover{transform:translateY(-2px);color:var(--ink)}
.contact-card .c-ico{
  flex:0 0 auto;width:44px;height:44px;border-radius:12px;background:var(--cream);
  display:flex;align-items:center;justify-content:center;font-size:1.4rem;
}
.contact-card .c-label{font-size:.8rem;text-transform:uppercase;letter-spacing:1px;color:var(--terra);font-weight:700}
.contact-card .c-value{font-weight:700;font-size:1.02rem;line-height:1.3}

/* footer */
.site-footer{
  background:var(--ink);color:#dce8f2;padding:34px 0;font-size:.95rem;
}
.site-footer .footer-inner{display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center}
.site-footer a{color:var(--sun)}
.footer-wave{display:block;width:100%;height:46px}

/* language note */
.lang-note{font-size:.8rem;opacity:.75;margin-top:10px}

/* floating back-to-top — right side, appears at 1/4 of page depth */
.back-top{
  position:fixed;right:22px;bottom:26px;z-index:9000;
  width:54px;height:54px;border-radius:50%;border:0;cursor:pointer;
  background:var(--sea);color:#fff;
  box-shadow:0 8px 20px rgba(22,50,74,.28);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .25s,transform .25s,visibility .25s,background .15s;
}
.back-top.show{opacity:1;visibility:visible;transform:translateY(0)}
.back-top:hover{background:var(--sea-deep)}
.back-top:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
.back-top svg{width:26px;height:26px;display:block}
@media (prefers-reduced-motion: reduce){.back-top{transition:none}}