@font-face {
    font-family: "Cabin";
    src: url("../fonts/Cabin.woff2") format("woff2");
    font-weight: 400 700;
    font-display: swap;
}

:root {
    --petrolio: #093146;
    --oro: #f9b517;
    --turchese: #1b9cb9;
    --azzurro: #8cc8e5;
    --arancione: #ef8215;
    --testo: #303030;
    --carta: #fbf8f1;
    --bordo: #e3e8ec;
    --margine: clamp(16px, 5vw, 72px);
}

* { box-sizing: border-box; }

html {
    color-scheme: light;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: "Cabin", system-ui, sans-serif;
    font-size: 18px;
    line-height: 1.55;
    color: var(--testo);
    background: #fff;
    overflow-x: clip;
}

h1, h2, h3 {
    margin: 0;
    color: var(--petrolio);
    line-height: 1.05;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

h2 { font-size: clamp(2rem, 4.5vw, 3.5rem); }

img, svg { display: block; max-width: 100%; }

a { color: inherit; }

:focus-visible {
    outline: 3px solid var(--turchese);
    outline-offset: 3px;
}

.salta {
    position: absolute;
    left: 16px;
    top: -60px;
    z-index: 10;
    padding: 10px 16px;
    color: #fff;
    background: var(--petrolio);
    border-radius: 8px;
}

.salta:focus { top: 12px; }

/* Le cinque strisce Tootem */
.strisce {
    height: 28px;
    background: linear-gradient(
        to right,
        var(--azzurro) 0 20%,
        var(--turchese) 20% 40%,
        var(--petrolio) 40% 60%,
        var(--oro) 60% 80%,
        var(--arancione) 80% 100%
    );
}

/* Con lo script le strisce si muovono: la tela sconfina sulla sezione vicina, senza spostare nulla. Vale anche per il piè di pagina */
.strisce-vive { position: relative; z-index: 1; }

.strisce-vive canvas {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -1;
    width: 100%;
    height: calc(100% + 18px);
    pointer-events: none;
}

.strisce-giu canvas { top: 0; bottom: auto; }

.bottone, button {
    position: relative;
    isolation: isolate;
    display: inline-block;
    padding: 12px 22px;
    overflow: hidden;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    background: var(--arancione);
    border-radius: 999px;
}

.bottone-piccolo {
    padding: 10px 16px;
    font-size: 13px;
}

/* Due onde disegnate salgono dal basso e si inseguono: prima turchese, poi petrolio.
   Solo sui bottoni nostri, elencati uno a uno: mai sul bollino di Tooty né su quelli di Cookiebot */
.bottone::before, .modulo button::before, .tooty form button::before, .tooty-chips button::before,
.bottone::after, .modulo button::after, .tooty form button::after, .tooty-chips button::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: calc(100% + 9px);
    background-repeat: repeat-x, no-repeat;
    background-position: 0 0, 0 8px;
    background-size: 56px 9px, 100% 100%;
    transform: translateY(101%);
    transition: transform .55s cubic-bezier(.3, .7, .2, 1);
    pointer-events: none;
}

.bottone::before, .modulo button::before, .tooty form button::before, .tooty-chips button::before {
    z-index: -1;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 9'%3E%3Cpath d='M0 5C14 -1 14 -1 28 5S42 11 56 5V9H0Z' fill='%23093146'/%3E%3C/svg%3E"),
        linear-gradient(var(--petrolio), var(--petrolio));
    transition-delay: .09s;
}

.bottone::after, .modulo button::after, .tooty form button::after, .tooty-chips button::after {
    z-index: -2;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 9'%3E%3Cpath d='M0 5C14 -1 14 -1 28 5S42 11 56 5V9H0Z' fill='%231b9cb9'/%3E%3C/svg%3E"),
        linear-gradient(var(--turchese), var(--turchese));
}

@media (hover: hover) {
    .bottone:hover::before, .modulo button:hover::before, .tooty form button:hover::before, .tooty-chips button:hover::before,
    .bottone:hover::after, .modulo button:hover::after, .tooty form button:hover::after, .tooty-chips button:hover::after {
        transform: translateY(-9px);
    }

    .bottone:hover::before, .modulo button:hover::before, .tooty form button:hover::before, .tooty-chips button:hover::before { animation: onda 1.1s linear infinite; }

    .bottone:hover::after, .modulo button:hover::after, .tooty form button:hover::after, .tooty-chips button:hover::after { animation: onda .8s linear infinite reverse; }
}

.bottone:focus-visible::before, .modulo button:focus-visible::before, .tooty form button:focus-visible::before, .tooty-chips button:focus-visible::before,
.bottone:focus-visible::after, .modulo button:focus-visible::after, .tooty form button:focus-visible::after, .tooty-chips button:focus-visible::after {
    transform: translateY(-9px);
}

@keyframes onda { to { background-position: 56px 0, 0 8px; } }

/* Testata */
.testata {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 17px var(--margine);
    background: #fff;
    border-bottom: 1px solid var(--bordo);
    transition: box-shadow .25s ease;
}

.testata.staccata { box-shadow: 0 6px 20px rgba(9, 49, 70, .12); }

.progresso {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    background: linear-gradient(to right, var(--azzurro), var(--turchese), var(--petrolio), var(--oro), var(--arancione));
    transform: scaleX(0);
    transform-origin: left;
}

.testata-logo { margin-right: auto; }

.testata-logo img {
    display: block;
    width: min(163px, 42vw);
    height: auto;
}

.testata-voci {
    display: flex;
    gap: 26px;
}

.testata-voci a {
    font-weight: 600;
    color: var(--petrolio);
    text-decoration: none;
}

/* Link testuali: la riga dritta si ritira e un'onda disegnata la sostituisce, scorrendo */
.testata-voci a, .collegamento, .stampa-vai {
    --colore-onda: var(--arancione);
    position: relative;
    display: inline-block;
    padding-bottom: 7px;
    text-decoration: none;
    transition: color .3s ease;
}

.testata-voci a::after, .collegamento::after, .stampa-vai::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 6px;
    background: var(--colore-onda);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 6'%3E%3Cpath d='M0 3C6 -1 6 -1 12 3S18 7 24 3' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") 0 0 / 24px 6px repeat-x;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 6'%3E%3Cpath d='M0 3C6 -1 6 -1 12 3S18 7 24 3' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") 0 0 / 24px 6px repeat-x;
    clip-path: inset(0 100% 0 0);
    transition: clip-path .45s cubic-bezier(.3, .7, .2, 1);
}

.collegamento::before, .stampa-vai::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    height: 2px;
    background: currentColor;
    transform-origin: right;
    transition: transform .35s cubic-bezier(.3, .7, .2, 1);
}

@media (hover: hover) {
    .testata-voci a:hover, .collegamento:hover, .stampa:hover .stampa-vai { color: #0e7288; }

    .focus-scuro .collegamento:hover { color: var(--oro); }

    .testata-voci a:hover::after, .collegamento:hover::after, .stampa:hover .stampa-vai::after {
        clip-path: inset(0 0 0 0);
        animation: onda-link .9s linear infinite;
    }

    .collegamento:hover::before, .stampa:hover .stampa-vai::before { transform: scaleX(0); }
}

.testata-voci a:focus-visible::after, .collegamento:focus-visible::after, .stampa:focus-visible .stampa-vai::after { clip-path: inset(0 0 0 0); }

@keyframes onda-link {
    from { -webkit-mask-position: 0 0; mask-position: 0 0; }
    to { -webkit-mask-position: 24px 0; mask-position: 24px 0; }
}

.menu { display: none; position: relative; }

.menu summary {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    list-style: none;
    cursor: pointer;
}

.burger {
    position: relative;
    display: block;
    width: 26px;
    height: 18px;
}

.burger i {
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--petrolio);
    border-radius: 2px;
    transition: top .25s ease, transform .25s ease .05s, opacity .15s ease, background-color .25s ease;
}

.burger i:nth-child(1) { top: 0; }
.burger i:nth-child(2) { top: 7.5px; }
.burger i:nth-child(3) { top: 15px; }

.menu[open] .burger i { background: var(--arancione); }
.menu[open] .burger i:nth-child(1) { top: 7.5px; transform: rotate(45deg); }
.menu[open] .burger i:nth-child(2) { opacity: 0; transform: scaleX(0); }
.menu[open] .burger i:nth-child(3) { top: 7.5px; transform: rotate(-45deg); }

.menu[open] nav { animation: sali .25s ease both; }

.menu summary::-webkit-details-marker { display: none; }

.menu nav {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    display: flex;
    flex-direction: column;
    width: min(260px, calc(100vw - 32px));
    padding: 8px;
    background: #fff;
    border: 1px solid var(--bordo);
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(9, 49, 70, .16);
}

.menu nav a {
    padding: 12px;
    font-weight: 600;
    color: var(--petrolio);
    text-decoration: none;
}

/* Apertura */
.eroe {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
    align-items: center;
    gap: clamp(24px, 5vw, 72px);
    padding: clamp(40px, 6vw, 88px) var(--margine);
}

.occhiello {
    margin: 0 0 16px;
    font-weight: 700;
    color: #0e7288;
}

h1 .occhiello {
    display: block;
    font-size: 1rem;
    line-height: 1.6;
    letter-spacing: normal;
}

.eroe h1 { font-size: clamp(3rem, 7.6vw, 6.5rem); line-height: .98; }

.eroe-sotto {
    max-width: 34em;
    margin: 24px 0 32px;
    font-size: clamp(1.1rem, 1.6vw, 1.3rem);
}

.azioni {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 26px;
}

.collegamento {
    font-weight: 700;
    color: var(--petrolio);
}

.eroe-foto {
    width: 100%;
    max-width: 460px;
    height: auto;
    justify-self: center;
    border-radius: 24px;
}

.mascotte {
    width: 100%;
    max-width: 480px;
    justify-self: center;
}

.mascotte-anello {
    transform-origin: 127.6px 128px;
    animation: gira 60s linear infinite;
}

@keyframes gira { to { transform: rotate(360deg); } }

/* Modelli: stampe appoggiate sul tavolo */
.modelli h2 { text-align: center; }

.modelli {
    padding: clamp(56px, 8vw, 112px) var(--margine);
    background: var(--carta);
}

.modelli-griglia {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    max-width: 1040px;
    margin-inline: auto;
    gap: clamp(20px, 3vw, 40px);
    margin-top: clamp(32px, 5vw, 64px);
}

.stampa {
    display: block;
    padding: 14px 14px 22px;
    text-decoration: none;
    background: #fff;
    box-shadow: 0 2px 4px rgba(9, 49, 70, .08), 0 14px 34px rgba(9, 49, 70, .12);
    transition: rotate .25s ease, translate .25s ease, box-shadow .25s ease;
}

.stampa:nth-child(1) { rotate: -1.4deg; }
.stampa:nth-child(2) { rotate: .8deg; margin-top: 28px; }

.stampa:hover {
    rotate: 0deg;
    translate: 0 -8px;
    box-shadow: 0 4px 8px rgba(9, 49, 70, .1), 0 24px 48px rgba(9, 49, 70, .2);
}

.stampa img { transition: scale .4s ease; }

.stampa:hover img { scale: 1.02; }

.stampa img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
}

.stampa-tag {
    display: block;
    margin-top: 16px;
    font-size: 15px;
    font-weight: 700;
    color: #0e7288;
}

.stampa h3 {
    margin: 6px 0 8px;
    font-size: clamp(1.6rem, 2.4vw, 2.1rem);
}

.stampa p { margin: 0 0 14px; }

.stampa-vai {
    font-weight: 700;
    color: var(--petrolio);
}

/* Qualità */
.qualita {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(32px, 6vw, 96px);
    padding: clamp(72px, 9vw, 128px) var(--margine) clamp(56px, 8vw, 112px);
    color: #fff;
    background: var(--petrolio);
}

.qualita h2 { color: #fff; }

.qualita-testo p {
    max-width: 32em;
    margin: 22px 0 0;
}

.numeri-titolo {
    margin: 0 0 14px;
    font-weight: 700;
    color: var(--azzurro);
}

.numeri {
    display: grid;
    gap: 0;
    margin: 0;
}

.numeri div {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: baseline;
    gap: 20px;
    padding: 16px 0;
    border-top: 1px solid rgba(255, 255, 255, .25);
}

.numeri div:last-child { border-bottom: 1px solid rgba(255, 255, 255, .25); }

.numeri dt { text-align: right; }

.numeri dd {
    margin: 0;
    font-size: clamp(2.6rem, 5vw, 4.25rem);
    font-weight: 700;
    line-height: 1;
    color: var(--oro);
}

.numeri small { font-size: .4em; }

/* Invito finale */
.invito {
    padding: clamp(56px, 8vw, 104px) var(--margine);
    text-align: center;
    background: var(--carta);
}

.invito p {
    max-width: 30em;
    margin: 18px auto 28px;
}

/* Invito alla demo: la trama di punti si muove e reagisce al mouse */
.invito-trama {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.invito-trama canvas {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.in-arrivo {
    min-height: 50vh;
    background: var(--carta);
    padding: clamp(56px, 8vw, 112px) var(--margine);
}

.in-arrivo h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); }

.non-trovata h1 { max-width: 14em; }

.non-trovata-altro { margin-top: 36px !important; color: #5c6770; }

.non-trovata-altro a { color: #0e7288; font-weight: 700; }

.in-arrivo p, .testo-ricco { margin: 18px 0 28px; }

.testo-ricco { max-width: 46em; }

.testo-ricco h2 { margin: 1.4em 0 .5em; font-size: clamp(1.5rem, 3vw, 2.2rem); }

.testo-ricco h3 { margin: 1.2em 0 .4em; font-size: 1.25rem; }

/* Tooty, il chatbot */
.tooty {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 60;
}

.tooty-apri {
    display: block;
    width: 64px;
    height: 64px;
    margin-left: auto;
    padding: 2px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 6px 22px rgba(9, 49, 70, .28);
    cursor: pointer;
    transition: transform .2s ease;
}

.tooty-apri img { display: block; width: 100%; height: 100%; }

.tooty-apri:hover { transform: scale(1.06); }

.tooty-pannello {
    display: flex;
    flex-direction: column;
    width: min(380px, calc(100vw - 40px));
    height: min(560px, calc(100dvh - 120px));
    margin-bottom: 14px;
    overflow: hidden;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 44px rgba(9, 49, 70, .3);
}

.tooty-pannello[hidden] { display: none; }

/* Apertura e chiusura: il bordo liquido lo disegna chatbot.js. L'ombra segue la forma mentre si muove */
.tooty-liquida .tooty-pannello { box-shadow: none; }

.tooty-chiude { pointer-events: none; }

.tooty-pannello { transform-origin: 100% 100%; }

@media (min-width: 481px) {
    .tooty-liquida { filter: drop-shadow(0 10px 24px rgba(9, 49, 70, .3)); }
}

@media (prefers-reduced-motion: no-preference) {
    .tooty-gonfia { animation: tooty-sobbalzo .36s ease-out; }
}

@keyframes tooty-sobbalzo {
    30% { transform: scale(.86, 1.1); }
    60% { transform: scale(1.08, .94); }
}

.tooty-testa {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    color: #fff;
    background: var(--petrolio);
}

.tooty-testa img { border-radius: 50%; background: #fff; }

.tooty-testa p { flex: 1; margin: 0; line-height: 1.25; }

.tooty-testa span { display: block; font-size: .8rem; color: var(--azzurro); }

.tooty-testa button {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    font-size: 2.2rem;
    font-weight: 400;
    line-height: 1;
    color: #fff;
    background: none;
    cursor: pointer;
}

.tooty-elenco {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    overflow-y: auto;
    background: var(--carta);
}

.tooty-elenco > * { flex-shrink: 0; }

/* Lo scorrimento dei messaggi non passa alla pagina; da telefono, a chat aperta, la pagina è ferma */
.tooty-elenco, .tooty-pannello { overscroll-behavior: contain; }

html.tooty-blocca, html.tooty-blocca body { overflow: hidden; }

.tooty-bolla {
    max-width: 85%;
    padding: 9px 13px;
    border-radius: 14px;
    font-size: .95rem;
    line-height: 1.4;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.tooty-lui { align-self: flex-start; background: #fff; border-bottom-left-radius: 4px; }

.tooty-io { align-self: flex-end; color: #fff; background: var(--petrolio); border-bottom-right-radius: 4px; }

.tooty-attesa { min-width: 54px; min-height: 37px; }

.tooty-attesa::after {
    content: "•••";
    letter-spacing: 3px;
    color: var(--turchese, #1b9cb9);
    animation: tooty-scrive 1s ease-in-out infinite;
}

@keyframes tooty-scrive { 50% { opacity: .3; } }

.tooty-preventivo { align-self: flex-start; }

.tooty-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.tooty-chips button {
    padding: 6px 11px;
    border: 1px solid #1b9cb9;
    border-radius: 999px;
    font: inherit;
    width: auto;
    font-size: .85rem;
    letter-spacing: normal;
    text-transform: none;
    color: var(--petrolio);
    background: #fff;
    cursor: pointer;
}

.tooty-chips button:hover { color: #fff; background: #0e7288; border-color: #0e7288; }

.tooty form {
    display: flex;
    gap: 8px;
    padding: 10px;
    border-top: 1px solid var(--bordo);
}

.tooty input {
    flex: 1;
    min-width: 0;
    padding: 9px 12px;
    border: 1px solid var(--bordo);
    border-radius: 999px;
    font: inherit;
    font-size: 1rem;
}

.tooty form button {
    flex-shrink: 0;
    align-self: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: var(--arancione);
    cursor: pointer;
}

.tooty form button:disabled { opacity: .5; cursor: default; }

.tooty-nota {
    margin: 0;
    padding: 0 12px 9px;
    font-size: .72rem;
    text-align: center;
    color: #5c6770;
}

/* Fumetto che invita a scrivere: compare sopra Tooty, solo a chat chiusa */
.tooty-fumetto {
    position: absolute;
    right: 4px;
    bottom: calc(100% + 12px);
    display: flex;
    align-items: flex-start;
    gap: 2px;
    width: max-content;
    max-width: min(240px, calc(100vw - 24px));
    padding: 4px 4px 4px 0;
    border-radius: 16px 16px 4px 16px;
    background: #fff;
    box-shadow: 0 6px 22px rgba(9, 49, 70, .25);
    animation: tooty-fumetto .35s cubic-bezier(.3, .7, .2, 1);
}

.tooty-fumetto[hidden] { display: none; }

.tooty-fumetto button {
    width: auto;
    padding: 0;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: var(--petrolio);
    background: none;
    border-radius: 0;
}

.tooty-fumetto-testo {
    flex: 1;
    padding: 8px 4px 8px 14px !important;
    font-size: .95rem;
    line-height: 1.35;
    text-align: left;
}

.tooty-fumetto-chiudi {
    flex-shrink: 0;
    width: 32px !important;
    height: 32px;
    font-size: 1.4rem;
    line-height: 1;
    color: #5c6770 !important;
}

@keyframes tooty-fumetto {
    from { opacity: 0; transform: translateY(8px) scale(.95); }
}

@media (max-width: 480px) {
    .tooty { right: 12px; bottom: 12px; }
    .tooty-apri { width: 56px; height: 56px; }
    .tooty-pannello { width: calc(100vw - 24px); height: calc(100dvh - 96px); }
    /* Chat aperta: l'icona lascia il posto ai messaggi (si chiude con la ×) e l'altezza segue la tastiera */
    .tooty-aperta .tooty-apri { display: none; }
    .tooty-aperta .tooty-pannello { height: calc(var(--tooty-alto, 100dvh) - 24px); margin-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .tooty-apri { transition: none; }
    .tooty-attesa::after { animation: none; }
    .tooty-fumetto { animation: none; }
}

/* Domande frequenti */
.domande {
    padding: clamp(56px, 8vw, 104px) var(--margine);
    background: #fff;
}

.domande h2 { text-align: center; }

.domande-elenco {
    max-width: 46em;
    margin: 32px auto 0;
}

.domande details { border-bottom: 1px solid var(--bordo); }

.domande summary {
    padding: 18px 0;
    font-weight: 700;
    color: var(--petrolio);
    cursor: pointer;
}

.domande details p { margin: 0 0 20px; }

/* Approfondimenti */
.focus {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(32px, 6vw, 96px);
    padding: clamp(56px, 8vw, 112px) var(--margine);
}

.focus-intro {
    max-width: 34em;
    margin: 18px 0 26px;
}

.focus-media { justify-self: center; }

.schermo {
    width: min(300px, 70vw);
    margin: 0;
    padding: 12px;
    background: var(--petrolio);
    border-radius: 28px;
}

.schermo img {
    width: 100%;
    height: auto;
    border-radius: 16px;
}

.passi {
    display: grid;
    gap: 14px;
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
    counter-reset: passo;
}

.passi li {
    position: relative;
    padding-left: 52px;
    counter-increment: passo;
}

.passi li::before {
    content: counter(passo);
    position: absolute;
    left: 0;
    top: 0;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    font-weight: 700;
    color: #fff;
    background: var(--oro);
    border-radius: 50%;
}

.focus-scuro {
    color: #fff;
    background: var(--petrolio);
}

.focus-scuro h2, .focus-scuro .collegamento { color: #fff; }

.focus-scuro .occhiello { color: var(--azzurro); }

.focus-scuro .collegamento { --colore-onda: var(--oro); }

.vantaggi {
    margin: 0 0 26px;
    padding: 18px 0 0 20px;
    border-top: 1px solid var(--bordo);
}

.focus-scuro .vantaggi { border-top-color: rgba(255, 255, 255, .25); }

.vantaggi li { margin-bottom: 6px; }

.foto-tonda {
    height: auto;
    border: 8px solid var(--oro);
    border-radius: 50%;
}

/* Foto grande con una piccola sovrapposta all'angolo */
.duo {
    position: relative;
    width: 100%;
    max-width: 520px;
    margin-bottom: 28px;
}

.duo-grande {
    width: 100%;
    height: auto;
    max-height: 78vh;
    object-fit: cover;
    border-radius: 18px;
}

.duo-piccola {
    position: absolute;
    right: -14px;
    bottom: -28px;
    width: 36%;
}

.schermo.duo-piccola { padding: 7px; border-radius: 18px; }

.schermo.duo-piccola img { border-radius: 12px; }

/* Gallerie in fondo agli approfondimenti */
.galleria {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(12px, 2vw, 24px);
}

.galleria figure { margin: 0; }

.galleria img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 14px;
}

.galleria-quadrata img { aspect-ratio: 1; }

.galleria figcaption {
    margin-top: 8px;
    font-weight: 700;
    color: var(--petrolio);
}

/* Foto reali affiancate, intere */
.foto-reali {
    padding: clamp(56px, 8vw, 112px) var(--margine);
    color: #fff;
    text-align: center;
    background: var(--petrolio);
}

.foto-reali h2 { color: #fff; }

.foto-reali .occhiello { color: var(--azzurro); }

.foto-reali-griglia {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 480px));
    justify-content: center;
    gap: clamp(16px, 3vw, 40px);
    margin-top: clamp(28px, 4vw, 48px);
}

.foto-reali figure { margin: 0; }

.foto-reali img {
    width: 100%;
    height: auto;
    border-radius: 18px;
}

.foto-reali figcaption {
    margin-top: 12px;
    font-weight: 700;
}

/* Griglia di caratteristiche */
.griglia { padding: clamp(56px, 8vw, 112px) var(--margine); }

.griglia-crema { background: var(--carta); }

.griglia h2 { text-align: center; }

.griglia-intro {
    max-width: 34em;
    margin: 16px auto 0;
    text-align: center;
}

.griglia ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 28px);
    margin: clamp(28px, 4vw, 52px) 0 0;
    padding: 0;
    list-style: none;
}

.griglia ul:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.griglia li {
    padding: 24px;
    background: #fff;
    border-top: 6px solid var(--azzurro);
    border-radius: 6px 6px 16px 16px;
    box-shadow: 0 2px 4px rgba(9, 49, 70, .06), 0 10px 26px rgba(9, 49, 70, .09);
    transition: translate .25s ease, box-shadow .25s ease;
}

.griglia li:hover {
    translate: 0 -6px;
    box-shadow: 0 4px 8px rgba(9, 49, 70, .08), 0 18px 36px rgba(9, 49, 70, .16);
}

.griglia li:nth-child(5n + 2) { border-top-color: var(--turchese); }
.griglia li:nth-child(5n + 3) { border-top-color: var(--petrolio); }
.griglia li:nth-child(5n + 4) { border-top-color: var(--oro); }
.griglia li:nth-child(5n) { border-top-color: var(--arancione); }

.griglia h3 {
    margin-bottom: 8px;
    font-size: 1.3rem;
}

.griglia li p { margin: 0; }

/* Modulo di richiesta */
.modulo { padding: clamp(48px, 7vw, 96px) var(--margine); background: var(--carta); }

.modulo h2, .modulo-intro { text-align: center; }

.modulo-intro { max-width: 34em; margin: 14px auto clamp(24px, 4vw, 40px); }

.modulo form, .modulo-esito, .modulo > .modulo-errore, .modulo > noscript {
    display: block;
    max-width: 760px;
    margin-inline: auto;
}

.modulo form[hidden], .modulo-esito[hidden], .modulo [hidden] { display: none; }

.modulo form, .modulo-esito {
    padding: clamp(18px, 4vw, 36px);
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 2px 4px rgba(9, 49, 70, .06), 0 14px 34px rgba(9, 49, 70, .1);
}

.modulo-esito { text-align: center; }

.modulo-esito h3 { font-size: 1.7rem; margin-bottom: 10px; }

.modulo label { color: var(--petrolio); }

.modulo select, .modulo textarea {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 12px;
    font: inherit;
    font-size: 16px;
    font-weight: 400;
    background: #fff;
    border: 1px solid #c5ced5;
    border-radius: 10px;
}

.modulo input:focus, .modulo select:focus, .modulo textarea:focus { border-color: var(--turchese); }

.modulo small { display: block; margin-top: 5px; font-size: 14px; font-weight: 400; color: #5a6670; }

.modulo-due { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }

.modulo-trappola { position: absolute; left: -9999px; }

.modulo-nota {
    margin-bottom: 16px;
    padding: 12px 14px;
    font-size: 16px;
    color: var(--petrolio);
    background: #eef7fb;
    border-radius: 10px;
}

.modulo-nota p { margin: 0; }

.modulo-nota p + p { margin-top: 4px; font-weight: 600; }

.modulo fieldset { margin: 0 0 16px; padding: 0; border: 0; }

.modulo legend { margin-bottom: 8px; padding: 0; font-weight: 600; color: var(--petrolio); }

.modulo legend span { font-weight: 400; color: #5a6670; }

.modulo-voci { display: grid; gap: 10px; }

.modulo-voce { border: 2px solid var(--bordo); border-radius: 12px; transition: border-color .2s ease, background-color .2s ease; }

.modulo-voce:has(input:checked) { background: #fff8e8; border-color: var(--oro); }

.modulo-voce.chiusa { opacity: .6; }

.modulo label.modulo-voce-testa {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 12px;
    font-weight: 400;
    cursor: pointer;
}

.modulo-voce.chiusa .modulo-voce-testa { cursor: not-allowed; }

.modulo input[type="checkbox"] {
    flex: none;
    display: inline-block;
    width: 22px;
    height: 22px;
    margin: 0;
    accent-color: var(--arancione);
}

.modulo-voce-testa img { flex: none; width: 64px; height: 64px; object-fit: cover; border-radius: 10px; }

.modulo-voce-testo { display: flex; flex-direction: column; min-width: 0; gap: 2px; }

.modulo-voce-desc { font-size: 15px; line-height: 1.4; color: #4a5660; white-space: pre-line; }

.modulo-voce-file { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 0 12px 12px; font-size: 15px; }

.modulo-stato { display: block; margin-top: 4px; font-size: 15px; font-weight: 700; }

.stato-no { color: #a61e1e; }

.stato-forse { color: #a85400; }

.stato-si { color: #14632f; }

.modulo-avviso { margin: 0 0 16px; font-size: 15px; color: #4a5660; }

.modulo-avviso:empty { display: none; }

.modulo label.modulo-consenso { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; color: var(--testo); }

.modulo-errore { padding: 12px 14px; font-weight: 600; color: #9c1c1c; background: #fdecec; border-radius: 10px; }

.modulo button { width: auto; min-width: 220px; border-radius: 999px; }

.modulo button:disabled { opacity: .6; cursor: progress; }

/* Confronto */
.confronto { padding: clamp(56px, 8vw, 112px) var(--margine); }

.confronto table {
    width: 100%;
    margin-top: clamp(24px, 4vw, 48px);
    border-collapse: collapse;
}

.confronto th, .confronto td {
    padding: 18px 20px 18px 0;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--bordo);
}

.confronto thead th {
    font-size: clamp(1.3rem, 2.2vw, 1.75rem);
    color: var(--petrolio);
    border-bottom: 3px solid var(--oro);
}

.confronto thead td { border-bottom: 3px solid var(--oro); }

.confronto tbody th {
    width: 22%;
    color: var(--petrolio);
}

/* Subito online */
.online {
    /* Le lettere (alte .7 volte il carattere) partono dal bordo alto e arrivano a metà del contenuto */
    --frasi: clamp(320px, calc(17vw + 220px), 520px);
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 20px clamp(32px, 6vw, 96px);
    padding: calc(var(--frasi) * .7 - 55px) var(--margine) clamp(48px, 7vw, 88px);
    overflow: hidden;
    background: #f4eee0;
}

.online p { margin: 0; }

/* Le frasi che si sentono alle feste: bianche e giganti, una alla volta, passano dietro a titolo e testo */
.online-frasi {
    position: absolute;
    inset: 0;
    z-index: -1;
    font-size: var(--frasi);
    font-weight: 700;
    line-height: 1;
    color: #fff;
    pointer-events: none;
    user-select: none;
}

/* Senza script ogni frase ha il suo turno: 26 secondi su 156. Se cambia il numero di frasi, vanno cambiati durata e turni */
.online-frasi span {
    position: absolute;
    top: -.157em;   /* porta la cima delle maiuscole a pelo col bordo */
    left: 0;
    white-space: nowrap;
    animation: online-frase 156s linear infinite backwards;
}

.online-frasi span:nth-child(1) { animation-delay: -10s; }
.online-frasi span:nth-child(2) { animation-delay: 16s; }
.online-frasi span:nth-child(3) { animation-delay: 42s; }
.online-frasi span:nth-child(4) { animation-delay: 68s; }
.online-frasi span:nth-child(5) { animation-delay: 94s; }
.online-frasi span:nth-child(6) { animation-delay: 120s; }

/* Con lo script le frasi le sceglie site.js, a caso: restano fuori scena finché non tocca a loro */
.online-frasi-casuali span { animation: none; transform: translateX(100vw); }

@keyframes online-frase {
    0% { transform: translateX(100vw); }
    16.667%, 100% { transform: translateX(-100%); }
}

/* Occasioni: le cinque colonne dei colori Tootem */
.occasioni { padding-top: clamp(56px, 8vw, 112px); }

.spot {
    display: grid;
    grid-template-columns: auto minmax(0, 34em);
    justify-content: center;
    align-items: center;
    gap: clamp(32px, 6vw, 96px);
    padding: 0 var(--margine);
}

.spot .schermo { width: min(320px, 72vw); }

.spot video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
}

/* Solo play e pausa al centro: la barra del browser la toglie site.js, così senza script il video si guarda lo stesso */
.spot .schermo { position: relative; }

.spot-play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    margin: auto;
    padding: 0;
    border-radius: 50%;
    background: rgba(9, 49, 70, .78);
    transition: opacity .25s ease, transform .15s ease;
}

.spot-play[hidden] { display: none; }

.spot-play svg { width: 40px; height: 40px; fill: #fff; }

.spot-icona-pausa, .in-riproduzione .spot-icona-play { display: none; }

.in-riproduzione .spot-icona-pausa { display: block; }

.spot-play.via { opacity: 0; }

@media (hover: hover) {
    .spot-play:hover { transform: scale(1.08); }
}

.spot p { margin: 18px 0 26px; }

/* Due righe di etichette che scorrono in versi opposti: quattro copie uguali, si sposta di una copia e riparte senza salti */
.nastro {
    display: grid;
    gap: clamp(8px, 1.2vw, 14px);
    margin-top: clamp(40px, 6vw, 72px);
    padding: 10px 0 clamp(40px, 6vw, 72px);
    overflow: hidden;
}

.nastro-scorre {
    display: flex;
    width: max-content;
    animation: nastro 46s linear infinite;
}

.nastro-inverso { animation-direction: reverse; animation-duration: 54s; }

@keyframes nastro { to { transform: translateX(-25%); } }

.nastro ul {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nastro li {
    --colore: var(--azzurro);
    margin: 2px clamp(2px, .4vw, 6px);
    padding: .22em .7em;
    white-space: nowrap;
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--colore);
    border-radius: 999px;
    rotate: -2deg;
    transition: color .2s ease, background-color .2s ease;
}

/* Un po' in disordine: ognuna con la sua inclinazione e la sua altezza */
.nastro li:nth-child(2) { rotate: 1.5deg; translate: 0 3px; }

.nastro li:nth-child(3) { rotate: -1deg; translate: 0 -3px; }

.nastro li:nth-child(4) { rotate: 2.4deg; translate: 0 2px; }

.nastro li:nth-child(5) { rotate: -2.6deg; translate: 0 -2px; }

.nastro-inverso li:nth-child(1) { rotate: 1.8deg; translate: 0 -2px; }

.nastro-inverso li:nth-child(2) { rotate: -2.2deg; translate: 0 2px; }

.nastro-inverso li:nth-child(3) { rotate: 1deg; translate: 0 3px; }

.nastro-inverso li:nth-child(4) { rotate: -1.4deg; translate: 0 -3px; }

.nastro li:nth-child(4n + 2) { --colore: var(--arancione); }

.nastro li:nth-child(4n + 3) { --colore: var(--oro); }

.nastro li:nth-child(4n) { --colore: var(--petrolio); }

.nastro-inverso li { --colore: var(--turchese); }

.nastro-inverso li:nth-child(4n + 2) { --colore: var(--oro); }

.nastro-inverso li:nth-child(4n + 3) { --colore: var(--petrolio); }

.nastro-inverso li:nth-child(4n) { --colore: var(--azzurro); }

/* Al passaggio la scritta diventa una pillola del suo colore, sempre col testo bianco */
@media (hover: hover) {
    .nastro li:hover { color: #fff; background-color: var(--colore); }
}

/* Piè di pagina: scheda bianca sulle cinque colonne */
.piede-logo {
    display: flex;
    justify-content: center;
    padding: 8px 16px 28px;
    background: var(--carta);
}

.piede-logo a { display: block; }

.piede {
    padding: 30px 16px 28px;
    text-align: center;
    background: linear-gradient(
        to right,
        var(--azzurro) 0 20%,
        var(--turchese) 20% 40%,
        var(--petrolio) 40% 60%,
        var(--oro) 60% 80%,
        var(--arancione) 80% 100%
    );
}

.piede-scheda {
    max-width: 1200px;
    margin: 0 auto;
    padding: 22px 20px;
    background: #fff;
    border-radius: 16px;
}

.piede nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 30px;
    max-width: 600px;
    margin: 0 auto;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--azzurro);
}

.piede nav a {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--petrolio);
}

.piede nav a:hover { text-decoration: underline; text-underline-offset: 5px; }

.piede nav a[aria-current] { color: #0e7288; }

.piede-legale {
    margin: 16px 0 0;
    font-size: 15px;
    letter-spacing: .06em;
}

.piede-legale a { color: #0e7288; text-underline-offset: 4px; }

.piede-credito {
    display: inline-block;
    margin: 18px 0 0;
    padding: 4px 12px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .06em;
    color: #fff;
    background: var(--petrolio);
    border-radius: 6px;
}

/* Telefono: le voci del piè di pagina restano su una riga */
@media (max-width: 640px) {
    .piede nav {
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: 6px;
    }

    .piede nav a {
        font-size: clamp(10px, 3.1vw, 13px);
        letter-spacing: .03em;
        white-space: nowrap;
    }
}

/* Movimento: entrata al caricamento e durante lo scorrimento */
@media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }

    .testata { animation: scendi .6s ease both; }

    .eroe-testo > * { animation: sali .8s cubic-bezier(.2, .7, .2, 1) both; }
    .eroe-testo > :nth-child(1) { animation-delay: .1s; }
    .eroe-testo > :nth-child(2) { animation-delay: .22s; }
    .eroe-testo > :nth-child(3) { animation-delay: .36s; }
    .eroe-testo > :nth-child(4) { animation-delay: .5s; }

    .mascotte, .eroe-foto { animation: compari .9s cubic-bezier(.3, 1.5, .5, 1) .2s both; }

    .mascotte-pupilla {
        transform-box: fill-box;
        transform-origin: center;
        animation: sbatti 5s ease-in-out 1.5s infinite;
    }

    .in-arrivo > * { animation: sali .7s cubic-bezier(.2, .7, .2, 1) both; }

    .rivela {
        transition: opacity .75s ease, translate .75s cubic-bezier(.2, .7, .2, 1), scale .75s cubic-bezier(.3, 1.4, .5, 1), rotate .75s ease;
    }

    .rivela:not(.visibile) {
        opacity: 0;
        translate: 0 34px;
    }

    .duo-piccola.rivela:not(.visibile) {
        translate: none;
        scale: .5;
    }

    .galleria figure.rivela:not(.visibile) { scale: .92; }

    .foto-tonda { animation: galleggia 5s ease-in-out infinite; }
}

@media (prefers-reduced-motion: no-preference) and (min-width: 761px) {
    .stampa.rivela:not(.visibile) {
        rotate: 7deg;
        translate: 0 70px;
    }

    .stampa.rivela:nth-child(2):not(.visibile) { rotate: -6deg; }
}

@keyframes scendi { from { translate: 0 -100%; } }
@keyframes sali { from { opacity: 0; translate: 0 30px; } }
@keyframes compari { from { opacity: 0; scale: .5; rotate: -25deg; } }
@keyframes galleggia { 50% { translate: 0 -8px; } }
@keyframes sbatti {
    0%, 94%, 100% { transform: scaleY(1); }
    97% { transform: scaleY(.1); }
}

@media print {
    .rivela { opacity: 1; translate: none; scale: none; }
}

/* Tablet e telefono */
@media (max-width: 960px) {
    .griglia ul, .griglia ul:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .testata {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: 10px;
    }
    .testata-voci, .testata .bottone-piccolo { display: none; }
    .testata-logo { grid-column: 2; margin: 0; }
    .menu { display: block; grid-column: 3; justify-self: end; }
}

@media (max-width: 760px) {
    body { font-size: 17px; }
    .eroe { grid-template-columns: 1fr; }
    .mascotte { max-width: 210px; grid-row: 1; }
    .eroe-foto { max-width: 260px; grid-row: 1; }
    .modelli-griglia { grid-template-columns: 1fr; }
    .collegamento, .stampa-vai {
        display: block;
        width: fit-content;
        margin-inline: auto;
    }
    .azioni { justify-content: center; }
    .modulo-due { grid-template-columns: 1fr; }
    .modulo button { width: 100%; }
    .griglia ul, .griglia ul:has(> li:nth-child(4):last-child) { grid-template-columns: 1fr; }
    .stampa:nth-child(n) { rotate: none; margin-top: 0; }
    .qualita, .focus, .online { grid-template-columns: 1fr; }
    .online { --frasi: clamp(190px, 56vw, 360px); padding-top: calc(var(--frasi) * .7 - 40px); }
    .focus-media { grid-row: 1; }
    .strisce { height: 20px; }
    .duo-piccola { right: 0; }
    .spot { grid-template-columns: 1fr; justify-items: center; }
    .foto-reali-griglia { grid-template-columns: minmax(0, 480px); }
    .galleria { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .galleria figure:first-child { grid-column: 1 / -1; }
    .galleria figure:first-child img { aspect-ratio: 1; }
    .galleria figcaption { font-size: 15px; }
    .confronto thead { display: none; }
    .confronto tr { display: block; padding: 14px 0; border-bottom: 1px solid var(--bordo); }
    .confronto th, .confronto td { display: block; width: auto; padding: 4px 0; border: 0; }
    .confronto tbody th { width: auto; font-size: 1.15rem; }
    .confronto td::before { content: attr(data-etichetta) ": "; font-weight: 700; color: var(--petrolio); }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .mascotte-anello { animation: none; }
    .stampa, .stampa img, .griglia li, .burger i { transition: none; }
    .testata-voci a::after, .collegamento::after, .stampa-vai::after { animation: none !important; transition: none; }
    .collegamento::before, .stampa-vai::before { transition: none; }
    .bottone::before, .modulo button::before, .tooty form button::before, .tooty-chips button::before, .bottone::after, .modulo button::after, .tooty form button::after, .tooty-chips button::after { transition: none; animation: none !important; }
    .menu[open] nav { animation: none; }
    .nastro-scorre, .online-frasi span { animation: none; }
    .online-frasi span:not(:first-child) { display: none; }
    .nastro-scorre { width: auto; }
    .nastro ul { flex-wrap: wrap; justify-content: center; }
    .nastro ul[aria-hidden] { display: none; }
}

/* Moduli di anteprima e pannello */
.centro {
    min-height: 100vh;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.scheda {
    width: 100%;
    max-width: 380px;
    padding: 24px;
    border: 1px solid var(--bordo);
    border-radius: 14px;
    text-align: left;
}

.scheda h1 { margin-bottom: 16px; }

label {
    display: block;
    margin-bottom: 14px;
    font-weight: 600;
}

input {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 12px;
    font: inherit;
    font-size: 16px;
    border: 1px solid #c5ced5;
    border-radius: 10px;
}

button {
    width: 100%;
    font-family: inherit;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
}

.errore {
    padding: 10px 12px;
    color: #9c1c1c;
    background: #fdecec;
    border-radius: 10px;
}