/* «Riparo» — sito d'esempio di un idraulico ed elettricista (attivita' di
   fantasia). Chi arriva qui ha un guasto in casa e il telefono in mano: la
   cosa che si ricorda e' il numero, enorme, scritto come sui furgoni. Tutto il
   resto e' utile e basta: dove arrivano, quanto costa, come lavorano. */

@font-face{font-family:"Barlow Condensed";src:url(../font/barlow-condensed-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(../font/barlow-condensed-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Inter;src:url(../font/inter-100-900.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{
  --bianco:#FFFFFF;
  --grafite:#1E2226;        /* testo: 16,1:1 su bianco, 10,4:1 sul giallo */
  --cantiere:#F2C230;       /* il giallo dei cantieri e dei furgoni */
  --rame:#A9562A;           /* i tubi; 5,0:1 su bianco */
  --pvc:#E3E6E8;            /* le fasce */
  --acqua:#1B629A;          /* collegamenti: 6,3:1 su bianco */
  --titoli:"Barlow Condensed","Arial Narrow",sans-serif;
  --testo:Inter,system-ui,sans-serif;
  --bordo:clamp(1rem,4vw,3.5rem);
}
*{box-sizing:border-box;margin:0}
body{background:var(--bianco);color:var(--grafite);font:400 1.0625rem/1.55 var(--testo);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:var(--acqua)}
:focus-visible{outline:3px solid var(--acqua);outline-offset:3px}
h2,h3,.marchio,.numero,.bottone,button,.tempo,.barra-chiama{font-family:var(--titoli)}
h2{font-weight:700;font-size:clamp(2rem,1.3rem + 2.2vw,3.2rem);line-height:1;margin-bottom:.8rem}
h3{font-weight:700;font-size:1.6rem;line-height:1.05;margin-bottom:.8rem}
section{padding:clamp(3rem,7vw,5.5rem) var(--bordo)}
section>p{max-width:40rem}

.fascia-esempio{background:var(--grafite);color:var(--bianco);font:500 .82rem/1.4 var(--testo);text-align:center;padding:.45rem 1rem}
.fascia-esempio a{color:inherit}

.testata{display:flex;align-items:baseline;gap:1rem;padding:1rem var(--bordo);background:var(--cantiere)}
.marchio{font-weight:700;font-size:2rem;line-height:1;color:var(--grafite);text-decoration:none}
.mestiere{font-weight:500;font-size:.95rem}

/* ── l'apertura: il numero ────────────────────────────────────────────────── */
.apertura{background:var(--cantiere);padding-top:clamp(1.5rem,4vw,3rem);padding-bottom:clamp(2.5rem,6vw,4.5rem);position:relative;overflow:hidden}
/* all'arrivo un tubo di rame corre lungo l'alto della pagina, fa la curva e
   lascia cadere una goccia: poi e' fermo (meno di 4 s) */
.tubo-ap{position:absolute;top:clamp(.4rem,2vw,1.4rem);right:0;width:min(62vw,46rem);height:auto;pointer-events:none;overflow:visible}
.tubo-ap path{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:posa 2.1s cubic-bezier(.5,0,.2,1) .3s forwards}
.t-ombra{stroke:#6E3518;stroke-width:22}
.t-rame{stroke:var(--rame);stroke-width:16}
.t-luce{stroke:#E39A6B;stroke-width:4;opacity:.8}
@keyframes posa{to{stroke-dashoffset:0}}
.t-raccordi rect{fill:#7A3A1A;opacity:0;animation:compari .3s ease 2.2s forwards}
@keyframes compari{to{opacity:1}}
.tubo-ap .t-goccia{fill:var(--acqua);stroke:none;stroke-dasharray:none;opacity:0;animation:goccia 1.1s cubic-bezier(.5,0,.9,.6) 2.5s forwards}
@keyframes goccia{0%{opacity:0;transform:translateY(-12px)}20%{opacity:1}75%{opacity:1;transform:translateY(26px)}100%{opacity:0;transform:translateY(34px)}}
.stato{display:flex;align-items:center;gap:.55rem;font-weight:600;font-size:.98rem;margin-bottom:.4rem}
.stato::before{content:"";width:.7rem;height:.7rem;border-radius:50%;background:var(--grafite);flex:none}
.stato.aperto::before{background:#1E7A3C;box-shadow:0 0 0 3px rgba(30,122,60,.25)}
.stato.urgenze::before{background:#B5470F}
.numero{display:block;font-weight:700;font-size:clamp(3.6rem,16.5vw,16rem);line-height:.86;letter-spacing:-.01em;
  color:var(--grafite);text-decoration:none;margin:0 0 1.4rem -.04em;white-space:nowrap}
.numero:hover{text-decoration:underline;text-decoration-thickness:.06em;text-underline-offset:.08em}
.sotto{font-size:1.2rem;max-width:40ch;margin-bottom:1.6rem}
.azioni{display:flex;flex-wrap:wrap;gap:.8rem}
.bottone{display:inline-flex;align-items:center;min-height:3.2rem;padding:.6rem 1.4rem;font-weight:700;font-size:1.35rem;
  text-decoration:none;border:3px solid var(--grafite);color:var(--grafite);border-radius:4px}
.bottone.primo{background:var(--grafite);color:var(--cantiere)}
.bottone:hover{background:var(--grafite);color:var(--cantiere)}

/* ── le zone: un tubo di rame, una fermata per quartiere ──────────────────── */
.tubo{list-style:none;padding:0;margin-top:2rem;max-width:34rem;position:relative}
.tubo::before{content:"";position:absolute;left:.62rem;top:.9rem;bottom:.9rem;width:.5rem;background:var(--rame);border-radius:4px}
.tubo li{display:grid;grid-template-columns:1.75rem 1fr auto;align-items:center;gap:1rem;padding:.55rem 0;position:relative}
.nodo{width:1.75rem;height:1.75rem;border-radius:50%;background:var(--bianco);border:.42rem solid var(--rame);z-index:1}
.zona{font-weight:500}
.tempo{font-weight:700;font-size:1.45rem;white-space:nowrap}

/* ── il listino ───────────────────────────────────────────────────────────── */
.listino{background:var(--pvc)}
.colonne{display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));gap:2.5rem 4rem;margin:2rem 0 1.5rem}
.colonne ul{list-style:none;padding:0}
.colonne li{display:flex;align-items:baseline;gap:.6rem;padding:.55rem 0;border-bottom:1px solid #c3c9cd}
.colonne li span:first-child{flex:1}
.costo{font:700 1.2rem var(--titoli);white-space:nowrap;text-align:right}
.nota{font-size:.95rem}

/* ── il metodo: e' davvero una sequenza, quindi e' numerata ───────────────── */
.metodo ol{list-style:none;padding:0;counter-reset:passo;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:2rem;margin-top:2rem}
.metodo li{counter-increment:passo;position:relative;padding-top:3.4rem}
.metodo li::before{content:counter(passo);position:absolute;top:0;left:0;font:700 3rem/1 var(--titoli);color:var(--rame)}
.metodo strong{display:block;font:700 1.35rem/1.1 var(--titoli);margin-bottom:.3rem}

/* ── i lavori ─────────────────────────────────────────────────────────────── */
.lavori .griglia{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1.6rem;margin-top:1.6rem}
.lavoro img{aspect-ratio:4/3;object-fit:cover;width:100%;border-radius:4px}
.lavoro figcaption{margin-top:.7rem;font-size:.98rem}
.lavoro strong{display:block;font:700 1.25rem/1.15 var(--titoli)}

/* ── il preventivo ────────────────────────────────────────────────────────── */
.preventivo{border-top:6px solid var(--cantiere)}
.preventivo form{display:grid;gap:1.1rem;max-width:40rem;margin-top:1.6rem}
.riga{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:1.1rem}
.preventivo label{display:grid;gap:.35rem;font-weight:600;font-size:.95rem}
.preventivo input,.preventivo select,.preventivo textarea{font:400 1rem var(--testo);padding:.75rem .8rem;
  border:2px solid var(--grafite);border-radius:4px;background:var(--bianco);color:var(--grafite);min-height:3rem}
.preventivo input[type=file]{padding:.6rem}
.preventivo .spunta{display:flex;gap:.6rem;align-items:flex-start;font-weight:400}
.preventivo .spunta input{min-height:auto;width:1.25rem;height:1.25rem;margin-top:.15rem;flex:none}
.preventivo button{justify-self:start;font-weight:700;font-size:1.4rem;background:var(--cantiere);color:var(--grafite);
  border:3px solid var(--grafite);border-radius:4px;padding:.55rem 1.6rem;min-height:3.2rem;cursor:pointer}
.preventivo button:hover{background:var(--grafite);color:var(--cantiere)}
.esito{min-height:1.6em;font-weight:600}

.piede{padding:2.5rem var(--bordo) 3rem;background:var(--grafite);color:#d9dde0;font-size:.92rem}
.piede p+p{margin-top:.25rem}

/* la barra per chiamare: solo sul telefono, sempre a portata di pollice */
.barra-chiama{display:none}
@media(max-width:760px){
  body{padding-bottom:4.2rem}
  /* il video finisce sopra la barra «Chiama»: sotto la barra restavano la fonte
     e «Ferma il video», visibili solo scorrendo (voce Cowork 26/10 (1)) */
  .clip{--clip-h:calc(100svh - 6rem - 3.8rem - env(safe-area-inset-bottom))}
  .barra-chiama{display:flex;align-items:center;justify-content:center;position:fixed;left:0;right:0;bottom:0;z-index:10;
    min-height:3.8rem;background:var(--grafite);color:var(--cantiere);font-weight:700;font-size:1.5rem;text-decoration:none;
    padding-bottom:env(safe-area-inset-bottom)}
  .mestiere{display:none}
  .tubo li{grid-template-columns:1.75rem 1fr auto}
}

/* il video in loop (esempi/filmato.js) */
.filmato{position:relative}
.filmato video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#2b3135}
.filmato .ferma{position:absolute;right:1rem;bottom:1rem;font:600 .85rem/1 system-ui,sans-serif;color:#fff;
  background:rgba(20,24,27,.72);border:1px solid rgba(255,255,255,.5);border-radius:99px;padding:.5rem .9rem;cursor:pointer}
.nota-ai{margin-top:.6rem}
.al-lavoro{padding:0}
.al-lavoro video{max-height:62vh}

/* a 1440 la destra non resta vuota: lo schema delle zone accanto all'elenco,
   e accanto al modulo cosa succede dopo (Cowork, voce 14.1) */
.zone-griglia{display:grid;grid-template-columns:minmax(0,34rem) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.zone-griglia .tubo{margin-top:2rem}
.schema-zone svg{width:100%;height:auto;display:block}
.schema-zone figcaption{font-size:.92rem;margin-top:.6rem}
.sz-nome{font:500 19px var(--titoli);fill:var(--grafite)}
.sz-tempo{font:700 22px var(--titoli);fill:var(--rame)}
.sz-mare{font:500 16px var(--testo);fill:#4c7290;letter-spacing:.2em}
.prev-griglia{display:grid;grid-template-columns:minmax(0,40rem) minmax(0,22rem);gap:clamp(2rem,6vw,6rem);align-items:start}
.dopo{background:var(--pvc);border-radius:4px;padding:1.6rem 1.8rem;margin-top:1.6rem}
.dopo ol{padding-left:1.2rem;margin-bottom:1.4rem}
.dopo li{margin-bottom:.4rem}
.dopo .orari{display:grid;grid-template-columns:auto auto;justify-content:start;gap:.3rem 1.4rem;margin-bottom:1.2rem}
.dopo dt{font-weight:600}
.preferisci a{font:700 1.4rem var(--titoli);color:var(--grafite)}
@media(max-width:900px){
  .zone-griglia,.prev-griglia{grid-template-columns:1fr}
  .schema-zone{display:none}
}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(prefers-reduced-motion:reduce){.tubo-ap path,.t-raccordi rect{animation:none;stroke-dashoffset:0;opacity:1}.tubo-ap .t-goccia{display:none}}

/* ── il video in cima: le parole in alto a sinistra, col giallo del furgone ── */
.clip{--clip-velo:linear-gradient(180deg,rgba(30,34,38,.9) 0%,rgba(30,34,38,.5) 40%,rgba(30,34,38,.1) 70%);align-items:start}
.clip{--velo-parole:rgba(30,34,38,.5)}   /* il velo sotto le parole (clip.css) */
.clip-nome{font:700 clamp(3.6rem,1.6rem + 7vw,8.4rem)/.85 var(--titoli);text-transform:uppercase;letter-spacing:.01em;
  border-bottom:.12em solid var(--cantiere);padding-bottom:.08em;display:inline-block}
.clip-frase{font:500 clamp(1.1rem,1rem + .5vw,1.4rem)/1.4 var(--testo)}
.clip-btn{background:var(--cantiere);color:var(--grafite);font-family:var(--titoli);font-size:1.15rem;text-transform:uppercase;letter-spacing:.04em}
/* a 320 il modulo usciva di 63 px: i campi tenevano la loro larghezza minima
   (controllo totale del 23/10) */
.preventivo form,.preventivo label,.riga>*{min-width:0}
.preventivo input,.preventivo select,.preventivo textarea{width:100%;max-width:100%;min-width:0}
.preventivo .spunta input{width:1.25rem}
.riga{grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr))}

/* il secondo video (23/10): la chiave sul rubinetto, una fascia prima di «Come
   lavoriamo», col bordo a strisce del cantiere (il giallo del sito) */
.al-lavoro{position:relative;padding:14px 0 0;background:repeating-linear-gradient(-45deg,var(--cantiere) 0 18px,var(--grafite) 18px 36px)}
.al-lavoro .secondo{aspect-ratio:auto;height:min(62vh,56.25vw)}
.al-lavoro .secondo::after{content:"";position:absolute;inset:auto 0 0;height:40%;pointer-events:none;
  background:linear-gradient(transparent,color-mix(in srgb,var(--grafite) 55%,transparent))}