/*
 * Mecar — le aggiunte del CMS al vecchio aspetto: la testata della home al
 * posto di Revolution Slider, l'avviso dei cookie, la mappa in attesa del
 * consenso, l'esito del modulo. Il resto lo fanno i CSS del tema Stargaze e
 * di Elementor in tema/wp/ e nelle teste di parti/.
 */
[hidden] { display: none !important; }

/* La palette di Mecar (i colori globali di Elementor del vivo):
   blu #1E2D51, salvia #92B7A0. */
:root { --mecar-blu: #1E2D51; --mecar-salvia: #92B7A0; }

/* ─── La testata della home ─────────────────────────────────── */
/* Sta al posto del widget dello slider, dentro un contenitore flex di Elementor:
   la larghezza va detta, i figli sono tutti in assoluto. */
.mecar-hero { position: relative; width: 100%; height: clamp(690px, calc(666px + 1.62vw), 702px); overflow: hidden; background: var(--mecar-blu); font-family: 'Oswald', sans-serif; }
.mecar-hero-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility 0s .9s; }
.mecar-hero-slide.is-attiva { opacity: 1; visibility: visible; transition: opacity .9s ease; z-index: 1; }
/* Come nello slider: la foto entra da 110% e sfocata a 100% in 2 s. */
/* .elementor img dà height: auto: serve un selettore più forte. */
.mecar-hero img.mecar-hero-sfondo { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.mecar-hero-slide.is-attiva .mecar-hero-sfondo { animation: mecar-hero-zoom 2s cubic-bezier(.65, 0, .35, 1) both; }
@keyframes mecar-hero-zoom { from { transform: scale(1.1); filter: blur(20px); } to { transform: scale(1); filter: none; } }
/* La velatura blu della riga dello slider: dall'alto fin quasi in fondo. */
.mecar-hero-velo { position: absolute; left: 0; right: 0; top: 0; height: 89%; background: rgba(30, 45, 81, .4); }
.mecar-hero-riga { position: relative; height: 100%; padding: 80px 0 0 60px; box-sizing: border-box; }
.mecar-hero-colonna { width: 50%; text-align: right; }
.mecar-hero-titolo {
    margin: 0 0 70px; color: #fff; font: 500 90px/90px 'Oswald', sans-serif; letter-spacing: 0; text-transform: none;
    animation: mecar-hero-entra 1s cubic-bezier(.16, 1, .3, 1) both .3s;
}
.mecar-hero-slide:not(.is-attiva) .mecar-hero-titolo { animation: none; }
@keyframes mecar-hero-entra { from { opacity: 0; filter: blur(10px); transform: translateX(50px); } to { opacity: 1; filter: none; transform: none; } }
.mecar-hero-scopri, .mecar-hero-chiudi {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 35px; padding: 0 10px; min-width: 135px; box-sizing: border-box;
    font: 300 15px/30px 'Oswald', sans-serif; color: var(--mecar-blu); background: #fff;
    border: 1px solid #fff; border-radius: 15px; cursor: pointer; transition: all .2s;
}
.mecar-hero-scopri:hover, .mecar-hero-scopri:focus-visible { color: #fff; background: var(--mecar-blu); text-decoration: underline; }
/* Le frecce: due caselle 50×35 a 32 px l'una dall'altra, ognuna spinta verso l'esterno,
   sotto il bottone di quanto lo slider metteva lo spaziatore (2vw). */
.mecar-hero-frecce { display: flex; justify-content: flex-end; gap: 32px; margin-top: 2vw; }
.mecar-hero-frecce button { width: 50px; height: 35px; padding: 0; color: #fff; background: none; border: 0; cursor: pointer; font: 200 24px/27px 'Oswald', sans-serif; }
.mecar-hero-prima { text-align: left; }
.mecar-hero-dopo { text-align: right; }
.mecar-hero-frecce button:hover, .mecar-hero-frecce button:focus-visible { color: var(--mecar-salvia); }
@font-face { font-family: 'MecarFA4'; src: url('/tema/font/fontawesome-webfont.woff2') format('woff2'); font-display: block; }
.mecar-fa { display: inline-block; font: normal normal normal 1em/1 'MecarFA4'; -webkit-font-smoothing: antialiased; }
.mecar-fa-prima::before { content: '\f177'; }
.mecar-fa-dopo::before { content: '\f178'; }

/* La scheda di una diapositiva (le diapositive nascoste dello slider), misurata sul
   vivo il 28/10/2026. Da 1460 px: due colonne, a sinistra logo, titolo blu, testo e
   «Chiudi», a destra la foto. Sotto: tutto in colonna e la foto in fondo, testi neri.
   Le misure che cambiano da scheda a scheda (loghi, titolo, margini) arrivano dal
   markup come --x0…--x3, una per livello; i loghi scalano come nello slider (--sc). */
.mecar-hero.in-dettaglio { height: auto; background: #fff; }
.mecar-hero.in-dettaglio .mecar-hero-slide { display: none; }
.mecar-hero-dettaglio {
    --sc: min(1px, 100vw / 2000); --ts: var(--ts0); --tl: var(--tl0); --tmt: var(--tmt0); --tmb: var(--tmb0); --pmb: var(--pmb0);
    --colore: var(--mecar-blu);
    position: relative; z-index: 2; display: flex; align-items: flex-start; padding: 30px; box-sizing: border-box; background: #fff;
}
.mecar-hero-det-testo { flex: 0 0 50%; padding: 0 80px; box-sizing: border-box; text-align: center; }
.mecar-hero-det-foto { flex: 0 0 50%; }
.mecar-hero-loghi { display: flex; justify-content: center; align-items: center; }
.mecar-hero-loghi img {
    --w: var(--w0); --h: var(--h0); --mr: var(--mr0);
    width: calc(var(--w) * var(--sc)); height: calc(var(--h) * var(--sc)); max-width: none; margin-right: calc(var(--mr) * var(--sc)); object-fit: contain;
}
.mecar-hero .mecar-hero-dettaglio-titolo {
    margin: calc(var(--tmt) * 1px) 0 calc(var(--tmb) * 1px); color: var(--colore) !important;
    font: 700 calc(var(--ts) * 1px)/calc(var(--tl) * 1px) 'Oswald', sans-serif; letter-spacing: 0; text-transform: none;
}
.mecar-hero .mecar-hero-dettaglio p {
    margin: 0 0 calc(var(--pmb) * 1px); padding: 0 5px; text-align: left; color: var(--colore);
    font: 300 18px/28px 'Oswald', sans-serif; font-size: 18px !important; letter-spacing: normal;
}
.mecar-hero-dettaglio .mecar-hero-chiudi { display: flex; min-width: 0; height: 32px; padding: 0 30px; color: var(--colore); background: transparent; border-color: var(--mecar-blu); }
.mecar-hero-chiudi:hover, .mecar-hero-chiudi:focus-visible { color: #fff; background: var(--mecar-blu); }
.mecar-hero img.mecar-hero-dettaglio-foto { display: block; width: 100%; height: auto; max-width: none; }
@media (max-width: 1459px) {
    .mecar-hero-dettaglio {
        --sc: min(1px, 100vw / 1600); --ts: var(--ts1); --tl: var(--tl1); --tmt: var(--tmt1); --tmb: var(--tmb1); --pmb: var(--pmb1);
        --colore: #000; display: block; padding: 100px 30px 30px;
    }
    .mecar-hero-loghi img { --w: var(--w1); --h: var(--h1); --mr: var(--mr1); }
    .mecar-hero .mecar-hero-dettaglio-titolo { font-weight: 400; letter-spacing: -6px; }
    .mecar-hero-dettaglio .mecar-hero-chiudi { margin: 0 auto; }
    .mecar-hero img.mecar-hero-dettaglio-foto { margin-top: 50px; }
}
@media (max-width: 785px) {
    .mecar-hero-dettaglio { --sc: min(1px, 100vw / 778); --ts: var(--ts2); --tl: var(--tl2); --tmt: var(--tmt2); --tmb: var(--tmb2); --pmb: var(--pmb2); padding: 100px 25px 30px; }
    .mecar-hero-loghi img { --w: var(--w2); --h: var(--h2); --mr: var(--mr2); }
    .mecar-hero-loghi { padding-bottom: 6px; }
    .mecar-hero .mecar-hero-dettaglio-titolo { letter-spacing: -4px; margin-bottom: calc(var(--tmb) * 1px + 2px); }
    .mecar-hero .mecar-hero-dettaglio p { font-size: 15px !important; line-height: 26px; }
    .mecar-hero-det-foto { padding-left: 30px; }
    .mecar-hero img.mecar-hero-dettaglio-foto { margin-top: 0; }
}
@media (max-width: 500px) {
    .mecar-hero-dettaglio { --sc: min(1px, 100vw / 480); --ts: var(--ts3); --tl: var(--tl3); --tmt: var(--tmt3); --tmb: var(--tmb3); --pmb: var(--pmb3); padding: 50px 0; }
    .mecar-hero-loghi img { --w: var(--w3); --h: var(--h3); --mr: var(--mr3); }
    .mecar-hero-det-testo { padding: 0 25px 30px; }
    .mecar-hero-loghi { padding-bottom: 0; }
    .mecar-hero .mecar-hero-dettaglio-titolo { letter-spacing: -3px; margin-bottom: calc(var(--tmb) * 1px + 3px); }
    .mecar-hero-det-foto { padding: 0 25px; }
}

/* Revolution Slider aveva quattro livelli: da 1460 px in su, da 786, da 501, sotto.
   Le altezze sono quelle misurate sul vivo il 28/10/2026 (da 360 a 2560 px): la
   più alta fra la griglia del livello scalata e il contenuto delle diapositive. */
@media (max-width: 1459px) {
    .mecar-hero { height: max(calc(588px + 2vw), calc(45vw - 9px)); }
    .mecar-hero-colonna { width: 100%; }
    .mecar-hero-titolo { font-size: 80px; line-height: 65px; letter-spacing: -6px; font-weight: 400; margin-bottom: 73px; }
}
@media (max-width: 785px) {
    .mecar-hero { height: 123.4vw; }
    .mecar-hero-riga { padding: 80px 100px 0 60px; }
    .mecar-hero-titolo { font-size: 60px; line-height: 80px; letter-spacing: -4px; font-weight: 700; margin-bottom: 70px; }
}
@media (max-width: 500px) {
    .mecar-hero { height: max(617px, 150vw); }
    .mecar-hero-riga { padding: 80px 30px 0; }
    .mecar-hero-colonna { text-align: left; }
    .mecar-hero-titolo { line-height: 70px; letter-spacing: -3px; }
    .mecar-hero-scopri { min-width: 133px; height: 32px; }
    .mecar-hero-frecce { justify-content: flex-start; gap: 20px; margin-top: 27px; }
    .mecar-hero-frecce button { width: 55px; height: 28px; font: 400 26px/26px 'Oswald', sans-serif; }
}
@media (prefers-reduced-motion: reduce) {
    .mecar-hero-slide, .mecar-hero-slide.is-attiva { transition: none; }
    .mecar-hero-slide.is-attiva .mecar-hero-sfondo, .mecar-hero-titolo { animation: none; }
}

/* ─── La linea del tempo di «Chi siamo» ─────────────────────── */
.mecar-storia { position: relative; width: 100%; height: 700px; overflow: hidden; background: #000; font-family: 'Oswald', sans-serif; }
/* Le tappe non fanno livello a sé: foto e velo stanno sotto, i testi sopra, così nel
   cambio la foto nuova copre la vecchia ma il testo vecchio le scivola sopra. */
.mecar-storia-tappa { position: absolute; inset: 0; visibility: hidden; }
.mecar-storia-tappa.is-attiva { visibility: visible; }
.mecar-storia img.mecar-storia-foto { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
/* Lo strato nero al 70% dello slider sopra la foto. */
.mecar-storia-tappa::after { content: ""; position: absolute; z-index: 1; inset: 0; background: rgba(0, 0, 0, .7); }
.mecar-storia-tappa.is-entra img.mecar-storia-foto, .mecar-storia-tappa.is-entra::after { z-index: 2; }
/* Titolo e testo come gli strati del vivo (misurati il 28/10/2026): una colonna
   larga quanto la griglia del livello meno i margini interni, a un'altezza fissa.
   Il CSS del sito impone h2 bianchi e p a 18px con !important: qui serve lo stesso. */
.mecar-storia .mecar-storia-testo { position: relative; z-index: 3; height: 100%; padding: 208px calc((100% - 1600px) / 2 + 300px) 0; box-sizing: border-box; text-align: center; }
.mecar-storia .mecar-storia-testo h2 { margin: 0; color: var(--mecar-salvia) !important; font: 500 60px/25px 'Oswald', sans-serif; letter-spacing: 3px; text-transform: uppercase; }
.mecar-storia .mecar-storia-testo p { height: 140px; margin: 120px 0 0; color: #fff; font: 300 24px/30px 'Oswald', sans-serif; font-size: 24px !important; letter-spacing: normal; }
.mecar-storia-testo { transform-origin: 50% 50%; }
/* Le tre fasce (indietro, niente, avanti), il cerchio e le frecce che seguono il mouse. */
.mecar-storia-zona { position: absolute; top: 0; bottom: 0; z-index: 4; width: 33.334%; padding: 0; background: none; border: 0; }
.mecar-storia-zona[data-vai="-1"] { left: 0; }
.mecar-storia-centro { left: 33.333%; }
.mecar-storia-zona[data-vai="1"] { right: 0; }
.mecar-storia-zona:focus-visible { outline: 1px solid rgba(255, 255, 255, .6); outline-offset: -8px; }
.mecar-storia-anello, .mecar-storia-segue { position: absolute; left: 0; top: 0; width: 65px; height: 65px; z-index: 5; pointer-events: none; transform-origin: 0 0; opacity: 0; }
.mecar-storia-anello { box-sizing: border-box; border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%; }
.mecar-storia-anello.is-su { opacity: 1; }
.mecar-storia-segue { display: flex; align-items: center; transition: opacity .3s; }
.mecar-storia-segue svg { width: 65px; height: auto; transform: scale(.5); transition: transform .3s; }
.mecar-storia-segue.is-su { opacity: 1; transition-duration: .7s; }
.mecar-storia-segue.is-su svg { transform: none; transition-duration: .7s; }
/* Sotto i 786 px: due frecce fisse in basso, 40 px dai bordi (entrano dai lati). */
.mecar-storia-fissa { display: none; position: absolute; bottom: 40px; z-index: 4; width: 50px; height: 30px; padding: 0; background: none; border: 0; cursor: pointer; animation: mecar-storia-freccia 1s cubic-bezier(.65, 0, .35, 1) .5s both; }
.mecar-storia-fissa svg { width: 100%; height: 100%; }
.mecar-storia-fissa[data-vai="-1"] { left: 40px; --da: -40vw; }
.mecar-storia-fissa[data-vai="1"] { right: 40px; --da: 40vw; }
@keyframes mecar-storia-freccia { from { transform: translateX(var(--da)); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 785px) {
    .mecar-storia-zona, .mecar-storia-anello, .mecar-storia-segue { display: none; }
    .mecar-storia-fissa { display: block; }
}
@media (hover: none) { .mecar-storia-anello, .mecar-storia-segue { display: none; } }
@media (prefers-reduced-motion: reduce) { .mecar-storia-fissa { animation: none; } }
/* Sotto la griglia del livello lo slider scala tutto in proporzione: qui in vw. */
@media (max-width: 1459px) {
    .mecar-storia .mecar-storia-testo { padding: 268px calc((100% - 1024px) / 2 + 180px) 0; }
    .mecar-storia .mecar-storia-testo p { margin-top: 30px; font-size: 18px !important; }
}
@media (max-width: 1023px) {
    /* Lo slider era «fullwidth»: da bordo a bordo anche dove il contenitore ha margini. */
    .mecar-storia { height: 68.36vw; width: 100vw; max-width: none; flex: none; margin-left: calc(50% - 50vw); }
    .mecar-storia .mecar-storia-testo { padding: 26.2vw 17.58vw 0; }
    .mecar-storia .mecar-storia-testo h2 { font-size: 5.86vw; line-height: 2.44vw; letter-spacing: .29vw; }
    .mecar-storia .mecar-storia-testo p { height: 13.67vw; margin-top: 2.89vw; font-size: 1.78vw !important; line-height: 2.89vw; }
}
@media (max-width: 785px) {
    .mecar-storia { height: 123.4vw; }
    .mecar-storia .mecar-storia-testo { padding: 51.9vw 7.71vw 0; }
    .mecar-storia .mecar-storia-testo h2 { font-size: 7.71vw; line-height: 3.21vw; letter-spacing: .385vw; }
    .mecar-storia .mecar-storia-testo p { height: 18vw; margin-top: 3.86vw; font-size: 2.19vw !important; line-height: 3.86vw; }
}
@media (max-width: 500px) {
    .mecar-storia { height: 150vw; }
    .mecar-storia .mecar-storia-testo { padding: 37.7vw 6.25vw 0; }
    .mecar-storia .mecar-storia-testo h2 { font-size: 8.33vw; line-height: 5.2vw; letter-spacing: .625vw; }
    .mecar-storia .mecar-storia-testo p { height: 29.2vw; margin-top: 6.15vw; font-size: 4.375vw !important; line-height: 6.25vw; }
}

/* ─── L'avviso dei cookie, nei colori del sito ──────────────── */
.mecar-cookie {
    position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 99999;
    max-width: 720px; margin: 0 auto; padding: 18px 20px; box-sizing: border-box;
    background: var(--mecar-blu); color: #fff; border-radius: 6px;
    box-shadow: 0 6px 30px rgba(0, 0, 0, .3);
    display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
}
.mecar-cookie-testo { flex: 1 1 320px; font: 15px/1.5 'Oswald', sans-serif; font-weight: 300; color: #fff; }
.mecar-cookie a { color: var(--mecar-salvia); font: inherit; text-decoration: underline; }
.mecar-cookie-bottoni { display: flex; gap: 10px; }
.mecar-cookie button {
    font: 400 14px/1 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .03em;
    padding: 12px 18px; border-radius: 15px; cursor: pointer; border: 1px solid #fff;
}
.mecar-cookie .mecar-cookie-si { background: var(--mecar-salvia); border-color: var(--mecar-salvia); color: var(--mecar-blu); }
.mecar-cookie .mecar-cookie-si:hover, .mecar-cookie .mecar-cookie-si:focus { background: #fff; border-color: #fff; }
.mecar-cookie .mecar-cookie-no { background: transparent; color: #fff; }
.mecar-cookie .mecar-cookie-no:hover, .mecar-cookie .mecar-cookie-no:focus { background: #fff; color: var(--mecar-blu); }
.mecar-cookie-riapri {
    position: fixed; left: 12px; bottom: 12px; z-index: 9999; padding: 6px 10px;
    font: 12px/1 'Oswald', sans-serif; background: rgba(30, 45, 81, .75); color: #fff;
    border: 0; border-radius: 4px; cursor: pointer; opacity: .7;
}
.mecar-cookie-riapri:hover { opacity: 1; background: var(--mecar-blu); color: #fff; }

/* La mappa del piede in attesa del consenso: un bottone. */
.mecar-bloccato { position: relative; background: #e0e0e0; }
.mecar-attiva {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
    padding: 12px 18px; font: 400 15px/1 'Oswald', sans-serif; color: #fff;
    background: var(--mecar-blu); border: 0; border-radius: 15px; cursor: pointer;
}

/* L'esito del modulo di candidatura. */
.mecar-inviato {
    position: fixed; left: 50%; top: 24px; transform: translateX(-50%); z-index: 99999;
    max-width: 90vw; padding: 14px 20px; border-radius: 6px;
    background: var(--mecar-blu); color: #fff; font: 16px/1.4 'Oswald', sans-serif;
    box-shadow: 0 6px 30px rgba(0, 0, 0, .25); animation: mecar-sparisci 8s forwards;
}
@keyframes mecar-sparisci { 0%, 85% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
.mecar-esito { margin-bottom: 20px; }