/* ==========================================================================
   Social Valet Studio — foglio di stile unico per tutto il sito.
   Colori, font e misure sono definiti UNA volta qui sotto (:root):
   cambiandoli qui si aggiornano su tutte le pagine.
   ========================================================================== */

@font-face {
    font-family: "Urbanist";
    src: url("../fonts/urbanist-latin-wght-normal.woff2") format("woff2");
    font-weight: 100 900;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Urbanist";
    src: url("../fonts/urbanist-latin-ext-wght-normal.woff2") format("woff2");
    font-weight: 100 900;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* Palette (valori provvisori, in attesa dei codici definitivi) */
    --grigio:        #1a1a1d;   /* grigio scuro: sfondo principale */
    --grigio-2:      #232327;   /* sezioni alternate, menu */
    --grigio-3:      #36363c;   /* bordi e divisori */
    --grigio-testo:  #a3a29c;   /* testi secondari su fondo scuro */
    --bianco:        #eeece7;   /* bianco caldo, non ottico */
    --blu:           #3a5cff;   /* accento: pulsanti, play, dettagli */
    --blu-chiaro:    #7088ff;

    /* Tipografia (provvisoria): Urbanist, geometrico e arrotondato come il nuovo logo */
    --font: "Urbanist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --t-hero: clamp(3.2rem, 9vw, 9rem);
    --t-xxl:  clamp(2.6rem, 6vw, 5.5rem);
    --t-xl:   clamp(2rem, 3.6vw, 3.5rem);
    --t-l:    clamp(1.35rem, 1.6vw, 1.75rem);
    --t-m:    1.0625rem;
    --t-s:    0.875rem;

    /* Forme e spazi: angoli morbidi, in linea con il logo a pallini e bacchette */
    --raggio-video:  22px;
    --raggio:        14px;
    --raggio-pill:   999px;
    --larghezza:     1280px;
    --margine:       clamp(1rem, 4vw, 2.5rem);
    --sezione:       clamp(4.5rem, 10vw, 9rem);
    --testata-h:     76px;

    --morbido: cubic-bezier(.2, .7, .2, 1);
}

/* --- Temi: scuro di default, chiaro per alternare le sezioni ------------- */
.tema-scuro,  .sezione--scura  { --sfondo: var(--grigio);   --testo: var(--bianco); --testo-2: var(--grigio-testo); --linea: var(--grigio-3); }
.sezione--scura-2              { --sfondo: var(--grigio-2); --testo: var(--bianco); --testo-2: var(--grigio-testo); --linea: var(--grigio-3); }
.tema-chiaro, .sezione--chiara { --sfondo: var(--bianco);   --testo: var(--grigio); --testo-2: #5e5c56;             --linea: #d6d3cb; }

/* --- Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font);
    font-size: var(--t-m);
    line-height: 1.6;
    background: var(--sfondo);
    color: var(--testo);
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "ss01";
}
img, video, iframe, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-weight: 800; line-height: .98; letter-spacing: -0.035em; margin: 0 0 .45em; text-wrap: balance; }
h1 { font-size: var(--t-xxl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-l); letter-spacing: -0.02em; line-height: 1.1; }
p  { margin: 0 0 1em; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
:focus-visible { outline: 2px solid var(--blu-chiaro); outline-offset: 3px; border-radius: 6px; }

.contenitore { width: 100%; max-width: var(--larghezza); margin-inline: auto; padding-inline: var(--margine); }
.sezione { padding-block: var(--sezione); background: var(--sfondo); color: var(--testo); }
.sezione--stretta { padding-block: calc(var(--sezione) * .6); }

.introduzione { font-size: var(--t-l); line-height: 1.4; color: var(--testo-2); max-width: 36ch; font-weight: 500; letter-spacing: -0.01em; }
.testo-lungo { max-width: 68ch; }
.testo-lungo h2 { font-size: var(--t-l); letter-spacing: -0.02em; line-height: 1.15; margin-top: 2em; }
.testo-lungo h2:first-child { margin-top: 0; }
.testo-lungo p { color: var(--testo-2); }

/* Nome del settore con il pallino blu: il pallino richiama il logo */
.settore-nome { display: inline-flex; align-items: center; gap: .6em; font-weight: 600; font-size: var(--t-m); color: var(--testo-2); margin: 0 0 1rem; }
.settore-nome::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: var(--blu); flex: none; }

.salta { position: absolute; left: -999px; top: 0; }
.salta:focus { left: 1rem; top: 1rem; z-index: 100; background: var(--blu); color: #fff; padding: .5rem 1rem; border-radius: var(--raggio-pill); }

/* --- Pulsanti ------------------------------------------------------------ */
.bottone {
    display: inline-flex; align-items: center; justify-content: center; gap: .5em;
    padding: 1em 1.7em;
    border-radius: var(--raggio-pill);
    background: var(--blu); color: #fff;
    font-weight: 700; font-size: 1rem; text-decoration: none; line-height: 1;
    transition: background .2s var(--morbido);
}
.bottone:hover { background: var(--blu-chiaro); }
.bottone--piccolo { padding: .7em 1.25em; font-size: var(--t-s); }
.bottone--vuoto { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; color: var(--testo); }
.bottone--vuoto:hover { background: var(--testo); color: var(--sfondo); }
.bottoni { display: flex; flex-wrap: wrap; gap: .75rem; }

/* --- Testata e menu ------------------------------------------------------ */
.testata {
    position: sticky; top: 0; z-index: 50;
    height: var(--testata-h);
    color: var(--bianco);
}
/* Banda grigia sfocata: sta in un elemento a parte perché backdrop-filter sulla testata
   "intrappolerebbe" il menu del telefono (che è position: fixed) dentro l'altezza della testata. */
.testata::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: color-mix(in srgb, var(--grigio) 84%, transparent);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border-bottom: 1px solid color-mix(in srgb, var(--bianco) 8%, transparent);
}
/* Home: la testata sta sopra il video, ma con la banda grigia già dall'inizio (altrimenti il menu non si legge) */
.testata--trasparente { position: fixed; inset: 0 0 auto 0; }
.testata__dentro { height: 100%; display: flex; align-items: center; justify-content: space-between; }

.logo { text-decoration: none; font-size: 1.2rem; letter-spacing: -0.01em; white-space: nowrap; }
.logo strong { font-weight: 800; }
.logo__the { font-size: .7em; font-weight: 500; opacity: .75; }

.menu__lista { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: .15rem; }
.menu__voce { position: relative; display: flex; align-items: center; }
.menu__voce > a { padding: .6rem .85rem; text-decoration: none; font-size: .975rem; font-weight: 600; transition: color .2s; }
.menu__voce > a:not(.bottone):hover, .menu__voce > a[aria-current] { color: var(--blu-chiaro); }
.menu__voce > a.bottone { margin-left: .6rem; padding: .7em 1.25em; }

.tendina-apri { width: 1.4rem; height: 1.4rem; margin-left: -.6rem; position: relative; }
.tendina-apri::before {
    content: ""; position: absolute; inset: 0; margin: auto; width: .42rem; height: .42rem;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: translateY(-25%) rotate(45deg); transition: transform .25s var(--morbido);
}

.tendina {
    list-style: none; margin: 0; padding: .5rem;
    position: absolute; top: calc(100% + .35rem); left: -.5rem; min-width: 16rem;
    background: var(--grigio-2); border: 1px solid var(--grigio-3); border-radius: var(--raggio);
    box-shadow: 0 24px 48px rgba(0,0,0,.4);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .18s, transform .18s var(--morbido), visibility .18s;
}
.tendina a { display: block; padding: .5rem .8rem; border-radius: 10px; text-decoration: none; font-size: .95rem; font-weight: 500; color: var(--grigio-testo); }
.tendina a:hover { background: var(--grigio-3); color: var(--bianco); }

@media (hover: hover) and (min-width: 1081px) {
    .menu__voce--tendina:hover .tendina,
    .menu__voce--tendina:focus-within .tendina { opacity: 1; visibility: visible; transform: none; }
}
.menu__voce--tendina.aperta .tendina { opacity: 1; visibility: visible; transform: none; }

/* Pulsante "panino" per telefono e tablet */
.menu-apri { display: none; width: 44px; height: 44px; position: relative; margin-right: -10px; }
.menu-apri span { position: absolute; left: 11px; right: 11px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .3s var(--morbido), opacity .2s; }
.menu-apri span:nth-child(1) { top: 15px; }
.menu-apri span:nth-child(2) { top: 21px; }
.menu-apri span:nth-child(3) { top: 27px; }
.menu-apri[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-apri[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-apri[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1080px) {
    .menu-apri { display: block; }
    .menu {
        position: fixed; inset: var(--testata-h) 0 0 0;
        background: var(--grigio); overflow-y: auto;
        padding: 1rem var(--margine) 3rem;
        opacity: 0; visibility: hidden;
        transition: opacity .25s, visibility .25s;
    }
    .menu.aperto { opacity: 1; visibility: visible; }
    .menu__lista { flex-direction: column; align-items: stretch; gap: 0; }
    .menu__voce { flex-wrap: wrap; border-bottom: 1px solid var(--grigio-3); }
    .menu__voce > a { flex: 1; padding: 1.1rem 0; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; }
    .menu__voce > a.bottone { margin: 1.75rem 0 0; flex: none; padding: 1rem 1.7rem; font-size: 1rem; }
    .menu__voce:last-child { border-bottom: 0; }
    .tendina-apri { width: 48px; height: 48px; margin: 0; }
    .menu__voce--tendina.aperta .tendina-apri::before { transform: translateY(25%) rotate(-135deg); }
    .tendina {
        position: static; width: 100%; min-width: 0; display: none;
        background: none; border: 0; box-shadow: none; padding: 0 0 1rem;
        opacity: 1; visibility: visible; transform: none;
        columns: 2; column-gap: 1rem;
    }
    .menu__voce--tendina.aperta .tendina { display: block; }
    .tendina a { padding: .45rem 0; font-size: 1.05rem; }
    .tendina a:hover { background: none; }
    body.menu-aperto { overflow: hidden; }
    body.menu-aperto .testata::before { background: var(--grigio); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (max-width: 480px) { .tendina { columns: 1; } }

/* --- Player video leggero (Vimeo si carica solo al play) ------------------ */
.video {
    position: relative; aspect-ratio: 16 / 9; overflow: hidden;
    border-radius: var(--raggio-video);
    background: var(--grigio-2) center / cover no-repeat;
    isolation: isolate;
}
.video::after { /* leggera velatura per far risaltare il play */
    content: ""; position: absolute; inset: 0; z-index: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.35));
    transition: opacity .3s;
}
.video--senza-anteprima { background-image: radial-gradient(120% 120% at 20% 10%, #2c2c33, var(--grigio-2) 60%); }
.video__avvia { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; width: 100%; }
.video__play {
    width: clamp(64px, 8vw, 92px); aspect-ratio: 1; border-radius: 50%;
    background: var(--blu); display: grid; place-items: center;
    box-shadow: 0 10px 30px rgba(20, 30, 120, .45);
    transition: transform .3s var(--morbido), background .2s;
}
.video__play::before { /* triangolo del play */
    content: ""; width: 0; height: 0; margin-left: 12%;
    border-style: solid; border-width: .62em 0 .62em 1.05em;
    border-color: transparent transparent transparent #fff;
    font-size: clamp(14px, 1.6vw, 20px);
}
.video__avvia:hover .video__play, .video__avvia:focus-visible .video__play { transform: scale(1.08); background: var(--blu-chiaro); }
.video--piccolo .video__play { width: 56px; }
.video--piccolo .video__play::before { font-size: 13px; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 2; }
.video.in-riproduzione::after { opacity: 0; }

/* --- HOME: showreel a tutto schermo come sfondo --------------------------- */
.home-hero {
    position: relative; min-height: 100vh; min-height: 100dvh; display: flex; align-items: flex-end;
    color: var(--bianco); background: var(--grigio); overflow: hidden;
}
.home-hero__video { position: absolute; inset: 0; pointer-events: none; }
.home-hero__video iframe {
    /* il video copre sempre tutto lo schermo, qualunque sia la forma della finestra */
    position: absolute; top: 50%; left: 50%; border: 0;
    max-width: none; /* la regola generale iframe { max-width: 100% } lo rimpiccioliva alla larghezza dello schermo */
    width: max(100vw, 177.78vh); height: max(56.25vw, 100vh);
    transform: translate(-50%, -50%);
}
@supports (height: 100dvh) {
    .home-hero__video iframe { width: max(100vw, 177.78dvh); height: max(56.25vw, 100dvh); }
}
.home-hero__velo { /* overlay leggero: scurisce solo dove c'è il testo */
    position: absolute; inset: 0;
    background:
        linear-gradient(0deg, rgba(20,20,23,.82) 0%, rgba(20,20,23,.25) 45%, rgba(20,20,23,0) 70%),
        linear-gradient(90deg, rgba(20,20,23,.45) 0%, rgba(20,20,23,0) 60%);
}
.home-hero__testo { position: relative; padding-block: calc(var(--testata-h) + 3rem) clamp(2.5rem, 7vh, 5rem); }
.home-hero h1 { font-size: var(--t-hero); line-height: .9; letter-spacing: -0.045em; max-width: 11ch; margin-bottom: .35em; }
.home-hero__firma { font-size: var(--t-l); font-weight: 500; max-width: 30ch; line-height: 1.35; margin-bottom: 2rem; color: rgba(238,236,231,.85); }

/* L'unico movimento automatico del sito: il pallino REC che pulsa */
.rec { display: inline-flex; align-items: center; gap: .55em; font-weight: 700; font-size: var(--t-s); letter-spacing: .04em; margin-bottom: 1.5rem; }
.rec::before { content: ""; width: .75em; height: .75em; border-radius: 50%; background: var(--blu); animation: rec 1.6s ease-in-out infinite; }
@keyframes rec { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* --- Apertura delle pagine interne ---------------------------------------- */
.apertura { padding-block: clamp(3.5rem, 8vw, 7rem) clamp(2.5rem, 5vw, 4rem); }
.apertura h1 { max-width: 14ch; }
.apertura__griglia { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2rem 4rem; align-items: end; }
.apertura__griglia .introduzione { margin: 0; }
.apertura__seo { font-size: var(--t-s); font-weight: 600; color: var(--testo-2); margin-bottom: 1.25rem; }
@media (max-width: 860px) { .apertura__griglia { grid-template-columns: 1fr; } }

.showreel-grande { padding-bottom: var(--sezione); }

/* --- Produzione video: settori a zig-zag ---------------------------------- */
.zigzag { display: grid; gap: clamp(4.5rem, 10vw, 9rem); }
.zigzag__riga { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2rem; align-items: center; }
.zigzag__video { grid-column: 1 / span 7; }
.zigzag__testo { grid-column: 9 / span 4; }
.zigzag__riga:nth-child(even) .zigzag__video { grid-column: 6 / span 7; grid-row: 1; }
.zigzag__riga:nth-child(even) .zigzag__testo { grid-column: 1 / span 4; grid-row: 1; }
.zigzag__testo h2 { font-size: clamp(2rem, 3.2vw, 3rem); }
.zigzag__testo p { color: var(--testo-2); }
.zigzag__testo .bottone { margin-top: .75rem; }
@media (max-width: 860px) {
    .zigzag__riga { grid-template-columns: 1fr; gap: 1.5rem; }
    .zigzag__riga .zigzag__video, .zigzag__riga:nth-child(even) .zigzag__video,
    .zigzag__riga .zigzag__testo, .zigzag__riga:nth-child(even) .zigzag__testo { grid-column: 1; grid-row: auto; }
}

/* --- Pagina settore: griglia dei lavori ----------------------------------- */
.lavori { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem 1.5rem; }
.lavoro h3 { font-size: 1.15rem; margin: 1rem 0 .15rem; letter-spacing: -0.01em; }
.lavoro p { margin: 0; color: var(--testo-2); font-size: var(--t-s); }
@media (max-width: 960px) { .lavori { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .lavori { grid-template-columns: 1fr; } }

.titolo-sezione { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.titolo-sezione h2 { margin: 0; }

.altri-settori { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.altri-settori a {
    display: inline-block; padding: .6em 1.1em; border-radius: var(--raggio-pill);
    box-shadow: inset 0 0 0 1.5px var(--linea); text-decoration: none; font-weight: 600; font-size: .95rem;
    transition: box-shadow .2s, color .2s;
}
.altri-settori a:hover { box-shadow: inset 0 0 0 1.5px var(--blu); color: var(--blu); }
.sezione--scura .altri-settori a:hover, .sezione--scura-2 .altri-settori a:hover { color: var(--blu-chiaro); }

/* --- Fascia di chiamata all'azione ---------------------------------------- */
.chiamata { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: end; }
.chiamata h2 { margin: 0; max-width: 16ch; }
.chiamata p { margin: 1rem 0 0; color: var(--testo-2); max-width: 46ch; }
@media (max-width: 760px) { .chiamata { grid-template-columns: 1fr; align-items: start; } }

/* --- Foto: filtro e griglia ----------------------------------------------- */
.filtro {
    position: sticky; top: var(--testata-h); z-index: 20;
    background: color-mix(in srgb, var(--sfondo) 90%, transparent);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    padding-block: .9rem; margin-bottom: 2rem;
}
.filtro__lista { list-style: none; margin: 0; padding: 0; display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; }
.filtro__lista::-webkit-scrollbar { display: none; }
.filtro button {
    white-space: nowrap; padding: .6em 1.15em; border-radius: var(--raggio-pill);
    box-shadow: inset 0 0 0 1.5px var(--linea); font-weight: 600; font-size: .95rem;
    transition: background .2s, box-shadow .2s, color .2s;
}
.filtro button:hover { box-shadow: inset 0 0 0 1.5px var(--testo-2); }
.filtro button[aria-pressed="true"] { background: var(--blu); box-shadow: none; color: #fff; }

/* Galleria foto: contenuto più largo su desktop e fino a 5 colonne */
.contenitore--largo { max-width: 1840px; }
.galleria { columns: 2; column-gap: .75rem; }
@media (min-width: 720px)  { .galleria { columns: 3; column-gap: 1rem; } }
@media (min-width: 1100px) { .galleria { columns: 4; } }
@media (min-width: 1500px) { .galleria { columns: 5; } }
.galleria__foto { break-inside: avoid; margin: 0 0 .75rem; }
@media (min-width: 720px) { .galleria__foto { margin-bottom: 1rem; } }
.galleria__foto[hidden] { display: none; }
.galleria__foto button { display: block; width: 100%; border-radius: var(--raggio); overflow: hidden; background: var(--grigio-2); }
.galleria__foto img { width: 100%; height: auto; transition: transform .5s var(--morbido); }
.galleria__foto button:hover img { transform: scale(1.03); }
.foto-segnaposto { display: grid; place-items: end start; padding: 1rem; color: var(--grigio-testo); font-weight: 600; font-size: var(--t-s); background: radial-gradient(130% 100% at 0% 0%, #303037, var(--grigio-2) 70%); }

.lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(14,14,16,.94); display: grid; place-items: center; padding: 4rem 1rem; }
.lightbox[hidden] { display: none; }
.lightbox__corpo { display: grid; place-items: center; width: 100%; height: 100%; }
.lightbox img, .lightbox .foto-segnaposto { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: var(--raggio); }   /* orizzontale: si adatta alla larghezza; verticale: all'altezza; mai tagliata */
.lightbox .foto-segnaposto { width: min(900px, 100%); }
.lightbox__chiudi, .lightbox__freccia {
    position: absolute; width: 48px; height: 48px; border-radius: 50%;
    background: var(--grigio-3); color: var(--bianco); font-size: 1.6rem; line-height: 1; display: grid; place-items: center;
}
.lightbox__chiudi { top: 1rem; right: 1rem; }
.lightbox__freccia--prima { left: 1rem; top: 50%; translate: 0 -50%; }
.lightbox__freccia--dopo  { right: 1rem; top: 50%; translate: 0 -50%; }
.lightbox__chiudi:hover, .lightbox__freccia:hover { background: var(--blu); }

/* --- Contatti ------------------------------------------------------------- */
.contatti { display: grid; grid-template-columns: 1fr 1.1fr; gap: 3rem 5rem; align-items: start; }
.contatti h1 { max-width: 9ch; }
.contatti__diretti { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; gap: 1.25rem; }
.contatti__diretti span { display: block; font-size: var(--t-s); color: var(--testo-2); font-weight: 600; }
.contatti__diretti a { font-size: var(--t-l); font-weight: 700; text-decoration: none; letter-spacing: -0.01em; }
.contatti__diretti a:hover { color: var(--blu-chiaro); }
.contatti .social { margin-top: 2.5rem; }
@media (max-width: 900px) { .contatti { grid-template-columns: 1fr; } }

.modulo { display: grid; gap: 1.1rem; background: var(--grigio-2); padding: clamp(1.25rem, 4vw, 2.5rem); border-radius: var(--raggio-video); }
.modulo__doppio { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 560px) { .modulo__doppio { grid-template-columns: 1fr; } }
.campo label { display: block; font-weight: 600; font-size: var(--t-s); margin-bottom: .4rem; }
.campo input, .campo textarea {
    width: 100%; font: inherit; color: var(--bianco);
    background: var(--grigio); border: 1.5px solid var(--grigio-3); border-radius: var(--raggio);
    padding: .9rem 1rem; transition: border-color .2s;
}
.campo textarea { min-height: 9rem; resize: vertical; }
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--blu); }
.campo--errore input, .campo--errore textarea { border-color: #ff6b5a; }
.campo__errore { color: #ff8a7c; font-size: var(--t-s); margin: .35rem 0 0; }
.consenso { display: flex; gap: .7rem; align-items: flex-start; font-size: var(--t-s); color: var(--grigio-testo); }
.consenso input { width: 1.2rem; height: 1.2rem; margin-top: .1rem; accent-color: var(--blu); flex: none; }
.trappola { position: absolute; left: -9999px; }
.modulo .bottone { justify-self: start; }
.modulo .bottone[disabled] { opacity: .6; cursor: progress; }
.esito { border-radius: var(--raggio); padding: 1rem 1.2rem; font-weight: 600; }
.esito[hidden] { display: none; }
.esito--ok { background: color-mix(in srgb, var(--blu) 22%, var(--grigio)); }
.esito--errore { background: #3b1f1d; color: #ffc2ba; }

/* --- Agenzie: come lavoriamo (è una sequenza, quindi numerata) ------------ */
.passi { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; counter-reset: passo; }
.passi li { counter-increment: passo; border-top: 1.5px solid var(--linea); padding-top: 1.25rem; }
.passi li::before { content: counter(passo); display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--blu); color: #fff; font-weight: 800; margin-bottom: 1rem; }
.passi h3 { font-size: 1.35rem; }
.passi p { color: var(--testo-2); margin: 0; }
/* Variante per elenchi che non sono una sequenza (modalità tra cui scegliere): niente numero */
.passi--senza-numero li::before { content: none; }
@media (max-width: 860px) { .passi { grid-template-columns: 1fr; } }

/* --- Chi siamo ------------------------------------------------------------ */
.due-colonne { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem 5rem; align-items: center; }
.immagine-segnaposto { aspect-ratio: 4 / 5; border-radius: var(--raggio-video); }
@media (max-width: 860px) { .due-colonne { grid-template-columns: 1fr; } }

/* --- Piè di pagina ------------------------------------------------------- */
.piede { background: var(--grigio); color: var(--grigio-testo); border-top: 1px solid var(--grigio-3); padding-block: 3rem 2rem; font-size: var(--t-s); }
.piede__dentro { display: grid; gap: 2rem; grid-template-columns: 1fr auto; align-items: center; }
.piede .logo { color: var(--bianco); }
.piede__marchio p { margin: .4rem 0 0; }
.piede__legale { grid-column: 1 / -1; list-style: none; margin: 0; padding: 1.5rem 0 0; border-top: 1px solid var(--grigio-3); display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.piede__legale a, .link-cookie { color: var(--grigio-testo); text-decoration: none; font-size: inherit; }
.piede__legale a:hover, .link-cookie:hover { color: var(--bianco); }

.social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--bianco); background: var(--grigio-2); transition: background .2s; }
.social a:hover { background: var(--blu); }
.social svg { width: 18px; height: 18px; fill: currentColor; }
@media (max-width: 640px) { .piede__dentro { grid-template-columns: 1fr; } }

/* --- Banner cookie: discreto, in basso ----------------------------------- */
.cookie {
    position: fixed; z-index: 60; left: 50%; bottom: 1rem; transform: translateX(-50%);
    width: min(calc(100% - 2rem), 720px);
    display: flex; align-items: center; gap: 1rem;
    padding: .6rem .6rem .6rem 1.25rem;
    background: color-mix(in srgb, var(--grigio-2) 94%, transparent);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border: 1px solid var(--grigio-3); border-radius: var(--raggio-pill);
    color: var(--bianco); font-size: var(--t-s); line-height: 1.4;
    box-shadow: 0 12px 30px rgba(0,0,0,.35);
}
.cookie[hidden] { display: none; }
.cookie p { margin: 0; flex: 1; }
.cookie p a { color: var(--grigio-testo); }
.cookie__azioni { display: flex; align-items: center; gap: .4rem; }
.cookie__x { width: 40px; height: 40px; border-radius: 50%; font-size: 1.5rem; line-height: 1; background: var(--grigio-3); display: grid; place-items: center; }
.cookie__x:hover { background: var(--grigio-testo); color: var(--grigio); }
@media (max-width: 560px) { .cookie { border-radius: var(--raggio); padding: .75rem .75rem .75rem 1rem; } }
.cookie__gestisci { color: var(--grigio-testo); padding: .5rem .6rem; font-size: inherit; text-decoration: underline; text-underline-offset: 3px; }
.cookie__gestisci:hover { color: var(--bianco); }
@media (max-width: 560px) { .cookie { flex-wrap: wrap; gap: .5rem; } .cookie p { flex-basis: 100%; } .cookie__azioni { margin-left: auto; } }

/* --- Pannello dei consensi ---------------------------------------------- */
.consensi {
    width: min(calc(100% - 2rem), 560px); max-height: calc(100% - 2rem); overflow: auto;
    padding: 1.25rem 1.5rem 1.25rem; border: 1px solid var(--grigio-3); border-radius: var(--raggio);
    background: var(--grigio-2); color: var(--bianco); font-size: var(--t-s); line-height: 1.5;
    box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.consensi::backdrop { background: rgba(10,10,12,.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.consensi__testa { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.consensi h2 { font-size: 1.35rem; margin: 0; }
.consensi__intro { color: var(--grigio-testo); margin: .4rem 0 1rem; }
.consensi__voce { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.25rem; padding: 1rem 0; border-top: 1px solid var(--grigio-3); }
.consensi__voce h3 { font-size: 1rem; margin: 0 0 .25rem; }
.consensi__voce p { margin: 0; color: var(--grigio-testo); }
.consensi__fisso { flex: none; color: var(--grigio-testo); font-size: .85em; padding-top: .15rem; white-space: nowrap; }
.interruttore {
    flex: none; appearance: none; -webkit-appearance: none; margin: 0; cursor: pointer;
    width: 46px; height: 26px; border-radius: 999px; background: var(--grigio-3); position: relative; transition: background .15s;
}
.interruttore::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--bianco); transition: transform .15s; }
.interruttore:checked { background: var(--blu); }
.interruttore:checked::after { transform: translateX(20px); }
.interruttore:focus-visible { outline: 2px solid var(--blu-chiaro); outline-offset: 2px; }
.consensi__azioni { display: flex; flex-wrap: wrap; gap: .5rem; padding-top: 1rem; border-top: 1px solid var(--grigio-3); }
.consensi__azioni .bottone { flex: 1 1 auto; justify-content: center; }
.consensi .bottone--vuoto { color: var(--bianco); }
.consensi__nota { margin: .9rem 0 0; color: var(--grigio-testo); font-size: .85em; }
.consensi__nota a { color: var(--grigio-testo); }
@media (prefers-reduced-motion: reduce) { .interruttore, .interruttore::after { transition: none; } }

/* --- Pagine di testo (privacy, cookie) ------------------------------------ */
.pagina-testo h1 { font-size: var(--t-xl); }

/* --- Rispetto per chi preferisce meno animazioni ------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
.titolo-piccolo { font-size: var(--t-l); letter-spacing: -0.02em; }

/* --- Pagine legali (privacy, cookie) e dati dell'impresa nel footer ------- */
.piede__impresa { grid-column: 1 / -1; margin: 0; font-size: var(--t-s); line-height: 1.6; max-width: 90ch; }
.piede__impresa a { color: inherit; }
.pagina-testo .testo-lungo { max-width: 74ch; }
.pagina-testo .testo-lungo ul { color: var(--testo-2); padding-left: 1.25rem; }
.pagina-testo .testo-lungo li { margin-bottom: .5em; }
.pagina-testo .testo-lungo a { color: var(--blu-chiaro); }
.pagina-testo .aggiornato { font-size: var(--t-s); color: var(--testo-2); margin-bottom: 2rem; }

/* Agenzie: brand serviti tramite agenzia */
.partner{padding:2rem 0;border-top:1px solid rgba(238,236,231,.15)}
.partner__agenzia{margin:0 0 1.25rem;opacity:.8}
.partner__loghi{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:1.5rem 3rem;align-items:center}
.partner__loghi img{display:block;max-width:100%;height:auto;opacity:.85}   /* loghi già bianchi e a misura uniforme (assets/img/loghi) */
.partner__loghi span{font-weight:700;font-size:1.4rem;letter-spacing:.02em}
.partner--diretti{margin-top:1rem}

/* Pagine settore senza lavori: meno spazio tra showreel e testi */
.showreel-grande--solo { padding-bottom: 0; }
.sezione--dopo-video { padding-top: calc(var(--sezione) * .55); }

.nota-recaptcha { font-size: .8rem; opacity: .6; margin: 1rem 0 0; }
.nota-recaptcha a { text-decoration: underline; }
.grecaptcha-badge { visibility: hidden; }

/* Video in finestra (pagine con lavori_in_finestra) */
.finestra-video {
    position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 1rem;
    background: rgba(10,10,12,.86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    animation: finestra-entra .25s ease;
}
.finestra-video__scatola {
    width: min(1100px, 100%, calc((100vh - 6rem) * 16 / 9));
    aspect-ratio: 16 / 9; border-radius: var(--raggio-video); overflow: hidden; background: #000;
    box-shadow: 0 30px 80px rgba(0,0,0,.55);
}
.finestra-video iframe { width: 100%; height: 100%; border: 0; display: block; }
.finestra-video__chiudi {
    position: absolute; top: 1rem; right: 1rem; width: 2.75rem; height: 2.75rem; border-radius: 50%;
    border: 0; cursor: pointer; font-size: 1.8rem; line-height: 1; color: var(--bianco);
    background: rgba(255,255,255,.14); transition: background .2s;
}
.finestra-video__chiudi:hover, .finestra-video__chiudi:focus-visible { background: rgba(255,255,255,.28); }
body.finestra-aperta { overflow: hidden; }
@keyframes finestra-entra { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .finestra-video { animation: none; } }

/* Carosello foto backstage */
.carosello { position: relative; width: 100%; border-radius: var(--raggio-video, var(--raggio)); overflow: hidden; background: var(--grigio-2); aspect-ratio: 3 / 2; }
.carosello__scena { position: absolute; inset: 0; }
.carosello__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease; }
.carosello__foto--verticale { object-position: 50% 16%; }   /* foto verticali: riempiono il riquadro, tagliate sui volti */
.carosello__foto.e-attiva { opacity: 1; }
.carosello__freccia { position: absolute; top: 50%; transform: translateY(-50%); width: 2.75rem; height: 2.75rem; border-radius: 50%; background: rgba(20,20,24,.55); color: var(--bianco); font-size: 1.6rem; line-height: 1; display: grid; place-items: center; backdrop-filter: blur(6px); }
.carosello__freccia:hover { background: rgba(20,20,24,.8); }
.carosello__freccia:focus-visible { outline: 2px solid var(--blu); outline-offset: 2px; }
.carosello__freccia--indietro { left: .75rem; }
.carosello__freccia--avanti { right: .75rem; }
@media (prefers-reduced-motion: reduce) { .carosello__foto { transition: none; } }
.apertura__griglia--carosello { align-items: center; }
.apertura__griglia--carosello .introduzione { margin-top: 1.5rem; }
@media (max-width: 600px) {
    .partner__loghi { gap: 1.25rem 1.75rem; }
    .partner__loghi img { zoom: .62; }
}

.consensi-stato { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin: 1.25rem 0 1.75rem; padding: 1.1rem 1.25rem; border: 1px solid var(--linea); border-radius: var(--raggio); }
.consensi-stato p { margin: 0; }