/* =========================================================
   MBP Productions · pagina Contatti
   entrata a battiti (otturatore → LAVORIAMO → INSIEME.), modulo a passi
   sul vetro con i servizi spiegati semplici, «Cosa succede dopo» come
   traccia di montaggio, chiusura a titoli di coda.
   Telefono: si animano solo transform e opacity, niente backdrop-filter.
   ========================================================= */

/* ---------- 1. apertura ---------- */
.c-apertura{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;background:var(--nero-2)}
/* il contenitore riceve la parallasse da contatti.js, il video dentro la scala dell'entrata: due elementi, nessun conflitto */
.c-apertura-media{position:absolute;inset:0;z-index:-4;overflow:hidden;background:var(--nero-2);will-change:transform}
.c-apertura-media>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.16);transition:transform 2.8s var(--curva-out)}
.c-apertura.via .c-apertura-media>video{transform:scale(1.03)}
.c-apertura>.velo{z-index:-3}
.c-apertura .velo-pieno{background:rgba(14,15,12,.36)}
.c-apertura>.fascio{z-index:-2;opacity:.75}

/* otturatore: due ante scure che si aprono sul primo battito (solo transform) */
.c-otturatore{position:absolute;inset:0;z-index:-1;pointer-events:none}
.c-otturatore i{position:absolute;left:0;right:0;height:50.5%;transition:transform .78s var(--curva)}
.c-otturatore i:first-child{top:0;background:linear-gradient(180deg,var(--nero) 0%,var(--nero-2) 100%)}
.c-otturatore i:last-child{bottom:0;background:linear-gradient(0deg,var(--nero) 0%,var(--nero-2) 100%)}
.c-apertura.via .c-otturatore i:first-child{transform:translate3d(0,-101%,0)}
.c-apertura.via .c-otturatore i:last-child{transform:translate3d(0,101%,0)}
.c-apertura.aperta .c-otturatore{display:none}

.c-apertura-dentro{padding-block:calc(var(--menu-h) + 60px) clamp(52px,9vh,100px)}
/* titolo da bordo a bordo: le righe salgono da una maschera, una per battito */
.c-titolo{line-height:.96;text-shadow:0 .04em .24em rgba(0,0,0,.3)}
.c-titolo .riga{display:block;overflow:hidden;padding:.08em 0 .16em;margin:-.08em 0 -.16em}
.c-titolo .riga>span{display:block;transform:translate3d(0,112%,0);transition:transform .62s var(--curva-out)}
.c-titolo .c-riga-2{text-align:right}
.c-apertura.via .c-titolo .riga>span{transform:none}
.c-apertura.via .c-titolo .riga:nth-child(1)>span{transition-delay:.26s}
.c-apertura.via .c-titolo .riga:nth-child(2)>span{transition-delay:.52s}
.c-entra{opacity:0;transform:translate3d(0,26px,0);transition:opacity .9s var(--curva-out),transform .9s var(--curva-out)}
.c-apertura.via .c-entra{opacity:1;transform:none;transition-delay:.78s}
.c-apertura.via .c-entra+.c-entra{transition-delay:.9s}

.c-apertura-piede{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:22px 40px;margin-top:clamp(26px,4.4vh,48px)}
.c-apertura-piede .testo-l{max-width:30ch;text-shadow:0 1px 20px rgba(0,0,0,.6)}
.c-apertura-azioni{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
.c-apertura-azioni .link-freccia{text-shadow:0 1px 16px rgba(0,0,0,.6)}

/* ---------- 2. modulo sul vetro scanalato ---------- */
.c-modulo{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;isolation:isolate}
.c-modulo>.vetro-scena{z-index:-3}
.c-modulo-velo{z-index:-2;background:
  linear-gradient(180deg,rgba(14,15,12,.9) 0%,rgba(14,15,12,.7) 28%,rgba(14,15,12,.72) 70%,rgba(14,15,12,.94) 100%),
  linear-gradient(90deg,rgba(14,15,12,.5) 0%,rgba(14,15,12,.12) 70%)}
.c-modulo>.fascio{z-index:-1;opacity:.5}
.c-modulo-dentro{padding-block:calc(var(--menu-h) + clamp(36px,6vh,80px)) clamp(64px,10vh,120px)}
.c-modulo-griglia{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,320px);gap:clamp(40px,6vw,120px);align-items:start}

/* dove sei nel modulo: tre parole, la corrente con il quadratino lime (come la voce del menu) */
.c-passi{display:flex;gap:clamp(22px,3vw,40px);margin-bottom:clamp(26px,4.4vh,44px);font-family:var(--f-etichetta);font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.03em;color:var(--bianco-60)}
.c-passi li{position:relative;transition:color .6s var(--curva-out)}
.c-passi li::before{content:"";position:absolute;left:-12px;top:50%;width:5px;height:5px;margin-top:-2px;background:var(--lime);transform:scale(0);transition:transform .52s var(--curva-out)}
.c-passi li.fatto{color:var(--bianco-80)}
.c-passi li.attivo{color:var(--bianco)}
.c-passi li.attivo::before{transform:none}
.c-passi li:first-child{margin-left:12px}
.c-modulo-form.finito .c-passi{opacity:0}

/* passaggio fra i passi: esce verso l'alto, entra dal basso */
.passo,.grazie{transition:opacity 1s var(--curva-out),transform 1.2s var(--curva-out)}
.passo.esce{opacity:0;transform:translate3d(0,-28px,0);transition-duration:.45s;transition-timing-function:var(--curva)}
.passo.entra,.grazie.entra{opacity:0;transform:translate3d(0,40px,0);transition:none}
.passo[hidden],.grazie[hidden]{display:none}

.passo-titolo{font-size:var(--t-l);max-width:16ch}
.passo-sotto{margin-top:clamp(14px,2vh,22px);max-width:40ch;color:var(--bianco-80)}

/* scelte: il servizio in grande, sotto cosa vuol dire in pratica */
.scelte{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,3.2vh,38px) clamp(24px,3.4vw,60px);margin-top:clamp(32px,5.4vh,60px)}
.scelta{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:baseline;column-gap:clamp(14px,1.2vw,20px);row-gap:6px;cursor:pointer;
  color:rgba(244,246,239,.86);transition:color .7s var(--curva-out)}
.scelta input,.consenso input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.scelta>i,.consenso>i{position:relative;align-self:center;width:14px;height:14px;box-shadow:inset 0 0 0 1.5px rgba(244,246,239,.45);transition:box-shadow .7s var(--curva-out)}
.scelta>i::after,.consenso>i::after{content:"";position:absolute;inset:0;background:var(--lime);box-shadow:0 0 16px rgba(132,209,21,.7);
  transform:scale(0) rotate(-45deg);transition:transform .8s var(--curva-out)}
.scelta-nome{font-weight:300;font-size:clamp(28px,2.7vw,50px);line-height:1;letter-spacing:-.05em;transition:transform .7s var(--curva-out)}
.scelta-riga{grid-column:2;font-size:var(--testo);line-height:1.4;color:var(--bianco-80);transition:color .7s var(--curva-out)}
.scelta--dubbio .scelta-nome{font-size:clamp(24px,2vw,36px)}
.scelta:hover{color:var(--bianco)}
.scelta:hover .scelta-nome{transform:translate3d(6px,0,0)}
.scelta:has(input:checked){color:var(--bianco)}
.scelta:has(input:checked) .scelta-riga{color:var(--bianco)}
.scelta input:checked~i,.consenso input:checked~i{box-shadow:inset 0 0 0 1.5px transparent}
.scelta input:checked~i::after,.consenso input:checked~i::after{transform:scale(1) rotate(0)}
.scelta:has(input:focus-visible),.consenso:has(input:focus-visible){outline:2px solid var(--lime);outline-offset:6px}

/* campi: spigoli vivi, fondo scuro pieno (niente vetro dal vivo sopra il girato) */
.campo{display:block;width:100%;font:inherit;font-size:18px;color:var(--bianco);background:rgba(14,15,12,.78);border:0;border-radius:0;
  box-shadow:inset 0 0 0 1px rgba(244,246,239,.18);padding:0 18px;height:58px;
  transition:box-shadow .6s var(--curva-out),background-color .6s var(--curva-out);-webkit-appearance:none;appearance:none}
.campo::placeholder{color:rgba(244,246,239,.4)}
.campo:hover{box-shadow:inset 0 0 0 1px rgba(244,246,239,.32)}
.campo:focus{outline:none;background:rgba(14,15,12,.9);box-shadow:inset 0 0 0 1px rgba(244,246,239,.72)}
.campo[aria-invalid="true"]{box-shadow:inset 0 0 0 1px rgba(244,246,239,.88)}
.campo-lungo{height:auto;min-height:clamp(180px,26vh,260px);padding:18px;font-size:var(--testo-l);line-height:1.4;resize:vertical;margin-top:clamp(28px,5vh,48px);max-width:900px}
.campi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px clamp(16px,2vw,28px);margin-top:clamp(32px,5vh,52px);max-width:900px}
.campo-voce{display:grid;gap:8px}
.campo-voce>span{font-family:var(--f-etichetta);font-weight:800;text-transform:uppercase;font-size:12px;letter-spacing:.03em;color:var(--bianco-80)}
.campo-voce em{font-style:normal;text-transform:none;letter-spacing:0;font-family:var(--f-testo);font-weight:400;color:var(--bianco-60)}
.consenso{position:relative;display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:start;margin-top:26px;max-width:62ch;
  font-size:15px;line-height:1.45;color:var(--bianco-80);cursor:pointer}
.consenso>i{margin-top:3px}
.consenso-link{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:color .6s var(--curva-out)}
.consenso-link:hover{color:var(--lime)}

.modulo-avviso{min-height:1.5em;margin-top:18px;font-size:15px;color:var(--bianco)}
.modulo-avviso:empty{visibility:hidden}
.modulo-azioni{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:10px}
.modulo-indietro{font-family:var(--f-etichetta);font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.03em;color:var(--bianco-80);min-height:44px;transition:color .6s var(--curva-out)}
.modulo-indietro:hover{color:var(--bianco)}
.modulo-nota{margin-top:22px;font-size:15px;color:var(--bianco-80);max-width:52ch}
.modulo-nota a{color:var(--bianco-80);transition:color .6s var(--curva-out)}
.modulo-nota a:hover{color:var(--lime)}
.grazie .testo-l{margin-top:clamp(18px,3vh,28px);max-width:36ch}
.grazie .modulo-azioni{margin-top:clamp(28px,4vh,40px)}
.grazie:focus{outline:none}

/* a voce: i due referenti, sempre tutti e due */
.c-voce{position:sticky;top:calc(var(--menu-h) + 24px);padding-top:clamp(40px,6vh,64px)}
.c-voce-titolo{font-weight:400;font-size:var(--t-s);line-height:1.05;letter-spacing:-.035em;max-width:16ch;text-wrap:balance}
.c-voce-sotto{margin-top:12px;color:var(--bianco-80);font-size:var(--testo)}
.c-voce-lista{display:grid;gap:clamp(22px,3.4vh,34px);margin-top:clamp(24px,3.6vh,38px)}
.c-voce-lista li{display:grid;gap:4px}
.c-voce-lista b{font-family:var(--f-etichetta);font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.03em;color:var(--bianco-60)}
.c-voce-numero{justify-self:start;font-weight:300;font-size:clamp(26px,2.2vw,36px);line-height:1.1;letter-spacing:-.04em;font-variant-numeric:tabular-nums;transition:color .7s var(--curva-out)}
.c-voce-numero:hover{color:var(--lime)}
.c-voce-azioni{display:flex;flex-wrap:wrap;gap:4px 22px;margin-top:6px}
.c-voce-azioni .link-freccia{color:var(--bianco-80)}

/* ---------- 3. cosa succede dopo: metodo + traccia di montaggio ---------- */
.c-dopo .capitolo-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.c-dopo-velo{background:
  linear-gradient(180deg,rgba(14,15,12,.6) 0%,rgba(14,15,12,.12) 26%,rgba(14,15,12,.2) 50%,rgba(14,15,12,.9) 100%),
  linear-gradient(90deg,rgba(14,15,12,.55) 0%,rgba(14,15,12,0) 65%)}
.c-dopo-testo{position:absolute;left:0;right:0;bottom:calc(clamp(28px,5vh,48px) + 56px + clamp(30px,5vh,60px));z-index:2;padding-inline:var(--gut)}
.c-dopo-titolo{line-height:.96;text-shadow:0 .04em .24em rgba(0,0,0,.35)}
.c-dopo-testo p{margin-top:clamp(14px,2.4vh,26px);max-width:32ch;text-shadow:0 1px 22px rgba(0,0,0,.7)}
/* ombra fissa in alto: titolo e invito si leggono su qualsiasi clip */
.c-dopo-ombra{z-index:15;background:linear-gradient(180deg,rgba(14,15,12,.55) 0%,rgba(14,15,12,0) 26%)}
.c-dopo .capitolo:first-child .capitolo-media video{object-position:50% 22%}
/* la tendina che copre la sezione prima del taglio: il girato della prima clip scurito, mai un fondo piatto */
.c-dopo .taglio--tendina{background:linear-gradient(180deg,rgba(14,15,12,.78),rgba(14,15,12,.9)),url("../media/lavori/privitera-dobbiamo-parlare.jpg") 50% 22%/cover var(--nero-2)}
.c-dopo-testa{position:absolute;left:var(--gut);top:calc(var(--menu-h) + 18px);z-index:20;font-size:var(--t-s);font-weight:400;line-height:1.05;letter-spacing:-.035em;text-shadow:0 1px 16px rgba(0,0,0,.6)}
.c-dopo-invito{position:absolute;right:var(--gut);top:calc(var(--menu-h) + 6px);z-index:20}
/* la traccia: quattro clip in fila, la testina lime scorre con lo scroll (solo transform) */
.c-traccia{position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(28px,5vh,48px);z-index:20;height:56px}
.c-traccia-clip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;height:100%}
.c-traccia-clip a{position:relative;display:block;overflow:hidden;background-color:var(--nero-2);background-size:cover;background-position:50% 35%;opacity:.5;transition:opacity .6s var(--curva-out)}
.c-traccia-clip a::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 2px var(--lime);opacity:0;transition:opacity .4s var(--curva-out)}
.c-traccia-clip a span{position:absolute;left:10px;bottom:8px;font-family:var(--f-etichetta);font-weight:800;text-transform:uppercase;font-size:12px;letter-spacing:.03em;text-shadow:0 1px 10px rgba(0,0,0,.8)}
.c-traccia-clip a:hover,.c-traccia-clip a.attivo{opacity:1}
.c-traccia-clip a.attivo::after{opacity:1}
.c-testina{position:absolute;left:0;top:-10px;bottom:-10px;width:2px;margin-left:-1px;background:var(--lime);box-shadow:0 0 12px rgba(132,209,21,.8);pointer-events:none;will-change:transform}

/* ---------- 4. chiusura: titoli di coda e contatti diretti ---------- */
.c-diretti{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.c-diretti>.media-pieno{z-index:-3}
.c-diretti-velo{z-index:-2;background:
  linear-gradient(180deg,rgba(14,15,12,.74) 0%,rgba(14,15,12,.42) 26%,rgba(14,15,12,.62) 58%,rgba(14,15,12,.94) 88%,var(--nero) 100%)}
.c-diretti>.fascio{z-index:-1;opacity:.6}
/* il respiro prima dei titoli di coda: il drone quasi al buio invece del nero pieno */
.c-diretti .taglio--respiro{background:linear-gradient(rgba(7,8,6,.84),rgba(7,8,6,.84)),url("../media/horeca/mbp-valle-largo.jpg") 50% 50%/cover #070806}
/* qui la mail grande c'è già: nel piede non si ripete */
.piede-mail{display:none}
.c-diretti-dentro{padding-block:calc(var(--menu-h) + 80px) clamp(64px,11vh,120px)}
.c-diretti-titolo{line-height:.96;text-shadow:0 .03em .2em rgba(0,0,0,.3)}
.c-diretti-titolo .c-riga-2{text-align:right}
.diretti{display:grid;grid-template-columns:repeat(3,minmax(max-content,1fr));gap:clamp(30px,5vh,56px) clamp(24px,4vw,72px);margin-top:clamp(44px,8vh,96px)}
.diretto{display:grid;gap:8px;align-content:start;min-width:0}
.diretto--mail{grid-column:1/-1}
.diretto-voce{font-family:var(--f-etichetta);font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.03em;color:var(--bianco-80)}
.diretto-valore{justify-self:start;font-weight:300;font-size:min(var(--t-m),4.4vw);line-height:1.02;letter-spacing:-.045em;white-space:nowrap;transition:color .8s var(--curva-out)}
.diretto--mail .diretto-valore{font-size:clamp(34px,6.4vw,120px);line-height:1;letter-spacing:-.05em}
.diretto-valore:hover{color:var(--lime)}
.diretto-wa{justify-self:start;margin-top:4px;color:var(--bianco-80)}

/* ---------- computer stretto ---------- */
@media (max-width:1100px){
  .c-modulo-griglia{grid-template-columns:1fr}
  .c-voce{position:relative;top:auto;padding-top:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:20px 40px;align-items:start}
  .c-voce-lista{margin-top:0;grid-row:1/3;grid-column:2;grid-template-columns:1fr 1fr}
}

/* ---------- telefono ---------- */
@media (max-width:760px){
  .c-apertura-dentro{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .c-apertura-piede{flex-direction:column;align-items:flex-start}
  .c-apertura-azioni{gap:12px 22px}
  .c-apertura-azioni .pulsante{flex:1 1 100%;justify-content:space-between}
  .c-modulo-dentro{padding-top:calc(var(--menu-h) + 18px)}
  .passo-titolo{font-size:clamp(38px,11vw,56px)}
  .scelte{grid-template-columns:1fr;gap:18px;margin-top:26px}
  .scelta-nome{font-size:clamp(28px,8vw,38px)}
  .scelta--dubbio .scelta-nome{font-size:clamp(23px,6.6vw,32px)}
  .scelta-riga{font-size:15px}
  .campi{grid-template-columns:1fr}
  .campo-lungo{font-size:18px}
  .modulo-azioni .pulsante{flex:1 1 auto;justify-content:space-between}
  .c-voce{display:block;margin-top:clamp(48px,8vh,72px)}
  .c-voce-lista{grid-template-columns:1fr;gap:22px;margin-top:22px}
  /* al telefono la barra contatto è sempre su in questa sezione: traccia e testo stanno sopra barra e timecode */
  .c-dopo-testo{bottom:calc(104px + 44px + 26px + env(safe-area-inset-bottom))}
  .c-dopo-testo p{font-size:18px}
  .c-dopo-testa{font-size:20px}
  /* al telefono l'invito lo fa la barra in basso: niente doppioni */
  .c-dopo-invito{display:none}
  .c-traccia{height:44px;bottom:calc(104px + env(safe-area-inset-bottom))}
  .c-traccia-clip a span{left:6px;bottom:5px;font-size:10px;letter-spacing:.04em}
  .diretti{grid-template-columns:1fr;gap:28px}
  /* numeri e indirizzi grandi: area di tocco di almeno 44 px senza spostare nulla */
  .c-voce-numero{padding-block:8px;margin-block:-8px}
  .diretto-valore{padding-block:7px;margin-block:-7px}
  /* mail su una riga sola fino a 375 px */
  .diretto-valore,.diretto--mail .diretto-valore{font-size:min(8.2vw,42px);overflow-wrap:normal;white-space:nowrap}
}

/* ---------- telefono in orizzontale: schermo basso ---------- */
@media (orientation:landscape) and (max-height:500px){
  .c-apertura-dentro{padding-block:calc(var(--menu-h) + 10px) calc(52px + env(safe-area-inset-bottom))}
  .c-apertura-piede{margin-top:14px;gap:12px 32px}
  /* la traccia sta sopra REC/timecode (in basso a destra), il testo sopra la traccia */
  .c-dopo-testo{bottom:calc(54px + 48px + 16px + env(safe-area-inset-bottom))}
  .c-dopo-testo p{margin-top:8px}
  .c-traccia{height:48px;bottom:calc(54px + env(safe-area-inset-bottom))}
  .c-dopo-invito{top:calc(var(--menu-h) - 6px)}
  .c-dopo-testa{top:var(--menu-h)}
  .diretti{margin-top:28px}
}

/* ---------- senza JS: tutto visibile ---------- */
html:not(.js) .c-otturatore{display:none}
html:not(.js) .c-titolo .riga>span,html:not(.js) .c-entra{transform:none;opacity:1}

/* ---------- movimento ridotto: stato finale, niente deriva ---------- */
@media (prefers-reduced-motion:reduce){
  .c-otturatore{display:none}
  .c-apertura-media,.c-apertura-media>video{transform:none!important;transition:none}
  .c-titolo .riga>span,.c-entra{transform:none;opacity:1;transition:none}
  .passo,.grazie,.passo.esce,.passo.entra,.grazie.entra{transition:none;opacity:1;transform:none}
  .scelta,.scelta-nome,.scelta>i::after,.consenso>i::after,.campo,.c-passi li::before{transition:none}
  .c-testina{display:none}
}

/* sul computer la pagina contatti è già il contatto: la barra fissa coprirebbe la traccia dei clip */
@media (min-width:761px){.barra{display:none}}

/* computer: il girato del metodo inquadra mani e oggetti, i volti restano sopra, fuori dal titolo */
@media (min-width:761px){
  .capitolo-media video[poster*="privitera-dobbiamo-parlare"]{object-position:50% 92%}
  .capitolo-media video[poster*="effe2-lab"]{object-position:50% 88%}
}