/* Klelia, FAQ «Editoriale» versione finale (Marketipo, ott 2026).
   Radice .kq, tutto confinato: ogni selettore inizia con .kq, più la regola :has() che nasconde il titolo Elementor.
   Le domande sono <details> nativi: risposte nel DOM (motori di ricerca, Ctrl+F le apre in Chrome), apertura senza JS.
   Ordine nel DOM: titolo, domande, contatti. Da 992px la griglia porta i contatti nella colonna di sinistra
   e il biglietto resta fermo accanto alle risposte (position:sticky dentro la sua cella).
   Contratto con la testata: --kh-altezza-ferma su html (vedi --kq-ferma qui sotto). */

/* il titolo Elementor che stava sopra le FAQ in home ora vive dentro la sezione. Si nasconde solo se nel widget c'è
   davvero la FAQ nuova: nel ripiego del plugin (lettura del widget fallita, esce la FAQ originale) il titolo resta */
.elementor-widget-heading:has(+ .elementor-widget-porto_faqs .kq) { display: none }

.kq {
  --kq-ink: #222529;
  --kq-soft: #585065;
  --kq-line: rgba(34, 37, 41, .14);
  --kq-line-2: rgba(34, 37, 41, .26);
  --kq-line-v: rgba(99, 42, 72, .16);
  --kq-wine: #632a48;
  --kq-plum: #3b3644;
  --kq-rasp: #bd528b;
  --kq-rasp-d: #a8447a;
  --kq-blush: #ffecf8;
  --kq-font: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --kq-ease: cubic-bezier(.22, .7, .2, 1);
  /* spazio coperto in alto quando la pagina è scorsa. Contratto: la testata dichiara su html --kh-altezza-ferma,
     l'altezza che resta ferma in alto a pagina scorsa, barra di amministrazione compresa, SEMPRE come lunghezza con
     unità (64px; 0px se sparisce). Un numero senza unità renderebbe invalidi i calc() qui sotto: faq.js lo legge come px.
     Senza dichiarazione vale 72px: quanto la barra più alta che le testate provate lasciano ferma (finale: 48px da
     computer, fino a 72px sotto i 992px; C: 52px; ticker di oggi: 54px), così nulla finisce sotto la testata nemmeno
     senza JS; faq.js poi misura cosa copre davvero (a pagina ferma, mai in cima) e corregge. */
  --kq-ferma: var(--kh-altezza-ferma, 72px);
  /* colonne della riga domanda: numero, testo, icona */
  --kq-cn: 52px;
  --kq-gap: 20px;
  --kq-ci: 40px;
  --kq-lh: 28px;
  display: block;
  margin: 0;
  padding: 0;
  font-family: var(--kq-font);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--kq-soft);
  text-align: left;
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  interpolate-size: allow-keywords;
}
.kq *, .kq *::before, .kq *::after { box-sizing: border-box }
/* neutralizza h1/h2/p/ul/li/a/button del tema e di Elementor */
.kq h1, .kq h2, .kq p, .kq ul, .kq ol, .kq li {
  margin: 0; padding: 0; border: 0; background: none;
  font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit;
  letter-spacing: inherit; text-transform: none; color: inherit; text-align: inherit;
}
.kq ul, .kq ol, .kq li { list-style: none }
.kq li::before { content: none }
.kq a { color: inherit; text-decoration: none }
.kq button {
  margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  font: inherit; letter-spacing: inherit; text-transform: none; color: inherit; cursor: pointer;
}
.kq button[hidden] { display: none }
.kq svg { flex: none; display: block; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round }
.kq :focus-visible { outline: 2px solid var(--kq-wine); outline-offset: 4px; border-radius: 4px }
/* theme.css ha body a{outline:none!important}: serve !important per riavere il fuoco sui link */
.kq a:focus-visible { outline: 2px solid var(--kq-wine) !important; outline-offset: 4px }
/* il fuoco non finisce sotto la testata ferma né sotto il pulsante WhatsApp: questo sta a 150px dal fondo ed è alto
   56px (fino a 206px), l'anello del fuoco esce di 10px dalla riga; 230px lasciano 14px di respiro sopra il pulsante */
.kq a, .kq summary, .kq button { scroll-margin: calc(var(--kq-ferma) + 40px) 0 230px }
.kq .kq-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* elementi di una sola variante: interi, mai dentro il titolo */
.kq.kq--home .kq-solo-pagina, .kq.kq--pagina .kq-solo-home { display: none }

/* impaginato: una colonna fino a 991px, poi due (vedi in fondo) */
.kq .kq-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "main" "aside";
}
.kq .kq-head { grid-area: head; min-width: 0 }
.kq .kq-main { grid-area: main; min-width: 0 }
.kq .kq-aside { grid-area: aside; min-width: 0 }
.kq--pagina .kq-wrap { width: min(1120px, 100%); margin: 0 auto }
/* il widget Elementor ha già 15px sopra e 75px sotto: qui si bilancia il respiro tra i due filetti grigi della home */
.kq--home { padding: 72px 0 12px }
.kq--pagina { padding: 64px 0 120px }

/* testa della sezione. Home: «Domande frequenti» è il titolo (h2) in forma di occhiello, la frase grande lo segue.
   Pagina: occhiello «Assistenza clienti», poi «Domande frequenti» grande (h1). Altezze di riga in px: se Jost arriva
   tardi (display=swap) le righe, e quindi l'impaginato, restano ferme. Le lettere invece si spostano di qualche px
   dentro la riga (8px l'em del titolo a 60px, 3px le domande), perché il carattere di riserva ha ascendenti e
   discendenti diversi, e Chrome lo conta nel CLS. Da qui non si toglie: klelia-tipografia.css impone a tutto il testo
   la sua pila di caratteri e vince su ogni regola di questo file; serve un carattere di riserva tarato su Jost
   (size-adjust, ascent-override, descent-override) in quel modulo. */
.kq--home { --kq-big: 48px; --kq-big-lh: 54px }
.kq--pagina { --kq-big: 60px; --kq-big-lh: 62px }
.kq .kq-title { display: block; margin: 0; color: var(--kq-ink) }
.kq--home .kq-title, .kq .kq-kicker {
  font-size: 12px; line-height: 18px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--kq-wine);
}
.kq--home .kq-title::before {
  content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 12px 0 1px; vertical-align: 2px;
  background: var(--kq-rasp); transform: rotate(45deg);
}
/* pagina: il segno vino dell'occhiello è lungo quanto la colonna dei numeri, come quello della domanda aperta */
.kq .kq-kicker { display: flex; align-items: center; gap: 16px; min-height: 44px }
.kq .kq-kicker::before { content: ""; flex: none; width: var(--kq-cn); height: 2px; background: var(--kq-wine) }
.kq--pagina .kq-title {
  margin-top: 14px; font-size: var(--kq-big); line-height: var(--kq-big-lh); font-weight: 300; letter-spacing: -.02em;
}
.kq .kq-title em, .kq .kq-hook em { font-style: italic; font-weight: 300; color: var(--kq-wine); padding-right: .04em }
.kq.kq--home .kq-title em { font-style: normal; font-weight: inherit; color: inherit; padding: 0 }
/* pagina: «frequenti» va sempre a capo dove la colonna è stretta, così il titolo ha la stessa altezza
   con Jost e con il carattere di riserva: quello che sta sotto non si sposta (le lettere sì, vedi sopra) */
.kq--pagina .kq-title em { display: block }
.kq .kq-hook {
  margin-top: 18px; font-size: var(--kq-big); line-height: var(--kq-big-lh); font-weight: 300; letter-spacing: -.015em;
  color: var(--kq-ink); text-wrap: balance;
}
.kq .kq-lead {
  margin-top: 20px; max-width: 36ch;
  font-size: 16px; line-height: 26px; color: var(--kq-soft); text-wrap: balance;
}
.kq--pagina .kq-lead { margin-top: 18px; max-width: 34ch; font-size: 17px; line-height: 28px }

/* biglietto contatti: carta cipria semplice, angoli 8px, righe con filetti (il biglietto con le tacche resta del NEW10) */
.kq .kq-aside { margin-top: 48px }
.kq .kq-card { max-width: 380px; padding: 28px 30px 8px; background: var(--kq-blush); border-radius: 8px }
.kq .kq-card-eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; line-height: 18px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--kq-wine);
}
.kq .kq-card-eyebrow::before {
  content: ""; flex: none; width: 5px; height: 5px; margin: 0 1px;
  background: var(--kq-rasp); transform: rotate(45deg);
}
.kq .kq-card-title {
  margin-top: 12px; font-size: 24px; line-height: 28px; font-weight: 600; letter-spacing: -.01em; color: var(--kq-ink);
}
.kq .kq-card-title span { display: block; margin-top: 2px; font-weight: 300 }
.kq .kq-contacts { margin-top: 20px; border-top: 1px solid var(--kq-line-v) }
.kq .kq-contacts li + li { border-top: 1px solid var(--kq-line-v) }
.kq .kq-contact { display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 12px 0; color: var(--kq-ink) }
.kq .kq-contact-i {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px;
  background: #fff; border: 1px solid var(--kq-line-v); border-radius: 50%; color: var(--kq-wine);
}
.kq .kq-contact-txt { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto }
.kq .kq-contact-k {
  font-size: 11.5px; line-height: 16px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--kq-soft);
}
.kq .kq-contact-v { margin-top: 2px; font-size: 16px; line-height: 24px; color: var(--kq-ink); overflow-wrap: anywhere }
.kq .kq-contact-go { color: var(--kq-wine) }
.kq .kq-contact:focus-visible { outline-offset: 2px; border-radius: 6px }

/* barra della pagina sopra l'elenco: «Apri tutte le risposte». Il pulsante nasce hidden e lo accende faq.js.
   La barra c'è di base e si toglie solo dove il browser dice che gli script sono spenti: chi non conosce la funzione
   media «scripting» (Safari fino a 16, Chromium prima della 120) la mostra, così il pulsante acceso dal JS si vede */
.kq .kq-tools { display: none }
.kq--pagina .kq-tools { display: flex; justify-content: flex-end; align-items: center; min-height: 44px }
@media (scripting: none) {
  .kq--pagina .kq-tools { display: none }
}
.kq .kq-tutte {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 2px;
  font-size: 12px; line-height: 18px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--kq-wine);
}
/* più che diventa meno, sulla stessa colonna dei cerchi delle domande */
.kq .kq-tutte-ico { position: relative; flex: none; width: var(--kq-ci); height: 18px }
.kq .kq-tutte-ico::before, .kq .kq-tutte-ico::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; margin: -.75px 0 0 -5.5px;
  background: currentColor; border-radius: 1px;
}
.kq .kq-tutte-ico::after { transform: rotate(90deg) }
.kq .kq-tutte--aperte .kq-tutte-ico::after { transform: rotate(0deg) }
.kq .kq-tutte:focus-visible { outline-offset: 2px }

/* indice: lo crea faq.js solo sulla pagina e solo con più di 8 domande, da 768px (sotto, l'elenco chiuso è già
   un indice). Righe fisse da 40px: alto 64px più 40px per riga. Il CSS conta le domande con :has() e tiene il posto
   all'indice prima che arrivi: l'elenco non si sposta. Il posto si libera solo con gli script spenti dichiarati
   (scripting: none), come per la barra qui sopra. */
.kq .kq-indice { display: none }
.kq--pagina .kq-main:has(.kq-item:nth-child(9)) { --kq-righe: 5 }
.kq--pagina .kq-main:has(.kq-item:nth-child(11)) { --kq-righe: 6 }
.kq--pagina .kq-main:has(.kq-item:nth-child(13)) { --kq-righe: 7 }
.kq--pagina .kq-main:has(.kq-item:nth-child(15)) { --kq-righe: 8 }
.kq--pagina .kq-main:has(.kq-item:nth-child(17)) { --kq-righe: 9 }
.kq--pagina .kq-main:has(.kq-item:nth-child(19)) { --kq-righe: 10 }
.kq--pagina .kq-main:has(.kq-item:nth-child(21)) { --kq-righe: 11 }
.kq--pagina .kq-main:has(.kq-item:nth-child(23)) { --kq-righe: 12 }
@media (min-width: 768px) {
  .kq--pagina .kq-main:has(.kq-item:nth-child(9)):not(:has(.kq-indice)) .kq-list { margin-top: calc(var(--kq-righe) * 40px + 64px) }
}
@media (scripting: none) {
  .kq--pagina .kq-main:has(.kq-item:nth-child(9)):not(:has(.kq-indice)) .kq-list { margin-top: 0 }
}
@media (min-width: 768px) {
  .kq--pagina .kq-indice { display: block; padding-bottom: 24px }
  .kq .kq-indice-t {
    height: 40px; font-size: 12px; line-height: 40px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
    color: var(--kq-soft);
  }
  .kq .kq-indice ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 40px; column-gap: 32px }
  .kq .kq-indice-a {
    display: flex; align-items: center; gap: 12px; height: 40px; border-bottom: 1px solid var(--kq-line);
    font-size: 14.5px; line-height: 20px; color: var(--kq-ink);
  }
  .kq .kq-indice-n { flex: none; width: 22px; font-size: 11.5px; font-weight: 500; letter-spacing: .08em; color: var(--kq-rasp-d); font-variant-numeric: tabular-nums }
  .kq .kq-indice-q { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis }
  .kq .kq-indice-a:focus-visible { outline-offset: 2px }
}

/* elenco delle domande */
.kq .kq-list { counter-reset: kq; border-top: 1px solid var(--kq-line) }
.kq .kq-item {
  position: relative; counter-increment: kq; border-bottom: 1px solid var(--kq-line);
  scroll-margin-top: calc(var(--kq-ferma) + 24px);
}
.kq .kq-q {
  position: relative;
  display: grid; grid-template-columns: var(--kq-cn) minmax(0, 1fr) var(--kq-ci); column-gap: var(--kq-gap);
  align-items: baseline;
  min-height: 44px; padding: 28px 0; cursor: pointer; list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.kq .kq-q::-webkit-details-marker { display: none }
.kq .kq-q::marker { content: "" }
/* segnalibro vino sul filetto della domanda aperta, lungo quanto la colonna del numero */
.kq .kq-q::before {
  content: ""; position: absolute; left: 0; top: -1px; width: var(--kq-cn); height: 2px;
  background: var(--kq-wine); transform: scaleX(0); transform-origin: 0 50%;
}
.kq .kq-item[open] > .kq-q::before { transform: none }
.kq .kq-n {
  font-size: 12.5px; line-height: 18px; font-weight: 500; letter-spacing: .12em; color: var(--kq-rasp-d);
  font-variant-numeric: tabular-nums;
}
.kq .kq-n::before { content: counter(kq, decimal-leading-zero) }
.kq .kq-q-txt {
  font-size: 20px; line-height: var(--kq-lh); font-weight: 400; letter-spacing: -.005em; color: var(--kq-ink);
  text-wrap: balance;
}
/* il cerchio sta centrato sulla prima riga della domanda, anche quando la domanda va a capo */
.kq .kq-ico {
  position: relative; align-self: start; width: var(--kq-ci); height: var(--kq-ci);
  margin-top: calc((var(--kq-lh) - var(--kq-ci)) / 2);
  border: 1px solid var(--kq-line-2); border-radius: 50%; color: var(--kq-ink);
}
.kq .kq-ico::before, .kq .kq-ico::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 1.5px; margin: -.75px 0 0 -6.5px;
  background: currentColor; border-radius: 1px;
}
.kq .kq-ico::after { transform: rotate(90deg) }
/* aperta: un solo accento, il vino (numero, domanda, segno sul filetto, bordo e segno del disco cipria).
   Il disco resta chiaro: con tutte le risposte aperte la colonna dei cerchi non pesa. */
.kq .kq-item[open] .kq-n, .kq .kq-item[open] .kq-q-txt { color: var(--kq-wine) }
.kq .kq-item[open] .kq-ico { background: var(--kq-blush); border-color: var(--kq-wine); color: var(--kq-wine) }
.kq .kq-item[open] .kq-ico::after { transform: rotate(0deg) }

/* fuoco: anello sull'intera domanda, risposta aperta compresa. Disegnato con outline su uno strato vuoto
   grande quanto la riga: l'outline non allarga mai la pagina, anche quando esce dalla colonna. */
.kq .kq-q:focus-visible { outline-offset: 6px; border-radius: 6px }
@supports selector(:has(*)) {
  .kq .kq-q:focus-visible { outline: none }
  .kq .kq-item::after { content: ""; position: absolute; inset: 0; border-radius: 4px; pointer-events: none; display: none }
  .kq .kq-item:has(> .kq-q:focus-visible)::after { display: block; outline: 2px solid var(--kq-wine); outline-offset: 8px }
}

/* aperta, la domanda si avvicina alla sua risposta */
.kq .kq-item[open] > .kq-q { padding-bottom: 20px }
.kq .kq-a { padding: 0 calc(var(--kq-ci) + var(--kq-gap)) 32px calc(var(--kq-cn) + var(--kq-gap)) }
.kq .kq-a-txt { max-width: 62ch; font-size: 16.5px; line-height: 28px; color: var(--kq-soft); text-wrap: pretty }
.kq .kq-a-txt p { margin: 0 0 14px }
/* faq.js divide ogni paragrafo spezzato da <br> in più <p class="kq-riga">: si va a capo per frase con un piccolo
   respiro, e per i lettori di schermo restano paragrafi. L'ultima riga del paragrafo originale (kq-riga--fine) tiene
   la distanza tra paragrafi; l'ultimo della risposta non ne ha (la regola :last-child viene dopo e vince) */
.kq .kq-a-txt p.kq-riga { margin-bottom: 8px }
.kq .kq-a-txt p.kq-riga--fine { margin-bottom: 14px }
.kq .kq-a-txt p:last-child { margin-bottom: 0 }
.kq .kq-a-txt a { color: var(--kq-wine); text-decoration: underline; text-decoration-color: var(--kq-rasp); text-underline-offset: 3px }
.kq .kq-a-txt ul, .kq .kq-a-txt ol { margin: 0 0 14px; padding-left: 1.2em }
.kq .kq-a-txt ul li { list-style: disc }
.kq .kq-a-txt ol li { list-style: decimal }
.kq .kq-a-txt strong, .kq .kq-a-txt b { font-weight: 500; color: var(--kq-ink) }

/* invito sotto l'elenco: «Tutte le domande» in home, «Scopri la collezione» sulla pagina */
.kq .kq-more { margin-top: 32px }
.kq .kq-all {
  display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 24px;
  border: 1px solid var(--kq-plum); border-radius: 999px;
  font-size: 14px; line-height: 1; font-weight: 500; letter-spacing: .06em; color: var(--kq-plum);
}

@media (hover: hover) {
  .kq .kq-q:hover .kq-q-txt { color: var(--kq-wine) }
  .kq .kq-q:hover .kq-ico { border-color: var(--kq-wine); color: var(--kq-wine) }
  .kq .kq-item[open] > .kq-q:hover .kq-ico { background: var(--kq-wine); color: #fff }
  .kq .kq-contact:hover .kq-contact-v { text-decoration: underline; text-decoration-color: var(--kq-rasp); text-decoration-thickness: 1px; text-underline-offset: 4px }
  .kq .kq-contact:hover .kq-contact-i { background: var(--kq-wine); border-color: var(--kq-wine); color: #fff }
  .kq .kq-contact:hover .kq-contact-go { transform: translateX(3px) }
  .kq .kq-all:hover { background: var(--kq-plum); color: #fff }
  .kq .kq-all:hover svg { transform: translateX(3px) }
  .kq .kq-indice-a:hover { color: var(--kq-wine) }
  .kq .kq-tutte:hover .kq-tutte-txt { text-decoration: underline; text-decoration-color: var(--kq-rasp); text-underline-offset: 5px }
}

/* Temi a contrasto di Windows (forced-colors): il browser porta ogni sfondo al colore della tela, e i segni disegnati
   con background sparirebbero (più e meno nei cerchi, segno di «Apri tutte», segnalibro della domanda aperta).
   Qui non si lasciano adattare e prendono il colore di sistema del testo, CanvasText. Non currentColor: con
   forced-color-adjust:none Chrome passa al pseudo-elemento il colore dell'autore, non quello forzato */
@media (forced-colors: active) {
  .kq .kq-ico::before, .kq .kq-ico::after, .kq .kq-tutte-ico::before, .kq .kq-tutte-ico::after, .kq .kq-q::before {
    forced-color-adjust: none; background: CanvasText;
  }
}

/* apertura morbida dove il browser sa animare il contenuto di <details> */
@media (prefers-reduced-motion: no-preference) {
  .kq .kq-item::details-content {
    block-size: 0; overflow: clip;
    transition: block-size .42s var(--kq-ease), content-visibility .42s var(--kq-ease) allow-discrete;
  }
  .kq .kq-item[open]::details-content { block-size: auto }
  .kq .kq-item[open] .kq-a-txt { animation: kq-in .5s var(--kq-ease) both }
  .kq .kq-ico, .kq .kq-ico::after, .kq .kq-tutte-ico::after { transition: transform .35s var(--kq-ease), background-color .25s ease, border-color .25s ease, color .25s ease }
  .kq .kq-q { transition: padding-bottom .42s var(--kq-ease) }
  .kq .kq-q::before { transition: transform .45s var(--kq-ease) }
  .kq .kq-q-txt, .kq .kq-n, .kq .kq-contact-v { transition: color .2s ease }
  .kq .kq-all, .kq .kq-all svg, .kq .kq-contact-go, .kq .kq-contact-i { transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .25s var(--kq-ease) }
  /* se faq.js corregge l'altezza della testata ferma mentre si scorre, il biglietto ci arriva scivolando */
  .kq .kq-card { transition: top .4s var(--kq-ease) }
}
@keyframes kq-in { from { opacity: 0; transform: translateY(-6px) } to { opacity: 1; transform: none } }

/* due colonne da 992px: a sinistra titolo e, sotto, il biglietto; a destra l'elenco.
   Righe «auto 1fr»: la prima è alta quanto il titolo, la seconda prende il resto dell'elenco e tiene il biglietto. */
@media (min-width: 992px) {
  .kq .kq-wrap {
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "head main" "aside main";
    column-gap: 80px;
  }
  .kq .kq-aside { margin-top: 44px }
  /* home: il filetto che apre l'elenco passa a metà dell'occhiello, come il segno vino dell'occhiello in pagina */
  .kq--home .kq-main { padding-top: 8px }
  /* la domanda e l'invito stanno sulla colonna del testo delle domande */
  .kq .kq-more { padding-left: calc(var(--kq-cn) + var(--kq-gap)) }
}
/* il biglietto resta fermo accanto alle risposte, solo se c'è altezza per tenerlo intero */
@media (min-width: 992px) and (min-height: 700px) {
  .kq .kq-card { position: sticky; top: calc(var(--kq-ferma) + 32px) }
}

/* 992..1159: contenitore 940 come il sito e il footer */
@media (min-width: 992px) and (max-width: 1159px) {
  .kq--pagina .kq-wrap { width: 940px }
  .kq .kq-wrap { grid-template-columns: minmax(0, 330px) minmax(0, 1fr); column-gap: 56px }
  .kq { --kq-cn: 44px; --kq-gap: 16px }
  .kq--home { --kq-big: 40px; --kq-big-lh: 46px }
  .kq--pagina { --kq-big: 52px; --kq-big-lh: 56px }
  .kq .kq-q-txt { font-size: 19px }
  .kq .kq-card { padding: 26px 26px 6px }
  .kq .kq-card-title { font-size: 22px; line-height: 27px }
}

/* una colonna */
@media (max-width: 991px) {
  .kq { --kq-cn: 44px; --kq-gap: 16px }
  .kq--home { padding: 64px 0 8px }
  .kq--pagina { padding: 48px 0 88px }
  .kq--home { --kq-big: 40px; --kq-big-lh: 46px }
  .kq--pagina { --kq-big: 52px; --kq-big-lh: 56px }
  .kq .kq-hook { max-width: 18em }
  .kq .kq-lead, .kq--pagina .kq-lead { max-width: 52ch }
  .kq .kq-main { margin-top: 40px }
  .kq--pagina .kq-main { margin-top: 28px }
  /* biglietto orizzontale: testo a sinistra, contatti a destra */
  .kq .kq-card {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); column-gap: 40px; align-items: center;
    max-width: none; padding: 26px 30px;
  }
  .kq .kq-contacts { margin-top: 0; border-top: 0 }
}
@media (min-width: 768px) and (max-width: 991px) {
  .kq--pagina .kq-title em { display: inline }
}

@media (max-width: 767px) {
  .kq { --kq-cn: 30px; --kq-gap: 12px; --kq-ci: 36px; --kq-lh: 24px }
  .kq--home { padding: 48px 0 0 }
  .kq--pagina { padding: 36px 0 72px }
  .kq--home { --kq-big: 32px; --kq-big-lh: 37px }
  .kq--pagina { --kq-big: 42px; --kq-big-lh: 46px }
  .kq--pagina .kq-kicker { min-height: 32px }
  .kq--pagina .kq-kicker::before { width: 32px }
  .kq .kq-hook { margin-top: 14px }
  .kq--pagina .kq-title { margin-top: 10px }
  .kq .kq-lead, .kq--pagina .kq-lead { margin-top: 14px; font-size: 15.5px; line-height: 25px }
  .kq .kq-main { margin-top: 32px }
  .kq--pagina .kq-main { margin-top: 20px }
  .kq .kq-q { padding-top: 20px; padding-bottom: 20px }
  .kq .kq-item[open] > .kq-q { padding-bottom: 14px }
  .kq .kq-n { font-size: 12px; letter-spacing: .08em }
  .kq .kq-q-txt { font-size: 17px }
  .kq .kq-ico::before, .kq .kq-ico::after { width: 12px; margin-left: -6px }
  .kq .kq-a { padding: 0 0 24px calc(var(--kq-cn) + var(--kq-gap)) }
  .kq .kq-a-txt { font-size: 15.5px; line-height: 26px }
  .kq .kq-more { margin-top: 28px }
  .kq .kq-all { width: 100%; justify-content: center }
  .kq .kq-aside { margin-top: 40px }
  .kq .kq-card { display: block; padding: 24px 22px 4px }
  .kq .kq-card-title { font-size: 21px; line-height: 26px }
  .kq .kq-contacts { margin-top: 18px; border-top: 1px solid var(--kq-line-v) }
}
/* su mobile l'anello del fuoco sta più vicino: il margine della pagina è stretto */
@supports selector(:has(*)) {
  @media (max-width: 767px) {
    .kq .kq-item:has(> .kq-q:focus-visible)::after { outline-offset: 6px }
  }
}

/* stampa (la pagina dei resi si stampa): tutte le risposte visibili, niente comandi */
@media print {
  .kq .kq-item::details-content { content-visibility: visible; block-size: auto }
  .kq .kq-tools, .kq .kq-ico, .kq .kq-more, .kq .kq-indice, .kq .kq-contact-go { display: none }
  .kq .kq-card { position: static }
}