/* ============================================================
   DICONO DI NOI

   I punteggi degli ospiti su Booking, Airbnb e Google. Il messaggio e'
   uno solo: oltre agli slogan ci sono i numeri, e i numeri non
   li abbiamo scritti noi.

   Percio' la pagina comincia con le cifre grandi e le mette in
   serif, come i titoli: sono il titolo vero di questa pagina.
   Le recensioni vengono dopo, piu' piccole, perche' servono a
   dare corpo ai numeri, non a sostituirli.

   I marchi delle piattaforme sono i loghi veri, ritagliati dai
   file ufficiali. Servono a dire da dove viene il dato: e' la
   fonte, non un'approvazione. Il logo di Google e' la sola G —
   quello completo porta anche cinque stelle disegnate, e cinque
   stelle accanto a "4,9" direbbero due cose diverse.
   ============================================================ */

.dic-hero{padding:64px 32px 4px;text-align:center}
.dic-hero h1{font-size:clamp(30px,4.4vw,46px);line-height:1.15;max-width:780px;margin:14px auto 20px}
.dic-hero p.lead{font-size:17px;color:var(--slate);max-width:660px;margin:0 auto;line-height:1.7}

.dic-wrap{max-width:900px;margin:0 auto;padding:0 32px}

/* --- le cifre grandi -------------------------------------- */
.dic-kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:52px auto 0;max-width:900px;
         padding:0;   /* site.css da 104px a ogni <section>: qui no */
         background:var(--white);border:.5px solid var(--sage-light);border-radius:16px;
         box-shadow:0 24px 60px -50px rgba(46,58,55,.5);overflow:hidden}
.dic-kpi div{padding:22px 18px 26px;text-align:center;border-left:.5px solid var(--sage-light)}
.dic-kpi img{height:15px;width:auto;display:block;margin:0 auto 12px}
.dic-kpi div:first-child{padding-top:49px}
.dic-kpi div:first-child{border-left:none}
.dic-kpi b{display:block;font-family:var(--serif);font-size:clamp(36px,5.4vw,52px);line-height:1;
           color:var(--terracotta-dark);font-variant-numeric:tabular-nums;margin-bottom:10px}
.dic-kpi b em{font-style:normal;font-family:var(--sans);font-size:12.5px;font-weight:500;
              color:var(--sage);margin-left:7px;letter-spacing:.01em}
/* SOLO la didascalia sotto, non ogni span della fascia.
   Dentro <b> c'e' .dic-n, la cifra che sale: e' nata quando ho
   dato all'animazione qualcosa da afferrare, ed e' finita
   dentro questa regola. Il punteggio si stampava in 12,5px
   grigi di sans invece che grande in serif — cioe' l'esatto
   contrario di quello che questa pagina deve fare. Il > taglia
   fuori tutto quello che sta dentro <b>. */
.dic-kpi > div > span{display:block;font-family:var(--sans);font-size:12.5px;line-height:1.45;color:var(--slate)}

/* --- casa per casa ---------------------------------------- */
.dic-h{font-size:24px;margin:56px 0 6px;text-align:center}
.dic-sub{font-family:var(--sans);font-size:13.5px;color:var(--slate);text-align:center;margin:0 auto 26px;max-width:620px;line-height:1.6}

.dic-case{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.dic-casa{background:var(--white);border:.5px solid var(--sage-light);border-radius:14px;padding:22px 24px;
          box-shadow:0 24px 60px -50px rgba(46,58,55,.5)}
.dic-casa h3{font-size:19px;margin:0 0 14px}
.dic-casa h3 a{color:inherit;text-decoration:none;border-bottom:1px solid var(--sage-light)}
.dic-casa h3 a:hover{border-bottom-color:var(--terracotta)}
.dic-voti{display:flex;gap:8px;flex-wrap:wrap}

/* --- la pastiglia di una piattaforma ----------------------
   Il logo vero, ritagliato dal file ufficiale che ci hanno dato
   i proprietari. I marchi hanno il fondo bianco, quindi la
   pastiglia e' bianca anche lei: su una scheda bianca il
   rettangolo non si vede. Un fondo colorato mostrerebbe il
   bordo dell'immagine.

   width e height sono nell'HTML: senza, la riga salta mentre
   l'immagine arriva, e in una pagina di riquadri si nota. */
.dic-p{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);
       background:var(--white);border:.5px solid var(--sage-light);
       border-radius:10px;padding:6px 12px}
.dic-p img{height:17px;width:auto;display:block;flex-shrink:0}
.dic-p b{font-size:15px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;
         display:inline-flex;align-items:baseline;gap:4px}
.dic-p b em{font-style:normal;font-size:10.5px;font-weight:500;color:var(--sage);white-space:nowrap}
.dic-p small{font-size:11.5px;color:var(--slate)}
.dic-p.vuota{background:transparent;border-style:dashed}
.dic-p.vuota img{opacity:.4}
.dic-p.vuota b{font-weight:400;color:var(--sage);font-size:12px}

/* nella recensione basta il marchio, senza pastiglia */
.dic-p.piccola{background:none;border:none;padding:0;gap:0}
.dic-p.piccola img{height:13px}

/* --- le recensioni ---------------------------------------- */
/* --- il nome della casa, e lo stacco fra una e l'altra ------
   Il nome era 17px con una riga sotto: sembrava un'etichetta, e
   scorrendo non si capiva dove finivano le recensioni di una casa
   e dove cominciavano quelle della successiva. Adesso il nome ha
   la misura di un titolo vero, e la riga sotto non serve piu':
   quel compito lo fa il filo fra un gruppo e l'altro. */
.dic-gruppo{margin-top:34px}
.dic-gruppo > h3{font-size:25px;line-height:1.15;margin:0 0 20px;letter-spacing:.01em}

/* Il filo. Non una riga da bordo a bordo — sarebbe un muro — ma un
   tratto corto al centro che sfuma alle due estremita': si vede
   che c'e' uno stacco senza che nulla venga tagliato in due. */
.dic-gruppo + .dic-gruppo{margin-top:56px;padding-top:46px;position:relative}
.dic-gruppo + .dic-gruppo::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(200px,45%);height:1px;
  background:linear-gradient(90deg,
    transparent,
    var(--sage-light) 20%,
    var(--sage) 50%,
    var(--sage-light) 80%,
    transparent)}

.dic-rec{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.dic-rec figure{margin:0;background:var(--white);border:.5px solid var(--sage-light);border-radius:14px;
                padding:20px 22px;box-shadow:0 24px 60px -50px rgba(46,58,55,.5);
                display:flex;flex-direction:column;gap:14px}
.dic-rec blockquote{margin:0;font-family:var(--serif);font-size:16.5px;line-height:1.6;color:var(--ink)}
.dic-rec blockquote::before{content:"\201C";color:var(--sage);font-size:26px;line-height:0;
                            vertical-align:-.12em;margin-right:2px}
.dic-rec figcaption{margin-top:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
                    font-family:var(--sans);font-size:12.5px;color:var(--slate)}
.dic-rec figcaption b{color:var(--ink);font-weight:600;font-size:13.5px}
.dic-paese{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
           background:var(--sage-light);color:var(--slate);border-radius:4px;padding:2px 5px}
.dic-rec time{font-variant-numeric:tabular-nums}
.dic-trad{font-size:11.5px;font-style:italic;color:var(--sage);width:100%;margin-top:-6px}

/* il voto: le stelle per Airbnb, il numero per Booking */
.dic-voto{font-weight:600;color:var(--terracotta-dark);font-variant-numeric:tabular-nums}
.dic-voto em{font-style:normal;font-size:10.5px;font-weight:500;color:var(--sage);margin-left:3px}

/* --- le note oneste --------------------------------------- */
.dic-nota{font-family:var(--sans);font-size:13px;line-height:1.65;color:var(--slate);
          max-width:720px;margin:40px auto 0;padding:18px 22px;
          background:var(--sage-light);border-radius:12px}
.dic-nota p{margin:0 0 10px}
.dic-nota p:last-child{margin-bottom:0}

/* --- la riga onesta, e la coda ----------------------------- */
.dic-riga{font-family:var(--sans);font-size:12.5px;color:var(--sage);
          text-align:center;margin:36px auto 0;letter-spacing:.01em}
.dic-fine{text-align:center;padding:34px 32px 72px}

/* --- il movimento -----------------------------------------
   Tutto quello che segue e' aggiunta: i numeri finiti stanno
   gia' nell'HTML e senza JavaScript la pagina resta ferma e
   completa. dicono.js mette le classi, il resto lo fa il CSS.

   La barra e' lunga quanto la frazione del massimo — 9,1 su 10
   fa il 91%, 4,81 su 5 il 96% — cosi' tre punteggi su due scale
   diverse si confrontano con un'occhiata sola. Non e' un
   ornamento: e' la risposta al problema di questa fila. */
.dic-kpi i.dic-bar{display:block;height:3px;max-width:96px;margin:16px auto 0;
                   background:var(--sage-light);border-radius:3px;position:relative;overflow:hidden}
.dic-kpi i.dic-bar::after{content:"";position:absolute;inset:0;border-radius:3px;
                          background:var(--terracotta);transform:scaleX(0);transform-origin:left;
                          transition:transform 3.5s cubic-bezier(.5,1,.89,1)}
.dic-kpi.viva i.dic-bar::after{transform:scaleX(var(--q,1))}

/* Ogni barra parte insieme alla propria cifra, non tutte
   insieme. Lo sfalsamento e' scritto in due posti — qui e in
   dicono.js — e i due valori devono restare uguali: centoventi
   millesimi di secondo per cella. */
.dic-kpi div:nth-child(2) i.dic-bar::after{transition-delay:.12s}
.dic-kpi div:nth-child(3) i.dic-bar::after{transition-delay:.24s}
.dic-kpi div:nth-child(4) i.dic-bar::after{transition-delay:.36s}

/* dodici pixel, non trenta: deve sembrare che la pagina si
   posi, non che si monti pezzo per pezzo */
.dic-casa,.dic-rec figure{transition:opacity .55s ease,transform .55s cubic-bezier(.22,.85,.3,1)}
.dic-casa.attesa,.dic-rec figure.attesa{opacity:0;transform:translateY(12px)}
.dic-casa.vista,.dic-rec figure.vista{opacity:1;transform:none}

/* Chi ha chiesto meno movimento al sistema non ne riceve: la
   barra e' gia' al suo posto e le schede sono gia' ferme.
   dicono.js esce subito da solo, ma il CSS non si fida di lui. */
@media (prefers-reduced-motion: reduce){
  .dic-kpi i.dic-bar::after{transform:scaleX(var(--q,1));transition:none}
  .dic-casa,.dic-rec figure{transition:none}
  .dic-casa.attesa,.dic-rec figure.attesa{opacity:1;transform:none}
}

/* LA VIA D'USCITA DURA.
   dicono.js mette questa classe sulla radice quando si accorge
   che il meccanismo non risponde. Toglie di mezzo transizioni e
   opacita' senza chiedere niente a nessuno: e' l'unica regola
   qui dentro con !important, e ci vuole — deve battere tutto,
   compresa una transizione gia' partita che in un contesto senza
   composizione non arriverebbe mai in fondo, lasciando le schede
   invisibili per sempre. */
.dic-fermo .dic-casa,
.dic-fermo .dic-rec figure{transition:none!important;opacity:1!important;transform:none!important}
.dic-fermo .dic-kpi i.dic-bar::after{transition:none!important;transform:scaleX(var(--q,1))!important}

@media (max-width:720px){
  .dic-kpi{grid-template-columns:1fr 1fr}
  .dic-kpi div:nth-child(3){border-left:none}
  .dic-kpi div:nth-child(n+3){border-top:.5px solid var(--sage-light)}
  .dic-case,.dic-rec{grid-template-columns:1fr}
  .dic-wrap{padding:0 20px}
  .dic-hero{padding:48px 20px 4px}
}