:root {
--primary-navy: #040914;
--navy-light: #0a1329;
--navy-card: #101c3d;
--gold-primary: #d4af37;
--gold-light: #f6eaaf;
--gold-dark: #aa8214;
--gold-gradient: linear-gradient(135deg, #d4af37 0%, #fff2b2 45%, #b38728 80%, #fbf5b7 100%);
--red-gradient: linear-gradient(135deg, #c80b37 0%, #ff0e47 45%, #c80b37 80%, #ff0e47 100%);
--blu-gradient: linear-gradient(135deg, #101c3d 0%, #1d336f 45%, #101c3d 80%, #1d336f 100%);
--text-white: #ffffff;
--text-muted: #b2bed2;
--border-gold: rgba(212, 175, 55, 0.3);
--font-display: 'Cinzel', serif;
--font-serif: 'Cormorant Garamond', Georgia, serif;
--font-sans: 'Montserrat', sans-serif;
--transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

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

body {
background-color: var(--primary-navy);
color: var(--text-white);
font-family: var(--font-sans);
line-height: 1.6;
overflow-x: hidden;
width: 100%;
}

h1, h2, h3, h4 {
font-family: var(--font-serif);
font-weight: 600;
}

.gold-text {
background: var(--gold-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

/* HEADER & NAV */
header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
padding: 0.8rem 5%;
background: rgba(4, 9, 20, 0.96);
backdrop-filter: blur(14px);
border-bottom: 1px solid var(--border-gold);
display: flex;
justify-content: space-between;
align-items: center;
min-height: 70px;
	height: 90px;
}

.logo-container {
display: flex;
align-items: center;
text-decoration: none;
z-index: 1001;
}

.header-logo-img {
height: clamp(50px, 5.5vw, 72px);
max-width: 320px;
width: auto;
object-fit: contain;
filter: drop-shadow(0 3px 12px rgba(212, 175, 55, 0.45));
transition: var(--transition);
}

.header-logo-img:hover {
transform: scale(1.03);
}

.menu-toggle {
display: none;
background: transparent;
border: 1px solid var(--border-gold);
color: var(--gold-light);
font-size: 1.35rem;
padding: 8px 12px;
border-radius: 6px;
cursor: pointer;
z-index: 10001;
transition: var(--transition);
}

.menu-toggle:hover {
background: rgba(212, 175, 55, 0.15);
}

nav {
display: flex;
align-items: center;
gap: 1.8rem;
}

nav a {
color: var(--text-white);
text-decoration: none;
font-size: 0.85rem;
letter-spacing: 1.5px;
text-transform: uppercase;
font-weight: 500;
transition: var(--transition);
position: relative;
}

nav a::after {
content: '';
position: absolute;
bottom: -6px;
left: 0;
width: 0;
height: 2px;
background: var(--gold-gradient);
transition: var(--transition);
}

nav a:hover, nav a.active {
color: var(--gold-light);
}

nav a:hover::after, nav a.active::after {
width: 100%;
}

.btn-gold {
background: var(--gold-gradient);
color: #040914 !important;
padding: 0.75rem 1.6rem;
border-radius: 50px;
font-weight: 700;
font-size: 0.8rem;
letter-spacing: 1.2px;
text-transform: uppercase;
border: none;
cursor: pointer;
text-decoration: none;
display: inline-block;
text-align: center;
transition: var(--transition);
box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}

.btn-gold:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(212, 175, 55, 0.45);
}

.btn-red {
background: var(--red-gradient);
color:#fff2b2 !important;
padding: 0.75rem 1.6rem;
border-radius: 50px;
font-weight: 700;
font-size: 0.8rem;
letter-spacing: 1.2px;
text-transform: uppercase;
border: none;
cursor: pointer;
text-decoration: none;
display: inline-block;
text-align: center;
transition: var(--transition);
box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}

.btn-red:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(212, 175, 55, 0.45);
}

.btn-blu {
background: var(--blu-gradient);
color:#fff2b2 !important;
padding: 0.75rem 1.6rem;
border-radius: 50px;
font-weight: 700;
font-size: 0.8rem;
letter-spacing: 1.2px;
text-transform: uppercase;
border: none;
cursor: pointer;
text-decoration: none;
display: inline-block;
text-align: center;
transition: var(--transition);
box-shadow: 0 4px 15px rgba(29, 51, 111, 0.3);
}

.btn-blu:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(29, 51, 111, 0.45);
}






.btn-outline {
background: transparent;
color: #fff;
padding: 0.75rem 1.6rem;
border-radius: 50px;
font-weight: 600;
font-size: 0.8rem;
letter-spacing: 1.2px;
text-transform: uppercase;
border: 1px solid var(--gold-primary);
cursor: pointer;
text-decoration: none;
display: inline-block;
text-align: center;
transition: var(--transition);
}

.btn-outline:hover {
background: rgba(212, 175, 55, 0.15);
color: var(--gold-light);
}

/* HERO */
.hero {
min-height: 90vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 145px 6% 60px;
position: relative;
background: radial-gradient(circle at center, rgba(16, 28, 61, 0.85) 0%, rgba(4, 9, 20, 0.96) 80%);
}

.hero-bg {
position: absolute;
inset: 0;
background: url('immagini/header.jpg') center/cover no-repeat;
opacity: 0.35;
z-index: 0;
}

.hero-content {
position: relative;
z-index: 1;
max-width: 85vw;
	width: 2000px;
display: flex;
flex-direction: column;
align-items: center;
}

.hero-logo-large {
width: clamp(220px, 70vw, 500px);
height: auto;
margin-bottom: 1.8rem;
filter: drop-shadow(0 8px 25px rgba(212, 175, 55, 0.45));
}

.hero h1 {
font-size: clamp(2rem, 5vw, 3rem);
line-height: 1.2;
margin-bottom: 1.2rem;
}

.hero p {
font-size: clamp(0.95rem, 2vw, 1.05rem);
color: var(--text-muted);
margin-bottom: 2.2rem;
max-width: 680px;
font-weight: 300;
}

.hero-actions {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
width: 100%;
}

/* SEZIONI GENERALI */
section {
padding: clamp(45px, 6vw, 80px) 6%;
position: relative;
scroll-margin-top: 130px;
}

.section-header {
text-align: center;
max-width: 720px;
margin: 0 auto clamp(25px, 4vw, 45px);
}

.section-tag {
font-size: clamp(0.7rem, 1.5vw, 0.78rem);
letter-spacing: 3px;
text-transform: uppercase;
color: var(--gold-primary);
font-weight: 600;
margin-bottom: 0.5rem;
display: block;
padding-top: clamp(0.1rem, 0.4vw, 0.3rem);
}

.section-header h2 {
font-size: clamp(1.8rem, 4vw, 3rem);
margin-bottom: 0.8rem;
line-height: 1.2;
}

.section-header p {
color: var(--text-muted);
font-size: clamp(0.88rem, 2vw, 0.95rem);
}

/* ABOUT */
.about {
background-color: var(--navy-light);
}

.about-grid {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: clamp(30px, 5vw, 60px);
align-items: center;
}

.about-text h3 {
font-size: clamp(1.5rem, 3vw, 2rem);
margin-bottom: 1.2rem;
line-height: 1.3;
}

.about-text p {
color: var(--text-muted);
margin-bottom: 1.2rem;
font-size: 0.95rem;
}

.about-features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
margin-top: 1.8rem;
}

.feature-card {
background: var(--navy-card);
border: 1px solid var(--border-gold);
padding: 20px;
border-radius: 12px;
}

.feature-card i {
color: var(--gold-primary);
font-size: 1.5rem;
margin-bottom: 10px;
}

.feature-card h4 {
font-size: 0.95rem;
margin-bottom: 6px;
}

.feature-card p {
font-size: 0.8rem;
color: var(--text-muted);
margin: 0;
}

.about-image-wrapper {
border: 1px solid var(--border-gold);
padding: 10px;
border-radius: 16px;
background: rgba(212, 175, 55, 0.05);
}

.about-image img {
width: 100%;
height: clamp(300px, 45vw, 460px);
object-fit: cover;
border-radius: 10px;
display: block;
}

/* EDIZIONI & STICKY SUB-BAR */
.editions {
background: var(--primary-navy);
}

.edition-subsections-bar {
position: sticky;
top: 90px;          /* Aumentato leggermente da 75px a 78px per coprire l'altezza esatta dell'header desktop */
margin-top: -1px;   /* Il trucchetto del pixel di sovrapposizione per azzerare ogni fessura */
z-index: 990;
background: rgba(4, 9, 20, 0.92);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
margin-bottom: 30px;
padding: 15px 20px;
border-radius: 0;
border-bottom: 1px solid var(--border-gold);
box-shadow: 0 10px 20px rgba(4, 9, 20, 0.6);
	
flex-wrap: nowrap;          /* Impedisce categoricamente ai bottoni di andare a capo su due righe */
overflow-x: auto;           /* Attiva lo scroll orizzontale fluido */
-webkit-overflow-scrolling: touch;
justify-content:space-evenly; /* Allinea i bottoni dall'inizio per permettere lo scorrimento */
scroll-snap-type: x mandatory;
}

/* Nasconde la barra di scorrimento estetica per un look pulito */
.edition-subsections-bar::-webkit-scrollbar {
display: none;
}
.edition-subsections-bar {
scrollbar-width: none;
}

.sub-anchor-btn {
background: var(--navy-card);
border: 1px solid var(--border-gold);
color: var(--gold-light);
padding: 9px 16px;
border-radius: 30px;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
transition: var(--transition);
}

.sub-anchor-btn i {
color: var(--gold-primary);
font-size: 0.8rem;
}

.sub-anchor-btn:hover {
background: var(--gold-gradient);
color: var(--primary-navy);
border-color: var(--gold-primary);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(212, 175, 55, 0.3);
}

.sub-anchor-btn:hover i {
color: var(--primary-navy);
}

.category-divider {
margin: clamp(40px, 6vw, 60px) 0 25px;
  display: flex;
  align-items: center;
  gap: 16px;
  scroll-margin-top: 185px; /* Aumentato per desktop per evitare che la barra sticky copra il titolo */
}

.category-divider h3 {
font-size: clamp(1.3rem, 2.5vw, 1.8rem);
color: var(--gold-light);
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-serif);
letter-spacing: 1px;
}

.category-divider::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(90deg, var(--gold-primary), rgba(212, 175, 55, 0.1));
}

.candidates-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: clamp(18px, 3vw, 30px);
}

.candidates-grid.host-grid {
grid-template-columns: minmax(280px, 380px);
justify-content: center;
}

.candidates-grid.madrina-grid {
grid-template-columns: minmax(300px, 420px);
justify-content: center;
}

.candidate-card {
background: var(--navy-card);
border-radius: 14px;
overflow: hidden;
border: 1px solid var(--border-gold);
transition: var(--transition);
display: flex;
flex-direction: column;
position: relative;
}

.candidate-card:hover {
transform: translateY(-6px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
border-color: var(--gold-primary);
}

.candidate-card.winner {
border: 2px solid var(--gold-primary);
box-shadow: 0 0 25px rgba(212, 175, 55, 0.28);
}

.winner-badge-top {
position: absolute;
top: 12px;
right: 12px;
background: var(--gold-gradient);
color: #040914;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.8px;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 20px;
z-index: 5;
display: flex;
align-items: center;
gap: 5px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

.candidate-avatar {
position: relative;
height: clamp(280px, 40vw, 350px);
background: linear-gradient(180deg, #152243 0%, #0a1329 100%);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}

.candidate-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
transition: var(--transition);
}

.candidate-card:hover .candidate-avatar img {
transform: scale(1.05);
z-index: auto;
}

.title-overlay-bottom {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 24px 14px 14px;
background: linear-gradient(180deg, transparent 0%, rgba(4, 9, 20, 0.88) 100%);
display: block;
justify-content: center;
align-items: center;
z-index: 6;
pointer-events: none;
}

.title-overlay-bottom img {
max-width: 85%;
height: auto;
object-fit: contain;
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.8));
}

.candidate-avatar .silhouette-icon {
font-size: 4.5rem;
color: rgba(212, 175, 55, 0.35);
transition: var(--transition);
}

.candidate-card:hover .silhouette-icon {
transform: scale(1.08);
color: rgba(212, 175, 55, 0.65);
}

.candidate-tag-edition {
position: absolute;
top: 12px;
right: 12px;
background: rgba(212, 175, 55, 0.2);
backdrop-filter: blur(8px);
padding: 3px 8px;
border-radius: 20px;
font-size: 0.65rem;
color: #fff;
border: 1px solid rgba(212, 175, 55, 0.4);
}

.candidate-details {
padding: 18px;
display: flex;
flex-direction: column;
flex: 1;
justify-content: space-between;
background: var(--navy-card);
}

.candidate-name {
font-size: clamp(1.65rem, 2vw, 1.3rem);
font-family: var(--font-serif);
margin-bottom: 4px;
color: #fff;
}

.candidate-status {
font-size: 1.0rem;
color: var(--text-muted);
margin-bottom: 14px;
display: flex;
align-items: center;
gap: 10px;
}

.candidate-status.winner-status {
color: var(--gold-light);
font-weight: 600;
}

.candidate-status i {
color: var(--gold-primary);
font-size: 0.95rem;
}

.btn-view-card {
background: transparent;
border: 1px solid var(--border-gold);
color: var(--gold-light);
padding: 8px 12px;
border-radius: 6px;
font-size: 0.72rem;
letter-spacing: 1px;
text-transform: uppercase;
cursor: pointer;
width: 100%;
transition: var(--transition);
}

.btn-view-card:hover {
background: var(--gold-primary);
color: var(--primary-navy);
border-color: var(--gold-primary);
}

.btn-winner-card {
background: var(--gold-gradient);
color: #040914 !important;
font-weight: 700;
border: none;
}

/* LOCATION */
.location-box {
background: linear-gradient(145deg, var(--navy-card) 0%, #081126 100%);
border: 1px solid var(--border-gold);
border-radius: 20px;
overflow: hidden;
display: grid;
grid-template-columns: 1.15fr 1fr;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
margin-bottom: 20px;
}

.location-image-wrap {
position: relative;
min-height: 380px;
background: #020611;
overflow: hidden;
}

.location-image-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: var(--transition);
}

.location-box:hover .location-image-wrap img {
transform: scale(1.04);
}

.location-badge {
position: absolute;
top: 18px;
left: 18px;
background: rgba(4, 9, 20, 0.88);
border: 1px solid var(--gold-primary);
color: var(--gold-light);
padding: 6px 14px;
border-radius: 30px;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
backdrop-filter: blur(8px);
}

.location-content {
padding: clamp(24px, 4vw, 42px);
display: flex;
flex-direction: column;
justify-content: center;
gap: 16px;
}

.location-content h4 {
font-size: clamp(1.6rem, 2.5vw, 2.2rem);
line-height: 1.2;
color: #fff;
}

.location-place {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--gold-light);
font-size: 0.88rem;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: 600;
}

.location-place i {
color: var(--gold-primary);
}

.location-desc {
color: var(--text-muted);
font-size: 0.92rem;
line-height: 1.7;
}

.location-highlights {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 14px;
margin-top: 8px;
}

.loc-highlight-item {
background: rgba(4, 9, 20, 0.55);
border: 1px solid var(--border-gold);
padding: 12px 14px;
border-radius: 10px;
display: flex;
align-items: center;
gap: 10px;
}

.loc-highlight-item i {
color: var(--gold-primary);
font-size: 1.15rem;
}

.loc-highlight-item span {
font-size: 0.8rem;
color: #fff;
font-weight: 500;
}

/* GALLERIA */
.gallery-section {
background: var(--navy-light);
}

.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 22px;
margin-top: 15px;
}

.gallery-item {
position: relative;
border-radius: 14px;
overflow: hidden;
border: 1px solid var(--border-gold);
height: 320px;
height: 25vh;
background: #060d1f;
cursor: pointer;
}

.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
transition: var(--transition);
display: block;
}

.gallery-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(4, 9, 20, 0.1) 0%, rgba(4, 9, 20, 0.88) 100%);
opacity: 0;
transition: var(--transition);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 20px;
}

.gallery-item:hover img {
transform: scale(1.08);
}

.gallery-item:hover .gallery-overlay {
opacity: 1;
}

.gallery-overlay h5 {
font-family: var(--font-serif);
font-size: 1.15rem;
color: var(--gold-light);
margin-bottom: 2px;
}

.gallery-overlay span {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--text-muted);
}

/* VIDEO CARDS */
.video-card {
position: relative;
border-radius: 16px;
overflow: hidden;
border: 1px solid var(--border-gold);
height: 290px;
background: #050c1e;
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: var(--transition);
}

.video-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(212, 175, 55, 0.22);
border-color: var(--gold-primary);
}

.video-card img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.5;
transition: var(--transition);
}

.video-card:hover img {
opacity: 0.65;
transform: scale(1.05);
}

.video-badge {
position: relative;
z-index: 2;
margin: 16px;
align-self: flex-start;
background: rgba(4, 9, 20, 0.85);
border: 1px solid var(--border-gold);
color: var(--gold-light);
padding: 4px 10px;
border-radius: 20px;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
display: flex;
align-items: center;
gap: 6px;
}

.video-play-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 62px;
height: 62px;
border-radius: 50%;
background: rgba(4, 9, 20, 0.75);
border: 2px solid var(--gold-primary);
color: var(--gold-light);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
box-shadow: 0 0 20px rgba(212, 175, 55, 0.35);
transition: var(--transition);
}

.video-card:hover .video-play-btn {
background: var(--gold-gradient);
color: #040914;
transform: translate(-50%, -50%) scale(1.12);
box-shadow: 0 0 30px rgba(212, 175, 55, 0.6);
}

.video-info-bottom {
position: relative;
z-index: 2;
padding: 20px;
background: linear-gradient(180deg, transparent 0%, rgba(4, 9, 20, 0.95) 100%);
}

.video-info-bottom h5 {
font-family: var(--font-serif);
font-size: 1.25rem;
color: #fff;
margin-bottom: 3px;
}

.video-info-bottom span {
font-size: 0.75rem;
color: var(--gold-light);
text-transform: uppercase;
letter-spacing: 1px;
}

/* MODALE PARTECIPANTI */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(2, 5, 12, 0.85);
backdrop-filter: blur(12px);
z-index: 2000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
opacity: 0;
pointer-events: none;
transition: opacity 0.35s ease;
}

.modal-overlay.active {
opacity: 1;
pointer-events: auto;
}

.modal-card {
background: linear-gradient(150deg, #101c3d 0%, #080f24 100%);
border: 1px solid var(--gold-primary);
border-radius: 20px;
width: 100%;
max-width: 820px;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7);
position: relative;
transform: scale(0.92);
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
display: grid;
grid-template-columns: 340px 1fr;
}

.modal-overlay.active .modal-card {
transform: scale(1);
}

.modal-close {
position: absolute;
top: 15px;
right: 15px;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(4, 9, 20, 0.7);
border: 1px solid var(--border-gold);
color: var(--gold-light);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
cursor: pointer;
z-index: 10;
transition: var(--transition);
}

.modal-close:hover {
background: var(--gold-primary);
color: var(--primary-navy);
transform: rotate(90deg);
}

.modal-visual {
background: #040914;
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
min-height: 360px;
}

.modal-visual img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
}

.modal-visual-icon {
font-size: 6rem;
color: rgba(212, 175, 55, 0.45);
}

.modal-visual-sponsor {
background: #ffffff;
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
min-height: 360px;
}

.modal-visual-sponsor img {
width: 100%;
object-fit: cover;
object-position: center top;
display: block;
}

.modal-body {
padding: 35px 30px;
display: flex;
flex-direction: column;
justify-content: center;
}

.modal-tag {
font-size: 0.72rem;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--gold-primary);
font-weight: 700;
margin-bottom: 6px;
display: inline-block;
}

.modal-name {
font-size: clamp(1.8rem, 3vw, 2.3rem);
margin-bottom: 6px;
line-height: 1.15;
}

.modal-title-status {
color: var(--gold-light);
font-size: 0.9rem;
font-weight: 500;
margin-bottom: 18px;
display: flex;
align-items: center;
gap: 6px;
}

.modal-bio {
color: var(--text-muted);
font-size: 0.9rem;
line-height: 1.6;
margin-bottom: 22px;
}

.modal-traits-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
background: rgba(4, 9, 20, 0.5);
padding: 16px;
border-radius: 12px;
border: 1px solid var(--border-gold);
}

.trait-item {
display: flex;
flex-direction: column;
margin-top: 12px;
margin-bottom: 12px;
}

.trait-label {
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--gold-primary);
font-weight: 600;
}

.trait-val {
font-size: 0.85rem;
color: #fff;
font-weight: 500;
}


/* ================= STILI AGGIUNTIVI PER GALLERIA PERSONALE ================= */
#modalPersonalGalleryBtn {
  background: var(--gold-gradient);
  color: var(--primary-navy) !important;
  font-weight: 700;
  border: none;
  transition: var(--transition);
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}

#modalPersonalGalleryBtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(212, 175, 55, 0.45);
  opacity: 0.95;
}

/* LIGHTBOX MODALE MEDIA FULL-SCREEN */
.lightbox-overlay {
position: fixed;
inset: 0;
background: rgba(2, 6, 16, 0.96);
backdrop-filter: blur(16px);
z-index: 2500;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(10px, 2vw, 20px);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}

.lightbox-overlay.active {
opacity: 1;
pointer-events: auto;
}

.lightbox-content-box {
position: relative;
background: #060c1d;
border: 1px solid var(--gold-primary);
border-radius: 16px;
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9);
width: 90vw;
height: 80vh;
max-width: none;
max-height: none;
overflow: hidden;
display: flex;
flex-direction: column;
transform: scale(0.92);
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.lightbox-overlay.active .lightbox-content-box {
transform: scale(1);
}

.lightbox-media-container {
width: 100%;
flex: 1;
background: #02050e;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}

.lightbox-media-container img,
.lightbox-media-container video {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
outline: none;
	
}

.lightbox-media-container img, 
.lightbox-media-container video {
  opacity: 1;
  transition: opacity 0.15s ease-in-out; /* Solo opacità, niente zoom */
}

.lightbox-media-container.animating img,
.lightbox-media-container.animating video {
  opacity: 0;
}

.lightbox-nav-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 52px;
height: 52px;
border-radius: 50%;
background: rgba(4, 9, 20, 0.8);
border: 1px solid var(--gold-primary);
color: var(--gold-light);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.35rem;
cursor: pointer;
z-index: 10;
transition: var(--transition);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
}

.lightbox-nav-btn:hover {
background: var(--gold-gradient);
color: #040914;
transform: translateY(-50%) scale(1.1);
box-shadow: 0 0 25px rgba(212, 175, 55, 0.6);
}

.lightbox-nav-btn.prev {
left: 20px;
}

.lightbox-nav-btn.next {
right: 20px;
}

.lightbox-footer-info {
padding: 14px 24px;
background: #060c1d;
border-top: 1px solid var(--border-gold);
display: flex;
justify-content: space-between;
align-items: center;
gap: 15px;
min-height: 65px;
}

.lightbox-footer-info h4 {
font-size: 1.15rem;
color: #fff;
}

.lightbox-footer-info p {
font-size: 0.8rem;
color: var(--gold-light);
text-transform: uppercase;
letter-spacing: 1px;
}

.lightbox-counter {
background: rgba(212, 175, 55, 0.15);
border: 1px solid var(--border-gold);
color: var(--gold-light);
padding: 4px 12px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 1px;
white-space: nowrap;
}

.lightbox-close-btn {
position: absolute;
top: 15px;
right: 15px;
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(4, 9, 20, 0.85);
border: 1px solid var(--border-gold);
color: var(--gold-light);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
cursor: pointer;
z-index: 20;
transition: var(--transition);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.lightbox-close-btn:hover {
background: var(--gold-primary);
color: var(--primary-navy);
transform: rotate(90deg) scale(1.05);
}

/* SPONSORS */
.sponsors {
background: var(--primary-navy);
text-align: center;
}

.sponsors-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 26px;
align-items: stretch;
margin-top: 35px;
}

.sponsor-card {
background: #ffffff;
border: 1px solid rgba(212, 175, 55, 0.4);
padding: 26px 20px;
border-radius: 18px;
transition: var(--transition);
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
gap: 16px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.sponsor-card:hover {
border-color: var(--gold-primary);
transform: translateY(-5px);
box-shadow: 0 16px 35px rgba(212, 175, 55, 0.25);
}

.sponsor-logo-box {
width: 100%;
height: 100%;
background-color: #ffffff;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
}

.sponsor-logo-img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
background-color: #ffffff;
}

.sponsor-icon {
font-size: 2.4rem;
color: #9f7d1b;
}

.sponsor-info {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
flex: 1;
}

.sponsor-name {
font-family: var(--font-serif);
font-size: 1.35rem;
color: #0b1426;
font-weight: 700;
letter-spacing: 0.5px;
line-height: 1.25rem;
margin-bottom: 0.8rem;
}

.sponsor-category {
font-size: 0.72rem;
color: #8c6d1f;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
line-height: 1.3;
}

.btn-sponsor-site {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
background: #040914;
color: var(--gold-light);
border: 1px solid var(--gold-primary);
padding: 9px 16px;
border-radius: 50px;
font-size: 0.78rem;
letter-spacing: 1px;
font-weight: 600;
text-transform: uppercase;
text-decoration: none;
transition: var(--transition);
margin-top: 6px;
}

.btn-sponsor-site:hover {
background: var(--gold-gradient);
color: #040914;
box-shadow: 0 4px 15px rgba(212, 175, 55, 0.35);
transform: translateY(-2px);
}

.btn-sponsor-site i {
font-size: 0.75rem;
}

/* CONTATTI */
.contact {
background: var(--navy-light);
padding-top: clamp(35px, 5vw, 65px);
}

.contact-container {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: clamp(30px, 5vw, 60px);
}

.contact-info h3 {
font-size: clamp(1.5rem, 3vw, 2rem);
margin-bottom: 1.2rem;
}

.contact-info p {
color: var(--text-muted);
margin-bottom: 1.8rem;
font-size: 0.95rem;
}

.info-item {
display: flex;
align-items: flex-start;
gap: 14px;
margin-bottom: 1.4rem;
}

.info-item i {
font-size: 1.15rem;
color: var(--gold-primary);
margin-top: 4px;
}

.info-item h5 {
font-size: 0.92rem;
margin-bottom: 2px;
}

.info-item span {
font-size: 0.82rem;
color: var(--text-muted);
word-break: break-all;
}

.contact-form {
background: var(--navy-card);
border: 1px solid var(--border-gold);
padding: clamp(20px, 4vw, 38px);
border-radius: 16px;
}

.form-group {
margin-bottom: 16px;
}

.form-group label {
display: block;
font-size: 0.75rem;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--gold-light);
margin-bottom: 6px;
}

.form-control {
width: 100%;
background: rgba(4, 9, 20, 0.7);
border: 1px solid var(--border-gold);
border-radius: 8px;
padding: 10px 14px;
color: #fff;
font-family: var(--font-sans);
font-size: 0.88rem;
transition: var(--transition);
}

.form-control:focus {
outline: none;
border-color: var(--gold-primary);
box-shadow: 0 0 10px rgba(212, 175, 55, 0.25);
}

textarea.form-control {
min-height: 110px;
resize: vertical;
}

/* FOOTER */
footer {
background: #02050c;
border-top: 1px solid var(--border-gold);
padding: 40px 6% 25px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}

.footer-logo {
height: 60px;
max-width: 240px;
width: auto;
object-fit: contain;
filter: drop-shadow(0 2px 10px rgba(212, 175, 55, 0.3));
margin-bottom: 1.2rem;
}

.footer-links {
display: flex;
justify-content: center;
gap: 15px 22px;
margin: 10px 0 20px;
flex-wrap: wrap;
}

.footer-links a {
color: var(--text-muted);
text-decoration: none;
font-size: 0.8rem;
transition: var(--transition);
}

.footer-links a:hover {
color: var(--gold-light);
}

.social-links {
display: flex;
justify-content: center;
gap: 14px;
margin-bottom: 20px;
}

.social-links a {
width: 38px;
height: 38px;
border-radius: 50%;
border: 1px solid var(--border-gold);
display: flex;
align-items: center;
justify-content: center;
color: var(--gold-light);
text-decoration: none;
transition: var(--transition);
}

.social-links a:hover {
background: var(--gold-primary);
color: var(--primary-navy);
transform: translateY(-3px);
}

.copyright {
font-size: 0.75rem;
color: rgba(178, 190, 210, 0.6);
}

/* ================= HERO SLIDER ================= */
.hero {
position: relative;
overflow: hidden;
}

.hero-slider-bg {
position: absolute;
inset: 0;
z-index: 0;
}

.hero-slide {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity 1.2s ease-in-out;
filter: brightness(0.65);
}

.hero-slide.active {
opacity: 0.35;
}

.hero-slider-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 3;
background: rgba(4, 9, 20, 0.6);
border: 1px solid var(--border-gold);
color: var(--gold-light);
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
	display: none;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--transition);
backdrop-filter: blur(6px);
}

.hero-slider-btn:hover {
background: var(--gold-gradient);
color: var(--primary-navy);
border-color: var(--gold-primary);
transform: translateY(-50%) scale(1.1);
}

.hero-slider-btn.prev {
left: 3%;
}

.hero-slider-btn.next {
right: 3%;
}

.hero-slider-dots {
position: absolute;
bottom: 25px;
left: 50%;
transform: translateX(-50%);
z-index: 3;
display: flex;
gap: 10px;
}

.hero-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
border: 1px solid var(--border-gold);
cursor: pointer;
transition: var(--transition);
}

.hero-dot.active {
background: var(--gold-primary);
width: 28px;
border-radius: 6px;
}

/* ===================================================================
OTTIMIZZAZIONI UI VERSIONE MOBILE (RESPONSIVE INTEGRATE)
=================================================================== */
@media (max-width: 992px) {
	
	header {
    padding: 0.5rem 4%;
    height: 70px;       /* Altezza fissa e bloccata a 60px */
    min-height: 70px;
  }

  .header-logo-img {
    height: 58px !important; /* Forziamo il logo a rientrare nello spazio senza espandere l'header */
    max-height: 58px;
  }
  .category-divider {
    scroll-margin-top: 145px; /* Margine calibrato per l'altezza ridotta di header e barra su mobile */
  }
  .edition-subsections-bar {
    position: sticky;
    top: 70px;          /* Si attacca esattamente all'altezza fissa dell'header */
    margin-top: -1px;   /* Trucco di sicurezza: 1 pixel di sovrapposizione che cancella ogni fessura */
    margin-bottom: 25px;
  }
	
.about-grid, .contact-container, .location-box {
grid-template-columns: 1fr;
}

.menu-toggle {
display: block;
}

nav {
position: fixed;
top: 0;
right: -100% !important;
width: 80%;
max-width: 320px;
height: 100vh;
background: rgba(4, 9, 20, 0.98);
border-left: 1px solid var(--border-gold);
backdrop-filter: blur(16px);
flex-direction: column;
justify-content: center;
align-items: center;
gap: 1.8rem;
transition: right 0.35s ease;
padding: 40px 20px;
z-index: 10000;
}

nav.active {
right: 0 !important;
}

nav a {
font-size: 1rem;
}

.modal-card {
grid-template-columns: 1fr;
max-height: 85vh;
}

.modal-visual {
min-height: 280px;
max-height: 340px;
}

.lightbox-nav-btn {
width: 42px;
height: 42px;
font-size: 1rem;
}

.lightbox-nav-btn.prev {
left: 8px;
}

.lightbox-nav-btn.next {
right: 8px;
}
	
gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 10px; /* Regola lo spazio tra le foto a piacimento */
  }
	
	
}

@media (max-width: 768px) {
.edition-subsections-bar {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
justify-content: flex-start;
padding: 12px 15px;
margin: 0 0 25px 0;
gap: 8px;
scroll-snap-type: x mandatory;
background: rgba(4, 9, 20, 0.95);
border: none;
border-bottom: 1px solid var(--border-gold);
}

.edition-subsections-bar::-webkit-scrollbar {
display: none;
}
.edition-subsections-bar {
scrollbar-width: none;
}

.sub-anchor-btn {
flex: 0 0 auto;
font-size: 0.8rem;
padding: 8px 14px;
white-space: nowrap;
scroll-snap-align: start;
}

.location-box {
grid-template-columns: 1fr;
margin: 0 10px 40px;
}

.location-image-wrap {
min-height: 220px;
}

.location-content {
padding: 20px;
}

.location-content h4 {
font-size: 1.4rem;
}

.location-highlights {
grid-template-columns: 1fr;
}

.location-links {
flex-direction: column;
width: 100%;
}

.location-links a {
width: 100%;
justify-content: center;
box-sizing: border-box;
}

.modal-card {
width: 95%;
max-height: 85vh;
grid-template-columns: 1fr;
}

.modal-visual {
min-height: 220px;
max-height: 260px;
}

.modal-body {
padding: 20px;
}
	
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px; /* Regola lo spazio tra le foto a piacimento */
  }
	
/* Nascondiamo le frecce laterali su mobile perché si usa lo swipe */
  .lightbox-nav-btn {
    display: none !important;
  }	
	
	
}

@media (max-width: 576px) {
header {
    padding: 0.5rem 4%;
    height: 70px;       /* Altezza fissa e bloccata a 60px */
    min-height: 70px;
  }

  .header-logo-img {
    height: 58px !important; /* Forziamo il logo a rientrare nello spazio senza espandere l'header */
    max-height: 58px;
  }

  .edition-subsections-bar {
    position: sticky;
    top: 70px;          /* Si attacca esattamente all'altezza fissa dell'header */
    margin-top: -1px;   /* Trucco di sicurezza: 1 pixel di sovrapposizione che cancella ogni fessura */
    margin-bottom: 25px;
  }

.hero {
padding: 120px 4% 50px;
}
	
.hero-slider-btn {
	display: none;
}	
	

.candidates-grid {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
padding: 0 10px;
}

.candidate-avatar {
height: 160px;
}

.candidate-details {
padding: 12px;
}

.candidate-name {
font-size: 0.9rem;
}

.candidate-status {
font-size: 0.7rem;
margin-bottom: 10px;
}

.winner-badge-top {
top: 6px;
right: 6px;
padding: 2px 6px;
font-size: 0.55rem;
gap: 4px;
border-radius: 12px;
}

.winner-badge-top i {
font-size: 0.55rem;
}

.btn-view-card {
font-size: 0.6rem;
padding: 6px 8px;
}

.modal-body {
padding: 25px 20px;
}

.modal-traits-grid {
grid-template-columns: 1fr;
}

.lightbox-footer-info {
flex-direction: column;
align-items: flex-start;
padding: 12px 16px;
}

.lightbox-media-container {
height: 48vh;
}
	
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px; /* Regola lo spazio tra le foto a piacimento */
  }
	
	
}