/* ============================================================
   SIRIO CREAZIONI — il negozio: creazioni in ceramica, da indossare e per la casa
   Palette campionata dal LOGO del cliente con Pillow:
   fondo #F9F4F0 · inchiostro #101010 · rame #906040
   ============================================================ */

@font-face{font-family:Cormorant;src:url(font/cormorant.woff2)format("woff2");
  font-weight:300 700;font-display:swap}
@font-face{font-family:Karla;src:url(font/karla.woff2)format("woff2");
  font-weight:200 800;font-display:swap}

:root{
  --panna:#F9F4F0;        /* il fondo del logo, campionato */
  --carta:#FFFFFF;
  --panna-2:#F2E9E1;
  --inchiostro:#141210;   /* il monogramma ES */
  --rame:#906040;         /* il corsivo «Elvira Sirio» */
  --rame-cupo:#6E4830;
  --grigio:#857A72;
  --linea:#E5D9CF;
  --raggio:3px;

  /* 🎨 GLI SMALTI — campionati con Pillow dalle fotografie dei pezzi, non inventati.
     Sono i colori che escono davvero dal forno di Elvira. Servono a far capire in un
     colpo d'occhio che qui si vende ceramica dipinta a mano, non roba di serie. */
  --smalto-fucsia:#F65AA9;      /* i cuori e i dischi */
  --smalto-giallo:#FCE389;      /* la banda gialla dei dischi */
  --smalto-azzurro:#82D7FA;     /* la banda azzurra dei dischi */
  --smalto-cobalto:#442683;     /* le perline e la corona */
  --smalto-turchese:#0B6E78;    /* le placche, la tinta viva */
  --smalto-terracotta:#BE8362;  /* il fondo dei cammei */
  --smalto:var(--smalto-terracotta);   /* quello della sezione corrente */
  /* il profilo dell'orlo dello smalto: generato, una copia sola per tutto il sito */
  --orlo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 96' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1200V24C1196 24 1196 23 1192 23C1188 23 1188 22 1184 22C1180 22 1180 21 1176 21C1172 21 1172 21 1168 21C1164 21 1164 21 1160 21C1156 21 1156 40 1152 40C1148 40 1148 40 1144 40C1140 40 1140 20 1136 20C1132 20 1132 21 1128 21C1124 21 1124 21 1120 21C1116 21 1116 21 1112 21C1108 21 1108 21 1104 21C1100 21 1100 21 1096 21C1092 21 1092 22 1088 22C1084 22 1084 22 1080 22C1076 22 1076 22 1072 22C1068 22 1068 22 1064 22C1060 22 1060 22 1056 22C1052 22 1052 22 1048 22C1044 22 1044 22 1040 22C1036 22 1036 26 1032 26C1028 26 1028 57 1024 57C1020 57 1020 72 1016 72C1012 72 1012 57 1008 57C1004 57 1004 24 1000 24C996 24 996 19 992 19C988 19 988 18 984 18C980 18 980 18 976 18C972 18 972 17 968 17C964 17 964 17 960 17C956 17 956 17 952 17C948 17 948 17 944 17C940 17 940 16 936 16C932 16 932 17 928 17C924 17 924 17 920 17C916 17 916 17 912 17C908 17 908 18 904 18C900 18 900 19 896 19C892 19 892 19 888 19C884 19 884 20 880 20C876 20 876 21 872 21C868 21 868 23 864 23C860 23 860 24 856 24C852 24 852 25 848 25C844 25 844 26 840 26C836 26 836 27 832 27C828 27 828 28 824 28C820 28 820 29 816 29C812 29 812 30 808 30C804 30 804 31 800 31C796 31 796 31 792 31C788 31 788 32 784 32C780 32 780 32 776 32C772 32 772 32 768 32C764 32 764 32 760 32C756 32 756 43 752 43C748 43 748 57 744 57C740 57 740 52 736 52C732 52 732 33 728 33C724 33 724 30 720 30C716 30 716 29 712 29C708 29 708 28 704 28C700 28 700 28 696 28C692 28 692 27 688 27C684 27 684 27 680 27C676 27 676 26 672 26C668 26 668 31 664 31C660 31 660 46 656 46C652 46 652 36 648 36C644 36 644 26 640 26C636 26 636 26 632 26C628 26 628 26 624 26C620 26 620 26 616 26C612 26 612 26 608 26C604 26 604 26 600 26C596 26 596 27 592 27C588 27 588 27 584 27C580 27 580 27 576 27C572 27 572 27 568 27C564 27 564 27 560 27C556 27 556 27 552 27C548 27 548 27 544 27C540 27 540 27 536 27C532 27 532 26 528 26C524 26 524 25 520 25C516 25 516 25 512 25C508 25 508 24 504 24C500 24 500 23 496 23C492 23 492 22 488 22C484 22 484 33 480 33C476 33 476 73 472 73C468 73 468 73 464 73C460 73 460 30 456 30C452 30 452 17 448 17C444 17 444 16 440 16C436 16 436 16 432 16C428 16 428 15 424 15C420 15 420 15 416 15C412 15 412 15 408 15C404 15 404 15 400 15C396 15 396 15 392 15C388 15 388 15 384 15C380 15 380 15 376 15C372 15 372 16 368 16C364 16 364 17 360 17C356 17 356 17 352 17C348 17 348 18 344 18C340 18 340 19 336 19C332 19 332 20 328 20C324 20 324 21 320 21C316 21 316 33 312 33C308 33 308 40 304 40C300 40 300 30 296 30C292 30 292 25 288 25C284 25 284 25 280 25C276 25 276 26 272 26C268 26 268 26 264 26C260 26 260 27 256 27C252 27 252 27 248 27C244 27 244 27 240 27C236 27 236 27 232 27C228 27 228 27 224 27C220 27 220 27 216 27C212 27 212 26 208 26C204 26 204 26 200 26C196 26 196 26 192 26C188 26 188 26 184 26C180 26 180 26 176 26C172 26 172 25 168 25C164 25 164 25 160 25C156 25 156 26 152 26C148 26 148 38 144 38C140 38 140 59 136 59C132 59 132 59 128 59C124 59 124 39 120 39C116 39 116 27 112 27C108 27 108 28 104 28C100 28 100 29 96 29C92 29 92 29 88 29C84 29 84 30 80 30C76 30 76 30 72 30C68 30 68 31 64 31C60 31 60 31 56 31C52 31 52 32 48 32C44 32 44 32 40 32C36 32 36 32 32 32C28 32 28 32 24 32C20 32 20 32 16 32C12 32 12 31 8 31C4 31 4 31 0 31Z' fill='%23000'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* il fondo non è una tinta piatta: è la velatura larghissima di uno smalto sul biscotto,
   tre nuvole al 4% che non si vedono ma si sentono. Costa zero: sono gradienti. */
body{margin:0;color:var(--inchiostro);
  background:var(--panna);
  background-image:
    radial-gradient(120% 80% at 12% 4%, rgba(246,90,169,.045), transparent 60%),
    radial-gradient(100% 70% at 92% 22%, rgba(130,215,250,.05), transparent 62%),
    radial-gradient(120% 90% at 50% 100%, rgba(190,131,98,.06), transparent 65%);
  background-attachment:fixed;
  font:400 clamp(.98rem,.5vw + .87rem,1.06rem)/1.62 Karla,system-ui,sans-serif;
  overflow-x:hidden;overflow-x:clip}

h1,h2,h3{font-family:Cormorant,Georgia,serif;font-weight:300;line-height:1.05;
  letter-spacing:-.014em;margin:0}
h1{font-size:clamp(2.3rem,5.6vw,4.1rem)}
h2{font-size:clamp(1.8rem,3.6vw,2.7rem)}
h3{font-size:clamp(1.1rem,1.8vw,1.35rem)}
p{margin:0 0 .8em}
a{color:inherit}
img{display:block;max-width:100%;height:auto}   /* height:auto o l'attributo HTML deforma */

.dentro{width:min(1240px,92vw);margin-inline:auto}
section{padding-block:clamp(2.6rem,6vw,5rem)}
.occhiello{font:500 .72rem/1 Karla,sans-serif;letter-spacing:.22em;text-transform:uppercase;
  color:var(--rame);margin:0 0 1rem;display:flex;align-items:center;gap:.55rem}
/* 🎨 il punto di smalto: una goccia di colore prima dell'occhiello, come il tocco di
   pennello che si dà per provare la tinta prima di dipingere */
.occhiello::before{content:"";width:9px;height:9px;flex:none;background:var(--smalto);
  border-radius:58% 42% 47% 53%/45% 55% 44% 56%;transform:rotate(-8deg);
  box-shadow:0 1px 2px rgba(20,18,16,.18)}

/* 🎨 LA PENNELLATA — sotto i titoli passa un colpo di pennello di smalto.
   È una maschera SVG: il colore lo mette la sezione, così ogni fascia ha il suo smalto.
   Non è un filetto: ha lo spessore che cambia e la coda che si asciuga, come una pennellata. */
.pennellata{position:relative}
.pennellata::after{content:"";display:block;height:13px;margin-top:.7rem;
  width:min(260px,44%);background:var(--smalto);opacity:.9;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 34'%3E%3Cpath d='M7 21c48-9 96-13 158-11 62 2 118 8 178 6 44-1 88-6 134-11 40-4 78-5 116-3-30 9-64 13-104 16-58 4-112 2-172-1-56-3-108-6-160-3-44 3-88 8-134 15-6-3-10-6-16-8z' fill='%23000'/%3E%3Cpath d='M556 12c14-1 27-1 39 0-12 4-25 6-39 7z' fill='%23000'/%3E%3C/svg%3E") left center/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 34'%3E%3Cpath d='M7 21c48-9 96-13 158-11 62 2 118 8 178 6 44-1 88-6 134-11 40-4 78-5 116-3-30 9-64 13-104 16-58 4-112 2-172-1-56-3-108-6-160-3-44 3-88 8-134 15-6-3-10-6-16-8z' fill='%23000'/%3E%3Cpath d='M556 12c14-1 27-1 39 0-12 4-25 6-39 7z' fill='%23000'/%3E%3C/svg%3E") left center/100% 100% no-repeat}
.apertura .pennellata::after{height:16px;width:min(320px,58%);margin-top:1rem}
.dentro[style*="text-align:center"] .pennellata::after{margin-inline:auto}

/* ogni sezione ha il suo smalto, e sono i colori dei pezzi che ci stanno dentro */
.apertura{--smalto:var(--smalto-terracotta)}
#negozio{--smalto:var(--smalto-fucsia)}
.fascia--scura{--smalto:var(--smalto-giallo)}
#forno{--smalto:var(--smalto-azzurro)}
#ordine{--smalto:var(--smalto-terracotta)}
.scheda-pagina,.artista{--smalto:var(--smalto-cobalto)}
.grigio{color:var(--grigio)}

/* ---------- la fascia in cima ---------- */
.annuncio{background:var(--inchiostro);color:var(--panna);text-align:center;
  font:500 .74rem/1.4 Karla,sans-serif;letter-spacing:.13em;text-transform:uppercase;
  padding:.62rem 1rem}

/* ---------- testata ---------- */
section[id],#negozio{scroll-margin-top:calc(var(--testata,86px) + 1.2rem)}
.testata{position:sticky;top:0;z-index:30;background:rgba(249,244,240,.93);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)}
.testata .dentro{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding-block:.7rem}
.testata .marchio img{width:clamp(84px,10vw,118px);height:auto;
  transition:transform .45s cubic-bezier(.16,1,.3,1)}
.testata .marchio:hover img{transform:scale(1.035)}
/* 🔴 IL MENU A DUE PIANI — richiesto da Franco [call 08/09 · 01:13]: la famiglia sopra,
   le categorie dentro. Da computer le categorie scendono in una tendina; da telefono
   tutto il menu diventa un pannello. Prima, sotto i 780px, il menu non c'era proprio. */
.menu{display:flex;gap:clamp(.7rem,1.8vw,1.5rem);font-size:.85rem;align-items:center}
.menu > a,.tendina summary{text-decoration:none;color:var(--inchiostro);white-space:nowrap;
  transition:color .25s,transform .25s}
.menu > a:hover,.tendina summary:hover{color:var(--rame);transform:translateY(-1px)}

.tendina{position:relative}
.tendina summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.34rem}
.tendina summary::-webkit-details-marker{display:none}
.tendina summary::after{content:"";width:.4rem;height:.4rem;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);
  transition:transform .25s}
.tendina[open] summary{color:var(--rame)}
.tendina[open] summary::after{transform:translateY(1px) rotate(225deg)}
.tendina-giu{position:absolute;top:calc(100% + .8rem);left:-1rem;z-index:40;min-width:12.5rem;
  display:grid;gap:.1rem;padding:.6rem;background:var(--carta);border:1px solid var(--linea);
  border-radius:var(--raggio);box-shadow:0 18px 44px rgba(20,18,16,.13);
  animation:scendi .22s cubic-bezier(.16,1,.3,1)}
.tendina-giu a{display:block;padding:.5rem .7rem;border-radius:calc(var(--raggio) - 6px);
  font-size:.85rem;text-decoration:none;color:var(--inchiostro);
  transition:background-color .2s,color .2s}
.tendina-giu a:first-child{font-weight:700;border-bottom:1px solid var(--linea);
  margin-bottom:.25rem;padding-bottom:.6rem;border-radius:0}
.tendina-giu a:hover{background:var(--panna-2);color:var(--rame);transform:none}
@keyframes scendi{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

.testata-azioni{display:flex;align-items:center;gap:.5rem}
.apri-menu{display:none;align-items:center;gap:.45rem;background:none;cursor:pointer;
  border:1px solid var(--linea);border-radius:999px;padding:.52rem .85rem;
  font:600 .78rem/1 Karla,sans-serif;color:var(--inchiostro);transition:border-color .25s}
.apri-menu:hover{border-color:var(--rame);color:var(--rame)}
.barre{position:relative;display:block;width:14px;height:1.5px;background:currentColor;
  transition:background-color .2s}
.barre::before,.barre::after{content:"";position:absolute;left:0;display:block;width:14px;
  height:1.5px;background:currentColor;
  transition:transform .28s cubic-bezier(.16,1,.3,1)}
.barre::before{top:-4.5px}
.barre::after{top:4.5px}
.apri-menu[aria-expanded="true"] .barre{background:transparent}
.apri-menu[aria-expanded="true"] .barre::before{transform:translateY(4.5px) rotate(45deg)}
.apri-menu[aria-expanded="true"] .barre::after{transform:translateY(-4.5px) rotate(-45deg)}

@media(max-width:900px){
  .menu{display:none;position:absolute;top:100%;left:0;right:0;z-index:35;
    background:var(--carta);border-bottom:1px solid var(--linea);
    box-shadow:0 20px 40px rgba(20,18,16,.1);
    flex-direction:column;align-items:stretch;gap:0;padding:.4rem 0 .9rem;
    max-height:78vh;overflow-y:auto}
  .menu[data-aperto]{display:flex;animation:scendi .24s cubic-bezier(.16,1,.3,1)}
  .menu > a,.tendina summary{padding:.85rem clamp(1.1rem,5vw,2rem);font-size:.95rem}
  .menu > a{border-top:1px solid var(--linea)}
  .tendina{border-top:1px solid var(--linea)}
  .tendina:first-child{border-top:0}
  .tendina summary{justify-content:space-between}
  .tendina-giu{position:static;min-width:0;box-shadow:none;border:0;border-radius:0;
    background:var(--panna-2);padding:.3rem clamp(.6rem,3vw,1.4rem) .7rem;animation:none}
  .tendina-giu a{padding:.62rem .7rem}
  .apri-menu{display:inline-flex}
}

/* ---------- pulsante ---------- */
/* 🔴 LA SCRITTA DEL PULSANTE LA DECIDE IL CLIENTE, E PUO' ESSERE LUNGA.
   Qui c'era «white-space:nowrap»: una frase lunga in un pulsante non andava a
   capo, allargava la pagina oltre lo schermo e da telefono tutto il sito
   scorreva di lato. Adesso va a capo, resta centrata, e non esce mai dal suo
   spazio — il pulsante diventa più alto, non più largo dello schermo. */
.wa{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.82rem 1.4rem;border:0;max-width:100%;
  border-radius:999px;cursor:pointer;background:var(--inchiostro);color:var(--panna);
  text-decoration:none;font:700 .87rem/1.25 Karla,sans-serif;text-align:center;
  overflow-wrap:anywhere;
  transition:transform .22s cubic-bezier(.16,1,.3,1),background-color .25s}
.wa:hover{background:var(--rame);transform:translateY(-2px)}
.wa:active{transform:translateY(0) scale(.985)}
.wa svg{width:17px;height:17px;fill:currentColor;transition:transform .3s}
.wa:hover svg{transform:scale(1.12) rotate(-6deg)}
/* 🔴 IL PULSANTE DELLA TESTATA RESTA SU UNA RIGA SOLA.
   Gli altri pulsanti adesso vanno a capo, perché la loro scritta la decide il
   cliente e può essere lunga. Questo no: la scritta è nostra, è corta ed è
   sempre la stessa, e nella testata due righe alzerebbero la barra in cima
   su ogni pagina del sito. */
.wa--piccolo{padding:.58rem 1rem;font-size:.79rem;white-space:nowrap}
.wa--chiaro{background:none;color:var(--inchiostro);border:1px solid var(--inchiostro)}
.wa--chiaro:hover{background:var(--inchiostro);color:var(--panna)}
.wa--largo{width:100%;justify-content:center;padding-block:1rem}

/* 🖌️ LA CAMPITURA — dietro il titolo d'apertura c'è una passata larga di smalto, come il
   fondo che si stende su una piastrella prima di dipingerci sopra. Sta dietro al testo,
   tenuta bassa di opacità: si deve sentire, non leggere. */
.apertura .dentro > div:first-child{position:relative}
.apertura .dentro > div:first-child::before{content:"";position:absolute;z-index:-1;
  left:-6%;right:14%;top:-8%;bottom:26%;background:var(--smalto);opacity:.13;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 300' preserveAspectRatio='none'%3E%3Cpath d='M14 44c92-22 196-30 300-24 96 6 186 22 272 12-18 62-8 128-4 190-88 14-180 6-272 2-104-4-208 6-296 26-6-70 4-136 0-206z' fill='%23000'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 300' preserveAspectRatio='none'%3E%3Cpath d='M14 44c92-22 196-30 300-24 96 6 186 22 272 12-18 62-8 128-4 190-88 14-180 6-272 2-104-4-208 6-296 26-6-70 4-136 0-206z' fill='%23000'/%3E%3C/svg%3E") center/100% 100% no-repeat}
@media(max-width:619px){.apertura .dentro > div:first-child::before{right:-4%;bottom:34%}}

/* ---------- apertura ---------- */
.apertura .dentro{display:grid;gap:clamp(1.4rem,4vw,3.4rem);align-items:center;
  padding-block:clamp(1.8rem,4.5vw,3.6rem)}
@media(min-width:900px){.apertura .dentro{grid-template-columns:1fr 1.02fr}}
.apertura h1{max-width:14ch}
.apertura .sotto{max-width:40ch;font-size:clamp(1rem,.5vw + .92rem,1.15rem);
  color:#3B3430;margin-top:1.2rem}
/* 🔴 LA FINESTRA DELL'APERTURA ERA SDRAIATA (5:4) e la foto e' un ritratto in piedi:
   la testa si perdeva per forza. Franco [call 08/09 · 14:41]: «gli manca mezza fronte
   sopra». Adesso la finestra e' verticale come la foto, e non taglia piu' niente. */
.apertura .foto{position:relative;border-radius:var(--raggio);background:var(--panna-2)}
.apertura .foto .ingrandisci{aspect-ratio:4/5;border-radius:var(--raggio)}
/* 🔴 24/09 — LA FOTO NON SI TAGLIA PIÙ (Domenico: «far vedere la singola immagine
   intera, non tagliare mai»). Ogni scatto ha due strati: dietro la stessa foto
   sfocata, che riempie il riquadro qualunque forma abbia la foto; davanti la foto
   INTERA, con un margine tutt'intorno.
   Lo zoom lento sta su UN solo strato, .scatti, che contiene tutte le foto: un
   livello da comporre invece di venticinque (misurato: da ~175 MB di memoria
   grafica a quanto serviva prima). Cresce di 1,04: il bordo della foto arriva a
   1,04 × (metà riquadro − margine), e il margine è largo abbastanza da lasciare
   sempre almeno 7 px d'aria (calcolato da 320 a 1920 px), quindi la foto non
   tocca mai il bordo. */
.ingrandisci .scatti{position:absolute;inset:0;animation:zoomlento 22s ease-in-out infinite alternate}
.apertura .scatto{--margine:clamp(16px,3.6vw,32px)}
/* il riquadro della prima schermata è grande: serve più sfocatura, se no dietro
   si riconoscono le forme della foto e disturbano quella vera */
.apertura .scatto img.sfocata{filter:blur(32px) saturate(1.05)}
.apertura .scatto img.intera{inset:var(--margine);
  width:calc(100% - 2 * var(--margine));height:calc(100% - 2 * var(--margine));
  filter:drop-shadow(0 8px 16px rgba(20,18,16,.24))}
@media(min-width:900px){
  .apertura .foto .ingrandisci{aspect-ratio:auto;height:min(74vh,640px);
    height:min(74vh,640px,calc(100svh - 17rem))}}
/* 🔴 24/09 — SUL COMPUTER LA FOTO SI VEDE TUTTA NELLA PRIMA SCHERMATA. Domenico:
   «nella hero far vedere la singola immagine intera». Su un portatile (1280×720,
   1440×900) il riquadro finiva sotto il bordo dello schermo di 35-106 px: c'era un
   doppio margine sopra (quello di tutte le sezioni + quello della prima) e un'altezza
   che non guardava lo schermo. Adesso i margini della prima sezione sono più stretti
   e il riquadro non supera mai l'altezza dello schermo meno testata e scritta sotto
   (17rem): misurato da 900×700 a 1920×1080, riquadro e scritta stanno sopra la piega. */
@media(min-width:900px){
  #apertura{padding-block:clamp(1.2rem,2.5vw,2.2rem)}
  .apertura .dentro{padding-block:clamp(.8rem,1.8vw,1.6rem)}}
/* 🔴 21/09 — SUL COMPUTER LA FINESTRA HA SEMPRE LA STESSA FORMA: 15:16.
   Prima era alta min(74vh,640px) e larga quanto la colonna, quindi cambiava
   forma con l'altezza della finestra del browser (su uno schermo basso diventava
   perfino piu' larga che alta). Il provino del pannello mostrava un taglio che
   sul sito non c'era, e Franco inquadrava alla cieca. Adesso l'altezza e' la
   stessa di prima, ma se lo schermo e' basso la foto si stringe invece di
   schiacciarsi: la forma resta 15:16, uguale al provino «Dal computer».
   (cqw = la larghezza della colonna; chi non lo capisce tiene la regola sopra.) */
@media(min-width:900px){
  @supports (width:1cqw){
    .apertura .foto{container-type:inline-size;background:none}
    .apertura .foto .ingrandisci{--alto:min(74vh,640px,106.667cqw);
      --alto:min(74vh,640px,106.667cqw,calc(100svh - 17rem));
      height:var(--alto);width:calc(var(--alto) * 15 / 16);margin-inline:auto;
      background:var(--panna-2)}}}
.azioni{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.7rem}
/* 🔍 LA FOTO CHE SI APRE — Franco [call 08/09 · 14:43]: «io pensavo si clicca e si
   allarga la foto». La lente compare passandoci sopra; da telefono resta visibile,
   perche' se non si vede nessuno prova a cliccare. */
.ingrandisci{display:block;width:100%;height:100%;padding:0;border:0;background:none;
  cursor:zoom-in;position:relative;border-radius:inherit;overflow:hidden}
/* 24/09 — dentro un riquadro la foto sta sempre INTERA: contain, mai cover.
   Le due classi hanno ognuna la sua regola, così nessuna delle due vince solo
   perché sta più in basso nel file. */
.ingrandisci img{display:block;width:100%;height:100%}
.ingrandisci img.intera{position:absolute;inset:0;object-fit:contain}
.ingrandisci img.sfocata{object-fit:cover}
/* la foto che si vede alla sua forma (ritratto, pagina dell'artista, foto a
   fianco del testo): altezza libera, come prima — il pulsante le va attorno */
.ingrandisci--libera{height:auto}
.ingrandisci--libera img.intera{position:static;height:auto}

/* 🌫️ LA STESSA FOTO, SFOCATA, DIETRO — riempie lo spazio che la foto intera
   lascia libero quando non ha la forma del riquadro. Allargata del 15% così la
   sfocatura non mostra l'orlo chiaro ai bordi (il riquadro la taglia: è solo lo
   sfondo, la foto vera sta davanti intera). Ferma: si dipinge una volta sola. */
img.sfocata{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.15);filter:blur(18px) saturate(1.05);opacity:.6;pointer-events:none}

/* 🖼️ LA GIOSTRA DELL'APERTURA — piu' scatti che si danno il cambio.
   Si accavallano nello stesso riquadro e si scambiano in dissolvenza: si muove
   solo l'opacita', quindi non costa un fotogramma. Ogni scatto è un contenitore
   con i suoi due strati (sfocata dietro, intera davanti). */
.ingrandisci .scatto{position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity 1.1s ease-in-out,visibility 0s linear 1.1s}
/* spento del tutto (visibility) finita la dissolvenza: undici scatti su dodici non
   si disegnano e non occupano memoria grafica */
.ingrandisci .scatto.attivo{opacity:1;visibility:visible;
  transition:opacity 1.1s ease-in-out,visibility 0s}
@media(prefers-reduced-motion:reduce){
  .ingrandisci .scatto{transition:none}}
.lente{position:absolute;right:.7rem;bottom:.7rem;width:38px;height:38px;display:grid;
  place-items:center;border-radius:50%;background:rgba(20,18,16,.55);color:#fff;
  backdrop-filter:blur(4px);opacity:.85;
  transition:opacity .25s,transform .25s,background-color .25s}
.lente svg{width:18px;height:18px;fill:currentColor}
.ingrandisci:hover .lente{opacity:1;transform:scale(1.09);background:var(--smalto)}
.foto-nota{margin:.7rem 0 0;font-size:.75rem;color:var(--grigio);text-align:center}

/* 🔍 LA FINESTRA DELLE FOTO — 24/09: a tutto schermo. Prima era larga al massimo
   720 px, e da telefono una foto orizzontale si «ingrandiva» a 350 px, quasi come
   in pagina. Adesso la foto prende tutto lo spazio che c'è, intera; le frecce
   passano alle altre foto dello stesso gruppo; da telefono si trascina di lato,
   si stringe/allarga con due dita e il doppio tocco avvicina. Si muove solo
   transform (main.js), e il fondo è una tinta: niente sfocature costose. */
/* misure dello SCHERMO (100vw × 100dvh), non della pagina: se un giorno qualcosa
   sporge di lato, la pagina diventa più larga dello schermo e una finestra al 100%
   la seguirebbe, con frecce e contatore fuori dalla vista */
.foto-piena{position:fixed;border:0;padding:0;margin:0;inset:0;width:100vw;height:100vh;
  height:100dvh;max-width:none;max-height:none;background:#141210;overflow:hidden;color:#fff}
.foto-piena::backdrop{background:rgba(20,18,16,.6)}
.fp-scena{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:clamp(3.4rem,7vh,4.6rem) clamp(.6rem,5.5vw,5rem);touch-action:none}
/* dai 620 px le frecce stanno ai lati: la foto sta sempre fra le due, mai sotto */
@media(min-width:620px){.fp-scena{padding-inline:max(clamp(.6rem,5.5vw,5rem),
  calc(48px + clamp(.3rem,1.5vw,1.2rem) + .6rem))}}
.fp-scena img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;border-radius:var(--raggio);cursor:zoom-in;touch-action:none;
  transition:transform .28s cubic-bezier(.16,1,.3,1),opacity .2s;
  user-select:none;-webkit-user-select:none;-webkit-user-drag:none}
/* mentre arriva la foto grande si vede la piccola, e un cerchio che gira */
.foto-piena.carica .fp-scena::after{content:"";position:absolute;left:50%;top:50%;
  width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;
  border:3px solid rgba(255,255,255,.25);border-top-color:#fff;
  animation:gira .8s linear infinite;pointer-events:none}
@keyframes gira{to{transform:rotate(1turn)}}
.foto-piena.zoom .fp-scena img{cursor:grab}
.foto-piena[open]{animation:apri-foto .28s cubic-bezier(.16,1,.3,1)}
@keyframes apri-foto{from{opacity:0}to{opacity:1}}
.chiudi-foto{position:absolute;top:.8rem;right:.8rem;z-index:3;width:44px;height:44px;
  border:0;border-radius:50%;cursor:pointer;background:var(--panna);color:var(--inchiostro);
  font-size:1.5rem;line-height:1;box-shadow:0 6px 18px rgba(0,0,0,.3);transition:transform .2s}
.chiudi-foto:hover{transform:scale(1.09)}
.fp-freccia{position:absolute;top:50%;z-index:2;width:48px;height:48px;margin-top:-24px;
  display:grid;place-items:center;padding:0 0 4px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(249,244,240,.14);color:#fff;font:300 2.2rem/1 Cormorant,Georgia,serif;
  transition:transform .25s}
.fp-freccia[hidden]{display:none}
.fp-prima{left:clamp(.3rem,1.5vw,1.2rem)}
.fp-dopo{right:clamp(.3rem,1.5vw,1.2rem)}
.fp-freccia:hover,.fp-freccia:focus-visible{background:var(--smalto);transform:scale(1.06)}
/* da telefono le frecce stanno in basso, lontane dalla foto: lì si usa il dito */
@media(max-width:619px){.fp-freccia{top:auto;bottom:.7rem;margin-top:0;width:44px;height:44px}}
.fp-conta{position:absolute;left:0;right:0;bottom:1.1rem;margin:0;text-align:center;
  font:500 .8rem/1 Karla,sans-serif;letter-spacing:.12em;color:rgba(255,255,255,.75);
  pointer-events:none}
.fp-conta:empty{display:none}
@media(prefers-reduced-motion:reduce){
  .foto-piena[open],.tendina-giu,.menu[data-aperto],.filtri--sotto{animation:none}}

/* 💬 LA BOLLA DI WHATSAPP — chiesta dal cliente: sempre in fondo a destra,
   su ogni pagina. Si spegne dal pannello, e il numero lo decide il pannello.
   Da computer si allarga e dice cosa fa; da telefono resta un cerchio, perche'
   li lo spazio e' del sito. Non copre mai il pulsante d'ordine: sta piu' in
   basso della barra del browser e si sposta sopra la finestra della foto. */
.bolla-wa{position:fixed;right:clamp(.9rem,2.5vw,1.6rem);bottom:clamp(.9rem,2.5vw,1.6rem);
  z-index:45;display:inline-flex;align-items:center;gap:0;overflow:hidden;
  width:56px;height:56px;padding:0 16px;border-radius:999px;text-decoration:none;
  background:var(--inchiostro);color:var(--panna);
  box-shadow:0 8px 26px rgba(20,18,16,.28);
  transition:width .38s cubic-bezier(.16,1,.3,1),gap .38s cubic-bezier(.16,1,.3,1),
    background-color .28s,transform .28s cubic-bezier(.16,1,.3,1)}
.bolla-wa svg{width:24px;height:24px;flex:none;fill:currentColor}
.bolla-wa span{white-space:nowrap;font:700 .85rem/1 Karla,sans-serif;opacity:0;
  transition:opacity .3s}
.bolla-wa:hover{background:var(--smalto-turchese);transform:translateY(-2px)}
@media(hover:hover) and (min-width:620px){
  .bolla-wa:hover,.bolla-wa:focus-visible{width:auto;gap:.6rem}
  .bolla-wa:hover span,.bolla-wa:focus-visible span{opacity:1}
}
/* da telefono resta il cerchio: la scritta la si legge quando si apre WhatsApp */
@media(max-width:619px){.bolla-wa{width:52px;height:52px;padding:0 14px}
  .bolla-wa span{display:none}}
@media(prefers-reduced-motion:reduce){.bolla-wa{transition:background-color .2s}}

/* ---------- categorie ---------- */
/* le due famiglie, grandi, sopra la vetrina: e' la porta d'ingresso al negozio */
/* 🔴 LA FILA RIEMPIE SEMPRE LA RIGA, QUALUNQUE SIA IL NUMERO DEI REPARTI.
   Erano due colonne fisse: col terzo reparto creato dal pannello l'ultimo
   riquadro restava da solo, mezzo largo, spaiato. Adesso è una riga che va a
   capo da sola — i riquadri si dividono lo spazio che c'è, e quelli dell'ultima
   riga si allargano fino a riempirla. E siccome stanno su una riga flessibile,
   sono alti tutti uguali anche quando a uno manca la riga di spiegazione. */
.categorie{display:flex;flex-wrap:wrap;gap:.7rem;list-style:none;margin:0;padding:0}
.categorie li{flex:1 1 17rem;display:flex;min-width:0}
.categorie a{display:block;flex:1;text-decoration:none;padding:clamp(1.1rem,2.6vw,1.7rem);
  border:1px solid var(--linea);border-radius:var(--raggio);background:var(--carta);
  transition:border-color .3s,transform .3s cubic-bezier(.16,1,.3,1),color .3s}
.categorie b{display:block;font:600 clamp(1.25rem,2.6vw,1.75rem)/1.1 Cormorant,serif}
.categorie span{display:block;margin-top:.35rem;font-size:.85rem;color:var(--grigio);
  line-height:1.45}
.categorie a:hover{border-color:var(--rame);color:var(--rame);transform:translateY(-2px)}
.categorie a:hover span{color:var(--rame)}

/* ---------- 🛒 LA GRIGLIA — 2 da telefono, 3-4 da computer ---------- */
.filtri-tutti{margin:1.4rem 0 0}
.filtri{display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 clamp(1.2rem,2.5vw,1.9rem)}
/* ⚠️ senza questa riga «hidden» non funziona: display:flex batte lo stile del browser */
.filtri[hidden]{display:none}
/* la seconda riga compare solo quando si sceglie una famiglia, e si vede che sta
   «dentro» quella sopra: rientrata, con una linea che la lega */
.filtri--sotto{margin-top:-.75rem;padding-left:.9rem;border-left:2px solid var(--linea);
  animation:scendi .24s cubic-bezier(.16,1,.3,1)}
.filtri--sotto button{font-size:.76rem;padding:.4rem .8rem}
.filtri button{background:none;border:1px solid var(--linea);color:var(--grigio);cursor:pointer;
  padding:.48rem .95rem;border-radius:999px;font:500 .8rem/1 Karla,sans-serif;
  transition:color .25s,border-color .25s,background-color .25s,transform .25s}
.filtri button:hover{color:var(--inchiostro);border-color:var(--rame);transform:translateY(-1px)}
.filtri button:active{transform:scale(.96)}
.filtri button[aria-pressed=true]{background:var(--inchiostro);color:var(--panna);
  border-color:var(--inchiostro)}

.griglia{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.7rem,1.8vw,1.6rem);
  list-style:none;margin:0;padding:0}
/* 🔴 24/09 — minmax(0,1fr) e non 1fr: con 1fr una colonna non scende mai sotto il
   suo contenuto più largo, e la frase senza prezzo del cliente («Il prezzo te lo
   diciamo in chat.», su una riga sola) allargava la tessera fino a 180 px. Da 320
   a 389 px di schermo la colonna di destra usciva dallo schermo e le sue foto
   erano TAGLIATE. Adesso la colonna resta larga metà, e la frase fa i puntini
   come era stata pensata (.p-senza). */
@media(min-width:800px){.griglia{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1100px){.griglia{grid-template-columns:repeat(4,minmax(0,1fr))}}
.griglia li{transition:transform .5s cubic-bezier(.16,1,.3,1)}
.griglia li[hidden]{display:none}

.scheda-p{background:var(--carta);border:1px solid var(--linea);border-radius:var(--raggio);
  overflow:hidden;height:100%;display:flex;flex-direction:column;
  transition:border-color .35s,box-shadow .35s,transform .35s cubic-bezier(.16,1,.3,1)}
.scheda-p:hover{border-color:var(--smalto);transform:translateY(-3px);
  box-shadow:0 18px 40px -26px rgba(20,18,16,.35)}
/* il collegamento deve riempire la tessera, altrimenti i nomi su due righe
   spingono il pulsante piu' in basso e la riga non e' piu' allineata */
.scheda-p > a{text-decoration:none;color:inherit;
  display:flex;flex-direction:column;flex:1;min-height:0}

/* 🔥 LA FIRMA — «IL COLORE ESCE DAL FORNO».
   La ceramica entra in forno del colore della terra cruda e il colore vero si vede solo
   quando il forno si riapre: e' il momento che Elvira racconta in call. Qui succede lo
   stesso. Ogni fotografia entra nello schermo del colore dell'argilla cruda e prende il
   suo colore mentre sale: la velatura e' un piano che si spegne in opacita' (mix-blend
   «color» su tinta biscotto), quindi solo opacity, tutto sul compositore.
   Senza «animation-timeline», senza JavaScript o con «riduci animazioni» la velatura non
   esiste proprio e le foto sono a colori dal primo istante. */
/* 🔴 24/09 — TESSERE TUTTE DELLA STESSA MISURA, FOTO SEMPRE INTERA.
   Domenico: «solo immagini intere in tutto lo store» e «tutti della stessa
   misura». Il riquadro resta 4:5 per tutte, così la griglia è allineata; la foto
   ci sta dentro tutta (contain). Se non è 4:5 lo spazio che avanza lo riempie
   la stessa foto sfocata (img.sfocata, stampata solo per le foto caricate dal
   pannello: le nostre sono già 4:5). Al passaggio del mouse la foto NON si
   ingrandisce più — dentro un riquadro vuol dire tagliarne i bordi: si solleva
   la tessera intera (.scheda-p:hover) e respira solo lo sfondo sfocato. */
.vetrina{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--panna-2)}
.vetrina > img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.vetrina > img.sfocata{object-fit:cover;transition:transform .9s cubic-bezier(.16,1,.3,1)}
.scheda-p:hover .vetrina > img.sfocata{transform:scale(1.25)}

/* 🔍 LA LENTE SULLA TESSERA — «ogni immagine può essere ingrandita». La tessera
   intera porta al prodotto; la lente, nell'angolo della foto, la apre grande
   senza cambiare pagina. Sta fuori dal collegamento (_sito.js, tessera()). */
.scheda-p{position:relative}
.apri-foto{position:absolute;top:.5rem;right:.5rem;z-index:2;width:34px;height:34px;
  display:grid;place-items:center;padding:0;border:0;border-radius:50%;cursor:zoom-in;
  background:rgba(20,18,16,.5);color:#fff;opacity:.8;transition:opacity .25s,transform .25s}
/* il cerchio si vede da 34 (30 da telefono), ma il dito lo prende su 44×44:
   sotto quella misura un comando non si prende, e il resto della tessera porta
   al prodotto — chi sbagliava di poco cambiava pagina invece di ingrandire */
.apri-foto::before{content:"";position:absolute;inset:-5px;border-radius:50%}
.apri-foto svg{width:16px;height:16px;fill:currentColor}
.apri-foto:hover,.apri-foto:focus-visible{background:var(--smalto)}
.scheda-p .apri-foto:hover,.scheda-p .apri-foto:focus-visible{opacity:1;transform:scale(1.08)}
@media(hover:hover){.apri-foto{opacity:0}
  .scheda-p:hover .apri-foto{opacity:.9}}
@media(max-width:619px){.apri-foto{top:.3rem;right:.3rem;width:30px;height:30px}
  .apri-foto::before{inset:-7px}
  .apri-foto svg{width:14px;height:14px}}

.vetrina::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:#E8DAC9;mix-blend-mode:color;opacity:0}

.dettagli{padding:.95rem 1rem 1.1rem;display:flex;flex-direction:column;gap:.26rem;flex:1}
/* 📱 da telefono la tessera deve occupare poco: sparisce la riga di descrizione,
   sparisce l'etichetta di stato, i caratteri scendono. Tutto torna sopra i 620 px. */
@media(max-width:619px){
  .dettagli{padding:.6rem .65rem .75rem;gap:.15rem}
  .p-nome{font-size:1rem;line-height:1.15}
  .p-serie{font-size:.6rem;letter-spacing:.1em}
  .p-breve{display:none}
  .p-riga{padding-top:.4rem;gap:.2rem}
  .p-prezzo{font-size:1.05rem}
  /* 🔴 LA TARGHETTA NON SI NASCONDE PIU' DA TELEFONO.
     Qui c'era «.stato{display:none}», e da quella riga venivano due difetti
     grossi: dentro la pagina di una creazione — quella che si manda per
     WhatsApp — la targhetta VENDUTO non compariva affatto sotto i 620 px,
     e la parola che il cliente cambia dal pannello («Disponibile» →
     «Pronta da spedire») non si vedeva mai su un telefono, cioè dove il sito
     si guarda davvero: cambiava un campo morto e credeva il pannello rotto.
     Adesso si rimpicciolisce, non si spegne — e solo dentro le tessere della
     vetrina, che sono strette. Nella pagina della creazione resta grande. */
  .scheda-p .stato{font-size:.55rem;padding:.16rem .38rem}
  .p-bottone{margin-top:.5rem;padding:.46rem .5rem;font-size:.7rem}
}
.p-nome{font-family:Cormorant,serif;font-size:1.22rem;font-weight:600;line-height:1.18}
/* 🎨 ogni tipo ha il suo smalto, e sono gli smalti che si vedono davvero in quei pezzi:
   il cobalto delle perline sulle collane, il fucsia dei cuori sugli orecchini, il turchese
   delle placche sulle parure. Il colore diventa un'informazione, non una decorazione. */
.griglia > li[data-tipo="Collane"]{--smalto:var(--smalto-cobalto)}
.griglia > li[data-tipo="Orecchini"]{--smalto:var(--smalto-fucsia)}
.griglia > li[data-tipo="Parure"]{--smalto:var(--smalto-turchese)}
.griglia > li[data-tipo="Bracciali"]{--smalto:var(--smalto-terracotta)}
.p-serie{font-size:.69rem;letter-spacing:.13em;text-transform:uppercase;color:var(--smalto);
  display:flex;align-items:center;gap:.4rem}
.p-serie::before{content:"";width:7px;height:7px;flex:none;background:var(--smalto);
  border-radius:58% 42% 47% 53%/45% 55% 44% 56%;transform:rotate(-8deg)}
.p-riga{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:.4rem;margin-top:auto;padding-top:.65rem}
/* 🏷️ IL CARTELLINO — e' alto uguale sempre, col prezzo e senza.
   Su 73 creazioni solo 15 hanno un prezzo: se la riga del cartellino cambiasse
   altezza fra le une e le altre, la griglia si sfalserebbe e il pulsante in
   fondo alle tessere non sarebbe piu' allineato.
   Come si tiene fermo, senza dover sperare che i testi siano corti:
     · il cartellino prende una riga tutta sua  (flex-basis 100%)
     · quella riga ha un'altezza minima fissa   (--alt-prezzo)
     · «Prezzo su richiesta» ha corpo e altezza di riga SUOI, piu' piccoli di
       quel minimo, e non va a capo: qualunque frase ci scriva il cliente, la
       riga resta alta --alt-prezzo. */
.p-riga{--alt-prezzo:1.72rem}
.p-prezzo{flex:0 0 100%;display:flex;align-items:baseline;flex-wrap:nowrap;
  min-height:var(--alt-prezzo);
  font-family:Cormorant,serif;font-size:1.26rem;font-weight:600;line-height:1.3}
.p-prezzo--grande{font-size:1.6rem;--alt-prezzo:2.1rem;min-height:2.1rem}
/* il prezzo prima dello sconto, barrato. line-height:1 non è un vezzo: allineato
   alla base, con un'altezza di riga sua, allungherebbe la riga del cartellino di
   qualche pixel — e solo sulle tre creazioni scontate, che quindi sarebbero le
   uniche tessere alte diverse da tutte le altre. */
.p-prima{font-family:Cormorant,serif;font-size:.92em;font-weight:400;line-height:1;
  color:var(--grigio);
  text-decoration:line-through;text-decoration-thickness:1px;margin-left:.4em}
/* ⛔ NON E' UN PREZZO E NON DEVE SEMBRARLO: sta nello stesso posto, ma piccolo,
   grigio e su una riga sola. Prima usciva nel carattere grande del prezzo, su
   tre righe, e sformava le tessere. */
.p-senza{font-family:Karla,sans-serif;font-size:.76rem;font-weight:500;line-height:1.35;
  letter-spacing:.02em;color:var(--grigio);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:100%;min-width:0}
/* min-width:0 (24/09): è un elemento di un flex, e senza questa riga non si
   stringeva mai sotto la sua frase — i puntini non comparivano e la frase veniva
   tagliata di netto dal bordo della tessera */
/* 📱 da telefono la tessera è piccola: il cartellino si stringe, ma resta una
   misura sola per tutte e 73. Questo blocco sta QUI e non insieme agli altri
   ritocchi da telefono più in alto: lassù verrebbe prima delle righe che deve
   correggere e non vincerebbe. */
@media(max-width:619px){
  .p-riga{--alt-prezzo:1.45rem}
  .p-prezzo{font-size:1.05rem}
  .p-senza{font-size:.68rem}
}
/* 🔴 IL CODICE — Franco [call 08/09 · 07:05]. Sta dove si legge senza cercarlo,
   e finisce identico dentro il messaggio WhatsApp. */
.p-codice{font:600 .68rem/1 Karla,sans-serif;letter-spacing:.09em;color:var(--grigio);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.p-codice--grande{font-size:.82rem;color:var(--inchiostro)}
.stato--richiesta{color:var(--smalto-turchese);border-color:rgba(11,110,120,.4)}
/* la parola della targhetta la scrive il cliente: se è lunga va a capo dentro
   la tessera, non la allarga. «nowrap» qui mandava la griglia fuori schermo. */
.stato{font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;
  max-width:100%;overflow-wrap:anywhere;
  padding:.22rem .5rem;border:1px solid var(--linea);border-radius:999px;color:var(--grigio)}
.stato--venduto{color:var(--rame-cupo);border-color:rgba(144,96,64,.45);
  background:rgba(144,96,64,.07)}
.scheda-p--venduto .vetrina > img.intera{filter:saturate(.35) brightness(1.04)}
.scheda-p--venduto .vetrina > img.sfocata{filter:blur(18px) saturate(.3)}

/* 🌫️ LA SFUMATURA — fra una fascia e l'altra non c'è nessun bordo e nessuna forma:
   un colore si dissolve nell'altro. Prima c'era il profilo dello smalto con le colature:
   in alto passava, ma capovolto in basso sembravano fossi scavati nel colore.
   Domenico, 08/09: «non mi piacciono queste cose, ti avevo chiesto qualcosa di SFUMATO».
   Sono due gradienti, quindi non pesano niente e non hanno spigoli da nessuna parte. */
/* il contenuto non deve mai finire dentro la dissolvenza: lì il testo chiaro
   si trova sul chiaro e non si legge. Si dà aria dal lato che sfuma. */
.orlo,.orlo--sotto{position:relative}
.orlo{padding-block-start:clamp(5rem,11vh,8rem)}
.orlo--sotto{padding-block-end:clamp(5rem,11vh,8rem)}
.orlo-segno{position:absolute;left:0;right:0;top:0;z-index:2;pointer-events:none;
  height:clamp(120px,17vh,200px);
  background:linear-gradient(to bottom in oklab,
    var(--sopra,var(--panna)) 0%,
    color-mix(in srgb,var(--sopra,var(--panna)) 82%,transparent) 22%,
    color-mix(in srgb,var(--sopra,var(--panna)) 46%,transparent) 48%,
    color-mix(in srgb,var(--sopra,var(--panna)) 16%,transparent) 74%,
    transparent 100%)}
.orlo-segno--sotto{position:absolute;left:0;right:0;top:auto;bottom:0;z-index:2;
  pointer-events:none;transform:none;height:clamp(120px,17vh,200px);
  background:linear-gradient(to top in oklab,
    var(--sotto,var(--panna)) 0%,
    color-mix(in srgb,var(--sotto,var(--panna)) 82%,transparent) 22%,
    color-mix(in srgb,var(--sotto,var(--panna)) 46%,transparent) 48%,
    color-mix(in srgb,var(--sotto,var(--panna)) 16%,transparent) 74%,
    transparent 100%)}
@media(max-width:619px){.orlo-segno,.orlo-segno--sotto{height:96px}}

/* 🎬 LA SFILATA — quattro verticali in riga. Mai uno sotto l'altro (regola THK),
   mai i controlli del browser: l'unico comando è l'altoparlante. */
.sfilata{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.6rem,1.6vw,1.1rem);
  list-style:none;margin:1.6rem 0 0;padding:0}
@media(min-width:800px){.sfilata{grid-template-columns:repeat(4,minmax(0,1fr))}}
.sfilata li{position:relative;border-radius:var(--raggio);overflow:hidden;
  background:var(--panna-2);aspect-ratio:9/16}
/* 24/09 — «non tagliare mai»: contain (i video sono 9:16 esatti come il riquadro,
   quindi a vista non cambia niente) e niente più ingrandimento al passaggio, che
   ne tagliava i bordi. Si solleva il riquadro. */
.sfilata li{transition:transform .5s cubic-bezier(.16,1,.3,1)}
.sfilata li:hover{transform:translateY(-3px)}
.sfilata video{width:100%;height:100%;object-fit:contain;display:block}
/* il video sfuma in basso invece di tagliarsi di netto — 24/09: sfumatura più
   bassa (28 px invece di 70), così copre il minimo del video */
.sfilata li::after{content:"";position:absolute;left:0;right:0;bottom:0;height:28px;
  pointer-events:none;
  background:linear-gradient(to top,color-mix(in srgb,var(--carta) 70%,transparent) 0%,
    color-mix(in srgb,var(--carta) 25%,transparent) 55%,transparent 100%)}

.audio{position:absolute;right:.5rem;top:.5rem;z-index:3;width:36px;height:36px;
  display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;
  background:rgba(20,18,16,.55);color:#fff;backdrop-filter:blur(4px);
  transition:background-color .25s,transform .25s}
.audio:hover{background:var(--smalto);transform:scale(1.08)}
.audio svg{width:17px;height:17px;fill:currentColor}
.audio .onda{transition:opacity .2s}
.audio[aria-pressed="true"] .onda{opacity:0}
.audio[aria-pressed="true"]{background:var(--smalto)}
.sfilata-nota{margin:.9rem 0 0;font-size:.8rem;color:var(--grigio);
  display:flex;flex-wrap:wrap;gap:.3rem 1rem}

/* ---------- fasce ---------- */
.fascia{background:var(--carta);border-block:1px solid var(--linea)}
/* la fascia scura non è più nera da e-commerce di lusso: è il cobalto delle sue
   perline portato al fondo, come una maiolica cotta. */
.fascia--scura{background:#1B1038;color:var(--panna)}
.fascia--scura .occhiello{color:#D6A87E}
.fascia--scura .grigio{color:#A79C93}

/* 🎨 LA FASCIA DI SMALTO — una sezione intera immersa nel turchese delle placche.
   Non è un fondo colorato qualunque: è lo stesso smalto che si vede sulle creazioni,
   e sopra ci passa la pennellata gialla, la coppia che sta su ogni maiolica. */
.fascia--smalto{background:var(--smalto-turchese);color:var(--panna);
  --smalto:var(--smalto-giallo);--linea:rgba(249,244,240,.28)}
.fascia--smalto .occhiello{color:#FCE389}
.fascia--smalto .grigio{color:rgba(249,244,240,.72)}
.fascia--smalto .dom p{color:rgba(249,244,240,.82)}
.fascia--smalto .dom summary:hover{color:#FCE389}
/* sul turchese il rame della domanda aperta non si legge: passa al giallo dello smalto */
.fascia--smalto .dom details[open] summary{color:#FCE389}
.fascia--smalto .dom summary::after{color:#FCE389}
.fascia--smalto .wa{background:var(--panna);color:var(--inchiostro)}
.fascia--smalto .wa:hover{background:#FCE389;color:var(--inchiostro)}
.stretto{max-width:52rem}

/* ---------- come nasce un pezzo ---------- */
.forno{counter-reset:p;list-style:none;margin:1.8rem 0 0;padding:0;display:grid;gap:.7rem}
@media(min-width:860px){.forno{grid-template-columns:repeat(4,1fr)}}
.forno li{counter-increment:p;padding:1.15rem 1.1rem;border:1px solid rgba(249,244,240,.16);
  border-radius:var(--raggio);transition:border-color .35s,background-color .35s}
.forno li:hover{border-color:rgba(214,168,126,.5);background:rgba(249,244,240,.04)}
.forno li::before{content:counter(p);display:block;font-family:Cormorant,serif;font-size:1.9rem;
  line-height:1;color:#D6A87E;margin-bottom:.4rem}
.forno p{margin:0;font-size:.9rem;color:#CFC6BE}
.gradi{font-family:Cormorant,serif;font-size:clamp(2.6rem,7vw,4.4rem);line-height:1;margin:0;
  color:var(--smalto);animation:brace 7s ease-in-out infinite}

/* ---------- domande ---------- */
.dom{border-top:1px solid var(--linea);margin-top:1.4rem}
.dom details{border-bottom:1px solid var(--linea)}
.dom summary{cursor:pointer;list-style:none;padding:1rem 0;font-family:Cormorant,serif;
  font-size:clamp(1.1rem,1.9vw,1.35rem);display:flex;justify-content:space-between;
  gap:1rem;align-items:center;transition:color .28s,padding-left .28s}
.dom summary:hover{color:var(--rame);padding-left:.3rem}
.dom summary::-webkit-details-marker{display:none}
.dom summary::after{content:"+";color:var(--rame);font-size:1.25rem;transition:transform .3s}
.dom details[open] summary::after{transform:rotate(45deg)}
.dom p{margin:0 0 1.1rem;color:#4A423C;max-width:62ch}

/* ---------- pagina del pezzo ---------- */
.scheda-pagina{display:grid;gap:clamp(1.3rem,3.5vw,3rem);align-items:start;margin-top:1rem}
@media(min-width:900px){.scheda-pagina{grid-template-columns:1.05fr .95fr}}
.torna{display:inline-block;margin-bottom:1.1rem;font-size:.83rem;color:var(--grigio);
  text-decoration:none;transition:color .28s,transform .3s}
.torna:hover{color:var(--rame);transform:translateX(-3px)}
/* 📦 LA NOTA SOTTO LA DESCRIZIONE — contratto §3.
   È un'informazione, non un allarme: niente rosso, niente bordo grosso. Un
   fondo appena più caldo della pagina e una riga sottile di rame a sinistra,
   quanto basta perché si veda che è una cosa a parte. */
.nota-prodotto{margin:1.2rem 0 0;padding:.8rem .95rem;font-size:.88rem;line-height:1.55;
  color:#4A423C;background:rgba(144,96,64,.055);border-left:2px solid rgba(144,96,64,.42);
  border-radius:0 var(--raggio) var(--raggio) 0}

.tre-righe{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.55rem}
.tre-righe li{padding-left:1.1rem;position:relative;color:#4A423C;font-size:.93rem}
.tre-righe li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;
  border-radius:50%;background:var(--rame);transition:transform .3s}
.tre-righe li:hover::before{transform:scale(1.7)}
.scheda-t{list-style:none;margin:1.8rem 0 0;padding:0;font-size:.86rem}
.scheda-t li{display:flex;justify-content:space-between;gap:.8rem;padding:.55rem 0;
  border-bottom:1px solid var(--linea);transition:background-color .25s}
.scheda-t li:hover{background:rgba(144,96,64,.04)}
.scheda-t span{color:var(--grigio)}
.scheda-t b{font-weight:500;text-align:right}
/* ⛔ QUI C'ERA .scheda-t .manca, la veste grigia in corsivo di «da inserire».
   Quel segnaposto sul sito non si stampa più (functions/_sito.js): una riga
   senza valore si salta. Dentro il pannello resta, con la veste del pannello. */

/* ---------- piede ---------- */
footer{background:var(--inchiostro);color:#CFC6BE;padding-block:clamp(2.2rem,5vw,3.4rem);
  font-size:.86rem}
footer .dentro{display:grid;gap:1.5rem}
@media(min-width:760px){footer .dentro{grid-template-columns:1fr auto}}
footer img{width:140px;opacity:.92;margin-bottom:.9rem;
  transition:transform .45s cubic-bezier(.16,1,.3,1)}
footer img:hover{transform:translateY(-2px)}
footer a{color:#CFC6BE;transition:color .28s}
footer a:hover{color:#D6A87E}
/* il link alla privacy sta accanto alla firma, non al posto suo: la firma
   «Sito realizzato da OnlinePerTutti.com» non si tocca */
.piede-privacy{margin:0 0 .4rem}
.piede-privacy a{text-decoration:underline;text-underline-offset:3px}

/* ---------- la pagina privacy ---------- */
.privacy-voci{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1.4rem}
.privacy-voci li{padding-top:1.2rem;border-top:1px solid var(--linea)}
.privacy-voci h2{font-family:Cormorant,serif;font-size:1.24rem;font-weight:600;margin:0}
.privacy-voci p{margin:.45rem 0 0;color:#4A423C;font-size:.95rem;line-height:1.62}
.privacy-data{margin-top:2.2rem;font-size:.8rem;color:var(--grigio)}

/* ============================================================
   MOVIMENTO — solo transform e opacity
   ============================================================ */
@keyframes affiora{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes salita{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes brace{0%,100%{opacity:.78}50%{opacity:1}}
/* 1,04 e non più 1,06: la foto della prima schermata cresce dentro il suo
   margine e non deve mai toccare il bordo del riquadro (vedi .ingrandisci .scatti) */
@keyframes zoomlento{from{transform:scale(1)}to{transform:scale(1.04)}}
@keyframes richiamo{0%,100%{transform:translateY(-2px) scale(1)}50%{transform:translateY(-2px) scale(1.03)}}
@keyframes scorri{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes lucina{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes cottura{from{opacity:.92}to{opacity:0}}
/* il reveal lo fa il browser sul compositore, non il JS */
@supports (animation-timeline: view()){
  .js .griglia > li,.js .forno li,.js .categorie li,.js .rivela{
    animation:affiora linear both;animation-timeline:view();
    animation-range:entry 3% cover 22%}

  /* 🔥 la firma: il colore arriva mentre la creazione entra nello schermo.
     ⚠ La velatura NON puo' usare view() da sola: sta dentro .vetrina, che ha
     overflow:hidden ed e' gia' un contenitore di scorrimento — misurata li' dentro
     risulta sempre a fine corsa. Si da' un nome alla linea del tempo sulla tessera,
     che invece scorre col documento, e la velatura si aggancia a quella. */
  .js .griglia > li{view-timeline-name:--cottura}
  .js .griglia .vetrina::after{animation:cottura linear both;
    animation-timeline:--cottura;animation-range:entry 0% cover 30%}
  .js .scheda-pagina .vetrina::after{animation:cottura 1.1s cubic-bezier(.16,1,.3,1) both}

}
.apertura h1{animation:salita .85s cubic-bezier(.16,1,.3,1) both}
.apertura .sotto{animation:salita .85s .09s cubic-bezier(.16,1,.3,1) both}
.apertura .azioni{animation:salita .85s .18s cubic-bezier(.16,1,.3,1) both}
.wa:focus-visible{animation:richiamo 1.6s ease-in-out infinite}

/* 🔴 LA TENDINA UNICA DELLE CREAZIONI — «Le creazioni (tutte le categorie…)».
   Dentro ci stanno i reparti, ognuno col suo titoletto e sotto i suoi gruppi.
   Da telefono il menu e' gia' una colonna, quindi i reparti si impilano; da
   computer stanno affiancati, se no una tendina con sei gruppi diventa una
   colonna lunghissima che esce dallo schermo. */
.tendina--tutte .tendina-giu{display:grid;gap:1.1rem 2rem}
@media(min-width:780px){
  .tendina--tutte .tendina-giu{grid-auto-flow:column;grid-auto-columns:max-content}
}
.tendina-reparto{display:flex;flex-direction:column;gap:.15rem}
.tendina-titolo{font:600 .68rem/1 Karla,sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grigio);margin-bottom:.35rem}

/* 🎞️ il nastro: scorre sempre, non si ferma nemmeno col mouse sopra */
/* 🔴 La durata NON e' piu' un numero fisso, ed e' per una ragione precisa: le
   frasi del nastro le scrive il cliente dal pannello, e puo' toglierne fino a
   restarne due o aggiungerne dodici. Con 38 secondi fissi, poche frasi corte
   fanno passare una fascia mezza vuota, e tante frasi lunghe fanno sfrecciare
   le scritte fino a renderle illeggibili: la velocita' cambiava da sola in
   base a quanto aveva scritto lui.
   La durata arriva da --giro-nastro, che main.js scrive sulla riga dopo averla
   misurata davvero: duplica le frasi, prende la larghezza, la divide per due
   (una copia) e poi per 45 pixel al secondo. Rimisura quando arrivano i
   caratteri e quando la finestra cambia larghezza. Il valore qui sotto e' solo
   il ripiego per quando il JavaScript non parte. */
.nastro{overflow:hidden;border-block:1px solid var(--linea);background:var(--carta);
  padding-block:.85rem}
.nastro ul{display:flex;width:max-content;list-style:none;margin:0;padding:0;
  animation:scorri var(--giro-nastro,38s) linear infinite}
.nastro li{padding-right:2.2rem;font:500 .74rem/1 Karla,sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grigio);white-space:nowrap;
  display:flex;align-items:center;gap:2.2rem}
/* il separatore del nastro è una goccia di smalto, non un pallino tipografico */
.nastro li::after{content:"";width:7px;height:7px;background:var(--smalto-terracotta);
  border-radius:58% 42% 47% 53%/45% 55% 44% 56%;transform:rotate(-8deg);flex:none}
.nastro li:nth-child(6n+1)::after{background:var(--smalto-fucsia)}
.nastro li:nth-child(6n+2)::after{background:var(--smalto-cobalto)}
.nastro li:nth-child(6n+3)::after{background:var(--smalto-azzurro)}
.nastro li:nth-child(6n+4)::after{background:var(--smalto-turchese)}
.nastro li:nth-child(6n+5)::after{background:var(--smalto-terracotta)}

:focus-visible{outline:2px solid var(--rame);outline-offset:3px}
::selection{background:var(--rame);color:var(--panna)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .griglia > li,.js .forno li,.js .categorie li,.js .rivela{
    opacity:1!important;transform:none!important}
  .vetrina::after{opacity:0!important}
  /* 🔴 L'UNICA ECCEZIONE: IL NASTRO CONTINUA A SCORRERE, PIÙ PIANO.
     La riga qui sopra spegne le animazioni di TUTTO, e prendeva in pieno anche
     la fascia che scorre sotto l'apertura: a chi ha «Riduci movimento» acceso
     sul computer il sito sembrava rotto, ed è esattamente la segnalazione
     arrivata il 15/09 («non scorrono più»).
     La regola dell'agenzia dice che i banner scorrevoli non si fermano mai;
     l'accessibilità chiede di RIDURRE il movimento, non di toglierlo. Un testo
     che scivola piano in orizzontale non è il movimento che dà fastidio — sono
     i salti, gli zoom e le parallassi, che infatti qui restano spenti.
     La velocità la dimezza main.js, che con «riduci movimento» passa da 45 a
     22 pixel al secondo. */
  .nastro ul{animation:scorri var(--giro-nastro,76s) linear infinite!important}
}

/* ---------- la scheda: riga di descrizione e pulsante ---------- */
.p-breve{font-size:.83rem;line-height:1.45;color:var(--grigio);margin:.15rem 0 .1rem}
.p-bottone{display:block;margin-top:.75rem;text-align:center;padding:.62rem .8rem;
  border:1px solid var(--inchiostro);border-radius:999px;
  font:700 .78rem/1 Karla,sans-serif;letter-spacing:.02em;
  transition:background-color .25s,color .25s}
.scheda-p:hover .p-bottone{background:var(--inchiostro);color:var(--panna)}
.scheda-p--venduto .p-bottone{border-color:var(--linea);color:var(--grigio)}
.scheda-p--venduto:hover .p-bottone{background:var(--rame);border-color:var(--rame);color:var(--panna)}

/* ---------- le rassicurazioni ---------- */
.garanzie{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem 1.6rem;
  list-style:none;margin:0;padding:0}
@media(min-width:900px){.garanzie{grid-template-columns:repeat(4,1fr)}}
.garanzie li{padding-left:1rem;border-left:2px solid var(--rame)}
.garanzie b{display:block;font-family:Cormorant,serif;font-size:1.28rem;font-weight:600;
  margin-bottom:.25rem}
.garanzie span{font-size:.84rem;line-height:1.5;color:var(--grigio)}

/* ---------- il dettaglio che si sente al tocco e al passaggio ---------- */
.scheda-p:active{transform:translateY(-1px) scale(.995)}
.p-bottone:active{transform:scale(.97)}
.categorie a:active{transform:scale(.985)}
.torna:active{transform:translateX(-5px)}
.garanzie li{transition:border-left-color .35s,transform .35s cubic-bezier(.16,1,.3,1)}
.garanzie li:hover{border-left-color:var(--inchiostro);transform:translateX(3px)}
.garanzie b{transition:color .3s}
.garanzie li:hover b{color:var(--rame)}
.p-nome{transition:color .3s}
.scheda-p:hover .p-nome{color:var(--rame)}
.p-serie{transition:letter-spacing .35s}
.scheda-p:hover .p-serie{letter-spacing:.16em}
.stato{transition:border-color .35s,color .35s,transform .35s}
.scheda-p:hover .stato{border-color:var(--rame);color:var(--rame)}
.scheda-t li:active{transform:translateX(2px)}
.annuncio{transition:background-color .4s}
.dom details[open] summary{color:var(--rame)}
.filtri button:focus-visible{transform:translateY(-1px)}

/* ---------- la galleria del pezzo: più scatti, come chiesto in call [39:53] ---------- */
.miniature{display:flex;gap:.5rem;margin-top:.6rem;flex-wrap:wrap}
/* 24/09 — miniature tutte della stessa misura (4:5), foto intera dentro: prima
   ognuna aveva l'altezza della sua foto e la fila restava sbilenca */
.mini{width:70px;aspect-ratio:4/5;padding:0;border:1px solid var(--linea);
  border-radius:var(--raggio);background:var(--panna-2);cursor:pointer;overflow:hidden;
  line-height:0;
  transition:border-color .3s,transform .3s cubic-bezier(.16,1,.3,1),opacity .3s;opacity:.65}
.mini img{width:100%;height:100%;object-fit:contain;display:block}
.mini:hover{transform:translateY(-2px);opacity:1}
.mini.attiva{border-color:var(--rame);opacity:1}
.mini:active{transform:scale(.96)}

/* ---------- il racconto dell'artista (testo del cliente, verbatim) ---------- */
.racconto{display:grid;gap:clamp(1.5rem,4vw,3.4rem);align-items:center}
@media(min-width:900px){.racconto{grid-template-columns:1.05fr .9fr}}
.racconto h2{max-width:16ch}
.ritratto{margin:0;overflow:hidden;border-radius:var(--raggio)}
.ritratto img{width:100%;height:auto}
.firma-nome{font-family:Cormorant,serif;font-size:1.3rem;font-style:italic;
  color:#D6A87E;margin:1.4rem 0 1.5rem}
.wa--scuro{background:var(--panna);color:var(--inchiostro)}
.wa--scuro:hover{background:#D6A87E;color:var(--inchiostro)}

.artista{display:grid;gap:clamp(1.6rem,4vw,3.6rem);align-items:start;margin-top:.8rem}
@media(min-width:940px){.artista{grid-template-columns:.85fr 1.15fr}}
.artista-foto{margin:0;position:sticky;top:96px;overflow:hidden;border-radius:var(--raggio);
  border:1px solid var(--linea)}
.artista-foto img{width:100%;height:auto}
@media(max-width:939px){.artista-foto{position:static}}
.artista h1{max-width:14ch;margin-bottom:1.6rem}
.racconto-lungo p{font-size:clamp(1.02rem,.45vw + .95rem,1.16rem);line-height:1.72;
  color:#3B3430;margin:0 0 1.15em;max-width:60ch}
.racconto-lungo p:first-child::first-letter{font-family:Cormorant,serif;font-size:3.3em;
  float:left;line-height:.82;padding:.06em .12em 0 0;color:var(--rame);font-weight:600}
.chiusa{font-family:Cormorant,serif;font-size:clamp(1.4rem,2.6vw,1.95rem);line-height:1.28;
  color:var(--inchiostro);border-top:1px solid var(--linea);padding-top:1.5rem;
  margin-top:2rem;max-width:24ch}
.artista .firma-nome{color:var(--rame);margin-bottom:0}

/* ============================================================
   LE SEZIONI CHE IL CLIENTE AGGIUNGE DAL PANNELLO

   Qui non nasce nessuna grafica nuova: si completa quella che c'è già, perché
   una sezione aggiunta deve sembrare nata insieme al resto del sito.
   ============================================================ */

/* 🖼️ LA FILA DI FOTO — mai una fotografia gigante sotto l'altra: 2 per riga
   da telefono, 3 da computer. È una regola dell'agenzia, non un gusto. */
.sez-foto{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.7rem,1.8vw,1.6rem);
  list-style:none;margin:1.6rem 0 0;padding:0}
@media(min-width:760px){.sez-foto{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sez-foto li{margin:0;overflow:hidden;border-radius:var(--raggio);
  border:1px solid var(--linea);background:var(--panna-2)}
/* 24/09 — riquadri uguali, foto intera (contain) e lo sfondo sfocato dietro.
   Al passaggio la foto non si ingrandisce più (la taglierebbe): si accende la
   lente. Il riquadro non si solleva perché li porta già l'animazione «affiora»,
   che vincerebbe su qualunque transform del passaggio. */
.sez-foto .ingrandisci{aspect-ratio:4/5;height:auto}
@supports (animation-timeline: view()){
  .js .sez-foto li{animation:affiora linear both;animation-timeline:view();
    animation-range:entry 3% cover 22%}
}

/* la foto a sinistra invece che a destra: si scambiano le due colonne, così la
   colonna larga resta quella del testo */
@media(min-width:900px){.racconto--foto-prima{grid-template-columns:.9fr 1.05fr}}

/* sul fondo scuro il grigio del testo e le righe chiare non si leggono più:
   qui prendono gli stessi colori che la fascia scura usa già nel resto del sito */
.fascia--scura .garanzie li{border-left-color:#D6A87E}
.fascia--scura .garanzie span{color:#A79C93}
.fascia--scura .dom{border-top-color:rgba(249,244,240,.28)}
.fascia--scura .dom details{border-bottom-color:rgba(249,244,240,.28)}
.fascia--scura .dom p{color:#CFC6BE}
.fascia--scura .dom summary::after{color:#D6A87E}
.fascia--scura .dom summary:hover,
.fascia--scura .dom details[open] summary{color:#D6A87E}
.fascia--scura .sez-foto li{border-color:rgba(249,244,240,.22);
  background:rgba(249,244,240,.06)}

/* ============================================================
   🎁 IL RIQUADRO DELLO SCONTO — contratto §4

   È un <dialog> vero, come la foto che si apre: il fuoco che resta dentro,
   l'Esc che chiude e il fuoco che torna dov'era li fa il browser.
   Qui c'è solo la veste. Si muove solo opacity e transform, e con «riduci
   animazioni» non si muove niente.
   ============================================================ */
.popup{border:0;padding:0;background:none;max-width:min(92vw,26rem);width:100%;
  color:var(--inchiostro)}
.popup::backdrop{background:rgba(20,18,16,.52)}
.popup[open]{display:block}
.popup > form,.popup > .popup-grazie{
  position:relative;background:var(--carta);border:1px solid var(--linea);
  border-radius:var(--raggio);padding:clamp(1.4rem,4vw,2rem);
  box-shadow:0 30px 70px -32px rgba(20,18,16,.55)}
.popup h2{font-family:Cormorant,serif;font-size:clamp(1.4rem,4.6vw,1.8rem);font-weight:600;
  line-height:1.2;margin:0;padding-right:2rem}
.popup .popup-riga{margin:.7rem 0 0;color:#4A423C;font-size:.92rem;line-height:1.55}

/* 🔴 SI TOCCA COL DITO, NON COL PUNTATORE. La ✕ era alta 33 px e «No, grazie»
   15: da telefono si sbaglia. Sotto i 44x44 px un comando non si prende. */
.popup-chiudi{position:absolute;top:.35rem;right:.4rem;z-index:2;
  min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;
  width:2.1rem;height:2.1rem;display:grid;place-items:center;
  border:0;background:none;color:var(--grigio);font-size:1.5rem;line-height:1;
  cursor:pointer;border-radius:50%;transition:color .25s,background-color .25s}
.popup-chiudi:hover{color:var(--inchiostro);background:var(--panna-2)}

.popup-campo{display:block;margin-top:1rem}
.popup-campo span{display:block;font:500 .72rem/1 Karla,sans-serif;letter-spacing:.12em;
  text-transform:uppercase;color:var(--grigio);margin-bottom:.35rem}
.popup-campo input{width:100%;padding:.72rem .8rem;font-size:1rem;font-family:inherit;
  color:inherit;background:var(--panna);border:1px solid var(--linea);
  border-radius:var(--raggio);transition:border-color .25s}
.popup-campo input:focus-visible{outline:2px solid var(--rame);outline-offset:1px;
  border-color:var(--rame)}

/* 🪤 la trappola: fuori dallo schermo, fuori dal giro del tabulatore, invisibile
   ai lettori di schermo. Nessuna persona la compila; i robot sì. */
.popup-tranello{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;
  opacity:0;pointer-events:none}

.popup-consenso{display:flex;align-items:flex-start;gap:.55rem;margin-top:1.1rem;
  font-size:.86rem;line-height:1.5;color:#4A423C;cursor:pointer}
.popup-consenso input{flex:none;width:24px;height:24px;margin-top:.02rem;
  accent-color:var(--rame)}
.popup-consenso a{color:var(--rame);text-decoration:underline;text-underline-offset:3px}

.popup-errore{margin:.9rem 0 0;font-size:.85rem;line-height:1.45;color:#A32A1E;font-weight:600}
/* la strada che resta quando il modulo non può prendere il contatto. Sta
   nascosta finché non serve: «hidden» da solo non basta contro il display
   del pulsante, e senza questa riga si vedrebbe sempre. */
.popup-wa{margin-top:.9rem;background:var(--smalto-turchese)}
.popup-wa[hidden]{display:none}
.popup-si{margin-top:1.1rem}
.popup-no{display:block;margin:.4rem auto 0;padding:.9rem 1.2rem;min-height:44px;
  border:0;background:none;cursor:pointer;
  font:400 .84rem/1 Karla,sans-serif;color:var(--grigio);text-decoration:underline;
  text-underline-offset:3px;transition:color .25s}
.popup-no:hover{color:var(--inchiostro)}

/* dopo l'invio, al posto del modulo: il codice, grande e da copiare */
.popup-grazie{text-align:center}
.popup-codice{margin:1.1rem 0 0}
.popup-codice code{display:inline-block;padding:.6rem 1.1rem;
  font:700 clamp(1.4rem,5.5vw,1.9rem)/1.1 Karla,sans-serif;letter-spacing:.1em;
  color:var(--inchiostro);background:var(--panna-2);border:1px dashed var(--rame);
  border-radius:var(--raggio);user-select:all}
.popup-copia{margin-top:.9rem;padding:.5rem .95rem;cursor:pointer;
  font:500 .78rem/1 Karla,sans-serif;letter-spacing:.06em;
  color:var(--inchiostro);background:none;border:1px solid var(--inchiostro);
  border-radius:999px;transition:background-color .25s,color .25s}
.popup-copia:hover{background:var(--inchiostro);color:var(--panna)}

@media(max-width:400px){
  .popup h2{font-size:1.3rem}
  .popup-campo{margin-top:.8rem}
}

@keyframes popup-entra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.popup[open] > form,.popup[open] > .popup-grazie{
  animation:popup-entra .38s cubic-bezier(.16,1,.3,1) both}
@media(prefers-reduced-motion:reduce){
  .popup[open] > form,.popup[open] > .popup-grazie{animation:none}
  .popup-chiudi,.popup-copia,.popup-no,.popup-campo input{transition:none}
}