/* =========================================================================
   LUIGI LETTIERI — foglio di stile unico
   Concept "Calce e Rame": intonaco caldo, inchiostro profondo, accento rame
   (il tubo di rame = il mestiere), tricolore sottile come firma ereditata
   dal logo del cliente.
   Scritto a mano: niente framework, niente page builder.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. TOKEN
   ------------------------------------------------------------------------- */
:root{
  --calce:#F4F1EB; --calce-2:#EBE6DD; --carta:#FFFDF9;
  --inchiostro:#14171C; --inchiostro-2:#232830; --grafite:#5C636E;

  --rame:#A85B32; --rame-chiaro:#C97A4E; --rame-scuro:#8A4726;
  --verde-wa:#1FA855;
  --tri-verde:#1B7A4B; --tri-bianco:#FFFFFF; --tri-rosso:#C4262E;

  --bg:var(--calce); --bg-elev:var(--carta); --bg-alt:var(--calce-2);
  --testo:var(--inchiostro); --testo-soft:var(--grafite);
  --bordo:rgba(20,23,28,.12); --accento:var(--rame);
  --accento-soft:rgba(168,91,50,.10);

  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.5rem; --sp-6:2rem; --sp-7:3rem; --sp-8:4.5rem;
  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-xl:32px; --r-full:999px;

  --ombra-1:0 1px 2px rgba(20,23,28,.04), 0 2px 8px rgba(20,23,28,.045);
  --ombra-2:0 1px 3px rgba(20,23,28,.05), 0 8px 22px rgba(20,23,28,.07);
  --ombra-3:0 12px 40px rgba(20,23,28,.14);
  --ease:cubic-bezier(.2,.7,.2,1);
  --wrap:1160px;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0E1115; --bg-elev:#161A20; --bg-alt:#12161B;
    --testo:#F2EFE9; --testo-soft:#A2A9B4;
    --bordo:rgba(242,239,233,.14); --accento:var(--rame-chiaro);
    --accento-soft:rgba(201,122,78,.14);
    --ombra-1:0 1px 2px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.24);
    --ombra-2:0 1px 3px rgba(0,0,0,.28), 0 8px 22px rgba(0,0,0,.32);
    --ombra-3:0 12px 40px rgba(0,0,0,.42);
  }
}

/* -------------------------------------------------------------------------
   2. BASE
   ------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:90px; }
body{
  margin:0; background:var(--bg); color:var(--testo);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem); line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--accento); text-underline-offset:.2em; }
p{ margin:0 0 var(--sp-4); }
p:last-child{ margin-bottom:0; }
ul,ol{ margin:0 0 var(--sp-4); padding-left:1.3em; }
:focus-visible{ outline:3px solid var(--accento); outline-offset:3px; border-radius:4px; }

.salta{
  position:absolute; left:-9999px; top:0; background:var(--inchiostro); color:var(--calce);
  padding:.8rem 1.2rem; z-index:200; border-radius:0 0 var(--r-md) 0;
}
.salta:focus{ left:0; }

.wrap{ width:min(var(--wrap),calc(100% - 2.5rem)); margin-inline:auto; }
.wrap--stretto{ width:min(760px,calc(100% - 2.5rem)); }
.sezione{ padding:clamp(3rem,2rem + 6vw,6.5rem) 0; }
.sezione--alt{ background:var(--bg-alt); border-block:1px solid var(--bordo); }

/* -------------------------------------------------------------------------
   3. TIPOGRAFIA
   ------------------------------------------------------------------------- */
.display,h1,h2{
  font-family:'Fraunces',Georgia,serif; font-optical-sizing:auto;
  font-weight:600; line-height:1.03; letter-spacing:-.025em; margin:0 0 var(--sp-4);
}
h1{ font-size:clamp(2.3rem,1.6rem + 3.3vw,4.1rem); }
h2{ font-size:clamp(1.85rem,1.35rem + 2.1vw,2.9rem); }
h3{
  font-family:'Fraunces',Georgia,serif; font-weight:600; letter-spacing:-.015em;
  font-size:clamp(1.15rem,1.05rem + .5vw,1.45rem); line-height:1.22; margin:0 0 var(--sp-2);
}
h4{ font-size:1.05rem; font-weight:600; margin:0 0 var(--sp-2); }
.occhiello{
  font-size:.7rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accento); margin:0 0 var(--sp-3);
}
.guida{ font-size:clamp(1.05rem,1rem + .35vw,1.2rem); color:var(--testo-soft); max-width:56ch; }
.soft{ color:var(--testo-soft); }
em.rame{ font-style:normal; color:var(--accento); }

/* -------------------------------------------------------------------------
   4. LOGO E FIRMA TRICOLORE
   ------------------------------------------------------------------------- */
/* La striscia tricolore è sottile per scelta: nel logo del cliente è un
   filetto, non una bandiera. Se ingrossa, il logo diventa folkloristico. */
.tricolore{
  display:block; height:3px; width:72px;
  background:linear-gradient(90deg,
    var(--tri-verde) 0 33.33%, var(--tri-bianco) 33.33% 66.66%, var(--tri-rosso) 66.66% 100%);
}
.logo{ display:inline-flex; flex-direction:column; gap:6px; align-items:flex-start; text-decoration:none; }

/* Lettering MAIUSCOLO, come il logo del cliente.
   Il maiuscolo ha bisogno di tracking positivo: a spaziatura normale le
   aste verticali si impastano e il nome diventa illeggibile in piccolo. */
.logo__nome{
  font-family:'Fraunces',Georgia,serif; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em;
  font-size:1.2rem; line-height:1; color:var(--testo); white-space:nowrap;
}
.logo .tricolore{ width:100%; height:2.5px; }
.logo img{ max-height:56px; width:auto; }

/* -------------------------------------------------------------------------
   5. BOTTONI
   ------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.9rem 1.5rem; border-radius:var(--r-full); border:1px solid transparent;
  font-family:inherit; font-weight:600; font-size:1rem; text-decoration:none;
  cursor:pointer; min-height:52px; text-align:center;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .2s, border-color .2s;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn--primario,
.btn--primario:hover,
.btn--primario:focus,
.btn--primario:visited{ color:#fff; }
.btn--primario{ background:var(--accento); box-shadow:var(--ombra-2); }
.btn--primario:hover{ background:var(--rame-scuro); }

/* In tema scuro l'accento è già chiaro: schiarirlo ancora in hover
   ridurrebbe il contrasto col testo bianco. Meglio scurire. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .btn--primario:hover{ background:var(--rame); }
}
.btn--scuro{ background:var(--inchiostro); color:var(--calce); }
.btn--scuro:hover{ background:var(--inchiostro-2); }
.btn--ghost{ background:transparent; color:var(--testo); border-color:var(--bordo); }
.btn--ghost:hover{ background:var(--accento-soft); border-color:var(--accento); }
.btn--wa,
.btn--wa:hover,
.btn--wa:focus,
.btn--wa:visited{ color:#fff; }
.btn--wa{ background:var(--verde-wa); }
.btn--wa:hover{ background:#1a9349; }

.btn--scuro,
.btn--scuro:hover,
.btn--scuro:focus{ color:var(--calce); }
.btn--full{ width:100%; }
.btn .icona{ width:20px; height:20px; flex:none; }
.cta-riga{ display:flex; flex-wrap:wrap; gap:.75rem; }

/* -------------------------------------------------------------------------
   6. TESTATA
   ------------------------------------------------------------------------- */
.testata{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--bordo);
}
.testata__in{ display:flex; align-items:center; gap:1.5rem; padding:.8rem 0; }
.nav{ margin-left:auto; display:flex; align-items:center; gap:.3rem; }
.nav ul{ display:flex; gap:.15rem; list-style:none; margin:0; padding:0; }

/* :not(.btn) è necessario, non è pignoleria: `.nav a` ha specificità 0,1,1
   e batterebbe `.btn--primario` (0,1,0). Senza l'esclusione il pulsante
   Preventivo eredita il colore del menù, e in hover diventa rame su fondo
   rame — cioè invisibile. */
.nav a:not(.btn){
  display:block; padding:.55rem .85rem; border-radius:var(--r-full);
  text-decoration:none; color:var(--testo); font-size:.95rem; font-weight:500;
  transition:background .2s, color .2s;
  /* Una voce di menù non va mai a capo: "Zone servite" spezzato su due righe
     alza la testata e fa sembrare stretto un sito che stretto non è.
     Se lo spazio non basta si stringono i margini, non si spezzano le parole. */
  white-space:nowrap;
}
.nav a:not(.btn):hover,
.nav .current-menu-item > a:not(.btn){ background:var(--accento-soft); color:var(--accento); }
.testata__azioni{ display:flex; gap:.5rem; align-items:center; }
.testata__azioni .btn{ min-height:44px; padding:.6rem 1.1rem; font-size:.92rem; white-space:nowrap; }

/* Tra i 1000 e i 1320 px la testata è al limite: sette voci, il numero per
   esteso e il pulsante Preventivo non ci stanno comodi. Invece di far
   scendere le parole a capo, si restringe lo spazio attorno — e sotto una
   certa soglia il numero diventa un pulsante tondo con la sola cornetta.
   Il numero non sparisce dal sito: resta grande nella prima schermata, nel
   piede e nel pulsante fisso che segue lo scorrimento. */
@media (min-width:1001px) and (max-width:1320px){
  .testata__in{ gap:1rem; }
  .nav{ gap:.15rem; }
  .nav ul{ gap:0; }
  .nav a:not(.btn){ padding:.5rem .6rem; font-size:.9rem; }
  .testata__azioni .btn{ padding:.6rem .9rem; font-size:.88rem; }
}
@media (min-width:1001px) and (max-width:1180px){
  .testata__azioni .btn--ghost span{
    position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%);
  }
  .testata__azioni .btn--ghost{ width:44px; padding:.6rem; justify-content:center; }
  .logo img{ max-height:46px; }
}

/* Il pulsante del menù.
   Niente riquadro pieno: accanto a un lettering con le grazie un blocco nero
   pesa troppo e sbilancia la testata. Qui restano la parola MENU e tre linee,
   allineate sulla stessa riga — il testo dice cosa fa senza bisogno di
   spiegazioni, le linee lo rendono riconoscibile a colpo d'occhio.
   La terza linea è più corta: da chiusa dà carattere al segno, da aperta
   sparisce mentre le altre due si incrociano nella X. */
.hamburger{
  display:none; align-items:center; gap:.6rem;
  padding:.5rem .2rem; border:0; background:transparent; cursor:pointer;
  color:var(--testo); font-family:'Inter',sans-serif;
  transition:color .25s var(--ease), opacity .2s;
}
.hamburger:hover{ color:var(--accento); }
.hamburger:active{ opacity:.6; }

.hamburger__testo{
  font-size:.68rem; font-weight:700; letter-spacing:.18em; line-height:1;
}

.hamburger__segno{
  position:relative; display:block; width:26px; height:16px; flex:none;
}
.hamburger__segno span{
  position:absolute; left:0; height:2px; border-radius:2px;
  background:currentColor;
  transition:transform .34s var(--ease), opacity .16s var(--ease), width .3s var(--ease);
}
.hamburger__segno span:nth-child(1){ top:0;  width:26px; }
.hamburger__segno span:nth-child(2){ top:7px; width:26px; }
.hamburger__segno span:nth-child(3){ top:14px; width:17px; }

.hamburger[aria-expanded="true"]{ color:var(--accento); }
.hamburger[aria-expanded="true"] .hamburger__segno span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] .hamburger__segno span:nth-child(2){ opacity:0; }
.hamburger[aria-expanded="true"] .hamburger__segno span:nth-child(3){ width:26px; transform:translateY(-7px) rotate(-45deg); }

@media (max-width:1000px){
  .hamburger{ display:flex; margin-left:auto; }
  .nav{
    position:fixed; inset:65px 0 auto; margin:0; flex-direction:column; align-items:stretch;
    gap:.4rem; padding:1rem 1.25rem 1.6rem; background:var(--bg-elev);
    border-bottom:1px solid var(--bordo); box-shadow:var(--ombra-2);
    transform:translateY(-120%); transition:transform .38s var(--ease);
    max-height:calc(100dvh - 65px); overflow-y:auto;
    visibility:hidden;
  }
  .nav[data-aperto="true"]{ transform:translateY(0); visibility:visible; }
  .nav ul{ flex-direction:column; gap:0; }
  .nav a:not(.btn){
    padding:.95rem .4rem; font-size:1.08rem; border-radius:0;
    border-bottom:1px solid var(--bordo);
  }
  .nav li:last-child a:not(.btn){ border-bottom:0; }

  /* Le voci entrano una dopo l'altra: costa nulla e fa sembrare il menù
     costruito, non semplicemente apparso. */
  .nav[data-aperto="true"] li{ animation:voce-entra .34s var(--ease) both; }
  .nav[data-aperto="true"] li:nth-child(1){ animation-delay:.04s; }
  .nav[data-aperto="true"] li:nth-child(2){ animation-delay:.07s; }
  .nav[data-aperto="true"] li:nth-child(3){ animation-delay:.10s; }
  .nav[data-aperto="true"] li:nth-child(4){ animation-delay:.13s; }
  .nav[data-aperto="true"] li:nth-child(5){ animation-delay:.16s; }
  .nav[data-aperto="true"] li:nth-child(6){ animation-delay:.19s; }
  .nav[data-aperto="true"] li:nth-child(7){ animation-delay:.22s; }
  @keyframes voce-entra{ from{ opacity:0; transform:translateY(-6px); } }

  /* Velo sul resto della pagina: aiuta a capire che il menù è aperto e
     che toccando fuori si chiude. */
  .nav::after{ content:none; }
  body.menu-aperto::before{
    content:''; position:fixed; inset:0; z-index:55;
    background:rgba(14,17,21,.42); backdrop-filter:blur(2px);
    animation:velo .3s var(--ease) both;
  }
  @keyframes velo{ from{ opacity:0; } }
  .testata__azioni{ display:none; }
  .nav .testata__azioni{ display:flex; flex-direction:column; margin-top:.8rem; }
  .nav .testata__azioni .btn{ width:100%; min-height:52px; font-size:1rem; }
}

/* -------------------------------------------------------------------------
   7. HERO
   ------------------------------------------------------------------------- */
.hero{ position:relative; padding:clamp(2.5rem,2rem + 5vw,5.5rem) 0 clamp(2.5rem,2rem + 4vw,4.5rem); overflow:hidden; }
.hero::before{
  content:''; position:absolute; inset:-40% -20% auto -25%; height:80vh; z-index:0; pointer-events:none;
  background:radial-gradient(55% 55% at 22% 32%,var(--accento-soft) 0%,transparent 72%);
}
.hero > *{ position:relative; z-index:1; }
.hero__grid{ display:grid; gap:clamp(2rem,1rem + 4vw,3.5rem); align-items:center; grid-template-columns:1fr; }
@media (min-width:960px){ .hero__grid{ grid-template-columns:1.08fr .92fr; } }
.hero h1{ margin:.3rem 0 1.1rem; }
.hero .guida{ margin-bottom:var(--sp-5); }

.rassicura{ display:flex; flex-wrap:wrap; gap:.7rem 1.4rem; margin-top:var(--sp-5); font-size:.92rem; color:var(--testo-soft); }
.rassicura span{ display:flex; align-items:center; gap:.45rem; }
.rassicura .icona{ width:18px; height:18px; color:var(--accento); flex:none; stroke-width:2.5; }

/* riquadro prezzi nell'hero */
.prezzo-box{
  background:var(--bg-elev); border:1px solid var(--bordo); border-radius:var(--r-xl);
  padding:clamp(1.5rem,1rem + 2vw,2.2rem); box-shadow:var(--ombra-2);
}
.prezzo-riga{ display:flex; align-items:center; gap:1rem; padding:1.1rem 0; }
.prezzo-riga + .prezzo-riga{ border-top:1px solid var(--bordo); }

/* Le due cifre devono incolonnarsi: la seconda ha sopra "a partire da",
   che senza una larghezza comune spingerebbe il prezzo fuori asse
   rispetto a quello sopra. */
.prezzo-cifra{
  flex:none; width:7.2rem; display:flex; flex-direction:column; justify-content:center;
  font-family:'Fraunces',serif; font-weight:700; font-size:clamp(2rem,1.7rem + 1.4vw,2.7rem);
  line-height:1; color:var(--accento); letter-spacing:-.03em; white-space:nowrap;
}
.prezzo-testo{ min-width:0; }
.prezzo-testo h4{ margin:0 0 .15rem; }
.prezzo-testo p{ margin:0; font-size:.88rem; color:var(--testo-soft); line-height:1.45; }
.prezzo-prefisso{
  display:block; font-family:'Inter',sans-serif; font-size:.68rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--testo-soft);
  margin-bottom:.3rem; line-height:1;
}
.prezzo-nota{
  margin-top:1.1rem; padding-top:1.1rem; border-top:1px dashed var(--bordo);
  font-size:.86rem; color:var(--testo-soft);
}
.prezzo-nota strong{ color:var(--testo); }

/* -------------------------------------------------------------------------
   8. GRIGLIE E SCHEDE
   ------------------------------------------------------------------------- */
.griglia{ display:grid; gap:var(--sp-4); grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr)); }
.card{
  background:var(--bg-elev); border:1px solid var(--bordo); border-radius:var(--r-lg);
  padding:var(--sp-5); box-shadow:var(--ombra-1);
}

.servizio{
  position:relative; display:flex; flex-direction:column; gap:.4rem;
  text-decoration:none; color:inherit; overflow:hidden;
  transition:transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.servizio::after{
  content:''; position:absolute; left:0; right:0; top:0; height:3px;
  background:var(--accento); transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
.servizio:hover{ transform:translateY(-4px); border-color:var(--accento); box-shadow:var(--ombra-2); }
.servizio:hover::after{ transform:scaleX(1); }
.servizio .icona{ width:30px; height:30px; color:var(--accento); margin-bottom:.6rem; }
.servizio p{ font-size:.94rem; color:var(--testo-soft); margin:0; }
.servizio__vai{ margin-top:auto; padding-top:.9rem; font-size:.88rem; font-weight:600; color:var(--accento);
  display:flex; align-items:center; gap:.35rem; }
.servizio__vai .icona{ width:16px; height:16px; margin:0; transition:transform .3s var(--ease); }
.servizio:hover .servizio__vai .icona{ transform:translateX(4px); }
.servizio--core{ border-color:color-mix(in srgb,var(--accento) 35%,var(--bordo)); }

/* passi numerati */
.passi{ counter-reset:p; display:grid; gap:var(--sp-5); grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); }
.passo{ counter-increment:p; }
.passo::before{
  content:counter(p); display:grid; place-items:center; width:46px; height:46px; border-radius:50%;
  background:var(--accento); color:#fff; font-weight:700; font-size:1.1rem; margin-bottom:var(--sp-3);
  font-family:'Fraunces',serif;
}
.passo p{ color:var(--testo-soft); font-size:.95rem; margin:0; }

/* elenco lavori con spunta */
.spuntato{ list-style:none; padding:0; margin:0; display:grid; gap:.6rem; }
.spuntato li{ display:flex; gap:.7rem; align-items:flex-start; }
.spuntato .icona{ width:19px; height:19px; color:var(--accento); flex:none; margin-top:.3rem; stroke-width:2.5; }

/* zone servite */
.zone{ display:flex; flex-wrap:wrap; gap:.5rem; }
.zone span, .zone a{
  padding:.45rem .95rem; border:1px solid var(--bordo); border-radius:var(--r-full);
  font-size:.9rem; background:var(--bg-elev); text-decoration:none; color:var(--testo);
}

/* -------------------------------------------------------------------------
   9. FORM PREVENTIVO
   ------------------------------------------------------------------------- */
.modulo{
  background:var(--bg-elev); border:1px solid var(--bordo); border-radius:var(--r-xl);
  padding:clamp(1.4rem,1rem + 1.6vw,2.3rem); box-shadow:var(--ombra-2);
}
.modulo__testa{ margin-bottom:1.4rem; }
.modulo__testa h2{ font-size:clamp(1.5rem,1.3rem + .8vw,1.9rem); margin:0; }
.campi{ display:grid; gap:var(--sp-4); }
.campi--due{ grid-template-columns:1fr; }
@media (min-width:560px){ .campi--due{ grid-template-columns:1fr 1fr; } }
.campo label{ display:block; font-size:.82rem; font-weight:600; margin-bottom:.4rem; letter-spacing:.01em; }
.campo input,.campo select,.campo textarea{
  width:100%; padding:.85rem 1rem; font:inherit; font-size:1rem; color:var(--testo);
  background:var(--bg); border:1px solid var(--bordo); border-radius:var(--r-md);
  transition:border-color .2s, box-shadow .2s;
}
.campo textarea{ min-height:120px; resize:vertical; }
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none; border-color:var(--accento); box-shadow:0 0 0 4px var(--accento-soft);
}
.campo input:user-invalid,.campo select:user-invalid{ border-color:var(--tri-rosso); }
.campo__aiuto{ font-size:.78rem; color:var(--testo-soft); margin:.35rem 0 0; }
/* Spunte di accettazione dentro i moduli.
   NON si chiamano .consenso: quella classe è del banner cookie, che è
   position:fixed — dandogliela, la casella schizzava in fondo alla pagina
   sopra il resto del contenuto. */
.accetta{
  display:flex; gap:.75rem; align-items:flex-start;
  font-size:.85rem; line-height:1.5; color:var(--testo-soft);
  padding:.75rem .85rem; border:1px solid var(--bordo); border-radius:var(--r-md);
  background:var(--bg); cursor:pointer; transition:border-color .2s;
}
.accetta:hover{ border-color:var(--accento); }
.accetta input{ width:20px; height:20px; margin-top:.1rem; flex:none; accent-color:var(--accento); }
.accetta input:user-invalid{ outline:2px solid var(--tri-rosso); outline-offset:2px; }
.accetta a{ color:var(--accento); }
.accetta strong{ color:var(--testo); }
.accetta em{
  display:block; margin-top:.2rem; font-style:normal; font-size:.68rem;
  font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accento);
}
.modulo__nota{
  margin-top:1rem; padding:.9rem 1.1rem; background:var(--accento-soft); border-radius:var(--r-md);
  font-size:.86rem; color:var(--testo); display:flex; gap:.7rem; align-items:flex-start;
}
.modulo__nota .icona{ width:19px; height:19px; color:var(--accento); flex:none; margin-top:.15rem; }

/* -------------------------------------------------------------------------
   10. FAQ
   ------------------------------------------------------------------------- */
details.faq{ border-bottom:1px solid var(--bordo); padding:var(--sp-4) 0; }
details.faq summary{
  cursor:pointer; font-weight:600; font-size:1.05rem; list-style:none;
  display:flex; justify-content:space-between; gap:1rem; align-items:center;
}
details.faq summary::-webkit-details-marker{ display:none; }
details.faq summary::after{
  content:'+'; color:var(--accento); font-size:1.7rem; line-height:1; flex:none;
  transition:transform .3s var(--ease);
}
details.faq[open] summary::after{ transform:rotate(45deg); }
details.faq .risposta{ margin-top:var(--sp-3); color:var(--testo-soft); max-width:72ch; }

/* -------------------------------------------------------------------------
   11. FASCIA DI CHIUSURA
   ------------------------------------------------------------------------- */
.fascia{
  background:
    radial-gradient(110% 80% at 15% 0%,#262C35 0%,transparent 60%),
    linear-gradient(160deg,#1A1F26 0%,#0E1115 100%);
  color:var(--calce); border-radius:var(--r-xl);
  padding:clamp(2rem,1.5rem + 3.5vw,4rem); text-align:center; position:relative; overflow:hidden;
}
.fascia::after{
  content:''; position:absolute; inset:0; opacity:.45; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px); background-size:24px 24px;
}
.fascia > *{ position:relative; z-index:1; }
.fascia h2{ color:var(--calce); }
.fascia p{ color:rgba(244,241,235,.75); max-width:54ch; margin-inline:auto; }
.fascia .cta-riga{ justify-content:center; margin-top:var(--sp-5); }
.fascia .btn--ghost{ color:var(--calce); border-color:rgba(244,241,235,.3); }
.fascia .btn--ghost:hover{ background:rgba(244,241,235,.1); border-color:var(--calce); }

/* -------------------------------------------------------------------------
   12. PIEDE
   ------------------------------------------------------------------------- */
.piede{ background:var(--bg-alt); border-top:1px solid var(--bordo); padding:var(--sp-7) 0 var(--sp-5); }
.piede__grid{ display:grid; gap:var(--sp-6); grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); }
.piede h4{ font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--testo-soft); margin-bottom:var(--sp-3); }
.piede ul{ list-style:none; padding:0; margin:0; display:grid; gap:.45rem; }
.piede a{ color:var(--testo); text-decoration:none; font-size:.94rem; }
.piede a:hover{ color:var(--accento); }
.piede__legale{
  margin-top:var(--sp-6); padding-top:var(--sp-4); border-top:1px solid var(--bordo);
  display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; justify-content:space-between;
  font-size:.8rem; color:var(--testo-soft);
}

/* -------------------------------------------------------------------------
   13. AZIONI FISSE MOBILE + PULSANTE WHATSAPP
   ------------------------------------------------------------------------- */
.wa-flottante{
  position:fixed; right:1rem; bottom:1.15rem; z-index:70;
  width:58px; height:58px; border-radius:50%; background:var(--verde-wa); color:#fff;
  display:grid; place-items:center; box-shadow:0 8px 28px rgba(31,168,85,.42);
  text-decoration:none; transition:transform .3s var(--ease), box-shadow .3s;
}
.wa-flottante:hover{ transform:scale(1.07); box-shadow:0 12px 34px rgba(31,168,85,.55); }
.wa-flottante svg{ width:30px; height:30px; }
.wa-flottante::before{
  content:''; position:absolute; inset:0; border-radius:50%; background:var(--verde-wa);
  animation:pulsa 2.8s var(--ease) infinite; z-index:-1;
}
@keyframes pulsa{
  0%{ transform:scale(1); opacity:.55; }
  70%{ transform:scale(1.55); opacity:0; }
  100%{ transform:scale(1.55); opacity:0; }
}

.azioni-mobile{
  position:fixed; left:0; right:0; bottom:0; z-index:65; display:none; gap:.6rem;
  padding:.65rem .9rem calc(.65rem + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--bg) 94%,transparent);
  border-top:1px solid var(--bordo); backdrop-filter:blur(12px);
}
.azioni-mobile .btn{ flex:1; min-height:50px; padding:.75rem .9rem; font-size:.95rem; }
@media (max-width:760px){
  .azioni-mobile{ display:flex; }
  body{ padding-bottom:5.2rem; }
  .wa-flottante{ bottom:5.6rem; width:52px; height:52px; }
  .wa-flottante svg{ width:27px; height:27px; }
}

/* -------------------------------------------------------------------------
   14. BIZCARD
   ------------------------------------------------------------------------- */
body.bizcard{ background:var(--inchiostro); padding-bottom:0; }
body.bizcard .azioni-mobile,body.bizcard .wa-flottante{ display:none; }
.bizcard__scena{
  min-height:100dvh; display:grid; place-items:start center;
  padding:clamp(1rem,3vw,3rem) 1rem calc(env(safe-area-inset-bottom) + 2rem);
}
.bizcard__card{
  width:min(460px,100%); background:var(--carta); color:var(--inchiostro);
  border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--ombra-3);
  animation:sali .7s var(--ease) both;
}

/* Sul telefono il biglietto riempie lo schermo.
   Con i margini attorno si vedeva una cornice nera su tutti i lati: sembrava
   una finestra aperta male, non un biglietto. Qui il fondo scompare e lo
   spazio si sposta dove serve davvero, cioè dentro. */
@media (max-width:560px){
  .bizcard__scena{ padding:0; place-items:stretch; }
  .bizcard__card{
    width:100%; min-height:100dvh; border-radius:0;
    box-shadow:none; animation:none;
    display:flex; flex-direction:column;
  }
  .bizcard__azioni{ padding:1.25rem 1.15rem .5rem; }
  .bizcard__blocco{ padding:1.15rem; }
  .bizcard__piede{ margin-top:auto; }
}
@keyframes sali{ from{ opacity:0; transform:translateY(26px) scale(.98); } }
.bizcard__testa{
  position:relative; padding:2.6rem 1.75rem 1.9rem; color:var(--calce); isolation:isolate;
  background:
    radial-gradient(120% 90% at 12% 0%,#262C35 0%,transparent 60%),
    linear-gradient(160deg,#1A1F26 0%,#0E1115 100%);
}
.bizcard__testa::after{
  content:''; position:absolute; inset:0; z-index:-1; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px); background-size:22px 22px;
}

/* Con la fotografia: sta sotto, sfumata, e il testo resta leggibile.
   Il velo non è decorazione — senza, il lettering bianco su una foto
   chiara sparisce. */
.bizcard__testa--foto{ padding-top:3.4rem; }
.bizcard__sfondo{ position:absolute; inset:0; z-index:-2; display:block; }
.bizcard__sfondo img{ width:100%; height:100%; object-fit:cover; object-position:60% 20%; }
.bizcard__testa--foto::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(105deg,
    rgba(14,17,21,.96) 0%, rgba(14,17,21,.88) 42%, rgba(14,17,21,.42) 100%);
}
.bizcard__testa-in{ position:relative; }
.bizcard__testa .logo__nome{ color:var(--calce); font-size:clamp(1.55rem,5.4vw,2rem); letter-spacing:.1em; }
.bizcard__testa .tricolore{ width:clamp(140px,52%,220px); margin-top:.7rem; }
.bizcard__ruolo{ margin:1.1rem 0 0; font-size:.78rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--rame-chiaro); }
.bizcard__luogo{ margin:.5rem 0 0; font-size:.95rem; color:rgba(244,241,235,.72); }
.bizcard__azioni{ padding:1.5rem 1.25rem .5rem; display:grid; gap:.7rem; }
.bizcard__due{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }

/* I pulsanti affiancati hanno metà larghezza: se il testo va a capo su tre
   righe il biglietto sembra rotto. Etichette corte, niente ritorno a capo
   e corpo leggermente ridotto — la leggibilità resta, l'ordine anche. */
.bizcard__due .btn{
  padding:.8rem .7rem; font-size:.94rem; gap:.45rem; white-space:nowrap;
}
.bizcard__due .btn .icona{ width:19px; height:19px; }
.bizcard__card .btn{ min-height:54px; }
.bizcard__azioni .btn--full{ font-size:1rem; }

@media (max-width:380px){
  .bizcard__due .btn{ font-size:.88rem; padding:.8rem .5rem; }
  .bizcard__azioni .btn--full{ font-size:.95rem; }
}
.bizcard__blocco{ padding:1.25rem; }
.bizcard__blocco + .bizcard__blocco{ border-top:1px solid rgba(20,23,28,.12); }
.bizcard__titolo{ font-size:.7rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--grafite); margin:0 0 .9rem; }
.bizcard__servizi{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; font-size:.94rem; }
.bizcard__servizi li{ display:flex; gap:.7rem; align-items:flex-start; line-height:1.45; }
.bizcard__pallino{ width:7px; height:7px; margin-top:.55rem; border-radius:50%; background:var(--rame); flex:none; }
.bizcard__prezzi{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.bizcard__prezzo{
  background:var(--calce-2); border-radius:var(--r-md); padding:.8rem .9rem 1rem;
  text-align:center; display:flex; flex-direction:column; align-items:center;
}
/* La riga "a partire da" c'è in tutte e due le colonne — nella prima è uno
   spazio unificatore. Senza, le due cifre partono da altezze diverse e il
   simbolo € risulta disallineato. */
.bizcard__prefisso{
  display:block; font-family:'Inter',sans-serif; font-size:.62rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--grafite);
  line-height:1.2; min-height:1.2em; margin-bottom:.3rem;
}
.bizcard__prezzo b{
  display:block; font-family:'Fraunces',serif; font-weight:700; font-size:1.65rem;
  color:var(--rame); line-height:1; letter-spacing:-.02em; white-space:nowrap;
}
.bizcard__prezzo > span:last-child{
  font-size:.74rem; color:var(--grafite); line-height:1.3; display:block; margin-top:.35rem;
}
.bizcard__comuni{ display:flex; flex-wrap:wrap; gap:.4rem; }
.bizcard__comuni span{ font-size:.79rem; padding:.3rem .68rem; border-radius:var(--r-full);
  background:var(--calce-2); color:var(--inchiostro-2); }
.bizcard__piede{
  padding:1.1rem 1.25rem calc(1.4rem + env(safe-area-inset-bottom)); background:var(--calce-2);
  font-size:.77rem; color:var(--grafite); display:flex; justify-content:space-between;
  align-items:center; gap:1rem; flex-wrap:wrap;
}
.bizcard__piede a{ color:var(--rame); text-decoration:none; font-weight:600; }
.bizcard__card .btn{ min-height:54px; }

/* toast */
/* L'avviso a comparsa deve essere una riga, non un blocco.
   Con la forma a capsula e un testo che va a capo diventava un ovale nero
   alto mezzo schermo: la capsula funziona solo finché il testo sta su una
   riga sola. Qui il raggio è normale, il corpo più piccolo e la larghezza
   limitata a una misura leggibile. */
.toast{
  position:fixed; left:50%; bottom:1.2rem; transform:translate(-50%,180%);
  background:var(--inchiostro); color:var(--calce);
  padding:.7rem 1.1rem; border-radius:var(--r-md);
  font-size:.86rem; line-height:1.4; text-align:center;
  box-shadow:var(--ombra-2); transition:transform .38s var(--ease);
  z-index:120; width:max-content; max-width:min(340px, calc(100% - 2.5rem));
}
.toast.on{ transform:translate(-50%,0); }
@media (prefers-color-scheme:dark){
  .toast{ background:var(--calce); color:var(--inchiostro); }
}

/* -------------------------------------------------------------------------
   15. GALLERIA LAVORI
   ------------------------------------------------------------------------- */
.lavori{ display:grid; gap:var(--sp-4); grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); }
.lavoro{ border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--bordo); background:var(--bg-elev); }
.lavoro img{ aspect-ratio:3/2; object-fit:cover; width:100%; transition:transform .5s var(--ease); }
.lavoro:hover img{ transform:scale(1.04); }
.lavoro__testo{ padding:1.1rem 1.2rem; }
.lavoro__testo h3{ font-size:1.1rem; margin-bottom:.25rem; }
.lavoro__testo p{ font-size:.88rem; color:var(--testo-soft); margin:0; }
.vuoto{
  padding:var(--sp-7) var(--sp-5); text-align:center; border:1px dashed var(--bordo);
  border-radius:var(--r-lg); color:var(--testo-soft);
}

/* -------------------------------------------------------------------------
   16. CONTENUTO EDITORIALE
   ------------------------------------------------------------------------- */
.prosa{ max-width:72ch; }
.prosa h2{ margin-top:var(--sp-7); }
.prosa h3{ margin-top:var(--sp-5); }
.prosa ul li{ margin-bottom:.4rem; }
.prosa blockquote{
  margin:var(--sp-5) 0; padding:1.2rem 1.5rem; border-left:3px solid var(--accento);
  background:var(--bg-elev); border-radius:0 var(--r-md) var(--r-md) 0; font-size:1.05rem;
}

/* briciole */
.briciole{ font-size:.84rem; color:var(--testo-soft); padding:1rem 0 0; }
.briciole a{ color:var(--testo-soft); text-decoration:none; }
.briciole a:hover{ color:var(--accento); }
.briciole span{ margin:0 .4rem; opacity:.5; }

/* -------------------------------------------------------------------------
   17. ACCESSIBILITÀ / MOVIMENTO
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important; }
}
@media print{
  .testata,.azioni-mobile,.wa-flottante,.fascia,.toast{ display:none !important; }
  body{ background:#fff; color:#000; }
}

/* -------------------------------------------------------------------------
   18. SIMBOLO DEI SERVIZI

   Nelle schede si usa l'icona disegnata, non la fotografia: otto foto una
   accanto all'altra fanno rumore e si somigliano tutte in miniatura, mentre
   il segno grafico si riconosce a colpo d'occhio ed è il tratto del tema.
   Le fotografie restano dove hanno spazio per essere guardate: la testata
   delle pagine servizio e la galleria dei lavori.
   ------------------------------------------------------------------------- */
.servizio__simbolo{
  position:relative; display:grid; place-items:center;
  width:70px; height:70px; margin-bottom:var(--sp-4); border-radius:20px;
  color:var(--accento); background:var(--accento-soft);
  transition:transform .35s var(--ease), background .35s, color .35s;
}
.servizio__simbolo::after{
  content:''; position:absolute; inset:0; border-radius:20px;
  border:1px solid color-mix(in srgb, var(--accento) 26%, transparent);
}
.servizio__simbolo .icona{ width:34px; height:34px; margin:0; stroke-width:1.6; }
.servizio:hover .servizio__simbolo{
  transform:translateY(-2px) rotate(-3deg); background:var(--accento); color:#fff;
}
/* Il bianco va messo sull'icona, non solo sul riquadro che la contiene.
   `.servizio .icona` le assegna un colore suo, e un colore assegnato batte
   sempre quello ereditato: senza questa riga, in hover l'icona resta rame
   su fondo rame e sparisce. E' lo stesso inciampo del pulsante Preventivo. */
.servizio:hover .servizio__simbolo .icona{ color:#fff; }

/* Le foto conservano il loro stile: servono ancora nelle testate e altrove. */
.media__img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }

/* -------------------------------------------------------------------------
   19. TESTATA IMMAGINE DELLE PAGINE SERVIZIO
   ------------------------------------------------------------------------- */
.servizio-hero{
  position:relative; border-radius:var(--r-xl); overflow:hidden;
  aspect-ratio:16/9; background:var(--inchiostro); box-shadow:var(--ombra-2);
}
@media (min-width:960px){ .servizio-hero{ aspect-ratio:4/3; } }
.servizio-hero .media__img{ width:100%; height:100%; object-fit:cover; }
.servizio-hero__targa{
  position:absolute; left:1rem; bottom:1rem; display:flex; align-items:center; gap:.6rem;
  padding:.55rem .95rem .55rem .6rem; border-radius:var(--r-full);
  background:color-mix(in srgb,var(--carta) 92%,transparent); color:var(--inchiostro);
  font-size:.85rem; font-weight:600; box-shadow:var(--ombra-1); backdrop-filter:blur(8px);
}
.servizio-hero__targa .icona{ width:20px; height:20px; color:var(--rame); }

/* Etichetta che distingue il disegno dalla foto vera: onestà verso chi guarda,
   e ci ricorda quali pagine hanno ancora bisogno delle foto di cantiere. */
.media__img--disegno + .servizio-hero__nota,
.servizio-hero__nota{
  position:absolute; right:1rem; top:1rem; padding:.3rem .7rem; border-radius:var(--r-full);
  background:rgba(20,23,28,.55); color:var(--calce); font-size:.7rem; letter-spacing:.08em;
  text-transform:uppercase; backdrop-filter:blur(6px);
}

/* -------------------------------------------------------------------------
   20. IL TITOLARE
   La sezione esiste solo se c'è una foto vera: senza, il sito non finge.
   ------------------------------------------------------------------------- */
.titolare{ display:grid; gap:clamp(1.5rem,1rem + 3vw,3rem); align-items:center; grid-template-columns:1fr; }
@media (min-width:860px){ .titolare{ grid-template-columns:.85fr 1.15fr; } }
.titolare__foto{
  position:relative; border-radius:var(--r-xl); overflow:hidden; aspect-ratio:4/5;
  box-shadow:var(--ombra-2); background:var(--bg-alt);
}
.titolare__foto img{ width:100%; height:100%; object-fit:cover; }
.titolare__foto::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:5px;
  background:linear-gradient(90deg,
    var(--tri-verde) 0 33.33%, var(--tri-bianco) 33.33% 66.66%, var(--tri-rosso) 66.66% 100%);
}
.titolare__firma{
  font-family:'Fraunces',serif; font-size:1.15rem; color:var(--accento); margin-top:var(--sp-4);
}

/* -------------------------------------------------------------------------
   21. CONSENSO AI COOKIE
   Riquadro in basso, non a tutto schermo: un banner che copre la pagina è
   il modo più sicuro per far premere "accetta" senza leggere, e un consenso
   dato così vale poco anche giuridicamente.
   ------------------------------------------------------------------------- */
.consenso{
  position:fixed; left:0; right:0; bottom:0; z-index:200;
  padding:1rem 1rem calc(1rem + env(safe-area-inset-bottom));
  display:flex; justify-content:center; pointer-events:none;
}
.consenso[hidden]{ display:none; }
.consenso__riquadro{
  pointer-events:auto; width:min(680px,100%);
  background:var(--bg-elev); border:1px solid var(--bordo);
  border-radius:var(--r-xl); box-shadow:var(--ombra-3);
  padding:clamp(1.2rem,1rem + 1.4vw,1.8rem);
  animation:consenso-entra .45s var(--ease) both;
  max-height:min(80vh,720px); overflow-y:auto;
}
@keyframes consenso-entra{ from{ opacity:0; transform:translateY(24px); } }

.consenso__testa h2{
  font-size:1.35rem; margin:0 0 .6rem;
}
.consenso__testa p{ font-size:.94rem; color:var(--testo-soft); margin:0 0 .6rem; }
.consenso__nota{ font-size:.86rem !important; }

.consenso__scelte{ display:grid; gap:.7rem; margin:1.1rem 0; }
.consenso__scelte[hidden]{ display:none; }
.consenso__voce{
  display:flex; gap:.8rem; align-items:flex-start; padding:.85rem 1rem;
  border:1px solid var(--bordo); border-radius:var(--r-md); background:var(--bg);
  cursor:pointer;
}
.consenso__voce input{ width:20px; height:20px; margin-top:.15rem; flex:none; accent-color:var(--accento); }
.consenso__voce input:disabled{ opacity:.55; cursor:not-allowed; }
.consenso__voce strong{ display:block; font-size:.96rem; }
.consenso__voce em{ font-style:normal; font-size:.74rem; color:var(--accento);
  text-transform:uppercase; letter-spacing:.1em; font-weight:700; }
.consenso__voce small{ display:block; margin-top:.25rem; font-size:.84rem;
  color:var(--testo-soft); line-height:1.45; }

.consenso__azioni{
  display:grid; gap:.6rem; margin-top:1.1rem;
  grid-template-columns:1fr;
}
@media (min-width:520px){
  .consenso__azioni{ grid-template-columns:1fr 1fr; }
  .consenso__personalizza{ grid-column:1 / -1; }
}
.consenso__azioni .btn{ min-height:50px; padding:.75rem 1.2rem; font-size:.95rem; width:100%; }

/* "Rifiuta tutti" ha la stessa forma e la stessa dimensione di "Accetta":
   cambia solo il colore di riempimento, non il richiamo visivo. Rendere il
   rifiuto meno evidente dell'accettazione è ciò che rende invalido un
   consenso — e con quel colore resta comunque ben leggibile. */
.btn--rifiuta,
.btn--rifiuta:hover,
.btn--rifiuta:focus{ color:var(--calce); }
.btn--rifiuta{ background:var(--inchiostro-2); box-shadow:var(--ombra-1); }
.btn--rifiuta:hover{ background:var(--inchiostro); }
.consenso__legale{ margin:.9rem 0 0; font-size:.82rem; color:var(--testo-soft); }
.consenso__legale a{ color:var(--accento); }

/* pulsante per riaprire le preferenze */
.consenso__richiama{
  position:fixed; left:1rem; bottom:1.15rem; z-index:64;
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.5rem .85rem; border-radius:var(--r-full); cursor:pointer;
  background:var(--bg-elev); color:var(--testo-soft);
  border:1px solid var(--bordo); box-shadow:var(--ombra-1);
  font-size:.78rem; font-family:inherit;
}
.consenso__richiama[hidden]{ display:none; }
.consenso__richiama:hover{ color:var(--accento); border-color:var(--accento); }
.consenso__richiama .icona{ width:14px; height:14px; }
@media (max-width:760px){ .consenso__richiama{ bottom:5.6rem; } }

/* -------------------------------------------------------------------------
   22. MAPPA CON COPERTINA
   L'iframe di Google installa cookie appena la pagina si apre. Con la
   copertina non parte nessuna richiesta finché non è l'utente a chiederlo.
   ------------------------------------------------------------------------- */
.mappa{ margin-top:var(--sp-4); }
.mappa__copertina{
  position:relative; width:100%; aspect-ratio:16/9; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.9rem; padding:1.5rem; text-align:center; font-family:inherit;
  border:1px dashed var(--bordo); border-radius:var(--r-lg);
  background:
    repeating-linear-gradient(45deg, transparent 0 14px, var(--accento-soft) 14px 15px),
    var(--bg-alt);
  color:var(--testo); transition:border-color .25s, background .25s;
}
.mappa__copertina:hover{ border-color:var(--accento); }
.mappa__pin{
  display:grid; place-items:center; width:56px; height:56px; border-radius:50%;
  background:var(--accento); color:#fff;
}
.mappa__pin .icona{ width:28px; height:28px; }
.mappa__testo strong{ display:block; font-size:1rem; }
.mappa__testo em{ font-style:normal; font-size:.86rem; color:var(--testo-soft); }
.mappa iframe{ width:100%; aspect-ratio:16/9; border:0; border-radius:var(--r-lg); display:block; }
.mappa__nota{ font-size:.78rem; color:var(--testo-soft); margin:.6rem 0 0; }


/* -------------------------------------------------------------------------
   23. BIZCARD — link, finestre e QR
   ------------------------------------------------------------------------- */
.bizcard__link{
  display:inline-flex; align-items:center; gap:.35rem; margin-top:.9rem;
  font-size:.84rem; font-weight:600; color:var(--rame); text-decoration:none;
}
.bizcard__link .icona{ width:15px; height:15px; transition:transform .3s var(--ease); }
.bizcard__link:hover .icona{ transform:translateX(3px); }
.bizcard__servizi li strong{ font-weight:600; }

/* --- finestre modali --- */
.finestra{
  position:fixed; inset:0; z-index:300; display:flex; align-items:flex-end;
  justify-content:center; padding:1rem;
  background:rgba(14,17,21,.72); backdrop-filter:blur(6px);
  animation:finestra-sfondo .3s var(--ease) both;
}
.finestra[hidden]{ display:none; }
@keyframes finestra-sfondo{ from{ opacity:0; } }
@media (min-width:640px){ .finestra{ align-items:center; } }

.finestra__riquadro{
  position:relative; width:min(460px,100%);
  max-height:calc(100dvh - 2rem); overflow-y:auto;
  background:var(--carta); color:var(--inchiostro);
  border-radius:var(--r-xl); padding:1.6rem 1.4rem calc(1.6rem + env(safe-area-inset-bottom));
  box-shadow:var(--ombra-3);
  animation:finestra-entra .38s var(--ease) both;
}
@keyframes finestra-entra{ from{ opacity:0; transform:translateY(30px); } }
.finestra__riquadro--qr{ text-align:center; }

.finestra__chiudi{
  position:absolute; top:.8rem; right:.8rem; width:38px; height:38px;
  display:grid; place-items:center; border:0; border-radius:50%;
  background:var(--calce-2); color:var(--grafite);
  font-size:1.6rem; line-height:1; cursor:pointer; font-family:inherit;
}
.finestra__chiudi:hover{ background:var(--rame); color:#fff; }

.finestra .campo label{ color:var(--inchiostro); }
.finestra .campo input,.finestra .campo select,.finestra .campo textarea{
  background:var(--carta); color:var(--inchiostro); border-color:rgba(20,23,28,.16);
}
.finestra .occhiello{ color:var(--rame); }
.finestra .soft{ color:var(--grafite); }
.finestra .campo__aiuto{ color:var(--grafite); }

/* --- QR --- */
.qr-riquadro{
  display:inline-block; padding:1rem; border-radius:var(--r-lg);
  background:#fff; box-shadow:var(--ombra-1);
}
.qr-riquadro img{ width:min(300px,64vw); height:auto; display:block; }

/* -------------------------------------------------------------------------
   24. PRIMO PIANO — il servizio di punta
   ------------------------------------------------------------------------- */
.primopiano{
  display:grid; gap:clamp(1.5rem,1rem + 3vw,3rem); align-items:center;
  grid-template-columns:1fr;
  padding:clamp(1.5rem,1rem + 2.5vw,2.6rem);
  border:1px solid var(--bordo); border-radius:var(--r-xl);
  background:
    radial-gradient(70% 100% at 100% 0%, var(--accento-soft) 0%, transparent 70%),
    var(--bg-elev);
  box-shadow:var(--ombra-1);
}
@media (min-width:900px){ .primopiano{ grid-template-columns:1.05fr .95fr; } }

.primopiano__testo h2{ margin-bottom:var(--sp-4); }
.primopiano__voci{ margin-top:var(--sp-5); }
.primopiano__voci li{ align-items:center; }
.primopiano__voci a{ text-decoration:none; color:var(--testo); }
.primopiano__voci a:hover strong{ color:var(--accento); }
.primopiano__voci strong{ font-weight:600; transition:color .2s; }

.primopiano__media{
  position:relative; margin:0; border-radius:var(--r-lg); overflow:hidden;
  aspect-ratio:4/3; background:var(--inchiostro); box-shadow:var(--ombra-2);
}
.primopiano__media .media__img{ width:100%; height:100%; object-fit:cover; }
.primopiano__targa{
  position:absolute; left:.9rem; bottom:.9rem; display:flex; align-items:center; gap:.5rem;
  padding:.5rem .9rem; border-radius:var(--r-full); font-size:.82rem; font-weight:600;
  background:color-mix(in srgb, var(--carta) 92%, transparent); color:var(--inchiostro);
  backdrop-filter:blur(8px); box-shadow:var(--ombra-1);
}
.primopiano__targa .icona{ width:18px; height:18px; color:var(--rame); }

/* -------------------------------------------------------------------------
   25. ISTRUZIONI PER IPHONE
   ------------------------------------------------------------------------- */
.passi-ios{ list-style:none; margin:0; padding:0; display:grid; gap:1rem; counter-reset:ios; }
.passi-ios li{
  display:flex; gap:.9rem; align-items:flex-start;
  padding:.9rem 1rem; border:1px solid rgba(20,23,28,.12); border-radius:var(--r-md);
  background:var(--calce); counter-increment:ios;
}
.passi-ios__icona{
  position:relative; flex:none; display:grid; place-items:center;
  width:44px; height:44px; border-radius:12px;
  background:var(--carta); color:#0A84FF;              /* il blu di iOS */
  border:1px solid rgba(20,23,28,.1);
}
.passi-ios__icona--fatto{ color:var(--tri-verde); }
.passi-ios__icona svg{ width:24px; height:24px; }
.passi-ios__icona::after{
  content:counter(ios); position:absolute; top:-7px; left:-7px;
  width:20px; height:20px; border-radius:50%; display:grid; place-items:center;
  background:var(--rame); color:#fff; font-size:.68rem; font-weight:700;
  font-family:'Inter',sans-serif;
}
.passi-ios strong{ display:block; font-size:.95rem; color:var(--inchiostro); }
.passi-ios small{ display:block; margin-top:.15rem; font-size:.82rem; color:var(--grafite); line-height:1.45; }

/* -------------------------------------------------------------------------
   26. MOSAICO DELL'HERO
   Tre fotografie invece di una: l'impresa fa mestieri diversi e una foto
   sola ne avrebbe raccontato uno. La grande è l'idraulica, che è il lavoro
   più cercato; le due piccole dicono che si fa anche il resto.
   ------------------------------------------------------------------------- */
.mosaico{
  display:grid; gap:.7rem;
  grid-template-columns:1fr 1fr;
  grid-template-rows:repeat(2, minmax(0,1fr));
}
.mosaico__voce{
  position:relative; display:block; overflow:hidden;
  border-radius:var(--r-lg); background:var(--inchiostro);
  box-shadow:var(--ombra-1); text-decoration:none;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  aspect-ratio:1;
}
.mosaico__grande{ grid-row:span 2; aspect-ratio:auto; }
.mosaico__voce:hover{ transform:translateY(-3px); box-shadow:var(--ombra-2); }
.mosaico__voce picture{ display:block; width:100%; height:100%; }
.mosaico__voce img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.mosaico__voce:hover img{ transform:scale(1.05); }

/* Il velo parte dal basso: senza, l'etichetta bianca su una foto chiara
   non si legge, e con un velo pieno si perderebbe la fotografia. */
.mosaico__voce::after{
  content:''; position:absolute; inset:auto 0 0; height:62%;
  background:linear-gradient(to top, rgba(14,17,21,.85) 0%, rgba(14,17,21,0) 100%);
  pointer-events:none;
}
.mosaico__etichetta{
  position:absolute; left:.85rem; right:.85rem; bottom:.75rem; z-index:1;
  color:var(--calce); font-size:.86rem; font-weight:600; line-height:1.25;
}
.mosaico__grande .mosaico__etichetta{ font-size:1rem; left:1.1rem; bottom:1rem; }

@media (max-width:620px){
  .mosaico{ gap:.5rem; }
  .mosaico__etichetta{ font-size:.76rem; }
  .mosaico__grande .mosaico__etichetta{ font-size:.9rem; }
}

/* -------------------------------------------------------------------------
   27. FASCIA PREZZI
   ------------------------------------------------------------------------- */
.listino{
  display:grid; gap:clamp(1.2rem,1rem + 1.5vw,2rem); align-items:center;
  grid-template-columns:1fr;
  padding:clamp(1.4rem,1rem + 2vw,2.2rem);
  border:1px solid var(--bordo); border-radius:var(--r-xl);
  background:
    radial-gradient(60% 120% at 0% 0%, var(--accento-soft) 0%, transparent 70%),
    var(--bg-elev);
  box-shadow:var(--ombra-1);
}
@media (min-width:760px){
  .listino{ grid-template-columns:1fr 1fr; }
}
@media (min-width:1100px){
  .listino{ grid-template-columns:1.1fr 1fr 1fr .9fr; }
}
.listino__voce{ display:flex; align-items:center; gap:1rem; }
.listino__voce .prezzo-cifra{ width:6.6rem; }
.listino__voce h4{ margin:0 0 .15rem; }
.listino__voce p{ margin:0; font-size:.86rem; color:var(--testo-soft); line-height:1.45; }

/* Sui telefoni le voci si separano con una riga: incollate si leggerebbero
   come un blocco unico. */
@media (max-width:759px){
  .listino__voce{ padding-top:1rem; border-top:1px solid var(--bordo); }
  .listino__azione{ padding-top:.4rem; }
}

/* -------------------------------------------------------------------------
   28. FOTOGRAFIA A FASCIA
   Una foto larga che spezza una sequenza di testo: serve a far respirare
   la pagina, non a dire qualcosa di nuovo.
   ------------------------------------------------------------------------- */
.fascia-foto{
  margin:0 0 var(--sp-6); border-radius:var(--r-xl); overflow:hidden;
  position:relative; box-shadow:var(--ombra-1); background:var(--inchiostro);
}
.fascia-foto img{ width:100%; height:auto; aspect-ratio:16/7; object-fit:cover; }
.fascia-foto figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:2.5rem 1.4rem .9rem; color:var(--calce); font-size:.88rem;
  background:linear-gradient(to top, rgba(14,17,21,.8) 0%, rgba(14,17,21,0) 100%);
}
@media (max-width:620px){
  .fascia-foto img{ aspect-ratio:16/10; }
  .fascia-foto figcaption{ font-size:.8rem; }
}

/* -------------------------------------------------------------------------
   20. GUIDA FAI DA TE
   Una guida si legge con le mani sporche e il telefono appoggiato al
   lavandino: testo grande, passi staccati, avvertenze impossibili da saltare.
   ------------------------------------------------------------------------- */

/* scheda con schede cliccabili (indice della sezione) */
.card--link{
  display:flex; flex-direction:column; gap:.45rem;
  text-decoration:none; color:inherit; overflow:hidden;
  transition:transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.card--link:hover{ transform:translateY(-4px); border-color:var(--accento); box-shadow:var(--ombra-2); }
.card--link h3{ margin:.2rem 0 0; font-size:1.06rem; line-height:1.3; }
.card--link p{ margin:0; font-size:.93rem; color:var(--testo-soft); }
.card__foto{
  margin:calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) var(--sp-3);
  border-radius:var(--r-lg) var(--r-lg) 0 0; overflow:hidden;
}
.card__foto img{ width:100%; aspect-ratio:16/10; object-fit:cover; }

/* testata dell'articolo */
.guida-testata{
  margin:var(--sp-5) 0 var(--sp-6); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--ombra-1);
}
.guida-testata img{ width:100%; aspect-ratio:16/10; object-fit:cover; }

.guida-apertura{
  font-size:1.12rem; line-height:1.6; color:var(--testo);
  border-left:3px solid var(--accento); padding-left:var(--sp-4); margin:0 0 var(--sp-5);
}

/* tempo · difficoltà · spesa */
.scheda-guida{
  display:grid; gap:var(--sp-2); margin:var(--sp-5) 0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));
}
.scheda-guida > div{
  background:var(--bg-alt); border:1px solid var(--bordo); border-radius:var(--r-md);
  padding:var(--sp-3) var(--sp-4);
}
.scheda-guida span{
  display:block; font-size:.74rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--testo-soft); margin-bottom:.15rem;
}
.scheda-guida strong{ font-size:1.02rem; }

/* i passi */
.passi-guida{ list-style:none; counter-reset:g; margin:var(--sp-5) 0; padding:0; }
.passi-guida > li{
  counter-increment:g; position:relative;
  padding:0 0 var(--sp-6) calc(var(--sp-6) + var(--sp-3));
  border-left:2px solid var(--bordo); margin-left:1.1rem;
}
.passi-guida > li:last-child{ border-left-color:transparent; padding-bottom:0; }
.passi-guida > li::before{
  content:counter(g); position:absolute; left:calc(-1.1rem - 1px); top:-.15rem;
  width:2.2rem; height:2.2rem; border-radius:var(--r-full);
  background:var(--accento); color:#fff;
  display:grid; place-items:center;
  font-family:'Fraunces',Georgia,serif; font-size:1.02rem; font-weight:700;
}
.passi-guida > li h3{ margin:.1rem 0 .4rem; font-size:1.1rem; }
.passi-guida > li p{ margin:0 0 .7rem; }

/* avvertenze */
.riquadro{
  border-radius:var(--r-lg); padding:var(--sp-5);
  margin:var(--sp-6) 0; border:1px solid var(--bordo);
}
.riquadro h2{ margin:0 0 .5rem; font-size:1.12rem; }
.riquadro p:last-child{ margin-bottom:0; }
.riquadro--subito{
  background:var(--accento-soft);
  border-color:color-mix(in srgb,var(--accento) 32%,transparent);
}
.riquadro--stop{
  background:color-mix(in srgb,var(--tri-rosso) 7%,var(--bg-elev));
  border-color:color-mix(in srgb,var(--tri-rosso) 28%,transparent);
}

/* domande frequenti */
.faq{ display:grid; gap:var(--sp-2); margin:var(--sp-4) 0 var(--sp-6); }
.faq details{
  background:var(--bg-elev); border:1px solid var(--bordo);
  border-radius:var(--r-md); padding:var(--sp-3) var(--sp-4);
}
.faq summary{
  cursor:pointer; font-weight:600; list-style:none;
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:'+'; font-size:1.35rem; line-height:1; color:var(--accento);
  transition:transform .25s var(--ease);
}
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details > div{ padding-top:var(--sp-2); color:var(--testo-soft); }
.faq details > div p:last-child{ margin-bottom:0; }

@media (max-width:620px){
  .passi-guida > li{ padding-left:calc(var(--sp-5) + var(--sp-3)); }
  .guida-apertura{ font-size:1.05rem; }
}

/* Immagine dentro un passaggio: staccata dal testo ma legata al suo numero,
   con la didascalia che dice cosa guardare. */
.passo-figura{
  margin:1rem 0 .2rem; border-radius:var(--r-md); overflow:hidden;
  border:1px solid var(--bordo); background:var(--bg-alt);
}
.passo-figura img{ width:100%; aspect-ratio:16/10; object-fit:cover; display:block; }
.passo-figura figcaption{
  padding:.6rem .9rem; font-size:.86rem; color:var(--testo-soft);
  border-top:1px solid var(--bordo); background:var(--bg-elev);
}

/* Firma dello studio: presente, non invadente. */
.firma{
  margin-top:.9rem; padding-top:.9rem; border-top:1px solid var(--bordo);
  font-size:.82rem; color:var(--testo-soft);
}
.firma a{ color:var(--testo-soft); text-decoration:none; border-bottom:1px solid var(--bordo); }
.firma a:hover{ color:var(--accento); border-bottom-color:var(--accento); }

/* -------------------------------------------------------------------------
   21. GALLERIA DEI CANTIERI E VIDEO
   Fotografie vere: la prima grande, le altre a griglia. La didascalia dice
   cosa si sta guardando, perche' uno scavo senza spiegazione e' solo terra.
   ------------------------------------------------------------------------- */
.galleria{
  display:grid; gap:var(--sp-4);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
}
.galleria__voce{
  margin:0; background:var(--bg-elev); border:1px solid var(--bordo);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--ombra-1);
}
.galleria__voce--grande{ grid-column:1 / -1; }
.galleria__img{ width:100%; aspect-ratio:16/10; object-fit:cover; display:block; }
.galleria__voce--grande .galleria__img{ aspect-ratio:16/9; }
.galleria__voce figcaption{
  padding:.75rem 1rem; font-size:.88rem; color:var(--testo-soft);
  border-top:1px solid var(--bordo);
}

.video-cantiere{ margin:0; }
.video-cantiere video{
  width:100%; height:auto; display:block; background:var(--inchiostro);
  border-radius:var(--r-lg); border:1px solid var(--bordo);
}
.video-cantiere figcaption{
  margin-top:.7rem; font-size:.88rem; color:var(--testo-soft);
}

@media (max-width:620px){
  .galleria__voce--grande .galleria__img{ aspect-ratio:16/10; }
}

/* -------------------------------------------------------------------------
   22. LE DUE SCHEDE DEI PREZZI
   Sono la pagina che decide se chiamare: la cifra deve leggersi da lontano
   e il resto deve starle attorno senza rubarle spazio.

   Nota sul difetto che c'era prima: le icone erano stampate nude dentro la
   scheda e nessuna regola dava loro una misura. Un SVG senza larghezza si
   prende tutto lo spazio che trova, ed erano diventate alte quanto la
   scheda. Qui la misura e' scritta, e in fondo al foglio c'e' anche una
   rete di sicurezza per qualunque icona sfuggisse altrove.
   ------------------------------------------------------------------------- */
.listino-prezzi{
  display:grid; gap:var(--sp-5);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));
  /* stretch e non start: due schede di altezza diversa accanto sembrano
     un errore di impaginazione, e l'elenco puntato spinto in basso da
     margin-top:auto le pareggia senza spazi vuoti evidenti. */
  align-items:stretch;
}
.prezzo-card{
  position:relative; display:flex; flex-direction:column;
  background:var(--bg-elev); border:1px solid var(--bordo);
  border-radius:var(--r-xl); padding:var(--sp-6) var(--sp-5) var(--sp-5);
  box-shadow:var(--ombra-1);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.prezzo-card:hover{ transform:translateY(-3px); box-shadow:var(--ombra-2); }

/* La prima scheda e' quella da cui si comincia sempre: si distingue senza
   gridare, con un filo di rame in alto e il fondo appena piu' caldo. */
.prezzo-card--primo{
  border-color:color-mix(in srgb,var(--accento) 40%,var(--bordo));
  background:linear-gradient(180deg,var(--accento-soft) 0%,var(--bg-elev) 38%);
}
.prezzo-card--primo::before{
  content:''; position:absolute; left:var(--sp-5); right:var(--sp-5); top:0; height:3px;
  background:var(--accento); border-radius:0 0 3px 3px;
}
.prezzo-card__nastro{
  position:absolute; top:-.7rem; left:var(--sp-5);
  background:var(--accento); color:#fff; border-radius:var(--r-full);
  padding:.28rem .8rem; font-size:.72rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase;
}

.prezzo-card__simbolo{
  display:grid; place-items:center; width:64px; height:64px;
  border-radius:18px; background:var(--accento-soft); color:var(--accento);
  margin-bottom:var(--sp-4);
  border:1px solid color-mix(in srgb,var(--accento) 24%,transparent);
}
.prezzo-card__simbolo .icona{ width:30px; height:30px; stroke-width:1.7; }

.prezzo-card__cifra{
  margin:0 0 .2rem; font-family:'Fraunces',Georgia,serif; font-weight:700;
  font-size:clamp(2.6rem,2.1rem + 2.2vw,3.6rem); line-height:1;
  color:var(--accento); letter-spacing:-.03em;
}
.prezzo-card__prefisso{
  display:block; font-family:'Inter',sans-serif; font-size:.7rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--testo-soft);
  margin-bottom:.4rem; line-height:1;
}
.prezzo-card__titolo{ margin:.35rem 0 .4rem; font-size:1.25rem; }
.prezzo-card__nota{ margin:0; color:var(--testo-soft); font-size:.95rem; }
.prezzo-card__elenco{ margin-top:auto; padding-top:var(--sp-5); }
.prezzo-card__elenco li{ font-size:.95rem; }

/* Rete di sicurezza: un'icona senza misura si espande a tutto il contenitore.
   E' il difetto che aveva reso enormi quelle dei prezzi.

   Va dentro :where() apposta: cosi' la regola pesa zero e qualunque altra
   la sovrascrive senza discutere. Scritta in modo normale, stando in fondo
   al foglio, avrebbe rimpicciolito a 24px tutte le icone del sito. */
:where(svg.icona){ width:24px; height:24px; }

@media (max-width:620px){
  .prezzo-card{ padding:var(--sp-5) var(--sp-4) var(--sp-4); }
  .prezzo-card__simbolo{ width:56px; height:56px; }
}

/* -------------------------------------------------------------------------
   23. CHI SIAMO
   I numeri in fila e il ritratto accanto al testo: un committente deve
   capire in pochi secondi che c'e' un'impresa dietro, non una persona sola.
   ------------------------------------------------------------------------- */
.numeri{
  display:grid; gap:var(--sp-4);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
}
.numeri__voce{
  background:var(--bg-elev); border:1px solid var(--bordo);
  border-radius:var(--r-lg); padding:var(--sp-5) var(--sp-4);
  box-shadow:var(--ombra-1);
}
.numeri__voce strong{
  display:block; font-family:'Fraunces',Georgia,serif; font-weight:700;
  font-size:clamp(2.2rem,1.8rem + 1.6vw,2.9rem); line-height:1;
  color:var(--accento); letter-spacing:-.03em; margin-bottom:.5rem;
}
.numeri__voce span{ font-size:.93rem; color:var(--testo-soft); line-height:1.5; }

.ritratto{
  display:grid; gap:var(--sp-6);
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  align-items:start;
}
.ritratto__foto{
  margin:0; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--bordo); box-shadow:var(--ombra-2);
}
.ritratto__foto img{ width:100%; height:auto; display:block; aspect-ratio:3/4; object-fit:cover; }
.ritratto__testo h2{ margin-top:.3rem; }

@media (max-width:820px){
  .ritratto{ grid-template-columns:1fr; gap:var(--sp-5); }
  .ritratto__foto{ max-width:340px; }
}

/* Il <picture> e' inline per impostazione predefinita: senza questo, dentro
   una cornice con overflow nascosto lascia una riga di sfondo sotto la foto. */
.ritratto__foto picture{ display:block; }

/* -------------------------------------------------------------------------
   24. I TRE MESTIERI
   Fotografia sopra, testo sotto. La prima riga della pagina "Chi siamo" che
   un committente guarda davvero: deve far capire in un colpo d'occhio che
   l'impresa scava, costruisce e fa impianti, non solo l'ultima delle tre.
   ------------------------------------------------------------------------- */
.mestieri{
  display:grid; gap:var(--sp-5);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
}
.mestiere{
  display:flex; flex-direction:column;
  background:var(--bg-elev); border:1px solid var(--bordo);
  border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--ombra-1);
  transition:transform .25s ease, box-shadow .25s ease;
}
.mestiere:hover{ transform:translateY(-3px); box-shadow:var(--ombra-2); }
.mestiere__foto{ margin:0; }
.mestiere__foto picture{ display:block; }
.mestiere__img{
  display:block; width:100%; height:auto;
  aspect-ratio:16/10; object-fit:cover;
}
.mestiere__testo{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:.5rem; padding:var(--sp-5) var(--sp-4) var(--sp-4);
  flex:1 1 auto;
}
.mestiere__testo h3{ margin:0; font-size:1.15rem; }
.mestiere__testo .occhiello{ margin:0; }
/* Il link va in fondo alla scheda anche quando i testi hanno lunghezze
   diverse: tre frecce sfalsate su una riga si notano subito. */
.mestiere__testo .link-freccia{ margin-top:auto; padding-top:.6rem; }

.link-freccia{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:600; font-size:.95rem; text-decoration:none;
  color:var(--accento);
}
.link-freccia .icona{ width:18px; height:18px; transition:transform .2s ease; }
.link-freccia:hover{ text-decoration:underline; }
.link-freccia:hover .icona{ transform:translateX(3px); }