/* ============================================================
   /ristoranti/ — redesign neo-brutalista ispirato a sandracreates.com
   (vedi analisi fornita dall'utente). Stessi CONTENUTI di prima
   (data/ristoranti.yml invariato), sistema visivo completamente nuovo:
   - mascotte CSS (uomo calvo, barba, occhiali rossi, bacchette alla
     bocca) con bocca che si espande scroll-driven fino a coprire il
     viewport (tecnica: transform:scale su un cerchio, NON serve il
     plugin MorphSVG — a pagamento — solo GSAP-free-equivalent fatto
     a mano in vanilla JS, vedi main.js);
   - contorni neri spessi, angoli molto arrotondati, effetto "adesivo";
   - card di servizio impilate (sticky stack, puro CSS);
   - palette pop ad alto contrasto su fondo quasi-nero.
   ============================================================ */

@font-face {
  font-family: "Climate Crisis";
  src: url("/fonts/ClimateCrisis-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --bg: #0d0d0d;
  --bg-soft: #161513;
  --bg-card: #1c1a17;
  --cream: #f6f3ec;
  --cream-dim: #b9b4a8;
  --ink: #0d0d0d;

  --hero-red: #ff4433;
  --accent: #ff4433;
  --accent-soft: #ff7a63;
  --pink: #f7a8b8;
  --sky: #58b9f7;
  --mustard: #ffcf3f;
  --green: #00e676;
  --skin: #f7cdb0;
  --skin-shade: #f0bfa0;
  /* barba = riferimento; il rasato è la stessa tinta al 30%, così l'incarnato
     traspare invece di essere coperto da un blocco pieno */
  --beard: #14110c;
  --scalp: rgba(14, 11, 7, 0.42);
  --wood: #a9713f;

  --ff-display: "Inter Tight", "Inter", system-ui, sans-serif;
  --ff-sans: "Inter", system-ui, sans-serif;
  /* solo per le scritte d'angolo dell'hero (vedi .rt-corner) */
  --ff-poster: "Climate Crisis", "Inter Tight", system-ui, sans-serif;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --pad: clamp(1.25rem, 6vw, 6rem);
  --section-pad: clamp(4rem, 10vh, 7rem);
  --ow: 3px;              /* spessore contorno "neo-brutalista" */
  --radius: 26px;

  /* ---- top bar condivisa ---- */
  --tb-sans: var(--ff-sans);
  --tb-mono: var(--ff-sans);
  --tb-ease: var(--ease);
  --tb-pad: var(--pad);
  --tb-pill: rgba(246, 243, 236, 0.12);
  --tb-pill-hover: rgba(246, 243, 236, 0.2);
  --tb-fg: var(--cream);
  --tb-fg-dim: var(--cream-dim);
  --tb-cta-bg: var(--cream);
  --tb-cta-fg: var(--ink);
  --tb-card: #fff;
  --tb-card-fg: #14130e;
  --tb-card-muted: rgba(20, 19, 14, 0.34);
  --tb-link-hover: var(--accent-soft);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--cream);
  font-family: var(--ff-sans);
  font-weight: 400;
  line-height: 1.5;
  overflow-x: hidden;
}
img { display: block; width: 100%; height: 100%; object-fit: cover; }
a { color: inherit; text-decoration: none; } /* richiesto dalla top bar condivisa */
::selection { background: var(--accent); color: var(--ink); }
h1, h2, h3 { font-family: var(--ff-display); font-weight: 800; letter-spacing: -0.03em; line-height: 1.04; }

.rt-accent { color: var(--accent-soft); font-style: normal; }

/* ---------- reveal on scroll ---------- */
.rz { opacity: 0; transform: translateY(24px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.rz.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rz { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- buttons ---------- */
.rt-btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.95rem 1.7rem; border-radius: 999px;
  font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em;
  font-family: var(--ff-display); font-weight: 800;
  transition: transform 0.3s var(--ease), background 0.3s var(--ease), box-shadow 0.3s var(--ease);
  border: var(--ow) solid var(--ink); cursor: pointer;
}
.rt-btn--primary { background: var(--accent); color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.rt-btn--primary:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.rt-btn--ghost { background: transparent; border-color: var(--cream); color: var(--cream); }
.rt-btn--ghost:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.rt-btn--small { padding: 0.7rem 1.3rem; font-size: 0.74rem; }

.rt-kicker {
  display: inline-block; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink); background: var(--cream); border: var(--ow) solid var(--ink);
  border-radius: 999px; padding: 0.4rem 1rem; margin-bottom: 1.6rem; font-weight: 700;
}

/* ============================================================
   MASCOTTE + HERO "bocca che si apre" (pinned, scroll-driven)
   Fallback statico di default (no-JS / reduced-motion): la sezione
   NON è alta 300vh e il testo hero è già visibile — coerente con la
   regola del sito "gated su html.js:not(.reduce)".
   ============================================================ */
.rt-mascot-wrap {
  position: relative;
  background: var(--hero-red);
  /* runway di scroll per il pin: altezza CONGELATA su --app-vh (mai vh/svh/dvh
     dinamiche), impostata pre-paint nell'head — vedi baseof.html + CLAUDE.md.
     Le prime 4 viewport conservano la corsa originale della mascotte. La quinta
     prolunga il pin e lascia alle keyword lo spazio per apparire una alla volta. */
  height: calc(5 * var(--app-vh, 100vh));
}
.rt-mascot-pin {
  position: sticky; top: 0;
  height: 100dvh; height: 100vh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  padding: clamp(6rem, 14vh, 9rem) var(--pad) 4rem;
}
/* fallback statico: no-JS o reduced-motion → sezione normale, non pinned */
html:not(.js) .rt-mascot-wrap,
html.reduce .rt-mascot-wrap { height: auto; }
html:not(.js) .rt-mascot-pin,
html.reduce .rt-mascot-pin { position: relative; height: auto; }

/* mascotte: contenitore quadrato, tutte le parti in % al suo interno */
.rt-mascot {
  position: relative;
  width: clamp(190px, 26vw, 340px);
  aspect-ratio: 1 / 1;
  flex: none;
}
.rt-ms-head {
  position: absolute; left: 9%; top: 8%; width: 82%; height: 82%;
  border-radius: 50%; background: var(--skin); z-index: 1;
  /* ⚠️ ritaglia i figli (rasatura, baffi, barba) sul profilo circolare del
     cranio: è questo a far seguire alla barba la linea della mandibola invece
     di sbordare come una targa. In più i figli ereditano la scala del volto —
     e, scalando attorno al centro della bocca, i baffi (sopra quel punto)
     salgono e la barba (sotto) scende, com'è richiesto dall'apertura. */
  overflow: hidden;
  transform-origin: 50% 58.54%;
}
/* contorno neo-brutalista: pseudo-elemento e non `border`, così non sposta il
   sistema di coordinate dei figli (le % dei clip-path qui sotto sono tarate sul
   box pieno). Scala col volto → spessore proporzionale, non improvvisi salti. */
.rt-ms-head::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 5px solid var(--ink); z-index: 3;
}

/* ⚠️ Tutte le sagome qui sotto sono clip-path in % del BOX TESTA (0–100 = il
   quadrato che contiene il cranio). Riferimenti fissi in quelle coordinate:
   centro bocca (50, 58.5) raggio 7.3 · occhi y 36.6 · mandibola = il cerchio.
   Le % scalano con l'elemento, quindi la sagoma resta identica a ogni scala. */

/* Rasatura + attaccatura. Tinta tenue (non blocco pieno) così si vede la pelle
   sotto; il bordo inferiore riproduce un'attaccatura vera: tempie che
   arretrano e accenno di stempiatura a "V" al centro. */
.rt-ms-scalp {
  position: absolute; inset: 0; background: var(--scalp);
  /* profilo a "M": angoli stempiati ALTI (y piccola) a x 22/78, punta centrale
     che ridiscende a x 50, capelli che tornano giù alle basette. Non un arco
     perfetto — è la differenza tra "calotta" e attaccatura vera. */
  clip-path: polygon(
    -5% -5%, 105% -5%, 105% 26%,
    92% 20%, 86% 15%, 80% 11.5%, 74% 10.5%, 68% 11.5%, 62% 13.5%,
    56% 15.8%, 50% 17%, 44% 15.8%,
    38% 13.5%, 32% 11.5%, 26% 10.5%, 20% 11.5%, 14% 15%, 8% 20%, -5% 26%
  );
}
/* Baffi: corpo ORIZZONTALE appena sopra la bocca (spessore ~3%), con due code
   SOTTILI che scendono in diagonale lungo le pieghe naso-labiali fino a
   innestarsi nella barba laterale — dove le due sagome si sovrappongono e,
   stesso colore, leggono come un'unica barba.
   ⚠️ Errore già fatto: code spesse e quasi verticali fino al mento → "baffo a
   manubrio" che intristisce lo sguardo e mangia la pelle attorno alla bocca. */
.rt-ms-tache {
  position: absolute; inset: 0; background: var(--beard);
  /* ⚠️ Il vertice centrale sopra la bocca va tenuto OTTUSO: punti ravvicinati e
     dislivello di ~1% (non una "M" acuta), altrimenti l'angolo mette tensione
     al viso. Provato e scartato anche il contrario: estremità piegate all'insù
     per accennare un sorriso — forza l'espressione e stona.

     I 116 vertici NON sono scritti a mano: sono il campionamento di una spline
     Catmull-Rom su ~10 punti di controllo per bordo (script in scratchpad,
     `tache.py`). A questa scala i segmenti sono sotto il pixel e il profilo
     legge come una curva; con una dozzina di vertici, come prima, gli spigoli
     si vedevano tutti. Per ritoccare la forma si spostano i PUNTI DI CONTROLLO
     e si rigenera — modificare i singoli vertici qui dentro rimette gli spigoli.
     Le code sono più spesse del ~30% rispetto alla versione a spigoli (bordo
     inferiore abbassato di ~1% verso le estremità) e non finiscono a punta ma
     con un taglio netto: l'innesto nella barba deve leggere come un raccordo,
     non come un filo che si assottiglia fino a sparire. Il taglio sta comunque
     sotto il bordo della barba, quindi non si vede. */
  clip-path: polygon(
    23.60% 65.00%, 24.20% 63.38%, 25.07% 61.09%, 26.00% 59.00%, 26.97% 57.47%, 28.01% 56.13%,
    29.00% 54.80%, 29.87% 53.36%, 30.69% 51.91%, 31.50% 50.60%, 32.33% 49.47%, 33.17% 48.47%,
    34.00% 47.60%, 34.83% 46.86%, 35.67% 46.23%, 36.50% 45.70%, 37.31% 45.24%, 38.13% 44.88%,
    39.00% 44.60%, 39.96% 44.41%, 40.98% 44.32%, 42.00% 44.30%, 43.02% 44.38%, 44.04% 44.53%,
    45.00% 44.70%, 45.87% 44.87%, 46.69% 45.05%, 47.50% 45.20%, 48.43% 45.30%, 49.35% 45.36%,
    50.00% 45.40%, 50.65% 45.36%, 51.57% 45.30%, 52.50% 45.20%, 53.31% 45.05%, 54.13% 44.87%,
    55.00% 44.70%, 55.96% 44.53%, 56.98% 44.38%, 58.00% 44.30%, 59.02% 44.32%, 60.04% 44.41%,
    61.00% 44.60%, 61.87% 44.88%, 62.69% 45.24%, 63.50% 45.70%, 64.33% 46.23%, 65.17% 46.86%,
    66.00% 47.60%, 66.83% 48.47%, 67.67% 49.47%, 68.50% 50.60%, 69.31% 51.91%, 70.13% 53.36%,
    71.00% 54.80%, 71.99% 56.13%, 73.03% 57.47%, 74.00% 59.00%, 74.93% 61.09%, 75.80% 63.38%,
    76.40% 65.00%, 73.40% 66.60%, 72.90% 64.91%, 72.17% 62.53%, 71.40% 60.40%, 70.63% 58.87%,
    69.82% 57.58%, 69.00% 56.40%, 68.17% 55.30%, 67.34% 54.32%, 66.50% 53.40%, 65.67% 52.52%,
    64.83% 51.70%, 64.00% 51.00%, 63.19% 50.44%, 62.37% 49.99%, 61.50% 49.60%, 60.56% 49.27%,
    59.56% 49.01%, 58.50% 48.80%, 57.33% 48.64%, 56.11% 48.54%, 55.00% 48.50%, 54.09% 48.56%,
    53.30% 48.68%, 52.50% 48.80%, 51.57% 48.91%, 50.65% 49.02%, 50.00% 49.10%, 49.35% 49.02%,
    48.43% 48.91%, 47.50% 48.80%, 46.70% 48.68%, 45.91% 48.56%, 45.00% 48.50%, 43.89% 48.54%,
    42.67% 48.64%, 41.50% 48.80%, 40.44% 49.01%, 39.44% 49.27%, 38.50% 49.60%, 37.63% 49.99%,
    36.81% 50.44%, 36.00% 51.00%, 35.17% 51.70%, 34.33% 52.52%, 33.50% 53.40%, 32.66% 54.32%,
    31.83% 55.30%, 31.00% 56.40%, 30.18% 57.58%, 29.37% 58.87%, 28.60% 60.40%, 27.83% 62.53%,
    27.10% 64.91%, 26.60% 66.60%
  );
}
/* "mosca": pizzo staccato sotto il labbro inferiore, definisce la bocca */
.rt-ms-soul {
  position: absolute; left: 44.5%; top: 67.5%; width: 11%; height: 5.5%;
  background: var(--beard); border-radius: 40% 40% 55% 55%;
}
/* Barba corta: incornicia il PERIMETRO INFERIORE della circonferenza, risalendo
   lungo la mandibola. Al centro il bordo scende fino all'80% del cranio → sotto
   la bocca resta molta pelle e i lineamenti non vengono schiacciati in alto.
   Il bordo superiore è micro-sfaccettato per suggerire il taglio a 3–5 mm. */
.rt-ms-beard {
  position: absolute; inset: 0; background: var(--beard);
  /* Passaggi ravvicinati fra x 18–34: è lì che si innestano le code dei baffi e
     un salto fra un vertice e l'altro si legge come un gradino nel profilo. */
  clip-path: polygon(
    0% 50%, 5% 54%, 10% 57.5%, 14% 60%, 18% 61.8%, 22% 63.4%, 26% 65.3%,
    30% 68%, 34% 71.4%, 38% 74.6%, 42% 77.6%, 46% 80%, 50% 79.2%, 54% 80%,
    58% 77.6%, 62% 74.6%, 66% 71.4%, 70% 68%, 74% 65.3%, 78% 63.4%,
    82% 61.8%, 86% 60%, 90% 57.5%, 95% 54%, 100% 50%, 100% 105%, 0% 105%
  );
}
/* ⚠️ Occhi: cerchio nero PIENO, punto. Provato e scartato: tagliarli sul fondo
   con una maschera curva per simulare lo "squint" del sorriso — nel vettoriale
   minimale non legge come occhio socchiuso ma come pupilla che guarda in alto
   di traverso (sguardo sospettoso). */
.rt-ms-eye {
  position: absolute; top: 34%; width: 8%; aspect-ratio: 1 / 1;
  background: var(--ink); border-radius: 50%; z-index: 4;
}
.rt-ms-eye--l { left: 30%; }
.rt-ms-eye--r { left: 62%; }
/* ⚠️ Sopracciglia: due barre DRITTE e ORIZZONTALI, appena sopra gli occhi.
   Qui l'umore lo decide la DISTANZA sopracciglio-occhio, non l'inclinazione né
   la curvatura: vicine e piatte = viso rilassato e fiducioso; alzate o
   inarcate = perplesso o spaventato, a prescindere dal verso.
   Provati e scartati entrambi gli estremi: inclinazione marcata (accigliato) e
   arco alto (due virgolette fluttuanti, aria incredula). Lunghezza ~1.5× il
   diametro dell'occhio. --rot resta come manopola, ma tenerlo a 0. */
.rt-ms-brow {
  position: absolute; top: 30%; width: 12.5%; height: 2.8%;
  background: var(--ink); border-radius: 999px; z-index: 4;
}
.rt-ms-brow--l { left: 27.75%; --rot: 0deg; }
.rt-ms-brow--r { left: 59.75%; --rot: 0deg; }
.rt-ms-brow { transform: rotate(var(--rot, 0deg)); }
.rt-ms-mouth {
  position: absolute; left: 44%; top: 50%; width: 12%; height: 12%;
  border-radius: 50%; background: var(--ink);
  transform-origin: 50% 50%;
  z-index: 3;
}
.rt-ms-chopstick {
  position: absolute; left: 51%; top: 54%; width: 58%; height: 2.6%;
  background: linear-gradient(180deg, #c08a52, var(--wood));
  border-radius: 999px; transform-origin: 0% 50%;
  transform: rotate(var(--rot, 0deg));
  z-index: 4;
}
.rt-ms-chopstick--a { --rot: -20deg; }
.rt-ms-chopstick--b { --rot: -11deg; top: 57%; }

/* Spaghetti sospesi fra le punte delle bacchette. Il doppio tratto SVG ripete
   il linguaggio della mascotte: bordo nero deciso e interno piatto color pasta.
   Le partenze dei quattro fili sono leggermente sfalsate, mentre le lunghezze
   diverse evitano l'effetto "tenda" troppo geometrico. */
.rt-ms-noodles {
  position: absolute;
  left: 46%; top: 52%; width: 24%; height: 50%;
  overflow: visible;
  z-index: 3;
  transform-origin: 50% 5%;
}
.rt-ms-noodles path {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rt-ms-noodles__outline path { stroke: var(--ink); stroke-width: 6px; }
.rt-ms-noodles__fill path { stroke: var(--mustard); stroke-width: 3px; }

/* ---- Metamorfosi "apertura bocca", guidata dallo scroll ----
   Volto e cavità crescono INSIEME, sulla stessa curva (--q in main.js): partono
   nello stesso istante e accelerano insieme. Cambia solo il MOLTIPLICATORE —
   la cavità parte da un raggio ~7× più piccolo e cresce ~9× più in fretta,
   quindi recupera lo svantaggio e verso il 36% dello scroll raggiunge il bordo
   del viso e da lì lo inghiotte. La differenza tra i due raggi È lo spessore
   dell'anello di pelle: si assottiglia da sé, non è animato separatamente.
   ⚠️ Un errore già fatto: curve diverse (volto veloce, bocca lenta) fanno
   allargare il viso molto prima della bocca. Devono condividere --q.

   ⚠️ Volto e cavità scalano attorno allo STESSO PUNTO — il centro della bocca —
   espresso in coordinate LOCALI di ciascun elemento (percentuali diverse per
   ognuno), altrimenti non restano concentrici e l'anello risulta sbilanciato.

   ⚠️ I lineamenti (occhi, bacchette) NON scalano: solo traslano verso l'alto e
   sfumano — nella reference restano piccoli e scivolano oltre il bordo. Barba e
   attaccatura non hanno regole qui: sono figlie della testa, ereditano.

   I valori numerici sono calcolati in main.js (un solo posto, commentato). */
.rt-mascot-pin { --p: 0; --hs: 1; --ms: 1; --fy: 0; --fo: 1; --rad: 50%; }

html.js:not(.reduce) .rt-ms-head { transform: scale(var(--hs)); }

html.js:not(.reduce) .rt-ms-mouth {
  transform: scale(var(--ms));
  /* da cerchio a rettangolo molto arrotondato: è questo a dare il "rettangolo
     nero con lo sfondo rosso ancora ai lati" prima della copertura totale —
     un cerchio raggiungerebbe i lati solo coprendo anche tutto il resto */
  border-radius: var(--rad);
}

/* Peli facciali: la bocca che si apre li SPINGE VIA dal centro e li SCHIACCIA,
   come succede davvero aprendo la bocca — baffi su, pizzetto e barba giù.
   Sono figli di .rt-ms-head, quindi ereditano già la scala del volto: qui si
   aggiunge solo lo scostamento locale, in % del proprio box (per baffi e barba,
   che sono `inset: 0`, la % è quella della testa; il pizzetto è piccolo e la
   stessa distanza vale molte più % di sé stesso).
   La compressione è uno scaleY con ORIGINE sul lato verso cui scappano — in alto
   per i baffi, in basso per barba e pizzetto: così si appiattiscono contro il
   bordo del viso invece di rimpicciolirsi sul posto.
   --bq (0→1 in main.js) è la stessa curva --q normalizzata sulla prima parte
   dell'apertura: dopo, i lineamenti sono comunque fuori campo. */
/* ⚠️ Due manopole distinte, da non confondere: la SALITA è la translateY, la
   COMPRESSIONE è lo scaleY. L'origine a 45% è il bordo ALTO dei baffi (non 0%,
   il bordo della testa): decide solo che il baffo si schiaccia verso sé stesso
   invece di essere risucchiato in cima al cranio — con origine 0% la sola
   compressione portava il vertice dal 45% al 27%, cioè addosso agli occhi (34%),
   ed è quella la corsa incontrollata da evitare. La salita vera resta la
   translateY qui sotto: −14% dell'altezza della testa, per giunta amplificato
   dalla scala del volto.
   Il tetto viene dagli occhi, che scappano in alto molto più in fretta (--fy in
   vh, quindi NON scalati): il margine più stretto è all'inizio (--p ~0.01), dove
   restano ~6% di testa contro lo 0.6% richiesto qui. Alzando questo numero oltre
   ~40% i baffi raggiungerebbero gli occhi a metà corsa. */
html.js:not(.reduce) .rt-ms-tache {
  transform-origin: 50% 45%;
  transform: translateY(calc(var(--bq, 0) * -14%)) scaleY(calc(1 - var(--bq, 0) * 0.45));
}
/* L'attaccatura dei capelli fa esattamente quello che fa la barba, ma in su:
   stessa corsa (12% dell'altezza della testa) e stessa compressione, con
   l'origine sul bordo ALTO invece che su quello basso. Serve perché gli occhi
   traslano in vh (non scalati) e salgono molto più in fretta del volto: senza,
   finivano sopra la fascia dei capelli. */
html.js:not(.reduce) .rt-ms-scalp {
  transform-origin: 50% 0%;
  transform: translateY(calc(var(--bq, 0) * -12%)) scaleY(calc(1 - var(--bq, 0) * 0.4));
}
/* Barba e pizzetto scappano dalla parte opposta e non hanno niente da
   raggiungere (escono dal mento), quindi la corsa è simmetrica a quella dei
   baffi: ~12% dell'altezza della testa. Il pizzetto è alto il 5.5% del volto,
   quindi lo stesso spostamento vale ~220% di sé stesso. */
html.js:not(.reduce) .rt-ms-beard {
  transform-origin: 50% 100%;
  transform: translateY(calc(var(--bq, 0) * 12%)) scaleY(calc(1 - var(--bq, 0) * 0.4));
}
html.js:not(.reduce) .rt-ms-soul {
  transform-origin: 50% 100%;
  transform: translateY(calc(var(--bq, 0) * 220%)) scaleY(calc(1 - var(--bq, 0) * 0.5));
}

html.js:not(.reduce) .rt-ms-eye {
  transform: translateY(calc(var(--fy) * 1vh)); opacity: var(--fo);
}
html.js:not(.reduce) .rt-ms-brow,
html.js:not(.reduce) .rt-ms-chopstick,
html.js:not(.reduce) .rt-ms-noodles {
  transform: translateY(calc(var(--fy) * 1vh)) rotate(var(--rot, 0deg)); opacity: var(--fo);
}

/* ---- Scritte d'angolo dello stato iniziale ----
   Sono la "copertina" della pagina prima che la bocca si apra: nero su rosso,
   grottesca pesantissima, tutto maiuscolo. Occupano il posto della top bar, che
   in questa fase è nascosta (vedi .rt-nav-off in fondo al blocco).
   Vengono spinte fuori dal viewport quando la cavità arriva a sfiorarle: --cpt e
   --cpb (0→1) li calcola main.js confrontando il raggio della cavità con la
   distanza reale dei due blocchi dal centro della bocca — non è una soglia su
   --p, perché la cavità le raggiunge in momenti diversi a seconda del viewport.
   ⚠️ La spinta è in vh e non in % dell'elemento: deve coprire anche il distacco
   dal bordo, e su due righe la % del testo non basterebbe. */
.rt-mascot-pin {
  --fs-corner: clamp(1.22rem, 2.65vw, 2.35rem);
  --fs-hint: clamp(0.72rem, 1.05vw, 0.92rem);
  --corner-inset: clamp(1.1rem, 3vh, 2.2rem);
}
.rt-corner {
  position: absolute; z-index: 7;
  font-family: var(--ff-poster);
  text-transform: uppercase;
  font-size: var(--fs-corner);
  line-height: 1.02; letter-spacing: -0.015em;
  color: var(--ink);
  pointer-events: none;
}
.rt-corner--tl { top: var(--corner-inset); left: var(--pad); max-width: min(38ch, calc(100vw - 2 * var(--pad))); }
.rt-corner--br { bottom: var(--corner-inset); right: var(--pad); text-align: right; }
html.js:not(.reduce) .rt-corner--tl { transform: translateY(calc(var(--cpt, 0) * -42vh)); }
html.js:not(.reduce) .rt-corner--br { transform: translateY(calc(var(--cpb, 0) * 42vh)); }
.rt-cover {
  width: min(34rem, calc(100vw - 2 * var(--pad)));
  max-width: min(34rem, calc(100vw - 2 * var(--pad)));
  font-family: var(--ff-body);
  text-transform: none;
  color: var(--ink);
  pointer-events: auto;
}
.rt-cover__kicker {
  font-family: var(--ff-display);
  font-size: clamp(0.74rem, 0.95vw, 0.88rem);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.rt-cover__title {
  margin-top: 0.8rem;
  max-width: 15ch;
  font-family: var(--ff-display);
  font-size: clamp(2rem, 3.45vw, 3.45rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
  font-weight: 800;
}
.rt-cover__actions {
  margin-top: 1.35rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}
.rt-cover__actions .rt-btn {
  padding: 1.05rem 2rem;
  font-size: 0.94rem;
}
.rt-corner__brand { display: inline-block; white-space: nowrap; }
.rt-corner__location {
  margin-top: 0.4rem;
  width: max-content;
  max-width: none;
  margin-left: auto;
  font-family: var(--ff-display);
  font-size: var(--location-fs, clamp(0.66rem, 0.9vw, 0.82rem));
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
.rt-corner__title { font-size: clamp(1.72rem, 4vw, 3.45rem); line-height: 0.95; }
.rt-corner__sub {
  position: relative;
  min-height: 1.6em;
  margin-top: 1rem;
  font-family: var(--ff-poster);
  text-transform: uppercase;
  font-weight: 400;
  font-size: clamp(0.72rem, 1.22vw, 1rem);
  line-height: 1.5;
  letter-spacing: 0;
}
.rt-corner__pair {
  position: absolute; top: 0; left: 0;
  white-space: nowrap;
  opacity: 0;
  font-size: var(--pair-fs);
}
.rt-corner__pair.is-prev {
  opacity: 0;
  transform: translateY(0.5em);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.rt-corner__pair.is-active { opacity: 1; transform: none; }
.rt-corner__word { display: inline-block; opacity: 1; }
html.js:not(.reduce) .rt-corner__pair.is-active .rt-corner__word {
  animation: rt-word-up 0.55s var(--ease) both;
  animation-delay: calc(0.1s + var(--wd, 0) * 0.11s);
}
@keyframes rt-word-up {
  from { opacity: 0; transform: translateY(120%); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 820px) {
  .rt-cover { width: min(20rem, calc(100vw - 2 * var(--pad))); }
  .rt-cover__title { font-size: clamp(1.35rem, 5.8vw, 2rem); max-width: 15ch; }
  .rt-cover__actions { align-items: flex-start; flex-direction: column; gap: 0.55rem; }
  .rt-cover__actions .rt-btn { padding: 0.78rem 1.15rem; font-size: 0.78rem; }
}
@media (max-width: 540px) {
  .rt-cover { width: min(16rem, calc(100vw - 2 * var(--pad))); }
  .rt-corner__location { font-size: var(--location-fs, 0.62rem); }
}
/* ---- "Scorri": invito che compare dopo qualche secondo di immobilità ----
   Centrato sul VIEWPORT (non sulla mascotte) e sulla stessa BASELINE di
   "Cardinali Studio", che però ha un corpo molto più grande.
   ⚠️ Due box assoluti con lo stesso `bottom` allineano il bordo inferiore, NON
   la baseline: con `line-height` uguale la baseline sta a (discendente + mezza
   interlinea) dal fondo, cioè a una quota PROPORZIONALE al corpo. Da qui la
   correzione: si alza il testo piccolo di ~0.22 della differenza fra i due
   corpi (0.21 di discendente di Archivo Black + 0.01 di mezza interlinea).
   Se cambia il font delle scritte d'angolo, questo 0.22 va rimisurato. */
.rt-scroll-hint {
  position: absolute; z-index: 7; left: 50%;
  bottom: calc(var(--corner-inset) + 0.22 * (var(--fs-corner) - var(--fs-hint)));
  transform: translateX(-50%);
  font-family: var(--ff-poster);
  text-transform: uppercase;
  font-size: var(--fs-hint);
  line-height: 1.02; letter-spacing: 0.12em;
  color: var(--ink);
  opacity: 0; pointer-events: none;
  transition: opacity 0.6s var(--ease);
}
/* solo dissolvenza, nessun rimbalzo: l'invito deve stare esattamente sulla
   baseline di "Cardinali Studio", e un bob verticale la romperebbe a ogni
   fotogramma. Il movimento in pagina lo fanno già le bacchette. */
.rt-mascot-pin.is-idle .rt-scroll-hint { opacity: 1; }

/* ---- Bacchette che mangiano (subito quando la hero è in cima, vedi
   .is-eating in main.js) ----
   Il ciclo imita il gesto vero: dalla bocca si scende al piatto (le bacchette
   si allontanano lungo il proprio asse e si aprono), si pinza, si risale alla
   bocca e il gesto ricomincia. Il perno è già l'estremità verso la bocca
   (transform-origin: 0% 50%), quindi "allontanarsi" è una translateX positiva.
   ⚠️ I keyframe sovrascrivono la transform che il JS dà alle bacchette durante
   lo scroll: va bene solo perché .is-eating esiste unicamente a scroll fermo a
   zero, dove --fy è 0. Se un giorno l'idle dovesse valere anche a metà corsa,
   i keyframe dovrebbero includere translateY(calc(var(--fy) * 1vh)).
   La bacchetta B (quella sotto) fa la stessa corsa con ampiezze ridotte: sono
   tenute insieme dalla mano, non due oggetti indipendenti.
   Il gesto occupa l'intero ciclo: discesa, presa e ritorno si susseguono senza
   la vecchia pausa di 3s. Bacchette e spaghetti condividono durata e soglie,
   così il ciuffo resta agganciato durante tutto il movimento. */
.rt-mascot-pin.is-eating .rt-ms-chopstick--a { animation: rt-eat-a 1.7s ease-in-out infinite; }
.rt-mascot-pin.is-eating .rt-ms-chopstick--b { animation: rt-eat-b 1.7s ease-in-out infinite; }
.rt-mascot-pin.is-eating .rt-ms-noodles { animation: rt-eat-noodles 1.7s ease-in-out infinite; }
@keyframes rt-eat-a {
  0%        { transform: translate(0, 0) rotate(var(--rot)); }
  35%       { transform: translate(7%, 4%) rotate(calc(var(--rot) - 7deg)); }
  50%       { transform: translate(7.5%, 4.5%) rotate(calc(var(--rot) - 2deg)); }
  100%      { transform: translate(0, 0) rotate(var(--rot)); }
}
@keyframes rt-eat-b {
  0%        { transform: translate(0, 0) rotate(var(--rot)); }
  35%       { transform: translate(6%, 3%) rotate(calc(var(--rot) - 2deg)); }
  50%       { transform: translate(6.5%, 3.5%) rotate(calc(var(--rot) - 3deg)); }
  100%      { transform: translate(0, 0) rotate(var(--rot)); }
}
@keyframes rt-eat-noodles {
  0%        { transform: translate(0, 0) rotate(0deg); }
  35%       { transform: translate(8%, 2%) rotate(-2deg); }
  50%       { transform: translate(9%, 2.5%) rotate(-1deg); }
  100%      { transform: translate(0, 0) rotate(0deg); }
}

/* senza JS non c'è la corsa dello scroll: ripeterebbero kicker e nome studio
   sopra un hero statico */
html:not(.js) .rt-corner,
html.reduce .rt-corner,
html:not(.js) .rt-scroll-hint,
html.reduce .rt-scroll-hint { display: none; }

/* ---- Top bar: nascosta finché il nero non ha riempito il viewport ----
   La classe la mette l'inline script dell'head (prima del paint, altrimenti la
   barra lampeggia) e la toglie main.js quando la cavità copre tutti e quattro
   gli angoli. Si anima OPACITY+VISIBILITY e non transform: la `transform` di
   .nav è già usata da shared/topbar.js per l'auto-hide allo scroll, e le due
   cose si annullerebbero a vicenda. */
.rt-nav-off .nav {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.35s var(--ease), visibility 0.35s var(--ease);
}
.nav { transition: transform 0.5s var(--ease), opacity 0.45s var(--ease); }

/* contenuto che appare DENTRO la cavità mentre è ancora in espansione (non
   solo a schermo già completamente nero) */
.rt-hero-reveal {
  position: absolute; inset: 0; z-index: 6;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 var(--pad);
  pointer-events: none;
}
.rt-hero-inner { display: flex; flex-direction: column; align-items: center; }
/* ⚠️ Nessuna OPACITY sul contenitore: il rivelo lo fanno i figli parola per
   parola (.rt-rv). Una dissolvenza anche qui si moltiplicherebbe con quella
   delle singole parole e appiattirebbe la cascata.

   La SCALA invece sì: il blocco entra piccolo — così ci sta nella cavità molto
   prima, e il testo si vede già mentre la bocca è appena aperta — e cresce fino
   alla misura finale --ts1 man mano che la cavità si allarga. Va da --ts0 a
   --ts1 nella finestra --rv-start → --rv-full, tutte calcolate in main.js:
   --rv-start = quando ci sta il testo RIMPICCIOLITO, --rv-full = quando ci sta
   a misura finale. --rv-k è 1/(rv-full − rv-start), precalcolato perché in
   CSS la divisione per una var non è affidabile.

   --ts1 NON è sempre 1: le righe del titolo sono `nowrap` (non devono MAI
   spezzarsi a metà, "…dal / vivo") e quindi il blocco può essere più largo del
   viewport. Il JS misura l'ingombro naturale e ricava la scala finale che lo fa
   stare nella larghezza disponibile: è la scala a fare da "font-size fluido",
   non il ritorno a capo. ⚠️ Per questo `.rt-hero-inner` deve poter eccedere il
   contenitore (niente max-width qui): l'overflow è la misura che serve al JS, e
   la scala lo riporta dentro.

   ⚠️ La misura dell'ingombro in JS deve usare offsetWidth/offsetHeight (geometria
   di layout, immune al transform): un getBoundingClientRect qui restituirebbe il
   box GIÀ scalato e la soglia si auto-inseguirebbe a ogni frame. */
html.js:not(.reduce) .rt-hero-inner {
  --tp: clamp(0, calc((var(--p) - var(--rv-start, 0.34)) * var(--rv-k, 8)), 1);
  transform: scale(calc(var(--ts0, 0.42) + (var(--ts1, 1) - var(--ts0, 0.42)) * var(--tp)));
  transform-origin: 50% 50%;
  will-change: transform;
}

/* ---- Rivelo "staggered" parola per parola ----
   Ogni elemento porta --i (indice nella cascata, assegnato dal template) e ne
   ricava la propria finestra: parte a --rv-start + i·0.0045 e dura ~0.024.

   ⚠️ --rv-start NON è una costante: lo calcola il JS confrontando l'ingombro del
   blocco di testo con quello della cavità, perché il punto in cui il testo ci
   sta dentro dipende dal viewport (su schermi stretti il titolo va a capo e la
   cavità è più piccola). Con una soglia fissa il testo sbordava dal nero.

   ⚠️ La leggibilità della cascata dipende dal RAPPORTO durata/passo, cioè da
   quante parole sono in dissolvenza nello stesso istante. Prima erano 0.056 e
   0.0032 → 17 parole insieme, che si legge come una nuvola uniforme e non come
   un'onda. Ora ~5: si vede il fronte che avanza. Se serve accentuarlo ancora,
   allargare il passo o accorciare la durata — non aumentare opacità o blur.

   Con ~37 elementi l'ultimo chiude intorno a --p 0.44, cioè dentro la fase in
   cui la cavità copre l'altezza ma non la larghezza: il testo è già leggibile
   mentre ai lati si vede ancora il rosso. Inizio a 0.22 e non prima perché lì
   la cavità è già abbastanza grande da contenere il blocco di testo — partendo
   troppo presto le prime righe spunterebbero fuori dal nero.

   Blur in `em` e non in px: così è proporzionale al corpo del testo (titolo
   grande e sottotitolo piccolo sfocano della stessa "quantità visiva").
   Base non animata = tutto visibile → fallback no-JS / reduced-motion gratis. */
.rt-w { display: inline-block; }
html.js:not(.reduce) .rt-rv {
  --wp: clamp(0, calc((var(--p) - var(--rv-start, 0.34) - var(--i, 0) * 0.0045) * 42), 1);
  opacity: var(--wp);
  filter: blur(calc((1 - var(--wp)) * 0.2em));
  transform: translateY(calc((1 - var(--wp)) * 0.5em));
}
.rt-hero-reveal.is-active { pointer-events: auto; }
/* ⚠️ Niente max-width sul titolo e righe `nowrap`: ogni riga di titleLines è una
   frase e non deve mai spezzarsi ("…funziona dal / vivo."). A tenerla dentro lo
   schermo ci pensa --ts1 (la scala finale calcolata in main.js). */
.rt-hero__title { font-size: clamp(2.2rem, 6vw, 4.6rem); }
.rt-hero__line { display: block; white-space: nowrap; }
.rt-hero__subtitle { margin-top: 1.6rem; max-width: 50ch; font-size: clamp(1.02rem, 1.6vw, 1.24rem); line-height: 1.55; color: var(--cream-dim); font-weight: 500; }
.rt-hero__ctas { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

/* ---- Keyword che completano la hero ----
   La posizione alterna i lati del viewport e riempie progressivamente il nero
   senza coprire il blocco centrale. Il JS controlla solo opacità, salita e
   scala: il rimbalzo è quindi legato allo scroll e torna indietro con esso. */
.rt-hero-pills {
  position: absolute;
  inset: 0;
  z-index: 5;
  list-style: none;
  pointer-events: none;
}
.rt-hero-pill {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(var(--pill-rot, 0deg));
  transform-origin: 50% 50%;
}
.rt-hero-pill__body {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(2.35rem, 4vw, 3.25rem);
  padding: 0.58rem clamp(1rem, 2vw, 1.55rem);
  border: var(--ow) solid var(--ink);
  border-radius: 999px;
  background: var(--pill-color, var(--cream));
  color: var(--ink);
  font-family: var(--ff-display);
  font-size: clamp(0.72rem, 1.05vw, 0.94rem);
  font-weight: 850;
  line-height: 1;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(246, 243, 236, 0.12), 0 10px 28px rgba(0, 0, 0, 0.34);
}
html.js:not(.reduce) .rt-hero-pill {
  opacity: var(--pill-opacity, 0);
  visibility: var(--pill-visible, hidden);
  will-change: opacity;
}
html.js:not(.reduce) .rt-hero-pill__body {
  transform: translateY(var(--pill-rise, 1.2rem)) scale(var(--pill-scale, 0));
  transform-origin: 50% 50%;
  will-change: transform;
}

/* L'ordine nel markup salta da un lato all'altro: sembra spontaneo, mentre la
   composizione finale resta bilanciata attorno al testo. */
.rt-hero-pill:nth-child(1) { left: 17%; top: 20%; --pill-rot: -7deg; --pill-color: var(--hero-red); }
.rt-hero-pill:nth-child(2) { left: 84%; top: 76%; --pill-rot: 6deg; --pill-color: var(--sky); }
.rt-hero-pill:nth-child(3) { left: 88%; top: 34%; --pill-rot: -5deg; --pill-color: var(--mustard); }
.rt-hero-pill:nth-child(4) { left: 12%; top: 67%; --pill-rot: 8deg; --pill-color: var(--pink); }
.rt-hero-pill:nth-child(5) { left: 77%; top: 18%; --pill-rot: 5deg; --pill-color: var(--green); }
.rt-hero-pill:nth-child(6) { left: 10%; top: 53%; --pill-rot: -4deg; --pill-color: var(--cream); }
.rt-hero-pill:nth-child(7) { left: 31%; top: 86%; --pill-rot: -6deg; --pill-color: var(--skin); }
.rt-hero-pill:nth-child(8) { left: 64%; top: 85%; --pill-rot: 7deg; --pill-color: var(--accent-soft); }

/* Invito che segue soltanto un puntatore preciso: la traslazione verticale
   tiene la pillola appena sopra al cursore, senza coprirlo. */
.rt-hero-cursor-pill {
  position: absolute;
  z-index: 7;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(2.35rem, 4vw, 3.25rem);
  padding: 0.58rem clamp(1rem, 2vw, 1.55rem);
  border: var(--ow) solid var(--ink);
  border-radius: 999px;
  background: var(--pink);
  color: var(--ink);
  font-family: var(--ff-display);
  font-size: clamp(0.72rem, 1.05vw, 0.94rem);
  font-weight: 850;
  line-height: 1;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(var(--cursor-x, -200px), var(--cursor-y, -200px), 0) translate(-50%, calc(-100% - 1.25rem)) rotate(var(--cursor-rot, 0deg));
  transition: opacity 160ms ease, visibility 160ms step-end;
  box-shadow: 0 0 0 1px rgba(246, 243, 236, 0.12), 0 10px 28px rgba(0, 0, 0, 0.34);
  will-change: transform;
}
.rt-hero-cursor-pill.is-visible { opacity: 1; visibility: visible; transition: opacity 160ms ease; }

@media (max-width: 760px) {
  .rt-hero-pill__body {
    min-height: 2rem;
    padding: 0.46rem 0.78rem;
    border-width: 2px;
    font-size: clamp(0.6rem, 2.8vw, 0.74rem);
    letter-spacing: 0.035em;
  }
  .rt-hero-pill:nth-child(1) { left: 25%; top: 14%; }
  .rt-hero-pill:nth-child(2) { left: 76%; top: 70%; }
  .rt-hero-pill:nth-child(3) { left: 75%; top: 14%; }
  .rt-hero-pill:nth-child(4) { left: 22%; top: 64%; }
  .rt-hero-pill:nth-child(5) { left: 22%; top: 20%; }
  .rt-hero-pill:nth-child(6) { left: 76%; top: 64%; }
  .rt-hero-pill:nth-child(7) { left: 22%; top: 76%; }
  .rt-hero-pill:nth-child(8) { left: 76%; top: 82%; }
}

@media (pointer: coarse) { .rt-hero-cursor-pill { display: none; } }
html.reduce .rt-hero-cursor-pill { display: none; }

/* Fallback accessibile: senza animazione le keyword diventano una riga fluida
   sotto il testo, invece di restare sovrapposte in posizione assoluta. */
html:not(.js) .rt-hero-pills,
html.reduce .rt-hero-pills {
  position: relative;
  inset: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem;
  margin-top: 2rem;
}
html:not(.js) .rt-hero-pill,
html.reduce .rt-hero-pill {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
}

/* fallback statico: no-JS o reduced-motion → niente pin, mascotte piccola sopra il testo */
html:not(.js) .rt-mascot-pin,
html.reduce .rt-mascot-pin {
  flex-direction: column; gap: 2.4rem; padding: clamp(5rem, 12vh, 7rem) var(--pad) 4rem;
}
html:not(.js) .rt-hero-reveal,
html.reduce .rt-hero-reveal {
  position: relative; inset: auto; opacity: 1; transform: none; pointer-events: auto;
}
html:not(.js) .rt-mascot,
html.reduce .rt-mascot { width: clamp(150px, 20vw, 220px); }
/* senza JS non c'è --ts1 a rimpicciolire il blocco: lì le righe possono andare
   a capo, meglio del titolo che sborda dallo schermo */
html:not(.js) .rt-hero__line,
html.reduce .rt-hero__line { white-space: normal; }

/* ============================================================
   HERO COMMERCIALE — messaggio immediato su nero, pillole allo scroll.
   La vecchia mascotte è stata archiviata nel Campionario: questa variante
   conserva solo la parte utile al ritmo della pagina, senza nascondere claim
   e CTA dietro una sequenza introduttiva.
   ============================================================ */
.rt-hero-stage {
  position: relative;
  height: calc(3.4 * var(--app-vh, 100vh));
  background: var(--bg);
}
.rt-hero-pin {
  position: sticky;
  top: 0;
  height: 100dvh;
  min-height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.rt-hero-content {
  position: relative;
  z-index: 6;
  width: min(76rem, calc(100% - 2 * var(--pad)));
  text-align: center;
  pointer-events: auto;
}
.rt-hero-content .rt-hero__title { font-size: clamp(2.35rem, 5.2vw, 4.5rem); }
.rt-hero-content .rt-hero__line { white-space: normal; }
.rt-hero-content .rt-hero__subtitle { margin-inline: auto; }
.rt-hero-content .rt-hero__ctas { position: relative; z-index: 1; }
.rt-hero-pin .rt-hero-pills { z-index: 4; }

/* Senza JavaScript, o con reduced motion, il messaggio resta la prima cosa
   visibile e le pillole diventano una lista ordinata subito sotto. */
html:not(.js) .rt-hero-stage,
html.reduce .rt-hero-stage { height: auto; }
html:not(.js) .rt-hero-pin,
html.reduce .rt-hero-pin {
  position: relative;
  height: auto;
  min-height: 0;
  display: block;
  padding: clamp(8rem, 18vh, 12rem) var(--pad) clamp(4rem, 10vh, 7rem);
}
html:not(.js) .rt-hero-content,
html.reduce .rt-hero-content { width: min(58rem, 100%); margin: 0 auto; }

/* ============ PROOF ============ */
.rt-proof { padding: var(--section-pad) var(--pad); max-width: 1300px; margin: 0 auto; }
.rt-proof__intro { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--cream-dim); margin-bottom: 1.6rem; font-weight: 700; }
.rt-proof__grid { display: grid; grid-template-columns: repeat(3, 1fr); align-items: start; gap: clamp(0.9rem, 1.8vw, 1.5rem); }
.rt-proof__item { border-radius: 18px; overflow: hidden; background: var(--bg-soft); border: var(--ow) solid var(--ink); }
.rt-proof__item:nth-child(2n) { margin-top: clamp(1rem, 4vw, 2.6rem); }
.rt-proof__item img { width: 100%; height: auto; object-fit: contain; }
.rt-proof__cta { margin: clamp(2rem, 4vw, 3.5rem) 0 0; text-align: center; }

/* ============ PROBLEMA ============ */
.rt-problem { padding: var(--section-pad) var(--pad); max-width: 1180px; margin: 0 auto; border-top: 1px solid rgba(246, 243, 236, 0.1); }
.rt-problem__heading { display: grid; grid-template-columns: minmax(16rem, 0.86fr) minmax(18rem, 1fr); align-items: end; gap: clamp(2rem, 7vw, 7rem); }
.rt-problem__title { font-size: clamp(1.9rem, 4.4vw, 3.2rem); max-width: 20ch; }
.rt-problem__lead { max-width: 48ch; font-size: clamp(1rem, 1.45vw, 1.17rem); line-height: 1.6; color: var(--cream-dim); }
.rt-problem__comparison { margin-top: clamp(2.5rem, 5vw, 4.5rem); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.2vw, 1.8rem); }
.rt-compare { padding: clamp(1.15rem, 2.5vw, 2rem); border: var(--ow) solid var(--ink); border-radius: var(--radius); }
.rt-compare--before { background: #30231c; color: var(--cream); box-shadow: inset 0 0 0 1px rgba(246, 243, 236, 0.1); }
.rt-compare--after { background: linear-gradient(145deg, #dff0dc, #c5e7cb); color: #173c27; box-shadow: 0 16px 36px rgba(0, 230, 118, 0.12); }
.rt-compare__label { margin-bottom: 1.1rem; font-family: var(--ff-display); font-size: clamp(1rem, 1.4vw, 1.2rem); font-weight: 850; letter-spacing: 0.06em; text-transform: uppercase; }
.rt-compare--before .rt-compare__label { color: var(--accent-soft); }
.rt-compare--after .rt-compare__label { color: #17623e; }
.rt-compare__list { list-style: none; display: grid; gap: 0.65rem; }
.rt-compare__item { min-height: 4.35rem; display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.85rem 0.95rem; border-radius: 14px; font-size: clamp(0.9rem, 1.25vw, 1.02rem); font-weight: 600; line-height: 1.4; }
.rt-compare--before .rt-compare__item { background: rgba(13, 13, 13, 0.3); border: 1px solid rgba(246, 243, 236, 0.15); }
.rt-compare--after .rt-compare__item { background: rgba(255, 255, 255, 0.45); border: 1px solid rgba(23, 60, 39, 0.13); }
.rt-compare__icon { flex: 0 0 auto; width: 1.45rem; margin-top: -0.08rem; font-size: 1.55rem; font-weight: 400; line-height: 1; text-align: center; }
.rt-compare--before .rt-compare__icon { color: var(--accent-soft); }
.rt-compare--after .rt-compare__icon { color: #108340; font-weight: 850; }

/* ============ SOLUZIONE — card impilate (sticky stack, puro CSS) ============ */
.rt-solution { padding: var(--section-pad) var(--pad) calc(var(--section-pad) + 6rem); max-width: 1180px; margin: 0 auto; }
.rt-solution__title { font-size: clamp(1.9rem, 4.4vw, 3.2rem); max-width: 20ch; }
.rt-solution__intro { margin-top: 1.2rem; max-width: 48ch; color: var(--cream-dim); font-size: 1.05rem; }
.rt-pillars { margin-top: 3.4rem; display: flex; flex-direction: column; gap: 1.6rem; }
.rt-pillar {
  position: sticky; top: clamp(84px, 13vh, 128px);
  min-height: clamp(280px, 38vh, 400px);
  border-radius: var(--radius); border: var(--ow) solid var(--ink);
  padding: clamp(2rem, 4vw, 3rem);
  display: flex; flex-direction: column; justify-content: space-between;
  color: var(--ink);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.rt-pillar:nth-child(1) { background: var(--pink); z-index: 1; }
.rt-pillar:nth-child(2) { background: var(--sky); z-index: 2; }
.rt-pillar:nth-child(3) { background: var(--mustard); z-index: 3; }
.rt-pillar__num { font-family: var(--ff-display); font-weight: 800; font-size: 0.95rem; opacity: 0.55; }
.rt-pillar h3 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-top: 0.6rem; }
.rt-pillar p { margin-top: 1rem; max-width: 46ch; font-size: 1rem; line-height: 1.6; font-weight: 500; }

/* ============ COSA INCLUDE ============ */
.rt-includes { padding: var(--section-pad) var(--pad); max-width: 1180px; margin: 0 auto; border-top: 1px solid rgba(246, 243, 236, 0.1); }
.rt-includes__title { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
.rt-includes__cols { margin-top: 2.6rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 3vw, 2rem); }
.rt-includes__col { border: 2px solid rgba(246, 243, 236, 0.16); border-radius: var(--radius); padding: 1.8rem; }
.rt-includes__col h3 { font-size: 1.05rem; color: var(--accent-soft); margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 0.04em; font-family: var(--ff-display); font-weight: 800; }
.rt-includes__col ul { list-style: none; display: flex; flex-direction: column; gap: 0.65rem; }
.rt-includes__col li { position: relative; padding-left: 1.5rem; font-size: 0.92rem; color: var(--cream-dim); }
.rt-includes__col li::before {
  content: "✓"; position: absolute; left: 0; top: -1px; color: var(--ink); background: var(--green);
  width: 1.05rem; height: 1.05rem; border-radius: 50%; font-size: 0.66rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
}
.rt-includes__note { margin-top: 2.4rem; font-size: 0.88rem; color: var(--cream-dim); font-weight: 500; }

/* ============ FUNZIONI — vetrina dei singoli pezzi (box placeholder) ============
   Stessa scatola dei siti-demo (bordo ink spesso, angoli tondi, hover che
   sposta di -3px e apre l'ombra piena in accent): sono due griglie di "cose
   che puoi avere", devono leggere come la stessa famiglia. Le variabili sono le
   stesse (--ow, --radius, --accent), quindi restano allineate da sole.
   ⚠️ I box sono PLACEHOLDER: `aria-disabled` + pastiglia "In arrivo". Quando la
   funzione è pronta si toglie l'attributo e si aggancia il JS su data-feature;
   niente qui dentro va riscritto. Vedi funzioni-ristoranti.md. */
.rt-features { padding: var(--section-pad) var(--pad); max-width: 1300px; margin: 0 auto; border-top: 1px solid rgba(246, 243, 236, 0.1); }
.rt-features__title { font-size: clamp(1.9rem, 4.4vw, 3.2rem); max-width: 20ch; }
.rt-features__intro { margin-top: 1.2rem; max-width: 56ch; color: var(--cream-dim); font-size: 1.02rem; line-height: 1.6; }
.rt-features__grid {
  margin-top: 3rem; list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.6rem);
}
/* La scatola è la stessa per i due tipi di box, ma l'ELEMENTO cambia: <button>
   per le funzioni che si apriranno in finestra, <div> per quelle già vive che
   contengono un link (un controllo dentro un controllo non è marcatura valida).
   ⚠️ `text-align: left` e `font: inherit` espliciti: sul <button> senza questi
   si eredita il centrato e il font di sistema dell'UA. */
.rt-feature__box {
  display: flex; flex-direction: column; width: 100%; height: 100%;
  text-align: left; font: inherit; color: var(--cream);
  background: var(--bg-card); border: var(--ow) solid var(--ink); border-radius: var(--radius);
  overflow: hidden; padding: 0;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
button.rt-feature__box { cursor: pointer; }
.rt-feature__box:hover, .rt-feature__box:focus-visible,
.rt-feature--live .rt-feature__box:has(.rt-feature__cta:focus-visible) {
  transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--accent);
}
/* il box "vivo" si solleva al passaggio, ma cliccabile è solo la CTA */
.rt-feature--live .rt-feature__box:hover { transform: translate(-3px, -3px); }
/* finestra dell'interfaccia: finché è un placeholder, la stessa trama a righe
   delle demo "presto disponibili" — dice "qui ci sarà qualcosa" senza fingerlo */
.rt-feature__preview {
  display: block; aspect-ratio: 16 / 10;
  border-bottom: var(--ow) solid var(--ink);
  background: repeating-linear-gradient(135deg, rgba(246, 243, 236, 0.14) 0 2px, transparent 2px 14px), var(--bg-soft);
}
.rt-feature__body { display: block; padding: 1.3rem 1.4rem 1.5rem; }
.rt-feature__name { display: block; font-family: var(--ff-display); font-weight: 800; font-size: 1.12rem; line-height: 1.25; }
.rt-feature__hint {
  margin-top: 0.9rem; display: inline-block;
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 800;
  color: var(--ink); background: var(--mustard);
  border: 2px solid var(--ink); border-radius: 999px; padding: 0.35rem 0.8rem;
}

/* ---- WhatsApp: funzione viva dentro il box ----
   Finta conversazione (la bolla verde è il testo che finisce DAVVERO
   precompilato nel messaggio) + una CTA che apre wa.me.
   ⚠️ Nessun logo né schermata di WhatsApp: si nomina il servizio, non lo si
   imita — una finta interfaccia altrui su una pagina di vendita è un'altra cosa.
   Il verde è dichiarato qui e non preso dalla palette: è l'unico punto della
   pagina che cita un servizio esterno. */
.rt-feature__preview--chat {
  background: var(--bg-soft);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1.1rem; gap: 0.55rem;
}
.rt-chat { display: flex; flex-direction: column; gap: 0.55rem; }
.rt-chat__bubble {
  display: inline-block; max-width: 85%;
  font-size: 0.83rem; line-height: 1.4; padding: 0.6rem 0.8rem;
  border-radius: 14px;
}
.rt-chat__bubble--out { align-self: flex-end; background: #25d366; color: #0b1f14; border-bottom-right-radius: 4px; font-weight: 500; }
.rt-chat__bubble--in { align-self: flex-start; background: rgba(246, 243, 236, 0.12); color: var(--cream); border-bottom-left-radius: 4px; }
.rt-feature__cta {
  margin-top: 0.9rem; display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 800;
  color: var(--ink); background: var(--green);
  border: 2px solid var(--ink); border-radius: 999px; padding: 0.5rem 1rem;
  transition: transform 0.2s var(--ease);
}
.rt-feature__cta:hover { transform: translateY(-2px); }

/* la pastiglia di una funzione già provabile: verde, non gialla come "In arrivo" */
.rt-feature__hint--live { background: var(--green); }

/* Anteprima del menu digitale: le quattro tessere delle categorie, con gli
   stessi colori che si ritrovano dentro la finestra — così il box promette
   esattamente quello che apre. */
.rt-feature__preview--menu {
  background: #fdf8f0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem;
  padding: 1.1rem; align-content: center;
}
.rt-mn-chip {
  display: flex; align-items: flex-end;
  min-height: 3.1rem; padding: 0.5rem 0.6rem;
  border-radius: 12px; background: var(--c); color: var(--ink);
  font-family: var(--ff-display); font-weight: 900; font-size: 0.82rem;
  letter-spacing: -0.01em;
}

/* Anteprima del calendario: tre serate con il numero del giorno sopra la foto.
   Deve leggersi al volo come "date + fotografie", cioè un'altra cosa rispetto
   alle tessere del menu e al calendario con gli orari della prenotazione. */
.rt-feature__preview--eventi {
  background: #efefed;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem;
  padding: 1.1rem; align-content: center;
}
.rt-ev-tile { display: flex; flex-direction: column; gap: 0.3rem; }
.rt-ev-tile i {
  font-style: normal; font-family: var(--ff-display); font-weight: 800;
  font-size: 0.78rem; color: #111; font-variant-numeric: tabular-nums;
}
.rt-ev-tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }

/* Anteprima Hotel & Upsell Esperienze */
.rt-feature__preview--hotel {
  background: #edf5f2;
  display: flex; align-items: center; justify-content: center;
  padding: 0.85rem;
}
.rt-hotel-mini {
  background: #ffffff;
  border: 1.5px solid #264E48;
  border-radius: 12px;
  padding: 0.6rem 0.75rem;
  width: 100%; max-width: 230px;
  box-shadow: 0 4px 14px rgba(38, 78, 72, 0.12);
  display: flex; flex-direction: column; gap: 0.4rem;
}
.rt-hotel-mini__row {
  display: flex; align-items: center; gap: 0.6rem;
}
.rt-hotel-mini__img {
  width: 52px; height: 44px;
  object-fit: cover; border-radius: 6px; flex-shrink: 0;
  border: 1px solid #e5ece9;
}
.rt-hotel-mini__info {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
}
.rt-hotel-mini__head {
  display: flex; align-items: center; justify-content: space-between; gap: 4px;
  margin-bottom: 2px;
}
.rt-hotel-mini__tag {
  background: #fbf6ee; color: #b08745; border: 1px solid rgba(197, 155, 88, 0.4);
  font-size: 0.58rem; font-weight: 800; padding: 1px 5px; border-radius: 8px;
  text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap;
}
.rt-hotel-mini__price {
  font-family: var(--ff-display); font-size: 0.76rem; font-weight: 800;
  color: #264E48; white-space: nowrap;
}
.rt-hotel-mini__title {
  font-family: var(--ff-display); font-size: 0.78rem; font-weight: 800;
  color: #1C2321; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin: 0;
}
.rt-hotel-mini__sub {
  font-size: 0.58rem; color: #6E7775; white-space: nowrap;
}
.rt-hotel-mini__upsell {
  display: flex; align-items: center; justify-content: space-between;
  background: #f0f6f4; border: 1px dashed #264E48; border-radius: 6px;
  padding: 0.28rem 0.5rem; font-size: 0.62rem; font-weight: 700; color: #264E48;
}
.rt-hotel-mini__upsell b {
  color: #b08745; font-size: 0.65rem;
}

/* Anteprima FAQ & Politiche */
.rt-feature__preview--faq {
  background: #f1f5f9;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 0.85rem;
}
.rt-faq-mini {
  background: #ffffff; border: 1.5px solid #1e3a34; border-radius: 12px;
  padding: 0.6rem 0.75rem; width: 100%; max-width: 230px;
  box-shadow: 0 4px 14px rgba(30, 58, 52, 0.1);
  display: flex; flex-direction: column; gap: 0.35rem;
}
.rt-faq-mini__head {
  display: flex; align-items: center; justify-content: space-between; gap: 4px;
}
.rt-faq-mini__tag {
  background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0;
  font-size: 0.58rem; font-weight: 800; padding: 1px 5px; border-radius: 6px;
  text-transform: uppercase; white-space: nowrap;
}
.rt-faq-mini__count {
  font-size: 0.62rem; font-weight: 700; color: #64748b; white-space: nowrap;
}
.rt-faq-mini__q {
  font-family: var(--ff-display); font-size: 0.76rem; font-weight: 800;
  color: #0f172a; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin: 0;
}
.rt-faq-mini__ans {
  font-size: 0.60rem; color: #334155; line-height: 1.35;
  background: #f8fafc; border-left: 2px solid #22c55e;
  padding: 2px 6px; border-radius: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---- Prenotazione: mini-calendario decorativo dentro il box ----
   Non è l'interfaccia vera (quella è il dialog di booking.js): è un'icona
   grande, fatta di soli numeri, che dice cosa succede al click. */
.rt-feature__preview--cal {
  background: var(--bg-soft);
  display: flex; flex-direction: column; justify-content: center; gap: 0.7rem;
  padding: 1.1rem 1.2rem;
}
.rt-cal { display: flex; flex-direction: column; gap: 0.4rem; }
.rt-cal__dow, .rt-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.22rem; }
.rt-cal__dow i {
  font-style: normal; text-align: center; font-size: 0.56rem; font-weight: 800;
  letter-spacing: 0.06em; color: var(--cream-dim);
}
.rt-cal__grid i {
  font-style: normal; text-align: center; font-size: 0.62rem; line-height: 1.55;
  font-variant-numeric: tabular-nums; color: var(--cream-dim);
  border-radius: 5px; background: rgba(246, 243, 236, 0.05);
}
.rt-cal__grid i.is-sel { background: var(--accent); color: var(--ink); font-weight: 800; }
.rt-cal__slots { display: flex; gap: 0.35rem; }
.rt-cal__slots i {
  font-style: normal; font-size: 0.6rem; font-weight: 700; font-variant-numeric: tabular-nums;
  padding: 0.28rem 0.5rem; border-radius: 999px;
  border: 1px solid rgba(246, 243, 236, 0.18); color: var(--cream-dim);
}
.rt-cal__slots i.is-sel { background: var(--accent); border-color: var(--accent); color: var(--ink); }

/* ---- Card commerciale accanto al dialog di prenotazione ----
   Il dialog di booking.js si apre con showModal(), quindi sta nel TOP LAYER:
   una card normale finirebbe sotto il suo backdrop. Questa è un `popover`, che
   nel top layer entra anche lui. La mostra e nasconde main.js.
   La coppia dialog+card si centra spostando il DIALOG a sinistra di metà
   dell'ingombro aggiunto: il dialog è centrato da `margin:auto`, quindi basta
   una translate, senza toccare la sua larghezza.
   ⚠️ Verticalmente la card è centrata e non allineata in basso come nelle
   finestre: il dialog cambia altezza a ogni passo del flusso, e una card
   ancorata al suo fondo salterebbe su e giù a ogni "Avanti". */
:root { --bkp-w: 300px; --bkp-gap: 22px; }
#rtBookingPitch {
  position: fixed; margin: 0;
  width: var(--bkp-w);
  top: 50%; left: calc(50% + 280px - (var(--bkp-w) + var(--bkp-gap)) / 2 + var(--bkp-gap));
  transform: translateY(-50%);
}
@media (min-width: 1001px) {
  dialog.bk { transform: translateX(calc(-1 * (var(--bkp-w) + var(--bkp-gap)) / 2)); }
}
/* sotto i 1000px non c'è spazio: niente card e niente spostamento del dialog */
@media (max-width: 1000px) {
  #rtBookingPitch { display: none !important; }
}

/* ---- Palette del dialog di prenotazione (static/demo/_shared/booking.css) ----
   Quel file possiede solo struttura e movimento: colori e caratteri arrivano
   tutti da queste --bk-*, per questo la stessa finestra sembra su misura su
   ogni sito. Vanno dichiarate su :root, non sulla sezione: il <dialog> viene
   iniettato in fondo a <body>, fuori da qualsiasi contenitore della pagina.
   ⚠️ --bk-faint NON è un dettaglio decorativo: ci scrive testo vero (le
   iniziali dei giorni, i suggerimenti, "ultimi posti"). Qui è #8f8a7e, ~5:1 sul
   fondo della finestra — è già successo su kaiseki di prenderlo dalla palette
   del sito e ritrovarsi a 2,5:1. */
:root {
  --bk-bg: var(--bg-card);
  --bk-surface: var(--bg-soft);
  --bk-fg: var(--cream);
  --bk-muted: var(--cream-dim);
  --bk-faint: #8f8a7e;
  --bk-accent: var(--accent);
  --bk-accent-fg: var(--ink);
  --bk-line: rgba(246, 243, 236, 0.18);
  --bk-ok: var(--green);
  --bk-warn: var(--mustard);
  --bk-radius: 18px;
  --bk-font-display: var(--ff-display);
  --bk-font-body: var(--ff-sans);
}

/* ============ DEMO ============ */
.rt-demo { padding: var(--section-pad) var(--pad); max-width: 1300px; margin: 0 auto; border-top: 1px solid rgba(246, 243, 236, 0.1); }
.rt-demo__title { font-size: clamp(1.9rem, 4.4vw, 3.2rem); max-width: 20ch; }
.rt-demo__intro { margin-top: 1.2rem; max-width: 56ch; color: var(--cream-dim); font-size: 1.02rem; line-height: 1.6; }
.rt-demo__grid { margin-top: 3rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.6rem); }
.rt-demo__all { margin-top: 2rem; }
.rt-demo__card {
  display: block; border: var(--ow) solid var(--ink); border-radius: var(--radius); overflow: hidden;
  background: var(--bg-card); transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.rt-demo__card:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--accent); }
.rt-demo__media { aspect-ratio: 16 / 11; overflow: hidden; background: var(--bg-soft); border-bottom: var(--ow) solid var(--ink); }
.rt-demo__media img { transition: transform 0.9s var(--ease); }
.rt-demo__card:hover .rt-demo__media img { transform: scale(1.07); }
.rt-demo__body { padding: 1.4rem 1.5rem 1.6rem; }
.rt-demo__body h3 { font-size: 1.3rem; margin-bottom: 0.35rem; }
.rt-demo__tag { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-soft); margin-bottom: 0.6rem; font-weight: 700; }
.rt-demo__for { font-size: 0.85rem; color: var(--cream-dim); line-height: 1.5; }
.rt-demo__link { margin-top: 1rem; display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 800; color: var(--cream); }
.rt-demo__card:hover .rt-demo__link { color: var(--accent-soft); }

.rt-demo__card--soon { opacity: 0.65; cursor: default; border-style: dashed; }
.rt-demo__card--soon:hover { transform: none; box-shadow: none; }
.rt-demo__media--soon {
  background: repeating-linear-gradient(135deg, rgba(246, 243, 236, 0.14) 0 2px, transparent 2px 14px), var(--bg-soft);
}
.rt-demo__soon { margin-top: 1rem; display: inline-block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--ink); background: var(--mustard); border: 2px solid var(--ink); border-radius: 999px; padding: 0.4rem 0.9rem; }

.rt-hospitality { margin-top: clamp(3rem, 6vw, 5rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid rgba(246, 243, 236, 0.1); }
.rt-hospitality__title { font-family: var(--ff-display); font-weight: 800; font-size: 1.3rem; margin-bottom: 0.5rem; }
.rt-hospitality__text { color: var(--cream-dim); max-width: 52ch; font-size: 0.95rem; }
.rt-hospitality__tags { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: 0.7rem; }
.rt-tag { font-size: 0.78rem; font-weight: 700; padding: 0.5rem 1.1rem; border: 2px solid var(--cream); border-radius: 999px; color: var(--cream); }

/* ============ OFFERTA ============ */
.rt-offer { padding: var(--section-pad) var(--pad); max-width: 1180px; margin: 0 auto; border-top: 1px solid rgba(246, 243, 236, 0.1); }
.rt-offer__title { font-size: clamp(1.9rem, 4.4vw, 3.2rem); }
.rt-offer__tiers { margin-top: 3rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2.4vw, 1.8rem); align-items: stretch; }
.rt-offer__tier {
  position: relative; padding: 2.2rem 1.8rem; border: var(--ow) solid var(--ink); border-radius: var(--radius);
  display: flex; flex-direction: column; gap: 0.5rem; background: var(--bg-card);
}
.rt-offer__tier--featured { background: var(--accent); color: var(--ink); }
.rt-offer__badge {
  position: absolute; top: -0.8rem; left: 1.8rem; background: var(--ink); color: var(--cream);
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 800;
  padding: 0.4rem 0.9rem; border-radius: 999px; border: 2px solid var(--cream);
}
.rt-offer__name { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 800; color: var(--accent-soft); }
.rt-offer__tier--featured .rt-offer__name { color: var(--ink); opacity: 0.7; }
.rt-offer__subtitle { font-size: 1.4rem; margin: 0.2rem 0 0.6rem; }
.rt-offer__text { font-size: 0.9rem; color: var(--cream-dim); line-height: 1.6; flex: 1; font-weight: 500; }
.rt-offer__tier--featured .rt-offer__text { color: rgba(13, 13, 13, 0.75); }
.rt-offer__price { font-family: var(--ff-display); font-weight: 800; font-size: 1.5rem; margin-top: 0.6rem; }
.rt-offer__tier .rt-btn { margin-top: 0.8rem; align-self: flex-start; }
.rt-offer__tier--featured .rt-btn--ghost { border-color: var(--ink); color: var(--ink); }
.rt-offer__tier--featured .rt-btn--ghost:hover { background: var(--ink); color: var(--cream); }

.rt-pilot { margin-top: clamp(2.5rem, 5vw, 4rem); padding: clamp(2rem, 4vw, 3rem); border-radius: var(--radius); background: var(--bg-soft); border: 2px dashed rgba(246, 243, 236, 0.3); }
.rt-pilot h3 { font-size: clamp(1.3rem, 2.4vw, 1.8rem); max-width: 26ch; }
.rt-pilot p { margin-top: 1rem; max-width: 62ch; color: var(--cream-dim); font-size: 0.95rem; line-height: 1.65; }
.rt-pilot .rt-btn { margin-top: 1.6rem; }

/* ============ COME FUNZIONA ============ */
.rt-process { padding: var(--section-pad) var(--pad); max-width: 1300px; margin: 0 auto; border-top: 1px solid rgba(246, 243, 236, 0.1); }
.rt-process__title { font-size: clamp(1.9rem, 4.4vw, 3.2rem); margin-bottom: 3rem; }
.rt-process__steps { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.4rem; }
.rt-process__step { border-top: var(--ow) solid var(--accent); padding-top: 1.2rem; }
.rt-process__num { font-family: var(--ff-display); font-weight: 800; color: var(--accent-soft); font-size: 1.15rem; }
.rt-process__step h3 { font-size: 1.05rem; margin: 0.6rem 0 0.5rem; }
.rt-process__step p { font-size: 0.85rem; color: var(--cream-dim); line-height: 1.55; }

/* ============ CHI SONO ============ */
.rt-about { padding: var(--section-pad) var(--pad); max-width: 1180px; margin: 0 auto; border-top: 1px solid rgba(246, 243, 236, 0.1); display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.rt-about__media { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; max-width: 340px; border: var(--ow) solid var(--ink); }
.rt-about__body h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); max-width: 20ch; }
.rt-about__text { margin-top: 1.4rem; }
.rt-about__text p { color: var(--cream-dim); font-size: 1rem; line-height: 1.7; max-width: 50ch; }
.rt-about__text p + p { margin-top: 1rem; }
.rt-link { display: inline-block; margin-top: 1.6rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 800; color: var(--ink); background: var(--cream); border: 2px solid var(--ink); border-radius: 999px; padding: 0.6rem 1.2rem; }

/* ============ FAQ wrapper ============ */
.rt-faq { border-top: 1px solid rgba(246, 243, 236, 0.1); max-width: 1180px; margin: 0 auto; }

/* ============ CTA FINALE + FORM ============ */
.rt-final { padding: var(--section-pad) var(--pad) clamp(5rem, 12vh, 8rem); max-width: 900px; margin: 0 auto; border-top: 1px solid rgba(246, 243, 236, 0.1); text-align: center; }
.rt-final__title { font-size: clamp(2rem, 5vw, 3.2rem); }
.rt-final__text { margin: 1.2rem auto 0; max-width: 54ch; color: var(--cream-dim); font-size: 1.05rem; line-height: 1.6; }

.rt-form-wrap { margin-top: 3.4rem; padding: clamp(1.8rem, 4vw, 3rem); border: var(--ow) solid var(--ink); border-radius: var(--radius); background: var(--bg-card); text-align: left; }
.rt-form__title { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.rt-form__lead { margin-top: 0.6rem; color: var(--cream-dim); font-size: 0.95rem; }

.rt-form { margin-top: 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem 1.4rem; }
.rt-form__field { display: flex; flex-direction: column; gap: 0.45rem; font-size: 0.8rem; color: var(--cream-dim); font-weight: 700; }
.rt-form__field:has(textarea) { grid-column: 1 / -1; }
.rt-form__field input, .rt-form__field textarea {
  font-family: var(--ff-sans); font-size: 0.95rem; color: var(--cream); font-weight: 400;
  background: var(--bg-soft); border: 2px solid rgba(246, 243, 236, 0.3); border-radius: 12px;
  padding: 0.8rem 0.9rem; transition: border-color 0.3s var(--ease);
}
.rt-form__field input::placeholder, .rt-form__field textarea::placeholder { color: rgba(185, 180, 168, 0.55); }
.rt-form__field input:focus, .rt-form__field textarea:focus { outline: none; border-color: var(--accent-soft); }
.rt-form__field textarea { resize: vertical; min-height: 5.5rem; }
.rt-form > .rt-btn { grid-column: 1 / -1; justify-self: start; margin-top: 0.4rem; }
.rt-form > .rt-btn:disabled { opacity: 0.62; cursor: wait; transform: none; box-shadow: 4px 4px 0 var(--ink); }
.rt-form__trap {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.rt-form__success { margin-top: 2rem; padding: 1.4rem 1.6rem; border-radius: 14px; background: var(--accent); color: var(--ink); border: 2px solid var(--ink); }
.rt-form__success-title { font-family: var(--ff-display); font-weight: 800; font-size: 1.3rem; margin-bottom: 0.4rem; }
.rt-form__success a { text-decoration: underline; }
.rt-form__error { margin-top: 1.25rem; padding: 1.2rem 1.4rem; border-radius: 14px; background: var(--pink); color: var(--ink); border: 2px solid var(--ink); }
.rt-form__error-title { font-family: var(--ff-display); font-weight: 800; font-size: 1.15rem; margin-bottom: 0.35rem; }
.rt-form__error a { text-decoration: underline; }
.rt-form.is-hidden { display: none; }

/* ============ FOOTER ============ */
.rt-footer { border-top: 1px solid rgba(246, 243, 236, 0.1); padding: 2.4rem var(--pad) 3rem; max-width: 1300px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: 0.78rem; color: var(--cream-dim); font-weight: 500; }
.rt-footer__links { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.rt-footer__links a:hover { color: var(--accent-soft); }

/* ============ RESPONSIVE ============ */
@media (max-width: 980px) {
  .rt-problem__heading, .rt-problem__comparison { grid-template-columns: 1fr; }
  .rt-includes__cols, .rt-offer__tiers, .rt-demo__grid, .rt-features__grid { grid-template-columns: repeat(2, 1fr); }
  .rt-process__steps { grid-template-columns: repeat(3, 1fr); row-gap: 2rem; }
  .rt-about { grid-template-columns: 1fr; }
  .rt-about__media { max-width: 240px; }
}
@media (max-width: 640px) {
  .rt-proof__grid { grid-template-columns: repeat(2, 1fr); }
  .rt-includes__cols, .rt-offer__tiers, .rt-demo__grid, .rt-features__grid { grid-template-columns: 1fr; }
  .rt-process__steps { grid-template-columns: repeat(2, 1fr); }
  .rt-form { grid-template-columns: 1fr; }
  .rt-form__field:has(textarea) { grid-column: 1; }
  .rt-footer { flex-direction: column; }
  .rt-mascot { width: clamp(160px, 40vw, 220px); }
}