/* =========================
RESET E BASE
========================= */

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

body{
font-family:'Roboto',Arial,sans-serif;
background:#fff;
color:#333;
line-height:1.6;
scroll-behavior:smooth;
}

.container{
width:90%;
max-width:1200px;
margin:0 auto;
}

/* =========================
HEADER
========================= */

header{
background:#fff;
position:fixed;
top:0;
width:100%;
z-index:1000;
box-shadow:0 2px 5px rgba(0,0,0,0.05);
}

.header-container{
display:flex;
justify-content:space-between;
align-items:center;
padding:1rem 0;
}

.logo h1{
font-family:'Lora',serif;
font-size:1.5rem;
color:#1B4965;
font-weight:700;
}

/* =========================
HAMBURGER
========================= */

.hamburger{
display:flex;
flex-direction:column;
justify-content:space-between;
width:25px;
height:18px;
cursor:pointer;
z-index:1100;
}

.hamburger span{
height:3px;
background:#1B4965;
border-radius:2px;
transition:all .3s;
}

.hamburger.active span:nth-child(1){
transform:rotate(45deg) translate(5px,5px);
}

.hamburger.active span:nth-child(2){
opacity:0;
}

.hamburger.active span:nth-child(3){
transform:rotate(-45deg) translate(5px,-5px);
}

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

.nav-menu{
position:fixed;
top:0;
right:-100%;
width:70%;
height:100%;
background:#f8f9fa;
display:flex;
flex-direction:column;
align-items:center;
transition:right .35s ease;
box-shadow:-2px 0 8px rgba(0,0,0,0.1);
padding-top:80px;
}

.nav-menu.active{
right:0;
}

.nav-menu ul{
list-style:none;
width:100%;
padding-left:0;
display:flex;
flex-direction:column;
gap:1.8rem;
align-items:center;
}

/* animazione cascata menu */

.menu-right li{
opacity:0;
transform:translateY(15px);
transition:opacity .5s, transform .5s;
}

.nav-menu.active .menu-right li{
opacity:1;
transform:translateY(0);
}

.nav-menu.active .menu-right li:nth-child(1){transition-delay:.15s;}
.nav-menu.active .menu-right li:nth-child(2){transition-delay:.25s;}
.nav-menu.active .menu-right li:nth-child(3){transition-delay:.35s;}
.nav-menu.active .menu-right li:nth-child(4){transition-delay:.45s;}

.nav-menu a{
font-size:1.3rem;
font-weight:500;
color:#1B4965;
text-decoration:none;
transition:color .3s;
}

.nav-menu a:hover{
color:#0F2E41;
}

/* =========================
LOGO TOP MENU
========================= */

.menu-top-logo{
width:100%;
text-align:center;
padding:2.5rem 1rem 2rem 1rem;
}

.menu-top-logo h1{
font-size:1.4rem;
font-weight:700;
color:#1B4965;
line-height:1.2;
}

.menu-top-logo .underline{

display:block;
height:1px;
width:100%;
max-width:220px;
margin:1.5rem auto 0 auto;

background:linear-gradient(
to right,
transparent,
#1B4965,
#1B4965,
transparent
);

opacity:.8;

transform:scaleX(0);
transform-origin:left;

transition:transform .7s cubic-bezier(.77,0,.18,1);

}

.nav-menu.active .underline{
transform:scaleX(1);
}

/* whatsapp */

.menu-whatsapp-item img{
width:28px;
height:28px;
object-fit:contain;
cursor:pointer;
transition:transform .2s;
}

.menu-whatsapp-item img:hover{
transform:scale(1.15);
}

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

.hero{

position:relative;
display:flex;
justify-content:center;
align-items:center;

height:90vh;

text-align:center;
padding:0 1rem;

background:url('img/banner-commercialista.jpg') center/cover no-repeat;

overflow:hidden;
}

.hero-overlay{

position:absolute;
width:100%;
height:100%;

background:rgba(27,73,101,0.55);

z-index:1;

}

.hero-content{

position:relative;
z-index:2;
max-width:800px;

}

.hero-content h1{

font-family:'Lora',serif;
color:#fff;
font-size:2.8rem;
margin-bottom:1rem;

}

.hero-content p{

color:#fff;
font-size:1.2rem;
margin-bottom:1.5rem;

}

/* CTA */

.btn-cta{

display:inline-block;

margin-top:1.5rem;

padding:.8rem 2rem;

background-color:#1B4965;
color:#fff;

font-weight:600;
font-size:1.1rem;

border-radius:8px;

text-decoration:none;

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

}

.btn-cta:hover{

background:#0F2E41;
transform:translateY(-2px);

}

/* =========================
SERVIZI
========================= */

.servizi{

padding:6rem 2rem;
text-align:center;
background:#fefefe;

}

.servizi h2{

color:#1B4965;
margin-bottom:3rem;
font-size:2.2rem;

}

.servizi-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:2.5rem;

}

.servizio{

background:#fff;
border-radius:15px;

overflow:hidden;

box-shadow:0 6px 18px rgba(0,0,0,0.08);

transition:transform .4s, box-shadow .4s;

opacity:0;
transform:translateY(30px);

}

.servizio.visible{

opacity:1;
transform:translateY(0);

}

.servizio:hover{

transform:translateY(-10px);

box-shadow:0 15px 25px rgba(0,0,0,0.15);

}

.servizio img{

width:100%;
height:300px;
object-fit:cover;
transition:transform .4s;

}

.servizio:hover img{
transform:scale(1.05);
}

.servizio h3{

color:#1B4965;
font-size:1.3rem;
margin:1rem;

}

.servizio p{

font-size:1rem;
margin:0 1rem 1.5rem 1rem;

}

/* =========================
CHI SIAMO
========================= */

.chi-siamo{

padding:6rem 2rem;
background:#f8f9fa;

}

.chi-siamo-container{

display:flex;
align-items:center;
justify-content:center;
gap:3rem;
flex-wrap:wrap;

}

.chi-siamo-video{

flex:0 0 300px;
height:300px;

border-radius:50%;

overflow:hidden;

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

transition:transform .3s;

}

.chi-siamo-video:hover{
transform:scale(1.05);
}

.chi-siamo-video video{

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

}

.chi-siamo-testo{

flex:1;
max-width:600px;

}

.chi-siamo h2{

color:#1B4965;
font-size:2rem;
margin-bottom:1.5rem;

}

.chi-siamo p{

margin-bottom:1rem;

}

/* animazioni scroll */

.chi-siamo-video,
.chi-siamo-testo{

opacity:0;
transform:translateY(30px);
transition:opacity .6s, transform .6s;

}

.chi-siamo-video.visible,
.chi-siamo-testo.visible{

opacity:1;
transform:translateY(0);

}

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

.contatti{

padding:6rem 2rem;
text-align:center;

}

.contatti h2{

color:#1B4965;
margin-bottom:2rem;

}

.contatti-container{

display:flex;
flex-direction:column;
align-items:center;
gap:2rem;

}

.modulo-contatti{

background:#f9f9f9;
padding:2.5rem;

border-radius:12px;

width:90%;
max-width:700px;

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

}

.modulo-contatti input,
.modulo-contatti textarea{

width:100%;

padding:.8rem;

border:1px solid #ccc;

border-radius:8px;

margin-bottom:1rem;

}

.modulo-contatti button{

padding:.8rem 1.8rem;

background:#1B4965;

color:#fff;

border:none;
border-radius:8px;

cursor:pointer;

transition:background .3s;

}

.modulo-contatti button:hover{

background:#0F2E41;

}

/* MAPPA */

.mappa{

width:100%;
max-width:700px;

border-radius:10px;
overflow:hidden;

}

.map-caption{

margin-top:10px;

font-style:italic;

color:#1B4965;
font-weight:600;

}

/* =========================
FOOTER
========================= */

footer{

background:#f8f9fa;

padding:2rem 0;

text-align:center;

}

footer .social a{

margin:0 .5rem;

transition:transform .3s, opacity .3s;

}

footer .social img{

width:28px;
height:28px;

}

footer .social a:hover{

transform:scale(1.2);
opacity:.85;

}

/* =========================
RESPONSIVE
========================= */

@media(max-width:768px){

.nav-menu{
width:80%;
}

.hero{
height:75vh;
}

.hero-content h1{
font-size:2rem;
}

.hero-content p{
font-size:1rem;
}

.chi-siamo-container{
flex-direction:column;
gap:2rem;
}

.chi-siamo-testo{
text-align:center;
}

}

/* =========================
BLUR quando menu aperto
========================= */

.site-content{

transition:filter .4s ease, transform .4s ease;

}

.site-content.menu-open{

filter:blur(6px);
transform:scale(.995);

}