/* =========================================================
   Cannatella Service — struttura dei widget del plugin
   Solo disposizione e movimento: caratteri, colori, spazi e riquadri si impostano nel pannello
   di Elementor (scheda Stile e Avanzate di ogni widget, Impostazioni del sito per i globali).
   I colori qui sotto sono solo il punto di partenza di un widget appena trascinato.
   ========================================================= */

@font-face { font-family: "Familjen Grotesk"; src: url("../fonts/familjen-grotesk-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Familjen Grotesk"; src: url("../fonts/familjen-grotesk-latin-ext.woff2") format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Host Grotesk"; src: url("../fonts/host-grotesk-latin.woff2") format("woff2"); font-weight: 300 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Host Grotesk"; src: url("../fonts/host-grotesk-latin-ext.woff2") format("woff2"); font-weight: 300 700; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root { --cann-ease: cubic-bezier(0.22, 1, 0.36, 1); }

/* scorrimento morbido (Lenis): senza queste regole la rotella va a scatti */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- cornice: vai al contenuto, schermata d'ingresso e di passaggio ---------- */
.skip-link {
  position: fixed; left: 16px; top: -60px; z-index: 400;
  padding: 10px 16px; border-radius: 10px; font-weight: 600;
  background: var(--e-global-color-cannaccent, #ff5c22); color: #0a0a0a;
  transition: top .2s var(--cann-ease);
}
.skip-link:focus { top: 16px; }
.cann-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.curtain {
  position: fixed; inset: 0; z-index: 300; display: grid; place-items: center;
  background: var(--e-global-color-cannbg, #f4f7fa); pointer-events: none; opacity: 0; visibility: hidden;
}
.curtain__name { font-family: "Familjen Grotesk", sans-serif; font-weight: 600; font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -0.03em; color: var(--e-global-color-canntext, #11151a); }
.js .curtain.is-intro { opacity: 1; visibility: visible; animation: cann-curtain-failsafe .4s 2.6s forwards; }
/* il nome entra da solo, senza aspettare gli script: poi cann.js fa salire la tendina */
.js .curtain.is-intro .curtain__name { animation: cann-curtain-nome .6s cubic-bezier(0.16, 1, 0.3, 1) .1s both; }
@keyframes cann-curtain-nome { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.no-intro .curtain.is-intro { display: none; }
@keyframes cann-curtain-failsafe { to { opacity: 0; visibility: hidden; } }
.curtain.is-leaving { opacity: 1; visibility: visible; transition: opacity .35s var(--cann-ease); }

/* le icone (widget Icona) alte quanto il disegno, senza la riga di testo intorno */
.elementor-widget-icon .elementor-icon-wrapper, .elementor-widget-icon .elementor-icon { display: block; line-height: 0; }

/* frecce dei link e dei pulsanti: si spostano un poco passandoci sopra */
.cann-freccia, .cann-archivio, .cann-invito { display: inline-flex; align-items: center; gap: 8px; }
:is(.cann-freccia, .cann-archivio, .cann-invito) svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; transition: transform .3s var(--cann-ease); }
:is(.cann-freccia, .cann-archivio):hover svg { transform: translate(2px, -2px); }
a:hover .cann-invito svg { transform: translateX(3px); }
.cann-freccia, .cann-archivio { padding-bottom: 4px; border-bottom: 1px solid var(--e-global-color-cannline2, #c9d2dc); transition: color .25s var(--cann-ease), border-color .25s var(--cann-ease); }
:is(.cann-freccia, .cann-archivio):hover { border-bottom-color: var(--e-global-color-cannaccent, #ff5c22); }
.elementor-button .elementor-button-icon svg { transition: transform .3s var(--cann-ease); }
.elementor-button:hover .elementor-button-icon svg { transform: translateX(3px); }

/* ---------- linea di sezione ---------- */
.cann-linea { position: relative; height: 2px; width: min(100% - 2 * clamp(16px, 4vw, 48px), 1320px); margin-inline: auto; background: var(--e-global-color-cannline, #dde3ea); pointer-events: none; }
.cann-linea__pieno { position: absolute; inset: 0; background: linear-gradient(to right, var(--cann-pieno, var(--e-global-color-cannaccent, #ff5c22)), var(--e-global-color-cannaccent2, #ff7a47)); transform-origin: left; transform: scaleX(var(--p, 1)); }
.js .cann-linea { --p: 0; }

/* ---------- testo grande in due toni ---------- */
.lit { margin: 0; text-wrap: pretty; color: var(--e-global-color-canntext3, #b4bdc7); }
.lit strong { font-weight: 600; color: var(--e-global-color-canntext, #11151a); }
.lit .w { transition: color .3s; }
.lit .w:not(.on) { color: inherit; }
.lit .w.on { color: var(--e-global-color-canntext, #11151a); }

/* ---------- orologio ---------- */
.clock { display: flex; align-items: center; gap: 12px; }
.clock__time { display: flex; align-items: center; line-height: 1; font-variant-numeric: tabular-nums; }
.clock__digit { display: inline-block; height: 1em; overflow: hidden; width: .62em; text-align: center; }
.clock__digit > span { display: flex; flex-direction: column; transition: transform .7s var(--cann-ease); }
.clock__digit > span > i { font-style: normal; height: 1em; line-height: 1; }
.clock__sep { width: .3em; text-align: center; opacity: .5; }
.clock__meta { display: flex; flex-direction: column; }
.clock__status { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.clock__status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--e-global-color-canntext3, #b4bdc7); }
.clock[data-open="true"] .clock__status::before { background: #3ecf6e; box-shadow: 0 0 0 3px rgba(62, 207, 110, .18); }
@media (max-width: 1180px) { .clock__meta { display: none; } }

/* ---------- orari ---------- */
.cann-orari { width: 100%; margin: 0; border-collapse: collapse; }
.cann-orari :is(th, td) { padding: 7px 0; border: 0; border-bottom: 1px solid var(--e-global-color-cannline, #dde3ea); background: none; text-align: left; font-weight: inherit; }
.cann-orari td { text-align: right; font-variant-numeric: tabular-nums; }
.cann-orari tbody > tr:nth-child(odd) > :is(td, th), .cann-orari tbody tr:hover > :is(td, th) { background: none; }

/* ---------- briciole ---------- */
.cann-briciole { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.cann-briciole a { text-decoration: underline; text-underline-offset: 3px; transition: color .2s; }

/* ---------- indice della pagina ---------- */
.cann-indice__titolo { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.cann-indice__titolo svg { width: 22px; height: 22px; flex: none; }
.cann-indice ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 28px; margin: 0; padding: 0; list-style: none; counter-reset: cann-indice; }
.cann-indice li { counter-increment: cann-indice; }
.cann-indice a { display: flex; gap: 12px; align-items: baseline; padding: 8px 0; border-bottom: 1px dashed var(--e-global-color-cannline2, #c9d2dc); transition: color .2s; }
.cann-indice a::before { content: counter(cann-indice, decimal-leading-zero); font-family: "Familjen Grotesk", sans-serif; font-size: .85rem; font-weight: 600; }

/* ---------- dati dell'articolo (template dell'articolo e card) ---------- */
.cann-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; }
.cann-meta__cat { padding: 3px 9px; border-radius: 999px; font-weight: 600; }
.cann-riassunto, .cann-titolo { margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cann-invito { display: flex; width: fit-content; transition: color .25s var(--cann-ease); }
.cann-figura { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; }
.cann-figura img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--cann-ease); }
.cann-figura--vuota { background-image: radial-gradient(60% 60% at 50% 55%, rgba(255, 92, 34, .16), transparent 70%), linear-gradient(160deg, #fff, #eef2f6); }
.e-loop-item > a.e-con { transition: transform .35s var(--cann-ease), box-shadow .35s var(--cann-ease), border-color .35s var(--cann-ease); }

/* ---------- percorso a tappe ---------- */
.steps { --cann-pieno: var(--e-global-color-cannaccent, #ff5c22); --cann-punto: var(--e-global-color-cannaccent, #ff5c22); position: relative; margin: 0 auto; padding: 0; list-style: none; }
.steps__rail { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--e-global-color-cannline2, #c9d2dc); transform: translateX(-50%); }
.steps__fill { position: absolute; inset: 0; background: linear-gradient(var(--cann-pieno), var(--e-global-color-canntext, #11151a)); transform-origin: top; transform: scaleY(0); }
.step { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0 72px; padding-block: clamp(24px, 3vw, 40px); }
.step__dot {
  position: absolute; left: 50%; top: clamp(32px, 3.6vw, 50px); width: 15px; height: 15px; border-radius: 50%;
  background: var(--e-global-color-cannbg, #f4f7fa); border: 1.5px solid var(--e-global-color-canntext3, #b4bdc7);
  transform: translateX(-50%); transition: border-color .4s, background-color .4s, box-shadow .4s;
}
.step.on .step__dot { border-color: var(--cann-punto); background: var(--cann-punto); box-shadow: 0 0 0 6px color-mix(in srgb, var(--cann-punto) 12%, transparent); }
.step h3 { margin: 0; }
.step p { margin: 12px 0 0; max-width: 26rem; }
.step__body { grid-column: 2; }
.step:nth-child(odd of .step) .step__body { grid-column: 1; text-align: right; }
.step:nth-child(odd of .step) p { margin-left: auto; }
@media (min-width: 1021px) {
  .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); padding-top: 44px; }
  .steps__rail { left: 0; right: 0; top: 7px; bottom: auto; width: auto; height: 1px; transform: none; }
  .steps__fill { background: linear-gradient(90deg, var(--cann-pieno), var(--e-global-color-canntext, #11151a)); transform-origin: left; transform: scaleX(0); }
  .step { display: block; padding: 0; }
  .step__dot { left: 0; top: -44px; transform: none; }
  .step__body, .step:nth-child(odd of .step) .step__body { text-align: left; }
  .step p, .step:nth-child(odd of .step) p { margin-left: 0; max-width: none; }
  .step:nth-child(3) .step__dot { transition-delay: .25s; }
  .step:nth-child(4) .step__dot { transition-delay: .5s; }
}
@media (max-width: 760px) {
  .steps__rail { left: 7px; }
  .step { grid-template-columns: 1fr; padding-left: 40px; padding-block: 26px; }
  .step__dot { left: 7px; top: 32px; }
  .step__body, .step:nth-child(odd of .step) .step__body { grid-column: 1; text-align: left; }
  .step:nth-child(odd of .step) p { margin-left: 0; }
}

/* ---------- servizi illustrati ---------- */
.svc__stage { display: none; }
.svc__list { display: grid; gap: clamp(36px, 5vw, 64px); margin: 0; padding: 0; list-style: none; }
.svc__item { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.svc__art svg { display: block; width: min(100%, 380px); height: auto; margin-inline: auto; filter: drop-shadow(0 36px 54px rgba(20, 30, 45, .18)); }
/* illustrazioni chiare: contorno ardesia sottile per leggerle sullo sfondo ghiaccio */
.svc__art svg :is(rect, path, ellipse, circle, polygon):not([stroke]):not([opacity]):not([fill-opacity]) {
  stroke: #5b6877; stroke-opacity: .55; stroke-width: 1.4px; stroke-linejoin: round; vector-effect: non-scaling-stroke;
}
.svc__art svg > ellipse:first-child { opacity: .12; }
.svc__body :is(h2, h3) { margin: 0; }
.svc__body p { margin: 18px 0 1em; max-width: 32rem; }
.svc__body p:last-child { margin-bottom: 0; }
.svc--profile .svc__body p + p { margin-top: 14px; }
.svc__body .cann-freccia { margin-top: 26px; }
.svc--staged .svc__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); }
.svc--staged .svc__stage { display: block; position: sticky; top: calc(50svh - 250px); height: 500px; }
.svc--staged .svc__stage-art { position: absolute; inset: 0 0 56px; }
.svc--staged .svc__stage-art .svc__art {
  position: absolute; inset: 0; display: grid; place-items: center;
  opacity: 0; transform: translateY(70px) scale(.94);
  transition: opacity .55s var(--cann-ease), transform .9s var(--cann-ease);
}
.svc--staged .svc__stage-art .svc__art.is-past { transform: translateY(-60px) scale(.94); }
.svc--staged .svc__stage-art .svc__art.is-on { opacity: 1; transform: none; }
.svc--staged .svc__stage-art svg { width: auto; height: 100%; max-height: 440px; }
.svc__count { position: absolute; left: 0; bottom: 0; display: flex; align-items: baseline; gap: 6px; font-family: "Familjen Grotesk", sans-serif; font-variant-numeric: tabular-nums; }
.svc__count b { font-weight: 500; font-size: 2rem; letter-spacing: -0.03em; }
.svc__count span { color: var(--e-global-color-canntext2, #525a64); }
.svc--staged .svc__list { gap: 0; }
.svc--staged .svc__item { display: flex; min-height: 44svh; align-items: center; padding-block: 24px; }
.svc--staged.svc--profile .svc__item { min-height: 52svh; }
.svc--staged .svc__item .svc__body { opacity: .28; transition: opacity .5s var(--cann-ease); }
.svc--staged .svc__item.is-on .svc__body { opacity: 1; }
@media (max-width: 760px) {
  .svc__item { grid-template-columns: 1fr; gap: 20px; }
  .svc__art svg { width: min(72%, 300px); }
}

/* ---------- movimento ridotto: tutto già al suo posto ---------- */
@media (prefers-reduced-motion: reduce) {
  .js .cann-linea { --p: 1 !important; }
  .lit .w:not(.on) { color: inherit; }
  .js .curtain.is-intro { opacity: 0; visibility: hidden; }
}