/* TasteMate: materiali presi dal logo TM03 «Tavoli vicini», sopra la struttura chiara di Caeli Énergie.
   Il logo ha tre materiali soli:
   1. verde velluto opaco: luce in alto a sinistra, buio in basso a destra
   2. crema morbida e gonfia, con un alone pesca sul bordo sinistro e oro sul bordo destro in basso
   3. ombra calda e larga, mai nera
   Tutto il resto resta piatto e bianco. Togliendo il link a questo file si torna al sito piatto. */

:root {
  --title: #0A3522; --green: #0A3522; --action: #0E3A25; --deep: #0E3A25; --deep-2: #154A31;
  --sunken: #F8F3EA; --line: #E7E2D5;
  --cream: #F5EADF; --peach: #FFB9A5; --gold: #F5C97A;
  /* Velluto: come il fondo dell'icona, più chiaro in alto a sinistra */
  --velvet: radial-gradient(120% 95% at 6% 0%, rgba(58, 118, 80, .55) 0%, rgba(58, 118, 80, 0) 58%), linear-gradient(180deg, #164229 0%, #0B2819 100%);
  /* Crema gonfia: pesca a sinistra, oro a destra in basso */
  --puff: radial-gradient(80% 90% at 0% 70%, rgba(255, 185, 165, .95) 0%, rgba(255, 185, 165, 0) 62%), radial-gradient(80% 90% at 100% 100%, rgba(245, 201, 122, .95) 0%, rgba(245, 201, 122, 0) 58%), linear-gradient(160deg, #F8F0E6, #ECDFCF);
  --btn-bg: linear-gradient(180deg, #1B4D33 0%, #0B2819 100%);
  --btn-bg-h: linear-gradient(180deg, #226040 0%, #0F3321 100%);
  --btn-sh: inset 0 1px 0 rgba(255, 255, 255, .16), 0 10px 18px -10px rgba(10, 38, 24, .75);
  --card-sh: 0 0 0 1px var(--line), 0 1px 2px rgba(10, 38, 24, .05), 0 18px 34px -22px rgba(10, 38, 24, .38);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sunken: #0E1A14; --line: #22352B;
    --btn-bg: #EEF3EC; --btn-bg-h: #FFFFFF; --btn-sh: none;
    --card-sh: 0 0 0 1px var(--line);
  }
}
:root[data-theme="dark"] {
  --sunken: #0E1A14; --line: #22352B;
  --btn-bg: #EEF3EC; --btn-bg-h: #FFFFFF; --btn-sh: none;
  --card-sh: 0 0 0 1px var(--line);
}

/* Logo vero: la sagoma del PNG, colorata come il titolo */
.brand { font-size: 0 !important; line-height: 0; color: var(--title); }
.brand::before { width: 127px; height: 28px; border-radius: 0; background: currentColor; -webkit-mask: url("tm-logo.png") left center / contain no-repeat; mask: url("tm-logo.png") left center / contain no-repeat; }

/* Pulsanti: velluto verde con un filo di luce sul bordo alto */
.btn, .btn.team { background: var(--btn-bg); color: var(--on-action); box-shadow: var(--btn-sh); transition: transform .15s ease, background .15s ease, box-shadow .15s ease; }
.btn:hover, .btn.team:hover { background: var(--btn-bg-h); color: var(--on-action); transform: translateY(-1px); }
.btn:active, .btn.team:active { transform: translateY(1px); }
.btn.ghost, .btn.solo { background: transparent; color: var(--title); box-shadow: inset 0 0 0 1.5px var(--title); }
.btn.ghost:hover, .btn.solo:hover { background: var(--sunken); color: var(--title); transform: none; }
.btn.sun { background: #fff; color: #0A3522; box-shadow: 0 10px 20px -12px rgba(0, 0, 0, .5); }
.btn.sun:hover { background: var(--cream); color: #0A3522; }
.btn.danger { background: transparent; box-shadow: inset 0 0 0 1.5px var(--bad); }
.btn.danger:hover { transform: none; }
.btn.danger[data-armed] { background: var(--bad); }
.pill[aria-pressed="true"], .checks label:has(input:checked), .adm-nav a[aria-current="page"] { background: var(--btn-bg); box-shadow: var(--btn-sh); }
.tabs button[aria-selected="true"] { box-shadow: var(--card-sh); }

/* Barra e fondi */
.demo-bar { background: #0C2B1B; }
.sec.alt { background: var(--sunken); }

/* Schede bianche: filetto e una sola ombra calda, larga */
.card-e, .step, .aud, .faq details, .panel, .row, .kpi, .scroll-x { box-shadow: var(--card-sh); }
.card-e, .aud { transition: transform .2s ease, box-shadow .2s ease; }
.card-e:hover, .aud:hover { transform: translateY(-3px); }
.aud:hover { box-shadow: var(--card-sh); }
.pill, .checks label { box-shadow: 0 0 0 1px var(--line); }
.pill:hover { background: var(--sunken); }
.lead-card { box-shadow: 0 0 0 1px var(--line), 0 28px 50px -30px rgba(10, 38, 24, .5); }
.close-d .lead-card { box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .6); }
.hero-stats span { box-shadow: 0 0 0 1px var(--line); }

/* Prima schermata: testo a sinistra, l'icona vera a destra su un velo pesca e oro */
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.cta-row + .hero-stats { margin-top: 24px; }
.hero-mark { position: relative; display: grid; place-items: center; padding: 8px 0 0; }
.hero-mark::before { content: ""; position: absolute; inset: 4% 2% 0; border-radius: 50%; background: radial-gradient(55% 60% at 24% 72%, rgba(255, 185, 165, .6), rgba(255, 185, 165, 0) 70%), radial-gradient(55% 60% at 80% 78%, rgba(245, 201, 122, .7), rgba(245, 201, 122, 0) 70%); filter: blur(30px); }
.hero-mark img { position: relative; display: block; width: min(72%, 280px); height: auto; filter: drop-shadow(0 26px 26px rgba(10, 38, 24, .3)); }

/* Illustrazioni: sagome crema gonfie su velluto, nello stesso linguaggio dell'icona */
.ill { background: radial-gradient(75% 70% at var(--gx, 100%) 100%, var(--glow, rgba(245, 201, 122, .30)), rgba(0, 0, 0, 0) 70%), var(--velvet); }
.ill.gusto, .ill.sport, .ill.teambuilding { --glow: rgba(255, 185, 165, .30); --gx: 0%; }
.ill .f, .ill .w { fill: url(#tm-c); stroke: url(#tm-c); stroke-width: 5; stroke-linejoin: round; }
.ill .a { fill: url(#tm-g); stroke: url(#tm-g); stroke-width: 5; stroke-linejoin: round; }
.ill .t { fill: url(#tm-p); stroke: url(#tm-p); stroke-width: 5; stroke-linejoin: round; }
.ill .s { fill: none; stroke: #F3E6D8; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.ill .sa { fill: none; stroke: var(--gold); stroke-width: 5; stroke-linecap: round; }
.tile[aria-pressed="true"] .ill { outline-color: var(--orange); }

/* Pacchetti: crema con un solo alone, oro per Team (arancione) e pesca per Singolo (rosso) */
.pk { background: #FBF5EC; box-shadow: 0 0 0 1px var(--line); }
.pk::before { display: none; }
.pk.team { background: radial-gradient(75% 55% at 100% 100%, rgba(245, 201, 122, .6), rgba(245, 201, 122, 0) 72%), #FBF5EC; }
.pk.solo { background: radial-gradient(75% 55% at 0% 100%, rgba(255, 185, 165, .6), rgba(255, 185, 165, 0) 72%), #FBF5EC; }
.pk .tag { display: inline-flex; justify-self: start; padding: 8px 12px; border-radius: 999px; }
.pk.team .tag { background: var(--team-soft); }
.pk.solo .tag { background: var(--solo-soft); }

/* Chiusura: velluto pieno e la sagoma del segno, crema gonfia, in basso a sinistra */
.close-d { background: var(--velvet); overflow: hidden; }
.close-d::after { content: ""; position: absolute; left: max(24px, calc((100% - 1160px) / 2 + 20px)); bottom: 44px; width: clamp(180px, 20vw, 250px); aspect-ratio: 395 / 337; background: var(--puff); -webkit-mask: url("tm-segno.png") center / contain no-repeat; mask: url("tm-segno.png") center / contain no-repeat; filter: drop-shadow(0 20px 22px rgba(0, 0, 0, .5)); display: none; pointer-events: none; }
.aside .panel.dark { background: var(--velvet); }
.toast { background: #0C2B1B; }

/* Il segno nelle pagine interne: l'icona vera, piccola, in alto a destra */
.page-h::after { content: ""; position: absolute; right: 20px; top: 40px; width: 72px; height: 72px; background: url("tm-icona.png") center / contain no-repeat; filter: drop-shadow(0 12px 14px rgba(10, 38, 24, .3)); display: none; }

@media (min-width: 720px) {
  .hero-mark img { width: min(62%, 340px); }
  .page-h::after { display: block; }
}
@media (min-width: 960px) {
  .hero-mark { padding: 0; }
  .hero-mark img { width: min(100%, 420px); }
  .close-d::after { display: block; }
}
@media (prefers-reduced-motion: reduce) { .card-e:hover, .aud:hover, .btn:hover { transform: none; } }