/* ==========================================================================
   9/11 · Rifinitura finale (skill impeccable, comando «polish»). Solo allineamenti, spazi e coerenza:
   niente cambia nei testi, nei colori, nel modulo o nei comportamenti.
   Per tornare indietro: togliere la riga di polish.css in index.html (e la freccia SVG del pulsante d'invio, vedi index.html).
   ========================================================================== */

/* 1. Testi: niente parola sola sull'ultima riga dei paragrafi (es. «…te la chiediamo / noi.») */
p,figcaption,li,summary{text-wrap:pretty}

/* 2. Chiusura: video MaKè e «ACCENDILA» al centro anche su tablet, in asse con titolo, frase e pulsante
      (prima, fra 600 e 899 px, stavano a sinistra mentre il resto era al centro) */
.final-in>.final-vid,.final-in>.final-led-v{justify-self:center}

@media (min-width:900px){
  /* 3. Stessa colonna per tutte le sezioni (1120 px, testo da 175 a 1255 px a 1440):
        «Chi siamo» andava da bordo a bordo, «Domande frequenti» era rientrata di 30 px */
  .final-about{max-width:1120px}
  .fears .wrap{max-width:1120px}

  /* 4. Chiusura: il titolo grande non attraversa più tutto lo schermo (era 1290 px su una riga), va su due righe */
  .final-in>h2{max-width:780px}

  /* 5. Modulo: più aria fra il titolo grande e «Due cose, entrambe gratis:» (era 8 px sotto un titolo di 61 px) */
  .ask-head h2{margin-bottom:10px}

  /* 6. Piè di pagina: le tre righe di testo a passo regolare (erano a 50 px l'una dall'altra perché la riga
        si allungava sull'altezza dei link Privacy/Telefono, 44 px per il tocco) */
  footer .wrap>span:not(.f-logo){grid-column:2}
  .f-logo{grid-row:1/5}
  footer nav{grid-row:1/3}
  .f-tel{grid-row:3/5}
}

/* 7. Pulsante d'invio: freccia disegnata come nelle leve «Ricevi il tuo render» (prima era il carattere «→») */
#send svg.arrow{flex:none;width:1.15em;height:1.15em}

/* 8. «Gratis · Entro 24 ore · Nessun impegno» sotto l'invio: spunta disegnata al posto del carattere «✓» */
.micro span::before{content:"";display:inline-block;width:.85em;height:.85em;margin-right:.4em;vertical-align:-.08em;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l3.5 3.5 7.5-8' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l3.5 3.5 7.5-8' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}

/* 9. 9/11 · «I nostri prodotti» è il titolo della sezione (tolti «Insegne vere…» e il sottotitolo, richiesta di Nicolò).
      Stessa grandezza dei titoli di sezione; la spia davanti si accende quando la sezione arriva sullo schermo. */
.pr-head{display:block}
.pr-head h2.pr-titolo{display:block;max-width:none;margin:0;font-size:clamp(2.1rem,9.2vw,3.8rem);line-height:1;letter-spacing:-.03em}
/* niente flex: moto.js mette ogni parola in uno <span> dentro il titolo e il gap allargherebbe gli spazi fra le parole */
.pr-titolo::before{content:"";display:inline-block;width:.3em;height:.3em;margin:0 .35em 0 0;vertical-align:.12em;border-radius:50%;background:#3A3A3C;transition:background-color .5s ease,box-shadow .5s ease}
.pr.q-lit .pr-titolo::before{background:#FFD24A;box-shadow:0 0 12px 2px rgba(255,210,74,.7)}

@media (prefers-reduced-motion:reduce){.pr-titolo::before{transition:none}}

/* 10. 9/11 · Chiusura: «Preferisci parlarne? Chiamaci al …» con la stessa sagoma della leva «Ricevi il tuo render»
       (richiesta di Nicolò): stessa larghezza (fino a 440 px), stessa altezza (58 px da telefono, 76 da computer), pillola,
       icona del telefono al posto della lampadina e testo al centro su due righe. Resta scura col filo sottile:
       è la seconda scelta, la leva bianca resta la prima. */
.final .alt-call{position:relative;justify-self:center;display:flex;justify-content:center;align-items:center;gap:0;
  width:100%;max-width:440px;min-height:76px;margin-top:2px;padding:8px 76px;border-radius:999px;text-align:center;
  transition:transform .18s var(--ease-out),border-color .2s ease}
.final .alt-call .ac-ico{position:absolute;left:11px;top:50%;width:52px;height:52px;margin-top:-26px}
.final .alt-call .ac-ico svg{width:22px;height:22px}
.final .alt-call .ac-t{display:block;line-height:1.3;text-align:center}
.final .alt-call .ac-t>span{display:inline;font-size:.92rem}
.final .alt-call .ac-t>span:first-child{display:block;font-size:.98rem;color:#FFFFFF;font-weight:700}
.final .alt-call .ac-t>b{display:inline;font-size:.98rem}
.final .alt-call:active{transform:scale(.985);transition-duration:.1s}
.final .alt-call:focus-visible{outline:3px solid #FFFFFF;outline-offset:4px}
@media (max-width:899px){
  .final .alt-call{min-height:58px;padding:6px 58px}
  .final .alt-call .ac-ico{left:8px;width:40px;height:40px;margin-top:-20px}
  .final .alt-call .ac-ico svg{width:18px;height:18px}
  .final .alt-call .ac-t>span:first-child,.final .alt-call .ac-t>b{font-size:.95rem}
  .final .alt-call .ac-t>span{font-size:.88rem}
}
@media (max-width:345px){
  .final .alt-call{padding:6px 48px}
  .final .alt-call .ac-ico{width:36px;height:36px;margin-top:-18px}
}
@media (prefers-reduced-motion:reduce){.final .alt-call{transition:none}}

/* 11. 9/11 · Conversione (richiesta di Nicolò: «massimizza la conversione dei lead»).
   a) La leva da telefono porta alla scheda del modulo (main.js, formTarget): un filo d'aria sopra la scheda.
   b) Riquadro della foto da telefono: una riga compatta (icona a sinistra, testo a destra) invece di un quadrato
      alto 190 px; il modulo si accorcia e il passo 2 sale nello schermo. Da computer resta com'era. */
.ask .card{scroll-margin-top:12px}
@media (max-width:899px){
  .drop{grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;justify-items:start;align-items:center;column-gap:14px;row-gap:2px;
    padding:14px 14px 14px 12px;text-align:left}
  .drop-ico{grid-row:1/3;width:52px;height:52px;margin:0}
  .drop-ico svg{width:24px;height:24px}
  .drop b{font-size:1.02rem;line-height:1.25}
  .drop span:last-child{font-size:.88rem;line-height:1.35}
}

/* 12. 9/11 · Barra in basso con «Vedi il tuo locale acceso» (circa 25 px più lungo di «Ricevi il render gratis»):
       lampadina e carattere un filo più piccoli, sempre su una riga (prima a 390 px andava a capo, a 320-360 veniva tagliato). */
@media (max-width:899px){
  .dock .btn{padding:6px 14px 6px 60px;font-size:16px;white-space:nowrap}
  .dock .btn::before{left:8px;top:9px;width:42px;height:42px}
}
@media (max-width:389px){
  .dock .btn{padding:6px 10px 6px 54px;font-size:14.5px}
  .dock .btn::before{left:8px;top:11px;width:38px;height:38px}
}
@media (max-width:345px){
  .dock .btn{padding:6px 8px 6px 50px;font-size:13px}
  .dock .btn::before{left:8px;top:12px;width:34px;height:34px}
}