/* ============================================================
   styles.css — Welcome Book · La Collina dei Ciliegi
   Mobile-first. Nessuna stringa visibile all'ospite vive qui.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

button, .card, .azione, .barra__voce, .luogo, .destinazione, .emergenza, .recensione__azione, .contatti-riga, .trasporto {
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-testo);
  font-size: var(--t-testo);
  font-weight: var(--peso-testo);
  line-height: var(--interlinea-testo);
  color: var(--testo);
  background: var(--sfondo);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--font-titoli);
  font-weight: var(--peso-titolo);
  line-height: var(--interlinea-titolo);
  letter-spacing: var(--spaziatura-titolo);
  color: var(--c-nero);
  margin: 0;
}

p { margin: 0 0 var(--s-3); }
p:last-child { margin-bottom: 0; }
strong { font-weight: 600; color: var(--testo-forte); }
a { color: inherit; }

[hidden] { display: none !important; }

/* ------------------------------------------------------------
   Il ritratto in filigrana. Fisso, dietro tutto, quasi invisibile:
   deve dare un'impronta, non farsi guardare. Se si nota, è sbagliato.
   ------------------------------------------------------------ */
body.con-ritratto::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  /* Tre ritratti sfalsati lungo il lato destro: uno alto, uno rientrato,
     uno che sporge di nuovo. Lo scarto è quello del collage di foto
     della home del sito. Le card sono opache e ci passano davanti,
     quindi il testo non ne risente mai. */
  background-image: var(--ritratto-1), var(--ritratto-2), var(--ritratto-3);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position:
    right -2.5rem top 1rem,
    right 5rem    top 15rem,
    right -1.5rem top 27rem;
  background-size:
    9rem 15rem,
    8rem 10rem,
    9rem 9rem;

  filter: grayscale(1) contrast(1.05);
  opacity: .5;
  /* sfuma verso sinistra: la colonna del testo resta pulita */
  /* Misurato: col vecchio sfumato il testo nudo dei paragrafi scendeva a
     3.04:1 sopra il volto. Ora i ritratti restano nella fascia destra. */
  -webkit-mask-image: linear-gradient(to left, #000 8%, rgba(0,0,0,.28) 24%, transparent 42%);
  mask-image: linear-gradient(to left, #000 8%, rgba(0,0,0,.28) 24%, transparent 42%);
}

/* schermi bassi: due ritratti bastano, il terzo uscirebbe comunque */
@media (max-height: 720px) {
  body.con-ritratto::before {
    background-position:
      right -2.5rem top 0,
      right 5rem    top 13rem,
      right -1.5rem top 24rem;
    background-size: 8rem 13rem, 7rem 9rem, 8rem 8rem;
  }
}

@media (min-width: 60rem) {
  body.con-ritratto::before {
    background-position:
      right 1rem  top 2rem,
      right 13rem top 18rem,
      right 2rem  top 34rem;
    background-size:
      13rem 21rem,
      11rem 14rem,
      12rem 12rem;
    opacity: .42;
    -webkit-mask-image: linear-gradient(to left, #000 42%, rgba(0,0,0,.3) 70%, transparent 90%);
    mask-image: linear-gradient(to left, #000 42%, rgba(0,0,0,.3) 70%, transparent 90%);
  }
}



.solo-lettori {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible {
  outline: 2px solid var(--accento);
  outline-offset: 3px;
  border-radius: var(--r-piccolo);
}

.guscio {
  width: 100%;
  max-width: var(--larghezza-max);
  margin: 0 auto;
  padding: 0 var(--s-4);
}

/* ============================================================
   1 · SCHERMATA DI SCELTA LINGUA
   ============================================================ */

.lingua-schermata {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-5);
  padding: var(--s-5) var(--s-5) calc(var(--s-5) + env(safe-area-inset-bottom));
  background: var(--sfondo);
  text-align: center;
  overflow-y: auto;
}

.lingua-schermata__logo {
  width: min(58%, 13rem);
  height: auto;
  mix-blend-mode: multiply;
}

.lingua-schermata__saluti {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

/* da tre lingue in su: i saluti in fila, separati da un punto */
.lingua-schermata__saluti[data-molte="si"] {
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-2) var(--s-3);
  max-width: 22rem;
}
.lingua-schermata__saluti[data-molte="si"] .lingua-schermata__saluto,
.lingua-schermata__saluti[data-molte="si"] .lingua-schermata__saluto + .lingua-schermata__saluto {
  font-size: var(--t-h2);
  color: var(--c-nero);
}
/* il puntino appartiene al saluto che lo precede, così non resta
   appeso da solo a fine riga quando i saluti vanno a capo */
.lingua-schermata__saluti[data-molte="si"] .lingua-schermata__saluto:not(:last-of-type)::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 4px; height: 4px;
  margin-left: var(--s-3);
  border-radius: 50%;
  background: var(--c-rosa);
}
.lingua-schermata__punto { display: none; }

.lingua-schermata__saluto {
  font-family: var(--font-titoli);
  font-size: var(--t-display);
  font-weight: var(--peso-display);
  line-height: 1.1;
  letter-spacing: 0.03em;
  color: var(--c-nero);
}
.lingua-schermata__saluto + .lingua-schermata__saluto {
  font-size: var(--t-h2);
  color: var(--c-grigio);
}

.lingua-schermata__sottotitoli {
  font-family: var(--font-etichette);
  font-size: var(--t-micro);
  font-weight: var(--peso-etichetta);
  letter-spacing: var(--spaziatura-etichetta);
  text-transform: uppercase;
  color: var(--c-grigio);
  line-height: 1.9;
}

.lingua-schermata__bottoni {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  width: 100%;
  max-width: 20rem;
}

/* più di tre lingue: due colonne, e l'ultima occupa la riga intera */
.lingua-schermata__bottoni:not([data-quante="1"]):not([data-quante="2"]):not([data-quante="3"]) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
  max-width: 22rem;
}
.lingua-schermata__bottoni[data-quante="5"] .bottone-lingua:last-child {
  grid-column: 1 / -1;
}
.lingua-schermata__bottoni[data-quante="5"] .bottone-lingua {
  min-height: 3.5rem;
  font-size: var(--t-h3);
}
.lingua-schermata__bottoni[data-quante="5"] .bottone-lingua[data-suggerita="si"]::after {
  right: var(--s-3);
}

.bottone-lingua {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 4rem;
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--bordo);
  border-radius: var(--r-grande);
  background: var(--sfondo-superficie);
  color: var(--c-nero);
  font-family: var(--font-titoli);
  font-size: var(--t-h2);
  font-weight: var(--peso-titolo);
  letter-spacing: var(--spaziatura-titolo);
  cursor: pointer;
  transition: background var(--transizione), border-color var(--transizione), transform var(--transizione);
}
.bottone-lingua:active { transform: scale(.985); }

/* la lingua del browser è solo suggerita, non decide */
.bottone-lingua[data-suggerita="si"] {
  border-color: var(--accento);
  box-shadow: 0 0 0 1px var(--accento);
}
.bottone-lingua[data-suggerita="si"]::after {
  content: "";
  position: absolute;
  right: var(--s-5);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accento);
}

/* ============================================================
   2 · INTESTAZIONE
   ============================================================ */

.intestazione {
  padding: calc(var(--s-2) + env(safe-area-inset-top)) 0 var(--s-1);
  text-align: center;
}

.intestazione__logo {
  width: min(36%, 7rem);
  height: auto;
  margin: 0 auto var(--s-1);
  display: block;
  mix-blend-mode: multiply;
}

.intestazione__saluto {
  font-size: var(--t-h1);
  font-weight: var(--peso-display);
  color: var(--c-verde);
}

.intestazione__intro {
  margin: var(--s-2) auto 0;
  max-width: 24rem;
  font-size: var(--t-testo);
  font-weight: 600;
  line-height: 1.4;
  color: var(--testo-forte);
}

/* ============================================================
   3 · HOME — griglia di card
   ============================================================ */

.griglia {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-2);
  padding-top: var(--s-3);
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-height: 5.5rem;
  padding: var(--s-3);
  border: 1px solid transparent;
  border-radius: var(--r-grande);
  background: var(--sfondo-superficie);
  box-shadow: var(--ombra-card);
  text-align: left;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  transition: transform var(--transizione), border-color var(--transizione);
}
/* il pezzetto colorato: dice a quale sezione appartiene la card
   senza tingere l'icona, che resta uguale per tutte */
.card::before {
  content: "";
  position: absolute;
  top: 0; left: var(--s-4);
  width: 2.5rem; height: 4px;
  border-radius: 0 0 var(--r-pillola) var(--r-pillola);
  background: var(--tinta, var(--accento));
  transition: width var(--transizione);
}
@media (hover: hover) {
  .card:hover::before { width: 4rem; }
}

.card:active { transform: scale(.98); }
@media (hover: hover) {
  .card:hover { border-color: var(--c-menta-scura); }
}

.card__icona {
  display: grid;
  place-items: center;
  width: 2.05rem; height: 2.05rem;
  border-radius: 50%;
  background: var(--c-menta);
  color: var(--accento);
  flex: none;
  transition: transform var(--transizione);
}
.card__icona svg { width: 1.1rem; height: 1.1rem; stroke-width: 1.7; }
@media (hover: hover) {
  .card:hover .card__icona { transform: scale(1.08) rotate(-4deg); }
}
/* telefoni bassi: la griglia deve restare in una schermata */
@media (max-height: 700px) {
  .card__icona { width: 1.85rem; height: 1.85rem; }
  .card__icona svg { width: 1rem; height: 1rem; }
}

.card__testo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: auto;
}

.card__titolo {
  font-family: var(--font-titoli);
  font-size: var(--t-h3);
  font-weight: var(--peso-titolo);
  line-height: var(--interlinea-titolo);
  letter-spacing: var(--spaziatura-titolo);
  color: var(--c-nero);
}

.card__occhiello {
  font-size: 0.7rem;
  font-family: var(--font-etichette);
  font-weight: var(--peso-etichetta);
  letter-spacing: 0.04em;
  color: var(--c-grigio);
  line-height: 1.3;
}

/* ============================================================
   5 · VISTA DI SEZIONE
   ============================================================ */

.sezione { padding-top: calc(var(--s-4) + env(safe-area-inset-top)); }

.sezione__testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: 3.4rem;
  margin-bottom: var(--s-1);
}

.sezione__logo {
  /* a 2.1rem la riga "la Collina dei Ciliegi" non si leggeva */
  height: 3.4rem;
  width: auto;
  flex: none;
  mix-blend-mode: multiply;
  opacity: .95;
}

@media (min-width: 60rem) {
  .sezione__logo { height: 4rem; }
}

.sezione__indietro {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--touch-min);
  padding: 0 var(--s-3) 0 0;
  margin-left: calc(var(--s-2) * -1);
  padding-left: var(--s-2);
  border: 0;
  background: none;
  color: var(--c-grigio);
  font-family: var(--font-etichette);
  font-size: var(--t-micro);
  font-weight: var(--peso-etichetta);
  letter-spacing: var(--spaziatura-etichetta);
  text-transform: uppercase;
  cursor: pointer;
}
.sezione__indietro svg { width: .8rem; height: .8rem; }

.sezione__titolo {
  position: relative;
  font-size: var(--t-h1);
  margin: var(--s-2) 0 var(--s-5);
  padding-bottom: var(--s-3);
}
.sezione__titolo::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 3rem; height: 4px;
  border-radius: var(--r-pillola);
  background: var(--tinta, var(--accento));
}

.blocchi { display: flex; flex-direction: column; gap: var(--s-4); }

.titoletto,
.gruppo__titolo,
.orario__etichetta,
.dato__etichetta,
.copia__etichetta { color: var(--c-bordeaux); }
.gruppo__titolo svg { color: var(--c-bordeaux); }

.titoletto {
  font-family: var(--font-etichette);
  font-size: var(--t-micro);
  font-weight: var(--peso-etichetta);
  letter-spacing: var(--spaziatura-etichetta);
  text-transform: uppercase;
  color: var(--c-grigio);
  margin: var(--s-3) 0 calc(var(--s-2) * -1);
}
.titoletto:first-child { margin-top: 0; }

/* --- blocco: testo --- */
.blocco-testo { font-size: var(--t-testo); }

/* --- blocco: avviso (il punto su cui nascono i malintesi) --- */
.avviso {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-4);
  border-radius: var(--r-medio);
  background: var(--c-crema-scura);
  border-left: 3px solid var(--c-bordeaux);
  color: var(--testo-forte);
}
/* l'arancio su crema rendeva 1.95:1: l'icona di allerta era invisibile */
.avviso svg { width: 1.15rem; height: 1.15rem; color: var(--c-bordeaux); flex: none; margin-top: .2rem; }

/* --- blocco: dato in evidenza --- */
.dato {
  position: relative;
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-grande);
  background: var(--sfondo-superficie);
  box-shadow: var(--ombra-card);
  text-align: center;
}
.dato::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 3rem; height: 4px;
  border-radius: 0 0 var(--r-pillola) var(--r-pillola);
  background: var(--tinta, var(--accento));
}

.dato__etichetta {
  font-family: var(--font-etichette);
  font-size: var(--t-micro);
  font-weight: var(--peso-etichetta);
  letter-spacing: var(--spaziatura-etichetta);
  text-transform: uppercase;
  color: var(--c-grigio);
}
.dato__valore {
  font-family: var(--font-titoli);
  font-size: 2.5rem;
  font-weight: var(--peso-titolo);
  line-height: 1.15;
  color: var(--c-nero);
  margin-top: var(--s-1);
  word-break: break-word;
}
.dato__valore--mono {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  letter-spacing: .02em;
}
.dato__nota { font-size: var(--t-piccolo); color: var(--c-grigio); }

/* --- blocco: copia (Wi-Fi) --------------------------------
   Tutta l'area è toccabile, non un'icona minuscola.        */
.copia {
  display: block;
  width: 100%;
  padding: var(--s-5) var(--s-4);
  border: 2px solid var(--tinta, var(--accento));
  border-radius: var(--r-grande);
  background: var(--sfondo-superficie);
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transizione), background var(--transizione), transform var(--transizione);
}
.copia:active { transform: scale(.99); }
.copia[data-stato="fatto"] { border-color: var(--c-verde); background: var(--c-menta); }

.copia__etichetta {
  font-family: var(--font-etichette);
  font-size: var(--t-micro);
  font-weight: var(--peso-etichetta);
  letter-spacing: var(--spaziatura-etichetta);
  text-transform: uppercase;
  color: var(--c-grigio);
}

.copia__valore {
  display: block;
  margin: var(--s-3) 0;
  font-family: var(--font-mono);
  font-size: 1.875rem;   /* corpo generoso, ben leggibile */
  font-weight: 500;
  letter-spacing: .03em;
  color: var(--c-nero);
  overflow-wrap: anywhere;
}

.copia__invito {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 2.5rem;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pillola);
  background: var(--tinta, var(--accento));
  color: var(--tinta-ink, var(--c-bianco));
  font-size: var(--t-piccolo);
}
.copia__invito svg { width: 1rem; height: 1rem; color: inherit; }

.copia__conferma {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 2.5rem;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pillola);
  background: var(--c-verde);
  color: var(--c-bianco);
  font-size: var(--t-piccolo);
  font-weight: 400;
}
.copia[data-stato="fatto"] .copia__invito { display: none; }
.copia[data-stato="fatto"] .copia__conferma { display: inline-flex; }
.copia__conferma svg { width: 1rem; height: 1rem; }

/* la password anche in chiaro, per chi preferisce digitarla */
.copia-chiaro {
  width: max-content;
  max-width: 100%;
  margin: var(--s-2) auto 0;
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-pillola);
  background: rgba(255, 255, 255, .72);
  text-align: center;
  font-size: var(--t-piccolo);
  color: var(--c-grigio);
}
.copia-chiaro b {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--testo);
  -webkit-user-select: all;
  user-select: all;
}

/* --- blocco: azioni --- */
.azioni { display: flex; flex-direction: column; gap: var(--s-2); }

.azione {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: var(--touch-min);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--bordo);
  border-radius: var(--r-medio);
  background: var(--sfondo-superficie);
  color: var(--testo-forte);
  text-decoration: none;
  font-size: var(--t-piccolo);
  transition: transform var(--transizione), background var(--transizione);
}
.azione:active { transform: scale(.99); }
.azione svg { width: 1.15rem; height: 1.15rem; flex: none; color: var(--accento); }
.azione__testo { display: flex; flex-direction: column; line-height: 1.35; }
.azione__sottotitolo { font-size: var(--t-micro); color: var(--c-grigio); }
.azione__freccia { margin-left: auto; opacity: .4; width: .8rem !important; height: .8rem !important; color: currentColor !important; }

.azione--primario {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-bianco);
}
.azione--primario svg { color: var(--c-bianco); }

/* il grigio del sottotitolo su fondo scuro rendeva 2.82:1 */
.azione--primario .azione__sottotitolo,
.azione--whatsapp .azione__sottotitolo { color: rgba(255, 255, 255, .82); }

.azione--whatsapp {
  background: var(--accento);
  border-color: var(--accento);
  color: var(--c-bianco);
}
.azione--whatsapp svg { color: var(--c-bianco); }

/* --- blocco: gruppi di locali --- */
.gruppo + .gruppo { margin-top: var(--s-5); }

.gruppo__titolo {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-etichette);
  font-size: var(--t-micro);
  font-weight: var(--peso-etichetta);
  letter-spacing: var(--spaziatura-etichetta);
  text-transform: uppercase;
  color: var(--c-grigio);
  margin-bottom: var(--s-3);
}
.gruppo__titolo svg { width: 1rem; height: 1rem; color: var(--accento); }
.gruppo__luoghi { display: flex; flex-direction: column; gap: var(--s-3); }

.luogo {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-4);
  border-radius: var(--r-grande);
  background: var(--sfondo-superficie);
  box-shadow: var(--ombra-card);
  text-decoration: none;
  color: inherit;
  transition: transform var(--transizione);
}
.luogo:active { transform: scale(.99); }

.luogo__testa { display: flex; align-items: baseline; gap: var(--s-2); }
.luogo__nome {
  flex: 1;
  font-family: var(--font-titoli);
  font-size: var(--t-h2);
  font-weight: var(--peso-titolo);
  line-height: var(--interlinea-titolo);
  letter-spacing: var(--spaziatura-titolo);
  color: var(--c-nero);
}
.luogo__etichetta {
  flex: none;
  padding: 2px var(--s-2);
  border-radius: var(--r-pillola);
  background: var(--c-rosa-chiaro);
  color: var(--accento-caldo);
  font-family: var(--font-etichette);
  font-size: 0.625rem;
  font-weight: var(--peso-etichetta);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.luogo__indirizzo { font-size: var(--t-piccolo); color: var(--c-grigio); line-height: 1.35; }

.luogo__piede {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-2);
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-menta);
}
.luogo__distanza {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-piccolo); color: var(--c-grigio);
}
.luogo__distanza svg { width: .85rem; height: .85rem; flex: none; }
.luogo__maps {
  display: inline-flex; align-items: center; gap: var(--s-2);
  flex: none;
  font-family: var(--font-etichette);
  font-size: var(--t-micro);
  font-weight: var(--peso-etichetta);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accento);
}
.luogo__maps svg { width: .9rem; height: .9rem; }

/* la nota dell'host — graficamente distinta dal resto della scheda */
.nota-host {
  display: flex;
  gap: var(--s-3);
  margin-top: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-medio);
  background: var(--c-rosa-chiaro);
  border-left: 3px solid var(--accento-caldo);
  font-style: italic;
  font-size: var(--t-piccolo);
  color: var(--c-bordeaux);
}
.nota-host__etichetta {
  display: block;
  font-family: var(--font-etichette);
  font-style: normal;
  font-size: 0.625rem;
  font-weight: var(--peso-etichetta);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accento-caldo);
  margin-bottom: 2px;
}

/* --- piè di sezione: il link al sito --- */
.link-sito {
  display: block;
  margin: var(--s-6) 0 0;
  padding: var(--s-5) var(--s-4);
  border-radius: var(--r-grande);
  background: rgba(255, 255, 255, .72);
  border-top: 1px solid var(--bordo);
  text-align: center;
  text-decoration: none;
  color: var(--testo);
  font-size: var(--t-piccolo);
}
.link-sito b {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-2);
  color: var(--accento);
  font-family: var(--font-etichette);
  font-size: var(--t-micro);
  font-weight: var(--peso-etichetta);
  letter-spacing: var(--spaziatura-etichetta);
  text-transform: uppercase;
}
.link-sito svg { width: .85rem; height: .85rem; }


/* ============================================================
   ORARI — check-in e check-out affiancati
   ============================================================ */
.orari {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
}
.orario {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-4) var(--s-2);
  border-radius: var(--r-grande);
  background: var(--sfondo-superficie);
  box-shadow: var(--ombra-card);
  text-align: center;
}
.orario__icona {
  display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: 50%;
  background: var(--c-menta);
  color: var(--accento);
}
.orario__icona svg { width: 1.1rem; height: 1.1rem; }
.orario__etichetta {
  font-family: var(--font-etichette);
  font-size: var(--t-micro);
  font-weight: var(--peso-etichetta);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-grigio);
}
.orario__valore {
  font-family: var(--font-titoli);
  font-size: var(--t-h2);
  font-weight: var(--peso-titolo);
  line-height: 1.15;
  color: var(--c-nero);
}

/* ============================================================
   EMERGENZE — il tocco chiama, il numero è la cosa più grande
   ============================================================ */
.emergenze { display: flex; flex-direction: column; gap: var(--s-2); }

.emergenza {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4);
  border: 1px solid var(--bordo);
  border-radius: var(--r-grande);
  background: var(--sfondo-superficie);
  color: inherit;
  text-decoration: none;
  transition: transform var(--transizione), border-color var(--transizione);
}
.emergenza:active { transform: scale(.99); }

.emergenza__numero {
  flex: none;
  min-width: 3.6rem;
  font-family: var(--font-titoli);
  font-size: 2rem;
  font-weight: var(--peso-titolo);
  line-height: 1;
  color: var(--c-rosso);
  letter-spacing: .01em;
}
.emergenza__testo { display: flex; flex-direction: column; line-height: 1.3; }
.emergenza__etichetta { font-size: var(--t-piccolo); color: var(--testo-forte); }
.emergenza__nota { font-size: var(--t-micro); color: var(--c-grigio); }
.emergenza__cornetta {
  margin-left: auto;
  width: 1.1rem !important; height: 1.1rem !important;
  color: var(--c-rosso);
  opacity: .55;
  flex: none;
}

.emergenza--principale {
  border-color: var(--c-rosso);
  background: var(--c-rosa-chiaro);
}
.emergenza--principale .emergenza__numero { font-size: 2.6rem; }
.emergenza--principale .emergenza__cornetta { opacity: 1; animation: pulsa 2.4s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .emergenza--principale .emergenza__cornetta { animation: none; }
}

/* ============================================================
   DESTINAZIONI — la foto c'è sempre sul telefono;
   sul laptop si avvicina al passaggio del mouse
   ============================================================ */
.destinazioni {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
}

.destinazione {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r-grande);
  background: var(--sfondo-superficie);
  box-shadow: var(--ombra-card);
  text-decoration: none;
  color: inherit;
  animation: entra-scala .35s ease-out both;
  animation-delay: var(--ritardo, 0ms);
  transition: transform var(--transizione), box-shadow var(--transizione);
}
.destinazione:active { transform: scale(.99); }

.destinazione__foto {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--c-menta-scura);
}
.destinazione__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease-out;
}
.destinazione__foto::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(21,21,21,.28), transparent 55%);
}

.destinazione__corpo {
  display: block;
  padding: var(--s-4);
}
.destinazione__nome {
  display: block;
  font-family: var(--font-titoli);
  font-size: var(--t-h2);
  font-weight: var(--peso-titolo);
  line-height: var(--interlinea-titolo);
  letter-spacing: var(--spaziatura-titolo);
  color: var(--c-nero);
}
.destinazione__descrizione {
  display: block;
  margin-top: var(--s-1);
  font-size: var(--t-piccolo);
  color: var(--c-grigio);
  line-height: 1.45;
}
.destinazione__azione {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-3);
  font-family: var(--font-etichette);
  font-size: var(--t-micro);
  font-weight: var(--peso-etichetta);
  letter-spacing: var(--spaziatura-etichetta);
  text-transform: uppercase;
  color: var(--accento);
}
.destinazione__azione svg {
  width: .85rem; height: .85rem;
  transition: transform var(--transizione);
}

@media (hover: hover) {
  .destinazione:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 32px rgba(7, 101, 51, .14);
  }
  .destinazione:hover .destinazione__foto img { transform: scale(1.06); }
  .destinazione:hover .destinazione__azione svg { transform: translateX(4px); }
}




/* ============================================================
   TINTA DI SEZIONE
   Due variabili sole: --tinta è SEMPRE un riempimento,
   --tinta-ink è SEMPRE l'inchiostro che ci va sopra.
   Non scrivere mai `color: var(--tinta)` su fondo chiaro:
   arancio rende 2.12:1 e azzurro 2.28:1, sono illeggibili.
   ============================================================ */
[data-sezione="dove-siamo"]      { --tinta: var(--c-azzurro);     --tinta-ink: var(--c-ink); }
[data-sezione="arrivo"]          { --tinta: var(--c-verde);       --tinta-ink: var(--c-bianco); }
[data-sezione="wifi"]            { --tinta: var(--c-magenta);     --tinta-ink: var(--c-bianco); }
[data-sezione="garage"]          { --tinta: var(--c-menta-scura); --tinta-ink: var(--c-verde); }
[data-sezione="tassa-soggiorno"] { --tinta: var(--c-rosa);        --tinta-ink: var(--c-bordeaux); }
[data-sezione="ristoranti"]      { --tinta: var(--c-arancio);     --tinta-ink: var(--c-ink); }
[data-sezione="dintorni"]        { --tinta: var(--c-bordeaux);    --tinta-ink: var(--c-bianco); }
[data-sezione="emergenze"]       { --tinta: var(--c-rosso);       --tinta-ink: var(--c-bianco); }
[data-sezione="contatti"]        { --tinta: var(--c-verde);       --tinta-ink: var(--c-bianco); }
[data-sezione="recensione"]      { --tinta: var(--c-magenta);     --tinta-ink: var(--c-bianco); }


/* ============================================================
   MAPPA DI SALERNO — il saluto in apertura
   Sta dietro al logo, sfuma sui bordi, e si dissolve appena
   l'ospite scorre: --dissolvenza va da 1 a 0 nei primi 220px.
   ============================================================ */
body.con-mappa[data-vista="home"]::after {
  content: "";
  position: fixed;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(128vw, 48rem);
  height: 14rem;
  z-index: -1;
  pointer-events: none;

  /* il ritaglio è centrato sul palazzo del B&B: con `contain` il
     palazzo cade esattamente sotto al logo */
  background-image: var(--mappa);
  background-repeat: no-repeat;
  /* Il palazzo del B&B sta al 50% in larghezza e al 64% in altezza del
     ritaglio. Alzando l'immagine di 2.2rem finisce subito sotto al logo. */
  background-position: center -2.2rem;
  background-size: contain;

  filter: saturate(.45) contrast(.9);
  opacity: calc(var(--dissolvenza, 1) * .3);
  transition: opacity .12s linear;

  -webkit-mask-image:
    linear-gradient(to bottom, #000 30%, transparent 80%),
    linear-gradient(to right, transparent 0%, #000 22%, #000 78%, transparent 100%);
  mask-image:
    linear-gradient(to bottom, #000 30%, transparent 80%),
    linear-gradient(to right, transparent 0%, #000 22%, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* con la mappa in apertura i ritratti si fanno da parte,
   altrimenti in alto a destra si accavallano */
body.con-mappa[data-vista="home"]::before {
  opacity: calc(.5 - var(--dissolvenza, 1) * .22);
}

@media (min-width: 60rem) {
  body.con-mappa[data-vista="home"]::after {
    width: min(96vw, 64rem);
    height: 19rem;
    background-position: center -8rem;
    opacity: calc(var(--dissolvenza, 1) * .26);
  }
  body.con-mappa[data-vista="home"]::before {
    opacity: calc(.42 - var(--dissolvenza, 1) * .2);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.con-mappa[data-vista="home"]::after { transition: none; }
}

/* ============================================================
   MOVIMENTO
   I fotogrammi che il resto del foglio richiama. Servono a dire
   "sei passato a un'altra schermata": su un router a hash, senza,
   il cambio di vista non si percepisce.
   ============================================================ */
@keyframes entra-su {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes entra-scala {
  from { opacity: 0; transform: scale(.94); }
  to   { opacity: 1; transform: none; }
}
@keyframes pulsa {
  0%, 100% { transform: scale(1);    opacity: 1;  }
  50%      { transform: scale(1.14); opacity: .65; }
}

.entra .card,
.entra .orario,
.entra .azione,
.entra .luogo,
.entra .trasporto,
.entra .emergenza { animation: entra-su .34s cubic-bezier(.22,1,.36,1) both; }

.entra .card:nth-child(2), .entra .luogo:nth-child(2),
.entra .azione:nth-child(2), .entra .emergenza:nth-child(2),
.entra .trasporto:nth-child(2) { animation-delay: 30ms; }
.entra .card:nth-child(3), .entra .luogo:nth-child(3),
.entra .azione:nth-child(3), .entra .emergenza:nth-child(3) { animation-delay: 60ms; }
.entra .card:nth-child(4), .entra .luogo:nth-child(4) { animation-delay: 90ms; }
.entra .card:nth-child(5) { animation-delay: 120ms; }
.entra .card:nth-child(6) { animation-delay: 150ms; }
.entra .card:nth-child(7) { animation-delay: 180ms; }
.entra .card:nth-child(8) { animation-delay: 210ms; }

.entra .recensione__stelle svg { animation: entra-scala .3s ease-out both; }
.entra .recensione__stelle svg:nth-child(1) { animation-delay: 60ms; }
.entra .recensione__stelle svg:nth-child(2) { animation-delay: 110ms; }
.entra .recensione__stelle svg:nth-child(3) { animation-delay: 160ms; }
.entra .recensione__stelle svg:nth-child(4) { animation-delay: 210ms; }
.entra .recensione__stelle svg:nth-child(5) { animation-delay: 260ms; }

/* --transizione:0s copre le transition, NON le animation: qui servono
   entrambe, altrimenti chi ha "riduci movimento" attivo vede tutto muoversi */
@media (prefers-reduced-motion: reduce) {
  .entra .card, .entra .orario, .entra .azione, .entra .luogo,
  .entra .trasporto, .entra .emergenza,
  .entra .recensione__stelle svg,
  .destinazione,
  .emergenza--principale .emergenza__cornetta { animation: none !important; }
}

/* ============================================================
   TRASPORTI — "Come muoversi"
   Il porto e la stazione sono il motivo per cui questo B&B è
   dove è: qui il colore serve a distinguere mare da terra.
   ============================================================ */
.trasporti {
  padding: var(--s-4);
  border-radius: var(--r-grande);
  background: var(--c-crema);
  border: 1px solid var(--c-crema-scura);
}

.trasporti__titolo {
  font-family: var(--font-titoli);
  font-size: var(--t-h2);
  font-weight: var(--peso-titolo);
  line-height: var(--interlinea-titolo);
  letter-spacing: var(--spaziatura-titolo);
  color: var(--c-nero);
  margin-bottom: var(--s-3);
}

.trasporti__voci {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
}

.trasporto {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-height: var(--touch-min);
  padding: var(--s-4) var(--s-3);
  border-radius: var(--r-medio);
  background: var(--sfondo-superficie);
  box-shadow: var(--ombra-card);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform var(--transizione), box-shadow var(--transizione);
}
.trasporto::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--tinta, var(--accento));
}
.trasporto:active { transform: scale(.98); }

.trasporto[data-tinta="mare"]  { --tinta: var(--c-azzurro); }
.trasporto[data-tinta="terra"] { --tinta: var(--accento); }

.trasporto__icona {
  display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tinta, var(--accento)) 14%, transparent);
  color: var(--tinta, var(--accento));
}
.trasporto__icona svg { width: 1.15rem; height: 1.15rem; }

.trasporto__etichetta {
  font-size: var(--t-piccolo);
  font-weight: 400;
  color: var(--testo-forte);
  line-height: 1.3;
}
.trasporto__nota {
  font-size: 0.7rem;
  color: var(--c-grigio);
  line-height: 1.35;
}
.trasporto__freccia {
  position: absolute;
  top: var(--s-3); right: var(--s-3);
  color: var(--tinta, var(--accento));
  opacity: .5;
}
.trasporto__freccia svg { width: .8rem; height: .8rem; }

@media (hover: hover) {
  .trasporto:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--tinta, var(--accento)) 22%, transparent);
  }
  .trasporto:hover .trasporto__freccia { opacity: 1; }
}

/* ============================================================
   CONTATTI — una riga discreta, non una card storta nella griglia
   ============================================================ */
.contatti-riga {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  width: max-content;
  min-height: var(--touch-min);
  margin: var(--s-4) auto 0;
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-pillola);
  background: var(--c-menta-scura);
  text-decoration: none;
  color: var(--accento);
  font-family: var(--font-etichette);
  font-size: var(--t-micro);
  font-weight: var(--peso-etichetta);
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: background var(--transizione);
}
.contatti-riga svg { width: 1rem; height: 1rem; }
.contatti-riga:active { background: var(--c-menta-scura); }
@media (hover: hover) {
  .contatti-riga:hover { background: var(--c-menta-scura); }
}

/* ============================================================
   RECENSIONE — in fondo alla home, ora si vede
   ============================================================ */
.recensione {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  margin: var(--s-5) 0 0;
  padding: var(--s-5) var(--s-4);
  border: 1px solid var(--c-rosa);
  border-radius: var(--r-grande);
  background: linear-gradient(160deg, var(--c-rosa-chiaro), var(--sfondo-superficie) 70%);
  text-align: center;
  color: inherit;
  transition: box-shadow var(--transizione);
}
.recensione__azione:active { transform: scale(.98); }

.recensione__stelle {
  display: inline-flex;
  gap: 3px;
  color: var(--accento-caldo);
}
.recensione__stelle svg { width: 1rem; height: 1rem; }
.recensione__stelle svg:nth-child(n) { animation: entra-scala .3s ease-out both; }
.recensione__stelle svg:nth-child(1) { animation-delay: .05s; }
.recensione__stelle svg:nth-child(2) { animation-delay: .11s; }
.recensione__stelle svg:nth-child(3) { animation-delay: .17s; }
.recensione__stelle svg:nth-child(4) { animation-delay: .23s; }
.recensione__stelle svg:nth-child(5) { animation-delay: .29s; }

.recensione__invito {
  font-family: var(--font-titoli);
  font-size: var(--t-h2);
  font-weight: var(--peso-titolo);
  line-height: var(--interlinea-titolo);
  color: var(--c-nero);
}
.recensione__azione {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  max-width: 100%;
  margin-top: var(--s-1);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-pillola);
  background: var(--accento-caldo);
  color: var(--c-bianco);
  text-decoration: none;
  font-family: var(--font-etichette);
  /* corpo e spaziatura ridotti: l'etichetta più lunga (tedesco,
     35 caratteri) deve stare su una riga sola */
  font-size: .6875rem;
  font-weight: var(--peso-etichetta);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
}
.recensione__azione svg {
  width: .85rem; height: .85rem;
  transition: transform var(--transizione);
}

/* la seconda strada: piccola, sotto il bottone, ma non nascosta */
.recensione__alternativa {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: var(--s-1);
  min-height: var(--touch-min);
  align-content: center;
  margin-top: var(--s-2);
  padding: var(--s-2) var(--s-3);
  font-size: var(--t-piccolo);
  color: var(--c-grigio);
  text-decoration: none;
  border-radius: var(--r-pillola);
}
.recensione__alternativa b {
  font-weight: 400;
  color: var(--accento-caldo);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.recensione__alternativa:active { background: rgba(255, 255, 255, .6); }

@media (hover: hover) {
  .recensione:hover { box-shadow: 0 8px 28px rgba(171, 44, 104, .16); }
  .recensione:hover .recensione__azione svg { transform: translateX(4px); }
  .recensione__alternativa:hover { background: rgba(255, 255, 255, .6); }
}

/* ============================================================
   6 · BARRA FISSA IN BASSO
   ============================================================ */

.contenuto { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }

.barra {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--ombra-barra);
}

.barra__voce {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 3.75rem;
  padding: var(--s-2);
  border: 0;
  background: none;
  color: var(--c-grigio);
  text-decoration: none;
  font-family: var(--font-etichette);
  font-size: 0.625rem;
  font-weight: var(--peso-etichetta);
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--transizione);
}
.barra__voce svg { width: 1.3rem; height: 1.3rem; }
.barra__voce[aria-current="page"] { color: var(--accento); }
.barra__voce--whatsapp {
  margin: var(--s-1) var(--s-2);
  min-height: calc(3.75rem - var(--s-2));
  border-radius: var(--r-pillola);
  background: var(--accento);
  color: var(--c-bianco);
}
.barra__voce--whatsapp:active { background: var(--c-bordeaux); color: var(--c-bianco); }
.barra__voce:active { color: var(--testo-forte); }

/* ============================================================
   7 · MODALE LINGUA
   ============================================================ */

dialog.modale:not([open]) { display: none; }

.modale {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--s-4);
  padding-bottom: calc(var(--s-4) + env(safe-area-inset-bottom));
  background: rgba(21, 21, 21, .35);
  border: 0;
  width: 100%; height: 100%;
  max-width: none; max-height: none;
}
.modale::backdrop { background: rgba(21, 21, 21, .35); }

.modale__pannello {
  width: 100%;
  max-width: var(--larghezza-max);
  padding: var(--s-5);
  border-radius: var(--r-grande);
  background: var(--sfondo);
  text-align: center;
}
.modale__titolo { font-size: var(--t-h2); margin-bottom: var(--s-4); }
.modale__lista { display: flex; flex-direction: column; gap: var(--s-2); }
.modale__lista .bottone-lingua { min-height: 3.5rem; font-size: var(--t-h3); }
.modale__lista .bottone-lingua[aria-current="true"] {
  background: var(--c-menta-scura);
  border-color: var(--accento);
}
.modale__chiudi {
  width: 100%;
  min-height: var(--touch-min);
  margin-top: var(--s-3);
  border: 0; background: none;
  color: var(--c-grigio);
  font-family: var(--font-etichette);
  font-size: var(--t-micro);
  font-weight: var(--peso-etichetta);
  letter-spacing: var(--spaziatura-etichetta);
  text-transform: uppercase;
  cursor: pointer;
}

/* ============================================================
   8 · AVVISO OFFLINE + MESSAGGI
   ============================================================ */

.striscia-offline {
  padding: var(--s-2) var(--s-4);
  background: var(--c-menta-scura);
  color: var(--testo-forte);
  font-size: var(--t-micro);
  text-align: center;
}

.messaggio-errore {
  padding: var(--s-5);
  border-radius: var(--r-medio);
  background: var(--c-crema-scura);
  text-align: center;
  font-size: var(--t-piccolo);
}

/* ============================================================
   9 · DESKTOP — resta una colonna sola, solo più aria
   ============================================================ */

/* --- tablet ------------------------------------------------ */
@media (min-width: 40rem) {
  :root { --t-h1: 2.25rem; --t-display: 2.75rem; }
  .griglia { gap: var(--s-4); }
  .card { min-height: 8rem; padding: var(--s-4) var(--s-5) var(--s-5); }
}

/* --- laptop e desktop --------------------------------------
   La home si allarga e respira; la lettura di una sezione resta
   in una colonna stretta, perché righe lunghe si leggono male.
   La barra diventa una pillola sospesa, non una fascia intera. */
@media (min-width: 60rem) {
  :root {
    --larghezza-max: 58rem;
    --t-h1: 2.5rem;
    --t-display: 3.25rem;
    --t-h3: 1.25rem;
  }

  .contenuto { padding-bottom: 10rem; }

  .intestazione { padding-top: var(--s-7); }
  .intestazione__logo { width: 12rem; margin-bottom: var(--s-4); }
  .intestazione__intro { font-size: var(--t-piccolo); max-width: 34rem; }

  .griglia {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-4);
    padding-top: var(--s-5);
  }
  .card { min-height: 10.5rem; padding: var(--s-5); }
  .card__icona { width: 2.5rem; height: 2.5rem; }
  .card__icona svg { width: 1.25rem; height: 1.25rem; }

  .recensione {
    max-width: 30rem;
    margin: var(--s-6) auto 0;
    padding: var(--s-6) var(--s-5);
  }
  .recensione__stelle svg { width: 1.15rem; height: 1.15rem; }

  /* le destinazioni a due colonne */
  .destinazioni { grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
  .sezione--larga .destinazioni { grid-template-columns: repeat(2, 1fr); }
  .orari { gap: var(--s-4); }

  /* la sezione torna a colonna stretta: 34rem è la misura giusta per leggere */
  .sezione {
    max-width: 34rem;
    margin: 0 auto;
    padding-top: var(--s-6);
  }

  /* i ristoranti restano l'unico contenuto che guadagna da due colonne */
  .sezione--larga { max-width: none; }
  .sezione--larga .gruppo__luoghi {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-4);
  }

  .barra {
    left: 50%;
    right: auto;
    bottom: var(--s-5);
    transform: translateX(-50%);
    width: auto;
    padding: var(--s-1);
    border: 1px solid var(--bordo);
    border-radius: var(--r-pillola);
    box-shadow: 0 4px 24px rgba(21, 21, 21, .10);
  }
  .barra__voce {
    flex-direction: row;
    gap: var(--s-2);
    min-height: 3rem;
    min-width: 9rem;
    border-radius: var(--r-pillola);
  }
  .barra__voce svg { width: 1.1rem; height: 1.1rem; }
  .barra__voce:hover { color: var(--testo-forte); background: var(--c-menta); }

  .modale { align-items: center; }
  .modale__pannello { max-width: 26rem; }

  .lingua-schermata__bottoni { max-width: 24rem; }
  .bottone-lingua:hover { background: var(--c-menta); }

  .card, .luogo, .azione, .copia { cursor: pointer; }
}