/* =========================================================================
   1. REGOLE GLOBALI E DI SCORRIMENTO
   Qui ci sono i colori di base del sito e l'effetto di scorrimento dolce.
   ========================================================================= */
html {
    scroll-behavior: smooth; /* Fa scorrere la pagina piano quando clicchi sul menu */
    scroll-padding-top: 101px; /* Evita che il menu nasconda i titoli, lasciando spazio esatto */
}

*, *::before, *::after { box-sizing: border-box; } /* Impedisce agli elementi di uscire dallo schermo */

body {
    background-color: #e3dbd0; /* Il colore beige di fondo del sito */
    color: #333333; /* Il colore dei testi base (grigio scuro/nero) */
    font-family: Arial, sans-serif;
    margin: 0; padding: 0;
    overflow-x: hidden; /* Nasconde la barra di scorrimento orizzontale in basso */
}

h1, h2, h3 { 
    color: #ffffff; /* Colore dei titoli grandi */
}


/* =========================================================================
   2. LA BARRA DEL MENU IN ALTO (NAVBAR) E IL LOGO
   ========================================================================= */
.navbar {
    position: fixed; /* Il menu resta incollato in alto */
    top: 0; left: 0; width: 100%;
    background-color: #e3dbd0; /* Sfondo del menu, beige pieno */
    display: flex; justify-content: space-between; align-items: center; 
    padding: 10px 50px; 
    z-index: 1000; /* Assicura che il menu stia sempre sopra a tutto il resto */
    border-bottom: 1px solid rgba(0,0,0,0.05); /* Righina sottile sotto al menu */
}

.logo-img { 
    height: 80px; /* Grandezza del logo sul PC */
    width: auto; 
}

.nav-links { display: flex; gap: 30px; } /* Spazio tra i bottoni "Home, Servizi..." */

.nav-links a { 
    text-decoration: none; 
    color: #333333; 
    font-weight: bold; 
    font-size: 14px; 
    transition: color 0.3s ease; /* Fa il cambio colore dolce quando ci passi col mouse */
}
.nav-links a:hover { color: #ffffff; } /* Colore dei link quando ci passi sopra col mouse */


/* =========================================================================
   3. IL TESTO INTRODUTTIVO GIGANTE (Nuova Apertura)
   ========================================================================= */
.testo-intro { text-align: center; padding: 160px 20px 40px 20px; }
.titolo-intro { color: #ffffff; font-size: clamp(30px, 4vw, 50px); letter-spacing: 5px; margin-bottom: 20px; text-transform: uppercase; }
.sottotitolo-intro { color: #333333; font-size: clamp(18px, 2vw, 24px); font-weight: normal; letter-spacing: 1px; margin-bottom: 10px; text-transform: uppercase; }
.paragrafo-intro { color: #333333; font-size: clamp(16px, 1.5vw, 18px); font-weight: normal; margin: 0 auto; max-width: 600px; }


/* =========================================================================
   4. LA FORMA E IL TAGLIO DEI CAROSELLI FOTOGRAFICI
   Gestisce le proporzioni (quadrato o verticale) delle foto.
   ========================================================================= */
.swiper { 
    width: 90%; 
    margin: 30px auto 60px auto; 
    border-radius: 25px; /* Quanto sono arrotondati gli angoli della cornice */
    overflow: hidden; 
    box-shadow: 0 15px 40px rgba(0,0,0,0.15); /* L'ombra sotto alle foto */
}
.swiper-slide img { display: block; width: 100%; object-fit: cover; object-position: center; }

/* Carosello 1: Lo Studio (Impostato su quadrato perfetto 1:1) */
.mySwiper { max-width: 900px; }
.mySwiper .swiper-slide img { aspect-ratio: 1/1; }

/* Carosello 2: Dove Siamo (Impostato su verticale 4:5) */
.locationSwiper { max-width: 450px; border-radius: 20px; }
.locationSwiper .swiper-slide img { aspect-ratio: 4/5; }

/* Stile dei bottoni freccia */
.hide-arrows { opacity: 0; transition: opacity 0.3s ease; } /* Le nasconde... */
.swiper:hover .hide-arrows { opacity: 1; } /* ...le mostra quando passi il mouse */
.swiper-button-next, .swiper-button-prev { color: #333333 !important; background-color: rgba(255, 255, 255, 0.9); width: 50px !important; height: 50px !important; border-radius: 50%; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.swiper-button-next::after, .swiper-button-prev::after { font-size: 20px !important; font-weight: bold; }


/* =========================================================================
   5. SEZIONE SERVIZI, PREZZI E ORARI
   Colori e dimensioni delle caselle (card) con il listino e il calendario.
   ========================================================================= */
.sezione-servizi { background-color: #ffffff; padding: 70px 20px 50px 20px; text-align: center; }
.sezione-servizi h2 { color: #333333; font-size: 32px; margin-bottom: 15px; }
.sottotitolo-servizi { color: #333333; font-size: 18px; max-width: 600px; margin: 0 auto 40px auto; line-height: 1.5; }

/* La Card Scura dei Prezzi */
.contenitore-prezzi { display: flex; justify-content: center; margin-bottom: 60px; }
.card-prezzi { background-color: #333333; color: #ffffff; padding: 40px; border-radius: 20px; width: 100%; max-width: 550px; text-align: left; }
.card-prezzi h3 { color: #e5ded5; font-size: 26px; margin-bottom: 25px; border-bottom: 2px solid #555; padding-bottom: 10px; text-align: center; text-transform: uppercase; letter-spacing: 2px; }
.lista-prezzi { list-style: none; padding: 0; margin: 0; }
.lista-prezzi li { display: flex; justify-content: space-between; align-items: center; font-size: 18px; margin-bottom: 15px; border-bottom: 1px dashed #555; padding-bottom: 12px; }
.lista-prezzi li span { display: flex; flex-direction: column; }
.lista-prezzi li small { font-size: 13px; color: #aaaaaa; }
.lista-prezzi li strong { font-size: 24px; color: #e5ded5; }

/* Il Calendario a 4 Colonne */
.titolo-orari { color: #333333; font-size: 28px; margin-bottom: 30px; text-transform: uppercase; }
.griglia-orari { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.card-orario { background-color: #e5ded5; padding: 25px 15px; border-radius: 15px; width: 100%; max-width: 260px; text-align: center; }
.card-orario h3 { color: #333333; font-size: 18px; margin-bottom: 20px; border-bottom: 2px solid #ffffff; padding-bottom: 12px; }
.lista-orari { list-style: none; padding: 0; margin: 0; }
.lista-orari li { color: #333333; font-size: 15px; margin-bottom: 12px; font-weight: bold; border-bottom: 1px solid rgba(255,255,255,0.4); padding-bottom: 10px; }
.lista-orari li span { font-weight: normal; font-size: 13px; }
.lista-orari li small { color: #333; font-style: italic; }

/* Il box grigio con l'avviso medico in fondo */
.nota-medica-esterna { margin-top: 50px; margin-bottom: 0px; font-size: 15px; color: #333333; font-weight: bold; background: #f9f9f9; display: inline-block; padding: 15px 25px; border-radius: 10px; border: 1px solid #e5ded5; }


/* =========================================================================
   6. SEZIONE DOVE SIAMO
   ========================================================================= */
.sezione-dove-siamo { background-color: #ffffff; /* ⬅️ Abbiamo aggiunto lo sfondo bianco */ text-align: center; padding: 70px 20px; }
.sezione-dove-siamo h2 { color: #333333; font-size: 32px; margin-bottom: 10px; }
.indirizzo-testo { color: #333333; font-size: 18px; margin-bottom: 20px; }


/* =========================================================================
   7. SEZIONE CONTATTI E PULSANTI
   ========================================================================= */
.sezione-contatti { text-align: center; padding: 60px 20px 80px 20px; background-color: #e3dbd0; border-top: 2px solid #e5ded5; min-height: 60vh; }
.sezione-contatti h2 { color: #333333; font-size: 32px; margin-bottom: 20px; }

/* Come si comportano i bottoni (Instagram, Telefono, ecc) */
.pulsanti-contatto { display: flex; justify-content: center; gap: 20px; margin-top: 30px; flex-wrap: wrap; }
.btn-contatto { background-color: #e5ded5; color: #333333; padding: 15px 25px; text-decoration: none; font-weight: bold; border-radius: 30px; transition: all 0.3s ease; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.btn-contatto:hover { background-color: #333333; color: #ffffff; transform: translateY(-3px); /* Effetto che fa saltare il bottone in su */ }
.btn-contatto i { margin-right: 8px; font-size: 18px; vertical-align: middle; } /* Allinea bene l'icona alla scritta */


/* =========================================================================
   8. SMARTPHONE E TABLET (IL "RESPONSIVE")
   Queste regole scattano IN AUTOMATICO solo quando lo schermo è piccolo.
   ========================================================================= */
@media (max-width: 768px) {
    /* Il menu si trasforma e si impila per occupare meno spazio */
    .navbar { padding: 10px; flex-direction: column; gap: 10px; }
    .nav-links { gap: 15px; }
    .logo-img { height: 60px; } /* Rimpicciolisce il logo */
    .testo-intro { padding-top: 180px; } 
    
    /* Ridimensiona le foto in modo che non sbordino dal telefono */
    .swiper { width: 95%; }
    .locationSwiper { width: 80% !important; }
    .swiper-button-next, .swiper-button-prev, .hide-arrows { display: none !important; } /* Nasconde le frecce col dito non servono */
    
    /* Assicura che la parte finale del sito si veda bene anche con le barre degli smartphone in basso */
    .sezione-contatti { min-height: 80vh; }
}

/* =========================================================================
   SEZIONE NEWS E CAMPANELLA
   ========================================================================= */
.sezione-news { background-color: #e3dbd0; padding: 70px 20px; text-align: center; }
.sezione-news h2 { color: #333333; font-size: 32px; margin-bottom: 30px; }

/* Stile del messaggio di attesa */
.nessuna-news { background-color: #ffffff; padding: 40px 20px; border-radius: 15px; max-width: 600px; margin: 0 auto; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.nessuna-news p { color: #333333; font-size: 18px; line-height: 1.6; margin: 0; font-style: italic; font-weight: bold; }

/* Stile delle card delle notizie */
.griglia-news { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.card-news { background-color: #ffffff; padding: 30px; border-radius: 15px; max-width: 400px; text-align: left; box-shadow: 0 5px 15px rgba(0,0,0,0.08); border-left: 5px solid #333333; }
.data-news { display: inline-block; background-color: #e5ded5; color: #333333; font-size: 13px; font-weight: bold; padding: 5px 10px; border-radius: 20px; margin-bottom: 15px; }
.card-news h3 { color: #333333; font-size: 20px; margin-bottom: 10px; margin-top: 0; }
.card-news p { color: #555555; font-size: 15px; line-height: 1.5; margin: 0; }

/* La Campanella Fluttuante (Esattamente come nella tua foto) */
.campanella-news { 
    position: fixed; bottom: 30px; left: 30px; 
    background-color: #555555; /* Il verde scuro ed elegante della tua foto */
    color: #ffffff; /* La campanella bianca all'interno */
    width: 60px; height: 60px; border-radius: 50%; 
    display: flex; justify-content: center; align-items: center; 
    font-size: 26px; text-decoration: none; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.3); 
    z-index: 1000; transition: transform 0.3s ease; 
    border: 2px solid #ffffff; /* Bordo bianco esterno come nella tua foto */
}
.campanella-news:hover { transform: scale(1.1) rotate(10deg); }

/* Il pallino rosso delle notifiche */
.pallino-rosso { 
    position: absolute; top: 12px; right: 14px; width: 14px; height: 14px; 
    background-color: #e60000; /* Rosso acceso */
    border-radius: 50%; 
    border: 2px solid #ffffff; /* Bordino bianco intorno al punto rosso per staccarlo dallo sfondo */
}

/* Adattamento per i cellulari */
@media (max-width: 768px) {
    .campanella-news { bottom: 20px; left: 20px; width: 50px; height: 50px; font-size: 20px; }
    .pallino-rosso { top: 10px; right: 12px; width: 10px; height: 10px; }
}