@charset "utf-8";

/* ===== BASE ===== */

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {

  font-family: system-ui, Roboto, Arial, sans-serif;

  background: #000;

  color: #fff;

  overflow-x: hidden;

}



/* === PRELOADER === */

#preloader {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100vh;

  background-color: #000; /* Il nostro "sipario" nero profondo */

  display: flex;

  justify-content: center;

  align-items: center;

  z-index: 99999; /* Deve stare sopra a qualsiasi altra cosa */

  transition: opacity 0.8s ease, visibility 0.8s ease; /* Effetto dissolvenza morbido */

}



/* Il cerchietto magico d'oro */

.loader-circle {

  width: 50px;

  height: 50px;

  border: 3px solid rgba(255, 204, 0, 0.2); /* Bordo base semitrasparente */

  border-top-color: #ffcc00; /* La parte superiore color oro acceso */

  border-radius: 50%;

  animation: spin 1s linear infinite; /* Animazione di rotazione continua */

}



/* L'animazione per farlo girare */

@keyframes spin {

  to { transform: rotate(360deg); }

}



/* Questa classe verr� aggiunta dal JavaScript quando il sito � pronto */

.preloader-hidden {

  opacity: 0;

  visibility: hidden;

}



/* ===  FINE PRELOADER === */



/* Mette in pausa tutte le animazioni della Hero finch� il sito non � caricato */

body:not(.site-loaded) #hero * {

    animation-play-state: paused !important;

}



.panel {

  min-height: 100vh;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  text-align: center;

  padding: 2rem;

  position: relative;

  scroll-margin-top: 0px;

  /* La sezione rimane ferma e si occupa solo dell'opacit�, garantendo precisione nei link */

  opacity: 0;

  transition: opacity .9s ease;

}

.panel.visible { opacity: 1; }



/* Assegniamo il movimento dal basso verso l'alto solo ai contenitori interni */

.hero-content,

.conosciamoci-container,

.adulti-container,

.bambini-container,

.eventi-content-wrapper {

  transform: translateY(50px);

  transition: transform .9s ease;

}



.panel.visible .hero-content,

.panel.visible .conosciamoci-container,

.panel.visible .adulti-container,

.panel.visible .bambini-container,

.panel.visible .eventi-content-wrapper {

  transform: translateY(0);

}



.btn {

  display: inline-block;

  padding: .9rem 1.8rem;

  border-radius: 30px;

  text-decoration: none;

  font-weight: 700;

  margin-top: 6rem;

  transition: transform .25s, background .25s;

  background: rgba(255,255,255,.12);

  color: #fff;

  position: relative; z-index: 3;

}

.btn:hover { transform: scale(1.06); }

.btn-primary { background: #ffcc00; color: #000; }

.btn-primary:hover { background: #ffaa00; }



/* ===== NAV ===== */

.nav {

  position: fixed; top: 20px; right: 20px; z-index: 1000;

  display: flex; flex-direction: column; align-items: flex-end;

}

.nav-toggle {

  display: none;

  background: #ffcc00; color: #000;

  padding: .5rem 1rem; border-radius: 5px;

  cursor: pointer; font-weight: bold;

}

.nav-toggle { 

  transition: transform .25s ease, box-shadow .25s ease; 

}



.nav-toggle.active { 

  transform: scale(0.96); 

  box-shadow: 0 0 12px rgba(255,204,0,0.6); 

}



.nav-links { display: flex; }

.nav-links a {

  margin: 0 10px;

  padding: .6rem 1rem;

  border-radius: 6px;

  text-decoration: none;

  font-weight: 800;

  font-size: 1rem;

  color: #fff;

  transition: color .25s, background .25s;

  text-shadow:

    -1px -1px 0 #000, 1px -1px 0 #000,

    -1px  1px 0 #000, 1px  1px 0 #000,

     0    0   6px #000;

}

.nav-links a:hover { color: #ffcc00; background: rgba(255,255,255,.1); }



/* Mobile menu */

@media (max-width: 768px) {

  .nav-toggle { display: block; }



  /* stato chiuso: visibile ma collassato, così può animare */

  .nav-links {

    display: flex;                  /* resta nel flow */

    flex-direction: column;

    background: rgba(0,0,0,0.85);

    margin-top: 10px;

    border-radius: 8px;

    padding: 10px;



    max-height: 0;                  /* collassa */

    opacity: 0;

    transform: translateY(-8px);

    overflow: hidden;               /* nasconde contenuto in chiusura */

    pointer-events: none;           /* non cliccabile in chiusura */

    transition: max-height .35s ease, opacity .25s ease, transform .35s ease;

  }



  /* stato aperto: espanso e animato */

  .nav-links.active {

    max-height: 70vh;

    opacity: 1;

    transform: translateY(0);

    pointer-events: auto;

  }



  /* piccolo fade-in dei link durante l’apertura */

  .nav-links a {

    opacity: 0;

    transform: translateY(-6px);

    transition: opacity .25s ease .1s, transform .35s ease .1s;

  }

  .nav-links.active a {

    opacity: 1;

    transform: translateY(0);

  }



}





/* ===== HERO ===== */

/* ===== HERO DEFINITIVA ===== */

#hero.hero-final {

  position: relative;

  overflow: hidden;

  isolation: isolate;

  height: 100vh;

  display: flex;

  justify-content: center;

  align-items: center;

  padding: 0;

}



#hero.hero-final .hero-bg {

  position: absolute; inset: 0;

  background: url('../img/sfondo_hero.webp') center/cover no-repeat;

  z-index: 0;

}



/* Sipario Unico cornice */

#hero.hero-final .hero-curtain {

  position: absolute; inset: 0;

  width: 100%; height: 100%; object-fit: cover;

  object-position: top center;

  z-index: 4; 

  pointer-events: none;

}



#hero-particles {

  position: absolute; inset: 0; z-index: 2; pointer-events: none;

}



/* Contenitore Layout */

#hero.hero-final .hero-content {

  position: relative; z-index: 5;

  width: 100%; height: 100%;

  max-width: 1400px; /* Larghezza massima schermi ultra-wide */

  margin: 0 auto;

  display: flex; align-items: center;

  padding: 0 1.5rem;

}



.hero-grid {

  display: grid;

  grid-template-columns: 50% 50%; /* La magia: crea 2 colonne identiche e fisse! */

  width: 100%;

  height: 100%;

  align-items: center;

}



/* --- DESKTOP WIDE (>1035px) --- */

.hero-text-col {

  

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

  /* La magia matematica: si sposta esattamente al centro schermo e si ingrandisce */

  transform: translateX(50%) scale(1.4);

  animation: heroMoveLeft 1.2s cubic-bezier(0.25, 1, 0.5, 1) 2.0s forwards;

}



@keyframes heroMoveLeft {

  to { transform: translateX(1vw) translateY(4vh) scale(1); }

}



.hero-logo {

  width: 100%;

  display: flex; justify-content: center;

  opacity: 0;

  animation: fadeInLogo 0.8s ease 0.3s forwards;

}

@keyframes fadeInLogo { to { opacity: 1; } }



.hero-logo img {

  width: 100%;

  max-width: 800px;

  height: auto;

  object-fit: contain;

  filter: drop-shadow(0 0 10px rgba(255,204,0,0.3));

}



.hero-logo .logo-horizontal { display: block; }

.hero-logo .logo-vertical  { display: none; }



.hero-tagline {

  margin-top: 1rem;

  font-size: clamp(1.4rem, 2.5vw, 1.8rem);

  color: #fff;

  text-shadow: 0 2px 4px rgba(0,0,0,0.8);

  white-space: nowrap; /* Mantiene la frase su una riga */

  opacity: 0;

  animation: fadeInText 0.8s ease 0.5s forwards;

}

@keyframes fadeInText { to { opacity: 1; } }



.btn-hero {

  margin-top: 2.5rem !important;

  opacity: 0;

  animation: fadeInText 0.8s ease 0.8s forwards;

}



/* Immagine Lalo */

.hero-image-col {

 

  height: 100%;

  display: flex;

  justify-content: center;

  align-items: flex-end; /* Tocca la parte bassa dello schermo */

  padding-top: 10vh;

}



.hero-lalo-img {

  max-height: 85vh; /* Pi� grande possibile senza toccare i drappi in alto */

  width: auto;

  object-fit: contain;

  object-position: bottom;

  filter: drop-shadow(0 0 15px rgba(255, 204, 0, 0.4));

  opacity: 0;

  animation: fadeInUser 1.2s ease 2.5s forwards; /* Appare DOPO lo spostamento del logo */

  transform: translateX(0vw);	

}

@keyframes fadeInUser { to { opacity: 1; } }





/* --- DESKTOP 4:3 (769px - 1035px) --- */

@media (max-width: 1035px) {

  .hero-logo .logo-horizontal { display: none; }

  .hero-logo .logo-vertical  { display: block; }

  .hero-logo img { max-width: 320px; } /* Logo verticale pi� contenuto */

  .hero-tagline { white-space: normal; padding: 0 1rem; } /* Pu� andare a capo */

  .hero-text-col { transform: translateX(50%) scale(1.15); } /* Si allarga meno all'inizio */

  .hero-lalo-img { max-height: 70vh; }

}





/* --- SMARTPHONE (< 768px) --- */

@media screen and (max-width: 768px) and (orientation: portrait) {

  #hero.hero-final { align-items: flex-start; }

  

  .hero-content { padding: 0; }

  .hero-grid { position: relative; width: 100%; height: 100%; }



  .hero-text-col {

    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-start;

    /* Rimozione del transform parent per non rompere il bottone */

    transform: none;

    animation: none;

    z-index: 10;

  }



  /* Animazione: Il logo e il claim partono dal centro ed emergono verso l'alto */

  .hero-logo {

    transform: translateY(30vh) scale(1.25);

    opacity: 0;

    animation: mobileElementsUp 1.2s cubic-bezier(0.25, 1, 0.5, 1) 2.0s forwards, fadeInMobile 0.8s ease 0.3s forwards;

  }

  .hero-tagline {

    /* Le animazioni che abbiamo impostato prima */

    transform: translateY(30vh) scale(1.25);

    opacity: 0;

    animation: taglineUpMobile 1.2s cubic-bezier(0.25, 1, 0.5, 1) 2.0s forwards, fadeInMobile 0.8s ease 0.3s forwards;

    

    /* Grandezza del font (leggermente rimpicciolita per aiutare a stare su una riga) */

    font-size: clamp(0.85rem, 3.5vw, 1.1rem);

    margin-top: 2.0rem;

    

    /* LA MAGIA PER CENTRARE LA RIGA SINGOLA */

    width: 100%;           /* Prende tutto lo spazio orizzontale disponibile */

    max-width: none;       /* Rimuove i vecchi limiti (es. 300px) che lo spingevano a destra */

    text-align: center;    /* Forza l'allineamento al centro esatto */

    white-space: nowrap;   /* Vieta di andare a capo */

  }



  @keyframes mobileElementsUp { to { transform: translateY(6vh) scale(1); } }

  @keyframes fadeInMobile { to { opacity: 1; } }

  @keyframes taglineUpMobile { 

    to { 

      /* Il logo si ferma a 5vh. Noi facciamo salire il claim fino a 1.5vh! */

      transform: translateY(2vh) scale(1); 

    } 

  }	





  .hero-logo img { max-width: 400px; }



  /* IL BOTTONE SGANCIATO: Va a finire SOPRA la tua giacca in basso */

  .btn-hero {

    position: absolute;

    bottom: 10vh;

    left: 50%;

    transform: translateX(-50%);

    margin: 0 !important;

    opacity: 0;

    animation: fadeInBtnMobile 1s ease 3.2s forwards;

    z-index: 15;

    box-shadow: 0 4px 15px rgba(0,0,0,0.6);

	white-space: nowrap;

  }

  @keyframes fadeInBtnMobile { to { opacity: 1; transform: translateX(-50%); } }



  /* Immagine Lalo incollata al fondo */

  .hero-image-col {

    position: absolute;

    bottom: 0; left: 0; width: 100%;

    height: 60vh;

    padding-top: 0;

    z-index: 5;

  }

  .hero-lalo-img { 

    max-height: 60vh; 

    transform: translateX(0); /* Riporta Lalo esattamente al centro su mobile */

  }

}



/* --- SMARTPHONE IN ORIZZONTALE (Landscape - Schermi molto bassi) --- */

@media screen and (max-height: 500px) and (orientation: landscape) {

  

  /* L'animazione iniziale parte pi� contenuta per evitare di sfondare il tetto */

  .hero-text-col {

    transform: translateX(50%) scale(1.1); 

  }



  /* Il logo non deve occupare troppo spazio in altezza */

  .hero-logo img {

    max-width: 200px; /* Logo pi� piccolo */

  }



  /* Il testo su una riga e rimpicciolito */

  .hero-tagline {

    font-size: clamp(0.8rem, 2vw, 1.1rem);

    margin-top: 0.5rem;

    white-space: nowrap;

    padding: 0 1rem;

  }



  /* Bottone pi� compatto e vicino */

  .btn-hero {

    margin-top: 1rem !important;

    padding: 0.5rem 1.2rem;

  }



  /* La tua foto calibrata per la poca altezza dello schermo orizzontale */

  .hero-lalo-img {

    max-height: 85vh; 

  }

}



/* Video */

.video-container { margin-top: 1.2rem; max-width: 360px; }

.video-container iframe {

  width: 100%; height: auto; aspect-ratio: 9/16; border-radius: 12px;

}



/* Sezioni */





/* Animazioni */

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }



@keyframes rise {

  from { transform: translateY(0) scale(1); opacity: 0.9; }

  to   { transform: translateY(-60px) scale(0.2); opacity: 0; }

}





/* === SEZIONE CONOSCIAMOCI === */

#conosciamoci {

  scroll-margin-top: 0px; 

  min-height: 100vh; /* FIX: Rimosso il 1080px che sballava la centratura */

  padding: 3rem 0 4rem; /* FIX: Stesso padding di Adulti e Bambini */

}



.conosciamoci-container {

  max-width: 1200px;

  margin: 0 auto;

  padding: 0rem 1rem;

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

}



.video-bio {

  display: grid;

  grid-template-columns: 1fr 1fr 1fr; /* video - bio - recensioni */

  gap: 2rem;

  margin-top: 4rem;

  margin-bottom: 3rem;

  align-items: stretch;   /* tutte le colonne stessa altezza */

  text-align: left;

}



/* Evidenzia le 3 colonne con riquadri accennati */

.video-bio > div {

  background: rgba(255,255,255,0.05); /* leggero fondo semitrasparente */

  border-radius: 12px;

  padding: 1.2rem;

  box-shadow: 0 0 12px rgba(0,0,0,0.25); /* ombra leggera */

}



/* Stile per colonna "Chi sono" */

.bio {

  margin: 0 auto;          /* centrata */

  text-align: justify;     /* testo giustificato */

  max-width: 315px;        /* stessa larghezza del video e delle recensioni */

}



.bio h2 {

  text-align: center;   /* centra solo il titolo */

}





.video-bio .video, 

.video-bio .bio,

.video-bio .recensioni {

  flex: none; /* annulla la regola flex */

}





.video-bio h2 {

  margin-bottom: 1rem;

}



.social-icons {

  margin-top: 1.5rem;

}



.social-icons a {

  display: inline-block;

  margin: 0 0.5rem;

}



#conosciamoci .social-icons img {

  width: clamp(40px, 7vw, 95px); /* Minimo 55px su mobile, cresce fino a 95px su schermi giganti */

  height: auto;

  border-radius: 50%;

  transition: transform 0.3s;

}



.social-icons img:hover {

  transform: scale(1.1);

}



/* === Recensioni con fade === */

.recensioni-fade {

  position: relative;

  max-width: 320px;

  margin: 0 auto;

  min-height: 300px; /* circa l'altezza di un video short 315x560 */

}



.recensione-card {

  position: absolute;

  inset: 0;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  opacity: 0;

  transform: scale(0.96);

  transition: opacity 1s ease, transform 1s ease;

  padding: 1rem;

  border-radius: 12px;

  text-align: center;

}



.recensione-card.active {

  opacity: 1;

  transform: scale(1);

}





.recensione-card p {

  font-style: italic;

  font-size: 1rem;

  margin-bottom: 0.5rem;

}



.recensioni h2 {

  margin-bottom: 1rem;

  text-align: center; /* forza centratura titolo */

}



/* === STILE AUTORE E LOGHI PIATTAFORME === */

.recensione-info {

  display: flex;

  flex-direction: column;

  align-items: center;

  margin-top: 1rem;

}



.recensione-card .autore {

  font-size: 1.1rem;

  color: #ffcc00; /* Nomi dorati per dare risalto alla persona reale */

  font-weight: bold;

  margin-bottom: 0.6rem;

}



.piattaforma-logo {

  height: 35px; /* Regola questa altezza per fare i loghi pi� grandi o pi� piccoli */

  width: auto;

  opacity: 0.5; /* Rende il logo semitrasparente per non rubare la scena */

  /* La riga qui sotto trasforma i loghi colorati in loghi bianchi/grigio chiaro */

  filter: grayscale(100%) brightness(1000%); 

  transition: opacity 0.4s ease, filter 0.4s ease;

}











/* Responsive */

@media (max-width: 768px) {

  .video-bio {

    grid-template-columns: 1fr; 

    gap: 1.5rem;

    text-align: center;

    margin-top: 0; /* IL FIX: Azzeriamo il margine extra su mobile! */

  }



  .video-bio > div {

    height: auto !important;   /* i riquadri si adattano al contenuto */

    max-width: 315px;          /* stessa larghezza del video */

    margin: 0 auto;            /* centrati orizzontalmente */

  }



  .recensioni {

    width: 100%;            /* prende tutta la larghezza del parent (.recensioni) */

	max-width: 315px;          /* allinea la colonna al video */

    margin: 0 auto;

  }



  .recensioni-fade {

    width: 100%;            /* prende tutta la larghezza del parent (.recensioni) */

    max-width: 315px;       /* stesso limite del video */

    margin: 0 auto;         /* centrato */

    box-sizing: border-box; /* include padding nel calcolo della larghezza */

  }





  .recensione-card {

    padding: 0.75rem;          /* meno padding, aspetto più “pieno” */

  }

}







/* Contenitore video stile Shorts */

.video {

  position: relative;

  width: 100%;

  max-width: 315px; /* tipica larghezza di uno Short */

  margin: 0 auto;

  aspect-ratio: 9 / 16; /* verticale */

  overflow: hidden;

  border-radius: 12px;

  box-shadow: 0 4px 12px rgba(0,0,0,0.2);

}



.video iframe {

  position: absolute;

  width: 100%;

  height: 100%;

  top: 0;

  left: 0;

}



/* === Sfondo sezione Conosciamoci === */

#conosciamoci {

  position: relative;

  overflow: hidden;

  isolation: isolate; /* come in hero */

}



#conosciamoci .conosciamoci-bg {

  position: absolute;

  inset: 0;

  background: url('../img/sfondo_conosciamoci.webp') center/cover no-repeat;

  opacity: 0;

  animation: fadeIn 1.5s ease forwards;

  z-index: 0;

}



#conosciamoci .conosciamoci-container {

  position: relative;

  z-index: 1; /* il contenuto rimane sopra lo sfondo */

}







/* === SEZIONE ADULTI === */

#adulti {

  position: relative;

  overflow: hidden;

  isolation: isolate;

  padding: 3rem 0 4rem;

}



#adulti .adulti-bg {

  position: absolute;

  inset: 0;

  background: url('../img/sfondo_adulti.webp') center/cover no-repeat;

  opacity: 0;

  animation: fadeIn 1.5s ease forwards;

  z-index: 0;

}



.adulti-container {

  position: relative;

  z-index: 1;

  max-width: 1200px;

  margin: 0 auto;

  padding: 0 1rem;

  text-align: center;

}



.adulti-container h2 {

  font-size: clamp(2rem, 5vw, 2.6rem);

  margin-bottom: 2.5rem;

  color: #fff;

}



/* === LAYOUT A 3 COLONNE === */

.adulti-cards {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 2.2rem;

  justify-items: center;

  align-items: start;

  justify-content: center;

  max-width: 1350px;

  margin: 0 auto;

  padding: 0 1.5rem;

}



.adulti-col {

  display: flex;

  justify-content: center;

  background: transparent;

  padding: 0;

  border-radius: 0;

  box-shadow: none;

}



/* === CARD BASE === */

.adulti-card {

  width: 100%;

  max-width: 440px;

  min-width: 320px;

  height: 520px;

  perspective: 1000px;

  position: relative;

  display: flex;

  flex-direction: column;

  align-items: stretch;

  justify-content: center;

}



/* === CARD INTERNA === */

.adulti-card .card-inner {

  position: relative;

  width: 100%;

  height: 100%;

  transform-style: preserve-3d;

  transition: transform 0.8s ease;

}



.adulti-card.flipped .card-inner {

  transform: rotateY(180deg);

}



/* === FRONTE & RETRO === */

#adulti .card-front,

#adulti .card-back {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  border-radius: 18px;

  overflow: hidden;

  backface-visibility: hidden;

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), inset 0 0 25px rgba(255, 255, 255, 0.1);

  border: 2px solid rgba(255, 255, 255, 0.1);

  color: #eee;

}



/* Fronte scuro stile carta – effetto piatto e realistico */

#adulti .card-front {

  background: linear-gradient(160deg, #262626, #1a1a1a);

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  text-align: center;

  padding: 2rem 1rem;



  /* Effetto carta da gioco */

  border-radius: 18px;

  border: 1px solid rgba(255, 255, 255, 0.08); /* bordo chiaro leggero */

  box-shadow:

    0 2px 10px rgba(0, 0, 0, 0.6),  /* ombra diffusa esterna */

    inset 0 0 3px rgba(255, 255, 255, 0.05); /* lieve contrasto interno */

  transition: transform 0.3s ease, box-shadow 0.4s ease;

}



#adulti .card-front:hover {

  transform: translateY(-3px);

  box-shadow:

    0 4px 14px rgba(0, 0, 0, 0.7),

    inset 0 0 3px rgba(255, 255, 255, 0.07);

}







/* Retro scuro decorato con triangolini regolari */

#adulti .card-back {

  background-color: #1b1b1b;

  background-image:

    repeating-linear-gradient(60deg, rgba(60, 60, 60, 0.35) 0, rgba(60, 60, 60, 0.35) 1px, transparent 1px, transparent 10px),

    repeating-linear-gradient(-60deg, rgba(60, 60, 60, 0.35) 0, rgba(60, 60, 60, 0.35) 1px, transparent 1px, transparent 10px);

  background-size: 10px 10px;

  transform: rotateY(180deg);

  display: flex;

  justify-content: center;

  align-items: center;

  border-radius: 18px;

  box-shadow:

    inset 0 0 15px rgba(255, 255, 255, 0.05),

    0 6px 18px rgba(0, 0, 0, 0.45);

}













/* === CONTENUTO FRONTE ADULTI (come Bambini) === */

#adulti .card-front h3 {

  margin-bottom: 0.8rem;

  font-size: 1.3rem;

  font-weight: 700;

  color: #fff;

}



#adulti .card-front img {

  width: 120px;

  height: 120px;

  object-fit: contain;

  border-radius: 50%;

  background: radial-gradient(circle at center, #555 0%, #222 80%);

  box-shadow: inset 0 0 12px rgba(255,255,255,0.15);

  margin-bottom: 0.8rem;

}



#adulti .card-front p {

  font-size: 0.95rem;

  color: #ddd;

  line-height: 1.5;

  max-width: 240px;

}





/* === APICI SEZIONE ADULTI stile carta da gioco === */



#adulti .card-front .apice,

#adulti .card-back .apice {

  position: absolute;

  font-family: 'Georgia', 'Times New Roman', serif; /* → font classico e universale */

  color: rgba(255, 255, 255, 0.85); /* → testo più leggibile su sfondo scuro */

  font-weight: 700; /* → spessore maggiore per le lettere */

  font-size: 1rem; /* → grandezza base dell’intero blocco (L+M) */

  letter-spacing: 0.08em; /* → leggero spazio tra le lettere */

  display: inline-block; /* → serve per poter applicare scaleX */

  transform: scaleX(1.2); /* → allunga orizzontalmente tutto il gruppo L/M */

}



/* --- Simboli superiori (apice alto) --- */

#adulti .card-front .apice.top::before,

#adulti .card-back .apice.top::before {

  text-shadow: 0 0 6px rgba(255, 255, 255, 0.3);

  content: "L";

  display: block;

  font-size: 3rem; /* → dimensione della lettera L */

  color: #ffffff; /* → colore principale */

  transform: scaleX(0.35); /* → allungamento orizzontale individuale */

  letter-spacing: 0.05em; /* → spaziatura fine interna */

}



#adulti .card-front .apice.top::after,

#adulti .card-back .apice.top::after {

  text-shadow: 0 0 6px rgba(255, 204, 0, 0.4); /* Luminescenza sulla lettera */

  content: "𝕄";

  display: block;

  font-size: 1.5rem; /* dimensione della lettera M */

  color: #ffcc00; /* colore secondario (giallo oro) */

  margin-top: -0.6rem; /* distanza verticale da L */

  transform: scaleX(0.6); /* anche la M leggermente allungata */

}



/* --- Simboli inferiori (apice basso, ruotato) --- */

#adulti .card-front .apice.bottom::before,

#adulti .card-back .apice.bottom::before {

  text-shadow: 0 0 6px rgba(255, 204, 0, 0.4); /* Luminescenza sulla lettera */

  content: "𝕄";

  display: block;

  font-size: 1.5rem;

  color: #ffcc00;

  transform: rotate(180deg) scaleX(0.6); /* → ruota + allunga orizzontalmente */

  letter-spacing: 0.05em;

}



#adulti .card-front .apice.bottom::after,

#adulti .card-back .apice.bottom::after {

  text-shadow: 0 0 6px rgba(255, 255, 255, 0.3);

  content: "L";

  display: block;

  font-size: 3rem;

  color: #ffffff;

  margin-top: -0.6rem;

  transform: rotate(180deg) scaleX(0.35);

}



/* --- Posizionamento angoli --- */

#adulti .card-front .apice.top {

  top: 12px;

  left: 14px;

}



#adulti .card-front .apice.bottom {

  bottom: 12px;

  right: 14px;

}





/* === RIDIMENSIONAMENTO COERENTE === */



/* Step 1: fino a 1150px */

@media (max-width: 1150px) {

  .adulti-cards {

    gap: 1.8rem;

    padding: 0 1.2rem;

  }

  .adulti-card {

    max-width: 390px;

    min-width: 280px;

    height: 460px;

  }

}



/* Step 2: fino a 1000px */

@media (max-width: 1000px) {

  .adulti-cards {

    gap: 1.3rem;

    padding: 0 1rem;

  }

  .adulti-card {

    max-width: 360px;

    min-width: 250px;

    height: 420px;

  }

}





/* === STEP 3: smartphone (fino a 850px) === */

@media (max-width: 850px) {

  .adulti-cards {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 1.8rem;

    padding: 0;

  }



  .adulti-card {

    width: 315px; /* fissa come Conosciamoci */

    min-height: 480px;

  }

}















/* INIZIO ALTRI PARAMETRI DELLE CARD */



.card-inner {

  position: relative;

  width: 100%;

  height: 100%;

  transform-style: preserve-3d;

  transition: transform 0.8s ease;

}



.adulti-card.flipped .card-inner {

  transform: rotateY(180deg);

}



/* Facce */

.card-front,

.card-back {

  position: absolute;

  inset: 0;

  background: rgba(255, 255, 255, 0.08);

  border-radius: 12px;

  padding: 1.2rem;

  box-shadow: 0 0 12px rgba(0, 0, 0, 0.25);

  backface-visibility: hidden;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: flex-start;

  text-align: center;

  transition: background 0.3s ease;

  height: 100%;

}



.card-front:hover {

  background: rgba(255, 255, 255, 0.12);

}



.card-front img {

  width: 100%;

  max-width: 240px;

  border-radius: 10px;

  margin: 1rem auto 1.5rem;

  transition: transform 0.3s ease;

}



.card-front:hover img {

  transform: scale(1.05);

}



.card-front h3,

.card-back h3 {

  font-size: 1.4rem;

  margin-bottom: 1rem;

  font-weight: 700;

}



.card-front p,

.card-back p {

  font-size: 1rem;

  line-height: 1.6;

  margin-bottom: 1rem;

  color: #f1f1f1;

}



.card-back {

  transform: rotateY(180deg);

}



/* === PULSANTE CHIEDIMI DI PIù SEZIONE ADULTI === */

#adulti .btn-contatti {

  display: inline-block;

  margin-top: 1.2rem;

  padding: 0.7rem 1.5rem;

  border-radius: 999px;

  background: #ffcc00;

  color: #000;

  font-weight: 700;

  border: none;

  cursor: pointer;

  transition: all .25s ease;

}



#adulti .btn-contatti:hover {

  background: #ffaa00;

  transform: scale(1.05);

}





/* === Effetto Sparkle bianco-azzurro (versione definitiva) === */

.sparkle {

  position: absolute;

  width: 6px;

  height: 6px;

  border-radius: 50%;

  background: radial-gradient(circle, rgba(160, 230, 255, 0.95) 0%, transparent 70%);

  box-shadow: 0 0 8px rgba(140, 220, 255, 0.8),

              0 0 14px rgba(200, 240, 255, 0.5);

  pointer-events: none;

  animation: sparkleFloat 1.4s ease-out forwards; /* durata più lunga ma stesso movimento */

}



/* === Animazione di salita e dissolvenza === */

@keyframes sparkleFloat {

  from { opacity: 1; transform: translateY(0) scale(1); }

  to   { opacity: 0; transform: translateY(-20px) scale(0.5); }

}



/* === Sparkle versione più scura per la sezione BAMBINI === */

#bambini .sparkle {

  background: radial-gradient(circle, rgba(100, 180, 255, 0.95) 0%, transparent 70%);

  box-shadow:

    0 0 8px rgba(80, 160, 255, 0.9),

    0 0 14px rgba(60, 130, 255, 0.7),

    0 0 20px rgba(40, 100, 255, 0.6);

  width: 6px;

  height: 6px;

  border-radius: 50%;

  pointer-events: none;

  animation: sparkleFloat 1.4s ease-out forwards;

}











/* === SEZIONE BAMBINI (versione coerente con ADULTI) === */

#bambini {

  position: relative;

  overflow: hidden;

  isolation: isolate;

  contain: paint;

  padding: 3rem 0 4rem;

  min-height: 100vh;

}





#bambini .bambini-bg {

  position: absolute;

  inset: 0;

  background: url('../img/sfondo_bambini.webp') center/cover no-repeat;

  opacity: 0.001; /* <- piccolo valore per forzare il rendering iniziale */

  animation: fadeIn 1.5s ease forwards;

  animation-delay: 0.3s; /* leggero ritardo per coerenza col resto */

  z-index: 0;

  will-change: opacity, transform; /* forza la GPU a gestire il fade */

}







.bambini-container {

  position: relative;

  z-index: 1;

  max-width: 1200px;

  margin: 0 auto;

  padding: 0 1rem;

  text-align: center;

}



.bambini-container h2 {

  font-size: clamp(2rem, 5vw, 2.6rem);

  margin-bottom: 2.5rem;

  color: #000;

}



/* Layout 3 colonne come Adulti */

.bambini-cards {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 2.2rem;

  justify-items: center;

  align-items: start;

  justify-content: center;

  max-width: 1350px;

  margin: 0 auto;

  padding: 0 1.5rem;

}



.bambini-col {

  display: flex;

  justify-content: center;

  background: transparent;

}



/* === CARD BASE === */

.bambini-card {

  width: 100%;

  max-width: 440px;

  min-width: 320px;

  height: 520px;

  perspective: 1000px;

  position: relative;

  display: flex;

  flex-direction: column;

  align-items: stretch;

  justify-content: center;

}



/* === CARD INTERNA === */

.bambini-card .card-inner {

  position: relative;

  width: 100%;

  height: 100%;

  transform-style: preserve-3d;

  transition: transform 0.8s ease;

}



.bambini-card.flipped .card-inner {

  transform: rotateY(180deg);

}



/* === FRONTE & RETRO === */

#bambini .card-front,

#bambini .card-back {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  border-radius: 18px;

  overflow: hidden;

  backface-visibility: hidden;

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25), inset 0 0 25px rgba(255, 255, 255, 0.2);

  border: 2px solid rgba(0, 0, 0, 0.1);

  color: #222;

}



/* Fronte */

#bambini .card-front {

  background: linear-gradient(145deg, #fafafa, #f0efeb);

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  text-align: center;

  padding: 2rem 1rem;

  transition: transform 0.3s ease, box-shadow 0.4s ease;

}



#bambini .card-front:hover {

  transform: translateY(-3px);

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);

}



/* Retro */

#bambini .card-back {

  background-color: #f6f6f6;

  background-image:

    repeating-linear-gradient(60deg, rgba(200, 200, 200, 0.3) 0, rgba(200, 200, 200, 0.3) 1px, transparent 1px, transparent 10px),

    repeating-linear-gradient(-60deg, rgba(200, 200, 200, 0.3) 0, rgba(200, 200, 200, 0.3) 1px, transparent 1px, transparent 10px);

  background-size: 10px 10px;

  transform: rotateY(180deg);

  display: flex;

  justify-content: center;

  align-items: center;

}



/* === CONTENUTI === */

#bambini .card-front h3 {

  margin-bottom: 0.8rem;

  font-size: 1.3rem;

  font-weight: 700;

  color: #000;

}



#bambini .card-front img {

  width: 120px;

  height: 120px;

  object-fit: contain;

  border-radius: 50%;

  background: radial-gradient(circle at center, #fff 0%, #ddd 80%);

  box-shadow: inset 0 0 10px rgba(0,0,0,0.1);

  margin-bottom: 0.8rem;

}



#bambini .card-front p {

  font-size: 0.95rem;

  color: #333;

  line-height: 1.5;

  max-width: 240px;

}



/* === APICI STILE CARTA === */

#bambini .card-front .apice,

#bambini .card-back .apice {

  position: absolute;

  font-family: 'Georgia', 'Times New Roman', serif;

  color: rgba(0, 0, 0, 0.8);

  font-weight: 700;

  font-size: 1rem;

  letter-spacing: 0.08em;

  display: inline-block;

  transform: scaleX(1.2);

}



/* --- Apice superiore --- */

#bambini .card-front .apice.top::before,

#bambini .card-back .apice.top::before {

  text-shadow: 0 0 5px rgba(255, 255, 255, 0.4);

  content: "L";

  display: block;

  font-size: 3rem;

  color: #000;

  transform: scaleX(0.35);

}



#bambini .card-front .apice.top::after,

#bambini .card-back .apice.top::after {

  text-shadow: 0 0 5px rgba(51, 153, 255, 0.5);

  content: "𝕄";

  display: block;

  font-size: 1.5rem;

  color: #3399ff;

  margin-top: -0.6rem;

  transform: scaleX(0.6);

}



/* --- Apice inferiore (ora ruotato correttamente) --- */

#bambini .card-front .apice.bottom::before,

#bambini .card-back .apice.bottom::before {

  text-shadow: 0 0 5px rgba(51, 153, 255, 0.5);

  content: "𝕄";

  display: block;

  font-size: 1.5rem;

  color: #3399ff;

  transform: rotate(180deg) scaleX(0.6);

}



#bambini .card-front .apice.bottom::after,

#bambini .card-back .apice.bottom::after {

  text-shadow: 0 0 5px rgba(255, 255, 255, 0.4);

  content: "L";

  display: block;

  font-size: 3rem;

  color: #000;

  margin-top: -0.6rem;

  transform: rotate(180deg) scaleX(0.35);

}



/* --- Posizione angoli --- */

#bambini .card-front .apice.top {

  top: 12px;

  left: 14px;

}



#bambini .card-front .apice.bottom {

  bottom: 12px;

  right: 14px;

}



/* === RETRO === */

#bambini .card-back-content {

  position: relative;

  z-index: 1;

  text-align: center;

  padding: 1rem;

  color: #222;

}



#bambini .card-back-content p {

  color: #000000; /* Nero puro */

}



#bambini .card-back-content h3 {

  margin-bottom: 0.8rem;

}



/* === RESPONSIVE === */

@media (max-width: 1150px) {

  .bambini-cards {

    gap: 1.8rem;

    padding: 0 1.2rem;

  }

  .bambini-card {

    max-width: 390px;

    min-width: 280px;

    height: 460px;

  }

}



@media (max-width: 1000px) {

  .bambini-cards {

    gap: 1.3rem;

    padding: 0 1rem;

  }

  .bambini-card {

    max-width: 360px;

    min-width: 250px;

    height: 420px;

  }

}



@media (max-width: 850px) {

  .bambini-cards {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 1.8rem;

    padding: 0;

  }



  .bambini-card {

    width: 315px;

    height: 480px;

  }

}





/* === Pulsante Chiedimi di più === */

#bambini .btn-contatti {

  color: #111;

  background: #ffcc00;

  border: 1px solid rgba(0, 0, 0, 0.2);

  font-weight: 700;

  border-radius: 999px;

  margin-top: 1rem;

  padding: 0.7rem 1.2rem;

  cursor: pointer;

  transition: transform .2s ease, background .2s ease;

}



#bambini .btn-contatti:hover {

  background: #ffd633;

  transform: scale(1.05);

}













/* === SEZIONE EVENTI === */







/* ==========================================================

   SEZIONE EVENTI: DESKTOP FLOATING & MOBILE STICKY SCALE

   ========================================================== */

#eventi {

  background: #000;

  padding: 0 !important;

  position: relative;

  height: 100vh;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

}



.eventi-content-wrapper {

  width: 100%;

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

}



/* === GLI ELEMENTI FLUTTUANTI SU DESKTOP === */

.eventi-header {

  position: absolute;

  top: 0; left: 0; width: 100%;

  text-align: center;

  padding-top: 6vh;

  z-index: 20;

  pointer-events: none; /* Ignora il mouse, cos� puoi cliccare le carte dietro */

}



.eventi-header h2 {

  font-size: clamp(2rem, 4vw, 3.5rem);

  color: #ffcc00;

  margin: 0;

  text-shadow: 0 4px 15px rgba(0,0,0,1); /* Ombra nera fortissima per leggibilit� */

}



.collaborazioni-bottom-ventaglio {

  position: absolute;

  bottom: 0; left: 0; width: 100%;

  z-index: 20;

  padding-bottom: 3vh;

  text-align: center;

  pointer-events: none;

}

.trusted-by { font-size: 0.8rem; letter-spacing: 2px; color: #fff; text-transform: uppercase; margin-bottom: 1rem; text-shadow: 0 2px 5px rgba(0,0,0,1);}

.logo-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 2vw; align-items: center; }

.logo-row img { max-width: 100px; max-height: 35px; filter: grayscale(100%) brightness(1000%); opacity: 0.8; }



/* === IL MAZZO DI CARTE (A riposo con spazio nero) === */

.eventi-accordion-ventaglio {

  display: flex;

  width: 85vw;  /* A riposo lascia il bordo nero */

  height: 60vh; /* A riposo sta comodamente tra titolo e loghi */

  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);

}



/* LA CARTA (Zero alone, bordo sigillato) */

.card-ventaglio {

  position: relative;

  flex: 1;

  height: 100%;

  background-color: #000;

  border-radius: 30px;

  

  /* FIX TRASPARENZA: Bordo nero sigillante e hardware acceleration per bloccare il bleeding del browser */

  border: 1px solid #000;

  -webkit-backface-visibility: hidden;

  backface-visibility: hidden;

  transform: translateZ(0); /* Forza la scheda grafica a calcolare un bordo netto */

  

  box-shadow: -15px 0 20px rgba(0,0,0,1); 

  margin-left: -2vw;

  overflow: hidden;

  background-position: center;

  background-size: cover;

  transition: flex 0.6s cubic-bezier(0.25, 1, 0.5, 1), border-radius 0.4s ease;

  display: flex;

  align-items: flex-end;

  cursor: pointer;

}



/* Rimuove il bordo e l'ombra sulla primissima carta a sinistra perch� non ha nulla sotto */

.card-ventaglio:first-child { 

  margin-left: 0; 

  box-shadow: none; 

  border-left: none; 

}



/* Posizionamenti foto inalterati */

.card-ventaglio:nth-child(1) { background-position: 100% 10%; }

.card-ventaglio:nth-child(2) { background-position: 50% 40%; }

.card-ventaglio:nth-child(3) { background-position: 50% 50%; }

.card-ventaglio:nth-child(4) { background-position: 50% 10%; }



.card-overlay-ventaglio {

  position: absolute; inset: 0;

  background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.1) 60%, transparent 100%);

  z-index: 1;

  transition: background 0.4s ease;

}



/* FIX TITOLI VERTICALI: Centrati matematicamente, non verranno mai mangiati */

.card-title-vertical {

  position: absolute;

  /* La magia: lo sposta a met� carta e poi lo centra sul suo stesso asse */

  left: 2.2rem;

  transform: rotate(180deg);

  bottom: 2rem;

  writing-mode: vertical-rl;

  color: #ffcc00;

  font-size: 1.5rem;

  font-weight: 700;

  text-shadow: 0 4px 10px rgba(0,0,0,1);

  z-index: 3;

  transition: opacity 0.3s ease;

  white-space: nowrap;

}



/* CONTENUTO TESTO (Nascosto a riposo) */

.card-content-ventaglio {

  position: relative;

  z-index: 4;

  padding: 3rem 4rem 15vh 4rem; /* Spazio in basso extra per non finire sotto ai loghi fluttuanti */

  width: 100%;

  text-align: left;

  opacity: 0;

  transform: translateX(-20px);

  transition: opacity 0.4s ease, transform 0.4s ease;

  pointer-events: none;

}

.card-ventaglio h3 { margin-bottom: 0.5rem; color: #ffcc00; font-size: 2.2rem; text-shadow: 0 3px 8px rgba(0,0,0,1); }

.card-ventaglio p { color: #fff; font-size: 1.1rem; line-height: 1.5; margin-bottom: 1.5rem; max-width: 500px; }

.card-ventaglio .btn { pointer-events: auto; }



/* === MAGIA HOVER DESKTOP (Il mazzo divora lo schermo) === */

@media (min-width: 992px) {

  

  /* L'espansione ora parte solo quando il mouse tocca fisicamente le carte */

  .eventi-accordion-ventaglio:hover {

    width: 100vw;

    height: 100vh;

  }

  

  /* Le carte perdono l'angolo arrotondato solo quando tocchi il mazzo */

  .eventi-accordion-ventaglio:hover .card-ventaglio { 

    border-radius: 0; 

  }



  /* La carta toccata si prende tutto lo spazio */

  .eventi-accordion-ventaglio .card-ventaglio:hover {

    flex: 8; 

    z-index: 10;

    margin-left: 0;

  }

  

  .eventi-accordion-ventaglio:hover .card-ventaglio:not(:hover) { flex: 1; }



  .card-ventaglio:hover .card-title-vertical { opacity: 0; }

  .card-ventaglio:hover .card-content-ventaglio { opacity: 1; transform: translateX(0); }

  .card-ventaglio:hover .card-overlay-ventaglio { background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 100%); }

}



/* ==========================================================

   SMARTPHONE: CAROSELLO VERTICALE SOVRAPPOSTO (FIXED)

   ========================================================== */

@media (max-width: 991px) {

  

  #eventi {

    height: auto;

    min-height: 100vh;

    display: block;

    overflow: visible; /* FONDAMENTALE: Lascia scorrere la pagina */

	overflow-anchor: none;

  }



  /* RIPARAZIONE: Sblocchiamo il contenitore che prima tagliava le carte! */

  .eventi-content-wrapper {

    height: auto; /* Sovrascrive il 100vh del Desktop */

    overflow: visible; /* Sovrascrive l'hidden del Desktop */

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

  }



  /* Titolo e Loghi tornano liberi e visibili */

  .eventi-header { 

    position: relative; 

    padding: 10vh 1rem 5vh 1rem; 

    z-index: 10; 

    pointer-events: auto; /* Riattiva i click se necessari */

  }

  

  .collaborazioni-bottom-ventaglio { 

    position: relative; 

    padding: 5vh 1rem 10vh 1rem; 

    z-index: 10; 

    pointer-events: auto;

  }



  .eventi-accordion-ventaglio {

    display: flex;

    flex-direction: column;

    align-items: center; /* Centra perfettamente le carte */

    width: 100%;

    height: auto;

    padding-bottom: 5vh;

    margin: 0;

	overflow-anchor: none;

  }



/* =======================================

     LA CARTA CHIUSA

     ======================================= */

  .card-ventaglio {

    width: 85%; 

    height: 45vh; 

    margin-left: 0; 

    margin-right: 0;

    margin-top: -6vh; 

    flex: none; 

    

    border-radius: 35px; 

    

    /* FIX: RIMOSSO TOTALMENTE IL BORDO! Fusione perfetta col nero */

    border: none; 

    

    background-color: #000;

    box-shadow: 0 -15px 30px rgba(0,0,0,0.8);

    overflow: hidden; 

    

    transition: width 0.7s cubic-bezier(0.25, 1, 0.5, 1), 

                height 0.7s cubic-bezier(0.25, 1, 0.5, 1), 

                margin 0.7s cubic-bezier(0.25, 1, 0.5, 1), 

                border-radius 0.7s ease;

	  

	/* ELIMINA IL LAMPO AL TOCCO (Tap Highlight) */

	  -webkit-tap-highlight-color: transparent; 

    

    /* OPZIONALE: Rimuoviamo il cursore pointer su mobile per evitare che 

       il browser lo scambi per un link intero */

    cursor: default;

  }



  .card-ventaglio:first-child { 

    margin-top: 0; 

  }



  .card-title-vertical { 

    display: none !important; 

  }



  .card-ventaglio .card-overlay-ventaglio {

    bottom: -10px !important;

    height: calc(100% + 20px) !important;

    background: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8) 25%, rgba(0,0,0,0) 65%, transparent 100%) !important;

  }



  .card-content-ventaglio {

    opacity: 0;

    transform: translateY(20px);

    pointer-events: none;

    padding: 0 1.2rem 4vh 1.2rem !important; 

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: flex-end !important; 

    transition: opacity 0.5s ease 0.3s, transform 0.5s ease 0.3s; 

  }



  /* =======================================

     LA CARTA ESPANSA (PERMANENTE)

     ======================================= */

  .card-ventaglio.bloomed {

    width: 95%; 

    height: 75vh; 

    

    border-radius: 35px 35px 0 0; 

    

    /* Assicuriamoci che non riappaia nessun bordo quando fiorisce */

    border: none; 

    

    margin-top: -2vh; 

    margin-bottom: 3vh; 

  }



  .card-ventaglio.bloomed:first-child {

    margin-top: 0; 

  }



  .card-ventaglio.bloomed .card-content-ventaglio {

    opacity: 1;

    transform: translateY(0);

    pointer-events: auto;

  }

	

/* FIX TESTI CENTRALI: Rimuoviamo il "cuscino" invisibile sopra il bottone */

  .card-ventaglio .btn {

    margin-top: 1rem !important; /* Sostituisce i 6rem generali */

    margin-bottom: 1rem !important;

  }



  /* Compattiamo leggermente anche il paragrafo per avvicinarlo al bottone */

  .card-ventaglio p {

    margin-bottom: 0.5rem !important;

    font-size: 1rem !important; /* Leggermente pi� piccolo per far respirare la foto */

  }	



/* INQUADRATURE PERSONALIZZATE PER LE CARTE ESPANSE SU MOBILE */

  /* Cambia le percentuali X% (orizzontale) e Y% (verticale) per inquadrare Lalo dove preferisci */

  .card-ventaglio:nth-child(1).bloomed { background-position: 40% 20%; } /* Aziende */

  .card-ventaglio:nth-child(2).bloomed { background-position: 50% 50%; } /* Matrimoni */

  .card-ventaglio:nth-child(3).bloomed { background-position: 20% 80%; } /* Piazza */

  .card-ventaglio:nth-child(4).bloomed { background-position: 50% 20%; } /* Multi-Artista */	

	

}











/* ===== SEZIONE CONTATTI ===== */

#contatti {

  position: relative;

  /* Sfondo polvere di stelle a tutto schermo */

  background: url('../img/sfondo_contatti.webp') center/cover no-repeat;

  min-height: 100vh;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 5rem 1.5rem;

}



.contatti-container {

  position: relative;

  z-index: 5;

  width: 100%;

  max-width: 900px;

  margin: 0 auto;

}



/* LA NUOVA CARD ELEGANTE (Effetto Vetro) */

.contact-card {

  background: rgba(10, 12, 20, 0.75); 

  backdrop-filter: blur(15px); 

  -webkit-backdrop-filter: blur(15px);

  border: 1px solid rgba(255, 204, 0, 0.2); 

  border-radius: 20px;

  padding: 3.5rem 2.5rem;

  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);

  text-align: center;

}



/* Tipografia del flusso narrativo */

.contact-card h2 {

  font-size: clamp(2.5rem, 5vw, 3.5rem);

  color: #ffcc00;

  margin-top: 0;

  margin-bottom: 1rem;

  text-shadow: 0 2px 5px rgba(0,0,0,0.8);

}



.testo-magia {

  font-size: 1.6rem;

  color: #ffcc00;

  font-weight: 700;

  margin-bottom: 2rem;

}



.testo-normale {

  font-size: 1.2rem;

  color: #ddd;

  margin-bottom: 1.5rem;

}



/* Pulsanti Contatto Diretti (Mantengono i tuoi effetti elastici!) */

.recapiti-diretti {

  display: flex;

  justify-content: center;

  gap: 2rem;

  margin-bottom: 4rem;

  flex-wrap: wrap; 

}



.contact-btn {

  display: flex;

  align-items: center;

  background: rgba(255,255,255,0.05);

  padding: 1rem 2rem;

  border-radius: 50px;

  color: #fff;

  text-decoration: none;

  font-size: 1.1rem;

  font-weight: bold;

  border: 1px solid rgba(255,255,255,0.1);

  box-shadow: 0 4px 15px rgba(0,0,0,0.3);

  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 

}



.contact-btn .contact-icon {

  width: 24px;

  height: 24px;

  margin-right: 12px;

  fill: #ffcc00; 

  transition: fill 0.4s ease;

}



.contact-btn:hover {

  background: #ffcc00;

  color: #000;

  transform: translateY(-5px) scale(1.05); 

  box-shadow: 0 10px 25px rgba(255,204,0,0.4); 

  border-color: #ffcc00;

}



.contact-btn:hover .contact-icon {

  fill: #000; 

}



/* Form Centrale */

.contatti-form-wrapper {

  /* Rimosso lo sfondo interno per far respirare la Card principale */

  background: transparent;

  margin-bottom: 2rem;

  text-align: left; 

}



.contatti-form-wrapper h3 {

  text-align: center;

  color: #ffcc00;

  font-size: 1.8rem;

  margin-bottom: 2rem;

}



.form-row {

  display: flex;

  gap: 1.5rem;

  margin-bottom: 1.5rem;

}



.form-row.full-width { flex-direction: column; }



#lalo-form input,

#lalo-form select,

#lalo-form textarea {

  width: 100%;

  padding: 1rem;

  background: rgba(255,255,255,0.08);

  border: 1px solid rgba(255,255,255,0.2);

  border-radius: 8px;

  color: #fff;

  font-size: 1rem;

  font-family: inherit;

  transition: border-color 0.3s, box-shadow 0.3s;

}



#lalo-form input:focus,

#lalo-form select:focus,

#lalo-form textarea:focus {

  outline: none;

  border-color: #ffcc00;

  box-shadow: 0 0 8px rgba(255,204,0,0.3);

  background: rgba(255,255,255,0.12);

}



/* Fix per le opzioni del men� a tendina */

#lalo-form select option {

  background-color: #1a1a1a; 

  color: #ffffff;            

}



.input-date { color: #aaa; }

.input-date:valid { color: #fff; }



/* Controllo Anti-Robot (Mantiene il tuo design tratteggiato) */

.captcha-row {

  display: flex;

  flex-direction: column;

  gap: 0.5rem;

  background: rgba(255,204,0,0.1);

  padding: 1.5rem;

  border-radius: 8px;

  border: 1px dashed #ffcc00;

  align-items: center; 

  text-align: center;

}



#captcha-question {

  font-weight: bold;

  color: #ffcc00;

  line-height: 1.5;

}



.math-nowrap { white-space: nowrap; }



#captcha-answer { max-width: 150px; text-align: center; }



.btn-submit {

  width: 100%;

  margin-top: 1.5rem;

  padding: 1rem;

  font-size: 1.2rem;

  border: none;

  cursor: pointer;

}



.form-message {

  margin-top: 1rem;

  font-weight: bold;

  text-align: center;

  color: #fff;

}



/* --- SEZIONE SOCIAL FINALE --- */

.social-finale { 

  margin-top: 3rem; 

  border-top: 1px solid rgba(255, 255, 255, 0.15);

  padding-top: 2rem;

}



.social-icons {

  display: flex;

  justify-content: center;

  gap: 1.2rem;

  margin-top: 1.5rem;

  flex-wrap: wrap;

}



.social-finale .social-icons img {

  width: 35px;

  height: 35px;

  transition: transform 0.3s ease, filter 0.3s ease;

}



.social-icons a:hover img {

  transform: scale(1.2);

  filter: drop-shadow(0 0 8px rgba(255,204,0,0.8));

}



/* Rimuove le freccette antiestetiche dal campo numerico */

input[type="number"]::-webkit-inner-spin-button,

input[type="number"]::-webkit-outer-spin-button {

  -webkit-appearance: none;

  margin: 0;

}

input[type="number"] { -moz-appearance: textfield; }



/* --- ADATTAMENTO SMARTPHONE --- */

@media screen and (max-width: 768px) {

  .contact-card { padding: 2rem 1.2rem; }

  .form-row { flex-direction: column; gap: 0; }

  .form-row input, .form-row select { margin-bottom: 1rem; }

  .recapiti-diretti { flex-direction: column; align-items: stretch; gap: 1rem; }

  .contact-btn { justify-content: center; }

}

/* === FOOTER === */

.site-footer {

  background: #050505;

  color: #666;

  text-align: center;

  padding: 2.5rem 1rem;

  font-size: 0.85rem;

  border-top: 1px solid rgba(255, 255, 255, 0.05);

}



.site-footer p { margin: 0.3rem 0; }



.legal-links { margin-top: 0.8rem; }



.site-footer a {

  color: #888;

  text-decoration: none;

  transition: color 0.3s ease;

  margin: 0 0.5rem;

}



.site-footer a:hover { color: #ffcc00; }





/* === UNIFORMAZIONE TITOLI SEZIONI === */

.conosciamoci-container > h2,

.adulti-container h2,

.bambini-container h2,

.eventi-header h2,

#contatti h2 {

  font-size: clamp(2.5rem, 5vw, 3.5rem) !important;

  margin-bottom: 2.5rem;

}



.bio h2,

.recensioni h2 {

  font-size: 1.8rem !important;

  margin-bottom: 1rem;

  text-align: center;

}





/* Responsive adjustments */

@media (max-width: 768px) {

  .logo-row img {

    max-width: 80px; /* Loghi pi� piccoli su mobile */

    max-height: 40px;

  }

  

  

/* Contatti su Smartphone (Verticale) */

  .contatti-grid {

    grid-template-columns: 1fr; /* Una singola colonna: i contatti si impilano sopra al form! */

    gap: 1.5rem;

  }

  .form-row {

    flex-direction: column; /* I campi affiancati finiscono uno sotto l'altro */

    gap: 1.5rem;

  }

  .contatti-form-wrapper { padding: 1.5rem; }

	

.panel:not(#hero) {

    padding-top: 100px; /* Lo "scudo" di 100px che protegge i titoli dal tasto Menu */

    padding-bottom: 2rem; /* Manteniamo il respiro in basso */

  }

	

}



/* === STATO FINALE CONGELATO HERO (Evita il riavvio al ridimensionamento) === */



/* SU DESKTOP E GENERALE */

body.hero-animations-done .hero-text-col {

  animation: none !important; /* Spegne il motore dell'animazione */

  /* Valori esatti presi dalla tua animazione heroMoveLeft */

  transform: translateX(1vw) translateY(4vh) scale(1) !important; 

}

body.hero-animations-done .hero-logo,

body.hero-animations-done .hero-tagline,

body.hero-animations-done .btn-hero,

body.hero-animations-done .hero-lalo-img {

  animation: none !important;

  opacity: 1 !important;

}



/* SU SMARTPHONE */

@media screen and (max-width: 768px) and (orientation: portrait) {

	

  body.hero-animations-done .hero-text-col {

    transform: none !important; 

  }

  body.hero-animations-done .hero-logo {

    /* Valore esatto preso dal tuo mobileElementsUp */

    transform: translateY(6vh) scale(1) !important; 

  }

  body.hero-animations-done .hero-tagline {

    /* Valore esatto preso dal tuo taglineUpMobile */

    transform: translateY(2vh) scale(1) !important; 

  }

  body.hero-animations-done .btn-hero {

    transform: translateX(-50%) !important;

  }

}



/* === UPGRADE: HERO SLIDESHOW A LIVELLI === */



/* 1. Trasformiamo l'ex immagine singola in un contenitore Grid per sovrapporre le foto */

div.hero-lalo-img {

  display: grid !important; 

  align-items: end;

  justify-items: center;

  background: transparent;

}



/* 2. Le Slide: stanno tutte una sopra l'altra */

.hero-slide {

  grid-area: 1 / 1;

  position: relative;

  opacity: 0;

  transition: opacity 1.2s ease-in-out; /* Dissolvenza morbida */

  display: flex;

  align-items: flex-end;

  justify-content: center;

}

.hero-slide.active {

  opacity: 1;

  z-index: 2;

}



/* 3. Blindiamo le immagini base sulle TUE regole responsive originali! */

.hero-slide .base-img {

  max-height: 85vh; 

  width: auto;

  display: block;

}

@media (max-width: 1035px) {

  .hero-slide .base-img { max-height: 70vh; }

}

@media screen and (max-width: 768px) and (orientation: portrait) {

  .hero-slide .base-img { max-height: 60vh; }

}

@media screen and (max-height: 500px) and (orientation: landscape) {

  .hero-slide .base-img { max-height: 85vh; }

}



/* 4. Le immagini in sovrapposizione (i fogli di acetato trasparenti/neri) */

.hero-slide .overlay-img {

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 100%;

  object-fit: contain;

  object-position: bottom;

}



/* --- LE 3 MAGIE DI ANIMAZIONE --- */



/* A. Fluttuazione Mazzetto */

.float-anim {

  animation: floatEffect 4s ease-in-out infinite;

}

@keyframes floatEffect {

  0%, 100% { transform: translateY(0); }

  50% { transform: translateY(-12px); } 

}



/* B. Pulsazione Flare */

.flare-anim {

  /* Durata allungata per godersi lo scoppiettio e la pausa */

  animation: flarePulseMagical 3.5s ease-in-out infinite;

}



@keyframes flarePulseMagical {

  /* 1. Inizio al buio totale */

  0%, 5% { 

    opacity: 0; 

    transform: scale(0.90); 

    filter: drop-shadow(0 0 10px rgba(50, 180, 255, 0.4));

  }

  

  /* 2. Primo flash rapido (la bacchetta fa "contatto") */

  8% { opacity: 0.6; transform: scale(1.02); }

  12% { opacity: 0; transform: scale(0.95); }

  

  /* 3. Secondo piccolo scoppiettio d'innesco */

  16% { opacity: 0.3; transform: scale(0.98); }

  18% { opacity: 0.1; transform: scale(0.95); }

  

  /* 4. Esplosione della luce vera e propria! */

  35% { 

    opacity: 0.85; 

    transform: scale(1.05); 

    filter: drop-shadow(0 0 15px rgba(50, 200, 255, 0.9)) 

            drop-shadow(0 0 45px rgba(0, 120, 255, 0.7))  

            drop-shadow(0 0 15px rgba(255, 204, 0, 0.15)); 

  }

  

  /* 5. Tremolio al massimo dell'energia (scende e risale) */

  45% { opacity: 0.6; transform: scale(1.02); }

  55% { opacity: 0.80; transform: scale(1.04); }

  

  /* 6. Si dissolve lentamente e resta spenta per il resto del tempo */

  80%, 100% { 

    opacity: 0; 

    transform: scale(0.90); 

    filter: drop-shadow(0 0 10px rgba(50, 180, 255, 0.4));

  }

}

/* C. Apparizione e Scomparsa Carta */

.transform-anim {

  /* Loop calibrato esattamente sul cambio slide (4.5s) */

  animation: cardTransform 4.5s infinite; 

}

@keyframes cardTransform {

  0%, 15% { 

    opacity: 0; 

    filter: blur(15px) brightness(2.5); /* Parte invisibile, molto sfocata e luminosissima */

  }   

  30%, 70% { 

    opacity: 1; 

    filter: blur(0px) brightness(1); /* Si "mette a fuoco" diventando la carta normale */

  }  

  85%, 100% { 

    opacity: 0; 

    filter: blur(15px) brightness(2.5); /* Scompare dissolvendosi di nuovo in un bagliore */

  } 

}



/* ==========================================================

   FIX COPERTINA VIDEO: FULL CONTAINER E CLICK TOTALE

   ========================================================== */



/* 1. Rimuoviamo sfondo e bordi della colonna centrale per lo stacco totale */

.video.col-video-container {

    padding: 0 !important;          /* Elimina il bordino interno */

    background: none !important;    /* Elimina la semitrasparenza dietro */

    box-shadow: none !important;    /* Elimina l'ombra esterna se preferisci lo stacco netto */

    border: none !important;

    display: block;

    height: 100%;

}



/* 2. Rendiamo il link grande quanto tutto il contenitore */

.video-link-wrapper {

    display: block;

    width: 100%;

    height: 100%;

    position: relative;

    text-decoration: none;

    overflow: hidden;

    border-radius: 12px; /* Manteniamo gli angoli arrotondati come le altre colonne */

}



.video-cover-img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform 0.4s ease-in-out;

}



/* 3. Overlay che si attiva al passaggio del mouse */

.play-button-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    background-color: rgba(0, 0, 0, 0.2); /* Velo scurissimo iniziale quasi invisibile */

    transition: background-color 0.4s ease;

}



.video-link-wrapper:hover .play-button-overlay {

    background-color: rgba(0, 0, 0, 0.5); /* Si scurisce al mouseover */

}



.video-link-wrapper:hover .video-cover-img {

    transform: scale(1.05);

}



/* 4. Icona Play Circolare nativa in SVG */

.play-icon {

    width: 90px;  /* Dimensioni dell'SVG (leggermente pi� grande per il cerchio) */

    height: 90px;

    /* Colore di base: Bianco semi-trasparente elegante */

    color: rgba(255, 255, 255, 0.75);

    filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.8)); /* Ombra profonda */

    /* Transizione morbida per colore e dimensione */

    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.3s ease;

}



/* EFFETTO AL PASSAGGIO DEL MOUSE SULLA COPERTINA */

.video-link-wrapper:hover .play-icon {

    /* L'icona si "accende" di Giallo Oro brillante */

    color: #ffcc00;

    /* Piccola pulsazione elastica magica */

    transform: scale(1.1);

}



/* ==========================================================

   SFONDI SPECIFICI PER SMARTPHONE (Anti-Sgranamento)

   ========================================================== */



@media screen and (max-width: 768px) {

    

    #adulti .adulti-bg {

        background-image: url('../img/sfondo_adulti_mobile.webp') !important;

    }



    #bambini .bambini-bg {

        background-image: url('../img/sfondo_bambini_mobile.webp') !important;

    }



    #conosciamoci .conosciamoci-bg {

        background-image: url('../img/sfondo_conosciamoci_mobile.webp') !important;

    }



    /* Aggiungi qui anche quello dei contatti se necessario */

    #contatti {

        background-image: url('../img/sfondo_contatti_mobile.webp') !important;

    }

}





/* === F.A.Q. STILE PURO HTML/CSS === */



/* Rimuove i pallini di default dei tag details */

details > summary {

  list-style: none;

}

details > summary::-webkit-details-marker {

  display: none;

}



/* === IL BOTTONE PRINCIPALE (LA MATRIOSKA ESTERNA) === */

.btn-faq-main {

  margin-top: 0 !important; /* Sovrascrive i margini degli altri bottoni */

  cursor: pointer;

  display: inline-block;

  outline: none;

}



/* Il trucco magico: Scambia il testo in base allo stato [open] */

.faq-main-wrapper .text-open { display: none; }

.faq-main-wrapper[open] .text-closed { display: none; }

.faq-main-wrapper[open] .text-open { display: inline; }





/* === LE SINGOLE F.A.Q. INTERNE === */

.faq-item {

  background: rgba(255,255,255,0.05);

  border: 1px solid rgba(255,255,255,0.1);

  border-radius: 12px;

  margin-bottom: 1rem;

  overflow: hidden;

  transition: background 0.3s ease;

}



.faq-item:hover { background: rgba(255,255,255,0.08); }



.faq-item summary {

  padding: 1.2rem 1.5rem;

  font-size: 1.1rem;

  font-weight: bold;

  color: #fff;

  cursor: pointer;

  position: relative;

  outline: none;

}



/* Freccetta personalizzata oro per le singole FAQ */

.faq-item summary::after {

  content: "+";

  position: absolute;

  right: 1.5rem;

  color: #ffcc00;

  font-size: 1.5rem;

  line-height: 1;

  transition: transform 0.3s ease;

}



.faq-item[open] summary::after { transform: rotate(45deg); }



.faq-item[open] summary {

  color: #ffcc00;

  border-bottom: 1px solid rgba(255,255,255,0.05);

}



.faq-content {

  padding: 1.5rem;

  color: #ddd;

  line-height: 1.6;

  font-size: 1rem;

}