/*
Theme Name: TheGem Child
Description: Multi-Purpose Wordpress Theme
Author: Codex Themes.
Theme URI: http://codex-themes.com/thegem/
Author URI: http://codex-themes.com/thegem/
Template: thegem
Version: 1.0
Tags: one-column, two-columns, left-sidebar, right-sidebar, responsive-layout, custom-background, custom-colors, custom-header, custom-menu, featured-images, flexible-header, full-width-template, theme-options, translation-ready, dark, light
License: GNU General Public License
License URI: license.txt
*/
/*
 * CAM2 S.R.L. — Logistica & Trasporti
 * WordPress Child Theme — style.css
 * Tema padre: The Gem 5.12
 *
 * Versione: 1.0
 * Autore: [tuo nome/agenzia]
 * Data: Marzo 2026

/* ============================================================
   1. VARIABILI CSS CUSTOM — PALETTE CAM2
   ============================================================ */

:root {
    --cam2-green:       #96c11f;
    --cam2-green-a80:   #96c11fcc;   /* active */
    --cam2-green-a60:   #96c11f99;   /* hover */
    --cam2-green-dark:  #7aa318;     /* verde più scuro per contrasti */
    --cam2-blue:        #005eab;
    --cam2-blue-dark:   #004d8e;
    --cam2-blue-light:  #1a74c0;
    --cam2-white:       #ffffff;
    --cam2-gray-light:  #ededed;
    --cam2-gray-mid:    #cccccc;
    --cam2-gray-dark:   #4B4B52;
    --cam2-black:       #212529;
    --cam2-text:        #212529;
    --cam2-text-muted:  #6c757d;

    /* Spaziature standard */
    --cam2-section-pad:     80px;
    --cam2-section-pad-sm:  50px;

    /* Border radius */
    --cam2-radius:      4px;
    --cam2-radius-lg:   8px;

    /* Ombra */
    --cam2-shadow:      0 4px 20px rgba(0,0,0,0.10);
    --cam2-shadow-hover:0 8px 30px rgba(0,0,0,0.18);

    /* Transizione */
    --cam2-transition:  all 0.3s ease;
}


/* ============================================================
   2. RESET / BASE
   ============================================================ */

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    color: var(--cam2-text);
    background-color: var(--cam2-white);
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    height: auto;
}

.block-content {
    padding: 10px 0 50px;
}

.block-content:last-of-type {
    padding-bottom: 5px;
}

/* ============================================================
   3. TIPOGRAFIA
   ============================================================ */

h1, h2, h3, h4, h5, h6,
.title-h1, .title-h2, .title-h3,
.title-h4, .title-h5, .title-h6 {
    color: var(--cam2-black);
    font-weight: 700;
    line-height: 1.25;
}

h1, .title-h1 { font-size: 42px; }
h2, .title-h2 { font-size: 32px; }
h3, .title-h3 { font-size: 26px; }
h4, .title-h4 { font-size: 22px; }
h5, .title-h5 { font-size: 18px; }
h6, .title-h6 { font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; }

/* Accento verde sulle parole in evidenza (classe "light" usata nel demo) */
.light {
    font-weight: 300;
}

/* Titoli con span colorato (pattern: verde + bianco/scuro) */
.cam2-title-accent {
    color: var(--cam2-green);
}

.cam2-title-main {
    color: var(--cam2-blue);
}

/* Separatore decorativo sotto titolo sezione */
.cam2-section-title {
    position: relative;
    display: inline-block;
    margin-bottom: 20px;
}

.cam2-section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: var(--cam2-green);
    margin: 14px auto 0;
}

.cam2-section-title.align-left::after {
    margin-left: 0;
}


/* ============================================================
   4. HEADER & NAVIGAZIONE
   ============================================================ */

/* Header principale */
#site-header,
.site-header,
header.header {
    background-color: var(--cam2-white) !important;
    border-bottom: 2px solid var(--cam2-gray-light);
    transition: var(--cam2-transition);
}

/* Header sticky/scrollato */
#site-header.fixed-header,
.site-header.scrolled,
header.header.fixed {
    background-color: var(--cam2-white) !important;
    box-shadow: 0 2px 15px rgba(0,0,0,0.12);
}

/* Logo header */
.site-logo img,
.header-logo img,
#site-header .logo img {
    max-height: 70px;
    width: auto;
}

/* Navigazione principale — voci */
#site-navigation a,
.main-navigation a,
.nav-primary a,
.gem-main-menu > li > a {
    color: var(--cam2-black) !important;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: var(--cam2-transition);
}

#site-navigation a:hover,
.main-navigation a:hover,
.gem-main-menu > li > a:hover,
.gem-main-menu > li.current-menu-item > a {
    color: var(--cam2-green) !important;
}

/* Sottolineatura animata voci menu */
.gem-main-menu > li > a {
    position: relative;
}

.gem-main-menu > li > a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--cam2-green);
    transition: width 0.3s ease;
}

.gem-main-menu > li > a:hover::after,
.gem-main-menu > li.current-menu-item > a::after {
    width: 100%;
}

/* Dropdown menu */
.gem-main-menu .sub-menu,
#site-navigation .sub-menu {
    background-color: var(--cam2-white) !important;
    border-top: 3px solid var(--cam2-green) !important;
    box-shadow: var(--cam2-shadow);
}

.gem-main-menu .sub-menu li a {
    color: var(--cam2-black) !important;
    font-size: 13px;
}

.gem-main-menu .sub-menu li a:hover {
    color: var(--cam2-green) !important;
    background-color: var(--cam2-gray-light) !important;
}

/* Voce menu attiva */
.gem-main-menu > li.current-menu-item > a,
.gem-main-menu > li.current-menu-ancestor > a {
    color: var(--cam2-green) !important;
}

/* Mobile burger */
.mobile-menu-button span,
.hamburger-bar {
    background-color: var(--cam2-blue) !important;
}


/* ============================================================
   5. FOOTER
   ============================================================ */

footer,
#footer,
.site-footer,
.footer-default {
    background-color: var(--cam2-gray-dark) !important;
    color: var(--cam2-gray-light);
}

/* Logo footer */
.footer-logo img,
#footer .logo img {
    max-height: 60px;
    width: auto;
    opacity: 0.95;
}

/* Titoli widget footer */
footer .widget-title,
#footer .widget-title,
.footer-default .widgettitle {
    color: var(--cam2-white) !important;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--cam2-green);
}

/* Testi footer */
footer p,
footer li,
footer span,
#footer p,
#footer li {
    color: var(--cam2-gray-light) !important;
    font-size: 14px;
    line-height: 1.7;
}

/* Link footer */
footer a,
#footer a {
    color: var(--cam2-gray-light) !important;
    transition: var(--cam2-transition);
    text-decoration: none;
}

footer a:hover,
#footer a:hover {
    color: var(--cam2-green) !important;
}

/* Bottom bar / copyright */
.footer-bottom,
#footer-bottom,
.copyright-area {
    background-color: #3a3a40 !important;
    border-top: 1px solid rgba(255,255,255,0.08);
    color: var(--cam2-text-muted) !important;
    font-size: 13px;
    padding: 16px 0;
}

.footer-bottom a,
.copyright-area a {
    color: var(--cam2-green) !important;
}

/* Icone social footer */
footer .gem-icon,
#footer .gem-icon,
footer .social-icon {
    background-color: rgba(255,255,255,0.1) !important;
    color: var(--cam2-white) !important;
    transition: var(--cam2-transition);
}

footer .gem-icon:hover,
#footer .gem-icon:hover,
footer .social-icon:hover {
    background-color: var(--cam2-green) !important;
    color: var(--cam2-white) !important;
}

/* ============================================================
   FIX FOOTER — Tablet (769px–1199px)
   
   STRUTTURA FOOTER:
   Riga principale:
   - Logo:      .vc_col-sm-5 + .vc_col-md-4
   - Indirizzo: .vc_col-sm-3 + .vc_col-md-4 + .widget-column1
   - Dati:      .vc_col-sm-4 + .vc_col-md-4 + .widget-column2
   
   Bottom bar (vc_column_inner):
   - Copyright: .vc_col-sm-2-5
   - Menu:      .vc_col-sm-2-5 (secondo)
   - Social:    .vc_col-sm-1-5
   
   NOTA: il breakpoint TheGem per il footer è 1199px
   (dichiarato nel custom_css_code del footer stesso).
   ============================================================ */

@media (min-width: 769px) and (max-width: 1199px) {

    /* ================================================
       RIGA PRINCIPALE — Layout 2 righe:
       Riga 1: logo a piena larghezza
       Riga 2: indirizzo (50%) + dati (50%)
       ================================================ */

    /* Logo: riga intera */
    .vc_col-md-4.vc_col-sm-5 {
        width: 100% !important;
        float: none !important;
        padding-bottom: 24px !important;
    }

    /* Indirizzo: metà larghezza */
    .widget-column1.vc_col-md-4 {
        width: 50% !important;
        float: left !important;
    }

    /* Dati aziendali: metà larghezza */
    .widget-column2.vc_col-md-4 {
        width: 50% !important;
        float: left !important;
        clear: none !important;
    }

    /* Padding colonne info: ridotto per respirare */
    .widget-column1 > .vc_column-inner,
    .widget-column2 > .vc_column-inner {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* Testo info: leggibile senza wrapping */
    .widget-column1 .gem-icon-with-text-text p,
    .widget-column2 .gem-icon-with-text-text p {
        font-size: 13px !important;
        line-height: 1.6 !important;
        margin-bottom: 10px !important;
    }

    /* Clearfix: forza riga 2 a non collassare */
    .widget-column1.vc_col-md-4::before,
    .widget-column2.vc_col-md-4::after {
        content: '';
        display: table;
        clear: both;
    }


    /* ================================================
       BOTTOM BAR — Layout 2 righe:
       Riga 1: copyright (50%) + menu (50%)
       Riga 2: social (allineato a sinistra)
       ================================================ */

    /* Copyright: metà larghezza */
    .vc_row_inner .vc_col-sm-2-5:first-child {
        width: 50% !important;
        float: left !important;
    }

    /* Menu: metà larghezza */
    .vc_row_inner .vc_col-sm-2-5:nth-child(2) {
        width: 50% !important;
        float: left !important;
    }

    /* Menu: allinea a sinistra come il copyright */
    .vc_row_inner .vc_col-sm-2-5:nth-child(2) .gem-list > ul {
        text-align: left !important;
    }

    /* Social: riga intera sotto */
    .vc_row_inner .vc_col-sm-1-5 {
        width: 100% !important;
        float: none !important;
        clear: both !important;
        padding-top: 12px !important;
    }

    /* Social: allineato a sinistra su tablet */
    .vc_row_inner .vc_col-sm-1-5 .socials-list {
        text-align: left !important;
    }
}

/* ============================================================
   6. BOTTONI & CTA
   ============================================================ */

/* Bottone primario — azzurro pieno */
.gem-button,
.vc_btn3,
.wp-block-button__link,
a.gem-button {
    background-color: var(--cam2-blue) !important;
    color: var(--cam2-white) !important;
    border-color: var(--cam2-blue) !important;
    border-radius: var(--cam2-radius) !important;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: var(--cam2-transition) !important;
    padding: 12px 28px !important;
}

.gem-button:hover,
.vc_btn3:hover,
a.gem-button:hover {
    background-color: var(--cam2-green) !important;
    border-color: var(--cam2-green) !important;
    color: var(--cam2-white) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(150, 193, 31, 0.4);
}

/* Bottone secondario — verde pieno */
.gem-button.cam2-btn-green,
a.gem-button.cam2-btn-green {
    background-color: var(--cam2-green) !important;
    border-color: var(--cam2-green) !important;
    color: var(--cam2-white) !important;
}

.gem-button.cam2-btn-green:hover,
a.gem-button.cam2-btn-green:hover {
    background-color: var(--cam2-green-dark) !important;
    border-color: var(--cam2-green-dark) !important;
}

/* Bottone outline — bordo verde, sfondo trasparente */
.gem-button.cam2-btn-outline,
a.gem-button.cam2-btn-outline {
    background-color: transparent !important;
    border: 2px solid var(--cam2-green) !important;
    color: var(--cam2-white) !important;
}

.gem-button.cam2-btn-outline:hover,
a.gem-button.cam2-btn-outline:hover {
    background-color: var(--cam2-green) !important;
    color: var(--cam2-white) !important;
}

/* Bottone outline scuro (su sfondi chiari) */
.gem-button.cam2-btn-outline-dark,
a.gem-button.cam2-btn-outline-dark {
    background-color: transparent !important;
    border: 2px solid var(--cam2-blue) !important;
    color: var(--cam2-blue) !important;
}

.gem-button.cam2-btn-outline-dark:hover,
a.gem-button.cam2-btn-outline-dark:hover {
    background-color: var(--cam2-blue) !important;
    color: var(--cam2-white) !important;
}

/* Freccia link testuale */
a.cam2-link-arrow {
    color: var(--cam2-green);
    font-weight: 700;
    font-size: 18px;
    text-decoration: none;
    letter-spacing: 0.04em;
    transition: var(--cam2-transition);
}

a.cam2-link-arrow::after {
    content: ' →';
    transition: var(--cam2-transition);
}

a.cam2-link-arrow:hover {
    color: var(--cam2-blue);
    letter-spacing: 0.06em;
}


/* ============================================================
   7. LINK
   ============================================================ */

a {
    color: var(--cam2-blue);
    text-decoration: none;
    transition: var(--cam2-transition);
}

a:hover {
    color: var(--cam2-green);
    text-decoration: none;
}

a:focus {
    outline: none;
}

a:focus-visible {
    outline: 2px dashed var(--cam2-green);
    outline-offset: 3px;
}


/* ============================================================
   8. WPBAKERY — ROW & COLUMN
   ============================================================ */

/* Rimuove margini indesiderati sui vc_row */
.vc_row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Sezioni con sfondo grigio chiaro */
.vc_row.cam2-bg-light {
    background-color: var(--cam2-gray-light) !important;
}

/* Sezioni con sfondo azzurro */
.vc_row.cam2-bg-blue {
    background-color: var(--cam2-blue) !important;
}

/* Sezioni con sfondo verde */
.vc_row.cam2-bg-green {
    background-color: var(--cam2-green) !important;
}

/* Sezioni con sfondo scuro (footer-like) */
.vc_row.cam2-bg-dark {
    background-color: var(--cam2-gray-dark) !important;
}

/* Padding standard sezioni */
.vc_row.cam2-section {
    padding-top: var(--cam2-section-pad);
    padding-bottom: var(--cam2-section-pad);
}

.vc_row.cam2-section-sm {
    padding-top: var(--cam2-section-pad-sm);
    padding-bottom: var(--cam2-section-pad-sm);
}

/* ============================================================
   FIX GLOBALE — Colonne WPBakery con background-image su mobile
   
   PROBLEMA REALE: WPBakery genera il background-image via classe
   dinamica .vc_custom_XXXXXXXXXX sul vc_column_container.
   Su mobile le colonne si stackano e perdono l'altezza derivata
   da equal_height. Le colonne senza contenuto collassano a 0.
   
   APPROCCIO: min-height su TUTTE le vc_column_container in
   contesti equal_height su mobile. Zero impatto su desktop
   perché la regola è dentro @media max-width:768px.
   ============================================================ */

@media (max-width: 768px) {

    /* Regola universale: tutti i vc_row con equal_height attivo.
       TheGem aggiunge la classe .vc_row-o-equal-height al vc_row
       quando equal_height="yes" è impostato nel builder. */
    .vc_row-o-equal-height .vc_column_container > .vc_column-inner {
        min-height: 280px !important;
    }

    /* Fallback aggiuntivo: colonne mezze larghezza (1/2) con
       background impostato, indipendentemente da equal_height.
       Copre i casi dove equal_height non è stato attivato
       ma la colonna ha comunque solo background e nessun testo. */
    .vc_col-sm-6.vc_column_container > .vc_column-inner {
        min-height: 280px;
        /* Senza !important: vale solo se non ci sono altre regole
           più specifiche. Le colonne con testo avranno altezza
           naturale maggiore e questa non le disturba. */
    }
}

/* ============================================================
   9. THE GEM — COMPONENTI
   ============================================================ */

/* ---- 9a. gem_icon / gem_icon_with_text ---- */

.gem-icon {
    background-color: var(--cam2-blue) !important;
    color: var(--cam2-white) !important;
    transition: var(--cam2-transition) !important;
}

.gem-icon:hover {
    background-color: var(--cam2-green) !important;
    transform: scale(1.08);
}

/* Icone su sfondo scuro */
.cam2-bg-blue .gem-icon,
.cam2-bg-dark .gem-icon {
    background-color: rgba(255,255,255,0.12) !important;
}

.cam2-bg-blue .gem-icon:hover,
.cam2-bg-dark .gem-icon:hover {
    background-color: var(--cam2-green) !important;
}

/* ---- 9b. gem_counter / gem_counter_box ---- */

.gem-counter-box .gem-counter-number,
.gem-counter .counter-value {
    color: var(--cam2-green) !important;
    font-weight: 800;
    font-size: 52px !important;
    line-height: 1;
}

.gem-counter-box .gem-counter-text,
.gem-counter .counter-label {
    color: var(--cam2-white) !important;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 8px;
}

/* Icone nei counter */
.gem-counter .gem-icon {
    background-color: rgba(255,255,255,0.15) !important;
    color: var(--cam2-green) !important;
    margin-bottom: 16px;
}

/* ---- 9c. gem_quickfinder ---- */

.quickfinder {
    padding: 10px 0 !important; 
}

.gem-quickfinder-item {
    border-color: var(--cam2-gray-mid) !important;
    background-color: var(--cam2-white) !important;
    transition: var(--cam2-transition) !important;
    border-radius: var(--cam2-radius-lg) !important;
}

.gem-quickfinder-item:hover {
    background-color: var(--cam2-blue) !important;
    border-color: var(--cam2-blue) !important;
    transform: translateY(-6px);
    box-shadow: var(--cam2-shadow-hover);
}

.gem-quickfinder-item .gem-quickfinder-item-title {
    color: var(--cam2-blue) !important;
    font-weight: 700;
}

.gem-quickfinder-item:hover .gem-quickfinder-item-title {
    color: var(--cam2-white) !important;
}

.gem-quickfinder-item .gem-quickfinder-item-description {
    color: var(--cam2-text-muted) !important;
    font-size: 14px;
}

.gem-quickfinder-item:hover .gem-quickfinder-item-description {
    color: rgba(255,255,255,0.85) !important;
}

/* Icona quickfinder */
.gem-quickfinder-item .gem-icon {
    background-color: var(--cam2-gray-light) !important;
    color: var(--cam2-blue) !important;
}

.gem-quickfinder-item:hover .gem-icon {
    background-color: var(--cam2-green) !important;
    color: var(--cam2-white) !important;
}

/* ---- 9d. gem_fullwidth ---- */

.gem-fullwidth-content {
    position: relative;
    z-index: 1;
}

/* ---- 9e. gem_divider ---- */

/* Override colore linea divisore quando usato come separatore */
.gem-divider-line {
    border-color: var(--cam2-green) !important;
}

/* ---- 9f. gem_button (The Gem native) ---- */

.gem-button-container .gem-button {
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Override colore accent The Gem (sostituisce il rosso default del tema) */
.accent-primary-color,
.accent-color {
    color: var(--cam2-green) !important;
}

.accent-primary-background,
.accent-background {
    background-color: var(--cam2-green) !important;
}

.accent-primary-border {
    border-color: var(--cam2-green) !important;
}

/* Colore "secondary accent" (usato in alcuni componenti The Gem) */
.accent-secondary-color {
    color: var(--cam2-blue) !important;
}

.accent-secondary-background {
    background-color: var(--cam2-blue) !important;
}


/* ============================================================
   10. SEZIONI HOME CUSTOM
   ============================================================ */

/* ---- 10a. HERO ---- */

.cam2-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--cam2-blue);
    overflow: hidden;
}

/* Overlay scuro su video/immagine di sfondo */
.cam2-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(0, 46, 85, 0.75) 0%,
        rgba(0, 94, 171, 0.55) 60%,
        rgba(150, 193, 31, 0.25) 100%
    );
    z-index: 1;
}

.cam2-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 40px 20px;
    max-width: 820px;
    margin: 0 auto;
}

.cam2-hero-content h1,
.cam2-hero-title {
    color: var(--cam2-white) !important;
    font-size: 52px;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 20px;
    text-shadow: 0 2px 20px rgba(0,0,0,0.3);
    letter-spacing: -0.01em;
}

.cam2-hero-subtitle {
    color: rgba(255,255,255,0.88) !important;
    font-size: 18px;
    font-weight: 300;
    max-width: 600px;
    margin: 0 auto 36px;
    line-height: 1.6;
}

/* Accento verde nel titolo hero */
.cam2-hero-title .cam2-accent {
    color: var(--cam2-green) !important;
}

/* Area CTA hero */
.cam2-hero-cta {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 10px;
}

/* Scroll indicator */
.cam2-scroll-hint {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    color: rgba(255,255,255,0.6);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
    animation: cam2bounce 2s infinite;
}

.cam2-scroll-hint::after {
    content: '';
    display: block;
    width: 1px;
    height: 40px;
    background: rgba(255,255,255,0.4);
    margin: 8px auto 0;
}

@keyframes cam2bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%       { transform: translateX(-50%) translateY(6px); }
}


/* ---- 10b. CHI SIAMO (intro) ---- */

.cam2-about-section {
    padding: var(--cam2-section-pad) 0;
    background-color: var(--cam2-white);
}

.cam2-about-text p {
    font-size: 16px;
    color: var(--cam2-text);
    line-height: 1.8;
    margin-bottom: 20px;
}

/* Bordo sinistro decorativo sul testo about */
.cam2-about-text {
    border-left: 4px solid var(--cam2-green);
    padding-left: 28px;
}

/* Immagine about con overlay colorato */
.cam2-about-image-wrap {
    position: relative;
    overflow: hidden;
    border-radius: var(--cam2-radius-lg);
}

.cam2-about-image-wrap::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--cam2-blue), var(--cam2-green));
}


/* ---- 10c. SERVIZI (card) ---- */

.cam2-services-section {
    padding: var(--cam2-section-pad) 0;
    background-color: var(--cam2-gray-light);
}

/* Card servizio */
.cam2-service-card {
    background: var(--cam2-white);
    border-radius: var(--cam2-radius-lg);
    padding: 36px 28px;
    text-align: center;
    box-shadow: var(--cam2-shadow);
    transition: var(--cam2-transition);
    height: 100%;
    border-bottom: 3px solid transparent;
}

.cam2-service-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--cam2-shadow-hover);
    border-bottom-color: var(--cam2-green);
}

.cam2-service-card .cam2-icon-wrap {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--cam2-gray-light);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 22px;
    transition: var(--cam2-transition);
    font-size: 30px;
    color: var(--cam2-blue);
}

.cam2-service-card:hover .cam2-icon-wrap {
    background: var(--cam2-green);
    color: var(--cam2-white);
}

.cam2-service-card h4,
.cam2-service-card .cam2-card-title {
    color: var(--cam2-blue) !important;
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 12px;
}

.cam2-service-card p,
.cam2-service-card .cam2-card-text {
    color: var(--cam2-text-muted);
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 0;
}


/* ---- 10d. NUMERI / COUNTER ---- */

.cam2-numbers-section {
    padding: var(--cam2-section-pad) 0;
    background-color: var(--cam2-blue);
    position: relative;
    overflow: hidden;
}

/* Decorazione geometrica di sfondo */
.cam2-numbers-section::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(150, 193, 31, 0.08);
    pointer-events: none;
}

.cam2-numbers-section::after {
    content: '';
    position: absolute;
    bottom: -80px;
    left: -40px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(255,255,255,0.04);
    pointer-events: none;
}

/* Singolo counter item */
.cam2-counter-item {
    text-align: center;
    padding: 20px;
    position: relative;
    z-index: 1;
}

.cam2-counter-item + .cam2-counter-item {
    border-left: 1px solid rgba(255,255,255,0.12);
}

.cam2-counter-number {
    display: block;
    font-size: 56px;
    font-weight: 800;
    color: var(--cam2-green) !important;
    line-height: 1;
    margin-bottom: 8px;
}

.cam2-counter-suffix {
    font-size: 28px;
    font-weight: 700;
    color: var(--cam2-green);
    vertical-align: top;
    margin-top: 10px;
    display: inline-block;
}

.cam2-counter-label {
    display: block;
    color: rgba(255,255,255,0.75) !important;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-top: 6px;
}


/* ---- 10e. SOSTENIBILITÀ / GNL ---- */

.cam2-sustainability-section {
    padding: var(--cam2-section-pad) 0;
    background-color: var(--cam2-white);
}

/* Badge GNL */
.cam2-gnl-badge {
    display: inline-block;
    background: var(--cam2-green);
    color: var(--cam2-white);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 16px;
}

/* Lista punti sostenibilità */
.cam2-sustain-list {
    list-style: none;
    padding: 0;
    margin: 24px 0;
}

.cam2-sustain-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--cam2-gray-light);
    font-size: 15px;
    color: var(--cam2-text);
}

.cam2-sustain-list li::before {
    content: '✓';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--cam2-green);
    color: var(--cam2-white);
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
}


/* ---- 10f. CTA CONTATTI (sezione finale) ---- */

.cam2-cta-section {
    padding: var(--cam2-section-pad) 0;
    background-color: var(--cam2-gray-dark);
    position: relative;
    overflow: hidden;
}

.cam2-cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--cam2-blue), var(--cam2-green));
}

.cam2-cta-section h2,
.cam2-cta-section .cam2-cta-title {
    color: var(--cam2-white) !important;
    font-size: 36px;
    margin-bottom: 16px;
}

.cam2-cta-section p,
.cam2-cta-section .cam2-cta-text {
    color: var(--cam2-gray-light) !important;
    font-size: 16px;
    max-width: 580px;
}

/* Info contatto rapida */
.cam2-contact-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 28px;
}

.cam2-contact-info-item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--cam2-gray-light);
    font-size: 15px;
}

.cam2-contact-info-item span.icon {
    font-size: 18px;
    color: var(--cam2-green);
    min-width: 24px;
}


/* ============================================================
   11. FORM CONTATTI (Contact Form 7)
   ============================================================ */

/* Campi input */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea,
.wpcf7-form select {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--cam2-gray-mid);
    border-radius: var(--cam2-radius);
    font-size: 14px;
    color: var(--cam2-text);
    background-color: var(--cam2-white);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
    outline: none;
    display: block;
    margin-bottom: 14px;
}

.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
    border-color: var(--cam2-blue);
    box-shadow: 0 0 0 3px rgba(0, 94, 171, 0.12);
}

/* Select arrow custom */
.wpcf7-form select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23005eab' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
    cursor: pointer;
}

/* Spaziatura span wrapper CF7 */
.wpcf7-form .wpcf7-form-control-wrap {
    display: block;
    margin-bottom: 14px;
}
.wpcf7-form .wpcf7-form-control-wrap input,
.wpcf7-form .wpcf7-form-control-wrap textarea,
.wpcf7-form .wpcf7-form-control-wrap select {
    margin-bottom: 0;
}

/* Checkbox privacy */
.wpcf7-form .wpcf7-acceptance {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 16px 0 20px;
    font-size: 13px;
    color: var(--cam2-text-muted);
    line-height: 1.5;
}
.wpcf7-form .wpcf7-acceptance input[type="checkbox"] {
    width: 16px;
    height: 16px;
    min-width: 16px;
    margin: 2px 0 0 0;
    padding: 0;
    accent-color: var(--cam2-green);
    cursor: pointer;
    flex-shrink: 0;
}
.wpcf7-form .wpcf7-acceptance a {
    color: var(--cam2-green);
    text-decoration: underline;
}

/* Versione su sfondo scuro */
.gem-contact-form-white .wpcf7-form input[type="text"],
.gem-contact-form-white .wpcf7-form input[type="email"],
.gem-contact-form-white .wpcf7-form input[type="tel"],
.gem-contact-form-white .wpcf7-form textarea,
.gem-contact-form-white .wpcf7-form select {
    background-color: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.2);
    color: var(--cam2-white);
}

.gem-contact-form-white .wpcf7-form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ffffff' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
.gem-contact-form-white .wpcf7-form select option {
    background-color: var(--cam2-blue);
    color: var(--cam2-white);
}

.gem-contact-form-white .wpcf7-form input::placeholder,
.gem-contact-form-white .wpcf7-form textarea::placeholder {
    color: rgba(255,255,255,0.45);
}

.gem-contact-form-white .wpcf7-form input:focus,
.gem-contact-form-white .wpcf7-form textarea:focus,
.gem-contact-form-white .wpcf7-form select:focus {
    border-color: var(--cam2-green);
    box-shadow: 0 0 0 3px rgba(150, 193, 31, 0.2);
}

.gem-contact-form-white .wpcf7-acceptance {
    color: rgba(255,255,255,0.70);
}
.gem-contact-form-white .wpcf7-acceptance a {
    color: var(--cam2-green);
}

/* Bottone submit CF7 */
.wpcf7-form input[type="submit"],
.wpcf7-submit {
    background-color: var(--cam2-green) !important;
    color: var(--cam2-white) !important;
    border: none !important;
    padding: 0 32px !important;
    height: 48px;
    line-height: 48px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 13px;
    border-radius: var(--cam2-radius) !important;
    cursor: pointer;
    transition: var(--cam2-transition) !important;
    width: 100%;
    margin-top: 8px;
    display: block;
    text-align: center;
    vertical-align: middle;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
}

.wpcf7-form input[type="submit"]:hover,
.wpcf7-submit:hover {
    background-color: var(--cam2-green-dark) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(150, 193, 31, 0.4);
}

/* Messaggi risposta CF7 */
.wpcf7-response-output {
    border-radius: var(--cam2-radius);
    padding: 12px 16px;
    margin-top: 16px;
    font-size: 14px;
}

.wpcf7-mail-sent-ok {
    background-color: rgba(150, 193, 31, 0.12);
    border: 1px solid var(--cam2-green) !important;
    color: var(--cam2-green-dark);
}

.wpcf7-mail-sent-ng,
.wpcf7-spam-blocked {
    background-color: rgba(220, 53, 69, 0.08);
    border: 1px solid #dc3545 !important;
    color: #dc3545;
}

/* Errori validazione */
.wpcf7-not-valid-tip {
    color: #dc3545;
    font-size: 12px;
    margin-top: 4px;
}

.wpcf7-not-valid {
    border-color: #dc3545 !important;
}


/* ============================================================
   12. CLASSI UTILITY
   ============================================================ */

/* Testi colorati */
.text-cam2-green  { color: var(--cam2-green) !important; }
.text-cam2-blue   { color: var(--cam2-blue) !important; }
.text-cam2-white  { color: var(--cam2-white) !important; }
.text-cam2-dark   { color: var(--cam2-black) !important; }
.text-cam2-muted  { color: var(--cam2-text-muted) !important; }

/* Sfondi */
.bg-cam2-green  { background-color: var(--cam2-green) !important; }
.bg-cam2-blue   { background-color: var(--cam2-blue) !important; }
.bg-cam2-light  { background-color: var(--cam2-gray-light) !important; }
.bg-cam2-dark   { background-color: var(--cam2-gray-dark) !important; }
.bg-cam2-white  { background-color: var(--cam2-white) !important; }

/* Hover card generico */
.cam2-hover-lift {
    transition: var(--cam2-transition);
}
.cam2-hover-lift:hover {
    transform: translateY(-6px);
    box-shadow: var(--cam2-shadow-hover);
}

/* Linea decorativa verde */
.cam2-underline-green {
    border-bottom: 3px solid var(--cam2-green);
    padding-bottom: 8px;
    display: inline-block;
}

/* Separatore orizzontale colorato */
.cam2-divider {
    border: none;
    height: 3px;
    background: linear-gradient(90deg, var(--cam2-blue), var(--cam2-green));
    margin: 40px 0;
    border-radius: 2px;
}

/* Sezione con overlap (come hero → prima sezione) */
.cam2-overlap-top {
    margin-top: -60px;
    position: relative;
    z-index: 2;
}

/* Box highlight */
.cam2-highlight-box {
    border-left: 4px solid var(--cam2-green);
    background: rgba(150, 193, 31, 0.06);
    padding: 20px 24px;
    border-radius: 0 var(--cam2-radius) var(--cam2-radius) 0;
    margin: 20px 0;
}

/* Nascondere elementi su certi breakpoint */
.cam2-hide-mobile  { display: block; }
.cam2-show-mobile  { display: none; }

/* ============================================================
   13. RESPONSIVE — TABLET & MOBILE
   ============================================================ */

/* --- Tablet (max 1024px) --- */
@media (max-width: 1024px) {

    h1, .title-h1           { font-size: 34px; }
    h2, .title-h2           { font-size: 26px; }
    .cam2-hero-title        { font-size: 40px; }

    :root {
        --cam2-section-pad: 60px;
    }

    .cam2-counter-item + .cam2-counter-item {
        border-left: none;
        border-top: 1px solid rgba(255,255,255,0.12);
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
 
    /* Ogni card occupa metà larghezza → griglia 2×2 */
    .cam2-servizi-grid .vc_col-sm-3 {
        width: 50% !important;
        float: left !important;
    }
 
    /* Padding laterale leggermente aumentato per respirare */
    .cam2-servizi-grid .vc_col-sm-3 > .vc_column-inner {
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-bottom: 24px !important;
    }
 
    /* Le card: altezza libera su tablet (non forziamo equal_height
       su 2 colonne perché le righe sono indipendenti) */
    .cam2-servizi-grid .cam2-card {
        min-height: unset;
        height: 100%;
    }
}

/* --- Mobile (max 768px) --- */
@media (max-width: 768px) {

    h1, .title-h1           { font-size: 28px; }
    h2, .title-h2           { font-size: 22px; }
    .cam2-hero-title        { font-size: 30px !important; }
    .cam2-hero-subtitle     { font-size: 15px; }

    :root {
        --cam2-section-pad:    40px;
        --cam2-section-pad-sm: 30px;
    }

    .cam2-hero {
        min-height: 85vh;
    }

    .cam2-hero-cta {
        flex-direction: column;
        align-items: center;
    }

    .cam2-hero-cta .gem-button {
        width: 100%;
        max-width: 280px;
        text-align: center;
    }

    .cam2-about-text {
        border-left: none;
        border-top: 4px solid var(--cam2-green);
        padding-left: 0;
        padding-top: 20px;
        margin-top: 30px;
    }

    .cam2-service-card {
        padding: 28px 20px;
    }

    /* Card servizi: altezza libera in colonna su mobile */
    .cam2-card {
        min-height: unset;
    }

    .cam2-counter-number {
        font-size: 42px;
    }

    .cam2-cta-section h2 {
        font-size: 26px;
    }

    .cam2-hide-mobile  { display: none !important; }
    .cam2-show-mobile  { display: block !important; }

    /* Stack colonne WPBakery su mobile */
    .vc_col-sm-6,
    .vc_col-sm-4,
    .vc_col-sm-3 {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

@media (max-width: 768px) {
 
    h1, h2, h3, h4, h5, h6,
    .title-h1, .title-h2, .title-h3,
    .title-h4, .title-h5, .title-h6 {
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
    }
 
    h1 { font-size: 28px !important; }
    h2 { font-size: 24px !important; }
    h3 { font-size: 20px !important; }
}

@media (max-width: 768px) {
 
    .styled-subtitle {
        font-size: 24px !important;
        line-height: 1.3 !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }
}

@media (max-width: 768px) {
 
    /* Tutte le colonne WPBakery: padding orizzontale massimo 20px */
    .vc_column_container > .vc_column-inner {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* --- Mobile piccolo (max 480px) --- */
@media (max-width: 480px) {

    .cam2-hero-title  { font-size: 26px !important; }
    .cam2-hero        { min-height: 75vh; }

    .gem-button,
    a.gem-button {
        padding: 11px 20px !important;
        font-size: 12px !important;
    }
}

/* ============================================================
   14. COMPONENTI HOME — CLASSI DEDICATE
       Tutte le classi usate nel codice WPBakery v3.
       Selettori puliti, nessun [style*="..."] fragile.
   ============================================================ */

/* ---- Bottoni cam2-btn ---- */

.cam2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 36px;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 4px;
    text-decoration: none;
    line-height: 1;
    border: 2px solid transparent;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease,
                color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

/* Verde pieno */
.cam2-btn--green {
    background-color: #96c11f;
    color: #ffffff !important;
    border-color: #96c11f;
}
.cam2-btn--green:hover {
    background-color: #7aa318;
    border-color: #7aa318;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(150, 193, 31, 0.45);
}

/* Blu pieno */
.cam2-btn--blue {
    background-color: #005eab;
    color: #ffffff !important;
    border-color: #005eab;
}
.cam2-btn--blue:hover {
    background-color: #004d8e;
    border-color: #004d8e;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 94, 171, 0.40);
}

/* Outline bianco (su sfondi scuri/foto) */
.cam2-btn--outline-white {
    background-color: transparent;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.70);
}
.cam2-btn--outline-white:hover {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: #ffffff;
    color: #ffffff !important;
    transform: translateY(-2px);
}

/* ---- Link freccia ---- */

.cam2-link-arrow {
    color: #96c11f !important;
    font-weight: 700;
    font-size: 18px;
    text-decoration: none !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    transition: color 0.25s ease, letter-spacing 0.25s ease;
    display: inline-block;
}
.cam2-link-arrow:hover {
    color: #005eab !important;
    letter-spacing: 0.10em;
}

/* ---- Card servizi ---- */

.cam2-card {
    background: #ffffff;
    border-radius: 8px;
    padding: 40px 28px 36px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
    border-bottom: 3px solid transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    min-height: 280px; /* altezza minima uniforme su desktop */
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-bottom-color 0.3s ease;
}
.cam2-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.13);
    border-bottom-color: #96c11f;
}

.cam2-card__icon {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background-color: #f0f4f8;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 36px 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    flex-shrink: 0;
    transition: background-color 0.3s ease;
}
.cam2-card:hover .cam2-card__icon {
    background-color: #96c11f;
}

/* Icona per ogni card — usa classi modificatrici */
.cam2-card__icon--truck {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 24 24' fill='none' stroke='%23005eab' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='3' width='15' height='13' rx='1'/%3E%3Cpath d='M16 8h4l3 3v5h-7V8z'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'/%3E%3C/svg%3E");
}
.cam2-card:hover .cam2-card__icon--truck {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='3' width='15' height='13' rx='1'/%3E%3Cpath d='M16 8h4l3 3v5h-7V8z'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'/%3E%3C/svg%3E");
}

.cam2-card__icon--layers {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 24 24' fill='none' stroke='%23005eab' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2L2 7l10 5 10-5-10-5z'/%3E%3Cpath d='M2 17l10 5 10-5'/%3E%3Cpath d='M2 12l10 5 10-5'/%3E%3C/svg%3E");
}
.cam2-card:hover .cam2-card__icon--layers {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2L2 7l10 5 10-5-10-5z'/%3E%3Cpath d='M2 17l10 5 10-5'/%3E%3Cpath d='M2 12l10 5 10-5'/%3E%3C/svg%3E");
}

.cam2-card__icon--warehouse {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 24 24' fill='none' stroke='%23005eab' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E");
}
.cam2-card:hover .cam2-card__icon--warehouse {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E");
}

.cam2-card__icon--wrench {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 24 24' fill='none' stroke='%23005eab' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.77-3.77a6 6 0 01-7.94 7.94l-6.91 6.91a2.12 2.12 0 01-3-3l6.91-6.91a6 6 0 017.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E");
}
.cam2-card:hover .cam2-card__icon--wrench {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.77-3.77a6 6 0 01-7.94 7.94l-6.91 6.91a2.12 2.12 0 01-3-3l6.91-6.91a6 6 0 017.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E");
}

.cam2-card__title {
    color: #005eab !important;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 14px;
    line-height: 1.3;
}
.cam2-card__text {
    color: #6c757d;
    font-size: 14px;
    line-height: 1.75;
    margin: 0;
    flex-grow: 1;
}

/* ---- Statistiche / numeri ---- */

.cam2-stat {
    text-align: center;
    padding: 20px 16px;
}
.cam2-stat--sep {
    border-left: 1px solid rgba(255, 255, 255, 0.10);
}
.cam2-stat__number {
    display: block;
    font-size: 58px;
    font-weight: 800;
    color: #96c11f;
    line-height: 1;
    margin-bottom: 12px;
}
.cam2-stat__label {
    display: block;
    color: rgba(255, 255, 255, 0.70);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

/* ---- Checklist GNL ---- */

.cam2-checklist {
    padding: 0;
    margin: 0 0 32px;
}
.cam2-checklist__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid #ededed;
    font-size: 15px;
    color: #212529;
}
.cam2-checklist__item:last-child {
    border-bottom: none;
}
.cam2-checklist__icon {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #96c11f;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.cam2-checklist__text {
    flex: 1;
    line-height: 1.55;
}

/* ---- Card partner ---- */

.cam2-partner-card {
    background: #ffffff;
    border-radius: 8px;
    padding: 36px 28px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.cam2-partner-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.13);
}
.cam2-partner-card__name {
    color: #005eab;
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 8px;
}
.cam2-partner-card__role {
    color: #6c757d;
    font-size: 13px;
    margin: 0;
}

/* ---- Lista contatti CTA ---- */

.cam2-contact-list {
    padding: 0;
    margin: 0 0 36px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.cam2-contact-list__item {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #ededed;
    font-size: 15px;
    line-height: 1.5;
}

/* Icone via ::before — nessun elemento HTML aggiuntivo necessario */
.cam2-contact-list__item::before {
    content: '';
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.cam2-contact-list__item--address::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2396c11f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}
.cam2-contact-list__item--phone::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2396c11f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 9.8 19.79 19.79 0 01.22 1.18 2 2 0 012.18 0h3a2 2 0 012 1.72c.13 1 .37 1.97.72 2.9a2 2 0 01-.45 2.11L6.09 7.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.93.35 1.9.6 2.9.72A2 2 0 0122 14.92z'/%3E%3C/svg%3E");
}
.cam2-contact-list__item--email::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2396c11f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E");
}

.cam2-contact-list__link {
    color: #ededed !important;
    text-decoration: none;
    transition: color 0.25s ease;
}
.cam2-contact-list__link:hover {
    color: #96c11f !important;
}

/* ============================================================
   15. PAGINA CONTATTI
   ============================================================ */

/* ---- Schede info contatto ---- */

.cam2-contact-info {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.cam2-contact-info__item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 22px 0;
    border-bottom: 1px solid #ededed;
}

.cam2-contact-info__item:last-child {
    border-bottom: none;
}

/* Icone via ::before */
.cam2-contact-info__item::before {
    content: '';
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: rgba(150, 193, 31, 0.10);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
    margin-top: 2px;
}

.cam2-contact-info__item--address::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2396c11f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

.cam2-contact-info__item--phone::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2396c11f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 9.8 19.79 19.79 0 01.22 1.18 2 2 0 012.18 0h3a2 2 0 012 1.72c.13 1 .37 1.97.72 2.9a2 2 0 01-.45 2.11L6.09 7.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.93.35 1.9.6 2.9.72A2 2 0 0122 14.92z'/%3E%3C/svg%3E");
}

.cam2-contact-info__item--email::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2396c11f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E");
}

.cam2-contact-info__item--clock::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2396c11f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
}

.cam2-contact-info__label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #96c11f;
    margin-bottom: 4px;
}

.cam2-contact-info__value {
    font-size: 15px;
    color: #212529;
    line-height: 1.6;
}

.cam2-contact-info__link {
    color: #005eab !important;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.25s ease;
}

.cam2-contact-info__link:hover {
    color: #96c11f !important;
}

/* ---- Wrapper mappa Google ---- */

.cam2-map-wrapper {
    line-height: 0;
    font-size: 0;
}

.cam2-map-wrapper iframe,
.cam2-map-wrapper .gem-google-map {
    display: block;
    width: 100%;
}

/* ---- Galleria immagini sede (responsive) ---- */

@media (max-width: 768px) {

    .cam2-location-img {
        min-height: 200px !important;
        margin-bottom: 12px;
    }

    .cam2-contact-info__item {
        gap: 14px;
    }

    .cam2-contact-info__item::before {
        width: 36px;
        height: 36px;
        background-size: 16px 16px;
    }
}

/* ---- Override grayscale mappa (vc_goo_maps) ---- */
/* Il vc_row contenitore applica filter:grayscale via custom_css_code.
   Questa regola lo sovrascrive con !important. */
.wpb_gmaps_widget,
.wpb_gmaps_widget iframe,
.vc_gmaps iframe {
    filter: none !important;
    -webkit-filter: none !important;
}


/* ============================================================
   16. PAGINA SERVIZI — RESPONSIVE MOBILE
   Versione definitiva — usa solo el_class reali dello shortcode
   Marzo 2026
   ============================================================ */


/* ============================================================
   A) HERO
   ============================================================ */

@media (max-width: 768px) {

    .cam2-page-hero--servizi .wpb_text_column h1 {
        font-size:26px !important;
        line-height:1.2 !important;
        word-break:break-word !important;
    }

    .cam2-page-hero--servizi .wpb_text_column p {
        font-size:14px !important;
    }

    .cam2-page-hero--servizi > .vc_column-inner {
        padding-top:80px !important;
        padding-bottom:60px !important;
    }
}


/* ============================================================
   B) INTRO
   ============================================================ */

@media (max-width: 768px) {

    .cam2-intro-section .wpb_text_column h2 {
        font-size:22px !important;
        line-height:1.25 !important;
    }

    .cam2-intro-section .wpb_text_column p {
        font-size:14px !important;
    }
}


/* ============================================================
   C) SEZIONI SERVIZIO 50/50
   Selettore: .cam2-servizio-row (su tutti e 4)
   Colonna immagine: .cam2-servizio-img-col
   Colonna testo:   .cam2-servizio-testo-col
   ============================================================ */

@media (max-width: 768px) {

    /* Titolo H2 — previene overflow */
    .cam2-servizio-row .cam2-servizio-testo-col h2 {
        font-size:22px !important;
        line-height:1.25 !important;
        word-break:break-word !important;
        overflow-wrap:break-word !important;
    }

    /* Paragrafi corpo */
    .cam2-servizio-row .cam2-servizio-testo-col p {
        font-size:15px !important;
        line-height:1.7 !important;
    }

    /* Padding colonna testo: sovrascrive i valori inline WPBakery */
    .cam2-servizio-row .cam2-servizio-testo-col > .vc_column-inner {
        padding-top:36px !important;
        padding-bottom:36px !important;
        padding-left:20px !important;
        padding-right:20px !important;
    }

    /* Colonna immagine: altezza minima visibile */
    .cam2-servizio-row .cam2-servizio-img-col > .vc_column-inner {
        padding:0 !important;
    }

    .cam2-servizio-row .cam2-servizio-img-col .wpb_text_column div {
        min-height:220px !important;
        width:100% !important;
    }
}


/* ============================================================
   D) BANNER OFFICINA
   el_class: cam2-banner-officina
   Struttura: 1 colonna intera con testo
   ============================================================ */

@media (max-width: 768px) {

    /* Rimuovi immagine di sfondo, sostituisci con tinta neutra */
    .cam2-banner-officina {
        background-image:none !important;
        background-color:#f4f7fb !important;
        min-height:auto !important;
        border-top:4px solid #96c11f !important;
    }

    /* Padding colonna */
    .cam2-banner-officina .vc_column-inner {
        padding:44px 20px !important;
    }

    /* Div interno max-width: a piena larghezza */
    .cam2-banner-officina div[style*="max-width"] {
        max-width:100% !important;
    }

    /* H2 */
    .cam2-banner-officina h2 {
        font-size:22px !important;
        line-height:1.25 !important;
        word-break:break-word !important;
        color:#005eab !important;
    }

    /* Paragrafo */
    .cam2-banner-officina p {
        font-size:16px !important;
    }

    /* Bottone: full width */
    .cam2-banner-officina a {
        display:block !important;
        text-align:center !important;
        box-sizing:border-box !important;
    }
}


/* ============================================================
   E) BANNER UFFICI
   el_class: cam2-banner-uffici / cam2-banner-uffici-testo
   Struttura: colonna vuota sx + colonna testo dx
   ============================================================ */

@media (max-width: 768px) {

    /* Rimuovi immagine di sfondo */
    .cam2-banner-uffici {
        background-image:none !important;
        background-color:#f4f7fb !important;
        min-height:auto !important;
        border-top:4px solid #96c11f !important;
    }

    /* Nascondi colonna sinistra vuota */
    .cam2-banner-uffici .vc_col-sm-6:not(.cam2-banner-uffici-testo) {
        display:none !important;
    }

    /* Colonna testo: piena larghezza */
    .cam2-banner-uffici-testo {
        width:100% !important;
        float:none !important;
    }

    /* Padding colonna testo */
    .cam2-banner-uffici-testo > .vc_column-inner {
        padding:44px 20px !important;
    }

    /* Div interno max-width + margin-left:auto */
    .cam2-banner-uffici-testo div[style*="max-width"] {
        max-width:100% !important;
        margin-left:0 !important;
    }

    /* H2 */
    .cam2-banner-uffici-testo h2 {
        font-size:22px !important;
        line-height:1.25 !important;
        word-break:break-word !important;
        color:#005eab !important;
    }

    /* Paragrafo */
    .cam2-banner-uffici-testo p {
        font-size:16px !important;       
    }

    /* Bottone: full width */
    .cam2-banner-uffici-testo a {
        display:block !important;
        text-align:center !important;
        box-sizing:border-box !important;
    }
}


/* ============================================================
   F) SEZIONE NUMERI
   el_class: cam2-numeri-section (su entrambi i vc_row)
   ============================================================ */

@media (max-width: 768px) {

    /* Titolo sezione */
    .cam2-numeri-section h2 {
        font-size:22px !important;
        line-height:1.25 !important;
    }

    /* Counter: griglia 2×2 */
    .cam2-numeri-section .vc_col-sm-3 {
        width:50% !important;
        float:left !important;
        margin-bottom:24px !important;
    }

    /* Togli bordo sinistro al 3° elemento (primo riga 2) */
    .cam2-numeri-section .vc_col-sm-3:nth-child(3) .gem-counter-wrap {
        border-left:none !important;
    }

    /* Numero più compatto */
    .cam2-numeri-section .gem-counter-number {
        font-size:38px !important;
    }
}

@media (max-width: 420px) {

    /* Sotto 420px: colonna singola */
    .cam2-numeri-section .vc_col-sm-3 {
        width:100% !important;
        float:none !important;
    }

    .cam2-numeri-section .vc_col-sm-3 + .vc_col-sm-3 .gem-counter-wrap {
        border-left:none !important;
        border-top:1px solid rgba(255,255,255,0.15) !important;
        padding-top:20px !important;
    }
}


/* ============================================================
   G) CTA FINALE
   el_class: cam2-cta-finale
   ============================================================ */

@media (max-width: 768px) {

    .cam2-cta-finale h2 {
        font-size:22px !important;
        line-height:1.25 !important;
        word-break:break-word !important;
    }

    .cam2-cta-finale p {
        font-size:14px !important;
    }

    /* Bottoni: da flex orizzontale a colonna */
    .cam2-cta-finale div[style*="display:flex"],
    .cam2-cta-finale div[style*="display: flex"] {
        flex-direction:column !important;
        align-items:center !important;
        gap:12px !important;
    }

    .cam2-cta-finale a {
        width:100% !important;
        max-width:280px !important;
        text-align:center !important;
        box-sizing:border-box !important;
    }
}

/* ============================================================
   FIX MOBILE — Colonne immagine servizi (background-image su vc_column)
   
   PROBLEMA: con equal_height="yes" su desktop la colonna immagine
   si allunga quanto il testo accanto. Su mobile le colonne si stackano
   e la colonna immagine (vuota, solo background CSS) collassa a ~0px.
   background-size:cover non ha altezza su cui lavorare → immagine schiacciata.
   
   SOLUZIONE: min-height esplicita su mobile per le colonne immagine.
   ============================================================ */
 
@media (max-width: 768px) {
 
    /* Colonna immagine dei 4 servizi */
    .cam2-servizio-img-col {
        min-height: 280px !important;
    }
 
    /* Assicuriamo che il wrapper interno non collassi */
    .cam2-servizio-img-col > .vc_column-inner {
        min-height: 280px !important;
        height: 100% !important;
    }
}