/* Cucina Creativa 2.0, tema per plumeCMS: pomodoro, basilico, zafferano ed espresso. I colori stanno in stile.json. */
:root{--r:24px;--velo-1:#c22e1a;--velo-2:#ffb000;--velo-3:#1f1210;--velo-o:.35;--fx-1:#ffb000;--fx-2:#c22e1a;
  --zaf:var(--g-colore-zafferano,#ffb000);--esp:var(--g-colore-espresso,#1f1210);--crm:var(--g-colore-crema,#fff8ef);
  --grad:linear-gradient(100deg,#c22e1a,#e0531f)}

/* Testata di vetro crema che resta in alto mentre scorri. */
.top,.ed-testata{background:rgba(255,248,239,.86);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--bordo);box-shadow:0 6px 24px rgba(31,18,16,.06)}
.ed-testata .marchio b{font-family:var(--f-titolo);font-size:24px;font-weight:400;letter-spacing:-.3px}
.ed-testata .marchio small{white-space:nowrap;color:var(--ciano);font-weight:700;letter-spacing:.14em}

/* Occhielli: pastiglia zafferano con il testo espresso, come un'etichetta sul barattolo. */
.occhiello{display:inline-block;background:var(--zaf);color:var(--esp);padding:6px 14px;border-radius:999px;letter-spacing:.14em;font-weight:800;font-size:12px}

/* Le parole in evidenza: pomodoro, con il tratto di evidenziatore zafferano sotto. */
.hero h1 em,.sez-titolo em,.ed-w-titolo h1 em,.ed-w-titolo h2 em,.ed-w-frase em{font-style:italic;background:linear-gradient(transparent 62%,rgba(255,176,0,.55) 62%,rgba(255,176,0,.55) 92%,transparent 92%);-webkit-text-fill-color:currentColor;color:var(--viola);padding:0 .08em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.cc-scuro .sez-titolo em,.cc-scuro .ed-w-titolo h2 em,.cc-rosso .ed-w-titolo h2 em{color:var(--zaf);background:none}

/* Pulsanti pieni, rotondi, con un rimbalzo al passaggio. Il secondario (zafferano) ha il testo espresso. */
.btn{transition:transform .18s ease,box-shadow .18s ease}
.btn:hover{transform:translateY(-2px)}
.btn-viola{box-shadow:0 10px 26px rgba(194,46,26,.28)}
.btn-ciano{box-shadow:0 10px 26px rgba(31,122,69,.22)}
.btn-filo{border-width:2px}
.cc-scuro .btn-viola,.cc-rosso .btn-viola{background:var(--zaf);color:var(--esp);box-shadow:0 10px 26px rgba(0,0,0,.25)}
.cc-scuro .btn-filo,.cc-rosso .btn-filo{border-color:var(--crm);color:var(--crm)}

/* Riquadri e carte: bianchi, rotondi, che si sollevano al passaggio. */
.ew-ribox,.card,.ew-flip-fronte,.ew-flip-retro{border-radius:var(--r)}
.ew-ribox,.card{background:#fff;border:1px solid var(--bordo);box-shadow:0 2px 4px rgba(31,18,16,.04),0 18px 44px rgba(31,18,16,.10);overflow:hidden;transition:transform .25s ease,box-shadow .25s ease}
.ew-ribox:hover,.card:hover{transform:translateY(-6px) rotate(-.4deg);box-shadow:0 4px 8px rgba(31,18,16,.06),0 28px 60px rgba(31,18,16,.16)}
.ew-ribox{height:100%;padding-bottom:24px}
.ew-ribox>:not(.ew-ribox-immagine){padding-left:24px;padding-right:24px}
.ew-ribox-immagine{margin:0 0 18px}
.ew-ribox-immagine img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:0;display:block}
.ed-widget .ew-ribox h3.ew-ribox-titolo a.ew-ribox-link{color:inherit;text-decoration:none}
.ed-widget .ew-ribox h3.ew-ribox-titolo a.ew-ribox-link:hover,.ed-widget .ew-ribox h3.ew-ribox-titolo a.ew-ribox-link:focus-visible{text-decoration:underline}
.ed-w-immagine img{box-shadow:0 2px 4px rgba(31,18,16,.06),0 24px 56px rgba(31,18,16,.18)}

/* Le sezioni scure (espresso) e rosse (pomodoro): testi chiari. */
.cc-scuro,.cc-rosso{color:var(--crm)}
.cc-scuro .ed-w-testo p,.cc-rosso .ed-w-testo p{color:var(--crm)}

/* La Copertina e le altre aperture: velo pomodoro-espresso sotto le parole. */
@media (min-width:861px){.ed-w-hero .ed-hero-copertina .ed-hcop-velo{background:linear-gradient(90deg,rgba(31,18,16,.86) 0%,rgba(31,18,16,.6) 45%,rgba(194,46,26,.12) 78%,rgba(31,18,16,0) 100%)}}
@media (max-width:860px){.ed-w-hero .ed-hero-copertina .ed-hcop-velo{background:linear-gradient(0deg,rgba(31,18,16,.92) 0%,rgba(31,18,16,.8) 55%,rgba(31,18,16,.35) 85%,rgba(31,18,16,.15) 100%)}}

/* I numeri dei contatori in zafferano, grandi. */
.ed-pagina .cc-scuro .ew-contatore-numero{color:var(--zaf)}
.ed-pagina .cc-scuro .ew-contatore-titolo{color:var(--crm);opacity:.92}

/* Il piede espresso: ogni testo prende il crema. */
.ed-piede.ed-modello .ed-w-testo p,.ed-piede.ed-modello .ed-copyright,.ed-piede.ed-modello .marchio small{color:var(--crm)}
.ed-piede.ed-modello .marchio b{font-family:var(--f-titolo);font-size:28px;font-weight:400;color:var(--zaf)}
.ed-piede.ed-modello .ed-w-testo strong{display:block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:6px;color:var(--zaf)}
.ed-piede.ed-modello .ed-w-testo p{font-size:15px;margin:0 0 6px}
.ed-piede.ed-modello .ed-w-testo a{color:var(--crm)}

/* Nelle sezioni scure e rosse anche il testo sotto i titoli è chiaro (il widget usa il testo attenuato del sito). */
.ed-pagina .cc-scuro .sez-intro,.ed-pagina .cc-scuro .sez-intro p,.ed-pagina .cc-rosso .sez-intro,.ed-pagina .cc-rosso .sez-intro p{color:var(--crm)}
/* Il conto alla rovescia sul rosso: caselle di vetro chiaro, numeri bianchi. */
.ed-pagina .cc-rosso .ew-conto-voce{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);border-radius:18px}
.ed-pagina .cc-rosso .ew-conto-num{color:#fff;font-family:var(--f-titolo);font-weight:400}
.ed-pagina .cc-rosso .ew-conto-eti{color:#ffe7c2;font-weight:700;letter-spacing:.12em}
/* L'invito con la foto di sfondo: velo espresso (quello di partenza è crema e il testo bianco sparisce). */
.ed-pagina .ew-cta-copertina{--ew-velo-pred:rgba(31,18,16,.7);border-radius:var(--r);overflow:hidden}
.ed-pagina .ew-cta-copertina .ew-cta-icona{color:var(--zaf)}

/* Le carte sul fondo espresso diventano di vetro scuro, con il testo crema e le icone zafferano. */
.ed-pagina .cc-scuro .ew-ribox{background:rgba(255,248,239,.06);border-color:rgba(255,248,239,.18);box-shadow:none;padding:28px}
.ed-pagina .cc-scuro .ew-ribox,.ed-pagina .cc-scuro .ew-ribox *{color:var(--crm)}
.ed-pagina .cc-scuro .ew-ribox .ew-ic,.ed-pagina .cc-scuro .ew-ribox .ew-ic *{color:var(--zaf)}
.ed-pagina .cc-scuro .ew-ev-vuoto{color:var(--crm);font-size:17px}
/* La pastiglia dell'occhiello resta corta anche nelle aperture che la mettono a tutta riga. */
.ed-pagina .ed-hero .occhiello{display:inline-block;width:auto;max-width:max-content}
/* Flip box: fronte bianco con la foto grande, retro pomodoro con il testo bianco e il pulsante zafferano. */
.ed-pagina .ew-flip-fronte{background:#fff;border:1px solid var(--bordo);box-shadow:0 2px 4px rgba(31,18,16,.04),0 18px 44px rgba(31,18,16,.10)}
.ed-pagina .ew-flip-fronte .ew-flip-immagine img{width:100%;max-width:none;height:190px;object-fit:cover;border-radius:16px}
.ed-pagina .ew-flip-fronte .ew-flip-immagine{width:100%;margin-bottom:12px}
.ed-pagina .ew-flip-fronte .ew-flip-icona{color:var(--viola)}
.ed-pagina .ew-flip-retro{background:linear-gradient(160deg,#c22e1a,#8f1f10)}
.ed-pagina .ew-flip-retro .ew-flip-titolo,.ed-pagina .ew-flip-retro .ew-flip-testo,.ed-pagina .ew-flip-retro .ew-flip-testo p{color:#fff}
.ed-pagina .ew-flip-retro .btn{background:var(--zaf);color:var(--esp);border-color:var(--zaf)}

/* Il titolo animato grande come un titolo vero; la parola che cambia in pomodoro. */
.ed-pagina .ew-tanim{font-family:var(--f-titolo);font-weight:400;font-size:clamp(30px,3.6vw,48px);line-height:1.08;letter-spacing:-.6px}
.ed-pagina .ew-tanim .ew-tanim-rot,.ed-pagina .ew-tanim .ew-tanim-mark{color:var(--viola)}

/* Scorri di lato: titoli in tondo, foto vere (velo espresso solo dove c'è il testo), evidenza zafferano. */
.ed-pagina .sdl .sdl-titolo,.ed-pagina .sdl .sdl-titolo-sez{text-transform:none;font-weight:400;letter-spacing:-.4px}
.ed-pagina .sdl .sdl-titolo-sez em{background:linear-gradient(transparent 62%,rgba(255,176,0,.55) 62%,rgba(255,176,0,.55) 92%,transparent 92%);-webkit-background-clip:border-box;background-clip:border-box;color:var(--viola);font-style:italic}
.ed-pagina .sdl-d-carte .sdl-con-foto::before,.ed-pagina .sdl-d-profondita .sdl-con-foto::before{background:linear-gradient(0deg,rgba(31,18,16,.92) 0%,rgba(31,18,16,.7) 38%,rgba(31,18,16,.15) 68%,rgba(31,18,16,0) 100%)}
.ed-pagina .sdl-d-carte .sdl-con-foto .sdl-titolo em,.ed-pagina .sdl-d-profondita .sdl-con-foto .sdl-titolo em{color:var(--zaf);box-shadow:none;font-style:italic}
.ed-pagina .sdl-d-carte .sdl-pagina{min-height:440px;border-radius:var(--r)}
/* La testata del widget si allargava quanto tutta la fila delle carte e il titolo usciva dallo schermo del telefono. */
.ed-pagina .sdl .sdl-testa{width:100%;max-width:100vw;box-sizing:border-box}
.ed-pagina .sdl .sdl-titolo-sez{max-width:min(100%,calc(100vw - 40px))}
.sdl-d-carte .sdl-pagina .sdl-finestra img{transition:transform .8s ease}
.sdl-d-carte .sdl-pagina:hover .sdl-finestra img{transform:scale(1.06)}

@media (prefers-reduced-motion:reduce){.sdl-d-carte .sdl-pagina:hover .sdl-finestra img{transform:none}.btn,.ew-ribox,.card{transition:none}.btn:hover,.ew-ribox:hover,.card:hover{transform:none}}