/* Equipe Ross — sito su misura
   Impianto: sezioni a schermo intero impilate (position: sticky); la successiva entra dal basso
   e copre la precedente, che si rimpicciolisce (scorrimento.js). Colori presi dall'insegna
   (azzurro acqua con scritta blu). Colori e font solo nel blocco :root. */

@font-face { font-family: "Cormorant"; src: url("font/cormorant.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("font/cormorant-corsivo.woff2") format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Raleway"; src: url("font/raleway.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Pinyon Script"; src: url("font/pinyon-script.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  /* Colori */
  --notte: #14262d;        /* blu-petrolio scuro: fondi scuri e testo */
  --acqua: #a9dde3;        /* l'azzurro dell'insegna */
  --blu: #1f5f86;          /* la scritta dell'insegna: pulsanti (AA con il bianco) */
  --nebbia: #eef3f3;       /* fondo chiaro */
  --bianco: #ffffff;
  --rame: #d9a27a;         /* corsivi e stelle sul fondo scuro (i ramati delle foto) */
  --grigio: #56656a;       /* testo secondario */
  /* Font */
  --f-titolo: "Cormorant", "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --f-testo: "Raleway", "Helvetica Neue", Arial, sans-serif;
  --f-corsivo: "Pinyon Script", "Snell Roundhand", "Apple Chancery", cursive;
  /* Misure */
  --margine: clamp(22px, 5vw, 72px);
  --alto: 100vh;
  color-scheme: light;
}
@supports (height: 100svh) { :root { --alto: 100svh; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--notte);
  color: var(--notte);
  font: 400 1rem/1.7 var(--f-testo);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--blu); outline-offset: 3px; }

/* ---------- Testata ---------- */
.testata {
  position: fixed; inset: 0 0 auto; z-index: 50;
  display: flex; align-items: center; gap: 24px;
  padding: calc(14px + env(safe-area-inset-top, 0px)) var(--margine) 14px;
  color: var(--bianco);
  transition: background-color .35s, padding .35s, transform .45s;
}
.testata.piena { background: rgba(20, 38, 45, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding-block: 10px; }
.testata.nascosta { transform: translateY(-110%); }
.marchio {
  font: 600 .95rem/1 var(--f-testo); letter-spacing: .32em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
}
.marchio img { display: block; height: 26px; width: auto; }
.testata__menu { display: flex; gap: 28px; margin-left: auto; }
.testata__menu a { font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; opacity: .85; }
.testata__menu a:hover, .testata__menu a[aria-current] { opacity: 1; text-decoration: underline; text-underline-offset: 6px; }
.testata__azioni { display: flex; gap: 8px; }
@media (max-width: 900px) {
  .testata__menu { display: none; }
  .testata__azioni { margin-left: auto; }
}
@media (max-width: 380px) { .marchio img { height: 21px; } }

/* ---------- Pulsanti e link ---------- */
.bottone {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 12px 26px;
  background: var(--blu); color: var(--bianco);
  font: 600 .74rem/1.2 var(--f-testo); letter-spacing: .2em; text-transform: uppercase;
  text-decoration: none; border: 1px solid var(--blu); cursor: pointer;
  transition: background-color .25s, color .25s, border-color .25s;
}
.bottone:hover { background: var(--notte); border-color: var(--notte); }
.bottone--piccolo { min-height: 38px; padding: 8px 14px; letter-spacing: .14em; }
.bottone--vuoto { background: transparent; color: var(--bianco); border-color: rgba(255,255,255,.7); }
.bottone--vuoto:hover { background: var(--bianco); color: var(--notte); border-color: var(--bianco); }
.bottone--vuoto-scuro { background: transparent; color: var(--notte); border-color: var(--notte); }
.bottone--vuoto-scuro:hover { background: var(--notte); color: var(--bianco); }
.bottone--chiaro { background: var(--acqua); color: var(--notte); border-color: var(--acqua); }
.bottone--chiaro:hover { background: var(--bianco); border-color: var(--bianco); color: var(--notte); }
.bottone--grande { min-height: 58px; padding: 16px 34px; font-size: .82rem; }
.collegamento {
  display: inline-block; font-weight: 600; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--blu); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px;
}

/* ---------- Pannelli impilati ---------- */
.pannello {
  position: sticky; top: 0;               /* top ricalcolato da scorrimento.js per i pannelli più alti dello schermo */
  min-height: var(--alto);
  overflow: clip;
  transform-origin: 50% 30%;
  border-radius: calc(var(--ombra, 0) * 60px);
  /* in fondo spazio vuoto in più: è la parte che la sezione successiva copre per prima,
     così l'ultima riga (es. «Leggi la storia di Caterina») resta leggibile mentre arriva */
  padding: calc(110px + env(safe-area-inset-top, 0px)) var(--margine) calc(80px + 22vh);
  display: flex; flex-direction: column; justify-content: center;
  box-shadow: 0 -30px 60px rgba(0,0,0,.2);
}
.pannello::after {               /* velo che scurisce il pannello coperto */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--notte); opacity: var(--ombra, 0);
}
.pannello--chiaro { background: var(--nebbia); }
.pannello--bianco { background: var(--bianco); }
.pannello--scuro { background: var(--notte); color: var(--bianco); }
.pannello--ultimo { position: relative; padding-bottom: 80px; }

/* ---------- Testi ricorrenti ---------- */
.corsivo { font: 400 2.1rem/1.1 var(--f-corsivo); color: var(--blu); margin: 0; }
.corsivo--grande { font-size: clamp(2.6rem, 6vw, 4.6rem); }
.titolo {
  font: 500 clamp(2.1rem, 4.4vw, 3.6rem)/1.08 var(--f-titolo);
  margin: .2em 0 .5em; text-wrap: balance; letter-spacing: -.005em;
}
.intestazione { text-align: center; margin: 0 auto 48px; max-width: 40rem; }

/* ---------- 1. Apertura ---------- */
.pannello--apertura { color: var(--bianco); justify-content: flex-end; padding-bottom: clamp(56px, 10vh, 110px); }
.apertura__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
@media (max-width: 760px) and (orientation: portrait) {
  /* su telefono: foto verticale dei capelli come sfondo e il marchio completo al centro */
  .apertura__foto { object-position: 50% 35%; }
  .pannello--apertura { align-items: center; text-align: center; }
  .apertura__testo { display: flex; flex-direction: column; align-items: center; }
  .apertura__marchio img { width: min(70vw, 290px); }
  .apertura__marchio { margin-bottom: 28px; }
  .apertura__sotto { font-size: 1.05rem; }
  .apertura__azioni { justify-content: center; }
  .pannello--apertura::before { background: linear-gradient(180deg, rgba(20,38,45,.55) 0%, rgba(20,38,45,.45) 45%, rgba(20,38,45,.85) 100%) !important; }
}
.pannello--apertura::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(20,38,45,.85) 0%, rgba(20,38,45,.55) 45%, rgba(20,38,45,.1) 80%),
    linear-gradient(180deg, rgba(20,38,45,.5) 0%, rgba(20,38,45,0) 30%, rgba(20,38,45,.6) 100%);
}
.apertura__testo { position: relative; z-index: 2; max-width: 46rem; text-shadow: 0 1px 14px rgba(20,38,45,.6); }
.apertura__marchio {
  font: 500 clamp(3.4rem, 11vw, 9.5rem)/.88 var(--f-titolo);
  text-transform: uppercase; letter-spacing: .04em; margin: 0;
}
/* Ingresso dell'apertura: le due parole salgono da sotto una linea, poi il resto */
.riga { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .04em; }
.riga > span, .riga > img { display: inline-block; animation: sale 1s cubic-bezier(.2,.75,.2,1) both; }
.apertura__marchio img { width: clamp(240px, 25vw, 380px); height: auto; filter: drop-shadow(0 2px 14px rgba(20,38,45,.45)); }
.apertura__marchio { margin-bottom: 28px !important; }
.testata:not(.piena) .marchio { opacity: 0; pointer-events: none; }  /* sopra l'apertura c'è già il marchio grande */
.pagina .testata .marchio { opacity: 1; pointer-events: auto; }
.riga + .riga > span { animation-delay: .12s; }
.apertura__testo .corsivo, .apertura__sotto, .apertura__azioni { animation: compare .9s ease-out .45s both; }
@keyframes sale { from { transform: translateY(105%); } }
@keyframes compare { from { opacity: 0; transform: translateY(14px); } }
@media (max-width: 760px) {
  .apertura__marchio .riga { display: block; }
}
.apertura__testo .corsivo { color: var(--acqua); margin: -.05em 0 .35em .1em; }
.apertura__sotto { font-size: clamp(1rem, 1.5vw, 1.15rem); max-width: 30rem; margin: 0 0 28px; }
.apertura__azioni { display: flex; flex-wrap: wrap; gap: 12px; }
.apertura__giu {
  position: absolute; z-index: 2; right: var(--margine); bottom: 28px;
  font-size: .68rem; letter-spacing: .3em; text-transform: uppercase;
  writing-mode: vertical-rl; padding-bottom: 56px; opacity: .8;
}
.apertura__giu::after {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 1px; height: 44px;
  background: currentColor; animation: giu 2.2s ease-in-out infinite; transform-origin: top;
}
@keyframes giu { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
@media (max-width: 600px) { .apertura__giu { display: none; } }

/* ---------- 2. Il salone ---------- */
.salone {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 6vw, 96px); align-items: center; max-width: 1180px; margin: 0 auto; width: 100%;
}
.salone__foto { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; }
.salone__foto img { width: 100%; height: 100%; object-fit: cover; }
.salone__testo { min-width: 0; max-width: 34rem; }
.salone__testo > p:not(.corsivo) { color: var(--grigio); margin: 0 0 1em; }
.salone__testo .bottone { margin-top: 14px; }
.salone__punti { margin: 28px 0; border-top: 1px solid rgba(20,38,45,.15); }
.salone__punti div { display: flex; gap: 16px; padding: 11px 0; border-bottom: 1px solid rgba(20,38,45,.15); font-size: .95rem; }
.salone__punti dt { flex: 0 0 8.5rem; font-weight: 600; }
.salone__punti dd { margin: 0; color: var(--grigio); min-width: 0; }
@media (max-width: 760px) {
  .salone { grid-template-columns: 1fr; }
  .salone__foto { max-width: 280px; aspect-ratio: 1; }
  .salone__punti div { flex-direction: column; gap: 0; }
  .salone__punti dt { flex: none; }
}

/* ---------- 3. Card dei servizi ---------- */
.carte {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 56px clamp(24px, 3vw, 44px); max-width: 980px; margin: 0 auto; width: 100%;
  align-items: start;
}
.carta { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.carta__foto { width: 100%; height: auto; aspect-ratio: 8 / 11; object-fit: cover; }
.carta__riquadro {
  position: relative; width: 84%; margin-top: -26%;
  background: var(--bianco); text-align: center;
  padding: 26px 16px 22px;
}
.carta__titolo {
  font: 600 1.05rem/1.35 var(--f-testo); letter-spacing: .16em; text-transform: uppercase;
  margin: 0; text-wrap: balance;
}
.carta__beneficio { font: italic 500 1.2rem/1.3 var(--f-titolo); color: var(--blu); margin: 8px 0 0; text-wrap: balance; }
.carta__bottone { width: 84%; margin-top: 18px; }
.carta__bottone[aria-expanded="true"] { background: var(--notte); border-color: var(--notte); }
.carta__dettagli { width: 84%; padding: 16px 2px 0; font-size: .95rem; color: var(--grigio); }
.carta__dettagli p { margin: 0 0 .8em; }
.carta__cosa { color: var(--notte); font-weight: 600; }

@media (max-width: 760px) {
  /* su telefono: card una sotto l'altra, foto quadrate per non allungare troppo la pagina */
  .carte { grid-template-columns: 1fr; gap: 44px; max-width: 440px; }
  .carta__foto { aspect-ratio: 1; }
  .carta__riquadro { margin-top: -18%; }
}


/* ---------- 4. Frase ---------- */
.pannello--frase { background: var(--acqua); align-items: center; text-align: center; padding-bottom: 56px; }
.nastro {
  align-self: stretch; margin: clamp(32px, 6vh, 64px) calc(var(--margine) * -1) 0; overflow: hidden;
}
.nastro__scorre { display: flex; gap: 14px; width: max-content; animation: nastro 45s linear infinite; }
.nastro__scorre img { height: clamp(150px, 24vh, 260px); width: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.nastro:hover .nastro__scorre { animation-play-state: paused; }
@keyframes nastro { to { transform: translateX(calc(-50% - 7px)); } }
.frase { margin: 0; display: flex; flex-direction: column; align-items: center; }
.frase__piccola { font: 400 clamp(3rem, 9vw, 7rem)/1 var(--f-corsivo); color: var(--blu); }
.frase__grande {
  font: 500 clamp(3.4rem, 15vw, 13rem)/.85 var(--f-titolo); color: var(--notte);
  text-transform: uppercase; letter-spacing: .03em;
}

/* ---------- 5. Recensioni ---------- */
.recensioni {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: clamp(40px, 7vw, 110px); max-width: 1100px; margin: 0 auto; width: 100%; align-items: center;
}
.recensioni .corsivo { color: var(--rame); }
.recensioni__testo > p:not(.corsivo) { color: rgba(255,255,255,.8); max-width: 32rem; }
.recensioni__azioni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.voto {
  display: grid; justify-items: center; text-align: center; gap: 10px; text-decoration: none;
  padding: 40px 24px; border: 1px solid rgba(255,255,255,.2);
}
.voto:hover { border-color: var(--acqua); }
.voto__numero { font: 500 clamp(4.5rem, 10vw, 7rem)/1 var(--f-titolo); }
.voto__stelle, .voto__stelle span {
  display: block; height: 22px; width: 120px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 0l3.1 7 7.4.6-5.6 4.9 1.7 7.5L12 16l-6.6 4 1.7-7.5L1.5 7.6 8.9 7z'/%3E%3C/svg%3E") 0 0 / 24px 22px repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 0l3.1 7 7.4.6-5.6 4.9 1.7 7.5L12 16l-6.6 4 1.7-7.5L1.5 7.6 8.9 7z'/%3E%3C/svg%3E") 0 0 / 24px 22px repeat-x;
}
.voto__stelle { background: rgba(255,255,255,.25); }
.voto__stelle span { background: var(--rame); }
.voto__testo { font-size: .9rem; color: rgba(255,255,255,.8); }
@media (max-width: 760px) { .recensioni { grid-template-columns: 1fr; } }
.citazioni {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px);
  max-width: 1100px; margin: clamp(40px, 6vh, 64px) auto 0; width: 100%;
}
.citazione { margin: 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.2); min-width: 0; }
.citazione blockquote { margin: 0 0 14px; font: italic 500 1.25rem/1.4 var(--f-titolo); }
.citazione figcaption { font-size: .8rem; letter-spacing: .06em; color: rgba(255,255,255,.7); }
.citazione__stelle { color: var(--rame); letter-spacing: .1em; margin-right: 6px; }
@media (max-width: 760px) { .citazioni { grid-template-columns: 1fr; } }

/* ---------- 6. Dove siamo ---------- */
.contatti {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(32px, 6vw, 96px); max-width: 1180px; margin: 0 auto; width: 100%; align-items: start;
}
.contatti__testo > p:not(.corsivo) { color: var(--grigio); max-width: 32rem; }
.contatti__azioni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.contatti__colonna { display: grid; gap: 26px; min-width: 0; }
.contatti__vetrina { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: 60% 50%; }
.contatti__dati { margin: 0; display: grid; gap: 26px; }
.contatti__dati dt { font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--blu); font-weight: 600; margin-bottom: 6px; }
.contatti__dati dd { margin: 0; }
.orari { border-collapse: collapse; font-variant-numeric: tabular-nums; }
.orari th { text-align: left; font-weight: 400; padding: 2px 24px 2px 0; color: var(--grigio); vertical-align: top; }
.orari td { padding: 2px 0; }
@media (max-width: 760px) { .contatti { grid-template-columns: 1fr; } }
.piede {
  margin: 80px calc(var(--margine) * -1) -80px; padding: 22px var(--margine) calc(22px + env(safe-area-inset-bottom, 0px));
  background: var(--notte); color: rgba(255,255,255,.75);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; font-size: .8rem;
}
.piede p { margin: 0; }

/* ---------- Pagina della storia ---------- */
.pagina { background: var(--nebbia); }
.pagina--pannelli { background: var(--notte); }
.storia__testa-dentro { max-width: 1080px; margin: 0 auto; width: 100%; }
.storia__giu { color: var(--blu); }
.pannello--acqua { background: var(--acqua); }
.pannello--acqua .capitolo__testo p:not(.capitolo__luogo) { color: var(--notte); }
.pannello--acqua .capitolo__foto--da-trovare { background: rgba(255,255,255,.35); }
.storia__titolo { font: 500 clamp(2.8rem, 7vw, 5.6rem)/1 var(--f-titolo); margin: .1em 0 .3em; text-wrap: balance; }
.storia__intro { font: italic 500 clamp(1.3rem, 2.2vw, 1.6rem)/1.4 var(--f-titolo); color: var(--grigio); max-width: 34rem; margin: 0; }
/* tre capitoli, foto e testo alternati */
.capitolo {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 90px);
  align-items: center; max-width: 1080px; margin: 0 auto; width: 100%;
}
.capitolo--rovescio .capitolo__testo { order: 2; }
.capitolo__testo { min-width: 0; max-width: 36rem; font-size: 1.05rem; }
.capitolo__testo p { margin: 0 0 1em; }
.capitolo__luogo {
  display: flex; align-items: center; gap: 12px; margin: 0 0 6px !important;
  font-size: .78rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--blu);
}
.capitolo__luogo span {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid currentColor; font: 500 1.1rem/1 var(--f-titolo); letter-spacing: 0;
}
.capitolo__titolo { font: 500 clamp(2rem, 4vw, 3rem)/1.1 var(--f-titolo); margin: 0 0 .6em; text-wrap: balance; }
.storia__forte { font: italic 500 2rem/1.2 var(--f-titolo) !important; color: var(--blu); }
.capitolo__foto { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; width: 100%; max-width: 420px; justify-self: center; }
.capitolo__foto img { width: 100%; height: 100%; object-fit: cover; }
.capitolo__foto--da-trovare {
  display: grid; place-items: center; text-align: center; padding: 24px;
  border: 2px dashed rgba(31,95,134,.4); background: rgba(169,221,227,.25);
}
.capitolo__foto--da-trovare figcaption { font: 600 .78rem/1.5 var(--f-testo); letter-spacing: .2em; text-transform: uppercase; color: var(--blu); }
.capitolo__foto--da-trovare figcaption span { display: block; margin-top: 6px; font: italic 500 1.2rem/1.3 var(--f-titolo); letter-spacing: 0; text-transform: none; color: var(--grigio); }
@media (max-width: 760px) {
  .capitolo { grid-template-columns: 1fr; }
  .capitolo--rovescio .capitolo__testo { order: 0; }
  .capitolo__foto { max-width: 300px; }
}
.storia__fine { text-align: center; }
.storia__fine-dentro { margin: auto 0; }
.storia__fine .corsivo { color: var(--acqua); }
.storia__fine .apertura__azioni { justify-content: center; margin-top: 24px; }
.pagina .piede { text-align: left; border-top: 1px solid rgba(255,255,255,.12); }
.testo-legale { padding: calc(120px + env(safe-area-inset-top, 0px)) var(--margine) 90px; max-width: 44rem; margin: 0 auto; }


/* ---------- Pallini di navigazione ---------- */
.pallini {
  position: fixed; right: max(6px, env(safe-area-inset-right, 0px)); top: 50%; z-index: 40;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 2px; padding: 6px 3px;
  background: rgba(20,38,45,.38); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-radius: 99px; transition: opacity .4s;
}
.pallini.nascosti { opacity: 0; pointer-events: none; }
.pallini a { position: relative; display: grid; place-items: center; width: 22px; height: 22px; }
.pallini a::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,.55); transition: transform .3s, background-color .3s;
}
.pallini a.attivo::before { background: var(--bianco); transform: scale(1.5); }
.pallini a span {
  position: absolute; right: 30px; white-space: nowrap; pointer-events: none;
  background: var(--notte); color: var(--bianco); font-size: .7rem; letter-spacing: .15em; text-transform: uppercase;
  padding: 4px 10px; opacity: 0; transform: translateX(6px); transition: opacity .2s, transform .2s;
}
.pallini a:hover span, .pallini a:focus-visible span { opacity: 1; transform: none; }
@media (min-width: 761px) {
  .pallini { right: 18px; padding: 8px 5px; gap: 6px; }
  .pallini a::before { width: 8px; height: 8px; }
}

/* ---------- Pulsante WhatsApp flottante ---------- */
.wa-flottante {
  position: fixed; z-index: 45;
  right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center;
  background: #25d366; color: #ffffff;   /* verde WhatsApp: riconoscibile a colpo d'occhio */
  box-shadow: 0 6px 20px rgba(0,0,0,.28);
  transition: transform .25s;
}
.wa-flottante:hover { transform: scale(1.08); }
@media (min-width: 761px) { .wa-flottante { right: 24px; bottom: 24px; width: 62px; height: 62px; } }

@media (prefers-reduced-motion: reduce) {
  .wa-flottante { transition: none; }
  .apertura__giu::after, .riga > span, .riga > img, .apertura__testo .corsivo, .apertura__sotto, .apertura__azioni { animation: none; }
  .nastro { overflow-x: auto; }
  .nastro__scorre { animation: none; }
  .bottone, .testata, .pallini { transition: none; }
}