:root {
  /* Definisci qui tutti i colori del tuo brand */
  --flamingo-gold: #E2A92F; 
  --flamingo-pink: #ff009d; /* Ho rimesso il fucsia di prima, modificalo con il tuo rosa esatto */
}

/* prettier-ignore */
/*# sourceMappingURL=user.css.map */


body {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300; /* Leggero e glamour */
  line-height: 1.6;
  color: #333; /* Grigio molto scuro, meno aggressivo del nero */
  -webkit-font-smoothing: antialiased;
}

/* Titoli in stile rivista */
h1, h2, h3, .font-custom-1 {
  font-family: 'The Seasons', serif;
}


@font-face {
  font-family: 'The Seasons'; /* Il nome che userai per richiamare il font */
  src: url('/assets/font/The-Seasons-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Migliora le prestazioni di caricamento */
}

.font-custom-1 {
  font-family: 'The Seasons', serif;
}


/* Importa il font */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap');

.font-custom-2 {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
}




/* FINE FONT CUSTOM ######################################################### */

/* Colore del testo */
.flamingo-pink {
    color: #FF009d !important;
}

/* Colore dello sfondo (opzionale, utile per bottoni) */
.bg-flamingo-pink {
    background-color: #FF009d !important;
    color: #ffffff; /* Testo bianco per contrasto sullo sfondo rosa */
}

/* Variante per i link con effetto hover */
a.flamingo-pink:hover {
    color: #d40082 !important; /* Un rosa leggermente più scuro al passaggio del mouse */
    text-decoration: underline;
}

.blockquote-content:before {
  color: var(--flamingo-pink) !important;
}

.btn-outline-flamingo {
  /* Colore del bordo e del testo */
  border-color: #fc8eac;
  color: #fc8eac;
  background-color: transparent;
  transition: all 0.3s ease;
}

.btn-outline-flamingo:hover, 
.btn-outline-flamingo:active, 
.btn-outline-flamingo:focus {
  /* Colore quando ci passi sopra o clicchi */
  background-color: #fc8eac;
  border-color: #fc8eac;
  color: #fff; /* Testo bianco al passaggio */
}


.flamingo-gold {
	color: var(--flamingo-gold) !important;
}

.border-gold {
  border-color: var(--flamingo-gold) !important;
}

.bg-flamingo-gold {
    background-color: #E2A92F !important;
    color: #ffffff; /* Testo bianco per contrasto sullo sfondo rosa */
}



.bg-flamingo-pink2 {
    background-color: #F6C5D1 !important;
}



.evidenziato-pink {
  /* Crea un gradiente che parte dal basso: giallo per il 40%, trasparente per il resto */
  background: linear-gradient(to top, #ff009d 70%, #ff009d 70%);
  
  /* Evita che il testo vada a capo in modo strano rompendo il background */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone; 
}

.evidenziato-gold {
  /* Crea un gradiente che parte dal basso: giallo per il 40%, trasparente per il resto */
  background: linear-gradient(to top, #E2A92F 70%, #E2A92F 70%);
  
  /* Evita che il testo vada a capo in modo strano rompendo il background */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone; 
}


.sfondo-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Taglia i bordi in eccesso per mantenere le proporzioni */
  z-index: 0; /* Assicurati che rimanga dietro al testo */
}


/* Logo verticale — default desktop */
.fancynavbar-brand-img {
  width: 41px;
  height: 90px;
}

/* Logo orizzontale — mobile */
@media (max-width: 575.98px) {
  .fancynavbar-brand-img {
    width: 172px;  /* adatta alla tua immagine */
    height: 30px;
  }
}




/* 1. Stato Iniziale: Tinta Pink #FF009D */
  #citazione-banner-pink .pink-tint {
      background-color: #FF009D;
      /* Il mix-blend-mode "color" applica la tinta mantenendo perfettamente luci e ombre dell'immagine */
      mix-blend-mode: color; 
      opacity: 1;
      /* Transizione: ci mette 1.8 secondi a svanire e parte con 0.6 secondi di ritardo ("tarda un pelo") */
      transition: opacity 1.8s ease-in-out 0.6s !important;
  }
  
  /* 2. Stato Attivo: Svanisce il Pink e tornano i colori */
  #citazione-banner-pink.is-visible .pink-tint {
      opacity: 0;
  }
  
  
.pulsanti-fissi-sx {
  position: fixed;
  bottom: 25px; /* Leggermente abbassati */
  left: 25px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px; /* Spazio ridotto tra i pulsanti */
}





/* Rimuove i pallini standard di default e i margini base */
.lista-logo-flamingo {
  list-style-type: none;
  padding-left: 0;
  margin-bottom: 0;
}

/* Stile per ogni singolo ingrediente */
.lista-logo-flamingo li {
  /* Imposta il tuo logo SVG come sfondo */
  background-image: url('/assets/img/logo-flamingo-rosa.svg'); 
  
  background-repeat: no-repeat;
  background-position: left center; /* Centra il logo verticalmente rispetto alla riga */
  
  /* Dimensione del logo SVG (larghezza e altezza) */
  background-size: 20px 20px; 
  
  /* Spazio a sinistra: deve essere più grande della dimensione del logo per non far sovrapporre il testo! */
  padding-left: 35px; 
  
  /* Spazio verticale tra un ingrediente e l'altro */
  margin-bottom: 12px; 
  
  /* Stile del testo (opzionale) */
  font-size: 16px;
  line-height: 1.5;
}








/* 1. Diamo un'ancora alla colonna che contiene il testo della descrizione */
.col-md.col-lg-12.col-xl-6 {
  position: relative !important; /* Diventa l'ancora di posizionamento */
  z-index: 1; /* Crea un nuovo contesto di stratificazione */
}

/* 2. Lo stile della descrizione nera per assicurarsi che stia SOPRA */
.col-md.col-lg-12.col-xl-6 p {
  position: relative; /* Serve per l'ordine di stratificazione */
  z-index: 2; /* Stai sopra la filigrana */
  background: transparent; /* Assicurati che non copra lo sfondo */
}

/* 3. Lo stile definitivo della filigrana "iconic." */
.testo-watermark-iconic {
  font-family: 'The Seasons', serif; /* Il tuo font glamour */
  color: var(--flamingo-pink, #ff009d); /* Rosa Flamingo */
  
  /* EFFETTO FILIGRANA MOLTO DISCRETO */
  opacity: 0.05; /* Super trasparente (5%). Deve essere un dettaglio appena percepibile */
  
  text-transform: lowercase; /* Tutto minuscolo fa più design */
  user-select: none; /* Impedisce la selezione accidentale col mouse */
  letter-spacing: -2px; /* Lettere compattate */
  line-height: 0.5; /* Riduce l'altezza per avvicinarlo al testo sovrastante */

  /* POSIZIONAMENTO ASSOLUTO DENTRO LA COLONNA */
  position: absolute !important;
  z-index: 0;        /* Sta DIETRO il testo nero (z-index: 2) */
  bottom: 10px;      /* Distanza dal fondo della colonna (non più sotto!) */
  left: 1rem;        /* Allineato a sinistra con un piccolo margine */
  width: auto;       /* Prende lo spazio di cui ha bisogno, non di più */
  
  /* DIMENSIONI GIGANTI */
  font-size: 6rem;   /* Enorme! (circa 96px) */
}

/* Regola la grandezza per i cellulari */
@media (max-width: 768px) {
  .testo-watermark-iconic {
    font-size: 4.5rem; /* Rimpicciolito sui telefoni */
    bottom: 5px;       /* Meno spazio sotto */
  }
}



/* PRE LOADER CATU */
  /* 1. Gestione dello sfondo scuro e della centratura perfetta */
  #preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #111111; /* Sfondo scuro, modifica se usavi un colore specifico */
    z-index: 999999; /* Lo tiene sopra a tutto il resto del sito */
    display: flex; /* Flexbox è la magia per centrare */
    justify-content: center; /* Centra orizzontalmente */
    align-items: center; /* Centra verticalmente */
    transition: opacity 0.3s ease;
  }

  /* 2. Gestione del logo */
  .preloader-flamingo-box {
    position: relative;
    width: 80px; /* Regola questa misura in base a quanto vuoi grande il logo */
  }
  
  .preloader-flamingo-base {
    display: block;
    width: 100%;
    opacity: 0.2;
    filter: grayscale(100%);
  }
  
  .preloader-flamingo-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: inset(100% 0 0 0); 
    -webkit-clip-path: inset(100% 0 0 0);
  }