/* IMPORTAZIONE GOOGLE FONTS */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600&family=Playfair+Display:ital,wght@0,700;1,700&display=swap');

:root {
    --primary-pink: #D49393;
    --dark-accent: #4A3F3F;
    --soft-bg: #FFF9F9;
    --gold-detail: #A67C52;
    
    /* Variabili Font */
    --font-titles: 'Playfair Display', serif;
    --font-body: 'Montserrat', sans-serif;
}

body {
    font-family: var(--font-body);
    color: var(--dark-accent);
    background-color: var(--soft-bg);
    line-height: 1.6;
}

/* TITOLI: Eleganti e d'impatto */
h1, h2, h3, .display-4, .display-5 {
    font-family: var(--font-titles);
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--dark-accent);
}

/* TESTO LEAD (Sotto i titoli) */
.lead {
    font-family: var(--font-body);
    font-weight: 300;
    letter-spacing: 0.5px;
}

/* BOTTONI E MENU: Puliti e leggibili */
.btn, .nav-link, .fw-bold {
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: 1px;
}

/* PREZZI E DETTAGLI: Moderni */
.text-primary {
    font-family: var(--font-body);
    font-weight: 600;
}

html {
    scroll-behavior: smooth;
}

section {
    scroll-margin-top: 80px;
}

/* Sovrascrittura colori Bootstrap con le variabili Root */
.btn-primary, .bg-primary {
    background-color: var(--primary-pink) !important;
    border-color: var(--primary-pink) !important;
    color: white !important;
}

.text-primary {
    color: var(--primary-pink) !important;
}

.btn-outline-primary {
    color: var(--primary-pink) !important;
    border-color: var(--primary-pink) !important;
}

.btn-outline-primary:hover {
    background-color: var(--primary-pink) !important;
    color: white !important;
}

/* Navigazione */
nav ul {
    display: flex;
    list-style-type: none;
    text-align: left;
    background-color: #ffffff;
}

nav li a {
    text-decoration: none;
    color: var(--dark-accent);
    font-family: sans-serif;
}

/* Nel tuo file style.css */
/* Aumentiamo la leggibilità generale dei paragrafi */
p {
    font-size: 1.15rem; /* Dimensione equilibrata per il corpo del testo */
    line-height: 1.7;
    font-weight: 400;   /* Portiamo a 400 per evitare che il testo sia troppo sottile */
}

/* Specifica per i testi nelle card (Sostituisci la tua vecchia regola .small) */
.small, small {
    font-size: 1.05rem !important; /* Molto più leggibile di prima */
    line-height: 1.6;
    font-weight: 400;
}

/* Se vuoi che i titoli delle card siano ancora più evidenti */
.card-custom h3 {
    font-size: 1.7rem;
    margin-bottom: 1rem;
}
/* Servizi */
.object-fit-cover {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.card {
    max-width: 400px;
    margin: auto;
}


/* 1. EFFETTO "SOFT FOCUS" E ZOOM SULLE IMMAGINI */
.pippo .ratio {
    overflow: hidden;
}

.pippo img {
    transition: transform 0.8s cubic-bezier(0.2, 1, 0.3, 1), filter 0.8s ease;
    filter: saturate(0.8) brightness(0.9);
}

.pippo:hover img {
    transform: scale(1.1);
    filter: saturate(1.1) brightness(1.05);
}

.pippo:hover {
    box-shadow: 0 20px 40px rgba(212, 147, 147, 0.2) !important;
}

/* 3. ANIMAZIONE DEL TITOLO E PREZZO */
.pippo-body h3 {
    position: relative;
    display: inline-block;
    transition: color 0.3s ease;
}

.pippo:hover h3 {
    color: var(--primary-pink);
}

/* 4. BOTTONE CARD CHE SI "ACCENDE" */


.pippo:hover .btn-primary {
    letter-spacing: 2px;
    background-color: var(--dark-accent) !important;
    /* Opzionale: aggiungi una transition per rendere il cambio fluido */
    transition: all 0.3s ease; 
}

/* Sincronizza anche il colore del prezzo */
.pippo:hover .text-primary {
    color: var(--dark-accent) !important;
    transition: color 0.3s ease;
}












/* WhatsApp Float */
.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    background: linear-gradient(135deg, var(--primary-pink) 0%, #B06D6D 100%);
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
    z-index: 9999;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border: none;
}

.whatsapp-float:hover {
    background: linear-gradient(135deg, #B06D6D 0%, var(--primary-pink) 100%);
    transform: scale(1.1);
    color: #FFF;
}

.card-beauty {
    background: rgba(255, 255, 255, 0.7);
    
    /* FIX PER SAFARI E iOS: aggiungi questa riga sopra l'originale */
    -webkit-backdrop-filter: blur(10px); 
    backdrop-filter: blur(10px);
    
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.card-beauty:hover {
    box-shadow: 0 20px 40px rgba(212, 147, 147, 0.2);
    background: rgba(255, 255, 255, 0.9);
}

/* Sfumatura di testo elegante che si svela */
.card-beauty p {
    opacity: 0.8;
    transition: opacity 0.3s;
}

.card-beauty:hover p {
    opacity: 1;
}

/* 1. CURSORE PERSONALIZZATO - Effetto "Seta" */
#custom-cursor {
    width: 20px;
    height: 20px;
    background: var(--primary-pink);
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 10000;
    mix-blend-mode: multiply;
    transition: transform 0.1s ease, opacity 0.3s ease;
    opacity: 0.5;
}

#custom-cursor.hovered {
    transform: scale(3);
    opacity: 0.2;
}



/* 1. EFFETTO "SOFT FOCUS" E ZOOM SULLE IMMAGINI */
.card .ratio {
    overflow: hidden;
}

.card img {
    transition: transform 0.8s cubic-bezier(0.2, 1, 0.3, 1), filter 0.8s ease;
    filter: saturate(0.8) brightness(0.9);
}

.card:hover img {
    transform: scale(1.1);
    filter: saturate(1.1) brightness(1.05);
}



.card:hover {
    box-shadow: 0 20px 40px rgba(212, 147, 147, 0.2) !important;
}

/* 3. ANIMAZIONE DEL TITOLO E PREZZO */
.card-body h3 {
    position: relative;
    display: inline-block;
    transition: color 0.3s ease;
}

.card:hover h3 {
    color: var(--primary-pink);
}

/* 4. BOTTONE CARD CHE SI "ACCENDE" */
.card .btn-primary {
    transition: letter-spacing 0.3s ease, background-color 0.3s ease;
}



/* Configurazione avanzata della Hero con Immagine e Overlay */
#Home {
    position: relative;
    overflow: hidden;
    z-index: 1;
    /* 1. L'immagine di sfondo (sostituisci il path) */
    background-image: url('img/Progettosenzatitolo.webp'); 
    background-size: cover;
    background-position: center center;
    background-attachment: fixed; /* Opzionale: Effetto parallasse fisso */
}

/* 2. Pseudo-elemento per l'Overlay di Contrasto */
#Home::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Gradiente che sfuma dal bianco sporco al trasparente, garantendo leggibilità in alto */
    background: linear-gradient(180deg, rgba(255, 249, 249, 0.9) 0%, rgba(255, 249, 249, 0.5) 50%, rgba(255, 249, 249, 0.9) 100%);
    z-index: -1; /* Sta sotto il testo, ma sopra l'immagine */
}

/* 3. Assicuriamoci che il contenuto stia sopra l'overlay */
#Home .container {
    position: relative;
    z-index: 2;
}

/* Un dettaglio per il testo: un'ombra morbida per staccarlo dallo sfondo */
#Home h1, #Home p {
    text-shadow: 0 2px 4px rgba(74, 63, 63, 0.1); /* Usiamo il tuo dark-accent soft */
}

/* Particelle di luce sullo sfondo */
.bokeh-particle {
    position: absolute;
    background: var(--primary-pink);
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.15;
    z-index: -1;
    pointer-events: none;
    animation: floatParticle 15s infinite linear;
}

@keyframes floatParticle {
    0% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(100px, 150px) scale(1.5); }
    66% { transform: translate(-50px, 250px) scale(0.8); }
    100% { transform: translate(0, 0) scale(1); }
}

/* Animazione testo all'entrata */
#Home h1 {
    background: linear-gradient(90deg, var(--dark-accent), var(--primary-pink), var(--dark-accent));
    background-size: 200% auto;
    
    /* 1. Prima la versione specifica per il motore di rendering (Webkit) */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    /* 2. Poi la versione Standard (sovrascrive la precedente se supportata) */
    background-clip: text; 
    
    animation: shineText 5s linear infinite;
}

@keyframes shineText {
    to {
        background-position: 200% center;
    }
}


/* Pulsanti con micro-interazione */
.btn-primary.shadow {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-primary.shadow:hover {
letter-spacing: 2px;
    background-color: var(--dark-accent) !important;
}

/* 1. RESET E SEMPLIFICAZIONE ICONE (Rimuove la rotazione) */
#Chi-siamo i {
    transition: color 0.4s ease; /* Anima solo il colore, non il movimento */
    transform: none !important; /* Blocca qualsiasi rotazione residua */
}

/* 2. CAMBIO COLORE ICONA AL PASSAGGIO (Da rosa a bronzo/oro) */
#Chi-siamo .card:hover i {
    color: var(--dark-accent) !important; /* Usiamo il colore dettaglio definito nella root */
}

/* 3. EFFETTO "AUREOLA" SOFT DIETRO L'ICONA (Sottile e rilassante) */
#Chi-siamo i::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    background: var(--soft-bg);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    z-index: -1;
    transition: transform 0.4s ease, opacity 0.4s ease;
    opacity: 0;
}

#Chi-siamo .card:hover i::after {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

/* 4. MANTIENI L'EFFETTO TILT SULLA CARD (Opzionale, se ti piace) */
#Chi-siamo .card {
    transition: transform 0.1s ease, box-shadow 0.3s ease;
}

#Chi-siamo .card:hover {
    box-shadow: 0 15px 30px rgba(74, 63, 63, 0.1) !important; /* Ombra morbida usando dark-accent */
}

/* 5. LINK "PRENOTA ORA" AGGIORNATO (Più elegante) */
#Chi-siamo a.text-primary {
    position: relative;
    display: inline-block;
    transition: all 0.3s ease;
    font-weight: 600;
}

#Chi-siamo a.text-primary:hover {
    color: var(--dark-accent) !important;
    padding-left: 5px;
}



/* 1. EFFETTO FOCUS SUI CAMPI DEL FORM */
#Contatti .form-control, #Contatti .form-select {
    transition: all 0.3s ease;
    background-color: transparent;
}

#Contatti .form-control:focus, #Contatti .form-select:focus {
    background-color: var(--soft-bg);
    padding-left: 3rem !important; /* Sposta il testo a destra quando scrivi */
    box-shadow: inset 5px 0 0 var(--primary-pink); /* Linea colorata interna a sinistra */
}

/* 2. ANIMAZIONE DEL BOTTONE INVIA */
#Contatti .btn-primary {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

#Contatti .btn-primary:hover {
    letter-spacing: 3px;
    background-color: var(--dark-accent) !important;
}

/* 3. EFFETTO SULLE ICONE DI CONTATTO */
#Contatti .rounded-circle {
    transition: transform 0.4s ease, background-color 0.4s ease;
}

#Contatti .d-flex:hover .rounded-circle {
    transform: scale(1.1);
    background-color: var(--primary-pink) !important;
    color: white !important;
}


/* ==========================================================================
   FOOTER AGGIORNATO (Sfondo Rosa, Dettagli Oro)
   ========================================================================== */

footer {
    /* 1. Sfondo Rosa della Root (Più scuro e leggibile) */
    background-color: var(--dark-accent) !important;
    
    /* 2. Testo Chiaro per contrasto su sfondo scuro */
    color: var(--soft-bg) !important;
    
    padding: 80px 0 60px 0; /* Più respiro in alto per la Top Line */
    
    /* 3. Top Line Gold (Dettaglio Oro Sottile) */
    position: relative;
    border-top: none; /* Rimuoviamo il vecchio bordo spesso */
}

/* Pseudo-elemento per una linea oro più elegante e sottile */
footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background-color: var(--gold-detail); /* Dettaglio Oro */
    border-radius: 0 0 10px 10px; /* Arrotondato sotto */
}

/* 4. LOGO NEL FOOTER (Chiaro/Rosato per eleganza) */
footer h3.navbar-brand {
    font-size: 2.5rem;
    color: #ffffff !important; /* Bianco puro per massimo contrasto */
    letter-spacing: 3px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.1);
    margin-bottom: 30px;
    display: inline-block;
}

/* 5. MESSAGGIO PER IL TUO POTENZIALE CLIENTE */
footer p.cta-title {
    color: var(--gold-detail) !important;
    font-weight: 700;
    
    /* FIX: Proprietà e valore corretti */
    text-transform: uppercase; 
    
    letter-spacing: 2px;
    font-size: 1rem;
    margin-bottom: 10px;
}

footer p.text-muted {
    color: rgba(255, 249, 249, 0.8) !important; /* Soft-bg con opacità per leggibilità */
    font-size: 1.1rem;
    font-weight: 300;
    max-width: 600px;
    margin: 0 auto 20px auto;
}

/* 6. BOTTONE "RICHIEDI CONSULENZA" (Outline Chiaro, Hover Oro) */
footer .btn-outline-primary {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    font-weight: 600;
    letter-spacing: 1px;
    transition: all 0.4s ease;
}

footer .btn-outline-primary:hover {
    background-color: #ffffff !important; /* Fondo Bianco */
    color: var(--primary-pink) !important; /* Testo Rosa */
    border-color: #ffffff !important;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* 7. LINEA SEPARATRICE E COPYRIGHT */
footer hr {
    border-color: rgba(255, 255, 255, 0.1) !important;
    margin: 40px 0;
}

footer p.copyright-text {
    color: white !important; /* Soft-bg molto opaco per il copyright */
    font-size: 0.95rem;
}

footer p.copyright-text a {
    color: #ffffff !important; /* Bianco per la tua firma */
    font-weight: 600;
    transition: color 0.3s ease;
}

footer p.copyright-text a:hover {
    color: var(--gold-detail) !important; /* Dettaglio Oro su Hover (Firma) */
}



/* SFONDO SEZIONE */
.section-beauty-bg {
    background-color: var(--soft-bg);
}

/* LA LINEA ROSA (Sostituisce lo stile inline) */
.divider-beauty {
    height: 3px;
    width: 60px;
    background-color: var(--primary-pink);
    border-radius: 50px;
}

/* STILE CARD PERSONALIZZATO */
.card-custom {
    background-color: #ffffff;
    transition: all 0.4s ease;
}

/* LINK "PRENOTA ORA" */
.link-beauty {
    color: var(--primary-pink);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease, padding-left 0.3s ease;
}

.link-beauty:hover {
    color: var(--gold-detail);
    padding-left: 8px;
}

/* GESTIONE ICONE (Senza rotazioni fastidiose) */
#Chi-siamo i {
    color: var(--primary-pink) !important;
    transition: color 0.3s ease;
}

.card-custom:hover i {
    color: var(--gold-detail) !important;
}


/* GESTIONE ICONE CON SPAN */
.icon-beauty {
    display: block; /* Essenziale per applicare margini e trasformazioni agli span */
    font-size: 2rem;
    color: var(--primary-pink);
    transition: color 0.4s ease, transform 0.4s ease;
}

/* Effetto al passaggio sulla card */
.card-custom:hover .icon-beauty {
    color: var(--gold-detail);
    /* Se vuoi un micro-movimento molto discreto e professionale: */
}

/* LA LINEA ROSA (Aggiornamento per sicurezza) */
.divider-beauty {
    height: 3px;
    width: 60px;
    background-color: var(--primary-pink);
    border-radius: 50px;
    margin-top: 1.5rem;
}

/* Ingrandisce gli H3 in tutte le card (Servizi e Chi Siamo) */
.card-body h3, .card-custom h3 {
    font-size: 1.7rem !important; /* Dimensione aumentata rispetto al default */
    font-family: var(--font-titles);
    margin-bottom: 1rem;
}

/* Opzionale: se vuoi che il prezzo rimanga ben visibile sotto */
.card-body .text-primary.fs-5 {
    font-size: 1.3rem !important; 
    margin-top: 15px;
}


/* STILE SPECIFICO RECENSIONI */
.profile-img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border: 2px solid var(--primary-pink);
    padding: 2px;
}

.card-review {
    transition: all 0.3s ease;
    background-color: #fff;
}

.card-review:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(212, 147, 147, 0.15) !important;
}

.card-review p.italic {
    font-style: italic;
    font-size: 1.1rem; /* Leggermente più piccolo del testo corpo per differenziarlo */
    line-height: 1.6;
}

/* Colore delle stelline */
.text-warning {
    color: #FFD700 !important; /* Un oro classico per le stelle */
}


/* Stile della sezione Hero */
.hero-section {
    background-color: var(--soft-bg);
    padding-top: 100px;    /* Spazio per la navbar fixed */
    padding-bottom: 80px;
    border-bottom: 1px solid rgba(212, 147, 147, 0.1);
}

/* Gestione della larghezza del testo senza inline style */
.hero-lead {
    max-width: 800px;
    font-size: 1.25rem;
    line-height: 1.8;
}

/* Modifica opzionale per il secondo tasto (Outline) per differenziarlo */
.btn-outline-primary {
    border: 2px solid var(--primary-pink);
    color: var(--primary-pink);
    transition: all 0.3s ease;
}

.btn-outline-primary:hover {
    background-color: var(--primary-pink);
    color: white;
    transform: translateY(-2px);
}

/* Divisore elegante sotto i titoli di sezione */
.divider-beauty {
    height: 3px;
    width: 60px;
    background-color: var(--primary-pink); /* Usa il tuo rosa della root */
    border-radius: 10px;
}

/* Descrizione standard per le intestazioni di sezione */
.section-desc {
    max-width: 700px;
    font-size: 1.15rem;
    line-height: 1.6;
}

/* Descrizione standard per le intestazioni di tutte le sezioni */
.section-desc {
    max-width: 700px; /* Sostituisce lo stile inline */
    font-size: 1.15rem;
    line-height: 1.6;
    margin-bottom: 2rem; /* Aggiunge un po' di spazio prima delle card */
}

/* Stile per l'Iframe della Mappa */
.map-iframe {
    border: 0;
    width: 100%;
    height: 100%;
    /* Un tocco di classe: rende la mappa leggermente meno "aggressiva" visivamente */
    filter: grayscale(20%) contrast(90%); 
    transition: filter 0.3s ease;
}

.map-iframe:hover {
    filter: grayscale(0%) contrast(100%);
}

/* Forza tutti gli elementi del form a usare lo stesso font e grandezza */
.form-control, 
.form-select, 
.form-control-lg {
    font-family: inherit !important; /* Eredita il font del sito */
    font-size: 1.1rem !important;    /* Imposta una grandezza fissa per tutti */
}

/* Effetto focus elegante per i campi del form */
.form-control:focus, 
.form-select:focus {
    background-color: var(--soft-bg) !important; /* Un leggero rosa pallido al clic */
    box-shadow: none !important;
    border-color: var(--primary-pink) !important;
    transition: background-color 0.3s ease;
}

/* Allinea lo stile del select a quello degli input */
.form-select.form-control-lg {
    padding-left: 3rem !important; /* Allinea il testo se hai padding particolari */
}

.form-message {
    min-height: 200px;
    resize: none; /* Impedisce il ridimensionamento manuale che sballa il design */
}

/* Opzionale: un tocco di colore al focus */
.form-message:focus {
    background-color: var(--soft-bg);
    outline: none;
    box-shadow: none;
}

/* Assicurati che il placeholder abbia la stessa dimensione */
::placeholder {
    font-size: 1.1rem;
    opacity: 0.8;
}





@media (min-width: 1200px) {
    p {
        font-size: 1.15rem; /* Leggermente più piccolo su schermi enormi */
    }
}


/* ==========================================================================
   OTTIMIZZAZIONE MOBILE & TABLET (Media Queries)
   ========================================================================== */

@media (max-width: 991.98px) {
    /* 1. SEZIONE CONTATTI: Mappa e Form */
    #Contatti .col-lg-5 {
        border-bottom: 2px solid var(--soft-bg); /* Sostituisce il bordo laterale */
    }
    
    .map-iframe {
        height: 350px !important; /* Forza un'altezza fissa per la mappa */
    }

    /* 2. FOOTER: Allineamento centrale su tablet */
    footer .text-start {
        text-align: center !important;
    }
    
    footer .btn-outline-primary {
        width: 100%; /* Bottone consulenza a tutta larghezza */
        margin-top: 20px;
    }
}

@media (max-width: 767.98px) {
    /* 3. TIPOGRAFIA: Ridimensionamento titoli per non uscire dallo schermo */
    h1.display-4 {
        font-size: 2.2rem !important;
    }
    
    .hero-section {
        padding-top: 120px !important; /* Più spazio per la navbar fixed */
        padding-bottom: 60px !important;
        text-align: center;
    }

    .hero-lead {
        font-size: 1.1rem !important;
        padding: 0 15px;
    }

    /* 4. LAYOUT: Reset dei margini forzati nell'HTML */
    .mx-md-5 {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .container, .container-fluid {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* 5. CARD E INTERAZIONI: Disattivazione Hover e Zoom */
    .card:hover img, .pippo:hover img {
        transform: none !important; /* Evita zoom fastidiosi al touch */
        filter: saturate(1) brightness(1) !important;
    }

    .pippo:hover, .card-beauty:hover, .card-custom:hover {
        transform: none !important;
        box-shadow: 0 5px 15px rgba(0,0,0,0.08) !important;
    }

    .card-body h3, .card-custom h3 {
        font-size: 1.4rem !important; /* Titoli card più compatti */
    }

    /* 6. WHATSAPP FLOAT: Più piccolo e meno invasivo */
    .whatsapp-float {
        width: 50px;
        height: 50px;
        bottom: 20px;
        right: 20px;
        font-size: 24px;
    }

    /* 7. FORM: Rimuoviamo il padding-left eccessivo al focus */
    #Contatti .form-control:focus, #Contatti .form-select:focus {
        padding-left: 1rem !important;
    }

    /* 8. CURSORE PERSONALIZZATO: Nascondere su touch device */
    #custom-cursor {
        display: none !important;
    }
}

/* 9. FIX PER IPHONE (Safe Areas) */
@supports (padding: env(safe-area-inset-bottom)) {
    .whatsapp-float {
        bottom: calc(20px + env(safe-area-inset-bottom));
    }
}