@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Roboto+Slab:wght@300;400;500;600;700&display=swap');
:root{--black:#11100f;--black2:#1b1917;--paper:#d8c9a7;--paper2:#eee5d2;--red:#8d2925;--red2:#b13a32;--muted:#a99e89;--line:#4b4439;--white:#f2eee6;--max:1180px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--black);color:var(--paper2);font-family:"Roboto Slab",Georgia,serif;line-height:1.65}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}.container{width:min(var(--max),calc(100% - 40px));margin:auto}
.site-header{position:sticky;top:0;z-index:100;background:rgba(17,16,15,.97);border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}.nav{min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:30px}.brand{font:700 22px Oswald,sans-serif;text-transform:uppercase;letter-spacing:2px}.brand small{display:block;color:var(--red2);font-size:11px;letter-spacing:4px}.nav-links{display:flex;gap:6px;list-style:none;margin:0;padding:0}.nav-links a{font:600 14px Oswald,sans-serif;letter-spacing:1.5px;padding:25px 13px;position:relative}.nav-links a:hover,.nav-links a.active{color:var(--paper)}.nav-links a.active:after{content:"";position:absolute;left:13px;right:13px;bottom:15px;height:2px;background:var(--red2)}.menu-toggle{display:none;background:none;border:1px solid var(--line);color:var(--paper);padding:8px 11px;font:600 13px Oswald}
.hero{min-height:78vh;display:flex;align-items:center;position:relative;overflow:hidden;background:linear-gradient(90deg,rgba(17,16,15,.98),rgba(17,16,15,.78) 45%,rgba(17,16,15,.35)),radial-gradient(circle at 75% 50%,#4a4034,#25211d 28%,#11100f 70%)}.hero:after{content:"";position:absolute;inset:0;opacity:.08;pointer-events:none;background-image:repeating-linear-gradient(0deg,#fff 0 1px,transparent 1px 4px)}.hero-content{position:relative;z-index:2;max-width:760px;padding:90px 0}.kicker{font:500 15px Oswald,sans-serif;letter-spacing:5px;color:var(--red2);text-transform:uppercase}
h1,h2,h3{font-family:Oswald,sans-serif;text-transform:uppercase;line-height:1.05;margin:0 0 20px}.hero h1{font-size:clamp(58px,10vw,120px);letter-spacing:2px}.hero h1 span{display:block;color:var(--paper)}.hero h1 .outline{color:transparent;-webkit-text-stroke:1px var(--paper)}.lead{font-size:20px;color:#d6cdbd;max-width:650px}.btn{display:inline-block;margin-top:22px;background:var(--red);padding:13px 22px;font:600 14px Oswald,sans-serif;letter-spacing:2px;text-transform:uppercase;border:1px solid var(--red2);transition:.2s}.btn:hover{background:var(--red2);transform:translateY(-2px)}
.section{padding:90px 0}.section.dark2{background:var(--black2)}.section-head{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:40px;border-bottom:1px solid var(--line);padding-bottom:18px}.section-head h2{font-size:46px}.section-head p{max-width:500px;margin:0;color:var(--muted)}.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}.placeholder{min-height:330px;border:1px dashed #756b59;background:linear-gradient(135deg,#29251f,#181613);display:flex;align-items:center;justify-content:center;text-align:center;color:#9e927c;font:500 13px Oswald,sans-serif;letter-spacing:2px;text-transform:uppercase}.placeholder.tall{min-height:500px}.quote{border-left:4px solid var(--red);padding-left:24px;font-size:26px}.values{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}.value{background:var(--black2);padding:30px}.value h3{font-size:28px;color:var(--paper)}.value p{color:var(--muted)}
.page-hero{padding:105px 0 80px;background:var(--black2);border-bottom:1px solid var(--line)}.page-hero h1{font-size:clamp(55px,8vw,100px)}.page-hero p{max-width:700px;color:var(--muted);font-size:18px}.theme-club{background:linear-gradient(180deg,#1d1a17,#11100f)}.theme-event{background:linear-gradient(180deg,#211816,#11100f)}.theme-gallery{background:linear-gradient(180deg,#181715,#11100f)}.theme-contact{background:linear-gradient(180deg,#191918,#11100f)}
.members{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.member{background:var(--black2);border:1px solid var(--line);transition:.2s}.member:hover{transform:translateY(-4px);border-color:var(--red)}.member-photo{aspect-ratio:1;background:linear-gradient(135deg,#383128,#1c1916);display:flex;align-items:center;justify-content:center;color:#8d806d;font:500 12px Oswald;letter-spacing:2px}.member-body{padding:16px}.member-body h3{font-size:21px;margin-bottom:5px}.member-body p{margin:0;color:var(--muted);font-size:13px}
.event-banner{padding:55px;background:var(--red);overflow:hidden}.event-banner h2{font-size:55px}.event-banner p{max-width:650px}.event-banner .btn{background:var(--black);border-color:var(--black)}.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.info-card{padding:28px;border:1px solid var(--line);background:var(--black2)}.info-card strong{display:block;color:var(--red2);font:600 13px Oswald;letter-spacing:2px}.info-card span{font-size:22px}.program{display:grid;gap:12px}.program-row{display:grid;grid-template-columns:150px 1fr;padding:17px 0;border-bottom:1px solid var(--line)}.program-row strong{font-family:Oswald;color:var(--paper)}
.sponsor-section{background:var(--paper);color:var(--black);padding:90px 0}.sponsor-section .section-head{border-color:#9f947c}.sponsor-section .section-head p,.sponsor-note{color:#665e50}.sponsor-tier{margin-bottom:50px}.sponsor-tier h3{font-size:32px}.sponsor-main{border:4px solid var(--black);padding:10px;background:#c7b994}.sponsor-banner{display:block;aspect-ratio:4/1;background:#29251f;border:1px dashed #82765e;overflow:hidden}.sponsor-banner img{width:100%;height:100%;object-fit:cover}.sponsor-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.sponsor-small{border:2px solid var(--black);padding:7px;background:#c7b994}.sponsor-small .sponsor-banner{aspect-ratio:2.4/1}.sponsor-supporters{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.sponsor-logo{aspect-ratio:2/1;border:1px solid #8f846d;background:#c7b994;display:flex;align-items:center;justify-content:center;text-align:center;padding:12px;font:600 12px Oswald;letter-spacing:1px}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.gallery-item{aspect-ratio:1;overflow:hidden;border:1px solid var(--line);cursor:pointer;background:#24211d}.gallery-item .placeholder{height:100%;min-height:0;border:0}.gallery-item:hover .placeholder{filter:brightness(1.25)}.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:300;display:none;align-items:center;justify-content:center;padding:30px}.lightbox.open{display:flex}.lightbox-inner{max-width:1000px;width:100%;position:relative}.lightbox .placeholder{min-height:70vh}.close{position:absolute;right:0;top:-40px;background:none;border:0;color:white;font:600 28px Oswald;cursor:pointer}
.contacts{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.contact-card{border:1px solid var(--line);padding:30px;background:var(--black2)}.contact-card h3{font-size:25px}.contact-card p{color:var(--muted)}footer{padding:45px 0;border-top:1px solid var(--line);background:#0c0b0a;color:var(--muted);font-size:13px}.footer-inner{display:flex;justify-content:space-between;gap:20px}
@media(max-width:900px){.nav-links{display:none;position:absolute;top:74px;left:0;right:0;background:var(--black);border-bottom:1px solid var(--line);flex-direction:column;padding:10px 20px}.nav-links.open{display:flex}.nav-links a{padding:14px 0}.nav-links a.active:after{left:0;right:auto;bottom:7px;width:40px}.menu-toggle{display:block}.split{grid-template-columns:1fr;gap:30px}.members{grid-template-columns:repeat(3,1fr)}.gallery{grid-template-columns:repeat(3,1fr)}.sponsor-supporters{grid-template-columns:repeat(4,1fr)}}
@media(max-width:600px){.container{width:min(var(--max),calc(100% - 28px))}.section{padding:60px 0}.hero{min-height:72vh}.hero-content{padding:70px 0}.hero h1{font-size:58px}.section-head{display:block}.section-head h2{font-size:38px}.values,.info-grid,.contacts,.sponsor-grid{grid-template-columns:1fr}.members{grid-template-columns:repeat(2,1fr)}.gallery{grid-template-columns:repeat(2,1fr)}.sponsor-supporters{grid-template-columns:repeat(2,1fr)}.program-row{grid-template-columns:100px 1fr}.footer-inner{display:block}}

/* MOBILE OPTIMIZED — original graphics preserved */
html { -webkit-text-size-adjust:100%; }
img,video,iframe { max-width:100%; height:auto; }

@media (max-width:768px) {
  body { overflow-x:hidden; }
  nav ul { flex-wrap:wrap; }
  nav a { min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
  .hero { min-height:55vh; padding:72px 20px 48px; background-position:center; }
  .hero h1 { font-size:clamp(2rem,10vw,4rem); line-height:.98; overflow-wrap:anywhere; }
  .hero h2 { font-size:clamp(1.15rem,5vw,2rem); }
  section { padding-left:18px; padding-right:18px; }
  .section-title,section h2 { font-size:clamp(1.55rem,7vw,2.4rem); line-height:1.05; }
  .grid,.cards,.member-grid,.features,.info-grid,.sponsor-grid { grid-template-columns:1fr !important; }
  .card,.member-card,.info-card,.sponsor-card { width:100%; margin-left:auto; margin-right:auto; }
  .gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:10px; }
  .gallery-grid img { width:100%; aspect-ratio:1/1; object-fit:cover; }
  .sponsor-banner img { width:100%; height:auto; display:block; }
  table { display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .btn,button,.cta,a.button { min-height:44px; }
  a,p,li,h1,h2,h3 { overflow-wrap:anywhere; }
  footer { padding-left:18px; padding-right:18px; }
}
@media (max-width:420px) {
  .hero { min-height:50vh; padding:64px 16px 40px; }
  section { padding-left:14px; padding-right:14px; }
  .gallery-grid { gap:7px; }
  .hero h1 { font-size:clamp(1.8rem,11vw,3rem); }
}


/* =========================================================
   LOGHI HOME - MOTO CLUB / FMI
   ========================================================= */

.club-logo-placeholders {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 0 0 26px;
}

.club-logo-placeholder {
    width: 200px;
    height: 200px;

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

    box-sizing: border-box;

    /* Nessun bordo o sfondo da placeholder */
    border: none;
    background: transparent;
}

/* Immagini dei loghi */
.club-logo-placeholder img {
    width: 100%;
    height: 100%;

    object-fit: contain;
    display: block;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .club-logo-placeholders {
        gap: 12px;
        margin-bottom: 20px;
    }

    .club-logo-placeholder {
        width: 82px;
        height: 82px;
    }
}

/* =========================================================
   PAGINA CLUB
   ========================================================= */


/* ---------------------------------------------------------
   NAVIGAZIONE INTERNA
   --------------------------------------------------------- */

.club-section-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;

    margin-top: 40px;
}

.club-section-link {
    position: relative;

    min-height: 180px;
    padding: 28px;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    border: 1px solid rgba(216, 201, 167, 0.25);

    background: #1b1917;

    color: #eee5d2;
    text-decoration: none;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease;
}

.club-section-link:hover {
    transform: translateY(-5px);

    border-color: #8d2925;

    background: #211e1b;
}

.club-section-number {
    position: absolute;

    top: 20px;
    right: 22px;

    color: #8d2925;

    font-family: "Oswald", sans-serif;
    font-size: 2rem;
    font-weight: 700;

    text-transform: uppercase;
}

.club-section-link strong {
    margin-bottom: 5px;

    color: #d8c9a7;

    font-family: "Oswald", sans-serif;
    font-size: 1.7rem;

    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.club-section-link > span:last-child {
    color: #a99e89;
    font-size: 0.9rem;
}


/* ---------------------------------------------------------
   SCROLL INTERNO
   --------------------------------------------------------- */

html {
    scroll-behavior: smooth;
}

#il-club,
#i-membri,
#la-storia {
    scroll-margin-top: 100px;
}


/* ---------------------------------------------------------
   FOTO CLUB
   --------------------------------------------------------- */

.club-feature-photo {
    margin: 0;
}

.club-feature-photo img {
    width: 100%;
    height: 430px;

    display: block;

    object-fit: cover;

    border: 1px solid rgba(216, 201, 167, 0.25);
}

.club-feature-photo figcaption {
    margin-top: 10px;

    color: #a99e89;

    font-size: 0.8rem;

    text-align: right;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}


/* ---------------------------------------------------------
   FOTO STORICA
   --------------------------------------------------------- */

.history-main-photo {
    position: relative;

    margin: 45px 0 65px;
}

.history-main-photo img {
    width: 100%;
    height: 480px;

    display: block;

    object-fit: cover;

    filter:
        grayscale(25%)
        contrast(1.05);

    border: 1px solid rgba(216, 201, 167, 0.25);
}

.history-main-photo figcaption {
    position: absolute;

    right: 15px;
    bottom: 15px;

    padding: 8px 12px;

    background: rgba(17, 16, 15, 0.85);

    color: #d8c9a7;

    font-size: 0.75rem;

    text-transform: uppercase;
    letter-spacing: 0.08em;
}


/* =========================================================
   STORIA DEL CLUB - TIMELINE
   ========================================================= */

.club-history {
    overflow: hidden;
}

.history-timeline {
    position: relative;

    margin-top: 50px;
    padding-left: 180px;
}


/* Linea verticale */

.history-timeline::before {
    content: "";

    position: absolute;

    top: 10px;
    bottom: 10px;
    left: 139px;

    width: 2px;

    background: #8d2925;
}


/* ---------------------------------------------------------
   MOMENTO STORICO
   --------------------------------------------------------- */

.history-item {
    position: relative;

    display: grid;
    grid-template-columns: 1fr;

    margin-bottom: 65px;
}


/* Punto sulla timeline */

.history-item::before {
    content: "";

    position: absolute;

    left: -48px;
    top: 9px;

    width: 14px;
    height: 14px;

    border: 3px solid #8d2925;
    border-radius: 50%;

    background: #11100f;
}


/* ---------------------------------------------------------
   ANNO / ETICHETTA
   --------------------------------------------------------- */

.history-year {
    position: absolute;

    left: -180px;
    top: 0;

    width: 120px;

    color: #d8c9a7;

    font-family: "Oswald", sans-serif;
    font-size: 1.25rem;
    font-weight: 700;

    text-align: right;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}


/* ---------------------------------------------------------
   CONTENUTO TIMELINE
   --------------------------------------------------------- */

.history-content {
    max-width: 760px;
}

.history-content h3 {
    margin-top: 0;
    margin-bottom: 18px;

    color: #eee5d2;

    font-family: "Oswald", sans-serif;
    font-size: 1.8rem;

    text-transform: uppercase;
}

.history-content p {
    margin-bottom: 16px;

    line-height: 1.75;
}


/* ---------------------------------------------------------
   TESTI IN EVIDENZA
   --------------------------------------------------------- */

.history-highlight,
.history-values {
    color: #d8c9a7;

    font-size: 1.1rem;

    letter-spacing: 0.04em;
}


/* ---------------------------------------------------------
   CITAZIONE FINALE
   --------------------------------------------------------- */

.history-quote {
    margin: 30px 0 0;
    padding: 20px 25px;

    border-left: 4px solid #8d2925;

    background: rgba(141, 41, 37, 0.08);

    color: #d8c9a7;

    font-size: 1.15rem;
    font-style: italic;

    line-height: 1.6;
}


/* =========================================================
   TABLET / MOBILE
   ========================================================= */

@media (max-width: 768px) {

    /* Navigazione interna */

    .club-section-links {
        grid-template-columns: 1fr;

        gap: 12px;

        margin-top: 28px;
    }

    .club-section-link {
        min-height: 120px;

        padding: 22px;
    }

    .club-section-number {
        top: 16px;
        right: 18px;

        font-size: 1.6rem;
    }

    .club-section-link strong {
        font-size: 1.4rem;
    }


    /* Foto Club */

    .club-feature-photo {
        margin-top: 25px;
    }

    .club-feature-photo img {
        height: 300px;
    }


    /* Foto storica */

    .history-main-photo {
        margin:
            30px
            0
            45px;
    }

    .history-main-photo img {
        height: 300px;
    }


    /* Timeline */

    .history-timeline {
        margin-top: 35px;
        padding-left: 35px;
    }

    .history-timeline::before {
        left: 7px;
    }

    .history-item {
        margin-bottom: 50px;
    }

    .history-item::before {
        left: -35px;
        top: 5px;
    }

    .history-year {
        position: static;

        width: auto;

        margin-bottom: 8px;

        text-align: left;

        font-size: 1rem;
    }

    .history-content h3 {
        font-size: 1.5rem;
    }

    .history-content p {
        line-height: 1.65;
    }

    .history-quote {
        padding: 16px 18px;

        font-size: 1rem;
    }

}


/* =========================================================
   SMARTPHONE PICCOLI
   ========================================================= */

@media (max-width: 420px) {

    .club-feature-photo img,
    .history-main-photo img {
        height: 240px;
    }

    .history-main-photo figcaption {
        right: 8px;
        bottom: 8px;

        font-size: 0.65rem;
    }

}

/* =========================================================
   SOCIAL
   ========================================================= */

.social-links {
    margin-top: 15px;
}

.social-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: #d8c9a7;

    font-family: "Oswald", sans-serif;
    font-size: 1rem;
    font-weight: 600;

    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.social-link:hover {
    color: #eee5d2;
    transform: translateX(3px);
}

.social-icon {
    width: 28px;
    height: 28px;

    flex-shrink: 0;
}