/* rde.css · Design system Romana Dell'Erba
Una sola libreria per sito, stage, landing e materiali web. Tutte le classi hanno il prefisso rde-.
Fonte: brandbook del 12/01/2026 (logo, palette, caratteri) e mockup #facciamoallaromana.
Un solo tema, chiaro. Il colore lo decide la superficie: ogni rde-surface--* imposta i token
di contesto (--rde-bg, --rde-fg, --rde-accent, --rde-hl...) e i componenti li leggono da lì.
Regole del brand: teal primario; giallo per evidenziare; titoli principali in Sans Plomb Condensed
maiuscolo; tutto il resto in Balto; effetto slant a 10 gradi solo su titoli display e pulsanti. */
@font-face{font-family:"Sans Plomb Condensed";src:url("fonts/SansPlomb-CondensedMedium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Sans Plomb Condensed";src:url("fonts/SansPlomb-CondensedBold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Balto";src:url("fonts/Balto-Book.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Balto";src:url("fonts/Balto-BookItalic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Balto";src:url("fonts/Balto-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Balto";src:url("fonts/Balto-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Balto";src:url("fonts/Balto-BoldItalic.woff2") format("woff2");font-weight:700;font-style:italic;font-display:swap}
/* ───────────── Token ───────────── */
:root{
/* Primaria (brandbook pag. 14): teal con la sua scala, antracite, bianco */
--rde-teal:#009cac;
--rde-teal-90:#1aa6b4;--rde-teal-80:#33b0bd;--rde-teal-70:#4dbac5;--rde-teal-60:#66c4cd;--rde-teal-50:#80ced6;
--rde-teal-40:#99d7de;--rde-teal-30:#b3e1e6;--rde-teal-20:#ccebee;--rde-teal-10:#e6f5f7;
--rde-teal-ink:#007a87; /* teal scurito: testo teal su fondo chiaro, pulsante pieno, hover. Unico colore aggiunto al brandbook, per la leggibilità */
--rde-antracite:#2a2a2a;
--rde-bianco:#ffffff;
/* Secondaria e accenti (brandbook pag. 15) */
--rde-salvia:#73b397;--rde-salvia-20:#e3f0ea;--rde-salvia-ink:#2f6b52;
--rde-lavanda:#b5a4d0;--rde-lavanda-20:#f0edf6;--rde-lavanda-ink:#5b4a80;
--rde-giallo:#fdc400;--rde-giallo-20:#fff3cc;
--rde-btn-on-giallo:var(--rde-bianco); /* testo dei pulsanti sul giallo: bianco come nel mockup e sul sito attuale (scelta di Enzo, 13/11/2026). Contrasto 1,6:1 */
--rde-corallo:#eb5d69;--rde-corallo-20:#fbdfe1;--rde-corallo-ink:#b0303d;
/* Scala di grigi (brandbook pag. 15) */
--rde-grigio-1:#404040;--rde-grigio-2:#666666;--rde-grigio-3:#999999;--rde-grigio-4:#cccccc;--rde-grigio-5:#f2f2f2;
/* Sfumato del brand (applicazioni, pag. 17): lavanda, teal in basso a sinistra, salvia in basso a destra */
--rde-sfumato:radial-gradient(90% 110% at 0% 100%,var(--rde-teal) 0%,rgba(0,156,172,0) 60%),radial-gradient(80% 100% at 100% 100%,var(--rde-salvia) 0%,rgba(115,179,151,0) 62%),linear-gradient(135deg,var(--rde-teal-50) 0%,var(--rde-lavanda) 48%,var(--rde-lavanda) 100%);
/* Token di contesto: valgono per il fondo bianco e vengono riscritti da ogni superficie */
--rde-bg:var(--rde-bianco);
--rde-fg:var(--rde-antracite);
--rde-fg-2:var(--rde-grigio-2);
--rde-fg-3:var(--rde-grigio-3);
--rde-accent:var(--rde-teal-ink); /* eyebrow, link, segni */
--rde-hl:var(--rde-teal); /* parola evidenziata nei titoli */
--rde-line:var(--rde-grigio-4);
--rde-line-strong:var(--rde-grigio-2);
--rde-ghost:rgba(0,156,172,.12); /* numero gigante */
--rde-focus:var(--rde-teal-ink);
--rde-errore:var(--rde-corallo-ink);
--rde-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%232a2a2a' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
/* Caratteri */
--rde-titoli:"Sans Plomb Condensed","Arial Narrow","Helvetica Neue",Arial,sans-serif;
--rde-testo:"Balto","Helvetica Neue",Arial,sans-serif;
/* Compenso delle maiuscole: in Balto il centro delle maiuscole sta 0,0475em sopra il centro della riga.
Nei riquadri col testo tutto maiuscolo (pulsanti, badge, nastro) si aggiunge il doppio sopra, così la scritta è centrata. */
--rde-cap:.095em;
/* Slant: inclinazione 10° + rotazione 10° del brandbook = uno scorrimento verticale di -10° */
--rde-slant:-10deg;
/* Raggi: card 16, riquadri piccoli 10, spunte 8. Pulsanti e campi restano a spigolo vivo */
--rde-r-sm:8px;--rde-r-md:10px;--rde-r-lg:16px;--rde-r-xl:24px;--rde-r-full:999px;
/* Ombra piena spostata: l'unica ombra del brand */
--rde-ombra-x:8px;--rde-ombra-y:8px;
/* Misure */
--rde-gutter:clamp(20px,5vw,48px);
--rde-container:1120px;
--rde-sezione:clamp(56px,8vw,112px);
--rde-ease:cubic-bezier(.2,.7,.2,1);
--rde-fast:.16s;
}
/* ───────────── Base e superfici ───────────── */
:where([class^="rde-"],[class*=" rde-"]),:where([class^="rde-"],[class*=" rde-"])::before,:where([class^="rde-"],[class*=" rde-"])::after{box-sizing:border-box}
.rde-base{margin:0;background:var(--rde-bg);color:var(--rde-fg);font:400 1.0625rem/1.55 var(--rde-testo);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
.rde-base img{max-width:100%;height:auto}
.rde-surface{background:var(--rde-bg);color:var(--rde-fg)}
.rde-surface--bianco,.rde-surface--chiaro,.rde-surface--grigio,.rde-surface--giallo{
--rde-fg:var(--rde-antracite);--rde-fg-2:var(--rde-grigio-2);--rde-fg-3:var(--rde-grigio-3);--rde-accent:var(--rde-teal-ink);--rde-hl:var(--rde-teal);
--rde-line:var(--rde-grigio-4);--rde-line-strong:var(--rde-grigio-2);--rde-ghost:rgba(0,156,172,.12);--rde-focus:var(--rde-teal-ink);--rde-errore:var(--rde-corallo-ink);
--rde-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%232a2a2a' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E")}
.rde-surface--bianco{--rde-bg:var(--rde-bianco)}
.rde-surface--chiaro{--rde-bg:var(--rde-teal-10)}
.rde-surface--grigio{--rde-bg:var(--rde-grigio-5)}
.rde-surface--giallo{--rde-bg:var(--rde-giallo);--rde-accent:var(--rde-antracite);--rde-hl:var(--rde-bianco);--rde-line:rgba(42,42,42,.3);--rde-line-strong:var(--rde-antracite);--rde-ghost:rgba(42,42,42,.1);--rde-focus:var(--rde-antracite)}
.rde-surface--teal,.rde-surface--scuro,.rde-surface--salvia,.rde-surface--lavanda,.rde-surface--sfumato{
--rde-fg:var(--rde-bianco);--rde-fg-2:rgba(255,255,255,.9);--rde-fg-3:rgba(255,255,255,.66);--rde-accent:var(--rde-giallo);--rde-hl:var(--rde-giallo);
--rde-line:rgba(255,255,255,.42);--rde-line-strong:var(--rde-bianco);--rde-ghost:rgba(255,255,255,.12);--rde-focus:var(--rde-bianco);--rde-errore:var(--rde-giallo);
--rde-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E")}
.rde-surface--teal{--rde-bg:var(--rde-teal)}
.rde-surface--scuro{--rde-bg:var(--rde-antracite)}
.rde-surface--salvia{--rde-bg:var(--rde-salvia)}
.rde-surface--lavanda{--rde-bg:var(--rde-lavanda)}
.rde-surface--sfumato{--rde-bg:var(--rde-lavanda);background:var(--rde-sfumato)}
/* Foto scurita in teal (la fascia "La mia promessa"): la foto si passa con style="--rde-foto:url(...)" */
.rde-surface--foto{--rde-bg:#12393d;--rde-fg:var(--rde-bianco);--rde-fg-2:rgba(255,255,255,.9);--rde-fg-3:rgba(255,255,255,.66);--rde-accent:var(--rde-giallo);--rde-hl:var(--rde-giallo);--rde-line:rgba(255,255,255,.42);--rde-line-strong:var(--rde-bianco);--rde-ghost:rgba(255,255,255,.12);--rde-focus:var(--rde-bianco);--rde-errore:var(--rde-giallo);background:linear-gradient(rgba(18,57,61,.86),rgba(18,57,61,.86)),var(--rde-foto,none) center/cover no-repeat var(--rde-bg)}
/* ───────────── Impaginazione ───────────── */
.rde-container{width:min(var(--rde-container),100% - 2*var(--rde-gutter));margin-inline:auto}
.rde-container--stretto{--rde-container:760px}
.rde-container--largo{--rde-container:1320px}
.rde-section{padding-block:var(--rde-sezione)}
.rde-section--sm{padding-block:calc(var(--rde-sezione)*.55)}
.rde-stack{display:flex;flex-direction:column;gap:var(--gap,16px)}
.rde-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--gap,16px)}
.rde-grid{display:grid;gap:var(--gap,24px);grid-template-columns:repeat(var(--cols,1),minmax(0,1fr))}
.rde-center{text-align:center}
.rde-center.rde-stack{align-items:center}
@media (min-width:640px){.rde-grid--2,.rde-grid--3,.rde-grid--4{--cols:2}}
@media (min-width:960px){.rde-grid--3{--cols:3}.rde-grid--4{--cols:4}}
.rde-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* ───────────── Tipografia ───────────── */
/* Display e H1: Sans Plomb Condensed, maiuscolo, tracking 30 (0,03em). Mai in minuscolo. */
.rde-display,.rde-h1{margin:0;font-family:var(--rde-titoli);font-weight:700;text-transform:uppercase;letter-spacing:.03em;line-height:.96;color:var(--rde-fg);text-wrap:balance}
.rde-display{font-size:clamp(3.25rem,8.5vw,6.5rem)}
.rde-h1{font-size:clamp(2.5rem,6vw,4.375rem)}
/* H2 Balto Bold, H3 Balto Medium, H4 Balto Bold: tracking 0 */
.rde-h2,.rde-h3,.rde-h4{margin:0;font-family:var(--rde-testo);color:var(--rde-fg);text-wrap:balance}
.rde-h2{font-weight:700;font-size:clamp(1.75rem,3.4vw,2.5rem);line-height:1.12}
.rde-h3{font-weight:500;font-size:clamp(1.375rem,2.4vw,1.875rem);line-height:1.2}
.rde-h4{font-weight:700;font-size:1.25rem;line-height:1.25}
/* Titolo di card: Sans Plomb. --lg per i titoli brevi in minuscolo ("Al tavolo") */
.rde-titolo{margin:0;font:500 1.375rem/1.1 var(--rde-titoli);text-transform:uppercase;letter-spacing:.03em;color:var(--rde-fg)}
.rde-titolo--lg{font-size:clamp(1.75rem,3vw,2.25rem);text-transform:none;letter-spacing:.01em}
/* Testo: Balto Book */
.rde-text{margin:0;font:400 1.0625rem/1.55 var(--rde-testo);color:var(--rde-fg-2);text-wrap:pretty}
.rde-text--lg{font-size:1.25rem;line-height:1.5}
.rde-text--sm{font-size:.9375rem;line-height:1.5}
.rde-text strong,.rde-text b{font-weight:700;color:var(--rde-fg)}
.rde-caption{margin:0;font:400 .8125rem/1.4 var(--rde-testo);color:var(--rde-fg-2)}
.rde-fg{color:var(--rde-fg)}.rde-muted{color:var(--rde-fg-2)}
.rde-link{color:var(--rde-accent);font-weight:500;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.18em;transition:color var(--rde-fast) var(--rde-ease)}
.rde-link:hover{color:var(--rde-fg)}
.rde-prose>*+*{margin-top:1em}
.rde-prose>:is(.rde-h2,.rde-h3,.rde-h4){margin-top:1.6em}
/* Eyebrow: Balto Medium maiuscolo sopra i titoli. Prende l'accento della superficie (teal scuro sul chiaro, giallo sul teal) */
.rde-eyebrow{margin:0;font:500 .9375rem/1.25 var(--rde-testo);text-transform:uppercase;letter-spacing:.04em;color:var(--rde-accent)}
.rde-eyebrow--sm{font-size:.75rem;font-weight:700;letter-spacing:.08em}
.rde-eyebrow--giallo{color:var(--rde-giallo)}
.rde-eyebrow--corallo{color:var(--rde-corallo-ink)}
.rde-eyebrow--bianco{color:var(--rde-bianco)}
.rde-eyebrow--punto::before{content:"";display:inline-block;width:.45em;height:.45em;margin-right:.6em;border-radius:50%;background:currentColor;vertical-align:.12em}
/* Evidenziazione: una o due parole di un titolo nel colore d'accento. --box = riquadro giallo */
.rde-hl{background:none;color:var(--rde-hl);font-style:inherit}
.rde-hl--teal{color:var(--rde-teal)}
.rde-hl--giallo{color:var(--rde-giallo)}
.rde-hl--bianco{color:var(--rde-bianco)}
.rde-hl--box{padding:.02em .2em .06em;background:var(--rde-giallo);color:var(--rde-antracite);-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* Slant: il blocco sale verso destra di 10°, le aste restano verticali. Solo display, hashtag e pulsanti.
Il blocco sale di circa il 18% della sua larghezza: lasciare quello spazio sopra (--rde-slant-su). */
.rde-slant{display:inline-block;transform:skewY(var(--rde-slant));transform-origin:0 100%;margin-top:var(--rde-slant-su,0)}
.rde-slant--centro{transform-origin:50% 50%}
/* ───────────── Pulsante ───────────── */
/* Spigolo vivo, Balto Medium maiuscolo tracciato. Di base a contorno: prende il colore del testo della superficie.
48px (base), 40 (--sm), 56 (--lg). --slant per le call to action dell'hero.
Al passaggio del mouse un riempimento entra da sinistra in 0,3s (come sul sito attuale): giallo sui pulsanti
a contorno e bianchi, antracite su quelli già pieni. Colori del riempimento: --rde-btn-fill, -fg, -bd. */
.rde-btn{display:inline-flex;align-items:center;justify-content:center;gap:.65em;min-height:48px;--rde-btn-px:28px;padding:var(--rde-cap) var(--rde-btn-px) 0 calc(var(--rde-btn-px) + .12em);border:1.5px solid var(--rde-fg);border-radius:0;background:transparent;color:var(--rde-fg);font:500 .9375rem/1 var(--rde-testo);text-transform:uppercase;letter-spacing:.12em;text-decoration:none;white-space:nowrap;cursor:pointer;-webkit-appearance:none;appearance:none;position:relative;overflow:hidden;isolation:isolate;--rde-btn-fill:var(--rde-giallo);--rde-btn-fill-fg:var(--rde-btn-on-giallo);--rde-btn-fill-bd:var(--rde-giallo);transition:color .3s var(--rde-ease),border-color .3s var(--rde-ease),translate var(--rde-fast) var(--rde-ease)}
.rde-btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--rde-btn-fill);transform:translateX(-101%);transition:transform .3s var(--rde-ease)}
.rde-btn:hover::before,.rde-btn:focus-visible::before{transform:translateX(0)}
.rde-btn:hover,.rde-btn:focus-visible{border-color:var(--rde-btn-fill-bd);color:var(--rde-btn-fill-fg)}
.rde-btn:focus-visible{outline:2px solid var(--rde-focus);outline-offset:3px}
.rde-btn:active{translate:0 1px}
.rde-btn[disabled],.rde-btn[aria-disabled=true]{opacity:.45;pointer-events:none}
.rde-btn svg{width:1.15em;height:1.15em;flex:none}
.rde-btn--giallo{--rde-btn-fill:var(--rde-antracite);--rde-btn-fill-fg:var(--rde-bianco);--rde-btn-fill-bd:var(--rde-antracite);border-color:var(--rde-giallo);background:var(--rde-giallo);color:var(--rde-btn-on-giallo)}
.rde-btn--teal{--rde-btn-fill:var(--rde-antracite);--rde-btn-fill-fg:var(--rde-bianco);--rde-btn-fill-bd:var(--rde-antracite);border-color:var(--rde-teal-ink);background:var(--rde-teal-ink);color:var(--rde-bianco)}
.rde-btn--bianco{border-color:var(--rde-bianco);background:var(--rde-bianco);color:var(--rde-teal-ink)}
.rde-btn--testo{--rde-btn-fill-fg:var(--rde-fg);--rde-btn-fill-bd:currentColor;min-height:0;padding:0 0 4px;border:0;border-bottom:1.5px solid currentColor;color:var(--rde-accent);letter-spacing:.08em;overflow:visible}
.rde-btn--testo::before{content:none}
.rde-btn--sm{min-height:40px;--rde-btn-px:20px;font-size:.8125rem}
.rde-btn--lg{min-height:56px;--rde-btn-px:36px;font-size:1rem}
.rde-btn--block{display:flex;width:100%}
.rde-btn--slant{transform:skewY(var(--rde-slant))}
.rde-btn--testo.rde-btn--sm,.rde-btn--testo.rde-btn--lg{min-height:0;padding:0 0 4px}
/* ───────────── Pulsanti flottanti ───────────── */
/* I pulsanti fissi ai bordi dello schermo (informazioni, accessibilità, cookie, torna su): tutti uguali.
Cerchio da 48px, fondo bianco con anello teal e icona teal scuro; al passaggio si riempie di teal scuro.
--giallo per quello che invita a fare qualcosa (uno solo per pagina). Icone: 24px, tratto 2px, dalla libreria.
Il nome (aria-label) compare accanto al passaggio del mouse e col fuoco da tastiera.
rde-fab-gruppo li impila in un angolo: --sx in basso a sinistra, --dx in basso a destra. */
.rde-fab{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:var(--rde-bianco);color:var(--rde-teal-ink);box-shadow:inset 0 0 0 2px var(--rde-teal);text-decoration:none;cursor:pointer;-webkit-appearance:none;appearance:none;transition:background-color .2s var(--rde-ease),color .2s var(--rde-ease),box-shadow .2s var(--rde-ease),translate var(--rde-fast) var(--rde-ease)}
.rde-fab svg{width:24px;height:24px}
.rde-fab:hover,.rde-fab:focus-visible{background:var(--rde-teal-ink);color:var(--rde-bianco);box-shadow:inset 0 0 0 2px var(--rde-teal-ink)}
.rde-fab:focus-visible{outline:2px solid var(--rde-teal-ink);outline-offset:3px}
.rde-fab:active{translate:0 1px}
.rde-fab--giallo{background:var(--rde-giallo);color:var(--rde-antracite);box-shadow:none}
.rde-fab--giallo:hover,.rde-fab--giallo:focus-visible{background:var(--rde-antracite);color:var(--rde-bianco);box-shadow:none}
.rde-fab::after{content:attr(aria-label);position:absolute;left:calc(100% + 10px);top:50%;translate:-6px -50%;padding:7px 10px;background:var(--rde-antracite);color:var(--rde-bianco);font:500 .75rem/1 var(--rde-testo);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s var(--rde-ease),translate .2s var(--rde-ease)}
.rde-fab:hover::after,.rde-fab:focus-visible::after{opacity:1;translate:0 -50%}
.rde-fab-gruppo{position:fixed;z-index:40;bottom:max(16px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px}
.rde-fab-gruppo--sx{left:max(16px,env(safe-area-inset-left))}
.rde-fab-gruppo--dx{right:max(16px,env(safe-area-inset-right))}
.rde-fab-gruppo--dx .rde-fab::after{left:auto;right:calc(100% + 10px);translate:6px -50%}
.rde-fab-gruppo--dx .rde-fab:hover::after,.rde-fab-gruppo--dx .rde-fab:focus-visible::after{translate:0 -50%}
@media (hover:none){.rde-fab::after{display:none}}
/* ───────────── Badge ───────────── */
.rde-badge{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:calc(3px + var(--rde-cap)) 11px 3px calc(11px + .06em);border-radius:var(--rde-r-full);background:var(--rde-teal-10);color:var(--rde-teal-ink);font:700 .75rem/1.2 var(--rde-testo);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.rde-badge--teal{background:var(--rde-teal-ink);color:var(--rde-bianco)}
.rde-badge--giallo{background:var(--rde-giallo);color:var(--rde-antracite)}
.rde-badge--salvia{background:var(--rde-salvia-20);color:var(--rde-salvia-ink)}
.rde-badge--lavanda{background:var(--rde-lavanda-20);color:var(--rde-lavanda-ink)}
.rde-badge--corallo{background:var(--rde-corallo-20);color:var(--rde-corallo-ink)}
.rde-badge--grigio{background:var(--rde-grigio-5);color:var(--rde-grigio-1)}
.rde-badge--contorno{background:transparent;color:var(--rde-fg);box-shadow:inset 0 0 0 1.5px var(--rde-line-strong)}
/* ───────────── Card ───────────── */
/* Di base bianca, raggio 16: riporta i token al fondo bianco anche dentro una sezione teal.
--contorno bordo teal · --piena teal · --tenue riquadro teal 10% · --trasparente (sulle sezioni piene) solo bordo.
Ombra piena spostata, gialla di base (--ombra-lavanda, --ombra-salvia, --ombra-corallo, --ombra-teal la colorano):
--ombra lo standard: il bordo prende il colore dell'ombra e l'ombra esce al passaggio del mouse
(e col fuoco da tastiera); sui dispositivi a tocco è sempre visibile
--ombra-fissa l'ombra è sempre visibile e il bordo resta quello della card
--bordo-colore solo il bordo colorato, senza ombra
Bordo e ombra sono variabili (--rde-card-bordo, --rde-card-bordo-w, --rde-card-ox, --rde-card-oy), così si combinano. */
.rde-card{
--rde-bg:var(--rde-bianco);--rde-fg:var(--rde-antracite);--rde-fg-2:var(--rde-grigio-2);--rde-fg-3:var(--rde-grigio-3);--rde-accent:var(--rde-teal-ink);--rde-hl:var(--rde-teal);
--rde-line:var(--rde-grigio-4);--rde-line-strong:var(--rde-grigio-2);--rde-ghost:rgba(0,156,172,.12);--rde-focus:var(--rde-teal-ink);
--rde-card-bordo:transparent;--rde-card-bordo-w:0px;--rde-card-ombra:var(--rde-giallo);--rde-card-ox:0px;--rde-card-oy:0px;
position:relative;display:flex;flex-direction:column;gap:12px;padding:clamp(20px,3vw,32px);border-radius:var(--rde-r-lg);background:var(--rde-bg);color:var(--rde-fg);
box-shadow:inset 0 0 0 var(--rde-card-bordo-w) var(--rde-card-bordo),var(--rde-card-ox) var(--rde-card-oy) 0 var(--rde-card-ombra);
transition:box-shadow .25s var(--rde-ease),translate .25s var(--rde-ease)}
.rde-card--contorno{--rde-card-bordo:var(--rde-teal);--rde-card-bordo-w:2px}
.rde-card--piena{--rde-bg:var(--rde-teal);--rde-fg:var(--rde-bianco);--rde-fg-2:rgba(255,255,255,.92);--rde-accent:var(--rde-giallo);--rde-hl:var(--rde-giallo);--rde-ghost:rgba(255,255,255,.16);--rde-line-strong:var(--rde-bianco);--rde-focus:var(--rde-bianco)}
.rde-card--tenue{--rde-bg:var(--rde-teal-10);gap:6px;padding:16px 20px;border-radius:var(--rde-r-md)}
.rde-card--trasparente{--rde-bg:transparent;--rde-fg:inherit;--rde-fg-2:inherit;--rde-accent:inherit;--rde-hl:inherit;--rde-line-strong:currentColor;--rde-card-bordo:currentColor;--rde-card-bordo-w:1.5px;background:transparent;color:inherit}
.rde-card--trasparente :is(.rde-titolo,.rde-h3,.rde-h4,.rde-text){color:inherit}
.rde-surface--teal .rde-card--trasparente,.rde-surface--scuro .rde-card--trasparente{--rde-hl:var(--rde-giallo);--rde-accent:var(--rde-giallo)}
.rde-card--ombra-fissa,.rde-card--ombra:hover,.rde-card--ombra:focus-within{--rde-card-ox:var(--rde-ombra-x);--rde-card-oy:var(--rde-ombra-y)}
.rde-card--ombra:hover,.rde-card--ombra:focus-within{translate:-3px -3px}
@media (hover:none){.rde-card--ombra{--rde-card-ox:var(--rde-ombra-x);--rde-card-oy:var(--rde-ombra-y)}.rde-card--ombra:hover,.rde-card--ombra:focus-within{translate:none}}
.rde-card--ombra,.rde-card--bordo-colore{--rde-card-bordo:var(--rde-card-ombra);--rde-card-bordo-w:2px}
.rde-card--ombra-lavanda{--rde-card-ombra:var(--rde-lavanda)}
.rde-card--ombra-salvia{--rde-card-ombra:var(--rde-salvia)}
.rde-card--ombra-corallo{--rde-card-ombra:var(--rde-corallo)}
.rde-card--ombra-teal{--rde-card-ombra:var(--rde-teal)}
.rde-card--centro{align-items:center;text-align:center}
.rde-card-icon{width:112px;height:112px;object-fit:contain;margin-top:auto}
.rde-card .rde-numero{align-self:center}
/* Card cliccabile: il link del titolo copre tutta la card */
.rde-card-link{color:inherit;text-decoration:none}
.rde-card-link::after{content:"";position:absolute;inset:0;border-radius:inherit}
.rde-card:has(.rde-card-link:hover):not(.rde-card--ombra){translate:0 -3px}
.rde-card:has(.rde-card-link:focus-visible){outline:2px solid var(--rde-focus);outline-offset:3px}
/* ───────────── Numero gigante ───────────── */
/* Sans Plomb Bold in trasparenza dietro o accanto alle card. --pieno = nel colore d'accento. */
.rde-numero{display:block;font:700 clamp(5.5rem,13vw,10.5rem)/.82 var(--rde-titoli);letter-spacing:.02em;color:var(--rde-ghost);font-variant-numeric:tabular-nums;-webkit-user-select:none;user-select:none}
.rde-numero--sm{font-size:clamp(4rem,8vw,6.5rem)}
.rde-numero--pieno{color:var(--rde-hl)}
/* Principio: card e numero affiancati; nelle righe pari si scambiano. Sul telefono il numero sta sopra la card.
La card ha il fondo della fascia, quindi copre il numero. Col mouse il numero parte nascosto dietro la card
e, passando sulla riga, esce piano di lato fino a mostrarsi quasi tutto: resta infilato dietro per --rde-n-dentro.
Scorrimento e ritaglio vanno insieme, così il bordo da cui esce resta fermo sul lato della card.
Senza mouse (telefoni, tablet) il numero è sempre fuori. */
.rde-principi{--rde-principio-bg:var(--rde-bg);--rde-n-dentro:14%;--rde-n-tempo:.75s;display:grid;gap:clamp(28px,5vw,56px);margin:0;padding:0;list-style:none}
.rde-principio{display:grid;align-items:center;gap:8px 0}
.rde-principio>.rde-numero{order:-1;font-size:clamp(4rem,18vw,6rem);margin-bottom:-.3em;padding-left:12px}
.rde-principio>.rde-card{z-index:1;background:var(--rde-principio-bg)}
@media (min-width:760px){
.rde-principio{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.rde-principio>.rde-card{grid-column:1;grid-row:1}
.rde-principio>.rde-numero{order:0;grid-column:2;grid-row:1;justify-self:start;margin:0;padding:0;font-size:clamp(7rem,13vw,10.5rem);translate:calc(-1*var(--rde-n-dentro)) 0}
.rde-principio:nth-child(even)>.rde-card{grid-column:2}
.rde-principio:nth-child(even)>.rde-numero{grid-column:1;justify-self:end;translate:var(--rde-n-dentro) 0}
}
@media (min-width:760px) and (hover:hover){
.rde-principio>.rde-numero{translate:-100% 0;clip-path:inset(-30% -10% -30% 100%);transition:translate var(--rde-n-tempo) cubic-bezier(.22,1,.36,1),clip-path var(--rde-n-tempo) cubic-bezier(.22,1,.36,1)}
.rde-principio:hover>.rde-numero,.rde-principio:focus-within>.rde-numero{translate:calc(-1*var(--rde-n-dentro)) 0;clip-path:inset(-30% -10% -30% var(--rde-n-dentro))}
.rde-principio:nth-child(even)>.rde-numero{translate:100% 0;clip-path:inset(-30% 100% -30% -10%)}
.rde-principio:nth-child(even):hover>.rde-numero,.rde-principio:nth-child(even):focus-within>.rde-numero{translate:var(--rde-n-dentro) 0;clip-path:inset(-30% var(--rde-n-dentro) -30% -10%)}
}
/* Parola chiave (rde-principio-parola): quando il numero è nascosto, sul lato opposto alla card c'è una parola sola,
grande e a contorno. Passando sulla riga sfuma e scivola via mentre esce il numero. Solo dove c'è il mouse:
sui dispositivi a tocco il numero è sempre fuori e la parola non compare. È decorativa: aria-hidden="true". */
.rde-principio-parola{display:none}
@media (min-width:760px) and (hover:hover){
.rde-principio>.rde-principio-parola{display:block;grid-column:2;grid-row:1;justify-self:start;padding-left:clamp(28px,5vw,64px);font:700 clamp(4.5rem,9vw,7.5rem)/.9 var(--rde-titoli);letter-spacing:.03em;text-transform:uppercase;color:transparent;-webkit-text-stroke:1.5px var(--rde-line);-webkit-user-select:none;user-select:none;transition:opacity .4s ease,translate var(--rde-n-tempo) cubic-bezier(.22,1,.36,1)}
.rde-principio:nth-child(even)>.rde-principio-parola{grid-column:1;justify-self:end;padding:0 clamp(28px,5vw,64px) 0 0}
.rde-principio:hover>.rde-principio-parola,.rde-principio:focus-within>.rde-principio-parola{opacity:0;translate:28px 0}
.rde-principio:nth-child(even):hover>.rde-principio-parola,.rde-principio:nth-child(even):focus-within>.rde-principio-parola{translate:-28px 0}
}
@media (prefers-reduced-motion:reduce){.rde-principio>.rde-numero,.rde-principio-parola{transition:none}}
/* ───────────── Lista a spunte ───────────── */
/* Riquadro 36px raggio 8 con la spunta bianca. Teal di base, --corallo per "la tua parte", --giallo, --salvia. */
.rde-checklist{--rde-check:var(--rde-teal);display:grid;gap:14px;margin:0;padding:0;list-style:none}
.rde-checklist>li{display:flex;align-items:center;gap:14px;font:400 1rem/1.4 var(--rde-testo);color:var(--rde-fg)}
.rde-checklist>li::before{content:"";flex:none;width:36px;height:36px;border-radius:var(--rde-r-sm);background:var(--rde-check) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23fff' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 10.5l3.75 3.75L15.5 6'/%3E%3C/svg%3E") center/22px no-repeat}
.rde-checklist--corallo{--rde-check:var(--rde-corallo)}
.rde-checklist--giallo{--rde-check:var(--rde-giallo)}
.rde-checklist--salvia{--rde-check:var(--rde-salvia)}
.rde-checklist--sm>li{gap:10px;font-size:.9375rem}
.rde-checklist--sm>li::before{width:26px;height:26px;border-radius:6px;background-size:16px}
.rde-surface--teal .rde-checklist:not([class*="rde-checklist--"]),.rde-surface--scuro .rde-checklist:not([class*="rde-checklist--"]){--rde-check:rgba(255,255,255,.24)}
/* ───────────── Nastro scorrevole ───────────── */
/* Fascia gialla col motto che scorre. rde.js ripete la frase quanto serve; si ferma al passaggio del mouse
e non si muove se il visitatore ha chiesto meno animazioni. --teal e --scuro per gli altri fondi. */
.rde-nastro{--rde-hl:var(--rde-bianco);overflow:hidden;padding-block:calc(15px + var(--rde-cap)) 15px;background:var(--rde-giallo);color:var(--rde-antracite);font:700 1.125rem/1 var(--rde-testo);text-transform:uppercase;letter-spacing:.02em;white-space:nowrap}
.rde-nastro-track{display:flex;width:max-content;animation:rde-nastro var(--rde-nastro-durata,36s) linear infinite}
.rde-nastro-item{flex:none;padding-inline:.6em}
.rde-nastro-item::after{content:"-";margin-left:1.2em}
.rde-nastro em{font-style:italic}
.rde-nastro:hover .rde-nastro-track{animation-play-state:paused}
.rde-nastro--teal{--rde-hl:var(--rde-giallo);background:var(--rde-teal);color:var(--rde-bianco)}
.rde-nastro--scuro{--rde-hl:var(--rde-giallo);background:var(--rde-antracite);color:var(--rde-bianco)}
.rde-nastro--sm{padding-block:calc(10px + var(--rde-cap)) 10px;font-size:.875rem}
@media (prefers-reduced-motion:reduce){.rde-btn,.rde-btn::before,.rde-card,.rde-fab,.rde-fab::after{transition:none}}
@keyframes rde-nastro{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.rde-nastro-track{animation:none}}
/* ───────────── Campi di modulo ───────────── */
/* Campi a contorno, spigolo vivo, fondo trasparente: funzionano su bianco e su teal perché leggono i token della superficie. */
.rde-form{display:grid;gap:14px}
.rde-form-row{display:grid;gap:14px}
@media (min-width:560px){.rde-form-row{grid-template-columns:1fr 1fr}}
.rde-field{display:grid;gap:6px;min-width:0}
.rde-label{font:500 .875rem/1.3 var(--rde-testo);color:var(--rde-fg)}
.rde-label small{font-weight:400;font-size:inherit;color:var(--rde-fg-2)}
.rde-input,.rde-textarea,.rde-select{display:block;width:100%;min-height:48px;margin:0;padding:11px 14px;border:1.5px solid var(--rde-line-strong);border-radius:0;background:transparent;color:var(--rde-fg);font:400 1rem/1.4 var(--rde-testo);-webkit-appearance:none;appearance:none;transition:border-color var(--rde-fast) var(--rde-ease),background-color var(--rde-fast) var(--rde-ease)}
.rde-input::placeholder,.rde-textarea::placeholder{color:var(--rde-fg-3);opacity:1}
.rde-input:hover,.rde-textarea:hover,.rde-select:hover{border-color:var(--rde-fg)}
.rde-input:focus-visible,.rde-textarea:focus-visible,.rde-select:focus-visible{outline:2px solid var(--rde-focus);outline-offset:2px;border-color:var(--rde-focus)}
.rde-textarea{min-height:128px;resize:vertical}
.rde-select{padding-right:40px;background:var(--rde-chevron) right 12px center/16px no-repeat;cursor:pointer}
.rde-select option{color:var(--rde-antracite)}
.rde-input[aria-invalid=true],.rde-textarea[aria-invalid=true],.rde-select[aria-invalid=true]{border-color:var(--rde-errore);border-width:2px}
.rde-field-hint{font:400 .8125rem/1.4 var(--rde-testo);color:var(--rde-fg-2)}
.rde-field-error{font:500 .8125rem/1.4 var(--rde-testo);color:var(--rde-errore)}
/* Casella di consenso e scelta singola */
.rde-choice{display:flex;align-items:flex-start;gap:10px;font:400 .875rem/1.45 var(--rde-testo);color:var(--rde-fg-2);cursor:pointer}
.rde-check,.rde-radio{flex:none;width:20px;height:20px;margin:1px 0 0;border:1.5px solid var(--rde-line-strong);border-radius:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer;transition:background-color var(--rde-fast) var(--rde-ease),border-color var(--rde-fast) var(--rde-ease)}
.rde-radio{border-radius:50%}
.rde-check:checked{border-color:var(--rde-accent);background:var(--rde-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 10.5l3.75 3.75L15.5 6'/%3E%3C/svg%3E") center/14px no-repeat}
.rde-surface--teal .rde-check:checked,.rde-surface--scuro .rde-check:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%232a2a2a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 10.5l3.75 3.75L15.5 6'/%3E%3C/svg%3E")}
.rde-card .rde-check:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 10.5l3.75 3.75L15.5 6'/%3E%3C/svg%3E")}
.rde-radio:checked{border-color:var(--rde-accent);box-shadow:inset 0 0 0 4px var(--rde-bg),inset 0 0 0 10px var(--rde-accent)}
.rde-check:focus-visible,.rde-radio:focus-visible{outline:2px solid var(--rde-focus);outline-offset:2px}
.rde-choice a{color:var(--rde-fg);text-underline-offset:.18em}
/* Esito dell'invio */
.rde-esito{padding:14px 16px;border-left:4px solid var(--rde-salvia);background:var(--rde-salvia-20);color:var(--rde-antracite);font:500 .9375rem/1.45 var(--rde-testo)}
.rde-esito--errore{border-color:var(--rde-corallo);background:var(--rde-corallo-20)}
/* ───────────── Header e menu ───────────── */
/* Fascia teal 10% con monogramma, voci in minuscolo Balto Bold e social. Quando l'header è più stretto di 1024px
(lo misura lui stesso, non la finestra) le voci passano nel menu a tutto schermo. */
.rde-header{container:rde-header/inline-size;position:sticky;top:0;z-index:50;background:var(--rde-teal-10);color:var(--rde-antracite)}
.rde-header-in{display:flex;align-items:center;gap:clamp(20px,3vw,40px);min-height:88px}
.rde-header-logo{flex:none;display:block;line-height:0}
.rde-header-logo img{display:block;height:58px;width:auto}
.rde-nav{display:flex;align-items:center;gap:clamp(18px,2.4vw,30px);margin:0;padding:0;list-style:none}
.rde-nav--fine{margin-left:auto}
.rde-nav a{display:block;padding:8px 0;border-bottom:2px solid transparent;color:inherit;font:700 1rem/1 var(--rde-testo);text-transform:lowercase;text-decoration:none;white-space:nowrap;transition:color var(--rde-fast) var(--rde-ease),border-color var(--rde-fast) var(--rde-ease)}
.rde-nav a:hover,.rde-nav a[aria-current=page]{border-bottom-color:currentColor;color:var(--rde-teal-ink)}
.rde-nav a:focus-visible,.rde-social a:focus-visible,.rde-burger:focus-visible,.rde-header-logo:focus-visible{outline:2px solid var(--rde-focus);outline-offset:4px}
.rde-social{display:flex;align-items:center;gap:14px;margin:0;padding:0;list-style:none}
.rde-social a{display:block;color:inherit;line-height:0;transition:color var(--rde-fast) var(--rde-ease)}
.rde-social a:hover{color:var(--rde-accent)}
.rde-social svg{width:22px;height:22px;fill:currentColor}
.rde-social--lg{gap:18px}
.rde-social--lg svg{width:26px;height:26px}
/* Pulsante del menu: tre barre inclinate di 10° come la bandierina. Aperto (aria-expanded="true", oppure
rde-burger--chiudi sul pulsante dentro il menu) le barre si raddrizzano e diventano una croce.
Area di tocco 48px. Markup: */
.rde-burger{display:none;align-items:center;justify-content:center;flex:none;width:48px;height:48px;margin-left:auto;padding:0;border:0;border-radius:0;background:none;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.rde-burger svg{width:28px;height:28px}
.rde-burger-bars{position:relative;display:block;width:28px;height:20px;background:linear-gradient(currentColor,currentColor) center/100% 2.5px no-repeat;rotate:var(--rde-slant);transition:rotate .3s var(--rde-ease),background-size .2s var(--rde-ease)}
.rde-burger-bars::before,.rde-burger-bars::after{content:"";position:absolute;left:0;width:100%;height:2.5px;background:currentColor;transition:top .3s var(--rde-ease),rotate .3s var(--rde-ease)}
.rde-burger-bars::before{top:0}
.rde-burger-bars::after{top:calc(100% - 2.5px)}
.rde-burger:hover .rde-burger-bars{background-size:70% 2.5px}
.rde-burger[aria-expanded=true] .rde-burger-bars,.rde-burger--chiudi .rde-burger-bars{rotate:0deg;background-size:0 2.5px}
.rde-burger[aria-expanded=true] .rde-burger-bars::before,.rde-burger--chiudi .rde-burger-bars::before{top:calc(50% - 1.25px);rotate:45deg}
.rde-burger[aria-expanded=true] .rde-burger-bars::after,.rde-burger--chiudi .rde-burger-bars::after{top:calc(50% - 1.25px);rotate:-45deg}
@container rde-header (max-width:1023px){
.rde-header-in{min-height:68px}
.rde-header-logo img{height:44px}
.rde-header .rde-nav,.rde-header .rde-social{display:none}
.rde-burger{display:inline-flex}
}
/* Menu a tutto schermo (dialog), per telefoni e tablet: fondo teal, testata uguale all'header chiuso (monogramma a
sinistra, croce a destra nello stesso punto dell'hamburger), voci in Sans Plomb maiuscolo che entrano una dopo
l'altra, in fondo l'invito a scrivere e i social. La voce della pagina aperta è gialla. Si chiude con la croce,
con Esc o toccando una voce. */
.rde-menu{--rde-bg:var(--rde-teal);--rde-fg:var(--rde-bianco);--rde-fg-2:rgba(255,255,255,.9);--rde-accent:var(--rde-giallo);--rde-hl:var(--rde-giallo);--rde-line:rgba(255,255,255,.42);--rde-focus:var(--rde-bianco);width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;border:0;background:var(--rde-teal);color:var(--rde-bianco);text-align:left;overflow-y:auto}
.rde-menu::backdrop{background:var(--rde-teal)}
.rde-menu[open]{display:flex;flex-direction:column;animation:rde-menu-in .22s var(--rde-ease)}
.rde-menu-head{display:flex;align-items:center;justify-content:space-between;flex:none;min-height:68px;padding-inline:var(--rde-gutter)}
.rde-menu-head img{display:block;height:44px;width:auto}
.rde-menu-nav{display:grid;gap:2px;margin:auto 0;padding:24px var(--rde-gutter);list-style:none}
.rde-menu-nav a{display:block;padding:7px 0;color:inherit;font:700 clamp(2.25rem,10vw,3.25rem)/1 var(--rde-titoli);text-transform:uppercase;letter-spacing:.03em;text-decoration:none;transition:color var(--rde-fast) var(--rde-ease),translate var(--rde-fast) var(--rde-ease)}
.rde-menu-nav a:hover{color:var(--rde-giallo);translate:6px 0}
.rde-menu-nav a[aria-current=page]{color:var(--rde-giallo)}
.rde-menu-nav a:focus-visible{outline:2px solid var(--rde-focus);outline-offset:4px}
.rde-menu[open] .rde-menu-nav li{animation:rde-menu-voce .45s var(--rde-ease) both}
.rde-menu[open] .rde-menu-nav li:nth-child(2){animation-delay:.05s}
.rde-menu[open] .rde-menu-nav li:nth-child(3){animation-delay:.1s}
.rde-menu[open] .rde-menu-nav li:nth-child(4){animation-delay:.15s}
.rde-menu[open] .rde-menu-nav li:nth-child(5){animation-delay:.2s}
.rde-menu[open] .rde-menu-nav li:nth-child(6){animation-delay:.25s}
.rde-menu[open] .rde-menu-nav li:nth-child(n+7){animation-delay:.3s}
.rde-menu-foot{display:grid;gap:20px;flex:none;padding:20px var(--rde-gutter) max(28px,env(safe-area-inset-bottom));border-top:1px solid var(--rde-line)}
.rde-menu-foot .rde-social{justify-content:space-between}
.rde-menu .rde-burger{display:inline-flex;margin-right:-10px}
@keyframes rde-menu-in{from{opacity:0}}
@keyframes rde-menu-voce{from{opacity:0;transform:translateY(16px)}}
@media (prefers-reduced-motion:reduce){.rde-menu[open],.rde-menu[open] .rde-menu-nav li{animation:none}.rde-burger-bars,.rde-burger-bars::before,.rde-burger-bars::after{transition:none}}
/* ───────────── Hero ───────────── */
/* Fascia piena con titolo display, eventuale sopratitolo, pulsanti e ritratto scontornato appoggiato in basso.
--slant inclina il blocco di testo come nel mockup #facciamoallaromana. */
.rde-hero{position:relative;overflow:hidden}
.rde-hero-in{container-type:inline-size;display:grid;align-items:end;gap:0 clamp(24px,4vw,56px);min-height:clamp(420px,52vw,600px)}
.rde-hero-text{display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding-block:clamp(56px,9vw,112px);align-self:center}
.rde-hero .rde-display{font-size:clamp(3rem,10.5cqi,6.5rem)}
.rde-hero-pre{margin:0;font:500 .75rem/1.2 var(--rde-testo);text-transform:uppercase;letter-spacing:.1em;color:var(--rde-fg)}
.rde-hero-pre::before{content:"";display:inline-block;width:.42em;height:.42em;margin-right:.7em;border-radius:50%;background:currentColor;vertical-align:.14em}
.rde-hero-sub{max-width:34ch;margin:0;font:400 1.25rem/1.45 var(--rde-testo);color:var(--rde-fg-2)}
.rde-hero-actions{display:flex;flex-wrap:wrap;gap:14px 18px;margin-top:10px}
.rde-hero-img{align-self:end;justify-self:center;line-height:0}
.rde-hero-img img{display:block;width:auto;max-width:100%;max-height:clamp(320px,46vw,560px)}
.rde-hero--slant .rde-hero-text{transform:skewY(var(--rde-slant));transform-origin:0 50%;padding-block:clamp(72px,11vw,136px) clamp(56px,8vw,104px)}
@media (min-width:860px){.rde-hero-in{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}.rde-hero-in:not(:has(.rde-hero-img)){grid-template-columns:1fr}}
@media (max-width:859px){.rde-hero-text{padding-bottom:28px}.rde-hero--slant .rde-hero-text{padding-bottom:40px}}
/* ───────────── Apertura a spicchi ───────────── */
/* La fascia di foto in cima alla pagina #facciamoallaromana: tre foto tagliate da tre linee bianche che partono
dal centro, dove sta il monogramma a colori (mono-colori-tagli.svg, che ha già i tagli bianchi).
a = in alto a sinistra, b = in basso a sinistra, c = a destra (il punto da tenere in vista si sposta con --rde-spicchi-c). */
.rde-spicchi{position:relative;height:clamp(240px,36vw,520px);overflow:hidden;background:var(--rde-bianco)}
.rde-spicchi>img{position:absolute;object-fit:cover}
/* Ogni foto occupa solo il riquadro del suo spicchio, così il soggetto resta al centro dello spicchio */
.rde-spicchi>.rde-spicchi-a{left:0;top:0;width:77%;height:52%;clip-path:polygon(0 0,100% 0,64.9% 100%,0 59.6%)}
.rde-spicchi>.rde-spicchi-b{left:0;top:31%;width:57%;height:69%;clip-path:polygon(0 0,87.7% 30.4%,100% 100%,0 100%)}
.rde-spicchi>.rde-spicchi-c{left:50%;top:0;width:50%;height:100%;clip-path:polygon(54% 0,100% 0,100% 100%,14% 100%,0 52%);object-position:var(--rde-spicchi-c,50% 25%)}
.rde-spicchi-linee{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--rde-bianco);stroke-width:6px;pointer-events:none}
.rde-spicchi-linee path{vector-effect:non-scaling-stroke}
.rde-spicchi>.rde-spicchi-logo{left:50%;top:52%;height:50%;width:auto;max-width:none;object-fit:contain;translate:-50% -50%}
@media (max-width:640px){.rde-spicchi-linee{stroke-width:4px}}
/* ───────────── FAQ ───────────── */
/* nativi: con lo stesso name se ne apre una alla volta. Il più ruota e diventa una croce. */
.rde-faq{display:grid;gap:12px}
.rde-faq-item{border-radius:var(--rde-r-md);box-shadow:inset 0 0 0 1.5px var(--rde-line);transition:box-shadow var(--rde-fast) var(--rde-ease)}
.rde-faq-item[open]{box-shadow:inset 0 0 0 2px var(--rde-accent)}
.rde-faq-item>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;font:700 1.0625rem/1.3 var(--rde-testo);color:var(--rde-fg);cursor:pointer;list-style:none;border-radius:inherit}
.rde-faq-item>summary::-webkit-details-marker{display:none}
.rde-faq-item>summary::after{content:"";flex:none;width:18px;height:18px;background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 100% no-repeat;color:var(--rde-accent);transition:rotate .2s var(--rde-ease)}
.rde-faq-item[open]>summary::after{rotate:45deg}
.rde-faq-item>summary:focus-visible{outline:2px solid var(--rde-focus);outline-offset:2px}
.rde-faq-body{padding:0 22px 20px;font:400 1rem/1.55 var(--rde-testo);color:var(--rde-fg-2)}
.rde-faq-body>*{margin:0}
.rde-faq-body>*+*{margin-top:.8em}
/* ───────────── Scheda news ───────────── */
/* Immagine 16:10, categoria e data, titolo Balto Bold, riassunto. Tutta la scheda è cliccabile dal titolo. */
.rde-news{--rde-bg:var(--rde-bianco);--rde-fg:var(--rde-antracite);--rde-fg-2:var(--rde-grigio-2);--rde-accent:var(--rde-teal-ink);--rde-focus:var(--rde-teal-ink);position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:var(--rde-r-lg);background:var(--rde-bg);color:var(--rde-fg);box-shadow:inset 0 0 0 2px var(--rde-teal-20);transition:box-shadow var(--rde-fast) var(--rde-ease),translate var(--rde-fast) var(--rde-ease)}
.rde-news:hover{box-shadow:inset 0 0 0 2px var(--rde-teal);translate:0 -3px}
.rde-news-img{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--rde-teal-10)}
.rde-news-img img{display:block;width:100%;height:100%;object-fit:cover;transition:scale .4s var(--rde-ease)}
.rde-news:hover .rde-news-img img{scale:1.03}
.rde-news-body{display:flex;flex-direction:column;gap:10px;flex:1;padding:20px 22px 22px}
.rde-news-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font:400 .8125rem/1.2 var(--rde-testo);color:var(--rde-fg-2)}
.rde-news-title{margin:0;font:700 1.25rem/1.25 var(--rde-testo);text-wrap:balance}
.rde-news-title a{color:inherit;text-decoration:none}
.rde-news-title a::after{content:"";position:absolute;inset:0}
.rde-news-title a:focus-visible{outline:none}
.rde-news:has(.rde-news-title a:focus-visible){outline:2px solid var(--rde-focus);outline-offset:3px}
.rde-news-text{margin:0;font:400 .9375rem/1.5 var(--rde-testo);color:var(--rde-fg-2)}
.rde-news-more{margin-top:auto;padding-top:6px;font:500 .8125rem/1 var(--rde-testo);text-transform:uppercase;letter-spacing:.1em;color:var(--rde-accent)}
@media (min-width:720px){
.rde-news--orizzontale{flex-direction:row}
.rde-news--orizzontale .rde-news-img{flex:0 0 42%;aspect-ratio:auto}
}
/* ───────────── Footer ───────────── */
/* Fascia teal: logo al centro, voci a sinistra, modulo al centro, istituzione a destra, note legali in fondo. */
.rde-footer{padding-block:clamp(48px,6vw,72px) 28px}
.rde-footer-logo{display:block;width:fit-content;margin:0 auto clamp(24px,3vw,36px);line-height:0}
.rde-footer-logo img{display:block;height:clamp(96px,11vw,136px);width:auto}
.rde-footer-grid{display:grid;gap:40px}
.rde-footer-main{display:flex;flex-direction:column;gap:6px;text-align:center}
.rde-footer-main .rde-form{margin-top:18px;text-align:left}
.rde-footer-nav{display:grid;gap:12px;margin:14px 0 0;padding:0;list-style:none}
.rde-footer-nav a{color:inherit;font:700 .9375rem/1.2 var(--rde-testo);text-transform:lowercase;text-decoration:none}
.rde-footer-nav a:hover{color:var(--rde-giallo)}
.rde-footer-nav a:focus-visible,.rde-footer-legal a:focus-visible{outline:2px solid var(--rde-focus);outline-offset:3px}
.rde-footer-partner{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.rde-footer-partner img{display:block;height:48px;width:auto}
.rde-footer-legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;margin-top:clamp(36px,5vw,56px);padding-top:20px;border-top:1px solid var(--rde-line);font:400 .8125rem/1.5 var(--rde-testo);color:var(--rde-fg-2)}
.rde-footer-legal a{color:inherit;text-underline-offset:.18em}
.rde-footer-legal ul{display:flex;flex-wrap:wrap;gap:6px 20px;margin:0;padding:0;list-style:none}
@media (min-width:900px){
.rde-footer-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,1fr);align-items:end}
.rde-footer-partner{align-items:flex-end}
}