/* ===========================================================================
   ENTRY MIND — foglio di stile del sito

   Caricato da functions.php. Le immagini stanno in ../img/ rispetto a questo
   file: se sposti il foglio, ricordati di aggiornare il percorso a riga 78.
   =========================================================================== */

/* ===========================================================================
   Entry Mind — landing page

   Il cappello e' il biglietto da visita ruotato in verticale: pannello blu
   notte che si chiude a V verso il basso, con la fascia blu che segue il
   taglio. La V e' disegnata in SVG e non con i bordi CSS, cosi' resta esatta
   su qualunque larghezza.

   COLORI campionati dal biglietto: notte #000D24, blu #2F64DD.
   Il verde compare in UN SOLO punto — la conferma dell'appuntamento — dove
   vuol dire "WhatsApp" e si capisce senza spiegazioni.
   =========================================================================== */

:root {
    --notte:     #000D24;
    --notte-alt: #04173A;
    --blu:       #2F64DD;
    --blu-vivo:  #1E5BE8;
    --cielo:     #7FA8FF;
    --bianco:    #FFFFFF;
    --nebbia:    #F2F5FB;
    --tenue:     #5A6B85;
    --bordo:     #DDE4F0;
    --whatsapp:  #25D366;

    --display: 'Archivo', system-ui, sans-serif;
    --testo:   'IBM Plex Sans', system-ui, sans-serif;
    --dati:    'IBM Plex Mono', ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0; background: var(--bianco); color: var(--notte);
    font-family: var(--testo); font-size: 17px; line-height: 1.62;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: var(--display); font-weight: 800; line-height: 1.07;
    letter-spacing: -0.025em; margin: 0 0 .5em;
}
h1 { font-size: clamp(1.95rem, 6.4vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 4.6vw, 2.3rem); }
h3 { font-size: 1.08rem; font-weight: 700; letter-spacing: -0.01em; }
p  { margin: 0 0 1em; }

.contenitore { width: min(1080px, 91vw); margin-inline: auto; }

.sezione { padding: clamp(3rem, 9vw, 5.2rem) 0; }
.sezione--nebbia { background: var(--nebbia); }
/* I titoli di sezione stanno al centro, come quello del video: la pagina si
   legge scorrendo, e un titolo allineato a sinistra spezza quel ritmo. */
.sezione__intro { max-width: 46ch; margin: 0 auto 2.1rem; text-align: center; }
.sezione__intro > p { color: var(--tenue); font-size: 1.02rem; margin: 0; }

/* ---------- pulsanti ---------- */
.bottone {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .76rem 1.22rem; border-radius: 999px;
    font-family: var(--testo); font-size: .95rem; font-weight: 600;
    text-decoration: none; border: 1.5px solid transparent; cursor: pointer;
    transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.bottone:hover { transform: translateY(-1px); }
.bottone--pieno    { background: var(--blu); color: #fff; }
.bottone--pieno:hover { background: var(--blu-vivo); }

/* ===========================================================================
   CAPPELLO
   =========================================================================== */
.cappello {
    position: relative;
    /* Il fondo lo disegna il browser, non e' piu' una fotografia: cosi' la
       frase sotto il marchio puo' essere testo vero e cambiare lingua.
       Gli aloni riprendono quelli dell'immagine originale. */
    background:
        radial-gradient(62% 82% at 1% 4%,  rgba(30,91,232,.55), transparent 62%),
        radial-gradient(58% 78% at 99% 96%, rgba(30,91,232,.50), transparent 62%),
        radial-gradient(85% 65% at 50% 42%, rgba(4,23,58,.85),   transparent 72%),
        var(--notte);
    color: #C6D3E8;
    padding: 1.1rem 0 clamp(3.2rem, 9vw, 5.5rem);
    text-align: center;
    overflow: hidden;
}

/* la V con la fascia blu: disegnata in SVG, sempre esatta */
.taglio {
    position: absolute; left: 0; right: 0; bottom: 0;
    width: 100%; height: clamp(56px, 8.5vw, 112px);
    display: block;
}

/* Il marchio: immagine con il fondo gia' tolto, e sotto la frase in testo,
   che cambia con la lingua. Prima stava dentro la fotografia e non si poteva
   tradurre. */
.cappello__marchio {
    display: inline-grid; justify-items: center;
    margin: clamp(2.2rem, 7vw, 3.6rem) 0 0;
}
.cappello__logo { width: clamp(180px, 42vw, 288px); height: auto; display: block; }
.cappello__motto {
    font-family: var(--dati);
    font-size: clamp(.62rem, 1.9vw, .76rem);
    letter-spacing: .22em; text-transform: uppercase;
    color: #A7BCDE; margin: 1rem 0 0; padding-top: .95rem;
    border-top: 1px solid rgba(255,255,255,.22);
    width: 100%; box-sizing: border-box;
}

/* --- barra: menu a sinistra, lingue a destra --- */
.barra {
    position: relative; z-index: 20;
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem;
}

.menu { position: relative; }
.menu__apri {
    display: inline-flex; align-items: center; gap: .5rem;
    background: transparent; border: 0; cursor: pointer; padding: .45rem .2rem;
    color: #fff; font-family: var(--testo); font-size: .93rem; font-weight: 600;
}
.menu__apri svg { display: block; }
.menu__voci {
    position: absolute; top: calc(100% + .5rem); left: 0; z-index: 30;
    background: #fff; border: 1px solid var(--bordo); border-radius: 12px;
    box-shadow: 0 18px 40px -18px rgba(0,13,36,.5);
    padding: .4rem; min-width: 210px; text-align: left;
    display: none;
}
.menu__voci[data-aperto="si"] { display: block; }
.menu__voci a {
    display: block; padding: .55rem .7rem; border-radius: 8px;
    text-decoration: none; color: var(--notte); font-size: .95rem;
}
.menu__voci a:hover { background: var(--nebbia); color: var(--blu); }

/* selettore di lingua, incorniciato */
.lingue {
    display: flex; align-items: center; gap: .15rem;
    background: rgba(47,100,221,.22);
    border: 1px solid rgba(127,168,255,.3);
    border-radius: 10px; padding: .26rem .34rem;
}
.lingue__globo { color: var(--cielo); display: grid; place-items: center; margin-right: .25rem; }
.lingue a {
    font-family: var(--dati); font-size: .74rem; letter-spacing: .05em;
    text-transform: uppercase; text-decoration: none;
    color: rgba(255,255,255,.6); padding: .18rem .32rem; border-radius: 6px;
}
.lingue a:hover { color: #fff; }
.lingue a[aria-current="true"] { color: #fff; background: rgba(255,255,255,.16); font-weight: 500; }

/* --- marchio al centro --- */



/* ===========================================================================
   VIDEO
   =========================================================================== */
.dimostrazione { padding: clamp(2.6rem, 8vw, 4.2rem) 0 clamp(2.6rem, 8vw, 4.2rem); }
.dimostrazione h2 { text-align: center; max-width: 20ch; margin: 0 auto 1.4rem; }

/* Il prezzo e' l'informazione che la gente cerca per prima: sta su una
   pastiglia blu con il numero grande, e l'alone dello stesso blu la stacca
   dal bianco della pagina senza bisogno di altre parole. */
.prezzo-riga {
    display: flex; align-items: center; justify-content: center;
    gap: .6rem; width: fit-content;
    margin: 0 auto clamp(1.8rem, 5vw, 2.4rem);
    padding: .75rem 1.9rem .8rem;
    background: linear-gradient(102deg, var(--blu-vivo), #3D7BFF);
    color: #fff; border-radius: 999px;
    box-shadow: 0 20px 38px -18px rgba(47,100,221,.85);
}
.prezzo-riga__da,
.prezzo-riga__unita {
    font-family: var(--testo); font-weight: 600;
    font-size: clamp(.92rem, 2.4vw, 1.02rem); line-height: 1.15;
}
.prezzo-riga__unita { text-align: left; }
.prezzo-riga__cifra {
    font-family: var(--display); font-weight: 800;
    font-size: clamp(2.6rem, 8vw, 3.6rem); line-height: .95;
    letter-spacing: -0.04em;
}

.video {
    position: relative; border-radius: 18px; overflow: hidden;
    background: var(--notte); border: 1px solid var(--bordo);
    box-shadow: 0 30px 60px -32px rgba(0,13,36,.5);
}
.video__telaio { display: block; width: 100%; aspect-ratio: 16/9; border: 0; }

.anteprima { background: #fff; padding: 1rem 1rem 1.05rem; }
.anteprima__etichetta {
    display: flex; justify-content: space-between; align-items: baseline;
    font-family: var(--dati); font-size: .69rem; letter-spacing: .09em;
    text-transform: uppercase; color: var(--tenue);
    padding-bottom: .55rem; border-bottom: 1px solid var(--bordo); margin-bottom: .75rem;
}
.giorni { display: grid; grid-template-columns: repeat(6, 1fr); gap: .3rem; }
.giorno__nome { font-family: var(--dati); font-size: .67rem; color: var(--tenue); text-align: center; margin-bottom: .35rem; }
.giorno__pila { display: flex; flex-direction: column; gap: .26rem; min-height: 142px; }

.blocco {
    border-radius: 7px; padding: .34rem .38rem; font-size: .63rem; line-height: 1.24;
    border: 1px solid transparent; opacity: 0; transform: translateY(6px);
    animation: entra .5s ease forwards;
}
.blocco b { display: block; font-weight: 600; font-size: .65rem; }
.blocco span { font-family: var(--dati); font-size: .59rem; opacity: .78; }
.blocco--corso     { background: #E7EEFC; border-color: #CBDAF7; color: #1B3A79; }
.blocco--massaggio { background: #EEF1F7; border-color: #DCE3F0; color: #3B4A66; }
.blocco--nuovo     { background: #fff; border-color: var(--whatsapp); color: var(--notte); box-shadow: 0 0 0 3px rgba(37,211,102,.13); }
@keyframes entra { to { opacity: 1; transform: none; } }

.conferma {
    display: inline-flex; align-items: center; gap: .2rem; margin-top: .24rem;
    background: var(--whatsapp); color: #04230E;
    font-family: var(--dati); font-size: .54rem; letter-spacing: .04em; font-weight: 500;
    padding: .07rem .32rem; border-radius: 999px;
    opacity: 0; animation: entra .4s ease 2.6s forwards;
}
.anteprima__piede {
    margin-top: .75rem; padding-top: .65rem; border-top: 1px solid var(--bordo);
    font-size: .76rem; color: var(--tenue);
}
@media (max-width: 560px) {
    .giorni { grid-template-columns: repeat(3, 1fr); }
    .giorno:nth-child(n+4) { display: none; }
}


/* ===========================================================================
   PROBLEMI / SOLUZIONI / DOMANDE

   Due colonne affiancate: a sinistra quello che succede oggi, a destra come
   va con Entry Mind. Le voci sono corte apposta — si leggono di sfuggita,
   non si studiano.
   =========================================================================== */

.confronto {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: clamp(1.2rem, 4vw, 2.4rem);
    max-width: 780px; margin: 0 auto;
}
/* La sezione ha un titolo sopra: l'intro non ha bisogno di tutto lo stacco
   che serve quando sotto c'e' del testo lungo. */
#perche .sezione__intro { margin-bottom: 1.6rem; }
@media (max-width: 700px) { .confronto { grid-template-columns: 1fr; gap: 1.4rem; } }

.confronto__colonna {
    background: #fff; border: 1px solid var(--bordo);
    border-radius: 14px; padding: 1.3rem 1.3rem 1.4rem;
}
.confronto__colonna--buona { border-color: var(--blu); }

.confronto__titolo {
    font-family: var(--display); font-weight: 700; font-size: 1.02rem;
    letter-spacing: -0.01em; margin: 0 0 .9rem;
}
.confronto__colonna--buona .confronto__titolo { color: var(--blu); }

.lista { list-style: none; padding: 0; margin: 0; }
.lista li {
    position: relative; padding: .38rem 0 .38rem 1.7rem;
    font-size: .97rem; line-height: 1.45;
}
.lista li::before {
    position: absolute; left: 0; top: .38rem;
    font-family: var(--dati); font-size: .95rem; line-height: 1.45;
}
.lista--problemi li  { color: var(--tenue); }
.lista--problemi li::before { content: "×"; color: #B04141; font-size: 1.15rem; line-height: 1.25; }
.lista--soluzioni li::before { content: "✓"; color: var(--blu); font-weight: 700; }

/* ===========================================================================
   IMMAGINI DELL'APP
   =========================================================================== */
/* Le immagini dell'app sono un numero variabile: la griglia si adatta da
   sola invece di avere due colonne fisse. Quelle marcate "larga" ne occupano
   due, perche' le schermate orizzontali in una colonna stretta non si
   leggerebbero. */
.schermate {
    display: grid; gap: 1.2rem; align-items: start;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.schermate__larga { grid-column: span 2; }
@media (max-width: 780px) {
    .schermate { grid-template-columns: 1fr; }
    .schermate__larga { grid-column: auto; }
}
.schermata-vuota {
    background: repeating-linear-gradient(-45deg, #fff, #fff 12px, var(--nebbia) 12px, var(--nebbia) 24px);
    border: 1px dashed var(--bordo); border-radius: 14px; min-height: 240px;
    display: grid; place-items: center; text-align: center;
    font-family: var(--dati); font-size: .77rem; color: var(--tenue); padding: 1.3rem;
}
.schermate img { width: 100%; height: auto; display: block; border-radius: 14px; border: 1px solid var(--bordo); }
.schermate figcaption { font-size: .88rem; color: var(--tenue); margin-top: .55rem; }
.schermate figure { margin: 0; }

/* ===========================================================================
   PREZZI
   =========================================================================== */
.prezzi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 780px) { .prezzi { grid-template-columns: 1fr; } }
.prezzo { background: #fff; border: 1px solid var(--bordo); border-radius: 14px; padding: 1.4rem 1.3rem; }
.prezzo--scelto { border-color: var(--blu); border-width: 2px; }
.prezzo__taglia {
    font-family: var(--dati); font-size: .7rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--tenue); margin-bottom: .55rem;
}
.prezzo__cifra { font-family: var(--display); font-size: 2.3rem; font-weight: 800; line-height: 1; }
.prezzo__cifra small { font-family: var(--testo); font-size: .85rem; font-weight: 400; color: var(--tenue); }
.prezzo__nota { font-size: .9rem; color: var(--tenue); margin: .5rem 0 0; }

.compreso { list-style: none; padding: 0; margin: 1.4rem 0 0; }
.compreso li {
    display: flex; gap: .6rem; align-items: flex-start;
    padding: .48rem 0; font-size: .95rem; border-bottom: 1px solid var(--bordo);
}
.compreso li::before { content: "—"; color: var(--blu); font-weight: 700; }

/* ===========================================================================
   CONTATTACI
   =========================================================================== */
.contatti { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 5vw, 3rem); }
@media (max-width: 780px) { .contatti { grid-template-columns: 1fr; } }
.canale {
    display: flex; gap: .8rem; align-items: flex-start;
    padding: .88rem 0; border-bottom: 1px solid var(--bordo);
    text-decoration: none; color: inherit;
}
.canale:last-of-type { border-bottom: 0; }
.canale__segno {
    width: 38px; height: 38px; border-radius: 11px; flex: none;
    display: grid; place-items: center; font-size: 1rem;
    background: #fff; color: var(--blu); border: 1px solid var(--bordo);
}
.canale strong { display: block; font-size: .98rem; }
.canale span   { font-size: .89rem; color: var(--tenue); }
.canale:hover strong { color: var(--blu); }

.modulo { background: #fff; border: 1px solid var(--bordo); border-radius: 14px; padding: 1.4rem 1.3rem; }
.modulo h3 { margin-bottom: 1rem; }
.modulo .bottone { width: 100%; }
.campo { margin-bottom: .88rem; }
.campo label { display: block; font-size: .87rem; font-weight: 600; margin-bottom: .28rem; }
.campo input, .campo select {
    width: 100%; padding: .66rem .74rem; border: 1px solid var(--bordo); border-radius: 9px;
    font-family: var(--testo); font-size: 1rem; background: var(--nebbia); color: var(--notte);
}
.campo input:focus, .campo select:focus { outline: 2px solid var(--blu); outline-offset: 1px; }
/* Messaggi dopo l'invio del modulo. */
.avviso {
    border-radius: 10px; padding: .8rem 1rem; margin: 0 0 1.1rem;
    font-size: .95rem; line-height: 1.45;
}
.avviso--ok {
    background: #E8F8EE; border: 1px solid #B6E6C8; color: #14562E;
}
.avviso--ko {
    background: #FDECEC; border: 1px solid #F5C2C2; color: #8A1F1F;
}

/* Campo esca contro gli invii automatici: deve sparire alla vista ma NON
   con display:none, che alcuni automi riconoscono. Lo togliamo di scena. */
.esca {
    position: absolute; left: -9999px; top: auto;
    width: 1px; height: 1px; overflow: hidden;
}

.modulo__nota { font-size: .82rem; color: var(--tenue); margin: .78rem 0 0; }

/* ===========================================================================
   PIEDE
   =========================================================================== */
.piede { background: var(--notte); color: #C6D3E8; padding: 3rem 0 2rem; font-size: .95rem; }

/* Marchio e motto al centro, come sul biglietto. */
.piede__testa { text-align: center; padding-bottom: 2.2rem; }
.piede__marchio { width: 168px; height: auto; display: block; margin: 0 auto; }
.piede__motto {
    font-family: var(--display); font-weight: 700; font-size: 1.02rem;
    color: #fff; margin: .7rem 0 0; letter-spacing: -0.01em;
}
.piede__motto b { color: var(--cielo); font-weight: 700; }

/* Le due colonne: STESSO carattere, stessa misura, stesso colore.
   Prima i contatti erano collegamenti bianchi e i dati societari testo
   spento: sembravano due caratteri diversi anche se erano lo stesso. */
.piede__righe {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem;
    padding: 1.8rem 0; border-top: 1px solid rgba(255,255,255,.12);
    border-bottom: 1px solid rgba(255,255,255,.12);
}
.piede__colonna { min-width: 200px; }
.piede__colonna h4 {
    font-family: var(--dati); font-size: .7rem; letter-spacing: .16em;
    text-transform: uppercase; color: var(--cielo); font-weight: 400;
    margin: 0 0 .9rem;
}
.piede__colonna p {
    font-family: var(--testo); font-size: .95rem; font-weight: 400;
    line-height: 1.5; color: #C6D3E8; margin: 0 0 .35rem;
}
.piede__colonna a { color: #C6D3E8; text-decoration: none; }
.piede__colonna a:hover { color: #fff; text-decoration: underline; }

.piede__chiusa {
    display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; justify-content: space-between;
    margin-top: 1.4rem; color: #64789A; font-size: .84rem;
}
.piede__chiusa a { color: #93A6C4; text-decoration: none; }
.piede__chiusa a:hover { color: #fff; }

/* Testo presente per i lettori di schermo e i motori di ricerca, ma non
   visibile: il marchio e' dentro l'immagine e un'immagine non si legge. */
.solo-per-lettori {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

:focus-visible { outline: 2px solid var(--cielo); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .blocco, .conferma { animation: none; opacity: 1; transform: none; }
    .bottone:hover { transform: none; }
}