/* ============================================================
   PennyElle — intimo su misura · pennyelle.it
   Base grafica: Proposta 01 «L'Atelier» (scelta di Laura, Doc 29/06)
   Corallo ufficiale Laura: #ff534b · Panna + nero + tortora
   Font: Cormorant Garamond (titoli) · Montserrat (testi) · Sacramento (corsivo)
   ============================================================ */

:root{
  --panna:        #FAF6F0;
  --panna-scura:  #F3ECDF;
  --carta:        #FDFBF6;
  --header-bg:    rgba(250,246,240,.95);
  --nero:         #1C1B1A;
  --inchiostro:   #3A352E;
  --tortora:      #B9A99A;
  --corallo:      #ff534b;
  --corallo-cupo: #d63a33;
  --corallo-velo: rgba(255,83,75,.08);
  --serif:  'Cormorant Garamond', Georgia, serif;
  --sans:   'Montserrat', Helvetica, Arial, sans-serif;
  --script: 'Sacramento', cursive;
  --spazio-sezione: 4.5rem; /* respiro base tra moduli: UNICA manopola del ritmo verticale */
}

*,
*::before,
*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--panna);
  color:var(--inchiostro);
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  position:relative;
}

/* filigrana di capi intimi tortora (Doc: opacità 5-10%) */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:url('../assets/filigrana.svg');
  background-size:520px auto;
  opacity:.75; /* i tratti nel file sono già molto tenui */
}
body > *{ position:relative; z-index:1; }

img{ max-width:100%; height:auto; display:block; }

/* i loghi di Laura sono PNG a fondo bianco: multiply li fonde con la panna
   (in attesa delle versioni trasparenti/vettoriali) */
.logo-fuso{ mix-blend-mode:multiply; }

a{ color:var(--corallo-cupo); transition:color .25s ease; }
a:hover{ color:var(--corallo); }

/* ------------------------------------------------------------
   Tipografia
   ------------------------------------------------------------ */
h1,h2,h3{
  font-family:var(--serif);
  font-weight:600;
  color:var(--nero);
  line-height:1.18;
  margin:0 0 .5em;
  text-wrap:balance; /* a-capo bilanciati: mai parole orfane a fine titolo */
}
p{ text-wrap:pretty; }
h1{ font-size:clamp(2.4rem, 5.5vw, 4.1rem); }
h2{ font-size:clamp(1.9rem, 4vw, 2.8rem); }
h3{ font-size:clamp(1.3rem, 2.4vw, 1.6rem); }

.script{
  font-family:var(--script);
  color:var(--corallo);
  font-weight:400;
  font-size:1.5em;
  line-height:1;
}
.sottotitolo-corsivo{
  font-family:var(--script);
  color:var(--corallo);
  font-size:clamp(1.6rem, 3vw, 2.2rem);
  line-height:1.1;
  margin:0 0 .4rem;
}
.eyebrow{
  display:inline-block;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--corallo-cupo);
  margin-bottom:1.1rem;
}
p{ margin:0 0 1.15em; }
.lead{ font-size:1.12rem; }

/* ------------------------------------------------------------
   Struttura
   ------------------------------------------------------------ */
.wrap{ max-width:1140px; margin:0 auto; padding:0 1.4rem; }
.wrap--narrow{ max-width:960px; }
section{ padding:var(--spazio-sezione) 0; }
/* attorno ai divisori-cucitura lo spazio si stringe (il divisore fa già da pausa) */
hr.cucitura{ margin:.2rem auto; }
hr.cucitura + section{ padding-top:calc(var(--spazio-sezione)/2); }
section:has(+ hr.cucitura){ padding-bottom:calc(var(--spazio-sezione)/2); }
/* se la sezione termina con un bottone, sotto il bottone lo spazio resta simile a quello sopra */
section:not(.hero):has(.wrap > .azioni:last-child){ padding-bottom:1.2rem; }
.center{ text-align:center; }
/* seconda parte di un titolo in corsivo corallo (rosso 25/07, ispirazioni) */
.corsivo-corallo{ font-family:var(--script); color:var(--corallo); font-weight:400; font-size:1.18em; }

/* divisore a cucitura: al centro i baffi col cuoricino della mascotte (file di Laura 25/07) */
.cucitura{
  border:none;
  height:34px;
  margin:0 auto;
  max-width:420px;
  position:relative;
  background:url("../assets/divisore-baffi.svg") center/auto 20px no-repeat;
}
.cucitura::before,
.cucitura::after{
  content:"";
  position:absolute;
  top:50%;
  width:calc(50% - 60px);
  border-top:2px dashed rgba(255,83,75,.55);
}
.cucitura::before{ left:0; }
.cucitura::after{ right:0; }

/* ------------------------------------------------------------
   Header su due righe (Doc §0.1)
   ------------------------------------------------------------ */
header.sito{
  position:sticky;
  top:0;
  z-index:50;
  background:var(--header-bg);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(28,27,26,.14);
}
.riga-contatti{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  /* rosso 25/07: header più esteso in orizzontale ("troppo compatto") */
  max-width:1400px;
  margin:0 auto;
  padding:.55rem 2rem .35rem;
}
/* 10/09/2026 (Laura, email #62368): senza flex:none la testa stretta comprimeva il logo
   in larghezza (l'altezza restava, la figura si schiacciava) */
.brand{ display:flex; align-items:center; text-decoration:none; flex:none; }
.brand img{ height:56px; width:auto; flex:none; }
.contatti-rapidi{
  display:flex;
  align-items:center;
  gap:1.6rem;
  font-size:.85rem;
}
.contatti-rapidi a{
  display:flex;
  align-items:center;
  gap:.45rem;
  color:var(--inchiostro);
  text-decoration:none;
}
.contatti-rapidi a:hover{ color:var(--corallo-cupo); }
.contatti-rapidi svg{ width:17px; height:17px; color:var(--corallo); flex:none; }
.icone-utente{ display:flex; align-items:center; gap:1rem; }
.icone-utente a,
.icone-utente .apri-cerca{
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  color:var(--inchiostro);
  display:grid;
  place-items:center;
  width:36px; height:36px;
  border-radius:50%;
  transition:background .2s ease, color .2s ease;
}
.icone-utente a:hover,
.icone-utente .apri-cerca:hover{ background:var(--corallo-velo); color:var(--corallo-cupo); }
.icone-utente svg{ width:20px; height:20px; }

.riga-menu{ border-top:1px dashed rgba(28,27,26,.16); }
/* 16/09/2026 (Alex): il menu deve restare SEMPRE su una riga. Niente a-capo: sotto i
   1200 px le voci si stringono, sotto i 980 px si passa al menu a tendina (prima 760). */
nav.menu{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:nowrap;
  gap:.2rem 1.2rem;
  max-width:1360px;
  margin:0 auto;
  padding:.45rem 1.4rem;
}
nav.menu a{
  font-size:.73rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--nero);
  padding:.4rem 0 .3rem;
  border-bottom:2px solid transparent;
  white-space:nowrap;
  position:relative;
}
/* (16/09) voci piu' strette sotto i 1200 px: DOPO la regola base, altrimenti non vince */
@media (max-width:1200px){
  nav.menu{ gap:.2rem 1rem; }
  nav.menu a{ font-size:.68rem; letter-spacing:.09em; }
}
@media (max-width:1100px){
  nav.menu{ gap:.2rem .8rem; }
  nav.menu a{ font-size:.62rem; letter-spacing:.08em; }
}
/* punti cucitura tra le voci (variante scelta da Alex, 14/07) — solo dove c'è spazio */
@media (min-width:1310px){
  nav.menu{ gap:.2rem 0; }
  nav.menu a{ padding:.4rem 1.1rem .3rem; }
  nav.menu a + a::before{
    content:"";
    position:absolute;
    left:-3px;
    top:50%;
    width:6px;
    height:6px;
    margin-top:-4px;
    border-radius:50%;
    background:rgba(255,83,75,.45);
  }
}
nav.menu a:hover,
nav.menu a.attiva{
  color:var(--corallo);
  border-bottom:2px dashed var(--corallo);
}
.apri-menu{ display:none; }

/* etichetta testuale accanto alle icone solo su desktop largo */
@media (max-width:980px){
  .contatti-rapidi .testo-contatto{ display:none; }
  .contatti-rapidi{ gap:.8rem; }
  /* menu a tendina da 980 px in giu' (16/09/2026): 8 voci non stanno su una riga leggibile */
  .apri-menu{
    display:grid;
    place-items:center;
    width:40px; height:40px;
    background:none;
    border:1.5px dashed rgba(255,83,75,.6);
    border-radius:50%;
    color:var(--nero);
    cursor:pointer;
  }
  .apri-menu svg{ width:20px; height:20px; }
  .riga-menu{ display:none; }
  .riga-menu.aperta{ display:block; }
  nav.menu{ flex-direction:column; flex-wrap:wrap; gap:.1rem; padding:.6rem 1.4rem 1rem; }
  nav.menu a{ font-size:.82rem; letter-spacing:.1em; padding:.5rem 0 .35rem; }
  nav.menu a + a::before{ display:none; }
}
@media (max-width:760px){
  /* 10/09/2026 (Laura, email #62368): sul telefono il logo era troppo grande
     e schiacciava le icone: piu' piccolo e con piu' aria intorno */
  .riga-contatti{ padding:.5rem 1rem .4rem; gap:.6rem; }
  .brand img{ height:40px; }
  .icone-utente{ gap:.55rem; }
  .contatti-rapidi{ gap:.55rem; }
}

/* ------------------------------------------------------------
   Bottoni
   ------------------------------------------------------------ */
.azioni{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:1.8rem; }
/* CTA di fine sezione: respiro sopra pari a quello sotto (pb 1.2rem + pt 3rem della sezione dopo) */
section:not(.hero) .wrap > .azioni:last-child{ margin-top:calc(var(--spazio-sezione) + 1.5rem); }
.btn{
  display:inline-block;
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  text-decoration:none;
  padding:.95rem 2.1rem;
  border-radius:999px;
  cursor:pointer;
  border:none;
  font-family:var(--sans);
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn-pieno{
  background:var(--corallo);
  color:#fff;
  box-shadow:0 10px 24px -12px rgba(255,83,75,.8);
}
.btn-pieno:hover{ background:var(--corallo-cupo); color:#fff; }
.btn-filo{ border:1.5px solid var(--nero); color:var(--nero); background:transparent; }
.btn-filo:hover{ border-color:var(--corallo); color:var(--corallo-cupo); }
.btn-panna{ background:var(--panna); color:var(--nero); }
.btn-panna:hover{ background:#fff; color:var(--corallo-cupo); }

/* ------------------------------------------------------------
   Hero home (Doc §0.2)
   ------------------------------------------------------------ */
.hero{ text-align:center; padding:3.4rem 0 2rem; position:relative; overflow:hidden; }
/* rosso 25/07: logo GRANDE (circa il doppio) prima del titolo */
.hero .logo-scena{
  position:relative;
  display:block;
  width:340px;
  max-width:72vw;
  margin:0 auto 1.2rem;
}
.hero .logo-tondo{
  width:100%;
  display:block;
  animation:apparire 1.2s .1s ease both;
}
.hero .tagline{
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--inchiostro);
  margin:0 0 1.8rem;
  animation:apparire 1.2s .3s ease both;
}
/* 16/09/2026 (Alex): il titolo deve stare su UNA riga sul desktop. Prima era a filo del
   bordo (1055 px su 1100) e sui monitor veri andava a capo: un po' piu' piccolo, con margine. */
.hero h1{ font-size:clamp(2.4rem, 5vw, 3.9rem); margin-bottom:2.4rem; animation:apparire 1.2s .45s ease both; }
.hero h1 .corsivo{ font-family:var(--script); color:var(--corallo); font-weight:400; font-size:1.28em; }
.hero .filosofia{ animation:apparire 1.2s .6s ease both; max-width:900px; margin:2.2rem auto 1rem; }
.hero .azioni{ animation:apparire 1.2s .75s ease both; margin-top:4.2rem; margin-bottom:3rem; }

/* effetto "cucito" (richiesta Laura 25/07, v2 su feedback Alex 27/07):
   l'ago orbita lungo il cerchio, il tratteggio si cuce dietro di lui,
   poi il logo "prende inchiostro" e l'overlay sfuma */
.cucito-anim{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  display:none;
}
html.fx .cucito-anim{ display:block; animation:cucito-sfuma .45s 4.7s ease both; }
html.fx .hero .logo-cucito{ animation:logo-inchiostro .6s 4.35s ease both; }
/* FASE 1 (0.15-1.05s): anello cucito in senso ORARIO (path con sweep orario),
   un punto per scatto */
html.fx .cucito-anim .rivelo{ animation:cucito-fila 1.9s .15s steps(60, jump-none) both; }
html.fx .cucito-anim .ago-orbita{
  transform-box:view-box;
  transform-origin:428px 274px;
  animation:ago-giro 1.9s .15s linear both, ago-via .2s 2.05s ease both;
}
/* l'affondo dell'ago: piccolo tuffo radiale ritmico, come il cucito a mano */
html.fx .cucito-anim .ago-affondo{
  transform-box:fill-box;
  transform-origin:center;
  animation:ago-affonda .19s .15s ease-in-out 10;
}
/* FASE 2 (1.05-1.85s): il disegno del reggiseno si forma sotto l'ago che segue il tracciato */
html.fx .cucito-anim .scarabocchio{ animation:cucito-fila 1.6s 2.05s linear both; }
@supports (offset-path: path('M0 0 L1 1')) {
  html.fx .cucito-anim .ago-disegna{
    offset-path: path('M330 85 Q428 55 530 88 Q560 120 480 128 Q380 132 300 140 Q250 160 320 180 Q450 175 560 190 Q610 215 540 235 Q400 250 290 245 Q240 270 320 295 Q470 300 585 305 Q620 335 540 355 Q420 370 300 350 Q260 385 350 405 Q460 420 520 430');
    offset-rotate: auto;
    animation:ago-traccia 1.6s 2.05s linear both,
              ago-appare .12s 2.05s ease both,
              ago-via .2s 3.65s ease both;
  }
}
/* FASE 3 (1.75-2.2s): la scritta si "scrive" da sinistra a destra */
html.fx .cucito-anim .scritta{ animation:scritta-scrive .9s 3.55s linear both; }
@keyframes logo-inchiostro{ from{ opacity:0; } to{ opacity:1; } }
@keyframes cucito-fila{ from{ stroke-dashoffset:100; } to{ stroke-dashoffset:0; } }
@keyframes ago-giro{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
@keyframes ago-affonda{ 0%, 100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(13px) rotate(2.5deg); } }
@keyframes ago-traccia{ from{ offset-distance:0%; } to{ offset-distance:100%; } }
@keyframes ago-appare{ from{ opacity:0; } to{ opacity:1; } }
@keyframes ago-via{ to{ opacity:0; } }
@keyframes scritta-scrive{ from{ width:0; } to{ width:880px; } }
@keyframes cucito-sfuma{ to{ opacity:0; visibility:hidden; } }
/* con "riduci animazioni" niente teatrino: logo subito visibile, overlay nascosto */
html.a11y-calma .cucito-anim{ display:none !important; }

@keyframes apparire{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:none; }
}

/* ------------------------------------------------------------
   Segnaposto foto/video (in attesa del materiale di Laura)
   ------------------------------------------------------------ */
.foto-manca{
  position:relative;
  border:1.5px dashed var(--tortora);
  border-radius:22px;
  background:
    linear-gradient(135deg, rgba(185,169,154,.12) 0%, rgba(185,169,154,.05) 100%);
  display:grid;
  place-items:center;
  text-align:center;
  color:#8d7f71;
  min-height:220px;
  padding:1.6rem;
  overflow:hidden;
}
.foto-manca .nota{
  font-size:.8rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:600;
  max-width:420px;
}
/* modalità demo: immagine dimostrativa al posto del tratteggio */
.foto-manca.con-demo{
  border:none;
  background:none;
  padding:0;
}
.foto-manca.con-demo .img-demo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.badge-demo{
  position:absolute;
  right:.7rem;
  top:.7rem;
  z-index:2;
  font-size:.56rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#8d7f71;
  background:rgba(250,246,240,.88);
  border:1px dashed rgba(185,169,154,.7);
  border-radius:999px;
  padding:.22rem .65rem;
  pointer-events:none;
}
.video-demo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.foto-manca svg{ width:44px; height:44px; margin-bottom:.7rem; opacity:.7; }
.banner-foto{ min-height:340px; border-radius:26px; }

/* banner a tutta larghezza, senza margini (rosso 25/07: "più di impatto") */
.full-bleed{ width:100vw; margin-left:calc(50% - 50vw); }
.banner-full{ border-radius:0 !important; min-height:440px; }
.full-bleed .foto-manca{ border-left:none; border-right:none; }
.link-angolo{
  position:absolute;
  right:1.3rem;
  bottom:1rem;
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.06em;
  color:var(--corallo-cupo);
  text-decoration:none;
  background:rgba(250,246,240,.92);
  border-radius:999px;
  padding:.45rem 1.1rem;
  border:1px dashed rgba(255,83,75,.5);
}
.link-angolo:hover{ background:#fff; }

/* ------------------------------------------------------------
   Card generiche
   ------------------------------------------------------------ */
.griglia{ display:grid; gap:1.6rem; margin-top:2rem; }
.griglia-4{ grid-template-columns:repeat(4, 1fr); }
.griglia-3{ grid-template-columns:repeat(3, 1fr); }
.griglia-2{ grid-template-columns:repeat(2, 1fr); }

.carta-card{
  background:var(--carta);
  border:1px solid rgba(28,27,26,.16);
  border-radius:22px;
  padding:2rem 1.6rem;
  text-align:center;
  position:relative;
  transition:transform .3s ease, box-shadow .3s ease;
}
.carta-card:hover{
  transform:translateY(-5px);
  box-shadow:0 18px 36px -22px rgba(28,27,26,.4);
}
.carta-card .icona{ width:60px; height:60px; margin:0 auto 1rem; color:var(--corallo); }
.carta-card h3{ margin-bottom:.4rem; font-size:1.3rem; }
.carta-card p{ font-size:.92rem; margin:0; }

/* ------------------------------------------------------------
   Citazione / video banner (Doc §0 banner video)
   ------------------------------------------------------------ */
.banner-video{
  position:relative;
  border-radius:26px;
  overflow:hidden;
  min-height:380px;
  display:grid;
  align-items:center;
}
.banner-video .foto-manca{ position:absolute; inset:0; border-radius:0; border:none; }
.banner-video .citazione-box{
  position:relative;
  justify-self:end;
  /* 09/09/2026 (Alex): il riquadro copriva quasi meta' del video, ora e' piu' raccolto */
  max-width:390px;
  margin:2rem;
  background:rgba(250,246,240,.93);
  border:1px dashed rgba(255,83,75,.45);
  border-radius:20px;
  padding:1.5rem 1.7rem 1.2rem;
}
.banner-video blockquote.citazione{ font-size:clamp(1rem, 1.35vw, 1.18rem); line-height:1.42; }
.banner-video .firma{ font-size:1.85rem; }
blockquote.citazione{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(1.25rem, 2.6vw, 1.7rem);
  font-style:italic;
  color:var(--nero);
  line-height:1.45;
}
.firma{ font-family:var(--script); font-size:2.3rem; color:var(--corallo); }

/* ------------------------------------------------------------
   Recensioni (carosello semplice)
   ------------------------------------------------------------ */
.recensioni{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:2rem; }
/* riquadri diversi per forma E colore dai passaggi "come nasce" (rosso 25/07) */
.recensione{
  background:var(--corallo-velo);
  border:1px solid rgba(255,83,75,.35);
  border-radius:26px 26px 26px 8px;
  padding:1.6rem 1.5rem 1.3rem;
  font-size:.94rem;
  font-style:italic;
  position:relative;
}
.recensione::before{
  content:"\201C";
  font-family:var(--serif);
  font-size:3rem;
  line-height:1;
  color:var(--corallo);
  display:block;
  margin-bottom:.2rem;
}
.recensione .autrice{
  display:block;
  margin-top:.8rem;
  font-style:normal;
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--corallo-cupo);
}
.link-discreto{ font-size:.9rem; }
/* recensioni a scorrimento (quinte, rosso 25/07): 3 visibili + frecce */
.recensioni--slider{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:0 3.4rem .6rem;
}
.recensioni--slider .recensione{
  flex:0 0 calc((100% - 2.8rem) / 3);
  scroll-snap-align:start;
}
@media (max-width:920px){
  .recensioni--slider .recensione{ flex:0 0 86%; }
}

/* ------------------------------------------------------------
   Banner 3 sezioni (Doc §0 — rosso 25/07: da nero a TORTORA,
   come la sezione "Cosa succede in atelier" di Ispirazioni)
   ------------------------------------------------------------ */
.sezione-scura{
  background:var(--panna-scura);
  color:var(--inchiostro);
  border:1px solid rgba(185,169,154,.4);
  border-radius:32px;
  margin:0 1.4rem;
}
.sezione-scura h2, .sezione-scura h3{ color:var(--nero); }
.sezione-scura .eyebrow{ color:var(--corallo-cupo); }
.sezione-scura p{ color:var(--inchiostro); }
.tris-scuro{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
}
.tris-scuro > div{
  padding:3rem 2rem;
  text-align:center;
  border-right:1px dashed var(--tortora);
}
.tris-scuro > div:last-child{ border-right:none; }

/* ------------------------------------------------------------
   Footer corallo (Doc §0.3, layout stile proposta 13)
   ------------------------------------------------------------ */
footer.sito{
  background:var(--corallo-cupo); /* 11/09/2026: contrasto WCAG AA del testo bianco (4,7:1; con il corallo chiaro era 3,2:1) */
  color:#fff;
  margin-top:2.8rem;
  padding:3.2rem 1.4rem 1.6rem;
}
.footer-griglia{
  max-width:1080px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:2.5rem;
  align-items:start;
}
/* rosso 25/07: 3 colonne e meno margine laterale */
.footer-griglia.footer-tre{
  max-width:1240px;
  grid-template-columns:1fr 1fr 1fr;
  align-items:stretch; /* prova 28/07: colonne a pari altezza */
}
/* prova 28/07: le 3 colonne iniziano e finiscono alla stessa linea —
   ogni colonna è un flex verticale e il contenuto si distribuisce sull'altezza comune */
.footer-tre > *{ display:flex; flex-direction:column; }
.footer-tre .footer-brand{ justify-content:space-between; }
.footer-tre .footer-brand .motto{ margin-bottom:0; }
/* il flex di colonna stirerebbe l'img a tutta larghezza: proporzioni originali */
.footer-tre .footer-brand img{ align-self:flex-start; }
/* lista singola come in origine, ma compressa e distribuita:
   le voci riempiono esattamente l'altezza delle altre colonne */
.footer-nav-colonne{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.footer-tre .footer-nav a{ padding:0; line-height:1.45; }
.footer-tre .footer-colonna-contatti .footer-contatti{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.footer-tre .footer-nav{ text-align:left; } /* 23/08 Laura: voci a sinistra, speculari ai contatti */
.footer-colonna-contatti{ text-align:right; }
.footer-colonna-contatti h3{
  color:#fff;
  font-family:var(--sans);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.28em;
  text-transform:uppercase;
  margin-bottom:1rem;
}
.footer-brand img{
  height:150px;
  width:auto;
  background:#fff;
  border-radius:18px;
  padding:10px;
}
.footer-brand .motto{
  font-family:var(--script);
  font-size:1.7rem;
  line-height:1.25;
  margin:1rem 0 .8rem;
  color:#fff;
}
.footer-contatti{ font-size:.92rem; line-height:2; }
.footer-contatti a{ color:#fff; text-decoration:underline; text-decoration-style:dotted; }
.footer-contatti a:hover{ color:var(--nero); }
.footer-nav{ text-align:right; }
.footer-nav h3{
  color:#fff;
  font-family:var(--sans);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.28em;
  text-transform:uppercase;
  margin-bottom:1rem;
}
.footer-nav a{
  display:block;
  color:#fff;
  text-decoration:none;
  font-size:.9rem;
  padding:.22rem 0;
}
.footer-nav a:hover{ color:var(--nero); }
.footer-legale{
  max-width:1080px;
  margin:2.4rem auto 0;
  padding-top:1.1rem;
  border-top:1px dashed rgba(255,255,255,.45);
  font-size:.75rem;
  color:#fff; /* 11/09/2026: contrasto AA sul corallo cupo */
  display:flex;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}
.footer-legale a{ color:#fff; }

/* ------------------------------------------------------------
   Prodotti: griglia zigzag (Doc §1.2)
   ------------------------------------------------------------ */
.zigzag{ display:grid; gap:2.6rem; margin-top:2rem; }
.zig{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2.5rem;
  align-items:center;
}
.zig:nth-child(even) .zig-testo{ order:2; }
.zig:nth-child(even) .zig-visual{ order:1; }
.zig-visual .foto-manca{ min-height:440px; } /* 23/08 Laura: foto piu' grandi */
.zig-testo h3{ font-size:1.7rem; }
.zig-testo .freccia{
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--corallo-cupo);
  border-bottom:2px dashed var(--corallo);
  padding-bottom:.2rem;
}
.zig-testo .freccia:hover{ color:var(--corallo); }

/* cartellini prezzi con hover (Doc §1: stile proposta 14) */
.cartellini{
  display:flex;
  flex-wrap:wrap;
  gap:1.3rem;
  justify-content:center;
  margin-top:2rem;
}
/* rosso 25/07: cartellini CORALLO */
.cartellino{
  background:var(--corallo);
  border:1px solid var(--corallo-cupo);
  border-radius:14px 22px 22px 14px;
  padding:1.1rem 1.6rem 1rem 2.2rem;
  position:relative;
  min-width:210px;
  text-align:left;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.cartellino::before{ /* foro del cartellino */
  content:"";
  position:absolute;
  left:.75rem;
  top:50%;
  width:11px; height:11px;
  margin-top:-6px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.85);
  background:var(--panna);
}
.cartellino:hover{
  transform:translateY(-4px) rotate(-1.2deg);
  box-shadow:0 16px 30px -14px rgba(214,58,51,.6);
  border-color:var(--nero);
}
.cartellino .capo{
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#fff;
}
.cartellino .prezzo{
  font-family:var(--serif);
  font-size:1.5rem;
  font-weight:600;
  color:#fff;
}
.cartellino .prezzo small{ font-size:.62em; color:rgba(255,255,255,.85); font-weight:500; }

/* box chiusura (Doc §1.3) */
.box-impatto{
  background:var(--panna-scura);
  border:1px solid rgba(28,27,26,.15);
  border-radius:28px;
  padding:2.6rem 2rem;
  text-align:center;
}

/* ------------------------------------------------------------
   Su misura: barra numeri (Doc §2)
   ------------------------------------------------------------ */
.numeri-bar{
  background:var(--nero);
  color:var(--panna);
  padding:2.6rem 0;
}
.numeri{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.6rem;
  max-width:1080px;
  margin:0 auto;
  padding:0 1.4rem;
  text-align:center;
}
.numero-blocco .cifra{
  font-family:var(--serif);
  font-size:clamp(2.6rem, 5vw, 3.8rem);
  font-weight:600;
  color:var(--corallo);
  line-height:1.05;
}
.numero-blocco .spiega{ font-size:.85rem; color:rgba(250,246,240,.85); }

/* timeline verticale scroll-driven (Doc §2.2) */
.timeline{ position:relative; margin-top:2.2rem; }
.timeline::before{
  content:"";
  position:absolute;
  left:50%;
  top:0; bottom:0;
  border-left:2px dashed rgba(255,83,75,.5);
}
.tappa-riga{
  display:grid;
  grid-template-columns:1fr 90px 1fr;
  gap:0;
  align-items:center;
  margin-bottom:2.6rem;
}
.tappa-icona{
  grid-column:2;
  width:64px; height:64px;
  margin:0 auto;
  border-radius:50%;
  background:var(--carta);
  border:1.5px solid var(--corallo);
  outline:1px dashed rgba(255,83,75,.5);
  outline-offset:4px;
  display:grid;
  place-items:center;
  color:var(--corallo-cupo);
  position:relative;
  z-index:1;
}
.tappa-icona svg{ width:30px; height:30px; }
.tappa-testo h3{ margin-bottom:.3rem; }
.tappa-testo p{ font-size:.95rem; margin:0; }
.tappa-riga .tappa-testo{ grid-column:1; grid-row:1; padding-right:1.2rem; text-align:right; }
.tappa-riga .tappa-visual{ grid-column:3; grid-row:1; padding-left:1.2rem; }
.tappa-riga.inversa .tappa-testo{ grid-column:3; text-align:left; padding-right:0; padding-left:1.2rem; }
.tappa-riga.inversa .tappa-visual{ grid-column:1; padding-left:0; padding-right:1.2rem; }
.tappa-visual .foto-manca{ min-height:330px; } /* 23/08 Laura: foto piu' grandi */

/* ------------------------------------------------------------
   Quiz step-by-step (Doc §2.3)
   ------------------------------------------------------------ */
.quiz{
  background:var(--carta);
  border:1px solid rgba(28,27,26,.18);
  border-radius:26px;
  padding:2.6rem 2rem;
  max-width:820px;
  margin:2rem auto 0;
  box-shadow:0 18px 40px -28px rgba(28,27,26,.4);
}
.quiz-step{ display:none; }
.quiz-step.attivo{ display:block; animation:apparire .45s ease both; }
.quiz-domanda{ font-family:var(--serif); font-size:1.5rem; font-weight:600; color:var(--nero); margin-bottom:1.4rem; text-align:center; }
.quiz-opzioni{ display:grid; gap:.8rem; }
.quiz-opzione{
  display:flex;
  align-items:center;
  gap:.9rem;
  width:100%;
  background:var(--panna);
  border:1.5px solid rgba(28,27,26,.16);
  border-radius:14px;
  padding:1rem 1.2rem;
  font-family:var(--sans);
  font-size:.95rem;
  color:var(--inchiostro);
  text-align:left;
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease, transform .2s ease;
}
.quiz-opzione:hover{ border-color:var(--corallo); background:var(--corallo-velo); transform:translateX(4px); }
.quiz-opzione.scelta{ border-color:var(--corallo); background:var(--corallo-velo); box-shadow:inset 3px 0 0 var(--corallo); }
.quiz-istruzione{ font-size:.85rem; color:var(--tortora-scuro, #8a8378); text-align:center; margin:-.8rem 0 1rem; }
/* pulsante per tornare indietro nel quiz (rosso 25/07) */
.quiz-indietro{
  display:inline-flex; align-items:center; gap:.45rem;
  background:none; border:none; cursor:pointer;
  font:inherit; font-size:.82rem; font-weight:600;
  color:var(--corallo-cupo);
  letter-spacing:.04em;
  margin:.2rem auto .8rem;
  padding:.3rem .6rem;
  border-bottom:1px dashed rgba(255,83,75,.5);
}
.quiz-indietro:hover{ color:var(--nero); border-color:var(--nero); }
.quiz-indietro .pe-ic{ transform:scaleX(-1); }
.quiz-indietro[hidden]{ display:none; }
.quiz-libero{
  width:100%;
  margin-top:.9rem;
  background:var(--panna);
  border:1.5px solid rgba(28,27,26,.16);
  border-radius:14px;
  padding:.9rem 1.2rem;
  font-family:var(--sans);
  font-size:.95rem;
  color:var(--inchiostro);
  resize:vertical;
}
.quiz-libero:focus{ outline:none; border-color:var(--corallo); }
.quiz-avanti{ margin-top:1.2rem; }

/* badge carrello L'Aura nell'header (condiviso tra i due layout) */
.aura-carrello-link{ position:relative; display:inline-flex; }
.aura-carrello-badge{
  position:absolute; top:-7px; right:-9px;
  min-width:18px; height:18px; padding-inline:4px;
  background:var(--corallo-cupo); color:#fff;
  border-radius:999px; font-size:.68rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--sans);
}
.quiz-opzione .emoji{ font-size:1.3rem; flex:none; }
.quiz-progresso{
  display:flex;
  justify-content:center;
  gap:.5rem;
  margin-bottom:1.6rem;
}
.quiz-progresso span{
  width:34px; height:5px;
  border-radius:99px;
  background:rgba(28,27,26,.14);
}
.quiz-progresso span.fatto{ background:var(--corallo); }
.quiz-finale{ text-align:center; }

/* ------------------------------------------------------------
   Regala: pacchetti (Doc §3)
   ------------------------------------------------------------ */
.pacchetti{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.6rem; margin-top:2rem; }
.pacchetto-foto{
  margin:-2.1rem -1.9rem 1.3rem;
  border-radius:24px 24px 0 0;
  overflow:hidden;
  aspect-ratio:16/9;
  position:relative;
  background:var(--panna-scura);
}
.pacchetto-foto img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.pacchetto{
  background:var(--carta);
  border:1px solid rgba(28,27,26,.16);
  border-radius:24px;
  padding:2.1rem 1.9rem;
  transition:transform .3s ease, box-shadow .3s ease;
  display:flex;
  flex-direction:column;
}
/* rosso 25/07: hover più deciso ("troppo soft ora") */
.pacchetto:hover{
  transform:translateY(-10px) scale(1.025) rotate(-.6deg);
  box-shadow:0 28px 54px -20px rgba(28,27,26,.4);
  border-color:var(--corallo);
}
.pacchetto h3{ display:flex; align-items:center; gap:.5rem; }
.pacchetto .prezzo{
  font-family:var(--serif);
  font-size:1.7rem;
  font-weight:700;
  color:var(--nero);
  margin:.6rem 0 1.2rem;
}
.pacchetto .btn{ align-self:flex-start; margin-top:auto; }
.nota-eleganza{
  margin-top:2.2rem;
  background:var(--carta);
  border:1.5px dashed var(--corallo);
  border-radius:18px;
  padding:1.5rem 1.8rem;
  font-size:.95rem;
}
/* rosso 25/07: la promessa di eleganza in corallo pieno, come il Manifesto Green */
.nota-eleganza--corallo{
  background:var(--corallo);
  border:none;
  color:#fff;
  position:relative;
  padding:1.7rem 2rem;
}
.nota-eleganza--corallo::before{
  content:"";
  position:absolute;
  inset:10px;
  border:2px dashed rgba(255,255,255,.55);
  border-radius:12px;
  pointer-events:none;
}
.nota-eleganza--corallo a{ color:#fff; }

/* passi orizzontali (Doc §3.3 / §7 mission) */
.passi{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; margin-top:2rem; }

/* ------------------------------------------------------------
   Esperienze (Doc §4)
   ------------------------------------------------------------ */
.esperienze-griglia{ display:grid; grid-template-columns:1fr 1fr; gap:1.8rem; margin-top:2rem; }
.esperienza{
  background:var(--carta);
  border:1px solid rgba(28,27,26,.16);
  border-radius:24px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .3s ease, box-shadow .3s ease;
}
.esperienza:hover{ transform:translateY(-5px); box-shadow:0 20px 40px -24px rgba(28,27,26,.4); }
.esperienza .foto-manca{ border-radius:0; border-left:none; border-right:none; border-top:none; min-height:340px; } /* 23/08 Laura */
.esperienza .corpo{ padding:1.8rem 1.7rem; display:flex; flex-direction:column; flex:1; }
.esperienza .ideale{
  font-size:.82rem;
  color:var(--corallo-cupo);
  border-top:1px dashed rgba(255,83,75,.4);
  padding-top:.8rem;
  margin:1rem 0 1.2rem;
}
.esperienza .btn{ align-self:flex-start; margin-top:auto; }

/* ------------------------------------------------------------
   Ispirazioni (Doc §6)
   ------------------------------------------------------------ */
.bollino{
  position:absolute;
  top:1rem; left:1rem;
  background:var(--corallo);
  color:#fff;
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  border-radius:999px;
  padding:.35rem .9rem;
  z-index:2;
}
.pronta-card{ position:relative; text-align:left; padding:0; overflow:hidden; }
.pronta-card .foto-manca{ border-radius:0; border:none; border-bottom:1.5px dashed var(--tortora); min-height:230px; }
.pronta-card .corpo{ padding:1.3rem 1.4rem 1.5rem; }
.pronta-card .prezzo{ font-family:var(--serif); font-size:1.35rem; font-weight:600; color:var(--corallo-cupo); }
.pronta-card .taglia{
  display:inline-block;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.12em;
  border:1px solid rgba(28,27,26,.3);
  border-radius:6px;
  padding:.15rem .55rem;
  margin-right:.6rem;
}

.mosaico{ columns:3 240px; column-gap:1.2rem; margin-top:2rem; }
.mosaico .tessera{
  position:relative;
  break-inside:avoid;
  margin-bottom:1.2rem;
  border-radius:18px;
  overflow:hidden;
  cursor:pointer;
}
.mosaico .tessera .foto-manca{ border-radius:18px; }
.mosaico .tessera:nth-child(3n+1) .foto-manca{ min-height:300px; }
.mosaico .tessera:nth-child(3n+2) .foto-manca{ min-height:210px; }
.mosaico .tessera:nth-child(3n) .foto-manca{ min-height:260px; }
.mosaico .velo{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  align-content:center;
  gap:1.1rem; /* 28/07: respiro tra domanda e invito */
  /* rosso 25/07 (leggibilità): velo tortora più scuro sotto la scritta corsiva */
  background:rgba(90,78,66,.62);
  opacity:0;
  transition:opacity .3s ease;
  text-align:center;
  padding:1rem;
}
.mosaico .tessera:hover .velo{ opacity:1; }
.mosaico .velo span{
  font-family:var(--script);
  font-size:2.1rem; /* 28/07: era 1.5rem, si leggeva poco */
  line-height:1.3;
  color:#fff;
  text-shadow:0 2px 12px rgba(28,27,26,.55);
}

.slider-tessuti{
  display:flex;
  gap:1rem;
  overflow-x:auto;
  padding:1.4rem .2rem;
  scroll-snap-type:x mandatory;
}
.slider-tessuti .tessuto{
  flex:0 0 280px; /* 23/08 Laura: foto piu' grandi */
  scroll-snap-align:start;
}

/* rosso 25/07: gallery e tessuti a tutta larghezza con frecce per scorrere */
.slider-frecce{ position:relative; }
.slider-frecce .mosaico-scorrevole,
.slider-frecce .slider-tessuti{ padding-left:1.4rem; padding-right:1.4rem; }
.mosaico.mosaico-scorrevole{
  columns:auto; column-gap:0;
  display:flex; gap:1.2rem;
  overflow-x:auto;
  scroll-snap-type:x proximity;
  margin-top:2rem;
  padding-bottom:.6rem;
}
.mosaico-scorrevole .tessera{
  flex:0 0 300px;
  scroll-snap-align:start;
  margin-bottom:0;
}
.mosaico-scorrevole .tessera .foto-manca{ min-height:300px !important; }
.slider-freccia{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:3;
  width:44px; height:44px;
  display:grid; place-items:center;
  border-radius:50%;
  border:1.5px solid rgba(255,83,75,.5);
  background:rgba(250,246,240,.94);
  color:var(--corallo-cupo);
  cursor:pointer;
  box-shadow:0 8px 20px -10px rgba(28,27,26,.4);
  transition:background .25s ease, transform .25s ease;
}
.slider-freccia:hover{ background:#fff; transform:translateY(-50%) scale(1.08); }
/* 28/07: la freccia sparisce quando in quella direzione non c'è più corsa */
.slider-freccia{ transition:background .25s ease, transform .25s ease, opacity .3s ease; }
.slider-freccia.nascosta{ opacity:0; pointer-events:none; }
/* 28/07: niente barre di scorrimento sotto gli slider (si scorre con frecce/dito/rotellina) */
.mosaico-scorrevole, .slider-tessuti, .recensioni--slider{ scrollbar-width:none; }
.mosaico-scorrevole::-webkit-scrollbar,
.slider-tessuti::-webkit-scrollbar,
.recensioni--slider::-webkit-scrollbar{ display:none; }
.slider-freccia.sx{ left:.9rem; }
.slider-freccia.dx{ right:.9rem; }
.slider-freccia.sx .pe-ic{ transform:scaleX(-1); }
.slider-freccia .pe-ic{ width:1.2em; height:1.2em; }
.slider-tessuti .foto-manca{ min-height:340px; border-radius:16px; padding:.8rem; } /* 23/08 */
.slider-tessuti .foto-manca .nota{ font-size:.66rem; }

.striscia-ig{
  background:var(--panna-scura);
  border-radius:26px;
  padding:2.4rem 2rem;
  text-align:center;
}
.ig-anteprime{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:1.6rem; }
.ig-anteprime[hidden]{ display:none; } /* 08/09: senza consenso ai contenuti esterni il feed resta nascosto (display:grid vinceva su hidden) */
/* 09/09/2026: il tasto d'acquisto porta il totale nel testo: deve restare su UNA riga fino a 390px */
.form-contatti button[type="submit"]{ white-space:nowrap; }
@media (max-width:520px){ .form-contatti button[type="submit"]{ font-size:.66rem; letter-spacing:.08em; padding-inline:1.1rem; } }
@media (max-width:400px){ .form-contatti button[type="submit"]{ font-size:.6rem; letter-spacing:.06em; padding-inline:.9rem; } }
/* tabelle lunghe (cookie policy, listini): scorrono da sole invece di sfondare gli schermi stretti */
.tabella-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tabella-scroll > table{ min-width:min(100%, 520px); }
/* 09/09/2026: a schermo stretto i pulsanti con testo lungo devono stare su UNA riga */
@media (max-width:520px){ .btn{ font-size:.7rem; letter-spacing:.1em; padding:.9rem 1.5rem; } }
@media (max-width:400px){ .btn{ font-size:.66rem; letter-spacing:.08em; padding:.85rem 1.2rem; } }
.ig-anteprime a{ display:block; }
/* 09/09/2026 (Laura): riquadri 4:5 come i post di Instagram, non più schiacciati */
.ig-anteprime img, .ig-anteprime .foto-manca{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:14px; }
.ig-anteprime .foto-manca{ min-height:0; }

/* ------------------------------------------------------------
   Dietro le quinte (Doc §7)
   ------------------------------------------------------------ */
.due-colonne{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:2.6rem;
  align-items:center;
}
.manifesto-green{
  background:var(--corallo);
  color:#fff;
  border-radius:28px;
  margin:0 1.4rem;
  position:relative;
}
.manifesto-green::before{
  content:"";
  position:absolute;
  inset:14px;
  border:2px dashed rgba(255,255,255,.55);
  border-radius:20px;
  pointer-events:none;
}
.manifesto-green h2, .manifesto-green h3{ color:#fff; }
/* rosso 25/07: icona foglia più staccata dalla scritta sopra */
.manifesto-green .medaglione-ic--centro{ margin-top:.6rem !important; margin-bottom:1.1rem !important; }
.manifesto-green p{ color:rgba(255,255,255,.94); }
.manifesto-green .eyebrow{ color:var(--nero); }

.colonne-contatti{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; margin-top:2rem; }

/* form contatti (Doc §7.6) */
.form-contatti{
  max-width:720px;
  margin:2rem auto 0;
  display:grid;
  gap:1.1rem;
}
.form-contatti label{
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--inchiostro);
  display:block;
  margin-bottom:.35rem;
}
.form-contatti input,
.form-contatti select,
.form-contatti textarea{
  width:100%;
  font-family:var(--sans);
  font-size:.98rem;
  color:var(--inchiostro);
  background:var(--carta);
  border:1.5px solid rgba(28,27,26,.2);
  border-radius:14px;
  padding:.95rem 1.1rem;
  transition:border-color .2s ease, box-shadow .2s ease;
}
/* radio e checkbox NON devono stirarsi a tutta larghezza (allineati col testo accanto) */
.form-contatti input[type="radio"],
.form-contatti input[type="checkbox"]{
  width:auto;
  flex:none;
  margin:0;
  padding:0;
  border:none;
  box-shadow:none;
  accent-color:var(--corallo);
}
.form-contatti input:focus,
.form-contatti select:focus,
.form-contatti textarea:focus{
  outline:none;
  border-color:var(--corallo);
  box-shadow:0 0 0 4px var(--corallo-velo);
}
.form-contatti textarea{ min-height:150px; resize:vertical; }
.form-contatti .btn{ justify-self:center; margin-top:.4rem; }
.form-contatti .form-nota{ font-size:.85rem; line-height:1.5; color:#8d7f71; margin:0; text-align:center; }
.form-contatti .form-nota a{ color:var(--corallo-cupo); text-decoration:underline; }

/* ------------------------------------------------------------
   ABC dell'Intimo / blog (Doc §8)
   ------------------------------------------------------------ */
.filtri{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
  justify-content:center;
  margin-top:1.6rem;
}
.filtro{
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--corallo-cupo);
  background:transparent;
  border:1.5px solid rgba(255,83,75,.45);
  border-radius:999px;
  padding:.5rem 1.2rem;
  cursor:pointer;
  font-family:var(--sans);
  transition:background .2s ease, color .2s ease;
}
.filtro:hover, .filtro.attivo{ background:var(--corallo); color:#fff; }

.articoli{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.8rem; margin-top:2rem; }
.articolo{
  background:var(--carta);
  border:1px solid rgba(28,27,26,.16);
  border-radius:22px;
  overflow:hidden;
  text-align:left;
  transition:transform .3s ease, box-shadow .3s ease;
}
.articolo:hover{ transform:translateY(-4px); box-shadow:0 18px 36px -22px rgba(28,27,26,.4); }
.articolo .foto-manca{ border-radius:0; border:none; border-bottom:1.5px dashed var(--tortora); min-height:180px; }
.articolo .corpo{ padding:1.4rem 1.5rem 1.6rem; }
.articolo .categoria{
  display:inline-block;
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--corallo-cupo);
  background:var(--corallo-velo);
  border-radius:999px;
  padding:.28rem .8rem;
  margin-bottom:.7rem;
}
.articolo h3{ font-size:1.25rem; }
.articolo .snippet{ font-size:.92rem; }

/* ------------------------------------------------------------
   Effetti reveal allo scroll (app.js)
   ------------------------------------------------------------ */
html.fx .rv{ opacity:0; transform:translateY(30px); transition:opacity 1.25s ease, transform 1.25s cubic-bezier(.16,.84,.3,1); } /* 23/08: piu' lento */
html.fx .rv.in{ opacity:1; transform:none; }
html.fx hr.cucitura.rv{ transform:none; clip-path:inset(-10px 100% -10px 0); transition:clip-path 1.4s ease .1s; }
html.fx hr.cucitura.rv.in{ clip-path:inset(-10px 0 -10px 0); }

/* fila con comparsa uno-alla-volta da sinistra a destra (rosso 25/07:
   come-nasce, fasi regalo, recensioni) */
html.fx .rv-fila > *{ opacity:0; transform:translateY(26px); transition:opacity 1s ease, transform 1s cubic-bezier(.16,.84,.3,1); } /* 23/08: piu' lento */
html.fx .rv-fila.in > *{ opacity:1; transform:none; }
html.fx .rv-fila.in > *:nth-child(1){ transition-delay:.05s; }
html.fx .rv-fila.in > *:nth-child(2){ transition-delay:.4s; }
html.fx .rv-fila.in > *:nth-child(3){ transition-delay:.75s; }
html.fx .rv-fila.in > *:nth-child(4){ transition-delay:1.1s; }
html.fx .rv-fila.in > *:nth-child(5){ transition-delay:1.45s; }
html.fx .rv-fila.in > *:nth-child(6){ transition-delay:1.8s; }

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
@media (max-width:920px){
  .griglia-4{ grid-template-columns:repeat(2,1fr); }
  .numeri{ grid-template-columns:repeat(2,1fr); }
  .tris-scuro{ grid-template-columns:1fr; }
  .tris-scuro > div{ border-right:none; border-bottom:1px dashed var(--tortora); }
  .tris-scuro > div:last-child{ border-bottom:none; }
  .footer-griglia, .footer-griglia.footer-tre{ grid-template-columns:1fr; }
  .footer-nav, .footer-tre .footer-nav{ text-align:left; }
  .footer-colonna-contatti{ text-align:left; }
  .pacchetti{ grid-template-columns:1fr; }
  .esperienze-griglia{ grid-template-columns:1fr; }
  .due-colonne{ grid-template-columns:1fr; }
  .colonne-contatti{ grid-template-columns:1fr; }
  .passi{ grid-template-columns:1fr; }
  .articoli{ grid-template-columns:1fr; }
  .recensioni{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .griglia-3, .griglia-2, .griglia-4{ grid-template-columns:1fr; }
  section{ padding:2rem 0; }
  .zig{ grid-template-columns:1fr; gap:1.2rem; }
  .zig:nth-child(even) .zig-testo{ order:1; }
  .zig:nth-child(even) .zig-visual{ order:2; }
  /* timeline: linea a sinistra, tutto in colonna */
  .timeline::before{ left:31px; }
  .tappa-riga, .tappa-riga.inversa{
    grid-template-columns:64px 1fr;
    gap:1rem;
  }
  .tappa-icona{ grid-column:1; grid-row:1; margin:0; }
  .tappa-riga .tappa-testo,
  .tappa-riga.inversa .tappa-testo{
    grid-column:2; grid-row:1;
    text-align:left; padding:0;
  }
  .tappa-riga .tappa-visual,
  .tappa-riga.inversa .tappa-visual{
    grid-column:2; grid-row:2;
    padding:0; margin-top:.8rem;
  }
  .banner-video .citazione-box{ margin:1rem; justify-self:stretch; }
  .numeri{ grid-template-columns:1fr 1fr; gap:1.2rem; }
  .footer-legale{ flex-direction:column; gap:.2rem; }
}
/* 21/09/2026: sotto i 1180px la riga legale parte vicino al bordo sinistro e a fine pagina finiva sotto il
   pulsante accessibilità fisso (52px + 18px dal fondo): spazio in più sotto il piè di pagina */
@media (max-width:1180px){
  footer.sito{ padding-bottom:5.6rem; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  html.fx .rv{ opacity:1; transform:none; }
  html.fx hr.cucitura.rv{ clip-path:none; }
}

/* ------------------------------------------------------------
   Consenso cookie: banner + preferenze
   (Accetta/Rifiuta a pari evidenza — Linee guida Garante 2021)
   ------------------------------------------------------------ */
.consenso{ position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:1200; width:min(720px, calc(100vw - 28px)); }
.consenso[hidden]{ display:none; }
.consenso-banner{
  background:var(--nero);
  color:var(--panna);
  font-size:.85rem;
  border-radius:16px;
  padding:1.1rem 1.4rem;
  box-shadow:0 18px 40px -18px rgba(28,27,26,.6);
}
.consenso-banner a{ color:var(--corallo); }
.consenso-testo{ margin:0 0 .8rem; line-height:1.55; }
.consenso-bottoni{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; }
.consenso-btn{
  font-family:var(--sans);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  border:none;
  border-radius:999px;
  padding:.6rem 1.4rem;
  cursor:pointer;
}
.consenso-btn--accetta{ background:var(--corallo-cupo); color:#fff; } /* 11/09/2026: contrasto AA (4,7:1) */
.consenso-btn--accetta:hover{ background:var(--nero); }
.consenso-btn--rifiuta{ background:var(--panna); color:var(--nero); }
.consenso-btn--rifiuta:hover{ background:var(--panna-scura); }
.consenso-btn--testo{ background:none; color:inherit; text-decoration:underline; text-underline-offset:3px; padding:.6rem .4rem; letter-spacing:.08em; }
.consenso-btn--testo:hover{ color:var(--corallo); }

.consenso-modal{
  position:fixed; inset:0; z-index:1300;
  background:rgba(28,27,26,.55);
  display:flex; align-items:center; justify-content:center;
  padding:18px;
}
.consenso-modal[hidden]{ display:none; }
body.consenso-aperto{ overflow:hidden; }
.consenso-scheda{
  position:relative;
  background:var(--carta);
  color:var(--inchiostro);
  width:min(560px, 100%);
  max-height:calc(100vh - 36px);
  overflow:auto;
  border-radius:18px;
  padding:1.8rem 1.6rem 1.4rem;
  box-shadow:0 24px 60px -20px rgba(28,27,26,.5);
}
.consenso-scheda h2{ font-family:var(--serif); font-size:1.6rem; margin:0 0 .4rem; }
.consenso-scheda a{ color:var(--corallo); }
.consenso-sotto{ font-size:.85rem; margin:0 0 1.1rem; line-height:1.55; }
.consenso-chiudi{
  position:absolute; top:.8rem; right:.9rem;
  background:none; border:none; cursor:pointer;
  font-size:1.5rem; line-height:1; color:var(--tortora);
}
.consenso-chiudi:hover{ color:var(--nero); }
.consenso-voce{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.75rem 0;
  border-top:1px dashed var(--tortora);
  font-size:.85rem;
}
.consenso-voce strong{ display:block; font-family:var(--sans); letter-spacing:.04em; }
.consenso-voce span{ color:#8d7f71; line-height:1.5; display:block; }
.consenso-modal-bottoni{
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
  margin-top:1.1rem; padding-top:1rem;
  border-top:1px dashed var(--tortora);
}

/* interruttore on/off */
.interruttore{ position:relative; flex:0 0 auto; width:46px; height:26px; cursor:pointer; }
.interruttore input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.interruttore i{
  position:absolute; inset:0;
  background:var(--tortora);
  border-radius:999px;
  transition:background .2s ease;
}
.interruttore i::after{
  content:'';
  position:absolute; top:3px; left:3px;
  width:20px; height:20px;
  background:#fff;
  border-radius:50%;
  transition:transform .2s ease;
}
.interruttore input:checked + i{ background:var(--corallo); }
.interruttore input:checked + i::after{ transform:translateX(20px); }
.interruttore input:focus-visible + i{ outline:2px solid var(--corallo); outline-offset:2px; }
.interruttore--fisso{ opacity:.55; cursor:default; }
.interruttore--fisso input{ cursor:default; }

/* segnaposto contenuti bloccati (es. feed Instagram senza consenso) */
.consenso-blocco{
  background:var(--panna-scura);
  border:1px dashed var(--tortora);
  border-radius:14px;
  padding:1.4rem 1.2rem;
  text-align:center;
  font-size:.9rem;
}
.consenso-blocco[hidden]{ display:none; }
.consenso-blocco p{ margin:0 0 .9rem; }
.consenso-blocco .btn{ margin-bottom:.6rem; }
.consenso-blocco a{ display:block; font-size:.8rem; color:var(--corallo); }

/* ------------------------------------------------------------
   Widget accessibilità (flottante basso-sinistra)
   ------------------------------------------------------------ */
.a11y{ position:fixed; left:18px; bottom:18px; z-index:999; font-family:var(--sans); }
.a11y-btn{
  width:52px; height:52px;
  border-radius:50%;
  background:var(--carta);
  border:1px solid rgba(28,27,26,.35);
  outline:1.5px dashed rgba(255,83,75,.55);
  outline-offset:4px;
  display:grid;
  place-items:center;
  cursor:pointer;
  color:var(--nero);
  box-shadow:0 14px 30px -14px rgba(28,27,26,.55);
  transition:transform .25s ease;
}
.a11y-btn:hover{ transform:translateY(-2px); }
.a11y-btn svg{ width:26px; height:26px; }
.a11y-panel{
  position:absolute;
  left:0;
  bottom:calc(100% + 14px);
  width:230px;
  background:var(--carta);
  border:1px solid rgba(28,27,26,.3);
  border-radius:16px;
  padding:1rem 1rem .8rem;
  box-shadow:0 22px 44px -22px rgba(28,27,26,.5);
  display:none;
}
.a11y.aperto .a11y-panel{ display:block; animation:apparire .3s ease both; }
.a11y-titolo{
  font-family:var(--serif);
  font-size:1.05rem;
  font-weight:600;
  color:var(--nero);
  margin:0 0 .55rem;
  padding-bottom:.5rem;
  border-bottom:1px dashed rgba(255,83,75,.5);
}
.a11y-opzione{
  display:block;
  width:100%;
  background:none;
  border:none;
  border-radius:10px;
  cursor:pointer;
  font-family:var(--sans);
  font-size:.85rem;
  font-weight:500;
  color:var(--inchiostro);
  padding:.5rem .55rem;
  text-align:left;
  transition:background .2s ease;
}
.a11y-opzione:hover{ background:rgba(28,27,26,.05); }
.a11y-opzione.attiva{ background:var(--corallo-velo); color:var(--corallo-cupo); font-weight:600; }

/* effetti delle preferenze */
html.a11y-testo{ font-size:115%; }
html.a11y-font body, html.a11y-font h1, html.a11y-font h2, html.a11y-font h3,
html.a11y-font .script, html.a11y-font .sottotitolo-corsivo, html.a11y-font .firma,
html.a11y-font .hero h1 .corsivo{
  font-family:Verdana, Arial, sans-serif !important;
  font-style:normal !important;
}
html.a11y-font .script, html.a11y-font .sottotitolo-corsivo, html.a11y-font .hero h1 .corsivo{ font-size:1em; }
html.a11y-contrasto{ --panna:#ffffff; --panna-scura:#f2f2f2; --carta:#ffffff; --header-bg:#ffffff; --inchiostro:#111111; --nero:#000000; --corallo:#c22a24; --corallo-cupo:#9c1f1a; --tortora:#555555; }
html.a11y-contrasto body::before{ display:none; }
html.a11y-contrasto a{ text-decoration:underline; }
html.a11y-calma *{ animation:none !important; transition:none !important; }
html.a11y-calma .rv{ opacity:1 !important; transform:none !important; }
html.a11y-calma hr.cucitura.rv{ clip-path:none !important; }

/* ------------------------------------------------------------
   Ricerca interna: overlay + pagina risultati
   ------------------------------------------------------------ */
.cerca-overlay{
  position:fixed; inset:0; z-index:1300;
  background:rgba(28,27,26,.55);
  display:flex; align-items:flex-start; justify-content:center;
  padding:clamp(60px, 14vh, 140px) 18px 18px;
}
.cerca-overlay[hidden]{ display:none; }
body.cerca-aperta{ overflow:hidden; }
.cerca-scheda{
  position:relative;
  background:var(--carta);
  width:min(560px, 100%);
  border-radius:18px;
  padding:1.8rem 1.6rem 1.3rem;
  box-shadow:0 24px 60px -20px rgba(28,27,26,.5);
}
.cerca-chiudi{
  position:absolute; top:.8rem; right:.9rem;
  background:none; border:none; cursor:pointer;
  font-size:1.5rem; line-height:1; color:var(--tortora);
}
.cerca-chiudi:hover{ color:var(--nero); }
.cerca-form{ display:flex; gap:.7rem; align-items:stretch; margin-top:1.6rem; }
.cerca-form input[type="search"]{
  flex:1;
  font-family:var(--sans);
  font-size:1rem;
  color:var(--inchiostro);
  background:var(--panna);
  border:1px solid var(--tortora);
  border-radius:999px;
  padding:.7rem 1.2rem;
  min-width:0;
}
.cerca-form input[type="search"]:focus{ outline:2px solid var(--corallo); outline-offset:1px; border-color:transparent; }
.cerca-form .btn{ flex:0 0 auto; }
.cerca-suggerimenti{ font-size:.8rem; color:#8d7f71; margin:.9rem 0 0; }
.cerca-suggerimenti a{ color:var(--corallo); }
.cerca-gruppo{
  font-family:var(--sans);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--corallo-cupo);
  border-bottom:1px dashed var(--tortora);
  padding-bottom:.4rem;
  margin-bottom:.4rem;
}
.cerca-risultato{
  display:block;
  padding:.75rem .6rem;
  border-radius:12px;
  text-decoration:none;
  color:var(--inchiostro);
  transition:background .15s ease;
}
.cerca-risultato:hover{ background:var(--corallo-velo); }
.cerca-risultato strong{ display:block; font-family:var(--serif); font-size:1.15rem; }
.cerca-risultato span{ display:block; font-size:.85rem; color:#8d7f71; line-height:1.5; }
@media (max-width:560px){
  .cerca-form{ flex-direction:column; }
}

/* ------------------------------------------------------------
   Icone set «Filo» (scelto 14/07) — sostituiscono le emoji
   ------------------------------------------------------------ */
.pe-ic{
  width:1.1em; height:1.1em;
  display:inline-block;
  vertical-align:-.17em;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex:none;
}
.pe-ic .pieno{ fill:currentColor; stroke:none; }
h1 .pe-ic, h2 .pe-ic, h3 .pe-ic{ margin-left:.12em; }
/* icona come "capolettera" dei passi (es. Regala: icona sopra il titolo) */
.pe-ic--passo{ width:2rem; height:2rem; color:var(--corallo-cupo); }

/* medaglione cucito: icona nel tondo tratteggiato sopra i titoli (variante E, scelta 14/07) */
.medaglione-ic{
  display:grid; place-items:center;
  width:52px; height:52px;
  background:var(--carta);
  border:1.6px dashed rgba(255,83,75,.65);
  border-radius:50%;
  color:var(--corallo-cupo);
  margin:0 0 .85rem;
}
/* display:block: senza, l'svg inline "siede" sulla baseline e l'icona
   appare bassa nel cerchietto (rosso 25/07: centrare le icone) */
.medaglione-ic .pe-ic{ width:24px; height:24px; stroke-width:1.7; display:block; }
.medaglione-ic--centro{ margin-inline:auto; }
/* nei blocchi-intestazione il medaglione ASSORBE parte dello spazio tra moduli
   (ritmo verticale: non deve sommarsi ai gap decisi, ma viverci dentro) */
section .center > .medaglione-ic--centro,
section .wrap > .medaglione-ic--centro,
section.center .medaglione-ic--centro{ margin-top:-1.5rem; margin-bottom:.6rem; }
.carta-card .medaglione-ic--centro,
.pacchetto .medaglione-ic{ margin-top:0; margin-bottom:.85rem; }

/* ---- avvisi di vendita (gestiti da Laura in /atelier) ---- */
.avviso-sito{ background:var(--corallo-cupo, #d63a33); color:#fff; font-size:.9rem; }
.avviso-sito .pe-ic{ color:#fff; }
.avviso-sito a{ color:#fff; }

/* ============================================================
   Materiale Laura 23/08 — banner alti, mosaico Pinterest,
   bozzetto->foto sui prodotti, foto piu' grandi
   ============================================================ */
/* banner home: meno schiacciato, quasi tutta la finestra (esempio boutique di Laura) */
.banner-alto{ min-height:clamp(480px, 74vh, 840px) !important; }
/* 07/09 Laura: banner home mostrato per intero (niente object-fit: i piedi e le zampe di Cody non si tagliano) */
.banner-intero{ display:block; width:100%; height:auto; }
/* banner video: piu' raccolto e rettangolare, non piu' striscia */
/* 09/09/2026 (Laura): video suo al posto del segnaposto e riquadro piu' grande */
.banner-video-alto{ min-height:clamp(500px, 68vh, 760px); border-radius:26px; }
.banner-video-sfondo{ position:absolute; inset:0; overflow:hidden; background:var(--carta, #FAF6F0); }

/* ritratto "dietro le quinte" piu' grande */
.quinte-foto{ min-height:520px; }
/* 08/09 (Laura): il ritaglio parte dall'alto, cosi' il viso resta intero */
.quinte-foto .img-demo{ object-position:50% 12%; }

/* mosaico Pinterest: foto vere a proporzione naturale */
.mosaico .tessera-foto{ display:block; width:100%; border-radius:18px; }

/* bozzetto che diventa capo reale al passaggio del mouse (pagina prodotti) */
.bozzetto-scambio{
  position:relative;
  border-radius:22px;
  overflow:hidden;
  aspect-ratio:3/4;
  max-height:560px;
  background:var(--panna-scura);
  box-shadow:0 18px 36px -24px rgba(28,27,26,.35);
}
.bozzetto-scambio img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transition:opacity .6s ease;
}
.bozzetto-scambio .realizzato{ opacity:0; }
/* 10/09/2026 (Laura, email #62368): sul telefono il tocco restava "attaccato" e il bozzetto
   non tornava piu'. Ora il capo reale compare con la classe .mostra (tocca / tocca di nuovo),
   mentre l'hover vale solo dove il mouse c'e' davvero. */
.bozzetto-scambio.mostra .realizzato,
.bozzetto-scambio:focus-visible .realizzato{ opacity:1; }
@media (hover:hover){
  .bozzetto-scambio:hover .realizzato{ opacity:1; }
}
/* invito discreto: fa capire che il disegno "prende vita" */
.bozzetto-scambio::after{
  content:'passa il mouse: il bozzetto prende vita';
  position:absolute; left:50%; bottom:.8rem; transform:translateX(-50%);
  z-index:2; white-space:nowrap;
  font-size:.6rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:#8d7f71; background:rgba(250,246,240,.9);
  border:1px dashed rgba(185,169,154,.7); border-radius:999px;
  padding:.25rem .8rem;
  transition:opacity .4s ease;
  pointer-events:none;
}
@media (hover:hover){
  .bozzetto-scambio:hover::after{ opacity:0; }
}
@media (hover:none){
  /* sul touch: si tocca per vedere il capo, si ritocca per tornare al disegno */
  .bozzetto-scambio::after{ content:'tocca: il bozzetto prende vita'; }
  .bozzetto-scambio.mostra::after{ content:'tocca di nuovo: torna il bozzetto'; }
}

/* copertine ABC piu' grandi */
.articoli .foto-manca{ min-height:240px; }

@media (max-width:760px){
  /* 10/09/2026 (Laura, email #62368): sul telefono la scritta copriva i piedi di Laura e Cody:
     ora sta sotto la foto, centrata, senza tagliare nulla */
  #banner-home .link-angolo{
    position:static;
    display:block;
    width:max-content;
    max-width:calc(100% - 2rem);
    margin:.9rem auto 0;
    text-align:center;
  }
  .banner-alto{ min-height:clamp(340px, 52vh, 520px) !important; }
  /* 09/09/2026: col video di Laura la citazione non deve coprire tutto lo schermo del telefono */
  .banner-video-alto{ min-height:560px; }
  /* 10/09/2026 (Laura, email #62368): sul telefono il ritaglio verticale tagliava fuori
     la macchina da cucire e l'ago, che stanno a sinistra: il fotogramma scorre a destra */
  .banner-video .video-demo{ object-position:20% center; }
  .banner-video .citazione-box{ padding:1.3rem 1.4rem 1rem; align-self:end; }
  .banner-video blockquote.citazione{ font-size:1.02rem; line-height:1.4; }
  .banner-video .firma{ font-size:1.8rem; }
  .quinte-foto{ min-height:360px; }
  .bozzetto-scambio{ max-height:440px; }
}

/* figure dentro gli articoli del blog (immagini di Laura, formato social) */
.blog-figura{ max-width:520px; margin:2rem auto; }
.blog-figura img{ display:block; width:100%; border-radius:22px; box-shadow:0 16px 32px -22px rgba(28,27,26,.4); }

/* copertine ABC: poster di Laura mostrati per intero (mai ritagliati) */
.abc-copertina{
  display:block;
  width:100%;
  height:300px;
  object-fit:contain;
  background:var(--panna-scura);
  border-bottom:1.5px dashed var(--tortora);
}

/* gallery ispirazioni: mosaico Pinterest dentro un blocco che si scorre tutto insieme
   (richiesta Laura 23/08) */
.mosaico-blocco{ position:relative; margin-top:2rem; }
.mosaico-pista{
  max-height:min(1450px, 160vh);
  overflow-y:auto;
  scrollbar-width:none;
  border-radius:22px;
  scroll-behavior:auto;
}
.mosaico-pista::-webkit-scrollbar{ display:none; }
.mosaico-blocco .mosaico{ margin-top:0; }
/* sfumatura in basso: fa capire che il blocco continua */
.mosaico-blocco::after{
  content:'';
  position:absolute; left:0; right:0; bottom:0; height:110px;
  background:linear-gradient(to top, var(--panna) 12%, rgba(250,246,240,0));
  pointer-events:none;
  border-radius:0 0 22px 22px;
  transition:opacity .3s ease;
}
.mosaico-blocco.in-fondo::after{ opacity:0; }
.mosaico-freccia{
  position:absolute; left:50%; transform:translateX(-50%);
  z-index:3;
  width:46px; height:46px;
  display:grid; place-items:center;
  border-radius:50%;
  border:1.5px solid rgba(255,83,75,.5);
  background:rgba(250,246,240,.95);
  color:var(--corallo-cupo);
  cursor:pointer;
  box-shadow:0 8px 20px -10px rgba(28,27,26,.4);
  transition:background .25s ease, opacity .3s ease, transform .25s ease;
}
.mosaico-freccia:hover{ background:#fff; transform:translateX(-50%) scale(1.08); }
.mosaico-freccia.su{ top:.8rem; }
.mosaico-freccia.su .pe-ic{ transform:rotate(-90deg); }
.mosaico-freccia.giu{ bottom:1.2rem; }
.mosaico-freccia.giu .pe-ic{ transform:rotate(90deg); }
.mosaico-freccia .pe-ic{ width:1.25em; height:1.25em; }
.mosaico-freccia.nascosta{ opacity:0; pointer-events:none; }

/* ------------------------------------------------------------
   Area cliente "Il tuo spazio PennyElle" (08/09/2026)
   ------------------------------------------------------------ */
.spazio-avviso{ max-width:720px; margin:1.4rem auto 0; padding:.9rem 1.2rem; border-radius:14px; background:#EEF4EA; border:1px solid #A9C7A2; color:#2F4F2F; text-align:center; }
.spazio-avviso--errore{ background:#FBEDEB; border-color:#F3B3AE; color:#8A2A25; }
.spazio-esito{ max-width:720px; margin:1.6rem auto 0; text-align:center; }
.spazio-esito h3{ margin-top:0; }
.spazio-blocco{ margin-top:2rem; }
.spazio-blocco h2{ margin-top:0; font-size:1.5rem; }
.spazio-form{ margin-top:1rem; max-width:none; }
.spazio-scroll{ overflow-x:auto; }
.spazio-tabella{ width:100%; border-collapse:collapse; font-size:.92rem; }
.spazio-tabella th, .spazio-tabella td{ text-align:left; padding:.7rem .6rem; border-bottom:1px dashed rgba(28,27,26,.18); vertical-align:middle; }
.spazio-tabella th{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:#8d7f71; font-weight:600; }
.spazio-azioni{ white-space:nowrap; }
.spazio-azioni .btn{ font-size:.62rem; padding:.5rem 1rem; margin:.15rem .15rem .15rem 0; }
.spazio-stato{ display:inline-block; padding:.2rem .7rem; border-radius:999px; font-size:.78rem; background:#F1ECE4; }
.spazio-stato--pagato{ background:#EEF4EA; color:#2F4F2F; }
.spazio-stato--in_attesa{ background:#FFF3D6; color:#7A5200; }
.spazio-stato--rimborsato{ background:#E8F0F8; color:#1F4E79; }
.spazio-stato--annullato{ background:#F1ECE4; color:#6b6158; }
/* da telefono le tabelle dello spazio diventano schede impilate (niente scorrimento laterale) */
@media (max-width:768px){
  .spazio-tabella thead{ display:none; }
  .spazio-tabella, .spazio-tabella tbody, .spazio-tabella tr, .spazio-tabella td{ display:block; width:100%; }
  .spazio-tabella tr{ padding:.7rem 0; border-bottom:1px dashed rgba(28,27,26,.18); }
  .spazio-tabella td{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.25rem 0; border:none; text-align:right; }
  .spazio-tabella td::before{ content:attr(data-etichetta); flex:0 0 auto; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:#8d7f71; font-weight:600; text-align:left; }
  .spazio-tabella td:empty{ display:none; }
  .spazio-azioni{ white-space:normal; justify-content:flex-end; }
  .spazio-azioni::before{ content:''; }
}