/* ==========================================
   VARIABILI E CONFIGURAZIONE (Stile Moderno)
   ========================================== */
:root {
    --primary-color: #2C6A46 ;   /* Verde Foresta */
    --accent-color: #C85A32;    /* Arancione Fuoco */
    --bg-light: #f8f9fa;        /* Grigio chiarissimo */
    --text-dark: #333333;       /* Grigio scuro per i testi */
    --text-light: #ffffff;
    --colore-card: #F0EBE1;
    --testosfondoverde:#E0E6E2;
    
    /* Colori istituzionali delle branche */
    --branca-lupetti: #ffcc00;  /* Giallo */
    --branca-reparto: yellowgreen ;
    --branca-compagnia:#9E2A2B;    /* Rosso */
}
/* --- Supporto per Firefox --- */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) #E6DDC4; 
}

/* --- Supporto per Chrome, Edge, Safari --- */
/* 1. Larghezza della barra */
::-webkit-scrollbar {
    width: 6px;
}

/* 2. Sfondo della pista (track) */
::-webkit-scrollbar-track {
    background: #E6DDC4; /* Il sabbia del tuo body */
}

/* 3. Cursore della barra (thumb) */
::-webkit-scrollbar-thumb {
    background-color: var(--primary-color); /* Verde foresta */
    border-radius: 10px;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    background-clip: padding-box;
}

/* 4. Effetto hover sul cursore */
::-webkit-scrollbar-thumb:hover {
    background-color: var(--accent-color); /* Arancione fuoco al passaggio del mouse */
}


/* Reset di base e scorrimento fluido */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/* Rete di sicurezza: nessuna immagine (logo incluso) può mai essere più larga
   del suo contenitore, qualunque sia la dimensione originale del file */
img, svg, video, iframe {
    max-width: 100%;
    height: auto;
}

/* Rete di sicurezza finale: anche se qualche elemento dovesse sfondare per
   un motivo che non abbiamo ancora trovato, la pagina non scorre mai in
   orizzontale — nel peggiore dei casi quell'elemento viene tagliato invece
   che spingere tutta la pagina di lato */
html, body {
    overflow-x: clip;
}
html {
    scroll-behavior: smooth; /* Rende lo scroll morbido quando clicchi sui link */
}

body {
    background-color: #E6DDC4;
    color: var(--text-dark);
    line-height: 1.6;
}


.navbar {
    position: sticky;
    top: 0;
    z-index: 1000; /* Mantiene la barra sopra ogni altro elemento visivo */
    
    /* Sfondo verde foresta trasparente (85%) con effetto sfocatura sotto */
    background-color: #2C6A46; 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* Supporto per Safari */
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 40px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.nav-logo {
    color: var(--text-light);
    font-weight: 700;
    font-size: 1.3rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 30px;
}

.nav-links a {
    color: var(--text-light);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.3s ease;
}


.nav-links a:hover {
    color: yellow;
}

.divert{
    color: #9E2A2B;
}
.hero {
    background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), url('../img/campo_2k26.avif') no-repeat center top 70%/cover;
    height: 55vh; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--text-light);
    padding: 20px;
    border-bottom: 5px solid var(--branca-lupetti);
}

.hero h1 {
    font-size: 3rem;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 800;

}

/* --- STILI PER IL SOTTOTITOLO P --- */
.hero p {
    font-size: 1.6rem;
    font-style: italic;
    max-width: 600px;
    font-weight: 300;
    
   
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px;
   
}

.section-title {
    text-align: center;
    font-size: 2.2rem;
    color: #2C6A46;
    margin-bottom: 50px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background-color: var(--branca-compagnia);
    margin: 12px auto 0 auto;
    border-radius: 2px;
}
/* ==========================================
   SEZIONE CHI SIAMO PREVIEW (Home)
   ========================================== */
.about-preview {
    /* Usa la classe .container globale per le spaziature, qui aggiungiamo solo un po' di margine */
    margin-bottom: 20px;
    position: relative; /* Serve a bloccare la filigrana all'interno di questa sezione */
    z-index: 1;
}
.about-preview::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Inserisci qui il nome del file del tuo pattern (assicurati che sia nella cartella img) */
    background-image: url('../img/tenda0.1.svg'); 
    background-size: 500px; 
    background-repeat: no-repeat;
    background-position: 10% 80%;
    /* LA MAGIA: Opacità al 5%. Sembrerà inchiostro impresso nella carta sabbia! */
    opacity: 0.12; 
    
    /* Spinge il disegno fisicamente dietro al contenuto della sezione */
    z-index: -1; 
}
.about-grid {
    display: flex;
    align-items: center;
    gap: 50px;
}

.about-text {
    flex: 1; /* Occupa metà spazio */
}

/* Modificatore per allineare il titolo a sinistra solo in questa sezione */
.section-title.left-align {
    text-align: left;
    margin-bottom: 25px;
}
.section-title.left-align::after {
    margin-left: 0;
}

.about-text p {
    font-size: 1.1rem;
    color: #333333;
    margin-bottom: 20px;
    line-height: 1.7;
}

/* Pulsante secondario (trasparente con bordo) */
.btn-outline {
    display: inline-block;
    padding: 10px 24px;
    border: 2px solid #2C6A46;
    color: #2C6A46;
    text-decoration: none;
    border-radius: 25px;
    font-weight: 600;
    font-size: 1rem;
    text-transform: uppercase;
    transition: all 0.3s ease;
    margin-top: 10px;
}

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

.about-image {
    flex: 1; /* Occupa l'altra metà */
}

.about-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    /* Un piccolo bordo del colore primario per incorniciare la foto */
    border: 4px;
    object-fit: cover;
}
/* ==========================================
   SEZIONE ATTIVITÀ (Home): ultima + prossima
   ========================================== */
.home-attivita-section {
    margin-bottom: 40px;
}

/* Griglia: 2 card affiancate su PC, una sotto l'altra su telefono */
.home-attivita-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto 40px auto;
}

/* Card base */
.attivita-card {
    display: flex;
    flex-direction: column;
    background: var(--colore-card);
    border-radius: 14px;
    overflow: hidden;
    border-top: 6px solid #ccc;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

/* Bordo superiore: verde per il passato, arancione per il futuro */
.attivita-card.attivita-passata  { border-top-color: var(--primary-color); }
.attivita-card.attivita-prossima { border-top-color: var(--accent-color); }

/* La seconda card entra un attimo dopo la prima */
.attivita-card:nth-child(2) { transition-delay: 0.15s; }

/* Foto */
.attivita-img {
    position: relative;
    height: 240px;
    overflow: hidden;
}

.attivita-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}
.attivita-prossima .attivita-img {
    position: relative;
    height: auto; 
    max-height: 450px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: #1a1a1a;
}

.attivita-prossima .attivita-img .slide-bg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: blur(20px) brightness(0.6);
    transform: scale(1.1);
    z-index: 1;
}

.attivita-prossima .attivita-img img {
    position: relative;
    z-index: 2;
    height: auto;
    max-height: 450px;
    object-fit: contain;
    display: block;
}
.attivita-card:hover .attivita-img img {
    transform: scale(1.06);
}

/* Foto del passato un po' meno colorata, come un ricordo */
.attivita-passata .attivita-img img {
    filter: saturate(0.85);
}

/* Etichetta sopra la foto ("Ultima attività" / "Prossima attività") */
.attivita-etichetta {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 3;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-light);
    background-color: var(--primary-color);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.attivita-prossima .attivita-etichetta {
    background-color: var(--accent-color);
}

/* Parte con i testi */
.attivita-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 25px;
}

.attivita-data {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--branca-compagnia);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.attivita-body h3 {
    font-size: 1.4rem;
    color: var(--primary-color);
    margin: 8px 0 12px;
    line-height: 1.3;
}

.attivita-body p {
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 20px;
    flex-grow: 1; /* spinge il link in fondo: i link delle due card restano allineati */
}

/* Riquadro con data, ora e luogo (solo card "Prossima") */
.attivita-info {
    list-style: none;
    margin-bottom: 20px;
    padding: 14px 16px;
    border-radius: 0 10px 10px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.attivita-info li {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-dark);
}

/* Link in fondo alla card */
.attivita-link {
    align-self: flex-start;
    color: var(--primary-color);
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.3s ease, transform 0.3s ease;
}

.attivita-link:hover {
    color: var(--accent-color);
    transform: translateX(5px);
}

/* Nella card "Prossima" i colori del link sono invertiti */
.attivita-prossima .attivita-link {
    color: var(--accent-color);
}

.attivita-prossima .attivita-link:hover {
    color: var(--primary-color);
}

/* Telefono */
@media (max-width: 576px) {
    .attivita-img { height: 200px; }
    .attivita-body { padding: 20px; }
    .attivita-link:hover { transform: none; }
}
/* ==========================================
   SEZIONE BRANCHE ESCLUSIVA PER LA HOME
   ========================================== */
.home-branche-section {
    margin-bottom: 40px;
}

.home-branche-subtitle {
    text-align: center;
    max-width: 700px;
    margin: -30px auto 40px auto;
    color: #555;
    font-size: 1.1rem;
    line-height: 1.6;
}

/* Griglia responsive indipendente dal flex della seconda pagina */
.home-branches-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 25px;
    margin-bottom: 40px;
}

/* Stile base delle card della Home */
.home-card {
    background: #F0EBE1;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    padding: 55px 40px;
    text-align: center;
    transition: all 0.4s ease;
    border-top: 6px solid #ccc;
}

/* Colori dei bordi superiori (Presi dal tuo schema) */
.home-card.home-lupetti { border-top-color: var(--branca-lupetti); }
.home-card.home-reparto { border-top-color: yellowgreen; }
.home-card.home-compagnia { border-top-color: var(--branca-compagnia); }
.home-card.home-raider { border-top-color: rgb(0, 0, 165); }

/* Animazione Hover per le card della Home */
.home-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

/* Sfondi colorati soft al passaggio del mouse */
.home-card.home-lupetti:hover { background-color: rgba(255, 204, 0, 0.08); }
.home-card.home-reparto:hover { background-color: rgba(154, 205, 50, 0.08); }
.home-card.home-compagnia:hover { background-color: rgba(204, 0, 0, 0.08); }
.home-card.home-raider:hover { background-color: rgba(0, 0, 165, 0.08); }

.home-card h3 {
    font-size: 1.8rem;
    margin-bottom: 12px;
    color: var(--primary-color);
}

.home-card p {
    font-size: 1.5rem;
    color: #666;
    margin: 0;
}

.home-branche-action {
    text-align: center;
}

/* Responsive: sui telefoni impila testo e foto */
/* ==========================================
   STILE BASE DELL'HAMBURGER (Nascosto su PC)
   ========================================== */
.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1010;
}

.menu-toggle .bar {
    width: 100%;
    height: 3px;
    background-color: var(--text-light);
    border-radius: 2px;
    transition: all 0.3s ease-in-out;
}
/* ==========================================
   EMPTY STATE - NESSUNA PROSSIMA ATTIVITÀ
   ========================================== */

.attivita-empty {
    border-top-color: var(--accent-color);
}

/* Parte visuale della card */

.attivita-empty-visual {
    position: relative;
    min-height: 240px;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,0.7),
            transparent 65%
        ),
        linear-gradient(
            135deg,
            rgba(44,106,70,0.12),
            rgba(200,90,50,0.12)
        );
}

/* Icona centrale */

.attivita-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 110px;
    height: 110px;

    border: 2px solid rgba(44,106,70,0.25);
    border-radius: 50%;

    font-size: 3.8rem;
}

/* Corpo della card */

.attivita-empty-body {
    justify-content: center;
}

.attivita-empty-body p {
    flex-grow: 0;
    margin-bottom: 20px;
}

.attivita-empty-body .attivita-link {
    margin-top: auto;
    padding-top: 10px;
}
/* ==========================================
   RESPONSIVE: DISPOSITIVI MOBILI (Smartphone)
   ========================================== */

@media (max-width: 1100px) {
    .menu-toggle {
        display: flex;
    }
    .menu-toggle.is-active .bar:nth-child(2) {
        opacity: 0;
    }
    .menu-toggle.is-active .bar:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }
    .menu-toggle.is-active .bar:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }
    .nav-links {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: rgba(27, 67, 50, 0.95);
        backdrop-filter: blur(10px);
        padding: 20px 0;
        gap: 15px;
        text-align: center;
        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
    }

    .nav-links.active {
        display: flex;
    }

    .nav-links li {
        width: 100%;
    }

    .nav-links a {
        display: block;
        padding: 10px 0;
        font-size: 1.1rem;
    }

    .dropdown-menu {
        position: static;
        background-color: rgba(0, 0, 0, 0.2);
        box-shadow: none;
        width: 100%;
        display: none;
        padding: 10px 0;
    }

    .dropdown.open .dropdown-menu {
        display: block;
    }
}


@media (max-width: 768px) {
    .navbar {
        padding: 15px 20px;
        flex-direction: row; /* Mantiene logo a sinistra e hamburger a destra */
        justify-content: space-between;
        position: sticky;
    }

    .menu-toggle {
        display: flex; /* Mostra l'hamburger su mobile */
    }

    /* Trasformiamo i link in un menu a tendina a comparsa */
    .nav-links {
        display: none; /* Nasconde il menu di base */
        flex-direction: column;
        position: absolute;
        top: 100%; /* Si apre esattamente sotto la navbar */
        left: 0;
        width: 100%;
        background-color: rgba(27, 67, 50, 0.95); /* Colore foresta coerente */
        backdrop-filter: blur(10px);
        padding: 20px 0;
        gap: 15px;
        text-align: center;
        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
    }

    /* Classe attivata dal JavaScript al clic */
    .nav-links.active {
        display: flex; 
    }

    .nav-links li {
        width: 100%;
    }

    .nav-links a {
        display: block;
        padding: 10px 0;
        font-size: 1.1rem;
    }

    /* Gestione dei sottomenu Dropdown su Mobile per non farli sovrapporre */
    .dropdown-menu {
        position: static;
        background-color: rgba(0, 0, 0, 0.2);
        box-shadow: none;
        width: 100%;
        display: none;
        padding: 10px 0;
    }

    /* Rimuovi il vecchio .dropdown:hover .dropdown-menu da dentro il @media mobile e metti questo: */
    .dropdown.open .dropdown-menu {
        display: block; /* Mostra il sottomenu solo quando ha la classe .open */
    }

    /* Animazione dell'hamburger che diventa una "X" quando è attivo */
    .menu-toggle.is-active .bar:nth-child(2) {
        opacity: 0;
    }
    .menu-toggle.is-active .bar:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }
    .menu-toggle.is-active .bar:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }

    /* Altri aggiustamenti mobile già presenti nel tuo codice */
    .hero h1 { font-size: 2.2rem; }
    .hero p { font-size: 1.1rem; }
    .container { padding: 40px 15px; }
}

/* ==========================================
   GRIGLIA BRANCHE (Card Layout Aggiornato)
   ========================================== */
   
.branches-grid {
    display: inline-flex;
    gap: 30px;
}

.branch-card {
    background: var(--colore-card);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    padding: 0;
    text-align: center;
    transition: all 0.4s ease;
    border-top: 6px solid #ccc;
    width: 280px;
    display: flex;
    flex-direction: column; /* Permette al contenuto di distribuirsi in verticale */
}

/* Stile dell'immagine interna alla card */
.card-img {
    width: 100%;
    height: 280px; /* Altezza della foto (puoi aumentarla o diminuirla a piacimento) */
    object-fit: cover; /* Evita che la foto si schiacci o si deformi */
    display: block;
    border-bottom-left-radius: 12px;
     border-bottom-right-radius: 12px;
}

/* Nuovo contenitore per i testi e i bottoni */
.card-body {
    padding: 30px 25px 40px 25px; 
    background-color: var(--colore-card);
    display: flex;
    flex-direction: column;
    flex: 1; /* Forza tutti i card-body ad avere la stessa altezza */
}

.branch-card.lupetti { border-top-color: var(--branca-lupetti); }
.branch-card.reparto { border-top-color: yellowgreen }
.branch-card.compagnia { border-top-color: var(--branca-compagnia); }
.branch-card.raider { border-top-color: rgb(0, 0, 165) }

.branch-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

.branch-card h3 {
    font-size: 1.6rem;
    margin-bottom: 15px;
    color: var(--primary-color);
}

.branch-card p {
    font-size: 1rem;
    color: var(--text-dark);
    margin-bottom: 25px;
}

.btn {
    margin-top: auto; /* Spinge il bottone alla base del contenitore */
    align-self: center; /* Mantiene il bottone centrato orizzontalmente */
    display: inline-block;
    padding: 15px 25px;
    background-color: var(--primary-color);
    color: var(--text-light);
    text-decoration: none;
    border-radius: 25px;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: var(--accent-color);
}
/* ==========================================
   BANNER UNISCITI A NOI (Home)
   ========================================== */
.join-banner {
    /* Sfondo sfumato che usa il tuo verde primario e un verde scuro */
    background-color: #2C6A46;
    text-align: center;
    color: var(--text-light);
    padding: 8rem;
    position: relative;
   
   
}
.divisore-onda {
    position: absolute;
    bottom: -1px; /* Il -1px evita la famigerata righina bianca tra le due sezioni */
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    
    /* ECCO LA MAGIA: Capovolge l'onda per farla aderire al fondo */
    transform: rotate(180deg); 
}

/* Gestiamo l'altezza in modo responsive */
.divisore-onda svg {
    display: block;
    width: 100%;
    height: 8vw; /* Usare i viewport width mantiene la curva proporzionata su tutti gli schermi */
    min-height: 60px;
    max-height: 120px;
}
.divisore-roccia {
    position: absolute;
    bottom: -1px; /* Evita la solita righina bianca */
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    /* NESSUNA ROTAZIONE QUI! Il disegno è già dritto */
}

.divisore-roccia svg {
    display: block;
    width: 100%;
    height: 6vw; /* Altezza dinamica */
    min-height: 40px;
    max-height: 100px;
}
.divisore-obliquo {
    position: absolute;
    bottom: -1px; /* Il nostro scudo contro la righina bianca */
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    /* Nessun transform: rotate()! */
}

.divisore-obliquo svg {
    display: block;
    width: 100%;
    height: 8vw; /* Regola la "ripidità" del taglio */
    min-height: 50px;
    max-height: 120px;
}
.divisore-giocoso {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.divisore-giocoso svg {
    display: block;
    width: 100%;
    height: 6vw; /* Altezza perfetta per i motivi ripetuti */
    min-height: 40px;
    max-height: 80px;
}
.divisore-rover {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    /* Nessuna rotazione strana, disegni già pronti all'uso */
}

.divisore-rover svg {
    display: block;
    width: 100%;
    height: 7vw; 
    min-height: 50px;
    max-height: 100px;
     transform: scaleX(-1);
}
.join-content {
    max-width: 800px;
    margin: 0 auto;
}

.join-content h2 {
    font-size: 2.2rem;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.join-content p {
    font-size: 1.1rem;
    font-weight: bolder;
    color: #E0E6E2;
    margin-bottom: 35px;
    line-height: 1.6;
}

.btn-join {
    display: inline-block;
    padding: 14px 32px;
    background-color: var(--branca-lupetti);
    color: black;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: 30px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    /* Effetto ombra arancione sotto il pulsante */
    box-shadow: 0 4px 15px var(--branca-lupetti);
}

.btn-join:hover {
    background-color: rgb(253, 241, 0); ;/* Arancione leggermente più scuro */
    transform: translateY(-3px); /* Effetto sollevamento */
    box-shadow: 0 6px 20px rgba(231, 247, 0, 0.53);
}
.free{
    color: var(--branca-lupetti);
}
/* Responsivo per smartphone */
@media (max-width: 600px) {
    .join-content h2 { font-size: 1.8rem; }
    .join-content p { font-size: 1rem; }
}
/* Responsive per dispositivi mobili */
@media (max-width: 768px) {
    .navbar {
        padding: 15px 20px;
        flex-direction: column;
        gap: 10px;
    }
    .nav-links {
        gap: 15px;
    }
    .hero h1 { font-size: 2.4rem; }
    .hero p { font-size: 1.5rem; }
    .container { padding: 40px 15px; }
    .about-grid {
        flex-direction: column; /* Impila il testo e l'immagine uno sopra l'altro */
        gap: 30px; /* Riduce leggermente lo spazio tra testo e foto per schermi piccoli */
    }
    
    /* Centriamo il testo su mobile per un effetto visivo più gradevole (Opzionale) */
    .about-text {
        text-align: center;
    }
    
    /* Centriamo la lineetta rossa sotto il titolo su mobile */
    .section-title.left-align {
        text-align: center;
    }
    .section-title.left-align::after {
        margin-left: auto;
        margin-right: auto;
    }
    .join-banner {
        padding: 3.2rem 1.5rem 6rem;
    }
}

/* SECONDA PAGINA */

.titolobr{
    background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), url('../img/branche.webp') no-repeat center center/cover;
    height: 450px; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    border-bottom:5px solid var(--primary-color);

    
    
}

.titolobr h1 {
    font-size: 80px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 800;
}


/* ===== PERCORSO SCOUT — incolla nel tuo CSS ===== */
/* ==========================================
   STILE PERCORSO TIMELINE (Stile originale/materico)
   ========================================== */
/* ==========================================
   STILE PERCORSO TIMELINE SCOUT
   ========================================== */
.percorso-storico-wrap {
  padding: 50px 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  overflow: hidden;
  color: #ffffff;
}

.percorso-storico {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  min-height: 800px; /* Verrà aggiornato in automatico dal JS */
}

.percorso-storico-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* Container dei testi */
#percorsoNodi {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.tappa-nodo {
  position: absolute;
  width: 300px;
  transform: translate(-50%, -50%);
  text-align: center;
}

/* Titolo con l'effetto pennellata in background */
.tappa-titolo {
  position: relative;
  display: inline-block;
  font-size: 1.8rem;
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 20px;
  color: #1b4332; /* Testo verde scuro */
  padding: 15px 45px; /* Spazio abbondante per creare l'ovale */
  z-index: 2;
}

/* Primo giro di pennarello (il più spesso) */
.tappa-titolo::before {
  content: '';
  position: absolute;
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0;
  border: 4px solid var(--branca-compagnia); /* Colore arancione */
  border-radius: 50%; /* Questo lo rende un vero cerchio/ovale! */
  z-index: -1;
  transform: rotate(-2deg);
}

/* Secondo giro di pennarello (più sottile e sfalsato) */
.tappa-titolo::after {
  content: '';
  position: absolute;
  top: 4px; 
  left: -4px; 
  right: 2px; 
  bottom: -2px;
  border: 2px solid var(--branca-compagnia);
  border-radius: 50%; 
  z-index: -1;
  opacity: 0.6;
  transform: rotate(3deg);
}

.tappa-titolo span {
  position: relative;
  z-index: 3;
}

/* Etichetta età stile timbro/badge */
.tappa-eta {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--testosfondoverde);
  background-color: var(--branca-compagnia);
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  box-shadow: 2px 2px 0px rgba(0,0,0,0.2); 
}

.tappa-testo {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--primary-color);
  font-weight: bold;

}

/* --- CLASSI PER IL PERCORSO E LE ORME --- */
.percorso-guida {
  fill: none;
  stroke: var(--primary-color); /* Colore della linea: questo è un verde scuro, ma puoi mettere il codice che preferisci */
  stroke-width: 3; /* Quanto è spessa la linea */
  stroke-dasharray: 15 10; /* LA MAGIA DEL TRATTEGGIO: significa 15px di tratto colorato e 10px di spazio vuoto */
  opacity: 0.4; /* Trasparenza della linea (1 è solida, 0 è invisibile) */
}

.icona-tappa {
  fill: #8ba989; /* Verde salvia per le orme */
  opacity: 0.85;
}

/* Responsività per Mobile */
/* ==========================================
   FIX RESPONSIVO: PERCORSO E CARD (Senza alone sbiadito)
   ========================================== */
@media (max-width: 992px) {
    /* --- 1. FIX PER IL PERCORSO SCOUT E DECORAZIONI --- */
    
    #percorsoContainer .decorazione {
        display: block;
        opacity: 0.8; /* Disegni belli nitidi e visibili! */
        z-index: 0;
        transform: translateY(-50%); 
    }
    
    /* Leggermente abbassati per centrare esattamente lo spazio vuoto */
    #percorsoContainer .decor-1 { width: 150px; top: 60px; left: -10%; }
    #percorsoContainer .decor-2 { width: 150px; top: 260px; right: 0%; }
    #percorsoContainer .decor-3 { width: 150px; top: 535px; left: -10%; }
    #percorsoContainer .decor-4 { width: 150px; top: 1010px; right: 2%; }

    #percorsoContainer .tappa-nodo { 
        width: 90vw; 
        max-width: 320px; 
    }
    
    #percorsoContainer .tappa-titolo {
        font-size: 1.3rem;
        padding: 8px 20px;
    }
    
    /* IL FIX È QUI: Via la "gomma da cancellare"! Mettiamo un riquadro netto ed elegante */
    #percorsoContainer .tappa-testo {
        background-color: rgba(230, 221, 196, 0.95); /* Fondo sabbia compatto */
        padding: 12px;
        border-radius: 10px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); /* Una piccola ombra scura, non un alone gigante! */
    }

    /* --- 2. FIX PER LA GRIGLIA DELLE BRANCHE SOTTOSTANTE --- */
    
    .container .branches-grid {
        display: flex;
        flex-direction: column;
        align-items: center; 
        width: 100%;
    }
    
    .container .branch-card {
        width: 100%; 
        max-width: 380px; 
    }
}

/* ==========================================
   DECORAZIONI DI SFONDO LUNGO IL PERCORSO
   ========================================== */

/* Regole generali per tutte le immagini di sfondo */
.decorazione {
  position: absolute;
  z-index: 0; /* Le mantiene sullo sfondo, dietro orme e testi */
  opacity: 0.75; /* Leggermente trasparenti per non distrarre troppo */
  pointer-events: none; /* Impedisce che l'utente ci clicchi sopra per sbaglio */
  
}

/* 1. Spazio vuoto a SINISTRA (Accanto a Lupetti) */
.decor-1 { 
  top: -3%; 
  left: -35%; 
  width: 350px; 
}   

/* 2. Spazio vuoto a DESTRA (Accanto agli Esploratori) */
.decor-2 { 
  top: 10%; 
  right: -35%; 
  width: 500px; 
  animation-delay: 1s; /* Ritarda l'animazione per non farle muovere tutte insieme */
}  

/* 3. Spazio vuoto a SINISTRA (Accanto a Rover e Scolte) */
.decor-3 { 
  top: 40%; 
  left: -35%; 
  width: 500px; 
  animation-delay: 2s;
}   

/* 4. Spazio vuoto a DESTRA (Accanto alla fine del percorso) */
.decor-4 { 
  top: 70%; 
  right: -35%; 
  width: 500px; 
  animation-delay: 3s;
}  
/* ==========================================
   FIX DECORAZIONI SOLO PER PORTATILI E DESKTOP 
   (Schermi da 993px in su)
   ========================================== */
@media (min-width: 993px) {
    .decor-1 { 
        left: -15%; /* Avvicina l'immagine per farla rilevare dallo script */
    }   
    .decor-2 { 
        right: -15%; 
    }  
    .decor-3 { 
        left: -15%; 
    }   
    .decor-4 { 
        right: -15%; 
    }
}
/* ==========================================
   STILE DEL FOOTER (Verde Foresta & Arancione)
   ========================================== */
.main-footer {
    background-color: #524B42; 
    color: #e2e8f0; 
    padding: 60px 0 0 0;
    font-size: 0.95rem;
    border-top: 5px solid var(--branca-lupetti); 
}
#footer-container {
    min-height: 350px; 
}
.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 20px 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
}

.footer-col h3 {
    color: var(--text-light);
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
    position: relative;
}

/* Sottile linea decorativa sotto i titoli del footer */
.footer-col h3::after {
    content: '';
    display: block;
    width: 40px;
    height: 3px;
    background-color: yellow;
    margin-top: 8px;
    border-radius: 2px;
}

.footer-col.about p {
    line-height: 1.7;
    color: #cbd5e1;
}

/* Lista link verticali */
.footer-col.links ul {
    list-style: none;
}

.footer-col.links li {
    margin-bottom: 12px;
}

.footer-col.links a {
    color: #cbd5e1;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
}

/* Effetto al passaggio del mouse sui link (cambio in arancione e leggero spostamento a destra) */
.footer-col.links a:hover {
    color: yellow;
    transform: translateX(5px);
}

.footer-col.contact-info p {
    margin-bottom: 12px;
}

.footer-col.contact-info a {
    color: #cbd5e1;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-col.contact-info a:hover {
    color: yellow;
}

/* Barra del Copyright inferiore */
.footer-sotto {
    width: 100%;
    text-align: center;
    padding: 30px;
    background-color: #2b2722; /* Tonalità più scura in armonia con il main-footer */
    border-top: 1px solid rgba(255, 255, 255, 0.08); /* Sottile linea di separazione elegante */
}

.footer-sotto p {
    font-size: 0.85rem;
    color: #94a3b8;
    margin: 0; 
}

/* Ottimizzazione Mobile per schermi molto piccoli */
@media (max-width: 600px) {
    .main-footer {
        padding-top: 40px;
        text-align: center;
    }
    
    .footer-col h3::after {
        margin: 8px auto 0 auto; /* Centra la linea decorativa sui telefoni */
    }
    
    .footer-col.links a:hover {
        transform: none; /* Elimina lo spostamento a destra su mobile */
    }
}
/* ==========================================
   BOTTONI SOCIAL NEL FOOTER
   ========================================== */
.footer-socials {
    display: flex;
    gap: 15px;
    margin-top: 20px; /* Distanza dal numero di telefono */
}

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.08); /* Cerchio semi-trasparente elegante */
    color: var(--text-light);
    transition: all 0.3s ease;
    text-decoration: none;
}

.social-link svg {
    width: 20px;
    height: 20px;
}

/* Animazione generica quando ci passi sopra */
.social-link:hover {
    transform: translateY(-4px); /* Leggero salto verso l'alto */
    color: #ffffff;
}

/* Effetto Hover specifico per Instagram (Sfumatura ufficiale) */
.social-link.instagram:hover {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    box-shadow: 0 5px 15px rgba(220, 39, 67, 0.4);
}

/* Effetto Hover specifico per Facebook (Blu ufficiale) */
.social-link.facebook:hover {
    background-color: #1877f2;
    box-shadow: 0 5px 15px rgba(24, 119, 242, 0.4);
}

/* Allineamento al centro sui telefoni (si integra con la tua vecchia regola mobile) */
@media (max-width: 600px) {
    .footer-socials {
        justify-content: center;
    }
}
/* ==========================================
   MENU A TENDINA (Dropdown Navbar)
   ========================================== */

/* 1. Prepariamo i list item della navbar a fare da base per la tendina */
.nav-links li {
    position: relative;
}

/* Freccetta accanto al testo */
.arrow {
    font-size: 0.75rem;
    margin-left: 2px;
    display: inline-block;
    transition: transform 0.3s ease;
}

/* Ruota la freccetta quando si attiva il menu */
.dropdown:hover .arrow {
    transform: rotate(180deg);
}

/* 2. Stile della tendina (nascosta di default) */
.dropdown-menu {
    position: absolute;
    top: 100%; /* Si posiziona esattamente sotto il testo principale */
    left: 50%;
    transform: translateX(-50%) translateY(15px); /* Centrata e leggermente più in basso */
    
    /* Stile Glassmorphism coerente con la tua navbar */
    background-color: rgba(20, 50, 38, 0.95); /* Un verde un pizzico più scuro per stacco */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    list-style: none;
    min-width: 180px;
    border-radius: 8px;
    padding: 10px 0;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    border-top: 3px solid yellow; /* Linea arancione superiore di stacco */
    
    /* Gestione animazione fluida (invece del secco display:none) */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1100;
}

/* 3. Mostra la tendina al passaggio del mouse */
.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(5px); /* Sale fluidamente in posizione */
}

/* 4. Stile dei link interni alla tendina */
.dropdown-menu li {
    width: 100%;
}

.dropdown-menu a {
    display: block;
    padding: 10px 20px;
    font-size: 0.85rem; /* Leggermente più piccolo dei link principali */
    text-transform: none; /* Testo normale (non tutto maiuscolo) per facilitare la lettura */
    letter-spacing: 0;
    color: var(--text-light);
    white-space: nowrap; /* Impedisce al testo di andare a capo */
    transition: background-color 0.2s ease, color 0.2s ease;
    text-align: left;
}

/* Hover sui link della tendina */
.dropdown-menu a:hover {
    background-color: rgba(255, 255, 255, 0.07); /* Sfondo chiaro soft */
    color: yellow !important; /* Mantiene il tuo colore giallo istituzionale */
}

/* 5. Comportamento sui dispositivi mobili */
@media (max-width: 1100px) {
    .dropdown-menu {
        position: static; /* Si inserisce nel flusso verticale dello smartphone */
        transform: none !important;
        opacity: 1;
        visibility: visible;
        background-color: transparent;
        box-shadow: none;
        border-top: none;
        padding: 0;
        display: none; /* Su mobile usiamo il display per aprirla al tocco dell'area */
    }
    
    .dropdown:hover .dropdown-menu {
        display: block;
    }
    
    .dropdown-menu a {
        text-align: center; /* Centra i link su mobile */
        padding: 8px 0;
    }
    
    .arrow {
        display: none; /* Nascondiamo la freccia su mobile per pulizia */
    }
}

/* L'assoraider */
.asso {
    background: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), url('../img/assoraider.png') no-repeat center center/ 30% auto;
    height: 45vh; /* Ridotto leggermente per un look più moderno ed equilibrato */
    width: 100%; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    border-bottom: 5px solid rgb(0, 0, 165);
    padding: 0 20px;
}

.asso h1 {
    font-size: 4.5rem; /* Usiamo i rem per gestire meglio le proporzioni */
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 800;
    margin: 0;
}

/* ==========================================================================
   SEZIONE STORIA ASSORAIDER (Sidebar a Destra)
   ========================================================================== */
.asso-section {
    padding-top: 40px;
    padding-bottom: 80px;
}

.asso-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr; 
    gap: 60px;
    align-items: start;
    position: relative;
    z-index: 1;
}
.asso-grid::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
   
    /* Inserisci qui il nome del file del tuo pattern (assicurati che sia nella cartella img) */
    background-image: url('../img/saluto.svg');
    background-size: 700px;
    background-repeat: no-repeat;
    background-position: 115% 120%;
    /* LA MAGIA: Opacità al 5%. Sembrerà inchiostro impresso nella carta sabbia! */
    opacity: 0.50;
   
    /* Spinge il disegno fisicamente dietro al contenuto della sezione */
    z-index: -1;
}
/* ==========================================
   FIX RESPONSIVO PER IL SALUTO SCOUT (Mobile)
   ========================================== */
@media (max-width: 992px) {
    .asso-grid::before {
        /* 1. Rendiamo il disegno fluido e proporzionato allo schermo */
        background-size: 90vw; 
        
        /* 2. Lo posizioniamo al centro orizzontalmente (center) 
              e lo teniamo verso il fondo della sezione (es. 95%) */
        background-position: 270% 0%; 
        
        /* 3. (Opzionale) Abbassiamo un po' l'opacità per non far 
              confondere le linee del disegno con il testo delle card */
        opacity: 0.50; 
    }
}

/* Colonna destra che rimane bloccata durante lo scroll */
.asso-sidebar {
    top: 120px; 
}

.asso-badge {
    display: inline-block;
    background-color: rgba(0, 0, 165, 0.1);
    color: rgb(0, 0, 165);
    padding: 6px 16px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.asso-titolo-innovativo {
    font-size: 3rem;
    color: rgb(0, 0, 165);
    line-height: 1.1;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 35px;
    letter-spacing: -0.5px;
}

/* Box citazione stilizzato */
.asso-quote {
    background: var(--colore-card);
    border-left: 5px solid rgb(0, 0, 165);
    padding: 30px;
    border-radius: 0 16px 16px 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

.asso-quote p {
    font-style: italic;
    font-size: 1.15rem;
    color: var(--text-dark,);
    line-height: 1.6;
    margin-bottom: 15px;
}

.asso-quote span {
    font-size: 0.85rem;
    font-weight: 700;
    color: rgb(0, 0, 165);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Colonna sinistra delle card */
.asso-content {
    display: flex;
    flex-direction: column;
    gap: 35px;
}

.asso-card {
    background: var(--colore-card);
    padding: 45px 40px;
    border-radius: 16px;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.02);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.asso-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.07);
}

/* Variante della card centrale (Highlight Verde Assoraider) */
.asso-card.asso-highlight {
    background: linear-gradient(135deg, var(--primary-color, #145f00), rgb(0, 0, 165));
    color: var(--text-light, #ffffff);
    border: none;
}

.asso-card.asso-highlight h3 {
    color: var(--text-light, #ffffff);
}

.asso-card.asso-highlight p {
    color: #cbd5e1;
}

/* Numeri giganti in filigrana sullo sfondo delle card */
.asso-card-numero {
    font-size: 7.5rem;
    font-weight: 900;
    position: absolute;
    right: 20px;
    bottom: -25px;
    color: rgba(0, 0, 0, 0.02);
    user-select: none;
    line-height: 1;
    transition: color 0.3s ease, transform 0.3s ease;
}

.asso-card.asso-highlight .asso-card-numero {
    color: rgba(255, 255, 255, 0.03);
}

/* Correzione sintassi rgb -> rgba per gli effetti hover */
.asso-card:hover .asso-card-numero {
    color: rgba(0, 0, 165, 0.06);
    transform: scale(1.05);
}

.asso-card.asso-highlight:hover .asso-card-numero {
    color: rgba(255, 255, 255, 0.08);
}

.asso-card h3 {
    font-size: 1.5rem;
    color: rgb(0, 0, 165);
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.asso-card p {
    font-size: 1.05rem;
    color: var(--text-dark);
    line-height: 1.75;
}

/* ==========================================================================
   MEDIA QUERIES COMPRENSIVE PER TABLET E SMARTPHONE
   ========================================================================== */
@media (max-width: 992px) {
    .asso-grid {
        grid-template-columns: 1fr; /* Passa a singola colonna */
        gap: 40px;
    }
    
    .asso-sidebar {
        position: static; /* Disattiva lo sticky */
        grid-row: 1; /* Sposta la citazione e il titolo IN CIMA */
    }

    .asso {
        height: 300px; /* Accorciamo l'header su tablet */
        background-size: 50% auto; /* Adattiamo lo sfondo */
    }

    .asso h1 {
        font-size: 3.2rem; /* Ridimensionamento sicuro del titolo */
    }

    .asso-titolo-innovativo {
        font-size: 2.6rem;
        margin-bottom: 20px;
    }

    .asso-card {
        padding: 35px 30px;
    }

    .asso-card-numero {
        font-size: 6rem;
        bottom: -20px;
    }
}

/* Ottimizzazioni specifiche per smartphone piccoli */
@media (max-width: 480px) {
    .asso {
        height: 220px; /* Header compatto sui telefoni */
        background-size: 70% auto;
    }

    .asso h1 {
        font-size: 2.2rem; /* Dimensione perfetta per non andare fuori schermo */
    }

    .asso-titolo-innovativo {
        font-size: 2rem;
    }

    .asso-quote {
        padding: 20px; /* Meno spreco di spazio interno */
    }

    .asso-card {
        padding: 30px 20px; /* Diamo più spazio al testo leggibile */
    }

    .asso-card h3 {
        font-size: 1.3rem; /* Titoli delle card proporzionati */
    }

    .asso-card-numero {
        font-size: 4.5rem; /* Rimpiccioliamo la filigrana per non coprire le scritte */
        bottom: -10px;
        right: 10px;
    }
}

/* SCAUTISMO */
/* ==========================================
   HEADER / HERO SEZIONE
   ========================================== */
.scaut {
    /* Sostituito 'cover' con 'auto 100%' e aggiunto un colore di sfondo di riempimento */
    background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), url('../img/BP.webp') no-repeat center top 20%/ 50% auto;
    background-color: #143226; /* Colore verde scuro per fondersi con i lati se la foto non copre tutta la larghezza */
    height: 55vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--text-light);
    padding: 20px;
    border-bottom: 5px solid var(--accent-color);
}

.scaut h1 {
    font-size: 3rem;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 800;
}

/* Classe Container per dare il giusto spazio ai lati su mobile */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

/* ==========================================
   SEZIONE STORIA INNOVATIVA (Editorial Grid)
   ========================================== */
.storia-section {
    padding-top: 40px;
    padding-bottom: 80px;
}

.storia-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr; /* Divide lo spazio asimmetricamente */
    gap: 60px;
    align-items: start;
}

/* Colonna sinistra che si blocca durante lo scroll */
.storia-sidebar {

    top: 120px; /* Si ferma elegantemente sotto la tua navbar sticky */
}

.storia-badge {
    display: inline-block;
    background-color: #e6602b30; /* Sfondo arancione chiarissimo */
    color: var(--accent-color);
    padding: 6px 16px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.storia-titolo-innovativo {
    font-size: 3rem;
    color: var(--accent-color);
    line-height: 1.1;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 35px;
    letter-spacing: -0.5px;
}

/* Box citazione stilizzato */
.storia-quote {
    background: var(--text-light);
    border-left: 5px solid var(--accent-color); /* Richiamo arancione fuoco */
    padding: 30px;
    border-radius: 0 16px 16px 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

.storia-quote p {
    font-style: italic;
    font-size: 1.15rem;
    color: var(--text-dark);
    line-height: 1.6;
    margin-bottom: 15px;
}

.storia-quote span {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Colonna destra delle card */
.storia-content {
    display: flex;
    flex-direction: column;
    gap: 35px;
}

.storia-card {
    background: var(--text-light);
    padding: 45px 40px;
    border-radius: 16px;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.02);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.storia-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.07);
}

/* Variante della card centrale (Highlight Verde scuro) */
.storia-card.highlight {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    color: var(--text-light);
    border: none;
}

.storia-card.highlight h3 {
    color: var(--text-light);
}

.storia-card.highlight p {
    color: #cbd5e1; /* Grigio chiaro super leggibile */
}

/* Numeri giganti in filigrana sullo sfondo */
.card-numero {
    font-size: 7.5rem;
    font-weight: 900;
    position: absolute;
    right: 20px;
    bottom: -25px;
    color: rgba(0, 0, 0, 0.02); /* Quasi invisibile di base */
    user-select: none;
    line-height: 1;
    transition: color 0.3s ease, transform 0.3s ease;
}

.storia-card.highlight .card-numero {
    color: rgba(255, 255, 255, 0.03);
}

/* Quando l'utente passa il mouse sulle card, il numero si colora soft di arancione */
.storia-card:hover .card-numero {
    color: rgba(230, 96, 43, 0.4);
    transform: scale(1.05);
}

.storia-card.highlight:hover .card-numero {
    color: rgb(255, 255, 255, 0.4);
}

.storia-card h3 {
    font-size: 1.5rem;
    color: var(--accent-color);
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}


/* Responsive: si adatta magnificamente sui tablet (Sotto i 992px) */
@media (max-width: 992px) {
    .storia-grid {
        grid-template-columns: 1fr; /* Torna a colonna singola */
        gap: 40px;
    }
    .storia-sidebar {
        position: static; /* Rimuove l'effetto sticky sui telefoni */
    }
    .storia-titolo-innovativo {
        font-size: 2.4rem;
        margin-bottom: 20px;
    }
    .storia-card {
        padding: 35px 30px;
    }
    .card-numero {
        font-size: 5.5rem;
        bottom: -15px;
    }
}

/* Responsive: Ottimizzazioni per Smartphone (Sotto i 576px) */
@media (max-width: 576px) {
    .scaut {
        height: 40vh; /* Riduce l'altezza dell'header su schermi molto piccoli */
        background-size: 85% auto; /* Allarga la foto centrale per renderla visibile */
    }
    .scaut h1 {
        font-size: 2.2rem;
    }
    .storia-titolo-innovativo {
        font-size: 1.8rem;
    }
    .storia-quote {
        padding: 20px;
    }
    .storia-quote p {
        font-size: 1rem;
    }
    .storia-card {
        padding: 30px 20px;
    }
    .storia-card h3 {
        font-size: 1.3rem;
    }
    .storia-card p {
        font-size: 0.95rem;
    }
    .card-numero {
        font-size: 4rem;
        bottom: -10px;
        right: 10px;
    }
    .storia-section {
        padding-bottom: 40px;
    }
}
.scaut {
    /* Sostituito 'cover' con 'auto 100%' e aggiunto un colore di sfondo di riempimento */
    background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), url('../img/BP.webp') no-repeat center top 20%/ 50% auto;
    background-color: #143226; /* Colore verde scuro per fondersi con i lati se la foto non copre tutta la larghezza */
    height: 45vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--text-light);
    padding: 20px;
    border-bottom: 5px solid var(--accent-color);
}

.scaut h1 {
    font-size: 3rem;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 800;
}
.scaut p {
    font-size: 1.6rem;
    font-style: italic;
    max-width: 600px;
    font-weight: 300;
}
/* Classe Container per dare il giusto spazio ai lati su mobile */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

/* ==========================================
   SEZIONE STORIA INNOVATIVA (Editorial Grid)
   ========================================== */
.storia-section {
    padding-top: 40px;
    padding-bottom: 80px;
    position: relative;
    z-index: 1;
}
.storia-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
   
    /* Inserisci qui il nome del file del tuo pattern (assicurati che sia nella cartella img) */
    background-image: url('../img/fuoco.svg');
    background-size: 1100px;
    background-repeat: no-repeat;
    background-position: -10% 80%;
    /* LA MAGIA: Opacità al 5%. Sembrerà inchiostro impresso nella carta sabbia! */
    opacity: 0.50;
   
    /* Spinge il disegno fisicamente dietro al contenuto della sezione */
    z-index: -1;
}
/* ==========================================
   FIX RESPONSIVO PER IL FUOCO (Mobile)
   ========================================== */
@media (max-width: 768px) {
    .storia-section::before {
        /* Rimpicciolisce il disegno rendendolo proporzionato allo schermo del telefono (es. 120% della larghezza) */
        background-size: 120vw; 
        
        /* Centra il disegno orizzontalmente in modo che le fiamme non vengano tagliate di netto ai lati */
        background-position: center -5%; 
        
        /* (Opzionale) Abbassa leggermente l'opacità su mobile per rendere il testo sulle card super leggibile */
        opacity: 0.08; 
    }
}

.storia-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr; /* Divide lo spazio asimmetricamente */
    gap: 60px;
    align-items: start;
}

/* Colonna sinistra che si blocca durante lo scroll */
.storia-sidebar {

    top: 120px; /* Si ferma elegantemente sotto la tua navbar sticky */
}

.storia-badge {
    display: inline-block;
    background-color: #e6602b30; /* Sfondo arancione chiarissimo */
    color: var(--accent-color);
    padding: 6px 16px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.storia-titolo-innovativo {
    font-size: 3rem;
    color: var(--accent-color);
    line-height: 1.1;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 35px;
    letter-spacing: -0.5px;
}

/* Box citazione stilizzato */
.storia-quote {
    background: var(--colore-card);
    border-left: 5px solid var(--accent-color); /* Richiamo arancione fuoco */
    padding: 30px;
    border-radius: 0 16px 16px 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

.storia-quote p {
    font-style: italic;
    font-size: 1.15rem;
    color: var(--text-dark);
    line-height: 1.6;
    margin-bottom: 15px;
}

.storia-quote span {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Colonna destra delle card */
.storia-content {
    display: flex;
    flex-direction: column;
    gap: 35px;
}

.storia-card {
    background: var(--colore-card);
    padding: 45px 40px;
    border-radius: 16px;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.02);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.storia-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.07);
}

/* Variante della card centrale (Highlight Verde scuro) */
.storia-card.highlight {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    color: var(--text-light);
    border: none;
}

.storia-card.highlight h3 {
    color: var(--text-light);
}

.storia-card.highlight p {
    color: #cbd5e1; /* Grigio chiaro super leggibile */
}

/* Numeri giganti in filigrana sullo sfondo */
.card-numero {
    font-size: 7.5rem;
    font-weight: 900;
    position: absolute;
    right: 20px;
    bottom: -25px;
    color: rgba(0, 0, 0, 0.02); /* Quasi invisibile di base */
    user-select: none;
    line-height: 1;
    transition: color 0.3s ease, transform 0.3s ease;
}

.storia-card.highlight .card-numero {
    color: rgba(255, 255, 255, 0.03);
}

/* Quando l'utente passa il mouse sulle card, il numero si colora soft di arancione */
.storia-card:hover .card-numero {
    color: rgba(230, 96, 43, 0.4);
    transform: scale(1.05);
}

.storia-card.highlight:hover .card-numero {
    color: rgb(255, 255, 255, 0.4);
}

.storia-card h3 {
    font-size: 1.5rem;
    color: var(--accent-color);
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.storia-card p {
    font-size: 1.05rem;
    color: var(--text-dark);
    line-height: 1.75;
}

/* Responsive: si adatta magnificamente sui tablet (Sotto i 992px) */
@media (max-width: 992px) {
    .storia-grid {
        grid-template-columns: 1fr; /* Torna a colonna singola */
        gap: 40px;
    }
    .storia-sidebar {
        position: static; /* Rimuove l'effetto sticky sui telefoni */
    }
    .storia-titolo-innovativo {
        font-size: 2.4rem;
        margin-bottom: 20px;
    }
    .storia-card {
        padding: 35px 30px;
    }
    .card-numero {
        font-size: 5.5rem;
        bottom: -15px;
    }
}

/* Responsive: Ottimizzazioni per Smartphone (Sotto i 576px) */
@media (max-width: 576px) {
    .scaut {
        height: 40vh; /* Riduce l'altezza dell'header su schermi molto piccoli */
        background-size: 85% auto; /* Allarga la foto centrale per renderla visibile */
    }
    .scaut h1 {
        font-size: 2.2rem;
    }
    .storia-titolo-innovativo {
        font-size: 1.8rem;
    }
    .storia-quote {
        padding: 20px;
    }
    .storia-quote p {
        font-size: 1rem;
    }
    .storia-card {
        padding: 30px 20px;
    }
    .storia-card h3 {
        font-size: 1.3rem;
    }
    .storia-card p {
        font-size: 0.95rem;
    }
    .card-numero {
        font-size: 4rem;
        bottom: -10px;
        right: 10px;
    }
    .storia-section {
        padding-bottom: 40px;
    }
}

/* PAGINA WFIS */
.wfis {
    background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), url('../img/wfis.png') no-repeat center center/80% auto;
    height: 55vh; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--text-light);
    padding: 20px;
    border-bottom: 5px solid var(--primary-color);
}

.wfis h1 {
    font-size: 7rem;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 800;
}

.wfis p {
    font-size: 1.8rem;
    font-style: italic;
    max-width: 600px;
    font-weight: 300;
}

/* Classe Container universale (per non far attaccare i testi ai bordi dello schermo) */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

/* ==========================================
   SEZIONE WFIS (Clean Tech-Scout Layout)
   ========================================== */
.wfis-modern-section {
    padding-top: 50px;
    padding-bottom: 80px;
    position: relative;
    z-index: 1;
}
.wfis-modern-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
   
    /* Inserisci qui il nome del file del tuo pattern (assicurati che sia nella cartella img) */
    background-image: url('../img/mondo_1.svg');
    background-size: 1100px;
    background-repeat: no-repeat;
    background-position: -90% 80%;
    /* LA MAGIA: Opacità al 5%. Sembrerà inchiostro impresso nella carta sabbia! */
    opacity: 0.20;
   
    /* Spinge il disegno fisicamente dietro al contenuto della sezione */
    z-index: -1;
}
/* ==========================================
   FIX RESPONSIVO PER IL MONDO (WFIS)
   ========================================== */
@media (max-width: 768px) {
    .wfis-modern-section::before {
        /* 1. Fa diventare il mondo "elastico". 100vw significa "largo esattamente quanto lo schermo" */
        background-size: 200vw; 
        
        /* 2. Lo sposta al centro orizzontalmente (center) per non farlo tagliare ai lati */
        background-position: center 40%; 
        
        /* (Opzionale) Puoi abbassare un pelo l'opacità per leggere meglio il testo fitto */
        opacity: 0.10; 
    }
}
/* Scatola del Titolo */
.wfis-header-box {
    margin-bottom: 50px;
}

.wfis-modern-tag {
    display: inline-block;
    color: var(--accent-color);
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.wfis-header-box h2 {
    font-size: 2.5rem;
    color: var(--primary-color);
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 0.5px;
}

/* Linea di stacco geometrica bicolore */
.wfis-line {
    width: 100%;
    height: 4px;
    margin-top: 20px;
    position: relative;
    border-radius: 2px;
}

.wfis-line::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 120px;
    height: 100%;
    background-color: var(--accent-color);
    border-radius: 2px;
}

/* Griglia Principale */
.wfis-main-layout {
    display: grid;
    grid-template-columns: 1.6fr 1fr; /* Spazio maggiore al testo, minore ai valori side */
    gap: 50px;
    align-items: start;
}

/* Colonna del Testo */
.wfis-text-block p {
    font-size: 1.1rem;
    color: var(--text-dark);
    line-height: 1.8;
    margin-bottom: 25px;
    text-align: left; /* Allineamento pulito a sinistra */
}

/* Primo paragrafo in evidenza */
.wfis-text-block .wfis-highlight-p {
    font-size: 1.3rem;
    color: var(--primary-color);
    font-weight: 600;
    line-height: 1.6;
    border-left: 4px solid var(--primary-color);
    padding-left: 20px;
    margin-bottom: 35px;
}

/* Box Laterale Geometrico */
.wfis-side-box {
    background-color: var(--colore-card);
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    padding: 40px 35px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

.wfis-side-box h3 {
    font-size: 1.4rem;
    color: var(--primary-color);
    text-transform: uppercase;
    margin-bottom: 25px;
    letter-spacing: 0.5px;
}

/* Lista dei valori minimal */
.wfis-valori-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.wfis-valori-list li {
    position: relative;
    padding-left: 20px;
}

/* Quadratino arancione al posto del classico pallino */
.wfis-valori-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 8px;
    height: 8px;
    background-color: var(--accent-color);
    border-radius: 2px;
}

.wfis-valori-list strong {
    display: block;
    font-size: 1.1rem;
    color: var(--text-dark);
    margin-bottom: 4px;
}



/* ==========================================
   MEDIA QUERIES RESPONSIVE
   ========================================== */

/* Responsive per Tablet (Sotto i 992px) */
@media (max-width: 992px) {
    .wfis-main-layout {
        grid-template-columns: 1fr; /* Diventa colonna singola */
        gap: 40px;
    }
    
    .wfis-header-box h2 {
        font-size: 2rem;
    }
    
    .wfis-side-box {
        padding: 30px;
    }
}

/* Responsive per Smartphone (Sotto i 576px) */
@media (max-width: 576px) {
    .wfis {
        height: 45vh; /* Riduce leggermente l'altezza dell'header */
        background-size: 95% auto; /* Allarga lo stemma per renderlo visibile sui telefoni */
    }

    .wfis h1 {
        font-size: 3.8rem; /* Ridimensiona il titolo che altrimenti uscirebbe dallo schermo */
    }

    .wfis p {
        font-size: 1.2rem; /* Sottotitolo dell'header proporzionato */
    }

    .wfis-header-box {
        margin-bottom: 35px;
    }

    .wfis-header-box h2 {
        font-size: 1.7rem;
    }

    .wfis-text-block .wfis-highlight-p {
        font-size: 1.15rem;
        padding-left: 15px;
    }

    .wfis-side-box {
        padding: 30px 20px; /* Riduce i padding interni del box laterale */
    }
    
    .wfis-modern-section {
        padding-top: 30px;
        padding-bottom: 50px;
    }
}


/* LUPETTI */
/* ==========================================
   PAGINA LUPETTI & CAROSELLO FOTOGRAFICO
   ========================================== */

/* Header Lupetti */
.lupetti-header {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../img/foto_campo_lupetti.webp') no-repeat center top 71%/ cover;
    height: 55vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--text-light);
    border-bottom: 5px solid var(--branca-lupetti);
}

.lupetti-badge {
    display: inline-block;
    background-color: var(--branca-lupetti); /* Arancione Fuoco */
    color: black;
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.lupetti-header h1 {
    font-size: 3.7rem;
    text-transform: uppercase;
    font-weight: 800;
    margin-bottom: 10px;
}
.lupetti-header p {
    font-size: 1.6rem;
    font-style: italic;
    max-width: 600px;
    font-weight: 300;
}
/* Griglia Intro */
.lupetti-intro {
    padding-top: 10px;
    padding-bottom: 60px;
    background-color: var(--primary-color);
    position: relative; 
    z-index: 1;

}
.lupetti-intro::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Inserisci qui il nome del file del tuo pattern (assicurati che sia nella cartella img) */
    background-image: url('../img/lupo1.svg'); 
    background-size: 600px; 
    background-repeat: no-repeat;
    background-position: 80% 20%;
    /* LA MAGIA: Opacità al 5%. Sembrerà inchiostro impresso nella carta sabbia! */
    opacity: 0.75; 
    
    /* Spinge il disegno fisicamente dietro al contenuto della sezione */
    z-index: -1; 
}
.lupetti-intro strong{
    color: var(--branca-lupetti);
}
.lupetti-grid-intro {
   
    grid-template-columns: 1.4fr 1fr;
    gap: 40px;
    align-items: center;
}

.lupetti-text h2 {
    font-size: 2.2rem;
    color: var(--branca-lupetti);
    text-transform: uppercase;
    margin-bottom: 20px;
}

.gallery-lupetti-header p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #4a5568;    
    margin-bottom: 15px; 
}

/* --- ARCHITETTURA DEL CAROSELLO --- */

.gallery-header {
    margin-bottom: 35px;
}

.gallery-header-lupi h2 {
    font-size: 2rem;
    color: var(--branca-lupetti);
    text-transform: uppercase;
}

.gallery-header p {
    color: var(--text-dark);
    font-size: 1.05rem;
}
.lupetti-text p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--testosfondoverde);
    margin-bottom: 15px;
}
/* Contenitore esterno del carosello */

/* ==========================================
   BOTTONI CAROSELLO LUPETTI
   ========================================== */

.lupetti-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.95);
    color: var(--branca-lupetti,);
    border: none;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    font-size: 1.3rem;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.lupetti-carousel-btn:hover {
    background-color: var(--branca-lupetti, #e67e22);
    color: #ffffff;
}

.lupetti-carousel-btn:active {
    transform: translateY(-50%) scale(0.93);
}

/* POSIZIONAMENTO OBBLIGATORIO PER FRECCIA DESTRA E SINISTRA */
.lupetti-carousel-btn.prev { 
    left: 30px; 
}

.lupetti-carousel-btn.next { 
    right: 30px; 
}

/* ADATTAMENTO PER SCHERMI PICCOLI */
@media (max-width: 576px) {
    .lupetti-carousel-btn {
        width: 45px;
        height: 45px;
        font-size: 1.1rem;
    }
    .lupetti-carousel-btn.prev { left: 15px; }
    .lupetti-carousel-btn.next { right: 15px; }
}
/* --- RESPONSIVE --- */
@media (max-width: 992px) {
    .lupetti-grid-intro {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .lupetti-header h1 {
        font-size: 2.8rem;
    }
    
}


/* REPARTO */
/* Header Reparto */
.reparto-header {
    background: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), url('../img/reparts.webp') no-repeat center center / cover;
    height: 55vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--text-light);
    border-bottom: 5px solid #F1F5F9;
}

.reparto-badge {
    display: inline-block;
    background-color: yellowgreen; /* Arancione Fuoco */
    color: var(--text-light);
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.reparto-header h1 {
    font-size: 3.7rem;
    text-transform: uppercase;
    font-weight: 800;
    margin-bottom: 10px;
}
.reparto-header p {
    font-size: 1.6rem;
    font-style: italic;
    max-width: 600px;
    font-weight: 300;
}
/* Griglia Intro */
.reparto-intro {
    padding-top: 60px;
    padding-bottom: 40px;
    position: relative;
    background-color: #0026af;
     z-index: 1; 
}
.reparto-intro::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
   
    /* Inserisci qui il nome del file del tuo pattern (assicurati che sia nella cartella img) */
    background-image: url('../img/amudsen.svg');
    background-size: 1400px;
    background-repeat: no-repeat;
    background-position: 0% 70%;
    /* LA MAGIA: Opacità al 5%. Sembrerà inchiostro impresso nella carta sabbia! */
    opacity: 0.75;
   
    /* Spinge il disegno fisicamente dietro al contenuto della sezione */
    z-index: -1;
}
@media (max-width: 768px) {
    .reparto-intro::before {
        /* Riduciamo drasticamente la grandezza. Usando 'vw' (viewport width) 
           diciamo al browser di farlo largo quasi quanto lo schermo (90%) */
        background-size: 120vw; /* Oppure puoi usare un valore fisso come 350px */

        /* Su mobile di solito è meglio centrarlo per non farlo tagliare male ai bordi */
        background-position: center 30%; 
    }
}
.reparto-grid-intro {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 40px;
    align-items: start;
}

.reparto-text h2 {
    font-size: 2.2rem;
    color: #E0F2FE;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.gallery-reparto-header p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #4a5568;
    margin-bottom: 15px;
}

.reparto-side-box {
    background-color: #E0F2FE;
    border-radius: 16px;
    padding: 40px 35px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
    top: 120px;
    z-index: 10;
    margin-left: 25%;
}

.reparto-side-box h3 {
    font-size: 1.6rem;
    color: black;
    text-transform: uppercase;
    margin-bottom: 25px;
    letter-spacing: 0.5px;
    text-align: center;
}
.reparto-valori-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.reparto-valori-list li {
    position: relative;
    padding-left: 20px;
}

/* Quadratino arancione al posto del classico pallino */
.reparto-valori-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 8px;
    height: 8px;
    background-color: var(--accent-color);
    border-radius: 2px;
}

.reparto-valori-list strong {
    display: block;
    font-size: 1.1rem;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.reparto-valori-list span {
    font-size: 0.95rem;
    color: #64748b;
}

/* Galleria e Carosello */



.gallery-header {
    margin-bottom: 35px;
}

.gallery-header-reparto h2 {
    font-size: 2rem;
    color:yellowgreen;
    text-transform: uppercase;
}

.gallery-header p {
    color: #64748b;
    font-size: 1.05rem;
}
.reparto-text p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #F1F5F9;
    margin-bottom: 15px;
}
/* Wrapper Esterno del Carosello */



/* Frecce di Navigazione */
.reparto-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.95);
    color: var(--branca-reparto);
    border: none;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    font-size: 1.3rem;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

/* POSIZIONAMENTO OBBLIGATORIO PER FRECCIA DESTRA E SINISTRA */
.reparto-carousel-btn.prev { 
    left: 30px; 
}

.reparto-carousel-btn.next { 
    right: 30px; 
}

/* ADATTAMENTO PER SCHERMI PICCOLI */
@media (max-width: 576px) {
    .reparto-carousel-btn {
        width: 45px;
        height: 45px;
        font-size: 1.1rem;
    }
    .reparto-carousel-btn.prev { left: 15px; }
    .reparto-carousel-btn.next { right: 15px; }
}
.reparto-carousel-btn:hover {
    background-color: var(--branca-reparto);
    color: var(--text-light);
}

.reparto-carousel-btn:active {
    transform: translateY(-50%) scale(0.93);
}

.reparto-carousel-btn.prev { left: 30px; }
.reparto-carousel-btn.next { right: 30px; }

/* ==========================================
   RESPONSIVE DESIGN (Adattamento Schermi)
   ========================================== */
@media (max-width: 992px) {
    .reparto-grid-intro {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .reparto-side-box {
        margin-left: 0;
    }
    .reparto-header h1 {
        font-size: 2.8rem;
    }
}

@media (max-width: 576px) {
    
    .reparto-carousel-btn {
        width: 45px;
        height: 45px;
        font-size: 1.1rem;
    }
    .reparto-carousel-btn.prev { left: 15px; }
    .reparto-carousel-btn.next { right: 15px; }
    
}

/* COMPAGNIA */


.rover-header {
    background: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), url('../img/bg-rover.webp') no-repeat center 36%/ cover;
    height: 55vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--text-light);
    border-bottom: 5px solid #9e1b1b; /* Bordeaux Rover */
}

.rover-badge {
    display: inline-block;
    background-color: rgb(158, 27, 27); 
    color: var(--text-light);
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.rover-header h1 {
    font-size: 3.7rem;
    text-transform: uppercase;
    font-weight: 800;
    margin-bottom: 10px;
}

.rover-header p {
    font-size: 1.6rem;
    font-style: italic;
    max-width: 600px;
    font-weight: 300;
}

/* Griglia Intro */
.rover-intro {
    padding-top: 10px;
    padding-bottom: 40px;
    position: relative;
    background-color: #1A4D52;
    z-index: 1;
}
.rover-intro::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
   
    /* Inserisci qui il nome del file del tuo pattern (assicurati che sia nella cartella img) */
    background-image: url('../img/mongolfiere.svg');
    background-size: 700px;
    background-repeat: no-repeat;
    background-position: 0% 50%;
    /* LA MAGIA: Opacità al 5%. Sembrerà inchiostro impresso nella carta sabbia! */
    opacity: 0.75;
   
    /* Spinge il disegno fisicamente dietro al contenuto della sezione */
    z-index: -1;
}
@media (max-width: 850px) {
    .rover-intro::before {
        /* Il primo valore (center) la centra orizzontalmente.
           Il secondo valore (40%) la alza verticalmente! */
        background-position: center 40%; 
    }
}
.rover-grid-intro {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 40px;
    align-items: start;
}

.rover-text h2 {
    font-size: 2.2rem;
    color: #E6DDC4;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.rover-text p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #E6DDC4;
    margin-bottom: 15px;
}

.rover-side-box {
    background-color: var(--colore-card);
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    padding: 40px 35px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
    top: 120px;
    z-index: 10;
}

.rover-side-box h3 {
    font-size: 1.6rem;
    color: #9e1b1b;
    text-transform: uppercase;
    margin-bottom: 25px;
    letter-spacing: 0.5px;
    text-align: center;
}

.rover-valori-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.rover-valori-list li {
    position: relative;
    padding-left: 20px;
}

/* Quadratino bordeaux coordinato */
.rover-valori-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 8px;
    height: 8px;
    background-color: #9e1b1b;
    border-radius: 2px;
}

.rover-valori-list strong {
    display: block;
    font-size: 1.1rem;
    color: #3A322C;
    margin-bottom: 4px;
}

.rover-valori-list span {
    font-size: 0.95rem;
    color: #64748b;
    line-height: 1.4;
    display: block;
}

/* ==========================================
   GALLERIA E CAROSELLO CON SFONDO SFOCATO
   ========================================== */

.rover-gallery-section {
    padding-top: 40px;
    padding-bottom: 80px;
}

.rover-gallery-section.container {
    max-width: 1400px;
}

.gallery-header {
    margin-bottom: 15px;
}

.gallery-header h2 {
    font-size: 3rem;
    color: #9e1b1b;
    text-transform: uppercase;
}
.gallery-lupetti-header h2 {
    font-size: 3rem;
    color:var(--branca-lupetti);
    text-transform: uppercase;
}
.gallery-reparto-header h2 {
    font-size: 3rem;
    color:var(--branca-reparto);
    text-transform: uppercase;
}
.gallery-header p {
    color: #64748b;
    font-size: 1.05rem;
}

/* Wrapper Esterno del Carosello */
.rover-carousel-wrapper {
    position: relative;
    width: 100%;
    max-width: 1000px;
    height: 700px;           /* Altezza principale del carosello */
    margin: 0 auto;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

/* Binario di Scorrimento CSS Snap */
.rover-carousel-track {
    display: flex;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.rover-carousel-track::-webkit-scrollbar {
    display: none;
}

/* Singola Slide */
.rover-carousel-slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    position: relative;
    height: 100%;            /* Adatta la slide esattamente ai 500px del wrapper */
    display: flex;
    justify-content: center; /* Centra la foto nitida in orizzontale */
    align-items: center;     /* Centra la foto nitida in verticale */
    overflow: hidden;
}

/* 1. SFONDO SFOCATO (In secondo piano) */
.slide-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: blur(20px) brightness(0.6); /* Sfoca l'immagine e la scurisce al 60% */
    transform: scale(1.1);              /* Evita bordi trasparenti causati dalla sfocatura */
    z-index: 1;
}

/* 2. FOTO PRINCIPALE NITIDA (In primo piano) */
.rover-carousel-slide img {
    position: relative;
    z-index: 2;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;     /* Mantiene le proporzioni reali sia per foto orizzontali che verticali */
}

/* 3. DIDASCALIA (Sopra tutto) */
.rover-slide-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    color: var(--text-light);
    padding: 50px 60px;
    box-sizing: border-box;
    z-index: 3;
}

.rover-slide-caption h3 {
    font-size: 1.8rem;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.rover-slide-caption p {
    font-size: 1.1rem;
    opacity: 0.9;
    line-height: 1.5;
}

/* Frecce di Navigazione */
.rover-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.95);
    color: #9e1b1b;
    border: none;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    font-size: 1.3rem;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}


.rover-carousel-btn:hover {
    background-color: #9e1b1b;
    color: var(--text-light);
}

.rover-carousel-btn:active {
    transform: translateY(-50%) scale(0.93);
}

.rover-carousel-btn.prev { left: 30px; }
.rover-carousel-btn.next { right: 30px; }

/* ==========================================
   RESPONSIVE DESIGN (Adattamento Mobile)
   ========================================== */
@media (max-width: 992px) {
    .rover-carousel-wrapper {
        height: 450px;
    }
    .rover-slide-caption {
        padding: 30px 40px;
    }
}

@media (max-width: 576px) {
    .rover-carousel-wrapper {
        height: 320px;
    }
    .rover-carousel-btn {
        width: 45px;
        height: 45px;
        font-size: 1.1rem;
    }
    .rover-carousel-btn.prev { left: 15px; }
    .rover-carousel-btn.next { right: 15px; }
    .rover-slide-caption h3 {
        font-size: 1.3rem;
    }
    .rover-slide-caption p {
        font-size: 0.95rem;
    }
}
/* ==================================================
   CORREZIONI RESPONSIVE (CELLULARI) PER PAGINA ROVER
   ================================================== */

@media (max-width: 768px) {
    
    /* 1. SISTEMIAMO IL TITOLO DEL BANNER */
    .rover-header h1 {
        font-size: 2.5rem; /* Riduciamo la dimensione del font. Puoi aggiustare questo numero! */
        word-wrap: break-word; /* Permette alla parola di andare a capo se lo schermo è minuscolo */
        padding: 0 15px; /* Aggiunge un po' di respiro ai lati del testo */
    }

    /* 2. IMPILIAMO IL TESTO E IL RIQUADRO "I TRE PILASTRI" */
    .rover-grid-intro {
        display: flex;
        flex-direction: column; /* Magia: mette testo e riquadro uno sotto l'altro! */
        gap: 30px; /* Aggiunge 30px di spazio vuoto tra il testo sopra e il riquadro sotto */
    }

    /* 3. ALLARGHIAMO IL RIQUADRO DEI PILASTRI */
    .rover-side-box {
        width: 100%; /* Gli diciamo di prendere tutta la larghezza dello schermo del telefono */
        margin: 0; /* Rimuove eventuali margini laterali che avevi impostato per la versione PC */
    }
}
/* ==========================================
   PAGINA RAIDER & CAROSELLO FOTOGRAFICO
   ========================================== */

/* Header Raider */
.raider-header {
    /* Ricordati di aggiungere un'immagine reale per lo sfondo */
    background: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), url('../img/raider.webp') no-repeat center center / contain;
    height: 55vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--text-light);
    border-bottom: 5px solid #1E3FAD;
}

.raider-badge {
    display: inline-block;
    background-color: #1E3FAD; 
    color: var(--text-light);
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.raider-header h1 {
    font-size: 3.7rem;
    text-transform: uppercase;
    font-weight: 800;
    margin-bottom: 10px;
}
.raider-header p {
    font-size: 1.6rem;
    font-style: italic;
    max-width: 600px;
    font-weight: 300;
}

/* Griglia Intro */
.raider-intro {
    padding-top: 60px;
    padding-bottom: 40px;
    position: relative;
    z-index: 1;
}
.raider-intro::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../img/montagna.svg');
    background-size: 1100px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    clip-path: inset(0 25% 0 25%);
    opacity: 0.25;
    z-index: -1;
}
/* ==========================================
   FIX RESPONSIVO PER LA MONTAGNA (Raider)
   ========================================== */
@media (max-width: 768px) {
    .raider-intro::before {
        /* 1. Rendiamo la montagna "elastica" e proporzionata al telefono */
        background-size: 130vw; 
        
        /* 2. La posizioniamo al centro */
        background-position: center 50%; 
        
        /* 3. LA SOLUZIONE: Ritiriamo le forbici! 
              Cancelliamo il taglio del 25% che strangolava l'immagine */
        clip-path: inset(0 0 0 0);
    }
}



/* ==========================================
   NUOVO DESIGN: GRIGLIA LEGGE RAIDER
   ========================================== */

.raider-text-full {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    padding-top: 40px;
    padding-bottom: 30px;
    font-weight: 600;
}

.raider-text-full h2 {
    font-size: 2.5rem;
    color: #1E3FAD;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.raider-text-full p {
    font-size: 1.15rem;
    line-height: 1.8;
    color: var(--text-dark);
    margin-bottom: 15px;
}

/* Sezione della griglia */
.raider-law-section {
    padding-top: 0px;
    padding-bottom: 60px;
    background-color: #4A3B32;
}

.law-header {
    text-align: center;
    margin-bottom: 20px;
}

.law-header h3 {
    font-size: 2.2rem;
    color: #F4EEDC;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.law-header p {
    font-size: 1.7rem;
    color: #F4EEDC;
    font-style: italic;
}

/* Griglia CSS a 3 o 4 colonne */
.raider-law-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); 
    gap: 20px;
    padding-left: 10px;
    padding-right: 10px;
    max-width: 1200px;
    margin: 0 auto;
    grid-auto-rows: 1fr; 
}

/* Singola scheda (Card) */
.law-card {
    background-color: var(--colore-card);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Effetto al passaggio del mouse sulla scheda */
.law-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    border-color: #1E3FAD;
}

/* Numero identificativo grande e sfumato sullo sfondo della scheda */
.law-number {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 2.5rem;
    font-weight: 800;
    color: rgba(0, 0, 165, 0.06);
    line-height: 1;
}

.law-card h4 {
    font-size: 1.2rem;
    color: #1E3FAD;
    margin-bottom: 8px;
    font-weight: 700;
    text-transform: uppercase;
}

.law-card p {
    font-size: 0.95rem;
    color: #1E3FAD;
    line-height: 1.5;
    margin: 0;
}
.gallery-raider-header h2{
    font-size: 3rem;
    color:#1E3FAD;
    text-transform: uppercase;
}
.gallery-raider-header p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #4a5568;
    margin-bottom: 15px;
}
.raider-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.95);
    color: #1E3FAD; /* Colore icona freccia con fallback arancione */
    border: none;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    font-size: 1.3rem;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.raider-carousel-btn:hover {
    background-color: #1E3FAD;
    color: #ffffff;
}

.raider-carousel-btn:active {
    transform: translateY(-50%) scale(0.93);
}

/* POSIZIONAMENTO OBBLIGATORIO PER FRECCIA DESTRA E SINISTRA */
.raider-carousel-btn.prev { 
    left: 30px; 
}

.raider-carousel-btn.next { 
    right: 30px; 
}

/* ADATTAMENTO PER SCHERMI PICCOLI */
@media (max-width: 576px) {
    .raider-carousel-btn {
        width: 45px;
        height: 45px;
        font-size: 1.1rem;
    }
    .raider-carousel-btn.prev { left: 15px; }
    .raider-carousel-btn.next { right: 15px; }
}
/* ==========================================
   RESPONSIVE: GRIGLIA LEGGE RAIDER
   ========================================== */

/* Tablet e schermi intermedi: scendiamo a 2 colonne */
@media (max-width: 992px) {
    .raider-law-grid {
        grid-template-columns: repeat(2, 1fr);
        /* Facciamo riadattare l'altezza in base al contenuto */
        grid-auto-rows: auto; 
    }
}

/* Smartphone: scendiamo a 1 singola colonna */
@media (max-width: 576px) {
    .raider-law-grid {
        grid-template-columns: 1fr;
        gap: 15px; /* Riduciamo leggermente lo spazio tra le card su mobile */
    }
}
/* ==========================================
   PAGINA CONTATTI (DESIGN MODERNO)
   ========================================== */

.contatti-header {
    background: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65));
    height: 45vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--text-light);
    border-bottom: 5px solid var(--primary-color); 
}

.contatti-header h1 {
    font-size: 3.7rem;
    text-transform: uppercase;
    font-weight: 800;
    margin-bottom: 10px;
}

.contatti-header p {
    font-size: 1.4rem;
    font-style: italic;
    max-width: 600px;
    font-weight: 300;
}

/* ==========================================================================
   LAYOUT A GRIGLIA (DUE COLONNE)
   ========================================================================== */
.contatti-section {
    margin-bottom: 60px;
    position: relative;
    z-index: 1;
    height: 1000px;
}
.contatti-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Inserisci qui il nome del file del tuo pattern (assicurati che sia nella cartella img) */
    background-image: url('../img/nodoturco.svg');
    background-size: 600px;
    background-repeat: no-repeat;
    background-position: 90% 100%;
    /* LA MAGIA: Opacità al 5%. Sembrerà inchiostro impresso nella carta sabbia! */
    opacity: 0.50;
   
    /* Spinge il disegno fisicamente dietro al contenuto della sezione */
    z-index: -1;
    clip-path: inset(0 10% 0 0);
}
/* ==========================================
   FIX RESPONSIVO: NODO E ALTEZZA (Contatti)
   ========================================== */
/* ==========================================
   FIX RESPONSIVO: NODO E ALTEZZA (Contatti)
   ========================================== */
@media (max-width: 992px) {
    /* 1. Sblocchiamo l'altezza, ma aggiungiamo un bel po' di spazio vuoto in fondo */
    .contatti-section {
        height: auto; 
        padding-bottom: 150px; /* Crea uno spazio "libero" sotto la mappa per il disegno */
    }

    /* 2. Tiriamo fuori il nodo dal nascondiglio */
    .contatti-section::before {
        background-size: 70vw; /* Una grandezza equilibrata */
        
        /* Lo incolliamo esattamente nel nuovo spazio vuoto in fondo */
        background-position: center 102%; 
        
        /* Alziamo l'opacità così si vede chiaramente! */
        opacity: 0.50; 
        clip-path: inset(0 20% 0 0);
    }
}
.contatti-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Divide perfettamente a metà lo schermo su PC */
    gap: 40px; /* Spazio tra la colonna dei bottoni e quella della mappa */
    align-items: start;
}

/* Scatolotti interni delle colonne */
.contatti-info-box, 
.contatti-map-container {
    background: var(--colore-card);
    padding: 35px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.contatti-info-box h2,
.contatti-map-container h2 {
    font-size: 1.6rem;
    color: #1a202c;
    margin-bottom: 10px;
}

.contatti-subtext {
    font-size: 0.95rem;
    color: #718096;
    line-height: 1.5;
    margin-bottom: 30px;
}

/* ==========================================================================
   NUOVI PULSANTI RAPIDI PER I GENITORI (Colonna Sinistra)
   ========================================================================== */
.contatti-details-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.btn-contatto-rapido {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px 22px;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.btn-contatto-rapido .btn-icon {
    font-size: 1.6rem;
    background: white;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    flex-shrink: 0; /* Impedisce all'icona di rimpicciolirsi */
}

.btn-text strong {
    display: block;
    font-size: 1.1rem;
    margin-bottom: 2px;
}

.btn-text p {
    font-size: 0.85rem;
    margin: 0;
    opacity: 0.85;
}

/* Personalizzazione Bottone WhatsApp */
.whatsapp-btn {
    background-color: #e8f7ee;
    color: #128C7E;
}
.whatsapp-btn strong { color: #075E54; }
.whatsapp-btn:hover {
    background-color: #25D366;
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.25);
}
.whatsapp-btn:hover strong { color: white; }

/* Personalizzazione Bottone Chiamata Telefonica */
.phone-btn {
    background-color: #f0f4ff;
    color: #2b6cb0;
}
.phone-btn strong { color: #2c5282; }
.phone-btn:hover {
    background-color: #3182ce;
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(49, 130, 206, 0.25);
}
.phone-btn:hover strong { color: white; }

/* ==========================================================================
   VOCI DI DETTAGLIO CLASSICHE (Indirizzo e Instagram)
   ========================================================================== */
.contatti-detail-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 15px 5px;
    border-top: 1px solid #adadad;
}

.contatti-detail-item .icon {
    font-size: 1.3rem;
    margin-top: 2px;
}

.contatti-detail-item strong {
    display: block;
    font-size: 1rem;
    color: #2d3748;
    margin-bottom: 3px;
}

.contatti-detail-item p {
    font-size: 0.95rem;
    color: #4a5568;
    margin: 0;
}

/* ==========================================================================
   CONTENITORE DELLA MAPPA DI GOOGLE (Colonna Destra)
   ========================================================================== */
.contatti-map-wrapper {
    width: 100%;
    height: 350px; /* Altezza della mappa */
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

/* Forza l'iframe di Google ad adattarsi al 100% del suo scatolotto */
.contatti-map-wrapper iframe {
    width: 100% !important;
    height: 100% !important;
    border: 0;
    display: block;
}

/* ==========================================================================
   PULSANTE FLUTTUANTE DI WHATSAPP (Sempre attivo in basso a destra)
   ========================================================================== */
.whatsapp-floating {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 30px;
    right: 30px;
    background-color: #25d366;
    color: #fff;
    border-radius: 50%;
    box-shadow: 2px 4px 15px rgba(0, 0, 0, 0.2);
    z-index: 9999; /* Rimane sopra a qualsiasi altro elemento del sito */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.whatsapp-floating svg {
    width: 32px;
    height: 32px;
}

.whatsapp-floating:hover {
    background-color: #128c7e;
    transform: scale(1.1) rotate(5deg);
}
/* ==========================================
   BLOCCO SOCIAL MODERNO (PAGINA CONTATTI)
   ========================================== */
.contatti-social-block {
    margin-top: 15px;
    padding-top: 25px;
    border-top: 1px solid #adadad;
}

.contatti-social-block > strong {
    display: block;
    font-size: 1.05rem;
    color: #2d3748;
    margin-bottom: 15px;
}

/* Griglia per affiancare i due bottoni */
.contatti-social-grid {
    display: flex;
    gap: 15px;
    width: 100%;
}

/* Card base comune per i social */
.social-card {
    flex: 1; /* Fa sì che i due bottoni abbiano esattamente la stessa larghezza */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    background-color: #f8fafc;
    color: #4a5568;
}

/* Gestione delle icone SVG all'interno */
.social-icon-wrapper svg {
    width: 20px;
    height: 20px;
    display: block;
}

/* --- EFFETTI HOVER PERSONALIZZATI (Stile Brand) --- */

/* Hover Instagram: Sfocatura con il tipico gradiente Instagram */
.instagram-card:hover {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: white;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(220, 39, 67, 0.25);
}

/* Hover Facebook: Colore blu ufficiale */
.facebook-card:hover {
    background-color: #1877F2;
    color: white;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(24, 119, 242, 0.25);
}

.fitasso{
    height: 50px;
}
.asso-btn {
    background-color: #fdfdc6;

}

.asso-btn:hover {
    background: linear-gradient(45deg, #f5c90d 0%, #e8ba0a 20%, #d4a30e 40%, #c49109 60%, #b37e04 80%, #a26d03 100%);
    transform: translateY(-3px);
    border: 0px;
    box-shadow: 0 6px 15px rgba(179, 126, 4, 0.4);
}

/* Responsive: se lo schermo è molto piccolo, i bottoni si mettono uno sotto l'altro */
@media (max-width: 480px) {
    .contatti-social-grid {
        flex-direction: column;
        gap: 10px;
    }
}
/* ==========================================================================
   RESPONSIVIDÀ (Ottimizzazione per Tablet e Smartphone)
   ========================================================================== */
@media (max-width: 992px) {
    .contatti-grid {
        grid-template-columns: 1fr; /* Su schermi piccoli le colonne si incolonnano una sotto l'altra */
        gap: 30px;
    }
    
    .contatti-header h1 {
        font-size: 2.1rem;
    }
}

@media (max-width: 480px) {
    .contatti-info-box, 
    .contatti-map-container {
        padding: 20px; /* Riduce i margini interni sui telefoni piccoli per dare spazio al testo */
    }

    .whatsapp-floating {
        bottom: 20px;
        right: 20px;
        width: 54px;
        height: 54px;
    }
    
    .whatsapp-floating svg {
        width: 28px;
        height: 28px;
    }
}


/* ==========================================
   PAGINA CHI SIAMO - TIMELINE VERTICALE (CORRETTA)
   ========================================== */

/* Header della pagina */
.chisiamo-header {
    background: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), url('../img/foto_storia.webp') no-repeat center center / cover;
    height: 45vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--text-light);
    border-bottom: 5px solid var(--primary-color);
}

.chisiamo-header h1 {
    font-size: 3.7rem;
    text-transform: uppercase;
    font-weight: 800;
    margin-bottom: 10px;
}

.chisiamo-header p {
    font-size: 1.4rem;
    font-style: italic;
    max-width: 600px;
    font-weight: 300;
}


/* ==========================================
   SEZIONE STORIA: SENTIERO AD "S" (FULL WIDTH)
   ========================================== */
.storia-sentiero-largo {
    /* Assicurati che questo sia l'esatto verde del tuo sfondo per far funzionare l'invisibilità */
    background-color: var(--primary-color, #134629); 
    padding: 80px 0;
    overflow: hidden;
    position: relative;
    width: 100%;
}

/* IL CANVAS (100% dello schermo) */
/* IL CANVAS (100% dello schermo in larghezza, molto alto per ospitare tante date) */
.canvas-s-curve {
    position: relative;
    width: 100%;
    /* Abbiamo raddoppiato l'altezza rispetto a prima per fare spazio alla cascata */
    min-height: 1800px;
    height: 150vh; 
}

/* LA LINEA SVG (Adattiva) */
.linea-infinita {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
}

.linea-infinita path {
    fill: none;
    stroke: rgba(255, 255, 255, 0.7);
    stroke-width: 4px;
    stroke-dasharray: 12 18;
    stroke-linecap: round;
    /* Evita che i trattini si deformino quando lo schermo si allarga o si stringe */
    vector-effect: non-scaling-stroke; 
}

/* ==========================================
   LA MAGIA DELL'INTERRUZIONE (NODO GOMMA)
   ========================================== */
.nodo-gomma {
    position: absolute;
    width: 320px;
    transform: translate(-50%, -50%); /* Centratura matematica */
    text-align: center;
    z-index: 2;
    
    /* IL TRUCCO: Sfondo identico alla pagina e padding per "cancellare" la linea dietro */
    background-color: var(--primary-color, #134629); 
    padding: 15px 25px;
    border-radius: 20px; /* Bordi morbidi per un taglio della linea più naturale */
}

.nodo-gomma p {
    font-size: 1.05rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
}

/* --- STILI PENNARELLO (Preservati e migliorati) --- */
.data-evidenziata {
    display: inline-block;
    position: relative;
    font-size: 1.8rem;
    font-weight: 800;
    color: #ffffff;
    padding: 5px 20px;
    margin-bottom: 15px;
    text-transform: uppercase;
    z-index: 3;
}

/* 1. STILE CERCHIO */
.stile-cerchio::before {
    content: '';
    position: absolute;
    /* Copre esattamente lo spazio del testo */
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0;
    border: 3px solid var(--branca-lupetti, #ffcc00);
    /* Forma ovale irregolare */
    border-radius: 60% 40% 50% 50% / 45% 55% 45% 55%;
    transform: rotate(-2deg); /* Inclinato leggermente a sinistra */
    z-index: -1;
}

/* Secondo giro (Il tratto secondario, sfalsato e sbiadito) */
.stile-cerchio::after {
    content: '';
    position: absolute;
    /* Lo spostiamo di qualche pixel per creare l'effetto sbavatura del pennarello */
    top: 4px; 
    left: -4px; 
    right: 2px; 
    bottom: -2px;
    border: 2px solid var(--branca-lupetti, #ffcc00); /* Linea leggermente più sottile */
    /* Una forma ovale appena diversa dal primo giro */
    border-radius: 50% 60% 40% 50% / 55% 45% 50% 40%;
    opacity: 0.6; /* LA MAGIA: lo rende un po' più sbiadito, proprio come nello screen */
    transform: rotate(3deg); /* Inclinato nel verso opposto rispetto al primo */
    z-index: -1;
}

/* 2. STILE SOTTOLINEATO */
.stile-sottolineato {
    padding: 5px 0; 
}
.stile-sottolineato::after {
    content: '';
    position: absolute;
    bottom: -2px; left: -5%; right: -5%; 
    height: 4px;
    background-color: var(--branca-lupetti, #ffcc00);
    border-radius: 10px;
    transform: rotate(-1deg);
}

/* ==========================================
   RESPONSIVE: DISPOSITIVI MOBILI (Colonna singola)
   ========================================== */
@media (max-width: 992px) {
    .storia-sentiero-largo {
        padding: 60px 20px;
    }
    .canvas-s-curve {
        min-height: auto;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 50px;
        padding-left: 35px;
    }
    
    .linea-infinita { display: none; } /* Spegne il disegno ad S */

    /* Linea dritta verticale */
    .canvas-s-curve::before {
        content: '';
        position: absolute;
        top: 0; left: 20px; bottom: 0;
        width: 3px;
        background-image: linear-gradient(to bottom, rgba(255,255,255,0.7) 50%, transparent 50%);
        background-size: 3px 20px;
    }

    /* Rimuove i posizionamenti SVG e la "gomma" inutile su mobile */
    .nodo-gomma {
        position: relative;
        width: 100%;
        top: auto !important; left: auto !important;
        transform: none;
        text-align: left;
        background-color: transparent; 
        padding: 0;
    }

    /* Pallino di ancoraggio */
    .nodo-gomma::before {
        content: '';
        position: absolute;
        top: 15px; left: -41px; /* Calibrato per coprire la linea */
        width: 14px; height: 14px;
        background-color: var(--branca-lupetti, #ffcc00);
        border-radius: 50%;
    }
}

/* ==========================================
   STILI DEDICATI ALLA PAGINA NOTIZIE
   ========================================== */

/* Header Hero Notizie */
.news-hero {
   
    background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), url('#') no-repeat center center/cover;
    height: 55vh; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--text-light);
    padding: 20px;
    border-bottom: 5px solid yellow;
}

/* 1. NOTIZIA IN EVIDENZA (LAYOUT ORIZZONTALE MODERNO) */
.news-featured-section {
    margin-bottom: 50px;
}

.featured-card {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.05);
    width: 100%;
    max-width: 1100px; 
    margin: 0 auto 30px auto;
}

.featured-image {
    position: relative;
    min-height: 350px;
}

.featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.featured-content {
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--colore-card);
}

.featured-content h2 {
    font-size: 1.8rem;
    color: var(--primary-color);
    margin: 15px 0;
    line-height: 1.3;
}

.featured-content p {
    color: #555;
    font-size: 1.05rem;
    margin-bottom: 25px;
}

/* Metadata (Data e Tempo di lettura) */
.news-meta {
    display: flex;
    gap: 15px;
    font-size: 0.85rem;
    color: #718096;
    font-weight: 600;
}

/* BADGE COLORATI PER LE BRANCHE */
.badge-branca {
    position: absolute;
    top: 15px;
    left: 15px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-light);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.badge-branca.generale { background-color: var(--primary-color); }
.badge-branca.lupetti  { background-color: var(--branca-lupetti); color: #000; }
.badge-branca.reparto  { background-color: var(--branca-reparto); }
.badge-branca.compagnia{ background-color: var(--branca-compagnia); }
.badge-branca.raider   { background-color: rgb(0, 0, 165); }

/* 2. BARRA DEI FILTRI */
.news-filter-bar {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.filter-btn {
    padding: 10px 22px;
    border: 2px solid var(--colore-card);
    background: var(--colore-card);
    border-radius: 25px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.3s ease;
    color: var(--text-dark);
}

.filter-btn:hover, .filter-btn.active {
    background-color: var(--primary-color);
    color: var(--text-light);
    border-color: var(--primary-color);
}

/* 3. GRIGLIA NOTIZIE */
.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
    justify-content: start;
    position: relative;
    z-index: 1;
    align-content: start;
    min-height: 850px;
}
.news-grid::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* Inserisci qui il nome del file del tuo pattern (assicurati che sia nella cartella img) */
    background-image: url('../img/diario.svg');
    background-size: 850px;
    background-repeat: no-repeat;
    background-position: 50% 80%;
    /* LA MAGIA: Opacità al 5%. Sembrerà inchiostro impresso nella carta sabbia! */
    opacity: 0.50;
   
    /* Spinge il disegno fisicamente dietro al contenuto della sezione */
    z-index: -1;
}
/* ==========================================
   FIX RESPONSIVO PER IL DIARIO (Notizie)
   ========================================== */
@media (max-width: 768px) {
    .news-grid::before {
        /* 1. Rende il disegno fluido e proporzionato allo schermo del telefono */
        background-size: 130vw; 
        
        /* 2. Lo posiziona al centro orizzontalmente (center) e a metà altezza (50%). */
        background-position: center 50%; 
        
        /* 3. (Opzionale) Abbassiamo un po' l'opacità per non far 
              confondere le righe del diario con il testo delle card */
        opacity: 0.50; 
    }
}
.news-card {
    background: #ffffff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    border-top: 5px solid #ccc;
    width: 100%;
    max-width: 350px; /* Imposta la larghezza massima: la scheda non diventerà mai più grande di così */
    box-sizing: border-box;
}

.news-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}

/* Bordo superiore colorato in base alla branca */
.news-card.card-lupetti   { border-top-color: var(--branca-lupetti); }
.news-card.card-reparto   { border-top-color: var(--branca-reparto); }
.news-card.card-compagnia { border-top-color: var(--branca-compagnia); }
.news-card.card-raider    { border-top-color: rgb(0, 0, 165); }

.news-card-image {
    position: relative;
    height: 200px;
}

.news-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-card-body {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    background-color: var(--colore-card);
}

.news-card-body h3 {
    font-size: 1.25rem;
    color: var(--text-dark);
    margin: 10px 0;
    line-height: 1.4;
}

.news-card-body p {
    font-size: 0.95rem;
    color: #666;
    margin-bottom: 20px;
    flex-grow: 1;
}

.news-link {
    color: var(--primary-color);
    font-weight: 700;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s ease;
}

.news-link:hover {
    color: var(--accent-color);
}
/* IMPEDISCE ALLA NAVBAR DI COPRIRE I FILTRI QUANDO SI SCORRE LA PAGINA */
.news-filter-bar {
    scroll-margin-top: 120px; /* Crea uno spazio di rispetto sotto la barra di navigazione fissa */
}
/* ==========================================
   RESPONSIVE DESIGN PER SCHERMI PICCOLI
   ========================================== */
@media (max-width: 992px) {
    .featured-card {
        grid-template-columns: 1fr;
    }
    .featured-image {
        height: 250px;
    }
    .featured-content {
        padding: 25px;
    }
}
/* CLASSE CSS PER NASCONDERE GLI ELEMENTI FILTRATI */
.news-card.hide,
.featured-card.hide {
    display: none !important;
}

/* Transizione morbida per la comparsa delle schede */
.news-card, .featured-card {
    animation: fadeIn 0.4s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================
   STILI BASE (Desktop e Schermi Grandi)
   ========================================== */

.supportaci-header {
    background: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), 
                url('../img/5x1000-associazioni.webp') no-repeat center center/cover;
    min-height: 45vh;
    padding: 60px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--text-light, #ffffff);
    border-bottom: 5px solid #008cff; 
}

.supportaci-header h1 {
    font-size: 3.5rem;
    text-transform: uppercase;
    font-weight: 800;
    margin-bottom: 10px;
}

.supportaci-header p {
    font-size: 1.3rem;
    font-style: italic;
    max-width: 600px;
    font-weight: 300;
    margin: 0 auto;
}

.supportaci-main {
    max-width: 1100px;
    margin: 40px auto;
    padding: 0 20px;
}

.supportaci-intro {
    text-align: center;
    margin-bottom: 40px;
}

.supportaci-intro h2 {
    font-size: 2.2rem;
    color: #333;
    margin-bottom: 10px;
}

.supportaci-intro p {
    font-size: 1.1rem;
    color: #666;
}

/* Griglia Card Donazioni */
.donation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
}

/* Card Singola */
.donation-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 35px 25px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid #eaeaea;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.donation-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}

.card-5x1000 {
    border-top: 6px solid #e65f2b;
}

.card-iban {
    border-top: 6px solid #008cff;
}

.card-badge {
    display: inline-block;
    align-self: flex-start;
    background-color: rgba(230, 95, 43, 0.1);
    color: #e65f2b;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.card-badge.badge-blue {
    background-color: rgba(0, 140, 255, 0.1);
    color: #008cff;
}

.donation-card h3 {
    font-size: 1.6rem;
    color: #222;
    margin-bottom: 12px;
}

.donation-card p {
    color: #555;
    line-height: 1.6;
    margin-bottom: 20px;
}

.bank-details {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
}

.bank-details li {
    font-size: 0.95rem;
    color: #444;
    padding: 6px 0;
    border-bottom: 1px dashed #eee;
}

.code-box {
    background-color: #f8fafc;
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.code-label {
    display: block;
    font-size: 0.8rem;
    text-transform: uppercase;
    color: #64748b;
    font-weight: 700;
    margin-bottom: 8px;
}

.code-box strong {
    display: block;
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.15rem;
    color: #0f172a;
    word-break: break-all; /* Impedisce che l'IBAN lungo esca dai bordi */
    margin-bottom: 15px;
}

.btn-copy {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 8px;
    background-color: #e65f2b;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-copy:hover {
    background-color: #cf4f1f;
}

.btn-copy.btn-blue {
    background-color: #008cff;
}

.btn-copy.btn-blue:hover {
    background-color: #0076d6;
}

.impact-section {
    background-color:#E6DDC4;
    border-radius: 16px;
    padding: 40px 20px;
    text-align: center;
}

.impact-section h3 {
    font-size: 1.8rem;
    color: #222;
    margin-bottom: 30px;
}

.impact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 25px;
}

.impact-card {
    background: #ffffff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
}

.impact-icon {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.impact-card h4 {
    color: #008cff;
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.impact-card p {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.5;
}


/* ==========================================
   REGOLE RESPONSIVE (MEDIA QUERIES)
   ========================================== */

/* 1. Tablet e Smartphone (Schermi fino a 768px) */
@media (max-width: 768px) {
    .supportaci-header {
        min-height: 30vh;
        padding: 40px 15px;
    }

    .supportaci-header h1 {
        font-size: 2.3rem; /* Riduce la dimensione del titolo principale */
    }

    .supportaci-header p {
        font-size: 1.1rem;
    }

    .supportaci-main {
        margin: 25px auto;
        padding: 0 15px;
    }

    .supportaci-intro h2 {
        font-size: 1.7rem;
    }

    /* Le card vanno in un'unica colonna */
    .donation-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 40px;
    }

    .donation-card {
        padding: 25px 18px;
    }

    .impact-section {
        padding: 30px 15px;
    }

    .impact-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}

/* 2. Smartphone Piccoli (Schermi fino a 480px) */
@media (max-width: 480px) {
    .supportaci-header h1 {
        font-size: 1.8rem;
    }

    .supportaci-header p {
        font-size: 0.95rem;
    }

    .code-box {
        padding: 15px 10px;
    }

    .code-box strong {
        font-size: 0.95rem; /* Dimensione ideale per leggere l'IBAN su schermi stretti */
    }

    .btn-copy {
        padding: 14px 10px; /* Area di tocco più grande per facilitare la pressione col pollice */
        font-size: 0.85rem;
    }
}

/* ==========================================
   PAGINA RICORDI (Form + Card Anni)
   ========================================== */

/* Layout principale a 2 colonne */
.ricordi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Divide lo spazio a metà tra Form e Anni */
    gap: 40px;
    align-items: start;
    position: relative;
    z-index: 1;
}
.ricordi-grid::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
   
    /* Inserisci qui il nome del file del tuo pattern (assicurati che sia nella cartella img) */
    background-image: url('../img/bussola.svg');
    background-size: 400px;
    background-repeat: no-repeat;
    background-position: 5% 100%;
    /* LA MAGIA: Opacità al 5%. Sembrerà inchiostro impresso nella carta sabbia! */
    opacity: 0.50;
   
    /* Spinge il disegno fisicamente dietro al contenuto della sezione */
    z-index: -1;
}
@media (max-width: 850px) {
    .ricordi-grid::before {
        /* Il primo valore (center) la centra orizzontalmente.
           Il secondo valore (40%) la alza verticalmente! */
        background-position: center 80%; 
    }
}

/* --- STILE COLONNA DESTRA (Card Anni) --- */
.ricordi-years-section h3 {
    font-size: 1.8rem;
    color: var(--text-dark);
    margin-bottom: 10px;
    text-transform: uppercase;
}

.ricordi-years-section p {
    color: var(--text-dark);
    margin-bottom: 25px;
    font-size: 0.95rem;
}

/* Griglia per le card degli anni (2 per riga) */
.years-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
}

/* La singola Card Anno Rettangolare */
.year-card {
    background-color: var(--text-light);
    border: 2px solid #e2e8f0;
    border-left: 6px solid rgb(158, 42, 43); /* Bordo verde coordinato */
    border-radius: 12px;
    padding: 25px 20px;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

.year-number {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--text-dark);
    line-height: 1;
}

.year-subtitle {
    font-size: 0.85rem;
    color: var(--text-dark);
    font-weight: 600;
    margin-top: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Effetto al passaggio del mouse sulle Card degli Anni */
.year-card:hover {
    transform: translateY(-5px);
    border-left-color: rgb(158, 42, 43); /* Il bordo sinistro diventa arancione */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
}

.year-card:hover .year-number {
    color: rgb(158, 42, 43);
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 850px) {
    .ricordi-grid {
        grid-template-columns: 1fr; /* Su schermi piccoli torna ad una sola colonna */
        gap: 50px;
    }
}
.ricordi {
    background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), url('../img/campo_2k26.') no-repeat center top 70%/cover;
    height: 55vh; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--text-light);
    padding: 20px;
    border-bottom: 5px solid rgb(158, 42, 43);
}

.ricordi h1 {
    font-size: 3rem;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 800;
}

.ricordi p {
    font-size: 1.6rem;
    font-style: italic;
    max-width: 600px;
    font-weight: 300;
}
.title-ricordi {
    text-align: center;
    font-size: 2.2rem;
    color: #2C6A46 ;
    margin-bottom: 50px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.title-ricordi::after{
    content: "";
    display: block;
    width: 60px;
    height: 4px;
    background-color: rgb(158, 42, 43);
    margin: 12px auto 0px;
    border-radius: 2px;
}
.box-ricordi-email {
  background-color: #E6DDC4;
  border-left: 4px solid rgb(158, 42, 43); /* Il rosso mattone */
  padding: 20px;
  margin: 30px 0;
  border-radius: 4px;
}

.box-ricordi-email h3 {
  color: rgb(158, 42, 43);
  margin-top: 0;
  font-size: 40px;
}

.box-ricordi-email p {
  color: #333333;
  font-size:20px;
}

.disclaimer-privacy {
  color: rgb(100, 100, 100);
  margin-top: 15px;
  font-size: 0.85em;
  line-height: 1.4;
}

/* Struttura della Galleria */
/* Contenitore principale a colonne */
.galleria-professionale {
  display: flex;
  gap: 5px;                 /* come il vecchio column-gap */
  align-items: flex-start;  /* ogni colonna alta quanto le sue foto */
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

.galleria-colonna {
  flex: 1;                  /* colonne di uguale larghezza */
  min-width: 0;             /* evita che una foto allarghi la colonna */
}

/* Riquadro della singola foto */
.foto-item {
  /* Evita che una foto venga spezzata a metà tra una colonna e l'altra */
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: 5px; /* Spazio verticale tra le foto */
  overflow: hidden;
  position: relative;
  background-color: #f4eee0; /* Colore di sfondo temporaneo mentre carica */
}

/* La magia che impedisce il taglio */
.foto-item img {
  width: 100%;
  height: auto !important; /* LA FOTO NON VIENE PIÙ TAGLIATA */
  display: block;
  transition: transform 0.3s ease;
}

/* Effetto zoom al passaggio del mouse (opzionale) */
.foto-item:hover img {
  transform: scale(1.02);
}

/* --- Responsive: si adatta agli schermi più piccoli --- */

@media (max-width: 1024px) {
  
}

@media (max-width: 600px) {
 
}
/* Fa capire agli utenti che le foto della galleria si possono cliccare */
.foto-item img {
  cursor: pointer;
}

/* Stile principale del Lightbox (lo sfondo scuro) */
.lightbox {
  display: none; /* Nascosto di default */
  position: fixed;
  z-index: 1000; /* Lo fa stare sopra a tutto il resto del sito */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9); /* Nero trasparente al 90% */
  align-items: center;
  justify-content: center;
}

/* Immagine ingrandita al centro */
.lightbox-img {
  max-width: 90%; /* Occupa al massimo il 90% dello schermo */
  max-height: 90vh; /* Non supera mai l'altezza dello schermo */
  object-fit: contain; /* Non taglia e non deforma la foto */
  box-shadow: 0 5px 25px rgba(0,0,0,0.5);
  border-radius: 4px;
}

/* Pulsante Chiudi (X) */
.chiudi-lightbox {
  position: absolute;
  top: 20px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
  transition: 0.3s;
}

.chiudi-lightbox:hover {
  color: #9E2A2B; /* Diventa rosso al passaggio del mouse */
}

/* Frecce di navigazione */
.freccia {
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  font-size: 30px;
  padding: 15px 20px;
  user-select: none;
  transition: 0.3s;
}

.freccia:hover {
  background-color: rgba(0, 0, 0, 0.9);
}

.sinistra {
  left: 20px;
}

.destra {
  right: 20px;
}

/* ==========================================
   COOKIE BANNER E CONSENSO GOOGLE MAPS
   ========================================== */

.cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--primary-color);
    color: var(--text-light);
    padding: 22px 40px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    z-index: 3000;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.25);
}

.cookie-banner.hidden {
    display: none;
}

.cookie-banner p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    max-width: 700px;
    flex: 1 1 400px;
}

.cookie-banner a {
    color: var(--branca-lupetti);
    text-decoration: underline;
}

.cookie-banner-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.cookie-btn {
    padding: 10px 24px;
    border-radius: 25px;
    border: none;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cookie-btn-accept {
    background-color: var(--branca-lupetti);
    color: var(--primary-color);
}

.cookie-btn-accept:hover {
    background-color: var(--text-light);
}

.cookie-btn-reject {
    background: transparent;
    color: var(--text-light);
    border: 2px solid var(--text-light);
}

.cookie-btn-reject:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

/* Sposta il bottone WhatsApp verso l'alto mentre il banner cookie è visibile, per non sovrapporsi */
body.cookie-banner-open .whatsapp-floating {
    bottom: 110px;
}

/* Placeholder al posto della mappa Google finché non c'è consenso */
.maps-placeholder {
    width: 100%;
    min-height: 320px;
    background-color: var(--colore-card);
    border: 2px dashed var(--primary-color);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 16px;
    padding: 30px;
}

.maps-placeholder p {
    max-width: 420px;
    color: var(--text-dark);
    font-size: 0.95rem;
    margin: 0;
}

.maps-placeholder-btn {
    padding: 12px 30px;
    background-color: var(--primary-color);
    color: var(--text-light);
    border: none;
    border-radius: 25px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.maps-placeholder-btn:hover {
    background-color: var(--accent-color);
}

@media (max-width: 768px) {
    .cookie-banner {
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 20px;
        gap: 16px;
        height: 220px;
    }

    .cookie-banner-actions {
        width: 100%;
    }

    .cookie-btn {
        flex: 1;
    }

    /* Su mobile il banner va a capo ed è più alto, quindi WhatsApp deve salire di più */
    body.cookie-banner-open .whatsapp-floating {
        bottom: 190px;
    }
}

/* ======================================================
   STILI PER LE PAGINE IN COSTRUZIONE / TEMPORANEE
   ====================================================== */
/* Contenitore principale centrato nello schermo */
.placeholder-container {
    min-height: 65vh;             /* Occupa almeno il 65% dell'altezza dello schermo */
    display: flex;                /* Attiva la modalità di impaginazione flessibile */
    align-items: center;          /* Centra il contenuto verticalmente */
    justify-content: center;       /* Centra il contenuto orizzontalmente */
    text-align: center;           /* Allinea il testo al centro */
    padding: 60px 20px;           /* Spazio interno sopra/sotto e ai lati */
}

/* Riquadro interno che racchiude il messaggio */
.placeholder-box {
    max-width: 600px;             /* Impedisce al testo di allargarsi troppo sui grandi schermi */
    width: 100%;                  /* Si adatta al 100% sui dispositivi piccoli */
}

/* Icona o emoji decorativa */
.placeholder-icon {
    font-size: 4rem;              /* Dimensione dell'icona/emoji */
    margin-bottom: 20px;          /* Distanza dal titolo sottostante */
}

/* Titolo della pagina temporanea */
.placeholder-title {
    margin-bottom: 15px;          /* Distanza dal paragrafo sottostante */
}

/* Testo descrittivo */
.placeholder-text {
    font-size: 1.50rem;           /* Testo leggermente più grande del normale */
    line-height: 1.6;             /* Spaziatura tra le righe per facilitare la lettura */
    color: #555;                  /* Un colore grigio scuro anziché nero pieno */
    margin-bottom: 30px;          /* Distanza dal pulsante per la Home */
}
@media (max-width: 768px) {
    .placeholder-container {
        padding: 40px 15px;       /* Riduciamo il padding per guadagnare spazio */
        min-height: 55vh;         /* Riduciamo leggermente l'altezza minima */
    }

    .placeholder-icon {
        font-size: 3rem;          /* Riduciamo la dimensione dell'icona (da 4rem a 3rem) */
        margin-bottom: 15px;
    }

    .placeholder-text {
        font-size: 1.25rem;       /* Riduciamo il testo per non farlo occupare troppe righe */
        margin-bottom: 25px;
    }
}

/* Per schermi con larghezza fino a 480px (Smartphone in verticale) */
@media (max-width: 480px) {
    .placeholder-icon {
        font-size: 2.5rem;        /* Icona ancora più contenuta per telefoni piccoli */
    }

    .placeholder-text {
        font-size: 1.10rem;       /* Dimensione del testo ideale per la lettura da smartphone */
        line-height: 1.5;
    }
}