:root {
    --accent: #1abc9c;
    --primary: #356549;       /* Verde Biocontrol */
    --primary-light: #218c64; /* Verde Salvia/Smeraldo */
    --primary-dark: #264a35;  /* Verde Scurissimo */
    --text-dark: #2d3436;     /* Antracite per alta leggibilità */
    --text-muted: #636e72;    /* Grigio scuro per testi secondari */
    --bg-body: #ffffff;
    --bg-section: #f4f7f6;    /* Grigio/Verde chiarissimo per sezioni alternate */
    --radius-md: 12px;
    --radius-lg: 24px;
    --shadow-soft: 0 10px 30px rgba(23, 76, 57, 0.08);
    --shadow-hover: 0 15px 40px rgba(23, 76, 57, 0.15);
    --transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);

    /* Spaziature fluide (si adattano da sole alla larghezza dello schermo) */
    --section-y: clamp(64px, 9vw, 120px);
    --section-y-compact: clamp(48px, 7vw, 80px);
}

/* RESET */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font-family: 'Poppins', sans-serif; color: var(--text-dark); line-height: 1.7; background: var(--bg-body); overflow-x: hidden; overflow-wrap: break-word; }
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
h1, h2, h3 { font-family: 'Poppins', sans-serif; color: var(--primary); }

/* ==========================================
   HERO SECTION
   ========================================== */
.hero {
    height: 65vh;
    min-height: 500px;
    background: linear-gradient(rgba(23, 76, 57, 0.9), rgba(23, 76, 57, 0.7)), 
                url('../assets/sede.jpg') center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    padding-bottom: 50px; /* Spazio per le card sovrapposte */
}
.hero h1 { color: white; font-size: clamp(2.2rem, 4.5vw, 3.6rem); margin-bottom: 20px; font-weight: 700; line-height: 1.1; }
.hero p { font-size: clamp(1rem, 2.4vw, 1.25rem); max-width: 700px; margin: 0 auto; opacity: 0.95; font-weight: 300; }

/* ==========================================
   STATS GRID (Sovrapposta alla Hero)
   ========================================== */
.stats-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
    gap: clamp(16px, 2.5vw, 30px);
    margin-top: -80px; /* Effetto sovrapposizione */
    position: relative;
    z-index: 10;
}
.stat-card {
    background: white;
    padding: clamp(24px, 3.5vw, 40px) 16px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    text-align: center;
    border-bottom: 4px solid var(--primary-light);
    transition: var(--transition);
}
.stat-card h2,
.stat-card .stat-value { color: var(--primary-light); font-size: clamp(1.5rem, 3.8vw, 3rem); margin-bottom: 5px; font-family: 'Poppins', sans-serif; font-weight: 700; text-transform: none; letter-spacing: normal; line-height: 1.2; }
.stat-card p { font-size: 0.9rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); }

/* ==========================================
   SEZIONE STORIA (Layout Flex)
   ========================================== */
.section-spacing { padding: var(--section-y) 0; }
.history-grid {
    display: flex;
    gap: clamp(32px, 5vw, 60px);
    align-items: center;
    flex-wrap: wrap;
}
.history-text { flex: 1 1 380px; min-width: 0; }
.history-text .badge { 
    display: inline-block; padding: 6px 14px; background: rgba(33, 140, 100, 0.1); 
    color: var(--primary-light); font-weight: 600; font-size: 0.85rem; border-radius: 50px; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 1px;
}
.history-text h2 { font-size: clamp(1.8rem, 3.4vw, 3rem); margin-bottom: 25px; line-height: 1.1; }
.history-text p { margin-bottom: 20px; font-size: clamp(1rem, 1.6vw, 1.1rem); color: var(--text-muted); }
.history-image { flex: 1 1 400px; position: relative; }
.history-image img { border-radius: var(--radius-lg); box-shadow: var(--shadow-hover); }
.history-image::before {
    content: ''; position: absolute; top: -20px; left: -20px; width: 100%; height: 100%;
    background: var(--bg-section); border-radius: var(--radius-lg); z-index: -1;
}

/* ==========================================
   VALORI AZIENDALI
   ========================================== */
.values-section { background: var(--bg-section); text-align: center; }
.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: clamp(20px, 3vw, 40px);
    margin-top: clamp(32px, 5vw, 60px);
}
.value-card {
    background: white;
    padding: clamp(32px, 4vw, 50px) clamp(22px, 3vw, 40px);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    transition: var(--transition);
}
.icon-wrapper {
    width: 70px; height: 70px; background: rgba(33, 140, 100, 0.1); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; margin: 0 auto 25px;
}
.icon-wrapper i { font-size: 2rem; color: var(--primary-light); }
.value-card h3 { font-size: clamp(1.2rem, 2.4vw, 1.5rem); margin-bottom: 15px; }

/* ==========================================
   IL TEAM (Griglia a schede moderne)
   ========================================== */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: 30px;
    margin-top: clamp(32px, 5vw, 60px);
}
.team-card {
    background: white;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: var(--transition);
    border: 1px solid #eaeaea;
    display: flex;
    flex-direction: column;
}
.team-photo { width: 100%; height: clamp(240px, 32vw, 320px); object-fit: cover; object-position: top; }
.team-info { padding: 25px; text-align: center; flex-grow: 1; display: flex; flex-direction: column; }
.team-info h3 { font-size: 1.25rem; margin-bottom: 5px; }
.team-info span { color: var(--primary-light); font-weight: 500; font-size: 0.9rem; margin-bottom: 20px; display: block; }

.btn-outline {
    margin-top: auto;
    display: inline-block; width: 100%; padding: 12px;
    border: 2px solid var(--primary-light); color: var(--primary-light);
    background: transparent; border-radius: 8px; font-weight: 600; cursor: pointer;
    transition: var(--transition); font-family: 'Poppins', sans-serif;
}

/* ==========================================
   MODALE ACCESSIBILE
   ========================================== */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(15, 51, 38, 0.9); z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transition: var(--transition); padding: 20px;
    backdrop-filter: blur(5px);
}
.modal-overlay.active { opacity: 1; visibility: visible; }
.modal-content {
    background: white; max-width: 600px; width: 100%; padding: clamp(28px, 5vw, 50px);
    max-height: 90vh; overflow-y: auto;
    border-radius: var(--radius-md); position: relative;
    transform: translateY(30px); transition: var(--transition);
}
.modal-overlay.active .modal-content { transform: translateY(0); }
.btn-close {
    position: absolute; top: 20px; right: 25px; background: none; border: none;
    font-size: 2rem; color: var(--text-muted); cursor: pointer; transition: 0.3s;
}

.hours-table {
    color: #e0e0e0;
}

/* ==========================================
   ANIMAZIONI ALLO SCROLL
   ========================================== */
.reveal { opacity: 0; transform: translateY(40px); transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
.reveal.active { opacity: 1; transform: translateY(0); }
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }


/* ==========================================
   EFFETTO FLIP 3D AUTOMATICO (NO HOVER / NO CLICK)
   ========================================== */
.history-image {
    flex: 1 1 400px;
    position: relative;
    perspective: 1000px; /* Profondità 3D */
    aspect-ratio: 4 / 3;
}

.history-image::before {
    content: ''; 
    position: absolute; 
    top: -20px; 
    left: -20px; 
    width: 100%; 
    height: 100%;
    background: var(--bg-section); 
    border-radius: var(--radius-lg); 
    z-index: -1;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transform-style: preserve-3d;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-hover);
    
    /* Animazione automatica: dura 14 secondi e gira all'infinito */
    animation: autoFlip3D 14s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.flip-card-front, 
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.flip-card-front img, 
.flip-card-back img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-lg);
}

.flip-card-back {
    transform: rotateY(180deg);
}

/* ==========================================
   KEYFRAMES PER ROTAZIONE E PAUSA AUTOMATICA
   ========================================== */
@keyframes autoFlip3D {
    0%, 40% {
        /* Mostra il Lato Front per il 40% del tempo (~3.2s) */
        transform: rotateY(0deg);
    }
    50%, 90% {
        /* Ruota e mostra il Lato Back per il 40% del tempo (~3.2s) */
        transform: rotateY(180deg);
    }
    100% {
        /* Torna al Lato Front (completando la rotazione 3D) */
        transform: rotateY(360deg);
    }
}


/* ==========================================
   AGGIUNTE PAGINA CHI SIAMO (nuove sezioni)
   ========================================== */
.breadcrumb { max-width: 1200px; margin: 0 auto; padding: 14px 20px; font-size: 0.85rem; color: var(--text-muted); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.breadcrumb li + li::before { content: "\203A"; margin-right: 6px; opacity: 0.6; }
.breadcrumb a { color: var(--primary-light); }
.breadcrumb a:hover { text-decoration: underline; }

.section-spacing.compact { padding: var(--section-y-compact) 0; }
.bg-alt { background: var(--bg-section); }
.section-title { font-size: clamp(1.8rem, 4vw, 2.5rem); margin-bottom: 15px; line-height: 1.15; }
.section-subtitle { color: var(--text-muted); max-width: 640px; margin: 0 auto; }

.text-block { max-width: 860px; margin: 0 auto; text-align: left; }
.text-block.spaced { margin-bottom: clamp(24px, 4vw, 40px); }
.text-block h2 { font-size: clamp(1.7rem, 4vw, 2.5rem); margin-bottom: 20px; line-height: 1.15; }
.text-block p { margin-bottom: 18px; font-size: clamp(1rem, 1.6vw, 1.1rem); color: var(--text-muted); }

/* Link dentro i testi: riconoscibili */
.text-block a,
.history-text a,
.value-card p a,
.sede-list a { color: var(--primary-light); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.text-block a:hover,
.history-text a:hover,
.value-card p a:hover,
.sede-list a:hover { color: var(--primary-dark); }

.sede-list { list-style: none; display: inline-block; text-align: left; margin-top: 18px; }
.sede-list li { padding: 4px 0; }

.cta-box {
    max-width: 860px; margin: 0 auto; text-align: center; padding: clamp(28px, 5vw, 40px) clamp(18px, 4vw, 24px);
    border-radius: var(--radius-lg); background: var(--primary); color: #fff;
}
.cta-box h2 { color: #fff; margin-bottom: 10px; font-size: clamp(1.5rem, 3.5vw, 2rem); line-height: 1.2; }
.cta-box p { color: rgba(255, 255, 255, 0.92); }
.cta-box a:not(.btn-cta) { color: #fff; text-decoration: underline; }
.cta-box a.btn-cta {
    display: inline-block; margin-top: 18px; padding: 14px 30px; border-radius: 999px;
    background: #fff; color: var(--primary); font-weight: 700; text-decoration: none; transition: var(--transition);
}

/* Riserva per la sezione "I Nostri Pilastri" finché nell'HTML restano gli stili inline
   (style="font-size: 2.8rem"...). Si può cancellare dopo aver sostituito quegli stili
   con le classi .section-title e .section-subtitle. */
#pillars_title { font-size: clamp(1.8rem, 4vw, 2.8rem) !important; line-height: 1.15; }


/* ==========================================
   EFFETTI HOVER: solo su dispositivi con mouse
   (su touch evitano il "hover bloccato" dopo il tap)
   ========================================== */
@media (hover: hover) {
    .stat-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-hover); }
    .value-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); }
    .team-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-hover); border-color: transparent; }
    .btn-outline:hover { background: var(--primary-light); color: white; }
    .btn-close:hover { color: var(--primary); transform: rotate(90deg); }
    .cta-box a.btn-cta:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }

    /* Pausa dell'animazione al passaggio del mouse per permettere di guardare la foto */
    .history-image:hover .flip-card-inner {
        animation-play-state: paused;
    }
}


/* ==========================================
   RESPONSIVE
   Breakpoint: 900px (tablet) · 600px · 480px (telefono) · 400px · 360px
   ========================================== */

/* ---------- TABLET E SOTTO (≤ 900px) ---------- */
@media (max-width: 900px) {
    .hero { height: auto; padding: 90px 20px 100px; min-height: 60vh; min-height: 60svh; }
    .hero h1 { font-size: clamp(1.75rem, 6vw, 2.4rem); }

    /* Storia: colonna unica, testo sopra e foto sotto (come prima) */
    .history-grid { flex-direction: column-reverse; flex-wrap: nowrap; align-items: stretch; gap: 40px; }
    .history-text { flex: 0 0 auto; width: 100%; }
    .history-image { flex: 0 0 auto; width: 100%; max-width: 560px; margin-inline: auto; }
    .history-image::before { display: none; }
    .history-text h2 { font-size: clamp(1.7rem, 5vw, 2.2rem); }

    /* Numeri: 2 colonne */
    .stats-wrapper { margin-top: -40px; gap: 20px; grid-template-columns: 1fr 1fr; }
    .stat-card .stat-value,
    .stat-card h2 { font-size: clamp(1.7rem, 6vw, 2.6rem); }
    .stat-card p { font-size: 0.8rem; letter-spacing: 0.5px; }

    /* Card: 2 colonne; l'eventuale ultima card dispari va centrata */
    .values-grid { grid-template-columns: repeat(2, 1fr); }
    .values-grid > .value-card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        justify-self: center;
        width: calc(50% - clamp(10px, 1.5vw, 20px));
    }

    .reveal { transform: translateY(28px); }
}

/* ---------- TELEFONO GRANDE (≤ 600px) ---------- */
@media (max-width: 600px) {
    .values-grid { grid-template-columns: 1fr; }
    .values-grid > .value-card:last-child:nth-child(odd) { width: 100%; }
    .icon-wrapper { width: 60px; height: 60px; margin-bottom: 20px; }
    .icon-wrapper i { font-size: 1.6rem; }
    .history-grid { gap: 32px; }
}

/* ---------- TELEFONO (≤ 480px) ---------- */
@media (max-width: 480px) {
    .hero { padding: 72px 16px 90px; }
    .hero p { line-height: 1.55; }
    .stats-wrapper { gap: 14px; }
    .stat-card { padding: 22px 12px; }
    .history-text .badge { font-size: 0.75rem; }
    .cta-box a.btn-cta { display: block; width: 100%; max-width: 320px; margin-inline: auto; padding: 14px 20px; }
    .modal-overlay { padding: 12px; }
}

/* ---------- TELEFONO PICCOLO (≤ 400px): numeri su una colonna ---------- */
@media (max-width: 400px) {
    .stats-wrapper { grid-template-columns: 1fr; margin-top: -30px; }
}

/* ---------- SCHERMI MOLTO PICCOLI (≤ 360px) ---------- */
@media (max-width: 360px) {
    .container { padding: 0 16px; }
}

/* ---------- Chi preferisce meno movimento ---------- */
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .flip-card-inner { animation: none; }
    .stat-card, .value-card, .team-card, .cta-box a.btn-cta { transition: none; }
}