/* Reel nella hero della home (Dario, 01/11/2026): loop muto in un telefonino, al tocco il video completo. */
.rs .hh-reel{margin:0;position:relative;z-index:1;justify-self:center;width:min(230px,62vw)}
.rs .hh-tel{position:relative;display:block;width:100%;margin:0;border:0;font:inherit;color:inherit;cursor:pointer;
  background:#0a1b25;border-radius:36px;padding:8px;transform:rotate(2deg);transition:transform .25s ease;
  box-shadow:0 30px 60px -22px rgba(0,20,35,.65),0 0 0 2px rgba(255,255,255,.08) inset}
.rs .hh-tel:hover{transform:rotate(0) scale(1.02)}
.rs .hh-tel:focus-visible{outline:3px solid #ffb81f;outline-offset:5px}
.rs .hh-tel video{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:29px;background:#0b3a52;pointer-events:none}
.rs .hh-notch{position:absolute;z-index:2;top:14px;left:50%;width:34%;height:15px;margin-left:-17%;border-radius:99px;background:#0a1b25}
.rs .hh-play{position:absolute;z-index:2;left:50%;bottom:22px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:.45rem;
  white-space:nowrap;padding:.55rem 1rem .55rem .65rem;border-radius:99px;background:rgba(255,255,255,.94);color:#005578;
  font-weight:800;font-size:.92rem;line-height:1;box-shadow:0 8px 22px -8px rgba(0,20,35,.55)}
.rs .hh-play svg{flex:none;box-sizing:border-box;width:28px;height:28px;padding:6px 5px 6px 7px;border-radius:50%;background:#ff6f4b;color:#fff}
.rs .hh-tel:hover .hh-play{background:#fff}
@media(min-width:992px){.rs .hh-reel{justify-self:end;width:min(270px,100%);margin-right:2rem}}
@media(max-width:991px){.rs .hh-reel{margin-top:.75rem}}
@media(prefers-reduced-motion:reduce){.rs .hh-tel,.rs .hh-tel:hover{transition:none;transform:none}}

/* Variante «sfumato» (?hero=sfumato): niente cornice, il video si perde nel blu ai quattro lati.
   Maschera solo sul video, cosi' il bottone «Guarda il video» resta nitido. */
.rs .hh-reel--sfumato{width:min(330px,86vw)}
.rs .hh-reel--sfumato .hh-tel{background:none;padding:0;border-radius:0;box-shadow:none;transform:none}
.rs .hh-reel--sfumato .hh-tel:hover{transform:scale(1.015)}
.rs .hh-reel--sfumato .hh-notch{display:none}
.rs .hh-reel--sfumato .hh-tel video{border-radius:0;background:transparent;aspect-ratio:9/15;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24%,#000 76%,transparent 100%),linear-gradient(180deg,transparent 0,#000 16%,#000 74%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 24%,#000 76%,transparent 100%),linear-gradient(180deg,transparent 0,#000 16%,#000 74%,transparent 100%);
  mask-composite:intersect}
.rs .hh-reel--sfumato .hh-play{bottom:9%}
@media(min-width:992px){.rs .hh-reel--sfumato{width:min(400px,100%);margin-right:0}}

/* Lettore a schermo intero (dialog nativo: Esc e focus gestiti dal browser) */
.hh-lettore{padding:0;border:0;background:transparent;max-width:none;max-height:none;width:100vw;height:100vh;height:100dvh;margin:0;
  display:none;align-items:center;justify-content:center;overflow:hidden}
.hh-lettore[open]{display:flex}
.hh-lettore::backdrop{background:rgba(2,14,22,.96)}
.hh-lettore video{display:block;height:100%;max-height:100dvh;width:auto;max-width:100vw;aspect-ratio:9/16;object-fit:contain;background:#000}
@media(min-width:700px){.hh-lettore video{height:92vh;height:92dvh;border-radius:18px}}
.hh-chiudi{position:absolute;z-index:2;top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));width:48px;height:48px;
  display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.95);color:#06283a;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.hh-chiudi svg{width:24px;height:24px}
.hh-chiudi:hover{background:#fff}
.hh-chiudi:focus-visible{outline:3px solid #ffb81f;outline-offset:3px}