/* Base comune alle varianti hero di supersalmen.com: palette "Cielo aperto", font, barra in alto, pulsanti, nota gialla */
:root{
  --sky:#3FB5FB; --sky2:#8FD3FF; --sky3:#D2EEFF; --cape:#F0600A; --cape2:#FF8A3D; --navy:#0B3448; --navy2:#123F57; --paper:#FFFFFF; --mute:#4D6676;
  --f-head:"Big Shoulders Display","Arial Narrow",sans-serif;
  --f-body:"Bricolage Grotesque",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  color-scheme:light;
}
*{box-sizing:border-box; margin:0; padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--f-body); color:var(--navy); background:var(--sky); line-height:1.5; overflow-x:hidden}
img{display:block; max-width:100%}
a{color:inherit}

/* barra in alto */
.nav{position:relative; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:16px; max-width:1240px; margin:0 auto; padding:20px 24px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.brand img{width:44px; height:44px; border-radius:50%; box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--cape)}
.brand span{font-family:var(--f-head); font-weight:900; font-size:28px; letter-spacing:.02em; text-transform:uppercase; line-height:1}
.nav .mini{font-family:var(--f-head); font-weight:900; font-size:20px; letter-spacing:.04em; text-transform:uppercase; text-decoration:none; background:var(--navy); color:var(--paper); border-radius:999px; padding:10px 20px; white-space:nowrap}

/* pulsante principale */
.cta{display:inline-flex; align-items:center; gap:12px; font-family:var(--f-head); font-weight:900; font-size:30px; letter-spacing:.02em; text-transform:uppercase; text-decoration:none; color:var(--paper); background:var(--cape); border:4px solid var(--navy); border-radius:999px; padding:14px 34px 12px; box-shadow:0 7px 0 var(--navy); transition:transform .15s, box-shadow .15s}
.cta:hover{transform:translateY(3px); box-shadow:0 4px 0 var(--navy)}
.cta svg{width:26px; height:26px; flex:none}
.micro{font-size:15px; font-weight:600; margin-top:14px; max-width:46ch}
.eyebrow{font-family:var(--f-mono); font-weight:700; font-size:13px; letter-spacing:.14em; text-transform:uppercase}

/* nota gialla: dato da confermare con Salmen, si toglie in produzione */
.nota{display:inline-block; position:relative; margin-top:16px; max-width:340px; background:#FFE45C; color:#3B3000; font-family:var(--f-body); font-size:13px; font-weight:600; line-height:1.35; padding:10px 12px 10px 34px; border-radius:4px; box-shadow:0 6px 14px rgba(0,0,0,.18); transform:rotate(-1.2deg)}
.nota::before{content:"!"; position:absolute; left:10px; top:9px; width:16px; height:16px; border-radius:50%; background:#3B3000; color:#FFE45C; font-size:11px; font-weight:800; text-align:center; line-height:16px}

/* nuvole */
.cloud{position:absolute; background:var(--paper); border-radius:999px; opacity:.9; pointer-events:none}
.cloud::before,.cloud::after{content:""; position:absolute; background:var(--paper); border-radius:50%}
.cloud::before{width:55%; height:170%; left:14%; bottom:30%}
.cloud::after{width:42%; height:135%; right:12%; bottom:22%}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(60px)}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-14px) rotate(1deg)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

.sticky{display:none}
@media (max-width:640px){
  body{padding-bottom:76px}
  .sticky{display:block; position:fixed; z-index:20; left:12px; right:12px; bottom:12px; text-align:center; font-family:var(--f-head); font-weight:900; font-size:24px; letter-spacing:.02em; text-transform:uppercase; text-decoration:none; color:var(--paper); background:var(--cape); border:3px solid var(--navy); border-radius:999px; padding:12px 16px 10px; box-shadow:0 5px 0 var(--navy)}
  .hero > .cloud{display:none}
  .nav{padding:14px 16px}
  .brand img{width:36px; height:36px}
  .brand span{font-size:22px}
  .nav .mini{font-size:16px; padding:8px 14px}
  .cta{font-size:21px; padding:12px 20px 10px; white-space:nowrap}
  .cta svg{width:20px; height:20px}
}