@charset "UTF-8";

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

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

html{
/* iOS non deve ingrandire da solo il testo quando si ruota il telefono */
-webkit-text-size-adjust:100%;
}

body{
font-family:'Inter',Arial,sans-serif;
color:#222;
/*background-color:#ffffff;*/
background-image: url('sfondo.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment:scroll;   /* fixed su iOS causa sfarfallii e scatti */

/* Nessuna barra di scorrimento orizzontale, qualunque cosa sbordi */
overflow-x:hidden;
}

/* Qualsiasi immagine non supera mai la larghezza del suo contenitore */
img{
max-width:100%;
}

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

header{
height:120px;
background:#050505;
display:flex;
align-items:center;
padding:0 8%;
position:relative;
overflow:hidden;
}

/* Reticolo geometrico vettoriale: leggero, nitido e responsive */
.header-mesh{
position:absolute;
inset:-28px -4%;
width:108%;
height:calc(100% + 56px);
z-index:1;
pointer-events:none;
opacity:.9;
filter:blur(2px);
}

.header-mesh .mesh-main{
fill:none;
stroke:#ffffff;
stroke-width:30;
stroke-linecap:round;
stroke-linejoin:round;
vector-effect:non-scaling-stroke;
}

.header-mesh .mesh-secondary{
fill:none;
stroke:#ffffff;
stroke-width:18;
stroke-linecap:round;
stroke-linejoin:round;
vector-effect:non-scaling-stroke;
}

/* Mantiene il logo perfettamente leggibile sul lato sinistro */
header:after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(90deg,rgba(5,5,5,.95) 0%,rgba(5,5,5,.72) 12%,rgba(5,5,5,.12) 42%,transparent 100%);
z-index:2;
pointer-events:none;
}

.logo{
position:relative;
z-index:3;
}

.logo img{
height:100px;
width:auto;
display:block;
}

/* ================= PULSANTE ================= */

.btn{
display:inline-block;
background:#e30613;
color:white;
padding:18px 35px;
text-decoration:none;
font-weight:bold;
border-radius:4px;
font-family:'Montserrat',sans-serif;
transition:.3s;
}

.btn:hover{
background:#b3000d;
}

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

.hero{
/* min-height + height:auto: se il contenuto è più alto dello schermo
   (tipico dei telefoni piccoli) la hero cresce invece di tagliare. */
min-height:100vh;
min-height:100svh;   /* esclude le barre del browser mobile */
height:auto;
padding-block:clamp(2.5rem,10vh,5rem);
padding-bottom:calc(clamp(2.5rem,10vh,5rem) + 4rem);   /* spazio per i pallini */
position:relative;
isolation:isolate;   /* contesto di impilamento pulito per slideshow/velo/contenuto */
display:flex;
align-items:center;
justify-content:center;
text-align:center;
overflow:hidden;
color:white;
}

.hero:after{
content:"";
position:absolute;
inset:0;
background:rgba(0,0,0,.55);
z-index:1;       /* velo scuro sopra lo slideshow */
pointer-events:none;
}

.content{
position:relative;
z-index:2;       /* il testo e i pulsanti stanno sopra a tutto */
width:100%;
max-width:1500px;
padding:20px;
}

/* Logo e titolo affiancati nella hero */
.hero-heading{
display:flex;
align-items:center;
justify-content:center;
gap:clamp(1rem,3vw,2.5rem);
margin-bottom:clamp(1rem,4vw,2rem);
}

.hero-logo{
display:block;
width:auto;
height:clamp(52px,11vw,100px);
margin:0;
flex:0 0 auto;
}

.hero-heading h1{
margin:0;
text-align:left;
}

h1{
font-family:Montserrat,sans-serif;
/* dimensione fluida: 28px sui telefoni piccoli → 48px da tablet in su */
font-size:clamp(1.75rem,6.2vw,48px);
font-weight:900;
line-height:1.1;
letter-spacing:.5px;
text-shadow:0 5px 15px #000;
text-wrap:balance;
}

h1 span{
color:#e30613;
}

.big{
font-family:Montserrat,sans-serif;
font-size:clamp(3.25rem,17vw,100px);
font-weight:900;
color:#e30613;
line-height:1;
margin-bottom:20px;
-webkit-text-stroke:clamp(1px,.4vw,2px) white;
paint-order:stroke fill;
}

.hero p{
font-family:Montserrat,sans-serif;
font-size:clamp(1rem,3.8vw,28px);
line-height:1.4;
margin:clamp(1rem,4vw,30px) auto 15px;
max-width:60ch;
}

/* "FINO A": è un'etichetta, non deve pesare come il claim */
.hero .hero-label{
font-size:clamp(.95rem,3vw,24px);
letter-spacing:.12em;
margin-bottom:.35rem;
}

/* ---------- SLIDESHOW DI SFONDO ---------- */

/* Il contenitore fa da sfondo: copre tutta la hero e sta sotto al velo scuro. */
.slideshow-container{
position:absolute;
inset:0;
z-index:0;
pointer-events:none;   /* i click passano al contenuto sopra */
}

/* Le slide sono sovrapposte e si dissolvono: niente display:none,
   altrimenti la transizione non può avvenire. */
.slide{
position:absolute;
inset:0;
opacity:0;
transition:opacity 900ms ease;
}

.slide.is-active{
opacity:1;
}

.slide img{
width:100%;
height:100%;
object-fit:cover;
opacity:.85;
display:block;
}

.slide:nth-child(1) img{ object-position:center 98%; }  /* lambo: tiene più cielo */

/* ---------- indicatori dello slideshow ---------- */

/* Barra ancorata al fondo della hero: cambia --nav-bottom per alzarla o abbassarla. */
.slideshow-nav{
--nav-bottom:6vh;

position:absolute;
left:0;
right:0;
bottom:var(--nav-bottom);
z-index:3;
display:flex;
justify-content:center;
align-items:center;
margin:0;
}

.slideshow-dots{
display:inline-flex;
gap:12px;
align-items:center;
padding:10px 16px;
border-radius:999px;
background:rgba(0,0,0,.35);   /* leggera pastiglia per staccare dalle foto chiare */
}

.slideshow-dots button{
width:12px;
height:12px;
padding:0;
border:0;
border-radius:50%;
background:rgba(255,255,255,.45);
cursor:pointer;
transition:background .25s,transform .25s;
}

.slideshow-dots button:hover,
.slideshow-dots button:focus-visible{
background:rgba(255,255,255,.8);
outline:none;
}

.slideshow-dots button.is-active{
background:#e30613;
transform:scale(1.25);
}

/* ================= SEZIONI ================= */

section{
padding:40px 8%;
}

h2{
font-family:Montserrat,sans-serif;
font-size:clamp(1.6rem,5.5vw,40px);
font-weight:900;
text-align:center;
margin-bottom:30px;
margin-top:20px;
}

/* ================= FASCE ================= */

.fasce{
/* variabili locali: cambiando queste cambi tutta la sezione */
--fasce-max:1240px;         /* larghezza massima del contenuto  */
--fasce-gap:4rem;           /* spazio tra immagine e testo      */
--fasce-gap-y:7rem;         /* spazio verticale tra le fasce    */
--fasce-shift:3rem;         /* quanto "entrano" gli elementi    */
--fasce-durata:750ms;
--fasce-easing:cubic-bezier(.16,.84,.30,1);
--fasce-radius:10px;

max-width:var(--fasce-max);
margin-inline:auto;
padding:5rem 1.5rem;
display:flex;
flex-direction:column;
gap:var(--fasce-gap-y);
}

/* ---------- struttura della singola fascia ---------- */

.fascia{
display:grid;
grid-template-columns:1fr 1fr;
align-items:center;
gap:var(--fasce-gap);
}

/* Alternanza: sulle fasce pari l'immagine passa a destra.
   Uso `order` invece di `direction`/`row-reverse` così l'ordine
   del DOM resta logico per screen reader e tastiera. */
.fascia:nth-child(even) .fascia__media{order:2;}
.fascia:nth-child(even) .fascia__testo{order:1;}

/* ---------- immagine ---------- */

.fascia__media{
margin:0;
overflow:hidden;
border-radius:var(--fasce-radius);
}

.fascia__media img{
display:block;
/* gli attributi width/height nell'HTML sono fissi (450px, 471px...):
   senza questo le immagini sbordavano dallo schermo del telefono */
width:100%;
height:auto;
object-fit:cover;
border-radius:var(--fasce-radius);
}

/* ---------- testo ---------- */

.fascia__testo{
max-width:49ch;
}

.fascia__eyebrow{
margin:0 0 .75rem;
font-size:.85rem;
letter-spacing:.14em;
text-transform:uppercase;
color:#6b7684;
}

.fascia__titolo{
margin:0 0 1rem;
font-size:clamp(1.2rem,1.0rem + 1.2vw,2.0rem);
line-height:1.15;
letter-spacing:-.01em;
}

/* ---------- animazione di comparsa ----------
   Stato iniziale sui figli (non sulla fascia) così immagine e
   testo possono entrare da lati opposti.
   La classe .is-visible viene aggiunta dal JS. */

/* Lo stato "nascosto" vale solo se il JS è attivo (prefisso .js) */
.js .fascia__media,
.js .fascia__testo{
opacity:0;
transform:translate3d(var(--fx,0px),var(--fy,0px),0);
transition:
opacity var(--fasce-durata) var(--fasce-easing),
transform var(--fasce-durata) var(--fasce-easing);
will-change:opacity,transform;
}

/* La direzione di entrata passa da due variabili, non da `transform`
   diretto: così la media query può cambiarla senza dover vincere
   una battaglia di specificità. */

/* fasce dispari: immagine a sinistra ? entra da sinistra */
.fascia:nth-child(odd) .fascia__media{--fx:calc(var(--fasce-shift) * -1); --fy:var(--fasce-rise,0px);}
.fascia:nth-child(odd) .fascia__testo{--fx:var(--fasce-shift);            --fy:var(--fasce-rise,0px);}

/* fasce pari: specchiate */
.fascia:nth-child(even) .fascia__media{--fx:var(--fasce-shift);            --fy:var(--fasce-rise,0px);}
.fascia:nth-child(even) .fascia__testo{--fx:calc(var(--fasce-shift) * -1); --fy:var(--fasce-rise,0px);}

/* stato finale */
.js .fascia.is-visible .fascia__media,
.js .fascia.is-visible .fascia__testo{
opacity:1;
--fx:0px;
--fy:0px;
}

/* il testo arriva un attimo dopo l'immagine */
.js .fascia.is-visible .fascia__testo{
transition-delay:140ms;
}

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

.contact{
background:#e30613;
color:white;
text-align:center;
padding:80px 8%;
}

.contact h2{
color:white;
}

.contact .btn{
background:white;
color:#e30613;
}

.contact .btn:hover{
background:#111;
color:white;
}

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

footer{
background:#050505;
color:white;
text-align:center;
padding:30px 20px;
font-size:15px;
letter-spacing:.5px;
}

/* ================= VIDEO MODALE ================= */

.video-modal{
position:fixed;
inset:0;
display:none;
align-items:center;
justify-content:center;
padding:24px;
background:rgba(0,0,0,.88);
z-index:9999;
}

.video-modal.is-open{
display:flex;
}

.video-modal__dialog{
position:relative;
width:min(1100px,100%);
background:#000;
border-radius:10px;
box-shadow:0 25px 80px rgba(0,0,0,.55);
overflow:hidden;
}

.video-modal__ratio{
position:relative;
width:100%;
aspect-ratio:16 / 9;
}

.video-modal iframe{
position:absolute;
inset:0;
width:100%;
height:100%;
border:0;
}

.video-modal__close{
position:absolute;
top:12px;
right:12px;
width:46px;
height:46px;
border:0;
border-radius:50%;
background:rgba(0,0,0,.72);
color:#fff;
font-size:30px;
line-height:1;
cursor:pointer;
z-index:2;
transition:.2s;
}

.video-modal__close:hover,
.video-modal__close:focus-visible{
background:#e30613;
outline:none;
}

body.modal-open{
overflow:hidden;
}

/* ================= RESPONSIVE: FASCE (minore o uguale 820px) ================= */

@media (max-width:820px){

.fasce{
--fasce-gap:1.75rem;
--fasce-gap-y:4.5rem;
--fasce-shift:0px;    /* niente scorrimento laterale su schermo stretto */
--fasce-rise:1.5rem;  /* ...gli elementi salgono dal basso */
}

.fascia{
grid-template-columns:1fr;
}

/* l'immagine resta sempre sopra al testo */
.fascia:nth-child(even) .fascia__media,
.fascia:nth-child(odd) .fascia__media{order:1;}
.fascia:nth-child(even) .fascia__testo,
.fascia:nth-child(odd) .fascia__testo{order:2;}

.fascia__testo{
max-width:none;
}

/* Il testo descrittivo su schermo stretto: niente maiuscolo e niente
   spaziatura ampia (illeggibili su frasi lunghe), corpo più grande e
   contrasto più alto rispetto allo sfondo. */
.fascia__eyebrow{
text-transform:none;
letter-spacing:0;
font-size:1rem;
line-height:1.55;
color:#3d4650;
}

.fascia__titolo{
margin-bottom:.5rem;
}

}

/* ================= RESPONSIVE: MOBILE (minore o uguale 700px) ================= */

@media (max-width:700px){

header{
height:90px;
padding:0 5%;
}

.logo img{
height:65px;
}

/* Le dimensioni di h1, .hero p, .big e h2 sono già fluide (clamp):
   qui si regolano solo spazi, contenitori e aree cliccabili. */

section{
padding:32px 5%;
}

.hero{
padding-inline:0;
}

.content{
padding:16px;
}

.hero p{
margin-block:.9rem .6rem;
}

.big{
margin-bottom:1.25rem;
}

/* Pulsante a piena larghezza: più facile da centrare col pollice */
.btn{
display:block;
width:100%;
max-width:420px;
margin-inline:auto;
padding:16px 22px;
font-size:1rem;
text-align:center;
}

.fasce{
padding:2.5rem 1.25rem;
}

/* Pallini un po' più grandi e distanziati: bersagli da dito */
.slideshow-nav{
--nav-bottom:2.5vh;
}

.slideshow-dots{
gap:16px;
padding:12px 18px;
}

.slideshow-dots button{
width:14px;
height:14px;
}

.contact{
padding:56px 5%;
}

footer{
font-size:14px;
line-height:1.6;
padding:26px 18px;
overflow-wrap:anywhere;   /* la riga con indirizzo e P.IVA non sborda */
}

.footer-legale{
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items:center;
gap:6px 10px;
margin-top:14px;
}

.video-modal{
padding:12px;
}

.video-modal__close{
width:42px;
height:42px;
top:8px;
right:8px;
}

}

/* ================= RESPONSIVE: TELEFONI PICCOLI (minore o uguale 380px) ================= */

@media (max-width:380px){

.content{
padding:12px;
}

.hero-heading{
gap:.75rem;
}

.btn{
padding:15px 16px;
font-size:.95rem;
}

}

/* ================= SCHERMO BASSO / ORIZZONTALE ================= */

/* In landscape la hero a tutta altezza schiaccia il contenuto:
   qui si lascia scorrere naturalmente. */
@media (max-height:520px) and (orientation:landscape){

.hero{
min-height:auto;
padding-block:3rem 4.5rem;
}

.slideshow-nav{
--nav-bottom:1.5vh;
}

}

/* ================= ACCESSIBILITÀ ================= */

/* chi ha ridotto le animazioni vede tutto subito */
@media (prefers-reduced-motion:reduce){

.slide{
transition:none;
}

.fascia__media,
.fascia__testo{
opacity:1 !important;
transform:none !important;
transition:none !important;
}

}