/*
Theme Name: Farmacia Internazionale Child Theme
Theme URI: https://ticinoweb.com
Description: Tema child custom per Farmacia Internazionale
Author: ticinoWEB
Author URI: https://ticinoweb.com
Template: ticinoweb-ai-theme
Version: 1.16.0
Text Domain: farmaciainternazionale-child-theme
*/

/* ==========================================================================
   1. GLOBAL VARIABLES E DESIGN SYSTEM
   ========================================================================== */
:root {
    /* Colori Base & Farmacia Premium */
    --fi-white: #FFFFFF;
    --fi-bg-light: #F7F9F7;
    --fi-green-accent: #2A9D8F; /* Verde brillante e naturale */
    --fi-green-primary: #2A9D8F; /* Alias per retrocompatibilità con componenti */
    --fi-green-light: #E9F5F3; /* Verde chiarissimo per sfondi leggeri */
    --fi-green-dark: #1E6C63;
    --fi-text-main: #2C3E3A;
    --fi-text-muted: #6B7C79;
    --fi-border: rgba(42, 157, 143, 0.15);
    
    /* Tipografia */
    --font-heading: 'Plus Jakarta Sans', 'Inter', sans-serif;
    --font-body: 'Inter', sans-serif;
    
    /* Variabili Tema */
    --shadow-soft: 0 15px 35px rgba(42, 157, 143, 0.08);
    --shadow-hover: 0 25px 50px rgba(42, 157, 143, 0.15);
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 30px;
    --radius-pill: 50px;
    --transition-smooth: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* ==========================================================================
   2. GLOBAL UTILITIES
   ========================================================================== */
html, body {
    background-color: var(--fi-white);
    color: var(--fi-text-main);
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.6;
    margin: 0;
    overflow-x: clip;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--fi-text-main);
    margin-top: 0;
}

a {
    color: var(--fi-green-accent);
    text-decoration: none;
    transition: var(--transition-smooth);
}

.container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 5%;
}

.section-pad {
    padding: 100px 0;
}
@media (max-width: 768px) {
    .section-pad { padding: 60px 0; }
}

.text-center { text-align: center; }
.text-green { color: var(--fi-green-accent); }
.bg-light { background-color: var(--fi-bg-light); }

/* Buttons */
.fi-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 36px;
    border-radius: var(--radius-pill);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1rem;
    transition: var(--transition-smooth);
    border: none;
    cursor: pointer;
    text-align: center;
    box-sizing: border-box;
}
.fi-btn-primary {
    background-color: var(--fi-green-accent);
    color: var(--fi-white);
    box-shadow: 0 10px 25px rgba(42, 157, 143, 0.2);
}
.fi-btn-primary:hover {
    background-color: var(--fi-green-dark);
    transform: translateY(-2px);
    box-shadow: 0 15px 35px rgba(42, 157, 143, 0.3);
    color: var(--fi-white);
}
.fi-btn-secondary {
    background-color: transparent;
    color: var(--fi-green-accent);
    border: 2px solid var(--fi-border);
}
.fi-btn-secondary:hover {
    background-color: var(--fi-green-light);
    border-color: var(--fi-green-accent);
    color: var(--fi-green-dark);
}

/* Animations */
.reveal-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: opacity, transform;
}
.reveal-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.fi-sub-heading {
    display: inline-block;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--fi-green-accent);
    margin-bottom: 15px;
}
.fi-section-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 25px;
    letter-spacing: -0.5px;
}
.fi-lead {
    font-size: 1.1rem;
    color: var(--fi-text-muted);
    margin-bottom: 40px;
}

/* ==========================================================================
   HEADER & NAVIGATION
   ========================================================================== */
.fi-site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: transparent;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    padding: 25px 0;
}
.fi-site-header.fi-header-scrolled {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 15px 0;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}
.fi-header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/*
 * IL MARCHIO SI RESTRINGE, IL PULSANTE DEL MENU NO.
 *
 * Serve a togliere di mezzo il vecchio tetto scritto a mano sul logo
 * (`calc(100vw - 150px)`): quei 150px erano una stima dello spazio da lasciare
 * al menu, e su un telefono da 390px tagliavano il logo a 240px anche quando ce
 * n'erano 300 di disponibili. Cosi' invece il limite lo calcola il browser: il
 * marchio prende quel che resta, e resta sempre abbastanza per il pulsante.
 *
 * `min-width: 0` e' la riga indispensabile: per difetto un elemento flex non
 * scende sotto la larghezza del proprio contenuto, quindi senza questa il logo
 * spingerebbe il pulsante fuori dallo schermo invece di rimpicciolirsi.
 */
.fi-header-brand {
    flex: 1 1 auto;
    min-width: 0;
}
.fi-desktop-nav,
.fi-hamburger-btn {
    flex: 0 0 auto;
}
.fi-header-brand a {
    display: flex;
    align-items: center;
    text-decoration: none;
    min-width: 0;
}
/*
 * ALTEZZA FISSA E NON max-height, per far funzionare anche i logo in SVG.
 *
 * Un SVG esportato con `width="100%" height="100%"` — come fanno Affinity,
 * Illustrator e compagnia — non ha una dimensione propria: dentro un tag immagine
 * quelle percentuali si riferirebbero al contenitore, che a sua volta dipende
 * dall'immagine. Con `max-height` + `width:auto` il browser non ha da cosa
 * partire e nel flex dell'header comprime tutto a 0x0: il logo c'e' nel codice ma
 * non si vede. Fissando l'ALTEZZA gli si da' l'appiglio, e la larghezza la ricava
 * dalle proporzioni del viewBox.
 *
 * max-width e object-fit servono ai logo molto larghi (questo e' 2089x500, oltre
 * quattro volte piu' largo che alto): su schermo stretto rientra invece di
 * spingere fuori la navigazione.
 */
.fi-logo-img {
    height: 110px;
    width: auto;
    /*
     * RETE DI SICUREZZA. Questo logo e' largo oltre quattro volte la sua altezza
     * (2089x500): a un'altezza di 110px diventa 460px di larghezza. Il 100% qui
     * e' quello del marchio, che il flex ha gia' ridotto allo spazio libero: con
     * object-fit il logo rimpicciolisce mantenendo le proporzioni invece di
     * schiacciarsi o di spingere fuori la navigazione.
     */
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
    transition: height 0.4s ease;
}
.fi-header-scrolled .fi-logo-img {
    height: 84px;
}
@media (max-width: 991px) {
    /* Da 576 a 991px: alzato da 78 a 84 perche' altrimenti, appena sotto i
       576px, il logo del telefono risultava piu' piccolo di quello del tablet e
       si vedeva un salto attraversando il confine. */
    .fi-logo-img { height: 84px; }
    .fi-header-scrolled .fi-logo-img { height: 68px; }
}
@media (max-width: 575px) {
    /*
     * SUL TELEFONO IL LOGO CRESCE PIU' CHE IN PROPORZIONE, perche' accanto ha
     * solo il pulsante del menu invece di cinque voci di navigazione.
     *
     * I conti su un telefono da 390px: il contenitore lascia il 5% per lato,
     * quindi 351px utili; meno i 30px del pulsante e il respiro fra i due
     * restano circa 300px per il logo, che con le sue proporzioni (4,18 volte
     * piu' largo che alto) valgono 72px di altezza. Gli 76px chiesti qui li
     * raggiunge sugli schermi da 400px in su, e sui piu' stretti il tetto lo
     * riduce da solo senza deformarlo.
     */
    .fi-logo-img { height: 76px; }
    .fi-header-scrolled .fi-logo-img { height: 62px; }
    /* Il pulsante non deve mai finire appiccicato al logo. */
    .fi-hamburger-btn { margin-left: 14px; }
}
.fi-logo-text {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--fi-green-dark);
    letter-spacing: -0.5px;
}
.fi-desktop-nav {
    display: none;
}
.fi-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 30px;
}
.fi-nav-list li a {
    text-decoration: none;
    color: var(--fi-text);
    font-weight: 500;
    font-size: 0.95rem;
    transition: color 0.3s ease;
    position: relative;
}
.fi-nav-list li a:hover {
    color: var(--fi-green-accent);
}
.fi-nav-list li a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--fi-green-accent);
    transition: width 0.3s ease;
}
.fi-nav-list li a:hover::after {
    width: 100%;
}

/* Mobile Hamburger */
.fi-hamburger-btn {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
}
.fi-hamburger-line {
    width: 100%;
    height: 2px;
    background: var(--fi-green-dark);
    border-radius: 2px;
    transition: all 0.3s ease;
}
.fi-hamburger-btn.is-active .fi-hamburger-line:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}
.fi-hamburger-btn.is-active .fi-hamburger-line:nth-child(2) {
    opacity: 0;
}
.fi-hamburger-btn.is-active .fi-hamburger-line:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

/* Mobile Overlay Menu */
.fi-mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    transform: translateY(-20px);
}
.fi-mobile-overlay.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.fi-mobile-menu-container {
    width: 100%;
    max-width: 400px;
    padding: 0 30px;
    text-align: center;
}
.fi-mobile-nav-list {
    list-style: none;
    padding: 0;
    margin: 0 0 40px 0;
}
.fi-mobile-nav-list li {
    margin-bottom: 20px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
}
.fi-mobile-overlay.is-active .fi-mobile-nav-list li {
    opacity: 1;
    transform: translateY(0);
}
/* Stagger animation */
.fi-mobile-overlay.is-active .fi-mobile-nav-list li:nth-child(1) { transition-delay: 0.1s; }
.fi-mobile-overlay.is-active .fi-mobile-nav-list li:nth-child(2) { transition-delay: 0.15s; }
.fi-mobile-overlay.is-active .fi-mobile-nav-list li:nth-child(3) { transition-delay: 0.2s; }
.fi-mobile-overlay.is-active .fi-mobile-nav-list li:nth-child(4) { transition-delay: 0.25s; }
.fi-mobile-overlay.is-active .fi-mobile-nav-list li:nth-child(5) { transition-delay: 0.3s; }
.fi-mobile-overlay.is-active .fi-mobile-nav-list li:nth-child(6) { transition-delay: 0.35s; }

.fi-mobile-nav-list li a {
    text-decoration: none;
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--fi-green-dark);
    transition: color 0.3s ease;
    display: block;
}
.fi-mobile-nav-list li a:hover {
    color: var(--fi-green-accent);
}
.fi-mobile-bottom-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    width: 100%;
    margin-top: 30px;
}
.fi-mobile-phone-link {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--fi-green-dark);
    text-decoration: none;
    transition: color 0.3s ease;
}
.fi-mobile-phone-link:hover {
    color: var(--fi-green-accent);
}

@media (min-width: 992px) {
    .fi-desktop-nav {
        display: block;
    }
    .fi-hamburger-btn {
        display: none;
    }
    .fi-mobile-overlay {
        display: none !important;
    }
}

/* ==========================================================================
   3. CLEAN HERO PREMIUM
   ========================================================================== */
.fi-clean-hero {
    position: relative;
    min-height: 100vh; /* Full viewport per centramento perfetto */
    display: flex;
    align-items: center;
    background-color: var(--fi-white);
    overflow: hidden;
    padding-top: 20px;
    padding-bottom: 140px;
}

/* Texture sottile (noise impercettibile per dare feeling materico) */
.fi-hero-noise {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.02'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 1;
}

/* Aloni Atmosferici (Glows) */
.fi-hero-glows {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.fi-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    mix-blend-mode: multiply;
    animation: float-glow 20s infinite alternate ease-in-out;
}
.glow-primary {
    width: 55vw; height: 55vw;
    background: rgba(42, 157, 143, 0.12); /* Verde acquamarina super delicato */
    top: -10%; right: -5%;
    animation-delay: 0s;
}
.glow-secondary {
    width: 45vw; height: 45vw;
    background: rgba(168, 230, 207, 0.15); /* Verde più caldo */
    bottom: -5%; right: 15%;
    animation-delay: -10s;
}
@keyframes float-glow {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-3%, 3%) scale(1.05); }
    100% { transform: translate(3%, -3%) scale(0.95); }
}

/* Branch / Foglia Naturale */
.fi-hero-branch-wrapper {
    position: absolute;
    bottom: -80px;
    left: -80px;
    width: 350px;
    height: 450px;
    pointer-events: none;
    z-index: 0; /* Dietro al testo */
    color: var(--fi-green-accent); /* o un verde salvia */
    opacity: 0.15; /* Leggermente più visibile prima del blur */
    filter: blur(8px); /* Effetto morbido silhouette */
    animation: sway-branch 20s infinite alternate ease-in-out;
    transform-origin: bottom left;
}
.fi-hero-branch-svg {
    width: 100%;
    height: 100%;
}

@keyframes sway-branch {
    0% { transform: translateY(0) rotate(0deg); }
    100% { transform: translateY(-30px) rotate(8deg); }
}

/* Layout Contenuti */
.clean-hero-container {
    position: relative;
    z-index: 2;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.hero-content-left {
    max-width: 100%;
}

/* Badges / Micro Details */
.fi-hero-micro-details {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 35px;
}
.micro-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(42, 157, 143, 0.1);
    border-radius: var(--radius-pill);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--fi-green-dark);
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: var(--transition-smooth);
}
.micro-badge:hover {
    background: var(--fi-white);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.05);
}
.micro-badge .badge-dot {
    width: 6px; height: 6px;
    background-color: var(--fi-green-accent);
    border-radius: 50%;
    display: inline-block;
}

/* Typography */
.fi-hero-title {
    font-size: clamp(3.5rem, 5.5vw, 5.5rem);
    font-weight: 800;
    line-height: 1.05;
    margin-bottom: 30px;
    color: var(--fi-text-main);
    letter-spacing: -1.5px;
}
.fi-hero-desc {
    font-size: clamp(1.15rem, 1.8vw, 1.35rem);
    color: var(--fi-text-muted);
    line-height: 1.6;
    margin-bottom: 45px;
    max-width: 650px;
}

/* Actions */
.fi-hero-actions {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

/* Image & Micro Card Right */
.hero-image-right {
    display: flex;
    justify-content: flex-end;
}
.fi-hero-image-wrapper {
    position: relative;
    width: 100%;
    max-width: 500px;
    aspect-ratio: 4/5;
    border-radius: var(--radius-lg);
    background: var(--fi-white);
    padding: 10px;
    box-shadow: var(--shadow-soft);
    border: 1px solid rgba(42, 157, 143, 0.1);
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
.fi-hero-image-wrapper:hover {
    transform: translateY(-5px);
}
.fi-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: calc(var(--radius-lg) - 5px);
}

.fi-image-micro-card {
    position: absolute;
    bottom: -20px;
    left: -30px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.9);
    padding: 15px 25px;
    border-radius: var(--radius-md);
    box-shadow: 0 15px 35px rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    gap: 15px;
    z-index: 10;
}
.micro-card-icon {
    width: 40px; height: 40px;
    background: var(--fi-green-light);
    color: var(--fi-green-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}
.micro-card-text {
    display: flex;
    flex-direction: column;
}
.micro-card-text strong {
    color: var(--fi-text-main);
    font-size: 0.95rem;
    font-weight: 700;
}
.micro-card-text span {
    color: var(--fi-text-muted);
    font-size: 0.85rem;
}

@media (max-width: 992px) {
    .fi-hero-branch-wrapper { display: none; }
    
    .clean-hero-container { grid-template-columns: 1fr; gap: 50px; }
    .fi-clean-hero {
        min-height: auto;
        padding-top: 140px;
        padding-bottom: 80px;
    }
    .hero-content-left { max-width: 100%; }
    .hero-image-right { justify-content: center; margin-top: 20px; }
    .fi-hero-image-wrapper { max-width: 450px; aspect-ratio: 1/1; }
    .fi-image-micro-card { left: -10px; bottom: -15px; padding: 12px 20px; }
    
    .fi-hero-title { text-align: center; }
    .fi-hero-desc { text-align: center; margin-left: auto; margin-right: auto; }
    .fi-hero-micro-details { justify-content: center; }
    .fi-hero-actions { justify-content: center; }
    
    .glow-primary { width: 90vw; height: 90vw; right: -20%; top: -10%; }
    .glow-secondary { width: 80vw; height: 80vw; right: auto; left: -20%; bottom: 10%; }
}

@media (max-width: 576px) {
    .fi-hero-title { letter-spacing: -1px; }
    .fi-hero-actions .fi-btn { width: 100%; }
}

/* ==========================================================================
   4. INTRODUZIONE
   ========================================================================== */
.fi-intro-section {
    position: relative;
    overflow: hidden;
}
.fi-intro-bg-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(168, 230, 207, 0.15) 0%, rgba(255,255,255,0) 70%);
    pointer-events: none;
    z-index: 0;
}
.fi-intro-section .container {
    position: relative;
    z-index: 1;
}

.fi-intro-header-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 60px;
    align-items: center;
    margin-bottom: 60px;
}
.intro-text-col {
    text-align: left;
}
.intro-text-col .fi-lead {
    margin-bottom: 0;
}
.intro-gallery-wrapper {
    position: relative;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    overflow: hidden;
    box-shadow: var(--shadow-hover);
    animation: morph 12s ease-in-out infinite;
    aspect-ratio: 1 / 1;
    width: 100%;
    max-width: 450px;
    margin: 0 auto;
}
.intro-infinite-swiper {
    width: 100%;
    height: 100%;
}
/* La curva lineare serviva allo scorrimento continuo di prima: con la
   dissolvenza va tolta, altrimenti il crossfade perde la propria curva
   d'accelerazione e sembra un taglio netto invece che una dissolvenza. */
.intro-slide-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.fi-intro-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    align-items: center;
}
.intro-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    padding: 35px 25px;
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
    text-align: center;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    border: 1px solid var(--fi-green-light);
}
/* Layout Rhythm: sfalsamento della card centrale */
@media (min-width: 993px) {
    .card-center {
        transform: translateY(20px);
    }
}

.intro-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(42, 157, 143, 0.08);
    border-color: rgba(42, 157, 143, 0.3);
}

.card-icon {
    width: 60px; height: 60px;
    background: var(--fi-green-light);
    color: var(--fi-green-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    transition: transform 0.5s ease;
}
.fi-svg-icon {
    width: 28px;
    height: 28px;
}
.intro-card:hover .card-icon {
    transform: scale(1.1) rotate(5deg);
    background: var(--fi-green-accent);
    color: var(--fi-white);
}

.intro-card h3 {
    font-size: 1.25rem;
    margin-bottom: 12px;
    color: var(--fi-text-main);
}
.intro-card p {
    font-size: 0.95rem;
    color: var(--fi-text-muted);
    margin: 0;
    line-height: 1.6;
}

@media (max-width: 992px) {
    .fi-intro-header-grid { grid-template-columns: 1fr; text-align: center; gap: 40px; }
    .intro-text-col { text-align: center; max-width: 100%; box-sizing: border-box; padding: 0 10px; }
    .intro-gallery-wrapper { justify-self: center; }
    .fi-intro-cards { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .card-center { transform: none; }
    .fi-intro-bg-glow { width: 100%; height: 500px; }
}
@media (max-width: 768px) {
    .fi-intro-cards { grid-template-columns: 1fr; }
}
@media (max-width: 576px) {
    .intro-gallery-wrapper { max-width: 280px; margin: 0 auto; }
}

/* ==========================================================================
   5. SERVIZI PRINCIPALI
   ========================================================================== */
.fi-services-section {
    position: relative;
    background-color: var(--fi-bg-light);
    overflow: hidden;
}
.fi-services-bg-glow {
    position: absolute;
    top: -20%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(42, 157, 143, 0.05) 0%, rgba(255,255,255,0) 70%);
    pointer-events: none;
    z-index: 0;
}
.fi-services-watercolor-bg {
    position: absolute;
    top: -5%;
    left: -5%;
    width: 110%;
    height: 110%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.06; /* Estremamente delicato, nessun pugno all'occhio */
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 0;
    animation: watercolor-drift 25s ease-in-out infinite alternate;
}
@keyframes watercolor-drift {
    0% { transform: scale(1) translate(0, 0) rotate(0deg); }
    50% { transform: scale(1.03) translate(1%, -1%) rotate(0.5deg); }
    100% { transform: scale(1.05) translate(-1%, 1%) rotate(-0.5deg); }
}
.fi-services-section .container {
    position: relative;
    z-index: 1;
}

.fi-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.fi-service-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-lg);
    padding: 35px 30px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
    position: relative;
    border: 1px solid var(--fi-border);
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    text-decoration: none;
    color: var(--fi-text-main);
    min-width: 0;
}
.fi-service-card:hover {
    box-shadow: 0 20px 40px rgba(42, 157, 143, 0.08);
    transform: translateY(-8px);
    border-color: rgba(42, 157, 143, 0.3);
}

.srv-icon {
    width: 55px; height: 55px;
    background: var(--fi-green-light);
    color: var(--fi-green-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    transition: transform 0.4s ease;
}
.srv-icon svg, .srv-icon img {
    width: 24px; height: 24px;
}
.fi-service-card:hover .srv-icon {
    transform: scale(1.1) translateY(-3px);
    background: var(--fi-green-accent);
    color: var(--fi-white);
}

.srv-title {
    font-size: 1.25rem;
    margin-bottom: 12px;
    color: var(--fi-text-main);
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}
.srv-desc {
    color: var(--fi-text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 25px;
    flex-grow: 1;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}
.srv-link-text {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--fi-green-accent);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: gap 0.3s ease;
}
.fi-service-card:hover .srv-link-text {
    gap: 12px;
}

/* 6. Card CTA Speciale */
.cta-card {
    background: var(--fi-green-light);
    border-color: var(--fi-green-accent);
    justify-content: center;
    align-items: center;
}
.cta-card .srv-desc {
    color: var(--fi-text-main);
    flex-grow: 0;
}
.cta-card:hover {
    background: #ffffff;
    border-color: var(--fi-green-accent);
}

@media (max-width: 992px) {
    .fi-services-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .fi-services-bg-glow { display: none; }
}
@media (max-width: 768px) {
    .fi-services-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   6. NATURALE & BENESSERE
   ========================================================================== */
.fi-nature-section {
    position: relative;
    overflow: hidden;
}
.fi-nature-bg {
    position: absolute;
    top: -20%; right: -10%;
    width: 800px; height: 800px;
    background: var(--fi-green-light);
    border-radius: 50%;
    filter: blur(100px);
    z-index: 0;
    opacity: 0.6;
}
.nature-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    position: relative;
    z-index: 2;
}
.nature-img-wrapper {
    position: relative;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    overflow: hidden;
    animation: morph 12s ease-in-out infinite;
    box-shadow: var(--shadow-soft);
}
.nature-img-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}
.nature-floating-botanical {
    position: absolute;
    color: var(--fi-green-accent);
    width: 35px;
    height: 35px;
    opacity: 0.5;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1)) blur(0.5px);
    animation: float 8s ease-in-out infinite;
}
.b1 { top: 10%; right: 15%; animation-delay: 1s; }
.b2 { bottom: 15%; left: 10%; width: 50px; height: 50px; opacity: 0.3; animation-delay: 3s; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1)) blur(1.5px); }

.nature-text-col {
    max-width: 550px;
}
.nature-features-list {
    margin: 40px 0;
    display: flex;
    flex-direction: column;
    gap: 25px;
}
.nature-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    transition: transform 0.3s ease;
}
.nature-feature-item:hover {
    transform: translateX(5px);
}
.nf-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: var(--fi-green-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fi-green-accent);
    transition: all 0.3s ease;
}
.nature-feature-item:hover .nf-icon {
    background: var(--fi-green-accent);
    color: var(--fi-white);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.nf-icon svg {
    width: 24px;
    height: 24px;
}
.nf-content h3 {
    margin: 0 0 5px 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--fi-text-main);
}
.nf-content p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--fi-text-light);
    line-height: 1.5;
}
.nature-cta {
    margin-top: 20px;
}

@keyframes morph {
    0%, 100% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
    34% { border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%; }
    67% { border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%; }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

@media (max-width: 992px) {
    .nature-layout { 
        grid-template-columns: 1fr; 
        gap: 40px; 
    }
    .nature-image-col {
        order: -1;
    }
    .nature-img-wrapper { 
        max-width: 400px; 
        margin: 0 auto; 
    }
    .nature-text-col {
        text-align: center;
        max-width: 100%;
    }
    .nature-feature-item {
        text-align: left;
    }
    .nature-cta {
        display: flex;
        justify-content: center;
        margin-top: 30px;
    }
}

/* ==========================================================================
   7. SUPPORTO SANITARIO (Roadmap & Watermark)
   ========================================================================== */
.fi-floating-watermark {
    position: absolute;
    top: -2%;
    right: 12%;
    width: 280px;
    height: 280px;
    opacity: 0.08;
    z-index: 1;
    pointer-events: none;
    animation: floatFaviconWatermark 20s ease-in-out infinite;
}
.fi-floating-watermark img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 20px 30px rgba(42, 157, 143, 0.3));
}
@keyframes floatFaviconWatermark {
    0% { transform: translate(0, 0) rotate(0deg) scale(1); }
    33% { transform: translate(-30px, 20px) rotate(15deg) scale(1.05); }
    66% { transform: translate(15px, -15px) rotate(-10deg) scale(0.95); }
    100% { transform: translate(0, 0) rotate(0deg) scale(1); }
}

@media (max-width: 992px) {
    .fi-floating-watermark {
        width: 150px;
        height: 150px;
        top: 2%;
        right: -5%;
        opacity: 0.03;
    }
}

.roadmap-wrapper {
    position: relative;
    max-width: 1000px;
    margin: 80px auto 0;
    display: flex;
    justify-content: center;
    gap: 50px; /* Aumentato da 30px a 50px per distanziare i box */
    align-items: stretch; /* Assicura che i box abbiano la stessa altezza */
}
.roadmap-bg-path {
    position: absolute;
    top: 50px;
    left: 0;
    width: 100%;
    height: 150px;
    z-index: 0;
    color: var(--fi-green-light);
    opacity: 0.6;
}
.roadmap-bg-path svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 10px rgba(42,157,143,0.3));
}
.roadmap-step {
    position: relative;
    z-index: 1;
    flex: 1; /* Sostituisce width: 30% per ripartire lo spazio equamente */
    display: flex;
    flex-direction: column;
    align-items: stretch; /* Permette alla card di riempire l'altezza */
    transition: transform 0.4s ease;
}
.roadmap-step:hover {
    transform: translateY(-5px);
}
/* Rimosso sfalsamento verticale (stagger) per mantenere un perfetto allineamento orizzontale */
.rm-step-1 { transform: translateY(0); }
.rm-step-2 { transform: translateY(0); }
.rm-step-3 { transform: translateY(0); }

.roadmap-step:hover.rm-step-1 { transform: translateY(-5px); }
.roadmap-step:hover.rm-step-2 { transform: translateY(-5px); }
.roadmap-step:hover.rm-step-3 { transform: translateY(-5px); }

.roadmap-bg-glow {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 400px;
    background: var(--fi-green-light);
    filter: blur(80px);
    border-radius: 50%;
    opacity: 0.4;
    z-index: 0;
}
.rm-node-badge {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    background: var(--fi-white);
    border: 2px solid var(--fi-green-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--fi-green-accent);
    box-shadow: 0 5px 15px rgba(42, 157, 143, 0.2);
    z-index: 2;
}
.center-badge {
    width: 48px;
    height: 48px;
    top: -24px;
    font-size: 1.3rem;
    box-shadow: 0 0 0 5px rgba(42, 157, 143, 0.1), 0 5px 15px rgba(42, 157, 143, 0.2);
    animation: pulse-node 3s infinite;
}
@keyframes pulse-node {
    0% { box-shadow: 0 0 0 0 rgba(42, 157, 143, 0.2), 0 5px 15px rgba(42, 157, 143, 0.2); }
    70% { box-shadow: 0 0 0 10px rgba(42, 157, 143, 0), 0 5px 15px rgba(42, 157, 143, 0.2); }
    100% { box-shadow: 0 0 0 0 rgba(42, 157, 143, 0), 0 5px 15px rgba(42, 157, 143, 0.2); }
}

.rm-micro-label {
    margin-top: 15px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--fi-green-accent);
    background: rgba(42, 157, 143, 0.05);
    padding: 6px 12px;
    border-radius: 20px;
}
.rm-micro-label svg {
    width: 14px;
    height: 14px;
}

.rm-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 35px 25px 30px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(42, 157, 143, 0.1);
    text-align: center;
    position: relative;
    width: 100%;
    height: 100%; /* Forza la card a riempire l'altezza del container */
    box-sizing: border-box; /* Previene l'overflow orizzontale che annullava il gap */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    transition: all 0.3s ease;
}
/* Spinge verso il basso eventuali elementi extra come il micro-label */
.rm-card p {
    flex-grow: 1;
}
.roadmap-step:hover .rm-card {
    box-shadow: 0 15px 50px rgba(42, 157, 143, 0.12);
    border-color: rgba(42, 157, 143, 0.3);
}
.center-card {
    background: var(--fi-white);
    box-shadow: 0 15px 50px rgba(42, 157, 143, 0.08);
}
.rm-icon {
    width: 50px;
    height: 50px;
    margin: 0 auto 15px;
    background: var(--fi-green-light);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fi-green-accent);
}
.rm-icon svg {
    width: 26px;
    height: 26px;
}
.rm-card h3 {
    font-size: 1.2rem;
    margin-bottom: 12px;
    color: var(--fi-green-dark);
}
.rm-card p {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--fi-text-muted);
    margin: 0;
}

@media (max-width: 992px) {
    .roadmap-wrapper {
        flex-direction: column;
        gap: 0;
        margin-top: 40px;
    }
    .roadmap-bg-path, .roadmap-bg-glow {
        display: none;
    }
    .roadmap-wrapper::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 20px;
        width: 2px;
        background: var(--fi-green-light);
        z-index: 0;
    }
    .roadmap-step {
        width: calc(100% - 40px);
        margin-left: 40px;
        align-items: flex-start;
        padding-left: 0;
        margin-bottom: 40px;
        transform: none !important;
        box-sizing: border-box;
    }
    .roadmap-step:last-child {
        margin-bottom: 0;
    }
    .rm-node-badge {
        left: -40px;
        top: 20px;
        transform: none;
    }
    .center-badge {
        left: -44px;
        top: 16px;
    }
    .rm-card {
        text-align: left;
        padding: 25px;
        box-sizing: border-box;
        width: 100%;
    }
    .rm-icon {
        margin: 0 0 15px 0;
    }
}


/* ==========================================================================
   8. STORIA 30+ ANNI (PREMIUM REDESIGN)
   ========================================================================== */
.fi-history-section {
    position: relative;
    /* Rimosso background verde scuro per unificare col tema */
    color: var(--fi-text-main);
    overflow: hidden;
    padding: 120px 0;
}
.history-bg-noise {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: overlay;
}
.history-big-watermark {
    position: absolute;
    top: 50%;
    right: -5%;
    transform: translateY(-50%);
    font-size: clamp(15rem, 30vw, 35rem);
    font-weight: 900;
    line-height: 1;
    color: rgba(0,0,0, 0.03); /* Scurito per sfondo chiaro */
    pointer-events: none;
    z-index: 0;
    user-select: none;
    white-space: nowrap;
}

.history-layout {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 80px;
    align-items: center;
    position: relative;
    z-index: 2;
}

.fi-sub-heading-light {
    color: var(--fi-primary); /* Colore base invece di verde chiaro */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.85rem;
    margin-bottom: 15px;
    display: inline-block;
}
.fi-history-section .fi-section-title {
    color: var(--fi-text-main); /* Scuro invece di bianco */
    margin-bottom: 25px;
}
.fi-lead-light {
    font-size: 1.15rem;
    color: var(--fi-text-light); /* Grigio standard */
    line-height: 1.7;
    margin-bottom: 30px;
}
.fi-btn-outline-light {
    background: transparent;
    color: var(--fi-primary);
    border: 2px solid var(--fi-primary);
}
.fi-btn-outline-light:hover {
    background: var(--fi-primary);
    color: var(--fi-white);
    border-color: var(--fi-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-soft);
}

.history-visual-composition {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 500px;
    display: flex;
    justify-content: flex-end;
}
.hist-img-main-wrapper {
    position: relative;
    width: 85%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.1);
    transform-origin: center right;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.hist-img-main-wrapper:hover {
    transform: scale(1.02);
}
.hist-img-main {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hist-img-secondary-wrapper {
    position: absolute;
    bottom: -30px;
    left: -20px;
    width: 50%;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
    border: 4px solid var(--fi-green-dark);
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.hist-img-secondary-wrapper:hover {
    transform: scale(1.05) translateY(-5px);
}
.hist-img-secondary {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hist-micro-card {
    position: absolute;
    top: 30px;
    left: -40px;
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 15px 25px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,1);
    z-index: 10;
    animation: float 6s ease-in-out infinite;
}
.hmc-icon {
    width: 45px;
    height: 45px;
    background: var(--fi-green-light);
    color: var(--fi-green-dark);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hmc-icon svg {
    width: 20px; height: 20px;
}
.hmc-text {
    display: flex;
    flex-direction: column;
}
.hmc-text strong {
    color: var(--fi-green-dark);
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1.2;
}
.hmc-text span {
    color: var(--fi-text-muted);
    font-size: 0.85rem;
    font-weight: 500;
}

@media (max-width: 992px) {
    .history-layout { grid-template-columns: 1fr; gap: 60px; text-align: center; }
    .history-big-watermark { font-size: 15rem; top: 10%; right: 50%; transform: translateX(50%); opacity: 0.05; }
    .fi-history-section { padding: 80px 0; }
    .history-text { max-width: 600px; margin: 0 auto; }
    
    .history-visual-composition { justify-content: center; min-height: 400px; margin-top: 20px; }
    .hist-img-main-wrapper { width: 90%; }
    .hist-img-secondary-wrapper { left: 0; bottom: -20px; width: 45%; }
    .hist-micro-card { 
        top: auto; 
        bottom: -20px; 
        left: 0; 
        right: 0; 
        margin: 0 auto; 
        width: max-content; 
        animation: float-center 6s ease-in-out infinite; 
    }
}

@keyframes float-center {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

@media (max-width: 576px) {
    .history-visual-composition { min-height: 300px; }
    .hist-img-main-wrapper { width: 100%; }
    .hist-img-secondary-wrapper { display: none; }
    .hist-micro-card { 
        top: auto; 
        bottom: -20px; 
        left: 0; 
        right: 0; 
        margin: 0 auto; 
        width: max-content; 
        animation: none; 
    }
    .history-big-watermark { display: none; }
}

/* ==========================================================================
   9. CATEGORIE PRODOTTI
   ========================================================================== */
.fi-category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 40px;
}
.fi-cat-card {
    position: relative;
    height: 350px;
    border-radius: var(--radius-md);
    overflow: hidden;
    display: block;
}
.cat-img {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease;
}
.cat-overlay {
    position: absolute;
    bottom: 0; left: 0; width: 100%;
    padding: 60px 20px 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
    color: var(--fi-white);
    display: flex;
    align-items: flex-end;
}
.cat-overlay h3 { margin: 0; color: var(--fi-white); font-size: 1.2rem; }
.fi-cat-card:hover .cat-img {
    transform: scale(1.1);
}
/*
 * SCHEDA SENZA FOTOGRAFIA. Dal pannello «Immagini del sito» si puo' dare un
 * titolo a un reparto senza avere ancora la foto giusta: invece di un rettangolo
 * bianco che sembra un errore di caricamento, la scheda diventa un riquadro in
 * tinta col verde del sito. Sembra una scelta, e lo e'.
 */
.fi-cat-card--senza-foto .cat-img {
    /* Il verde acqua del tema che sfuma nel suo scuro, non un verde inventato. */
    background: linear-gradient(160deg, var(--fi-green-accent), var(--fi-green-dark));
}
/* Il velo sfumato serviva a staccare il titolo dalla fotografia: su un fondo
   pieno e' solo una macchia scura in basso. */
.fi-cat-card--senza-foto .cat-overlay {
    background: none;
    align-items: center;
    inset: 0;
    padding: 24px;
}
/* Niente ingrandimento al passaggio del mouse: non c'e' una fotografia da
   avvicinare, e vedere una tinta piatta che scala e' solo strano. */
.fi-cat-card--senza-foto:hover .cat-img {
    transform: none;
}

@media (max-width: 992px) {
    .fi-category-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
    .fi-category-grid { grid-template-columns: 1fr; }
    .fi-cat-card { height: 250px; }
}

/* ==========================================================================
   10. CONTATTI
   ========================================================================== */
.contact-box {
    background: var(--fi-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-hover);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.contact-info {
    padding: 60px 50px;
}
.contact-list {
    list-style: none;
    padding: 0; margin: 30px 0 40px;
}
    .contact-list li { display: flex; align-items: flex-start; margin-bottom: 20px; font-size: 1.05rem; }
    .fi-contact-icon { width: 22px; height: 22px; color: var(--fi-green-main); margin-right: 15px; margin-top: 3px; flex-shrink: 0; }
    .contact-list i { display:none; } /* Fallback safety */
    .contact-list span { color: var(--fi-text-main); line-height: 1.5; flex: 1; }
    
    .contact-actions {
        display: flex;
        gap: 15px;
    }

.contact-map {
    position: relative;
}
.map-placeholder {
    width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.map-overlay-btn {
    background: rgba(255,255,255,0.9);
    padding: 30px;
    border-radius: var(--radius-md);
}

@media (max-width: 992px) {
    .contact-box { grid-template-columns: 1fr; }
    .contact-map { height: 400px; }
    .contact-info { padding: 40px 30px; }
}
@media (max-width: 576px) {
    .contact-actions { flex-direction: column; }
    .contact-actions .fi-btn { width: 100%; }
}

/* ==========================================================================
   9. FOOTER PREMIUM (DYNAMIC CMS)
   ========================================================================== */
.fi-footer-wrapper {
    position: relative;
    background-color: #ffffff; /* Solid white to block anything underneath */
    margin-top: 0;
    padding-top: 60px; /* Sostituito margin con padding per estendere lo sfondo */
}

/* CTA Footer (Compatta e Glass) */
.fi-footer-cta-container {
    position: absolute;
    top: 0; /* Appoggiato dentro il padding */
    left: 0;
    width: 100%;
    z-index: 10;
}
.fi-footer-cta {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--radius-md);
    padding: 35px 40px;
    box-shadow: 0 10px 40px rgba(3, 93, 41, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(42, 157, 143, 0.1);
}
.cta-content {
    position: relative;
    z-index: 2;
    max-width: 500px;
}
.cta-content h2 {
    font-size: 1.8rem;
    color: var(--fi-text-main);
    margin: 5px 0 10px;
}
.cta-content p {
    color: var(--fi-text-muted);
    font-size: 1rem;
    margin: 0;
}
.cta-actions {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 15px;
}
.cta-bg-glow {
    position: absolute;
    right: -5%;
    bottom: -30%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(42, 157, 143, 0.08) 0%, rgba(255,255,255,0) 70%);
    pointer-events: none;
    z-index: 1;
}

/* Main Footer */
.fi-footer {
    background: linear-gradient(180deg, var(--fi-green-dark) 0%, #024820 100%);
    color: rgba(255, 255, 255, 0.85);
    padding: 220px 0 0 0; /* Aumentato per evitare sovrapposizioni con la CTA */
    position: relative;
    overflow: hidden;
}

.fi-footer-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 50px;
}

.footer-col h3, .footer-col h4 {
    color: var(--fi-white);
    font-family: var(--font-heading);
    margin-bottom: 25px;
}
.footer-col h3 { font-size: 1.4rem; font-weight: 700; line-height: 1.2; }
.footer-col h4 { font-size: 1.05rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.9); }

/* Colonna Brand */
.footer-desc {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
    max-width: 280px;
    color: rgba(255,255,255,0.75);
}
.footer-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.05);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    color: var(--fi-white);
    border: 1px solid rgba(255,255,255,0.1);
}

/* Menu Link */
.footer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-menu li {
    margin-bottom: 12px;
}
.footer-menu a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    transition: var(--transition-smooth);
    display: inline-block;
    position: relative;
}
.footer-menu a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: var(--fi-white);
    transition: var(--transition-smooth);
}
.footer-menu a:hover {
    color: var(--fi-white);
}
.footer-menu a:hover::after {
    width: 100%;
}

/* Contatti */
.footer-contacts {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
}
.footer-contacts li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 15px;
}
.footer-contacts svg {
    color: rgba(255, 255, 255, 0.5);
    margin-top: 4px;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.footer-contacts a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    transition: var(--transition-smooth);
    line-height: 1.5;
    font-size: 0.95rem;
}
.footer-contacts a:hover {
    color: var(--fi-white);
}
.footer-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    /* E' un elenco: senza questo reset restano pallini e rientro. */
    list-style: none;
    margin: 0;
    padding: 0;
}
.footer-socials a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    transition: var(--transition-smooth);
    border: 1px solid rgba(255,255,255,0.1);
}
/* Il disegno prende una misura fissa: l'SVG e' scritto in viewBox e senza
   questo si allargherebbe fino a riempire il cerchio. */
.footer-socials svg {
    width: 18px;
    height: 18px;
    display: block;
}
.footer-socials a:hover,
.footer-socials a:focus-visible {
    background: var(--fi-white);
    color: var(--fi-green-dark);
    transform: translateY(-3px);
}
.footer-socials a:focus-visible {
    outline: 2px solid var(--fi-white);
    outline-offset: 3px;
}
@media (max-width: 767px) {
    /* Bersaglio da pollice: 44px e' il minimo comodo su schermo tattile. */
    .footer-socials a { width: 44px; height: 44px; }
    .footer-socials svg { width: 20px; height: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .footer-socials a { transition: none; }
    .footer-socials a:hover,
    .footer-socials a:focus-visible { transform: none; }
}

/* Orari */
.footer-hours p {
    margin-bottom: 8px;
    font-size: 0.9rem;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px dashed rgba(255,255,255,0.1);
    padding-bottom: 4px;
    color: rgba(255,255,255,0.75);
}
.footer-hours p:last-child {
    border-bottom: none;
}
.footer-hours strong {
    color: rgba(255,255,255,0.9);
    font-weight: 500;
}
.hours-fallback {
    color: rgba(255,255,255,0.7);
    font-style: italic;
    font-size: 0.9rem;
}

/* Bottom Bar */
.fi-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 20px 0;
    margin-top: 20px;
}
.bottom-bar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}
.bottom-links {
    display: flex;
    gap: 20px;
}
.bottom-links a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: var(--transition-smooth);
}
.bottom-links a:hover {
    color: var(--fi-white);
}

/* Area riservata: il lucchetto allineato al testo. Resta discreta come gli altri
   collegamenti in fondo, perche' serve a chi gestisce il sito, non ai visitatori. */
.bottom-links a.fi-area-riservata {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.bottom-links a.fi-area-riservata svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

/* Elementi Botanici (Decorazioni) */
.fi-footer-botanical {
    position: absolute;
    bottom: -20px;
    pointer-events: none;
    z-index: 0;
    animation: botanical-sway 12s ease-in-out infinite alternate;
}
.botanical-left {
    left: -20px;
    transform-origin: bottom left;
}
.botanical-right {
    right: -20px;
    transform-origin: bottom right;
    animation-delay: 2s;
}
.fi-footer .relative-z {
    position: relative;
    z-index: 2;
}

@keyframes botanical-sway {
    0% { transform: rotate(-1deg) translateY(0); }
    100% { transform: rotate(1deg) translateY(-10px); }
}

/* Responsive Footer */
@media (max-width: 992px) {
    .fi-footer-cta {
        flex-direction: column;
        text-align: center;
        padding: 30px 20px;
    }
    .cta-content { margin-bottom: 20px; max-width: 100%; }
    .cta-actions { width: 100%; justify-content: center; }
    
    .fi-footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
    .botanical-right { display: none; }
}

@media (max-width: 768px) {
    .cta-actions img {
        display: none !important;
    }
}

@media (max-width: 576px) {
    .fi-footer-wrapper { margin-top: 0; padding-top: 100px; }
    .fi-footer-cta-container { top: 0; }
    .fi-footer-cta { padding: 25px 20px; }
    .cta-content h2 { font-size: 1.5rem; }
    .cta-actions { flex-direction: column; gap: 10px; width: 100%; }
    .cta-actions .fi-btn { width: 100%; }
    
    .fi-footer { padding-top: 280px; }
    .fi-footer-grid {
        grid-template-columns: 1fr;
        gap: 35px;
        text-align: center;
    }
    .footer-desc { max-width: 100%; margin: 0 auto 20px auto; }
    .footer-badge { justify-content: center; }
    
    .footer-contacts li { justify-content: center; text-align: center; flex-direction: column; align-items: center; gap: 5px; }
    .footer-contacts svg { margin-bottom: 5px; }
    .footer-socials { justify-content: center; }
    
    .bottom-bar-content {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    /* Ridurre animazioni su mobile per performance */
    .fi-footer-botanical { animation: none; opacity: 0.02; }
}

/* ==========================================================================
   PAGE: SERVIZI (REFACTORING)
   ========================================================================== */

.fi-section-spacing {
    padding: 100px 0;
}
@media (max-width: 768px) {
    .fi-section-spacing { padding: 60px 0; }
}

/* 1. Hero Interna */
.fi-servizi-hero {
    position: relative;
    padding: 160px 0 80px;
    background: #ffffff;
    overflow: hidden;
    text-align: center;
}
.fi-hero-bg-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    z-index: 1;
    opacity: 0.6;
    animation: slowFloat 15s infinite ease-in-out alternate;
}
.glow-1 {
    width: 600px; height: 600px;
    background: rgba(42, 157, 143, 0.15); 
    top: -200px; left: -150px;
}
.glow-2 {
    width: 500px; height: 500px;
    background: rgba(3, 93, 41, 0.08); 
    bottom: -150px; right: -100px;
    animation-delay: -5s;
}
.fi-hero-botanical-pattern {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="M50 0 C60 40, 90 50, 100 50 C90 50, 60 60, 50 100 C40 60, 10 50, 0 50 C10 50, 40 40, 50 0 Z" fill="rgba(3,93,41,0.02)"/></svg>');
    background-size: 200px;
    z-index: 1; opacity: 0.5;
}
.fi-servizi-hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
}
.fi-hero-badges {
    display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 30px;
}
.fi-badge {
    background: rgba(42, 157, 143, 0.1); color: var(--fi-green-dark);
    padding: 6px 16px; border-radius: 30px; font-size: 0.85rem; font-weight: 600;
    border: 1px solid rgba(42, 157, 143, 0.2);
}
.fi-servizi-title {
    font-size: 3.2rem; font-weight: 800; color: var(--fi-green-dark);
    margin-bottom: 25px; letter-spacing: -1px; line-height: 1.1;
}
.fi-servizi-subtitle {
    font-size: 1.15rem; color: var(--fi-text-muted); line-height: 1.7;
}

@keyframes slowFloat {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(30px, -50px) scale(1.1); }
}

/* 2. Introduzione Breve */
.fi-servizi-intro {
    background: #fff; position: relative; z-index: 5; padding-top: 40px; padding-bottom: 60px;
}
.fi-text-lead {
    font-size: 1.25rem; color: var(--fi-text-main); line-height: 1.8;
}

/* 3. Sezione Servizi Dinamici */
.bg-light-green { background-color: #f7fbf9; }
.fi-servizi-wrapper { display: flex; flex-direction: column; gap: 60px; }
.fi-servizio-block {
    display: flex; align-items: center; gap: 50px;
    background: #fff; border-radius: var(--radius-lg); padding: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03); border: 1px solid rgba(42, 157, 143, 0.1);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.fi-servizio-block:hover {
    transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0,0,0,0.06);
}
.fi-servizio-block.layout-reversed { flex-direction: row-reverse; }
.fi-servizio-image-col { flex: 1; max-width: 45%; }
.fi-servizio-content-col { flex: 1.2; }
.fi-servizio-img-wrapper {
    border-radius: var(--radius-md); overflow: hidden; position: relative;
}
.fi-servizio-img-wrapper img {
    width: 100%; height: 320px; object-fit: cover; display: block; transition: transform 0.8s ease;
}
.fi-servizio-block:hover .fi-servizio-img-wrapper img { transform: scale(1.05); }

.fi-servizio-card { padding: 10px 20px; }
.fi-servizio-header { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; }
.fi-servizio-icon {
    width: 60px; height: 60px; background: rgba(42, 157, 143, 0.1);
    border-radius: 12px; display: flex; align-items: center; justify-content: center;
    color: var(--fi-green-primary); transition: transform 0.4s ease, background 0.4s ease;
    flex-shrink: 0;
}
.fi-servizio-block:hover .fi-servizio-icon {
    transform: translateY(-3px); background: var(--fi-green-primary); color: #fff;
}
.fi-servizio-icon svg, .fi-servizio-icon img.custom-svg-icon { width: 30px; height: 30px; }
.fi-servizio-block:hover .fi-servizio-icon svg { stroke: #fff; }

.fi-servizio-title {
    font-size: 1.8rem; color: var(--fi-green-dark); font-weight: 700; margin: 0; line-height: 1.2;
}
.fi-servizio-desc {
    color: var(--fi-text-muted); font-size: 1.05rem; line-height: 1.7; margin-bottom: 25px;
}
.fi-btn-link {
    color: var(--fi-green-primary); font-weight: 700; text-decoration: none;
    font-size: 1.05rem; display: inline-flex; align-items: center; gap: 8px;
    transition: color 0.3s ease, gap 0.3s ease;
}
.fi-btn-link:hover { color: var(--fi-green-dark); gap: 12px; }

/* Fallback: Se non c'è immagine */
.fi-servizio-block.no-image-layout {
    flex-direction: column; text-align: center; padding: 50px 40px;
    background: url('data:image/svg+xml;utf8,<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="M50 0 C60 40, 90 50, 100 50 C90 50, 60 60, 50 100 C40 60, 10 50, 0 50 C10 50, 40 40, 50 0 Z" fill="rgba(3,93,41,0.015)"/></svg>');
    background-size: 300px;
}
.fi-servizio-block.no-image-layout .fi-servizio-header {
    flex-direction: column; justify-content: center; text-align: center; gap: 15px; margin-bottom: 20px;
}
.fi-servizio-block.no-image-layout .fi-servizio-icon {
    margin: 0 auto; width: 80px; height: 80px; border-radius: 50%;
}

/* 4. Process Timeline (Metodo) */
.fi-section-title {
    font-size: 2.3rem; font-weight: 700; color: var(--fi-green-dark); margin-bottom: 15px;
}
.fi-process-timeline {
    display: flex; justify-content: space-between; position: relative; max-width: 1000px; margin: 60px auto 0;
}
.fi-process-line {
    position: absolute; top: 40px; left: 10%; right: 10%; height: 2px;
    background: repeating-linear-gradient(90deg, rgba(42, 157, 143, 0.3), rgba(42, 157, 143, 0.3) 10px, transparent 10px, transparent 20px);
    z-index: 1;
}
.fi-process-step {
    position: relative; z-index: 2; flex: 1; padding: 0 15px; text-align: center;
}
.fi-step-node {
    position: relative; margin-bottom: 25px;
}
.fi-step-number {
    position: absolute; top: -10px; right: 50%; transform: translateX(45px);
    background: var(--fi-green-dark); color: #fff; width: 28px; height: 28px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.9rem; border: 3px solid #fff; z-index: 3;
}
.fi-step-icon {
    width: 80px; height: 80px; background: #fff; border-radius: 50%;
    margin: 0 auto; display: flex; align-items: center; justify-content: center;
    color: var(--fi-green-primary); box-shadow: 0 10px 20px rgba(0,0,0,0.06);
    border: 1px solid rgba(42, 157, 143, 0.15); transition: transform 0.4s ease;
}
.fi-step-icon svg { width: 35px; height: 35px; }
.fi-process-step:hover .fi-step-icon { transform: scale(1.1); }
.fi-step-content h4 { font-size: 1.3rem; color: var(--fi-green-dark); margin-bottom: 10px; font-weight: 700; }
.fi-step-content p { color: var(--fi-text-muted); font-size: 0.95rem; line-height: 1.6; }

/* 5. Valori / Esperienza */
.fi-values-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 50px;
}
.fi-value-card {
    background: #fff; padding: 35px 30px; border-radius: var(--radius-md);
    box-shadow: 0 10px 30px rgba(0,0,0,0.03); border: 1px solid rgba(42, 157, 143, 0.1);
    transition: transform 0.3s ease; text-align: center;
}
.fi-value-card:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0,0,0,0.06); }
.fi-value-icon {
    width: 60px; height: 60px; margin: 0 auto 20px auto; color: var(--fi-green-primary);
    background: rgba(42, 157, 143, 0.08); border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.fi-value-icon svg { width: 30px; height: 30px; }
.fi-value-title { display: block; font-size: 1.3rem; font-weight: 700; color: var(--fi-green-dark); margin-bottom: 10px; }
.fi-value-text p { color: var(--fi-text-muted); font-size: 0.95rem; line-height: 1.6; margin: 0; }

/* 6. CTA Finale */
.fi-cta-box {
    background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px);
    border-radius: var(--radius-lg); padding: 50px 40px;
    box-shadow: 0 15px 40px rgba(3, 93, 41, 0.05); position: relative; overflow: hidden;
    border: 1px solid rgba(42, 157, 143, 0.15); max-width: 800px; margin: 0 auto;
}
.fi-cta-box h2 { font-size: 2rem; color: var(--fi-green-dark); margin-bottom: 15px; position: relative; z-index: 2; }
.fi-cta-box p { color: var(--fi-text-muted); font-size: 1.05rem; margin-bottom: 30px; position: relative; z-index: 2; }
.fi-cta-glow {
    position: absolute; width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(42, 157, 143, 0.1) 0%, transparent 70%);
    top: -100px; left: -100px; z-index: 1;
}
.fi-cta-buttons { display: flex; justify-content: center; gap: 15px; position: relative; z-index: 2; }

/* Animazioni base Reveal */
.reveal-text { opacity: 0; animation: fadeInUp 0.8s ease forwards; }
.delay-1 { animation-delay: 0.2s; }
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   Responsive: Servizi
   ========================================================================== */
@media (max-width: 992px) {
    .fi-servizi-title { font-size: 2.6rem; }
    .fi-servizi-wrapper { gap: 40px; }
    .fi-servizio-block, .fi-servizio-block.layout-reversed { 
        flex-direction: column; 
        gap: 25px; 
        padding: 25px; 
        align-items: stretch; 
    }
    .fi-servizio-image-col, .fi-servizio-content-col { 
        max-width: 100%; 
        width: 100%; 
    }
    .fi-servizio-card { padding: 0; }
    .fi-servizio-title, .fi-servizio-desc {
        word-wrap: break-word;
        overflow-wrap: break-word;
        word-break: break-word;
        hyphens: auto;
    }
    .fi-servizio-img-wrapper img { height: 280px; }
    .desktop-desc { display: none; }
    .mobile-desc.d-none { display: block !important; }
}

@media (max-width: 768px) {
    .fi-servizi-hero { padding: 120px 0 50px; }
    .fi-servizi-title { font-size: 2.2rem; }
    .fi-section-title { font-size: 1.8rem; }
    .fi-servizio-title { font-size: 1.5rem; }
    .fi-servizio-img-wrapper img { height: 220px; }
    .fi-servizio-header { flex-direction: column; align-items: flex-start; gap: 10px; }
    
    /* Timeline Verticale Mobile */
    .fi-process-timeline { flex-direction: column; gap: 30px; margin-top: 40px; padding-left: 20px; }
    .fi-process-line {
        top: 0; bottom: 0; left: 60px; width: 2px; height: auto;
        background: rgba(42, 157, 143, 0.2);
    }
    .fi-process-step { display: flex; text-align: left; align-items: flex-start; gap: 20px; padding: 0; }
    .fi-step-node { margin-bottom: 0; flex-shrink: 0; }
    .fi-step-number { right: -5px; top: -5px; transform: none; }
    .fi-step-icon { width: 60px; height: 60px; }
    .fi-step-icon svg { width: 25px; height: 25px; }
    
    .fi-cta-buttons { flex-direction: column; }
    .fi-cta-box { padding: 40px 20px; }
}

/* ==========================================================================
   PAGINA: CHI SIAMO
   ========================================================================== */
.fi-chisiamo-page {
    background-color: #ffffff;
}

/* HERO CHI SIAMO */
.fi-cs-hero {
    position: relative;
    padding: 180px 0 100px;
    background-color: #ffffff;
    overflow: hidden;
}
.fi-cs-hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    z-index: 0;
    opacity: 0.6;
}
.fi-cs-hero-glow.glow-1 {
    width: 600px; height: 600px;
    background: rgba(42, 157, 143, 0.15); /* verde acquamarina */
    top: -200px; right: -200px;
}
.fi-cs-hero-glow.glow-2 {
    width: 500px; height: 500px;
    background: rgba(3, 93, 41, 0.08); /* verde brand leggero */
    bottom: -150px; left: -100px;
}
.fi-cs-hero-text { position: relative; z-index: 2; padding-right: 40px; }
.fi-cs-title {
    font-size: 3.5rem; font-weight: 800; color: var(--fi-green-dark);
    line-height: 1.1; margin-bottom: 25px;
}
.fi-cs-subtitle {
    font-size: 1.3rem; color: var(--fi-text-main); line-height: 1.7; max-width: 600px;
}
.fi-cs-hero-image-wrapper {
    position: relative; z-index: 2; border-radius: 20px; overflow: hidden;
    box-shadow: 0 20px 50px rgba(3, 93, 41, 0.15);
}
.fi-cs-hero-img { width: 100%; display: block; border-radius: 20px; }

/* SEZIONE STORIA EDITORIALE */
.fi-cs-editorial-story {
    position: relative;
    background: #fff;
    /* Rimosso overflow: hidden per permettere il position: sticky dei figli */
}
.fi-cs-editorial-bg-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}
.fi-cs-bg-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    z-index: 0;
    pointer-events: none;
}
.glow-story {
    width: 600px; height: 600px;
    background: rgba(3, 93, 41, 0.04);
    top: -100px; left: -200px;
}
.fi-cs-big-watermark {
    position: absolute;
    top: 50%;
    right: -5%;
    transform: translateY(-50%);
    font-size: 40vw;
    font-weight: 900;
    color: rgba(3, 93, 41, 0.02);
    z-index: 0;
    pointer-events: none;
    line-height: 1;
    white-space: nowrap;
}
.fi-editorial-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 
        "title image"
        "text image";
    gap: 0 60px;
    align-items: start;
}
.editorial-title { grid-area: title; }
.editorial-image { 
    grid-area: image; 
    position: sticky; 
    top: 140px; 
}
.editorial-text { grid-area: text; }

.fi-cs-editorial-content {
    font-size: 1.15rem;
    color: var(--fi-text-main);
    line-height: 1.7;
}
.fi-cs-editorial-content p { margin-bottom: 25px; }

.fi-cs-editorial-img-wrapper {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(3, 93, 41, 0.12);
}
.fi-cs-editorial-img-wrapper img {
    width: 100%;
    display: block;
    border-radius: 20px;
    transition: transform 0.5s ease;
}
.editorial-image:hover .fi-cs-editorial-img-wrapper img {
    transform: scale(1.03);
}

.fi-cs-botanical-lines {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 150px;
    height: 150px;
    background-image: url('data:image/svg+xml;utf8,<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="M10,90 Q40,50 90,10" stroke="rgba(255,255,255,0.4)" stroke-width="2" fill="none"/></svg>');
    background-size: cover;
    pointer-events: none;
    z-index: 2;
}

.fi-cs-micro-card {
    position: absolute;
    bottom: -30px;
    left: -30px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 20px 25px;
    border-radius: 16px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    gap: 15px;
    z-index: 3;
    border: 1px solid rgba(3, 93, 41, 0.05);
}
.fi-cs-micro-card .micro-icon {
    width: 45px; height: 45px;
    background: rgba(3, 93, 41, 0.1);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--fi-green-primary);
    font-size: 1.2rem;
}
.fi-cs-micro-card .micro-text {
    display: flex; flex-direction: column;
}
.fi-cs-micro-card .micro-text strong {
    color: var(--fi-green-dark);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.2;
}
.fi-cs-micro-card .micro-text span {
    color: var(--fi-text-muted);
    font-size: 0.9rem;
    margin-top: 4px;
}

/* VALORI */
.fi-cs-values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 100px 40px;
}
.fi-cs-value-card {
    background: #fff; padding: 35px 30px 15px; border-radius: 16px;
    border: 1px solid rgba(42, 157, 143, 0.15);
    transition: all 0.3s ease; text-align: center;
    height: 100%;
}
.fi-cs-value-card p {
    margin-bottom: 0;
}
.fi-cs-value-card:hover {
    box-shadow: 0 15px 35px rgba(3, 93, 41, 0.08); transform: translateY(-5px);
    border-color: rgba(42, 157, 143, 0.3);
}
.fi-cs-val-icon {
    width: 60px; height: 60px; margin: 0 auto 20px;
    background: rgba(42, 157, 143, 0.1); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; color: var(--fi-green-primary);
    transition: background 0.3s, color 0.3s;
}
.fi-cs-value-card:hover .fi-cs-val-icon {
    background: var(--fi-green-primary); color: #fff;
}
.fi-cs-val-icon svg { width: 28px; height: 28px; }
.fi-cs-value-card h4 {
    font-size: 1.3rem; color: var(--fi-green-dark); font-weight: 700; margin-bottom: 12px;
}

/* NATURA E COMPETENZA */
.fi-cs-features { list-style: none; padding: 0; margin: 0; }
.fi-cs-features li {
    display: flex; align-items: flex-start; gap: 15px; margin-bottom: 20px;
    font-size: 1.1rem; color: var(--fi-text-main); font-weight: 500;
}
.fi-cs-features li i {
    font-size: 1.3rem; margin-top: 3px;
}

/* LOCARNO BOX */
.fi-cs-locarno-card {
    background: #fff; padding: 50px; border-radius: 20px;
    box-shadow: 0 15px 40px rgba(3, 93, 41, 0.08); border: 1px solid rgba(42, 157, 143, 0.1);
}
.fi-locarno-icon {
    width: 70px; height: 70px; margin: 0 auto 20px;
    background: var(--fi-green-primary); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; color: #fff; font-size: 28px;
}
.fi-cs-locarno-card h3 { font-size: 2rem; color: var(--fi-green-dark); font-weight: 800; margin-bottom: 15px; }

/* RESPONSIVE CHI SIAMO */
@media (max-width: 991px) {
    .fi-cs-hero { padding: 150px 0 60px; text-align: center; }
    .fi-cs-hero-text { padding-right: 15px; margin-bottom: 40px; }
    .fi-cs-title { font-size: 2.8rem; }
    .fi-cs-subtitle { margin: 0 auto; }
    
    .fi-editorial-grid {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }
    .editorial-title { order: 1; margin-bottom: 0; }
    .editorial-image { 
        order: 2; 
        margin-bottom: 20px; 
        position: relative;
        top: auto;
    }
    .editorial-text { order: 3; }
    
    .fi-cs-micro-card {
        bottom: -20px;
        left: 20px;
        right: 20px;
        justify-content: center;
    }
}
@media (max-width: 768px) {
    .fi-cs-title { font-size: 2.2rem; }
    .fi-cs-editorial-content { font-size: 1.05rem; }
    .fi-cs-locarno-card { padding: 30px 20px; }
    
    .fi-cs-micro-card {
        flex-direction: column;
        text-align: center;
        padding: 15px;
        bottom: -40px;
    }
    .editorial-image {
        margin-bottom: 50px;
    }
    
    .fi-cs-values-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 80px 40px;
    }
}

@media (max-width: 767px) {
    .fi-cs-values-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }
}

/* ==========================================================================
   INVIO RICETTE
   ========================================================================== */
.fi-ricette-page {
    --fi-rx-green: #035d29;
    --fi-rx-green-hover: #024820;
    --fi-rx-sage: #f1f7f2;
    --fi-rx-border: rgba(3, 93, 41, 0.14);
    position: relative;
    overflow: clip;
    background: #fff;
}

.fi-ricette-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 154px 0 80px;
    border-bottom: 1px solid rgba(3, 93, 41, 0.06);
    background: linear-gradient(145deg, #fff 0%, #f6faf7 48%, #eef7f0 100%);
}

.fi-rx-glow {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    filter: blur(4px);
    pointer-events: none;
}

.fi-rx-glow-one {
    top: -160px;
    right: -100px;
    width: 440px;
    height: 440px;
    background: rgba(42, 157, 143, 0.11);
}

.fi-rx-glow-two {
    bottom: -230px;
    left: -100px;
    width: 390px;
    height: 390px;
    background: rgba(3, 93, 41, 0.07);
}

.fi-ricette-hero-content {
    max-width: 960px;
    margin: 0 auto;
    text-align: center;
}

.fi-rx-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    color: var(--fi-rx-green);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.fi-rx-hero-kicker svg { width: 18px; height: 18px; }

.fi-ricette-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px;
    margin-top: 30px;
}

.fi-ricette-badges span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1px solid rgba(3, 93, 41, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.76);
    color: var(--fi-rx-green);
    font-size: 0.79rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.fi-ricette-badges svg { width: 15px; height: 15px; flex: 0 0 15px; }

.fi-ricette-hero h1 {
    margin-bottom: 20px;
    color: var(--fi-rx-green);
    font-size: clamp(2.65rem, 5vw, 4.35rem);
    line-height: 1.05;
    letter-spacing: -0.045em;
}

.fi-ricette-hero p {
    max-width: 760px;
    margin: 0 auto;
    color: var(--fi-text-muted);
    font-size: clamp(1rem, 2vw, 1.18rem);
    line-height: 1.75;
}

.fi-ricette-content {
    position: relative;
    padding: 82px 0 120px;
    background:
        radial-gradient(circle at 2% 24%, rgba(42, 157, 143, 0.055), transparent 24%),
        radial-gradient(circle at 98% 72%, rgba(3, 93, 41, 0.045), transparent 22%),
        #fff;
}

.fi-ricette-layout {
    display: grid;
    grid-template-columns: minmax(360px, 0.88fr) minmax(540px, 1.12fr);
    gap: clamp(30px, 4vw, 58px);
    align-items: start;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
}

.fi-rx-info {
    position: sticky;
    top: 130px;
    padding: 40px;
    border: 1px solid rgba(3, 93, 41, 0.1);
    border-radius: 26px;
    background: linear-gradient(155deg, #fff 0%, #f9fcfa 100%);
    box-shadow: 0 18px 48px rgba(3, 93, 41, 0.065);
}

.fi-rx-eyebrow {
    display: block;
    margin-bottom: 10px;
    color: var(--fi-rx-green);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.fi-rx-info h2,
.fi-rx-form-heading h2,
.fi-rx-result h2 {
    color: var(--fi-rx-green);
    font-size: clamp(1.75rem, 3vw, 2.35rem);
    line-height: 1.15;
}

.fi-rx-checklist {
    display: grid;
    gap: 22px;
    margin: 30px 0;
    padding: 0;
    list-style: none;
}

.fi-rx-checklist li {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 15px;
    align-items: start;
}

.fi-rx-checklist li > span {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 13px;
    background: var(--fi-rx-green);
    color: #fff;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(3, 93, 41, 0.16);
}

.fi-rx-checklist strong {
    color: var(--fi-text-main);
    font-size: 1.02rem;
}

.fi-rx-checklist p {
    margin: 4px 0 0;
    color: var(--fi-text-muted);
    font-size: 0.89rem;
    line-height: 1.55;
}

.fi-rx-info-cards {
    display: grid;
    gap: 12px;
}

.fi-rx-security-note,
.fi-rx-after-note {
    display: grid;
    grid-template-columns: 25px 1fr;
    gap: 13px;
    padding: 18px;
    border: 1px solid var(--fi-rx-border);
    border-radius: 15px;
    background: var(--fi-rx-sage);
}

.fi-rx-after-note {
    background: #fff;
}

.fi-rx-security-note svg,
.fi-rx-after-note svg {
    width: 25px;
    color: var(--fi-rx-green);
}

.fi-rx-security-note p,
.fi-rx-after-note p {
    margin: 0;
    color: var(--fi-text-muted);
    font-size: 0.87rem;
    line-height: 1.55;
}

.fi-rx-security-note strong,
.fi-rx-after-note strong { color: var(--fi-rx-green); }

.fi-rx-form-card {
    padding: clamp(30px, 3vw, 42px);
    border: 1px solid rgba(3, 93, 41, 0.11);
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 22px 62px rgba(3, 93, 41, 0.085);
}

.fi-rx-form-heading {
    margin-bottom: 22px;
}

.fi-rx-form-heading h2 { margin-bottom: 12px; }
.fi-rx-form-heading p { margin: 0; color: var(--fi-text-muted); font-size: 0.9rem; }

.fi-rx-form-privacy {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 11px;
    align-items: center;
    margin-bottom: 27px;
    padding: 13px 15px;
    border: 1px solid rgba(3, 93, 41, 0.09);
    border-radius: 12px;
    background: var(--fi-rx-sage);
    color: #43644f;
}

.fi-rx-form-privacy svg { width: 22px; color: var(--fi-rx-green); }
.fi-rx-form-privacy p { margin: 0; font-size: 0.8rem; line-height: 1.48; }

.fi-rx-form {
    display: grid;
    gap: 24px;
}

.fi-rx-field > label:first-child {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
    color: var(--fi-text-main);
    font-size: 0.96rem;
    font-weight: 750;
}

.fi-rx-field label em { color: #a4262c; font-style: normal; }

.fi-rx-field-icon {
    display: inline-flex;
    width: 23px;
    height: 23px;
    color: var(--fi-rx-green);
}

.fi-rx-field-icon svg { width: 100%; height: 100%; }

.fi-rx-upload {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 14px;
    align-items: center;
    min-height: 92px;
    padding: 17px 18px;
    border: 1px dashed rgba(3, 93, 41, 0.32);
    border-radius: 15px;
    background: #fbfdfb;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.fi-rx-upload:hover,
.fi-rx-upload:focus-within {
    border-color: var(--fi-rx-green);
    background: var(--fi-rx-sage);
    box-shadow: 0 0 0 4px rgba(3, 93, 41, 0.055);
    transform: translateY(-1px);
}

.fi-rx-upload.has-file {
    border-style: solid;
    border-color: #2a9d8f;
    background: #f1faf8;
}

.fi-rx-upload.has-error { border-color: #b42318; background: #fff7f6; }
.fi-rx-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }

.fi-rx-upload-icon {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 13px;
    background: var(--fi-rx-sage);
    color: var(--fi-rx-green);
}

.fi-rx-upload-icon svg { width: 23px; }
.fi-rx-upload-copy { display: grid; gap: 3px; }
.fi-rx-upload-copy strong { color: var(--fi-rx-green); font-size: 0.96rem; }
.fi-rx-upload-copy small { color: var(--fi-text-muted); line-height: 1.4; }

.fi-rx-file-meta {
    grid-column: 1 / -1;
    overflow: hidden;
    color: var(--fi-rx-green);
    font-size: 0.83rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fi-rx-upload.has-error .fi-rx-file-meta { color: #9f241b; }

/* --- elenco dei documenti scelti, con rimozione singola --- */
.fi-rx-elenco {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 7px;
}
.fi-rx-elenco[hidden] { display: none; }

.fi-rx-elenco-riga {
    display: grid;
    /* Il nome prende lo spazio che resta, il peso e il pulsante quello che serve:
       cosi' un nome file lunghissimo non spinge fuori la X per rimuoverlo. */
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: center;
    padding: 9px 9px 9px 14px;
    border: 1px solid var(--fi-rx-border);
    border-radius: 12px;
    background: #fbfdfb;
}

.fi-rx-elenco-nome {
    overflow: hidden;
    color: var(--fi-text-main);
    font-size: 0.88rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fi-rx-elenco-dim {
    color: var(--fi-text-muted);
    font-size: 0.79rem;
    font-variant-numeric: tabular-nums;
}

.fi-rx-elenco-via {
    display: grid;
    /* 34px e' sotto i 44 raccomandati, ma la riga intera e' alta 44 e il
       bersaglio effettivo del dito la copre: qui conta non far sembrare la X
       piu' importante del nome del documento. */
    width: 34px;
    height: 34px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--fi-text-muted);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.fi-rx-elenco-via svg { width: 15px; height: 15px; }
.fi-rx-elenco-via:hover,
.fi-rx-elenco-via:focus-visible {
    background: #fdecea;
    color: #b42318;
}
.fi-rx-elenco-via:focus-visible {
    outline: 2px solid #b42318;
    outline-offset: 1px;
}

.fi-rx-field input[type="tel"] {
    width: 100%;
    min-height: 57px;
    padding: 14px 17px;
    border: 1px solid var(--fi-rx-border);
    border-radius: 14px;
    background: #fbfdfb;
    color: var(--fi-text-main);
    font: inherit;
    box-sizing: border-box;
    outline: none;
    transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

.fi-rx-field input[type="tel"]:focus {
    border-color: var(--fi-rx-green);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(3, 93, 41, 0.08);
}

.fi-rx-field-help {
    display: block;
    margin-top: 7px;
    color: var(--fi-text-muted);
    font-size: 0.78rem;
}

.fi-rx-consent {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 12px;
    align-items: start;
    padding: 18px;
    border-radius: 14px;
    background: var(--fi-rx-sage);
    color: var(--fi-text-muted);
    font-size: 0.88rem;
    line-height: 1.55;
}

.fi-rx-consent input { width: 19px; height: 19px; margin: 2px 0 0; accent-color: var(--fi-rx-green); }
.fi-rx-consent a { color: var(--fi-rx-green); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

.fi-rx-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    width: 100%;
    min-height: 58px;
    padding: 15px 25px;
    border: 0;
    border-radius: 999px;
    background: var(--fi-rx-green);
    color: #fff;
    font: 700 1rem var(--font-heading);
    cursor: pointer;
    box-shadow: 0 13px 28px rgba(3, 93, 41, 0.22);
    transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}

.fi-rx-submit:hover { background: var(--fi-rx-green-hover); transform: translateY(-2px); box-shadow: 0 17px 32px rgba(3, 93, 41, 0.28); }
.fi-rx-submit:disabled { cursor: wait; opacity: .82; transform: none; }
.fi-rx-submit > svg { width: 20px; }
.fi-rx-submit.is-loading > svg { display: none; }

.fi-rx-spinner {
    display: none;
    width: 19px;
    height: 19px;
    border: 2px solid rgba(255,255,255,.38);
    border-top-color: #fff;
    border-radius: 50%;
    animation: fi-rx-spin .75s linear infinite;
}

.fi-rx-submit.is-loading .fi-rx-spinner { display: block; }
@keyframes fi-rx-spin { to { transform: rotate(360deg); } }

.fi-rx-submit-note { margin: -17px 0 0; color: var(--fi-text-muted); font-size: 0.78rem; text-align: center; }
.fi-rx-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

.fi-rx-client-error,
.fi-rx-alert {
    display: none;
    padding: 15px 18px;
    border: 1px solid rgba(180, 35, 24, 0.2);
    border-radius: 12px;
    background: #fff3f2;
    color: #8d1b13;
    font-size: 0.9rem;
    line-height: 1.5;
}

.fi-rx-client-error.is-visible,
.fi-rx-alert { display: block; }
.fi-rx-alert { max-width: 1120px; margin: 0 auto 28px; }

.fi-rx-result {
    max-width: 760px;
    margin: 0 auto;
    padding: 55px;
    border: 1px solid var(--fi-rx-border);
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 25px 70px rgba(3, 93, 41, 0.1);
    text-align: center;
    outline: none;
}

.fi-rx-result-icon {
    display: grid;
    width: 72px;
    height: 72px;
    margin: 0 auto 22px;
    place-items: center;
    border-radius: 22px;
    background: var(--fi-rx-sage);
    color: var(--fi-rx-green);
}

.fi-rx-result-icon svg { width: 36px; }
.fi-rx-result p { max-width: 590px; margin: 0 auto 28px; color: var(--fi-text-muted); font-size: 1.02rem; line-height: 1.7; }
.fi-rx-result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

@media (max-width: 1200px) {
    .fi-ricette-layout { grid-template-columns: minmax(330px, .84fr) minmax(500px, 1.16fr); gap: 32px; }
    .fi-rx-info { padding: 32px; }
}

@media (max-width: 992px) {
    .fi-ricette-hero { padding: 140px 0 70px; }
    .fi-ricette-content { padding: 70px 0 90px; }
    .fi-ricette-layout { grid-template-columns: 1fr; max-width: 800px; }
    .fi-rx-info { position: static; padding: 32px; }
    .fi-rx-checklist { grid-template-columns: repeat(3, 1fr); }
    .fi-rx-checklist li { grid-template-columns: 1fr; }
    .fi-rx-info-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .fi-ricette-hero { padding: 122px 0 56px; }
    .fi-ricette-badges span:last-child { flex-basis: auto; }
    .fi-ricette-content { padding: 52px 0 72px; }
    .fi-rx-checklist { grid-template-columns: 1fr; gap: 19px; }
    .fi-rx-checklist li { grid-template-columns: 42px 1fr; }
    .fi-rx-info-cards { grid-template-columns: 1fr; }
    .fi-rx-form-card { padding: 32px 25px; border-radius: 23px; }
    .fi-rx-result { padding: 42px 28px; }
}

@media (max-width: 480px) {
    .fi-ricette-page .container { padding-right: 20px; padding-left: 20px; }
    .fi-rx-hero-kicker { font-size: .68rem; letter-spacing: .09em; }
    .fi-ricette-hero h1 { font-size: clamp(2rem, 11vw, 2.35rem); }
    .fi-ricette-hero p { font-size: .96rem; line-height: 1.6; }
    .fi-ricette-badges { gap: 7px; }
    .fi-ricette-badges span { padding: 7px 9px; font-size: .68rem; }
    .fi-ricette-badges span:last-child { display: none; }
    .fi-rx-info { padding: 25px 20px; border-radius: 20px; }
    .fi-rx-form-card { padding: 27px 19px; }
    .fi-rx-upload { grid-template-columns: 42px minmax(0, 1fr); padding: 15px; }
    .fi-rx-upload-icon { width: 42px; height: 42px; }
    .fi-rx-file-meta { white-space: normal; overflow-wrap: anywhere; }
    .fi-rx-form-privacy { align-items: start; }
    .fi-rx-result-actions { flex-direction: column; }
    .fi-rx-result-actions .fi-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .fi-rx-spinner { animation-duration: 1.5s; }
    .fi-rx-upload, .fi-rx-submit { transition: none; }
}

/* ==========================================================================
   PAGE: EMERGENZE
   ========================================================================== */

.fi-em-page {
    background-color: #ffffff;
    overflow-x: hidden;
    width: 100%;
}

/* 1. Hero Mini Card */
.fi-em-hero-mini-card {
    display: inline-block;
    background-color: #fffafb;
    border: 1px solid #f8d7da;
    color: #333;
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 0.95rem;
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.08);
}

/* 2. Numeri Principali (Cards) */
.fi-em-numbers {
    padding-top: 80px;
    padding-bottom: 80px;
}
.fi-em-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    width: 100%;
}
.fi-em-card {
    background: #ffffff;
    border: 1px solid rgba(3, 93, 41, 0.1);
    border-radius: 16px;
    padding: 30px 20px;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(3, 93, 41, 0.03);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.fi-em-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(3, 93, 41, 0.08);
    border-color: rgba(3, 93, 41, 0.25);
}
.fi-em-card-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
    background: rgba(3, 93, 41, 0.06);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #035D29;
}
.fi-em-card-icon svg {
    width: 30px;
    height: 30px;
}
.fi-em-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333333;
    margin-bottom: 10px;
    line-height: 1.3;
}
.fi-em-card-number {
    font-size: 2.2rem;
    font-weight: 800;
    color: #035D29;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
    white-space: nowrap;
}

/* RESPONSIVE */
@media (max-width: 1199px) {
    .fi-em-card-number {
        font-size: 1.8rem;
    }
}
@media (max-width: 991px) {
    .fi-em-title {
        font-size: 2.5rem;
    }
    .fi-em-card-number {
        font-size: 2.2rem;
    }
}
@media (max-width: 767px) {
    .fi-em-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .fi-em-page {
        overflow-x: hidden;
    }
    .fi-em-numbers {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .fi-em-card {
        padding: 25px 20px;
    }
    .fi-em-card-title {
        font-size: 1.1rem;
    }
    .fi-em-card-number {
        font-size: 2rem;
    }
    .fi-em-note-box {
        flex-direction: column;
        text-align: center;
        padding: 25px 20px;
        margin: 0 10px;
    }
    .fi-em-hero-mini-card {
        font-size: 0.9rem;
        padding: 8px 15px;
        margin: 0 10px;
    }
}

/* ==========================================================================
   PAGE: CONTATTI (PREMIUM LAYOUT)
   ========================================================================== */

.fi-contatti-page {
    background-color: #ffffff;
    overflow-x: hidden;
}

.fi-hero-compact {
    padding: 120px 0 60px;
}

.fi-main-contacts-section {
    padding: 20px 0 80px;
    position: relative;
    z-index: 10;
}

.fi-contacts-main-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

@media (min-width: 992px) {
    .fi-contacts-main-layout {
        grid-template-columns: 1.5fr 1fr;
    }
}

/* Premium Card Base */
.fi-premium-card {
    background: #ffffff;
    border: 1px solid rgba(3, 93, 41, 0.1);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 10px 40px rgba(3, 93, 41, 0.05);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.fi-pc-header h2 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--fi-green-dark);
    margin-bottom: 5px;
}

.fi-pc-header p {
    font-size: 1rem;
    color: var(--fi-text-muted);
    margin-bottom: 30px;
}

/* Rows inside Main Card */
.fi-pc-body {
    flex-grow: 1;
}

.fi-contact-row {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid rgba(3, 93, 41, 0.05);
}

.fi-contact-row:last-child {
    margin-bottom: 0;
    border-bottom: none;
}

.fi-cr-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(3, 93, 41, 0.05);
    color: var(--fi-green-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.fi-contact-row:hover .fi-cr-icon {
    background: var(--fi-green-dark);
    color: #ffffff;
    transform: scale(1.05);
}

.fi-cr-icon svg {
    width: 20px;
    height: 20px;
}

.fi-cr-text {
    display: flex;
    flex-direction: column;
}

.fi-cr-text strong {
    font-size: 0.95rem;
    color: var(--fi-green-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
}

.fi-cr-text span {
    font-size: 1.1rem;
    color: var(--fi-text);
    line-height: 1.5;
}

/* Action Buttons (Premium) */
.fi-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.fi-action-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.fi-action-primary {
    background: var(--fi-green-dark);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(3, 93, 41, 0.2);
}

.fi-action-primary:hover {
    background: var(--fi-green-accent);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(3, 93, 41, 0.3);
}

.fi-action-secondary {
    background: rgba(3, 93, 41, 0.05);
    color: var(--fi-green-dark);
}

.fi-action-secondary:hover {
    background: rgba(3, 93, 41, 0.1);
    color: var(--fi-green-dark);
    transform: translateY(-2px);
}

.fi-action-outline {
    background: transparent;
    color: var(--fi-green-dark);
    border-color: rgba(3, 93, 41, 0.2);
}

.fi-action-outline:hover {
    background: rgba(3, 93, 41, 0.05);
    border-color: var(--fi-green-dark);
    transform: translateY(-2px);
}

.fi-pc-actions {
    display: flex;
    gap: 15px;
    margin-top: 30px;
    flex-wrap: wrap;
}

/* Hours Card */
.fi-hours-card {
    background: linear-gradient(145deg, #ffffff, #fdfdfd);
}

.fi-hours-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.fi-hours-list li {
    display: flex;
    justify-content: space-between;
    padding: 15px 0;
    border-bottom: 1px dashed rgba(3, 93, 41, 0.1);
    font-size: 1.05rem;
}

.fi-hours-list li:last-child {
    border-bottom: none;
}

.fi-day {
    font-weight: 600;
    color: var(--fi-green-dark);
}

.fi-time {
    color: var(--fi-text);
}

.fi-time.fi-time-closed {
    color: var(--fi-red, #d9534f); /* O usa un colore appropriato */
    font-weight: 500;
}

.fi-pc-icon-bg {
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 150px;
    height: 150px;
    color: rgba(3, 93, 41, 0.03);
    pointer-events: none;
}

.fi-pc-icon-bg svg {
    width: 100%;
    height: 100%;
}

/* Map Wrapper */
.fi-contact-map-wrapper {
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(3, 93, 41, 0.1);
    box-shadow: 0 10px 40px rgba(3, 93, 41, 0.05);
}

/* RESPONSIVE */
@media (max-width: 767px) {
    .fi-premium-card {
        padding: 30px 20px;
    }
    .fi-pc-actions {
        flex-direction: column;
    }
    .fi-pc-actions .fi-btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

/* ==========================================================================
   PANNELLO "COME POSSIAMO AIUTARTI" — pastiglia in basso a destra
   Spazio nomi fi-aiuto e NON fi-badge: quello e' gia' delle pastiglie
   informative della pagina Contatti.
   ========================================================================== */

.fi-aiuto {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 900;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
    font-family: var(--font-body);
}

/* --- la pastiglia --- */
.fi-aiuto__pastiglia {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    /* 48 di altezza: sopra i 44 minimi di WCAG 2.5.8 anche col dito grosso */
    min-height: 48px;
    padding: 0 20px;
    border-radius: var(--radius-pill);
    background: var(--fi-green-accent);
    color: var(--fi-white);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--shadow-soft);
    transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.fi-aiuto__pastiglia:hover,
.fi-aiuto__pastiglia:focus-visible {
    background: var(--fi-green-dark);
    box-shadow: var(--shadow-hover);
    color: var(--fi-white);
}
/* Il sollevamento e' solo un vezzo: chi ha chiesto meno movimento non lo vede. */
@media (prefers-reduced-motion: no-preference) {
    .fi-aiuto__pastiglia:hover { transform: translateY(-2px); }
}
[data-fi-aiuto-js] .fi-aiuto__pastiglia { cursor: pointer; }
.fi-aiuto__pastiglia-emoji { font-size: 18px; line-height: 1; }

/* --- il pannello --- */
.fi-aiuto__pannello {
    width: min(380px, calc(100vw - 32px));
    max-height: min(620px, calc(100vh - 120px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--fi-white);
    border: 1px solid var(--fi-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-hover);
}
/* `hidden` e' un attributo e vale quanto display:none dell'UA: un display
   esplicito lo batte, quindi va riaffermato o il pannello nasce aperto. */
.fi-aiuto__pannello[hidden] { display: none; }

.fi-aiuto__testa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 16px 16px 20px;
    background: var(--fi-green-light);
    border-bottom: 1px solid var(--fi-border);
}
.fi-aiuto__titolo {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--fi-green-dark);
}
.fi-aiuto__chiudi {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--fi-green-dark);
    cursor: pointer;
}
.fi-aiuto__chiudi:hover { background: rgba(42, 157, 143, .12); }
.fi-aiuto__chiudi svg { width: 18px; height: 18px; }

/* Il corpo scorre, la testa resta: su uno schermo basso con otto voci il
   pannello sarebbe piu' alto della finestra. */
.fi-aiuto__corpo {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px;
}

/* --- l'elenco degli argomenti --- */
.fi-aiuto__elenco { margin: 0; padding: 0; list-style: none; }
.fi-aiuto__elenco[hidden] { display: none; }

.fi-aiuto__voce {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--fi-text-main);
    font-family: inherit;
    font-size: 14.5px;
    line-height: 1.45;
    text-align: left;
    cursor: pointer;
    transition: background-color .15s ease;
}
.fi-aiuto__voce:hover { background: var(--fi-bg-light); }
.fi-aiuto__voce-emoji { flex: 0 0 auto; font-size: 20px; line-height: 1; }
.fi-aiuto__voce-testo { flex: 1 1 auto; }
.fi-aiuto__voce-frec { flex: 0 0 auto; color: var(--fi-green-accent); opacity: .55; }
.fi-aiuto__voce-frec svg { display: block; width: 16px; height: 16px; }
.fi-aiuto__voce:hover .fi-aiuto__voce-frec { opacity: 1; }

/* --- la risposta --- */
.fi-aiuto__risposta { padding: 4px 12px 12px; }
.fi-aiuto__risposta[hidden] { display: none; }

.fi-aiuto__indietro {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 4px;
    border: 0;
    background: transparent;
    color: var(--fi-green-accent);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.fi-aiuto__indietro svg { width: 15px; height: 15px; }
.fi-aiuto__indietro:hover { color: var(--fi-green-dark); }

.fi-aiuto__risposta-titolo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 10px;
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--fi-text-main);
}
.fi-aiuto__risposta-testo {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--fi-text-muted);
}

/* La nota porta i numeri da chiamare subito: deve staccarsi dal resto, non
   sembrare l'ultima riga del paragrafo. */
.fi-aiuto__nota {
    margin: 14px 0 0;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    background: var(--fi-green-light);
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--fi-green-dark);
    font-weight: 500;
}

.fi-aiuto__azioni {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 18px;
}
.fi-aiuto__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 18px;
    border-radius: var(--radius-pill);
    font-size: 14.5px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}
.fi-aiuto__btn--primario {
    background: var(--fi-green-accent);
    color: var(--fi-white);
}
.fi-aiuto__btn--primario:hover,
.fi-aiuto__btn--primario:focus-visible {
    background: var(--fi-green-dark);
    color: var(--fi-white);
}
.fi-aiuto__btn--secondario {
    background: transparent;
    border: 1px solid var(--fi-border);
    color: var(--fi-green-dark);
}
.fi-aiuto__btn--secondario:hover,
.fi-aiuto__btn--secondario:focus-visible {
    background: var(--fi-bg-light);
    color: var(--fi-green-dark);
}

.fi-aiuto :focus-visible {
    outline: 2px solid var(--fi-green-dark);
    outline-offset: 2px;
}

/* Sul telefono la pastiglia perde la scritta e resta il cuore: una pastiglia
   larga in fondo allo schermo coprirebbe il contenuto. */
@media (max-width: 560px) {
    .fi-aiuto { right: 16px; bottom: 16px; }
    .fi-aiuto__pastiglia { padding: 0; width: 52px; min-height: 52px; justify-content: center; border-radius: 50%; }
    .fi-aiuto__pastiglia-testo { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .fi-aiuto__pastiglia-emoji { font-size: 22px; }
    .fi-aiuto__pannello { max-height: calc(100vh - 140px); }
}