@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,600;0,700;0,800;1,400;1,600;1,700;1,800&display=swap');

/* ================
   CSS VARIABLES
===================*/
:root {
	--cif-green-dark: #005a32;
	--cif-green: #008a45;
	--cif-green-light: #3cb371;
	--cif-white: #ffffff;
	--cif-gold: #ffd700;
}

/* ================
   ACCESSIBILITY
===================*/
.skip-link {
	position: absolute;
	top: -100px; left: 0;
	background: var(--cif-gold);
	color: var(--cif-green-dark);
	padding: 0.8rem 1.5rem;
	font-weight: 700;
	z-index: 99999;
	border-radius: 0 0 8px 0;
	text-decoration: none;
	transition: top 0.2s ease;
}
.skip-link:focus { top: 0; }
*:focus-visible { outline: 3px solid var(--cif-gold); outline-offset: 3px; }
a:focus-visible { outline: 3px solid var(--cif-gold); outline-offset: 2px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ================
   BASE
===================*/
body {
	font-family: 'Montserrat', sans-serif;
	font-weight: normal; font-style: normal;
	font-size: 1.2rem;
	line-height: 1.4;
	color: #ffffff;
	background-color: var(--cif-green-dark);
	background-image:
		radial-gradient(ellipse at 20% 50%, rgba(0,138,69,0.4) 0%, transparent 60%),
		radial-gradient(ellipse at 80% 20%, rgba(60,179,113,0.2) 0%, transparent 50%),
		radial-gradient(ellipse at 50% 100%, rgba(0,90,50,0.6) 0%, transparent 40%);
	background-attachment: fixed;
	min-height: 100vh;
	overflow-x: hidden;
}
@media(max-width:767px) { body { font-size: 1rem; } }

h1, h3, h4 { font-family: 'Montserrat', sans-serif; font-weight: bold; text-align: center; }
h2 { font-family: 'Montserrat', sans-serif; font-weight: bold; text-align: left; margin-top: 2rem; }
.table { color: #ffffff; }
@media(max-width:575px) { .table { font-size: .75rem; } }
.row { margin-right: 0; margin-left: 0; }
a:hover { color: inherit; }

/* ================
   PARTICLES
===================*/
.page-wrapper { position: relative; }
.particles { position: fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:0; overflow:hidden; }
.particle { position: absolute; border-radius: 50%; background: rgba(255,255,255,0.08); animation: particleFloat linear infinite; }
.particle:nth-child(1)  { width:6px; height:6px; left:10%; animation-duration:18s; animation-delay:0s; }
.particle:nth-child(2)  { width:4px; height:4px; left:25%; animation-duration:22s; animation-delay:3s; }
.particle:nth-child(3)  { width:8px; height:8px; left:40%; animation-duration:16s; animation-delay:1s; }
.particle:nth-child(4)  { width:3px; height:3px; left:55%; animation-duration:24s; animation-delay:5s; }
.particle:nth-child(5)  { width:5px; height:5px; left:70%; animation-duration:20s; animation-delay:2s; }
.particle:nth-child(6)  { width:7px; height:7px; left:85%; animation-duration:17s; animation-delay:4s; }
.particle:nth-child(7)  { width:4px; height:4px; left:15%; animation-duration:21s; animation-delay:6s; }
.particle:nth-child(8)  { width:6px; height:6px; left:60%; animation-duration:19s; animation-delay:1s; }
.particle:nth-child(9)  { width:3px; height:3px; left:35%; animation-duration:23s; animation-delay:7s; }
.particle:nth-child(10) { width:5px; height:5px; left:90%; animation-duration:15s; animation-delay:3s; }
.particle:nth-child(11) { width:4px; height:4px; left:5%;  animation-duration:25s; animation-delay:8s; }
.particle:nth-child(12) { width:6px; height:6px; left:48%; animation-duration:20s; animation-delay:2s; }
@keyframes particleFloat {
	0%   { transform: translateY(110vh) rotate(0deg);  opacity:0; }
	10%  { opacity:1; }
	90%  { opacity:1; }
	100% { transform: translateY(-10vh) rotate(360deg); opacity:0; }
}

/* ================
   HERO IMAGE
===================*/
.hero-wrapper {
	position: relative; overflow: hidden;
	border-radius: 0 0 2rem 2rem;
	box-shadow: 0 20px 60px rgba(0,0,0,0.5);
	z-index: 1;
}
.hero-wrapper img {
	opacity: 0; transform: scale(1.1) translateY(10px);
	animation: heroReveal 1.6s cubic-bezier(0.22,1,0.36,1) forwards;
}
@keyframes heroReveal {
	0%   { opacity:0; transform: scale(1.12) translateY(10px); filter: brightness(0.2) blur(6px); }
	40%  { opacity:1; filter: brightness(0.7) blur(1px); }
	100% { opacity:1; transform: scale(1) translateY(0); filter: brightness(1) blur(0); }
}
.hero-wrapper::before {
	content:''; position:absolute; top:0; left:-120%; width:40%; height:100%;
	background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,0.04) 30%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.04) 70%, transparent 100%);
	transform: skewX(-18deg); animation: heroShimmer1 5s 2s ease-in-out infinite; pointer-events:none; z-index:2;
}
.hero-wrapper::after {
	content:''; position:absolute; top:0; left:-120%; width:25%; height:100%;
	background: linear-gradient(100deg, transparent 0%, rgba(255,215,0,0.03) 40%, rgba(255,215,0,0.07) 50%, rgba(255,215,0,0.03) 60%, transparent 100%);
	transform: skewX(-18deg); animation: heroShimmer2 5s 2.4s ease-in-out infinite; pointer-events:none; z-index:3;
}
@keyframes heroShimmer1 { 0%{left:-120%} 35%{left:150%} 100%{left:150%} }
@keyframes heroShimmer2 { 0%{left:-120%} 40%{left:160%} 100%{left:160%} }

/* ================
   CTA BUTTON
===================*/
.button-wrapper {
	perspective:800px; display:flex; justify-content:center;
	opacity:0; animation: buttonEntrance 1s 0.8s cubic-bezier(0.22,1,0.36,1) forwards;
	position:relative; z-index:1;
}
@keyframes buttonEntrance {
	0%  { opacity:0; transform: translateY(40px) scale(0.9); }
	60% { opacity:1; transform: translateY(-6px) scale(1.02); }
	100%{ opacity:1; transform: translateY(0) scale(1); }
}
.button {
	position:relative; display:inline-block;
	color: var(--cif-green-dark);
	font-family:'Montserrat',sans-serif; font-size:2.2rem; font-weight:800; letter-spacing:0.04em;
	padding: 1rem 3rem; text-decoration:none; border:none; border-radius:65px;
	cursor:pointer; overflow:hidden; z-index:1;
	transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.4s ease, background 0.4s ease, color 0.4s ease;
	background: #ffffff;
	box-shadow: 0 6px 20px rgba(255,255,255,0.35), 0 12px 40px rgba(255,255,255,0.15);
	animation: buttonBreath 3s 2.5s ease-in-out infinite;
}
@keyframes buttonBreath {
	0%,100% { box-shadow: 0 6px 20px rgba(255,255,255,0.35), 0 12px 40px rgba(255,255,255,0.15); }
	50%     { box-shadow: 0 8px 30px rgba(255,255,255,0.5), 0 16px 50px rgba(255,255,255,0.25), 0 0 60px rgba(255,255,255,0.1); }
}
.button::before {
	content:''; position:absolute; top:0; left:-120%; width:60%; height:100%;
	background: linear-gradient(105deg, transparent 0%, rgba(0,138,69,0.05) 25%, rgba(0,138,69,0.12) 50%, rgba(0,138,69,0.05) 75%, transparent 100%);
	transform: skewX(-25deg); animation: shimmerSweep 4s 3s ease-in-out infinite; z-index:2; pointer-events:none;
}
@keyframes shimmerSweep { 0%{left:-120%} 30%{left:150%} 100%{left:150%} }
.button::after {
	content:''; position:absolute; top:50%; left:50%; width:100%; height:100%;
	border-radius:65px; border:2px solid rgba(255,255,255,0.5);
	transform: translate(-50%,-50%) scale(1); animation: ringPulse 3s 2s ease-out infinite;
	z-index:-1; pointer-events:none;
}
@keyframes ringPulse {
	0%  { transform:translate(-50%,-50%) scale(1);   opacity:0.5; border-width:2px; }
	50% { transform:translate(-50%,-50%) scale(1.15); opacity:0.2; border-width:1px; }
	70% { transform:translate(-50%,-50%) scale(1.3);  opacity:0; }
	100%{ transform:translate(-50%,-50%) scale(1.3);  opacity:0; }
}
.button:hover {
	transform: translateY(-5px) scale(1.05);
	box-shadow: 0 10px 35px rgba(255,255,255,0.5), 0 20px 60px rgba(255,255,255,0.25), 0 0 80px rgba(255,255,255,0.15);
	color:#ffffff; background: var(--cif-green); animation:none;
}
.button:hover::before {
	background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,0.15) 25%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0.15) 75%, transparent 100%);
	animation: shimmerFast 0.7s ease-in-out forwards;
}
@keyframes shimmerFast { 0%{left:-120%} 100%{left:150%} }
.button:active {
	transform: translateY(-1px) scale(0.97);
	box-shadow: 0 3px 12px rgba(255,255,255,0.3), inset 0 2px 6px rgba(0,0,0,0.08);
	transition: transform 0.1s ease, box-shadow 0.1s ease;
}
@media(max-width:991px) { .button { font-size:1.4rem; padding:0.8rem 2rem; } }
@media(max-width:575px) { .button { font-size:1rem; padding:0.7rem 1.6rem; } }

small { font-size:.75rem; line-height:1; padding:0 !important; }

/* ================
   PREMI
===================*/
.premi-section { position:relative; z-index:1; }
.premi-section .section-title { opacity:0; animation: fadeInUp 0.8s 1.2s cubic-bezier(0.22,1,0.36,1) forwards; }

.premi-row { align-items: stretch; }

.premio-card {
	width:100%; display:flex; flex-direction:column; align-items:center;
	background: linear-gradient(155deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.03) 100%);
	backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255,255,255,0.18); border-radius:1.4rem;
	padding: 2.2rem 1.5rem; text-align:center;
	transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.5s ease, border-color 0.4s ease;
	position:relative; overflow:hidden;
	opacity:0; transform: translateY(50px) scale(0.95);
}
.col-12:nth-child(1) .premio-card { animation: cardReveal 0.9s 1.5s cubic-bezier(0.22,1,0.36,1) forwards; }
.col-12:nth-child(2) .premio-card { animation: cardReveal 0.9s 1.75s cubic-bezier(0.22,1,0.36,1) forwards; }
.col-12:nth-child(3) .premio-card { animation: cardReveal 0.9s 2.0s cubic-bezier(0.22,1,0.36,1) forwards; }
@keyframes cardReveal {
	0%  { opacity:0; transform: translateY(50px) scale(0.95); }
	60% { opacity:1; transform: translateY(-5px) scale(1.01); }
	100%{ opacity:1; transform: translateY(0) scale(1); }
}
.premio-card::before {
	content:''; position:absolute; top:0; left:0; right:0; height:3px;
	background: linear-gradient(90deg, transparent 10%, var(--cif-gold) 50%, transparent 90%);
	opacity:0; transition: opacity 0.4s ease;
}
.premio-card::after {
	content:''; position:absolute; top:0; left:-100%; width:50%; height:100%;
	background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,0.06) 40%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.06) 60%, transparent 100%);
	transform: skewX(-20deg); pointer-events:none;
}
.col-12:nth-child(1) .premio-card::after { animation: cardShimmer 6s 3.0s ease-in-out infinite; }
.col-12:nth-child(2) .premio-card::after { animation: cardShimmer 6s 3.8s ease-in-out infinite; }
.col-12:nth-child(3) .premio-card::after { animation: cardShimmer 6s 4.6s ease-in-out infinite; }
@keyframes cardShimmer { 0%{left:-100%} 25%{left:160%} 100%{left:160%} }

.premio-card:hover {
	transform: translateY(-10px) scale(1.02);
	box-shadow: 0 25px 50px rgba(0,0,0,0.35), 0 0 30px rgba(255,215,0,0.08);
	border-color: rgba(255,215,0,0.3);
}
.premio-card:hover::before { opacity:1; }

.premio-icon { font-size:3rem; margin-bottom:1rem; display:block; animation: floatIcon 3.5s ease-in-out infinite; }
.col-12:nth-child(1) .premio-icon { animation-delay:0s; }
.col-12:nth-child(2) .premio-icon { animation-delay:0.6s; }
.col-12:nth-child(3) .premio-icon { animation-delay:1.2s; }
@keyframes floatIcon { 0%,100%{ transform: translateY(0) scale(1); } 50%{ transform: translateY(-8px) scale(1.05); } }

.premio-title { font-weight:800; font-size:1.1rem; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:0.8rem; color: var(--cif-gold); }
.premio-desc { font-size:0.95rem; opacity:0.9; line-height:1.6; flex-grow:1; display:flex; align-items:center; }

/* ================
   COME PARTECIPARE
===================*/
.steps-section { position:relative; z-index:1; }
.steps-section .section-title { opacity:0; animation: fadeInUp 0.8s 2.3s cubic-bezier(0.22,1,0.36,1) forwards; }

/* Social icons */
.social-icons {
	display: flex;
	justify-content: center;
	gap: 1.5rem;
	margin-top: -1rem;
	margin-bottom: 2.5rem;
	opacity: 0;
	animation: fadeInUp 0.8s 2.5s cubic-bezier(0.22,1,0.36,1) forwards;
}

.social-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: rgba(255,255,255,0.1);
	border: 1px solid rgba(255,255,255,0.25);
	font-size: 1.5rem;
	color: #ffffff;
	transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.social-icon:hover {
	transform: scale(1.15);
	background: rgba(255,255,255,0.2);
	border-color: var(--cif-gold);
	box-shadow: 0 0 20px rgba(255,215,0,0.15);
}
.steps-list { list-style:none; padding-left:0; margin:0; }
.step-item { display:flex; align-items:flex-start; gap:1.2rem; margin-bottom:1.8rem; opacity:0; transform:translateX(-30px); }
.step-item:nth-child(1) { animation: stepSlideIn 0.8s 2.6s cubic-bezier(0.22,1,0.36,1) forwards; }
.step-item:nth-child(2) { animation: stepSlideIn 0.8s 2.85s cubic-bezier(0.22,1,0.36,1) forwards; }
.step-item:nth-child(3) { animation: stepSlideIn 0.8s 3.1s cubic-bezier(0.22,1,0.36,1) forwards; }
@keyframes stepSlideIn {
	0%  { opacity:0; transform:translateX(-30px); }
	60% { opacity:1; transform:translateX(4px); }
	100%{ opacity:1; transform:translateX(0); }
}
.step-number {
	flex-shrink:0; width:52px; height:52px; border-radius:50%;
	background: linear-gradient(145deg, var(--cif-green-light), var(--cif-green-dark));
	display:flex; align-items:center; justify-content:center;
	font-weight:800; font-size:1.3rem; color:#fff;
	box-shadow: 0 4px 18px rgba(0,0,0,0.25); position:relative;
}
.step-number::after {
	content:''; position:absolute; width:100%; height:100%; border-radius:50%;
	border: 1.5px solid rgba(255,255,255,0.3); animation: stepPulse 3s ease-out infinite;
}
.step-item:nth-child(1) .step-number::after { animation-delay:3s; }
.step-item:nth-child(2) .step-number::after { animation-delay:3.5s; }
.step-item:nth-child(3) .step-number::after { animation-delay:4s; }
@keyframes stepPulse { 0%{ transform:scale(1); opacity:0.4; } 60%{ transform:scale(1.5); opacity:0; } 100%{ transform:scale(1.5); opacity:0; } }

.step-text { font-size:1rem; line-height:1.6; padding-top:0.7rem; text-align: left; }
.step-text strong { color: var(--cif-gold); }
.hashtag {
	display:inline-block; background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.35);
	border-radius:2rem; padding:0.25rem 0.9rem; font-size:0.85rem; font-weight:700; margin:0.2rem;
	color: var(--cif-white); transition: background 0.3s ease, border-color 0.3s ease;
}
.hashtag:hover { background:rgba(255,255,255,0.22); border-color:rgba(255,255,255,0.5); }

/* ================
   DISCLAIMER BAR
===================*/
.disclaimer-bar {
	position:relative; z-index:1; text-align:center;
	padding:1.2rem 1.5rem; margin-top:1rem;
	border-top: 1px solid rgba(255,255,255,0.1);
}
.disclaimer-bar .disclaimer-text {
	color: rgba(255,255,255,0.7); font-size:0.8rem; line-height:1.5; margin:0;
	opacity:0; animation: fadeIn 1s 3.2s ease forwards;
}

/* ================
   SECTION TITLES
===================*/
.section-title {
	font-weight:800; font-size:1.8rem; text-align:center; text-transform:uppercase;
	letter-spacing:0.06em; margin-bottom:2.5rem; position:relative; padding-bottom:1rem;
}
.section-title::after {
	content:''; position:absolute; bottom:0; left:50%;
	transform: translateX(-50%) scaleX(0); width:60px; height:3px;
	background: linear-gradient(90deg, var(--cif-gold), var(--cif-white));
	border-radius:3px; animation: lineGrow 0.6s 0.3s cubic-bezier(0.22,1,0.36,1) forwards;
	transform-origin:center;
}
.premi-section .section-title::after { animation-delay:1.5s; }
.steps-section .section-title::after { animation-delay:2.6s; }
@keyframes lineGrow { 0%{ transform:translateX(-50%) scaleX(0); } 100%{ transform:translateX(-50%) scaleX(1); } }
@media(max-width:575px) { .section-title { font-size:1.3rem; } }

/* ================
   ANIMATIONS
===================*/
@keyframes fadeInUp { 0%{ opacity:0; transform:translateY(30px); } 100%{ opacity:1; transform:translateY(0); } }
@keyframes fadeIn { 0%{ opacity:0; } 100%{ opacity:1; } }

/* ================
   FOOTER
===================*/
footer {
	background: rgba(0, 20, 10, 0.65);
	margin-top: 2rem;
	padding: 1.8rem 0 1rem;
	position: relative;
	z-index: 1;
	border-top: 1px solid rgba(255,255,255,0.12);
}

footer p {
	color: rgba(255, 255, 255, 0.88);
	font-family: 'Montserrat', sans-serif;
	font-weight: normal;
	font-size: 0.82rem;
	text-align: justify;
	text-align-last: center;
	line-height: 1.7;
	margin-bottom: 0.5rem;
}

footer p:last-child {
	margin-bottom: 0;
	font-size: 0.75rem;
	opacity: 0.7;
}

footer p a {
	color: var(--cif-gold);
	text-decoration: underline;
	transition: color 0.3s ease;
}

footer p a:hover { color: #ffffff; }

/* ================
   PRIVACY BAR (sotto il footer)
===================*/
.privacy-bar {
	background: rgba(0, 15, 8, 0.5);
	padding: 1rem 0;
	position: relative;
	z-index: 1;
	border-top: 1px solid rgba(255,255,255,0.06);
	font-family: 'Montserrat', sans-serif;
	font-size: 0.82rem;
	color: rgba(255, 255, 255, 0.75);
	text-align: center;
	line-height: 1.5;
}

.privacy-bar a {
	color: var(--cif-gold);
	font-size: inherit;
	font-weight: 600;
	text-decoration: underline;
	transition: color 0.3s ease;
}

.privacy-bar a:hover {
	color: var(--cif-white);
}

/* ================
   MENU (compatibilità)
===================*/
#menu { background-color:rgba(255,255,255,0.70); margin-top:1rem; margin-bottom:1rem; }
#menu_list li { list-style-type:none; float:right; padding-left:1.5%; padding-right:1.5%; }
#menu_list li a { color:#2B4B9B; display:block; text-align:center; text-decoration:none; padding:.25rem .75rem; border:2px solid #2B4B9B; font-size:1.5rem; font-weight:bold; }
#menu_list li a.active, #menu_list li a:hover { color:#ffffff !important; background-color:#2B4B9B !important; }

/* ================
   FORM (compatibilità)
===================*/
textarea { width:100%; min-height:150px !important; font-family:'Montserrat',sans-serif; font-size:.85rem; color:#3f3f3e; outline:none; border-radius:0; border:2px solid #171931; }
.form-control { height:30px; margin-bottom:15px; margin-top:5px; font-size:.85rem; padding:.2rem; border-radius:0; border:1px solid #171931; }
@media(max-width:575px) { label { font-size:.80rem; } }

/* ================
   COOKIE BAR
===================*/
.cc-message { font-size:.75rem !important; line-height:1.1; }
.cc-window { z-index:9999999 !important; }
@media screen and (max-width:768px) { .cc-window { font-size:13px !important; line-height:1.3em !important; } }