/* ===========================================================================
   Landing di campagna Olos369 — foglio di stile comune.
   ---------------------------------------------------------------------------
   Uno solo per tutte e otto: cambia la palette, non la struttura. I colori
   arrivano dalle variabili qui sotto, campionate dall'immagine di ogni
   servizio; tutto il resto — griglie, telefono, sezioni commerciali — è
   condiviso, così una correzione vale per tutti.
   Generato da _generatore/crea.py: non modificare a mano nella cartella del
   servizio, si riscrive.
   ========================================================================= */

.landing @font-face {
    font-family: 'Jakarta';
    src: url('../../fonts/plus-jakarta-sans-var.woff2') format('woff2-variations');
    font-weight: 200 800;
    font-display: swap;
}.landing {
    --notte:     #2a0f02;
    --profondo:  #170700;
    --bosco:     #6b2905;
    --tinta:     #c2410c;
    --tinta-2:   #e35d13;
    --acceso:    #f6b26b;
    --acceso-2:  #eb9648;
    --crema:     #fdf6ee;
    --carta:     #ffffff;
    --inchiostro:#2a1408;
    --grigio:    #806651;
    --contrasto: #3d1704;

    --sans:   'Jakarta', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --scritta:'Sacramento', 'Snell Roundhand', 'Apple Chancery', cursive;
    --mis:    clamp(1rem, 4vw, 2rem);
    --largo:  1180px;
}.landing * { box-sizing: border-box; }html { scroll-behavior: smooth; }@media (prefers-reduced-motion: reduce) {html { scroll-behavior: auto; }}.landing { margin: 0; font-family: var(--sans); color: var(--crema); background: var(--notte);
       line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; }.landing .contenuto { width: min(var(--largo), 100% - var(--mis) * 2); margin-inline: auto; }.landing h1, .landing h2, .landing h3 { line-height: 1.08; letter-spacing: -.03em; margin: 0; text-wrap: balance; }.landing h1 { font-size: clamp(2.3rem, 5.4vw, 3.7rem); font-weight: 800; text-wrap: pretty; }.landing h2 { font-size: clamp(2rem, 4.6vw, 3.1rem); font-weight: 800; }.landing h3 { font-size: 1.12rem; font-weight: 700; letter-spacing: -.01em; }.landing p { margin: 0 0 1rem; }.landing .occhiello { font-size: .8rem; font-weight: 700; letter-spacing: .38em; text-transform: uppercase;
             color: var(--acceso-2); margin: 0 0 1.1rem; }.landing .scritta { font-family: var(--scritta); font-size: clamp(1.9rem, 3.6vw, 2.6rem); color: var(--acceso);
           line-height: 1.1; letter-spacing: .01em; text-shadow: 0 0 34px rgba(246,178,107,.2); }/* --- Bottoni ------------------------------------------------------------ */
.landing .cta { display: inline-flex; align-items: center; gap: .7rem; background: var(--acceso);
       color: var(--contrasto); font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em;
       padding: 1rem 2rem; border-radius: 99px; border: 0; cursor: pointer; text-decoration: none;
       box-shadow: 0 14px 40px -14px rgba(246,178,107,.55);
       transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }.landing .cta:hover { filter: brightness(1.08); transform: translateY(-2px); }.landing .cta .frec { transition: transform .18s ease; }.landing .cta:hover .frec { transform: translateX(5px); }.landing .cta-piana { display: inline-flex; align-items: center; gap: .5rem; color: var(--acceso);
             text-decoration: none; font-weight: 650; font-size: .96rem;
             border-bottom: 1px solid rgba(246,178,107,.28); padding-bottom: .15rem; }.landing .cta-piana:hover { border-color: var(--acceso); }/* --- Vegetazione: una forma sola, tanti innesti ------------------------- */
.landing .foglie { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }.landing .foglie img { position: absolute; display: block; will-change: transform;
              transform: rotate(var(--r, 0deg)); filter: var(--tono); }.landing .f1 { --r:  28deg; --d: 11s;                width: 230px; top: -6%;    left: -5%; }.landing .f2 { --r: -42deg; --d:  9s; --ritardo: .8s;  width: 170px; top: 8%;     left: 12%; }.landing .f3 { --r: -18deg; --d: 13s;                width: 300px; top: -12%;   right: -4%; }.landing .f4 { --r:  52deg; --d: 10s; --ritardo: 1.4s; width: 200px; top: 22%;    right: 10%; }.landing .f5 { --r: -12deg; --d: 12s; --ritardo: .4s;  width: 260px; bottom: -8%;  left: 4%; }.landing .f6 { --r:  38deg; --d:  8s; --ritardo: 2s;   width: 150px; bottom: 12%;  left: 26%; }.landing .f7 { --r:  16deg; --d: 14s;                width: 320px; bottom: -14%; right: 2%; }.landing .f8 { --r: -64deg; --d:  9s; --ritardo: 1.1s; width: 130px; top: 46%;    left: -3%; }/* La tinta della vegetazione segue il tema: una foglia, otto atmosfere. */
.landing .f1, .landing .f7 { --tono: brightness(.42) saturate(.75) hue-rotate(-14deg) blur(1px); }.landing .f3, .landing .f5 { --tono: brightness(.6) saturate(.85) hue-rotate(-18deg); }.landing .f2, .landing .f4, .landing .f6, .landing .f8 { --tono: brightness(.8) saturate(.9) hue-rotate(-22deg) blur(.5px); }/* --- Hero ---------------------------------------------------------------- */
/* L'hero riempie lo schermo: è la prima e unica cosa che si vede, e
   quello che c'è sotto si raggiunge scorrendo. svh oltre a vh perché sui
   telefoni la barra del browser mangia altezza e il contenuto finiva
   tagliato. */
.landing .hero { position: relative; overflow: hidden;
        min-height: 100vh; min-height: 100svh;
        display: flex; flex-direction: column; justify-content: center;
        padding: clamp(3.5rem, 7vw, 5rem) 0 clamp(5rem, 9vw, 6.5rem);
        background: radial-gradient(120% 90% at 74% 20%, rgba(227,93,19,.42), transparent 60%),radial-gradient(90% 70% at 8% 6%, rgba(107,41,5,.65), transparent 60%),linear-gradient(165deg,#3d1704 0%,var(--notte) 52%,var(--profondo) 100%); }.landing .hero::after { content: ''; position: absolute; z-index: 0; width: 640px; height: 640px;
               right: 4%; top: 22%; background: radial-gradient(circle, rgba(246,178,107,.2), transparent 65%);
               filter: blur(20px); pointer-events: none; }.landing .hero .contenuto { position: relative; z-index: 2; }.landing .hero-griglia { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }@media (max-width: 900px) {.landing .hero-griglia { grid-template-columns: 1fr; }/* Impilati, l'altezza della finestra non è più il vincolo. */
    .landing .telefono { height: auto; width: min(290px, 70vw); max-width: none; }}.landing .marchio { display: flex; align-items: center; gap: .7rem; margin-bottom: clamp(2rem, 6vw, 3.4rem);
            color: inherit; text-decoration: none; width: fit-content; }.landing .marchio:hover { text-decoration: none; }.landing .marchio:hover svg { transform: rotate(-8deg); }.landing .marchio svg { width: 32px; height: 32px; color: var(--acceso); flex: none;
               transition: transform .25s ease; }.landing .marchio b { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }.landing .marchio span { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(253,246,238,.55);
                border-left: 1px solid rgba(246,178,107,.28); padding-left: .7rem; margin-left: .2rem; }.landing h1 .acceso { color: var(--acceso); }.landing .hero-testo { font-size: clamp(1.05rem, 1.7vw, 1.22rem); color: rgba(253,246,238,.78); max-width: 34ch; margin: 1.4rem 0 2rem; }.landing .hero-azioni { display: flex; gap: 1.6rem; align-items: center; flex-wrap: wrap; }.landing .hero-nota { margin: 1.6rem 0 0; font-size: .88rem; color: rgba(253,246,238,.55); }/* La freccia che invita a scorrere: sale e scende piano, in fondo
   all'hero. Sta fuori dal contenuto, centrata sulla pagina. */
.landing .scorri { position: absolute; z-index: 3; left: 50%; bottom: clamp(1.4rem, 3vw, 2.4rem);
          transform: translateX(-50%); display: flex; flex-direction: column;
          align-items: center; gap: .4rem; color: var(--acceso); text-decoration: none;
          font-size: .7rem; letter-spacing: .22em; text-transform: uppercase;
          opacity: .75; transition: opacity .2s ease; }.landing .scorri:hover { opacity: 1; text-decoration: none; }.landing .scorri svg { width: 26px; height: 26px; animation: saliscendi 2s ease-in-out infinite; }@keyframes saliscendi { 0%, 100% { transform: translateY(-4px); } 50% { transform: translateY(6px); } }@media (max-height: 560px) {.landing .scorri { display: none; }}/* --- Il telefono, ricostruito in CSS ------------------------------------ */
.landing .scena { position: relative; display: flex; justify-content: center; }.landing .telefono { position: relative; aspect-ratio: 9 / 19; height: min(620px, 56svh); width: auto;
            max-width: 74vw; border-radius: 42px;
            padding: 11px; background: linear-gradient(150deg, #e9eef0, #9fb0b2 40%, #d7dee0 70%, #7f9294);
            box-shadow: 0 50px 90px -30px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.14);
            transform: rotate(-4deg); }.landing .telefono::before { content: ''; position: absolute; right: -2px; top: 26%; width: 3px; height: 62px;
                    border-radius: 3px; background: linear-gradient(#cdd6d8, #8fa1a3); }.landing .schermo { position: relative; height: 100%; border-radius: 32px; overflow: hidden;
           background: linear-gradient(180deg,#241206,#1b0d04 45%,#150a03); color: #fdf6ee; display: flex; flex-direction: column; }.landing .tacca { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 86px; height: 20px;
         border-radius: 99px; background: #10201f; z-index: 3; }.landing .app-testa { padding: 1.7rem .8rem .35rem; text-align: center; flex: none; }.landing .app-testa .medaglia { width: 42px; height: 42px; margin: 0 auto .38rem; border-radius: 50%;
                       border: 1.5px solid var(--tinta); color: var(--tinta);
                       background: rgba(255,255,255,.75); display: flex; align-items: center; justify-content: center; }.landing .app-testa .medaglia svg { width: 23px; height: 23px; }.landing .app-testa b { display: block; font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; }.landing .app-testa span { display: block; font-size: .72rem; opacity: .7; }/* Se una schermata ha più righe di quante ne stiano, l'ultima sfuma
   invece di essere tranciata: si legge come «continua», non come rotto. */
.landing .app-corpo { flex: 1; padding: .4rem .6rem .6rem; display: flex; flex-direction: column;
             gap: .34rem; overflow: hidden;
             -webkit-mask-image: linear-gradient(180deg, #000 92%, transparent);
             mask-image: linear-gradient(180deg, #000 92%, transparent); }/* Riga generica dell'app: icona, testo, freccia */
.landing .voce { display: flex; align-items: center; gap: .5rem; background: #fff; border-radius: 11px;
        padding: .42rem .6rem; font-size: .72rem; box-shadow: 0 1px 3px rgba(12,35,34,.07); }.landing .voce svg { width: 15px; height: 15px; color: var(--tinta); flex: none; }.landing .voce .frec { margin-left: auto; opacity: .4; font-size: .8rem; }.landing .voce b { display: block; font-weight: 650; }.landing .bollo { width: 44px; height: 44px; border-radius: 50%; background: var(--tinta); color: #fff;
         display: flex; align-items: center; justify-content: center; margin: 0 auto; flex: none; }.landing .bollo svg { width: 22px; height: 22px; color: #fff; }.landing .voce small { display: block; font-size: .62rem; opacity: .65; }/* Riga in evidenza (il gesto principale dello strumento) */
.landing .voce-forte { display: flex; align-items: center; gap: .6rem; background: var(--tinta); color: #fff;
              border-radius: 14px; padding: .55rem .7rem; font-size: .74rem; }.landing .voce-forte .cerc { width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--tinta);
                    display: flex; align-items: center; justify-content: center; flex: none; }.landing .voce-forte .cerc svg { width: 12px; height: 12px; }.landing .voce-forte b { display: block; font-size: .78rem; font-weight: 650; }.landing .voce-forte span { display: block; font-size: .62rem; opacity: .85; }/* Barra di avanzamento nelle righe */
.landing .barra { height: 4px; border-radius: 99px; background: rgba(0,0,0,.09); margin-top: .3rem; overflow: hidden; }.landing .barra i { display: block; height: 100%; border-radius: 99px; background: var(--tinta); }.landing .claim { font-family: var(--scritta); font-size: 1.14rem; line-height: 1.08; text-align: center;
         color: var(--tinta); padding: .35rem .8rem .2rem; margin: 0; }/* --- Sezioni ------------------------------------------------------------- */
.landing .sezione { padding: clamp(4rem, 9vw, 7rem) 0; position: relative; }.landing .sezione.chiara { background: var(--crema); color: var(--inchiostro); }.landing .sezione.chiara .occhiello { color: var(--tinta); }.landing .titolo-sez { max-width: 22ch; margin-bottom: 1.2rem; }.landing .intro { max-width: 56ch; font-size: 1.08rem; color: var(--grigio); }.landing .sezione:not(.chiara) .intro { color: rgba(253,246,238,.78); }.landing .momento { text-align: center; background: linear-gradient(180deg, var(--profondo), var(--notte)); }.landing .momento .virgolette { font-size: clamp(2rem, 5.6vw, 3.4rem); font-weight: 300; letter-spacing: -.03em;
                       line-height: 1.24; max-width: 20ch; margin: 0 auto; color: var(--crema); }.landing .momento .virgolette em { font-style: normal; color: var(--acceso); }.landing .momento .dopo { margin: 2.2rem auto 0; max-width: 46ch; color: rgba(253,246,238,.78); }.landing .vantaggi { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.1rem; margin-top: 2.6rem; }.landing .vant { background: var(--carta); border: 1px solid #f0e2d0; border-radius: 20px; padding: 1.6rem 1.4rem;
        transition: transform .2s ease, box-shadow .2s ease; }.landing .vant:hover { transform: translateY(-4px); box-shadow: 0 22px 50px -26px rgba(61,23,4,.4); }.landing .vant .cerchio { width: 56px; height: 56px; border-radius: 50%; background: var(--tinta); color: #fff;
                 display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }.landing .vant .cerchio svg { width: 27px; height: 27px; }.landing .vant h3 { margin-bottom: .35rem; }.landing .vant p { margin: 0; font-size: .93rem; color: var(--grigio); line-height: 1.6; }.landing .dono { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 6vw, 4.5rem); align-items: center; }@media (max-width: 860px) {.landing .dono { grid-template-columns: 1fr; }}.landing .gettone { position: relative; display: flex; justify-content: center; }.landing .gettone img { width: min(320px, 74vw); filter: drop-shadow(0 30px 50px rgba(0,0,0,.45)); transform: rotate(-7deg); }/* Un foglio non si appoggia storto come un gettone: appena inclinato. */
.landing .gettone img[src$="certificato.svg"] { transform: rotate(-2.5deg); width: min(360px, 82vw); }.landing .doni-elenco { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; gap: .7rem; }.landing .doni-elenco li { display: flex; gap: .8rem; align-items: flex-start; font-size: 1rem; }.landing .doni-elenco .p { flex: none; width: 26px; height: 26px; border-radius: 50%; background: rgba(246,178,107,.2);
                  color: var(--acceso); display: flex; align-items: center; justify-content: center; font-size: .8rem; }.landing .passi { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.4rem; margin-top: 2.8rem; counter-reset: p; }.landing .passo { position: relative; padding-top: 2.6rem; }.landing .passo::before { counter-increment: p; content: '0' counter(p); position: absolute; top: 0; left: 0;
                 font-size: 2.6rem; font-weight: 800; color: var(--acceso); opacity: .28; letter-spacing: -.04em; }.landing .sezione.chiara .passo::before { color: var(--tinta); opacity: .22; }.landing .passo h3 { margin-bottom: .4rem; }.landing .passo p { font-size: .95rem; color: var(--grigio); margin: 0; }.landing .sezione:not(.chiara) .passo p { color: rgba(253,246,238,.78); }.landing .mestieri { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.8rem; }.landing .mestieri span { border: 1px solid rgba(246,178,107,.28); color: var(--acceso); border-radius: 99px;
                 padding: .45rem 1rem; font-size: .92rem; font-weight: 600; }.landing .sezione.chiara .mestieri span { border-color: #f0e2d0; color: var(--tinta); background: #fff; }.landing .confronto { margin-top: 2.6rem; overflow-x: auto; }.landing .confronto table { width: 100%; border-collapse: collapse; min-width: 620px; }/* La tabella vive sul fondo scuro: qui i colori sono quelli chiari. La
   prima colonna — la domanda — va in bianco pieno: è la riga che si legge
   per prima, e in inchiostro scuro spariva del tutto. */
.landing .confronto th, .landing .confronto td { padding: .95rem 1.1rem; text-align: left; font-size: .95rem;
                               border-bottom: 1px solid rgba(246,178,107,.28); vertical-align: top;
                               color: rgba(253,246,238,.78); }.landing .confronto thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em;
                      color: rgba(253,246,238,.55); font-weight: 700; border-bottom-width: 2px; }.landing .confronto td:first-child { font-weight: 650; color: #fff; width: 32%; }.landing .confronto .noi { background: rgba(255,255,255,.06); }.landing .confronto thead .noi { background: var(--tinta); color: #fff; border-radius: 12px 12px 0 0; }.landing .confronto tbody tr:last-child .noi { border-radius: 0 0 12px 12px; }.landing .confronto .si { color: var(--acceso); font-weight: 700; }.landing .confronto td.noi { color: #fff; }.landing .confronto .no { color: rgba(253,246,238,.55); }/* Se un giorno la sezione passasse su fondo chiaro, questi la rimettono a posto. */
.landing .sezione.chiara .confronto th, .landing .sezione.chiara .confronto td { color: var(--grigio); border-color: #f0e2d0; }.landing .sezione.chiara .confronto td:first-child { color: var(--inchiostro); }.landing .sezione.chiara .confronto .noi { background: #fbeddd; }.landing .sezione.chiara .confronto td.noi { color: var(--inchiostro); }.landing .sezione.chiara .confronto .si { color: var(--tinta); }.landing .prezzo-blocco { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.6rem, 4vw, 3rem);
                 align-items: center; margin-top: 2.4rem; }@media (max-width: 860px) {.landing .prezzo-blocco { grid-template-columns: 1fr; }}.landing .cartellino { background: var(--carta); border: 1px solid #f0e2d0; border-radius: 22px;
              padding: 1.9rem 1.8rem; box-shadow: 0 30px 60px -34px rgba(61,23,4,.4); }.landing .cartellino .riga-pp { display: flex; align-items: baseline; gap: .6rem; }.landing .cartellino .pp { font-size: 3.2rem; font-weight: 820; letter-spacing: -.04em; color: var(--tinta); line-height: 1; }.landing .cartellino .unita { font-size: 1rem; font-weight: 700; color: var(--tinta); }.landing .cartellino .quando { color: var(--grigio); font-size: .95rem; margin: .3rem 0 0; }.landing .cartellino hr { border: 0; border-top: 1px solid #f0e2d0; margin: 1.3rem 0; }.landing .cartellino ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }.landing .cartellino li { display: flex; gap: .6rem; font-size: .93rem; color: var(--inchiostro); line-height: 1.55; }.landing .cartellino li .v { color: var(--tinta); font-weight: 800; flex: none; }.landing .cartellino .nota { font-size: .84rem; color: var(--grigio); margin: 1.2rem 0 0; line-height: 1.55; }.landing .cartellino .cta { margin-top: 1.4rem; width: 100%; justify-content: center; background: var(--tinta); color: #fff; }.landing .garanzie { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .8rem; }.landing .garanzie li { display: flex; gap: .8rem; align-items: flex-start; font-size: 1rem; color: var(--grigio); }.landing .garanzie b { color: var(--inchiostro); }.landing .garanzie .p { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #fbeddd;
               color: var(--tinta); display: flex; align-items: center; justify-content: center;
               font-size: .8rem; font-weight: 800; }.landing .domande { margin-top: 2.4rem; display: grid; gap: .7rem; max-width: 780px; }.landing .domande details { border: 1px solid rgba(246,178,107,.28); border-radius: 14px; background: rgba(255,255,255,.03); }.landing .domande summary { cursor: pointer; padding: 1rem 1.2rem; font-weight: 650; list-style: none;
                   display: flex; justify-content: space-between; gap: 1rem; align-items: center; }.landing .domande summary::-webkit-details-marker { display: none; }.landing .domande summary::after { content: '+'; color: var(--acceso); font-size: 1.3rem; line-height: 1; flex: none; }.landing .domande details[open] summary::after { content: '–'; }.landing .domande p { margin: 0; padding: 0 1.2rem 1.1rem; color: rgba(253,246,238,.78); font-size: .95rem; }.landing .chiusura { position: relative; overflow: hidden; text-align: center;
            background: radial-gradient(90% 120% at 50% 0%, var(--bosco), var(--profondo) 70%); }.landing .chiusura .contenuto { position: relative; z-index: 2; }.landing .chiusura h2 { max-width: 16ch; margin: 0 auto 1.2rem; }.landing .chiusura .intro { margin: 0 auto 2.4rem; }.landing footer { background: var(--profondo); padding: 2.6rem 0; font-size: .86rem; color: rgba(253,246,238,.55); }.landing footer .contenuto { display: flex; justify-content: space-between; align-items: center; gap: 1.4rem; flex-wrap: wrap; }.landing footer a { color: var(--acceso-2); text-decoration: none; }.landing footer a:hover { text-decoration: underline; }/* --- Movimento ----------------------------------------------------------- */
.landing .rivela { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }.landing .rivela.dentro { opacity: 1; transform: none; }@keyframes fluttua { 0%, 100% { transform: rotate(-4deg) translateY(0); } 50% { transform: rotate(-4deg) translateY(-14px); } }.landing .telefono { animation: fluttua 7s ease-in-out infinite; }@keyframes oscilla { 0%, 100% { transform: rotate(var(--r, 0deg)) translateY(0); }
                     50%      { transform: rotate(var(--r, 0deg)) translateY(-10px); } }.landing .foglie img { animation: oscilla var(--d, 9s) ease-in-out infinite; animation-delay: var(--ritardo, 0s); }@media (prefers-reduced-motion: reduce) {.landing .rivela { opacity: 1; transform: none; transition: none; }.landing .telefono, .landing .foglie img, .landing .scorri svg { animation: none; }}/* --- Paesaggio opzionale dentro al telefono ------------------------------
   Lo usa solo chi lo mette nel markup (Aura Links): alba sul lago fatta di
   gradienti sovrapposti, con la foschia che schiarisce la base dei monti —
   è quella a dare la distanza, senza la quale sembrano triangoli. */
.landing .paesaggio { position: relative; height: 38%; flex: none; overflow: hidden;
             background: linear-gradient(180deg,#c3dbe0 0%,#dfe7e0 34%,#f0e4d2 52%,#dbe8e2 64%,#b6d0cb 100%); }.landing .paesaggio .sole { position: absolute; left: 50%; top: 40%; width: 78px; height: 78px; margin-left: -39px;
                   border-radius: 50%; background: radial-gradient(circle, rgba(255,248,226,.95) 0%, rgba(255,236,190,.55) 38%, rgba(255,230,180,0) 72%); }.landing .paesaggio .monte { position: absolute; bottom: 33%; width: 100%; height: 46%;
                    background: linear-gradient(180deg,#96b4b4 0%,#b4cbc8 78%,#cadcd8 100%);
                    clip-path: polygon(0 100%,0 60%,13% 34%,26% 56%,38% 18%,52% 50%,66% 26%,80% 54%,92% 36%,100% 56%,100% 100%); }.landing .paesaggio .monte.avanti { bottom: 33%; height: 32%;
                    background: linear-gradient(180deg,#6f9489 0%,#8faea4 70%,#b3cac2 100%);
                    clip-path: polygon(0 100%,0 72%,18% 42%,33% 70%,47% 34%,62% 68%,78% 44%,90% 72%,100% 52%,100% 100%); }.landing .paesaggio .foschia { position: absolute; bottom: 30%; left: 0; right: 0; height: 22%;
                      background: linear-gradient(180deg, rgba(255,250,240,0), rgba(255,250,240,.92)); }.landing .paesaggio .lago { position: absolute; bottom: 0; width: 100%; height: 33%;
                   background: linear-gradient(180deg,#d3e4e0 0%,#a9c8c6 55%,#8db3b1 100%); }.landing .paesaggio .lago::after { content: ''; position: absolute; left: 50%; top: 0; width: 40px; height: 100%;
                          margin-left: -20px; filter: blur(3px);
                          background: linear-gradient(180deg, rgba(255,242,210,.9), rgba(255,242,210,0)); }.landing .profilo-testa { position: absolute; left: 0; right: 0; top: 15%; text-align: center; z-index: 2; }.landing .profilo-testa .medaglia { width: 54px; height: 54px; margin: 0 auto .45rem; border-radius: 50%;
                           border: 1.5px solid var(--tinta); color: var(--tinta); background: rgba(255,255,255,.82);
                           display: flex; align-items: center; justify-content: center; }.landing .profilo-testa .medaglia svg { width: 30px; height: 30px; }.landing .profilo-testa b { display: block; font-size: 1.08rem; font-weight: 650; letter-spacing: -.01em; color: #1d3b38; }.landing .profilo-testa span { display: block; font-size: .78rem; color: #46615d; }.landing .profilo-testa small { display: block; font-size: .62rem; letter-spacing: .06em; color: #5e7a76; margin-top: .1rem; }

/* ------------------------------------------------------------------
   Aggiustamenti per stare dentro alla piattaforma.
   ------------------------------------------------------------------ */
/* L'intestazione del sito resta in cima: l'hero riempie quello che
   avanza, non l'intera finestra, se no la prima schermata sborda. */
.landing .hero { min-height: calc(100vh - 66px); min-height: calc(100svh - 66px); }

/* La landing sta in «contentHero», che il layout stampa fuori da <main>:
   quel <main> resta con i soli messaggi flash e non deve occupare spazio. */
body:has(.landing) main { padding-top: 0; padding-bottom: 0; }
body:has(.landing) main:not(:has(.flash)) { padding: 0; }

/* Il piè di pagina del sito viene dopo un fondo scuro: una riga di
   stacco evita che i due neri si confondano. */
body:has(.landing) footer.site { border-top: 1px solid rgba(255,255,255,.08); }