/*
 * EasyPest — personalizzazioni sopra il tema Techwind.
 * Techwind (Tailwind v4) definisce i colori come variabili CSS in @theme:
 * basta ridefinirle qui per ricolorare tutto il sito senza ricompilare.
 */

:root {
    /* Blu del logo EasyPest */
    --color-primary:     #1d74bb;
    --color-primary-50:  #eef6fc;
    --color-primary-100: #d7e9f7;
    --color-primary-200: #b0d3ef;
    --color-primary-300: #7fb8e3;
    --color-primary-400: #4a97d3;
    --color-primary-500: #1d74bb;
    --color-primary-600: #1a68a8;
    --color-primary-700: #15558a;
    --color-primary-800: #134274;
    --color-primary-900: #0f3560;

    /* Verde acqua del logo, usato come accento */
    --color-easypest-teal:      #00c2b8;
    --color-easypest-teal-dark: #01a89a;

    /*
     * Il grigio dei testi secondari del tema (slate-400, #94a3b8) su bianco dà
     * un contrasto di 2,6:1 — sotto il minimo AA di 4,5:1. Lo scuriamo alla
     * fonte: tutte le classi text-slate-400 del sito ne beneficiano.
     */
    --color-slate-400: #64748b;
}

/* Titoli di sezione un po' più decisi: prima erano quasi come il testo */
section h2 {
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Sfondo bianco dichiarato: senza, la pagina eredita il bianco predefinito del
   browser e i loghi con fondo bianco possono stagliarsi su grigio. */
body {
    background-color: #fff;
}

/* ==========================================================================
   Utility mancanti nel CSS di Techwind
   Il tailwind.css del tema è compilato: contiene solo le classi che il tema
   usava. Queste servono alle pagine di EasyPest ma non c'erano, quindi non
   facevano nulla. Valori identici a quelli standard di Tailwind.
   Verificabile con: risorse-originali/verifica-classi.py
   ========================================================================== */

.gap-8        { gap: 2rem; }
.gap-2\.5     { gap: 0.625rem; }
.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.625rem; }

.max-w-3xl    { max-width: 48rem; }
.max-w-4xl    { max-width: 56rem; }

.items-start  { align-items: flex-start; }
.h-44         { height: 11rem; }
.break-all    { word-break: break-all; }
.list-disc    { list-style-type: disc; }
.outline-hidden { outline: 2px solid transparent; outline-offset: 2px; }
.end-5        { inset-inline-end: 1.25rem; }

/* Riquadri di avviso: conferma, errore e note da completare */
.bg-emerald-50     { background-color: #ecfdf5; }
.border-emerald-200 { border-color: #a7f3d0; }
.text-emerald-800  { color: #065f46; }

.bg-red-50    { background-color: #fef2f2; }
.border-red-200 { border-color: #fecaca; }
.text-red-800 { color: #991b1b; }

.bg-amber-50  { background-color: #fffbeb; }
.border-amber-200 { border-color: #fde68a; }
.text-amber-900 { color: #78350f; }

/* Accento verde acqua riutilizzabile nelle viste */
.text-teal-brand   { color: var(--color-easypest-teal); }
.bg-teal-brand     { background-color: var(--color-easypest-teal); }
.border-teal-brand { border-color: var(--color-easypest-teal); }

.btn-teal {
    background-color: var(--color-easypest-teal);
    border-color: var(--color-easypest-teal);
    color: #fff;
}
.btn-teal:hover {
    background-color: var(--color-easypest-teal-dark);
    border-color: var(--color-easypest-teal-dark);
}

/* Il logo è a colori: nel footer scuro sta su una pastiglia chiara */
.logo-footer {
    background: #fff;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    display: inline-block;
}

/* Barra recapiti sopra il menu */
.topbar-contatti {
    background: var(--color-primary-800);
    color: #fff;
    font-size: 0.875rem;
}
.topbar-contatti a { color: #fff; }
.topbar-contatti a:hover { color: var(--color-easypest-teal); }

/*
 * Menu sempre bianco e in flusso (Techwind lo tiene fixed e trasparente sopra
 * l'hero: con la barra recapiti sopra si sovrapporrebbero).
 */
#topnav {
    position: sticky;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(60, 72, 88, 0.12);
}

/*
 * Logo centrato in verticale.
 * Techwind allinea il logo con line-height (68px) contando su un'immagine
 * inline, ma il preflight di Tailwind rende le img display:block: il line-box
 * collassa e il logo resta in alto. Lo centriamo con flex sull'altezza reale
 * della barra (74px da desktop, 62px sotto i 992px).
 */
#topnav .logo {
    display: flex;
    align-items: center;
    height: 74px;
}

#topnav .logo img {
    max-height: 38px;
    width: auto;
}

/*
 * Il pulsante "Richiedi demo" sta nella barra solo da 1200px in su: sotto non
 * ci sta (su mobile finiva addirittura fuori dalla barra). Al suo posto compare
 * la voce "Richiedi demo" nel menu, così la pagina demo resta sempre
 * raggiungibile dall'header.
 */
/* Specificità alta: Techwind imposta display sulle voci del menu */
#topnav .navigation-menu > li.voce-demo { display: none; }

@media (max-width: 1199px) {
    #topnav .buy-button { display: none; }
    #topnav .navigation-menu > li.voce-demo { display: inline-block; }
}

/* Il logo è largo: il menu deve stare su una riga sola anche sui portatili */
@media (min-width: 992px) {
    /* Techwind imposta la spaziatura delle voci con proprietà logiche
       (padding-inline) dentro regole annidate: per sovrascriverla serve la
       stessa proprietà con !important, come fa il tema stesso. */
    #topnav #navigation .navigation-menu > li > a {
        padding-inline: 10px !important;
        font-size: 0.8125rem;
    }
    #topnav .navigation-menu > li > .menu-arrow {
        right: -1px;
    }
    #topnav .logo img { max-height: 32px; }

    /*
     * Le voci italiane sono più lunghe delle inglesi e con i margini di
     * Techwind (10px per lato, 140px in totale) il menu non entra nella barra.
     * La spaziatura la dà già il padding dei link, quindi margini e gap si
     * azzerano. Il wrap resta attivo di proposito: se un domani si aggiunge una
     * voce, va a capo in modo visibile invece di finire sopra il logo.
     */
    #topnav .navigation-menu {
        white-space: nowrap;
        gap: 0;
    }

    #topnav .navigation-menu > li {
        margin-left: 0;
        margin-right: 0;
    }
}

/* Fascia stretta dei portatili: voci più compatte per stare su una riga */
@media (min-width: 992px) and (max-width: 1199px) {
    #topnav .logo img { max-height: 28px; }
    #topnav #navigation .navigation-menu > li > a {
        padding-inline: 7px !important;
    }
}

/*
 * Fascia loghi clienti in home: a colori pieni facevano concorrenza all'hero.
 * Restano in grigio e schiariti, tornano a colori al passaggio del mouse.
 * NB: nella pagina Clienti i loghi restano a colori, lì sono il contenuto.
 */
/* ==========================================================================
   Ingresso degli elementi allo scroll
   Le classi le assegna easypest.js: qui c'è solo lo stato iniziale e finale.
   Chi ha attivo "riduci animazioni" vede tutto già a posto (vedi media query).
   ========================================================================== */

.anima {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.anima.visibile {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .anima {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ==========================================================================
   Percorso a passaggi
   Una sequenza (scheda cliente -> preventivo -> firma -> ...) in griglia non
   si legge come sequenza: qui i passaggi stanno in colonna, uniti da una
   linea, e il numero si riempie quando il passaggio entra in vista.
   ========================================================================== */

.percorso {
    position: relative;
    max-width: 46rem;
}

.percorso::before {
    content: "";
    position: absolute;
    top: 1.5rem;
    bottom: 1.5rem;
    left: 1.375rem;
    width: 2px;
    background: linear-gradient(180deg,
        rgba(29, 116, 187, 0.30) 0%,
        rgba(0, 194, 184, 0.30) 100%);
}

.percorso-passo {
    position: relative;
    display: grid;
    grid-template-columns: 2.75rem 1fr;
    gap: 1.5rem;
    align-items: start;
    padding-bottom: 2.25rem;
}

.percorso-passo:last-child {
    padding-bottom: 0;
}

.percorso-numero {
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 2px solid rgba(29, 116, 187, 0.35);
    background: #fff;
    color: var(--color-primary);
    font-weight: 700;
    font-size: 1rem;
    transition: background 0.5s ease, color 0.5s ease, border-color 0.5s ease;
}

/* La classe 'visibile' la mette easypest.js quando il passaggio entra in vista */
.percorso-passo.visibile .percorso-numero {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.percorso-passo h3 {
    font-size: 1.1875rem;
    font-weight: 600;
    color: var(--color-primary-900);
    margin-bottom: 0.4rem;
    padding-top: 0.4rem;
}

.percorso-passo p {
    color: #64748b;
    line-height: 1.7;
    margin: 0;
}

@media (max-width: 575px) {
    .percorso::before { left: 1.125rem; }
    .percorso-passo { grid-template-columns: 2.25rem 1fr; gap: 1rem; }
    .percorso-numero { width: 2.25rem; height: 2.25rem; font-size: 0.875rem; }
}

/* ==========================================================================
   Vetrina del prodotto: le schermate del gestionale in grande
   ========================================================================== */

.vetrina {
    display: grid;
    grid-template-columns: 22rem 1fr;
    gap: 3rem;
    align-items: start;
}

.vetrina-elenco {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.vetrina-voce {
    display: flex;
    gap: 1rem;
    width: 100%;
    text-align: left;
    padding: 1.1rem 1.25rem;
    border: 1px solid transparent;
    border-radius: 0.8rem;
    background: transparent;
    cursor: pointer;
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.vetrina-voce:hover {
    background: #fff;
    border-color: #e8eef4;
}

.vetrina-voce.attiva {
    background: #fff;
    border-color: rgba(29, 116, 187, 0.3);
    box-shadow: 0 10px 26px rgba(15, 53, 96, 0.10);
}

.vetrina-voce h3 {
    font-size: 1.0625rem;
    font-weight: 600;
    margin-bottom: 0.2rem;
    color: var(--color-primary-900);
}

.vetrina-voce p {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: #64748b;
    margin: 0;
}

.vetrina-voce .tessera-icona {
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
    font-size: 1.25rem;
}

/* Finestra del browser attorno alla schermata */
.finestra {
    border-radius: 0.9rem;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(15, 53, 96, 0.20);
    background: #fff;
}

.finestra-barra {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    height: 2.25rem;
    padding: 0 1rem;
    background: #e9eef4;
}

.finestra-barra span {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 999px;
    background: #c3ccd8;
}

.finestra-corpo {
    position: relative;
}

.finestra-corpo img {
    display: block;
    width: 100%;
    transition: opacity 0.4s ease;
}

.finestra-corpo img.uscente {
    opacity: 0;
}

@media (max-width: 991px) {
    .vetrina {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }
}

/* ==========================================================================
   Video di presentazione
   Il file pesa 6,9 MB: con preload="none" e la locandina al suo posto,
   quel peso lo scarica solo chi preme play.
   ========================================================================== */

.video-presentazione {
    position: relative;
    border-radius: 0.9rem;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(15, 53, 96, 0.20);
    background: #0b2a4d;
}

.video-presentazione video {
    display: block;
    width: 100%;
    height: auto;
}

.video-avvia {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: 100%;
    border: 0;
    background: linear-gradient(160deg, rgba(11, 42, 77, 0.45), rgba(11, 42, 77, 0.15));
    cursor: pointer;
    transition: background 0.3s ease;
}

.video-avvia:hover {
    background: linear-gradient(160deg, rgba(11, 42, 77, 0.55), rgba(11, 42, 77, 0.25));
}

.video-avvia span.tasto {
    width: 5rem;
    height: 5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--color-primary);
    font-size: 2.25rem;
    padding-left: 0.35rem;              /* il triangolo va centrato otticamente */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    transition: transform 0.3s ease;
}

.video-avvia:hover span.tasto {
    transform: scale(1.07);
}

.video-avvia span.etichetta {
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

/* ==========================================================================
   Elementi ricorrenti delle pagine interne
   Stesso linguaggio dello slideshow: fasce sfumate, occhielli colorati,
   schede che si sollevano, riquadri icona con gradiente.
   ========================================================================== */

/* Fascia chiara al posto del grigio piatto */
.sezione-chiara {
    background:
        radial-gradient(circle at 12% 0%, rgba(0, 194, 184, 0.07), transparent 40%),
        linear-gradient(180deg, #f7fafc 0%, #eef4f9 100%);
}

/* Occhiello: etichetta tonda sopra ai titoli */
.occhiello,
.slide-occhiello {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-easypest-teal-dark);
    background: rgba(0, 194, 184, 0.10);
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
}

.slide-occhiello {
    margin-bottom: 1.25rem;
}

.occhiello {
    margin-bottom: 1rem;
}

/* Scheda: sostituisce i riquadri con bordo grigio e ombra piatta */
.scheda {
    position: relative;
    background: #fff;
    border: 1px solid #e8eef4;
    border-radius: 0.9rem;
    box-shadow: 0 1px 2px rgba(15, 53, 96, 0.04);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.scheda:hover {
    transform: translateY(-5px);
    border-color: rgba(29, 116, 187, 0.28);
    box-shadow: 0 16px 34px rgba(15, 53, 96, 0.10);
}

/* Riquadro dell'icona: gradiente del brand invece del blu slavato */
.tessera-icona {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.8rem;
    color: var(--color-primary);
    background: linear-gradient(135deg, rgba(29, 116, 187, 0.12) 0%, rgba(0, 194, 184, 0.18) 100%);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.scheda:hover .tessera-icona {
    transform: scale(1.06);
    box-shadow: 0 8px 18px rgba(29, 116, 187, 0.18);
}

/* Foto dei contenuti: stessa macchia di colore dello slideshow */
.foto-decorata {
    position: relative;
    display: block;
}

.foto-decorata::before {
    content: "";
    position: absolute;
    inset: 1.25rem -1.25rem -1.25rem 1.25rem;
    border-radius: 1.1rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-easypest-teal) 100%);
    opacity: 0.13;
}

.foto-decorata img {
    position: relative;
    border-radius: 0.9rem;
    box-shadow: 0 16px 36px rgba(15, 53, 96, 0.15);
}

/*
 * Foto affiancata a una colonna di testo: si allunga fino all'altezza del
 * testo e ritaglia il superfluo. Senza, una foto 4:3 accanto a un blocco di
 * testo alto lascia un vuoto sotto e il rapporto risulta sbilanciato.
 */
@media (min-width: 768px) {
    .foto-affiancata,
    .foto-affiancata img {
        height: 100%;
    }

    .foto-affiancata img {
        object-fit: cover;
        object-position: center;
    }
}

/* Velo delle testate: sfumato invece che nero uniforme.
   Le opacità restano alte: sotto ci sono foto chiare e il testo bianco deve
   restare leggibile su tutta la larghezza. */
.velo-hero {
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg,
        rgba(11, 42, 77, 0.94) 0%,
        rgba(13, 60, 105, 0.90) 50%,
        rgba(1, 110, 104, 0.86) 100%);
}

/* Sulle testate scure l'occhiello turchese non si leggerebbe */
.velo-hero ~ .container .occhiello {
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(2px);
}

/* ==========================================================================
   Slideshow della home — a tutta pagina, come il sito attuale
   ========================================================================== */

.slideshow {
    position: relative;
}

.slideshow-pista {
    position: relative;
    /* Quasi tutto lo schermo, come il sito attuale, ma senza superare i 46rem
       sui monitor molto alti. */
    min-height: min(86vh, 46rem);
}

.slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    overflow: hidden;   /* ritaglia la foto ingrandita dalla carrellata */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease, visibility 0s linear 0.8s;
}

.slide.attiva {
    position: relative;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.8s ease;
}

/* Velo blu: le foto sotto sono chiare, il testo bianco deve reggere ovunque */
.slide-velo {
    position: absolute;
    inset: 0;
    /* Carico a sinistra, dove c'è il testo bianco da leggere; leggero a destra,
       dove sta il soggetto della foto. Prima era carico dappertutto e la foto
       spariva. */
    background:
        linear-gradient(95deg,
            rgba(11, 42, 77, 0.94) 0%,
            rgba(11, 42, 77, 0.86) 40%,
            rgba(13, 60, 105, 0.46) 70%,
            rgba(13, 60, 105, 0.30) 100%),
        linear-gradient(180deg,
            rgba(11, 42, 77, 0.25) 0%,
            rgba(11, 42, 77, 0.00) 30%);
}

.slide-testo {
    max-width: 42rem;
    padding: 6rem 0 8rem;
}

/*
 * Ingresso del testo a ogni cambio di slide.
 * Sul sito attuale ogni elemento entra salendo (fadeInUpBig del tema): senza,
 * la sola dissolvenza della foto risulta piatta. Gli elementi partono
 * sfalsati, così l'occhio segue occhiello -> titolo -> testo -> pulsante.
 */
@keyframes entra-dal-basso {
    from { opacity: 0; transform: translate3d(0, 2.5rem, 0); }
    to   { opacity: 1; transform: none; }
}

.slide.attiva .slide-occhiello,
.slide.attiva .slide-titolo,
.slide.attiva .slide-descrizione,
.slide.attiva .slide-bottone {
    animation: entra-dal-basso 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.slide.attiva .slide-occhiello   { animation-delay: 0.10s; }
.slide.attiva .slide-titolo      { animation-delay: 0.22s; }
.slide.attiva .slide-descrizione { animation-delay: 0.36s; }
.slide.attiva .slide-bottone     { animation-delay: 0.50s; }

/*
 * Lentissima carrellata sulla foto.
 * Il livello che si ingrandisce è uno pseudo-elemento che eredita l'immagine
 * dalla slide: ingrandire la slide stessa muoverebbe anche il testo, e animare
 * background-size in percentuale annullerebbe il "cover" lasciando bordi
 * scoperti su certe proporzioni.
 */
.slide::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: inherit;
    background-position: inherit;
    background-repeat: no-repeat;
    background-size: cover;
    transform-origin: center;
}

.slide.attiva::before {
    animation: respiro-foto 12s ease-out both;
}

@keyframes respiro-foto {
    from { transform: scale(1); }
    to   { transform: scale(1.07); }
}

@media (prefers-reduced-motion: reduce) {
    .slide.attiva::before,
    .slide.attiva .slide-occhiello,
    .slide.attiva .slide-titolo,
    .slide.attiva .slide-descrizione,
    .slide.attiva .slide-bottone {
        animation: none;
    }
}

.slide-occhiello {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    padding: 0.4rem 1rem;
    margin-bottom: 1.5rem;
}

.slide-titolo {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    line-height: 1.05;
    font-weight: 700;
    color: #fff;
    margin-bottom: 1.5rem;
    text-shadow: 0 2px 24px rgba(6, 25, 48, 0.45);
}

.slide-descrizione {
    font-size: 1.25rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.92);
    max-width: 34rem;
    margin-bottom: 2.5rem;
    text-shadow: 0 1px 14px rgba(6, 25, 48, 0.5);
}

.slide-bottone {
    display: inline-block;
    padding: 0.85rem 2rem;
    border-radius: 0.4rem;
    background: var(--color-primary);
    color: #fff;
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: background 0.4s ease, transform 0.4s ease;
}

.slide-bottone:hover {
    background: var(--color-primary-700);
    transform: translateY(-2px);
}

/* Frecce ai lati, a metà altezza */
.slideshow-freccia {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 3rem;
    height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 1.6rem;
    cursor: pointer;
    transition: background 0.3s ease;
}

.slideshow-freccia:hover {
    background: rgba(255, 255, 255, 0.3);
}

.slideshow-freccia.prec { left: 1.25rem; }
.slideshow-freccia.succ { right: 1.25rem; }

.slideshow-punti {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    bottom: 7.5rem;      /* sopra le schede che sporgono */
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.slideshow-punto {
    width: 2rem;
    height: 0.25rem;
    border: 0;
    padding: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    transition: background 0.3s ease, width 0.3s ease;
}

.slideshow-punto.attivo {
    width: 3rem;
    background: #fff;
}

/* Le due schede che sporgono sul bordo inferiore dello slideshow */
.slideshow-schede {
    position: relative;
    margin-top: -5rem;
    margin-bottom: 4rem;   /* stacco dalla fascia scura che segue */
    z-index: 4;
}

.scheda-sporgente {
    display: flex;
    gap: 1.25rem;
    padding: 2rem;
    box-shadow: 0 18px 40px rgba(15, 53, 96, 0.16);
}

.scheda-sporgente h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.scheda-sporgente p {
    line-height: 1.6;
    margin: 0;
}

.scheda-sporgente.chiara {
    background: #fff;
}

.scheda-sporgente.chiara h3 { color: var(--color-easypest-teal-dark); }
.scheda-sporgente.chiara p { color: #64748b; }

.scheda-sporgente.scura {
    background: var(--color-primary);
}

.scheda-sporgente.scura h3 { color: #fff; }
.scheda-sporgente.scura p { color: rgba(255, 255, 255, 0.85); }

.scheda-sporgente.scura .tessera-icona {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

@media (max-width: 991px) {
    .slideshow-pista { min-height: 34rem; }
    .slide-testo { padding: 4.5rem 0 7rem; }

    /* Nelle due foto il tecnico sta sulla destra: su schermi stretti il taglio
       centrato lo lascerebbe fuori. La terza slide è la dashboard, che invece
       va tenuta centrata. */
    .slide { background-position: 68% center; }
    .slide:last-child { background-position: center; }
    .slide-descrizione { font-size: 1.05rem; }
    /* Ai lati le frecce finirebbero sopra al testo, che qui è a tutta
       larghezza: scendono in basso, in linea con i pallini. */
    .slideshow-freccia {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 1.2rem;
        top: auto;
        bottom: 4.5rem;
        transform: none;
    }
    .slideshow-freccia.prec { left: 1rem; }
    .slideshow-freccia.succ { right: 1rem; }
    .slideshow-punti { bottom: 5.5rem; }
    .slideshow-schede { margin-top: -3rem; }
    .scheda-sporgente { padding: 1.5rem; }
}

/*
 * Fila unica: i loghi stanno tutti sulla stessa riga, mai incolonnati.
 * Su schermi stretti la fascia scorre in orizzontale invece di andare a capo,
 * così i loghi restano leggibili anche su telefono.
 */
.fila-loghi {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    overflow-x: auto;
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* Edge legacy */
}

.fila-loghi::-webkit-scrollbar {
    display: none;
}

/* La cella riserva l'altezza: i loghi sono in lazy load e senza questo
   la riga collassa a zero e "salta" quando le immagini arrivano. */
.cella-logo-cliente {
    min-height: 52px;
    flex: 0 0 auto;
}

.logo-cliente {
    max-height: 42px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.45;
    transition: filter 0.4s ease, opacity 0.4s ease;
}

.logo-cliente:hover {
    filter: grayscale(0);
    opacity: 1;
}

/* Nella pagina Clienti i loghi sono a colori ma piccoli, accanto al nome:
   il marchio serve a riconoscere l'azienda, non a fare da illustrazione. */
.logo-cliente-scheda {
    height: 2.75rem;
    width: 4.5rem;
    object-fit: contain;
    object-position: left center;
    flex-shrink: 0;
}

/* Elenchi puntati dei contenuti testuali */
.contenuto ul {
    list-style: none;
    padding-left: 0;
}
.contenuto ul li {
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: 0.75rem;
}
.contenuto ul li::before {
    /* ri-check-line. Attenzione: il codice va preso da remixicon.css, non a
       memoria — qui c'era \ec5e, che è l'icona del trascinamento. */
    content: "\eb7b";
    font-family: "remixicon";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-easypest-teal);
    font-weight: 600;
}