/* ═══════════════════════════════════════════════════════════════════════════
   BIGLIETTERIA E TASTY. (committente, 10 ottobre 2026)
   La pagina /come-si-assaggia/, le tre frasi-sezione di /webapp/ e il banner
   degli omaggi in Home. Prefisso `csa-` (come si assaggia): nessuna collisione.
   Solo le variabili del tema; il magenta istituzionale e le sue sfumature.
   Tema scuro: SOLO con :root:not([data-theme="light"]) + :root[data-theme="dark"],
   come fa _theme.css — mai una media query nuda.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── La formula, grande: «1 Tasty = 1 € = 1 Conetto» ─────────────────── */
.csa-formula{margin:0 0 22px;font-family:var(--font-accent);font-style:italic;font-weight:600;
  font-size:clamp(24px,3vw,38px);line-height:1.2;color:var(--magenta);letter-spacing:-.01em}

/* ── Il listino: tre pastiglie, il prezzo in Tasty grande ────────────────── */
.csa-listino{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.csa-listino li{background:var(--surface);border:1px solid var(--card-border);border-radius:20px;
  padding:22px 18px;text-align:center;box-shadow:var(--shadow-card)}
.csa-listino b{display:block;font-family:var(--font-accent);font-weight:600;font-size:clamp(34px,4vw,46px);
  line-height:1;color:var(--magenta);letter-spacing:-.02em}
.csa-listino small{display:block;margin-top:4px;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.csa-listino span{display:block;margin-top:12px;font-weight:800;font-size:15px;line-height:1.3}
/* Le foto dei tre gelati (11/10/2026): stesse immagini di /webapp/, tonde, sopra il prezzo. */
.csa-listino__foto{display:block;width:clamp(112px,14vw,150px);aspect-ratio:1;margin:0 auto 16px;border-radius:50%;overflow:hidden;
  background:var(--surface-2,#f6f1ea);box-shadow:0 10px 26px rgba(35,31,32,.12);transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.csa-listino__foto img{display:block;width:100%;height:100%;object-fit:cover}
.csa-listino li:hover .csa-listino__foto{transform:scale(1.04)}
@media (max-width:640px){.csa-listino__foto{width:120px}}
@media (max-width:640px){.csa-listino{grid-template-columns:1fr}}

/* ── I tre pacchetti: Giretto (dall'11 ottobre 2026; prima «Tappa»), Viaggio, Grand Tour ──
   Coerenti con le schede di /webapp/ (.wl-card): fondo magenta sfumato, testo
   bianco, il prezzo in Fraunces. L'omaggio e' una pastiglia bianca, perche' e'
   la ragione per cui si sceglie un pacchetto invece di un altro. */
.csa-pacchetti{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px}
.csa-pack{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;
  background:linear-gradient(140deg,#E4007C 0%,#C70075 55%,#9E0F62 100%);color:#fff;
  border-radius:24px;padding:34px 22px 28px;box-shadow:0 14px 34px rgba(199,0,117,.22)}
.csa-pack--top{box-shadow:0 0 0 3px #fff,0 14px 34px rgba(199,0,117,.34)}
.csa-pack__top{position:absolute;top:-11px;left:50%;transform:translateX(-50%);white-space:nowrap;
  padding:6px 15px;border-radius:999px;background:var(--ink);color:#fff;
  font-size:10.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;box-shadow:0 6px 16px rgba(35,31,32,.3)}
.csa-pack__nome{margin:0;font-size:13px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;opacity:.92}
.csa-pack__eur{margin:6px 0 0;font-family:var(--font-accent);font-weight:600;font-size:clamp(44px,6vw,64px);line-height:.95;letter-spacing:-.03em}
.csa-pack__tasty{margin:8px 0 0;display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;
  background:rgba(255,255,255,.14);font-size:13.5px;font-weight:700}
.csa-pack__tasty b{font-weight:900;font-size:16px}
.csa-pack__omaggio{display:inline-block;margin:14px 0 0;padding:6px 14px;border-radius:999px;background:#fff;color:var(--magenta);
  font-size:13px;font-weight:900;line-height:1.3;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.csa-pack__omaggio--no{background:rgba(255,255,255,.1);color:rgba(255,255,255,.8);font-weight:700;box-shadow:none}
.csa-pack__p{margin:16px 0 0;font-size:14.5px;line-height:1.55;opacity:.94;max-width:30ch}
.csa-nota{margin:22px 0 0;font-size:14.5px;line-height:1.6;color:var(--muted);text-align:center}
@media (max-width:860px){.csa-pacchetti{grid-template-columns:1fr;max-width:460px;margin-inline:auto}}

/* ── I tre modi per avere Conetti in omaggio ──────────────────────────────
   Il numero grande in Fraunces magenta, lo stesso congegno della Carta dei
   Valori: e' del tema, non cambia da telefono a telefono. */
.csa-modi{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.csa-modo{position:relative;background:var(--surface);border:1px solid var(--card-border);border-radius:22px;
  padding:30px 26px 26px;box-shadow:var(--shadow-card);overflow:hidden}
.csa-modo__n{position:absolute;top:-10px;right:14px;font-family:var(--font-accent);font-style:italic;font-weight:600;
  font-size:84px;line-height:1;color:var(--magenta);opacity:.14;pointer-events:none}
.csa-modo__piu{display:inline-block;font-family:var(--font-accent);font-weight:600;font-size:clamp(30px,3.4vw,40px);
  line-height:1;color:var(--magenta);letter-spacing:-.02em;margin-bottom:12px}
.csa-modo h3{margin:0;font-size:18px;font-weight:800;line-height:1.25}
.csa-modo p{margin:8px 0 0;font-size:14.5px;line-height:1.6;color:var(--muted)}
.csa-modo__chi{display:inline-block;margin-top:14px;padding:5px 12px;border-radius:999px;background:var(--blush-2);color:var(--magenta);
  font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.csa-piede{margin:26px 0 0;padding:18px 22px;border-radius:18px;background:var(--bg-soft);border:1px solid var(--card-border);
  font-size:14.5px;line-height:1.6;font-weight:600;text-align:center}
@media (max-width:860px){.csa-modi{grid-template-columns:1fr}}

/* ── Gli Itinerari di gelato e il Premio del pubblico: testo + fatto in evidenza ── */
.csa-doppia{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,56px);align-items:center}
.csa-fatto{background:linear-gradient(130deg,var(--magenta),#8E0054);color:#fff;border-radius:26px;
  padding:clamp(26px,3.6vw,40px);box-shadow:0 18px 44px rgba(199,0,117,.26)}
.csa-fatto__n{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.csa-fatto__n b{font-family:var(--font-accent);font-weight:600;font-size:clamp(56px,7vw,88px);line-height:.9;letter-spacing:-.03em}
.csa-fatto__n span{font-size:13px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;opacity:.9}
.csa-fatto p{margin:14px 0 0;font-size:14.5px;line-height:1.6;opacity:.92}
.csa-fatto .btn{margin-top:18px;background:#fff;color:var(--magenta)}
.csa-fatto .btn:hover{color:#8E0054}
.csa-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
@media (max-width:860px){.csa-doppia{grid-template-columns:1fr}}

/* La lista dei gradi della Giuria popolare (.csa-badge) e' sparita dalla pagina l'11 ottobre 2026:
   le sue regole sono andate via con lei. */

/* ── Dove si acquista: due colonne, webapp e cassa ───────────────────────── */
.csa-dove{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.csa-dove__col{background:var(--surface);border:1px solid var(--card-border);border-radius:22px;padding:28px 26px;box-shadow:var(--shadow-card)}
.csa-dove__col--webapp{border-color:var(--magenta);box-shadow:0 0 0 1px var(--magenta),var(--shadow-card)}
.csa-dove__col h3{margin:0;font-size:19px;font-weight:800}
.csa-dove__col ul{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.csa-dove__col li{position:relative;padding-left:22px;font-size:14.5px;line-height:1.5;color:var(--muted)}
.csa-dove__col li::before{content:"";position:absolute;left:0;top:.5em;width:10px;height:10px;border-radius:50%;
  background:linear-gradient(135deg,var(--magenta),var(--pink))}
.csa-dove__col .btn{margin-top:18px}
@media (max-width:760px){.csa-dove{grid-template-columns:1fr}}

/* ── Le FAQ ancora da confermare: la parentesi quadra si vede, di proposito ── */
.csa-daconfermare{font-size:12px;font-weight:700;color:var(--muted);margin:6px 0 0;text-align:center}

/* ── Su /webapp/: le frasi-sezione degli omaggi e la chiusura ────────────── */
.csa-frasi{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px}
.csa-frase{background:var(--surface);border:1px solid var(--card-border);border-radius:22px;padding:28px 26px;box-shadow:var(--shadow-card)}
.csa-frase h3{margin:0;font-family:var(--font-accent);font-style:italic;font-weight:600;font-size:clamp(21px,2.2vw,26px);line-height:1.2;color:var(--magenta)}
.csa-frase p{margin:12px 0 0;font-size:14.5px;line-height:1.6;color:var(--muted)}
.csa-frase a{color:var(--link);font-weight:700}
.csa-chiusura{margin-top:clamp(28px,4vw,44px);text-align:center;padding:clamp(30px,4vw,48px) clamp(22px,3vw,40px);
  border-radius:26px;background:var(--bg-soft);border:1px solid var(--card-border)}
.csa-chiusura h3{margin:0;font-size:clamp(22px,2.8vw,32px);font-weight:900;line-height:1.2;letter-spacing:-.01em}
.csa-chiusura h3 em{font-family:var(--font-accent);font-style:italic;font-weight:600;color:var(--magenta)}
.csa-chiusura p{margin:10px auto 0;font-size:15px;line-height:1.55;color:var(--muted);max-width:52ch}
.csa-chiusura .csa-ctas{justify-content:center}
@media (max-width:860px){.csa-frasi{grid-template-columns:1fr}}

/* ── Il movimento: le schede si alzano al passaggio, i pacchetti entrano uno dopo l'altro ──
   (committente, 11/10 notte: «grafica sempre animata, elementi e pulsanti ben distinti»).
   Le transizioni stanno qui e non sui singoli blocchi, cosi' «riduci movimento» le spegne in un posto solo. */
.csa-pack,.csa-modo,.csa-dove__col,.csa-frase,.csa-listino li{transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s ease}
.csa-pack:hover,.csa-modo:hover,.csa-dove__col:hover,.csa-frase:hover,.csa-listino li:hover{transform:translateY(-4px)}
.csa-pack:hover{box-shadow:0 22px 44px rgba(199,0,117,.32)}
.csa-pack--top:hover{box-shadow:0 0 0 3px #fff,0 22px 44px rgba(199,0,117,.42)}
.csa-modo:hover,.csa-dove__col:hover,.csa-frase:hover,.csa-listino li:hover{box-shadow:var(--shadow-card-hover,0 18px 40px rgba(35,31,32,.14))}
.csa-pack__omaggio{transition:transform .28s ease}
.csa-pack:hover .csa-pack__omaggio{transform:scale(1.06)}
.csa-fatto .btn{transition:transform .2s ease,box-shadow .2s ease}
.csa-fatto .btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.18)}
/* I tre pacchetti entrano in sequenza quando la pagina li rivela (classe .reveal del tema). */
.csa-pacchetti .csa-pack.reveal{transition:transform .55s ease,box-shadow .28s ease,opacity .55s ease;opacity:0;transform:translateY(18px)}
.csa-pacchetti .csa-pack.reveal.visible{opacity:1;transform:none}
.csa-pacchetti .csa-pack.reveal:nth-child(2){transition-delay:.12s}
.csa-pacchetti .csa-pack.reveal:nth-child(3){transition-delay:.24s}
.csa-pacchetti .csa-pack.reveal.visible:hover{transform:translateY(-4px);transition-delay:0s}
@media (prefers-reduced-motion:reduce){
  .csa-pack,.csa-modo,.csa-dove__col,.csa-frase,.csa-listino li,.csa-listino__foto,.csa-pack__omaggio,.csa-fatto .btn{transition:none}
  .csa-pack:hover,.csa-modo:hover,.csa-dove__col:hover,.csa-frase:hover,.csa-listino li:hover,.csa-listino li:hover .csa-listino__foto,.csa-pack:hover .csa-pack__omaggio{transform:none}
  .csa-pacchetti .csa-pack.reveal{opacity:1;transform:none;transition:none}
}

/* ── Tema scuro: come _theme.css, due selettori, mai la media nuda ───────── */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .csa-pack--top{box-shadow:0 0 0 3px var(--surface),0 14px 34px rgba(199,0,117,.34)}
  :root:not([data-theme="light"]) .csa-modo__chi{background:var(--blush-2);color:#FF9ACB}
  :root:not([data-theme="light"]) .csa-modo__n{opacity:.22}
  :root:not([data-theme="light"]) .csa-dove__col--webapp{border-color:#EF6BA8;box-shadow:0 0 0 1px #EF6BA8,var(--shadow-card)}
}
:root[data-theme="dark"] .csa-pack--top{box-shadow:0 0 0 3px var(--surface),0 14px 34px rgba(199,0,117,.34)}
:root[data-theme="dark"] .csa-modo__chi{background:var(--blush-2);color:#FF9ACB}
:root[data-theme="dark"] .csa-modo__n{opacity:.22}
:root[data-theme="dark"] .csa-dove__col--webapp{border-color:#EF6BA8;box-shadow:0 0 0 1px #EF6BA8,var(--shadow-card)}

/* ── Compra online: salti la fila e hai i Conetti in omaggio (committente, 12/10/2026) ──
   Un riquadro solo (template-parts/compra-online.php) sopra i pacchetti di /webapp/ e di
   /come-si-assaggia/ e in Home sotto i numeri. Colori propri (magenta → prugna, testo bianco,
   bottone bianco), cosi' e' uguale nel tema chiaro e in quello scuro e non ha bisogno di regole
   dentro e fuori la media scura. */
.co-box{display:grid;grid-template-columns:1fr auto;gap:clamp(20px,3vw,44px);align-items:center;
  background:linear-gradient(130deg,var(--magenta),#8E0054);color:#fff;border-radius:26px;
  padding:clamp(24px,3.4vw,40px) clamp(22px,3.4vw,46px);box-shadow:0 18px 44px rgba(199,0,117,.26);position:relative;overflow:hidden}
.co-box::before{content:"";position:absolute;right:-90px;top:-120px;width:340px;height:340px;border-radius:50%;background:rgba(255,255,255,.08);pointer-events:none}
.co-box__testo,.co-box__azione{position:relative}
.co-box__e{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.9}
.co-box__e::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff}
.co-box__t{margin:10px 0 0;font-size:clamp(23px,2.8vw,34px);font-weight:900;line-height:1.15;letter-spacing:-.01em;color:#fff}
.co-box__t em{font-family:var(--font-accent);font-style:italic;font-weight:600;color:#FFD1E8}
.co-box__punti{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:9px;max-width:62ch}
.co-box__punti li{position:relative;padding-left:30px;font-size:15px;line-height:1.5;opacity:.96}
.co-box__punti li::before{content:"";position:absolute;left:0;top:2px;width:19px;height:19px;border-radius:50%;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.3l2.5 2.5L9.8 3.4' fill='none' stroke='%23C70075' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat}
.co-box__azione{display:flex;flex-direction:column;align-items:center;gap:10px;flex:none;text-align:center}
.co-box__btn{background:#fff;color:var(--magenta);font-size:15px;padding:16px 30px;box-shadow:0 12px 30px rgba(0,0,0,.2);white-space:nowrap}
.co-box__btn:hover{color:#8E0054;box-shadow:0 16px 36px rgba(0,0,0,.26)}
.co-box__nota{font-size:12.5px;line-height:1.4;opacity:.85;max-width:26ch}
/* Dove sta: sopra le schede dei pacchetti, con il respiro delle schede sotto; in Home in una
   sezione corta subito sotto i numeri (la sezione dopo porta gia' il suo spazio sopra). */
.co-box--pacchetti{margin:0 0 clamp(26px,3.4vw,40px)}
.co-sezione{padding:clamp(28px,4vw,52px) 0 0}
@media (max-width:760px){
  .co-box{grid-template-columns:1fr;border-radius:22px;gap:18px}
  .co-box::before{right:-140px;top:-170px}
  .co-box__azione{align-items:stretch}
  .co-box__btn{width:100%;white-space:normal;text-align:center}
  .co-box__nota{max-width:none}
  .co-box__punti li{font-size:14.5px}
}