/* «Ti riconosci?» · la sezione sotto la demo delle pagine d'esempio (30.09.2026, proposta B scelta dall'utente).
   Biglietti di carta sul cemento: la frase del cliente (tra virgolette, parla lui) e, al tocco, cosa cambia «Da domani».
   File comuni: css/riconosci.css + js/riconosci.js (nessuna stringa nel JS: IT ed EN usano lo stesso file).
   Funziona con 3 o 4 biglietti. Niente numeri di risparmio, niente contatori.

   ── Markup (IT; in EN cambiano solo i testi) ──────────────────────────────────────────────
   <section class="rt" id="ti-riconosci" aria-labelledby="rt-titolo">
     <div class="telaio">
       <div class="rt__testa">
         <h2 class="rt__titolo" id="rt-titolo">Ti riconosci?</h2>
         <p class="rt__sotto">
           <span class="rt__sotto-fermo">Frasi che ti suonano familiari, e cosa cambia da domani.</span>
           <span class="rt__sotto-vivo">Tocca le frasi che ti suonano familiari.</span>
         </p>
       </div>
       <ul class="rt__biglietti">
         <li class="rt-biglietto">
           <p class="rt-frase"><span class="rt-frase__testo"><span class="rt-q" aria-hidden="true">«</span>Frase del cliente.<span class="rt-q" aria-hidden="true">»</span></span></p>
           <div class="rt-sotto">
             <p class="rt-invito" aria-hidden="true">Succede anche a te?</p>
             <div class="rt-risposta">
               <p class="rt-da-domani">Da domani</p>
               <p class="rt-risposta__testo">Cosa cambia, in una o due frasi.</p>
             </div>
           </div>
         </li>
         … 3 o 4 biglietti in tutto …
       </ul>
       <div class="rt-chiudi">
         <div class="rt-chiudi__testo">
           <h3 class="rt-chiudi__titolo">Allora vale la pena parlarne.</h3>
           <p class="rt-chiudi__riga">Porta le tue offerte: si parte da quelle.</p>
         </div>
         <a class="bottone bottone--inchiostro" href="https://cal.com/…" target="_blank" rel="noopener">Prenota una chiamata gratuita <span aria-hidden="true">→</span><span class="solo-lettore"> (si apre in una nuova scheda)</span></a>
       </div>
       <p class="rt__nota">Esempio su un’azienda inventata. Da te si parte dai tuoi modelli e dai tuoi dati.</p>
     </div>
   </section>
   <link rel="stylesheet" href="css/riconosci.css">   … e in fondo: <script src="js/riconosci.js" defer></script>

   Note: gli id delle risposte (aria-controls) li crea il JS se mancano. EN: virgolette “ ” al posto di « ».
   Stato di base (senza JS o con movimento ridotto): tutte le risposte e l'invito visibili, riga «fermo» sotto il titolo.
   Con JS (.rt--viva): risposte chiuse, biglietti compatti; al tocco la risposta prende il posto di «Succede anche a te?»
   e il biglietto si allunga (align-items: start, il vicino non cambia). L'invito a parlarne entra dopo il primo tocco.
   Solo opacity e transform, 250 ms. Token locali solo su .rt, nessuna modifica ai file condivisi. */

.rt {
  --rt-frase: clamp(1.5rem, 1.05rem + 1.2vw, 2.25rem);   /* 24 → 36 px, Archivo semistretto */
  --rt-segno: 32px;                                      /* la casella da spuntare */
  --rt-titolo: clamp(2.25rem, 1.4rem + 2.4vw, 3.5rem);   /* 36 → 56 px */
  --rt-pad: var(--s-6);
  padding-top: var(--sezione-spazio);
}

/* ── testa ── */
.rt__testa { max-width: 44rem; }
.rt__titolo {
  font-size: var(--rt-titolo);
  font-weight: 800;
  font-stretch: var(--stretto);
  line-height: 0.98;
  letter-spacing: var(--tracking-titolo);
}
.rt__sotto {
  margin-top: var(--s-3);
  font-size: var(--t-grande);
  font-weight: 500;
  line-height: 1.4;
  color: var(--grafite);
}
.rt__sotto-vivo { display: none; }
.rt--viva .rt__sotto-fermo { display: none; }
.rt--viva .rt__sotto-vivo { display: inline; }

/* ── i biglietti ──
   4 biglietti: 2 × 2. 3 biglietti: tre colonne dal computer largo; in mezzo 2 + 1 con il terzo a tutta riga. */
.rt__biglietti {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--gap);
  margin: var(--s-6) 0 0;
  padding: 0;
  list-style: none;
}
/* senza JS o con movimento ridotto tutto è aperto: la riga si allinea, i biglietti affiancati hanno la stessa altezza */
.rt:not(.rt--viva) .rt__biglietti { align-items: stretch; }
.rt__biglietti:has(> :nth-child(3):last-child) > :nth-child(3) { grid-column: 1 / -1; }
@media (min-width: 1100px) {
  .rt__biglietti:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rt__biglietti:has(> :nth-child(3):last-child) > :nth-child(3) { grid-column: auto; }
  .rt:has(.rt__biglietti > :nth-child(3):last-child) {
    --rt-frase: clamp(1.5rem, 0.9rem + 0.9vw, 1.875rem); /* colonne più strette: 24 → 30 px */
    --rt-pad: var(--s-5);
  }
}

.rt-biglietto {
  position: relative;
  padding: var(--rt-pad) var(--rt-pad) var(--s-5);
  border-radius: var(--r-pannello);
  background: var(--carta);
}

.rt-frase {
  margin: 0;
  padding-right: calc(var(--rt-segno) + var(--s-4)); /* posto per la casella, anche senza JS: le frasi vanno a capo uguale */
  font-size: var(--rt-frase);
  font-weight: 700;
  font-stretch: var(--semistretto);
  line-height: 1.08;
  letter-spacing: -0.012em;
  color: var(--inchiostro);
  text-wrap: pretty;
}
/* le virgolette appese al margine: la frase si allinea sulla lettera, come in una rivista */
.rt-frase__testo {
  display: block;
  padding-left: 0.5em;
  text-indent: -0.5em;
}
.rt-q { color: var(--grigio); font-weight: 500; }
:lang(en) .rt-frase__testo { padding-left: 0.42em; text-indent: -0.42em; } /* “ è più stretta di « */

.rt-sotto {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  box-shadow: inset 0 1px 0 var(--tratto-chiaro);
}

.rt-invito { display: none; }

.rt-da-domani {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 2px 10px;
  border-radius: var(--r-piccolo);
  background: var(--inchiostro);
  color: var(--su-inchiostro);
  font-size: var(--t-micro);
  font-weight: 600;
  line-height: 1.4;
}
.rt-risposta__testo {
  max-width: 40ch;
  margin-top: var(--s-3);
  font-size: var(--t-grande);
  font-weight: 500;
  line-height: 1.4;
  color: var(--inchiostro);
  text-wrap: pretty;
}

/* ── invito a parlarne ── */
.rt-chiudi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5) var(--s-7);
  flex-wrap: wrap;
  margin-top: var(--s-7);
}
.rt-chiudi__titolo {
  font-size: var(--t-passo);
  font-weight: 800;
  font-stretch: var(--semistretto);
  line-height: 1.05;
  letter-spacing: var(--tracking-titolo);
}
.rt-chiudi__riga {
  margin-top: var(--s-1);
  font-size: var(--t-corpo);
  line-height: 1.5;
  color: var(--grafite);
}

.rt__nota {
  margin-top: var(--s-6);
  font-size: var(--t-piccolo);
  line-height: 1.5;
  color: var(--grafite);
}

/* ───────── Con JS: le frasi diventano pulsanti ───────── */
.rt-pulsante {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-stretch: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* tutto il biglietto è toccabile: il pulsante si allarga con un velo trasparente */
.rt-pulsante::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-pannello);
}
.rt-pulsante:focus { outline: none; }
.rt-pulsante:focus-visible::after { outline: 2px solid var(--focus); outline-offset: 3px; }

/* la casella: vuota con un filetto, piena d'inchiostro con la spunta quando ti riconosci */
.rt-segno {
  position: absolute;
  top: var(--rt-pad);
  right: var(--rt-pad);
  width: var(--rt-segno);
  height: var(--rt-segno);
  border-radius: var(--r-piccolo);
  box-shadow: inset 0 0 0 1.5px var(--tratto);
  transition: box-shadow var(--d-breve) var(--curva), transform var(--d-breve) var(--curva);
}
.rt-segno::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--inchiostro);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity var(--d-breve) var(--curva), transform var(--d-media) var(--curva);
}
.rt-segno svg {
  position: absolute;
  inset: 6px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  fill: none;
  stroke: var(--su-inchiostro);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transform: scale(0.6) rotate(-8deg);
  transition: opacity var(--d-breve) var(--curva), transform var(--d-media) var(--curva);
}

.rt--viva .rt-frase__testo { transition: opacity var(--d-media) var(--curva); }

/* chiuso: solo la frase e «Succede anche a te?», niente spazio riservato */
.rt--viva .rt-invito {
  display: flex;
  align-items: center;
  min-height: 26px;
  font-size: var(--t-piccolo);
  font-weight: 500;
  color: var(--grafite);
  transition: color var(--d-breve) var(--curva);
}
.rt--viva .rt-risposta { display: none; }

/* aperto: la risposta prende il posto dell'invito e il biglietto si allunga */
.rt--viva .is-aperto .rt-invito { display: none; }
.rt--viva .is-aperto .rt-risposta { display: block; animation: rt-entra var(--d-media) var(--curva) both; }
.rt--viva .is-aperto .rt-frase__testo { opacity: 0.74; } /* la frase fa un passo indietro, la risposta è in primo piano (resta AA) */
.is-aperto .rt-segno { box-shadow: inset 0 0 0 1.5px var(--inchiostro); }
.is-aperto .rt-segno::before,
.is-aperto .rt-segno svg { opacity: 1; transform: none; }

@media (hover: hover) {
  .rt-biglietto:hover .rt-segno { box-shadow: inset 0 0 0 1.5px var(--inchiostro); }
  .rt--viva .rt-biglietto:hover .rt-invito { color: var(--inchiostro); }
}
.rt-pulsante:active .rt-segno { transform: scale(0.94); }

/* l'invito a parlarne entra sotto i biglietti dopo il primo tocco, e poi resta */
.rt--viva:not(.rt--toccata) .rt-chiudi { display: none; }
.rt--viva.rt--toccata .rt-chiudi { animation: rt-entra var(--d-media) var(--curva) 80ms both; }

@keyframes rt-entra {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* ───────── Telefono: una colonna, un biglietto sotto l'altro ───────── */
@media (max-width: 700px) {
  .rt { --rt-segno: 30px; --rt-pad: var(--s-5); }
  .rt__biglietti { grid-template-columns: minmax(0, 1fr); margin-top: var(--s-5); }
  .rt-biglietto { padding-bottom: var(--s-4); }
  .rt-chiudi { flex-direction: column; align-items: stretch; margin-top: var(--s-6); }
  .rt-chiudi .bottone { width: 100%; white-space: normal; }
  .rt__nota { margin-top: var(--s-5); font-size: var(--t-mini); }
}

@media (prefers-reduced-motion: reduce) {
  .rt *, .rt *::before, .rt *::after { transition: none !important; animation: none !important; }
}