/* ==========================================================================
   Cinebot — foglio di stile
   --------------------------------------------------------------------------
   Organizzazione:
     1. Token          6. Componenti
     2. Base           7. Moduli di pagina
     3. Layout         8. Pagine
     4. Header         9. Errore 404
     5. Footer

   I valori tipografici e le spaziature orizzontali sono definiti una sola volta
   come custom property e ridichiarati per breakpoint: il resto del foglio le usa
   e non ripete mai una misura per viewport.

   Breakpoint (mobile-first):
     base      fino a 700px
     >= 701    tablet e mobile landscape
     >= 1026   desktop  (unifica i breakpoint 1000 e 1025 del tema originale,
                         distanti 25px e di fatto sovrapposti)
     >= 1301   desktop largo
     >= 1761   desktop extra largo
   ========================================================================== */


/* 1. Token ================================================================= */

@font-face {
    font-family: "Cocogoose";
    src: url("/assets/fonts/Cocogoose-Pro-Regular.woff2") format("woff2"),
         url("/assets/fonts/Cocogoose-Pro-Regular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    /* colore */
    --ink: #353938;
    --accent: #63a7de;
    --paper: #fff;

    /* carattere */
    --font-body: "Helvetica", "Arial", sans-serif;
    --font-display: "Cocogoose", "Helvetica", "Arial", sans-serif;

    /* scala tipografica */
    --fs-body: 18px;
    --lh-body: 114%;
    --fs-display: 26px;
    --lh-display: 130%;
    --fs-lead: 18px;          /* intro, descrizioni, colonne di testo */
    --lh-lead: 121%;

    /* spaziatura */
    --gutter: 5vw;            /* respiro orizzontale delle sezioni */
    --header-h: 70px;
    --header-pad: 5vw;
    --col-gap: 0px;           /* distanza fra colonne di testo affiancate */

    /* forma */
    --radius: 20px;
    --radius-sm: 14px;
    --ease: 0.3s ease;
}

@media (min-width: 701px) {
    :root {
        --col-gap: 75px;
    }
}

@media (min-width: 1026px) {
    :root {
        --fs-body: 20px;
        --fs-display: 34px;
        --fs-lead: 24px;
        --lh-lead: 112%;
        --header-h: 110px;
        --header-pad: 40px;
    }
}

@media (min-width: 1301px) {
    :root {
        --fs-body: 24px;
        --lh-body: 100%;
        --fs-display: 54px;
        --lh-display: 120%;
        --gutter: 8vw;
        --col-gap: 150px;
    }
}

@media (min-width: 1761px) {
    :root {
        --fs-display: 64px;
        --lh-display: 108%;
        --gutter: 10vw;
    }
}


/* 2. Base ================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--ink);
    background: var(--paper);
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-size: inherit; font-weight: inherit; }
h1 p, h2 p, h3 p, h4 p { margin: 0; }

a { color: inherit; text-decoration: none; }

/* height: auto e indispensabile: le immagini hanno gli attributi width/height e
   senza di esso il vincolo di larghezza ne deformerebbe le proporzioni. */
img { max-width: 100%; height: auto; }

/* <picture> e solo un contenitore per la scelta del file: senza questo resta un
   inline che si stringe sul contenuto, diventa lui l'elemento di flex/griglia e
   tutte le regole di larghezza scritte per l'<img> smettono di avere effetto.
   `display: contents` lo toglie dall'albero dei box e lascia l'<img> al suo
   posto, com'era prima che le immagini passassero dal macro media.picture(). */
picture { display: contents; }

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

::selection { background: var(--ink); color: var(--paper); }

::-webkit-scrollbar { width: 7px; background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ink); }
::-webkit-scrollbar-track { background: transparent; }

/* Visibile solo ai lettori di schermo; il salta-contenuto riappare al focus. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.skip-link:focus {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 1000;
    width: auto;
    height: auto;
    clip: auto;
    margin: 0;
    padding: 12px 18px;
    background: var(--paper);
    color: var(--ink);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}


/* 3. Layout ================================================================ */

.wrap {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

.site-main { min-height: 100vh; }
.site-main--auto { min-height: 0; }

/* Titolo display, usato per le aperture di sezione. */
.display {
    font-family: var(--font-display);
    font-size: var(--fs-display);
    line-height: var(--lh-display);
}
.display strong { color: var(--accent); font-weight: inherit; }

/* Coppia di colonne affiancate. Lo stacco interno lo decide la sezione che la usa:
   nell'originale i due punti in cui compare hanno valori diversi. */
.duo {
    display: flex;
    flex-flow: row wrap;
}
.duo > * { width: 100%; }

@media (min-width: 701px) {
    .duo > * { width: 50%; }
}


/* 4. Header ================================================================ */

.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-h);
    padding: 0 var(--header-pad);
    background: var(--paper);
    font-family: var(--font-display);
    font-size: 18px;
    line-height: 100%;
    transition: background var(--ease);
}

@media (min-width: 1761px) {
    .site-header { font-size: 20px; }
}

.site-header__logo { display: block; }
.site-header__logo img { display: block; height: 60px; width: auto; }

@media (min-width: 1026px) {
    .site-header__logo img { height: 75px; }
}

/* Variante chiara: header trasparente sopra l'hero scuro della home. */
.site-header__logo .logo--light { display: none; }
.site-header__logo .logo--dark  { display: block; }

@media (min-width: 1026px) {
    .site-header--light { background: transparent; }
    .site-header--light .logo--light { display: block; }
    .site-header--light .logo--dark  { display: none; }
    .site-header--light .nav__link { color: var(--paper); }
}

/* -- navigazione desktop -- */

.nav { display: none; }

@media (min-width: 1026px) {
    .nav { display: block; }
}

.nav__list {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}
.nav__item { position: relative; }
.nav__item:not(:last-child) { margin-right: 40px; }

.nav__link {
    display: block;
    padding: 4px 0;
    transition: color var(--ease);
}
/* Non e un link: freccia, non manina. */
.nav__link--trigger { cursor: default; }
.nav__link:hover,
.nav__item--current > .nav__link { color: var(--accent); }

.nav__dropdown {
    position: absolute;
    top: calc(100% + 15px);
    left: 50%;
    transform: translateX(-50%);
    display: none;
    flex-direction: column;
    margin: 0;
    padding: 20px;
    list-style: none;
    background: var(--paper);
    border-radius: var(--radius-sm);
    box-shadow: 0 6px 24px rgba(53, 57, 56, 0.12);
}
.nav__item--open > .nav__dropdown { display: flex; }

.nav__dropdown li:not(:last-child) { margin-bottom: 8px; }
.nav__dropdown a {
    display: block;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    color: var(--ink);
    transition: color var(--ease);
}
.nav__dropdown a:hover { color: var(--accent); }

/* -- navigazione mobile -- */

.nav-toggle {
    display: flex;
    align-items: center;
    width: 24px;
    height: 24px;
}
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

@media (min-width: 1026px) {
    .nav-toggle { display: none; }
}

.mobile-nav {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--header-h) + 20px) var(--gutter) 40px;
    background: var(--paper);
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
body.menu-open { overflow: hidden; }
body.menu-open .mobile-nav {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

@media (min-width: 1026px) {
    .mobile-nav { display: none; }
}

.mobile-nav__list {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}
.mobile-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
.mobile-nav__item:not(:last-child) { margin-bottom: 20px; }

.mobile-nav__label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 24px;
    line-height: 115%;
    font-weight: 600;
    text-transform: uppercase;
}
.mobile-nav__label .sign {
    padding-right: 10px;
    line-height: 34px;
}

.mobile-nav__submenu {
    display: none;
    flex-direction: column;
    align-items: center;
    margin: 12px 0 0;
    padding: 24px 55px;
    list-style: none;
    background: var(--accent);
    border-radius: 30px;
}
.mobile-nav__submenu li:not(:last-child) { margin-bottom: 12px; }
.mobile-nav__submenu a {
    display: block;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 115%;
    font-weight: 500;
    text-align: center;
    text-transform: uppercase;
    color: var(--paper);
}

/* Drill-down: aperto il sottomenu, le altre voci si nascondono. */
.mobile-nav__list.is-drilled .mobile-nav__item:not(.is-open) { display: none; }
.mobile-nav__item.is-open .mobile-nav__submenu { display: flex; }
.mobile-nav__item.is-open .sign-plus { display: none; }
.mobile-nav__item:not(.is-open) .sign-minus { display: none; }


/* 5. Footer ================================================================ */

.site-footer {
    /* Due dichiarazioni: la prima e il ripiego per chi non conosce image-set,
       la seconda serve il WebP a chi lo supporta. */
    background-image: url("/assets/images/cinebot-immagine-sfondo-footer.jpg");
    background-image: image-set(
        url("/assets/images/cinebot-immagine-sfondo-footer.webp") type("image/webp"),
        url("/assets/images/cinebot-immagine-sfondo-footer.jpg") type("image/jpeg")
    );
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    color: var(--paper);
}
.site-footer__inner { padding: 54px var(--gutter) 0; }

@media (min-width: 701px)  { .site-footer__inner { padding-top: 100px; } }
@media (min-width: 1026px) { .site-footer__inner { padding-top: 150px; } }

.site-footer__top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: 25px;
    margin-bottom: 25px;
    border-bottom: 2px solid var(--paper);
}
.site-footer__top img {
    display: block;
    height: 49px;
    width: auto;
    margin-bottom: 19px;
}
.site-footer__top h2 {
    font-family: var(--font-display);
    font-size: 28px;
}

@media (min-width: 701px) {
    .site-footer__top { padding-bottom: 40px; margin-bottom: 40px; }
    .site-footer__top img { height: 65px; margin-bottom: 30px; }
    .site-footer__top h2 { font-size: 40px; }
}
@media (min-width: 1761px) {
    .site-footer__top img { height: auto; }
    .site-footer__top h2 { font-size: 48px; }
}

.site-footer__cols {
    display: flex;
    flex-direction: column;
    padding-bottom: 50px;
}
.site-footer__col { flex: 1; display: flex; flex-direction: column; }
.site-footer__col:last-child { margin-top: 15px; }
.site-footer__col span,
.site-footer__col a {
    font-size: 18px;
    line-height: 125%;
    color: var(--paper);
}
.site-footer__col a { font-weight: bold; }

@media (min-width: 701px) {
    .site-footer__cols { flex-direction: row; flex-wrap: wrap; padding-bottom: 150px; }
    .site-footer__col:last-child { margin-top: 0; text-align: right; }
    .site-footer__col span,
    .site-footer__col a { font-size: 23px; line-height: 115%; }
}
@media (min-width: 1026px) {
    .site-footer__col span,
    .site-footer__col a { font-size: 28px; }
}
@media (min-width: 1761px) {
    .site-footer__col span,
    .site-footer__col a { font-size: 32px; }
}

.site-footer__bottom { padding: 12px 0; }
.site-footer__bottom span {
    display: block;
    text-align: center;
    font-size: 12px;
    line-height: 16px;
}
@media (min-width: 701px) {
    .site-footer__bottom span { font-size: 20px; line-height: 20px; }
}


/* 6. Componenti ============================================================ */

/* -- scheda con icona, titolo e testo -- */

.card {
    display: flex;
    flex-direction: column;
}
.card__icon { display: flex; align-items: center; }
.card__icon img { display: block; width: auto; object-fit: contain; }
.card__title { font-family: var(--font-display); }

/* variante piena: fondo azzurro, angoli arrotondati */
.card--filled {
    background: var(--accent);
    color: var(--paper);
    border-radius: var(--radius);
    padding: 38px 22px 43px;
}
.card--filled .card__icon { min-height: 60px; }
.card--filled .card__icon img { height: 50px; }
.card--filled .card__title { margin: 20px 0; font-size: 20px; line-height: 100%; }
.card--filled .card__text { font-size: 18px; line-height: 114%; }

@media (min-width: 1026px) {
    .card--filled .card__icon { min-height: 130px; }
    .card--filled .card__icon img { height: auto; }
    .card--filled .card__title { margin: 35px 0; font-size: 24px; }
    .card--filled .card__text { font-size: 24px; line-height: 112%; }
}
@media (min-width: 1761px) {
    .card--filled { padding: 44px 40px 65px; }
}

/* variante bordata: filetti a sinistra e alla base */
.card--ruled {
    padding: 0 20px 20px;
    border-left: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
    font-size: 18px;
    line-height: 114%;
}
.card--ruled .card__icon { height: 40px; }
.card--ruled .card__icon img { height: 100%; }
.card--ruled .card__title { margin: 25px 0; }

@media (min-width: 1026px) {
    .card--ruled { padding: 0 40px 40px; font-size: var(--fs-lead); line-height: var(--lh-lead); }
    .card--ruled .card__icon { height: 50px; }
    .card--ruled .card__title { margin: 50px 0 30px; }
}

/* -- moduli -- */

.form__row { margin-bottom: 20px; }
@media (min-width: 701px) { .form__row { margin-bottom: 30px; } }

.form__grid {
    display: flex;
    flex-flow: row wrap;
    gap: 0 2%;
}
.form__grid > .form__row { flex: 1 1 100%; }

@media (min-width: 701px) {
    .form__grid > .form__row--half { flex: 1 1 49%; }
}

/* Due campi affiancati dentro la stessa riga (nome/cognome, email/conferma). */
.form__pair {
    display: flex;
    flex-flow: row wrap;
    gap: 12px 2%;
}
.form__pair > * { flex: 1 1 49%; }

.field {
    display: block;
    width: 100%;
    height: 50px;
    padding: 0 18px;
    font-family: var(--font-body);
    font-size: 20px;
    line-height: 100%;
    font-weight: bold;
    color: var(--ink);
    background: var(--paper);
    border: 2px solid var(--accent);
    border-radius: var(--radius);
}
/* `opacity: 1` esplicito: Firefox schiarisce i placeholder per impostazione
   predefinita, e qui il testo del placeholder e l'unica etichetta visibile. */
.field::placeholder { font: inherit; color: var(--ink); opacity: 1; }
.field:focus { outline: 2px solid var(--ink); outline-offset: 2px; }

textarea.field {
    height: 300px;
    padding: 16px 18px;
    line-height: 120%;
    resize: none;
}

@media (min-width: 701px) {
    .field { height: 60px; font-size: 24px; }
}

.field--error { border-color: #c0392b; }

.field-error {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    line-height: 110%;
    color: #c0392b;
}

/* Contatore dei caratteri: stesse misure e stesso grigio dell'originale. */
.field-counter {
    margin-top: 8px;
    font-size: 13px;
    line-height: 143%;
    color: #585e6a;
}

.consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    line-height: 110%;
    opacity: 0.8;
}
.consent input {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--accent);
}
.consent a { text-decoration: underline; }

/* Honeypot: fuori dal flusso e invisibile, ma raggiungibile dai bot. */
.honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    padding: 0 30px;
    font-family: var(--font-body);
    font-size: 23px;
    line-height: 100%;
    font-weight: bold;
    color: var(--paper);
    background: var(--accent);
    border: 0;
    border-radius: var(--radius);
    cursor: pointer;
    transition: filter var(--ease);
}
.btn:hover { filter: brightness(0.93); }

@media (min-width: 1026px) {
    .btn { font-size: 32px; }
}

/* Pulsante centrato sotto il modulo, come nell'originale. */
.form__footer { margin-top: 20px; margin-bottom: 55px; text-align: center; }

/* Messaggi di esito dei moduli. Stanno in cima al modulo, quindi subito sotto
   il riquadro azzurro dei contatti: il verde li distingue a colpo d'occhio da
   quel riquadro, che l'azzurro faceva invece sembrare un suo prolungamento. */
.alert {
    margin: 0 0 40px;
    padding: 22px 26px;
    border-radius: var(--radius);
    border: 2px solid transparent;
    font-size: 18px;
    line-height: 130%;
    font-weight: bold;
}
@media (min-width: 1026px) {
    .alert { padding: 28px 32px; font-size: 20px; }
}

.alert--success {
    background: #e8f6ec;
    border-color: #1d7a3d;
    color: #145c2d;
}
.alert--error { background: #fdecea; border-color: #c0392b; color: #c0392b; }

/* -- builder: blocchi di contenuto delle schede funzionalita -- */

.builder {
    display: flex;
    flex-direction: column;
    margin: 35px 0;
}
@media (min-width: 1026px) { .builder { margin: 50px 0 60px; } }

.builder__el {
    width: 100%;
    font-size: 17px;
    line-height: 129%;
}
.builder__el:not(.builder__el--title) { margin-bottom: 30px; }

@media (min-width: 701px) {
    .builder__el { font-size: 20px; }
    .builder__el:not(.builder__el--title) { margin-bottom: 55px; }
}
@media (min-width: 1026px) { .builder__el { line-height: 114%; } }
@media (min-width: 1301px) {
    .builder__el { font-size: var(--fs-lead); line-height: var(--lh-lead); }
}

.builder__el--title { margin-bottom: 35px; }
.builder__el--title span {
    display: block;
    font-family: var(--font-display);
    color: var(--accent);
}

/* Un'interlinea sopra e sotto: i margini fra paragrafi contigui collassano, e
   il blocco resta staccato dal sottotitolo che lo precede. */
.builder__el p { margin: 1em 0; }

/* colonne di testo con filetto separatore */
.builder__row { display: flex; flex-flow: row wrap; align-items: stretch; }
.builder__row .builder__col {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
}
.builder__row .builder__col:not(:last-child) { margin-bottom: 15px; }

@media (min-width: 701px) {
    /* :not(:last-child) anche qui: senza, la regola dello stack verticale la
       vincerebbe per specificita e il margine resterebbe anche in riga. */
    .builder__row .builder__col:not(:last-child) { margin-bottom: 0; }
    .builder__row .builder__col { flex: 1; width: auto; }

    /* Nell'originale riga a due colonne e riga a tre si comportano in modo
       diverso: la prima stacca le colonne di 75/150px e riserva alle foto una
       fascia di 24vw, la seconda usa 50px fissi e una fascia piu bassa, perche
       con tre colonne il corridoio largo lascerebbe righe di due parole.
       La quantity query (prima colonna che ha almeno altre due sorelle dopo di
       se, piu tutte le sue sorelle) ridichiara le due variabili sulle colonne
       di quelle righe; i padding e l'altezza della fascia le leggono da li. */
    .builder__row { --row-band: 24vw; }
    .builder__row .builder__col:first-child:nth-last-child(n + 3),
    .builder__row .builder__col:first-child:nth-last-child(n + 3) ~ .builder__col {
        --col-gap: 50px;
        --row-band: 29.5vw;
    }

    /* Il padding sta su entrambi i lati di ogni colonna interna, non solo sulla
       prima: con tre colonne il solo :first-child lasciava mezzo corridoio fra
       la seconda e la terza. Vale anche per la larghezza: con flex-basis 0 e
       box-sizing border-box la base di ogni colonna e il suo padding, quindi
       una colonna che ne ha due esce piu larga, ed e cosi che l'originale
       ottiene le colonne di testo tutte della stessa misura. */
    .builder__row .builder__col:not(:last-child) { padding-right: var(--col-gap); }
    .builder__row .builder__col:not(:first-child) { padding-left: var(--col-gap); }
    .builder__row .builder__col:not(:last-child)::after {
        content: "";
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 90%;
        background: var(--ink);
    }
}

/* Sotto i 1026px l'originale non regge tre colonne in linea: le manda a capo
   due per riga (meta larghezza, solo il padding destro) e lascia la terza
   sotto. Da 1026 in su tornano tutte e tre affiancate. */
@media (min-width: 701px) and (max-width: 1025px) {
    .builder__row .builder__col:first-child:nth-last-child(n + 3),
    .builder__row .builder__col:first-child:nth-last-child(n + 3) ~ .builder__col {
        flex: 0 1 50%;
        padding-left: 0;
    }
}

.builder__image { width: 100%; margin-bottom: 30px; }
.builder__image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius);
}
/* Nelle righe affiancate le foto stanno su una fascia di altezza fissa e ci
   sono centrate: le proporzioni restano quelle vere (niente ritaglio) e i
   titoli delle colonne partono tutti dalla stessa riga, qualunque sia
   l'altezza della singola foto. Chi sfora la fascia esce sopra e sotto,
   come nell'originale. */
@media (min-width: 701px) {
    .builder__row .builder__image {
        display: flex;
        align-items: center;
        justify-content: center;
        height: var(--row-band);
    }
}

@media (min-width: 1026px) {
    .builder__image { margin-bottom: 40px; }
    /* Da qui in su la fascia delle righe a tre colonne si abbassa ancora. */
    .builder__row .builder__col:first-child:nth-last-child(n + 3),
    .builder__row .builder__col:first-child:nth-last-child(n + 3) ~ .builder__col {
        --row-band: 14.5vw;
    }
}

.builder__sub { margin-bottom: 0; }
.builder__sub span { display: block; font-weight: bold; }
@media (min-width: 701px) { .builder__sub { margin-bottom: 10px; } }

/* box azzurri */
.builder__box { display: flex; flex-flow: row wrap; }
.builder__box .builder__col {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 30px;
    background: var(--accent);
    color: var(--paper);
    border-radius: var(--radius);
}
.builder__box .builder__col:not(:last-child) { margin-bottom: 20px; }
.builder__box .builder__image { width: auto; height: 44px; margin-bottom: 26px; }
.builder__box .builder__image img { width: auto; height: 100%; object-fit: contain; border-radius: 0; }
.builder__box .builder__sub span { font-family: var(--font-display); color: var(--paper); }
.builder__box .builder__text { margin-top: 15px; }

@media (min-width: 701px) {
    .builder__box { flex-wrap: nowrap; column-gap: 35px; }
    .builder__box .builder__col:not(:last-child) { margin-bottom: 0; }
    .builder__box .builder__col { flex: 1; width: auto; }
}
@media (min-width: 1026px) {
    .builder__box { column-gap: 75px; }
    .builder__box .builder__col { padding: 60px 40px; }
    .builder__box .builder__image { height: 95px; margin-bottom: 40px; }
}

/* elenco con segno di spunta */
.builder__list { display: flex; flex-direction: column; }
.builder__li {
    position: relative;
    padding: 18px 0;
    border-bottom: 2px solid var(--ink);
}
.builder__li span {
    display: block;
    padding-right: 70px;
    font-weight: bold;
}
.builder__li::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background: url("/assets/images/true.svg") no-repeat center / contain;
}

@media (min-width: 1026px) {
    .builder__li { padding: 30px 0; }
    .builder__li span { padding-right: 100px; }
    .builder__li::after { width: 50px; height: 50px; }
}

/* immagine a piena larghezza */
.builder__el--image { display: flex; align-items: center; justify-content: center; }
.builder__el--image img { display: block; width: auto; height: auto; }
@media (min-width: 701px) {
    .builder__el--image { display: block; }
}

/* testo a piena larghezza */
.builder__el--full { margin-bottom: 5px; }
.builder__el--full strong { font-family: var(--font-display); }


/* 7. Moduli di pagina ====================================================== */

/* Testata delle pagine interne: lascia spazio all'header fisso. */
.page-head { margin-top: 95px; }

@media (min-width: 701px)  { .page-head { margin-top: 100px; } }
@media (min-width: 1026px) { .page-head { margin-top: 140px; } }

.page-head__title { margin-bottom: 15px; }
@media (min-width: 701px) { .page-head__title { margin-bottom: 20px; } }

.page-head__intro { font-family: var(--font-display); }
.page-head__intro,
.page-head__desc {
    font-size: 18px;
    line-height: 120%;
}
.page-head__intro p:first-child,
.page-head__desc p:first-child { margin-top: 0; }

@media (min-width: 701px) {
    .page-head__intro,
    .page-head__desc { font-size: var(--fs-lead); line-height: var(--lh-lead); }
}


/* 8. Pagine ================================================================ */

/* -- home: hero -- */

.hero {
    position: relative;
    height: 109vw;
    overflow: hidden;
    background: var(--ink);
}
.hero__inner {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-end;
    height: 100%;
    padding-bottom: 90px;
}
.hero__pattern {
    position: absolute;
    left: 50%;
    top: 0;
    z-index: 1;
    transform: translate(-50%, -33%) rotate(18deg) scale(0.25);
    pointer-events: none;
}
/* Il pattern va alla sua dimensione naturale, come nel tema originale: e la scala
   della transform a dimensionarlo, quindi il vincolo del reset qui va tolto. */
.hero__pattern img { max-width: none; }
.hero__text,
.hero__shot { position: relative; z-index: 2; }

.hero__text {
    width: 100%;
    padding-left: var(--gutter);
    color: var(--paper);
}
.hero__text h1 { margin-bottom: 15px; padding-right: 34px; }
.hero__text h2 { font-size: 21px; line-height: 109%; font-weight: 700; }

.hero__shot {
    position: absolute;
    left: 55%;
    top: 33%;
    width: 42%;
}
.hero__shot img { display: block; width: 100%; height: auto; }

@media (min-width: 701px) {
    .hero { height: 69vw; }
    .hero__pattern { left: 59%; transform: translate(-50%, -29%) rotate(18deg) scale(0.7); }
    .hero__text { width: 50%; }
    .hero__text h1 { padding-right: 0; }
    .hero__shot {
        position: static;
        width: 50%;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }
    .hero__shot img { width: 80%; margin-bottom: -30px; }
}

@media (min-width: 1026px) {
    .hero { height: 100vh; }
    .hero__text h2 { font-size: 24px; }
}

@media (min-width: 1301px) {
    .hero__text { width: 33.3333%; }
    .hero__shot { width: 66.6667%; }
    .hero__shot img { width: auto; max-width: 100%; }
}

@media (min-width: 1761px) {
    .hero__inner { padding: 0 40px 100px; }
    .hero__text { padding-left: 150px; }
    .hero__pattern { left: 60%; transform: translate(-50%, -18%) rotate(11deg) scale(0.8); }
}

/* -- home: introduzione -- */

.intro { padding: 50px 0 20px; }

.intro__icon { height: 70px; margin-bottom: 20px; }
.intro__icon img { display: block; height: 100%; width: auto; object-fit: contain; }

.intro__lead {
    position: relative;
    /* Colonna flex: il margine superiore del paragrafo non deve sfuggire per
       collasso, e' lo stacco dall'icona. */
    display: flex;
    flex-direction: column;
    padding-bottom: 35px;
}
.intro__lead::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100px;
    height: 5px;
    background: var(--accent);
}
.intro__lead p {
    margin: 1em 0;
    font-family: var(--font-display);
    font-size: 18px;
    line-height: 114%;
}
.intro__body { padding-top: 35px; }
.intro__body p { margin: 1em 0; }

@media (min-width: 701px) {
    .intro { padding: 90px 0 50px; }
    .intro__body { padding-top: 100px; }
    .intro__col--body { padding-left: 40px; }
}
@media (min-width: 1026px) {
    .intro__icon { height: 85px; margin-bottom: 20px; }
    .intro__lead { padding-bottom: 60px; }
    .intro__lead p { font-size: 20px; }
    /* Allineato all'altezza dell'icona piu il suo margine: le due colonne
       partono dalla stessa riga di base. */
    .intro__body { padding-top: 105px; }
}
@media (min-width: 1301px) {
    .intro { padding: 130px 0 80px; }
    .intro__icon { margin-bottom: 20px; }
    .intro__lead p { font-size: 24px; }
    .intro__body { padding-top: 107px; }
    .intro__col--lead { padding-right: 150px; }
    .intro__col--body { padding-left: 150px; }
}
@media (min-width: 1761px) {
    .intro { padding: 138px 0 100px; }
}

/* -- home: ideale per -- */

.audience__inner { color: var(--ink); }
.audience__title { margin-bottom: 20px; }
.audience__lists {
    display: flex;
    align-items: flex-start;
    font-family: var(--font-display);
}
.audience__lists p {
    margin: 1em 0;
    font-size: 18px;
    line-height: 144%;
}
.audience__lists p:last-child { margin-left: 60px; }

.audience__photo img {
    display: block;
    width: 100%;
    height: 45vw;
    object-fit: cover;
}

@media (min-width: 701px) {
    .audience__inner {
        display: flex;
        padding-top: 45px;
        padding-bottom: 45px;
        color: var(--paper);
        background-image: var(--audience-bg);
        background-image: var(--audience-bg-set, var(--audience-bg));
        background-repeat: no-repeat;
        background-size: cover;
        /* Ancorata in alto a sinistra: con `cover` l'immagine deborda in
           larghezza, e centrarla taglierebbe il soggetto sul lato destro. */
        background-position: 0 0;
    }
    .audience__photo { display: none; }
}
@media (min-width: 1026px) {
    .audience__lists p { font-size: 20px; }
}
@media (min-width: 1301px) {
    .audience__inner { padding-top: 100px; padding-bottom: 100px; }
    .audience__title { margin-bottom: 40px; }
    .audience__lists p { font-size: 21px; line-height: 38px; }
}
@media (min-width: 1761px) {
    .audience__lists p { font-size: 24px; line-height: 40px; }
}

/* -- home: punti di forza -- */

.strengths { margin: 50px 0; }
.strengths__title {
    display: flex;
    justify-content: center;
    margin-bottom: 35px;
    text-align: center;
}
.strengths__grid {
    display: flex;
    flex-flow: row wrap;
    align-items: stretch;
    justify-content: space-between;
    padding: 0 var(--gutter);
}
.strengths__grid > .card { width: 100%; margin-bottom: 15px; }

@media (min-width: 701px) {
    .strengths__grid { padding: 0 40px; }
    .strengths__grid > .card { width: calc(50% - 15px); margin-bottom: 30px; }
}
@media (min-width: 1026px) {
    .strengths { margin: 110px 0; }
    .strengths__title { margin-bottom: 70px; }
    .strengths__grid > .card { width: calc(25% - 20px); margin-bottom: 0; }
}
@media (min-width: 1761px) {
    .strengths__grid > .card { width: calc(25% - 37.5px); }
}

/* -- home: elenco funzionalita -- */

.feature-index { margin-bottom: 60px; }
.feature-index__title { margin-bottom: 35px; }
.feature-index__list { display: flex; flex-direction: column; }
.feature-index__item { border-bottom: 1px solid var(--ink); }
.feature-index__item a {
    position: relative;
    display: flex;
    align-items: center;
    padding: 18px 30px 18px 0;
    font-family: var(--font-display);
    font-size: 15px;
    line-height: 100%;
    transition: padding-left 0.33s ease;
}
.feature-index__item a:hover { padding-left: 20px; }
.feature-index__item a::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    background: url("/assets/images/arrow.svg") no-repeat center / contain;
}

@media (min-width: 701px) {
    .feature-index__item a { font-size: 18px; }
}
@media (min-width: 1026px) {
    .feature-index { margin-bottom: 110px; }
    .feature-index__title { margin-bottom: 70px; }
    .feature-index__item a { padding: 25px 0; font-size: 24px; }
    .feature-index__item a::after { width: 50px; height: 50px; }
}

/* -- home: installazione -- */

.deployment { margin-bottom: 70px; }
.deployment__title { margin-bottom: 19px; }
.deployment__desc {
    margin-bottom: 50px;
    font-size: 18px;
    line-height: 115%;
}
.deployment__desc > :first-child p { font-family: var(--font-display); }
.deployment__desc p { margin: 1em 0; }

.deployment__grid {
    display: flex;
    flex-flow: row wrap;
    align-items: stretch;
    justify-content: space-between;
}
.deployment__grid > .card { width: 100%; margin-bottom: 30px; }

@media (min-width: 701px) {
    .deployment__title { margin-bottom: 35px; }
    .deployment__desc > :first-child { padding-right: 30px; }
    .deployment__desc > :last-child { padding-left: 30px; }
}
@media (min-width: 1026px) {
    .deployment { margin-bottom: 110px; }
    .deployment__title { margin-bottom: 65px; }
    .deployment__desc { font-size: var(--fs-lead); line-height: var(--lh-lead); }
    .deployment__desc > :first-child { padding-right: 150px; }
    .deployment__desc > :last-child { padding-left: 150px; }
    .deployment__grid { flex-wrap: nowrap; }
    .deployment__grid > .card { width: calc(33.3333% - 33.33px); margin-bottom: 0; }
}

/* -- scheda funzionalita -- */

.feature-head { margin-top: 95px; }
.feature-head__inner { display: flex; flex-flow: row wrap; align-items: stretch; }
.feature-head__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding-top: 1.5vw;
}
.feature-head__text h1 { margin-bottom: 30px; }
/* Lo stacco dal blocco descrizione lo danno i margini dei paragrafi. */
.feature-head__intro { font-family: var(--font-display); }
.feature-head__intro,
.feature-head__desc {
    font-size: 18px;
    line-height: 121%;
}
.feature-head__intro p,
.feature-head__desc p { margin: 1em 0; }

.feature-head__media { width: 100%; display: flex; align-items: flex-start; }
.feature-head__media img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--ink);
    border-radius: var(--radius);
}
/* Immagine su fondo trasparente: nessuna cornice, e nessun ritaglio in altezza
   (vedi il modificatore anche nei blocchi @media piu sotto). */
.feature-head__media--plain img { border: 0; border-radius: 0; }

@media (min-width: 701px) {
    .feature-head { margin-top: 100px; }
    .feature-head__text { width: 50%; padding-right: 40px; padding-top: 8vw; }
    .feature-head__text h1 { margin-bottom: 0; }
    .feature-head__media { width: 50%; }
    .feature-head__media img { max-height: 34vw; object-fit: cover; }
    .feature-head__media--plain img { max-height: none; object-fit: contain; }
}
@media (min-width: 1026px) {
    .feature-head { margin-top: 155px; }
    .feature-head__text { padding-right: 80px; }
    .feature-head__text h1 { margin-bottom: 60px; }
    .feature-head__media img { max-height: 26vw; }
    .feature-head__media--plain img { max-height: none; }
    .feature-head__intro,
    .feature-head__desc { font-size: 20px; }
}
@media (min-width: 1301px) {
    .feature-head__text { padding-right: 150px; }
}
@media (min-width: 1761px) {
    .feature-head__intro,
    .feature-head__desc { font-size: var(--fs-lead); line-height: var(--lh-lead); }
}

/* Senza immagine il testo occupa tutta la larghezza, e non deve piu scendere
   per allinearsi a una foto che non c'e: 2vw invece di 8vw. */
.feature-head--no-media .feature-head__text {
    width: 100%;
    padding-right: 0;
    padding-top: 2vw;
}

/* -- contatti -- */

.contacts { margin-top: 100px; }
.contacts__inner { display: flex; flex-flow: row wrap; }

.contacts__text {
    order: 2;
    /* Colonna flex: cosi i margini fra i due blocchi di testo non collassano e
       lo stacco resta quello dell'originale. */
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 20px;
    padding-bottom: 20px;
    font-size: 18px;
    line-height: 125%;
}
.contacts__text .contacts__lead p { font-family: var(--font-display); }

.contacts__card { order: 1; width: 100%; }
.contacts__box {
    display: flex;
    flex-direction: column;
    padding: 25px;
    background: var(--accent);
    color: var(--paper);
    border-radius: var(--radius);
}
.contacts__box h1 {
    margin-bottom: 5px;
    font-family: var(--font-display);
    font-size: 26px;
    line-height: 100%;
}
.contacts__box p { margin: 1em 0; font-size: 20px; line-height: 122%; }
.contacts__tel,
.contacts__mail { font-size: 14px; }
.contacts__tel a,
.contacts__mail a { font-size: 18px; line-height: 142%; font-weight: bold; }

.contacts-map iframe {
    display: block;
    width: 100%;
    height: 80vw;
    border: 0;
}

@media (min-width: 701px) {
    .contacts__text { font-size: 22px; line-height: 120%; padding-bottom: 65px; }
    .contacts__box { padding: 40px; }
    .contacts__box h1 { margin-bottom: 20px; font-size: 35px; }
    .contacts__box p { font-size: 32px; line-height: 110%; }
    .contacts__tel, .contacts__mail { font-size: 20px; }
    .contacts__tel a, .contacts__mail a { font-size: 26px; line-height: 140%; }
    .contacts-map iframe { height: 56vw; }
}
@media (min-width: 1026px) {
    .contacts { margin-top: 140px; }
    .contacts__text { order: 0; width: 50%; margin-top: 0; padding-right: 60px; }
    /* Il padding sotto e quello che tiene staccato il riquadro azzurro da cio
       che viene dopo. Senza, l'altezza della riga la decide la colonna piu
       alta: sopra i 1700px e il riquadro, che finiva appoggiato al primo campo
       del modulo (o al messaggio di conferma) senza un filo di respiro. */
    .contacts__card { order: 0; width: 50%; padding-left: 20px; padding-bottom: 80px; }
    .contacts-map iframe { height: 31vw; }
}
@media (min-width: 1301px) {
    .contacts { margin-top: 200px; }
    .contacts__card { padding-left: 110px; }
}
@media (min-width: 1761px) {
    .contacts__text { padding-right: 100px; padding-bottom: 0; font-size: var(--fs-lead); line-height: var(--lh-lead); }
    .contacts__box { padding: 100px; }
    .contacts__box h1 { margin-bottom: 30px; font-size: 48px; }
    .contacts__tel a, .contacts__mail a { font-size: 32px; line-height: 100%; }
    .contacts-map { margin-top: 50px; }
}

/* -- demo -- */

.demo { margin-top: 95px; margin-bottom: 75px; }
.demo__inner { display: flex; flex-flow: row wrap; align-items: stretch; }
.demo__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}
.demo__form { width: 100%; padding-top: 15px; }

@media (min-width: 701px) {
    .demo { margin-top: 100px; margin-bottom: 150px; }
}
@media (min-width: 1026px) {
    .demo { margin-top: 140px; }
    .demo__text { width: 50%; padding-right: 90px; }
    .demo__form { width: 50%; padding-top: 5vw; }
}
@media (min-width: 1761px) {
    .demo__text { padding-right: 150px; }
}

/* -- pagina testuale (privacy) -- */

.text-page { margin-top: 95px; margin-bottom: 75px; }
.text-page h1 { margin-bottom: 20px; }
.text-page__body h2 { margin: 40px 0 10px; font-size: 1.15em; font-weight: bold; }
.text-page__body h3 { margin: 0 0 10px; font-size: 0.85em; font-weight: bold; }
.text-page__body p { margin: 0 0 1em; line-height: 135%; }
.text-page__body ol,
.text-page__body ul { margin: 0 0 1em; padding-left: 1.4em; line-height: 135%; }
.text-page__body li { margin-bottom: 0.4em; }

@media (min-width: 701px)  { .text-page { margin-top: 100px; margin-bottom: 150px; } }
@media (min-width: 1026px) { .text-page { margin-top: 140px; } }


/* 9. Errore 404 ============================================================ */

.error-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 86vh;
    text-align: center;
}
.error-page h1 {
    margin-bottom: 20px;
    font-family: var(--font-display);
    font-size: 100px;
    line-height: 100px;
    color: var(--accent);
}
.error-page h2 {
    margin-bottom: 100px;
    font-family: var(--font-display);
    font-size: 40px;
    line-height: 48px;
}

@media (min-width: 1026px) {
    .error-page { height: 100vh; }
    .error-page h1 { font-size: 230px; line-height: 230px; }
}