/* Hero della homepage: 'Simmetria con acqua'.
   Generato dal file del design approvato (template9.html): stessi valori, ambito .g-hh. */
.g-hh{color-scheme:dark; --bg-top:#0B1226; --bg-mid:#0A1020; --bg-low:#070C19; --stage-glow:rgba(32,52,108,.75); --ivory:#F5F0E6; --ivory-80:rgba(245,240,230,.8); --ivory-60:rgba(245,240,230,.6); --gold:#CC9F52; --gold-light:#F2D690; --line:rgba(204,159,82,.3); --glass:rgba(245,240,230,.045); --glass-line:rgba(245,240,230,.1); --word:linear-gradient(180deg,rgba(245,240,230,.58) 0%,rgba(245,240,230,.2) 60%,rgba(245,240,230,.03) 100%); --beam:rgba(246,236,210,.15); --cta-bg:#F5F0E6; --cta-fg:#141A2E; --cta-glow:rgba(204,159,82,.38); --gold-text:linear-gradient(96deg,#8A5108,#CC9F52 28%,#F2D690 52%,#CC9F52 74%,#8A5108); --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif; --w-word:600; --w-h1:400; --w-name:500; --ls-word:.01em; --s-h1:1; --s-name:1; --sans:'Jost','Helvetica Neue',Arial,sans-serif; --gutter:clamp(16px,4vw,64px); --sh:clamp(720px,100svh,980px); --t-h1:clamp(40px,3.5vw,58px);}
.g-hh p,.g-hh h1{margin:0}
.g-hh .hero{position:relative;overflow:hidden;height:var(--sh);isolation:isolate; background:radial-gradient(ellipse 36% 56% at var(--cx,50%) 56%,var(--stage-glow),rgba(0,0,0,0) 72%),linear-gradient(180deg,var(--bg-top),var(--bg-mid) 55%,var(--bg-low))}
.g-hh .word{position:absolute;z-index:1;margin:0;white-space:nowrap;font-family:var(--serif);font-weight:var(--w-word);line-height:.74;letter-spacing:var(--ls-word);pointer-events:none;user-select:none; background:var(--word);-webkit-background-clip:text;background-clip:text;color:transparent}
.g-hh .beam{position:absolute;z-index:0;pointer-events:none;background:linear-gradient(180deg,var(--beam),rgba(0,0,0,0) 85%);clip-path:polygon(43% 0,57% 0,84% 100%,16% 100%);filter:blur(26px); -webkit-mask-image:linear-gradient(180deg,transparent,#000 16%);mask-image:linear-gradient(180deg,transparent,#000 16%)}
.g-hh .haze{position:absolute;z-index:0;left:-20%;right:-20%;top:22%;height:56%;pointer-events:none;opacity:.55; background:radial-gradient(ellipse 28% 40% at 30% 50%,rgba(150,170,220,.09),transparent 70%),radial-gradient(ellipse 28% 40% at 70% 40%,rgba(214,170,92,.08),transparent 70%)}
.g-hh .floor{position:absolute;z-index:2;height:1px;background:linear-gradient(90deg,rgba(204,159,82,0),rgba(204,159,82,.55) 50%,rgba(204,159,82,0))}
.g-hh .pool{position:absolute;z-index:2;height:34px;border-radius:50%;background:radial-gradient(closest-side,rgba(246,236,210,.2),rgba(246,236,210,0))}
.g-hh .fig{position:absolute;z-index:3;aspect-ratio:516/900;translate:-52.8% 0}
.g-hh .fig img{position:absolute;inset:0;width:100%;height:100%;max-width:none;filter:drop-shadow(0 28px 40px rgba(0,0,0,.5))}
.g-hh .eyebrow{display:flex;align-items:center;gap:14px;font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.g-hh .eyebrow::before{content:"";width:34px;height:1px;background:var(--gold)}
.g-hh h1{margin-top:16px;font-family:var(--serif);font-weight:var(--w-h1);font-size:calc(var(--t-h1) * var(--s-h1));line-height:1.04;letter-spacing:-.005em;text-wrap:balance}
.g-hh .lead{margin-top:14px;max-width:420px;font-size:16px;line-height:1.7;color:var(--ivory-80)}
.g-hh .cta{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:58px;padding:0 30px;border-radius:999px;background:var(--cta-bg);color:var(--cta-fg);font-size:15px;font-weight:600;white-space:nowrap; box-shadow:0 0 0 1px rgba(255,255,255,.16),0 0 40px 2px var(--cta-glow);transition:box-shadow .3s ease,transform .3s ease}
.g-hh .cta:hover{transform:translateY(-1px);box-shadow:0 0 0 1px rgba(255,255,255,.3),0 0 56px 8px var(--cta-glow)}
.g-hh .cta svg{width:18px;height:18px}
.g-hh .meta{display:flex;flex-direction:column;gap:10px;font-size:14px;color:var(--ivory-80)}
.g-hh .meta p{display:flex;align-items:center;gap:10px}
.g-hh .meta svg{width:16px;height:16px;flex:none;color:var(--gold)}
.g-hh .courses{position:absolute;z-index:5;left:0;right:0;bottom:24px}
.g-hh .cbar{display:flex;align-items:stretch;border-radius:22px;background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);overflow:hidden}
.g-hh .course{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:14px;padding:12px 18px;transition:background-color .25s}
.g-hh .course + .course{border-left:1px solid var(--glass-line)}
.g-hh .course:hover{background:rgba(245,240,230,.05)}
.g-hh .course img{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:none;border:1px solid var(--line);background:#C9C9C9}
.g-hh .course b{display:block;font-family:var(--serif);font-weight:var(--w-name);font-size:calc(19px * var(--s-name));line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-hh .course span{display:block;margin-top:3px;font-size:12.5px;color:var(--gold)}
.g-hh .course.all{flex:0 0 auto;justify-content:center;gap:10px;padding:0 26px;font-size:14px;font-weight:500;color:var(--ivory)}
.g-hh .course.all svg{width:18px;height:18px;color:var(--gold);transition:transform .25s}
.g-hh .course.all:hover svg{transform:translateX(3px)}
@media (prefers-reduced-motion:no-preference){
  .g-hh .rise{animation:g-rise 1.4s cubic-bezier(.16,1,.3,1) .15s both}
  .g-hh .fade{animation:g-fade 1.1s ease .35s both}
  .g-hh .spread{animation:g-spread 1.8s cubic-bezier(.16,1,.3,1) both}
  .g-hh .haze{animation:g-drift 26s ease-in-out infinite alternate}
}
@keyframes g-rise{from{opacity:0;translate:-52.8% 26px}to{opacity:1;translate:-52.8% 0}}
@keyframes g-fade{from{opacity:0}to{opacity:1}}
@keyframes g-spread{from{opacity:0;letter-spacing:.1em}to{opacity:1}}
@keyframes g-drift{from{transform:translateX(-4%)}to{transform:translateX(4%)}}
.g-hh .word{left:50%;translate:-50% 0;top:calc(var(--sh) * .22);font-size:min(22vw,calc((var(--sh) * .78 - 430px) / .7))}
.g-hh .beam{left:50%;top:84px;width:min(62vw,880px);height:calc(var(--sh) - 230px);translate:-50% 0}
.g-hh .floor{left:50%;bottom:150px;width:min(72vw,1040px);translate:-50% 0}
.g-hh .pool{left:50%;bottom:133px;width:420px;translate:-50% 0}
.g-hh .fig{left:50%;bottom:150px;height:calc(var(--sh) - 336px)}
.g-hh .twins{position:absolute;z-index:4;left:0;right:0;bottom:174px}
.g-hh .twins .g-wrap{display:flex;justify-content:space-between;align-items:flex-start}
.g-hh .twin{width:min(360px,27vw);padding-top:22px;border-top:1px solid var(--line)}
.g-hh .twin.a h1{margin-top:14px}
.g-hh .twin.b .lead{margin-top:0;font-size:16px}
.g-hh .twin.b .cta{margin-top:20px}
.g-hh .floor{background:linear-gradient(90deg,rgba(245,240,230,0),rgba(245,240,230,.3) 50%,rgba(245,240,230,0))}
.g-hh .pool{opacity:.55}
.g-hh .floor{bottom:192px}
.g-hh .pool{bottom:175px}
.g-hh .fig{bottom:192px;height:calc(var(--sh) - 378px)}
.g-hh .twins{bottom:216px}
.g-hh .water{position:absolute;z-index:1;left:50%;bottom:0;height:192px;width:min(80vw,1200px);translate:-50% 0;background:radial-gradient(ellipse 50% 100% at 50% 0%,rgba(40,64,130,.42),rgba(10,16,32,0) 100%)}
.g-hh .fig .refl{top:100%;transform:scaleY(-1);opacity:.34;filter:url(#ripple);-webkit-mask-image:linear-gradient(to top,rgba(0,0,0,.95) 0%,rgba(0,0,0,.3) 14%,transparent 30%);mask-image:linear-gradient(to top,rgba(0,0,0,.95) 0%,rgba(0,0,0,.3) 14%,transparent 30%)}
.g-hh .twin.a h1{margin-top:14px}
.g-hh .twin{width:min(400px,29vw);display:flex;flex-direction:column}
.g-hh .twins .g-wrap{align-items:stretch}
.g-hh .twin.a .rating{margin-top:auto;padding-top:18px}
.g-hh .twin.b .cta{margin-top:auto;align-self:flex-start}
.g-hh .twin.b .lead{margin-bottom:20px}
.g-hh .word{top:calc(var(--sh) * .21);font-size:min(22vw,calc((var(--sh) * .79 - 473px) / .7))}
.g-hh .rating{display:inline-flex;align-items:center;gap:10px;margin-top:18px;font-size:14px;color:var(--ivory-80);transition:color .2s}
.g-hh .rating:hover{color:var(--ivory)}
.g-hh .rating .stars{letter-spacing:2px;font-size:13px;background:var(--gold-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.g-hh .rating b{font-weight:600;color:var(--ivory)}
.g-hh .direct{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:14px;color:var(--ivory-80)}
.g-hh .direct img{width:28px;height:28px;border-radius:50%;object-fit:cover;border:1px solid var(--line)}
.g-hh .notes{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:16px;font-size:14px;color:var(--ivory-80)}
.g-hh .notes p{display:flex;align-items:center;gap:9px}
.g-hh .notes i{width:7px;height:7px;border-radius:50%;background:var(--gold);flex:none}
.g-hh .notes svg{width:15px;height:15px;color:var(--gold);flex:none}
.g-hh .course img{filter:brightness(.74) contrast(1.06) saturate(.9);background:#2A3350}
.g-hh .course:hover img{filter:brightness(.9) contrast(1.04)}
.g-hh .course img{transition:filter .3s ease}
.g-hh .word,.g-hh .fig{will-change:transform}
@media (min-width:821px) and (max-height:800px){
  .g-hh{--t-h1:clamp(36px,3.1vw,48px)}
  .g-hh .lead{display:none}
  .g-hh .word{font-size:min(22vw,calc((var(--sh) * .78 - 370px) / .7))}
  .g-hh .word{font-size:min(22vw,calc((var(--sh) * .79 - 436px) / .7))}
}
@media (max-width:1180px){
  .g-hh .course:nth-child(5){display:none}
}
@media (max-width:820px){
  .g-hh{--t-h1:clamp(36px,10vw,46px)}
  .g-hh .hero{height:auto}
  .g-hh .stagebox{position:relative;height:480px}
  .g-hh .word{font-size:25vw!important;top:22px!important;left:50%!important}
  .g-hh .beam{width:120vw!important;height:440px!important;top:0!important}
  .g-hh .floor{bottom:26px!important;width:90vw!important}
  .g-hh .pool{bottom:10px!important;width:260px!important}
  .g-hh .fig{bottom:26px!important;height:420px!important}
  .g-hh .courses{position:relative!important;inset:auto!important;left:auto!important;right:auto!important;bottom:auto!important;width:auto!important}
  .g-hh .twins{position:relative!important;inset:auto!important;left:auto!important;right:auto!important;bottom:auto!important;width:auto!important;height:auto!important;translate:none}
  .g-hh .twins .g-wrap{display:block}
  .g-hh .twin{width:auto;padding-top:20px}
  .g-hh .twin.a{margin-top:8px;border-top:0;padding-top:0}
  .g-hh .twin.b{margin-top:24px}
  .g-hh .water{height:26px;width:90vw}
  .g-hh .stagebox{height:380px}
  .g-hh .fig{height:330px!important}
  .g-hh .word{font-size:24vw!important;top:142px!important}
  .g-hh .beam{height:360px!important}
  .g-hh .twins .g-wrap{display:flex;flex-direction:column}
  .g-hh .twin{display:contents}
  .g-hh .twin.a .eyebrow{order:1;margin-top:6px}
  .g-hh .twin.a h1{order:2}
  .g-hh .twin.b .cta{order:3;margin-top:20px}
  .g-hh .twin.b .notes{order:4;margin-top:14px}
  .g-hh .twin.b .lead{order:5;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
  .g-hh .twin.a .rating{order:6;margin-top:18px}
  .g-hh .twin.a .direct{order:7}
  .g-hh .floor{bottom:26px}
  .g-hh .pool{bottom:10px}
  .g-hh .fig{bottom:26px}
  .g-hh .fig .refl{-webkit-mask-image:linear-gradient(to top,rgba(0,0,0,.9) 0%,transparent 5%);mask-image:linear-gradient(to top,rgba(0,0,0,.9) 0%,transparent 5%)}
  .g-hh .cta{width:100%}
  .g-hh .courses{margin-top:34px;padding-bottom:34px}
  .g-hh .cbar{display:flex;gap:10px;background:none;border:0;border-radius:0;backdrop-filter:none;-webkit-backdrop-filter:none;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-right:calc(-1*max(var(--gutter),env(safe-area-inset-right,0px)))}
  .g-hh .cbar::-webkit-scrollbar{display:none}
  .g-hh .course,.g-hh .course:nth-child(5){display:flex;flex:0 0 auto;width:220px;scroll-snap-align:start;border-radius:18px;background:var(--glass);border:1px solid var(--glass-line)}
  .g-hh .course + .course{border-left:1px solid var(--glass-line)}
  .g-hh .course.all{width:auto;padding:0 22px;margin-right:max(var(--gutter),env(safe-area-inset-right,0px))}
}

/* ---- adattamento al tema (non cambia il design) ---- */
.g-hh{font-family:var(--sans);color:var(--ivory);font-size:16px;line-height:normal}
.g-hh a{color:inherit;text-decoration:none}
.g-hh img{display:inline}
.g-hh .fig img,.g-hh .course img{display:block}
/* nel design la testata sta dentro l'hero: sul telefono ne occupa lo spazio */
.g-hh__headspace{display:none}
@media (max-width:820px){.g-hh__headspace{display:block;height:calc(40px + 84px * 481 / 700)}}
/* barra dei corsi su finestre medie: i nomi non si sovrappongono a "Tutti i corsi" */
.g-hh .course div{min-width:0}
@media (min-width:1181px) and (max-width:1400px){.g-hh .course:nth-child(5){display:none}}
@media (min-width:821px) and (max-width:1100px){
  .g-hh .course:nth-child(4){display:none}
  .g-hh .course{gap:12px;padding:12px 14px}
  .g-hh .course.all{padding:0 18px}
}