/* ==========================================================================
   Redesign Reibanq.eu — «Il registro»
   Foglio separato: non tocca tokens.css, base.css, components.css, effects.css.
   Sovrascrive solo dove il piano (docs/REDESIGN-direzione.md) lo richiede.
   Vincoli: testi, struttura DOM, colori di marca, font — intoccabili.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HERO «estratto conto vivo»
   Da centrato a due colonne asimmetriche 7/5. A destra: il tabellone dei
   cambi esistente (rb-cambi), riquadrato come foglio bancario con filetto
   navy. A sinistra: messaggio allineato a sinistra.
   -------------------------------------------------------------------------- */

/* La sezione hero del redesign: il guscio resta, cambiamo l'impaginazione. */
.rb-hero--registro .rb-container {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  column-gap: var(--rb-gap-xl);
}

/* Messaggio: allineato a sinistra, niente centratura. */
.rb-hero--registro .rb-scrollframe__lead {
  max-width: none;
  margin-inline: 0;
  text-align: left;
}
.rb-hero--registro .rb-hero__lede {
  margin-inline: 0;
  max-width: 34em;             /* righe sotto gli 80 caratteri */
}
/* I tre badge di fiducia smettono di stare in fila centrata: vanno sotto il
   messaggio, allineati a sinistra, come firmatari di un documento. */
.rb-hero--registro .rb-trust { justify-content: flex-start; }

/* I bottoni si allineano a sinistra con il messaggio. */
.rb-hero--registro .rb-hero__cta {
  text-align: left;
}

/* Il pannello destro: il tabellone dei cambi che esiste gia', vestito da
   estratto conto. Il foglio: fondo bianco, filetto navy, angolo poco tondo,
   intestazione piccola in Overpass. */
.rb-estratto {
  background: var(--rb-surface);
  border: 1px solid var(--rb-line-strong);
  border-radius: var(--rb-r-lg);
  padding: var(--rb-gap) var(--rb-gap);
  box-shadow: var(--rb-shadow);
  overflow: hidden;
}
.rb-estratto__testata {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--rb-font-display);
  font-weight: 700;
  font-size: var(--rb-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rb-navy);
  border-bottom: 2px solid var(--rb-navy);
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
}
.rb-estratto__data { color: var(--rb-muted-on-light); letter-spacing: 0.04em; }

/* ------------------------------------------------------------------
   1f. HERO STATICO (2026-09: tablet a scorrimento eliminato da Zoran).
   L'hero della home torna alto come tutti gli altri: niente corsa di
   scroll, niente raddrizzamento. Il ventaglio di carte resta, fermo.
   ------------------------------------------------------------------ */
.rb-hero--registro {
  min-height: 46.5rem;          /* l'altezza comune di tutti gli hero */
  align-items: center;
}
@media (max-width: 980px) { .rb-hero--registro { min-height: 34rem; } }

/* ------------------------------------------------------------------
   1b. VENTAGLIO DI CARTE (sostituisce l'estratto conto nell'hero)
   Tre carte ufficiali (Business, People UNDER-35, People OVER-35) impilate:
   la Business davanti al centro, le People dietro. Al caricamento le due
   People SCORRONO orizzontalmente fino a spuntare per il 60% della larghezza
   della carta frontale. Nessuna rotazione: la posa delle immagini e' la
   stessa, il movimento e' solo translateX.
   -------------------------------------------------------------------------- */
.rb-ventaglio {
  position: relative;
  /* Il ventaglio OCCUPA una larghezza maggiore della frontale: le due dietro
     sporgono per il 60% di essa. La frontale e' larga il 55% del contenitore:
     le due sporgenze (60% di 55% = 33% per lato) stanno dentro il resto. */
  width: 100%;
  max-width: 40rem;
  aspect-ratio: 2048 / 1360;   /* ratio delle carte Higgsfield (1.506) */
  margin-inline: auto;
}
/* La carta frontale e' larga il 55% del ventaglio e sta al centro: il resto
   e' lo spazio in cui le due People spuntano. */
.rb-ventaglio__carta {
  position: absolute;
  top: 0;
  left: 50%;
  width: 55%;
  height: auto;
  transform: translateX(-50%);
  filter: drop-shadow(0 24px 44px rgb(24 49 83 / 0.28));
  will-change: transform;
}
/* Ordine di impilatura: Business davanti (z 3), OVER-35 in mezzo (z 2),
   UNDER-35 dietro (z 1). Gli offset di arrivo: ognuna spunta per il 60%
   della larghezza, sfalsata dalla precedente. */
.rb-ventaglio__carta--fronte { z-index: 3; }
.rb-ventaglio__carta--media  { z-index: 2; }
.rb-ventaglio__carta--dietro { z-index: 1; }

/* Stati iniziali: le due dietro nascondono TUTTO dietro la frontale
   (translateX(-50%) + offset pieno verso l'interno), poi scorrono in vista. */
.rb-hero--registro.is-ready .rb-ventaglio__carta--media {
  animation: rb-ventaglio-media 900ms var(--rb-ease-soft) 320ms both;
}
.rb-hero--registro.is-ready .rb-ventaglio__carta--dietro {
  animation: rb-ventaglio-dietro 900ms var(--rb-ease-soft) 480ms both;
}
/* Il movimento conta in % della LARGHEZZA DELLA CARTA (55% del ventaglio).
   La frontale sta al centro: -50%. Per far spuntare una carta per il 60%,
   la sporgenza e' 60% del width della carta = 60 (in % carta): il centro va
   a -50% - 60% = -110% (a sinistra) e -50% + 60% = +10% (a destra). */
@keyframes rb-ventaglio-media {
  from { transform: translateX(-50%); }
  to   { transform: translateX(-110%); }
}
@keyframes rb-ventaglio-dietro {
  from { transform: translateX(-50%); }
  to   { transform: translateX(10%); }
}

@media (prefers-reduced-motion: reduce) {
  .rb-hero--registro.is-ready .rb-ventaglio__carta--media,
  .rb-hero--registro.is-ready .rb-ventaglio__carta--dietro {
    animation: none;
  }
  .rb-hero--registro.is-ready .rb-ventaglio__carta--media { transform: translateX(-110%); }
  .rb-hero--registro.is-ready .rb-ventaglio__carta--dietro { transform: translateX(10%); }
}

/* Sotto 900px il ventaglio restringe ma resta in proporzione. */

/* --------------------------------------------------------------------------
   1c. I DUE DISPOSITIVI (dal 09/09/2026 al posto del ventaglio nell'eroe)
   Tablet come base, telefono davanti a destra, tutti e due scontornati su
   fondo trasparente: niente riquadro, niente fondo colorato, e l'ombra la
   mette il CSS con drop-shadow, che segue la sagoma e non il rettangolo.
   Le misure sono in percentuale del contenitore, cosi' la composizione non
   si scompone a nessuna larghezza.
   -------------------------------------------------------------------------- */
.rb-dispositivi {
  position: relative;
  width: 100%;
  max-width: 42rem;
  margin-inline: auto;
  /* il rapporto del tablet, piu' l'aria in cui il telefono sporge in basso.
     Il tablet ricostruito con la profondita' vera (1400x1185) e' piu' alto in
     proporzione del mockup piatto che stava qui prima: l'aria sotto resta la
     stessa, 128 su 1600 di larghezza, cosi' il telefono sporge come prima. */
  aspect-ratio: 1600 / 1482;
}
.rb-dispositivi__tablet {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 26px 46px rgb(24 49 83 / 0.26));
}
.rb-dispositivi__telefono {
  position: absolute;
  right: -1%;
  bottom: 0;
  width: 25%;
  height: auto;
  z-index: 2;
  filter: drop-shadow(0 18px 32px rgb(24 49 83 / 0.30));
}

/* Entrata: il telefono arriva da sotto, un attimo dopo il tablet. Stesso
   meccanismo del ventaglio (classe .is-ready sull'eroe), stessa curva. */
.rb-hero--registro.is-ready .rb-dispositivi__telefono {
  animation: rb-dispositivi-telefono 900ms var(--rb-ease-soft) 320ms both;
}
@keyframes rb-dispositivi-telefono {
  from { transform: translateY(12%); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .rb-hero--registro.is-ready .rb-dispositivi__telefono {
    animation: none;
    transform: none;
    opacity: 1;
  }
}

/* Sul telefono la composizione resta la stessa, solo piu' piccola: il
   dispositivo davanti cresce un poco in proporzione, altrimenti sotto i
   400px non si legge piu' niente di quello che ha sullo schermo. */
@media (max-width: 620px) {
  .rb-dispositivi { max-width: 26rem; }
  .rb-dispositivi__telefono { width: 29%; right: -2%; }
}


/* --------------------------------------------------------------------------
   2. HAIRLINE come firma del .eu
   Divisore di sezione a tutta larghezza: filetto navy + numero di sezione
   in Overpass 700 tabular. Firma che il .com non ha.
   -------------------------------------------------------------------------- */
.rb-sezione-linea {
  border-top: 2px solid var(--rb-navy);
  padding-top: var(--rb-gap-sm);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--rb-font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: var(--rb-small);
  color: var(--rb-navy);
}
.rb-sezione-linea__n { font-size: 1.5rem; }

/* --------------------------------------------------------------------------
   3. BENTO con gerarchia di forma
   Tre profondita' al posto di un raggio solo. Le celle dati (numeri) non
   hanno ombra: hanno il bordo. Le classi si aggiungono al markup esistente.
   -------------------------------------------------------------------------- */
.rb-bento__cella--protagonista {
  border-radius: var(--rb-r-xl);
  padding: clamp(2rem, 1.4rem + 2vw, 3rem);
}
.rb-bento__cella--dati {
  border-radius: var(--rb-r-sm);
  border: 1px solid var(--rb-line-strong);
  box-shadow: none;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   4. NUMERI come tipografia
   Overpass 700 tabular: il numero e' l'elemento grafico, non la pill attorno.
   -------------------------------------------------------------------------- */
.rb-numero {
  font-family: var(--rb-font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.5rem, 1.6rem + 3.9vw, 4.6875rem);  /* stessa scala dell'h1 */
  line-height: var(--rb-lh-tight);
  color: var(--rb-ink);
  letter-spacing: -0.01em;
}
.rb-numero__etichetta {
  display: block;
  font-family: var(--rb-font-text);
  font-weight: 400;
  font-size: var(--rb-small);
  color: var(--rb-muted);
  margin-top: 0.25rem;
}

/* --------------------------------------------------------------------------
   5. UN SOLO MOMENTO ORCHESTRATO
   Al caricamento: titolo -> estratto conto -> righe che si accendono.
   Le entrate fade-up sparse (data-reveal con slide-up) diventano fade discreto.
   -------------------------------------------------------------------------- */
.rb-hero--registro.is-ready .rb-scrollframe__lead {
  animation: rb-registro-titolo 620ms var(--rb-ease-soft) both;
}
.rb-hero--registro.is-ready .rb-estratto {
  animation: rb-registro-foglio 620ms var(--rb-ease-soft) 180ms both;
}
@keyframes rb-registro-titolo {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes rb-registro-foglio {
  from { opacity: 0; transform: translate3d(24px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Le altre sezioni: solo fade, niente slide-up, senza durata lunghe. */
.rb-fx[data-reveal] { transition: opacity var(--rb-t) var(--rb-ease); }
@media (prefers-reduced-motion: reduce) {
  .rb-hero--registro.is-ready .rb-scrollframe__lead,
  .rb-hero--registro.is-ready .rb-estratto { animation: none; }
}

/* --------------------------------------------------------------------------
   6. RESPONSIVE
   Sotto 900px le due colonne tornano una sopra l'altra: messaggio prima,
   estratto conto dopo, come oggi, ma con l'allineamento a sinistra.
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
  .rb-hero--registro .rb-container {
    grid-template-columns: 1fr;
    row-gap: var(--rb-gap-lg);
  }
  .rb-hero--registro .rb-scrollframe__lead,
  .rb-hero--registro .rb-hero__lede { max-width: none; }
}
/* ------------------------------------------------------------------
   1g. NOTA CARD (2026-09, Zoran: via la riga arancione delle card).
   Il numero e la didascalia di .rb-card__stat finiscono nel testo
   della card come nota normale: niente bordo arancione, niente cifra
   grande. Restano titolo, testo e icona sullo sfondo.
   ------------------------------------------------------------------ */
.rb-card__note {
  margin: 0;
  padding-top: 0.75rem;
  font-family: var(--rb-font-text);
  font-size: var(--rb-small);
  line-height: var(--rb-lh-body);
  color: var(--rb-muted);
  align-self: flex-start;
}
.rb-card__note b {
  font-weight: 600;
  color: var(--rb-navy);
  font-variant-numeric: tabular-nums;
}
.rb-theme-dark .rb-card__note b,
.rb-section--dark .rb-card__note b { color: #fff; }


/* ------------------------------------------------------------------
   1h. PAGINE LEGALI (2026-09-09). Le quattro pagine di servizio —
   privacy, cookie, terms, complaints — sono una famiglia sola e prima
   non si somigliavano: due misure di lettura diverse, un eroe alto
   come quello della home su pagine senza figura, e l'indice appoggiato
   sulla classe dell'accordion, che non ha ne' bordo ne' sfondo.
   ------------------------------------------------------------------ */

/* L'eroe legale e' piu' basso: su una pagina che si apre per arrivare a
   un documento, mezzo schermo di gradiente vuoto e' solo attrito. */
/* Corpo dei documenti legali — privacy, cookie, terms, complaints.
   Zoran, 09/09/2026: la larghezza resta quella del sito, 1200px
   (--rb-container), non i 760 di --narrow. Il respiro si prende sul ritmo
   verticale, non stringendo la colonna: interlinea piu' alta, perche' con la
   riga lunga e' l'interlinea a tenere l'occhio sulla riga giusta, e uno
   stacco vero sopra ogni titolo. Il padding-top sul titolo, e non un margin,
   serve due volte: fa lo spazio e tiene il titolo sotto l'header quando ci
   si arriva da un'ancora dell'indice. */
.rb-prosa {
  line-height: 1.75;
  /* La misura di lettura. Il contenitore resta a 1200px — card, indice e
     card documento lo occupano tutto — ma il testo corrente si ferma qui.
     Per togliere il limite basta portare --rb-misura a `none`. */
  --rb-misura: 85ch;
}
.rb-prosa > p,
.rb-prosa > ul,
.rb-prosa > ol,
.rb-prosa > h2,
.rb-prosa > h3 { max-inline-size: var(--rb-misura); }

.rb-prosa > h2 {
  padding-top: clamp(3rem, 2rem + 2.6vw, 4.75rem);
  margin-bottom: 1.15rem;
  scroll-margin-top: 6rem;
}
/* Il primo titolo viene subito dopo l'indice, che ha gia' il suo margine. */
.rb-prosa > h2:first-child,
.rb-prosa > .rb-toc + h2 { padding-top: 0.5rem; }

.rb-prosa > h3 {
  padding-top: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem);
  margin-bottom: 0.75rem;
  scroll-margin-top: 6rem;
}

.rb-prosa > p,
.rb-prosa > ul,
.rb-prosa > ol { margin-bottom: 1.4em; }
.rb-prosa > ul,
.rb-prosa > ol { padding-left: 1.4em; }
.rb-prosa li { margin-bottom: 0.7em; }
.rb-prosa .rb-checks { gap: 1.1rem; }
.rb-prosa .rb-checks li { line-height: 1.7; }

/* Le card dentro il testo (titolare del trattamento, contatti, documenti)
   sono blocchi, non paragrafi: staccano piu' dei paragrafi da entrambi i lati. */
.rb-prosa > .rb-card { margin-block: 2rem 2.25rem; }
.rb-prosa > .rb-acc { margin-block: 1.75rem 2.25rem; }

@media (max-width: 620px) {
  .rb-prosa > h2 { padding-top: 2.5rem; }
  .rb-prosa > h3 { padding-top: 1.5rem; }
}

.rb-hero--legale { min-height: 28rem; }
@media (max-width: 980px) { .rb-hero--legale { min-height: 22rem; } }

/* La data di ultima revisione, sotto il titolo dell'eroe: senza, il
   lettore non sa quale versione sta leggendo. */
.rb-hero__data {
  margin: 1rem 0 0;
  font-size: var(--rb-small);
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.72);
}

/* Indice della pagina. Prima era un <nav class="rb-acc">: .rb-acc e' solo
   `display:grid; gap`, bordo e sfondo stanno su .rb-acc__item, che li' non
   c'era — l'indice usciva come un paragrafo spaiato con del padding. */
.rb-toc {
  border: 1px solid var(--rb-line);
  border-radius: var(--rb-r);
  background: var(--rb-surface-alt);
  padding: 1rem 1.25rem;
  margin-bottom: var(--rb-gap-lg, 2rem);
  font-size: var(--rb-small);
  line-height: 1.9;
}
.rb-toc p { margin: 0; }
.rb-toc strong { display: block; margin-bottom: 0.25rem; color: var(--rb-navy); }

/* Card documento su terms: tre colonne (titolo | descrizione | bottone).
   La regola stava su `:has(.rb-terms__testo)`, cioe' sceglieva la card in
   base a cosa c'era dentro; adesso la sceglie per il ruolo che ha. Padding
   verticale ridotto: cinque voci da una riga non valgono 218px l'una. */
.rb-card--doc {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr) auto;
  align-items: center;
  column-gap: var(--rb-gap-lg, 2rem);
  padding-block: 1.25rem;
  margin-bottom: 1rem;
}
.rb-card--doc .rb-terms__titolo h3 { margin: 0; }
.rb-card--doc .rb-terms__testo p { margin: 0; }
.rb-card--doc .rb-terms__azione { justify-self: end; }
.rb-card--doc .rb-terms__meta {
  display: block;
  margin-top: 0.35rem;
  font-size: var(--rb-small);
  color: var(--rb-muted);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 800px) {
  .rb-card--doc { grid-template-columns: 1fr; row-gap: 1rem; }
  .rb-card--doc .rb-terms__azione { justify-self: start; }
}

/* ------------------------------------------------------------------
   1i. HERO VIDEO (cards.html, 2026-09: cascata di carte).
   Semplice: il video riempie la sezione in ALTEZZA, larghezza naturale,
   senza stirature (era questo lo sgranato). Lo sfondo ai lati e' navy.
   Velo blu PIENO a tutta sezione (3s → 4,2s). I contenuti partono
   quando il velo e' pieno.
   ------------------------------------------------------------------ */
.rb-hero--video {
  overflow: hidden;
  /* OBBLIGATORIO. Il video sta a z-index -2 e il velo a -1: senza un
     contesto di impilamento qui, i figli con z-index negativo finiscono
     dietro il fondo bianco della sezione e la pagina diventa un muro
     bianco, testo compreso (il testo e' bianco e il velo navy che lo
     staccava e' sepolto anche lui). Regola gia' persa una volta in una
     riscrittura di questo blocco: non toglierla. */
  isolation: isolate;
}
/* Fondo bianco: coincide con quello del video, cosi' anche se il video
   tarda a caricarsi la sezione non e' un muro blu. */
.rb-hero--video.rb-hero--dark { background-image: none; background-color: #ffffff; }
.rb-hero__video {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  height: 600px;
  width: auto;
  max-width: none;
  object-fit: contain;
  z-index: -2;
}
.rb-hero--video .rb-hero__video { animation: rb-video-zoom 4s var(--rb-ease-soft, ease) 6s forwards; }
@keyframes rb-video-zoom {
  from { transform: translate(-50%, -50%) scale(1); }
  to   { transform: translate(-50%, -50%) scale(1.06); }
}

/* Velo PIENO a tutta sezione: stesso colore pieno ovunque, nessuna
   sfumatura laterale. Compaiono insieme al 6° secondo. */
.rb-hero__velo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(24, 49, 83, 1);
  opacity: 0;
  transition: opacity 1.2s var(--rb-ease-soft, ease) 3s;
}
.rb-hero--velo-on .rb-hero__velo { opacity: 1; }

/* Sotto gli 800px il velo laterale non basta: la colonna del testo e' larga
   quanto la sezione, quindi la meta' destra delle righe finisce sul video
   nudo (il gradiente e' gia' trasparente al 62%). Misurato sull'ultimo
   fotogramma, il contrasto del testo bianco li' scende a 4,9:1, cioe' AA
   appena passato e solo per quel fotogramma: un'altra carta chiara sotto e
   il testo diventa illeggibile. Su schermo stretto il velo copre tutto.
   Il video resta comunque tagliato (1170px in una finestra da 375).
   La soglia e' 980px e non un numero scelto a caso: e' la stessa di
   `.rb-hero__grid` in effects.css, dove la griglia passa a una colonna
   sola e il testo si prende tutta la larghezza. Se quella cambia, cambia
   anche questa. */
/* Il velo e' a tutta sezione a ogni larghezza: nessuna variante mobile. */

/* Contenuti: ritardo fisso, piu' lungo della salita del velo (3s+1,2s),
   cosi' escono DOPO il velo pieno. */
.rb-hero--attesa .rb-hero__grid {
  opacity: 0;
  animation: rb-hero-contenuti 1.2s var(--rb-ease-soft, ease) 6s forwards;
}
/* Stessa animazione del velo: solo dissolvenza, stesso ritmo. */
@keyframes rb-hero-contenuti {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .rb-hero__video { animation: none; }
  .rb-hero__velo { transition: none; opacity: 1; }
  .rb-hero--attesa .rb-hero__grid { animation: none; opacity: 1; }
}