/* tappetino.css - foglio principale */
:root{
  --crema:#fbf8f3;
  --sabbia:#f3ede3;
  --cuoio:#5b442d;
  --nero:#000;
  --grafite:#272727;
  --grigio:#6f6a63;
  --filo:#d9d1c4;
  --display:"Rozha One",Georgia,serif;
  --corsivo:"Lora",Georgia,serif;
  --testo:"Lato",Helvetica,Arial,sans-serif;
}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--testo);font-weight:300;font-size:16px;line-height:1.5;color:var(--nero);background:#fff}
*{box-sizing:border-box}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.05;margin:0}
p{margin:0 0 14px}
:focus-visible{outline:2px solid var(--cuoio);outline-offset:3px}

.contenitore{width:980px;max-width:calc(100% - 40px);margin:0 auto}

/* pulsanti come nel modello: bordo nero, angoli tondi */
.btn-filo{display:inline-block;border:1px solid var(--nero);border-radius:24px;padding:9px 20px;font:400 15px/1 var(--testo);color:var(--nero);background:transparent;text-decoration:none;cursor:pointer}
.btn-filo:hover{background:var(--nero);color:#fff}
.btn-filo--chiaro{border-color:#fff;color:#fff}
.btn-filo--chiaro:hover{background:#fff;color:var(--nero)}
.btn-pieno{display:inline-block;background:#fff;color:var(--nero);border-radius:24px;padding:10px 20px;font:400 15px/1 var(--testo);text-decoration:none;border:0}

/* testata sopra la foto */
#testata{position:absolute;top:0;left:0;right:0;z-index:20;color:#fff}
#testata .riga-su{display:flex;align-items:center;justify-content:space-between;padding:14px 24px 6px}
#testata .tel-pill{background:#fff;color:var(--nero);border-radius:24px;padding:8px 16px;font-size:14px;font-weight:400;text-decoration:none}
#testata .marchio img{height:46px;width:auto}
#testata .borsa{display:flex;align-items:center;gap:8px;color:#fff;text-decoration:none;font-size:14px;font-weight:400}
#testata .borsa svg{width:24px;height:24px}
#testata .borsa b{background:#fff;color:var(--nero);border-radius:50%;min-width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;font-size:12px}
#testata nav{border-bottom:1px solid rgba(255,255,255,.4)}
#testata nav ul{list-style:none;margin:0;padding:6px 0 12px;display:flex;justify-content:center;gap:4px 26px;flex-wrap:wrap}
#testata nav a{color:#fff;text-decoration:none;font-size:15px}
#testata nav a:hover{text-decoration:underline;text-underline-offset:4px}
.apri-menu{display:none;background:none;border:1px solid #fff;color:#fff;border-radius:20px;padding:6px 14px;font:400 14px var(--testo);cursor:pointer}

/* testata sulle pagine interne, su fondo crema */
.testata-chiara #testata{position:relative;color:var(--nero);background:var(--crema)}
.testata-chiara #testata .tel-pill{background:var(--nero);color:#fff}
.testata-chiara #testata .marchio img{filter:none}
.testata-chiara #testata .borsa{color:var(--nero)}
.testata-chiara #testata .borsa b{background:var(--nero);color:#fff}
.testata-chiara #testata nav{border-color:var(--filo)}
.testata-chiara #testata nav a{color:var(--nero)}
.testata-chiara .apri-menu{border-color:var(--nero);color:var(--nero)}

/* foto grande */
.apertura{position:relative;height:700px;min-height:520px;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;overflow:hidden;background:#3a3027}
.apertura>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.62)}
.apertura .frase{position:relative;max-width:660px;padding:0 20px;font:400 24px/1.42 var(--corsivo)}
.apertura .bottoni{position:relative;margin-top:26px;display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.apertura .giu{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);width:34px;height:34px;border:1px solid #fff;border-radius:50%;display:flex;align-items:center;justify-content:center}
.apertura--bassa{height:380px;min-height:300px}
.apertura--bassa h1{position:relative;font-size:46px;color:#fff;padding:0 20px}

/* modulo richiesta sotto la foto */
.blocco-modulo{background:var(--crema);padding:40px 0 46px;text-align:center}
.blocco-modulo h2{font-size:28px;margin-bottom:10px}
.blocco-modulo .sotto{font-size:14px;margin:0 0 20px}
.campi{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;max-width:600px;margin:0 auto;text-align:left}
.campi .intero{grid-column:1/-1}
.campi label{display:block;font-size:12px;font-weight:400;letter-spacing:.4px;text-transform:uppercase;margin:0 0 4px}
.campi label i{font-style:normal;color:#b3261e}
.campi input,.campi select,.campi textarea{width:100%;border:1px solid #c8c2b8;background:#fff;padding:9px 11px;font:300 14px var(--testo);color:var(--nero);border-radius:0}
.campi textarea{min-height:96px;resize:vertical}
.campi .ok-campo{border-color:#4a7a4a}
.campi .ko-campo{border-color:#b3261e}
.campi small.avviso{display:block;color:#b3261e;font-size:12px;min-height:15px;margin-top:3px}
.campi .consenso{display:flex;gap:8px;align-items:flex-start;font-size:13px;text-transform:none;letter-spacing:0}
.campi .consenso input{width:16px;height:16px;margin-top:2px;flex-shrink:0;accent-color:var(--cuoio)}
.esca{position:absolute;left:-9000px;top:auto;width:1px;height:1px;overflow:hidden}
.invio-riga{text-align:center;margin-top:18px}
.stato-invio{font-size:14px;margin:12px 0 0;min-height:20px}
.grazie-box{display:none;max-width:560px;margin:10px auto 0;padding:26px 24px;border:1px solid var(--filo);background:#fff}
.grazie-box h3{font-size:26px;margin-bottom:8px}
.inviato .grazie-box{display:block}
.inviato .campi,.inviato .invio-riga,.inviato .stato-invio{display:none}

/* ornamento e frase in corsivo */
.citazione{text-align:center;padding:56px 0 40px}
.citazione svg{width:90px;height:22px;margin:0 auto 12px;display:block}
.citazione p{font:italic 400 24px/1.6 var(--corsivo);max-width:760px;margin:0 auto 14px}
.citazione .chiusa{width:84px;height:8px;margin:0 auto}

/* blocchi alternati foto + riquadro */
.alterno{position:relative;padding:28px 0;margin-bottom:22px}
.alterno .riquadro{position:relative;z-index:2;background:var(--crema);width:430px;padding:20px;margin-left:calc(50% - 670px)}
.alterno .riquadro .dentro{border:1px solid var(--filo);padding:36px 30px 34px}
.alterno h2{font-size:38px;margin-bottom:18px}
.alterno .righetta{width:76px;height:1px;background:var(--nero);margin:0 0 18px}
.alterno p{font-size:14px;line-height:1.55}
.alterno .prezzo-da{font:italic 400 17px var(--corsivo);margin:4px 0 16px}
.alterno .foto{position:absolute;top:50%;transform:translateY(-50%);right:0;width:calc(50% + 160px);max-width:860px;z-index:1}
.alterno .foto img{width:100%;aspect-ratio:16/9;object-fit:cover}
.alterno.dx .riquadro{margin-left:auto;margin-right:calc(50% - 670px)}
.alterno.dx .foto{right:auto;left:0}

/* scorrevole testi (al posto delle recensioni) */
.scorrevole{background:var(--crema);padding:44px 0 50px;text-align:center}
.scorrevole h2{font-size:46px;margin-bottom:22px}
.scorrevole .binario{display:flex;align-items:center;gap:20px;max-width:760px;margin:0 auto}
.scorrevole .binario button{background:none;border:0;cursor:pointer;padding:8px;font-size:22px;line-height:1}
.scorrevole .schede{overflow:hidden;flex:1}
.scorrevole .nastro{display:flex;transition:transform .45s ease}
.scorrevole .scheda{min-width:100%;padding:0 10px}
.scorrevole .scheda p{font-size:15px;margin-bottom:12px}
.scorrevole .scheda em{font:italic 400 14px var(--corsivo);color:var(--grigio)}

/* sigilli */
.sigilli{padding:40px 0 30px;text-align:center}
.sigilli h2{font-size:40px;margin-bottom:8px}
.sigilli .sotto{font-size:14px;margin-bottom:24px}
.sigilli ul{list-style:none;margin:0;padding:0;display:flex;justify-content:center;gap:22px;flex-wrap:wrap}
.sigilli li{width:116px;height:116px;border-radius:50%;border:2px solid var(--cuoio);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px;color:var(--cuoio)}
.sigilli li b{font-family:var(--display);font-weight:400;font-size:20px;line-height:1}
.sigilli li span{font-size:11px;line-height:1.25;text-transform:uppercase;letter-spacing:.4px;margin-top:5px}

/* laboratorio griglia */
.laboratorio{background:var(--crema);padding:40px 0 34px;text-align:center}
.laboratorio h2{font-size:40px;margin-bottom:8px}
.laboratorio .sotto{font-size:14px;margin-bottom:22px}
.laboratorio .griglia{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;width:1100px;max-width:calc(100% - 40px);margin:0 auto}
.laboratorio .griglia img{aspect-ratio:1/1;object-fit:cover;width:100%}
.laboratorio .griglia figcaption{font-size:12.5px;margin-top:6px;color:var(--grigio)}

/* barra iscrizione */
.iscrizione{background:var(--grafite);color:#fff;padding:22px 0}
.iscrizione form{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.iscrizione p{margin:0;font-size:17px}
.iscrizione input[type=email]{width:280px;max-width:100%;padding:8px 10px;border:0;font:300 14px var(--testo)}
.iscrizione .btn-filo{border-color:#fff;color:#fff;padding:8px 18px}
.iscrizione .btn-filo:hover{background:#fff;color:var(--nero)}
.iscrizione .risposta{width:100%;text-align:center;font-size:14px;margin:6px 0 0;min-height:18px}

/* piede */
#piede{background:var(--nero);color:#fff;text-align:center;padding:30px 0 16px;font-size:14px}
#piede .marchio-piede img{height:40px;width:auto;margin:0 auto 14px}
#piede .contatti{display:inline-block;margin:0 0 12px}
#piede address{font-style:normal;margin-bottom:18px;line-height:1.7}
#piede address a{text-decoration:none}
#piede .vie{border-top:1px solid #2c2c2c;border-bottom:1px solid #2c2c2c;padding:12px 0;margin-bottom:12px}
#piede .vie a{text-decoration:none;padding:0 10px}
#piede .vie a+a{border-left:1px solid #555}
#piede .fondo{font-size:12px;color:#bdb6aa}
#piede .fondo a{text-decoration:underline}

/* cookie: finestra centrale */
.velo-cookie{position:fixed;inset:0;background:rgba(20,15,10,.55);z-index:200;display:none;align-items:center;justify-content:center;padding:16px}
.velo-cookie.aperto{display:flex}
.finestra-cookie{background:#fff;max-width:520px;width:100%;padding:28px 26px 22px;position:relative;border-top:4px solid var(--cuoio)}
.finestra-cookie h2{font-size:26px;margin-bottom:10px}
.finestra-cookie p{font-size:14px}
.finestra-cookie .x{position:absolute;top:8px;right:10px;background:none;border:0;font-size:24px;cursor:pointer;line-height:1;padding:6px}
.finestra-cookie .scelte{display:none;margin:0 0 14px;font-size:14px}
.finestra-cookie .scelte.vedi{display:block}
.finestra-cookie .scelte label{display:block;margin:6px 0}
.finestra-cookie .scelte input{accent-color:var(--cuoio);margin-right:8px}
.finestra-cookie .pulsanti{display:flex;gap:8px;flex-wrap:wrap}
.finestra-cookie .pulsanti button{flex:1;min-width:130px}

@media (max-width:1000px){
  .alterno .riquadro,.alterno.dx .riquadro{margin:0 20px;width:auto}
  .alterno .foto,.alterno.dx .foto{position:static;transform:none;width:100%;max-width:none;margin-top:-10px}
  .laboratorio .griglia{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:750px){
  #testata .riga-su{padding:10px 14px}
  #testata .tel-pill{font-size:12px;padding:7px 11px}
  #testata .marchio img{height:34px}
  .apri-menu{display:inline-block;margin:4px auto 10px}
  #testata nav{text-align:center}
  #testata nav ul{display:none;flex-direction:column;gap:10px;padding-bottom:14px}
  #testata nav ul.aperto{display:flex}
  .apertura{height:560px}
  .apertura .frase{font-size:19px}
  .campi{grid-template-columns:1fr}
  .alterno h2{font-size:30px}
  .citazione p{font-size:19px;padding:0 10px}
  .scorrevole h2,.sigilli h2,.laboratorio h2{font-size:32px}
  .apertura--bassa h1{font-size:34px}
}
@media (max-width:480px){
  #testata .borsa span{display:none}
  .sigilli li{width:100px;height:100px}
}

/* blocchi alternati: rifatti in flex, la foto assoluta usciva sopra le frasi */
.alterno{display:flex;align-items:center;padding:30px 0;margin-bottom:34px}
.alterno .riquadro{flex:0 0 430px;margin-left:max(20px,calc(50% - 600px));margin-right:-140px}
.alterno .foto{position:relative;top:auto;right:auto;transform:none;flex:1 1 auto;width:auto;max-width:880px}
.alterno.dx{flex-direction:row-reverse}
.alterno.dx .riquadro{margin-left:-140px;margin-right:max(20px,calc(50% - 600px))}
.alterno.dx .foto{left:auto}
.blocco-modulo{padding-left:20px;padding-right:20px}
@media (max-width:1000px){
  .alterno,.alterno.dx{flex-direction:column;align-items:stretch}
  .alterno .riquadro,.alterno.dx .riquadro{flex:none;width:auto;margin:0 20px}
  .alterno .foto,.alterno.dx .foto{margin:-10px 0 0;max-width:none}
}

/* sezioni aggiunte: processo, chi c'è dietro, esempi su misura */
.processo{padding:60px 0 50px;text-align:center}
.processo h2,.lavori h2{font-size:40px;margin-bottom:8px}
.processo .sotto,.lavori .sotto{font-size:14px;margin-bottom:26px}
.processo ol{list-style:none;margin:0 auto;padding:0;width:1160px;max-width:calc(100% - 40px);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;text-align:left}
.processo li img{aspect-ratio:4/3;object-fit:cover;width:100%;margin-bottom:10px}
.processo li b{display:block;font:italic 400 18px var(--corsivo);margin-bottom:4px}
.processo li span{font-size:13.5px;line-height:1.55;display:block}
.mastro{display:flex;align-items:center;background:var(--crema);margin:10px 0 0}
.mastro__foto{flex:0 0 42%;min-width:0}
.mastro__foto img{width:100%;aspect-ratio:760/900;object-fit:cover}
.mastro__testo{padding:40px 7% 40px 60px;max-width:640px}
.mastro h2{font-size:40px;margin-bottom:18px}
.mastro .righetta{width:76px;height:1px;background:var(--nero);margin:0 0 18px}
.mastro p{font-size:15px;line-height:1.65}
.mastro .firma{font:italic 400 18px var(--corsivo);margin-top:18px}
.lavori{padding:56px 0 50px;text-align:center}
.lavori__griglia{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;width:1160px;max-width:calc(100% - 40px);margin:0 auto 26px;text-align:left}
.lavori__griglia img{aspect-ratio:4/3;object-fit:cover;width:100%}
.lavori__griglia figcaption{font-size:13.5px;margin-top:8px;line-height:1.45}
.lavori__griglia figcaption b{display:block;font-weight:400;font-family:var(--corsivo);font-style:italic;font-size:16px}
@media (max-width:1000px){
  .processo ol{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lavori__griglia{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mastro{flex-direction:column}
  .mastro__foto{flex:none;width:100%}
  .mastro__foto img{aspect-ratio:4/3}
  .mastro__testo{padding:30px 20px 36px}
}
@media (max-width:480px){.processo ol{grid-template-columns:1fr}.processo h2,.lavori h2,.mastro h2{font-size:32px}}

/* FINAL: altezza su mobile con dvh, movimento ridotto, titoli bilanciati */
.apertura{height:min(700px,92dvh)}
h1,h2{text-wrap:balance}
.citazione p,.alterno p{text-wrap:pretty}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.scorrevole .nastro{transition:none}}

/* confronto, misurare, colori */
.confronto{background:var(--crema);padding:54px 0 50px;text-align:center}
.confronto h2,.colori h2{font-size:40px;margin-bottom:8px}
.confronto .sotto,.colori .sotto{font-size:14px;margin-bottom:24px}
.confronto__scorri{overflow-x:auto;width:980px;max-width:calc(100% - 40px);margin:0 auto}
.confronto table{width:100%;min-width:560px;border-collapse:collapse;background:#fff;font-size:14.5px;text-align:left}
.confronto th,.confronto td{padding:12px 14px;border-bottom:1px solid var(--filo)}
.confronto thead th{font:italic 400 18px var(--corsivo);border-bottom:1px solid var(--nero)}
.confronto tbody th{font-weight:400;color:var(--grigio);width:28%}
.misurare{display:flex;align-items:center;gap:0;width:1100px;max-width:calc(100% - 40px);margin:60px auto}
.misurare__testo{flex:1 1 50%;padding-right:50px}
.misurare h2{font-size:40px;margin-bottom:16px}
.misurare .righetta{width:76px;height:1px;background:var(--nero);margin:0 0 18px}
.misurare ol{padding-left:20px;margin:0 0 22px;font-size:14.5px;line-height:1.6}
.misurare li{margin-bottom:12px}
.misurare li b{display:block;font-weight:400}
.misurare__foto{flex:1 1 50%;min-width:0}
.misurare__foto img{width:100%;aspect-ratio:4/3;object-fit:cover}
.colori{padding:20px 0 56px;text-align:center}
.colori ul{list-style:none;padding:0;margin:0 auto;display:flex;justify-content:center;gap:34px;flex-wrap:wrap}
.colori li{width:150px}
.colori .campione{display:block;width:84px;height:84px;border-radius:50%;margin:0 auto 10px;border:1px solid var(--filo)}
.colori b{display:block;font:italic 400 17px var(--corsivo)}
.colori small{font-size:12.5px;color:var(--grigio)}
@media (max-width:1000px){.misurare{flex-direction:column}.misurare__testo{padding:0 0 26px}}
@media (max-width:480px){.confronto h2,.colori h2,.misurare h2{font-size:32px}}