/* ============================================================
 *  A.S.H. — Stile specifico: carta-da-parati
 *  GENERATO dalla fase 1: non modificare a mano senza aggiornare
 *  anche le altre pagine. Vedi includes/layout/head.php.
 * ============================================================ */

        .hero-servizio .hero-bg {
            position: absolute;
            inset: 0;
            background: url('../../media/Carta%20da%20Parati/14-hero-grafica-geometrica.jpg') center center / cover no-repeat;
            /* Stessa foto in WebP: i browser che non conoscono image-set()
               scartano questa riga e restano sul JPEG qui sopra. */
            background-image: image-set(url('../../assets/ottimizzate/media/Carta%20da%20Parati/14-hero-grafica-geometrica-1200.webp') type('image/webp') 1x);
            animation: kenburns 22s ease-in-out infinite alternate;
            will-change: transform;
        }

        
        @media (max-width: 767.98px) {
            .hero-servizio .hero-bg { background-image: image-set(url('../../assets/ottimizzate/media/Carta%20da%20Parati/14-hero-grafica-geometrica-800.webp') type('image/webp') 1x); }
        }

        
        #ciclo::before,
        #applicazioni::before,
        #cta-finale::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 6px;
            background: linear-gradient(90deg, var(--oro-scuro) 0%, var(--oro) 25%, #e8cc82 50%, var(--oro) 75%, var(--oro-scuro) 100%);
        }

/* ================= CICLO DI TINTEGGIATURA IN 4 FASI ================= */

        
        
        #ciclo {
            padding: 5.5rem 0;
            background: linear-gradient(180deg, #f4edda 0%, #f9f4e8 100%);
            position: relative;
            overflow: hidden;
        }

        
        #ciclo .bagliore {
            position: absolute;
            top: -180px;
            right: -140px;
            width: 520px;
            height: 520px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(201, 162, 75, .16), transparent 65%);
            pointer-events: none;
        }

        .card-fase {
            position: relative;
            display: flex;
            flex-direction: column;
            height: 100%;
            background: linear-gradient(160deg, #fffefb 0%, #fdf8ec 100%);
            border: 1px solid #e6d5a8;
            border-radius: 18px;
            padding: 1.8rem 1.5rem 1.5rem;
            box-shadow: 0 12px 30px rgba(169, 130, 47, .10);
            transition: transform .3s ease, background .3s ease, border-color .3s ease, box-shadow .3s ease;
        }

        .card-fase:hover {
            transform: translateY(-6px);
            border-color: var(--oro);
            box-shadow: 0 20px 44px rgba(169, 130, 47, .22);
        }

/* Numero della fase in oro sfumato */

        
        .card-fase .fase {
            font-size: 2.1rem;
            font-weight: 800;
            line-height: 1;
            margin-bottom: .8rem;
            background: linear-gradient(135deg, var(--oro), var(--oro-scuro));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .card-fase h5 {
            color: var(--scuro);
            font-size: .95rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .5px;
            margin-bottom: .5rem;
        }

        .card-fase p {
            font-size: .85rem;
            line-height: 1.65;
            margin: 0 0 1.2rem;
        }

/* Barra di avanzamento: cresce dalla fase 01 alla 04 */

        
        .card-fase .barra-fase {
            margin-top: auto;
            height: 4px;
            border-radius: 2px;
            background: rgba(169, 130, 47, .15);
            overflow: hidden;
        }

        .card-fase .barra-fase span {
            display: block;
            height: 100%;
            border-radius: 2px;
            background: linear-gradient(90deg, var(--oro-scuro), var(--oro));
        }

/* Fase 04: la card firma, con badge e bordo oro pieno */

        
        .card-fase.firma {
            background: linear-gradient(160deg, #fbf1d9 0%, #fdf8ec 100%);
            border-color: var(--oro);
        }

/* Colonna fotografica del ciclo: il cantiere accanto alle 4 fasi */

        
        .foto-ciclo {
            position: relative;
            height: 100%;
            min-height: 420px;
            border-radius: 22px;
            overflow: hidden;
            border: 1px solid #e6d5a8;
            box-shadow: 0 22px 50px rgba(169, 130, 47, .18);
        }

        .foto-ciclo img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .foto-ciclo .velo {
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, transparent 40%, rgba(24, 30, 34, .74) 100%);
        }

        .foto-ciclo .badge-qualita { top: 18px; left: 18px; }

        .foto-ciclo .didascalia {
            position: absolute;
            left: 1.4rem;
            right: 1.4rem;
            bottom: 1.2rem;
            color: #fff;
        }

        .foto-ciclo .didascalia h5 {
            color: #fff;
            font-size: .95rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .5px;
            margin-bottom: .3rem;
        }

        .foto-ciclo .didascalia p {
            margin: 0;
            font-size: .82rem;
            line-height: 1.6;
            color: rgba(255, 255, 255, .85);
        }

        @media (max-width: 991.98px) {
            .foto-ciclo { min-height: 300px; }
        }

        
        @media (max-width: 575.98px) {
            /* Ritmo verticale più compatto: meno vuoto tra le sezioni */
            #cosa-facciamo { padding: 3.8rem 0 2.4rem; }
            #perche-noi { padding: 2.4rem 0 3.8rem; }
            #ciclo, #applicazioni, #faq { padding: 3.8rem 0; }
            #cta-finale { padding: 3.4rem 0; }

            /* Righe impilate: gutter orizzontale standard e respiro ridotto */
            .row.g-5 { --bs-gutter-x: 1.5rem; --bs-gutter-y: 2.4rem; }

            /* CTA a tutta larghezza: più facili da premere */
            #cta-finale .btn-bianco {
                display: flex;
                justify-content: center;
                width: 100%;
                padding-top: .85rem;
                padding-bottom: .85rem;
            }

            footer { padding-top: 3.2rem; }
            footer a { overflow-wrap: anywhere; }
            .footer-bottom { margin-top: 2rem; }

            /* Pulsanti flottanti: rispettano le aree sicure di iPhone */
            .btn-whatsapp {
                right: max(16px, env(safe-area-inset-right));
                bottom: max(18px, env(safe-area-inset-bottom));
            }

            .btn-top {
                right: max(21px, env(safe-area-inset-right));
                bottom: 88px;
            }
        }