/* ==========================================================================
   Le Tapis — pagine di testo: quello che il mockup non aveva perché era fermo
   (esito dei moduli, errori, campo trappola) e la resa dei testi legali veri.
   Si carica dopo pagine.css.
   ========================================================================== */

/* --- moduli: esito dell'invio ------------------------------------------- */
.esito{border-radius:var(--r-m);padding:16px 18px;margin-bottom:18px;font-size:16px;font-weight:600;line-height:1.45;color:var(--inchiostro)}
.esito-ok{background:var(--salvia)}
.esito-errore{background:var(--cipria);box-shadow:inset 4px 0 0 #a8432a}
.esito a{text-decoration-color:var(--salmone-scuro);text-underline-offset:3px}
.campo.ha-errore select,.campo.ha-errore textarea{border-color:#a8432a}
.consenso{grid-column:1/-1;display:grid;gap:6px}
.consenso .errore{font-size:14px;color:#a8432a;font-weight:600}
.spunta.piccola a{text-decoration-color:var(--salmone);text-decoration-thickness:2px;text-underline-offset:3px}
/* il menu a tendina come nel negozio: freccia disegnata, niente stile del sistema */
.campo select{appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%232b2320' stroke-width='1.8' fill='none'/%3E%3C/svg%3E") no-repeat right 16px center;padding-right:42px}
/* focus visibile anche da tastiera su spunta e bottoni */
.spunta input:focus-visible,.cerca input:focus-visible{outline:2px solid var(--salmone-scuro);outline-offset:3px}
/* campo trappola: fuori dallo schermo, non con display:none (i programmi se ne accorgono) */
.trappola{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* tornando sulla pagina dopo l'invio il modulo non finisce sotto il bordo */
#modulo{scroll-margin-top:24px}

/* --- testi legali e pagine senza modello -------------------------------- */
.prosa>section:first-child>:first-child{margin-top:0}
.prosa section+section>h2:first-child{margin-top:44px}
.prosa ul ul,.prosa ol ol,.prosa ul ol,.prosa ol ul{margin:10px 0 4px}
.prosa li>b:first-child,.prosa li>strong:first-child{font-weight:600}
.prosa h2+h3{margin-top:18px}
.prosa p,.prosa li{overflow-wrap:anywhere}
.prosa-sola{padding-bottom:88px}
.prosa .riquadro{font-size:17px;line-height:1.6}
/* l'indice lungo (privacy) scorre da solo, senza allungare la colonna */
.indice{max-height:calc(100vh - 48px);overflow-y:auto;scrollbar-width:thin}

/* --- spedizioni: riquadri delle tariffe e domande ----------------------- */
.prosa .tariffe span{font-size:15px;line-height:1.45}
.prosa .fisarmonica .corpo p,.prosa .fisarmonica .corpo li{font-size:16px;line-height:1.6}
.prosa .fisarmonica summary:focus-visible{outline:2px solid var(--salmone-scuro);outline-offset:3px}

/* --- edizione su richiesta ---------------------------------------------- */
.pag-edizione .galleria.una{grid-template-columns:1fr}

/* --- 404 ------------------------------------------------------------------ */
.pagina-404 img{background:var(--sabbia)}

@media (max-width:980px){
  .indice{max-height:none;overflow:visible}
  .prosa-sola{padding-bottom:60px}
  .con-indice>.prosa{min-width:0}
  .contatti-grid>*{min-width:0}
}

/* su smartphone le-tapis.css spegne tutti i <nav> (regola pensata per il menu della testata):
   l'indice delle pagine lunghe ha il suo riquadro bianco e deve restare visibile */
@media (max-width:980px){
  nav.indice{display:block}
}

/* --- due correzioni a regole di pagine.css / le-tapis.css ----------------- */
/* con un errore sotto un campo, quello a fianco non deve allungarsi per pareggiare la riga */
.campi .campo{align-content:start}
/* la regola generica «nav a» mette un bordo sotto ogni link: nell'indice la voce accesa ha solo la riga a sinistra */
.indice a{border-bottom:0}

/* --- spedizioni: icone, per alleggerire una pagina tutta di testo (04/10/2026) --- */
.sped .ico{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:var(--cipria);color:var(--salmone-scuro)}
.sped .ico svg{width:22px;height:22px}
.sped h2.con-icona{display:flex;align-items:center;gap:14px}
.sped .tariffe .ico{margin-bottom:14px;background:var(--sabbia)}
.sped .riquadro.con-icona{display:grid;grid-template-columns:44px 1fr;column-gap:16px;align-items:start}
.sped .riquadro.con-icona .ico{grid-row:1 / span 2;background:#fff}
.sped .riquadro.con-icona b{margin-bottom:4px}
/* «Come si fa»: i passi del reso con il numero nel cerchio, uno sotto l'altro */
.sped #resi ol{list-style:none;padding:0;counter-reset:passo;gap:12px}
.sped #resi ol li{counter-increment:passo;position:relative;background:#fff;border-radius:var(--r-m);padding:18px 18px 18px 68px;min-height:64px}
.sped #resi ol li::before{content:counter(passo);position:absolute;left:18px;top:14px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--inchiostro);color:#fff;font:600 16px 'Figtree',sans-serif}
/* «Le condizioni»: una spunta al posto del pallino */
.sped #resi ul{list-style:none;padding:0}
.sped #resi ul li{position:relative;padding-left:32px}
.sped #resi ul li::before{content:"";position:absolute;left:0;top:.28em;width:20px;height:20px;border-radius:50%;background:var(--salvia) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b2320' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat}
/* testi legali (condizioni di vendita): la stessa icona accanto ai titoli */
.prosa h2.con-icona{display:flex;align-items:center;gap:14px}
.prosa h2.con-icona .ico{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:var(--cipria);color:var(--salmone-scuro)}
.prosa h2.con-icona .ico svg{width:22px;height:22px}
@media (max-width:640px){
  .sped .ico{width:38px;height:38px}
  .sped h2.con-icona{gap:12px}
  .prosa h2.con-icona .ico{width:38px;height:38px}
  .prosa h2.con-icona{gap:12px}
  .sped .riquadro.con-icona{grid-template-columns:38px 1fr;column-gap:12px}
}

/* --- chi siamo: restyling (04/10/2026) ------------------------------------
   testata grande con foto ad arco, lettera su foglio «cucito», collage, frase */
.ab-testa{background:var(--cipria);position:relative;overflow:hidden;padding-bottom:150px}
.ab-testa-griglia{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:56px;align-items:center;min-height:min(74dvh,720px);padding-top:28px}
.ab-testa:not(.con-foto) .ab-testa-griglia{grid-template-columns:1fr}
.ab-testa h1{font-size:clamp(46px,7.6vw,116px);line-height:.98;letter-spacing:-.035em;margin:20px 0 30px}
.ab-testa h1 em{display:block}
/* ogni riga del titolo sale da dietro una mascherina (la mette about.js) */
.ab-riga{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.ab-riga>span{display:block}
.ab-testa .sotto{font-size:clamp(18px,1.5vw,22px);line-height:1.55;color:var(--testo2);max-width:27em}
.ab-ritratto{position:relative;isolation:isolate;justify-self:end;width:min(100%,430px)}
.ab-arco{position:relative;aspect-ratio:4/5.1;border-radius:999px 999px var(--r-l) var(--r-l);overflow:hidden;box-shadow:0 44px 70px -44px rgba(120,64,44,.6)}
.ab-arco img{position:absolute;left:0;top:-6%;width:100%;height:112%;object-fit:cover;object-position:66% 50%}
.ab-disco{position:absolute;z-index:-1;border-radius:50%;aspect-ratio:1}
.ab-disco-1{width:64%;left:-24%;bottom:-8%;background:var(--salmone)}
.ab-disco-2{width:28%;right:-10%;top:9%;background:var(--salvia)}

.ab-lettera{position:relative;margin-top:-86px;padding-bottom:110px}
.ab-foglio.lettera{position:relative;max-width:900px;background:#fff;border-radius:var(--r-l);padding:76px clamp(30px,8vw,104px) 68px;box-shadow:var(--ombra)}
/* la cucitura: Le Tapis cuce a mano */
.ab-foglio::before{content:"";position:absolute;inset:14px;border:2px dashed #efc4b6;border-radius:calc(var(--r-l) - 8px);pointer-events:none}
.ab-foglio.lettera .capolettera{font:400 clamp(21px,2vw,27px)/1.45 'Fraunces',serif;letter-spacing:-.01em}
.ab-foglio.lettera .capolettera::first-letter{font-size:96px;margin:10px 14px 0 0}
.ab-foglio.lettera p+p{margin-top:22px}
.ab-foglio .firma{font-size:46px;margin-top:40px}
.ab-svolazzo{display:block;width:170px;margin-top:6px;stroke:var(--salmone-scuro);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}

.ab-collage{padding:10px 0 130px}
.ab-collage .wrap{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;row-gap:0;align-items:start}
.ab-f{margin:0;overflow:hidden;border-radius:var(--r-l);box-shadow:0 30px 60px -34px rgba(120,64,44,.55)}
.ab-f img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.32,.72,0,1)}
.ab-f:hover img{transform:scale(1.06)}
.ab-f1{grid-column:1/8;grid-row:1;aspect-ratio:16/10.5;border-radius:var(--r-l) var(--r-l) var(--r-l) 150px;rotate:-1.5deg}
.ab-f2{grid-column:8/13;grid-row:1/span 2;aspect-ratio:3/4.1;margin-top:110px;rotate:2deg}
.ab-f3{grid-column:3/8;grid-row:2;aspect-ratio:5/4;margin-top:-70px;rotate:-1deg;border:10px solid #fff;z-index:1}

.ab-frase{position:relative;overflow:hidden;background:var(--sabbia);padding:140px 0}
.ab-frase .wrap{position:relative}
.ab-frase blockquote{position:relative;font:400 italic clamp(27px,4.1vw,58px)/1.2 'Fraunces',serif;letter-spacing:-.02em;max-width:19em;margin:0 auto;text-align:center;text-wrap:balance}
.ab-virgolette{position:absolute;left:-.1em;top:-.66em;font:600 clamp(200px,30vw,440px)/1 'Fraunces',serif;color:#e7d8c7;pointer-events:none;user-select:none}
@media (max-width:980px){
  .ab-testa{padding-bottom:110px}
  .ab-testa-griglia{grid-template-columns:1fr;gap:44px;min-height:0;padding-top:18px}
  .ab-ritratto{justify-self:center;width:min(78%,360px)}
  .ab-lettera{margin-top:-64px;padding-bottom:72px}
  .ab-foglio.lettera{padding:56px 30px 48px}
  .ab-foglio.lettera .capolettera::first-letter{font-size:74px}
  .ab-collage{padding-bottom:84px}
  .ab-collage .wrap{grid-template-columns:1fr 1fr;column-gap:14px;row-gap:14px}
  .ab-f1{grid-column:1/-1;grid-row:auto;border-radius:var(--r-l) var(--r-l) var(--r-l) 84px;rotate:-1deg}
  .ab-f2,.ab-f3{grid-column:auto;grid-row:auto;aspect-ratio:3/4;margin-top:0;rotate:none;border:0}
  .ab-f3{margin-top:28px}
  .ab-frase{padding:88px 0}
}