/* ==========================================================================
   extravirginsoftware.it
   ==========================================================================
   Il tema è quello di nextfuture.it (pink-theme.css + nextfuture.css, file
   identici). Qui c'è solo quello che il tema non ha: le cornici dei
   dispositivi per gli screenshot, l'apertura delle pagine di versione, le
   schede delle versioni, la tabella di confronto e qualche movimento.

   I colori sono quelli del marchio: verde #7A9C30, verde scuro #3A4E1A,
   grigio #6C6C6C. Il verde dei pulsanti del tema (#799532) resta il suo. */

:root {
    --ev-verde: #7a9c30;
    --ev-verde-hover: #5f7d1f;
    --ev-verde-scuro: #3a4e1a;
    --ev-verde-notte: #26321a;
    --ev-verde-chiaro: #f3f6ec;
    --ev-giallo: #c5bb28;
    --ev-grigio: #6c6c6c;
    --ev-linea: #e4e7ec;
    --ev-ombra: 0 30px 60px -20px rgba(28, 40, 12, .35), 0 12px 24px -12px rgba(28, 40, 12, .25);
}

body { background-color: #fff; }

/* Il logo Extravirgin è più largo di quello Nextfuture: altezza fissa, la
   larghezza viene da sé. */
.desktoplogo img { max-height: 46px; width: auto; }
.smllogo img { max-height: 36px; width: auto; }
.ev-footer .footer-logo { max-height: 56px; width: auto; }

.wsmenu > .wsmenu-list > li > a.ev-attivo { color: var(--ev-verde) !important; }
.navbar-light .wsmenu > .wsmenu-list > li > a.ev-attivo { color: #fff !important; text-decoration: underline; text-underline-offset: 6px; }

/* ==========================================================================
   Cornici dei dispositivi
   ========================================================================== */

.ev-browser {
    position: relative;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--ev-ombra);
    border: 1px solid rgba(0, 0, 0, .08);
}

.ev-browser-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 38px;
    padding: 0 16px;
    background: #f1f2ee;
    border-bottom: 1px solid #e2e4dc;
}

.ev-browser-dots { display: flex; gap: 7px; }
.ev-browser-dots i { width: 11px; height: 11px; border-radius: 50%; background: #d5d8cf; }
.ev-browser-dots i:nth-child(1) { background: #e0796a; }
.ev-browser-dots i:nth-child(2) { background: #e7c15a; }
.ev-browser-dots i:nth-child(3) { background: #8fbf5a; }

.ev-browser-url {
    flex: 1;
    max-width: 420px;
    margin: 0 auto;
    height: 24px;
    line-height: 24px;
    border-radius: 6px;
    background: #fff;
    color: #8a8f84;
    font: 500 12px/24px 'Inter', sans-serif;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ev-browser-url svg { width: 11px; height: 11px; margin-right: 5px; vertical-align: -1px; }

.ev-browser img { display: block; width: 100%; height: auto; }

/* iPad e iPhone
   --------------------------------------------------------------------------
   Disegnati come quelli veri: cornice di metallo sottile, vetro nero
   uniforme intorno allo schermo, angoli dello schermo concentrici a quelli
   del corpo. Tutte le misure sono in cqw, cioè in centesimi della larghezza
   del dispositivo: lo stesso iPhone è identico a 120 o a 300 pixel, e non
   c'è più un bordo fisso che a dimensioni piccole diventa una cornice
   spessa. Il contenitore (.ev-tablet / .ev-phone) è quello che si
   posiziona e si anima; il disegno sta dentro. */

.ev-tablet,
.ev-phone {
    position: relative;
    container-type: inline-size;
}

.ev-corpo {
    position: relative;
    filter: drop-shadow(0 28px 34px rgba(28, 40, 12, .28)) drop-shadow(0 8px 12px rgba(28, 40, 12, .18));
}

.ev-vetro { position: relative; background: #060607; overflow: hidden; }
.ev-vetro img { display: block; width: 100%; height: auto; }
.ev-schermo { position: relative; overflow: hidden; background: #fff; }

/* Barra di stato: bianca come l'intestazione dell'app che le sta sotto */
.ev-stato {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    color: #111;
    font-family: -apple-system, 'Inter', sans-serif;
    font-weight: 600;
    line-height: 1;
}

.ev-stato-icone { display: flex; align-items: center; }
.ev-stato svg { display: block; fill: currentColor; height: 1em; width: auto; }

.ev-phone .ev-stato { height: 13cqw; padding: 1.2cqw 8cqw 0 10cqw; font-size: 4.4cqw; }
.ev-phone .ev-stato-icone { gap: 1.6cqw; }
.ev-phone .ev-stato svg { height: 3.4cqw; }
.ev-phone .ev-stato svg:last-child { height: 3.8cqw; }

.ev-tablet .ev-stato { height: 2.1cqw; padding: 0 1.6cqw; font-size: 1cqw; }
.ev-tablet .ev-stato-icone { gap: .5cqw; }
.ev-tablet .ev-stato svg { height: .85cqw; }

/* iPad Pro 13" (M4) in orizzontale, Space Black.
   Il vetro nero è sottilissimo (circa 2% del lato lungo) e uguale su tutti
   i lati, il profilo di alluminio è piatto e scuro, la fotocamera sta al
   centro del lato lungo. Schermo 4:3, come le schermate a 1376x1032. */
.ev-tablet .ev-corpo {
    padding: .32cqw;
    border-radius: 3.5cqw;
    background: linear-gradient(160deg, #5a5c60 0%, #2a2b2e 30%, #3c3d41 62%, #1f2022 100%);
    box-shadow: inset 0 0 0 .08cqw rgba(255, 255, 255, .18);
}

.ev-tablet .ev-vetro { padding: 2.05cqw; border-radius: 3.2cqw; }
.ev-tablet .ev-schermo { border-radius: 1.45cqw; }

.ev-tablet .ev-vetro:before {
    content: "";
    position: absolute;
    top: .78cqw;
    left: 50%;
    width: .55cqw;
    height: .55cqw;
    margin-left: -.275cqw;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #2f3a52, #08090c 70%);
}

/* Volume sul lato lungo in alto a destra, tasto superiore sul lato corto */
.ev-tablet .ev-corpo:before,
.ev-tablet .ev-corpo:after {
    content: "";
    position: absolute;
    background: #3a3b3f;
}

.ev-tablet .ev-corpo:before { top: -.22cqw; right: 7cqw; width: 3.6cqw; height: .26cqw; border-radius: .2cqw .2cqw 0 0; box-shadow: -4.4cqw 0 0 #3a3b3f; }
.ev-tablet .ev-corpo:after { right: -.22cqw; top: 4.5cqw; width: .26cqw; height: 4.4cqw; border-radius: 0 .2cqw .2cqw 0; }

/* iPhone 15 Pro: titanio, bordo nero di circa 3,5% e Dynamic Island */
.ev-phone .ev-corpo {
    padding: 1.25cqw;
    border-radius: 17.5cqw;
    background: linear-gradient(150deg, #8f9296 0%, #4d5054 18%, #a3a6aa 46%, #3e4144 74%, #85888c 100%);
}

.ev-phone .ev-vetro { padding: 3.4cqw; border-radius: 16.3cqw; }
.ev-phone .ev-schermo { border-radius: 12.8cqw; }

.ev-phone .ev-vetro:before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 5.4cqw;
    left: 50%;
    width: 30cqw;
    height: 8.6cqw;
    margin-left: -15cqw;
    border-radius: 5cqw;
    background: #060607;
}

/* Tasto azione e volume a sinistra, accensione a destra */
.ev-phone .ev-corpo:before,
.ev-phone .ev-corpo:after {
    content: "";
    position: absolute;
    background: #5d6064;
}

.ev-phone .ev-corpo:before { left: -.7cqw; top: 22cqw; width: .8cqw; height: 7cqw; border-radius: .5cqw 0 0 .5cqw; box-shadow: 0 11cqw 0 #5d6064, 0 23cqw 0 #5d6064; }
.ev-phone .ev-corpo:after { right: -.7cqw; top: 33cqw; width: .8cqw; height: 17cqw; border-radius: 0 .5cqw .5cqw 0; }

/* Tre dispositivi insieme: il browser fa da sfondo, tablet e telefono gli
   stanno davanti ai due lati. Le misure sono in percentuale della scena,
   così la composizione resta la stessa a ogni larghezza. */
.ev-scena {
    position: relative;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 7% 8%;
}

.ev-scena .ev-tablet {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 47%;
}

.ev-scena .ev-phone {
    position: absolute;
    right: 1%;
    bottom: -2%;
    width: 12.5%;
}

/* Il tablet è un iPad Pro 13" in orizzontale: alto circa una volta e mezza
   un iPhone. Le larghezze qui sotto tengono quel rapporto (circa 1,4) in
   tutte le scene dove stanno insieme; prima l'iPad veniva più basso del
   telefono. */

/* ==========================================================================
   Movimento
   ==========================================================================
   Poco e lento: i dispositivi galleggiano, entrano dal basso. Chi ha chiesto
   al sistema meno animazioni non vede niente di tutto questo. */

@keyframes ev-galleggia {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

@keyframes ev-entra {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}

.ev-galleggia { animation: ev-galleggia 6s ease-in-out infinite; }
.ev-galleggia-lento { animation: ev-galleggia 8s ease-in-out infinite 1.2s; }
.ev-entra { animation: ev-entra 1s cubic-bezier(.2, .7, .2, 1) both; }
.ev-entra-2 { animation-delay: .25s; }
.ev-entra-3 { animation-delay: .5s; }

/* La parallasse la muove extravirgin.js con questa variabile. È `translate`
   e non `transform`: così si somma al galleggiare invece di annullarlo. */
.ev-parallasse { translate: 0 var(--ev-sposta, 0px); }

@media (prefers-reduced-motion: reduce) {
    .ev-galleggia, .ev-galleggia-lento, .ev-entra { animation: none; }
    .ev-parallasse { translate: none; }
    .wow { visibility: visible !important; animation: none !important; }
}

/* ==========================================================================
   Apertura della home: fondo chiaro con gli archi del logo (proposta C)
   ========================================================================== */

.ev-hero {
    position: relative;
    padding-top: 170px;
    text-align: center;
    background:
        url(../images/sfondo-archi.svg?v=2) right -120px top -60px / 70% auto no-repeat,
        linear-gradient(180deg, #f3f6ec 0%, #fbfcf8 100%);
}

.ev-hero h1 { color: #1b230f; line-height: 1.1; letter-spacing: -1.5px; }
.ev-hero p.s-20 { color: #4b5046; max-width: 760px; margin-left: auto; margin-right: auto; }
.ev-hero .ev-scena { margin-top: 60px; margin-bottom: -140px; }
.ev-hero + section, .ev-hero + div { padding-top: 170px !important; }


/* ==========================================================================
   Apertura delle pagine di versione (chiara, testo a sinistra)
   ========================================================================== */

.ev-page-hero {
    position: relative;
    overflow: hidden;
    padding-top: 170px;
    padding-bottom: 90px;
    background:
        url(../images/sfondo-archi.svg?v=2) right -120px top -60px / 70% auto no-repeat,
        linear-gradient(180deg, #f3f6ec 0%, #fbfcf8 70%, #fff 100%);
}

.ev-page-hero:after {
    content: "";
    position: absolute;
    right: -10%;
    top: -20%;
    width: 60%;
    height: 120%;
    background: radial-gradient(closest-side, rgba(122, 156, 48, .12), rgba(122, 156, 48, 0));
    pointer-events: none;
}

.ev-page-hero .container { position: relative; z-index: 1; }
.ev-page-hero h1 { line-height: 1.1; letter-spacing: -1.2px; margin-bottom: 22px; overflow-wrap: break-word; }
@media (min-width: 992px) { .ev-page-hero .col-lg-5 h1 { font-size: 3.1rem; } }
/* iPad in orizzontale (1024-1180): la colonna è stretta e a 50px il titolo
   va su cinque righe e spinge i pulsanti sotto la piega. */
@media (min-width: 992px) and (max-width: 1199.98px) { .ev-page-hero .col-lg-5 h1 { font-size: 2.4rem; } }
/* Fino a 1399 la colonna non tiene «Parla con un commerciale» accanto a
   «Guarda le funzioni»: uno sotto l'altro, della stessa larghezza, invece
   di due misure diverse. */
@media (min-width: 992px) and (max-width: 1399.98px) {
    .ev-page-hero .col-lg-5 .btns-group .btn { display: block; width: 100%; max-width: 300px; margin: 0 0 12px; }
}
/* Da 1400 in su affiancati: con il padding pieno sforavano la colonna di 3
   pixel e il secondo pulsante andava a capo. */
@media (min-width: 1400px) { .ev-page-hero .col-lg-5 .btns-group .btn { padding-left: 24px; padding-right: 24px; } }
/* Righe del titolo bilanciate: niente parola da sola sull'ultima. */
.ev-hero h1, .ev-page-hero h1 { text-wrap: balance; }
.ev-page-hero .p-xl { color: #4b5046; }
.ev-page-hero .btns-group { margin-top: 30px; }
.ev-page-hero .ev-scena { padding-right: 0; padding-left: 12%; }
.ev-page-hero .ev-scena .ev-tablet { width: 52%; left: 0; bottom: -4%; }
.ev-page-hero .ev-scena .ev-phone { width: 13.5%; right: -2%; }

.ev-sopratitolo {
    display: block;
    margin-bottom: 16px;
    color: var(--ev-verde);
    font-weight: 700;
    font-size: 1.05rem;
}

.ev-fatti {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    margin-top: 34px;
    padding-top: 22px;
    border-top: 1px solid var(--ev-linea);
}

.ev-fatti p { margin: 0; font-size: .95rem; color: #555; }
.ev-fatti strong { display: block; color: #111; font-size: 1.05rem; }

/* ==========================================================================
   Schede delle versioni
   ========================================================================== */

.ev-versioni .col { margin-bottom: 24px; }
/* Schede compatte: su un monitor intero si vedono tutte e quattro con margine. */
.ev-versione .btn { padding: 10px 22px; font-size: .95rem; }

.ev-versione {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 26px 24px 24px;
    background: #fff;
    border: 1px solid var(--ev-linea);
    border-top: 4px solid #d9ddd2;
    border-radius: 12px;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.ev-versione:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 44px -24px rgba(28, 40, 12, .35);
    border-top-color: var(--ev-verde);
}

.ev-versione.ev-versione-mini { border-top-color: var(--ev-verde); background: linear-gradient(180deg, #f5f8ee, #fff 45%); }

.ev-versione-sigla {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1;
    color: #111;
    margin-bottom: 6px;
}

.ev-versione-sigla small { font-size: 1rem; font-weight: 700; color: var(--ev-verde); letter-spacing: 0; margin-left: 6px; white-space: nowrap; }
/* Nelle schede strette «Accesso anticipato» va sotto il nome, su una riga. */
@media (min-width: 992px) and (max-width: 1599.98px) { .ev-versione-sigla small { display: block; margin: 4px 0 0; } }
.ev-versione-dove { font-size: .84rem; line-height: 1.45; color: var(--ev-grigio); margin-bottom: 12px; }
.ev-versione-per { font-weight: 700; color: #111; margin-bottom: 6px; line-height: 1.35; }
.ev-versione p.ev-versione-riassunto { color: #555; font-size: .9rem; line-height: 1.55; margin-bottom: 10px; }

.ev-versione ul { list-style: none; padding: 0; margin: 4px 0 18px; }
.ev-versione li {
    position: relative;
    padding: 5px 0 5px 24px;
    border-top: 1px solid #eef0ea;
    font-size: .86rem;
    line-height: 1.45;
    color: #333;
}

.ev-versione li:before {
    content: "";
    position: absolute;
    left: 2px;
    top: 11px;
    width: 11px;
    height: 6px;
    border-left: 2px solid var(--ev-verde);
    border-bottom: 2px solid var(--ev-verde);
    transform: rotate(-45deg);
}

.ev-versione .btn { margin-top: auto; align-self: flex-start; }

/* Perché Extravirgin: le righe del tema sono fatte per un numero fisso di
   schede, qui servono solo un po' d'aria fra una riga e l'altra */
.ev-vantaggio { margin-bottom: 44px; }

/* ==========================================================================
   Su ogni dispositivo: tre schermi affiancati
   ========================================================================== */

.ev-ovunque { background: var(--ev-verde-notte); color: #dfe6d2; overflow: hidden; }
.ev-ovunque h2, .ev-ovunque h3 { color: #fff; }
.ev-ovunque .section-title p { color: #c6d1b4; }

.ev-ovunque-scena {
    display: grid;
    grid-template-columns: 1.6fr 2.3fr 0.4fr;
    gap: 4%;
    align-items: end;
    max-width: 1100px;
    margin: 0 auto;
}

.ev-ovunque-scena figure { margin: 0; }
.ev-ovunque-scena figcaption {
    margin-top: 18px;
    text-align: center;
    color: #c6d1b4;
    font-size: .95rem;
    font-weight: 600;
}

.ev-ovunque-punti { margin-top: 70px; }
.ev-ovunque-punti h3 { font-size: 1.25rem; margin-bottom: 10px; }
.ev-ovunque-punti p { color: #c6d1b4; }

/* ==========================================================================
   Sezioni alternate testo + schermata
   ========================================================================== */

.ev-funzione { padding-top: 100px; }
.ev-funzione .txt-block h2 { margin-bottom: 20px; }
.ev-funzione .simple-list .list-item p { margin-bottom: 10px; }

.ev-elenco { list-style: none; padding: 0; margin: 22px 0 0; }
.ev-elenco li {
    position: relative;
    padding: 9px 0 9px 30px;
    border-top: 1px solid var(--ev-linea);
    color: #333;
}

.ev-elenco li:last-child { border-bottom: 1px solid var(--ev-linea); }

.ev-elenco li:before {
    content: "";
    position: absolute;
    left: 3px;
    top: 16px;
    width: 13px;
    height: 7px;
    border-left: 2px solid var(--ev-verde);
    border-bottom: 2px solid var(--ev-verde);
    transform: rotate(-45deg);
}

.ev-fondo-chiaro { background-color: #f7f8f4; }

/* ==========================================================================
   Numeri
   ========================================================================== */

.ev-numeri { border-top: 1px solid var(--ev-linea); border-bottom: 1px solid var(--ev-linea); }
.ev-numeri .col { padding-top: 40px; padding-bottom: 40px; }
.ev-numeri .col + .col { border-left: 1px solid var(--ev-linea); }
.ev-numero { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 2.8rem; letter-spacing: -1.5px; color: #111; line-height: 1; }
.ev-numero-txt { margin: 10px 0 0; color: var(--ev-grigio); font-size: .98rem; }

/* ==========================================================================
   Tabella di confronto
   ========================================================================== */

.ev-confronto-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--ev-linea);
    border-radius: 12px;
    background: #fff;
}

.ev-confronto { width: 100%; min-width: 760px; border-collapse: collapse; table-layout: fixed; font-size: .95rem; }
.ev-confronto col.ev-c-funzione { width: 31%; }
.ev-confronto col.ev-c-mini { width: 21%; }
.ev-confronto col.ev-c-altra { width: 16%; }
.ev-confronto th, .ev-confronto td { padding: 14px 16px; border-bottom: 1px solid #eef0ea; vertical-align: middle; }
.ev-confronto tbody tr:nth-child(even) { background: #fafbf8; }
.ev-confronto tbody tr:last-child th, .ev-confronto tbody tr:last-child td { border-bottom: 0; }
.ev-confronto thead th {
    position: sticky;
    top: 0;
    background: #fff;
    text-align: center;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    font-size: 1.1rem;
    color: #111;
    border-bottom: 2px solid #111;
}

.ev-confronto thead th a { color: inherit; }
.ev-confronto thead th a:hover { color: var(--ev-verde); }
.ev-confronto thead th small { display: block; font-family: 'Inter', sans-serif; font-weight: 500; font-size: .8rem; color: var(--ev-grigio); }
.ev-confronto thead th:first-child { text-align: left; }
.ev-confronto tbody th { text-align: left; font-weight: 600; color: #222; width: 34%; }
.ev-confronto td { text-align: center; color: #444; }
.ev-confronto .ev-col-mini { background: rgba(122, 156, 48, .06); }
.ev-confronto thead .ev-col-mini { background: #f3f6ec; }
/* La riga dei limiti di MINI si deve notare: fondo caldo e testo pieno. */
.ev-confronto tbody tr.ev-riga-limiti,
.ev-confronto tbody tr.ev-riga-limiti th { background: #fbf7e4; }
.ev-confronto tr.ev-riga-limiti td.ev-col-mini { background: #f6efcc; }
.ev-confronto tr.ev-riga-limiti .ev-nota { color: #111; font-weight: 600; }

/* Da telefono: la colonna delle funzioni resta ferma a sinistra e si
   scorrono le versioni; prima si vedeva solo MINI, con il testo tagliato, e
   niente diceva che c'erano anche BASE, CONF e PRO. */
.ev-confronto-scorri { display: none; margin: 0 0 12px; font-size: .9rem; color: var(--ev-grigio); }
@media (max-width: 767.98px) {
    .ev-confronto-scorri { display: block; }
    .ev-confronto { min-width: 620px; font-size: .85rem; }
    .ev-confronto col.ev-c-funzione { width: 25%; }
    .ev-confronto col.ev-c-mini { width: 22%; }
    .ev-confronto col.ev-c-altra { width: 17.6%; }
    .ev-confronto th, .ev-confronto td { padding: 10px 10px; }
    .ev-confronto thead th { font-size: 1rem; }
    .ev-confronto thead th:first-child,
    .ev-confronto tbody th { position: sticky; left: 0; z-index: 1; background: #fff; box-shadow: 1px 0 0 #e3e6dd; }
    .ev-confronto thead th:first-child { z-index: 2; }
    .ev-confronto tbody tr:nth-child(even) th { background: #fafbf8; }
}

.ev-si, .ev-no { display: inline-block; width: 22px; height: 22px; position: relative; }
.ev-si:before {
    content: "";
    position: absolute;
    left: 5px;
    top: 5px;
    width: 13px;
    height: 7px;
    border-left: 2.5px solid var(--ev-verde);
    border-bottom: 2.5px solid var(--ev-verde);
    transform: rotate(-45deg);
}

.ev-no:before { content: ""; position: absolute; left: 6px; top: 10px; width: 10px; height: 2px; background: #c3c7bd; }
.ev-nota { font-size: .85rem; color: var(--ev-grigio); display: block; line-height: 1.35; margin-top: 2px; }

/* La prima colonna resta ferma quando su telefono la tabella scorre */
@media (max-width: 767.98px) {
    .ev-confronto tbody th, .ev-confronto thead th:first-child {
        position: sticky;
        left: 0;
        z-index: 1;
        background: #fff;
        box-shadow: 1px 0 0 #eef0ea;
        min-width: 170px;
    }
    .ev-confronto tbody tr:nth-child(even) th { background: #fafbf8; }
}

/* ==========================================================================
   Limiti di MINI: righe pulite, non card
   ========================================================================== */

.ev-limiti { border-top: 2px solid #111; }
.ev-limiti .row { border-bottom: 1px solid var(--ev-linea); padding: 22px 0; margin: 0; }
.ev-limiti .ev-limite-num { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 2.2rem; letter-spacing: -1px; color: #111; line-height: 1; }
.ev-limiti p { margin: 0; color: #555; }

/* ==========================================================================
   Banner finale
   ========================================================================== */

.ev-cta {
    position: relative;
    overflow: hidden;
    padding: 80px 7%;
    border-radius: 16px;
    background: var(--ev-verde-scuro) url(../images/hero-12.webp) center / cover no-repeat;
    color: #fff;
    text-align: center;
}

.ev-cta:before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(38, 50, 26, .82), rgba(58, 78, 26, .55)); }
.ev-cta > * { position: relative; }
.ev-cta h2 { color: #fff; margin-bottom: 18px; }
.ev-cta p { color: #e6ecd8; max-width: 640px; margin: 0 auto 30px; }
.ev-cta .btn + .btn { margin-left: 12px; }
.ev-cta .p-sm { margin: 18px auto 0; opacity: .85; }

/* ==========================================================================
   Domande frequenti
   ========================================================================== */

.ev-faq .accordion-item { border: 0; border-bottom: 1px solid var(--ev-linea); border-radius: 0 !important; background: transparent; }
.ev-faq .accordion-button { padding: 22px 0; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 1.12rem; color: #111; background: transparent; box-shadow: none; }
.ev-faq .accordion-button:not(.collapsed) { color: var(--ev-verde-scuro); }
.ev-faq .accordion-body { padding: 0 0 22px; color: #555; }

/* ==========================================================================
   Contatti
   ========================================================================== */

.ev-contatti-canali { list-style: none; padding: 0; margin: 30px 0 0; }
.ev-contatti-canali li { padding: 16px 0; border-top: 1px solid var(--ev-linea); }
.ev-contatti-canali li:last-child { border-bottom: 1px solid var(--ev-linea); }
.ev-contatti-canali strong { display: block; color: #111; }
.ev-contatti-canali a { color: var(--ev-verde-scuro); font-weight: 600; }

.ev-form { padding: 40px; border: 1px solid var(--ev-linea); border-radius: 14px; background: #fff; box-shadow: 0 30px 60px -40px rgba(28, 40, 12, .4); }
.ev-form .form-control, .ev-form .form-select { height: 54px; margin-bottom: 18px; border-radius: 8px; }
.ev-form textarea.form-control { height: auto; min-height: 120px; }
.ev-form label.ev-label { font-weight: 600; font-size: .92rem; color: #222; margin-bottom: 6px; }

/* ==========================================================================
   Adattamenti
   ========================================================================== */

@media (max-width: 991.98px) {
    .ev-hero { padding-top: 130px; background-size: 140% auto, auto; }
    .ev-hero .ev-scena { margin-bottom: -90px; }
    .ev-hero + section, .ev-hero + div { padding-top: 150px !important; }
    .ev-page-hero { padding-top: 130px; padding-bottom: 60px; }
    .ev-page-hero .ev-scena { margin-top: 50px; padding-left: 10%; padding-right: 6%; }
    .ev-ovunque-scena { grid-template-columns: 1.55fr 2.1fr 0.42fr; }
}

@media (max-width: 767.98px) {
    .ev-hero h1 { font-size: 2.2rem; letter-spacing: -.8px; }
    .ev-page-hero h1 { font-size: 2.1rem; }
    .ev-hero .ev-scena { margin-top: 40px; margin-bottom: -60px; padding-bottom: 12%; }
    .ev-hero + section, .ev-hero + div { padding-top: 110px !important; }
    .ev-scena .ev-tablet { display: none; }
    /* Da telefono la scena ha solo computer e iPhone: l'iPhone più basso
       della finestra del computer, non più alto. */
    .ev-scena .ev-phone, .ev-page-hero .ev-scena .ev-phone { width: 21%; right: 0; }
    .ev-browser-bar { height: 26px; padding: 0 10px; }
    .ev-browser-dots i { width: 7px; height: 7px; }
    .ev-browser-url { display: none; }
    /* Numeri in griglia 2x2: linea fra le due colonne e fra le due righe. */
    .ev-numeri .col + .col { border-left: 0; }
    .ev-numeri .col:nth-child(2n) { border-left: 1px solid var(--ev-linea); }
    .ev-numeri .col:nth-child(n+3) { border-top: 1px solid var(--ev-linea); }
    .ev-numeri .col { padding-top: 26px; padding-bottom: 26px; }
    .ev-ovunque-scena { grid-template-columns: 2.4fr 0.65fr; gap: 20px; }
    .ev-ovunque-scena .ev-ovunque-desk { grid-column: 1 / -1; order: -1; }
    .ev-cta { padding: 56px 22px; }
    .ev-cta .btn { display: block; margin: 0 0 12px !important; }
    .ev-form { padding: 24px 18px; }
    .ev-limiti .ev-limite-num { margin-bottom: 8px; }
}

/* Elenco di quello che una versione non ha: un trattino grigio al posto
   della spunta verde */
.ev-elenco-no li { color: #555; }
.ev-elenco-no li:before { border: 0; transform: none; top: 20px; left: 4px; width: 12px; height: 2px; background: #b9bdb2; }

.ev-telefoni h3 { color: #fff; }
.ev-telefoni p { color: #c6d1b4; font-size: .95rem; }
.ev-telefoni .ev-phone { max-width: 250px; margin: 0 auto; }

/* Tablet e telefono affiancati in una colonna: il telefono più piccolo,
   allineato a destra, così l'iPad resta il più alto dei due. */
.ev-coppia-telefono .ev-phone { width: 92%; margin-left: auto; }
/* Computer e telefono affiancati: il telefono resta più basso della finestra
   del computer, come nella realtà. */
.ev-coppia-browser .ev-phone { width: 88%; margin-left: auto; }

.ev-elenco-scuro li { color: #dfe6d2; border-color: rgba(255, 255, 255, .14) !important; }
.ev-elenco-scuro li:before { border-color: #a9c46a; }

.ev-form-ok { padding: 20px 0; }
.ev-form-ok h3 { color: var(--ev-verde-scuro); margin-bottom: 12px; }

/* Le caselle del consenso: nel tema sono quasi bianche su bianco */
.ev-form .form-check-input {
    width: 18px;
    height: 18px;
    border: 1.5px solid #9aa08f;
    background-color: #fff;
    opacity: 1;
}
.ev-form .form-check-input:checked { background-color: var(--ev-verde); border-color: var(--ev-verde); }
.ev-form .form-check-input:focus { box-shadow: 0 0 0 .2rem rgba(122, 156, 48, .2); }

/* L'annuncio del browser nelle pagine delle versioni Windows */
.ev-annuncio { margin: 18px 0 0; font-size: .95rem; color: #4b5046; }
.ev-annuncio a { color: var(--ev-verde-scuro); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.ev-page-hero-corta { padding-bottom: 40px; }

/* ==========================================================================
   Schermate in stile SaaS
   ==========================================================================
   .ev-vetrina è il pannello chiaro con gli archi del logo che fa da fondo
   alle schermate delle sezioni. .ev-app è la finestra di Extravirgin per
   Windows (barra del titolo chiara al posto di quella nera del programma),
   con l'ingrandimento del dettaglio che galleggia sopra un angolo. */

.ev-vetrina {
    position: relative;
    padding: 9% 8% 10%;
    border-radius: 18px;
    background:
        url(../images/sfondo-archi-tenue.svg?v=2) right -6% top -14% / 115% auto no-repeat,
        linear-gradient(160deg, #eef2e3 0%, #f6f8f1 100%);
}

.ev-fondo-chiaro .ev-vetrina {
    background:
        url(../images/sfondo-archi-tenue.svg?v=2) right -6% top -14% / 115% auto no-repeat,
        #fff;
}


.ev-app { position: relative; }

.ev-app-finestra {
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid rgba(28, 40, 12, .12);
    background: #fff;
    box-shadow: var(--ev-ombra);
}

.ev-app-finestra > img { display: block; width: 100%; height: auto; }

.ev-app-barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 30px;
    padding: 0 0 0 12px;
    background: #f3f4f1;
    border-bottom: 1px solid #e3e5df;
}

.ev-app-titolo { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: #4b5046; line-height: 1; }
.ev-app-titolo img { width: 16px; height: 16px; display: block; }

/* I tre tasti di Windows 11: riduci, ingrandisci, chiudi */
.ev-app-tasti { display: flex; height: 100%; }
.ev-app-tasti i { position: relative; width: 40px; height: 100%; }
.ev-app-tasti i:before { content: ""; position: absolute; left: 50%; top: 50%; translate: -50% -50%; }
.ev-app-tasti i:nth-child(1):before { width: 10px; height: 1px; background: #555; }
.ev-app-tasti i:nth-child(2):before { width: 9px; height: 9px; border: 1px solid #555; border-radius: 1.5px; }
.ev-app-tasti i:nth-child(3):before,
.ev-app-tasti i:nth-child(3):after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1px; background: #555; translate: -50% -50%; rotate: 45deg; }
.ev-app-tasti i:nth-child(3):after { rotate: -45deg; }

.ev-app-dett {
    position: absolute;
    left: -7%;
    bottom: -9%;
    width: var(--largo, 50%);
    z-index: 2;
}

.ev-vetrina-sx .ev-app-dett { left: auto; right: -7%; }

.ev-app-dett > div {
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid rgba(28, 40, 12, .14);
    background: #fff;
    box-shadow: 0 24px 48px -16px rgba(28, 40, 12, .45), 0 8px 16px -8px rgba(28, 40, 12, .25);
}

.ev-app-dett img { display: block; width: 100%; height: auto; }

/* Nelle aperture delle pagine di versione la finestra sta sul fondo con gli archi */
.ev-page-hero .ev-app { margin: 0 0 40px 6%; }
.ev-page-hero .ev-app-dett { left: -9%; bottom: -12%; }

@media (max-width: 767.98px) {
    .ev-vetrina { padding: 8% 6% 14%; border-radius: 14px; }
    .ev-app-dett, .ev-vetrina-sx .ev-app-dett { left: auto; right: 4%; bottom: -10%; width: calc(var(--largo, 50%) + 14%); }
    .ev-app-barra { height: 24px; padding-left: 9px; }
    .ev-app-titolo { font-size: 10.5px; }
    .ev-app-tasti i { width: 28px; }
    .ev-page-hero .ev-app { margin: 0 0 50px; }
    .ev-page-hero .ev-app-dett { left: auto; right: 4%; }
}

/* I tre passi dell'attivazione di MINI: elenco numerato semplice */
.ev-passi { margin: 0; padding-left: 1.3em; }
.ev-passi li { padding: 6px 0 6px 4px; color: #4b5046; }
.ev-passi li::marker { color: var(--ev-verde); font-weight: 700; }

/* ==========================================================================
   Funzionalità (/funzionalita/)
   ========================================================================== */

/* In quali versioni c'è l'area: una riga sotto il testo, staccata da una
   linea sottile come gli elenchi. */
.ev-in-versioni {
    margin: 22px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--ev-linea);
    font-size: .95rem;
    color: #4b5046;
}
.ev-in-versioni a { color: var(--ev-verde-scuro); font-weight: 600; }
.ev-in-versioni a:hover { color: var(--ev-verde); }

.ev-attorno > div { margin-bottom: 34px; }
.ev-attorno h3 { margin-bottom: 10px; }