/* =============================================================
   COMBO FESTIVAL — style.css
   Stack: Bootstrap 5 grid + CSS custom + Bricolage Grotesque
   ============================================================= */

   /* -------------------------------------------------------------
     0. WEBFONT
     ------------------------------------------------------------- */
    /* Bricolage Grotesque Variable — asse WIDTH (wdth) self-hosted */
    /* File sorgente: pacchetto npm @fontsource-variable/bricolage-grotesque v5.2.10 */

@font-face {
 font-family: 'Bricolage Grotesque Variable';
 font-style: normal;
 font-display: swap;
 font-weight: 200 800;
 font-stretch: 75% 100%;
 src: url('./webfonts/bricolage-grotesque-latin-wdth-normal.woff2') format('woff2-variations');
 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------
   1. CUSTOM PROPERTIES (Design Tokens)
--------------------------------------------------------------- */

:root {

  /* --- Palette --- */
  --verde-xx-chiaro:#70FAD1;
  --verde-x-chiaro: #37E0AD;
  --verde-chiaro:   #30C397;
  --verde-scuro:    #218A6C;
  --giallo-chiaro:  #EDD456;
  --giallo-scuro:   #AD983B;
  --viola-x-chiaro: #D78CF6;
  --viola-chiaro:   #B776D2;
  --viola-scuro:    #805290;
  --viola-x-scuro:  #79428C;
  --viola-xx-scuro: #5D2770;
  --viola-xxx-scuro:#1F1223;
  --bianco:         #ffffff;
  --nero:           #111111;
  --grigio:         #d1d1d1;

  /* --- Typography --- */
  --font-base:      'Bricolage Grotesque Variable', sans-serif;
  --fw-light:       300;
  --fw-regular:     400;
  --fw-medium:      500;
  --fw-semibold:    600;
  --fw-bold:        700;
  --fw-extrabold:   800;

  /* --- Spacing --- */
  --section-gap:    4rem;

  /* --- Nav --- */
  --nav-height:     64px;
  --nav-bg:         var(--bianco);
  --nav-border:     1px solid var(--grigio);

  /* --- Transitions --- */
  --ease-out:       cubic-bezier(0.22, 1, 0.36, 1);
  --duration-base:  0.35s;

  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;

  .btn-primary {
    --bs-btn-bg: var(--viola-chiaro);
    --bs-btn-border-color: var(--viola-chiaro);
    --bs-btn-hover-bg: var(--viola-scuro);
    --bs-btn-hover-border-color: var(--viola-scuro);
    --bs-btn-active-bg: var(--verde-chiaro);
    --bs-btn-active-border-color: var(--verde-chiaro);
  }
}


/* ---------------------------------------------------------------
   2. COLOR UTILITY CLASSES
   (text-* e bg-* per ogni token, modello Bootstrap)
--------------------------------------------------------------- */

/* Text colors */
.text-verde-xx-chiaro { color: var(--verde-xx-chiaro)  !important; }
.text-verde-x-chiaro  { color: var(--verde-x-chiaro)  !important; }
.text-verde-chiaro    { color: var(--verde-chiaro)  !important; }
.text-verde-scuro     { color: var(--verde-scuro)   !important; }
.text-giallo-chiaro   { color: var(--giallo-chiaro) !important; }
.text-giallo-scuro    { color: var(--giallo-scuro)  !important; }
.text-viola-x-chiaro  { color: var(--viola-x-chiaro)  !important; }
.text-viola-chiaro    { color: var(--viola-chiaro)  !important; }
.text-viola-x-chiaro  { color: var(--viola-x-chiaro)  !important; }
.text-viola-scuro     { color: var(--viola-scuro)   !important; }
.text-viola-x-scuro   { color: var(--viola-x-scuro)   !important; }
.text-viola-xx-scuro  { color: var(--viola-xx-scuro)   !important; }
.text-viola-xxx-scuro { color: var(--viola-xxx-scuro)   !important; }
.text-bianco          { color: var(--bianco)        !important; }
.text-nero            { color: var(--nero)          !important; }
.text-grigio          { color: var(--grigio)        !important; }

/* Background colors */
.bg-verde-xx-chiaro { background-color: var(--verde-xx-chiaro)  !important; }
.bg-verde-x-chiaro  { background-color: var(--verde-x-chiaro)  !important; }
.bg-verde-chiaro    { background-color: var(--verde-chiaro)  !important; }
.bg-verde-scuro     { background-color: var(--verde-scuro)   !important; }
.bg-giallo-chiaro   { background-color: var(--giallo-chiaro) !important; }
.bg-giallo-scuro    { background-color: var(--giallo-scuro)  !important; }
.bg-viola-x-chiaro  { background-color: var(--viola-x-chiaro)  !important; }
.bg-viola-chiaro    { background-color: var(--viola-chiaro)  !important; }
.bg-viola-scuro     { background-color: var(--viola-scuro)   !important; }
.bg-viola-x-scuro   { background-color: var(--viola-x-scuro)   !important; }
.bg-viola-xx-scuro  { background-color: var(--viola-xx-scuro)   !important; }
.bg-viola-xxx-scuro { background-color: var(--viola-xxx-scuro)   !important; }
.bg-bianco          { background-color: var(--bianco)        !important; }
.bg-nero            { background-color: var(--nero)          !important; }
.bg-grigio          { background-color: var(--grigio)        !important; }

/* buttons */
.btn {
  font-variation-settings: 'wght' 600;
  border-radius: 1.25em;
}

.btn-viola-xx-scuro {
  background-color: var(--viola-xx-scuro);
  border-color: var(--viola-xx-scuro);
  color: var(--bianco);
}
.btn-viola-xx-scuro:hover {
  background-color: var(--viola-xxx-scuro);
  border-color: var(--viola-xxx-scuro);
  color: var(--bianco);
}


/* ---------------------------------------------------------------
   3. BASE / RESET
--------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  /* Offset per navbar sticky */
  scroll-padding-top: var(--nav-height);
  font-size: 18px;
}

body {
  font-family: var(--font-base);
  font-variation-settings: 'wght' 500, 'opsz' 14, 'wdth' 90;
  line-height:    1.5;
  color:          var(--nero);
  background-color: var(--bianco);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}


/* ---------------------------------------------------------------
   4. TYPOGRAPHY HELPERS
--------------------------------------------------------------- */

.heading-xxl { font-size: 56px; font-weight:var(--fw-bold); font-stretch: 90%; font-variation-settings: 'wght' 700, 'opsz' 72, 'wdth' 90; font-stretch: 90%; line-height: 1em; }
.heading-xl { font-size: 32px; font-weight:var(--fw-bold); font-stretch: 90%; font-variation-settings: 'wght' 700, 'opsz' 32, 'wdth' 90; font-stretch: 90%; line-height: 1.05em; }
.heading-l { font-size: 32px; font-weight:var(--fw-bold); font-stretch: 90%; font-variation-settings: 'wght' 700, 'opsz' 32, 'wdth' 90; font-stretch: 90%; line-height: 1em; }
.heading-m { font-size: 32px; font-weight:var(--fw-bold); font-stretch: 90%; font-variation-settings: 'wght' 700, 'opsz' 32, 'wdth' 90; font-stretch: 90%; line-height: 1.2em; }
.heading-s { font-size: 24px; font-weight:var(--fw-bold); font-stretch: 90%; font-variation-settings: 'opsz' 24, 'wdth' 90; line-height: 1.2em; }
.heading-xs { font-size: 20px; font-weight:var(--fw-bold);font-stretch: 90%;  font-variation-settings: 'opsz' 20, 'wdth' 90; line-height: 1.4em; }
.heading-xxs { font-size: 16px; font-weight:var(--fw-bold); font-stretch: 90%; font-variation-settings: 'opsz' 16, 'wdth' 90; line-height: 1.4em; }
.heading-tag { font-size: 16px; font-weight:var(--fw-bold); font-stretch: 90%; font-size:16px; font-variation-settings: 'opsz' 16, 'wdth' 90; line-height: 1.4em; letter-spacing: 0.05em; }

@media (min-width: 992px) {
  .heading-xl { font-size: 48px; font-variation-settings: 'wght' 700, 'opsz' 48, 'wdth' 90; line-height: 1.05em; }
  .heading-l { font-size: 40px; font-variation-settings: 'wght' 700, 'opsz' 40, 'wdth' 90; line-height: 1em; }
}

.combo-section__label { margin-bottom: 2rem; }
.combo-section__title { margin-bottom: 1rem; }
.combo-section__subtitle { margin-bottom: 1rem; }

.combo-link {
  font-weight:     var(--fw-bold);
  text-decoration: underline;
  text-underline-offset: 3px;
  color:           var(--viola-scuro);
  transition:      opacity var(--duration-base) var(--ease-out);
}

.combo-link:hover {
  opacity: 0.7;
}

.combo-link--light {
  color: var(--giallo-chiaro);
}


/* ---------------------------------------------------------------
   5. NAVBAR
   Strategia:
   - Mobile:  sempre fixed in alto; logo + hamburger visibili;
              menu list si espande sotto con max-height transition
   - Desktop: inizialmente statico (scorre con la pagina, sotto la hero);
              diventa fixed via JS (.is-sticky) quando la hero esce dal viewport;
              logo nascosto, voci space-between su tutta la larghezza
--------------------------------------------------------------- */

#site-header {
  /* Il header è nel DOM dopo la hero — su mobile lo posizioniamo
     fixed via CSS, su desktop è static finché JS non aggiunge .is-sticky */
}

.combo-nav {
  width:            100%;
  height:           var(--nav-height);
  background-color: var(--nav-bg);
  border-bottom:    var(--nav-border);
  z-index:          100;
  transition:       box-shadow var(--duration-base) var(--ease-out);
}

/* ---------- DESKTOP: default static ---------- */
@media (min-width: 992px) {
  .combo-nav {
    position: static; /* scorre con la pagina */
  }

  /* Quando JS aggiunge .is-sticky */
  .combo-nav.is-sticky {
    position:   fixed;
    top:        0;
    left:       0;
    right:      0;
    box-shadow: 0 2px 16px rgba(0,0,0,0.08);
  }
}

/* ---------- MOBILE: sempre fixed ---------- */
@media (max-width: 991px) {
  .combo-nav {
    position: fixed;
    top:      0;
    left:     0;
    right:    0;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
  }

  /* Spazio body compensato dall'header fixed */
  body {
    padding-top: var(--nav-height);
  }
}

/* ---------- Inner wrapper ---------- */
.combo-nav__inner {
  display:     flex;
  align-items: center;
  height:      var(--nav-height);
  gap:         1rem;
}

/* Layout helpers: center menu and right-side actions for mobile */
.combo-nav__center {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
}
.combo-nav__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ---------- Logo ---------- */
.combo-nav__logo {
  flex-shrink: 0;
}

.combo-nav__logo-text {

}

/* Desktop: logo nascosto */
@media (min-width: 992px) {
  .combo-nav__logo {
    display: none;
  }
}

/* ---------- Nav list ---------- */
.combo-nav__list {
  list-style: none;
  margin:     0;
  padding:    0;
}

/* Desktop: row, space-between, occupa tutta la larghezza */
@media (min-width: 992px) {
  .combo-nav__list {
    display:         flex;
    flex-direction:  row;
    justify-content: space-between;
    width:           100%;
    gap:             0; /* space-between gestisce la spaziatura */
  }
}

/* Mobile: colonna collassabile */
@media (max-width: 991px) {
  .combo-nav__list {
    display:          flex;
    flex-direction:   column;
    gap:              0;
    /* Occupa tutta la larghezza sotto la barra */
    position:         absolute;
    top:              var(--nav-height);
    left:             0;
    right:            0;
    background-color: var(--nav-bg);
    border-bottom:    var(--nav-border);
    overflow:         hidden;
    max-height:       0;
    transition:       max-height 0.4s var(--ease-out);
  }

  .combo-nav__list.is-open {
    max-height: 480px;
  }

  .combo-nav__list li {
    border-top: 1px solid var(--grigio);
  }
}

/* ---------- Nav links ---------- */
.combo-nav__link {
  display:        block;
  position:       relative;
  padding-bottom: 2px;
  transition:     color var(--duration-base) var(--ease-out);
}

/* Desktop: underline hover */
@media (min-width: 992px) {
  .combo-nav__link {
    padding: 4px 0 4px;
  }

  .combo-nav__link::after {
    content:    '';
    position:   absolute;
    bottom:     0;
    left:       50%;
    width:      0;
    height:     2px;
    background: var(--nero);
    transition: all var(--duration-base) var(--ease-out);
  }

  .combo-nav__link:hover::after,
  .combo-nav__link.is-active::after {
    left: 0;
    width: 100%;
  }
}

/* Mobile: link a tutta larghezza con padding */
@media (max-width: 991px) {
  .combo-nav__link {
    padding: 0.85rem 1.5rem;
  }
}

/*
.combo-nav__link:hover,
.combo-nav__link.is-active {
  color: var(--viola-scuro);
}
*/

/* ---------- Hamburger ---------- */
.combo-nav__toggle {
  background:     none;
  border:         none;
  cursor:         pointer;
  padding:        4px;
  display:        flex;
  flex-direction: column;
  gap:            5px;
  margin-left:    auto; /* spinge a destra */
  flex-shrink:    0;
}

/* Desktop: nascosto */
@media (min-width: 992px) {
  .combo-nav__toggle {
    display: none;
  }
}

.combo-nav__toggle span {
  display:          block;
  width:            24px;
  height:           2px;
  background:       var(--nero);
  transition:       transform var(--duration-base) var(--ease-out),
                    opacity   var(--duration-base) var(--ease-out);
  transform-origin: center;
}

/* Toggle aperto → X */
.combo-nav__toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.combo-nav__toggle[aria-expanded="true"] span:nth-child(2) {
  opacity:   0;
  transform: scaleX(0);
}
.combo-nav__toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* ---------------------------------------------------------------
   6. HERO
--------------------------------------------------------------- */

.combo-hero {
  position: relative;
  display: flex;
  background-color: var(--bianco);
  height: calc(100vh - var(--nav-height));
  align-items: center;
  overflow-x: hidden;
}

/* Mobile: la navbar fixed è già compensata dal padding-top sul body */
@media (max-width: 991px) {
  .combo-hero {
    height: calc(100vh - var(--nav-height));
  }
}

#combo-hero__logo {
  display: none;
}

.combo-hero__text {
  position: absolute;
  width: 100%;
  text-align: center;
  bottom: 3rem;
}

.combo-hero__date {
  font-weight: var(--fw-extrabold);
  line-height: 1;
  color: var(--viola-chiaro);
}

.combo-hero__visual {
  position: absolute;
  width: 120vh;
  height: 80vh;
  left: calc( (120vh - 100vw)/-2.125 );
  bottom: 33vh;
}

.combo-float {
  position: relative;
  width: 100%;
  height:100%;
  will-change: transform;
  cursor: default;
  animation: float 3.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;

}

.combo-float img {
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: auto auto ;
}

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


@media (min-width: 992px) {
  #combo-hero__logo {
    display: block;
    position:absolute;
    top: 2rem;
    bottom: 2rem;
    left: 2rem;
    height: calc(100vh - var(--nav-height) - 4rem);
    width: auto;
    max-width: none;
  }
  #combo-hero__logo .line-from-right{
    fill: var(--bianco);
    transform-origin: right center;
    transform-box: fill-box;
    transition: transform 1.5s ease-in-out;
  }
  .line-from-bottom {
    fill: var(--bianco);
    transform-origin: bottom center;
    transform-box: fill-box;
    transition: transform 1.5s ease-out;
  }
  .line-from-top {
    fill: var(--bianco);
    transform-origin: top center;
    transform-box: fill-box;
    transition: transform 1.5s ease-out;
  }

  #combo-hero__logo:not(.loaded) .line-from-bottom,
  #combo-hero__logo:not(.loaded) .line-from-top {
    transform: scaleY(0);
  }
  #combo-hero__logo .circle {
    fill: var(--bianco);
    transition: all 1.5s ease-out;
    transform-origin: center center;
  }
  #combo-hero__logo:not(.loaded) .line-from-right{
    transform: scaleX(0);
  }
  #combo-hero__logo:not(.loaded) .circle {
    r: 0;
  }

  .combo-hero__text {
    position: absolute;
    top: 2rem;
    right: 2rem;
    bottom: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: right;
  }
  .combo-hero__visual {
    height: auto;
    top: 2rem;
    bottom: 0;
    width: calc(( 100vh - 4rem )*1.5);
    max-width: 100vw;
    left: auto;
    right: 2rem;
  }
  .combo-float {
    width: 90%;
    height: 90%;
    top: 5%;
  }
  .combo-hero .blocco_newsletter {
    position: absolute;
    top: 2rem;
    bottom: 2rem;
    left: 2rem;
  }
}

/* ---------------------------------------------------------------
   7. FLOATING ELEMENT (GSAP target)
--------------------------------------------------------------- */

.combo-float__placeholder {
  width:            360px;
  max-width:        100%;
  height:           360px;
  background:       var(--giallo-chiaro);
  border-radius:    50%;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  font-size:        8rem;
  /* Sostituire con <img> reale */
}

@media (max-width: 991px) {
  .combo-float__placeholder {
    width:  240px;
    height: 240px;
    font-size: 5rem;
  }
}


/* ---------------------------------------------------------------
   8. TICKER / MARQUEE
--------------------------------------------------------------- */

.combo-ticker {
  overflow:    hidden;
  padding:     1rem 0;
  white-space: nowrap;
  font-size:   3em;
  font-weight:var(--fw-bold);
  font-stretch: 90%;
  font-variation-settings: 'wght' 800, 'opsz' 156, 'wdth' 90;
  letter-spacing: -0.01em;
}

.combo-ticker__track {
  display:   inline-flex;
  gap:       2rem;
  /* Sposta esattamente la metà (= prima copia) → loop seamless */
  animation: ticker-scroll 18s linear infinite;
  will-change: transform;
}


@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (min-width: 992px) {
.combo-ticker { font-size: 4em; }

}

/* ---------------------------------------------------------------
   9. CARD EVENTO
--------------------------------------------------------------- */

.card-evento {
  padding:       1.5rem;
  height:        100%;
  display:       flex;
  flex-direction: column;
  gap:           0.75rem;
  transition:    transform var(--duration-base) var(--ease-out),
                 box-shadow var(--duration-base) var(--ease-out);
}

.card-evento:hover {
  transform:  translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

.card-evento__tipo { margin: 0; }
.card-evento__titolo { margin: 1em 0 .2em; }
.card-evento__sottotitolo { margin: 0 0 2em; }


.card-evento__meta {
  font-size:  0.8rem;
  opacity:    0.7;
  margin:     0;
  margin-top: auto;
  line-height: 1.4;
}


/* ---------------------------------------------------------------
   10. CARD AMBASSADOR
--------------------------------------------------------------- */
.col-ambassador { padding-bottom: 2rem; }

@media (min-width: 992px) {
  .col-ambassador { width: 20%; max-width:20%; }
}

.card-ambassador {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  gap:            0.5rem;
}

.card-ambassador__avatar {
  width:         75%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background:    var(--grigio);
  overflow:      hidden;
  flex-shrink:   0;
  transition:    transform var(--duration-base) var(--ease-out);
  margin-bottom: .8em;
}

.card-ambassador:hover .card-ambassador__avatar {
  transform: scale(1.06);
}

/* Quando contiene <img> */
.card-ambassador__avatar img {
  width:      100%;
  height:     100%;
  object-fit: cover;
}

.card-ambassador__nome {
  font-size:   0.9rem;
  font-weight: var(--fw-bold);
  margin:      0;
}

/* ---------------------------------------------------------------
   9. CARD TICKET
--------------------------------------------------------------- */

.card-ticket {
  position:      relative;
  padding:       1.5rem 1.5rem 1rem;
  height:        100%;
  display:       flex;
  flex-direction: column;
  gap:           0.75rem;
  transition:    transform var(--duration-base) var(--ease-out),
                 box-shadow var(--duration-base) var(--ease-out);
}

.card-ticket::after {
  content: '';
  position: absolute;
  top: 1.5rem;
  right: 2rem;
  height: 12rem;
  aspect-ratio: 6 / 10;
  background-repeat: no-repeat;
  background-size:contain;
  background-position: top left;
}

.card-ticket .card-body p,
.card-ticket .card-body ul {
  font-size: 0.9rem;
  color: var(--bianco);
}

.card-ticket .card-body svg {
  height: 1em;
  fill:none;
  stroke:var(--white);
  stroke-width:2.4615;
  stroke-linecap:round;
  stroke-linejoin:round;
  margin-bottom:1em
}

.card-ticket .card-footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding:1em 0 0;
}
.card-ticket .card-footer .ticket-price   {
  font-variation-settings: 'wght' 700;
  color: var(--bianco);
}

.card-ticket.bg-viola-scuro::after {
  background-image:url(img/illustrazione-ticket-1.png);
}
.card-ticket.bg-viola-scuro .card-footer {
  border-top: 1px solid var(--viola-x-chiaro);
}
.card-ticket.bg-viola-scuro .card-body svg { stroke:var(--viola-x-chiaro); }

.card-ticket.bg-verde-scuro::after {
  background-image:url(img/illustrazione-ticket-2.png);
}
.card-ticket.bg-verde-scuro .card-footer {
  border-top: 1px solid var(--verde-x-chiaro);
}
.card-ticket.bg-verde-scuro .card-body svg { stroke:var(--verde-x-chiaro); }


.card-ticket:hover {
  transform:  translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

@media (min-width: 992px) {
  .card-ticket::after { aspect-ratio: 10 / 10; }
}


/* ---------------------------------------------------------------
   11. LOCATION IMAGE PLACEHOLDER
--------------------------------------------------------------- */
#info .col-text {
  text-align: center;
  font-size: 1.8rem;
  line-height: 1.2em;
}

@media (min-width: 992px) {
  #info .col-text {
    display:          flex;
    flex-direction:   column;
    justify-content:  center;
    text-align: left;
  }
}






/* ---------------------------------------------------------------
   11. LOCATION IMAGE PLACEHOLDER
--------------------------------------------------------------- */

.combo-location__img-placeholder {
  width:         100%;
  height:        320px;
  background:    var(--grigio);
  border-radius: 8px;
  overflow:      hidden;
  /* Sostituire con <img src="..." alt="..."> */
}


/* ---------------------------------------------------------------
   12. NEWSLETTER FORM
--------------------------------------------------------------- */

.combo-newsletter {
  display:   flex;
  gap:       0;
  max-width: 400px;
  margin-top: 0.75rem;
}

.form-group {
  position: relative;
  margin-bottom: .5em;
  overflow: hidden;
}
.form-group:not(.form-privacy):not(.form-lingua) > label {
    text-transform: uppercase;
    margin-bottom: .5em;
}
input {
    display: block;
    padding: .5em;
    background: var(--bianco);
    border: 1px solid var(--bianco);
    /* border-color: transparent transparent rgba(var(--text-default-rgb), 1) transparent; */
}
.form-group input:not([type='checkbox']):not([type='submit']) {
    background: var(--bianco);
    width: 100%;
}
.form-privacy input, .form-lingua input {
    display: inline-block;
    margin-right: .3em;
    width: 1em !important;
}
.form-privacy a { text-decoration: underline; }

@media (min-width: 992px) {
  .form-group { margin-bottom: 1.5em; }
}

/* ---------------------------------------------------------------
   13. FOOTER
--------------------------------------------------------------- */

.combo-footer {
  border-top: 1px solid rgba(255,255,255,0.1);
}

.combo-footer__copy,
.combo-footer__partners {
  font-size: 0.8rem;
  margin:    0;
  opacity:   0.55;
}

.combo-footer__brand {
  font-size:   1.25rem;
  font-weight: var(--fw-extrabold);
  color:       var(--bianco);
}

footer img {
    height: 4em;
    width: auto;
}
@media screen and (min-width: 768px) {
    footer img {
        height: 6em;
        width: auto;
    }
}

/* ---------------------------------------------------------------
   14. GSAP ANIMATE — stato iniziale
   (GSAP imposta opacity:0 + translateY via JS;
    qui è definito solo per fallback no-JS)
--------------------------------------------------------------- */

[data-animate] {
  opacity:   1;
  transform: none;
}


/* ---------------------------------------------------------------
   15. RESPONSIVE TWEAKS
--------------------------------------------------------------- */

@media (max-width: 767px) {

  .combo-newsletter {
    flex-direction: column;
  }

  .combo-newsletter__btn {
    width: 100%;
  }

  .combo-hero__title {
    position: relative;
  }

}