@charset "UTF-8";

/* Source: tokens.css */
/*
 * AnimaLuce — Design Tokens globali (fonte: DOCS/design-system.md §2)
 *
 * REGOLE:
 * - Questo file deve restare PRIMO in css/main.manifest.php: definisce solo
 *   custom properties su :root, nessuna regola con effetto visivo diretto.
 * - Namespace canonico: --alu-*. NON definire qui nomi NON prefissati
 *   (--accent-gold, --surface-hero, --shadow-1, --space-*, ...): nel CSS
 *   legacy esistono var() con fallback divergenti su quei nomi e definirli
 *   a livello :root cambierebbe il rendering di componenti esistenti.
 * - I valori sono estratti dall'uso reale del CSS del sito (frequenza),
 *   non da una palette ideale. Aggiornarli solo insieme alla doc.
 * - Tema dark: css/sub/dark.css rimappa il set tema (--alu-surface,
 *   --alu-text, --alu-border, --alu-accent, --alu-card-shadow, ...) dentro
 *   html:is(.theme-dark,[data-bs-theme='dark']). Qui sotto stanno i default
 *   LIGHT degli stessi nomi: mai sovrascrivere le proprieta' finali nei
 *   componenti, solo i token.
 */

:root {
    /* ------------------------------------------------------------------
     * Accent oro (brand): #fde68a / #fbbf24 / #f59e0b sono i tre oro
     * canonici (i piu' usati in assoluto nel CSS del sito).
     * ------------------------------------------------------------------ */
    --alu-gold-soft: #fde68a;
    --alu-gold: #fbbf24;
    --alu-gold-deep: #f59e0b;
    --alu-grad-gold: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    --alu-grad-gold-soft: linear-gradient(135deg, #fde68a 0%, #fbbf24 45%, #f59e0b 100%);
    /* Alpha oro ricorrenti (bg chip/bordi/glow) */
    --alu-gold-a18: rgba(251, 191, 36, 0.18);
    --alu-gold-a22: rgba(251, 191, 36, 0.22);
    --alu-gold-a32: rgba(251, 191, 36, 0.32);
    --alu-gold-a45: rgba(251, 191, 36, 0.45);

    /* ------------------------------------------------------------------
     * Brand viola / blu (surface scure)
     * ------------------------------------------------------------------ */
    --alu-purple-deep: #2e1d4a;
    --alu-grad-hero: linear-gradient(160deg, rgba(46, 29, 84, 0.96) 0%, rgba(78, 39, 134, 0.95) 100%);
    --alu-grad-navbar: linear-gradient(135deg, rgba(20, 39, 74, 0.92), rgba(17, 26, 64, 0.88));
    --alu-grad-card-light: linear-gradient(160deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 244, 255, 0.92) 100%);

    /* ------------------------------------------------------------------
     * Testo
     * ------------------------------------------------------------------ */
    --alu-text-on-dark: #f5f3ff;
    --alu-text-on-dark-soft: rgba(245, 243, 255, 0.84);
    --alu-text-on-dark-muted: rgba(245, 243, 255, 0.65);
    --alu-text-on-light: #2e1d4a;
    --alu-text-on-light-soft: rgba(24, 32, 51, 0.76);
    --alu-text-on-gold: #2a1b4a; /* allineato a --text-on-gold legacy (base.css) */

    /* ------------------------------------------------------------------
     * Status cartomanti
     * ------------------------------------------------------------------ */
    --alu-status-online: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --alu-status-offline: rgba(71, 85, 105, 0.85);
    --alu-status-ferie: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);

    /* MNGR.REDESIGN.1.8 (2026-08-10): semantic status generici per badge
       admin (non specifici cartomanti come i 3 sopra) — mancavano error/info,
       trovato durante l'audit token 1.6. */
    --alu-status-error: #dc2626;
    --alu-status-info: #2563eb;

    /* ------------------------------------------------------------------
     * Spacing scale (base 0.25rem = 4px)
     * ------------------------------------------------------------------ */
    --alu-space-1: 0.25rem;
    --alu-space-2: 0.5rem;
    --alu-space-3: 0.75rem;
    --alu-space-4: 1rem;
    --alu-space-5: 1.25rem;
    --alu-space-6: 1.5rem;
    --alu-space-8: 2rem;

    /* ------------------------------------------------------------------
     * Border radius (scala reale: 8/12/14/20 sono i valori dominanti;
     * 10/16/18/22 legacy vanno arrotondati al token piu' vicino quando
     * si modernizza un componente)
     * ------------------------------------------------------------------ */
    --alu-radius-sm: 8px;
    --alu-radius-md: 12px;
    --alu-radius-lg: 14px;
    --alu-radius-xl: 20px;
    --alu-radius-pill: 999px;

    /* ------------------------------------------------------------------
     * Shadows (elevazione progressiva) + glow oro
     * ------------------------------------------------------------------ */
    --alu-shadow-1: 0 4px 12px rgba(20, 12, 40, 0.18);
    --alu-shadow-2: 0 10px 24px rgba(10, 15, 45, 0.25);
    --alu-shadow-3: 0 14px 34px rgba(18, 28, 60, 0.2);
    --alu-shadow-4: 0 18px 40px rgba(20, 12, 40, 0.32);
    --alu-glow-gold-soft: 0 4px 12px rgba(251, 191, 36, 0.35);
    --alu-glow-gold-strong: 0 18px 36px rgba(251, 191, 36, 0.22), 0 8px 20px rgba(20, 12, 40, 0.4);
    --alu-text-glow-gold: 0 0 12px rgba(251, 191, 36, 0.55), 0 0 28px rgba(251, 191, 36, 0.35);

    /* ------------------------------------------------------------------
     * Z-index scale (valori REALI gia' in uso nel sito: non inventare
     * livelli intermedi, usare questi token)
     * ------------------------------------------------------------------ */
    --alu-z-base: 1;
    --alu-z-sticky: 5;
    --alu-z-dropdown: 50;
    --alu-z-modal-bs: 1080;   /* modal.css (.alu-modal) */
    --alu-z-navbar: 1200;     /* navbar pubblica e MNGR (range 1200-1215) */
    --alu-z-overlay: 1500;    /* loading-modal */
    --alu-z-toast: 99999;     /* toast: sopra tutto */

    /* ------------------------------------------------------------------
     * Motion
     * ------------------------------------------------------------------ */
    --alu-dur-fast: 200ms;    /* hover micro-interaction, card lift */
    --alu-dur-mid: 300ms;     /* slide/reveal */
    --alu-ease: ease;
    --alu-ease-out: ease-out;

    /* ------------------------------------------------------------------
     * Set TEMA (light default). dark.css sovrascrive questi stessi nomi
     * dentro html:is(.theme-dark,[data-bs-theme='dark']).
     * I nuovi componenti theme-aware devono consumare QUESTI token.
     * ------------------------------------------------------------------ */
    --alu-surface: rgba(255, 255, 255, 0.96);
    --alu-surface-soft: rgba(248, 244, 255, 0.92);
    --alu-surface-strong: #ffffff;
    --alu-border: rgba(46, 29, 84, 0.16);
    --alu-border-strong: rgba(46, 29, 84, 0.32);
    --alu-text: #2e1d4a;
    --alu-text-muted: rgba(24, 32, 51, 0.76);
    --alu-accent: #6b3aa0;
    --alu-accent-strong: #4e2786;
    --alu-card-shadow: 0 14px 34px rgba(18, 28, 60, 0.2);

    /* ------------------------------------------------------------------
     * Superfici ADATTIVE di pagina/sezione (LIGHT.1, design-system §3).
     * Principio: in tema light il canvas e le sezioni di contenuto sono
     * CHIARI; il viola/blu scuro brand resta riservato ai "brand moment"
     * (navbar, hero protagonista, footer). Il dark di queste coppie e'
     * definito nel blocco dark in fondo a QUESTO file (non in dark.css,
     * per tenere ogni coppia adattiva leggibile in un punto solo).
     * ------------------------------------------------------------------ */
    /* Canvas pagina: lavanda quasi-bianca (L* ~93-97), stessa hue del
       vecchio fondo periwinkle ma desaturata e schiarita. Sostituisce
       progressivamente il gradient medio-scuro hardcoded in base.css
       (vedi roadmap FEA.LIGHT.1). */
    --alu-page-bg: linear-gradient(160deg, #f7f6fd 0%, #efedfa 35%, #e7e9f8 70%, #eef0fb 100%);
    /* Superficie di sezione: chiara in light (alias della card light),
       pannello blu-notte in dark. E' il default per sezioni di contenuto
       che oggi sono dark-locked su --alu-grad-hero. */
    --alu-surface-section: var(--alu-grad-card-light);
}

/*
 * Override DARK delle sole coppie adattive definite sopra. Carica prima
 * di dark.css (che non ridefinisce questi nomi); specificity superiore
 * a :root, quindi vince nello scope dark in entrambi i temi espliciti.
 */
html:is(.theme-dark, [data-bs-theme='dark']) {
    /* = gradient body dark attuale (dark.css:53), qui come token */
    --alu-page-bg: linear-gradient(160deg, #0c1020 6%, #141b33 38%, #1c2448 66%, #10162b 100%);
    --alu-surface-section: linear-gradient(160deg, rgba(24, 28, 54, 0.92) 0%, rgba(16, 19, 36, 0.94) 100%);
}

/*
 * NOTA breakpoint (le custom properties NON funzionano nelle media query):
 * mobile-first, base senza media query, poi solo min-width canonici:
 *   480px (mobile L) · 720px (tablet, breakpoint principale) ·
 *   1024px (desktop S) · 1280px (desktop L)
 * 768px/992px sono retaggi Bootstrap presenti nel legacy: non usarli
 * per nuovo CSS. Dettagli: DOCS/design-system.md §4.
 */

/* Source: icons.css */
.icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: -0.125em;
  flex-shrink: 0;
  display: inline-block;
}

.icon--nav {
  margin-right: 0.5em;
}

.nav-menu .nav-link .icon {
  margin-right: 0.35em;
}

.nav-link__label {
  vertical-align: middle;
}

/* Source: navbar.css */
/* navbar.css - testata frontend moderna, compatta e responsive */

#fixedHeader.with-navbar #TESTATA {
  display: none;
}

.navbar {
  --nav-surface: linear-gradient(135deg, rgba(20, 39, 74, 0.92), rgba(17, 26, 64, 0.88));
  --nav-border: rgba(255, 255, 255, 0.22);
  --nav-link-bg: rgba(255, 255, 255, 0.12);
  --nav-link-bg-hover: rgba(255, 255, 255, 0.22);
  --nav-link-bg-active: rgba(118, 196, 255, 0.34);
  --nav-text: #f7fbff;
  --nav-text-soft: rgba(247, 251, 255, 0.86);
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 74px;
  padding: 10px 18px;
  background: var(--nav-surface);
  border-bottom: 1px solid var(--nav-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 16px 32px rgba(5, 12, 32, 0.28);
  position: relative;
  z-index: 1200;
}

.navbar-brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 4px 0;
  text-decoration: none;
}

.navbar-logo {
  display: block;
  /* width: clamp(132px, 15vw, 188px); */
  max-height: 50px;
  height: auto;
  object-fit: contain;
}

.nav-menu {
  --nav-text: #f7fbff;
  --nav-text-soft: rgba(247, 251, 255, 0.86);
  --nav-link-bg: rgba(255, 255, 255, 0.12);
  --nav-link-bg-hover: rgba(255, 255, 255, 0.22);
  --nav-link-bg-active: rgba(118, 196, 255, 0.34);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.nav-item {
  list-style: none;
  margin: 0;
  display: flex;
  align-items: stretch;
  flex: 0 0 auto;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 48px;
  height: 48px;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: var(--nav-link-bg);
  color: var(--nav-text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.1;
  transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}

.nav-link .icon--nav {
  flex: 0 0 auto;
}

.nav-link__label {
  display: block;
  line-height: 1.05;
  text-align: center;
  max-height: 2.2em;
  overflow: hidden;
}

.nav-link:hover,
.nav-link:focus-visible {
  color: #ffffff;
  background: var(--nav-link-bg-hover);
  border-color: rgba(255, 255, 255, 0.36);
  transform: translateY(-1px);
}

.nav-item.active .nav-link {
  background: var(--nav-link-bg-active);
  border-color: rgba(170, 228, 255, 0.62);
  color: #ffffff;
}

.navbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex: 0 0 auto;
  white-space: nowrap;
}

.navbar-cart-mobile {
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.navbar-cart-link {
  text-decoration: none;
}

.navbar-account-link {
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease;
}

.navbar-account-link:hover,
.navbar-account-link:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.24);
  border-color: rgba(255, 255, 255, 0.52);
  transform: translateY(-1px);
}

.navbar-account-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
}

.navbar-account-icon {
  width: 21px;
  height: 21px;
  display: block;
  color: currentColor;
  background: currentColor;
  -webkit-mask: url('/immagini/icons/icon-user-lock.svg') center / contain no-repeat;
  mask: url('/immagini/icons/icon-user-lock.svg') center / contain no-repeat;
}

.navbar-cart-text {
  letter-spacing: 0.01em;
}

.nav-cart-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.icon--cart,
.nav-cart-icon {
  width: 20px;
  height: 20px;
}

.nav-cart-icon {
  display: inline-block;
  color: currentColor;
  background: currentColor;
  -webkit-mask: url('/immagini/icons/cart.svg') center / contain no-repeat;
  mask: url('/immagini/icons/cart.svg') center / contain no-repeat;
}

.alu-cart-nav-count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #e30b33;
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
  display: none;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.9);
  position: absolute;
  top: -8px;
  right: -9px;
}
.alu-cart-nav-count.is-visible {
  display: inline-block;
}

.hamburger {
  display: none;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.24);
  width: 42px;
  height: 42px;
  padding: 0;
  margin: 0;
  border-radius: 12px;
  position: relative;
  z-index: 1212;
  flex: 0 0 42px;
}

.bar {
  position: absolute;
  left: 10px;
  width: 20px;
  height: 2px;
  margin: 0;
  transition: transform 0.24s ease, opacity 0.22s ease, top 0.24s ease;
  background: #ffffff;
  border-radius: 999px;
}

.hamburger .bar:nth-child(1) {
  top: 13px;
}

.hamburger .bar:nth-child(2) {
  top: 20px;
}

.hamburger .bar:nth-child(3) {
  top: 27px;
}

.hamburger:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.45);
}

.hamburger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
}

.nav-backdrop {
  display: none;
}

.nav-overflow-panel {
  display: none;
}

.nav-overflow-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.theme-toggle {
  --toggle-bg: rgba(255, 255, 255, 0.12);
  --toggle-border: rgba(255, 255, 255, 0.28);
  --toggle-text: rgba(255, 255, 255, 0.72);
  --toggle-active-text: var(--alu-text-on-gold, #2a1b4a);
  --toggle-thumb: var(--alu-grad-gold, linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%));
  min-width: 116px;
  min-height: 44px;
  border-radius: var(--alu-radius-pill, 999px);
  border: 1px solid var(--toggle-border);
  background: var(--toggle-bg);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 3px;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.theme-toggle:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.52);
}

.theme-toggle:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.38);
}

.theme-toggle__track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  width: 100%;
  min-height: 36px;
  border-radius: var(--alu-radius-pill, 999px);
  overflow: hidden;
}

.theme-toggle__thumb {
  position: absolute;
  inset: 3px auto 3px 3px;
  width: calc((100% - 6px) / 3);
  border-radius: var(--alu-radius-pill, 999px);
  background: var(--toggle-thumb);
  box-shadow: var(--alu-glow-gold-soft, 0 4px 12px rgba(251, 191, 36, 0.35));
  transform: translateX(0);
  transition: transform 0.24s ease, background 0.24s ease, box-shadow 0.24s ease;
}

.theme-toggle[data-theme-state='light'] .theme-toggle__thumb {
  transform: translateX(100%);
}

.theme-toggle[data-theme-state='dark'] .theme-toggle__thumb {
  transform: translateX(200%);
  background: linear-gradient(135deg, #d7e6ff 0%, #9db7ff 100%);
  box-shadow: 0 4px 14px rgba(157, 183, 255, 0.28);
}

.theme-toggle__option {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 7px;
  color: var(--toggle-text);
  font-size: clamp(0.66rem, 2.1vw, 0.72rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
  transition: color 0.2s ease;
}

.theme-toggle[data-theme-state='auto'] .theme-toggle__option--auto,
.theme-toggle[data-theme-state='light'] .theme-toggle__option--light,
.theme-toggle[data-theme-state='dark'] .theme-toggle__option--dark {
  color: var(--toggle-active-text);
}

.theme-toggle__status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.theme-toggle__svg {
  width: 20px;
  height: 20px;
  display: block;
  color: currentColor;
  background: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.theme-toggle__svg--auto {
  -webkit-mask-image: url('/immagini/icons/theme-auto.svg');
  mask-image: url('/immagini/icons/theme-auto.svg');
}

.theme-toggle__svg--light {
  -webkit-mask-image: url('/immagini/icons/theme-light.svg');
  mask-image: url('/immagini/icons/theme-light.svg');
}

.theme-toggle__svg--dark {
  -webkit-mask-image: url('/immagini/icons/theme-dark.svg');
  mask-image: url('/immagini/icons/theme-dark.svg');
}

@media (max-width: 860px) {
  .theme-toggle {
    min-width: 44px;
    width: 44px;
    min-height: 44px;
    height: 44px;
    padding: 3px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08) 58%, rgba(255, 255, 255, 0.14));
  }

  .theme-toggle__track {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    width: 36px;
    border-radius: 50%;
    overflow: visible;
  }

  .theme-toggle__thumb {
    display: none;
  }

  .theme-toggle__option {
    display: none;
    min-height: 36px;
    width: 36px;
    padding: 0;
    color: var(--alu-gold, #fbbf24);
  }

  .theme-toggle[data-theme-state='auto'] .theme-toggle__option--auto,
  .theme-toggle[data-theme-state='light'] .theme-toggle__option--light,
  .theme-toggle[data-theme-state='dark'] .theme-toggle__option--dark {
    display: inline-flex;
    color: var(--alu-gold, #fbbf24);
  }

  .theme-toggle[data-theme-state='dark'] .theme-toggle__option--dark {
    color: #d7e6ff;
  }

  .theme-toggle__svg {
    width: 22px;
    height: 22px;
  }
}

.theme-toggle--floating,
.theme-toggle--masthead {
  display: none;
}

html.nav-menu-open,
body.nav-menu-open {
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle,
  .theme-toggle__icon,
  .theme-toggle__icon::after,
  .nav-link,
  .nav-menu,
  .bar {
    transition-duration: 0.01ms !important;
    animation: none !important;
  }
}

@media (max-width: 1060px) {
  .nav-link {
    font-size: 13px;
    min-height: 46px;
    height: 46px;
    padding: 8px 10px;
  }
}

@media (min-width: 861px) {
  .navbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand actions"
      "menu menu";
    align-items: center;
    row-gap: 10px;
    column-gap: 14px;
    padding: 10px 18px 12px;
  }

  .navbar-brand { grid-area: brand; }

  .nav-menu {
    grid-area: menu;
    width: 100%;
    justify-content: flex-start;
    overflow: hidden;
    flex-wrap: nowrap;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .nav-menu::-webkit-scrollbar {
    display: none;
  }

  .navbar-actions {
    grid-area: actions;
    align-self: start;
    justify-self: end;
    margin-left: 0;
    z-index: 2;
    position: static;
    transform: none;
  }

  .navbar-cart-mobile {
    min-height: 40px;
  }

  .nav-menu .is-overflow-item {
    display: none;
  }

  .navbar.has-overflow .navbar-actions {
    margin-right: 56px;
  }

  .navbar.has-overflow .hamburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 10px;
    right: 18px;
    order: initial;
  }

  .nav-overflow-panel {
    position: absolute;
    top: 58px;
    right: 18px;
    width: min(360px, calc(100vw - 36px));
    padding: 10px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: linear-gradient(165deg, rgba(10, 16, 36, 0.97), rgba(17, 25, 54, 0.94));
    box-shadow: 0 20px 40px rgba(2, 8, 24, 0.46);
    z-index: 1215;
  }

  .nav-overflow-panel.active {
    display: block;
  }

  .nav-overflow-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .nav-overflow-list .nav-link {
    width: 100%;
    justify-content: flex-start;
  }
}

/* Schermi ampi: logo centrato assoluto nella navbar/viewport.
   Su schermi piccoli resta il comportamento left-aligned. */
@media (min-width: 1280px) {
  .navbar {
    position: relative;
  }

  .navbar-brand {
    position: absolute;
    left: 57%;
    transform: translateX(-50%);
    z-index: 3;
  }

  .navbar-logo {
    /* width: clamp(150px, 11vw, 220px); */
    max-height: 54px;
  }
}

@media (max-width: 860px) {
  .navbar {
    min-height: 66px;
    padding: 8px 12px;
    gap: 8px;
    flex-wrap: nowrap;
  }

  .navbar-brand {
    flex: 0 1 auto;
    min-width: 0;
  }

  .navbar-logo {
    /* width: clamp(118px, 37vw, 162px); */
    max-height: 50px;
  }

  .nav-menu {
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(92vw, 390px);
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    padding: max(76px, env(safe-area-inset-top, 0px) + 18px) 14px max(22px, env(safe-area-inset-bottom, 0px) + 16px);
    background: linear-gradient(180deg, rgba(9, 16, 38, 0.98), rgba(8, 14, 32, 0.95));
    border-left: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 18px 0 0 18px;
    box-shadow: -18px 0 46px rgba(5, 10, 26, 0.46);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    overscroll-behavior-x: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    transform: translate3d(100%, 0, 0);
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.32s ease, visibility 0s linear 0.32s;
    /* 9994: sopra cart drawer (9991) e nav-backdrop (9993), sotto modal PayPal (20020). */
    z-index: 9994;
  }

  .nav-menu::before,
  .nav-menu::after {
    position: sticky;
    left: 0;
    right: 0;
    z-index: 4;
    min-height: 46px;
    margin-right: -14px;
    margin-left: -14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.92);
    font-size: 1.15rem;
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
  }

  .nav-menu::before {
    content: "↑";
    top: -1px;
    background: linear-gradient(180deg, rgba(9, 16, 38, 0.96), rgba(9, 16, 38, 0));
  }

  .nav-menu::after {
    content: "↓";
    bottom: -1px;
    background: linear-gradient(0deg, rgba(8, 14, 32, 0.96), rgba(8, 14, 32, 0));
  }

  .nav-menu.has-scroll-top::before,
  .nav-menu.has-scroll-bottom::after {
    opacity: 1;
  }

  .nav-menu .nav-item {
    width: 100%;
    opacity: 0;
    transform: translateX(14px);
    transition: transform 0.28s ease, opacity 0.28s ease;
  }

  .nav-menu.active {
    transform: translate3d(0, 0, 0);
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s, 0s;
  }

  .nav-menu.active .nav-item {
    opacity: 1;
    transform: translateX(0);
  }

  .nav-menu.active .nav-item:nth-child(1) { transition-delay: 0.03s; }
  .nav-menu.active .nav-item:nth-child(2) { transition-delay: 0.06s; }
  .nav-menu.active .nav-item:nth-child(3) { transition-delay: 0.09s; }
  .nav-menu.active .nav-item:nth-child(4) { transition-delay: 0.12s; }
  .nav-menu.active .nav-item:nth-child(5) { transition-delay: 0.15s; }
  .nav-menu.active .nav-item:nth-child(6) { transition-delay: 0.18s; }

  .nav-link {
    width: 100%;
    min-height: 48px;
    height: auto;
    justify-content: flex-start;
    padding: 11px 12px;
    font-size: 14px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--nav-text-soft);
  }

  .navbar-actions {
    margin-left: auto;
    gap: 8px;
    order: 2;
    flex: 0 0 auto;
  }

  .navbar-cart-mobile {
    min-width: 40px;
    min-height: 40px;
    padding: 8px;
    justify-content: center;
  }

  .navbar-account-link {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
  }

  .navbar-cart-text {
    display: none;
  }

  .hamburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    order: 3;
    position: relative;
    top: auto;
    right: auto;
  }

  .hamburger.active .bar:nth-child(2) {
    opacity: 0;
  }

  .hamburger.active .bar:nth-child(1) {
    top: 20px;
    transform: rotate(45deg);
  }

  .hamburger.active .bar:nth-child(3) {
    top: 20px;
    transform: rotate(-45deg);
  }

  .nav-backdrop {
    position: fixed;
    inset: 0;
    border: 0;
    margin: 0;
    padding: 0;
    background: rgba(2, 7, 20, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
    /* 9993: sopra cart drawer (9991), sotto nav-menu (9994). */
    z-index: 9993;
    display: block;
  }

  .nav-backdrop.active {
    opacity: 1;
    pointer-events: auto;
  }

  .nav-overflow-panel {
    display: none !important;
  }
}

@media (max-width: 420px) {
  .navbar {
    gap: 4px;
    padding: 8px;
  }

  .navbar-logo {
    /* width: clamp(86px, 27vw, 108px); */
    max-height: 30px;
  }

  .navbar-actions {
    gap: 4px;
  }

  .navbar-cart-mobile,
  .theme-toggle,
  .navbar-account-link,
  .hamburger {
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
  }

  .hamburger {
    flex-basis: 38px;
  }

  .hamburger .bar {
    left: 9px;
    width: 18px;
  }

  .hamburger .bar:nth-child(1) { top: 10px; }
  .hamburger .bar:nth-child(2) { top: 17px; }
  .hamburger .bar:nth-child(3) { top: 24px; }
}

/*
 * Guard cascade navbar:
 * la navbar pubblica usa nomi classe volutamente compatibili con Bootstrap
 * (.navbar, .nav-link, .navbar-brand). Se Bootstrap arriva tardi da cache
 * browser/Aruba o da un vecchio HTML, queste regole piu' specifiche
 * mantengono il layout ALU senza dipendere solo dall'ordine dei <link>.
 */
nav.navbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 74px;
  padding: 10px 18px;
  background: var(--nav-surface);
  border-bottom: 1px solid var(--nav-border);
  box-shadow: 0 16px 32px rgba(5, 12, 32, 0.28);
}

nav.navbar .navbar-brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 4px 0;
  margin: 0;
  text-decoration: none;
}

nav.navbar .nav-menu {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}

nav.navbar .nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 48px;
  height: 48px;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: var(--nav-link-bg);
  color: var(--nav-text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.1;
}

nav.navbar .nav-link:hover,
nav.navbar .nav-link:focus-visible {
  color: #ffffff;
  background: var(--nav-link-bg-hover);
  border-color: rgba(255, 255, 255, 0.36);
}

nav.navbar .nav-item.active .nav-link {
  background: var(--nav-link-bg-active);
  border-color: rgba(170, 228, 255, 0.62);
  color: #ffffff;
}

@media (min-width: 861px) {
  nav.navbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand actions"
      "menu menu";
    align-items: center;
    row-gap: 10px;
    column-gap: 14px;
    padding: 10px 18px 12px;
  }

  nav.navbar .navbar-brand {
    grid-area: brand;
  }

  nav.navbar .nav-menu {
    grid-area: menu;
    width: 100%;
    justify-content: flex-start;
    overflow: hidden;
    flex-wrap: nowrap;
    padding-bottom: 2px;
  }

  nav.navbar .navbar-actions {
    grid-area: actions;
    align-self: start;
    justify-self: end;
    margin-left: 0;
    z-index: 2;
    position: static;
    transform: none;
  }
}

@media (min-width: 1280px) {
  nav.navbar {
    position: relative;
  }

  nav.navbar .navbar-brand {
    position: absolute;
    left: 57%;
    transform: translateX(-50%);
    z-index: 3;
  }
}

@media (max-width: 860px) {
  nav.navbar {
    min-height: 66px;
    padding: 8px 12px;
    gap: 8px;
    flex-wrap: nowrap;
  }

  nav.navbar .nav-menu {
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(92vw, 390px);
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    padding: max(76px, env(safe-area-inset-top, 0px) + 18px) 14px max(22px, env(safe-area-inset-bottom, 0px) + 16px);
    background: linear-gradient(180deg, rgba(9, 16, 38, 0.98), rgba(8, 14, 32, 0.95));
    border-left: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 18px 0 0 18px;
    box-shadow: -18px 0 46px rgba(5, 10, 26, 0.46);
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    overscroll-behavior-x: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    transform: translate3d(100%, 0, 0);
    visibility: hidden;
    pointer-events: none;
    z-index: 9994;
  }

  nav.navbar .nav-menu.active {
    transform: translate3d(0, 0, 0);
    visibility: visible;
    pointer-events: auto;
  }
}

@media (max-width: 420px) {
  nav.navbar {
    gap: 4px;
    padding: 8px;
  }
}

/* Source: scroll-fade-mask.css */
/* ============================================================
   ALU.ScrollFadeMask - componente generico (2026-05-11)
   Maschera fade laterale per contenitori scrollabili orizzontalmente.
   Riusabile via attributo [data-scroll-fade] sul wrapper.

   Stato data-scroll-start/end (settato da js/scroll-fade-mask.js):
     0 = c'e' altro contenuto in quella direzione -> fade visibile
     1 = inizio/fine raggiunto                    -> fade nascosto

   Personalizzazione per contesto via CSS variables (host scoped):
     --alu-scroll-fade-color: colore base del gradient (matcha lo sfondo).
     --alu-scroll-fade-width: ampiezza maschera (default 22px).
   ============================================================ */
[data-scroll-fade] {
  position: relative;
  --alu-scroll-fade-color: rgba(0, 0, 0, 0.85);
  --alu-scroll-fade-width: 22px;
}
[data-scroll-fade]::before,
[data-scroll-fade]::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--alu-scroll-fade-width);
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.18s ease;
}
[data-scroll-fade]::before {
  left: 0;
  background: linear-gradient(90deg, var(--alu-scroll-fade-color) 0%, rgba(0, 0, 0, 0) 100%);
}
[data-scroll-fade]::after {
  right: 0;
  background: linear-gradient(270deg, var(--alu-scroll-fade-color) 0%, rgba(0, 0, 0, 0) 100%);
}
[data-scroll-fade][data-scroll-start='0']::before { opacity: 1; }
[data-scroll-fade][data-scroll-end='0']::after { opacity: 1; }

/* Source: breadcrumb.css */
/* ============================================================
   Breadcrumb (refactor 2026-05-11)
   Mobile-first, compatto, leggibile, coerente con la navbar.
   Theme tokens consistenti via CSS custom properties.
   ============================================================ */
.breadcrumb-wrapper {
  /* Token: matchano la navbar (--nav-surface) ma con leggera variazione di
     opacita' per creare una gerarchia visiva soft. Override in dark/light. */
  --bc-bg: linear-gradient(135deg, rgba(20, 39, 74, 0.96), rgba(17, 26, 64, 0.92));
  --bc-border: rgba(255, 255, 255, 0.12);
  --bc-text: rgba(247, 251, 255, 0.78);
  --bc-text-strong: #ffffff;
  --bc-text-hover: #fde68a;
  --bc-separator: rgba(247, 251, 255, 0.42);
  --bc-collapse-bg: rgba(255, 255, 255, 0.12);
  --bc-collapse-bg-hover: rgba(251, 191, 36, 0.22);
  --bc-collapse-menu-bg: rgba(15, 23, 50, 0.98);
  --bc-collapse-menu-border: rgba(251, 191, 36, 0.32);

  background: var(--bc-bg);
  border-bottom: 1px solid var(--bc-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--bc-text);
  font-size: 0.85rem;
  line-height: 1.2;
  /* Fade mask laterale gestita dal componente generico [data-scroll-fade]. */
  --alu-scroll-fade-color: rgba(17, 26, 64, 0.96);
}

.breadcrumb-list {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0.95rem;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.4rem;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.breadcrumb-list::-webkit-scrollbar { display: none; }

.breadcrumb-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
  max-width: 60vw;
  min-width: 0;
  white-space: nowrap;
}
.breadcrumb-item + .breadcrumb-item::before {
  content: '›';
  color: var(--bc-separator);
  font-size: 1.05rem;
  line-height: 1;
  flex-shrink: 0;
  font-weight: 600;
}

/* Link: sempre con sufficiente contrasto + hover dorato. */
.breadcrumb-item__label {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--bc-text);
  text-decoration: none;
  padding: 0.2rem 0.1rem;
  border-radius: 4px;
  font-weight: 500;
  transition: color 0.15s ease;
}
.breadcrumb-item__label:visited { color: var(--bc-text); }
.breadcrumb-item__label:hover,
.breadcrumb-item__label:focus-visible {
  color: var(--bc-text-hover);
  text-decoration: none;
  outline: none;
}
.breadcrumb-item--current .breadcrumb-item__label {
  color: var(--bc-text-strong);
  font-weight: 700;
}

/* ---------- Collapse middle (ellipsis dropdown <details>) ---------- */
.breadcrumb-item--collapsed { flex: 0 0 auto; }

.breadcrumb-collapse {
  position: relative;
  display: inline-block;
}
.breadcrumb-collapse > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 24px;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--bc-collapse-bg);
  color: var(--bc-text-strong);
  font-weight: 700;
  letter-spacing: 0.08em;
  transition: background 0.15s ease, color 0.15s ease;
}
.breadcrumb-collapse > summary::-webkit-details-marker { display: none; }
.breadcrumb-collapse > summary::marker { content: ''; }
.breadcrumb-collapse > summary:hover,
.breadcrumb-collapse[open] > summary {
  background: var(--bc-collapse-bg-hover);
  color: var(--bc-text-hover);
}

.breadcrumb-collapse__menu {
  list-style: none;
  margin: 0;
  padding: 0.4rem 0;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 200px;
  max-width: 78vw;
  background: var(--bc-collapse-menu-bg);
  border: 1px solid var(--bc-collapse-menu-border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  z-index: 50;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.breadcrumb-collapse__menu li a {
  display: block;
  padding: 0.55rem 0.9rem;
  font-size: 0.85rem;
  color: rgba(247, 251, 255, 0.9);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.12s ease, color 0.12s ease;
}
.breadcrumb-collapse__menu li a:hover,
.breadcrumb-collapse__menu li a:focus-visible {
  background: rgba(251, 191, 36, 0.18);
  color: var(--bc-text-hover);
  outline: none;
}

/* ---------- Responsive mobile ---------- */
@media (max-width: 575.98px) {
  .breadcrumb-wrapper { font-size: 0.8rem; }
  .breadcrumb-list { padding: 0.42rem 0.65rem; gap: 0.32rem; }
  .breadcrumb-item { max-width: 62vw; gap: 0.32rem; }
  .breadcrumb-item + .breadcrumb-item::before { font-size: 0.95rem; }
  .breadcrumb-collapse > summary { min-width: 26px; height: 22px; }
}

/* ============================================================
   THEME OVERRIDES
   Dark: piu' scuro per profondita' sotto navbar.
   Light: sfondo viola scuro brand con testo chiaro AA.
   ============================================================ */
html:is(.theme-dark, [data-bs-theme='dark']) .breadcrumb-wrapper {
  --bc-bg: linear-gradient(140deg, rgba(8, 12, 28, 0.96), rgba(19, 25, 55, 0.94));
  --bc-border: rgba(255, 255, 255, 0.08);
  --bc-text: rgba(226, 232, 240, 0.78);
  --bc-text-strong: #ffffff;
  --bc-separator: rgba(226, 232, 240, 0.4);
  --alu-scroll-fade-color: rgba(8, 12, 28, 0.97);
}

html:is(.theme-light, [data-bs-theme='light']) .breadcrumb-wrapper {
  --bc-bg: linear-gradient(135deg, rgba(46, 29, 84, 0.95), rgba(78, 39, 134, 0.92));
  --bc-border: rgba(255, 255, 255, 0.18);
  --bc-text: rgba(255, 255, 255, 0.88);
  --bc-text-strong: #ffffff;
  --bc-text-hover: #fde68a;
  --bc-separator: rgba(255, 255, 255, 0.55);
  --alu-scroll-fade-color: rgba(46, 29, 84, 0.96);
}

/* Source: consulto-gratis.css */
/* ============================================================
   Consulto gratis singolo - .consulto-gratis-result
   Card pubblica del consulto pubblicato. Mobile-first, token scoped,
   separata dalla .consulto-gratis-card del form richiesta consulto.
   ============================================================ */

.consulto-gratis-result {
  --cgr-bg: linear-gradient(160deg, rgba(255, 255, 255, 0.99) 0%, rgba(248, 244, 255, 0.96) 100%);
  --cgr-top-accent: linear-gradient(90deg, #f59e0b 0%, #fbbf24 45%, #fde68a 100%);
  --cgr-border: rgba(78, 39, 134, 0.14);
  --cgr-shadow: 0 2px 6px rgba(18, 28, 60, 0.06), 0 12px 32px rgba(18, 28, 60, 0.14);
  --cgr-text: #2e1d4a;
  --cgr-text-soft: rgba(24, 32, 51, 0.78);
  --cgr-muted: rgba(46, 29, 78, 0.72);
  --cgr-title-gradient: linear-gradient(135deg, #2e1d4a 0%, #4e2786 55%, #6b3aa0 100%);
  --cgr-accent: #6b3aa0;
  --cgr-accent-strong: #4e2786;
  --cgr-gold: #b45309;
  --cgr-gold-dot: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  --cgr-panel-q-bg: rgba(250, 246, 255, 0.9);
  --cgr-panel-a-bg: rgba(255, 255, 255, 0.82);
  --cgr-panel-border: rgba(78, 39, 134, 0.11);
  --cgr-answer-border: rgba(251, 191, 36, 0.54);
  --cgr-quote-color: rgba(107, 58, 160, 0.1);
  --cgr-author-bg: linear-gradient(135deg, rgba(46, 29, 84, 0.05) 0%, rgba(251, 191, 36, 0.1) 100%);
  --cgr-author-border: rgba(251, 191, 36, 0.34);
  --cgr-avatar-ring: 0 0 0 3px rgba(251, 191, 36, 0.72), 0 6px 18px rgba(20, 12, 40, 0.18);
  --cgr-avatar-ring-hover: 0 0 0 3px rgba(251, 191, 36, 0.9), 0 8px 24px rgba(20, 12, 40, 0.28);
  --cgr-focus: rgba(180, 83, 9, 0.80);
  --cgr-hint-bg: #ffffff;
  --cgr-hint-border: rgba(180, 83, 9, 0.34);
  --cgr-hint-ink: #7c3a06;
  width: min(880px, calc(100% - 1rem));
  margin: 1.25rem auto 1.75rem;
  padding: 1.1rem 1rem 1.25rem;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--cgr-bg);
  border: 1px solid var(--cgr-border);
  border-radius: 20px;
  box-shadow: var(--cgr-shadow);
  color: var(--cgr-text);
}

/* Gold stripe at top — z-index omitted (auto) so it paints above background, below content */
.consulto-gratis-result::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--cgr-top-accent);
  border-radius: 20px 20px 0 0;
}

.consulto-gratis-result__head {
  display: grid;
  gap: 0.6rem;
  padding: 0.4rem 0.1rem 1rem;
  border-bottom: 1px solid var(--cgr-panel-border);
}

.consulto-gratis-result__eyebrow {
  width: fit-content;
  max-width: 100%;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.42);
  color: var(--cgr-gold);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.consulto-gratis-result__eyebrow::before {
  content: "✦";
  font-size: 0.6rem;
  opacity: 0.9;
  flex: 0 0 auto;
}

.consulto-gratis-result__title {
  margin: 0;
  font-size: clamp(1.45rem, 7vw, 2.15rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

/* Fallback: colore pieno se background-clip:text non è supportato */
.consulto-gratis-result__title-link {
  color: var(--cgr-text);
  text-decoration: none;
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .consulto-gratis-result__title-link {
    background: var(--cgr-title-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.consulto-gratis-result__title-link:hover {
  opacity: 0.78;
}

.consulto-gratis-result__title-link:focus-visible,
.consulto-gratis-result__author-link:focus-visible {
  outline: none;
  border-radius: 8px;
  box-shadow: 0 0 0 3px var(--cgr-focus);
  opacity: 1;
}

.consulto-gratis-result__panel {
  margin-top: 0.85rem;
  padding: 1rem;
  border: 1px solid var(--cgr-panel-border);
  border-radius: 16px;
}

.consulto-gratis-result__panel--question {
  background: var(--cgr-panel-q-bg);
  position: relative;
  overflow: hidden;
}

/* Virgolette decorative grandi come accent visivo */
.consulto-gratis-result__panel--question::after {
  content: "\201C";
  position: absolute;
  top: -0.5rem;
  right: 0.6rem;
  font-size: 5.5rem;
  line-height: 1;
  color: var(--cgr-quote-color);
  font-weight: 900;
  pointer-events: none;
  user-select: none;
}

.consulto-gratis-result__panel--answer {
  background: var(--cgr-panel-a-bg);
  border-color: var(--cgr-answer-border);
  border-left-width: 3px;
}

.consulto-gratis-result__section-label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.75rem;
  color: var(--cgr-accent);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.consulto-gratis-result__section-label::before {
  content: "";
  width: 0.52rem;
  height: 0.52rem;
  border-radius: 999px;
  background: var(--cgr-gold-dot);
  flex: 0 0 auto;
}

.consulto-gratis-result__question-body,
.consulto-gratis-result__answer {
  color: var(--cgr-text-soft);
  font-size: clamp(0.98rem, 3.2vw, 1.08rem);
  line-height: 1.76;
}

.consulto-gratis-result__question-body {
  position: relative;
  padding-left: 1rem;
  border-left: 3px solid var(--cgr-answer-border);
  font-style: italic;
}

.consulto-gratis-result__question-body > :first-child,
.consulto-gratis-result__answer > :first-child {
  margin-top: 0;
}

.consulto-gratis-result__question-body > :last-child,
.consulto-gratis-result__answer > :last-child {
  margin-bottom: 0;
}

/* AUTHOR.CARD.2 (2026-09-06): una riga sola.
   Prima il link occupava entrambe le colonne (`grid-column: 1 / -1`) e le
   azioni finivano nella riga sotto, incolonnate a destra: fra il nome e il
   cuore restava un vuoto verticale che li faceva leggere come due blocchi
   diversi, e su 390px la scheda era alta 150px per dire due cose. */
.consulto-gratis-result__author {
  display: grid;
  /* Su telefono il fumetto NON puo' stare sulla stessa riga: e' in `nowrap` e
     largo 160px, e su 320px utili schiacciava la colonna del nome fino a una
     lettera per riga. Sta su una riga sua, allineato a destra sotto il cuore
     verso cui punta. */
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "link link cuore"
    "hint hint hint";
  align-items: center;
  gap: 0.55rem 0.7rem;
  margin: 0 0 1.1rem;
  padding: 0.7rem 0.8rem;
  background: var(--cgr-author-bg);
  border: 1px solid var(--cgr-author-border);
  border-radius: 14px;
}

.consulto-gratis-result__author-link {
  grid-area: link;
  min-height: 0;
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  align-items: center;
  gap: 0.7rem;
  color: inherit;
  text-decoration: none;
}

.consulto-gratis-result__author-avatar-wrap {
  position: relative;
  display: block;
  width: 60px;
  height: 60px;
}

.consulto-gratis-result__author-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: var(--cgr-avatar-ring);
  background: rgba(255, 255, 255, 0.8);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.consulto-gratis-result__author-avatar-wrap .cartomante-status-badge {
  position: absolute;
  right: -0.35rem;
  bottom: -0.22rem;
  margin: 0;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.28), 0 0 0 2px rgba(255, 255, 255, 0.82);
}

.consulto-gratis-result__author-link:hover .consulto-gratis-result__author-avatar {
  transform: scale(1.05);
  box-shadow: var(--cgr-avatar-ring-hover);
}

.consulto-gratis-result__author-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}

.consulto-gratis-result__author-label {
  color: var(--cgr-muted);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.consulto-gratis-result__author-name {
  color: var(--cgr-accent-strong);
  font-size: clamp(1.05rem, 4vw, 1.22rem);
  font-weight: 800;
  line-height: 1.15;
  overflow-wrap: anywhere;
  transition: color 0.18s ease;
}

.consulto-gratis-result__author-link:hover .consulto-gratis-result__author-name {
  color: var(--cgr-accent);
}

.consulto-gratis-result__author-actions {
  grid-area: cuore;
  justify-self: end;
  min-height: 0;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  position: relative;
}

/* IL FUMETTO. Il cuore c'era gia' ma non diceva cosa fosse: un numero e
   un'icona non si leggono come un invito, e infatti non venivano toccati.
   Sparisce da solo al primo cuore lasciato, cosi' non resta a insistere. */
.cgr-like-hint {
  grid-area: hint;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  position: relative;
  padding: 0.3rem 0.55rem;
  border-radius: 10px;
  background: var(--cgr-hint-bg);
  border: 1px solid var(--cgr-hint-border);
  color: var(--cgr-hint-ink);
  font-size: 0.72rem;
  line-height: 1.25;
  white-space: nowrap;
  animation: cgrHintIn 0.45s var(--alu-ease-out, ease-out) 0.9s both;
}

.cgr-like-hint b {
  font-weight: 800;
}

/* La codina che punta al cuore: due triangoli sovrapposti, quello di sotto fa
   da bordo. Niente immagini, e segue il colore del fumetto in entrambi i temi. */
/* La codina punta al cuore: verso l'alto su telefono (il cuore sta sopra),
   verso destra da 576px in su (il cuore sta di fianco). Due triangoli
   sovrapposti, quello sotto fa da bordo: nessuna immagine, e segue il colore
   del fumetto in entrambi i temi. */
.cgr-like-hint::before,
.cgr-like-hint::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  right: 1rem;
  bottom: 100%;
  border-inline: 6px solid transparent;
}

.cgr-like-hint::before {
  border-bottom: 7px solid var(--cgr-hint-border);
}

.cgr-like-hint::after {
  border-bottom: 6px solid var(--cgr-hint-bg);
  transform: translateY(1px);
}

/* Tolto il fumetto, il cuore resta comunque tappabile e ben visibile. */
.consulto-gratis-result__author:not([data-like-hint]) .cgr-like-hint {
  display: none;
}

.consulto-gratis-result__author-actions .like-button {
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  min-width: 44px;
  justify-content: center;
  cursor: pointer;
}

/* Il battito e' lento e piccolo: deve farsi notare, non chiedere attenzione. */
.consulto-gratis-result__author:is([data-like-hint]) .heart-icon {
  animation: cgrHeartBeat 2.6s ease-in-out 1.4s infinite;
  transform-origin: center;
}

@keyframes cgrHintIn {
  from { opacity: 0; transform: translateX(6px); }
  to   { opacity: 1; transform: none; }
}

@keyframes cgrHeartBeat {
  0%, 82%, 100% { transform: scale(1); }
  88%           { transform: scale(1.16); }
  94%           { transform: scale(1.04); }
}

.consulto-gratis-result__author-actions .like-button {
  align-items: center;
  gap: 0.35rem;
}

.consulto-gratis-result__author-actions .like-count {
  line-height: 1;
}

.consulto-gratis-result a {
  transition: color 0.18s ease, opacity 0.18s ease, box-shadow 0.18s ease;
}

html:is(.theme-dark, [data-bs-theme='dark']) .consulto-gratis-result {
  --cgr-bg: linear-gradient(160deg, rgba(9, 13, 30, 0.99) 0%, rgba(28, 16, 58, 0.97) 100%);
  --cgr-top-accent: linear-gradient(90deg, #d97706 0%, #fbbf24 45%, #fde68a 100%);
  --cgr-border: rgba(253, 230, 138, 0.22);
  --cgr-shadow: 0 4px 16px rgba(0, 0, 0, 0.32), 0 18px 44px rgba(0, 0, 0, 0.48);
  --cgr-text: #f5f3ff;
  --cgr-text-soft: rgba(245, 243, 255, 0.86);
  --cgr-muted: rgba(245, 243, 255, 0.55);
  --cgr-title-gradient: linear-gradient(135deg, #e8e0ff 0%, #c4a8ff 55%, #fde68a 100%);
  --cgr-accent: #fde68a;
  --cgr-accent-strong: #fbbf24;
  --cgr-gold: #fde68a;
  --cgr-gold-dot: linear-gradient(135deg, #fde68a 0%, #fbbf24 100%);
  --cgr-panel-q-bg: rgba(16, 11, 38, 0.82);
  --cgr-panel-a-bg: rgba(10, 14, 34, 0.78);
  --cgr-panel-border: rgba(245, 243, 255, 0.11);
  --cgr-answer-border: rgba(251, 191, 36, 0.42);
  --cgr-quote-color: rgba(253, 230, 138, 0.09);
  --cgr-author-bg: linear-gradient(135deg, rgba(253, 230, 138, 0.09) 0%, rgba(78, 39, 134, 0.28) 100%);
  --cgr-author-border: rgba(253, 230, 138, 0.26);
  --cgr-avatar-ring: 0 0 0 3px rgba(253, 230, 138, 0.68), 0 6px 18px rgba(0, 0, 0, 0.38);
  --cgr-avatar-ring-hover: 0 0 0 3px rgba(253, 230, 138, 0.9), 0 8px 24px rgba(0, 0, 0, 0.5);
  --cgr-focus: rgba(253, 230, 138, 0.42);
  --cgr-hint-bg: rgba(46, 29, 84, 0.92);
  --cgr-hint-border: rgba(253, 230, 138, 0.42);
  --cgr-hint-ink: #fde68a;
}

html:is(.theme-light, [data-bs-theme='light']) .consulto-gratis-result {
  --cgr-bg: linear-gradient(160deg, rgba(255, 255, 255, 0.99) 0%, rgba(248, 244, 255, 0.96) 100%);
  --cgr-text: #2e1d4a;
  --cgr-text-soft: rgba(24, 32, 51, 0.78);
}

@media (min-width: 720px) {
  .consulto-gratis-result {
    width: min(900px, calc(100% - 2rem));
    margin-top: 1.75rem;
    margin-bottom: 2.25rem;
    padding: 1.35rem 1.4rem 1.5rem;
  }

  .consulto-gratis-result__head {
    padding: 0.5rem 0.15rem 1.15rem;
  }

  .consulto-gratis-result__panel {
    padding: 1.2rem 1.3rem;
  }

  .consulto-gratis-result__author {
    padding: 0.9rem 1.1rem;
  }

  .consulto-gratis-result__author-link {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 0.9rem;
  }

  .consulto-gratis-result__author-avatar-wrap,
  .consulto-gratis-result__author-avatar {
    width: 72px;
    height: 72px;
  }

  .cgr-like-hint {
    font-size: 0.78rem;
    padding: 0.35rem 0.65rem;
  }
}

@media (min-width: 1024px) {
  .consulto-gratis-result {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }

  .consulto-gratis-result__panel {
    padding: 1.4rem 1.55rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .consulto-gratis-result a,
  .consulto-gratis-result__author-name,
  .consulto-gratis-result__author-avatar {
    transition: none;
  }

  .consulto-gratis-result__author-link:hover .consulto-gratis-result__author-avatar {
    transform: none;
  }
}

.consulto-related {
  --cr-bg: var(--surface-card-light, linear-gradient(160deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 244, 255, 0.94) 100%));
  --cr-border: rgba(78, 39, 134, 0.16);
  --cr-text: var(--text-on-light, #2e1d4a);
  --cr-muted: var(--text-on-light-soft, rgba(24, 32, 51, 0.76));
  --cr-accent: #6b3aa0;
  --cr-link-bg: rgba(255, 255, 255, 0.72);
  --cr-link-border: rgba(78, 39, 134, 0.13);
  --cr-link-hover: rgba(251, 191, 36, 0.16);
  width: min(880px, calc(100% - 1rem));
  margin: 0 auto 1.75rem;
  padding: 1rem;
  background: var(--cr-bg);
  border: 1px solid var(--cr-border);
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(18, 28, 60, 0.14);
  color: var(--cr-text);
}

.consulto-related__heading {
  margin: 0;
  color: var(--cr-text);
  font-size: clamp(1.15rem, 4vw, 1.45rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0;
}

.consulto-related__lead {
  margin: 0.35rem 0 0.9rem;
  color: var(--cr-muted);
  font-size: clamp(0.9rem, 2.6vw, 0.98rem);
  line-height: 1.5;
}

.consulto-related__list {
  display: grid;
  gap: 0.65rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.consulto-related__link {
  min-height: 56px;
  display: grid;
  gap: 0.18rem;
  padding: 0.75rem 0.85rem;
  background: var(--cr-link-bg);
  border: 1px solid var(--cr-link-border);
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.consulto-related__link:hover {
  background: var(--cr-link-hover);
  border-color: rgba(251, 191, 36, 0.36);
  transform: translateY(-1px);
}

.consulto-related__link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.42);
}

.consulto-related__title {
  color: var(--cr-accent);
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1.25;
}

.consulto-related__meta {
  color: var(--cr-muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

html:is(.theme-dark, [data-bs-theme='dark']) .consulto-related {
  --cr-bg: linear-gradient(160deg, rgba(11, 16, 36, 0.95) 0%, rgba(46, 29, 84, 0.9) 100%);
  --cr-border: rgba(253, 230, 138, 0.22);
  --cr-text: var(--text-on-dark, #f5f3ff);
  --cr-muted: var(--text-on-dark-soft, rgba(245, 243, 255, 0.84));
  --cr-accent: #fde68a;
  --cr-link-bg: rgba(12, 16, 36, 0.58);
  --cr-link-border: rgba(245, 243, 255, 0.12);
  --cr-link-hover: rgba(251, 191, 36, 0.13);
}

@media (min-width: 720px) {
  .consulto-related {
    width: min(900px, calc(100% - 2rem));
    padding: 1.15rem 1.25rem;
  }

  .consulto-related__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .consulto-related__link {
    transition: none;
  }

  .consulto-related__link:hover {
    transform: none;
  }
}


/* ===========================================================================
   WIDTH.MOBILE.1 (2026-09-06) — recupero di larghezza su telefono.

   Misurato a 390px: il testo della risposta era largo **280px**, il 72% dello
   schermo. I 110px mancanti erano tre livelli di spaziatura sommati — il
   contenitore della pagina, il margine dell'articolo (`calc(100% - 1rem)` piu'
   1rem di padding per lato) e il pannello (1rem) — piu' il rientro della
   citazione. Nessuno dei tre e' sbagliato da solo: e' la somma che stringe la
   colonna al punto da spezzare le righe ogni cinque parole.

   Qui sotto ogni livello lascia qualcosa, invece di toglierlo tutto a uno solo:
   l'articolo arriva quasi a filo schermo, il pannello scende a 0.8rem, la
   citazione stringe il rientro. Il risultato misurato e' ~340px su 390 (87%),
   senza che i pannelli perdano il bordo che li distingue.
   =========================================================================== */

@media (max-width: 575.98px) {
  .consulto-gratis-result {
    width: calc(100% - 0.5rem);
    padding: 0.9rem 0.7rem 1rem;
    border-radius: 16px;
  }

  .consulto-gratis-result__head {
    padding: 0.3rem 0 0.75rem;
  }

  .consulto-gratis-result__panel {
    margin-top: 0.7rem;
    padding: 0.8rem 0.7rem;
    border-radius: 14px;
  }

  .consulto-gratis-result__question-body {
    padding-left: 0.7rem;
  }

  .consulto-gratis-result__question-body,
  .consulto-gratis-result__answer {
    line-height: 1.68;
  }

  /* Il contenitore della pagina non deve aggiungere il suo, sopra a questi. */
  #listgratis {
    padding-left: 0.35rem;
    padding-right: 0.35rem;
  }
}


/* ===========================================================================
   APPRO.LINK.1 (2026-09-06) — «Approfondisci questo consulto con X».

   Era `<a class="btn btn-light d-block text-center">`. In tema scuro il fondo
   bianco di Bootstrap resta bianco, mentre il testo eredita il chiaro della
   pagina: **1.70:1**, cioe' non si legge. Ed era un blocco alto e centrato che
   su telefono mangiava una fascia di schermo per dire una riga.

   Ora e' una barra propria: etichetta piccola, nome del cartomante in evidenza,
   freccia a destra che dice dove porta. Colori da token, ridefiniti per tema.
   =========================================================================== */

.cgr-appro {
  --appro-bg: linear-gradient(135deg, rgba(78, 39, 134, 0.06) 0%, rgba(251, 191, 36, 0.12) 100%);
  --appro-border: rgba(180, 83, 9, 0.28);
  --appro-label: rgba(46, 29, 78, 0.78);
  --appro-name: #4e2786;
  --appro-arrow: #b45309;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: min(880px, calc(100% - 1rem));
  margin: 0.35rem auto 0.9rem;
  padding: 0.7rem 0.9rem;
  background: var(--appro-bg);
  border: 1px solid var(--appro-border);
  border-radius: 14px;
  text-decoration: none;
  transition: transform var(--alu-dur-fast, 200ms) var(--alu-ease-out, ease-out),
              border-color var(--alu-dur-fast, 200ms) var(--alu-ease-out, ease-out);
}

.cgr-appro:hover,
.cgr-appro:focus-visible {
  transform: translateY(-2px);
  border-color: var(--appro-arrow);
}

.cgr-appro .cgr-appro__label {
  color: var(--appro-label);
  font-size: 0.82rem;
  line-height: 1.3;
}

.cgr-appro .cgr-appro__name {
  color: var(--appro-name);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  margin-inline-start: auto;
  white-space: nowrap;
}

.cgr-appro .cgr-appro__arrow {
  color: var(--appro-arrow);
  font-weight: 800;
  flex: 0 0 auto;
  transition: transform var(--alu-dur-fast, 200ms) var(--alu-ease-out, ease-out);
}

.cgr-appro:hover .cgr-appro__arrow,
.cgr-appro:focus-visible .cgr-appro .cgr-appro__arrow {
  transform: translateX(4px);
}

html:is(.theme-dark, [data-bs-theme='dark']) .cgr-appro {
  --appro-bg: linear-gradient(135deg, rgba(253, 230, 138, 0.08) 0%, rgba(78, 39, 134, 0.32) 100%);
  --appro-border: rgba(253, 230, 138, 0.3);
  --appro-label: rgba(245, 243, 255, 0.86);
  --appro-name: #fde68a;
  --appro-arrow: #fbbf24;
}

/* Su telefono l'etichetta va a capo prima del nome, invece di stringersi in una
   colonna di due parole per riga. */
/* NOTA sulla specificita': i colori dei tre pezzi vanno scritti con DUE classi
   (`.cgr-appro .cgr-appro__name`). In tema scuro esiste
   `html:is(.theme-dark,...) body * { color: inherit }`, che con una classe sola
   vince e fa ereditare a tutti il lilla del link: il nome del cartomante non
   diventava mai dorato. Due classi superano quel selettore. */
@media (max-width: 420px) {
  .cgr-appro {
    flex-wrap: wrap;
    width: calc(100% - 0.5rem);
    padding: 0.65rem 0.75rem;
  }

  .cgr-appro .cgr-appro__label {
    flex: 1 1 100%;
    font-size: 0.78rem;
  }

  .cgr-appro .cgr-appro__name {
    margin-inline-start: 0;
  }

  .cgr-appro .cgr-appro__arrow {
    margin-inline-start: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cgr-appro,
  .cgr-appro__arrow,
  .cgr-like-hint,
  .consulto-gratis-result__author:is([data-like-hint]) .heart-icon {
    transition: none;
    animation: none;
  }
}


/* Da 576px c'e' spazio per la riga unica: avatar, nome, fumetto, cuore. */
@media (min-width: 576px) {
  .consulto-gratis-result__author {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas: "link link hint cuore";
  }

  .cgr-like-hint::before,
  .cgr-like-hint::after {
    right: auto;
    bottom: auto;
    left: 100%;
    top: 50%;
    border-inline: 0;
    border-block: 6px solid transparent;
  }

  .cgr-like-hint::before {
    border-bottom: 0;
    border-left: 7px solid var(--cgr-hint-border);
    transform: translateY(-50%);
  }

  .cgr-like-hint::after {
    border-bottom: 0;
    border-left: 6px solid var(--cgr-hint-bg);
    transform: translate(-1px, -50%);
  }
}


/* ===========================================================================
   CGR.EXTRA.1 (2026-09-06) — compattazione su telefono di cio' che segue
   l'articolo: il link al profilo e le card d'acquisto.

   Misurato a 390px: le tre card occupavano oltre 1000px in verticale, con due
   pulsanti a piena larghezza impilati ciascuna («Aggiungi al Carrello» e
   «Acquista Ora») piu' un terzo pulsante informativo. Su telefono significava
   tre schermate per tre prodotti che si distinguono per una parola.

   Qui si tocca SOLO la disposizione, e solo dentro `.cgr-extra`: i due pulsanti
   d'azione stanno su una riga sola, i margini scendono, il titolo si accorcia.
   Colori e comportamento del componente d'acquisto restano quelli che sono
   altrove, perche' vive anche su altre pagine.
   =========================================================================== */

@media (max-width: 575.98px) {
  .cgr-extra .card {
    margin-bottom: 0.6rem;
  }

  .cgr-extra .card-body {
    padding: 0.7rem 0.65rem;
  }

  .cgr-extra .card-title {
    font-size: 1rem !important;
    line-height: 1.25;
    margin-bottom: 0.45rem;
  }

  /* I due pulsanti d'azione affiancati: sono la stessa decisione presa in due
     modi, e in colonna occupavano il doppio dello spazio senza aggiungere
     chiarezza. `.buy-actions` non ha un contenitore per le sole azioni: prezzo,
     pulsanti e nota sono fratelli, quindi la riga si costruisce qui con una
     griglia a due colonne e le posizioni assegnate esplicitamente. */
  .cgr-extra .buy-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
    align-items: center;
  }

  .cgr-extra .buy-actions__price,
  .cgr-extra .buy-actions__cart-hint {
    grid-column: 1 / -1;
  }

  .cgr-extra .buy-actions > .btn {
    width: 100% !important;
    margin: 0 !important;
    font-size: 0.86rem;
    padding-inline: 0.4rem;
  }

  .cgr-extra .buy-actions__cart-hint {
    font-size: 0.72rem;
    margin: 0.4rem 0 0.3rem;
  }

  .cgr-extra .badge.fs-6 {
    font-size: 0.8rem !important;
  }
}

/* Source: base.css */
:root,
html[data-bs-theme],
html.theme-light,
html.theme-dark,
body[data-bs-theme],
body.theme-light,
body.theme-dark {
    /* Keep the Assistant font active regardless of the selected theme.
       I selettori body[...] servono perche' autodarklightmode.js imposta
       data-bs-theme ANCHE sul body: in light il blocco Bootstrap
       :root,[data-bs-theme=light] ridefinisce --bs-font-sans-serif
       (system-ui per primo) a livello body, vincendo per prossimita'
       sulla definizione html e cambiando i font solo in light.
       Specificita' (0,1,1) > Bootstrap (0,1,0) sullo stesso elemento. */
    --bs-font-sans-serif: "Assistant", sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
    --consulto-free-panel-bg: rgba(255, 255, 255, 0.92);
    --consulto-free-panel-border: rgba(3, 79, 0, 0.18);
    --consulto-free-panel-text: #06361f;
    --consulto-free-note-bg: rgba(234, 255, 241, 0.9);
    --consulto-free-note-border: rgba(3, 79, 0, 0.24);
    --consulto-free-toggle-bg: rgba(228, 250, 238, 0.95);
    --consulto-free-toggle-border: rgba(3, 79, 0, 0.22);
    --consulto-free-toggle-text: #06361f;
    --consulto-free-toggle-hover-bg: rgba(214, 242, 228, 0.98);
    --consulto-free-cta-bg: linear-gradient(135deg, rgba(124, 230, 190, 0.94), rgba(121, 177, 239, 0.88));
    --consulto-free-cta-text: #032212;
    --consulto-free-cta-shadow: 0 18px 34px rgba(70, 134, 150, 0.2);
    --consulto-free-fieldset-bg: rgba(236, 255, 242, 0.85);
    --consulto-free-fieldset-border: rgba(3, 79, 0, 0.18);
    --consulto-free-input-bg: rgba(242, 255, 247, 0.95);
    --consulto-free-input-border: rgba(3, 79, 0, 0.25);
    --consulto-free-input-text: #053e23;
    --consulto-free-focus-shadow: rgba(103, 201, 167, 0.25);
    --consulto-free-hint-bg: rgba(255, 255, 255, 0.92);
    --consulto-free-hint-border: rgba(3, 79, 0, 0.15);
    --consulto-free-hint-text: #3c4540;
    --consulto-free-disclaimer-bg: rgba(244, 255, 250, 0.92);
    --consulto-free-disclaimer-border: rgba(3, 79, 0, 0.16);
    --consulto-free-disclaimer-text: #053321;
    --consulto-free-icon: #0a5c33;
    --text-on-gold: #2a1b4a;
    }
body, .text-sans-serif {
    font-family: var(--bs-font-sans-serif)
    }
pre, code, kbd, samp {
    font-family: "Assistant", monospace
    }
* {
    box-sizing: border-box
    }
html {
    font-family: var(--bs-font-sans-serif);
    overflow-x: hidden;
    overflow-x: clip;
    }
img {
    opacity: 1;
    transition: opacity 0.3s
    }
img[data-src] {
    opacity: 0
    }
body, h2 {
    margin: 0
    }
body {
    overflow-x: hidden;
    overflow-x: clip;
    word-wrap: break-word;
    color: rgba(0, 0, 0, 1);
    top: 0;
    font-style: normal;
    font-weight: 400;
    padding-bottom: 100px;
    min-height: 100vh;
    /* FEA.LIGHT.1 (design-system §3.0/§3.2): canvas adattivo. Il vecchio
       gradient periwinkle medio-saturo rendeva scuro anche il tema light.
       --alu-page-bg: light = lavanda quasi-bianca, dark = navy (coppia in
       tokens.css; lo scope dark di dark.css usa lo stesso token). */
    background: var(--alu-page-bg);
    background-color: #efedfa;
    }
hr {
    line-height: 2px;
    position: relative;
    outline: 0;
    border: 0;
    color: black;
    text-align: center;
    height: 2px;
    opacity: 0.5
    }
hr:before {
    content: "";
    background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(#818078), to(transparent));
    background: linear-gradient(to right, transparent, #818078, transparent);
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px
    }
hr:after {
    content: attr(data-content);
    position: relative;
    display: inline-block;
    color: black;
    padding: 0 0.5em;
    line-height: 1em;
    color: #818078;
    background-color: #fcfcfa
    }
/* ul.pagination li a {
    color: #000;
    text-decoration: none
    }
ul.pagination {
    padding: 0;
    margin: 0 auto
    }
ul.pagination li {
    margin-left: 0;
    margin-right: 0
    }
ul.pagination li a {
    float: left;
    padding-top: 6px;
    padding-right: 8px;
    padding-left: 8px;
    padding-bottom: 6px;
    transition: all 0.3s ease-in-out;
    background-color: white;
    background-image: linear-gradient(130deg, rgba(255, 255, 255, 0.93) 83.19%, rgba(151, 132, 255, 0.66));
    box-shadow: 0 1px 3px hsla(0, 0%, 0%, 0.61);
    text-align: center;
    border-radius: 4px
    }
ul.pagination li a.active {
    background-color: white;
    background-image: linear-gradient(rgba(255, 227, 10, 0.85) 44.54%, rgba(255, 255, 255, 0.81));
    text-decoration: none;
    color: #00f;
    transition: all 0.3s ease-in-out
    }
ul.pagination li a:hover:not(.active) {
    background-color: hsla(55, 74%, 87%, 0.71);
    background-image: linear-gradient(180deg, rgba(233, 229, 185, 0.71) 0%, rgba(246, 242, 197, 0.7) 100%);
    text-decoration: none;
    transition: all 0.3s ease-in-out;
    -webkit-box-shadow: 0 6px 5px hsla(0, 0%, 0%, 0.61);
    box-shadow: 0 6px 5px hsla(0, 0%, 0%, 0.61)
    } */
div.miniatura {
    /* overflow: hidden; */
    min-width: 80px;
    min-height: 60px;
    margin: 4px;
    display: inline-block;
    padding: 4px 6px;
    text-decoration: none;
    background-color: hsla(231.3, 0%, 100%, 0.75);
    border-radius: 8px;
    transition: transform 0.2s;
    transform: scale(1)
    }
div.miniatura img, div.miniatura p {
    /* margin: auto;
    display: block;
    text-decoration: none */
    }
div.miniatura img {
    /* max-height: 90px;
    border-radius: 100%;
    margin-bottom: 2px */
    }
div.miniatura p {
    /* font-size: 16px;
    font-weight: 700;
    padding: 0;
    margin-bottom: 2px;
    color: #222 */
    }
div.miniatura .zodiac {
    font-size: 0.9rem;
    margin-bottom: 2px
    }
div.miniatura .small-like .like-button {
    transform: scale(1.02);
    transform-origin: center
    }
div.miniatura .onlinepill {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none
    }
[role=dialog] {
    z-index: 1055 !important
    }
fieldset {
    padding-left: 10px;
    padding-right: 10px;
    background-color: hsla(0, 0%, 100%, 0.6);
    border: 1px solid hsla(0, 0%, 0%, 0.68);
    border-radius: 4px;
    min-width: 200px;
    margin: 3px 4px;
    padding: revert
    }
legend {
    margin-right: auto;
    background-color: hsla(0, 0%, 100%, 1);
    font-size: 10px;
    border: 1px solid hsla(0, 0%, 0%, 0.52);
    border-radius: 8px;
    padding: 3px 6px;
    float: none;
    width: fit-content
    }
select.color {
    text-align: center !important;
    -webkit-appearance: button;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    -webkit-padding-end: 20px;
    -webkit-padding-start: 2px;
    -webkit-user-select: none;
    background-position: 97% center;
    border: 0.5px solid rgba(0, 0, 0, 0.38);
    font-size: inherit;
    overflow: hidden;
    padding: 3px 8px 3px 8px;
    width: 95%;
    max-width: 300px;
    color: #020202;
    background-color: #fff;
    /* -webkit-border-radius: 20px; */
    /* -moz-border-radius: 20px; */
    /* border-radius: 20px; */
    background-image: url(/immagini/select-arrow.png), linear-gradient(to top, rgba(228, 225, 210, 1), rgba(255, 255, 255, 1))
    }
a.fb-msg-btn {
    display: inline-block;
    font-family: inherit;
    font-size: 14px;
    font-weight: bolder;
    color: #fff;
    text-align: center;
    padding: 12px 16px;
    margin: 5 0;
    background-color: #0084ff;
    border: 0;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    cursor: pointer;
    outline: none;
    text-decoration: none
    }
a:hover.fb-msg-btn {
    background-color: #0268c7
    }

/* Source: layout.css */
#spot, .coupon, .disclaimer, .mission, .report {
    border-collapse: collapse
    }

/* ============================================================
   Home hero intro - banner full-width compatto sopra il carousel
   (variante compact-v2, CTA singola "consulto via mail").
   Token globali --alu-* da css/sub/tokens.css (stesso bundle,
   caricato per primo). Stack mobile, row desktop. Design system
   §2 (token), §4 (breakpoint 720), §6.2 (arrow shift).
   ============================================================ */
.home-hero-intro {
    --hhi-bg: var(--alu-grad-hero);
    --hhi-text: var(--alu-text-on-dark);
    --hhi-muted: var(--alu-text-on-dark-soft);
    --hhi-gold: var(--alu-gold);
    --hhi-gold-soft: var(--alu-grad-gold-soft);
    margin: 0;
    padding: 0;
    color: var(--hhi-text);
    background: var(--hhi-bg);
    border-bottom: 1px solid var(--alu-gold-a22);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.04);
}
html:is(.theme-dark, [data-bs-theme='dark']) .home-hero-intro {
    --hhi-bg: linear-gradient(160deg, rgba(18, 11, 39, 0.98), rgba(39, 22, 76, 0.94));
    border-bottom-color: var(--alu-gold-a32);
}

/* dark.css broad `a { color: var(--alu-accent) }` specificity (0,1,2) beats the base
   .home-hero-intro__cta--primary rule (0,1,0) and turns the gold CTA text lavender.
   This rule restores the correct dark colour at specificity (0,2,1). */
html:is(.theme-dark, [data-bs-theme='dark']) .home-hero-intro__cta--primary,
html:is(.theme-dark, [data-bs-theme='dark']) .home-hero-intro__cta--primary:hover,
html:is(.theme-dark, [data-bs-theme='dark']) .home-hero-intro__cta--primary:focus-visible {
    color: var(--alu-text-on-gold);
}
.home-main {
    min-width: 0;
}
.home-hero-intro__inner {
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
    padding: var(--alu-space-3) var(--alu-space-4);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--alu-space-2);
    overflow: hidden;
}
/* Sparkle decorativo discreto, no rumore visivo */
.home-hero-intro__inner::before {
    content: "";
    position: absolute;
    top: -40%;
    right: -10%;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, var(--alu-gold-a22), transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.home-hero-intro__inner > * { position: relative; z-index: 1; }
.home-hero-intro__copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--alu-space-1);
    min-width: 0;
}
.home-hero-intro__kicker {
    display: inline-block;
    font-size: 0.66rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--alu-gold-soft);
    background: var(--alu-gold-a18);
    border: 1px solid var(--alu-gold-a45);
    border-radius: var(--alu-radius-pill);
    padding: 0.18rem 0.65rem;
}
.home-hero-intro__kicker::before {
    content: "✦ ";
    color: var(--hhi-gold);
    margin-right: 0.15em;
}
.home-hero-intro__title {
    margin: 0;
    font-size: clamp(1.05rem, 3.4vw, 1.5rem);
    font-weight: 800;
    line-height: 1.2;
    color: var(--hhi-text);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
    text-wrap: balance;
}
.home-hero-intro__title strong {
    background: var(--hhi-gold-soft);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 800;
}
.home-hero-intro__lead {
    margin: 0;
    max-width: 720px;
    font-size: clamp(0.82rem, 2.2vw, 0.95rem);
    line-height: 1.4;
    color: var(--hhi-muted);
}
.home-hero-intro__lead strong { color: var(--hhi-text); font-weight: 600; }
.home-hero-intro__ctas {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 360px;
    margin-top: 0.1rem;
}
.home-hero-intro__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    min-height: 44px;
    padding: 0.5rem 1.2rem;
    border-radius: var(--alu-radius-md);
    font-weight: 700;
    font-size: 0.92rem;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background-color var(--alu-dur-fast) var(--alu-ease), color var(--alu-dur-fast) var(--alu-ease), transform 0.15s var(--alu-ease), box-shadow var(--alu-dur-fast) var(--alu-ease);
}
.home-hero-intro__cta:hover,
.home-hero-intro__cta:focus-visible {
    transform: translateY(-1px);
    text-decoration: none;
}
.home-hero-intro__cta:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px var(--alu-gold-a45);
}
.home-hero-intro__cta--primary {
    background: var(--hhi-gold-soft);
    color: var(--alu-text-on-gold);
    border-color: var(--alu-gold-a45);
    box-shadow: var(--alu-glow-gold-soft);
}
.home-hero-intro__cta--primary:hover,
.home-hero-intro__cta--primary:focus-visible {
    color: var(--alu-text-on-gold);
    box-shadow: var(--alu-glow-gold-strong);
}
.home-hero-intro__cta-arrow {
    transition: transform var(--alu-dur-fast) var(--alu-ease);
}
.home-hero-intro__cta:hover .home-hero-intro__cta-arrow,
.home-hero-intro__cta:focus-visible .home-hero-intro__cta-arrow {
    transform: translateX(3px);
}

/* Desktop: layout in una sola riga, testo a sinistra + CTA a destra */
@media (min-width: 720px) {
    .home-hero-intro__inner {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
        gap: var(--alu-space-5);
        padding: var(--alu-space-3) var(--alu-space-6);
    }
    .home-hero-intro__copy {
        flex: 1 1 auto;
        align-items: flex-start;
        text-align: left;
    }
    .home-hero-intro__lead { margin: 0; }
    .home-hero-intro__ctas {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
        margin-top: 0;
    }
    .home-hero-intro__cta { width: auto; flex: 0 0 auto; min-height: 48px; padding: 0.55rem 1.3rem; }
}
@media (prefers-reduced-motion: reduce) {
    .home-hero-intro__cta,
    .home-hero-intro__cta-arrow { transition: none; }
    .home-hero-intro__cta:hover { transform: none; }
    .home-hero-intro__cta:hover .home-hero-intro__cta-arrow { transform: none; }
}

.home-buybtns { margin: 0.5rem auto; }

/* ============================================================
   Banner titolo di pagina (.alu-pagehead) — FONTE UNICA, emesso
   esclusivamente da HtmlElement::stdHeader() su tutte le pagine.
   Non confondere con lo slideshow home .alu-hero.
   ============================================================ */
.alu-pagehead {
    --alu-pagehead-image: none;
    --alu-pagehead-position: center;
    --alu-pagehead-radius: clamp(1rem, 3.6vw, 1.75rem);
    --alu-pagehead-bg: linear-gradient(145deg, #19113d 0%, #3b1768 48%, #723b85 100%);
    --alu-pagehead-surface: rgba(255, 252, 255, 0.72);
    --alu-pagehead-surface-border: rgba(255, 255, 255, 0.56);
    --alu-pagehead-title: #271149;
    --alu-pagehead-text: #50455e;
    --alu-pagehead-muted: #665875;
    --alu-pagehead-accent: var(--alu-purple-deep, #6c25a4);
    --alu-pagehead-accent-strong: #50177f;
    --alu-pagehead-gold: var(--alu-gold, #fbbf24);
    position: relative;
    isolation: isolate;
    width: 100%;
    margin: 0 0 clamp(0.9rem, 2.6vw, 1.4rem);
    overflow: hidden;
    border-radius: var(--alu-pagehead-radius);
    background: var(--alu-pagehead-bg);
    box-shadow: 0 1rem 2.5rem rgba(33, 16, 65, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.alu-pagehead::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -3;
    background-image:
        linear-gradient(180deg, rgba(12, 8, 40, 0.08) 0%, rgba(18, 10, 47, 0.18) 58%, rgba(245, 243, 250, 0.88) 100%),
        radial-gradient(circle at 50% 42%, rgba(255, 243, 255, 0.28) 0%, rgba(108, 42, 145, 0.08) 38%, rgba(15, 8, 42, 0.44) 100%),
        var(--alu-pagehead-image),
        var(--alu-pagehead-bg);
    background-size: cover;
    background-position: var(--alu-pagehead-position);
    background-repeat: no-repeat;
    transform: scale(1.015);
}

.alu-pagehead::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(circle at 15% 24%, rgba(255, 220, 255, 0.32), transparent 24%),
        radial-gradient(circle at 84% 12%, rgba(250, 195, 101, 0.17), transparent 26%),
        linear-gradient(90deg, rgba(21, 13, 58, 0.18), transparent 48%, rgba(32, 17, 67, 0.12));
}

.alu-pagehead__scene {
    position: relative;
    display: grid;
    align-items: center;
    min-height: 21rem;
    padding: clamp(0.95rem, 4vw, 2rem) clamp(0.75rem, 3vw, 2rem);
}

.alu-pagehead__glow {
    position: absolute;
    inset: 12% 5%;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(circle at 50% 50%, rgba(255, 250, 255, 0.62), rgba(255, 245, 255, 0.18) 36%, transparent 70%);
    filter: blur(1.5rem);
    opacity: 0.9;
}

.alu-pagehead__inner {
    position: relative;
    width: min(100%, 38rem);
    margin-inline: auto;
    padding: clamp(1.25rem, 5vw, 2.35rem) clamp(1.05rem, 5vw, 2.6rem);
    text-align: center;
    color: var(--alu-pagehead-text);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(255, 248, 255, 0.62));
    border: 1px solid var(--alu-pagehead-surface-border);
    border-radius: clamp(1rem, 3.8vw, 1.75rem);
    box-shadow: 0 1.25rem 3rem rgba(24, 10, 56, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.82), inset 0 0 2.25rem rgba(255, 255, 255, 0.28);
    -webkit-backdrop-filter: blur(10px) saturate(115%);
    backdrop-filter: blur(10px) saturate(115%);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .alu-pagehead__inner { background: rgba(250, 246, 252, 0.92); }
}

.alu-pagehead__media {
    display: grid;
    place-items: center;
    width: clamp(3rem, 12vw, 4.5rem);
    aspect-ratio: 1;
    margin: 0 auto 0.75rem;
    border-radius: 50%;
    color: var(--alu-pagehead-accent);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(235, 212, 251, 0.72));
    box-shadow: 0 0.75rem 1.75rem rgba(83, 27, 118, 0.16), inset 0 0 0 1px rgba(117, 48, 159, 0.16);
}

.alu-pagehead__media svg {
    width: 54%;
    height: 54%;
}

.alu-pagehead__kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    max-width: 100%;
    margin: 0 auto 0.85rem;
    padding: 0.48rem 0.9rem;
    color: #4f365e;
    background: rgba(255, 248, 228, 0.56);
    border: 1px solid rgba(210, 164, 64, 0.45);
    border-radius: 999px;
    font-size: clamp(0.7rem, 2.7vw, 0.88rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.alu-pagehead__kicker::before {
    content: "✦";
    color: #d59c20;
    font-size: 1.05em;
}

.alu-pagehead__title {
    max-width: 16ch;
    margin: 0 auto;
    color: var(--alu-pagehead-title);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.2rem, 10.5vw, 4.9rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    text-wrap: balance;
    text-shadow: 0 2px 12px rgba(255, 255, 255, 0.56);
}

.alu-pagehead__subtitle,
.alu-pagehead__extra {
    max-width: 39rem;
    margin: clamp(0.85rem, 3vw, 1.25rem) auto 0;
    color: var(--alu-pagehead-text);
    font-size: clamp(1rem, 3.8vw, 1.22rem);
    line-height: 1.5;
    text-wrap: pretty;
}

.alu-pagehead__extra > :first-child { margin-top: 0; }
.alu-pagehead__extra > :last-child { margin-bottom: 0; }
.alu-pagehead__extra :is(h1,h2,h3,h4,h5,h6,p) { color: inherit; }

.alu-pagehead__extra a,
.alu-pagehead__subtitle a {
    color: var(--alu-pagehead-accent);
    font-weight: 700;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
}

.alu-pagehead__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    min-height: 3.25rem;
    max-width: 100%;
    margin-top: clamp(1.1rem, 4vw, 1.55rem);
    padding: 0.8rem 1.35rem;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, var(--alu-pagehead-accent), var(--alu-pagehead-accent-strong));
    box-shadow: 0 0.75rem 1.5rem rgba(78, 23, 119, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.24);
    font-size: clamp(0.95rem, 3.7vw, 1.1rem);
    font-weight: 750;
    line-height: 1.2;
    text-decoration: none;
    transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.alu-pagehead__cta:hover {
    color: #fff;
    filter: brightness(1.06);
    transform: translateY(-2px);
    box-shadow: 0 1rem 2rem rgba(78, 23, 119, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.alu-pagehead__cta:active { transform: translateY(0); }
.alu-pagehead__cta:focus-visible { outline: 3px solid rgba(255, 220, 92, 0.92); outline-offset: 4px; }
.alu-pagehead__cta-arrow { transition: transform 160ms ease; }
.alu-pagehead__cta:hover .alu-pagehead__cta-arrow { transform: translateX(0.2rem); }

.alu-pagehead--align-left .alu-pagehead__inner {
    margin-left: 0;
    text-align: left;
}

.alu-pagehead--align-left .alu-pagehead__title,
.alu-pagehead--align-left .alu-pagehead__subtitle,
.alu-pagehead--align-left .alu-pagehead__extra { margin-left: 0; }

.alu-pagehead--align-right .alu-pagehead__inner {
    margin-right: 0;
    text-align: right;
}

.alu-pagehead--align-right .alu-pagehead__title,
.alu-pagehead--align-right .alu-pagehead__subtitle,
.alu-pagehead--align-right .alu-pagehead__extra { margin-right: 0; }

.alu-pagehead--compact .alu-pagehead__scene { min-height: 16rem; }
.alu-pagehead--large .alu-pagehead__scene { min-height: min(40rem, 82vh); }

.alu-pagehead--overlay-light {
    --alu-pagehead-title: #271149;
    --alu-pagehead-text: #50455e;
    --alu-pagehead-surface-border: rgba(255, 255, 255, 0.56);
}

.alu-pagehead--overlay-dark,
html:is(.theme-dark, [data-bs-theme='dark']) .alu-pagehead {
    --alu-pagehead-surface: rgba(24, 17, 47, 0.66);
    --alu-pagehead-surface-border: rgba(255, 255, 255, 0.16);
    --alu-pagehead-title: #fffaff;
    --alu-pagehead-text: #e9e0f0;
    --alu-pagehead-muted: #c9bdd4;
    --alu-pagehead-accent: #cf8cff;
    --alu-pagehead-accent-strong: #7330a8;
}

.alu-pagehead--overlay-dark::before,
html:is(.theme-dark, [data-bs-theme='dark']) .alu-pagehead::before {
    background-image:
        linear-gradient(180deg, rgba(5, 3, 20, 0.1) 0%, rgba(7, 4, 24, 0.26) 58%, rgba(10, 8, 20, 0.94) 100%),
        radial-gradient(circle at 50% 42%, rgba(242, 199, 255, 0.15) 0%, rgba(90, 28, 126, 0.08) 40%, rgba(4, 2, 14, 0.6) 100%),
        var(--alu-pagehead-image),
        var(--alu-pagehead-bg);
}

.alu-pagehead--overlay-dark .alu-pagehead__inner,
html:is(.theme-dark, [data-bs-theme='dark']) .alu-pagehead .alu-pagehead__inner {
    background: linear-gradient(145deg, rgba(30, 21, 54, 0.72), rgba(18, 13, 36, 0.6));
    box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 0 2rem rgba(194, 127, 239, 0.06);
}

.alu-pagehead--overlay-dark .alu-pagehead__kicker,
html:is(.theme-dark, [data-bs-theme='dark']) .alu-pagehead .alu-pagehead__kicker {
    color: #f2e7fa;
    background: rgba(50, 29, 69, 0.62);
    border-color: rgba(238, 190, 84, 0.44);
}

.alu-pagehead--overlay-dark .alu-pagehead__title,
html:is(.theme-dark, [data-bs-theme='dark']) .alu-pagehead .alu-pagehead__title {
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.48);
}

.alu-pagehead--overlay-dark .alu-pagehead__glow,
html:is(.theme-dark, [data-bs-theme='dark']) .alu-pagehead .alu-pagehead__glow {
    background: radial-gradient(circle at 50% 50%, rgba(212, 140, 255, 0.2), rgba(84, 38, 116, 0.1) 38%, transparent 72%);
}

.alu-pagehead--overlay-light .alu-pagehead__inner,
html:is(.theme-light, [data-bs-theme='light']) .alu-pagehead .alu-pagehead__inner {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(255, 248, 255, 0.62));
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .alu-pagehead--overlay-dark .alu-pagehead__inner,
    html:is(.theme-dark, [data-bs-theme='dark']) .alu-pagehead .alu-pagehead__inner { background: rgba(25, 18, 46, 0.94); }
}

@media (max-width: 47.98rem) {
    .alu-pagehead {
        --alu-pagehead-radius: 0;
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }

    .alu-pagehead__scene,
    .alu-pagehead.alu-pagehead--compact .alu-pagehead__scene,
    .alu-pagehead.alu-pagehead--standard .alu-pagehead__scene,
    .alu-pagehead.alu-pagehead--large .alu-pagehead__scene {
        min-height: 0;
        padding: 0.56rem 0.68rem;
    }

    .alu-pagehead__glow {
        inset: 15% 7%;
        filter: blur(0.85rem);
        opacity: 0.72;
    }

    .alu-pagehead__inner {
        padding: 0.72rem 0.82rem 0.78rem;
        border-radius: 1rem;
    }

    .alu-pagehead__kicker {
        margin-bottom: 0.42rem;
        padding: 0.24rem 0.58rem;
        font-size: clamp(0.58rem, 2.25vw, 0.66rem);
        line-height: 1.14;
    }

    .alu-pagehead__title {
        font-size: clamp(1.72rem, 7.2vw, 2.34rem);
        line-height: 1.04;
    }

    .alu-pagehead__subtitle,
    .alu-pagehead__extra {
        margin-top: 0.5rem;
        font-size: clamp(0.82rem, 2.95vw, 0.92rem);
        line-height: 1.28;
    }

    .alu-pagehead__extra :is(p, div) {
        margin-block: 0.34rem 0;
        font-size: inherit;
        line-height: inherit;
    }

    .alu-pagehead__title .fs-3 {
        display: inline-block;
        font-size: 0.62em !important;
        line-height: 1.1;
    }
}

/* Su desktop l'altezza fissa (26rem via il blocco min-width:48rem sotto,
   applicata di base a TUTTE le varianti) rendeva il banner titolo molto
   piu' ingombrante della fascia testata+menu (~120px) - segnalato
   dall'utente 2026-08-05 su /servizi/, poi ulteriormente ridotto (altezza
   ~2/3, font piu' piccoli, card interna >=70% del genitore) dopo un
   secondo giro di feedback sullo stesso giorno con screenshot reali di
   /store/, /coupon/, /account/. Selettori piu' specifici di quelli del
   blocco sotto (2 classi vs 1), quindi vincono a prescindere dall'ordine
   nel file. Solo compact/standard; --large resta intatta, riservata a
   hero con contenuto reale (kicker/sottotitolo/CTA/media) che giustifica
   piu' spazio verticale - nessun caller reale la usa oggi. */
@media (min-width: 48rem) {
    .alu-pagehead.alu-pagehead--compact .alu-pagehead__scene,
    .alu-pagehead.alu-pagehead--standard .alu-pagehead__scene {
        min-height: 5rem;
        padding: 0.65rem 0;
    }

    .alu-pagehead.alu-pagehead--compact .alu-pagehead__inner,
    .alu-pagehead.alu-pagehead--standard .alu-pagehead__inner {
        width: 70%;
        padding: 0.65rem 1.4rem;
    }

    .alu-pagehead.alu-pagehead--compact .alu-pagehead__title,
    .alu-pagehead.alu-pagehead--standard .alu-pagehead__title {
        font-size: clamp(1.3rem, 1.8vw, 1.8rem);
    }

    .alu-pagehead.alu-pagehead--compact .alu-pagehead__kicker,
    .alu-pagehead.alu-pagehead--standard .alu-pagehead__kicker {
        margin-bottom: 0.4rem;
        padding: 0.3rem 0.7rem;
        font-size: 0.72rem;
    }

    .alu-pagehead.alu-pagehead--compact .alu-pagehead__subtitle,
    .alu-pagehead.alu-pagehead--compact .alu-pagehead__extra,
    .alu-pagehead.alu-pagehead--standard .alu-pagehead__subtitle,
    .alu-pagehead.alu-pagehead--standard .alu-pagehead__extra {
        margin-top: 0.4rem;
        font-size: 0.92rem;
    }
}

@media (min-width: 48rem) {
    .alu-pagehead {
        width: min(calc(100% - 2rem), 1440px);
        margin-inline: auto;
    }
    .alu-pagehead__scene {
        min-height: 26rem;
        padding: clamp(2rem, 5vw, 4.25rem);
    }
    .alu-pagehead__inner { width: min(58%, 38rem); }
    .alu-pagehead--align-left .alu-pagehead__inner { margin-right: auto; }
    .alu-pagehead--align-right .alu-pagehead__inner { margin-left: auto; }
    .alu-pagehead--large .alu-pagehead__scene { min-height: min(44rem, 76vh); }
}

@media (min-width: 75rem) {
    .alu-pagehead__inner { padding: 2.45rem 2.85rem; }
}

@media (prefers-reduced-motion: reduce) {
    .alu-pagehead__cta,
    .alu-pagehead__cta-arrow { transition: none; }
    .alu-pagehead__cta:hover { transform: none; }
}

.stdheader {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat
    }
.stdheader__overlay {
    background-color: var(--stdheader-overlay, rgba(0, 0, 0, 0.4));
    color: var(--stdheader-text-color, #fff);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px)
    }
.stdheader--light {
    --stdheader-overlay: rgba(255, 255, 255, 0.45);
    --stdheader-text-color: #111
    }
.stdheader--dark {
    --stdheader-overlay: rgba(0, 0, 0, 0.45);
    --stdheader-text-color: #fff
    }
.stdheader--auto {
    --stdheader-overlay: rgba(255, 255, 255, 0.45);
    --stdheader-text-color: #111
    }
@media (prefers-color-scheme: dark) {
    .stdheader--light {
        --stdheader-overlay: rgba(0, 0, 0, 0.35)
        }
    .stdheader--dark {
        --stdheader-overlay: rgba(255, 255, 255, 0.2)
        }
    .stdheader--auto {
        --stdheader-overlay: rgba(0, 0, 0, 0.45);
        --stdheader-text-color: #fff
        }
    }
#LOGO, #NAVIGATOR, #TESTATA, .greybtn:active {
    position: relative
    }
#TESTATA {
    /*background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(79,79,79,1) 36%, rgba(71,71,71,1) 63%, rgba(0,0,0,1) 100%);*/
    background: linear-gradient(rgba(87, 86, 174, 0.82), rgba(59, 57, 156, 1) 47.48%);
    /* background: url('/immagini/mimosa.jpg') no-repeat center; background-size: cover; */
    min-width: 300px;
    -webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.53);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.53);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    top: 0;
    left: 0;
    z-index: 999;
    position: sticky;
    /*	transition: all .05s;
    	-webkit-transition: all .05s;*/
    opacity: 1;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px)
    }
#LOGOIMG {
    max-height: 105px;
    height: auto;
    position: absolute;
    top: 5px;
    right: 5px;
    background-image: url(/immagini/logoimg.png);
    background-position: left top;
    z-index: 0;
    left: 0;
    opacity: 1;
    /*	transition: all .05s;
    	-webkit-transition: all .05s ;*/
    }
#LOGO {
    /* background-image: url(/immagini/logo.png?1); */
    z-index: 1;
    visibility: visible;
    width: auto !important;
    margin: auto !important
    }
#LOGO, #LOGOIMG, #TESTATA, body {
    background-repeat: no-repeat
    }
#NAVIGATOR, #TESTATA, .columns {
    text-align: center;
    /*	transition: all .35s ease-in-out;
    	-webkit-transition: all .35s ease-in-out;*/
    }
#LOGO, #TESTATA {
    background-position: center center;
    width: 100%;
    min-height: 40px;
    max-height: 100px;
    height: 15vw;
    text-align: center;
    /*	transition: all .35s ease-in-out;
    	-webkit-transition: all .35s ease-in-out;*/
    }
#TESTATA a {
    text-align: center
    }
#TESTATA > * {
    height: 100%
    }
#LOGO, #LOGOIMG {
    background-size: contain;
    display: block;
    /*	transition: all .35s ease-in-out;
    	-webkit-transition: all .35s ease-in-out;*/
    }
#clockdiv, #clockdiv div > span, #clockdiv > div, .greybtn, .navbtn, ul.pagination, ul.pagination li {
    display: inline-block
    }
#LOGO, .greengradient {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box
    }
#spot, .center, .warning {
    display: block
    }
#NAVIGATOR {
    font-size: 14px;
    margin: 4px auto 0;
    z-index: 2
    }
#spot, .DESCRIZIONE {
    -webkit-overflow-scrolling: touch
    }
#PAGINAZIONE, .DESCRIZIONE {
    width: 99%
    }
#SUPPORT, #footer {
    margin-right: auto;
    margin-left: auto
    }
#PAGINAZIONE {
    text-align: center;
    font-weight: lighter;
    font-size: 14px;
    background-color: rgba(255, 255, 255, 0.42);
    padding-top: 10px;
    padding-bottom: 10px;
    margin: 5px auto
    }
#PAGINAZIONE ul {
    text-align: justify;
    padding-left: 25px;
    padding-right: 15px
    }
#SUPPORT, #footer, #spot, .DESCRIZIONE, .center, ul.pagination, ul.pagination li {
    text-align: center !important
    }
#footer {
    width: 100%
    }
#SUPPORT {
    background-color: rgba(202, 237, 152, 0.95);
    z-index: 999;
    color: rgba(0, 0, 0, 1);
    border: 1px solid rgba(66, 66, 66, 0.68);
    border-top-right-radius: 8px;
    border-top-left-radius: 8px
    }
#___gcse_0, .gsc-control-cse, .gsc-control-cse-it {
    width: auto !important;
    height: auto !important;
    top: auto !important;
    left: auto !important;
    bottom: auto !important;
    right: auto !important;
    border-style: none !important;
    background-color: rgba(0, 0, 0, 0) !important;
    margin: 0 !important;
    padding: 0 !important
    }
#spot {
    background-color: hsla(0, 0%, 100%, 0.45);
    -webkit-box-shadow: 2px 2px 2px 2px hsla(0, 0%, 0%, 0.53);
    box-shadow: 2px 2px 2px 2px hsla(0, 0%, 0%, 0.53);
    min-width: 300px;
    max-width: 600px;
    border-radius: 19px;
    width: 95%;
    background-image: -webkit-linear-gradient(270deg, rgba(255, 255, 100, 0.6) 0, rgba(255, 255, 100, 0.8) 100%);
    background-image: linear-gradient(180deg, rgba(255, 255, 100, 0.6) 0, rgba(255, 255, 100, 0.8) 100%);
    font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
    padding: 4px;
    margin-top: 4px;
    margin-bottom: 4px
    }
#infoandsearchbox .home-free-consults-card {
    position: relative;
    isolation: isolate;
    width: min(100%, 760px);
    margin: 0 auto var(--alu-space-4);
    padding: clamp(var(--alu-space-5), 5vw, var(--alu-space-8));
    overflow: hidden;
    border: 1px solid var(--alu-border);
    border-radius: var(--alu-radius-xl);
    background:
      radial-gradient(circle at 18% 18%, var(--alu-gold-a22), transparent 34%),
      radial-gradient(circle at 85% 10%, rgba(107, 58, 160, 0.16), transparent 30%),
      var(--alu-surface-section);
    color: var(--alu-text);
    box-shadow: var(--alu-card-shadow);
    }
#infoandsearchbox .home-free-consults-card::before {
    content: "";
    position: absolute;
    inset: 10px;
    z-index: -1;
    border: 1px solid var(--alu-gold-a22);
    border-radius: calc(var(--alu-radius-xl) - 4px);
    pointer-events: none;
    }
#infoandsearchbox .home-free-consults-card__eyebrow {
    margin: 0 0 var(--alu-space-3);
    color: var(--alu-text-muted);
    font-weight: 700;
    letter-spacing: 0.16em;
    }
#infoandsearchbox .home-free-consults-card__counter-wrap {
    display: inline-grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--alu-space-2);
    min-width: min(100%, 280px);
    margin: 0 auto var(--alu-space-4);
    padding: var(--alu-space-3) var(--alu-space-4);
    border: 1px solid var(--alu-border-strong);
    border-radius: var(--alu-radius-lg);
    background: var(--alu-surface-strong);
    color: var(--alu-accent-strong);
    box-shadow: var(--alu-shadow-2);
    }
#infoandsearchbox .home-free-consults-card__counter {
    display: inline-block;
    min-width: 3ch;
    font-size: clamp(2.4rem, 14vw, 4rem);
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
    }
#infoandsearchbox .home-free-consults-card__pointer {
    font-size: clamp(1.6rem, 7vw, 2.6rem);
    filter: drop-shadow(0 6px 14px rgba(251, 191, 36, 0.22));
    }
#infoandsearchbox .home-free-consults-card__title {
    margin: 0;
    color: var(--alu-text);
    font-size: clamp(1.45rem, 7vw, 2.55rem);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-shadow: none;
    }
@media (min-width: 720px) {
    #infoandsearchbox .home-free-consults-card {
        border-radius: calc(var(--alu-radius-xl) + 8px);
        }
    #infoandsearchbox .home-free-consults-card__counter-wrap {
        gap: var(--alu-space-5);
        min-width: 390px;
        border-radius: var(--alu-radius-xl);
        }
    }
@media (prefers-reduced-motion: reduce) {
    #infoandsearchbox .home-free-consults-card__pointer,
    #infoandsearchbox .home-free-consults-card__counter {
        transition: none;
        }
    }
#infoandsearchbox .cta-card {
    flex: 1 1 300px;
    padding: var(--alu-space-4);
    border: 1px solid var(--alu-border);
    background: var(--alu-grad-card-light);
    color: var(--alu-text);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: var(--alu-radius-lg);
    box-shadow: var(--alu-shadow-1);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
    }
#infoandsearchbox .cta-card:hover,
#infoandsearchbox .cta-card:focus-visible {
    transform: translateY(-2px);
    border-color: var(--alu-border-strong);
    box-shadow: var(--alu-card-shadow);
    outline: 0;
    }
#infoandsearchbox .cta-card:focus-visible {
    box-shadow: 0 0 0 3px var(--alu-gold-a45), var(--alu-card-shadow);
    }
#infoandsearchbox .cta-card.premium {
    border-color: var(--alu-gold-a45);
    background:
      radial-gradient(circle at 12% 10%, var(--alu-gold-a22), transparent 32%),
      var(--alu-surface-section);
    color: var(--alu-text);
    }
#infoandsearchbox .cta-card--private-mail {
    gap: var(--alu-space-3);
    min-height: auto;
    }
#infoandsearchbox .cta-card--private-mail__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--alu-space-3);
    }
#infoandsearchbox .cta-card--private-mail__icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 2.6rem;
    width: 2.6rem;
    height: 2.6rem;
    border: 1px solid var(--alu-gold-a32);
    border-radius: 999px;
    background: var(--alu-surface);
    box-shadow: var(--alu-shadow-1);
    font-size: 1.3rem;
    }
#infoandsearchbox .cta-card .cta-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.36rem 0.78rem;
    border-radius: 999px;
    background: var(--alu-gold-a18);
    border: 1px solid var(--alu-gold-a32);
    letter-spacing: 0.12em;
    color: var(--alu-text);
    box-shadow: none;
    }
#infoandsearchbox .cta-card .cta-title {
    font-weight: 700;
    line-height: 1.25;
    color: var(--alu-text);
    text-wrap: balance;
    }
#infoandsearchbox .cta-card .cta-lead {
    font-size: 0.98rem;
    line-height: 1.45;
    color: var(--alu-text-muted);
    }
#infoandsearchbox .cta-card .cta-benefits {
    margin: var(--alu-space-4) 0 0;
    padding: 0;
    list-style: none;
    }
#infoandsearchbox .cta-card .cta-benefits li {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    background: var(--alu-surface);
    border: 1px solid var(--alu-border);
    border-radius: var(--alu-radius-md);
    padding: 0.65rem 0.8rem;
    margin-bottom: 0.65rem;
    color: var(--alu-text);
    font-weight: 600;
    line-height: 1.35;
    box-shadow: var(--alu-shadow-1);
    }
#infoandsearchbox .cta-card .cta-benefits--compact {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--alu-space-2);
    margin-top: var(--alu-space-3);
    }
#infoandsearchbox .cta-card .cta-benefits--compact li {
    align-items: center;
    margin-bottom: 0;
    padding: 0.58rem 0.7rem;
    background: var(--alu-surface);
    border-color: var(--alu-gold-a22);
    box-shadow: none;
    }
#infoandsearchbox .cta-card .cta-benefits .emoji {
    flex: 0 0 auto;
    line-height: 1;
    }
@media (min-width: 480px) {
    #infoandsearchbox .cta-card .cta-benefits--compact {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    #infoandsearchbox .cta-card .cta-benefits--compact li {
        justify-content: center;
        text-align: center;
        }
    }
@media (min-width: 720px) {
    #infoandsearchbox .cta-card {
        border-radius: var(--alu-radius-xl);
        padding: var(--alu-space-5);
        }
    #infoandsearchbox .cta-card .cta-lead {
        min-height: 2.9em;
        }
    }
@media (prefers-reduced-motion: reduce) {
    #infoandsearchbox .cta-card {
        transition: none;
        }
    #infoandsearchbox .cta-card:hover,
    #infoandsearchbox .cta-card:focus-visible {
        transform: none;
        }
    }
/* ===========================================================================
   CBLOCK.STRIP.1 (2026-09-05) — striscia «Consulti in attesa di sblocco».
   Riscritta dopo averla guardata a 390px: le frecce ereditavano
   `position:absolute` da `.scroll-btn.left/.right` e finivano SOPRA il testo
   della scheda, il conto alla rovescia a quattro riquadri `flex-fill` sforava
   con i secondi tagliati dal bordo, e niente diceva che la striscia scorresse.
   Ora le frecce stanno nell'intestazione e solo dove c'e' un puntatore fine;
   su touch al loro posto c'e' la barra di posizione (.cbx-rail).
   =========================================================================== */

#consultibloccati.cbx {
    --cbx-gap: var(--alu-space-3);
    /* Inchiostro dorato per il TESTO. Non e' --alu-gold-deep: quell'oro e' nato
       per superfici e bordi, e come testo su fondo bianco da' 2.15:1 (i numeri
       del conto alla rovescia) e 1.95:1 sul chip in oro al 18%. Misurato, non
       stimato. Questo ambra piu' profondo resta della stessa famiglia e passa
       4.5:1 in entrambi i casi. In tema scuro torna l'oro chiaro, che su fondo
       viola scuro sta gia' sopra 9:1. */
    --cbx-ink-gold: #b45309;
}

#consultibloccati .cbx-shell {
    background: var(--alu-grad-card-light);
    border: 1px solid var(--alu-border);
    border-radius: var(--alu-radius-xl);
    box-shadow: var(--alu-shadow-2);
    padding: clamp(0.85rem, 3vw, 1.35rem);
}

#consultibloccati .cbx-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--alu-space-4);
    margin-bottom: var(--alu-space-4);
}

#consultibloccati .cbx-eyebrow {
    display: inline-block;
    background: var(--alu-grad-gold);
    color: var(--alu-text-on-gold);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.2rem 0.6rem;
    border-radius: var(--alu-radius-pill);
    box-shadow: var(--alu-glow-gold-soft);
}

#consultibloccati .cbx-h2 {
    margin: 0.4rem 0 0;
    font-size: clamp(1.05rem, 4.2vw, 1.4rem);
    font-weight: 800;
    line-height: 1.2;
    color: var(--alu-text);
    text-wrap: balance;
}

#consultibloccati .cbx-sub {
    margin: 0.3rem 0 0;
    max-width: 48ch;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--alu-text-muted);
}

/* Le frecce: nell'intestazione, mai sopra le schede, e solo per chi ha un
   puntatore fine. Su touch la striscia si scorre col dito e due cerchi da 54px
   toglierebbero solo spazio di lettura. */
#consultibloccati .cbx-nav {
    display: none;
    gap: var(--alu-space-2);
    flex: 0 0 auto;
}

#consultibloccati .cbx-nav .cbx-arrow {
    position: static;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    inset: auto;
    transform: none;
    font-size: 1.25rem;
    box-shadow: var(--alu-shadow-1);
}

#consultibloccati .cbx-nav .cbx-arrow:hover:not(:disabled) {
    transform: translateY(-2px);
}

#consultibloccati .cbx-nav .cbx-arrow:disabled,
#consultibloccati .cbx-nav .cbx-arrow[aria-disabled='true'] {
    opacity: 0.35;
    cursor: default;
}

@media (pointer: fine) and (min-width: 768px) {
    #consultibloccati .cbx-nav {
        display: flex;
    }
}

/* Niente da scorrere, niente comandi: con poche schede le frecce resterebbero
   li' a non fare nulla. La classe la mette il JS misurando la pista. */
#consultibloccati.is-static .cbx-nav,
#consultibloccati.is-static .cbx-rail {
    display: none;
}

/* --- pista e schede --------------------------------------------------- */

#consultibloccati .cbx-viewport {
    position: relative;
}

#consultibloccati .cbx-track {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--cbx-gap);
    margin: 0;
    padding: 2px 2px 0.5rem;
    list-style: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

#consultibloccati .cbx-track::-webkit-scrollbar {
    display: none;
}

/* 82vw lascia sbucare la scheda successiva: e' cio' che comunica «si scorre»
   senza bisogno di scriverlo. */
#consultibloccati .cbx-item {
    flex: 0 0 min(82vw, 300px);
    /* Senza `min-width: 0` la scheda non resta a 300px: un elemento flex non
       scende sotto la larghezza minima del proprio contenuto, e il conto alla
       rovescia - che non va a capo - la spingeva a 342px. Risultato: la scheda
       successiva non sbucava piu' dal bordo, cioe' spariva l'unico indizio che
       la striscia si scorre. */
    min-width: 0;
    scroll-snap-align: start;
    display: flex;
}

#consultibloccati .cbx-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    padding: 0.9rem;
    border: 1px solid var(--alu-border);
    border-radius: var(--alu-radius-lg);
    background: var(--alu-surface-strong);
    color: var(--alu-text);
    text-decoration: none;
    box-shadow: var(--alu-shadow-1);
    transition: transform var(--alu-dur-fast) var(--alu-ease-out),
                box-shadow var(--alu-dur-fast) var(--alu-ease-out),
                border-color var(--alu-dur-fast) var(--alu-ease-out);
}

#consultibloccati .cbx-card:hover,
#consultibloccati .cbx-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: var(--alu-shadow-3);
    border-color: var(--alu-gold-a45);
}

#consultibloccati .cbx-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--alu-space-2);
}

#consultibloccati .cbx-lock-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--alu-gold-a18);
    color: var(--cbx-ink-gold);
    border: 1px solid var(--alu-gold-a32);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.15rem 0.5rem;
    border-radius: var(--alu-radius-pill);
}

/* Lucchetto disegnato in CSS: nessuna icona da caricare, eredita il colore. */
#consultibloccati .cbx-lock-ico {
    position: relative;
    width: 9px;
    height: 8px;
    border-radius: 2px;
    background: currentColor;
    margin-top: 3px;
}

#consultibloccati .cbx-lock-ico::before {
    content: '';
    position: absolute;
    left: 1.5px;
    right: 1.5px;
    bottom: 100%;
    height: 5px;
    border: 1.5px solid currentColor;
    border-bottom: 0;
    border-radius: 4px 4px 0 0;
}

#consultibloccati .cbx-date {
    font-size: 0.72rem;
    color: var(--alu-text-muted);
    white-space: nowrap;
}

#consultibloccati .cbx-title,
#consultibloccati .cbx-quote {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#consultibloccati .cbx-title {
    -webkit-line-clamp: 2;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--alu-text);
}

#consultibloccati .cbx-quote {
    -webkit-line-clamp: 2;
    font-size: 0.85rem;
    font-style: italic;
    line-height: 1.4;
    color: var(--alu-text-muted);
}

#consultibloccati .cbx-author {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: auto;
    font-size: 0.78rem;
    color: var(--alu-text-muted);
    min-width: 0;
}

#consultibloccati .cbx-author-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#consultibloccati .cbx-avatar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--alu-accent) 0%, var(--alu-accent-strong) 100%);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
}

/* --- conto alla rovescia ---------------------------------------------- */

#consultibloccati .cbx-timer {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding-top: 0.55rem;
    border-top: 1px dashed var(--alu-border);
}

#consultibloccati .cbx-timer-label {
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--alu-text-muted);
}

/* Una riga sola con i separatori, non quattro riquadri che sforano. */
#consultibloccati .cbx-count {
    display: flex;
    align-items: baseline;
    gap: 0.2rem;
    font-variant-numeric: tabular-nums;
}

/* Azzera il `.countdown-segment` globale (riquadro con bordo, padding 8/10 e
   raggio 12) che vale per la pagina del singolo consulto: li' i quattro riquadri
   hanno spazio, qui dentro una scheda da 300px diventano la cosa piu' larga
   della colonna e ne dettano la misura. */
#consultibloccati .cbx-count .countdown-segment {
    display: inline-flex;
    align-items: baseline;
    gap: 1px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    min-width: 0;
}

#consultibloccati .cbx-count .countdown-value {
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1;
    color: var(--cbx-ink-gold);
}

#consultibloccati .cbx-count .countdown-label {
    font-style: normal;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--alu-text-muted);
}

#consultibloccati .cbx-count .countdown-sep {
    font-weight: 700;
    color: var(--alu-border-strong);
    transform: translateY(-1px);
}

#consultibloccati .cbx-seg-sec .countdown-value {
    animation: cbxTick 1s var(--alu-ease-out) infinite;
}

#consultibloccati .cbx-progress {
    display: block;
    height: 4px;
    border-radius: var(--alu-radius-pill);
    background: var(--alu-border);
    overflow: hidden;
}

#consultibloccati .cbx-progress-fill {
    display: block;
    height: 100%;
    width: var(--cbx-p, 0%);
    border-radius: inherit;
    background: var(--alu-grad-gold);
    transition: width 1s linear;
}

#consultibloccati .cbx-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--alu-accent-strong);
}

#consultibloccati .cbx-cta-arrow {
    transition: transform var(--alu-dur-fast) var(--alu-ease-out);
}

#consultibloccati .cbx-card:hover .cbx-cta-arrow,
#consultibloccati .cbx-card:focus-visible .cbx-cta-arrow {
    transform: translateX(4px);
}

/* --- barra di posizione (al posto delle frecce, su touch) -------------- */

#consultibloccati .cbx-rail {
    height: 3px;
    margin-top: 0.35rem;
    border-radius: var(--alu-radius-pill);
    background: var(--alu-border);
    overflow: hidden;
}

#consultibloccati .cbx-rail-thumb {
    display: block;
    height: 100%;
    width: var(--cbx-thumb, 30%);
    border-radius: inherit;
    background: linear-gradient(90deg, var(--alu-accent) 0%, var(--alu-accent-strong) 100%);
    transform: translateX(var(--cbx-thumb-x, 0));
    transition: transform 0.12s linear, width 0.2s var(--alu-ease-out);
}

@media (pointer: fine) and (min-width: 768px) {
    #consultibloccati .cbx-rail {
        display: none;
    }
}

/* --- entrata scaglionata ---------------------------------------------- */

#consultibloccati .cbx-item {
    opacity: 0;
    transform: translateY(14px);
}

#consultibloccati.is-in .cbx-item {
    animation: cbxIn 0.5s var(--alu-ease-out) forwards;
    animation-delay: calc(var(--cbx-i, 0) * 60ms);
}

@keyframes cbxIn {
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes cbxTick {
    0%, 70% { opacity: 1; }
    85% { opacity: 0.45; }
    100% { opacity: 1; }
}

/* Chi ha chiesto meno movimento vede la striscia ferma e completa: nessuna
   scheda deve restare invisibile perche' l'animazione non parte. */
@media (prefers-reduced-motion: reduce) {
    #consultibloccati .cbx-item {
        opacity: 1;
        transform: none;
        animation: none;
    }

    #consultibloccati.is-in .cbx-item,
    #consultibloccati .cbx-seg-sec .countdown-value {
        animation: none;
    }

    #consultibloccati .cbx-card,
    #consultibloccati .cbx-cta-arrow,
    #consultibloccati .cbx-progress-fill,
    #consultibloccati .cbx-rail-thumb {
        transition: none;
    }
}

@media (max-width: 576px) {
    #consultibloccati .cbx-header {
        margin-bottom: var(--alu-space-3);
    }

    #consultibloccati .cbx-sub {
        font-size: 0.8rem;
    }
}

#infoandsearchbox .cta-card .cta-benefits li:last-child {
    margin-bottom: 0
    }
#infoandsearchbox .cta-card .cta-benefits li .emoji {
    font-size: 1.35rem;
    line-height: 1.1;
    flex-shrink: 0
    }
#infoandsearchbox .cta-card .cta-benefits li span:last-child {
    flex: 1 1 auto
    }
#clockdiv, .caption, .descrizionesmorfia, .displaynumbers, .flatbtn, .greengradient, .lottoball, .mission, .popup, .popup p, .tab, .tabactive, .textcenter, .titolo1, div.miniatura, div.miniatura img, div.miniatura p, fieldset {
    text-align: center
    }
#clockdiv {
    /* font-family: sans-serif; */
    color: hsla(359, 0%, 100%, 1);
    font-weight: 100;
    font-size: 30px;
    margin: 2px auto 23px
    }
#clockdiv > div {
    border-radius: 18px;
    background-color: hsla(242.49, 0%, 77.5%, 0.68);
    padding: 10px;
    margin-bottom: 9px
    }
#clockdiv div > span {
    border-radius: 22px;
    background-color: hsla(359, 0%, 100%, 0.81);
    padding: 9px;
    color: black;
    min-width: 35px
    }
#clockdiv div > div {
    color: rgba(0, 0, 0, 0.56);
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase
    }
#at-custom-mobile-bar {
    z-index: 20 !important
    }

.home-info-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.25rem 0.35rem 0.25rem 0;
    border: none;
    background: transparent;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #4c3dd5;
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease;
}

.home-info-toggle:hover,
.home-info-toggle:focus {
    color: #2e1f7e;
}

.home-info-toggle:focus-visible {
    outline: 3px solid rgba(76, 61, 213, 0.35);
    outline-offset: 4px;
    border-radius: 999px;
}

.home-info-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    background: rgba(76, 61, 213, 0.16);
    font-size: 0.95rem;
    line-height: 1;
}

.home-info-toggle-text {
    text-decoration: none;
}

.home-info-panel {
    display: none;
    position: relative;
    margin-top: 1.5rem;
    margin-bottom: 2rem;
    border-radius: 28px;
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.95), rgba(244, 240, 255, 0.88));
    border: 1px solid rgba(76, 61, 213, 0.16);
    box-shadow: 0 28px 64px rgba(40, 30, 88, 0.15);
    color: #20164f;
}

.home-info-panel a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(76, 61, 213, 0.45);
}

.home-info-panel a:hover,
.home-info-panel a:focus {
    color: #2e1f7e;
    text-decoration-color: rgba(76, 61, 213, 0.85);
}

.home-info-close {
    border: 1px solid rgba(76, 61, 213, 0.35);
    background: rgba(246, 244, 255, 0.7);
    color: #2e1f7e;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
    transition: all 0.2s ease;
}

.home-info-close:hover,
.home-info-close:focus {
    background: rgba(76, 61, 213, 0.1);
    color: #20164f;
}

.home-info-header {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.home-info-eyebrow {
    color: #6d5ae3;
    letter-spacing: 0.28em;
}

.home-info-title {
    font-weight: 800;
    font-size: clamp(1.9rem, 2.1vw + 1.1rem, 2.8rem);
    color: #20164f;
}

.home-info-subtitle {
    font-weight: 600;
    color: #4332a5;
}

.home-info-description {
    color: rgba(32, 22, 79, 0.72);
}

.home-info-section-title {
    letter-spacing: 0.16em;
    color: #31227d;
}

.home-info-list {
    display: grid;
    gap: 0.9rem;
}

.home-info-list-item {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1rem 1.2rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(76, 61, 213, 0.12);
    box-shadow: 0 18px 36px rgba(32, 22, 79, 0.08);
}

.home-info-list-item p {
    margin-bottom: 0;
}

.home-info-bullet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(109, 90, 227, 0.22), rgba(76, 61, 213, 0.5));
    font-size: 1.25rem;
}

.home-info-item-title {
    font-weight: 700;
    color: #2e1f7e;
}

.home-info-callout {
    border-left: 3px solid rgba(76, 61, 213, 0.35);
    padding-left: 0.85rem;
    color: #2e1f7e;
}

.home-info-body p {
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(32, 22, 79, 0.9);
}

.home-info-separator {
    margin: 2.5rem auto;
    width: 100%;
    max-width: 720px;
    border: none;
    height: 1px;
    background: linear-gradient(90deg, rgba(76, 61, 213, 0), rgba(76, 61, 213, 0.4), rgba(76, 61, 213, 0));
}

.home-info-footer p {
    color: rgba(32, 22, 79, 0.85);
}

@media (max-width: 575.98px) {
    .home-info-panel {
        border-radius: 20px;
    }

    .home-info-toggle {
        font-size: 0.72rem;
        letter-spacing: 0.14em;
    }

    .home-info-list-item {
        padding: 0.85rem 1rem;
    }

    .home-info-bullet {
        width: 2rem;
        height: 2rem;
        font-size: 1.05rem;
    }
}

/* ============================================================
   Consulto gratis page - layout moderno mobile-first
   Hero unificato emesso da stdHeader (.alu-pagehead). Sotto:
   intro SEO, 3 step cards, form in card, upsell privato, FAQ.
   ============================================================ */
.consulto-gratis-page {
    --cg-surface: #ffffff;
    --cg-surface-soft: #faf7ff;
    --cg-border: rgba(74, 40, 120, 0.14);
    --cg-text: #2A1B4A;
    --cg-muted: #5b4e7a;
    --cg-accent: #6B3FA0;
    --cg-accent-strong: #4A2878;
    --cg-accent-soft: rgba(107, 63, 160, 0.1);
    --cg-gold: #D4AF37;
    --cg-shadow: 0 14px 36px -22px rgba(45, 27, 78, 0.4);
    color: var(--cg-text);
    max-width: 880px;
    margin: 0 auto 2.5rem;
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}
[data-bs-theme="dark"] .consulto-gratis-page,
.consulto-gratis-page[data-bs-theme="dark"] {
    --cg-surface: rgba(22, 14, 40, 0.92);
    --cg-surface-soft: rgba(28, 18, 50, 0.85);
    --cg-border: rgba(212, 175, 55, 0.18);
    --cg-text: #f2ecff;
    --cg-muted: #bfb3d9;
    --cg-accent: #b48cf0;
    --cg-accent-strong: #d4b7ff;
    --cg-accent-soft: rgba(180, 140, 240, 0.18);
    --cg-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.7);
}

.consulto-gratis-intro {
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
    padding: 1.2rem 1.2rem 1.1rem;
    border-radius: 18px;
    background: var(--cg-surface);
    border: 1px solid var(--cg-border);
    box-shadow: var(--cg-shadow);
    color: var(--cg-muted);
}
.consulto-gratis-intro h2 {
    margin: 0 0 0.5rem;
    color: var(--cg-text);
    font-family: Georgia, 'Times New Roman', serif;
}
.consulto-gratis-intro p { margin: 0; line-height: 1.55; }
.consulto-gratis-intro strong { color: var(--cg-text); }

/* 3 step cards */
.consulto-gratis-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}
.consulto-gratis-step {
    position: relative;
    padding: 1.1rem 1rem 1rem;
    border-radius: 16px;
    background: var(--cg-surface);
    border: 1px solid var(--cg-border);
    box-shadow: var(--cg-shadow);
    text-align: center;
}
.consulto-gratis-step__num {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--cg-accent);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(74, 40, 120, 0.35);
}
.consulto-gratis-step__icon {
    color: var(--cg-accent);
    font-size: 1.6rem;
    margin: 0.4rem auto 0.6rem;
}
.consulto-gratis-step__title {
    margin: 0 0 0.35rem;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--cg-text);
}
.consulto-gratis-step__text {
    margin: 0;
    font-size: 0.88rem;
    color: var(--cg-muted);
    line-height: 1.45;
}
@media (min-width: 720px) {
    .consulto-gratis-steps { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
}

/* Form in card */
.consulto-gratis-card {
    padding: 1.4rem 1.1rem 1.6rem;
    border-radius: 20px;
    background: var(--cg-surface);
    border: 1px solid var(--cg-border);
    box-shadow: var(--cg-shadow);
}
.consulto-gratis-card__head {
    text-align: center;
    margin-bottom: 1rem;
}
.consulto-gratis-card__title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.35rem;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(1.15rem, 3.2vw, 1.4rem);
    color: var(--cg-text);
}
.consulto-gratis-card__icon {
    color: var(--cg-accent);
    font-size: 1.05em;
}
.consulto-gratis-card__lead {
    margin: 0;
    color: var(--cg-muted);
    font-size: 0.92rem;
    line-height: 1.45;
}

/* Fieldgroup pulito (sostituisce i vecchi fieldset stilizzati) */
.consulto-gratis-fieldgroup {
    border: 0;
    padding: 0;
    margin: 0 0 0.85rem;
}
.consulto-gratis-fieldgroup__legend {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0;
    margin: 0 0 0.5rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--cg-accent-strong);
}
.consulto-gratis-fieldgroup__legend svg { font-size: 0.95em; }
.consulto-gratis-fieldgroup--public .consulto-gratis-fieldgroup__legend {
    color: #8b1a1a;
}
[data-bs-theme="dark"] .consulto-gratis-fieldgroup--public .consulto-gratis-fieldgroup__legend {
    color: #ff9a9a;
}

/* Textarea wrapper full-width */
.consulto-gratis-field--textarea {
    align-items: stretch;
}
.consulto-gratis-field--textarea .consulto-gratis-textarea {
    width: 100%;
}

/* Upsell box (CTA secondaria al consulto privato) */
.consulto-gratis-upsell {
    border-radius: 18px;
    padding: 1rem 1.1rem;
    background: linear-gradient(135deg, rgba(107, 63, 160, 0.09), rgba(212, 175, 55, 0.08));
    border: 1px solid var(--cg-border);
}
.consulto-gratis-upsell__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.6rem;
}
.consulto-gratis-upsell__icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(212, 175, 55, 0.2);
    color: var(--cg-gold);
    font-size: 1.25rem;
    flex: 0 0 auto;
}
.consulto-gratis-upsell__title {
    margin: 0;
    font-size: 1.02rem;
    color: var(--cg-text);
}
.consulto-gratis-upsell__text {
    margin: 0.2rem 0 0;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--cg-muted);
}
.consulto-gratis-upsell__cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.1rem;
    border-radius: 12px;
    background: var(--cg-accent-strong);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .2s ease, transform .15s ease;
}
.consulto-gratis-upsell__cta:hover,
.consulto-gratis-upsell__cta:focus-visible {
    background: var(--cg-accent);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}
@media (min-width: 720px) {
    .consulto-gratis-upsell__inner { flex-direction: row; text-align: left; gap: 1rem; }
}

/* FAQ collassabili */
.consulto-gratis-faq {
    background: var(--cg-surface);
    border: 1px solid var(--cg-border);
    border-radius: 18px;
    padding: 1.1rem 1rem 0.6rem;
    box-shadow: var(--cg-shadow);
}
.consulto-gratis-faq > h2 {
    margin: 0 0 0.75rem;
    font-family: Georgia, 'Times New Roman', serif;
    color: var(--cg-text);
}
.consulto-gratis-faq__item {
    border-top: 1px solid var(--cg-border);
    padding: 0.6rem 0;
}
.consulto-gratis-faq__item:first-of-type { border-top: 0; }
.consulto-gratis-faq__item summary {
    list-style: none;
    cursor: pointer;
    font-weight: 600;
    color: var(--cg-accent-strong);
    padding: 0.35rem 1.6rem 0.35rem 0;
    position: relative;
}
.consulto-gratis-faq__item summary::-webkit-details-marker { display: none; }
.consulto-gratis-faq__item summary::marker { content: ""; }
.consulto-gratis-faq__item summary::after {
    content: "+";
    position: absolute;
    right: 0.2rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.3rem;
    line-height: 1;
    color: var(--cg-accent);
    transition: transform .2s ease;
}
.consulto-gratis-faq__item[open] summary::after { content: "−"; }
.consulto-gratis-faq__body {
    padding: 0.4rem 0 0.5rem;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--cg-muted);
}
.consulto-gratis-faq__body p { margin: 0 0 0.5rem; }
.consulto-gratis-faq__body p:last-child { margin-bottom: 0; }

/* Consulto gratis - component styles */
.consulto-gratis-hero {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    background-image: url('/immagini/wpapers/consultogratis.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.consulto-gratis-author {
    margin: 0 auto -20px;
    padding: 0.25rem 0;
    text-align: center;
}

.consulto-gratis-author-link {
    gap: 0.35rem;
}

.consulto-gratis-author-label {
    font-size: 0.7rem;
    font-style: italic;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.consulto-gratis-author-content {
    gap: 0.5rem;
    margin-top: 0.15rem;
    flex-wrap: wrap;
    justify-content: center;
}

.consulto-gratis-author-avatar {
    width: 30px;
    height: 30px;
    border-radius: 100%;
    object-fit: cover;
}

.consulto-gratis-author-name {
    font-weight: 500;
    text-transform: capitalize;
    font-size: 1.1rem;
    font-family: Constantia, 'Lucida Bright', 'DejaVu Serif', Georgia, serif;
    color: inherit;
}

.consulto-gratis-panel {
    padding: 18px 22px 16px;
    border-radius: 20px;
    background: var(--consulto-free-panel-bg);
    border: 1px solid var(--consulto-free-panel-border);
    color: var(--consulto-free-panel-text);
    box-shadow: 0 22px 44px rgba(40, 36, 72, 0.16);
    backdrop-filter: blur(6px);
}

.consulto-gratis-panel .container > *:last-child {
    margin-bottom: 0;
}

.consulto-gratis-icon {
    font-size: 2.75rem;
    text-align: center;
    color: var(--consulto-free-icon);
    margin: 0.25rem auto 0.75rem;
}

.consulto-gratis-note {
    margin: 1rem auto;
    padding: 1rem 1.25rem;
    border-radius: 16px;
    background: var(--consulto-free-note-bg);
    border: 1px solid var(--consulto-free-note-border);
    color: var(--consulto-free-panel-text);
    box-shadow: 0 14px 32px rgba(40, 36, 72, 0.14);
}

.consulto-gratis-note strong {
    color: inherit;
}

.consulto-gratis-cta {
    margin: 1.25rem auto 1.5rem;
    padding: 1.25rem 1.5rem;
    border-radius: 18px;
    background: var(--consulto-free-cta-bg);
    color: var(--consulto-free-cta-text);
    box-shadow: var(--consulto-free-cta-shadow);
    border: 1px solid transparent;
    font-weight: 600;
    transition: transform .2s ease, box-shadow .2s ease;
}

.consulto-gratis-cta:hover,
.consulto-gratis-cta:focus {
    transform: translateY(-2px);
    text-decoration: none;
    box-shadow: 0 24px 48px rgba(76, 99, 155, 0.25);
}

.consulto-gratis-toggle {
    margin: 1.5rem auto 0.5rem;
    padding: 0.7rem 1.4rem;
    border-radius: 14px;
    width: fit-content;
    background: var(--consulto-free-toggle-bg, var(--consulto-free-note-bg));
    border: 1px solid var(--consulto-free-toggle-border, var(--consulto-free-note-border));
    color: var(--consulto-free-toggle-text, var(--consulto-free-panel-text));
    box-shadow: 0 10px 22px rgba(40, 36, 72, 0.12);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-family: inherit;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.2;
    text-decoration: none;
    text-align: center;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
    appearance: none;
    border-width: 1px;
}

.consulto-gratis-toggle:hover,
.consulto-gratis-toggle:focus {
    background: var(--consulto-free-toggle-hover-bg, var(--consulto-free-note-bg));
    color: var(--consulto-free-toggle-text, var(--consulto-free-panel-text));
    box-shadow: 0 16px 32px rgba(40, 36, 72, 0.18);
    transform: translateY(-1px);
}

.consulto-gratis-toggle:focus-visible {
    outline: 3px solid var(--consulto-free-focus-shadow);
    outline-offset: 2px;
}

.consulto-gratis-toggle .consulto-gratis-toggle-icon {
    font-size: 1.35rem;
    color: var(--consulto-free-icon);
}

.consulto-gratis-toggle-chevron {
    font-size: 0.95rem;
    transition: transform .2s ease;
    color: inherit;
}

.consulto-gratis-toggle.is-open .consulto-gratis-toggle-chevron,
details[open] > .consulto-gratis-toggle .consulto-gratis-toggle-chevron {
    transform: rotate(180deg);
}

/* <details>/<summary> nativo per istruzioni: rimuove marker default e
   centra il summary come il vecchio <button> toggle. */
.consulto-gratis-rules {
    text-align: center;
}
.consulto-gratis-rules > .consulto-gratis-toggle {
    list-style: none;
}
.consulto-gratis-rules > .consulto-gratis-toggle::-webkit-details-marker,
.consulto-gratis-rules > .consulto-gratis-toggle::marker {
    display: none;
    content: "";
}

.consulto-gratis-fieldset {
    background: var(--consulto-free-fieldset-bg);
    border: 1px solid var(--consulto-free-fieldset-border);
    border-radius: 18px;
    padding: 1.25rem 1.5rem;
    color: var(--consulto-free-panel-text);
    box-shadow: 0 16px 30px rgba(40, 36, 72, 0.12);
}

.consulto-gratis-fieldset legend {
    background: var(--consulto-free-fieldset-bg);
    border: 1px solid var(--consulto-free-fieldset-border);
    color: inherit;
    border-radius: 999px;
    padding: 0.3rem 0.9rem;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.consulto-gratis-input-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
    color: var(--consulto-free-panel-text);
    margin-top: 0.75rem;
}

.consulto-gratis-input-icon {
    color: var(--consulto-free-icon);
    flex: 0 0 auto;
}

.consulto-gratis-input {
    flex: 1 1 260px;
    max-width: 100%;
    min-height: 48px;
    background: var(--consulto-free-input-bg);
    color: var(--consulto-free-input-text);
    border: 1px solid var(--consulto-free-input-border);
    border-radius: 12px;
    padding: 0.65rem 1rem;
    text-align: center;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.consulto-gratis-input:focus {
    border-color: var(--consulto-free-icon);
    box-shadow: 0 0 0 3px var(--consulto-free-focus-shadow);
    outline: none;
}

.consulto-gratis-textarea {
    width: 100%;
    background: var(--consulto-free-input-bg);
    color: var(--consulto-free-input-text);
    border: 1px solid var(--consulto-free-input-border);
    border-radius: 14px;
    padding: 1rem 1.2rem;
    margin-top: 0.75rem;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.consulto-gratis-textarea:focus {
    border-color: var(--consulto-free-icon);
    box-shadow: 0 0 0 3px var(--consulto-free-focus-shadow);
    outline: none;
}

.consulto-gratis-hint {
    background: var(--consulto-free-hint-bg);
    color: var(--consulto-free-hint-text);
    border: 1px solid var(--consulto-free-hint-border);
    border-radius: 14px;
    padding: 0.75rem 1rem;
    margin: 0.5rem auto;
    max-width: 680px;
    box-shadow: 0 16px 28px rgba(40, 36, 72, 0.1);
}

.consulto-gratis-hint--warning {
    color: #8b1a1a;
}

/* Form layout moderno: mobile-first, single-column con max-width
   contenuta. Niente <br> espliciti, gap CSS coerente. */
.consulto-gratis-form {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-width: 720px;
    margin: 0 auto;
    padding: 0 0.25rem;
}
.consulto-gratis-field {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 0;
}

/* Tooltip "fumetto" sopra il campo (oggetto + richiesta).
   Visibile solo a focus-within o hover (desktop) oppure forzato via
   .is-shown da JS (es. troppe domande). Niente layout shift. */
.consulto-gratis-tip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    transform: translate(-50%, 4px);
    z-index: 5;
    display: inline-flex;
    align-items: flex-start;
    gap: 0.45rem;
    width: max-content;
    max-width: min(320px, calc(100vw - 32px));
    padding: 0.55rem 0.8rem;
    border-radius: 10px;
    background: #fff5f5;
    color: #8b1a1a;
    border: 1px solid rgba(139, 26, 26, 0.35);
    box-shadow: 0 12px 28px rgba(40, 36, 72, 0.18);
    font-size: 0.82rem;
    line-height: 1.35;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.consulto-gratis-tip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #fff5f5;
    filter: drop-shadow(0 1px 0 rgba(139, 26, 26, 0.35));
}
.consulto-gratis-tip-icon {
    flex: 0 0 auto;
    margin-top: 0.1rem;
    font-size: 0.95rem;
    opacity: 0.85;
}
.consulto-gratis-field--has-tip:focus-within .consulto-gratis-tip,
.consulto-gratis-field--has-tip:hover .consulto-gratis-tip,
.consulto-gratis-tip.is-shown {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}
.consulto-gratis-tip.is-active {
    background: #ffd6d6;
    border-color: rgba(139, 26, 26, 0.6);
    color: #6f0d0d;
}
.consulto-gratis-tip.is-active::after {
    border-top-color: #ffd6d6;
}
@media (prefers-reduced-motion: reduce) {
    .consulto-gratis-tip { transition: none; transform: translate(-50%, 0); }
}
.consulto-gratis-field .consulto-gratis-input-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    color: var(--consulto-free-icon, #4a8a64);
    font-size: 1.2rem;
}
.consulto-gratis-field .consulto-gratis-input,
.consulto-gratis-field .consulto-gratis-textarea {
    flex: 1 1 auto;
    min-width: 0;
}
.consulto-gratis-field .consulto-gratis-input.is-invalid,
.consulto-gratis-field .consulto-gratis-textarea.is-invalid {
    border-color: #c0392b !important;
    box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.18);
}

/* Consent block: riga unica, checkbox grande tappabile (>=24px), testo
   inline allineato. Niente icone hand-point. */
.consulto-gratis-consent {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 1rem auto 0.5rem;
    padding: 0.85rem 1rem;
    max-width: 720px;
    border-radius: 14px;
    background: var(--consulto-free-hint-bg, rgba(255, 255, 255, 0.6));
    border: 1px solid var(--consulto-free-hint-border, rgba(0, 0, 0, 0.08));
}
.consulto-gratis-consent-checkbox {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin-top: 0.15rem;
    accent-color: var(--bs-primary, #574AAE);
    cursor: pointer;
}
.consulto-gratis-consent-label {
    flex: 1 1 auto;
    font-size: 0.88rem;
    line-height: 1.45;
    color: inherit;
    cursor: pointer;
    margin: 0;
}
.consulto-gratis-consent-label a {
    text-decoration: underline;
}

/* Status panel inline (sostituisce alert() di validazione). */
.consulto-gratis-status {
    margin: 0.75rem auto;
    padding: 0.85rem 1rem;
    max-width: 720px;
    border-radius: 12px;
    font-size: 0.92rem;
    line-height: 1.4;
}
.consulto-gratis-status[hidden] { display: none !important; }
.consulto-gratis-status ul { margin: 0.35rem 0 0; padding-left: 1.2rem; }
.consulto-gratis-status--error {
    background: #ffe5e5;
    color: #8b1a1a;
    border: 1px solid rgba(139, 26, 26, 0.4);
}
.consulto-gratis-status--success {
    background: #e3f7ec;
    color: #1f6f43;
    border: 1px solid rgba(31, 111, 67, 0.35);
}

/* Submit moderno: full-width mobile, contenuto su desktop. */
.consulto-gratis-form .consulto-gratis-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 1rem auto 0.5rem;
    padding: 0.85rem 1.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: 14px;
    width: 100%;
    max-width: 320px;
}
.consulto-gratis-form .consulto-gratis-submit svg { font-size: 1.05em; }
@media (min-width: 720px) {
    .consulto-gratis-form .consulto-gratis-submit { width: auto; }
}

/* Helper text statici sotto i campi: niente slide animations, niente
   layout shift. Sempre visibili, leggeri, mobile-first. */
.consulto-gratis-helper {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0.35rem auto 0.85rem;
    padding: 0.45rem 0.75rem;
    max-width: 680px;
    border-radius: 10px;
    font-size: 0.82rem;
    line-height: 1.35;
    background: var(--consulto-free-hint-bg, rgba(255, 255, 255, 0.55));
    color: var(--consulto-free-hint-text, inherit);
    border: 1px solid var(--consulto-free-hint-border, rgba(0, 0, 0, 0.06));
}
.consulto-gratis-helper strong {
    font-weight: 600;
}
.consulto-gratis-helper-icon {
    flex: 0 0 auto;
    margin-top: 0.15rem;
    font-size: 0.95rem;
    opacity: 0.85;
}
.consulto-gratis-helper--info {
    --consulto-helper-tone: #1f6f43;
    color: var(--consulto-helper-tone);
    border-color: rgba(31, 111, 67, 0.25);
}
.consulto-gratis-helper--warning {
    --consulto-helper-tone: #8b1a1a;
    color: var(--consulto-helper-tone);
    border-color: rgba(139, 26, 26, 0.25);
    background: rgba(255, 246, 246, 0.85);
}
.consulto-gratis-helper--warning.is-active {
    background: #ffe5e5;
    border-color: rgba(139, 26, 26, 0.55);
    box-shadow: 0 0 0 1px rgba(139, 26, 26, 0.15);
}
@media (prefers-reduced-motion: no-preference) {
    .consulto-gratis-helper {
        transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
    }
}

.consulto-gratis-disclaimer {
    background: var(--consulto-free-disclaimer-bg);
    border: 1px solid var(--consulto-free-disclaimer-border);
    border-radius: 20px;
    padding: 1.5rem;
    margin-top: 1.5rem;
    color: var(--consulto-free-disclaimer-text);
    box-shadow: 0 24px 44px rgba(40, 36, 72, 0.14);
}

.consulto-gratis-disclaimer a {
    color: inherit;
    text-decoration: underline;
    font-weight: 600;
}

.consulto-gratis-disclaimer-text {
    font-size: 1rem;
    margin-bottom: 1rem;
}

.consulto-gratis-disclaimer-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.consulto-gratis-consent-icons {
    font-size: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    color: var(--consulto-free-icon);
}

.consulto-gratis-consent-icons i {
    color: inherit;
}

.consulto-gratis-submit {
    margin-top: 1.75rem;
    box-shadow: 0 20px 38px rgba(76, 99, 155, 0.24);
    border-radius: 999px;
    padding-inline: 2.5rem;
}

.consulto-gratis-submit:hover,
.consulto-gratis-submit:focus {
    box-shadow: 0 24px 48px rgba(76, 99, 155, 0.3);
}

.consulto-gratis-highlight {
    color: var(--consulto-free-icon);
    font-weight: 700;
}

@media (max-width: 576px) {
    .consulto-gratis-author {
        margin-bottom: -10px;
    }

    .consulto-gratis-panel {
        padding: 16px;
    }

    .consulto-gratis-cta {
        padding: 1rem 1.25rem;
    }

    .consulto-gratis-disclaimer {
        padding: 1.25rem;
    }
}


/* GSC emergency: pagina consulto gratis piu' compatta e focalizzata. */
.consulto-gratis-page {
    max-width: 920px;
    margin: 1rem auto 1.75rem;
    padding: 0 0.75rem;
    gap: 0.9rem;
}

.consulto-gratis-intro {
    max-width: 820px;
    padding: 1rem 1rem 0.95rem;
    border-radius: 16px;
    text-align: left;
}

.consulto-gratis-intro__eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0.18rem 0.55rem;
    margin: 0 0 0.45rem;
    border-radius: 999px;
    background: var(--cg-accent-soft);
    color: var(--cg-accent-strong);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.15;
    text-transform: uppercase;
}

.consulto-gratis-intro h2 {
    margin: 0 0 0.45rem;
    font-size: clamp(1.28rem, 5vw, 1.85rem);
    line-height: 1.12;
}

.consulto-gratis-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.8rem;
}

.consulto-gratis-proof span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    background: var(--cg-surface-soft);
    border: 1px solid var(--cg-border);
    color: var(--cg-accent-strong);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.2;
}

.consulto-gratis-steps {
    grid-template-columns: 1fr;
    gap: 0.55rem;
}

.consulto-gratis-step {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: start;
    gap: 0.7rem;
    min-width: 0;
    padding: 0.8rem 0.85rem;
    border-radius: 14px;
    text-align: left;
}

.consulto-gratis-step__num {
    position: static;
    transform: none;
    width: 30px;
    height: 30px;
    margin-top: 0.05rem;
    background: linear-gradient(135deg, #ffbe20, #ff9f0a);
    color: #25143e;
    box-shadow: 0 8px 18px rgba(255, 159, 10, 0.22);
}

.consulto-gratis-step__icon {
    display: none;
}

.consulto-gratis-step__body {
    min-width: 0;
}

.consulto-gratis-step__title {
    margin: 0 0 0.18rem;
    font-size: 0.98rem;
    line-height: 1.2;
}

.consulto-gratis-step__text {
    font-size: 0.84rem;
    line-height: 1.38;
    overflow-wrap: normal;
    word-break: normal;
}

.consulto-gratis-card {
    padding: 1rem 0.9rem 1.2rem;
    border-radius: 16px;
}

.consulto-gratis-card__head {
    margin-bottom: 0.75rem;
}

.consulto-gratis-card__lead {
    max-width: 680px;
    margin: 0 auto;
    font-size: 0.88rem;
    line-height: 1.42;
}

.consulto-gratis-fieldgroup {
    margin-bottom: 0.65rem;
}

.consulto-gratis-helper {
    margin-bottom: 0.65rem;
}

.consulto-gratis-consent {
    margin-top: 0.65rem;
    padding: 0.75rem 0.85rem;
}

.consulto-gratis-form .consulto-gratis-submit {
    margin-top: 0.8rem;
    margin-bottom: 0.1rem;
}

.consulto-gratis-upsell {
    padding: 0.8rem 0.9rem;
    border-radius: 16px;
}

.consulto-gratis-upsell__icon {
    width: 38px;
    height: 38px;
}

.consulto-gratis-upsell__title {
    font-size: 0.98rem;
}

.consulto-gratis-upsell__text {
    font-size: 0.86rem;
}

.consulto-gratis-upsell__cta {
    min-height: 44px;
    padding: 0.58rem 0.95rem;
    border-radius: 12px;
}

.consulto-gratis-faq {
    padding: 0.95rem 0.95rem 0.45rem;
    border-radius: 16px;
}

.consulto-gratis-faq__item {
    padding: 0.45rem 0;
}

.consulto-gratis-related {
    width: min(920px, calc(100% - 1.5rem));
    margin: 0 auto 2rem;
    display: grid;
    gap: 0.55rem;
}

.consulto-gratis-related__link {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.65rem 0.85rem;
    border-radius: 12px;
    background: var(--cg-surface, #fff);
    border: 1px solid var(--cg-border, rgba(74, 40, 120, 0.14));
    color: var(--cg-accent-strong, #4A2878);
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    box-shadow: var(--cg-shadow, 0 14px 36px -22px rgba(45, 27, 78, 0.4));
    transition: transform .18s ease, border-color .18s ease, background-color .18s ease;
}

.consulto-gratis-related__link:hover,
.consulto-gratis-related__link:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(212, 175, 55, 0.5);
    text-decoration: none;
}

html:is(.theme-dark, [data-bs-theme='dark']) .consulto-gratis-related__link {
    background: rgba(22, 14, 40, 0.92);
    border-color: rgba(212, 175, 55, 0.18);
    color: #f2ecff;
}

@media (min-width: 720px) {
    .consulto-gratis-page {
        gap: 1rem;
        margin-top: 1.25rem;
    }

    .consulto-gratis-intro {
        padding: 1.15rem 1.25rem;
        text-align: center;
    }

    .consulto-gratis-proof {
        justify-content: center;
    }

    .consulto-gratis-steps {
        grid-template-columns: 1fr;
        gap: 0.6rem;
    }

    .consulto-gratis-step {
        grid-template-columns: 32px minmax(0, 1fr);
        padding: 0.85rem;
    }

    .consulto-gratis-card {
        padding: 1.15rem 1.15rem 1.3rem;
    }

    .consulto-gratis-related {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


@media (min-width: 900px) {
    .consulto-gratis-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.7rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .consulto-gratis-related__link {
        transition: none;
    }

    .consulto-gratis-related__link:hover,
    .consulto-gratis-related__link:focus-visible {
        transform: none;
    }
}

/* ============================================================
   FREE.GATE.1 (2026-08-26) — modulo consulto gratis in cima alla
   pagina. Il kicker sostituisce il vecchio blocco introduttivo che
   spingeva il form oltre una schermata e mezzo su mobile; la
   spiegazione lunga vive ora sotto il modulo (.consulto-gratis-intro).
   ============================================================ */
.consulto-gratis-kicker {
    margin: 0 auto;
    max-width: 42rem;
    text-align: center;
    line-height: 1.5;
    color: var(--cg-muted);
    font-size: 1rem;
}

/* Honeypot: fuori dallo schermo, mai focusabile, invisibile ai lettori
   di schermo. Non si usa display:none — alcuni bot lo riconoscono e
   saltano il campo proprio per quello. */
.consulto-gratis-hp {
    position: absolute !important;
    left: -9999px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.consulto-gratis-submit-note {
    margin: 0.6rem 0 0;
    text-align: center;
    font-size: 0.85rem;
    color: var(--cg-muted);
}

.consulto-gratis-submit.is-sending {
    opacity: 0.7;
    pointer-events: none;
}

.consulto-gratis-errorlist {
    margin: 0;
    padding-left: 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

/* Riquadro "hai gia' un consulto bloccato" (VIEW/COMP/consulto-gratis-blocked-notice.php) */
.consulto-gratis-blocked {
    margin-top: 1rem;
    padding: 1rem 1.1rem;
    border-radius: 14px;
    border: 1px solid rgba(107, 63, 160, 0.22);
    background: rgba(107, 63, 160, 0.06);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
}
.consulto-gratis-blocked__lead {
    margin: 0;
    font-weight: 600;
}
.consulto-gratis-blocked__text {
    margin: 0;
    line-height: 1.5;
}
.consulto-gratis-blocked__cta {
    align-self: flex-start;
}
[data-bs-theme="dark"] .consulto-gratis-blocked {
    border-color: rgba(212, 175, 55, 0.28);
    background: rgba(180, 140, 240, 0.12);
}

/* Source: hero-carousel.css */
/* ALU Hero slideshow — vanilla (no Bootstrap), edge-to-edge, theme-aware.
   Rev. 2026-06-22: markup .alu-hero* + controller vanilla (js/general.js).
   - edge-to-edge full-bleed su TUTTI i dispositivi
   - altezza mobile contenuta (come pre-refactor): clamp(300px,52vw,430px)
   - transizione fade + soft Ken Burns; caption "glass" theme-adaptive
   - token scoped, zero duplicazioni, accessibile. */

.alu-hero {
  /* token scoped (light di default) */
  /* MOBILE-FIRST. L'altezza non deve superare quella precedente: 300px a
     393px di larghezza. Resta identica; cambia solo cosa ci sta dentro. */
  --hero-h: clamp(300px, 52vw, 430px);
  --hero-overlay: linear-gradient(180deg, rgba(10, 7, 28, 0.10) 0%, rgba(10, 7, 28, 0.28) 52%, rgba(10, 7, 28, 0.62) 100%);
  --hero-card-bg: rgba(255, 255, 255, 0.80);
  --hero-text: var(--alu-text-on-light, #2e1d4a);
  --hero-muted: var(--alu-text-on-light-soft, rgba(24, 32, 51, 0.78));
  --hero-border: rgba(46, 29, 74, 0.14);
  --hero-ctrl-bg: rgba(255, 255, 255, 0.9);
  --hero-ctrl-color: var(--alu-purple-deep, #2e1d4a);
  --hero-dot: rgba(255, 255, 255, 0.6);
  --hero-dot-active: var(--alu-gold, #fbbf24);

  position: relative;
  /* Full-bleed. `100vw` comprende la barra di scorrimento: su una finestra
     desktop stretta lo slideshow sconfinava di ~15px. `--alu-vw`, scritta dal
     JS con clientWidth, e' la larghezza reale; `100vw` resta come fallback per
     l'istante prima che il JS parta. */
  width: var(--alu-vw, 100vw);
  margin-inline: calc(50% - var(--alu-vw, 100vw) / 2);
  margin-block: 0 clamp(1rem, 3vw, 1.75rem);
  padding: 0;
  border: 0;
  outline: 0;
  border-radius: 0; /* edge-to-edge: nessun angolo arrotondato/bordo/outline */
  overflow: hidden;
  background: #140d27;
  isolation: isolate;
  touch-action: pan-y;
}

.alu-hero__track {
  position: relative;
  width: 100%;
  min-height: var(--hero-h);
  border-radius: 0;
}

/* container slide e immagine: nessun raggio/bordo; l'immagine copre tutto, centrata */
.alu-hero__slide,
.alu-hero__img {
  border-radius: 0;
  border: 0;
}

/* --- slide (fade) --- */
.alu-hero__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease;
  will-change: opacity;
}
.alu-hero__slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

.alu-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.05);
  transition: transform 6s ease-out;
}
.alu-hero__slide.is-active .alu-hero__img {
  transform: scale(1);
}

.alu-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--hero-overlay);
}

/* --- caption (glass card) --- */
.alu-hero__caption {
  position: absolute;
  left: 50%;
  /* mobile: lascia spazio in basso alla barra controlli (frecce + dot) */
  bottom: clamp(2.9rem, 10vw, 4.4rem);
  translate: -50% 0;
  z-index: 2;
  width: min(calc(100% - 1.25rem), 33rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Gerarchia serrata: dentro 300px devono stare badge, titolo, una riga di
     testo e un pulsante da 44px senza che nulla venga tagliato a meta' frase. */
  gap: 0.35rem;
  text-align: left;
  padding: 0.75rem 0.85rem 0.8rem;
  color: var(--hero-text);
  background: var(--hero-card-bg);
  border: 1px solid var(--hero-border);
  border-radius: 18px;
  box-shadow: 0 16px 36px rgba(10, 15, 45, 0.26);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.alu-hero__badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.6rem;
  padding: 0.26rem 0.66rem;
  border-radius: 999px;
  background: var(--alu-gold-a18, rgba(251, 191, 36, 0.18));
  border: 1px solid var(--alu-gold-a32, rgba(251, 191, 36, 0.34));
  color: var(--alu-purple-deep, #2e1d4a);
  font-size: clamp(0.64rem, 2.4vw, 0.72rem);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.1;
}
.alu-hero__title {
  margin: 0;
  color: var(--hero-text);
  font-size: clamp(1.18rem, 5.6vw, 1.95rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  /* clamp di sicurezza: testi dinamici (es. titolo blog) non rompono la grafica */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.alu-hero__text {
  margin: 0;
  color: var(--hero-muted);
  font-size: clamp(0.88rem, 3.7vw, 1.06rem);
  font-weight: 500;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  /* Una riga sola su telefono: dentro 300px di hero la seconda riga si mangia
     l'immagine, e il testo di una slide deve essere leggibile in un colpo
     d'occhio, non letto. Da 720px in su torna a due righe. */
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
}
@media (min-width: 720px) {
  .alu-hero__text { -webkit-line-clamp: 2; line-clamp: 2; }
}
.alu-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 0.15rem;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  background: var(--alu-grad-gold, linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%));
  color: var(--alu-text-on-gold, #2a1b4a);
  box-shadow: var(--alu-glow-gold-soft, 0 4px 12px rgba(251, 191, 36, 0.35));
  font-size: clamp(0.92rem, 3.6vw, 1rem);
  font-weight: 800;
  line-height: 1.15;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.alu-hero__cta:hover,
.alu-hero__cta:focus-visible {
  color: var(--alu-text-on-gold, #2a1b4a);
  transform: translateY(-1px);
  filter: brightness(1.04);
  text-decoration: none;
}

/* --- frecce ---
   Mobile-first: su schermi stretti le frecce stanno nella barra controlli in
   basso (NON sovrapposte alla caption). Su desktop tornano centrate ai lati. */
.alu-hero__nav {
  position: absolute;
  bottom: clamp(0.5rem, 2.4vw, 0.85rem);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--hero-border);
  border-radius: 999px;
  background: var(--hero-ctrl-bg);
  color: var(--hero-ctrl-color);
  box-shadow: 0 4px 12px rgba(20, 12, 40, 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  transition: transform 0.18s ease, background-color 0.18s ease;
}
.alu-hero__nav:hover {
  transform: scale(1.06);
}
.alu-hero__nav svg {
  display: block;
}
.alu-hero__nav--prev { left: clamp(0.5rem, 2vw, 1rem); }
.alu-hero__nav--next { right: clamp(0.5rem, 2vw, 1rem); }

/* --- dot --- */
.alu-hero__dots {
  position: absolute;
  left: 50%;
  /* mobile: allineati verticalmente al centro delle frecce della barra in basso */
  bottom: clamp(1.25rem, 3.6vw, 1.6rem);
  translate: -50% 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.alu-hero__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--hero-dot);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: width 0.2s ease, background-color 0.2s ease;
}
.alu-hero__dot.is-active {
  width: 26px;
  background: var(--hero-dot-active);
}

/* --- focus --- */
.alu-hero__cta:focus-visible,
.alu-hero__nav:focus-visible,
.alu-hero__dot:focus-visible {
  outline: 3px solid var(--alu-gold, #fbbf24);
  outline-offset: 3px;
}

.alu-hero__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- desktop: caption a sinistra, hero più alto --- */
@media (min-width: 768px) {
  .alu-hero {
    --hero-h: clamp(420px, 46vw, 560px);
  }
  .alu-hero__caption {
    left: clamp(2rem, 6vw, 5rem);
    bottom: auto;
    top: 50%;
    translate: 0 -50%;
    width: min(46vw, 34rem);
    padding: 1.4rem 1.6rem;
    gap: 0.65rem;
  }
  .alu-hero__title { font-size: clamp(1.9rem, 3.1vw, 2.9rem); }
  /* desktop: più spazio verticale, il testo può occupare 3 righe */
  .alu-hero__text { font-size: clamp(1rem, 1.6vw, 1.15rem); -webkit-line-clamp: 3; line-clamp: 3; }
  /* desktop: frecce centrate verticalmente ai lati (c'è spazio, niente overlap) */
  .alu-hero__nav {
    top: 50%;
    bottom: auto;
    translate: 0 -50%;
    width: 48px;
    height: 48px;
  }
  .alu-hero__dots { bottom: 1rem; }
}

/* --- dark theme: solo override token --- */
html:is(.theme-dark, [data-bs-theme='dark']) .alu-hero {
  --hero-card-bg: rgba(12, 9, 32, 0.8);
  --hero-text: var(--alu-text-on-dark, #f5f3ff);
  --hero-muted: var(--alu-text-on-dark-soft, rgba(245, 243, 255, 0.85));
  --hero-border: rgba(208, 181, 255, 0.22);
  --hero-ctrl-bg: rgba(12, 9, 32, 0.78);
  --hero-ctrl-color: var(--alu-text-on-dark, #f5f3ff);
  --hero-overlay: linear-gradient(180deg, rgba(6, 4, 20, 0.22) 0%, rgba(6, 4, 20, 0.42) 52%, rgba(6, 4, 20, 0.72) 100%);
}
html:is(.theme-dark, [data-bs-theme='dark']) .alu-hero__badge {
  color: var(--alu-text-on-dark, #f5f3ff);
}
/* dark: forza il testo scuro del CTA (altrimenti la regola globale `a` del tema
   dark lo colora con l'accent chiaro → illeggibile sul gradiente oro). */
html:is(.theme-dark, [data-bs-theme='dark']) .alu-hero__cta,
html:is(.theme-dark, [data-bs-theme='dark']) .alu-hero__cta:hover,
html:is(.theme-dark, [data-bs-theme='dark']) .alu-hero__cta:focus,
html:is(.theme-dark, [data-bs-theme='dark']) .alu-hero__cta:focus-visible {
  color: var(--alu-text-on-gold, #2a1b4a);
}

/* --- reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .alu-hero__slide,
  .alu-hero__img,
  .alu-hero__cta,
  .alu-hero__nav,
  .alu-hero__dot {
    transition: none !important;
  }
  .alu-hero__img { transform: none; }
}

/* Source: conversion-funnel.css */
/* ============================================================
   Scelta guidata - refactor 2026-05-11
   Brand viola/oro coerente con hero cartomanti + carta del giorno.
   Mobile-first: card singola con 3 CTA stack; >=720px 3 col grid.
   ============================================================ */
.conversion-guide,
.conversion-discount-note {
  width: min(1120px, calc(100% - 1rem));
  margin: 1rem auto 1.1rem;
  padding: clamp(1rem, 2.4vw, 1.4rem);
  border-radius: 20px;
  color: #f5f3ff;
  position: relative;
  overflow: hidden;
}

.conversion-guide {
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(251, 191, 36, 0.22) 0%, transparent 55%),
    radial-gradient(110% 70% at 100% 100%, rgba(168, 85, 247, 0.28) 0%, transparent 60%),
    linear-gradient(160deg, rgba(46, 29, 84, 0.96) 0%, rgba(78, 39, 134, 0.94) 100%);
  border: 1px solid rgba(251, 191, 36, 0.32);
  box-shadow: 0 18px 40px rgba(20, 12, 40, 0.32);
}

.conversion-guide__head {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  text-align: center;
}

.conversion-guide__eyebrow {
  display: inline-block;
  align-self: center;
  padding: 0.28rem 0.8rem;
  border-radius: 999px;
  background: rgba(251, 191, 36, 0.16);
  border: 1px solid rgba(251, 191, 36, 0.42);
  color: #fde68a;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.conversion-guide__title {
  margin: 0;
  color: #ffffff;
  font-size: clamp(1.35rem, 4.5vw, 1.8rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.32);
}

.conversion-guide__lead {
  margin: 0;
  color: rgba(245, 243, 255, 0.84);
  font-size: clamp(0.92rem, 2.4vw, 1rem);
  line-height: 1.45;
}
.conversion-guide__lead strong { color: #fde68a; font-weight: 700; }

/* ---------- Disclosure: collapsed intro + CTA, native no-JS reveal ---------- */
.conversion-guide__details {
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
}

.conversion-guide__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  min-height: 52px;
  width: min(100%, 420px);
  margin: 0 auto;
  padding: 0.85rem 1.1rem;
  border-radius: 999px;
  background: var(--alu-grad-gold);
  color: #1a1438;
  font-size: clamp(0.95rem, 2.7vw, 1.05rem);
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  list-style: none;
  box-shadow: 0 10px 26px rgba(251, 191, 36, 0.28);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  -webkit-tap-highlight-color: rgba(251, 191, 36, 0.25);
}
.conversion-guide__toggle::-webkit-details-marker { display: none; }
.conversion-guide__toggle::marker { content: ""; }
.conversion-guide__toggle:hover,
.conversion-guide__toggle:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(251, 191, 36, 0.38), 0 0 0 3px rgba(253, 230, 138, 0.28);
  outline: none;
}
.conversion-guide__toggle-text,
.conversion-guide__toggle-arrow { color: inherit; }
.conversion-guide__toggle-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(26, 20, 56, 0.12);
  line-height: 1;
  flex: 0 0 auto;
}
.conversion-guide__details[open] > .conversion-guide__toggle {
  display: none;
}
.conversion-guide__collapsed {
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
  animation: conversion-guide-reveal 0.24s ease-out both;
}

@keyframes conversion-guide-reveal {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .conversion-guide__toggle,
  .conversion-guide__collapsed {
    animation: none;
    transition: none;
  }
}

/* ---------- Actions: stack mobile, 3 col >=720px ---------- */
.conversion-guide__actions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .conversion-guide__actions { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
}
.conversion-guide__item { margin: 0; }

/* ---------- Single CTA: icona + testo + prezzo + arrow ---------- */
.conversion-guide__button {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 0.7rem;
  min-height: 64px;
  padding: 0.7rem 0.85rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  text-decoration: none;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  -webkit-tap-highlight-color: rgba(251, 191, 36, 0.25);
}
@media (min-width: 720px) {
  .conversion-guide__button {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    justify-items: center;
    text-align: center;
    gap: 0.5rem;
    padding: 1rem 0.85rem 0.95rem;
    min-height: 168px;
  }
}

.conversion-guide__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.22) 0%, rgba(245, 158, 11, 0.18) 100%);
  border: 1px solid rgba(251, 191, 36, 0.45);
  font-size: 1.4rem;
  line-height: 1;
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.4);
  transition: box-shadow 0.3s ease, transform 0.2s ease;
}

.conversion-guide__text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.conversion-guide__button-label {
  display: block;
  font-size: 0.96rem;
  font-weight: 700;
  line-height: 1.2;
  color: #ffffff;
}
.conversion-guide__button-tagline {
  display: block;
  font-size: 0.8rem;
  color: rgba(245, 243, 255, 0.72);
  line-height: 1.3;
  font-weight: 400;
}

/* Price badge: oro saturo, attrae l'occhio. */
.conversion-guide__price {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1;
  flex-shrink: 0;
  padding: 0.3rem 0.55rem;
  border-radius: 10px;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: #1a1438;
  box-shadow: 0 4px 12px rgba(251, 191, 36, 0.35);
}
.conversion-guide__price-from {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.78;
  margin-bottom: 0.05rem;
}
.conversion-guide__price-value {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}
@media (min-width: 720px) {
  .conversion-guide__price { flex-direction: row; gap: 0.35rem; align-items: baseline; }
  .conversion-guide__price-from { margin-bottom: 0; }
}

.conversion-guide__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(251, 191, 36, 0.18);
  border: 1px solid rgba(251, 191, 36, 0.4);
  color: #fde68a;
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
  transition: transform 0.2s ease, background 0.2s ease;
}
@media (min-width: 720px) {
  .conversion-guide__arrow { width: 30px; height: 30px; }
}

/* Hover/focus: lift + glow oro + arrow shift. */
.conversion-guide__button:hover,
.conversion-guide__button:focus-visible {
  transform: translateY(-2px);
  background: rgba(251, 191, 36, 0.1);
  border-color: rgba(251, 191, 36, 0.55);
  box-shadow: 0 18px 36px rgba(251, 191, 36, 0.22), 0 8px 20px rgba(20, 12, 40, 0.4);
  outline: none;
  color: #ffffff;
  text-decoration: none;
}
.conversion-guide__button:hover .conversion-guide__icon,
.conversion-guide__button:focus-visible .conversion-guide__icon {
  box-shadow: 0 0 0 6px rgba(251, 191, 36, 0.18);
  transform: scale(1.05);
}
.conversion-guide__button:hover .conversion-guide__arrow,
.conversion-guide__button:focus-visible .conversion-guide__arrow {
  transform: translateX(3px);
  background: rgba(251, 191, 36, 0.32);
}

/* Varianti per tema CTA (intensita' border riconoscibile). */
.conversion-guide__button--cheap { border-color: rgba(96, 165, 250, 0.3); }
.conversion-guide__button--urgent { border-color: rgba(251, 146, 60, 0.4); }
.conversion-guide__button--complex { border-color: rgba(168, 85, 247, 0.4); }

/* ---------- Footer note ---------- */
.conversion-guide__note {
  margin: 0;
  padding: 0.65rem 0.9rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px dashed rgba(251, 191, 36, 0.32);
  color: rgba(245, 243, 255, 0.85);
  font-size: 0.85rem;
  line-height: 1.4;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.conversion-guide__note strong { color: #fde68a; font-weight: 700; }

/* Dark mode: `dark.css` ha la regola broad `html:is(.theme-dark,[data-bs-theme='dark']) a`
   (specificity 0,2,1) che imposta color: var(--alu-accent) (lavanda) su tutti i link,
   piu' `body *` (0,2,2) con `color: inherit` che propaga la lavanda a tutti i discendenti.
   Sulla pill `.conversion-guide__price` (gradient oro) e sulla arrow gold, la lavanda
   diventa illeggibile. Ripristiniamo i token corretti con selettore a specificity 0,2,2
   che vince sulla regola broad. Per i sub-span della pill usiamo `color: inherit` cosi'
   che ereditino dal contenitore .price (gia' corretto). */
html:is(.theme-dark, [data-bs-theme='dark']) .conversion-guide__button .conversion-guide__price {
  color: #1a1438;
}
html:is(.theme-dark, [data-bs-theme='dark']) .conversion-guide__button .conversion-guide__price-from,
html:is(.theme-dark, [data-bs-theme='dark']) .conversion-guide__button .conversion-guide__price-value {
  color: inherit;
}
html:is(.theme-dark, [data-bs-theme='dark']) .conversion-guide__button .conversion-guide__arrow {
  color: #fde68a;
}
html:is(.theme-dark, [data-bs-theme='dark']) .conversion-guide__button .conversion-guide__button-label {
  color: #ffffff;
}
html:is(.theme-dark, [data-bs-theme='dark']) .conversion-guide__button .conversion-guide__button-tagline {
  color: rgba(245, 243, 255, 0.78);
}

/* ── conversion-content-cta: card moderna, token-scoped, light/dark ── */
.conversion-content-cta {
  --ccc-bg: linear-gradient(160deg, rgba(255, 255, 255, 0.99) 0%, rgba(248, 244, 255, 0.96) 100%);
  --ccc-top: linear-gradient(90deg, #f59e0b 0%, #fbbf24 45%, #fde68a 100%);
  --ccc-border: rgba(78, 39, 134, 0.14);
  --ccc-shadow: 0 2px 6px rgba(18, 28, 60, 0.06), 0 10px 28px rgba(18, 28, 60, 0.12);
  --ccc-text: #2e1d4a;
  --ccc-muted: rgba(24, 32, 51, 0.7);
  --ccc-eyebrow-bg: rgba(251, 191, 36, 0.12);
  --ccc-eyebrow-border: rgba(251, 191, 36, 0.42);
  --ccc-eyebrow-color: #b45309;
  --ccc-title-gradient: linear-gradient(135deg, #2e1d4a 0%, #4e2786 55%, #6b3aa0 100%);
  --ccc-btn-p-bg: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  --ccc-btn-p-text: #2e1d4a;
  --ccc-btn-p-shadow: 0 4px 14px rgba(251, 191, 36, 0.35);
  --ccc-btn-p-hover-shadow: 0 6px 20px rgba(251, 191, 36, 0.52);
  --ccc-btn-s-bg: transparent;
  --ccc-btn-s-border: rgba(78, 39, 134, 0.38);
  --ccc-btn-s-text: #4e2786;
  --ccc-btn-s-hover-bg: rgba(78, 39, 134, 0.06);
  --ccc-focus: rgba(180, 83, 9, 0.80);
  width: min(760px, calc(100% - 1rem));
  margin: 1.25rem auto 1.75rem;
  padding: calc(4px + 1.1rem) 1.1rem 1.4rem;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--ccc-bg);
  border: 1px solid var(--ccc-border);
  border-radius: 20px;
  box-shadow: var(--ccc-shadow);
  color: var(--ccc-text);
  text-align: center;
}

.conversion-content-cta::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--ccc-top);
  border-radius: 20px 20px 0 0;
}

.conversion-content-cta__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
}

.conversion-content-cta__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
  background: var(--ccc-eyebrow-bg);
  border: 1px solid var(--ccc-eyebrow-border);
  color: var(--ccc-eyebrow-color);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.conversion-content-cta__eyebrow::before {
  content: "✦";
  font-size: 0.6rem;
  opacity: 0.9;
  flex: 0 0 auto;
}

.conversion-content-cta__title {
  margin: 0;
  color: var(--ccc-text);
  font-size: clamp(1.3rem, 5vw, 1.85rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .conversion-content-cta__title {
    background: var(--ccc-title-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.conversion-content-cta__lead {
  margin: 0;
  color: var(--ccc-muted);
  font-size: clamp(0.92rem, 2.4vw, 1rem);
  line-height: 1.55;
  max-width: 54ch;
}

.conversion-content-cta__actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem;
  width: 100%;
  margin-top: 1.25rem;
}

.conversion-content-cta__primary,
.conversion-content-cta__secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0.8rem 1.1rem;
  border-radius: 14px;
  font-weight: 800;
  font-size: clamp(0.9rem, 2.4vw, 0.98rem);
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.conversion-content-cta__primary {
  background: var(--ccc-btn-p-bg);
  color: var(--ccc-btn-p-text);
  box-shadow: var(--ccc-btn-p-shadow);
  border: none;
}

.conversion-content-cta__primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--ccc-btn-p-hover-shadow);
}

.conversion-content-cta__secondary {
  background: var(--ccc-btn-s-bg);
  color: var(--ccc-btn-s-text);
  border: 1.5px solid var(--ccc-btn-s-border);
}

.conversion-content-cta__secondary:hover {
  background: var(--ccc-btn-s-hover-bg);
  transform: translateY(-2px);
}

.conversion-content-cta__primary:focus-visible {
  outline: none;
  box-shadow: var(--ccc-btn-p-shadow), 0 0 0 3px var(--ccc-focus);
}

.conversion-content-cta__secondary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ccc-focus);
}

/* ── Dark mode ── */
html:is(.theme-dark, [data-bs-theme='dark']) .conversion-content-cta {
  --ccc-bg: linear-gradient(160deg, rgba(9, 13, 30, 0.99) 0%, rgba(28, 16, 58, 0.97) 100%);
  --ccc-top: linear-gradient(90deg, #d97706 0%, #fbbf24 45%, #fde68a 100%);
  --ccc-border: rgba(253, 230, 138, 0.22);
  --ccc-shadow: 0 4px 16px rgba(0, 0, 0, 0.28), 0 14px 36px rgba(0, 0, 0, 0.44);
  --ccc-text: #f5f3ff;
  --ccc-muted: rgba(245, 243, 255, 0.72);
  --ccc-eyebrow-bg: rgba(251, 191, 36, 0.12);
  --ccc-eyebrow-border: rgba(251, 191, 36, 0.38);
  --ccc-eyebrow-color: #fde68a;
  --ccc-title-gradient: linear-gradient(135deg, #e8e0ff 0%, #c4a8ff 55%, #fde68a 100%);
  --ccc-btn-p-bg: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
  --ccc-btn-p-text: #1a0a00;
  --ccc-btn-p-shadow: 0 4px 14px rgba(251, 191, 36, 0.28);
  --ccc-btn-p-hover-shadow: 0 6px 20px rgba(251, 191, 36, 0.44);
  --ccc-btn-s-bg: rgba(253, 230, 138, 0.08);
  --ccc-btn-s-border: rgba(253, 230, 138, 0.38);
  --ccc-btn-s-text: #fde68a;
  --ccc-btn-s-hover-bg: rgba(253, 230, 138, 0.16);
}

html:is(.theme-light, [data-bs-theme='light']) .conversion-content-cta {
  --ccc-bg: linear-gradient(160deg, rgba(255, 255, 255, 0.99) 0%, rgba(248, 244, 255, 0.96) 100%);
  --ccc-text: #2e1d4a;
}

/* dark.css broad `a { color: var(--alu-accent) }` rule has specificity (0,1,2) which
   beats the base .conversion-content-cta__primary rule (0,1,0) and turns the gold
   button text lavender. This rule restores the correct dark token at (0,2,1). */
html:is(.theme-dark, [data-bs-theme='dark']) .conversion-content-cta__primary,
html:is(.theme-dark, [data-bs-theme='dark']) .conversion-content-cta__primary:hover,
html:is(.theme-dark, [data-bs-theme='dark']) .conversion-content-cta__primary:focus-visible {
  color: var(--ccc-btn-p-text);
}

/* ── Discount note (indipendente, mantiene stile originale) ── */
.conversion-discount-note {
  display: flex;
  gap: .45rem;
  align-items: center;
  justify-content: center;
  margin-top: .75rem;
  padding: .8rem 1rem;
  font-size: .95rem;
  text-align: center;
  background: linear-gradient(135deg, rgba(248, 244, 255, 0.96) 0%, rgba(255, 255, 255, 0.99) 100%);
  border: 1px solid rgba(78, 39, 134, 0.14);
  box-shadow: 0 2px 8px rgba(18, 28, 60, 0.08);
}

.conversion-discount-note strong {
  color: #172039;
}

.conversion-discount-note span {
  color: rgba(24, 32, 51, .72);
}

html:is(.theme-dark, [data-bs-theme='dark']) .conversion-discount-note {
  border-color: rgba(145, 161, 255, .2);
  background:
    radial-gradient(circle at top left, rgba(64, 89, 180, .26), rgba(19, 24, 44, .74)),
    linear-gradient(135deg, rgba(18, 24, 45, .96), rgba(22, 31, 59, .92));
  box-shadow: 0 14px 34px rgba(0, 0, 0, .22);
  color: #f3f6ff;
}

html:is(.theme-dark, [data-bs-theme='dark']) .conversion-discount-note span {
  color: rgba(230, 235, 255, .72);
}

html:is(.theme-dark, [data-bs-theme='dark']) .conversion-discount-note strong {
  color: #f3f6ff;
}

/* ── Responsive ── */
@media (min-width: 480px) {
  .conversion-content-cta__actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 560px;
    margin-inline: auto;
  }
}

@media (min-width: 720px) {
  .conversion-content-cta {
    width: min(760px, calc(100% - 2rem));
    padding: calc(4px + 1.35rem) 1.6rem 1.6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .conversion-content-cta__primary,
  .conversion-content-cta__secondary {
    transition: none;
  }
  .conversion-content-cta__primary:hover,
  .conversion-content-cta__secondary:hover {
    transform: none;
  }
  .conversion-guide__button,
  .conversion-guide__icon,
  .conversion-guide__arrow {
    transition: none;
  }
  .conversion-guide__button:hover,
  .conversion-guide__button:focus-visible {
    transform: none;
  }
  .conversion-guide__button:hover .conversion-guide__icon,
  .conversion-guide__button:focus-visible .conversion-guide__icon,
  .conversion-guide__button:hover .conversion-guide__arrow,
  .conversion-guide__button:focus-visible .conversion-guide__arrow {
    transform: none;
  }
}

/* ==========================================================
   FEA.LIGHT.2b — variante LIGHT della Scelta guidata.
   Override SOLO in scope light (default = aspetto scuro
   attuale, dark invariato per costruzione). Resta il blocco
   protagonista: card chiara con tinta oro/lilla, bordo ambra
   e ombra media per enfasi (design-system §3.0/§3.4).
   ========================================================== */
html:is(.theme-light, [data-bs-theme='light']) .conversion-guide {
  color: var(--alu-text);
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(251, 191, 36, 0.18) 0%, transparent 55%),
    radial-gradient(110% 70% at 100% 100%, rgba(168, 85, 247, 0.12) 0%, transparent 60%),
    linear-gradient(160deg, #ffffff 0%, #f6f0ff 100%);
  border-color: rgba(180, 83, 9, 0.35);
  box-shadow: 0 10px 24px rgba(20, 12, 40, 0.12);
}
html:is(.theme-light, [data-bs-theme='light']) .conversion-guide__eyebrow {
  color: #92400e;
  background: rgba(251, 191, 36, 0.16);
  border-color: rgba(180, 83, 9, 0.42);
}
html:is(.theme-light, [data-bs-theme='light']) .conversion-guide__title {
  color: var(--alu-text);
}
html:is(.theme-light, [data-bs-theme='light']) .conversion-guide__lead {
  color: rgba(37, 22, 54, 0.8);
}
html:is(.theme-light, [data-bs-theme='light']) .conversion-guide__toggle {
  color: var(--alu-text-on-gold);
  box-shadow: 0 8px 20px rgba(180, 83, 9, 0.20);
}
html:is(.theme-light, [data-bs-theme='light']) .conversion-guide__toggle:hover,
html:is(.theme-light, [data-bs-theme='light']) .conversion-guide__toggle:focus-visible {
  box-shadow: 0 14px 28px rgba(180, 83, 9, 0.26), 0 0 0 3px rgba(180, 83, 9, 0.22);
}
html:is(.theme-light, [data-bs-theme='light']) .conversion-guide__lead strong {
  color: #92400e;
}
html:is(.theme-light, [data-bs-theme='light']) .conversion-guide__button {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(46, 29, 84, 0.14);
  color: var(--alu-text);
  box-shadow: 0 4px 12px rgba(20, 12, 40, 0.08);
}
html:is(.theme-light, [data-bs-theme='light']) .conversion-guide__button-label {
  color: var(--alu-text);
}
html:is(.theme-light, [data-bs-theme='light']) .conversion-guide__button-tagline {
  color: rgba(37, 22, 54, 0.7);
}
html:is(.theme-light, [data-bs-theme='light']) .conversion-guide__arrow {
  background: rgba(251, 191, 36, 0.2);
  border-color: rgba(180, 83, 9, 0.4);
  color: #92400e;
}
html:is(.theme-light, [data-bs-theme='light']) .conversion-guide__button:hover,
html:is(.theme-light, [data-bs-theme='light']) .conversion-guide__button:focus-visible {
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(180, 83, 9, 0.55);
  color: var(--alu-text);
}
html:is(.theme-light, [data-bs-theme='light']) .conversion-guide__note {
  background: rgba(46, 29, 84, 0.05);
  border-color: rgba(180, 83, 9, 0.35);
  color: rgba(37, 22, 54, 0.82);
}
html:is(.theme-light, [data-bs-theme='light']) .conversion-guide__note strong {
  color: #92400e;
}


/* ==========================================================
   Scelta guidata compatta a rami
   ========================================================== */
.conversion-guide {
  width: min(680px, calc(100% - 1rem));
  margin: .7rem auto .85rem;
  padding: 0;
  display: flex;
  justify-content: center;
  color: inherit;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
}

.conversion-guide__launcher {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: min(100%, 360px);
  min-height: 42px;
  padding: .72rem 1rem;
  border: 1px solid rgba(180, 83, 9, .34);
  border-radius: 999px;
  color: #23143d;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  box-shadow: 0 8px 18px rgba(180, 83, 9, .22);
  font-weight: 800;
  font-size: .95rem;
  line-height: 1.1;
  letter-spacing: 0;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.conversion-guide__launcher:hover,
.conversion-guide__launcher:focus-visible {
  transform: translateY(-1px);
  filter: saturate(1.04);
  box-shadow: 0 12px 24px rgba(180, 83, 9, .28), 0 0 0 3px rgba(251, 191, 36, .22);
  outline: 0;
}

.conversion-guide__launcher-icon {
  flex: 0 0 auto;
  font-size: .9rem;
}

.conversion-guide-modal {
  --cgm-bg: var(--alu-modal-bg, #ffffff);
  --cgm-surface: rgba(255, 255, 255, .94);
  --cgm-text: var(--alu-modal-text, #2e1d4a);
  --cgm-muted: rgba(46, 29, 74, .68);
  --cgm-border: rgba(78, 39, 134, .16);
  --cgm-border-strong: rgba(180, 83, 9, .36);
  --cgm-accent: #f59e0b;
  --cgm-purple: #5b3db2;
  position: fixed;
  inset: 0;
  z-index: var(--alu-z-modal-bs, 1080);
  display: none;
  align-items: center;
  justify-content: center;
  padding: .5rem;
  color: var(--cgm-text);
}

.conversion-guide-modal.is-visible {
  display: flex;
}

.conversion-guide-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 7, 28, .68);
  backdrop-filter: blur(6px);
}

.conversion-guide-modal__dialog {
  position: relative;
  width: min(520px, calc(100vw - 1rem));
  max-height: min(88vh, 720px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  border: 1px solid var(--cgm-border-strong);
  border-radius: 18px;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(251, 191, 36, .13), transparent 55%),
    radial-gradient(100% 75% at 100% 100%, rgba(124, 58, 237, .11), transparent 62%),
    var(--cgm-bg);
  box-shadow: 0 28px 70px rgba(8, 5, 28, .34);
}

.conversion-guide-modal__header,
.conversion-guide-modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .8rem .9rem;
}

.conversion-guide-modal__header {
  border-bottom: 1px solid var(--cgm-border);
}

.conversion-guide-modal__footer {
  border-top: 1px solid var(--cgm-border);
  background: rgba(255, 255, 255, .38);
}

.conversion-guide-modal__title {
  margin: 0;
  font-size: 1rem;
  line-height: 1.15;
  color: var(--cgm-text);
}

.conversion-guide-modal__close,
.conversion-guide-modal__back,
.conversion-guide-modal__reset {
  border: 1px solid var(--cgm-border);
  border-radius: 999px;
  color: var(--cgm-text);
  background: rgba(255, 255, 255, .72);
  font-weight: 800;
  cursor: pointer;
}

.conversion-guide-modal__close {
  width: 36px;
  height: 36px;
  padding: 0;
  font-size: 1.25rem;
  line-height: 1;
}

.conversion-guide-modal__back,
.conversion-guide-modal__reset {
  min-height: 36px;
  padding: .55rem .85rem;
  font-size: .84rem;
}

.conversion-guide-modal__close:focus-visible,
.conversion-guide-modal__back:focus-visible,
.conversion-guide-modal__reset:focus-visible,
.conversion-guide-modal__choice:focus-visible,
.conversion-guide-result__cta:focus-visible,
.conversion-guide-result__alt:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, .32);
}

.conversion-guide-modal__body {
  min-height: 0;
  overflow-y: auto;
  padding: 1rem;
}

.conversion-guide-modal__pane {
  display: grid;
  gap: .85rem;
}

.conversion-guide-modal__pane.is-entering {
  animation: conversion-guide-slide-in .22s ease both;
}

.conversion-guide-modal__step-head {
  display: grid;
  gap: .28rem;
  text-align: center;
}

.conversion-guide-modal__progress {
  justify-self: center;
  padding: .18rem .5rem;
  border: 1px solid rgba(180, 83, 9, .3);
  border-radius: 999px;
  color: #92400e;
  background: rgba(251, 191, 36, .12);
  font-size: .68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.conversion-guide-modal__question {
  margin: 0;
  font-size: clamp(1.28rem, 2.8vw, 1.65rem);
  line-height: 1.1;
  color: var(--cgm-text);
}

.conversion-guide-modal__lead {
  margin: 0;
  color: var(--cgm-muted);
  font-size: .92rem;
  line-height: 1.35;
}

.conversion-guide-modal__choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem;
}

.conversion-guide-modal__choice {
  min-height: 118px;
  display: grid;
  align-content: center;
  gap: .4rem;
  padding: .9rem;
  border: 1px solid var(--cgm-border);
  border-radius: 14px;
  color: var(--cgm-text);
  background: var(--cgm-surface);
  box-shadow: 0 8px 20px rgba(20, 12, 40, .08);
  text-align: left;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.conversion-guide-modal__choice:hover {
  transform: translateY(-2px);
  border-color: var(--cgm-border-strong);
  box-shadow: 0 12px 26px rgba(20, 12, 40, .12);
}

.conversion-guide-modal__choice strong,
.conversion-guide-modal__choice span {
  display: block;
}

.conversion-guide-modal__choice strong {
  font-size: .98rem;
  line-height: 1.15;
}

.conversion-guide-modal__choice span {
  color: var(--cgm-muted);
  font-size: .82rem;
  line-height: 1.25;
}

.conversion-guide-result {
  display: grid;
  gap: .75rem;
}

.conversion-guide-result__label {
  margin: 0;
  color: #92400e;
  font-size: .72rem;
  font-weight: 900;
  text-transform: uppercase;
  text-align: center;
}

.conversion-guide-result__card {
  display: grid;
  gap: .6rem;
  padding: .95rem;
  border: 1px solid var(--cgm-border);
  border-radius: 16px;
  background: var(--cgm-surface);
  box-shadow: 0 10px 26px rgba(20, 12, 40, .1);
}

.conversion-guide-result__title {
  margin: 0;
  font-size: 1.18rem;
  line-height: 1.12;
  color: var(--cgm-text);
}

.conversion-guide-result__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.conversion-guide-result__meta span {
  padding: .28rem .48rem;
  border-radius: 999px;
  color: #241236;
  background: rgba(251, 191, 36, .24);
  font-size: .78rem;
  font-weight: 800;
}

.conversion-guide-result__reason,
.conversion-guide-result__secondary {
  margin: 0;
  color: var(--cgm-muted);
  font-size: .9rem;
  line-height: 1.35;
}

.conversion-guide-result__reader-head {
  display: flex;
  align-items: center;
  gap: .8rem;
}

.conversion-guide-result__reader-head img {
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  border-radius: 14px;
  object-fit: cover;
  background: rgba(46, 29, 74, .08);
}

.conversion-guide-result__actions {
  display: grid;
  gap: .55rem;
}

.conversion-guide-result__cta,
.conversion-guide-result__alt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: .72rem .9rem;
  border-radius: 999px;
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
}

.conversion-guide-result__cta {
  color: #231000;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  box-shadow: 0 9px 20px rgba(180, 83, 9, .24);
}

.conversion-guide-result__alt {
  color: var(--cgm-purple);
  background: rgba(124, 58, 237, .08);
  border: 1px solid rgba(124, 58, 237, .18);
}

html:is(.theme-dark, [data-bs-theme='dark']) .conversion-guide__launcher {
  color: #211200;
  border-color: rgba(253, 230, 138, .38);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .28), 0 0 18px rgba(251, 191, 36, .13);
}

html:is(.theme-dark, [data-bs-theme='dark']) .conversion-guide-modal {
  --cgm-bg: #151225;
  --cgm-surface: rgba(30, 25, 50, .96);
  --cgm-text: #f7f2ff;
  --cgm-muted: rgba(247, 242, 255, .74);
  --cgm-border: rgba(226, 214, 255, .16);
  --cgm-border-strong: rgba(253, 230, 138, .34);
  --cgm-purple: #dac8ff;
}

html:is(.theme-dark, [data-bs-theme='dark']) .conversion-guide-modal__footer,
html:is(.theme-dark, [data-bs-theme='dark']) .conversion-guide-modal__close,
html:is(.theme-dark, [data-bs-theme='dark']) .conversion-guide-modal__back,
html:is(.theme-dark, [data-bs-theme='dark']) .conversion-guide-modal__reset {
  background: rgba(255, 255, 255, .06);
}

html:is(.theme-dark, [data-bs-theme='dark']) .conversion-guide-modal__progress,
html:is(.theme-dark, [data-bs-theme='dark']) .conversion-guide-result__label {
  color: #fde68a;
}

html:is(.theme-dark, [data-bs-theme='dark']) .conversion-guide-result__meta span {
  color: #fdecc6;
  background: rgba(251, 191, 36, .16);
}

html:is(.theme-dark, [data-bs-theme='dark']) .conversion-guide-result__alt {
  color: #eadfff;
  background: rgba(168, 85, 247, .14);
  border-color: rgba(216, 180, 254, .22);
}

@media (max-width: 420px) {
  .conversion-guide {
    margin-block: .45rem .65rem;
  }
  .conversion-guide__launcher {
    width: 100%;
    min-height: 40px;
    padding: .68rem .82rem;
    font-size: .88rem;
  }
  .conversion-guide-modal__dialog {
    max-height: 92vh;
    border-radius: 16px;
  }
  .conversion-guide-modal__header,
  .conversion-guide-modal__footer {
    padding: .7rem;
  }
  .conversion-guide-modal__body {
    padding: .78rem;
  }
  .conversion-guide-modal__choices {
    grid-template-columns: 1fr;
    gap: .55rem;
  }
  .conversion-guide-modal__choice {
    min-height: 92px;
    padding: .76rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .conversion-guide__launcher,
  .conversion-guide-modal__choice,
  .conversion-guide-modal__pane {
    animation: none;
    transition: none;
  }
  .conversion-guide__launcher:hover,
  .conversion-guide__launcher:focus-visible,
  .conversion-guide-modal__choice:hover {
    transform: none;
  }
}

@keyframes conversion-guide-slide-in {
  from {
    opacity: 0;
    transform: translateX(18px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}


/* Allineamento markup finale modal scelta guidata */
.conversion-guide-modal__dialog {
  grid-template-rows: auto auto auto 1fr auto;
  padding-top: .45rem;
}

.conversion-guide-modal__close {
  position: absolute;
  top: .62rem;
  right: .62rem;
  z-index: 2;
}

.conversion-guide-modal__topline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .7rem 3.25rem .2rem;
}

.conversion-guide-modal__kicker,
.conversion-guide-modal__progress {
  padding: .18rem .5rem;
  border: 1px solid rgba(180, 83, 9, .3);
  border-radius: 999px;
  color: #92400e;
  background: rgba(251, 191, 36, .12);
  font-size: .68rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.conversion-guide-modal__title,
.conversion-guide-modal__lead {
  padding-inline: 1rem;
  text-align: center;
}

.conversion-guide-modal__viewport {
  min-height: 0;
  overflow-y: auto;
  padding: .85rem 1rem 1rem;
}

.conversion-guide-result__eyebrow {
  color: #92400e;
  font-size: .72rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.conversion-guide-result__text {
  margin: 0;
  color: var(--cgm-muted);
  font-size: .9rem;
  line-height: 1.35;
}

.conversion-guide-result__meta {
  margin: 0;
  color: var(--cgm-muted);
  font-size: .86rem;
  line-height: 1.3;
}

html:is(.theme-dark, [data-bs-theme='dark']) .conversion-guide-modal__kicker,
html:is(.theme-dark, [data-bs-theme='dark']) .conversion-guide-modal__progress,
html:is(.theme-dark, [data-bs-theme='dark']) .conversion-guide-result__eyebrow {
  color: #fde68a;
}

@media (max-width: 420px) {
  .conversion-guide-modal__topline {
    padding: .65rem 2.9rem .15rem;
  }
  .conversion-guide-modal__title,
  .conversion-guide-modal__lead {
    padding-inline: .8rem;
  }
  .conversion-guide-modal__viewport {
    padding: .72rem .78rem .82rem;
  }
}

.conversion-guide-result p.conversion-guide-result__meta {
  display: block;
}


/* Scelta guidata: override finale launcher compatto */
.conversion-guide,
html:is(.theme-light, .theme-dark, [data-bs-theme='light'], [data-bs-theme='dark']) .conversion-guide {
  width: fit-content !important;
  max-width: calc(100% - 1.5rem) !important;
  min-height: 0 !important;
  margin: .45rem auto .6rem !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.conversion-guide::before,
.conversion-guide::after {
  content: none !important;
  display: none !important;
}

.conversion-guide--home {
  margin-block: .35rem .5rem !important;
}

.conversion-guide--cartomanti {
  margin-block: .55rem .75rem !important;
}

.conversion-guide__launcher {
  width: auto !important;
  max-width: 100% !important;
  min-height: 36px !important;
  padding: .58rem .95rem !important;
  gap: .4rem !important;
  border-radius: 999px !important;
  font-size: .86rem !important;
  box-shadow: 0 6px 14px rgba(180, 83, 9, .18) !important;
}

.conversion-guide-modal__dialog {
  width: min(500px, calc(100vw - 1.25rem));
  border-radius: 16px;
}

.conversion-guide-result__title,
.conversion-guide-result__alt,
.conversion-guide-result__cta {
  overflow-wrap: anywhere;
}

@media (max-width: 520px) {
  .conversion-guide {
    width: min(100%, calc(100% - 1rem)) !important;
  }

  .conversion-guide__launcher {
    width: 100% !important;
    min-height: 40px !important;
    padding-inline: .8rem !important;
    font-size: .84rem !important;
  }

  .conversion-guide-modal__choices {
    grid-template-columns: 1fr;
  }
}


/* Scelta guidata launcher card v2 */
.conversion-guide,
html:is(.theme-light, .theme-dark, [data-bs-theme='light'], [data-bs-theme='dark']) .conversion-guide {
  width: min(360px, calc(100% - 1rem)) !important;
  max-width: min(360px, calc(100% - 1rem)) !important;
  margin: .55rem auto .7rem !important;
}

.conversion-guide--home {
  margin-block: .4rem .55rem !important;
}

.conversion-guide--cartomanti {
  margin-block: .5rem .65rem !important;
}

.conversion-guide-card.conversion-guide__launcher {
  position: relative;
  width: 100% !important;
  min-height: 66px !important;
  justify-content: flex-start;
  gap: .75rem !important;
  padding: .52rem .75rem .52rem .52rem !important;
  border: 1px solid rgba(180, 83, 9, .28) !important;
  border-radius: 14px !important;
  color: #25163e;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(255, 246, 218, .94) 52%, rgba(245, 158, 11, .18)),
    #fffaf0 !important;
  box-shadow: 0 10px 22px rgba(31, 20, 52, .12), 0 3px 10px rgba(180, 83, 9, .12) !important;
  animation: conversion-guide-card-rise .55s cubic-bezier(.2, .8, .2, 1) both;
  overflow: hidden;
  text-align: left;
}

.conversion-guide-card.conversion-guide__launcher::after {
  content: '' !important;
  position: absolute;
  inset: 0;
  display: block !important;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 0 35%, rgba(255,255,255,.42) 45%, transparent 56%);
  transform: translateX(-120%);
  animation: conversion-guide-card-sheen 2.8s .65s ease-out both;
}

.conversion-guide-card__media {
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(91, 61, 178, .12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.65);
}

.conversion-guide-card__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.conversion-guide-card__copy {
  position: relative;
  z-index: 1;
  display: block;
  min-width: 0;
  font-size: .95rem;
  line-height: 1.18;
  font-weight: 900;
  letter-spacing: 0;
}

.conversion-guide-card.conversion-guide__launcher:hover,
.conversion-guide-card.conversion-guide__launcher:focus-visible {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 14px 28px rgba(31, 20, 52, .16), 0 4px 14px rgba(180, 83, 9, .18) !important;
}

.conversion-guide-result__details {
  display: inline-flex;
  justify-content: center;
  color: var(--cgm-purple);
  font-size: .86rem;
  font-weight: 850;
  text-decoration: none;
}

.conversion-guide-result__cta--buy {
  border: 0;
  cursor: pointer;
  font-size: .98rem;
}

@keyframes conversion-guide-card-rise {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes conversion-guide-card-sheen {
  0% { transform: translateX(-120%); }
  45%, 100% { transform: translateX(120%); }
}

@media (prefers-reduced-motion: reduce) {
  .conversion-guide-card.conversion-guide__launcher,
  .conversion-guide-card.conversion-guide__launcher::after {
    animation: none !important;
  }
}

html:is(.theme-dark, [data-bs-theme='dark']) .conversion-guide-card.conversion-guide__launcher {
  border-color: rgba(251, 191, 36, .30) !important;
  color: #fff8db;
  background:
    linear-gradient(135deg, rgba(31, 28, 55, .98), rgba(48, 34, 76, .94) 58%, rgba(180, 83, 9, .24)),
    #1b1831 !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .34), 0 3px 14px rgba(251, 191, 36, .12) !important;
}

html:is(.theme-dark, [data-bs-theme='dark']) .conversion-guide-card.conversion-guide__launcher::after {
  background: linear-gradient(115deg, transparent 0 35%, rgba(255, 255, 255, .18) 45%, transparent 56%);
}

html:is(.theme-dark, [data-bs-theme='dark']) .conversion-guide-card__media {
  background: rgba(251, 191, 36, .14);
  box-shadow: inset 0 0 0 1px rgba(251, 191, 36, .22);
}

@media (max-width: 420px) {
  .conversion-guide,
  html:is(.theme-light, .theme-dark, [data-bs-theme='light'], [data-bs-theme='dark']) .conversion-guide {
    width: min(342px, calc(100% - 1rem)) !important;
    max-width: min(342px, calc(100% - 1rem)) !important;
  }

  .conversion-guide-card.conversion-guide__launcher {
    min-height: 62px !important;
  }

  .conversion-guide-card__media {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
  }

  .conversion-guide-card__copy {
    font-size: .9rem;
  }
}


/* Scelta guidata: spacing compatto centralizzato per ogni island lazy del widget. */
.alu-lazy-island[data-alu-component='home.guided_choice'],
.alu-lazy-island[data-alu-component='servizi.guided_choice'],
.alu-lazy-island[data-alu-component='cartomanti.guided_choice'],
.alu-lazy-island[data-alu-component='consultoprivato.guided_choice'],
[data-alu-component='home.guided_choice'],
[data-alu-component='servizi.guided_choice'],
[data-alu-component='cartomanti.guided_choice'],
[data-alu-component='consultoprivato.guided_choice'] {
  min-height: var(--alu-lazy-min-height, 5.25rem) !important;
  margin-block: .35rem .5rem !important;
  padding-block: 0 !important;
}

.alu-lazy-island[data-alu-component='home.guided_choice'].is-loaded,
.alu-lazy-island[data-alu-component='servizi.guided_choice'].is-loaded,
.alu-lazy-island[data-alu-component='cartomanti.guided_choice'].is-loaded,
.alu-lazy-island[data-alu-component='consultoprivato.guided_choice'].is-loaded,
.alu-lazy-island[data-alu-component='home.guided_choice'].is-error,
.alu-lazy-island[data-alu-component='servizi.guided_choice'].is-error,
.alu-lazy-island[data-alu-component='cartomanti.guided_choice'].is-error,
.alu-lazy-island[data-alu-component='consultoprivato.guided_choice'].is-error,
.alu-lazy-island[data-alu-component='home.guided_choice'].is-timeout,
.alu-lazy-island[data-alu-component='servizi.guided_choice'].is-timeout,
.alu-lazy-island[data-alu-component='cartomanti.guided_choice'].is-timeout,
.alu-lazy-island[data-alu-component='consultoprivato.guided_choice'].is-timeout,
.alu-lazy-island[data-alu-component='home.guided_choice'].is-empty,
.alu-lazy-island[data-alu-component='servizi.guided_choice'].is-empty,
.alu-lazy-island[data-alu-component='cartomanti.guided_choice'].is-empty,
.alu-lazy-island[data-alu-component='consultoprivato.guided_choice'].is-empty {
  min-height: 0 !important;
}

/* Scelta guidata home spacing and viewport reveal */
.alu-lazy-island[data-alu-component='home.guided_choice'],
[data-alu-component='home.guided_choice'] {
  min-height: 0 !important;
  margin-block: .35rem .45rem !important;
  padding-block: 0 !important;
}

.conversion-guide--home + .service-section,
.conversion-guide--home + #serviceList,
.alu-lazy-island[data-alu-component='home.guided_choice'] + .service-section,
.alu-lazy-island[data-alu-component='home.guided_choice'] + #serviceList {
  margin-top: .75rem !important;
}


.home-buybtns,
[data-home-buybtns] {
  margin-top: .75rem !important;
}

.home-buybtns > .alu-lazy-island[data-alu-component='home.servizi'],
[data-home-buybtns] > .alu-lazy-island[data-alu-component='home.servizi'] {
  min-height: 0 !important;
}

.conversion-guide-card.conversion-guide__launcher {
  opacity: 0;
  transform: translateY(12px) scale(.98);
  animation: none !important;
}

.conversion-guide-card.conversion-guide__launcher::after {
  animation: none !important;
}

.conversion-guide-card.conversion-guide__launcher.is-in-view {
  animation: conversion-guide-card-rise .55s cubic-bezier(.2, .8, .2, 1) both !important;
}

.conversion-guide-card.conversion-guide__launcher.is-in-view::after {
  animation: conversion-guide-card-sheen 2.8s .65s ease-out both !important;
}

.conversion-guide-card.conversion-guide__launcher.is-in-view:hover,
.conversion-guide-card.conversion-guide__launcher.is-in-view:focus-visible {
  transform: translateY(-2px) scale(1.01);
}

.conversion-guide-result__details:focus-visible {
  outline: 0;
  border-radius: 999px;
  box-shadow: 0 0 0 3px rgba(109, 40, 217, .2);
}

@media (prefers-reduced-motion: reduce) {
  .conversion-guide-card.conversion-guide__launcher {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 520px) {
  .alu-lazy-island[data-alu-component='home.guided_choice'],
  [data-alu-component='home.guided_choice'] {
    margin-block: .3rem .45rem !important;
  }
}

/* ── LANDING.PAID.VISIBILITY.1 — link alla landing urgente nel CTA blog ────
   Compare SOLO sugli articoli con intento di urgenza. E' un terzo elemento
   dopo due pulsanti: sta sotto, in corpo minore e senza sfondo, perche' se
   somigliasse a un terzo pulsante spezzerebbe la scelta binaria che i due
   sopra propongono. Usa i token --ccc-* gia' scoped sul componente, quindi
   segue automaticamente il tema. */
.conversion-content-cta__extra {
  margin: 0.85rem 0 0;
  text-align: center;
  font-size: clamp(0.86rem, 2.2vw, 0.92rem);
  line-height: 1.5;
  color: var(--ccc-muted);
}

.conversion-content-cta__landing {
  color: var(--ccc-btn-s-text);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.conversion-content-cta__landing:hover {
  text-decoration-thickness: 2px;
}

.conversion-content-cta__landing:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ccc-focus);
  border-radius: 4px;
}

/* `dark.css` ha la regola broad `html:is(...) a` (0,2,1) che forza
   var(--alu-accent) su ogni link: qui vincerebbe sul token del componente e
   porterebbe la lavanda su un fondo scuro dove non e' stata verificata.
   Selettore a 0,2,1+1 per restare sui token della card, come gia' fatto
   sopra per la pill del prezzo. */
html:is(.theme-dark, [data-bs-theme='dark']) .conversion-content-cta .conversion-content-cta__landing {
  color: var(--ccc-btn-s-text);
}

/* ── home-gc-fallback: contenuto reale per l'island home.guided_choice ─────
   (SEO.HOME.LAZY.EMERGENCY.1, 2026-08-23). Sostituisce lo shimmer con 3 pill
   reali finche' il widget arricchito (dataset pesante, lazy per motivo) non
   si carica. Stesso linguaggio visivo di .service-category-chip: pill
   bordate, non un secondo stile da mantenere. Solo token --alu-*. */
.home-gc-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  text-align: center;
  padding: 0.9rem 1rem;
}

.home-gc-fallback__lead {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--alu-text, #231235);
}

.home-gc-fallback__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-gc-fallback__link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.5rem 1rem;
  border: 1px solid var(--alu-border, rgba(46, 29, 84, 0.16));
  border-radius: var(--alu-radius-pill, 999px);
  background: var(--alu-surface, #fff);
  color: var(--alu-accent-strong, #4e2786);
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
}

.home-gc-fallback__link:hover,
.home-gc-fallback__link:focus-visible {
  color: var(--alu-accent, #6b3aa0);
  border-color: var(--alu-border-strong, rgba(46, 29, 84, 0.34));
}

.home-gc-fallback__link:focus-visible {
  outline: 3px solid var(--alu-gold-a45, rgba(251, 191, 36, 0.45));
  outline-offset: 2px;
}

.home-gc-fallback__price {
  font-weight: 600;
  color: var(--alu-text-muted, rgba(24, 32, 51, 0.76));
}

html:is(.theme-dark, [data-bs-theme='dark']) .home-gc-fallback .home-gc-fallback__link {
  color: var(--alu-accent-strong, #d0b5ff);
}

/* ── CTA.COPPIA.1 — variante a offerta singola ─────────────────────────────
   Usata sugli articoli di legamento/coppia, dove la CTA porta UN pulsante
   solo (form rapido della compatibilita' di coppia). I token sono gli stessi
   della card generica: cambia la densita', non la palette. */
.conversion-content-cta__points {
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.45rem;
  max-width: 54ch;
}

.conversion-content-cta__points li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--ccc-muted);
  font-size: clamp(0.9rem, 2.3vw, 0.98rem);
  line-height: 1.5;
}

/* Il segno di spunta e' decorativo: niente contenuto testuale che uno screen
   reader debba leggere prima di ogni voce. */
.conversion-content-cta__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.62rem;
  height: 0.32rem;
  border-left: 2px solid var(--alu-gold, #f59e0b);
  border-bottom: 2px solid var(--alu-gold, #f59e0b);
  transform: rotate(-45deg);
}

.conversion-content-cta__actions--single {
  display: block;
  margin-top: 1.35rem;
}

/* Il modificatore `.cq-cta--wide` vive in `consulto-quick.css`, accanto a
   `.cq-cta`: quel file e' piu' avanti nel manifest, quindi una regola scritta
   qui verrebbe sovrascritta dal componente che vuole modificare. */

.conversion-content-cta__reassure {
  margin: 0.85rem 0 0;
  color: var(--ccc-muted);
  font-size: clamp(0.78rem, 2vw, 0.85rem);
  line-height: 1.5;
}

/* Source: loader.css */
/* Loader grafico leggero per migliorare il FCP */
:root {
    --loader-surface: rgba(20, 19, 26, 0.9);
    --loader-accent: #b59cff;
    --loader-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
}

.page-loader {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: radial-gradient(circle at 25% 25%, rgba(43, 32, 78, 0.42), transparent 42%),
        radial-gradient(circle at 80% 35%, rgba(32, 58, 97, 0.35), transparent 48%),
        linear-gradient(145deg, rgba(12, 11, 16, 0.86), rgba(22, 20, 29, 0.82));
    backdrop-filter: blur(4px);
    z-index: 11000;
    transition: opacity 260ms ease, visibility 260ms ease;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.page-loader__ring {
    position: relative;
    width: clamp(52px, 8vw, 76px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: conic-gradient(from 120deg, var(--loader-accent), rgba(131, 102, 200, 0.14));
    box-shadow: var(--loader-shadow);
    overflow: hidden;
}

.page-loader__ring::after,
.page-loader__ring::before {
    content: "";
    position: absolute;
    inset: 18%;
    border-radius: 50%;
    background: var(--loader-surface);
}

.page-loader__ring::before {
    inset: 8%;
    background: linear-gradient(135deg, rgba(131, 102, 200, 0.18), rgba(131, 102, 200, 0.04));
    filter: blur(1px);
}

.page-loader__ring::after {
    animation: loader-pulse 1.2s ease-in-out infinite;
}

.page-loader__dot {
    position: absolute;
    inset: 16%;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #ffffff 0, rgba(255, 255, 255, 0.18) 55%, transparent 70%),
        radial-gradient(circle at 70% 70%, rgba(131, 102, 200, 0.2) 0, rgba(131, 102, 200, 0.08) 45%, transparent 70%);
    box-shadow: 0 10px 30px rgba(131, 102, 200, 0.18);
    animation: loader-bounce 1s ease-in-out infinite;
}

.page-loader__hint {
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #f5f3ff;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.page-loader__bar {
    width: clamp(140px, 32vw, 260px);
    height: 4px;
    background: linear-gradient(90deg, rgba(181, 156, 255, 0.32), rgba(181, 156, 255, 0.12));
    border-radius: 999px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.page-loader__bar::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 40%;
    background: linear-gradient(90deg, rgba(181, 156, 255, 0.18), rgba(181, 156, 255, 0.62), rgba(181, 156, 255, 0.16));
    transform: translateX(-100%);
    animation: loader-slide 1.2s ease-in-out infinite;
}

.page-loader--instant {
    transition-duration: 1ms;
    backdrop-filter: none;
}

.page-loader--hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.page-loader__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .page-loader,
    .page-loader__dot,
    .page-loader__bar::after,
    .page-loader__ring::after {
        animation-duration: 2s;
    }
}

@keyframes loader-pulse {
    0%,
    100% {
        transform: scale(0.9);
        opacity: 0.75;
    }
    50% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes loader-bounce {
    0%,
    100% {
        transform: translateY(-4%);
    }
    50% {
        transform: translateY(6%);
    }
}

@keyframes loader-slide {
    0% {
        transform: translateX(-100%);
    }
    50% {
        transform: translateX(60%);
    }
    100% {
        transform: translateX(120%);
    }
}

/* Source: blog.css */
#blog-grid .card {
  width: 100% !important;
}

.blog-card {
  transition: transform .2s ease, box-shadow .2s ease;
}

.blog-card:hover,
.blog-card:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.08);
}

.blog-card__media {
  background-color: #f8f9fa;
}

.blog-card__placeholder {
  font-size: .875rem;
  padding: 1.5rem;
  text-align: center;
}

#blog-search {
  text-align: center;
}

#blog-search::placeholder {
  text-align: center;
}

#blog-search-container {
  position: relative;
}

.blog-tag-hub {
  --blog-tag-hub-bg: linear-gradient(160deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 244, 255, 0.92) 100%);
  --blog-tag-hub-border: rgba(107, 58, 160, 0.18);
  --blog-tag-hub-title: #2e1d4a;
  --blog-tag-hub-text: rgba(24, 32, 51, 0.76);
  --blog-tag-hub-muted: rgba(46, 29, 74, 0.68);
  --blog-tag-hub-link-bg: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  --blog-tag-hub-link-text: #2e1d4a;
  max-width: 980px;
  margin: 0 auto 1.5rem;
  padding: clamp(1rem, 4vw, 1.5rem);
  border: 1px solid var(--blog-tag-hub-border);
  border-radius: 20px;
  background: var(--blog-tag-hub-bg);
  box-shadow: 0 14px 34px rgba(18, 28, 60, 0.16);
  color: var(--blog-tag-hub-text);
}

.blog-tag-hub__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.65rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: rgba(251, 191, 36, 0.16);
  color: var(--blog-tag-hub-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.blog-tag-hub__title {
  margin: 0;
  color: var(--blog-tag-hub-title);
  font-size: clamp(1.35rem, 4.5vw, 1.85rem);
  font-weight: 800;
  line-height: 1.16;
}

.blog-tag-hub__lead {
  margin: 0.75rem 0 0;
  font-size: clamp(0.92rem, 2.4vw, 1rem);
  line-height: 1.62;
}

.blog-tag-hub__answer {
  margin-top: 0.9rem;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  background: rgba(107, 58, 160, 0.08);
  line-height: 1.58;
}

.blog-tag-hub__footer {
  display: grid;
  gap: 0.85rem;
  margin-top: 1rem;
}

.blog-tag-hub__count {
  color: var(--blog-tag-hub-muted);
  font-size: clamp(0.78rem, 2vw, 0.85rem);
  font-weight: 700;
}

.blog-tag-hub__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.blog-tag-hub__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.6rem 0.9rem;
  border-radius: 999px;
  background: var(--blog-tag-hub-link-bg);
  color: var(--blog-tag-hub-link-text);
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(251, 191, 36, 0.28);
}

.blog-tag-hub__link:hover,
.blog-tag-hub__link:focus-visible {
  color: var(--blog-tag-hub-link-text);
  transform: translateY(-1px);
  text-decoration: none;
}

.blog-tag-hub__link:focus-visible {
  outline: 3px solid rgba(251, 191, 36, 0.55);
  outline-offset: 3px;
}

html:is(.theme-dark, [data-bs-theme='dark']) .blog-tag-hub {
  --blog-tag-hub-bg: linear-gradient(160deg, rgba(14, 19, 42, 0.94) 0%, rgba(46, 29, 84, 0.9) 100%);
  --blog-tag-hub-border: rgba(251, 191, 36, 0.22);
  --blog-tag-hub-title: #f5f3ff;
  --blog-tag-hub-text: rgba(245, 243, 255, 0.84);
  --blog-tag-hub-muted: rgba(245, 243, 255, 0.68);
}

@media (min-width: 720px) {
  .blog-tag-hub__footer {
    grid-template-columns: minmax(140px, auto) 1fr;
    align-items: center;
  }

  .blog-tag-hub__links {
    justify-content: flex-end;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blog-tag-hub__link:hover,
  .blog-tag-hub__link:focus-visible {
    transform: none;
  }
}

#blog-search-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background-color: #e0e0e0;
  color: #aaa;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  cursor: pointer;
  display: none;
}

#blog-search-clear.visible {
  display: block;
}

.loader-box {
  color: #000;
  background-color: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  border-radius: 0.5rem;
}

.blogpost-figure {
  display: block;
  margin: 1.5rem auto;
  width: 100%;
  max-width: 100%;
}

.blogpost-figure .blogpost-image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

@media (min-width: 992px) {
  .blogpost-figure {
    float: left;
    margin: 0 1.75rem 1.5rem 0;
    max-width: 300px;
  }

  .blogpost-figure .blogpost-image {
    /* max-width: 300px; */
  }
}

/* Source: blog-article.css */
.blog-article {
  --article-text: #2c3e50;
  --article-heading: #6a0dad;
  --article-accent: #8e44ad;
  --article-accent-soft: #e8b4f0;
  --article-muted: #7f8c8d;
  --article-surface: #ffffff;
  --article-panel: #f8f5ff;
  --article-border: rgba(106, 13, 173, 0.18);
  --article-intro-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --article-intro-text: #ffffff;
  --article-card-bg: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
  --article-card-text: #4b2b12;
  --article-card-heading: #d35400;
  --article-highlight-bg: #fff3cd;
  --article-highlight-border: #ffc107;
  --article-highlight-text: #5f3a00;
  --article-services-bg: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
  --article-services-text: #1f2a33;
  --article-services-item-bg: #ffffff;
  --article-services-item-text: #2c3e50;
  --article-conclusion-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --article-conclusion-text: #ffffff;
  color: var(--article-text);
  font-family: 'Georgia', serif;
  line-height: 1.8;
  background: linear-gradient(135deg, rgba(245, 247, 250, 0.8) 0%, rgba(195, 207, 226, 0.9) 100%);
  padding: clamp(16px, 3vw, 32px) 0;
}

.blog-article,
.blog-article *,
.blog-article *::before,
.blog-article *::after {
  box-sizing: border-box;
}

.blog-article .container {
  max-width: 900px;
  margin: 0 auto;
  background: var(--article-surface);
  padding: clamp(20px, 4vw, 40px);
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(35, 31, 61, 0.12);
}

.blog-article .blog-article__hero {
  text-align: center;
  margin-bottom: clamp(24px, 5vw, 48px);
  padding-bottom: clamp(20px, 4vw, 32px);
  border-bottom: 3px solid var(--article-accent-soft);
}

.blog-article .blog-article__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--article-panel);
  color: var(--article-muted);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.blog-article .blog-article__dot {
  color: var(--article-accent);
}

.blog-article .blog-article__readtime {
  color: var(--article-accent);
}

.blog-article h1 {
  font-size: clamp(1.9em, 3.2vw, 2.7em);
  color: var(--article-heading);
  margin-bottom: 12px;
  line-height: 1.25;
}

.blog-article .subtitle {
  font-size: clamp(1.1em, 2.2vw, 1.3em);
  color: var(--article-muted);
  font-style: italic;
  margin-top: 10px;
}

.blog-article .blog-article__meta {
  margin-top: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.blog-article .blog-article__author {
  display: flex;
  align-items: center;
  gap: 14px;
}

.blog-article .blog-article__author-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

.blog-article .blog-article__author-image {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--article-accent-soft);
  box-shadow: 0 8px 18px rgba(106, 13, 173, 0.15);
}

.blog-article .blog-article__author-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.blog-article .blog-article__author-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--article-muted);
}

.blog-article .blog-article__author-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--article-heading);
  text-transform: capitalize;
}

.blog-article .blog-article__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.blog-article h2 {
  font-size: clamp(1.4em, 2.6vw, 1.8em);
  color: var(--article-accent);
  margin: 40px 0 20px;
  padding-left: 15px;
  border-left: 5px solid var(--article-accent-soft);
}

.blog-article h3 {
  font-size: clamp(1.2em, 2.2vw, 1.4em);
  color: #9b59b6;
  margin: 30px 0 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.blog-article p {
  margin-bottom: 20px;
  font-size: 1.1em;
  text-align: justify;
}

.blog-article .intro-box {
  background: var(--article-intro-bg);
  color: var(--article-intro-text);
  padding: clamp(20px, 4vw, 30px);
  border-radius: 14px;
  margin: 30px 0;
  box-shadow: 0 5px 20px rgba(102, 126, 234, 0.3);
}

.blog-article .intro-box p {
  margin-bottom: 0;
  font-size: 1.15em;
}

.blog-article .intro-box strong {
  color: #ffd700;
}

.blog-article .blog-article__figure {
  margin: 24px auto;
  max-width: min(100%, 760px);
  border-radius: 16px;
  overflow: hidden;
}

.blog-article .blog-article__figure img {
  width: 100%;
  height: auto;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

.blog-article .blog-article__figure--full {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  float: none;
  margin: 24px auto 30px;
}

.blog-article .blog-article__figure--full img {
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

@media (min-width: 992px) {
  .blog-article .blog-article__figure--float {
    float: left;
    margin: 0 28px 18px 0;
    max-width: min(45%, 360px);
  }
}

.blog-article .blog-article__content {
  font-size: 1.05rem;
}

.blog-article .zodiac-section {
  background: #f8f9fa;
  padding: 25px;
  margin: 20px 0;
  border-radius: 10px;
  border-left: 5px solid #9b59b6;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-article .zodiac-section:hover {
  transform: translateX(5px);
  box-shadow: 0 5px 15px rgba(155, 89, 182, 0.2);
}

.blog-article .zodiac-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  margin: 30px 0;
}

.blog-article .card-box {
  background: var(--article-card-bg);
  color: var(--article-card-text);
  padding: 25px;
  border-radius: 10px;
  margin: 30px 0;
  box-shadow: 0 5px 15px rgba(252, 182, 159, 0.3);
}

.blog-article .card-box h3 {
  color: var(--article-card-heading);
  margin-top: 0;
}

.blog-article .highlight-box {
  background: var(--article-highlight-bg);
  border-left: 5px solid var(--article-highlight-border);
  color: var(--article-highlight-text);
  padding: 20px;
  margin: 25px 0;
  border-radius: 5px;
}

.blog-article .services-box {
  background: var(--article-services-bg);
  color: var(--article-services-text);
  padding: 30px;
  border-radius: 10px;
  margin: 30px 0;
}

.blog-article .services-list {
  list-style: none;
  margin: 20px 0;
  padding-left: 0;
}

.blog-article .services-list li {
  padding: 15px;
  margin: 10px 0;
  background: var(--article-services-item-bg);
  color: var(--article-services-item-text);
  border-radius: 8px;
  transition: transform 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.blog-article .services-list li:hover {
  transform: scale(1.03);
}

.blog-article .services-list a {
  color: var(--article-heading);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.1em;
}

.blog-article .services-list a:hover {
  color: var(--article-accent);
  text-decoration: underline;
}

.blog-article .blog-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  background: rgba(106, 13, 173, 0.12);
  color: white;
  border: 1px solid rgba(106, 13, 173, 0.3);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.blog-article .blog-tag-pill:hover,
.blog-article .blog-tag-pill:focus {
  background: rgba(106, 13, 173, 0.2);
  color: #3b0d5c;
  border-color: rgba(106, 13, 173, 0.5);
}

.blog-article .Frasedelgiorno::after {
  content: '';
  display: block;
  clear: both;
}

.blog-article a {
  color: var(--article-accent);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.blog-article a:hover {
  color: var(--article-heading);
  text-decoration: underline;
}

.blog-article .divider {
  height: 2px;
  background: linear-gradient(to right, transparent, var(--article-accent-soft), transparent);
  margin: 40px 0;
}

.blog-article .blog-article__footer {
  display: flex;
  justify-content: center;
  padding-bottom: 10px;
}

.blog-article .conclusion {
  background: var(--article-conclusion-bg);
  color: var(--article-conclusion-text);
  padding: 30px;
  border-radius: 10px;
  margin-top: 40px;
  text-align: center;
  font-size: 1.2em;
}

.blog-article .emoji {
  font-size: 1.3em;
}

.blog-related-card {
  background: rgba(255, 255, 255, 0.75);
  color: #2c3e50;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.blog-related-card:hover,
.blog-related-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(35, 31, 61, 0.18);
}

.blog-related-card__title {
  color: inherit;
}

.blog-related-card__cta {
  color: rgba(44, 62, 80, 0.55);
}

@media (max-width: 768px) {
  .blog-article .container {
    padding: 20px;
  }

  .blog-article .blog-article__figure--float {
    float: none;
    margin: 24px auto;
    max-width: 100%;
  }

  .blog-article .blog-article__meta {
    flex-direction: column;
    align-items: center;
  }

  .blog-article .blog-article__author-copy {
    text-align: center;
  }

  .blog-article .zodiac-grid {
    grid-template-columns: 1fr;
  }
}

html:is(.theme-dark, [data-bs-theme='dark']) .blog-article {
  --article-text: #e4e6ee;
  --article-heading: #f2ddff;
  --article-accent: #d9c4ff;
  --article-accent-soft: rgba(217, 196, 255, 0.4);
  --article-muted: #b6bcc9;
  --article-surface: #1e1c2b;
  --article-panel: rgba(217, 196, 255, 0.12);
  --article-border: rgba(217, 196, 255, 0.25);
  --article-intro-bg: linear-gradient(135deg, #3a2b63 0%, #2a1f4b 100%);
  --article-intro-text: #f5f3ff;
  --article-card-bg: linear-gradient(135deg, #3b2a1e 0%, #2c1c16 100%);
  --article-card-text: #f6e9df;
  --article-card-heading: #ffb26f;
  --article-highlight-bg: rgba(255, 215, 100, 0.16);
  --article-highlight-border: rgba(255, 193, 7, 0.6);
  --article-highlight-text: #ffe8b3;
  --article-services-bg: linear-gradient(135deg, rgba(61, 126, 140, 0.5) 0%, rgba(130, 79, 120, 0.45) 100%);
  --article-services-text: #f3f6ff;
  --article-services-item-bg: rgba(255, 255, 255, 0.08);
  --article-services-item-text: #f5f7ff;
  --article-conclusion-bg: linear-gradient(135deg, #3a2b63 0%, #2a1f4b 100%);
  --article-conclusion-text: #f5f3ff;
  background: linear-gradient(135deg, rgba(22, 19, 34, 0.95) 0%, rgba(30, 28, 50, 0.95) 100%);
}

html:is(.theme-dark, [data-bs-theme='dark']) .blog-article .container {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

html:is(.theme-dark, [data-bs-theme='dark']) .blog-article .blog-article__eyebrow {
  color: var(--article-muted);
}

html:is(.theme-dark, [data-bs-theme='dark']) .blog-article .blog-tag-pill {
  background: rgba(214, 193, 255, 0.18);
  color: #f3eaff;
  border-color: rgba(214, 193, 255, 0.45);
}

html:is(.theme-dark, [data-bs-theme='dark']) .blog-article .blog-tag-pill:hover,
html:is(.theme-dark, [data-bs-theme='dark']) .blog-article .blog-tag-pill:focus {
  background: rgba(214, 193, 255, 0.28);
  color: #ffffff;
  border-color: rgba(214, 193, 255, 0.7);
}

html:is(.theme-dark, [data-bs-theme='dark']) .blog-article .zodiac-section {
  background: rgba(255, 255, 255, 0.06);
}

html:is(.theme-dark, [data-bs-theme='dark']) .blog-article .services-list li {
  background: var(--article-services-item-bg);
}

html:is(.theme-dark, [data-bs-theme='dark']) .blog-related-card {
  background: rgba(30, 28, 43, 0.9);
  border-color: rgba(214, 193, 255, 0.2);
  color: #f3eaff;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
}

html:is(.theme-dark, [data-bs-theme='dark']) .blog-related-card__cta {
  color: rgba(243, 234, 255, 0.65);
}

/* Source: favorites-gui.css */
.cartomante.card {
  position: relative;
  overflow: visible;
}

.favorite-toggle {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid var(--bs-blue, #0d6efd);
  background-color: rgba(255, 255, 255, 0.92);
  color: var(--bs-blue, #0d6efd);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease, color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 12px rgba(13, 110, 253, 0.15);
  z-index: 2;
}

.favorite-toggle.is-hinting {
  animation: favoriteHintPulse 1.9s ease-in-out infinite;
  box-shadow: 0 14px 28px rgba(242, 176, 30, 0.45);
  border-color: #f2b01e;
  color: #f2b01e;
}

.favorite-toggle.is-hinting--static {
  transform: scale(1.05);
  box-shadow: 0 12px 26px rgba(242, 176, 30, 0.35);
  border-color: #f2b01e;
  color: #f2b01e;
}

@keyframes favoriteHintPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 10px 24px rgba(242, 176, 30, 0.35);
  }
  50% {
    transform: scale(1.16);
    box-shadow: 0 20px 34px rgba(242, 176, 30, 0.52);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 10px 24px rgba(242, 176, 30, 0.35);
  }
}

.favorite-toggle svg {
  pointer-events: none;
}

.favorite-toggle .favorite-icon {
  width: 1.3rem;
  height: 1.3rem;
  fill: transparent;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
}

.favorite-toggle:hover,
.favorite-toggle:focus-visible {
  transform: scale(1.05);
  background-color: rgba(255, 255, 255, 0.98);
  box-shadow: 0 6px 18px rgba(13, 110, 253, 0.2);
  outline: none;
}

.favorite-toggle:focus-visible {
  outline: 2px solid rgba(13, 110, 253, 0.35);
  outline-offset: 2px;
}

.favorite-toggle.is-active {
  color: #f2b01e;
  border-color: #f2b01e;
  box-shadow: 0 6px 18px rgba(242, 176, 30, 0.35);
}

.favorite-toggle.is-active .favorite-icon {
  fill: currentColor;
}

.favorite-toggle--lg {
  width: 3rem;
  height: 3rem;
  right: 1rem;
}

.favorite-toggle--lg .favorite-icon {
  width: 1.6rem;
  height: 1.6rem;
}

.HeaderMessaggio {
  position: relative;
}

.HeaderMessaggio .favorite-toggle {
  top: 50%;
  right: 1.25rem;
  transform: translateY(-50%);
}

.HeaderMessaggio .favorite-toggle:hover,
.HeaderMessaggio .favorite-toggle:focus-visible {
  transform: translateY(-50%) scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
  .favorite-toggle,
  .favorite-toggle:hover,
  .favorite-toggle:focus-visible {
    transition: none;
  }

  .favorite-toggle.is-hinting {
    animation: none;
  }
}

.favorites-showcase {
  position: relative;
  overflow: hidden;
  border-radius: 1.5rem;
  padding: 1.75rem 1.25rem;
  background: linear-gradient(135deg, #24184f, #4b2fbf);
  color: #fff;
  box-shadow: 0 24px 48px rgba(20, 14, 56, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.favorites-showcase::before {
  content: "";
  position: absolute;
  inset: -40% 10% auto 10%;
  height: 60%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.25), transparent 65%);
  filter: blur(0.5rem);
  opacity: 0.8;
  pointer-events: none;
}

.favorites-showcase.is-hidden {
  display: none;
}

.favorites-showcase__inner {
  position: relative;
  z-index: 1;
}

.favorites-showcase__header {
  margin-bottom: 1.25rem;
}

.favorites-showcase__title {
  font-size: clamp(1.4rem, 2.2vw + 0.8rem, 2.4rem);
  font-weight: 700;
}

.favorites-showcase__subtitle {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.85);
}

.favorites-showcase__list {
  margin-top: 1.25rem;
}

.favorites-showcase__item {
  display: flex;
}

.favorites-showcase__item .cartomante.card {
  border: none;
  box-shadow: 0 18px 36px rgba(18, 13, 52, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.favorites-showcase__item .cartomante.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 46px rgba(18, 13, 52, 0.3);
}

.favorites-showcase .favorite-toggle {
  background-color: rgba(255, 255, 255, 0.98);
  border-color: rgba(255, 255, 255, 0.85);
  color: #f2b01e;
}

.favorites-showcase .favorite-toggle.is-active {
  background-color: rgba(255, 255, 255, 0.98);
  border-color: #ffbf47;
  color: #ffbf47;
  box-shadow: 0 8px 20px rgba(255, 191, 71, 0.4);
}

.favorites-showcase .favorite-toggle:not(.is-active) {
  color: #4426b9;
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 20px rgba(68, 38, 185, 0.25);
}

.favorites-showcase .favorite-toggle:hover,
.favorites-showcase .favorite-toggle:focus-visible {
  background-color: rgba(255, 255, 255, 1);
}

.favorites-showcase__column {
  margin-bottom: 1.5rem;
}

@media (max-width: 575.98px) {
  .favorites-showcase {
    padding: 1.5rem 1rem;
  }

  .favorites-showcase__title {
    font-size: 1.45rem;
  }

  .favorites-showcase__subtitle {
    font-size: 0.9rem;
  }
}

@media (min-width: 992px) {
  .favorites-showcase__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
  }

  .favorites-showcase__subtitle {
    margin-bottom: 0;
  }
}

.favorite-toggle--spotlight {
  color: #f2b01e;
  border-color: #f2b01e;
  box-shadow: 0 16px 34px rgba(242, 176, 30, 0.32);
  animation: favoriteHintPulse 1.8s ease-in-out infinite;
}

.favorite-toggle--spotlight .favorite-icon {
  fill: currentColor;
}

.favorite-reminder {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

.favorite-reminder-card {
  border-radius: 1.75rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(245, 248, 255, 0.94));
  box-shadow: 0 30px 60px rgba(10, 35, 84, 0.18);
}

.favorite-reminder-avatar-wrapper {
  position: relative;
  width: clamp(8.5rem, 20vw, 11.25rem);
  height: clamp(8.5rem, 20vw, 11.25rem);
}

.favorite-reminder-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 6px solid rgba(255, 255, 255, 0.92);
  background-color: rgba(255, 255, 255, 0.85);
}

.favorite-reminder-status {
  position: absolute;
  bottom: -0.75rem;
  left: 50%;
  transform: translate(-50%, 100%);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.35rem 0.75rem;
  background: rgba(13, 110, 253, 0.85);
  box-shadow: 0 12px 24px rgba(13, 110, 253, 0.22);
}

.favorite-reminder-meta .favorite-reminder-likes .like-count {
  font-size: 0.85rem;
}

.favorite-reminder-meta .favorite-reminder-likes .heart-icon {
  width: 1.15rem;
}

.favorite-reminder-tooltip {
  position: absolute;
  top: -0.5rem;
  right: -1rem;
  transform: translateY(-100%);
  background: linear-gradient(135deg, #4b2fbf, #7a4dff);
  color: #fff;
  padding: 0.65rem 0.85rem;
  border-radius: 0.75rem;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.25;
  box-shadow: 0 18px 36px rgba(74, 46, 191, 0.35);
  text-align: center;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 3;
}

.favorite-reminder-tooltip::after {
  content: "";
  position: absolute;
  bottom: -0.55rem;
  right: 1.6rem;
  border-width: 0.6rem 0.55rem 0 0.55rem;
  border-style: solid;
  border-color: #5a39d6 transparent transparent transparent;
}

.favorite-reminder-tooltip--hidden {
  opacity: 0;
  transform: translateY(-110%) scale(0.94);
  pointer-events: none;
}

.favorite-reminder-copy {
  max-width: 32rem;
}

.favorite-reminder-title {
  font-size: clamp(1.25rem, 0.9rem + 1.8vw, 1.95rem);
  line-height: 1.15;
}

.favorite-reminder-lead {
  font-size: clamp(0.95rem, 0.85rem + 0.5vw, 1.05rem);
  line-height: 1.5;
}

.favorite-reminder-list {
  font-size: 0.97rem;
  display: grid;
  gap: 0.75rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  padding: 0;
}

.favorite-reminder-item {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 0;
  line-height: 1.35;
}

.favorite-reminder-icon {
  font-size: 1.1rem;
  line-height: 1;
  margin-top: 0.15rem;
}

.favorite-reminder-symbol {
  width: 2.5rem;
  height: 2.5rem;
  box-shadow: 0 18px 42px rgba(13, 110, 253, 0.25);
}

.favorite-reminder-symbol-icon {
  width: 2.5rem;
  height: 2.5rem;
}

:where(html[data-bs-theme='dark'], html.theme-dark) .favorite-reminder-card {
  background: linear-gradient(135deg, rgba(28, 32, 48, 0.94), rgba(16, 18, 34, 0.92));
  box-shadow: 0 36px 64px rgba(5, 8, 17, 0.65);
  border: 1px solid rgba(120, 134, 170, 0.25);
}

:where(html[data-bs-theme='dark'], html.theme-dark) .favorite-reminder-card .card-body {
  background: linear-gradient(135deg, rgba(22, 26, 42, 0.96), rgba(13, 15, 28, 0.92));
}

:where(html[data-bs-theme='dark'], html.theme-dark) .favorite-reminder-avatar {
  border-color: rgba(23, 27, 43, 0.9);
  background-color: rgba(15, 18, 32, 0.85);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.45);
}

:where(html[data-bs-theme='dark'], html.theme-dark) .favorite-reminder-status {
  background: linear-gradient(135deg, rgba(20, 119, 255, 0.9), rgba(71, 154, 255, 0.9));
  box-shadow: 0 18px 32px rgba(4, 8, 24, 0.55);
  color: rgba(245, 248, 255, 0.95);
}

:where(html[data-bs-theme='dark'], html.theme-dark) .favorite-reminder-tooltip {
  background: linear-gradient(135deg, rgba(99, 78, 218, 0.94), rgba(122, 92, 255, 0.92));
  box-shadow: 0 24px 42px rgba(12, 10, 40, 0.6);
}

:where(html[data-bs-theme='dark'], html.theme-dark) .favorite-reminder-tooltip::after {
  border-color: rgba(112, 88, 236, 1) transparent transparent transparent;
}

:where(html[data-bs-theme='dark'], html.theme-dark) .favorite-reminder-copy {
  color: rgba(220, 226, 255, 0.82);
}

:where(html[data-bs-theme='dark'], html.theme-dark) .favorite-reminder-title {
  color: rgba(235, 241, 255, 0.94) !important;
}

:where(html[data-bs-theme='dark'], html.theme-dark) .favorite-reminder-lead {
  color: rgba(204, 214, 246, 0.75) !important;
}

:where(html[data-bs-theme='dark'], html.theme-dark) .favorite-reminder-item {
  color: rgba(214, 221, 249, 0.78);
}

:where(html[data-bs-theme='dark'], html.theme-dark) .favorite-reminder-item span {
  color: inherit;
}

:where(html[data-bs-theme='dark'], html.theme-dark) .favorite-reminder-meta .badge.bg-light {
  background: rgba(255, 255, 255, 0.15) !important;
  color: rgba(223, 230, 255, 0.9) !important;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.35);
}

:where(html[data-bs-theme='dark'], html.theme-dark) .favorite-reminder + #cartomantiBanner {
  border-top: 1px solid rgba(114, 128, 170, 0.24);
}

@media (max-width: 767.98px) {
  .favorite-reminder-card {
    border-radius: 1.25rem;
  }

  .favorite-reminder-tooltip {
    right: 50%;
    transform: translate(50%, -110%);
  }

  .favorite-reminder-tooltip::after {
    right: 50%;
    transform: translateX(50%);
  }

  .favorite-reminder-meta .favorite-reminder-likes {
    justify-content: center;
  }

  .favorite-reminder {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .favorite-reminder-card .card-body {
    padding: 1.25rem 1.5rem;
  }

  .favorite-reminder-avatar-wrapper {
    width: clamp(6.5rem, 38vw, 8.5rem);
    height: clamp(6.5rem, 38vw, 8.5rem);
  }

  .favorite-reminder-copy {
    max-width: 100%;
  }

  .favorite-reminder-title {
    font-size: 1.35rem;
  }

  .favorite-reminder-lead {
    font-size: 0.95rem;
    margin-left: auto;
    margin-right: auto;
  }

  .favorite-reminder-list {
    grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
    gap: 0.55rem 0.85rem;
  }

  .favorite-reminder-item {
    font-size: 0.92rem;
  }

  .favorite-reminder-icon {
    font-size: 1rem;
    margin-top: 0.1rem;
  }
}

@media (max-width: 575.98px) {
  .favorite-reminder-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .favorite-reminder-card .card-body {
    padding: 1.15rem 1.25rem;
  }

  .favorite-reminder-lead {
    font-size: 0.92rem;
  }

  .favorite-reminder-item {
    font-size: 0.9rem;
  }
}

.favorite-reminder + #cartomantiBanner {
  padding-top: 1.25rem;
  padding-bottom: 1.35rem;
}

.favorite-reminder + #cartomantiBanner .cartomanti-scroll {
  align-items: flex-start;
}

.favorite-reminder + #cartomantiBanner .cartomanti-scroll .miniatura {
  padding-top: 10px;
  padding-bottom: 18px;
}

@media (max-width: 575.98px) {
  .favorite-reminder + #cartomantiBanner {
    padding-top: 0.85rem;
    padding-bottom: 1rem;
  }

  .favorite-reminder + #cartomantiBanner .cartomanti-scroll .miniatura {
    padding-top: 6px;
    padding-bottom: 12px;
  }
}

/* Source: favorite-hint-bubble.css */
/* ==========================================================
   ALU Tip - bubble tooltip riutilizzabile (refactor 2026-05)
   Bubble singola pulita, no header/title separato, puntata al
   target. Usata da:
   - sistema preferiti (.favorite-hint-popover, classe storica)
   - tooltip generici (.alu-tip-popover, qualsiasi data-alu-tip)
   Si attiva DOPO il cookie consent banner (gestito in JS).
   ========================================================== */

.alu-tip-popover.popover,
.favorite-hint-popover.popover {
  --fhb-bg-from: #fff8e6;
  --fhb-bg-to: #fff0f6;
  --fhb-border: #d4af37;
  --fhb-text: #2a1b4a;
  --fhb-star-bg: linear-gradient(135deg, #ffd866 0%, #d4af37 100%);
  --fhb-star-fg: #2a1b4a;
  --fhb-shadow: 0 14px 30px -8px rgba(45, 27, 78, 0.35), 0 0 0 1px rgba(212, 175, 55, 0.18);

  position: relative;
  z-index: 4096;
  max-width: min(94vw, 320px);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  filter: none;
  pointer-events: auto;
  font-weight: 600;
  color: var(--fhb-text);
  box-shadow: none;
  /* Bootstrap mette il bg-color di default sul .popover; lo annulliamo
     e lo applichiamo al .popover-body cosi' l'arrow eredita pulita. */
}

[data-bs-theme="dark"] .favorite-hint-popover.popover,
.favorite-hint-popover.popover[data-bs-theme="dark"] {
  --fhb-bg-from: #2a1450;
  --fhb-bg-to: #3a1f63;
  --fhb-border: #e8c77a;
  --fhb-text: #fff8e6;
  --fhb-star-bg: linear-gradient(135deg, #f5e6b8 0%, #d4af37 100%);
  --fhb-star-fg: #1a0e35;
  --fhb-shadow: 0 16px 32px -10px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(232, 199, 122, 0.28);
}

/* Body = vera bubble visibile.
   flex 3 item: icona ⭐ a sinistra (fissa), testo al centro (flessibile,
   va a capo se serve), X a destra in absolute. */
.favorite-hint-popover .popover-body {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 1.9rem 0.55rem 0.55rem;
  margin: 0;
  border-radius: 12px;
  background: linear-gradient(140deg, var(--fhb-bg-from), var(--fhb-bg-to));
  border: 1.5px solid var(--fhb-border);
  box-shadow: var(--fhb-shadow);
  font-size: 0.86rem;
  line-height: 1.32;
  color: var(--fhb-text);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Wrapper testo iniettato dal JS: prende lo spazio rimanente e va a capo. */
.favorite-hint-popover .alu-tip-text {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
}

/* Bottone X di chiusura, in alto a destra del bubble. */
.favorite-hint-popover .alu-tip-close {
  position: absolute;
  top: 4px;
  right: 6px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(45, 27, 78, 0.08);
  color: var(--fhb-text);
  font-size: 1.1rem;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity .15s ease, background-color .15s ease, transform .15s ease;
}
.favorite-hint-popover .alu-tip-close:hover,
.favorite-hint-popover .alu-tip-close:focus-visible {
  opacity: 1;
  background: rgba(45, 27, 78, 0.18);
  outline: none;
  transform: scale(1.08);
}
[data-bs-theme="dark"] .favorite-hint-popover .alu-tip-close {
  background: rgba(255, 255, 255, 0.12);
  color: var(--fhb-text);
}
[data-bs-theme="dark"] .favorite-hint-popover .alu-tip-close:hover,
[data-bs-theme="dark"] .favorite-hint-popover .alu-tip-close:focus-visible {
  background: rgba(255, 255, 255, 0.22);
}

/* Cerchio ⭐ sempre a sinistra, ben staccato dal testo. */
.favorite-hint-popover .popover-body::before {
  content: '⭐';
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--fhb-star-bg);
  color: var(--fhb-star-fg);
  font-size: 1.05rem;
  line-height: 1;
  box-shadow: 0 4px 10px -2px rgba(212, 175, 55, 0.55);
}

/* Arrow: deve puntare ESATTAMENTE alla stellina del cartomante.
   Bootstrap genera due triangoli (::before bordo, ::after fill).
   Allineiamo entrambi al colore/bordo del body, cosi' la freccia
   resta visibile e non si confonde con sfondo pagina. */
.favorite-hint-popover .popover-arrow {
  display: block;
  width: 1rem;
  height: 0.5rem;
}
.favorite-hint-popover .popover-arrow::before,
.favorite-hint-popover .popover-arrow::after {
  border-color: transparent;
}

/* Top placement: arrow sotto, punta verso il basso */
.favorite-hint-popover.bs-popover-top .popover-arrow::before,
.favorite-hint-popover.bs-popover-auto[data-popper-placement^="top"] .popover-arrow::before {
  border-top-color: var(--fhb-border);
}
.favorite-hint-popover.bs-popover-top .popover-arrow::after,
.favorite-hint-popover.bs-popover-auto[data-popper-placement^="top"] .popover-arrow::after {
  border-top-color: var(--fhb-bg-to);
  bottom: 2px;
}

/* Bottom placement: arrow sopra, punta verso l'alto */
.favorite-hint-popover.bs-popover-bottom .popover-arrow::before,
.favorite-hint-popover.bs-popover-auto[data-popper-placement^="bottom"] .popover-arrow::before {
  border-bottom-color: var(--fhb-border);
}
.favorite-hint-popover.bs-popover-bottom .popover-arrow::after,
.favorite-hint-popover.bs-popover-auto[data-popper-placement^="bottom"] .popover-arrow::after {
  border-bottom-color: var(--fhb-bg-from);
  top: 2px;
}

/* Left placement: arrow a destra, punta verso destra */
.favorite-hint-popover.bs-popover-start .popover-arrow::before,
.favorite-hint-popover.bs-popover-auto[data-popper-placement^="left"] .popover-arrow::before {
  border-left-color: var(--fhb-border);
}
.favorite-hint-popover.bs-popover-start .popover-arrow::after,
.favorite-hint-popover.bs-popover-auto[data-popper-placement^="left"] .popover-arrow::after {
  border-left-color: var(--fhb-bg-to);
  right: 2px;
}

/* Right placement: arrow a sinistra, punta verso sinistra */
.favorite-hint-popover.bs-popover-end .popover-arrow::before,
.favorite-hint-popover.bs-popover-auto[data-popper-placement^="right"] .popover-arrow::before {
  border-right-color: var(--fhb-border);
}
.favorite-hint-popover.bs-popover-end .popover-arrow::after,
.favorite-hint-popover.bs-popover-auto[data-popper-placement^="right"] .popover-arrow::after {
  border-right-color: var(--fhb-bg-from);
  left: 2px;
}

/* Modal/profile variant: stessa estetica, max-width un filo piu' grande */
.favorite-hint-popover--profile.popover {
  max-width: min(94vw, 300px);
}

/* Show/hide animation soft (no bounce, no scale) */
.favorite-hint-popover.popover {
  opacity: 0;
  transition: opacity 0.18s ease-out;
}
.favorite-hint-popover--visible.popover {
  opacity: 1;
}

@media (max-width: 480px) {
  .favorite-hint-popover .popover-body {
    font-size: 0.84rem;
    padding: 0.5rem 0.75rem 0.5rem 0.5rem;
  }
  .favorite-hint-popover .popover-body::before {
    flex-basis: 26px;
    width: 26px;
    height: 26px;
    font-size: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .favorite-hint-popover.popover { transition: none; }
}

/* Source: liquid-glass.css */
.btn-liquid-glass {
    --lg-radius: 0.9rem;
    --lg-blur: 14px;
    --lg-saturation: 1.65;
    --lg-contrast: 1.05;
    --lg-shadow: 0 20px 45px rgba(8, 34, 64, 0.14);
    --lg-shadow-hover: 0 26px 55px rgba(8, 34, 64, 0.18);
    --lg-shadow-active: 0 14px 30px rgba(8, 34, 64, 0.15);
    --lg-border: rgba(255, 255, 255, 0.45);
    --lg-border-strong: rgba(255, 255, 255, 0.7);
    --lg-distortion: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0))
                     , radial-gradient(circle at 75% 70%, rgba(120, 170, 255, 0.24), rgba(120, 170, 255, 0));
    --lg-rim-map: conic-gradient(from 210deg at 50% 50%,
            rgba(255, 255, 255, 0) 0deg,
            rgba(255, 255, 255, 0.3) 55deg,
            rgba(255, 255, 255, 0.55) 110deg,
            rgba(255, 255, 255, 0.15) 170deg,
            rgba(255, 255, 255, 0.4) 230deg,
            rgba(255, 255, 255, 0) 300deg,
            rgba(255, 255, 255, 0) 360deg);
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0))
                , linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.05));
    border: 1px solid var(--lg-border);
    border-radius: var(--lg-radius);
    color: inherit;
    -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(calc(var(--lg-saturation) * 100%)) contrast(calc(var(--lg-contrast) * 100%));
    backdrop-filter: blur(var(--lg-blur)) saturate(calc(var(--lg-saturation) * 100%)) contrast(calc(var(--lg-contrast) * 100%));
    box-shadow: var(--lg-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, filter 0.25s ease;
    -webkit-mask-image: linear-gradient(#000 0 0);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-position: center;
    mask-image: linear-gradient(#000 0 0);
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    mask-position: center;
}

.btn-liquid-glass::before,
.btn-liquid-glass::after {
    content: "";
    position: absolute;
    inset: -22% -32%;
    border-radius: inherit;
    pointer-events: none;
    transition: transform 0.35s ease, opacity 0.35s ease;
}

.btn-liquid-glass::before {
    background: var(--lg-distortion);
    filter: blur(calc(var(--lg-blur) * 1.3));
    opacity: 0.82;
    transform: translate3d(-6%, -4%, 0) scale(1.02);
    mix-blend-mode: screen;
}

.btn-liquid-glass::after {
    inset: -18% -18%;
    background: var(--lg-rim-map);
    filter: blur(12px);
    opacity: 0.58;
    mix-blend-mode: lighten;
}

.btn-liquid-glass:hover,
.btn-liquid-glass:focus-visible {
    border-color: var(--lg-border-strong);
    box-shadow: var(--lg-shadow-hover), inset 0 1px 0 rgba(255, 255, 255, 0.45);
    transform: translateY(-2px);
    filter: saturate(calc((var(--lg-saturation) + 0.1) * 100%));
}

.btn-liquid-glass:hover::before,
.btn-liquid-glass:focus-visible::before {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1.03);
}

.btn-liquid-glass:hover::after,
.btn-liquid-glass:focus-visible::after {
    opacity: 0.7;
    transform: translate3d(0, -1%, 0);
}

.btn-liquid-glass:active {
    transform: translateY(0);
    box-shadow: var(--lg-shadow-active), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    filter: saturate(calc((var(--lg-saturation) - 0.1) * 100%));
}

.liquid-glass-title-wrapper {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    justify-content: center;
    padding: 0.5rem;
    width: 100%;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.liquid-glass-title {
    --lg-radius: 1.1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 1.4rem;
    letter-spacing: 0.06em;
    color: #0f172a;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
}

.liquid-glass-title__icon {
    font-size: 1.1rem;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.15));
}

@media (prefers-reduced-motion: reduce) {
    .btn-liquid-glass,
    .btn-liquid-glass::before,
    .btn-liquid-glass::after {
        transition: none;
    }
}

.fixed-scroll-action {
    position: fixed;
    z-index: 1081;
}

/* CTA.ORIGIN.1 (2026-09-03) — resa dei due pulsanti flottanti.

   Il difetto vero era su iPhone: `bottom: 0.75rem` mette il pulsante sotto la
   barra gesti, che se lo mangia per meta'. Le posizioni verticali partono ora
   da `env(safe-area-inset-bottom)`, che vale 0 dove la tacca non c'e' — quindi
   nessuna regressione sugli altri dispositivi.

   Il secondo problema era la larghezza: `calc(100% - 2rem)` su un telefono da
   320px lasciava al testo in maiuscolo 288px, e l'etichetta andava a capo
   dentro un pulsante alto 40px. Ora il testo puo' rimpicciolire e il pulsante
   ha un'altezza minima comoda al pollice. */
:root {
    --alu-fixed-cta-gap: 0.75rem;
}

#fixedbacktotop {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 5.5rem);
}

#fixedconsultoprivato {
    bottom: calc(env(safe-area-inset-bottom, 0px) + var(--alu-fixed-cta-gap));
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    max-width: min(30rem, calc(100vw - 2rem));
}

@media (max-width: 768px) {
    #fixedbacktotop {
        right: 50%;
        transform: translateX(50%);
        bottom: calc(env(safe-area-inset-bottom, 0px) + 6.5rem);
    }

    #fixedconsultoprivato {
        width: calc(100% - 2rem);
        left: 50%;
        transform: translateX(-50%);
    }
}

/* Sotto i 380px l'etichetta in maiuscolo non ci sta: si stringe invece di
   andare a capo, perche' un pulsante flottante su due righe copre il
   contenuto che si sta leggendo. */
@media (max-width: 380px) {
    #fixedconsultoprivato {
        font-size: 0.82rem;
        letter-spacing: 0;
        padding-inline: 0.75rem;
    }
    #fixedconsultoprivato .fixed-cta__label {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* In orizzontale su telefono lo schermo e' alto poche centinaia di pixel: due
   pulsanti impilati coprirebbero un terzo della pagina. Resta quello che
   porta valore. */
@media (max-height: 460px) and (orientation: landscape) {
    #fixedbacktotop {
        display: none !important;
    }
}

/* Source: cartomanti-list.css */
/* ==========================================================
   Lista cartomanti - Step 1 refactor (2026-05)
   Hero compatto, filtri sticky in 1 riga, zodiac chips scroll-x,
   descrizioni sezioni collapsible (info icon).
   Mobile-first: primo avatar visibile entro ~350px verticali.
   ========================================================== */

.cartomanti-layout {
  color: #f7f8ff;
}

/* Hero: il banner-titolo "I nostri cartomanti" è ora emesso da
   HtmlElement::stdHeader() (.alu-pagehead in layout.css).
   Vedi VIEW/cartomanti.php. */

/* ---------- Filtri sticky in 1 riga ---------- */
.cartomanti-controls {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 0.5rem;
  margin: 0 0 0.7rem;
  padding: 0.5rem 0;
  position: sticky;
  top: 0;
  z-index: 5;
  background: linear-gradient(180deg, rgba(13, 19, 50, 0.96), rgba(13, 19, 50, 0.85));
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.cartomanti-searchbox,
.cartomanti-select-wrapper {
  background: rgba(9, 16, 38, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  padding: 0.5rem 0.7rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.cartomanti-searchbox input,
.cartomanti-select-wrapper select {
  background: transparent;
  border: none;
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  width: 100%;
  min-width: 0;
}
.cartomanti-searchbox input::placeholder { color: rgba(255, 255, 255, 0.6); }
.cartomanti-searchbox input:focus,
.cartomanti-select-wrapper select:focus { outline: none; box-shadow: none; }
.cartomanti-select-wrapper select {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.4rem center;
  background-size: 0.85rem;
  padding-right: 1.4rem;
  appearance: none;
  -webkit-appearance: none;
}
.cartomanti-select-wrapper select option { background: #1a1438; color: #fff; }

/* ---------- Zodiac chips orizzontali con scroll-x mobile ---------- */
.cartomanti-zodiac {
  margin: 0 -0.5rem 0.85rem;
  padding: 0.1rem 0;
}
.cartomanti-zodiac__links {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0.5rem;
  display: flex;
  flex-wrap: nowrap;
  gap: 0.4rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.cartomanti-zodiac__links::-webkit-scrollbar { height: 4px; }
.cartomanti-zodiac__links::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 4px; }

.cartomanti-zodiac__link {
  flex: 0 0 auto;
  scroll-snap-align: start;
  background: linear-gradient(135deg, #ffd89b, #f26969);
  color: #0c0c0c !important;
  font-weight: 700;
  font-size: 0.78rem;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  white-space: nowrap;
}
.cartomanti-zodiac__link:hover,
.cartomanti-zodiac__link:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(240, 121, 73, 0.35);
  text-decoration: none;
}

/* ============================================================
   Carta del giorno - Pagina iniziale: intro + form + personaggi
   (2026-05-11) Mobile-first, design tokens viola/oro brand-coerenti.
   ============================================================ */
.cdg-intro {
  max-width: 720px;
  margin: 1rem auto 1.4rem;
  padding: 1.4rem 1.1rem 1.5rem;
  border-radius: 22px;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(251, 191, 36, 0.22) 0%, transparent 55%),
    radial-gradient(110% 70% at 100% 100%, rgba(168, 85, 247, 0.28) 0%, transparent 60%),
    linear-gradient(160deg, rgba(46, 29, 84, 0.96) 0%, rgba(78, 39, 134, 0.94) 100%);
  border: 1px solid rgba(251, 191, 36, 0.32);
  box-shadow: 0 18px 40px rgba(20, 12, 40, 0.32);
  color: #f5f3ff;
  position: relative;
  overflow: hidden;
}

.cdg-intro__head { text-align: center; margin-bottom: 1.1rem; }
.cdg-intro__eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fde68a;
  padding: 0.26rem 0.78rem;
  border: 1px solid rgba(251, 191, 36, 0.45);
  border-radius: 999px;
  background: rgba(251, 191, 36, 0.1);
  margin-bottom: 0.6rem;
}
.cdg-intro__title {
  margin: 0 0 0.55rem;
  font-size: clamp(1.4rem, 5vw, 1.9rem);
  font-weight: 800;
  line-height: 1.15;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.cdg-intro__lead {
  margin: 0 auto;
  max-width: 52ch;
  font-size: clamp(0.95rem, 2.4vw, 1.05rem);
  line-height: 1.5;
  color: rgba(245, 243, 255, 0.86);
}
.cdg-intro__lead strong { color: #fde68a; font-weight: 700; }
/* LETT3.SEO.1 (2026-10-07): il pannello e' scuro in entrambi i temi, quindi il
   link non puo' ereditare il colore globale (pensato per fondo chiaro: 3,9:1).
   Stesso oro dei grassetti del pannello. */
.cdg-intro__lead a { color: #fde68a; font-weight: 700; text-decoration: underline; text-underline-offset: 0.15em; }
.cdg-intro__lead a:focus-visible { outline: 2px solid #fde68a; outline-offset: 2px; border-radius: 3px; }
.cdg-intro__more { margin-top: 1rem; text-align: center; }

/* ---------- Steps "Come funziona" ---------- */
.cdg-intro__steps {
  list-style: none;
  margin: 1.1rem 0 1.2rem;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
}
@media (min-width: 720px) {
  .cdg-intro__steps { grid-template-columns: repeat(3, 1fr); gap: 0.85rem; }
}
.cdg-intro__step {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.85rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
}
.cdg-intro__step-num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: #1a1438;
  font-weight: 800;
  font-size: 1rem;
  box-shadow: 0 4px 12px rgba(251, 191, 36, 0.35);
}
.cdg-intro__step-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.cdg-intro__step-text strong {
  font-size: 0.9rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
}
.cdg-intro__step-text span {
  font-size: 0.78rem;
  color: rgba(245, 243, 255, 0.7);
  line-height: 1.35;
}

/* ---------- Form ---------- */
.cdg-form {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1rem;
  background: rgba(15, 8, 35, 0.42);
  border: 1px solid rgba(251, 191, 36, 0.22);
  border-radius: 16px;
}
.cdg-form__title {
  margin: 0 0 0.2rem;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fde68a;
  text-align: center;
  text-transform: uppercase;
}
.cdg-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
}
@media (min-width: 540px) {
  .cdg-form__row { grid-template-columns: 1fr 1fr; gap: 0.7rem; }
}
.cdg-form__field { display: flex; flex-direction: column; gap: 0.3rem; }
.cdg-form__field--full { width: 100%; }
.cdg-form__label {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(245, 243, 255, 0.82);
  letter-spacing: 0.02em;
}
.cdg-form__optional {
  font-weight: 400;
  color: rgba(245, 243, 255, 0.55);
  font-size: 0.72rem;
}
.cdg-form__input {
  width: 100%;
  padding: 0.65rem 0.85rem;
  font-size: 1rem;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  outline: none;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  font-family: inherit;
}
.cdg-form__input::placeholder { color: rgba(245, 243, 255, 0.4); }
.cdg-form__input:hover { background: rgba(255, 255, 255, 0.1); }
.cdg-form__input:focus,
.cdg-form__input:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(251, 191, 36, 0.7);
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.18);
}
.cdg-form__input--area { resize: vertical; min-height: 80px; line-height: 1.45; }
/* Date input picker visibilita' su dark bg */
.cdg-form__input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.2);
  cursor: pointer;
  opacity: 0.85;
}

.cdg-form__alert {
  padding: 0.55rem 0.8rem;
  border-radius: 10px;
  background: rgba(239, 68, 68, 0.16);
  border: 1px solid rgba(239, 68, 68, 0.45);
  color: #fecaca;
  font-size: 0.85rem;
  text-align: center;
}
.cdg-form__alert[hidden] { display: none; }

.cdg-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.3rem;
  padding: 0.85rem 1.1rem;
  min-height: 52px;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #1a1438;
  background: linear-gradient(135deg, #fde68a 0%, #fbbf24 45%, #f59e0b 100%);
  border: none;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(251, 191, 36, 0.35);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.cdg-form__submit:hover,
.cdg-form__submit:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(251, 191, 36, 0.45);
  filter: brightness(1.05);
  outline: none;
}
.cdg-form__submit:active { transform: translateY(0); }

.cdg-form__note {
  margin: 0.2rem 0 0;
  text-align: center;
  font-size: 0.75rem;
  color: rgba(245, 243, 255, 0.6);
  letter-spacing: 0.02em;
}

.cdg-intro__share { margin-top: 1rem; display: flex; justify-content: center; }

/* ---------- Personaggi famosi (griglia moderna) ---------- */
.cdg-personaggi {
  max-width: 920px;
  margin: 1.5rem auto;
  padding: 0 0.5rem;
}
.cdg-personaggi__head { text-align: center; margin-bottom: 1rem; display: flex; flex-direction: column; align-items: center; gap: 0.45rem; }
.cdg-personaggi__title {
  margin: 0;
  font-size: clamp(1.15rem, 3.5vw, 1.4rem);
  font-weight: 800;
  color: #2e1d4a;
}
html:is(.theme-dark, [data-bs-theme='dark']) .cdg-personaggi__title { color: #f5f3ff; }

.cdg-personaggi__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.7rem;
}
@media (min-width: 540px) {
  .cdg-personaggi__grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.85rem; }
}
.cdg-personaggi__item { margin: 0; }

.cdg-personaggi__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.85rem 0.5rem 0.7rem;
  text-decoration: none;
  color: inherit;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(248, 244, 255, 0.92));
  border: 1px solid rgba(102, 51, 153, 0.18);
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(46, 29, 78, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.cdg-personaggi__link:hover,
.cdg-personaggi__link:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(251, 191, 36, 0.55);
  box-shadow: 0 14px 28px rgba(251, 191, 36, 0.22), 0 6px 14px rgba(46, 29, 78, 0.18);
  text-decoration: none;
  outline: none;
}
.cdg-personaggi__avatar {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(251, 191, 36, 0.6);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
.cdg-personaggi__name {
  font-size: 0.88rem;
  font-weight: 700;
  color: #2e1d4a;
  text-align: center;
  line-height: 1.2;
}
.cdg-personaggi__birth {
  font-size: 0.72rem;
  color: rgba(46, 29, 78, 0.65);
  letter-spacing: 0.02em;
}

html:is(.theme-dark, [data-bs-theme='dark']) .cdg-personaggi__link {
  background: linear-gradient(160deg, rgba(30, 22, 58, 0.92), rgba(48, 28, 86, 0.86));
  border-color: rgba(251, 191, 36, 0.22);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}
html:is(.theme-dark, [data-bs-theme='dark']) .cdg-personaggi__name { color: #f5f3ff; }
html:is(.theme-dark, [data-bs-theme='dark']) .cdg-personaggi__birth { color: rgba(245, 243, 255, 0.7); }

/* ============================================================
   Carta del giorno - Card risultato (2026-05-11)
   Modernizzazione del blocco .CONTAINERMESSAGGIO legacy della
   pagina /cartadelgiorno/{nome}/{data}/. Markup semantico
   article + figure + Schema.org CreativeWork. LCP-friendly.
   ============================================================ */
.cdg-card-result {
  max-width: 720px;
  margin: 0 auto 1.4rem;
  padding: 1.2rem 1rem 1.4rem;
  border-radius: 22px;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(168, 85, 247, 0.18) 0%, transparent 55%),
    linear-gradient(165deg, rgba(28, 18, 56, 0.96) 0%, rgba(48, 28, 90, 0.94) 100%);
  border: 1px solid rgba(251, 191, 36, 0.22);
  box-shadow: 0 14px 34px rgba(18, 28, 60, 0.22);
  color: #f5f3ff;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cdg-card-result__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.95rem;
}
.cdg-card-result__eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fde68a;
  padding: 0.24rem 0.7rem;
  border: 1px solid rgba(251, 191, 36, 0.42);
  border-radius: 999px;
  background: rgba(251, 191, 36, 0.1);
}
.cdg-card-result__title {
  margin: 0;
  font-size: clamp(1.3rem, 4.5vw, 1.7rem);
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.32);
}

/* Verso pill: dritta (verde) / capovolta (ambra) */
.cdg-card-result__verso {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.22rem 0.7rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cdg-card-result__verso-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cdg-card-result__verso--upright {
  background: rgba(16, 185, 129, 0.16);
  color: #d1fae5;
  border: 1px solid rgba(16, 185, 129, 0.42);
}
.cdg-card-result__verso--upright .cdg-card-result__verso-dot {
  background: #10b981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
  animation: cdgCardVersoPulse 2.2s ease-out infinite;
}
.cdg-card-result__verso--inverted {
  background: rgba(251, 191, 36, 0.16);
  color: #fde68a;
  border: 1px solid rgba(251, 191, 36, 0.45);
}
.cdg-card-result__verso--inverted .cdg-card-result__verso-dot {
  background: #fbbf24;
}
@keyframes cdgCardVersoPulse {
  0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55); }
  70%  { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .cdg-card-result__verso--upright .cdg-card-result__verso-dot { animation: none; }
}

/* Figure: cornice oro soft + glow, rotation via classe */
.cdg-card-result__figure {
  margin: 0 auto 1rem;
  display: flex;
  justify-content: center;
}
.cdg-card-result__image {
  display: block;
  width: clamp(180px, 55vw, 280px);
  height: auto;
  border-radius: 14px;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(251, 191, 36, 0.22);
  transition: transform 0.4s ease;
}
.cdg-card-result__image.is-inverted {
  transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
  .cdg-card-result__image { transition: none; }
}

/* Body: significato carta */
.cdg-card-result__body { margin: 0 auto; max-width: 56ch; }
.cdg-card-result__meaning {
  margin: 0;
  font-size: clamp(0.96rem, 2.4vw, 1.05rem);
  line-height: 1.6;
  color: rgba(245, 243, 255, 0.92);
  text-align: left;
}
.cdg-card-result__meaning p { margin: 0 0 0.75rem; }
.cdg-card-result__meaning p:last-child { margin-bottom: 0; }
.cdg-card-result__meaning strong { color: #fde68a; font-weight: 700; }

/* ============================================================
   Carta del giorno - Hero top (2026-05-11)
   Sostituisce il vecchio mix di h1/h2 con inline-style hardcoded.
   Mobile-first: tutto stack centrato, scala graziosa su desktop.
   ============================================================ */
.cdg-hero {
  max-width: 640px;
  margin: 1rem auto 1.25rem;
  padding: 1.4rem 1rem 1.5rem;
  text-align: center;
  border-radius: 22px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(251, 191, 36, 0.18) 0%, transparent 60%),
    linear-gradient(160deg, rgba(46, 29, 84, 0.96) 0%, rgba(78, 39, 134, 0.95) 100%);
  border: 1px solid rgba(251, 191, 36, 0.32);
  box-shadow: 0 18px 40px rgba(20, 12, 40, 0.32);
  color: #f5f3ff;
  position: relative;
  overflow: hidden;
}
.cdg-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 10% 100%, rgba(251, 191, 36, 0.18) 0%, transparent 35%),
    radial-gradient(circle at 90% 0%, rgba(168, 85, 247, 0.22) 0%, transparent 40%);
}
.cdg-hero > * { position: relative; z-index: 1; }

.cdg-hero__eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fde68a;
  padding: 0.28rem 0.8rem;
  border: 1px solid rgba(251, 191, 36, 0.45);
  border-radius: 999px;
  background: rgba(251, 191, 36, 0.1);
  margin-bottom: 0.6rem;
}
.cdg-hero__title {
  margin: 0;
  font-size: clamp(1.5rem, 5.5vw, 2rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.15;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.cdg-hero__date {
  margin: 0.4rem 0 0;
  font-size: clamp(0.85rem, 2.4vw, 1rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(245, 243, 255, 0.82);
  text-transform: capitalize;
}

/* ---------- Profilo personalizzato ---------- */
.cdg-profile {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px dashed rgba(251, 191, 36, 0.28);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}
.cdg-profile__caption {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(253, 230, 138, 0.92);
  margin-bottom: 0.4rem;
}
/* Nome in primo piano: oro saturo + glow luminoso a doppio strato
   (vicino + diffuso). Tipografia ampia e responsive via clamp(). */
.cdg-profile__name {
  margin: 0.2rem 0 0.35rem;
  font-size: clamp(1.6rem, 6.5vw, 2.4rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: capitalize;
  color: #fbbf24;
  background: linear-gradient(135deg, #fde68a 0%, #fbbf24 45%, #f59e0b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 0 12px rgba(251, 191, 36, 0.55),
    0 0 28px rgba(251, 191, 36, 0.35),
    0 2px 6px rgba(0, 0, 0, 0.35);
  line-height: 1.1;
}
.cdg-profile__birth {
  margin: 0;
  font-size: 0.88rem;
  color: rgba(245, 243, 255, 0.78);
  letter-spacing: 0.04em;
  font-weight: 500;
}

/* ---------- Chip segno cliccabile ---------- */
.cdg-sign-chip {
  margin-top: 0.7rem;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.85rem 0.45rem 0.5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.5);
  color: #fde68a;
  font-size: 0.88rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.cdg-sign-chip img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  padding: 4px;
  flex-shrink: 0;
}
.cdg-sign-chip__arrow {
  font-size: 1.1rem;
  transition: transform 0.2s ease;
}
.cdg-sign-chip:hover,
.cdg-sign-chip:focus-visible {
  background: rgba(251, 191, 36, 0.18);
  border-color: rgba(251, 191, 36, 0.8);
  color: #ffffff;
  text-decoration: none;
}
.cdg-sign-chip:hover .cdg-sign-chip__arrow,
.cdg-sign-chip:focus-visible .cdg-sign-chip__arrow {
  transform: translateX(3px);
}

/* ---------- Box domanda ---------- */
.cdg-question {
  margin-top: 0.9rem;
  width: 100%;
  max-width: 480px;
  padding: 0.75rem 0.95rem 0.85rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-left: 3px solid #fbbf24;
  border-radius: 12px;
  text-align: left;
}
.cdg-question__label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fde68a;
  margin-bottom: 0.3rem;
}
.cdg-question__text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
  color: rgba(245, 243, 255, 0.95);
  font-style: italic;
}

/* ============================================================
   Carta del giorno - sezione "Suggerimenti" (2026-05-11)
   Due card moderne (cartomante consigliato + oroscopo) in grid
   responsive: 1 col mobile, 2 col >=720px. Mobile-first.
   ============================================================ */
.cdg-suggestions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1.25rem auto;
  width: 100%;
  max-width: 920px;
  padding: 0 0.5rem;
}
@media (min-width: 720px) {
  .cdg-suggestions {
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
  }
}

.cdg-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 244, 255, 0.92) 100%);
  border: 1px solid rgba(102, 51, 153, 0.18);
  border-radius: 18px;
  padding: 1rem 1rem 1.1rem;
  box-shadow: 0 10px 28px rgba(46, 29, 14, 0.12);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.cdg-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 80% at 0% 0%, rgba(251, 191, 36, 0.16) 0%, transparent 55%);
  opacity: 0.9;
}
.cdg-card > * { position: relative; z-index: 1; }

.cdg-card--oroscopo {
  background: linear-gradient(160deg, #2e1d54 0%, #3b1f6b 60%, #6b3aa0 100%);
  border-color: rgba(251, 191, 36, 0.35);
  color: #fff;
}
.cdg-card--oroscopo::before {
  background: radial-gradient(110% 70% at 100% 0%, rgba(251, 191, 36, 0.32) 0%, transparent 60%);
}
.cdg-card--oroscopo:hover,
.cdg-card--oroscopo:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(46, 29, 84, 0.45);
  border-color: rgba(251, 191, 36, 0.6);
  color: #fff;
  text-decoration: none;
}

.cdg-card__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  text-align: center;
  margin-bottom: 0.6rem;
}
.cdg-card__eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(102, 51, 153, 0.75);
}
.cdg-card--oroscopo .cdg-card__eyebrow { color: rgba(251, 191, 36, 0.95); }
.cdg-card__title {
  margin: 0;
  font-size: clamp(0.95rem, 2.4vw, 1.05rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.2;
  color: #2e1d4a;
}
.cdg-card--oroscopo .cdg-card__title { color: #fff; }

.cdg-card__body {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cdg-card__body--cartomante { padding: 0.2rem 0; }
.cdg-card__body--cartomante .cartomante-card { max-width: 240px; }
.cdg-card__body--oroscopo { padding: 0.4rem 0 0.6rem; }

.cdg-zodiac {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
}
.cdg-zodiac__icon {
  width: clamp(90px, 28vw, 130px);
  height: auto;
  filter: drop-shadow(0 6px 12px rgba(251, 191, 36, 0.35));
}
.cdg-zodiac__label {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #fbbf24;
  text-transform: uppercase;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.cdg-card__cta {
  margin-top: 0.8rem;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  background: rgba(251, 191, 36, 0.18);
  border: 1px solid rgba(251, 191, 36, 0.45);
  color: #fde68a;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  align-self: center;
  transition: background 0.2s ease, transform 0.2s ease;
}
.cdg-card--oroscopo:hover .cdg-card__cta,
.cdg-card--oroscopo:focus-visible .cdg-card__cta {
  background: rgba(251, 191, 36, 0.32);
  color: #fff;
  transform: translateX(2px);
}

/* Dark theme: card cartomante con bg scuro coerente. */
html:is(.theme-dark, [data-bs-theme='dark']) .cdg-card--cartomante {
  background: linear-gradient(160deg, rgba(30, 22, 58, 0.95) 0%, rgba(48, 28, 86, 0.88) 100%);
  border-color: rgba(251, 191, 36, 0.25);
  color: #f5f3ff;
}
html:is(.theme-dark, [data-bs-theme='dark']) .cdg-card--cartomante .cdg-card__title { color: #f5f3ff; }
html:is(.theme-dark, [data-bs-theme='dark']) .cdg-card--cartomante .cdg-card__eyebrow { color: rgba(251, 191, 36, 0.85); }

/* ---------- Pillola status cartomante (componente centralizzato) ----------
   Sostituisce la vecchia .onlinepill giallo+blu. Usato in:
   - card avatar (lista /cartomanti/, banner cartomante del giorno)
   - pagina dettaglio /cartomanti/{nome}/ (variante --md piu' grande)
   Online ha un dot pulsante (pattern Slack/Discord). */
.cartomante-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin: 0.25rem 0;
  padding: 0.22rem 0.65rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 999px;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
}
.cartomante-status-badge__label { display: inline-block; }

/* Variante extra compatta per overlay su avatar piccoli. */
.cartomante-status-badge--xs {
  gap: 0.22rem;
  padding: 0.18rem 0.42rem;
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  border: 1px solid rgba(255, 255, 255, 0.72);
}
.cartomante-status-badge--xs .cartomante-status-badge__dot {
  width: 6px;
  height: 6px;
}

/* Variante media per pagina dettaglio cartomante. */
.cartomante-status-badge--md {
  padding: 0.4rem 0.95rem;
  font-size: 0.82rem;
  gap: 0.45rem;
}
.cartomante-status-badge--md .cartomante-status-badge__dot {
  width: 10px;
  height: 10px;
}

/* Online: verde saturo pieno, testo bianco, AA su qualsiasi sfondo. */
.cartomante-status-badge--online {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35);
}
/* Offline: grigio neutro, testo chiaro contrastato. */
.cartomante-status-badge--offline {
  background: rgba(71, 85, 105, 0.85);
  color: #f1f5f9;
}
/* Ferie: ambra saturo pieno, testo scuro per contrasto. */
.cartomante-status-badge--ferie {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: #1a1438;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.32);
}

/* Status dot pulsante (solo online): cerchio bianco + alone propaga. */
.cartomante-status-badge__dot {
  position: relative;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  animation: cartomanteStatusDotPulse 1.8s ease-out infinite;
  flex-shrink: 0;
}
@keyframes cartomanteStatusDotPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
  70%  { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .cartomante-status-badge__dot { animation: none; }
}

/* ---------- Sezioni con info collapsibile ---------- */
.cartomanti-section {
  /* FEA.LIGHT.2a: il vecchio rgba(0,0,0,.28) contava sul canvas viola scuro
     sotto (FEA.LIGHT.1 lo ha schiarito): pannello ora scuro auto-sufficiente,
     così tutto il testo bianco interno resta leggibile in entrambi i temi.
     Conversione light completa rimandata a FEA.LIGHT.2 (verifica live). */
  background: linear-gradient(160deg, rgba(43, 36, 82, 0.97), rgba(28, 23, 58, 0.97));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 0.8rem 0.85rem;
  box-shadow: 0 10px 24px rgba(10, 15, 45, 0.25);
}
.cartomanti-section + .cartomanti-section { margin-top: 0.85rem; }
.cartomanti-section #containercartomanti { margin-top: 0.6rem; }

.cartomanti-section__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}
.cartomanti-section__title {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}
.cartomanti-section__title a { color: #fff; text-decoration: none; }
.cartomanti-section__title h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cartomanti-section__pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cartomanti-section__pill--online {
  background: rgba(74, 222, 128, 0.22);
  border: 1px solid rgba(74, 222, 128, 0.4);
  color: #b3f2c7;
}
.cartomanti-section__pill--ferie {
  background: rgba(212, 175, 55, 0.18);
  border: 1px solid rgba(212, 175, 55, 0.35);
  color: #f5e6b8;
}

/* Info button (i): apre AluModal centrale via data-alu-info delegation
   in js/general.js. Niente piu' <details> inline che esce dal box. */
.cartomanti-section__info {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.cartomanti-section__info:hover,
.cartomanti-section__info:focus-visible {
  background: rgba(212, 175, 55, 0.25);
  color: #fff;
  transform: translateY(-1px);
  outline: none;
}
.cartomanti-section__info svg {
  width: 0.95em;
  height: 0.95em;
}

/* ---------- Dettaglio cartomante: like compatto e responsive ---------- */
.cartomante-media .cartomante-like {
  --profile-like-heart: clamp(54px, 17vw, 68px);
  --profile-like-count: clamp(2.05rem, 10vw, 3rem);
  color: var(--text-on-light);
  display: flex;
  justify-content: center;
  max-width: min(100%, 340px);
}

.cartomante-media .cartomante-like .like-button {
  --heart-size: var(--profile-like-heart);
  --count-size: var(--profile-like-count);
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 2.4vw, 0.85rem);
  line-height: 1;
  min-height: 56px;
}

.cartomante-media .cartomante-like .like-button .heart-icon {
  flex: 0 0 auto;
  display: block;
}

.cartomante-media .cartomante-like .like-button .like-count {
  color: currentColor;
  font-weight: 500;
  line-height: 0.95;
  margin-left: 0;
}

html:is(.theme-dark, [data-bs-theme='dark']) .cartomante-media .cartomante-like {
  color: var(--text-on-dark);
}

@media (min-width: 768px) {
  .cartomante-media .cartomante-like {
    --profile-like-heart: clamp(84px, 8vw, 104px);
    --profile-like-count: clamp(3.8rem, 5.4vw, 5rem);
    max-width: 420px;
  }

  .cartomante-media .cartomante-like .like-button {
    min-height: 96px;
  }
}

/* ---------- Mobile fine-tuning ---------- */
@media (max-width: 576px) {
  .cartomanti-section { padding: 0.7rem; }
  .cartomanti-controls {
    grid-template-columns: 1fr 0.65fr;
    gap: 0.4rem;
  }
  .cartomanti-searchbox,
  .cartomanti-select-wrapper { padding: 0.45rem 0.55rem; }
  .cartomanti-section__title h2 { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cartomanti-zodiac__link { transition: none; }
}

/* ==========================================================
   FEA.LIGHT.2b — variante LIGHT della lista cartomanti.
   Override SOLO in scope light: il default resta l'aspetto
   scuro attuale, quindi il tema dark e' invariato per
   costruzione. Design-system §3.0-§3.5: superfici chiare,
   distinzione blocchi via bordo+ombra, accenti ambra scuri.
   ========================================================== */
html:is(.theme-light, [data-bs-theme='light']) .cartomanti-layout {
  color: var(--alu-text);
}

/* Barra filtri sticky: frosted chiara coerente col canvas */
html:is(.theme-light, [data-bs-theme='light']) .cartomanti-controls {
  background: linear-gradient(180deg, rgba(247, 246, 253, 0.97), rgba(247, 246, 253, 0.86));
  box-shadow: 0 8px 18px -12px rgba(46, 29, 84, 0.28);
}
html:is(.theme-light, [data-bs-theme='light']) .cartomanti-searchbox,
html:is(.theme-light, [data-bs-theme='light']) .cartomanti-select-wrapper {
  background: #ffffff;
  border-color: rgba(46, 29, 84, 0.18);
}
html:is(.theme-light, [data-bs-theme='light']) .cartomanti-searchbox input,
html:is(.theme-light, [data-bs-theme='light']) .cartomanti-select-wrapper select {
  color: var(--alu-text);
}
html:is(.theme-light, [data-bs-theme='light']) .cartomanti-searchbox input::placeholder {
  color: rgba(37, 22, 54, 0.55);
}
html:is(.theme-light, [data-bs-theme='light']) .cartomanti-select-wrapper select {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232e1d4a'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
}
html:is(.theme-light, [data-bs-theme='light']) .cartomanti-select-wrapper select option {
  background: #ffffff;
  color: #2e1d4a;
}
html:is(.theme-light, [data-bs-theme='light']) .cartomanti-zodiac__links::-webkit-scrollbar-thumb {
  background: rgba(46, 29, 84, 0.25);
}

/* Pannelli sezione: chiari con tinta lilla; le card bianche interne
   restano distinte tramite bordo + ombra (§3.4). */
html:is(.theme-light, [data-bs-theme='light']) .cartomanti-section {
  background: linear-gradient(160deg, #ffffff 0%, #f4f0fb 100%);
  border-color: rgba(46, 29, 84, 0.12);
  box-shadow: 0 4px 12px rgba(20, 12, 40, 0.08);
}
html:is(.theme-light, [data-bs-theme='light']) .cartomanti-section__title a {
  color: var(--alu-text);
}
html:is(.theme-light, [data-bs-theme='light']) .cartomanti-section__pill {
  background: rgba(46, 29, 84, 0.08);
  color: #3d2a5c;
}
html:is(.theme-light, [data-bs-theme='light']) .cartomanti-section__pill--online {
  background: rgba(16, 185, 129, 0.14);
  border-color: rgba(5, 150, 105, 0.45);
  color: #047857;
}
html:is(.theme-light, [data-bs-theme='light']) .cartomanti-section__pill--ferie {
  background: rgba(251, 191, 36, 0.16);
  border-color: rgba(180, 83, 9, 0.4);
  color: #92400e;
}
html:is(.theme-light, [data-bs-theme='light']) .cartomanti-section__info {
  background: rgba(46, 29, 84, 0.08);
  border-color: rgba(46, 29, 84, 0.18);
  color: #4e2786;
}
html:is(.theme-light, [data-bs-theme='light']) .cartomanti-section__info:hover,
html:is(.theme-light, [data-bs-theme='light']) .cartomanti-section__info:focus-visible {
  background: rgba(212, 175, 55, 0.3);
  color: #2e1d4a;
}

/* ==========================================================
   Cartomanti page viewport-first tuning (2026-07-30)
   Obiettivo: su mobile il primo blocco "Cartomanti online" deve
   apparire subito dopo hero, filtri e scelta guidata, mantenendo
   H1 e testo SEO/GEO visibili e crawlable.
   ========================================================== */
.cartomanti-page > .alu-pagehead {
  margin-bottom: clamp(0.55rem, 1.7vw, 0.95rem);
}

.cartomanti-page .cartomanti-layout {
  margin-top: 0 !important;
}

.cartomanti-guided-choice-island,
.alu-lazy-island.cartomanti-guided-choice-island,
[data-alu-component='cartomanti.guided_choice'] {
  min-height: 0 !important;
  margin-block: 0.35rem 0.6rem !important;
  padding-block: 0 !important;
}

.cartomanti-page .conversion-guide--cartomanti {
  margin-block: 0.25rem 0.55rem !important;
}

.cartomanti-page .CorpoMessaggio {
  padding-top: 0;
}

@media (max-width: 575.98px) {
  .cartomanti-page > .alu-pagehead {
    min-height: 0;
    margin-bottom: 0.65rem;
  }

  .cartomanti-page > .alu-pagehead .alu-pagehead__scene {
    padding: 0.64rem 0.75rem;
  }

  .cartomanti-page > .alu-pagehead .alu-pagehead__glow {
    inset: 14% 7%;
    filter: blur(0.8rem);
    opacity: 0.72;
  }

  .cartomanti-page > .alu-pagehead .alu-pagehead__inner {
    width: min(100%, 500px);
    padding: 0.82rem 0.92rem 0.88rem;
    border-radius: 14px;
  }

  .cartomanti-page > .alu-pagehead .alu-pagehead__kicker {
    margin-bottom: 0.45rem;
    padding: 0.24rem 0.58rem;
    font-size: 0.62rem;
    line-height: 1.15;
  }

  .cartomanti-page > .alu-pagehead .alu-pagehead__title {
    margin-bottom: 0.34rem;
    font-size: clamp(1.8rem, 9vw, 2.16rem);
    line-height: 1.06;
  }

  .cartomanti-page > .alu-pagehead .alu-pagehead__subtitle {
    font-size: 0.94rem;
    line-height: 1.34;
  }

  .cartomanti-page > .container {
    margin-top: 0 !important;
  }

  .cartomanti-controls {
    margin-bottom: 0.42rem;
    padding: 0.38rem 0;
    top: 4.15rem;
  }

  .cartomanti-searchbox,
  .cartomanti-select-wrapper {
    min-height: 52px;
    border-radius: 12px;
  }

  .cartomanti-zodiac {
    margin-bottom: 0.35rem;
  }

  .cartomanti-zodiac__links {
    padding-block: 0.1rem;
  }

  .cartomanti-page .conversion-guide-card.conversion-guide__launcher {
    min-height: 58px !important;
    padding: 0.45rem 0.62rem 0.45rem 0.48rem !important;
    border-radius: 13px !important;
  }

  .cartomanti-page .conversion-guide-card__media {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    border-radius: 10px;
  }

  .cartomanti-page .conversion-guide-card__copy {
    font-size: 0.86rem;
    line-height: 1.16;
  }

  .cartomanti-page .CorpoMessaggio {
    padding: 0.4rem 0.45rem 0;
  }

  .cartomanti-section {
    padding: 0.58rem;
    border-radius: 14px;
  }

  .cartomanti-section__head {
    margin-bottom: 0.32rem;
  }

  .cartomanti-section #containercartomanti {
    margin-top: 0.35rem;
  }
}

/* Source: cartomante-detail.css */
/* ─────────────────────────────────────────────────────────────────────────
   Pagina dettaglio cartomante — /cartomanti/{nome}
   CARTOMANTE.REDESIGN.1 (2026-09-01)

   Mobile-first, token `--alu-*`, nessun colore inventato (design-system §0,
   §2). Breakpoint 720px, quello canonico del progetto (§4).

   Il problema che risolve, misurato prima: su iPhone 14 Pro il primo pulsante
   d'acquisto cominciava a y=769 — oltre la prima schermata — dopo ~490px di
   identita' (foto grande, cuore da 125px, etichetta condividi, 5 icone).
   Nulla suggeriva che sotto ci fosse altro.
   ───────────────────────────────────────────────────────────────────────── */

.cdett {
  --cprof-foto: 104px;
  /* Quanto la foto sale sopra il confine. Non e' meta' altezza: con un
     banner-titolo alto 73px, meta' foto ne copriva il nome. Un terzo basta a
     leggere "a cavallo" e lascia il titolo libero. */
  --cprof-foto-overlap: 18px;
  /* Meta' altezza della pill di stato: sporge sotto la foto e va scalata
     dal contenuto, altrimenti finisce sui chip. */
  --cprof-stato-half: 13px;
  /* Anello di stacco fra pill e foto. Colore SOLIDO e non
     --alu-surface-section: quel token e' un linear-gradient, e un gradiente
     sostituito dentro box-shadow invalida l'intera dichiarazione a tempo di
     calcolo — il valore diventa `none` e il fallback della var() non entra
     mai in gioco, perche' la variabile e' definita, solo inadatta. */
  --cprof-stato-ring: #fff;
  /* Spazi stretti su mobile: 30/16/24px fra i blocchi erano aria sprecata su
     uno schermo dove il contenuto utile deve arrivare presto. Da 720px in su
     si torna a respirare. */
  --cdett-gap: var(--alu-space-2, .5rem);
  display: flex;
  flex-direction: column;
  gap: var(--cdett-gap);
  max-width: 60rem;
  margin: 0 auto;
  padding: 0 var(--alu-space-3, .75rem) var(--alu-space-8, 2rem);
}

/* ── Scheda profilo ─────────────────────────────────────────────────────── */
/* MOBILE: la scheda non e' un'isola. E' una fascia a tutta larghezza
   ATTACCATA al banner-titolo, che prosegue nella superficie degli elementi
   sotto — profilo, invito allo scorrimento e consulti si leggono come un
   unico contenitore, non come tre riquadri che galleggiano.
   Il full-bleed si ottiene annullando il padding orizzontale di `.cdett`
   con un margine negativo pari: cosi' resta un valore solo da cambiare. */
.cprof { margin-inline: calc(var(--alu-space-3, .75rem) * -1); }

/* "Attaccata" davvero: `.alu-pagehead` porta `margin-bottom:.9rem` (14,4px
   misurati), che teneva la fascia staccata dal banner. Si annulla SOLO dove
   il banner e' seguito da questa pagina, senza toccare il componente. */
.alu-pagehead:has(+ .cdett) { margin-bottom: 0; }
/* `msgbackfrom()` e `promoDiv()` possono rendere contenitori vuoti: in un
   flex con `gap` occupano comunque spazio e staccavano la fascia dal banner. */
.cdett > *:empty { display: none; }

/* La foto e' l'unico elemento che lega banner-titolo e fascia profilo: sta a
   cavallo fra i due, centrata. Esce dal flusso, quindi la fascia si apre in
   alto quanto basta a contenerne la meta' inferiore. */
.cprof__card {
  /* `.favorite-toggle` e' `position:absolute` (favorites-gui.css): senza un
     antenato posizionato si ancorava all'angolo della PAGINA, misurato a
     @328,11. Il componente non va toccato: gli si da' il contenitore che si
     aspetta. */
  position: relative;
  display: block;
  /* Lo shorthand PRIMA del longhand: scritto dopo, azzerava il padding-top
     calcolato e la foto finiva sopra pill e chip. */
  padding: var(--alu-space-2, .5rem);
  padding-top: calc(var(--cprof-foto) - var(--cprof-foto-overlap) + var(--cprof-stato-half) + .55rem);
  /* Padding SIMMETRICO, non solo a destra: il pulsante preferiti e' fuori dal
     flusso e non ha bisogno di spazio riservato, mentre una spaziatura
     asimmetrica spostava il gruppo centrato (segno zodiacale + like) di 26px
     a sinistra del centro pagina — centrato nel suo box, ma non nella
     pagina, che e' quello che si vede. */
  padding-inline: 3.75rem;
  border-radius: 0;
  background: var(--alu-surface-section, #fff);
  border: 0;
  border-bottom: 1px solid var(--alu-border, rgba(46, 29, 84, .14));
  box-shadow: none;
}



.cprof__foto {
  position: absolute;
  top: calc(var(--cprof-foto-overlap) * -1);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
.cprof__foto img {
  width: var(--cprof-foto);
  height: var(--cprof-foto);
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 3px solid var(--alu-surface-section, #fff);
  box-shadow: 0 0 0 2px var(--alu-gold-a45, rgba(251, 191, 36, .45)), 0 8px 20px rgba(34, 18, 57, .18);
}

/* A cavallo del bordo inferiore della foto e centrata su di essa: il
   translate(-50%, 50%) la tiene agganciata all'immagine, non alla fascia. */
.cprof__stato {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  z-index: 2;
  white-space: nowrap;
}
.cprof__stato > * {
  box-shadow: 0 0 0 2px var(--cprof-stato-ring), 0 2px 8px rgba(34, 18, 57, .22);
}

.cprof__info { display: flex; flex-direction: column; align-items: center; gap: .4rem; min-width: 0; }
.cprof__chips { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4rem; }

.cprof__chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  min-height: 32px;
  padding: .25rem .6rem;
  border-radius: var(--alu-radius-pill, 999px);
  background: color-mix(in srgb, var(--alu-accent, #b8860b) 10%, transparent);
  border: 1px solid var(--alu-gold-a22, rgba(251, 191, 36, .22));
  color: var(--alu-text, #1d1430);
  font-size: .85rem;
  font-weight: 700;
  text-decoration: none;
  line-height: 1.2;
}
/* Il chip zodiaco e' un link: tap target pieno anche se il testo e' corto. */
a.cprof__chip { min-width: 44px; justify-content: center; }
a.cprof__chip:hover { border-color: var(--alu-gold, #fbbf24); }

/* Il cuore resta il componente `.like-button`: se ne ridimensiona solo il
   token, invece di riscriverlo. Da 125px (meta' schermata su mobile) a una
   pillola in linea con gli altri chip. */
.cprof__chip--like { padding: .15rem .5rem; }
.cprof__chip--like .like-button { --heart-size: 20px; --count-size: .85rem; }



/* ── Invito allo scorrimento ────────────────────────────────────────────── */
/* Il punto piu' importante della pagina su mobile: dire che sotto ci sono i
   consulti, invece di lasciarlo scoprire. Freccia animata, ferma se l'utente
   ha chiesto meno movimento (§6.3). */
/* Continua la stessa superficie della fascia profilo: insieme formano il
   "contenitore del profilo", non due blocchi che galleggiano separati.
   Il margine negativo superiore annulla il `gap` del flex padre. */
.cdett__scrollhint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin: calc(var(--cdett-gap) * -1) calc(var(--alu-space-3, .75rem) * -1) 0;
  padding: .5rem .75rem .65rem;
  background: var(--alu-surface-section, #fff);
  border-bottom: 1px solid var(--alu-border, rgba(46, 29, 84, .14));
  font-size: .88rem;
  font-weight: 800;
  color: var(--alu-text-muted, rgba(35, 18, 53, .72));
  text-decoration: none;
}
.cdett__scrollhint em {
  font-style: normal;
  animation: cdett-bob 1.6s ease-in-out infinite;
}
@keyframes cdett-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .cdett__scrollhint em { animation: none; } }

/* ── Blocco consulti ────────────────────────────────────────────────────── */
/* buybtns NON viene toccato: si toglie solo il margine legacy che lo
   staccava dal resto e si dichiara l'ancora dello scorrimento. */
/* L'ancora deve schivare navbar E barra condensata: con un valore fisso il
   bordo superiore dei consulti finiva sotto la barra (misurato: consulti a
   y=80 con la barra che arriva a 152). Il JS scrive l'offset reale. */
.cdett__servizi { scroll-margin-top: var(--cdett-anchor-offset, 10rem); }
.cdett__servizi #buybtns { margin: 0; }

/* MOBILE E TABLET: la striscia va da bordo a bordo.
   NON si annulla il padding di `.cdett` come fa `.cprof`: sopra c'e' un
   `.container` Bootstrap il cui margine automatico cambia a ogni suo
   breakpoint (a 768px l'inset totale e' 40px, non i 12px del padding), quindi
   un valore fisso e' sbagliato per costruzione — misurato: striscia a 28px
   dai bordi invece che a 0.
   Si parte dal centro e si torna al bordo del viewport, qualunque cosa ci sia
   in mezzo. La larghezza viene da `--alu-vw`, misura centralizzata scritta da
   `js/general.js` con `clientWidth`: `100vw` comprende la barra di scorrimento
   e su una finestra desktop stretta sconfinerebbe di ~15px. Il fallback
   `100vw` copre il momento prima che il JS parta. */
@media (max-width: 1023.98px) {
  .cdett__servizi { margin-inline: calc(50% - var(--alu-vw, 100vw) / 2); }
}

/* SCHERMI LARGHI: la striscia resta piu' ampia del contenitore di testo (piu'
   schede visibili senza scorrere) ma con margini laterali simmetrici e mai
   sotto --cdett-strip-gutter. Il clamp fa il lavoro: quando lo spazio non
   basta lo sconfinamento e' 0 e la striscia rientra nel contenitore, senza
   bisogno di un secondo breakpoint. */
@media (min-width: 1024px) {
  .cdett__servizi {
    --cdett-strip-gutter: 2.5rem;
    --cdett-strip-breakout: 5rem;
    margin-inline: calc(-1 * clamp(
      0px,
      (100vw - 100% - 2 * var(--cdett-strip-gutter)) / 2,
      var(--cdett-strip-breakout)
    ));
  }
}

/* ── Descrizione ────────────────────────────────────────────────────────── */
.cdett__bio {
  padding: var(--alu-space-4, 1rem);
  border-radius: var(--alu-radius-lg, 14px);
  background: var(--alu-surface-section, #fff);
  border: 1px solid var(--alu-border, rgba(46, 29, 84, .14));
  line-height: 1.65;
}
.cdett__bio h2 { margin: 0 0 .6rem; font-size: 1.05rem; }
/* Testo giustificato su colonna stretta produce fiumi bianchi: allineato a
   sinistra su mobile, dove la colonna e' piu' stretta. */
.cdett__bio p { text-align: left; }

.cdett__share { display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.cdett__share > div { margin: 0; }

.cdett__ferie img { width: 100%; max-width: 22rem; margin: 0 auto; display: block; }

/* ── Da tablet in su ────────────────────────────────────────────────────── */
@media (min-width: 720px) {
  .cdett { --cdett-gap: var(--alu-space-6, 1.5rem); padding-top: var(--alu-space-4, 1rem); padding-inline: var(--alu-space-4, 1rem); }
  /* Da tablet in su la fascia torna a essere una scheda autonoma: c'e'
     spazio ai lati e il full-bleed non aggiunge niente. */
  .cprof { margin-inline: 0; }
  .alu-pagehead:has(+ .cdett) { margin-bottom: .9rem; }
  .cdett { --cprof-foto: 132px; --cprof-foto-overlap: 30px; }
  .cprof__card {
    padding: var(--alu-space-4, 1rem);
    padding-top: calc(var(--cprof-foto) - var(--cprof-foto-overlap) + var(--cprof-stato-half) + .5rem);
    padding-inline: 4.5rem;
    border-radius: var(--alu-radius-xl, 20px);
    border: 1px solid var(--alu-border, rgba(46, 29, 84, .14));
    box-shadow: 0 10px 28px rgba(34, 18, 57, .08);
  }
  .cprof__chip { font-size: .9rem; min-height: 36px; }
  /* Su schermi alti i consulti si vedono senza scorrere: l'invito sparisce
     invece di mentire. */
  .cdett__scrollhint { display: none; }
  .cdett__bio p { text-align: justify; }
}

html:is(.theme-dark, [data-bs-theme='dark']) .cdett { --cprof-stato-ring: #241a3d; }
html:is(.theme-dark, [data-bs-theme='dark']) .cprof__chip { color: var(--alu-text-on-dark, #f5f3ff); }
html:is(.theme-dark, [data-bs-theme='dark']) .cdett__scrollhint { color: var(--alu-text-on-dark-soft, rgba(245, 243, 255, .84)); }

/* ── Risposte gratuite ──────────────────────────────────────────────────── */
/* Chiuse di default: rese per esteso valgono 13.621px su mobile. La versione
   precedente le conteneva in un riquadro con scorrimento interno — uno scroll
   annidato dentro quello della pagina, fastidioso su mobile. */
.cdett__risposte {
  border-radius: var(--alu-radius-lg, 14px);
  background: var(--alu-surface-section, #fff);
  border: 1px solid var(--alu-border, rgba(46, 29, 84, .14));
  overflow: hidden;
}
.cdett__risposte-toggle {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 48px;
  padding: .7rem 1rem;
  cursor: pointer;
  font-weight: 800;
  list-style: none;
  color: var(--alu-text, #1d1430);
}
.cdett__risposte-toggle::-webkit-details-marker { display: none; }
.cdett__risposte-toggle span:nth-child(2) { flex: 1 1 auto; min-width: 0; }
.cdett__risposte-icon { font-style: normal; font-size: 1.3rem; line-height: 1; opacity: .6; }
.cdett__risposte[open] .cdett__risposte-icon { transform: rotate(45deg); }
.cdett__risposte-body { padding: 0 .5rem .5rem; }
.cdett__risposte-toggle:focus-visible { outline: 2px solid var(--alu-gold, #fbbf24); outline-offset: -2px; }

html:is(.theme-dark, [data-bs-theme='dark']) .cdett__risposte-toggle { color: var(--alu-text-on-dark, #f5f3ff); }

/* ── Barra profilo condensata (CARTOMANTE.REDESIGN.3) ───────────────────── */
/* Compare quando la scheda profilo esce dallo schermo. Ispirata al
   comportamento di un concorrente, ma con dentro l'AZIONE invece delle
   statistiche: su una pagina lunga il pulsante d'acquisto resta altrimenti
   indietro, e questa lo tiene sempre a un tocco.
   `top` viene da una variabile scritta dal JS leggendo il bordo inferiore
   della navbar sticky: su staging c'e' la fascia rossa (navbar a top:32px),
   in produzione no. Un valore fisso avrebbe sbagliato in uno dei due. */
.cprof-sticky {
  position: fixed;
  top: var(--cprof-sticky-top, 0px);
  left: 0;
  right: 0;
  z-index: 9990;
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .4rem .7rem;
  /* `--alu-page-bg` e non `--alu-surface`: quest'ultimo e' rgba(...,.96) e
     rgba(...,.88) in scuro, cioe' TRASPARENTE — il testo della pagina si
     leggeva attraverso la barra (visto a schermo). Il canvas di pagina e'
     l'unico token pieno in entrambi i temi, ed e' anche quello giusto
     semanticamente: la barra deve sembrare parte del piano pagina. */
  background: var(--alu-page-bg, #fff);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--alu-border, rgba(46, 29, 84, .14));
  box-shadow: 0 6px 18px rgba(34, 18, 57, .12);
  transform: translateY(-110%);
  opacity: 0;
  visibility: hidden;
  transition: transform .22s ease, opacity .22s ease, visibility .22s;
}
.cprof-sticky.is-visible { transform: translateY(0); opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .cprof-sticky { transition: none; } }

.cprof-sticky__foto { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.cprof-sticky__nome {
  font-weight: 850;
  font-size: 1rem;
  color: var(--alu-text, #1d1430);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cprof-sticky__stato { width: .6rem; height: .6rem; border-radius: 50%; flex: 0 0 auto; }
.cprof-sticky__stato--online { background: var(--alu-status-online, #22c55e); }
.cprof-sticky__stato--offline { background: var(--alu-status-offline, #94a3b8); }
.cprof-sticky__stato--ferie { background: var(--alu-status-ferie, #f59e0b); }

.cprof-sticky__cta {
  margin-left: auto;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: .35rem .9rem;
  border-radius: var(--alu-radius-pill, 999px);
  background: var(--alu-grad-gold, linear-gradient(135deg, #fbbf24, #f59e0b));
  color: var(--alu-text-on-gold, #2a1b4a);
  font-weight: 850;
  font-size: .92rem;
  text-decoration: none;
}
.cprof-sticky__cta:focus-visible { outline: 2px solid var(--alu-text-on-gold, #2a1b4a); outline-offset: 2px; }

html:is(.theme-dark, [data-bs-theme='dark']) .cprof-sticky__nome { color: var(--alu-text-on-dark, #f5f3ff); }

/* ===========================================================================
   LIKE.CARD.1 (2026-09-06) — card «lascia un cuore», sopra le recensioni.

   Il cuore prende `--cprof-foto`: e' la stessa variabile che dimensiona il
   cerchio della foto del cartomante, quindi le due misure non possono
   divergere se un giorno quella cambia. Il numero e' volutamente piu' basso
   del cuore (0.68 della sua altezza), come chiesto.

   L'animazione: i cuori salgono, si allargano e si dissolvono lentamente,
   con una deriva orizzontale casuale per tap, cosi' tocchi ravvicinati non
   producono la stessa identica traiettoria. La durata (1.6s) e' piu' del
   doppio di quella del cuore standard del sito: qui deve leggersi come un
   gesto, non come un lampo.
   =========================================================================== */

/* CPLIKE.SPACING.1 (2026-09-06) — la card respira meno, soprattutto sotto.
   Il vuoto sotto NON era un margine: l'isola lazy riserva
   `min_height: 13rem` = 208px, la card montata ne occupa 183, e quei 25px
   restavano li' per sempre. La riserva serve PRIMA del mount, per non far
   saltare la pagina mentre il componente arriva; dopo l'engine marca l'isola
   con `data-alu-lazy-loaded` e la riserva puo' essere rilasciata.
   Ristretto a QUESTA isola: le altre tengono il comportamento di oggi. */
.alu-lazy-island[data-alu-component="cartomante.like_card"][data-alu-lazy-loaded] {
  min-height: 0;
}

.cplike {
  max-width: 1080px;
  margin: .5rem auto .25rem;
  padding: 0 .5rem;
  min-width: 0;
  text-align: center;
}

/* Una riga sola, sempre: `nowrap` piu' una misura legata alla larghezza dello
   schermo. Il caso peggiore e' il nome piu' lungo del listino (9 caratteri:
   Antonella, Francesca), cioe' 36 caratteri in tutto con la formula breve.
   La frase corta ha permesso di ALZARE il carattere invece di lasciarlo a
   12px: un invito che si legge fatica meno a essere seguito. Misurato con
   Antonella su 390/360/320px. */
.cplike__title {
  margin: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(.8rem, 4vw, 1.05rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: .01em;
  text-align: center;
  color: var(--alu-text, #231235);
}

.cplike__box {
  position: relative;
  /* I cuori devono poter USCIRE dalla card: con `overflow:hidden` sparivano
     tagliati contro il bordo superiore dopo un centinaio di pixel, che si legge
     come un glitch invece che come un cuore che vola via. Sono
     `pointer-events:none`, quindi uscendo non intercettano nulla. */
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(.45rem, 2.5vw, .8rem);
  padding: clamp(.8rem, 3.5vw, 1.2rem) .75rem;
  border: 1px solid var(--alu-border, rgba(46, 29, 84, .16));
  border-radius: 20px;
  background: var(--alu-surface, #fff);
  box-shadow: 0 10px 26px rgba(20, 12, 40, .10);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .16s ease-out, box-shadow .16s ease-out;
}

.cplike__box:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(20, 12, 40, .14); }
.cplike__box:active { transform: scale(.985); }
.cplike__box:focus-visible { outline: 3px solid var(--alu-gold, #fbbf24); outline-offset: 3px; }

/* Il cuore quanto il cerchio della foto; il numero appena piu' basso. */
/* Due classi, non una: il componente porta `.like-button.like-lg`, che vale
   (0,2,0) esattamente come `.cplike__box .like-button` — e `components.css`
   viene caricato DOPO il bundle, quindi a parita' di peso vinceva lui e il
   cuore restava a 30px. Misurato, non dedotto. */
.cplike .cplike__box .like-button {
  --heart-size: var(--cprof-foto, 104px);
  --count-size: calc(var(--cprof-foto, 104px) * .68);
  gap: clamp(.4rem, 2.5vw, .9rem);
  cursor: pointer;
}

.cplike .cplike__box .like-count {
  font-size: var(--count-size);
  font-weight: 900;
  line-height: 1;
  color: var(--alu-text, #231235);
  font-variant-numeric: tabular-nums;   /* il numero non balla quando cambia */
}

/* I cuori volanti dentro questa card: piu' grandi, piu' alti, piu' lenti. */
.cplike .cplike__box .floating-heart {
  width: calc(var(--cprof-foto, 104px) * .55);
  height: calc(var(--cprof-foto, 104px) * .55);
  animation: cplikeFloat 1.6s cubic-bezier(.22, .61, .36, 1) forwards;
}

@keyframes cplikeFloat {
  0%   { transform: translate(-50%, 0) scale(.6) rotate(var(--cplike-rot, 0deg)); opacity: 0; }
  12%  { transform: translate(-50%, -8px) scale(1.1) rotate(var(--cplike-rot, 0deg)); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--cplike-drift, 0px)), -160px) scale(1.35) rotate(var(--cplike-rot, 0deg)); opacity: 0; }
}

@media (max-width: 380px) {
  .cplike .cplike__box .like-button { --heart-size: 84px; --count-size: 57px; }
}

html:is(.theme-dark, [data-bs-theme='dark']) .cplike__box {
  background: rgba(25, 28, 54, .94);
  border-color: rgba(199, 179, 255, .22);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .38);
}
html:is(.theme-dark, [data-bs-theme='dark']) .cplike__title,
html:is(.theme-dark, [data-bs-theme='dark']) .cplike__box .like-count { color: #f0f4ff; }
html:is(.theme-dark, [data-bs-theme='dark']) .cplike__title { color: rgba(198, 202, 230, .88); }

/* Chi ha chiesto meno movimento riceve comunque il riscontro del tocco: il
   cuore compare e sfuma, senza volo ne' sollevamento della card. */
@media (prefers-reduced-motion: reduce) {
  .cplike__box, .cplike__box:hover, .cplike__box:active { transition: none; transform: none; }
  .cplike .cplike__box .floating-heart { animation: cplikeFade .6s ease-out forwards; }
  @keyframes cplikeFade {
    0% { transform: translate(-50%, 0) scale(1); opacity: .9; }
    100% { transform: translate(-50%, 0) scale(1); opacity: 0; }
  }
}

/* Source: loading-modal.css */
/* ALU.LoadingModal — overlay di attesa minimale centralizzato (PAY.UX.1, 2026-06-10).
   Componente JS: js/loading-modal.js (window.ALU.LoadingModal).
   Stili estratti da services.css (ex .alu-quick-buy-loading); i selettori
   legacy .alu-quick-buy-loading* restano come alias per il markup di
   fallback in paypal-v2-checkout.js. */

.alu-loading-modal,
.alu-quick-buy-loading {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(10, 16, 36, 0.46);
  backdrop-filter: blur(6px);
}

.alu-loading-modal__dialog,
.alu-quick-buy-loading__dialog {
  width: min(92vw, 360px);
  padding: 1.35rem 1.15rem;
  color: #2e1d4a;
  text-align: center;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 244, 255, 0.96) 100%);
  border: 1px solid rgba(251, 191, 36, 0.32);
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(20, 12, 40, 0.32);
}

.alu-loading-modal__spinner,
.alu-quick-buy-loading__spinner {
  width: 34px;
  height: 34px;
  margin: 0 auto 0.85rem;
  border: 3px solid rgba(78, 39, 134, 0.18);
  border-top-color: #f59e0b;
  border-radius: 999px;
  animation: alu-loading-modal-spin 0.8s linear infinite;
}

.alu-loading-modal__message,
.alu-quick-buy-loading__message {
  margin: 0;
  font-size: clamp(0.98rem, 3.4vw, 1.08rem);
  font-weight: 800;
  line-height: 1.35;
}

html:is(.theme-dark, [data-bs-theme='dark']) .alu-loading-modal__dialog,
html:is(.theme-dark, [data-bs-theme='dark']) .alu-quick-buy-loading__dialog {
  color: #f5f3ff;
  background: linear-gradient(160deg, rgba(19, 25, 55, 0.98), rgba(46, 29, 84, 0.96));
  border-color: rgba(251, 191, 36, 0.38);
}

html:is(.theme-dark, [data-bs-theme='dark']) .alu-loading-modal__spinner,
html:is(.theme-dark, [data-bs-theme='dark']) .alu-quick-buy-loading__spinner {
  border-color: rgba(245, 243, 255, 0.2);
  border-top-color: #fde68a;
}

@keyframes alu-loading-modal-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .alu-loading-modal__spinner,
  .alu-quick-buy-loading__spinner {
    animation: none;
  }
}

/* Source: lazy-engine.css */
.alu-lazy-island {
  position: relative;
  min-height: var(--alu-lazy-min-height, 8rem);
}

.alu-lazy-island[aria-busy='true'] {
  cursor: progress;
}

.alu-lazy-placeholder {
  display: grid;
  gap: var(--alu-space-3);
  padding: var(--alu-space-4);
  border: 1px solid var(--alu-border, rgba(46, 29, 74, .12));
  border-radius: var(--alu-radius-lg);
  background: var(--alu-surface, rgba(255, 255, 255, .86));
  box-shadow: var(--alu-shadow-1);
  overflow: hidden;
}

.alu-lazy-placeholder__row {
  display: flex;
  align-items: center;
  gap: var(--alu-space-3);
}

.alu-lazy-placeholder__avatar,
.alu-lazy-placeholder__line,
.alu-lazy-placeholder__block {
  display: block;
  border-radius: var(--alu-radius-pill);
  background: linear-gradient(90deg, rgba(255, 255, 255, .32), var(--alu-gold-a18), rgba(255, 255, 255, .32));
  background-size: 220% 100%;
  animation: alu-lazy-shimmer 1.35s ease-in-out infinite;
}

.alu-lazy-placeholder__avatar {
  width: 3rem;
  height: 3rem;
  flex: 0 0 3rem;
  border-radius: 50%;
}

.alu-lazy-placeholder__line {
  width: min(100%, 14rem);
  height: .8rem;
}

.alu-lazy-placeholder__line--short {
  width: min(60%, 8rem);
}

.alu-lazy-placeholder__block {
  min-height: 6rem;
  border-radius: var(--alu-radius-md);
}

.alu-lazy-island.is-error,
.alu-lazy-island.is-timeout {
  min-height: 0;
}

/* Link di fallback discreto mostrato dall'engine se il componente non carica. */
.alu-lazy-fallback {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .9rem;
  border: 1px solid var(--alu-border, rgba(46, 29, 74, .18));
  border-radius: var(--alu-radius-pill, 999px);
  font-weight: 600;
  text-decoration: none;
  color: var(--alu-text, inherit);
}
.alu-lazy-fallback::after {
  content: "→";
}

/* ── Placeholder system (FRONT.LAZY.ENGINE.2) ───────────────────────────────
   Skeleton server-rendered per nome placeholder. Riservano altezza (anti-CLS)
   ereditando `--alu-lazy-min-height` dalla island. Solo primitive astratte,
   niente immagini reali. */

/* Label sr-only: annuncia il caricamento senza leggere lo shimmer. */
.alu-lazy-placeholder__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.alu-lazy-placeholder__body {
  display: grid;
  gap: var(--alu-space-3);
  width: 100%;
}

.alu-lazy-placeholder__badge {
  display: block;
  width: 4.5rem;
  height: 1.4rem;
  flex: 0 0 auto;
  border-radius: var(--alu-radius-pill);
  background: linear-gradient(90deg, rgba(255, 255, 255, .32), var(--alu-gold-a18), rgba(255, 255, 255, .32));
  background-size: 220% 100%;
  animation: alu-lazy-shimmer 1.35s ease-in-out infinite;
}

.alu-lazy-placeholder__block--media {
  min-height: 8rem;
}

/* cartomanti-strip: fila orizzontale di avatar + nome (scroll-safe). */
.alu-lazy-placeholder--strip .alu-lazy-placeholder__body {
  grid-auto-flow: column;
  grid-auto-columns: minmax(5.5rem, 1fr);
  overflow: hidden;
}
.alu-lazy-placeholder__tile {
  display: grid;
  justify-items: center;
  gap: var(--alu-space-2);
}

/* conversion-guide: singola card compatta coerente con il launcher reale. */
.alu-lazy-placeholder--conversion-guide {
  width: min(22rem, calc(100% - 1rem));
  margin-inline: auto;
  padding: .55rem .7rem;
  border-color: rgba(245, 158, 11, .34);
  background: linear-gradient(135deg, rgba(255, 255, 255, .92), rgba(255, 247, 226, .92));
  box-shadow: 0 10px 22px rgba(78, 39, 134, .10);
}
.alu-lazy-placeholder--conversion-guide .alu-lazy-placeholder__body {
  grid-template-columns: 46px 1fr;
  align-items: center;
  gap: .7rem;
}
.alu-lazy-placeholder--conversion-guide .alu-lazy-placeholder__avatar {
  width: 46px;
  height: 46px;
  flex-basis: 46px;
  border-radius: .75rem;
}
.alu-lazy-placeholder--conversion-guide .alu-lazy-placeholder__line {
  height: .72rem;
}

/* service-grid: griglia responsive di card finte. */
.alu-lazy-placeholder--grid .alu-lazy-placeholder__body {
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
}
.alu-lazy-placeholder__card {
  display: grid;
  gap: var(--alu-space-2);
  align-content: start;
}
.alu-lazy-placeholder__card--row {
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--alu-space-3);
}
.alu-lazy-placeholder__text {
  display: grid;
  gap: var(--alu-space-2);
  min-width: 0;
}

/* blog-card: media + testo affiancati, impilati su mobile. */
.alu-lazy-placeholder--blog .alu-lazy-placeholder__body {
  grid-template-columns: minmax(8rem, 38%) 1fr;
  align-items: center;
}
@media (max-width: 575.98px) {
  .alu-lazy-placeholder--blog .alu-lazy-placeholder__body { grid-template-columns: 1fr; }
}

/* info-counter: fila di box counter stabili. */
.alu-lazy-placeholder--counters .alu-lazy-placeholder__body {
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}
.alu-lazy-placeholder__counter {
  display: grid;
  justify-items: center;
  gap: var(--alu-space-2);
}

/* consults-list: card impilate con badge. */
.alu-lazy-placeholder--list .alu-lazy-placeholder__body {
  grid-template-columns: 1fr;
}

@keyframes alu-lazy-shimmer {
  0% { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .alu-lazy-placeholder__avatar,
  .alu-lazy-placeholder__line,
  .alu-lazy-placeholder__block,
  .alu-lazy-placeholder__badge {
    animation: none;
  }
}

#cartomantiBanner.cartomanti-wrapper {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
#cartomantiBanner .cartomanti-scroll {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.65rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  padding: 0.45rem 0.75rem 0.7rem;
}
#cartomantiBanner .cartomante-wrapper {
  flex: 0 0 auto;
  width: clamp(92px, 26vw, 132px);
  max-width: 132px;
  scroll-snap-align: start;
}
#cartomantiBanner .cartomante-wrapper > a {
  display: block;
  width: 100%;
}
#cartomantiBanner .miniatura.cartomante-tile {
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: auto;
  padding: 0.45rem 0.35rem 0.55rem;
  margin: 0;
  overflow: visible;
  border-radius: 0.85rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.2rem;
}
#cartomantiBanner .miniatura.cartomante-tile img {
  display: block;
  width: clamp(58px, 16vw, 82px);
  height: clamp(58px, 16vw, 82px);
  max-width: 82px;
  max-height: 82px;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 auto 0.25rem;
}
#cartomantiBanner .cartomante-name {
  font-size: clamp(0.78rem, 2.9vw, 0.95rem) !important;
  line-height: 1.05;
  margin: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}
#cartomantiBanner .cartomante-meta,
#cartomantiBanner .small-like {
  font-size: 0.72rem;
  line-height: 1.1;
}
#cartomantiBanner .favorite-toggle {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  z-index: 2;
}
#cartomantiBanner .cartomante-tile .favorite-toggle {
  width: clamp(32px, 8vw, 36px);
  height: clamp(32px, 8vw, 36px);
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
}
#cartomantiBanner .cartomante-tile .favorite-toggle .favorite-icon {
  width: clamp(16px, 4vw, 18px);
  height: clamp(16px, 4vw, 18px);
}
#cartomantiBanner .cartomante-tile .small-like {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0.2rem;
  line-height: 1;
}
#cartomantiBanner .cartomante-tile .like-button.like-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  transform: none;
  line-height: 1;
  font-size: clamp(0.82rem, 3.4vw, 0.95rem);
}
#cartomantiBanner .cartomante-tile .like-button.like-sm .heart-icon {
  width: clamp(18px, 5vw, 22px);
  height: clamp(18px, 5vw, 22px);
  max-width: 22px;
  max-height: 22px;
  object-fit: contain;
  flex: 0 0 auto;
}
#cartomantiBanner .cartomante-tile .like-button.like-sm .like-count {
  margin-left: 0;
  font-size: clamp(0.82rem, 3.4vw, 0.95rem);
  line-height: 1;
  white-space: nowrap;
}
@media (min-width: 768px) {
  #cartomantiBanner .cartomante-tile .like-button.like-sm .heart-icon {
    width: 24px;
    height: 24px;
    max-width: 24px;
    max-height: 24px;
  }
}

/* Source: debug-console.css */
.alu-debug-console{--adc-bg:#08100f;--adc-fg:#d7fff3;--adc-muted:#8fb7aa;--adc-border:rgba(125,255,210,.28);--adc-accent:#44f5bd;--adc-warn:#facc15;--adc-error:#fb7185;position:fixed;inset:auto .5rem .5rem .5rem;z-index:2147483200;background:var(--adc-bg);color:var(--adc-fg);border:1px solid var(--adc-border);border-radius:var(--alu-radius-md,12px);box-shadow:0 -12px 40px rgba(0,0,0,.35);font:500 12px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;max-height:70vh;display:flex;flex-direction:column;overflow:hidden;overflow-wrap:anywhere}.alu-debug-console.is-collapsed{max-height:44px}.adc-head{min-height:44px;display:flex;align-items:center;gap:.5rem;padding:.35rem .55rem;border-bottom:1px solid var(--adc-border);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02))}.adc-head strong{color:var(--adc-accent);letter-spacing:.02em}.adc-count,.adc-errors{color:var(--adc-muted);font-size:11px}.adc-errors{color:var(--adc-error)}.adc-toggle,.adc-copy,.adc-close,.adc-tabs button{min-width:44px;min-height:34px;border:1px solid var(--adc-border);border-radius:var(--alu-radius-sm,8px);background:rgba(255,255,255,.06);color:var(--adc-fg);font:inherit;cursor:pointer}.adc-copy{margin-left:auto}.adc-toggle:focus-visible,.adc-copy:focus-visible,.adc-close:focus-visible,.adc-tabs button:focus-visible,.adc-search:focus-visible{outline:2px solid var(--adc-accent);outline-offset:2px}.adc-body{padding:.55rem;overflow:auto}.alu-debug-console.is-collapsed .adc-body{display:none}.adc-tabs{display:flex;gap:.35rem;overflow-x:auto;padding-bottom:.4rem}.adc-tabs button{padding:0 .65rem;color:var(--adc-muted)}.adc-tabs button.is-active{color:var(--adc-bg);background:var(--adc-accent)}.adc-search-label{display:block;color:var(--adc-muted);margin:.2rem 0 .5rem}.adc-search{width:min(100%,26rem);margin-left:.4rem;background:rgba(255,255,255,.08);border:1px solid var(--adc-border);border-radius:var(--alu-radius-sm,8px);color:var(--adc-fg);padding:.45rem}.adc-entry{border-left:3px solid var(--adc-accent);padding:.45rem .55rem;margin:.4rem 0;background:rgba(255,255,255,.045);border-radius:0 var(--alu-radius-sm,8px) var(--alu-radius-sm,8px) 0}.adc-level-warn{border-left-color:var(--adc-warn)}.adc-level-error{border-left-color:var(--adc-error)}.adc-line{display:flex;gap:.5rem;flex-wrap:wrap}.adc-level{text-transform:uppercase;color:var(--adc-muted)}.adc-channel{color:#7dd3fc}.adc-msg{color:var(--adc-fg)}.adc-entry pre{white-space:pre-wrap;overflow-wrap:anywhere;margin:.35rem 0 0;color:#c4f7d9;background:rgba(0,0,0,.22);border-radius:var(--alu-radius-sm,8px);padding:.5rem;max-height:16rem;overflow:auto}.adc-empty{color:var(--adc-muted)}@media (prefers-color-scheme:light){.alu-debug-console{--adc-bg:#f8fafc;--adc-fg:#0f172a;--adc-muted:#475569;--adc-border:rgba(15,23,42,.18);--adc-accent:#047857;--adc-warn:#a16207;--adc-error:#be123c}.adc-entry pre{color:#0f172a;background:rgba(15,23,42,.06)}}@media (max-width:767px){.alu-debug-console{inset:auto .35rem .35rem .35rem;font-size:11px}.alu-debug-console:not(.is-open){max-height:42px}.adc-head{gap:.35rem;padding:.25rem}.adc-count{display:none}.adc-tabs button{min-width:auto;white-space:nowrap}.adc-copy{margin-left:0}}@media (prefers-reduced-motion:no-preference){.alu-debug-console{transition:max-height .18s ease}}@media print{.alu-debug-console{display:none}}

/* Source: services.css */
.service-img {
  width: 100%;
  height: auto;
}

.service-card {
  --service-card-border: rgba(78, 39, 134, 0.12);
  --service-card-shadow: 0 10px 24px rgba(10, 15, 45, 0.12);
  border-color: var(--service-card-border);
}

.service-card.is-promo {
  --service-card-border: rgba(245, 158, 11, 0.42);
  box-shadow: 0 14px 34px rgba(245, 158, 11, 0.16);
}

.purchase-bar {
  --purchase-bar-bg: rgba(255, 255, 255, 0.94);
  --purchase-bar-border: rgba(78, 39, 134, 0.14);
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1030;
  padding: 0.85rem 1rem;
  color: var(--bs-body-color);
  background: var(--purchase-bar-bg);
  border-top: 1px solid var(--purchase-bar-border);
  box-shadow: 0 -12px 28px rgba(10, 15, 45, 0.14);
  backdrop-filter: blur(12px);
}

.service-page--detail {
  padding-bottom: 96px;
}

.fast-badge,
.bestseller-badge,
.service-promo-badge {
  position: absolute;
  left: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 999px;
  font-weight: 700;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
}

.fast-badge {
  top: 0.85rem;
  z-index: 5;
  padding: 0.4rem 0.85rem;
  color: #ffeef0;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  background: rgba(220, 53, 69, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 0.5rem 1.5rem rgba(220, 53, 69, 0.25);
}

.fast-badge svg {
  width: 0.9rem;
  height: 0.9rem;
}

.fast-badge--with-top {
  top: 3.25rem;
}

.fast-badge-lg {
  padding: 0.45rem 1rem;
  font-size: 0.85rem;
}

.bestseller-badge {
  top: 0.85rem;
  z-index: 6;
  padding: 0.4rem 0.85rem;
  color: #2f2200;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
  background: linear-gradient(135deg, #ffe59a 0%, #d6a11a 100%);
  border: 1px solid rgba(255, 250, 225, 0.78);
  box-shadow: 0 0.6rem 1.6rem rgba(179, 126, 0, 0.36);
}

.bestseller-badge-lg {
  padding: 0.45rem 1rem;
  font-size: 0.82rem;
}

.service-promo-badge {
  top: 0.85rem;
  right: 0.85rem;
  left: auto;
  z-index: 7;
  padding: 0.42rem 0.9rem;
  color: #2f2200;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  background: linear-gradient(135deg, #fde68a 0%, #fbbf24 48%, #f59e0b 100%);
  border: 1px solid rgba(255, 250, 225, 0.82);
  box-shadow: 0 0.75rem 1.8rem rgba(245, 158, 11, 0.36);
}

.service-promo-badge-lg {
  padding: 0.5rem 1.05rem;
  font-size: 0.82rem;
}

.service-promo-callout {
  --service-promo-bg: linear-gradient(135deg, rgba(78, 39, 134, 0.96), rgba(20, 39, 74, 0.94));
  --service-promo-text: #f5f3ff;
  --service-promo-muted: rgba(245, 243, 255, 0.78);
  --service-promo-border: rgba(251, 191, 36, 0.34);
  display: grid;
  gap: 0.45rem;
  margin: 0 0 1rem;
  padding: 1rem;
  color: var(--service-promo-text);
  background: var(--service-promo-bg);
  border: 1px solid var(--service-promo-border);
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(18, 28, 60, 0.2);
}

.service-promo-callout__eyebrow {
  color: #fde68a;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.service-promo-callout__title {
  margin: 0;
  font-size: clamp(1.05rem, 3.6vw, 1.35rem);
  font-weight: 800;
}

.service-promo-callout__text {
  margin: 0;
  color: var(--service-promo-muted);
  font-size: clamp(0.92rem, 2.4vw, 1rem);
}

.service-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.55rem;
  margin: 0.75rem 0 1rem;
}

.service-price__label {
  width: 100%;
  color: var(--bs-secondary-color);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.service-price__current {
  color: #b45309;
  font-size: clamp(1.3rem, 5vw, 1.7rem);
  font-weight: 900;
  line-height: 1;
}

.service-price__old {
  color: var(--bs-secondary-color);
  font-size: 0.95rem;
  font-weight: 700;
}

.service-price__save {
  padding: 0.22rem 0.5rem;
  color: #2f2200;
  font-size: 0.74rem;
  font-weight: 800;
  background: linear-gradient(135deg, #fde68a 0%, #fbbf24 100%);
  border-radius: 999px;
}

.service-price:not(.is-promo) .service-price__current {
  color: var(--bs-primary);
  font-size: clamp(1.15rem, 4vw, 1.35rem);
}

.service-search-box .input-group-text {
  display: flex;
  align-items: center;
  justify-content: center;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.service-search-box svg {
  width: 1.25rem;
  height: 1.25rem;
}

.service-search-box .form-control {
  border-left: 0;
}

.service-search-box .btn[data-service-search-reset] {
  white-space: nowrap;
}


.service-page__guided-choice {
  display: flex;
  justify-content: center;
  margin-top: -0.35rem;
  margin-bottom: 1rem;
}

.service-page__guided-choice .conversion-guide {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.service-empty-state {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.service-empty-state.d-none {
  opacity: 0;
  transform: translateY(-0.5rem);
}

.service-list-actions {
  display: grid;
  gap: 0.55rem;
}

.service-list-action {
  --service-action-bg: #ffffff;
  --service-action-border: rgba(17, 24, 39, 0.14);
  --service-action-text: #111827;
  --service-action-shadow: 0 4px 12px rgba(20, 12, 40, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 48px;
  padding: 0.68rem 0.85rem;
  color: var(--service-action-text) !important;
  font-size: clamp(0.92rem, 2.5vw, 0.98rem);
  font-weight: 800;
  line-height: 1.15;
  text-decoration: none;
  background: var(--service-action-bg) !important;
  border: 1px solid var(--service-action-border) !important;
  border-radius: 999px;
  box-shadow: var(--service-action-shadow);
  transition: transform 0.12s ease, filter 0.15s ease, box-shadow 0.15s ease;
}

.service-list-action .icon {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
}

.service-list-action:hover,
.service-list-action:focus-visible {
  color: var(--service-action-text) !important;
  filter: brightness(1.04);
  outline: 2px solid rgba(251, 191, 36, 0.55);
  outline-offset: 2px;
  transform: translateY(-1px);
}

.service-list-action:active {
  transform: scale(0.99);
}

.service-list-action--info {
  --service-action-bg: linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(248, 244, 255, 0.94));
  --service-action-border: rgba(78, 39, 134, 0.2);
  --service-action-text: #2e1d4a;
}

.service-list-action--quick {
  --service-action-bg: linear-gradient(180deg, #ffa41c 0%, #ff8f00 100%);
  --service-action-border: #d87800;
  --service-action-text: #111111;
  --service-action-shadow: 0 6px 14px rgba(255, 143, 0, 0.22);
}

.service-list-action--cart {
  --service-action-bg: linear-gradient(180deg, #ffd814 0%, #f7ca00 100%);
  --service-action-border: #f2c200;
  --service-action-text: #111111;
  --service-action-shadow: 0 6px 14px rgba(247, 202, 0, 0.22);
}

html:is(.theme-dark, [data-bs-theme='dark']) .service-card {
  --service-card-border: rgba(245, 243, 255, 0.12);
  --service-card-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
}

html:is(.theme-dark, [data-bs-theme='dark']) .service-card.is-promo {
  --service-card-border: rgba(251, 191, 36, 0.46);
  box-shadow: 0 14px 34px rgba(245, 158, 11, 0.2);
}

html:is(.theme-dark, [data-bs-theme='dark']) .purchase-bar {
  --purchase-bar-bg: rgba(10, 16, 36, 0.94);
  --purchase-bar-border: rgba(245, 243, 255, 0.14);
}

html:is(.theme-dark, [data-bs-theme='dark']) .fast-badge {
  color: #ffd6d9;
  background: rgba(139, 0, 18, 0.95);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0.75rem 1.75rem rgba(139, 0, 18, 0.35);
}

html:is(.theme-dark, [data-bs-theme='dark']) .bestseller-badge {
  color: #fff3cd;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.32);
  background: linear-gradient(135deg, #d49a11 0%, #7a5600 100%);
  border-color: rgba(255, 220, 128, 0.56);
  box-shadow: 0 0.85rem 1.95rem rgba(178, 122, 0, 0.5);
}

html:is(.theme-dark, [data-bs-theme='dark']) .service-promo-badge {
  color: #fff7d6;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.28);
  background: linear-gradient(135deg, #fbbf24 0%, #b76f00 100%);
  border-color: rgba(255, 220, 128, 0.56);
}

html:is(.theme-dark, [data-bs-theme='dark']) .service-price__current {
  color: #fde68a;
}

html:is(.theme-dark, [data-bs-theme='dark']) .service-list-action--info {
  --service-action-bg: linear-gradient(160deg, rgba(245, 243, 255, 0.96), rgba(230, 224, 255, 0.9));
  --service-action-border: rgba(245, 243, 255, 0.42);
  --service-action-text: #1f1635;
}

html:is(.theme-dark, [data-bs-theme='dark']) .service-list-action--quick {
  --service-action-bg: linear-gradient(180deg, #ffb13b 0%, #ff9800 100%);
  --service-action-border: #f08804;
  --service-action-text: #111111;
}

html:is(.theme-dark, [data-bs-theme='dark']) .service-list-action--cart {
  --service-action-bg: linear-gradient(180deg, #ffe15a 0%, #ffd814 100%);
  --service-action-border: #f2c200;
  --service-action-text: #111111;
}

@media (min-width: 720px) {
  .service-promo-callout {
    grid-template-columns: minmax(0, 1fr);
    padding: 1.15rem 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-empty-state,
  .service-list-action {
    transition: none;
  }
}

.buy-actions {
  display: grid;
  gap: 0.5rem;
}

.buy-actions__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.3rem 0.55rem;
  margin-bottom: 0.1rem;
  line-height: 1;
}

.buy-actions__price-old {
  color: rgba(245, 243, 255, 0.72);
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: line-through;
}

.buy-actions__price-current {
  color: #fde68a;
  font-size: clamp(1.35rem, 5vw, 1.75rem);
  font-weight: 900;
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.36);
}

.buy-actions__price-save {
  width: 100%;
  color: #fde68a;
  font-size: 0.78rem;
  font-weight: 800;
  text-align: center;
}

.buy-actions__price:not(.is-promo) .buy-actions__price-current {
  font-size: clamp(1.18rem, 4vw, 1.42rem);
}

.buy-actions__price.on-light .buy-actions__price-old {
  color: var(--bs-secondary-color);
}

.buy-actions__price.on-light .buy-actions__price-current {
  color: #b45309;
  text-shadow: none;
}

.buy-actions__price.on-light .buy-actions__price-save {
  color: #92400e;
}

/* CRO: Amazon-style sales CTA set */
.btn-quick-buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  min-height: 50px;
  padding: 0.72rem 1.1rem;
  background: linear-gradient(180deg, #ffa41c 0%, #ff8f00 100%);
  border: 1px solid #d87800;
  border-radius: 999px;
  box-shadow: 0 6px 14px rgba(255, 143, 0, 0.22);
  color: #111111;
  font-size: clamp(1rem, 2.7vw, 1.08rem);
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
  transition: filter 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.btn-quick-buy:hover,
.btn-quick-buy:focus-visible {
  background: linear-gradient(180deg, #ffb13b 0%, #fa8900 100%);
  border-color: #c76c00;
  color: #111111;
  filter: none;
  outline: 2px solid rgba(255, 164, 28, 0.56);
  outline-offset: 2px;
}

.btn-quick-buy:active {
  transform: scale(0.98);
}

.btn-quick-buy .icon,
.btn-cart-secondary .icon,
.btn-cart-on-light .icon {
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
}

.btn-quick-buy__caption {
  display: none;
  margin-top: 0.12rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  opacity: 0.86;
  text-transform: uppercase;
}

.btn-quick-buy--compact {
  width: auto;
  min-width: 156px;
  min-height: 44px;
  padding-inline: 1rem;
  white-space: nowrap;
}

:where(html[data-bs-theme='dark'], html.theme-dark) .btn-quick-buy {
  background: linear-gradient(180deg, #ffb13b 0%, #ff9800 100%);
  border-color: #f08804;
  color: #111111;
}

@media (prefers-color-scheme: dark) {
  html:not(.theme-light):not([data-bs-theme='light']) .btn-quick-buy {
    background: linear-gradient(180deg, #ffb13b 0%, #ff9800 100%);
    border-color: #f08804;
    color: #111111;
  }
}

/* spacing between the two CTAs when both are present */
.buy-actions .btn-cart-secondary + .btn-quick-buy,
.buy-actions .btn-cart-on-light + .btn-quick-buy {
  margin-top: 0.5rem;
}

/* CRO: "Aggiungi al Carrello" primary cart button */
.btn-cart-secondary {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 50px;
  background: linear-gradient(180deg, #ffd814 0%, #f7ca00 100%) !important;
  border: 1px solid #f2c200 !important;
  border-radius: 999px !important;
  box-shadow: 0 6px 14px rgba(247, 202, 0, 0.22) !important;
  color: #111111 !important;
  font-size: clamp(1rem, 2.7vw, 1.08rem) !important;
  font-weight: 800 !important;
  line-height: 1.15;
  opacity: 1;
}

.btn-cart-secondary:hover,
.btn-cart-secondary:focus-visible {
  background: linear-gradient(180deg, #ffdf3d 0%, #f0bd00 100%) !important;
  border-color: #e6b800 !important;
  color: #111111 !important;
  outline: 2px solid rgba(255, 216, 20, 0.56);
  outline-offset: 2px;
}

.btn-cart-secondary:active {
  transform: scale(0.98);
}

:where(html[data-bs-theme='dark'], html.theme-dark) .btn-cart-secondary {
  background: linear-gradient(180deg, #ffe15a 0%, #ffd814 100%) !important;
  border-color: #f2c200 !important;
  color: #111111 !important;
}

@media (prefers-color-scheme: dark) {
  html:not(.theme-light):not([data-bs-theme='light']) .btn-cart-secondary {
    background: linear-gradient(180deg, #ffe15a 0%, #ffd814 100%) !important;
    border-color: #f2c200 !important;
    color: #111111 !important;
  }
}

.buy-actions__cart-hint {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.78rem;
  letter-spacing: 0.01em;
}

.buy-actions__cart-hint.on-light {
  color: var(--bs-secondary-color);
}

.btn-cart-on-light {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 50px;
  background: linear-gradient(180deg, #ffd814 0%, #f7ca00 100%) !important;
  border: 1px solid #f2c200 !important;
  border-radius: 999px !important;
  box-shadow: 0 6px 14px rgba(247, 202, 0, 0.2) !important;
  color: #111111 !important;
  font-size: clamp(1rem, 2.7vw, 1.08rem) !important;
  font-weight: 800 !important;
  line-height: 1.15;
}

.btn-cart-on-light:hover,
.btn-cart-on-light:focus-visible {
  background: linear-gradient(180deg, #ffdf3d 0%, #f0bd00 100%) !important;
  border-color: #e6b800 !important;
  color: #111111 !important;
  outline: 2px solid rgba(255, 216, 20, 0.56);
  outline-offset: 2px;
}

.btn-cart-on-light:active {
  transform: scale(0.98);
}

html:is(.theme-dark, [data-bs-theme='dark']) .btn-cart-on-light {
  background: linear-gradient(180deg, #ffe15a 0%, #ffd814 100%) !important;
  border-color: #f2c200 !important;
  color: #111111 !important;
}

@media (prefers-color-scheme: dark) {
  html:not(.theme-light):not([data-bs-theme='light']) .btn-cart-on-light {
    background: linear-gradient(180deg, #ffe15a 0%, #ffd814 100%) !important;
    border-color: #f2c200 !important;
    color: #111111 !important;
  }
}

.btn-cart-on-light--compact {
  min-height: 44px;
  padding-inline: 1rem;
  white-space: nowrap;
}

/* Overlay di attesa acquisto: spostato nel componente centralizzato
   css/sub/loading-modal.css (.alu-loading-modal*, alias .alu-quick-buy-loading*)
   gestito da js/loading-modal.js — PAY.UX.1 (2026-06-10). */

@media (prefers-reduced-motion: reduce) {
  .btn-quick-buy,
  .btn-cart-secondary,
  .btn-cart-on-light {
    transition: none;
  }
}

/* SERVIZI.REDESIGN.1 Fase 0 (2026-08-14) — "Cosa ottieni": sostituisce il
   list-group Bootstrap generico con un icon-grid tokenizzato. Contenuto
   essenziale near-fold, server-rendered (non lazy), vedi
   VIEW/COMP/servizio-specifiche.php. */
.servizio-specifiche {
  margin: 1.4rem 0;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--alu-border, rgba(46, 29, 84, 0.16));
  border-radius: var(--alu-radius-lg, 14px);
  background: var(--alu-surface-soft, rgba(248, 244, 255, 0.92));
}

.servizio-specifiche__eyebrow {
  margin: 0 0 0.75rem;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--alu-gold-deep, #f59e0b);
}

.servizio-specifiche__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.servizio-specifiche__item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.servizio-specifiche__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--alu-radius-md, 12px);
  background: var(--alu-grad-gold, linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%));
  color: var(--alu-text-on-gold, #2a1b4a);
}

.servizio-specifiche__icon svg {
  width: 1.15em;
  height: 1.15em;
}

.servizio-specifiche__text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}

.servizio-specifiche__value {
  font-size: 0.95rem;
  font-weight: 800;
}

.servizio-specifiche__label {
  font-size: 0.78rem;
  color: var(--alu-text-muted, rgba(24, 32, 51, 0.76));
}

html:is(.theme-dark, [data-bs-theme='dark']) .servizio-specifiche {
  background: var(--alu-surface-soft, rgba(29, 33, 64, 0.78));
  border-color: var(--alu-border, rgba(166, 141, 255, 0.35));
}

html:is(.theme-dark, [data-bs-theme='dark']) .servizio-specifiche__eyebrow {
  color: var(--alu-gold-soft, #fde68a);
}

html:is(.theme-dark, [data-bs-theme='dark']) .servizio-specifiche__icon {
  color: var(--alu-text-on-gold, #2a1b4a);
}

html:is(.theme-dark, [data-bs-theme='dark']) .servizio-specifiche__label {
  color: var(--alu-text-muted, rgba(198, 202, 230, 0.75));
}

/* SERVIZI.REDESIGN.1 Fase 1 (2026-08-14) — "Cosa dicono i nostri clienti":
   isola lazy servizi.social_proof, contenuto sitewide (Reviews::getAggregate()/
   getApproved()). Vedi VIEW/COMP/servizio-social-proof.php. */
.servizio-social-proof {
  margin: 1.4rem 0;
  padding: 1.1rem 1.2rem 1.3rem;
  border: 1px solid var(--alu-border, rgba(46, 29, 84, 0.16));
  border-radius: var(--alu-radius-lg, 14px);
  background: var(--alu-surface, rgba(255, 255, 255, 0.96));
}

.servizio-social-proof__eyebrow {
  margin: 0 0 0.9rem;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--alu-gold-deep, #f59e0b);
}

.servizio-social-proof__aggregate {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.servizio-social-proof__score {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
}

.servizio-social-proof__stars {
  color: var(--alu-gold-deep, #f59e0b);
  font-size: 1.05rem;
  letter-spacing: 0.05em;
}

.servizio-social-proof__count {
  font-size: 0.85rem;
  color: var(--alu-text-muted, rgba(24, 32, 51, 0.76));
}

.servizio-social-proof__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.9rem;
}

.servizio-social-proof__card {
  margin: 0;
  padding: 0.9rem 1rem;
  border: 1px solid var(--alu-border, rgba(46, 29, 84, 0.12));
  border-radius: var(--alu-radius-md, 12px);
  background: var(--alu-surface-soft, rgba(248, 244, 255, 0.92));
}

.servizio-social-proof__card .servizio-social-proof__stars {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.95rem;
}

.servizio-social-proof__quote {
  margin: 0 0 0.6rem;
  font-size: 0.88rem;
  line-height: 1.45;
  font-style: italic;
}

.servizio-social-proof__meta {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: var(--alu-text-muted, rgba(24, 32, 51, 0.76));
}

.servizio-social-proof__author {
  font-weight: 700;
  color: inherit;
}

html:is(.theme-dark, [data-bs-theme='dark']) .servizio-social-proof {
  background: var(--alu-surface, rgba(24, 28, 54, 0.88));
  border-color: var(--alu-border, rgba(166, 141, 255, 0.35));
}

html:is(.theme-dark, [data-bs-theme='dark']) .servizio-social-proof__eyebrow {
  color: var(--alu-gold-soft, #fde68a);
}

html:is(.theme-dark, [data-bs-theme='dark']) .servizio-social-proof__stars {
  color: var(--alu-gold-soft, #fde68a);
}

html:is(.theme-dark, [data-bs-theme='dark']) .servizio-social-proof__count,
html:is(.theme-dark, [data-bs-theme='dark']) .servizio-social-proof__meta {
  color: var(--alu-text-muted, rgba(198, 202, 230, 0.75));
}

html:is(.theme-dark, [data-bs-theme='dark']) .servizio-social-proof__card {
  background: var(--alu-surface-soft, rgba(29, 33, 64, 0.78));
  border-color: var(--alu-border, rgba(166, 141, 255, 0.35));
}

/* SERVIZI.REDESIGN.1 Fase 3 (2026-08-14) — "Potrebbero interessarti anche":
   isola lazy servizi.related, stessa categoria del servizio corrente. Vedi
   VIEW/COMP/servizio-related.php. */
.servizio-related {
  margin: 1.4rem 0;
}

.servizio-related__eyebrow {
  margin: 0 0 0.9rem;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--alu-gold-deep, #f59e0b);
}

.servizio-related__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.9rem;
}

.servizio-related__card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--alu-border, rgba(46, 29, 84, 0.16));
  border-radius: var(--alu-radius-lg, 14px);
  background: var(--alu-surface, rgba(255, 255, 255, 0.96));
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.servizio-related__card:hover,
.servizio-related__card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(46, 29, 84, 0.12);
}

.servizio-related__img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.servizio-related__name {
  padding: 0.65rem 0.75rem 0.2rem;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.3;
}

.servizio-related__price {
  padding: 0.15rem 0.75rem 0.75rem;
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--alu-gold-deep, #f59e0b);
}

.servizio-related__promo {
  display: inline-block;
  margin-right: 0.35rem;
  padding: 0.05rem 0.4rem;
  border-radius: var(--alu-radius-pill, 999px);
  background: var(--alu-grad-gold, linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%));
  color: var(--alu-text-on-gold, #2a1b4a);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

@media (prefers-reduced-motion: reduce) {
  .servizio-related__card {
    transition: none;
  }
}

html:is(.theme-dark, [data-bs-theme='dark']) .servizio-related__eyebrow {
  color: var(--alu-gold-soft, #fde68a);
}

html:is(.theme-dark, [data-bs-theme='dark']) .servizio-related__card {
  background: var(--alu-surface-soft, rgba(29, 33, 64, 0.78));
  border-color: var(--alu-border, rgba(166, 141, 255, 0.35));
}

html:is(.theme-dark, [data-bs-theme='dark']) .servizio-related__card:hover,
html:is(.theme-dark, [data-bs-theme='dark']) .servizio-related__card:focus-visible {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

html:is(.theme-dark, [data-bs-theme='dark']) .servizio-related__price {
  color: var(--alu-gold-soft, #fde68a);
}

/* SERVIZI.REDESIGN.2 Fase 1 (2026-08-14) — hero landing: kicker/CTA gia'
   gestiti da HtmlElement::stdHeader(), qui solo tuning scoped (stesso
   pattern di .cartomanti-page > .alu-pagehead in cartomanti-list.css) +
   accent sul titolo + trust row + social proof reale. */
.servizi-pagehead {
  margin-bottom: clamp(0.9rem, 2.4vw, 1.4rem);
}

.servizi-pagehead .alu-pagehead__title-accent {
  display: block;
  font-style: italic;
  color: var(--alu-gold, #fbbf24);
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .servizi-pagehead .alu-pagehead__title-accent {
    background: var(--alu-grad-gold-soft, linear-gradient(135deg, #fde68a 0%, #fbbf24 45%, #f59e0b 100%));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.servizi-hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  margin: 0 0 1.1rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--alu-text-muted, rgba(24, 32, 51, 0.76));
}

.servizi-hero-trust__item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.servizi-hero-trust__item svg {
  width: 1.1em;
  height: 1.1em;
  color: var(--alu-gold-deep, #f59e0b);
  flex: 0 0 auto;
}

.servizi-hero-social-proof {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.7rem;
  margin: 0 0 1.4rem;
}

.servizi-hero-social-proof__avatars {
  display: flex;
}

.servizi-hero-social-proof__avatar {
  width: 2.15rem;
  height: 2.15rem;
  border-radius: var(--alu-radius-pill, 999px);
  border: 2px solid var(--alu-surface, #fff);
  object-fit: cover;
  margin-left: -0.55rem;
}

.servizi-hero-social-proof__avatar:first-child {
  margin-left: 0;
}

.servizi-hero-social-proof__stars {
  color: var(--alu-gold-deep, #f59e0b);
  font-size: 1rem;
  letter-spacing: 0.04em;
}

.servizi-hero-social-proof__text {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--alu-text-muted, rgba(24, 32, 51, 0.76));
}

.service-page__guided-choice-eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  font-weight: 700;
  text-align: center;
  color: var(--alu-text, #2e1d4a);
}

.service-page__guided-choice--prominent {
  padding: 0.9rem;
  border-radius: var(--alu-radius-lg, 14px);
  border: 1px solid var(--alu-gold-a32, rgba(251, 191, 36, 0.32));
  background: var(--alu-surface-soft, rgba(248, 244, 255, 0.92));
  box-shadow: var(--alu-glow-gold-soft, 0 4px 12px rgba(251, 191, 36, 0.35));
}

html:is(.theme-dark, [data-bs-theme='dark']) .servizi-hero-trust {
  color: var(--alu-text-muted, rgba(198, 202, 230, 0.75));
}

html:is(.theme-dark, [data-bs-theme='dark']) .servizi-hero-social-proof__avatar {
  border-color: var(--alu-surface, rgba(24, 28, 54, 0.88));
}

html:is(.theme-dark, [data-bs-theme='dark']) .servizi-hero-social-proof__text {
  color: var(--alu-text-muted, rgba(198, 202, 230, 0.75));
}

html:is(.theme-dark, [data-bs-theme='dark']) .service-page__guided-choice-eyebrow {
  color: var(--alu-text, #f0f4ff);
}

html:is(.theme-dark, [data-bs-theme='dark']) .service-page__guided-choice--prominent {
  background: var(--alu-surface-soft, rgba(29, 33, 64, 0.78));
  border-color: var(--alu-gold-a32, rgba(251, 191, 36, 0.32));
}

/* SERVIZI.REDESIGN.2 Fase 3 (2026-08-14) — sezione "Scegli il tuo consulto"
   (3 card in evidenza) + accent per-card da SERVIZI.colore reale
   (--service-accent, vedi GestServizi::safeAccentColor()/servizio-card.php).
   Tema chiaro = tinta pastello (§3.0 design-system: "chiaro davvero"),
   tema scuro = sfondo piu' profondo, sempre derivato dallo stesso colore. */
.servizi-featured {
  margin: 2rem 0;
  text-align: center;
}

.servizi-featured__badge {
  display: inline-block;
  margin: 0 0 0.6rem;
  padding: 0.3rem 0.9rem;
  border-radius: var(--alu-radius-pill, 999px);
  background: var(--alu-grad-gold, linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%));
  color: var(--alu-text-on-gold, #2a1b4a);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.servizi-featured__title {
  margin: 0 0 1.4rem;
  font-size: clamp(1.3rem, 3.8vw, 1.75rem);
  font-weight: 800;
  color: var(--alu-text, #2e1d4a);
}

.servizi-featured__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
  text-align: left;
}

@media (min-width: 720px) {
  .servizi-featured__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.service-card.service-featured-card {
  background: color-mix(in srgb, var(--service-accent, #5b3a91) 16%, white);
  border: 1px solid color-mix(in srgb, var(--service-accent, #5b3a91) 45%, transparent);
  color: var(--alu-text-on-light, #2e1d4a);
}

.service-img--featured {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  display: block;
}

.service-featured-card .card-title,
.service-featured-card .card-text {
  color: var(--alu-text-on-light, #2e1d4a);
}

.service-featured-card .service-price__current {
  color: color-mix(in srgb, var(--service-accent, #5b3a91) 75%, black);
}

.service-list-actions--featured {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.service-list-action--quiet {
  color: var(--alu-text-muted, rgba(24, 32, 51, 0.76));
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.service-list-action--quiet:hover,
.service-list-action--quiet:focus-visible {
  color: var(--alu-text, #2e1d4a);
}

html:is(.theme-dark, [data-bs-theme='dark']) .servizi-featured__title {
  color: var(--alu-text, #f0f4ff);
}

html:is(.theme-dark, [data-bs-theme='dark']) .service-card.service-featured-card {
  background: color-mix(in srgb, var(--service-accent, #5b3a91) 60%, #170f2b);
  border-color: color-mix(in srgb, var(--service-accent, #5b3a91) 55%, transparent);
  color: var(--alu-text-on-dark, #f5f3ff);
}

html:is(.theme-dark, [data-bs-theme='dark']) .service-card.service-featured-card .card-title,
html:is(.theme-dark, [data-bs-theme='dark']) .service-card.service-featured-card .card-text {
  color: var(--alu-text-on-dark, #f5f3ff);
}

html:is(.theme-dark, [data-bs-theme='dark']) .service-featured-card .service-price__label {
  color: var(--alu-text-on-dark-soft, rgba(245, 243, 255, 0.84));
}

html:is(.theme-dark, [data-bs-theme='dark']) .service-featured-card .service-price__current {
  color: var(--alu-gold-soft, #fde68a);
}

html:is(.theme-dark, [data-bs-theme='dark']) .service-list-action--quiet {
  color: var(--alu-text-muted, rgba(198, 202, 230, 0.75));
}

html:is(.theme-dark, [data-bs-theme='dark']) .service-list-action--quiet:hover,
html:is(.theme-dark, [data-bs-theme='dark']) .service-list-action--quiet:focus-visible {
  color: var(--alu-text, #f0f4ff);
}

/* SERVIZI.REDESIGN.2 Fase 4 (2026-08-14) — catalogo: griglia CSS (sostituisce
   .row.row-cols-* Bootstrap, coerente con §17 design-system) + chip filtro
   categoria (nuovo pattern, generalizza .cdg-sign-chip). */
.service-catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.service-category-chips {
  overflow-x: auto;
  margin: 0 0 1.4rem;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.service-category-chips::-webkit-scrollbar {
  display: none;
}

.service-category-chips__list {
  display: flex;
  gap: 0.55rem;
  width: max-content;
  min-width: 100%;
}

.service-category-chip {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0.5rem 1.05rem;
  border: 1px solid var(--alu-border, rgba(46, 29, 84, 0.16));
  border-radius: var(--alu-radius-pill, 999px);
  background: var(--alu-surface, rgba(255, 255, 255, 0.96));
  color: var(--alu-text-muted, rgba(24, 32, 51, 0.76));
  font-size: 0.88rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--alu-dur-fast, 200ms) var(--alu-ease, ease), color var(--alu-dur-fast, 200ms) var(--alu-ease, ease), border-color var(--alu-dur-fast, 200ms) var(--alu-ease, ease);
}

.service-category-chip:hover,
.service-category-chip:focus-visible {
  border-color: var(--alu-gold-a45, rgba(251, 191, 36, 0.45));
}

.service-category-chip[aria-pressed='true'] {
  background: var(--alu-grad-gold, linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%));
  border-color: transparent;
  color: var(--alu-text-on-gold, #2a1b4a);
}

html:is(.theme-dark, [data-bs-theme='dark']) .service-category-chip {
  background: var(--alu-surface-soft, rgba(29, 33, 64, 0.78));
  border-color: var(--alu-border, rgba(166, 141, 255, 0.35));
  color: var(--alu-text-muted, rgba(198, 202, 230, 0.75));
}

html:is(.theme-dark, [data-bs-theme='dark']) .service-category-chip[aria-pressed='true'] {
  color: var(--alu-text-on-gold, #2a1b4a);
}

/* SERVIZI.REDESIGN.2 Fase 5 (2026-08-14) — responsive: su mobile la card
   "3 domande" (miglior rapporto qualita'/prezzo) appare per prima; solo
   riordino visivo (CSS order), l'ordine DOM/lettura per screen reader resta
   1/3/5 domande. Reset a tablet/desktop dove le 3 card sono gia' affiancate. */
.service-featured-card--highlight {
  order: -1;
}

@media (min-width: 720px) {
  .service-featured-card--highlight {
    order: 0;
  }
}

/* CTA sticky mobile-only per la pagina lista (distinta da .purchase-bar
   della pagina dettaglio, che resta invariata) — punta al servizio "3
   domande". Mobile-first: stili base = sticky, disattivata da tablet in su. */
.service-catalog-sticky-cta {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--alu-z-sticky, 5);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  background: var(--catalog-sticky-bg, rgba(255, 255, 255, 0.94));
  border-top: 1px solid var(--catalog-sticky-border, rgba(78, 39, 134, 0.14));
  box-shadow: 0 -12px 28px rgba(10, 15, 45, 0.14);
  backdrop-filter: blur(12px);
}

.service-catalog-sticky-cta__price {
  flex: 0 0 auto;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--alu-text, #2e1d4a);
}

.service-catalog-sticky-cta .service-list-action,
.service-catalog-sticky-cta button {
  flex: 1 1 auto;
}

@media (min-width: 720px) {
  .service-catalog-sticky-cta {
    display: none;
  }
}

html:is(.theme-dark, [data-bs-theme='dark']) .service-catalog-sticky-cta {
  --catalog-sticky-bg: rgba(10, 16, 36, 0.94);
  --catalog-sticky-border: rgba(245, 243, 255, 0.14);
}

html:is(.theme-dark, [data-bs-theme='dark']) .service-catalog-sticky-cta__price {
  color: var(--alu-text, #f0f4ff);
}

/* =========================================================================
   SERVIZI.CONTRAST.1 (2026-08-20) — leggibilita' e layout in light mode
   Segnalazione utente: la pagina servizi "lascia a desiderare" in tema chiaro,
   con testo poco contrastato e layout debole su mobile e tablet.
   Tutto scoped a questa pagina: .alu-pagehead e' un componente condiviso
   (cartomanti-list, lett3) e non va alterato da qui.
   ========================================================================= */

/* --- 1. Accento del titolo: era illeggibile -----------------------------
   `--alu-gold` (#fbbf24) sulla superficie chiara della pagehead misurava
   1.44:1, contro il minimo WCAG di 3:1 per testo grande. E' la riga
   "Quando ne hai piu' bisogno": in tema chiaro spariva.
   #7c4a03 mantiene l'identita' calda ma misura 4.6-7.3:1 su TUTTE le zone
   dell'immagine di sfondo (chiara, media, scura), perche' la card e'
   traslucida e il fondo reale cambia lungo il banner.
   Solo light mode: in tema scuro l'oro sta su fondo scuro e funziona gia'.
   Va sovrascritto anche -webkit-text-fill-color, altrimenti il gradiente
   dorato del blocco @supports qui sopra continua a vincere. */
html:not(.theme-dark):not([data-bs-theme='dark']) .servizi-pagehead .alu-pagehead__title-accent {
  color: #7c4a03;
  background: none;
  -webkit-text-fill-color: #7c4a03;
}

/* --- 2. Superficie della card: era slavata ------------------------------
   Con opacita' 0.78 l'immagine trasparisce e il contrasto del testo cambia
   da un capo all'altro del banner. A 0.94 la superficie e' prevedibile e la
   card si legge come un pannello, non come una macchia. */
html:not(.theme-dark):not([data-bs-theme='dark']) .servizi-pagehead .alu-pagehead__inner {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(252, 248, 255, 0.92));
  border-color: rgba(124, 74, 3, 0.18);
}

/* --- 3. Titolo su tablet: era piu' PICCOLO che su mobile ----------------
   Il componente condiviso applica, da 48rem in su,
   `clamp(1.3rem, 1.8vw, 1.8rem)`: a 768px 1.8vw vale 13.8px, quindi scatta
   il minimo di 1.3rem = 20.8px. Su mobile lo stesso titolo e' 28px.
   Risultato misurato: titolo largo 166px dentro una card da 515px, spezzato
   su tre righe, con il resto della card vuoto.
   Qui si ripristina una scala crescente, solo per questa pagina. */
@media (min-width: 48rem) {
  .servizi-pagehead.alu-pagehead--standard .alu-pagehead__title,
  .servizi-pagehead.alu-pagehead--compact .alu-pagehead__title {
    font-size: clamp(1.85rem, 3.6vw, 2.9rem);
    line-height: 1.08;
  }

  /* La card puo' respirare: con un titolo di dimensione giusta il 70% del
     componente condiviso lascia troppa aria a destra del testo. */
  .servizi-pagehead.alu-pagehead--standard .alu-pagehead__inner,
  .servizi-pagehead.alu-pagehead--compact .alu-pagehead__inner {
    width: min(78%, 34rem);
    padding: clamp(1rem, 2.2vw, 1.6rem) clamp(1.2rem, 2.6vw, 2rem);
  }

  .servizi-pagehead.alu-pagehead--standard .alu-pagehead__subtitle,
  .servizi-pagehead.alu-pagehead--compact .alu-pagehead__subtitle {
    font-size: clamp(0.95rem, 1.5vw, 1.05rem);
  }
}

/* --- 4. Riquadro "Non sai quale servizio scegliere?" --------------------
   Misurato a 768px: contenitore largo 696px per un contenuto di 401px, con
   quasi 300px di vuoto ai lati. Sembrava una cornice incompiuta.
   Si stringe il riquadro sul contenuto invece di allargare il contenuto:
   e' un aiuto alla scelta, non una sezione principale. */
.service-page__guided-choice--prominent {
  width: min(100%, 34rem);
  margin-inline: auto;
}

/* --- 5. Pulsante di ricerca: era il blu di Bootstrap --------------------
   `.bg-primary` stonava contro la palette viola/oro di tutta la pagina.
   Il colore e' ora quello del brand; il bianco sopra il viola profondo
   misura oltre 8:1. */
.service-search-box .service-search-box__btn {
  color: #fff;
  background: linear-gradient(145deg, var(--alu-purple-deep, #6c25a4), #50177f);
  border-color: rgba(80, 23, 127, 0.5);
}

/* ── LANDING.PAID.VISIBILITY.1 — link interni alla landing urgente ─────────
   Deliberatamente sommessi: la landing e' un approfondimento, non un quarto
   prodotto da scegliere ne' un'alternativa all'acquisto. Se avessero il peso
   di una CTA competerebbero con i pulsanti che gia' convertono.
   Solo token --alu-*, nessun colore nuovo (design-system §2.0). */
.servizi-featured__landing {
  margin: 1.1rem 0 0;
  text-align: center;
  font-size: clamp(0.9rem, 2.3vw, 0.96rem);
  line-height: 1.5;
  color: var(--alu-text-muted, #4b3d63);
}

.service-landing-note {
  margin: 0 0 1rem;
  font-size: clamp(0.88rem, 2.2vw, 0.94rem);
  line-height: 1.5;
}

/* Sottolineatura sempre presente: senza, un link testuale dentro un blocco
   di prosa non si distingue dal testo per i daltonici. */
.servizi-featured__landing-link,
.service-landing-link,
.alu-dest-link {
  color: var(--alu-accent-strong, #4e2786);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

.servizi-featured__landing-link:hover,
.service-landing-link:hover,
.alu-dest-link:hover,
.servizi-featured__landing-link:focus-visible,
.service-landing-link:focus-visible,
.alu-dest-link:focus-visible {
  color: var(--alu-accent, #6b3aa0);
  text-decoration-thickness: 2px;
}

.servizi-featured__landing-link:focus-visible,
.service-landing-link:focus-visible,
.alu-dest-link:focus-visible {
  outline: 3px solid var(--alu-gold-a45, rgba(251, 191, 36, 0.45));
  outline-offset: 3px;
  border-radius: 4px;
}

/* Tap target: il link vive in mezzo alla prosa, quindi non gli si puo' dare
   min-height senza rompere l'interlinea. Si allarga l'area cliccabile in
   verticale con padding, che non altera il flusso del testo. */
@media (pointer: coarse) {
  .servizi-featured__landing-link,
  .service-landing-link,
  .alu-dest-link {
    padding-block: 0.35rem;
  }
}


/* Nota contestuale verso una destinazione commerciale (SEO.CARTOMANZIA_EMAIL.1).
   Stesso peso sommesso dei link alla landing: e' un'alternativa per chi non ha
   ancora deciso, non una CTA che compete con i pulsanti d'acquisto. */
.alu-dest-note {
  margin: 1.2rem auto 0;
  max-width: 62ch;
  padding-inline: 1rem;
  text-align: center;
  font-size: clamp(0.9rem, 2.3vw, 0.96rem);
  line-height: 1.55;
  color: var(--alu-text-muted, #4b3d63);
}

/* Source: info-social.css */
.info-social {
  /* Migrato ai token globali --alu-* (DS.TOKENS.1 / FEA.8). I valori
     coincidono con i vecchi fallback non prefissati: rendering invariato. */
  --info-social-bg: var(--alu-grad-hero);
  --info-social-text: var(--alu-text-on-dark);
  --info-social-muted: var(--alu-text-on-dark-soft);
  --info-social-gold: var(--alu-gold);
  --info-social-border: rgba(253, 230, 138, 0.38);
  --info-social-card: rgba(245, 243, 255, 0.1);
  --info-social-card-hover: rgba(245, 243, 255, 0.18);
  --info-social-focus: rgba(251, 191, 36, 0.48);
  max-width: 1140px;
  margin: var(--alu-space-4) auto var(--alu-space-8);
  padding: 0 var(--alu-space-3);
}

.info-social__inner {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: var(--alu-space-4);
  padding: var(--alu-space-5);
  color: var(--info-social-text);
  background: var(--info-social-bg);
  border: 1px solid var(--info-social-border);
  border-radius: var(--alu-radius-xl);
  box-shadow: var(--alu-shadow-3);
}

.info-social__inner::before {
  content: "";
  position: absolute;
  top: -5rem;
  right: -4rem;
  width: 12rem;
  height: 12rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.3), transparent 68%);
  pointer-events: none;
}

.info-social__copy,
.info-social__links {
  position: relative;
  z-index: 1;
}

.info-social__eyebrow {
  margin: 0 0 var(--alu-space-2);
  color: var(--info-social-gold);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.info-social__eyebrow::before {
  content: "✦ ";
}

.info-social__title {
  margin: 0;
  color: var(--info-social-text);
  font-size: clamp(1.35rem, 4.5vw, 1.85rem);
  font-weight: 800;
  line-height: 1.15;
  text-wrap: balance;
}

.info-social__lead {
  max-width: 44rem;
  margin: var(--alu-space-2) 0 0;
  color: var(--info-social-muted);
  font-size: clamp(0.92rem, 2.4vw, 1rem);
  line-height: 1.55;
}

.info-social__links {
  display: grid;
  gap: var(--alu-space-3);
}

.info-social__link {
  display: flex;
  align-items: center;
  gap: var(--alu-space-3);
  min-height: 64px;
  padding: var(--alu-space-3);
  color: var(--info-social-text);
  background: var(--info-social-card);
  border: 1px solid rgba(245, 243, 255, 0.22);
  border-radius: var(--alu-radius-lg);
  text-decoration: none;
  transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.info-social__link:hover,
.info-social__link:focus-visible {
  color: var(--info-social-text);
  background: var(--info-social-card-hover);
  box-shadow: var(--alu-glow-gold-soft);
  text-decoration: none;
  transform: translateY(-2px);
}

.info-social__link:focus-visible {
  outline: 3px solid var(--info-social-focus);
  outline-offset: 3px;
}

.info-social__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  color: var(--info-social-text);
  background: rgba(245, 243, 255, 0.14);
  border: 1px solid rgba(245, 243, 255, 0.22);
  border-radius: var(--alu-radius-md);
}

.info-social__icon svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.info-social__text {
  display: grid;
  min-width: 0;
}

.info-social__text strong {
  color: var(--info-social-text);
  font-size: 1rem;
}

.info-social__text small {
  overflow: hidden;
  color: var(--info-social-muted);
  font-size: 0.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.info-social__arrow {
  margin-left: auto;
  color: var(--info-social-gold);
  font-size: 1.35rem;
  font-weight: 700;
  transition: transform 0.2s ease;
}

.info-social__link:hover .info-social__arrow,
.info-social__link:focus-visible .info-social__arrow {
  transform: translateX(3px);
}

@media (min-width: 720px) {
  .info-social {
    padding: 0 var(--alu-space-4);
  }

  .info-social__inner {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
    align-items: center;
    gap: var(--alu-space-6);
    padding: var(--alu-space-6);
  }

  .info-social__links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .info-social__link,
  .info-social__arrow {
    transition: none;
  }

  .info-social__link:hover,
  .info-social__link:focus-visible,
  .info-social__link:hover .info-social__arrow,
  .info-social__link:focus-visible .info-social__arrow {
    transform: none;
  }
}

/* Source: lett3.css */
/* ==========================================================================
   LETT3 — Lettura Tarocchi a 3 Carte (rev. 2026-05-26 #2)
   --------------------------------------------------------------------------
   Tokens scoped a .lett3-page. Dual-theme via override dei soli tokens
   (DS §3). Mobile-first, prefers-reduced-motion (DS §6.3).
   Layout carte: orizzontale, sovrapposte come "stese sul tavolo" (DS-§ NEW).
   ========================================================================== */

.lett3-page {
  /* ─── tokens default (dark) ──────────────────────────────────── */
  --lt-text:        #f5f3ff;
  --lt-text-soft:   rgba(245, 243, 255, 0.92);
  --lt-text-muted:  rgba(245, 243, 255, 0.70);
  --lt-text-strong: #ffffff;
  --lt-label-color: #fde68a;                 /* etichette form: oro su pannello navy (dark) */

  --lt-eyebrow-color:  #fde68a;
  --lt-eyebrow-bg:     rgba(251, 191, 36, 0.12);
  --lt-eyebrow-border: rgba(251, 191, 36, 0.55);

  --lt-hero-bg:
    radial-gradient(120% 80% at 50% 0%, rgba(251, 191, 36, 0.20) 0%, transparent 60%),
    linear-gradient(160deg, rgba(46, 29, 84, 0.96) 0%, rgba(78, 39, 134, 0.95) 100%);
  --lt-hero-border:  rgba(251, 191, 36, 0.42);
  --lt-hero-shadow:  0 18px 40px rgba(20, 12, 40, 0.45);
  /* Titolo a colore SOLIDO (no gradient-clip): oro vivo su hero navy (dark). */
  --lt-hero-title-color: #fbbf24;
  --lt-hero-title-shadow:
    0 0 12px rgba(251, 191, 36, 0.45),
    0 2px 6px rgba(0, 0, 0, 0.35);

  --lt-panel-bg:     linear-gradient(165deg, rgba(20, 27, 60, 0.92) 0%, rgba(46, 29, 84, 0.86) 100%);
  --lt-panel-border: rgba(255, 255, 255, 0.10);
  --lt-panel-shadow: 0 14px 34px rgba(18, 28, 60, 0.30);

  --lt-input-bg:          rgba(255, 255, 255, 0.06);
  --lt-input-border:      rgba(255, 255, 255, 0.22);
  --lt-input-text:        #f5f3ff;
  --lt-input-placeholder: rgba(245, 243, 255, 0.46);

  --lt-chip-bg:            rgba(255, 255, 255, 0.04);
  --lt-chip-border:        rgba(255, 255, 255, 0.20);
  --lt-chip-text:          rgba(245, 243, 255, 0.92);
  --lt-chip-bg-active:     rgba(251, 191, 36, 0.18);
  --lt-chip-border-active: #fbbf24;
  --lt-chip-text-active:   #fde68a;
  --lt-chip-shadow-active: 0 0 0 1px rgba(251, 191, 36, 0.35), 0 6px 14px rgba(251, 191, 36, 0.22);

  --lt-paragraph-bg:     rgba(255, 255, 255, 0.04);
  --lt-paragraph-border: rgba(255, 255, 255, 0.08);
  --lt-paragraph-text:   rgba(245, 243, 255, 0.92);

  --lt-divider-line:  rgba(251, 191, 36, 0.32);
  --lt-divider-text:  rgba(245, 243, 255, 0.72);

  --lt-tone-bg-luminoso:    linear-gradient(135deg, rgba(251, 191, 36, 0.25), rgba(253, 230, 138, 0.10));
  --lt-tone-bg-equilibrato: linear-gradient(135deg, rgba(167, 139, 250, 0.25), rgba(196, 181, 253, 0.10));
  --lt-tone-bg-riflessivo:  linear-gradient(135deg, rgba(96, 165, 250, 0.25), rgba(147, 197, 253, 0.10));
  --lt-tone-bg-sfidante:    linear-gradient(135deg, rgba(244, 114, 182, 0.25), rgba(248, 113, 113, 0.10));

  --lt-card-back-fill:
    radial-gradient(circle at 50% 30%, rgba(251, 191, 36, 0.30), transparent 65%),
    linear-gradient(160deg, rgba(46, 29, 84, 0.98), rgba(15, 19, 42, 1));
  --lt-card-border:  rgba(251, 191, 36, 0.55);
  --lt-card-shadow:
    0 16px 30px rgba(0, 0, 0, 0.55),
    0 6px 14px rgba(0, 0, 0, 0.35);

  --lt-cta-secondary-bg:     rgba(255, 255, 255, 0.06);
  --lt-cta-secondary-border: rgba(255, 255, 255, 0.22);
  --lt-cta-secondary-text:   var(--lt-text);

  color: var(--lt-text);
  width: min(720px, calc(100% - 1rem));
  margin: 0.5rem auto 2rem;
  padding: 0 0.4rem;
  display: block;
}

/* ─── tokens override per light theme ──────────────────────────── */
html:is(.theme-light, [data-bs-theme='light']) .lett3-page {
  --lt-text:        #251636;
  --lt-text-soft:   rgba(37, 22, 54, 0.92);
  --lt-text-muted:  rgba(37, 22, 54, 0.70);
  --lt-text-strong: #1a0f29;
  --lt-label-color: #4c1d95;                 /* etichette form: viola brand profondo, ~9:1 su bianco */

  --lt-eyebrow-color:  #92400e;
  --lt-eyebrow-bg:     rgba(251, 191, 36, 0.18);
  --lt-eyebrow-border: rgba(180, 83, 9, 0.45);

  --lt-hero-bg:
    radial-gradient(120% 80% at 50% 0%, rgba(251, 191, 36, 0.22) 0%, transparent 60%),
    linear-gradient(160deg, #fdf6ff 0%, #f1e6ff 100%);
  --lt-hero-border:  rgba(180, 83, 9, 0.32);
  --lt-hero-shadow:  0 18px 40px rgba(78, 39, 134, 0.18);
  /* FEA.LIGHT.3 (2026-06-16): titolo a colore SOLIDO. Il gradient-clip
     (text-fill trasparente) + il text-shadow bianco sbiadivano il titolo,
     rendendolo poco leggibile in light. Viola brand profondo, ~8:1 sul
     pannello hero crema; niente alone bianco. */
  --lt-hero-title-color: #4c1d95;
  --lt-hero-title-shadow: none;

  --lt-panel-bg:     #ffffff;
  --lt-panel-border: rgba(46, 29, 84, 0.14);
  --lt-panel-shadow: 0 10px 26px rgba(78, 39, 134, 0.10);

  --lt-input-bg:          #ffffff;
  --lt-input-border:      rgba(46, 29, 84, 0.24);
  --lt-input-text:        #251636;
  --lt-input-placeholder: rgba(46, 29, 84, 0.46);

  --lt-chip-bg:            #ffffff;
  --lt-chip-border:        rgba(46, 29, 84, 0.22);
  --lt-chip-text:          #251636;
  --lt-chip-bg-active:     rgba(251, 191, 36, 0.18);
  --lt-chip-border-active: #d97706;
  --lt-chip-text-active:   #92400e;
  --lt-chip-shadow-active: 0 0 0 1px rgba(217, 119, 6, 0.35), 0 6px 14px rgba(217, 119, 6, 0.18);

  --lt-paragraph-bg:     #ffffff;
  --lt-paragraph-border: rgba(46, 29, 84, 0.10);
  --lt-paragraph-text:   #251636;

  --lt-divider-line:  rgba(217, 119, 6, 0.38);
  --lt-divider-text:  rgba(46, 29, 84, 0.70);

  --lt-tone-bg-luminoso:    linear-gradient(135deg, rgba(251, 191, 36, 0.22), rgba(253, 230, 138, 0.12));
  --lt-tone-bg-equilibrato: linear-gradient(135deg, rgba(167, 139, 250, 0.22), rgba(196, 181, 253, 0.12));
  --lt-tone-bg-riflessivo:  linear-gradient(135deg, rgba(96, 165, 250, 0.22), rgba(191, 219, 254, 0.12));
  --lt-tone-bg-sfidante:    linear-gradient(135deg, rgba(244, 114, 182, 0.22), rgba(252, 165, 165, 0.12));

  --lt-card-border:  rgba(180, 83, 9, 0.45);
  --lt-card-shadow:
    0 14px 26px rgba(46, 29, 84, 0.20),
    0 4px 10px rgba(46, 29, 84, 0.12);

  --lt-cta-secondary-bg:     #ffffff;
  --lt-cta-secondary-border: rgba(46, 29, 84, 0.22);
  --lt-cta-secondary-text:   var(--lt-text);
}

/* ─── visually-hidden util (locale) ────────────────────────────── */
.lett3-page .visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* HERO: il banner-titolo è ora emesso da HtmlElement::stdHeader()
   (.alu-pagehead in layout.css). Vedi VIEW/lettura3carte.php. */

/* ============================================================== */
/*  FORM                                                          */
/* ============================================================== */

.lett3-form-card {
  margin-top: 1rem;
  padding: 1.25rem 1.1rem 1.4rem;
  border-radius: 20px;
  background: var(--lt-panel-bg);
  border: 1px solid var(--lt-panel-border);
  box-shadow: var(--lt-panel-shadow);
}

.lett3-form {
  display: grid;
  gap: 1.1rem;
}

/* Reset fieldset look */
.lett3-form fieldset {
  margin: 0; padding: 0; border: 0; min-width: 0;
}

.lett3-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0; /* fix overflow input date in flex children */
}

.lett3-field__label,
.lett3-field__legend {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lt-label-color);
  padding: 0;
  margin: 0;
  align-self: flex-start;
}

.lett3-field__hint {
  font-size: 0.78rem;
  color: var(--lt-text-muted);
  line-height: 1.45;
}

.lett3-field__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.1rem;
}

.lett3-input,
.lett3-textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
  font: inherit;
  font-size: 1rem;
  color: var(--lt-input-text);
  background: var(--lt-input-bg);
  border: 1px solid var(--lt-input-border);
  border-radius: 12px;
  padding: 0.75rem 0.9rem;
  min-height: 48px;
  line-height: 1.4;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none; /* normalizza Safari */
  appearance: none;
}
.lett3-textarea {
  resize: vertical;
  min-height: 96px;
  line-height: 1.55;
}
.lett3-input::placeholder,
.lett3-textarea::placeholder {
  color: var(--lt-input-placeholder);
  opacity: 1;
}
.lett3-input:focus-visible,
.lett3-textarea:focus-visible {
  outline: none;
  border-color: var(--lt-chip-border-active);
  background: var(--lt-input-bg);
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.28);
}

/* iOS Safari date input fix: webkit-date-and-time-value overflow */
.lett3-input[type="date"] {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 48px;
  /* evita squish del placeholder iOS */
  -webkit-min-logical-width: 0;
  text-align: left;
}
.lett3-input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
  min-height: 1.4em;
  line-height: 1.4em;
}
.lett3-input[type="date"]::-webkit-calendar-picker-indicator {
  filter: var(--lt-date-picker-filter, none);
  opacity: 0.8;
}
html:is(.theme-light, [data-bs-theme='light']) .lett3-page .lett3-input[type="date"] {
  --lt-date-picker-filter: none;
}
html:not(.theme-light, [data-bs-theme='light']) .lett3-page .lett3-input[type="date"] {
  /* dark mode: rendi visibile l'icona calendario */
  --lt-date-picker-filter: invert(0.85);
}

/* Radio group come chip — sempre centrati */
.lett3-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 0.2rem;
}
.lett3-radio {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.6rem 1rem;
  min-height: 44px;
  border-radius: 999px;
  background: var(--lt-chip-bg);
  border: 1px solid var(--lt-chip-border);
  color: var(--lt-chip-text);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.lett3-radio input {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
}
.lett3-radio:hover {
  border-color: var(--lt-chip-border-active);
  color: var(--lt-text-strong);
}
.lett3-radio:has(input:checked) {
  background: var(--lt-chip-bg-active);
  border-color: var(--lt-chip-border-active);
  color: var(--lt-chip-text-active);
  box-shadow: var(--lt-chip-shadow-active);
  transform: translateY(-1px);
}
.lett3-radio:has(input:focus-visible) {
  outline: none;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.4);
}
.lett3-radio__icon {
  font-size: 1rem;
  line-height: 1;
}

/* Char counter */
.lett3-char-counter {
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  color: var(--lt-text-muted);
}
.lett3-char-counter.is-near-limit { color: var(--lt-eyebrow-color); font-weight: 600; }
.lett3-char-counter.is-over       { color: #ef4444; font-weight: 700; }

/* Privacy box */
.lett3-privacy {
  margin: 0;
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
  background: var(--lt-paragraph-bg);
  border: 1px dashed var(--lt-paragraph-border);
  font-size: 0.82rem;
  color: var(--lt-text-soft);
  line-height: 1.55;
}
.lett3-privacy strong { color: var(--lt-text-strong); }

/* Submit */
.lett3-submit {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.95rem 1.4rem;
  min-height: 52px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: #1e1230;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow:
    0 14px 32px rgba(251, 191, 36, 0.30),
    0 6px 18px rgba(20, 12, 40, 0.40);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
  overflow: hidden;
}
.lett3-submit::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.7s ease;
  pointer-events: none;
}
.lett3-submit:hover,
.lett3-submit:focus-visible {
  transform: translateY(-2px);
  box-shadow:
    0 18px 40px rgba(251, 191, 36, 0.40),
    0 8px 22px rgba(20, 12, 40, 0.50);
  outline: none;
  filter: brightness(1.05);
}
.lett3-submit:hover::after,
.lett3-submit:focus-visible::after { transform: translateX(100%); }
.lett3-submit:active { transform: translateY(0); }
.lett3-submit .arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}
.lett3-submit:hover .arrow,
.lett3-submit:focus-visible .arrow { transform: translateX(3px); }

/* honeypot off-screen */
.lett3-honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important; height: 1px !important;
  overflow: hidden !important;
}

/* Errors */
.lett3-errors {
  border-radius: 12px;
  padding: 0.8rem 1rem;
  background: rgba(244, 63, 94, 0.14);
  border: 1px solid rgba(244, 63, 94, 0.42);
  color: #fda4af;
  margin-bottom: 0.5rem;
}
html:is(.theme-light, [data-bs-theme='light']) .lett3-page .lett3-errors {
  color: #b91c1c;
  background: rgba(244, 63, 94, 0.08);
  border-color: rgba(244, 63, 94, 0.45);
}
.lett3-errors p { margin: 0; }
.lett3-errors p + p { margin-top: 0.3rem; }

/* ============================================================== */
/*  RESULT — intro + domanda eco                                  */
/* ============================================================== */

.lett3-result { margin-top: 0.2rem; }

.lett3-result__head {
  text-align: center;
  margin: 0.2rem auto 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.lett3-result__domanda {
  display: inline-block;
  margin: 0;
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  background: var(--lt-chip-bg-active);
  border: 1px solid var(--lt-chip-border-active);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--lt-chip-text-active);
  max-width: 92%;
}

/* ============================================================== */
/*  TAVOLO CARTE — orizzontale sovrapposto "stese a mano"         */
/* ============================================================== */

/* Hint "tocca per scoprire" sopra il tavolo — invito persistente
   finché tutte e 3 le carte non sono state rivelate */
.lett3-cards-hint {
  margin: 0 auto;
  padding: 0.5rem 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 999px;
  background: var(--lt-chip-bg-active);
  border: 1px solid var(--lt-chip-border-active);
  color: var(--lt-chip-text-active);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  width: max-content;
  max-width: 94%;
  box-shadow: 0 4px 14px rgba(251, 191, 36, 0.18);
  transition: opacity 0.7s ease, transform 0.5s ease;
}
.lett3-cards-hint-wrap {
  text-align: center;
  margin: 0.3rem auto 0.1rem;
}
.lett3-cards-hint.is-fading {
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
}
/* Micro-pulse sul cambio testo (3→2, 2→1) per attirare l'attenzione */
.lett3-cards-hint.is-updating {
  transform: scale(1.06);
  box-shadow: 0 6px 20px rgba(251, 191, 36, 0.32);
}
.lett3-cards-hint [data-lett3-hint-text] {
  transition: opacity 0.18s ease;
}
.lett3-cards-hint.is-updating [data-lett3-hint-text] {
  opacity: 0.2;
}
.lett3-cards-hint__pulse {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--lt-chip-border-active);
  animation: lett3HintPulse 1.6s ease-in-out infinite;
}
@keyframes lett3HintPulse {
  0%, 100% { transform: scale(1);   opacity: 0.6; }
  50%      { transform: scale(1.5); opacity: 1;   }
}

.lett3-cards {
  /* dimensioni dinamiche: clamp() per scalare su schermi piccoli */
  --card-w: clamp(95px, 27vw, 170px);
  --card-h: calc(var(--card-w) * 1.727); /* aspect 220:380 */
  --card-overlap: 0.40;

  position: relative;
  list-style: none;
  margin: 1rem auto 1.6rem;
  padding: 2.4rem 0.5rem calc(var(--card-h) * 0.10) 0.5rem;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
  min-height: var(--card-h);
  perspective: 1400px;
}

@media (min-width: 720px) {
  .lett3-cards {
    --card-w: clamp(140px, 22vw, 200px);
    --card-overlap: 0.28;
    padding-top: 2.6rem;
  }
}

.lett3-card {
  position: relative;
  flex-shrink: 0;
  width: var(--card-w);
  --tilt: 0deg;
  --zi: 1;
  z-index: var(--zi);

  /* state pre-reveal: arrivata dall'alto */
  opacity: 0;
  transform: translateY(-48px) rotate(calc(var(--tilt) + 14deg)) scale(0.92);
  transition:
    opacity 0.55s ease-out,
    transform 0.85s cubic-bezier(.18, .72, .22, 1);

  /* a11y / interaction */
  pointer-events: none;
  cursor: default;
}
.lett3-card.is-revealed {
  opacity: 1;
  transform: translateY(0) rotate(var(--tilt)) scale(1);
  pointer-events: auto;
  cursor: pointer;
}

/* Sovrapposizione */
.lett3-card + .lett3-card {
  margin-left: calc(var(--card-w) * var(--card-overlap) * -1);
}

/* Tilt + z-index per le 3 posizioni */
.lett3-card:nth-child(1) { --tilt: -6deg; --zi: 1; transform-origin: bottom right; }
.lett3-card:nth-child(2) { --tilt:  0deg; --zi: 2; transform-origin: bottom center; }
.lett3-card:nth-child(3) { --tilt:  6deg; --zi: 3; transform-origin: bottom left; }

.lett3-card:nth-child(2).is-revealed {
  transform: translateY(-8px) rotate(var(--tilt)) scale(1.02);
}

/* Hover (non touch): mette in evidenza la carta da scoprire */
@media (hover: hover) {
  .lett3-card.is-revealed:not(.is-flipped):hover {
    filter: brightness(1.1);
    transform: translateY(-4px) rotate(var(--tilt)) scale(1.03);
  }
  .lett3-card:nth-child(2).is-revealed:not(.is-flipped):hover {
    transform: translateY(-12px) rotate(0deg) scale(1.05);
  }
}

/* Focus accessibile via keyboard */
.lett3-card:focus-visible {
  outline: none;
  filter: brightness(1.1);
}
.lett3-card:focus-visible .lett3-card__flipper {
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.5), var(--lt-card-shadow);
}

/* Flipper 3D */
.lett3-card__flipper {
  position: relative;
  width: 100%;
  aspect-ratio: 220 / 380;
  border-radius: 12px;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform 1.1s cubic-bezier(.18, .72, .22, 1), box-shadow 0.25s ease;
  box-shadow: var(--lt-card-shadow);
}
.lett3-card.is-flipped .lett3-card__flipper {
  transform: rotateY(180deg);
}

.lett3-card__face {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Dorso decorato */
.lett3-card__face--back {
  background: var(--lt-card-back-fill);
  border: 1px solid var(--lt-card-border);
  display: grid;
  place-items: center;
  color: var(--lt-eyebrow-color);
}
.lett3-card__face--back::before {
  content: '';
  position: absolute; inset: 8px;
  border-radius: 8px;
  border: 1px solid rgba(251, 191, 36, 0.30);
  background:
    repeating-radial-gradient(circle at 50% 50%, rgba(251, 191, 36, 0.06) 0, rgba(251, 191, 36, 0.06) 2px, transparent 2px, transparent 14px),
    radial-gradient(circle at 50% 30%, rgba(251, 191, 36, 0.20), transparent 60%);
  pointer-events: none;
}
.lett3-card__face--back::after {
  content: '✦';
  position: relative;
  z-index: 1;
  font-size: clamp(1.8rem, 7vw, 2.6rem);
  text-shadow: 0 0 18px rgba(251, 191, 36, 0.65);
  animation: lett3CardPulse 2s ease-in-out infinite;
}
.lett3-card.is-flipped .lett3-card__face--back::after { animation: none; }
@keyframes lett3CardPulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.18); }
}

/* Faccia carta */
.lett3-card__face--front {
  transform: rotateY(180deg);
  background: #1e1230;
}
.lett3-card__face--front img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}
.lett3-card.is-rovesciata .lett3-card__face--front img {
  transform: rotate(180deg);
}

/* Dust noise overlay durante flip */
.lett3-card__dust {
  position: absolute;
  inset: -10%;
  pointer-events: none;
  opacity: 0;
  background-image:
    radial-gradient(2px 2px at 18% 28%, rgba(251, 191, 36, 0.9),  transparent 50%),
    radial-gradient(1.5px 1.5px at 72% 62%, rgba(253, 230, 138, 0.8), transparent 50%),
    radial-gradient(2.5px 2.5px at 42% 82%, rgba(251, 191, 36, 0.85), transparent 50%),
    radial-gradient(1.5px 1.5px at 86% 22%, rgba(253, 230, 138, 0.9), transparent 50%),
    radial-gradient(2px 2px at 32% 50%, rgba(251, 191, 36, 0.7),  transparent 50%),
    radial-gradient(1.5px 1.5px at 62% 18%, rgba(253, 230, 138, 0.85), transparent 50%),
    radial-gradient(2.5px 2.5px at 12% 72%, rgba(251, 191, 36, 0.7),  transparent 50%),
    radial-gradient(1.5px 1.5px at 92% 88%, rgba(253, 230, 138, 0.8), transparent 50%);
  mix-blend-mode: screen;
  filter: blur(0.3px);
  border-radius: 14px;
  z-index: 3;
}
.lett3-card.is-flipping .lett3-card__dust {
  animation: lett3DustBurst 1.4s ease-out forwards;
}
@keyframes lett3DustBurst {
  0%   { opacity: 0;    transform: scale(0.55) translateY(0); filter: blur(0.3px); }
  20%  { opacity: 0.95; transform: scale(1.0)  translateY(-3px); }
  60%  { opacity: 0.6;  transform: scale(1.4)  translateY(-12px); filter: blur(1px); }
  100% { opacity: 0;    transform: scale(1.9)  translateY(-22px); filter: blur(3px); }
}

/* Etichetta posizione: SIBLING del flipper, sempre sopra (anche durante flip) */
.lett3-card__pos-label {
  position: absolute;
  top: -1.9rem;
  left: 50%;
  z-index: 4;
  transform: translateX(-50%) rotate(calc(var(--tilt) * -1));
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #1e1230;
  background: linear-gradient(135deg, #fde68a, #fbbf24);
  padding: 0.22rem 0.7rem;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(20, 12, 40, 0.35);
  border: 1px solid rgba(180, 83, 9, 0.4);
}

/* ============================================================== */
/*  LISTA CARTE — info semantica sotto il tavolo                  */
/* ============================================================== */

.lett3-cards-list {
  list-style: none;
  margin: 0 auto 1.5rem;
  padding: 0.9rem 1rem;
  display: grid;
  gap: 0.6rem;
  max-width: 100%;
  border-radius: 14px;
  background: var(--lt-paragraph-bg);
  border: 1px solid var(--lt-paragraph-border);
}
.lett3-cards-list__item {
  display: grid;
  /* min-content sulla 1a colonna garantisce no-wrap del label posizione */
  grid-template-columns: minmax(min-content, max-content) 1fr auto;
  align-items: baseline;
  gap: 0.4rem 0.8rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px dashed var(--lt-paragraph-border);
  transition: opacity 0.7s ease;
}
.lett3-cards-list__item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.lett3-cards-list__pos {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lt-eyebrow-color);
  white-space: nowrap; /* fix "PASSA / TO" su mobile stretto */
}
.lett3-cards-list__nome {
  font-size: 1rem;
  font-weight: 700;
  color: var(--lt-text-strong);
  transition: filter 0.7s ease, color 0.7s ease, letter-spacing 0.6s ease;
}
.lett3-cards-list__flag {
  font-size: 0.78rem;
  font-style: italic;
  color: var(--lt-text-muted);
  justify-self: end;
  white-space: nowrap;
  transition: opacity 0.7s ease;
}

/* ──── Stati "locked": contenuto offuscato in attesa che l'utente
        sveli la carta corrispondente cliccandola ──── */

.lett3-cards-list__item.is-locked .lett3-cards-list__nome {
  filter: blur(7px);
  letter-spacing: 0.15em;
  color: var(--lt-text-muted);
}
.lett3-cards-list__item.is-locked .lett3-cards-list__flag {
  opacity: 0;
}

.lett3-paragrafo__body {
  transition: filter 0.7s ease, color 0.7s ease, opacity 0.7s ease;
}
.lett3-paragrafo.is-locked .lett3-paragrafo__body {
  filter: blur(8px) saturate(0.6);
  color: var(--lt-text-muted);
  opacity: 0.7;
}
.lett3-paragrafo.is-locked .lett3-paragrafo__icon {
  opacity: 0.45;
}
.lett3-paragrafo.is-locked .lett3-paragrafo__title {
  opacity: 0.7;
}

.lett3-transizione.is-locked {
  filter: blur(5px);
  opacity: 0.4;
}

.lett3-sintesi.is-locked,
.lett3-chiusura.is-locked,
.lett3-disclaimer-share.is-locked,
.lett3-cta.is-locked {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  filter: blur(3px);
}
.lett3-sintesi,
.lett3-chiusura,
.lett3-disclaimer-share,
.lett3-cta {
  transition: opacity 0.7s ease, transform 0.7s ease, filter 0.7s ease;
}

/* ============================================================== */
/*  PARAGRAFI + TRANSIZIONI                                       */
/* ============================================================== */

.lett3-paragrafi {
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
}

.lett3-paragrafo {
  position: relative;
  padding: 1.1rem 1.1rem 1.15rem;
  border-radius: 16px;
  background: var(--lt-paragraph-bg);
  border: 1px solid var(--lt-paragraph-border);
}

.lett3-paragrafo__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.55rem;
}
.lett3-paragrafo__icon {
  width: 34px; height: 34px;
  border-radius: 999px;
  display: grid; place-items: center;
  font-size: 1rem;
  background: var(--lt-chip-bg-active);
  border: 1px solid var(--lt-chip-border-active);
  color: var(--lt-chip-text-active);
  flex-shrink: 0;
  font-weight: 700;
}
.lett3-paragrafo__title {
  margin: 0;
  font-size: clamp(1.05rem, 2.7vw, 1.2rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--lt-text-strong);
}
.lett3-paragrafo__body {
  margin: 0;
  font-size: clamp(0.96rem, 2.4vw, 1.04rem);
  line-height: 1.7;
  color: var(--lt-paragraph-text);
}

/* Transizione tra paragrafi: linea sottile + frase standalone */
.lett3-transizione {
  margin: 0;
  padding: 0.5rem 0.5rem;
  text-align: center;
  font-style: italic;
  font-size: clamp(0.86rem, 2.2vw, 0.95rem);
  color: var(--lt-divider-text);
  line-height: 1.5;
  position: relative;
  transition: filter 0.7s ease, opacity 0.7s ease;
}
.lett3-transizione::before,
.lett3-transizione::after {
  content: '✦';
  display: inline-block;
  margin: 0 0.5rem;
  color: var(--lt-divider-line);
  font-style: normal;
  font-size: 0.8em;
  vertical-align: middle;
}

/* ============================================================== */
/*  SINTESI (tone-aware)                                          */
/* ============================================================== */

.lett3-sintesi {
  margin-top: 1.1rem;
  padding: 1.3rem 1.2rem;
  border-radius: 18px;
  border: 1px solid var(--lt-paragraph-border);
  box-shadow: var(--lt-panel-shadow);
  background:
    var(--lt-tone-bg-equilibrato),
    var(--lt-panel-bg);
}

.lett3-page[data-tone='luminoso']    .lett3-sintesi { background: var(--lt-tone-bg-luminoso),    var(--lt-panel-bg); }
.lett3-page[data-tone='equilibrato'] .lett3-sintesi { background: var(--lt-tone-bg-equilibrato), var(--lt-panel-bg); }
.lett3-page[data-tone='riflessivo']  .lett3-sintesi { background: var(--lt-tone-bg-riflessivo),  var(--lt-panel-bg); }
.lett3-page[data-tone='sfidante']    .lett3-sintesi { background: var(--lt-tone-bg-sfidante),    var(--lt-panel-bg); }

.lett3-sintesi__title {
  margin: 0 0 0.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lt-eyebrow-color);
}
.lett3-sintesi__body {
  margin: 0;
  font-size: clamp(1rem, 2.5vw, 1.1rem);
  line-height: 1.65;
  color: var(--lt-text-strong);
}

/* ============================================================== */
/*  CHIUSURA + DISCLAIMER + CTA                                   */
/* ============================================================== */

.lett3-chiusura {
  margin: 1.2rem auto 0;
  max-width: 60ch;
  text-align: center;
  font-style: italic;
  font-size: clamp(0.9rem, 2.2vw, 0.98rem);
  color: var(--lt-text-soft);
  line-height: 1.6;
}

.lett3-disclaimer-share {
  margin: 1.4rem auto 0;
  max-width: 60ch;
  padding: 0.65rem 0.95rem;
  border-radius: 10px;
  background: var(--lt-paragraph-bg);
  border: 1px dashed var(--lt-paragraph-border);
  font-size: 0.8rem;
  color: var(--lt-text-muted);
  text-align: center;
}

.lett3-cta {
  margin-top: 1.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
}

.lett3-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.7rem 1.15rem;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.lett3-btn--ghost {
  background: var(--lt-cta-secondary-bg);
  border: 1px solid var(--lt-cta-secondary-border);
  color: var(--lt-cta-secondary-text);
}
.lett3-btn--ghost:hover,
.lett3-btn--ghost:focus-visible {
  background: var(--lt-chip-bg-active);
  border-color: var(--lt-chip-border-active);
  color: var(--lt-chip-text-active);
  outline: none;
  transform: translateY(-2px);
}
.lett3-btn--gold {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: #1e1230;
  box-shadow: 0 10px 24px rgba(251, 191, 36, 0.28);
  border: 1px solid transparent;
}
.lett3-btn--gold:hover,
.lett3-btn--gold:focus-visible {
  outline: none;
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(251, 191, 36, 0.40);
  filter: brightness(1.05);
}
.lett3-btn .arrow { transition: transform 0.2s ease; }
.lett3-btn:hover .arrow,
.lett3-btn:focus-visible .arrow { transform: translateX(3px); }

/* ============================================================== */
/*  Guida alla stesa (LETT3.SEO.1, 2026-10-07)                    */
/*  Testo indicizzabile sotto il modulo: stessi token del pannello */
/*  FAQ, cosi' segue tema chiaro e scuro senza colori propri.      */
/* ============================================================== */

.lett3-guide {
  margin: 1.6rem auto 0;
  padding: 1.2rem 1.1rem 1.3rem;
  border-radius: 20px;
  border: 1px solid var(--lt-paragraph-border);
  background: var(--lt-panel-bg);
  box-shadow: var(--lt-panel-shadow);
  color: var(--lt-text-soft);
  font-size: clamp(0.92rem, 2.3vw, 1rem);
  line-height: 1.65;
}
.lett3-guide__title {
  margin: 0 0 0.7rem;
  text-align: center;
  font-size: clamp(1.1rem, 2.8vw, 1.3rem);
  font-weight: 700;
  color: var(--lt-text-strong);
  text-wrap: balance;
}
.lett3-guide__subtitle {
  margin: 1.1rem 0 0.35rem;
  font-size: clamp(0.98rem, 2.5vw, 1.06rem);
  font-weight: 700;
  color: var(--lt-text-strong);
}
.lett3-guide p {
  margin: 0 0 0.6rem;
}
.lett3-guide p:last-child {
  margin-bottom: 0;
}
.lett3-guide a {
  color: var(--lt-eyebrow-color);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.lett3-guide a:focus-visible {
  outline: 2px solid var(--lt-eyebrow-color);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ============================================================== */
/*  FAQ accordion (GEO.F5.1)                                      */
/* ============================================================== */

.lett3-faq {
  margin: 1.6rem auto 0;
  padding: 1.2rem 1.1rem 1.3rem;
  border-radius: 20px;
  border: 1px solid var(--lt-paragraph-border);
  background: var(--lt-panel-bg);
  box-shadow: var(--lt-panel-shadow);
}
.lett3-faq__head {
  text-align: center;
  margin-bottom: 0.9rem;
}
.lett3-faq__eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lt-eyebrow-color);
  padding: 0.22rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--lt-eyebrow-border);
  background: var(--lt-eyebrow-bg);
  margin-bottom: 0.5rem;
}
.lett3-faq__title {
  margin: 0;
  font-size: clamp(1.1rem, 2.8vw, 1.3rem);
  font-weight: 700;
  color: var(--lt-text-strong);
}

.lett3-faq__list {
  display: grid;
  gap: 0.55rem;
}

.lett3-faq__item {
  border-radius: 12px;
  border: 1px solid var(--lt-paragraph-border);
  background: var(--lt-paragraph-bg);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.lett3-faq__item[open] {
  border-color: var(--lt-chip-border-active);
  box-shadow: 0 6px 18px rgba(251, 191, 36, 0.10);
}

.lett3-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  padding: 0.85rem 1rem;
  min-height: 48px;
  cursor: pointer;
  font-size: clamp(0.95rem, 2.4vw, 1.02rem);
  font-weight: 700;
  color: var(--lt-text-strong);
  line-height: 1.4;
  list-style: none; /* nasconde marker default */
  -webkit-tap-highlight-color: transparent;
}
.lett3-faq__question::-webkit-details-marker { display: none; }
.lett3-faq__question::marker { content: ''; }
.lett3-faq__question:hover {
  background: rgba(251, 191, 36, 0.05);
}
.lett3-faq__item[open] .lett3-faq__question {
  border-bottom: 1px solid var(--lt-paragraph-border);
}
.lett3-faq__question:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px rgba(251, 191, 36, 0.4);
}

.lett3-faq__question-text {
  flex: 1 1 auto;
  text-align: left;
}

.lett3-faq__chevron {
  flex-shrink: 0;
  display: inline-block;
  font-size: 0.85rem;
  color: var(--lt-eyebrow-color);
  transition: transform 0.25s ease;
  font-weight: 800;
}
.lett3-faq__item[open] .lett3-faq__chevron {
  transform: rotate(180deg);
}

.lett3-faq__answer {
  padding: 0.95rem 1rem 1.05rem;
  font-size: clamp(0.92rem, 2.3vw, 1rem);
  line-height: 1.65;
  color: var(--lt-text-soft);
}
.lett3-faq__answer p {
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .lett3-faq__chevron { transition: none; }
}

/* ============================================================== */
/*  SHARE (HtmlElement::socialLinks)                              */
/* ============================================================== */

.lett3-share {
  margin: 1.6rem auto 0;
  padding: 1rem 1rem 1.1rem;
  text-align: center;
  border-radius: 16px;
  background: var(--lt-paragraph-bg);
  border: 1px solid var(--lt-paragraph-border);
  max-width: 60ch;
}
.lett3-share__intro {
  margin: 0 0 0.6rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lt-eyebrow-color);
}
/* Le ancore prodotte da HtmlElement::socialLinks() arrivano con uno
   style inline che usa --bs-tertiary-bg / --bs-body-color. In dark mode
   risultano troppo chiare; aumentiamo solo il border-ring oro al
   focus per coerenza brand. */
.lett3-share .social-share-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.42) !important;
}

/* ============================================================== */
/*  CARTOMANTE CONSIGLIATO                                        */
/* ============================================================== */

.lett3-recommend {
  margin: 1.6rem auto 0;
  padding: 1.2rem 1.1rem 1.3rem;
  border-radius: 20px;
  border: 1px solid var(--lt-paragraph-border);
  background: var(--lt-panel-bg);
  box-shadow: var(--lt-panel-shadow);
}
.lett3-recommend__head {
  text-align: center;
  margin-bottom: 0.9rem;
}
.lett3-recommend__eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lt-eyebrow-color);
  padding: 0.22rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--lt-eyebrow-border);
  background: var(--lt-eyebrow-bg);
  margin-bottom: 0.5rem;
}
.lett3-recommend__title {
  margin: 0;
  font-size: clamp(1rem, 2.6vw, 1.18rem);
  font-weight: 700;
  color: var(--lt-text-strong);
}

.lett3-recommend__card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.95rem;
  align-items: center;
  padding: 0.85rem;
  border-radius: 14px;
  background: var(--lt-paragraph-bg);
  border: 1px solid var(--lt-paragraph-border);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.lett3-recommend__card:hover,
.lett3-recommend__card:focus-visible {
  outline: none;
  border-color: var(--lt-chip-border-active);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(251, 191, 36, 0.18);
}

.lett3-recommend__avatar {
  position: relative;
  width: clamp(72px, 22vw, 100px);
  height: clamp(72px, 22vw, 100px);
  flex-shrink: 0;
  border-radius: 999px;
  overflow: visible;
  background: var(--lt-input-bg);
  border: 2px solid var(--lt-chip-border-active);
  box-shadow: 0 6px 18px rgba(20, 12, 40, 0.25);
}
.lett3-recommend__avatar img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 999px;
}
.lett3-recommend__status {
  position: absolute;
  bottom: -6px;
  right: -2px;
  z-index: 2;
}

.lett3-recommend__info {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}
.lett3-recommend__name {
  margin: 0;
  font-size: clamp(1.05rem, 2.8vw, 1.2rem);
  font-weight: 800;
  color: var(--lt-text-strong);
  letter-spacing: 0.01em;
}
.lett3-recommend__desc {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--lt-text-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lett3-recommend__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.3rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--lt-chip-text-active);
}
.lett3-recommend__cta span {
  transition: transform 0.2s ease;
}
.lett3-recommend__card:hover .lett3-recommend__cta span,
.lett3-recommend__card:focus-visible .lett3-recommend__cta span {
  transform: translateX(3px);
}

/* ============================================================== */
/*  REDUCED MOTION                                                */
/* ============================================================== */

@media (prefers-reduced-motion: reduce) {
  .lett3-card__face--back::after,
  .lett3-cards-hint__pulse { animation: none; }

  .lett3-card {
    opacity: 1 !important;
    transform: rotate(var(--tilt)) !important;
    transition: none !important;
    pointer-events: auto !important;
  }
  .lett3-card:nth-child(2) { transform: translateY(-6px) rotate(0deg) !important; }

  /* In reduced-motion mostro subito il fronte (niente flip) */
  .lett3-card__flipper { transition: none !important; transform: rotateY(180deg) !important; }
  .lett3-card__dust { display: none; }

  /* Niente blur/lock in reduced-motion: tutto leggibile subito */
  .is-locked,
  .lett3-cards-list__item.is-locked .lett3-cards-list__nome,
  .lett3-cards-list__item.is-locked .lett3-cards-list__flag,
  .lett3-paragrafo.is-locked .lett3-paragrafo__body,
  .lett3-transizione.is-locked,
  .lett3-sintesi.is-locked,
  .lett3-chiusura.is-locked,
  .lett3-disclaimer-share.is-locked,
  .lett3-cta.is-locked {
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    color: inherit !important;
    letter-spacing: normal !important;
  }

  .lett3-submit::after { display: none; }
}

/* LETT3.CRO.1 — blocco "ponte" verso il consulto privato a pagamento.
   Stile coerente con .lett3-recommend ma con accento dorato per enfasi CTA. */
.lett3-bridge {
  margin: 1.6rem auto 0;
  padding: 1.3rem 1.2rem 1.4rem;
  border-radius: 20px;
  border: 1px solid var(--lt-eyebrow-border);
  background: var(--lt-tone-bg-luminoso, rgba(212, 175, 110, 0.10)), var(--lt-panel-bg);
  box-shadow: var(--lt-panel-shadow);
  text-align: center;
}
.lett3-bridge__eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lt-eyebrow-color);
  padding: 0.22rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--lt-eyebrow-border);
  background: var(--lt-eyebrow-bg);
  margin-bottom: 0.7rem;
}
.lett3-bridge__text {
  margin: 0 auto 1rem;
  max-width: 46ch;
  font-size: clamp(0.95rem, 2.4vw, 1.05rem);
  line-height: 1.6;
  color: var(--lt-text-strong);
}
.lett3-bridge__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* LETT3.FREEMIUM.1 — CTA sblocco lettura completa */
/* Modal sblocco freemium — compatto, dual-theme via token scoped --lt-* (DS §3) */
.lett3-unlock {
  box-sizing: border-box;
  margin: var(--alu-space-6, 1.5rem) 0;
  padding: clamp(1.1rem, 4.5vw, 1.6rem);
  border: 1px solid var(--lt-hero-border);
  border-radius: var(--alu-radius-xl, 22px);
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(251, 191, 36, 0.16) 0%, transparent 62%),
    var(--lt-panel-bg);
  color: var(--lt-text);
  box-shadow: var(--lt-panel-shadow);
  overflow-wrap: break-word;
}
.lett3-unlock * { min-width: 0; }
.lett3-unlock__title { overflow-wrap: anywhere; }
.lett3-unlock__eyebrow {
  display: inline-flex;
  align-items: center;
  margin-bottom: .55rem;
  padding: .22rem .6rem;
  border: 1px solid var(--lt-eyebrow-border);
  border-radius: var(--alu-radius-pill, 999px);
  background: var(--lt-eyebrow-bg);
  color: var(--lt-eyebrow-color);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.lett3-unlock__title {
  margin: 0 0 .5rem;
  color: var(--lt-text-strong);
  font-size: clamp(1.4rem, 5.5vw, 1.9rem);
  font-weight: 800;
  line-height: 1.15;
}
.lett3-unlock__text {
  margin: 0 0 .85rem;
  color: var(--lt-text-soft);
  font-size: clamp(.95rem, 3.4vw, 1.05rem);
  line-height: 1.55;
}
.lett3-unlock__list {
  list-style: none;
  margin: 0 0 1.1rem;
  padding: 0;
  display: grid;
  gap: .5rem;
}
.lett3-unlock__list li {
  position: relative;
  padding-left: 1.8rem;
  color: var(--lt-text-soft);
  font-size: clamp(.9rem, 3.3vw, 1rem);
  line-height: 1.45;
}
.lett3-unlock__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: .05em;
  width: 1.3rem;
  height: 1.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(251, 191, 36, 0.18);
  color: #fbbf24;
  font-size: .78rem;
  font-weight: 900;
}
.lett3-unlock__list-gift { font-weight: 700; }
.lett3-unlock__list-gift::before {
  content: "🎁";
  background: transparent;
  font-size: 1rem;
}
.lett3-unlock__list-gift strong { color: var(--lt-eyebrow-color); }

/* CTA fortissima: gold full-width, due righe, glow + micro-pulse */
.lett3-unlock__cta {
  width: 100%;
  flex-direction: column;
  gap: .12rem;
  min-height: 60px;
  padding: .85rem 1.1rem;
  border-radius: var(--alu-radius-lg, 16px);
  text-align: center;
  box-shadow: 0 12px 28px rgba(251, 191, 36, 0.34);
  animation: lett3UnlockPulse 2.6s ease-in-out infinite;
}
.lett3-unlock__cta-main {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: clamp(1.05rem, 4vw, 1.2rem);
  font-weight: 800;
}
.lett3-unlock__cta-sub {
  font-size: .8rem;
  font-weight: 600;
  opacity: .82;
}
@keyframes lett3UnlockPulse {
  0%, 100% { box-shadow: 0 12px 28px rgba(251, 191, 36, 0.30); }
  50%      { box-shadow: 0 14px 36px rgba(251, 191, 36, 0.52); }
}

.lett3-unlock__reassure {
  margin: .7rem 0 0;
  text-align: center;
  color: var(--lt-text-muted);
  font-size: .8rem;
}
.lett3-unlock__note {
  margin-top: .85rem;
  padding: .7rem .85rem;
  border: 1px solid var(--lt-panel-border);
  border-radius: var(--alu-radius-lg, 14px);
  background: var(--lt-paragraph-bg);
}
.lett3-unlock__note-q {
  margin: 0 0 .25rem;
  color: var(--lt-text-soft);
  font-size: .9rem;
  font-weight: 700;
}
.lett3-unlock__note-a {
  margin: 0;
  color: var(--lt-text-muted);
  font-size: .86rem;
  line-height: 1.5;
}
@media (prefers-reduced-motion: reduce) {
  .lett3-unlock__cta { animation: none; }
}

.lett3-unlock-modal[hidden] {
  display: none;
}

.lett3-unlock-modal {
  position: fixed;
  inset: 0;
  z-index: var(--alu-z-overlay, 1500);
  display: grid;
  place-items: center;
  padding: clamp(.75rem, 4vw, 1.5rem);
}

.lett3-unlock-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(18, 12, 38, .62);
  backdrop-filter: blur(7px);
}

.lett3-unlock--modal {
  position: relative;
  z-index: 1;
  width: min(100%, 680px);
  max-height: min(88vh, 760px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0;
}

.lett3-unlock-modal__close {
  position: sticky;
  top: 0;
  float: right;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--lt-hero-border);
  border-radius: var(--alu-radius-pill, 999px);
  background: var(--lt-panel-bg);
  color: var(--lt-text);
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: var(--lt-panel-shadow);
  cursor: pointer;
}

.lett3-modal-open {
  overflow: hidden;
}

.lett3-card[data-lett3-paywall-card] {
  cursor: pointer;
}

.lett3-card[data-lett3-paywall-card] .lett3-card__face--back::after {
  content: "Sblocca";
  position: absolute;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  padding: .25rem .65rem;
  border-radius: var(--alu-radius-pill, 999px);
  background: var(--alu-grad-gold);
  color: var(--alu-text-on-gold, #2a1b4a);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: var(--alu-glow-gold-soft);
}

/* Placeholder lucchetto sul fronte delle carte a pagamento: nessuna immagine
   reale nel DOM (gating server-side). */
.lett3-card__lock {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 2.6rem;
  opacity: .85;
}

/* Anti-copia sul contenuto bloccato (placeholder/sfocato): scoraggia selezione,
   copia, trascinamento immagini e callout long-press iOS. Il testo reale a
   pagamento NON è comunque presente nel DOM. Gli elementi tornano selezionabili
   quando .is-locked viene rimosso (reveal della prima lettura gratuita). */
.lett3-card,
.lett3-cards-list__item.is-locked,
.lett3-paragrafo.is-locked,
.lett3-transizione.is-locked,
.lett3-sintesi.is-locked,
.lett3-chiusura.is-locked {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.lett3-card img,
.lett3-card__lock {
  -webkit-user-drag: none;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .lett3-unlock-modal__backdrop {
    backdrop-filter: none;
  }
}

/* PAYPAL.WALLETS.1 (2026-10-08): conferma dopo il pagamento dello sblocco dal modale comune */
.lett3-paid-notice { margin: 0 auto 1rem; max-width: 640px; padding: .85rem 1rem; border-radius: 10px;
  background: #eef8f0; border: 1px solid #9fd3ab; color: #1f4d2a; font-size: .95rem; line-height: 1.5; text-align: center; }

/* Source: unsubscribe.css */
.unsubscribe-section {
  --unsubscribe-card-bg: #f0fff2;
}

.unsubscribe-card {
  max-width: 26.25rem;
  background: var(--unsubscribe-card-bg);
}

.unsubscribe-honeypot {
  position: absolute;
  top: -9999px;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Source: coupon.css */
/* css/sub/coupon.css
   Pagina pubblica /coupon. Stili tokenizzati (--alu-*), mobile-first.
   FE.1: estrazione asset + token. FE.2: redesign stato ENTRY. */

.coupon-page {
  /* Token scoped al componente (derivati dalla palette --alu-* / §1.2). */
  --cpn-accent: var(--alu-accent);
  --cpn-text: var(--alu-text);
  --cpn-text-muted: var(--alu-text-muted);
  --cpn-surface: var(--alu-surface-section);
  --cpn-border: var(--alu-border);
  --cpn-dash-border: rgba(107, 58, 160, 0.55);   /* da --alu-accent #6b3aa0 */
  --cpn-dash-bg: rgba(107, 58, 160, 0.06);
  --cpn-countdown-bg: var(--alu-gold-a18);
  --cpn-countdown-border: var(--alu-gold-a45);
  --cpn-danger: #b02a37;
  --cpn-danger-bg: rgba(220, 53, 69, 0.10);
  --cpn-danger-border: rgba(220, 53, 69, 0.30);
}

html:is(.theme-dark, [data-bs-theme='dark']) .coupon-page {
  --cpn-text: var(--alu-text-on-dark);
  --cpn-text-muted: var(--alu-text-on-dark-soft);
  --cpn-border: rgba(245, 243, 255, 0.16);
  --cpn-dash-border: rgba(139, 92, 246, 0.70);
  --cpn-dash-bg: rgba(107, 58, 160, 0.12);
  --cpn-danger: #f1a7ae;
}

/* ============================================================
   FE.4 — Stati ERRORE (notice inline + pannello full-screen)
   ============================================================ */
.coupon-notice {
  max-width: 640px;
  margin: 0 auto var(--alu-space-6);
  padding: var(--alu-space-5) var(--alu-space-6);
  border-radius: var(--alu-radius-lg);
  border: 1px solid var(--cpn-countdown-border);
  background: var(--cpn-countdown-bg);
  color: var(--cpn-text);
  text-align: center;
}
.coupon-notice--danger {
  border-color: var(--cpn-danger-border);
  background: var(--cpn-danger-bg);
}
.coupon-notice-msg {
  margin: 0 0 var(--alu-space-3);
  font-weight: 600;
}
.coupon-notice-support {
  margin: 0 0 var(--alu-space-4);
  font-size: 0.85rem;
  color: var(--cpn-text-muted);
}
.coupon-notice-support a {
  color: var(--cpn-accent);
}

.coupon-error {
  max-width: 560px;
  margin: 0 auto;
  min-height: min(60vh, 460px);
  padding: var(--alu-space-8) var(--alu-space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--cpn-surface);
  border: 1px solid var(--cpn-border);
  border-radius: var(--alu-radius-xl);
  box-shadow: var(--alu-shadow-2);
  color: var(--cpn-text);
}
.coupon-error-icon {
  display: inline-flex;
  font-size: 2.5rem;
  color: var(--alu-gold-deep);
  margin-bottom: var(--alu-space-4);
}
.coupon-error-title {
  font-size: clamp(1.35rem, 4vw, 1.75rem);
  font-weight: 700;
  margin: 0 0 var(--alu-space-3);
}
.coupon-error-msg {
  color: var(--cpn-text-muted);
  margin: 0 0 var(--alu-space-6);
  max-width: 42ch;
}

/* MKT.GROWTH.1.2 — offerta di recupero al posto del vicolo cieco quando il
   coupon richiesto e' scaduto. Riusa token, CTA e superfici gia' esistenti:
   nessun colore nuovo, cosi' resta coerente in tema chiaro e scuro. */
.coupon-recovery {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--alu-space-3);
  width: 100%;
  max-width: 42ch;
  padding: var(--alu-space-4);
  border-radius: var(--alu-radius-lg);
  background: var(--cpn-countdown-bg);
  border: 1px solid var(--cpn-countdown-border);
}

.coupon-recovery-lead {
  margin: 0;
  color: var(--cpn-text);
  text-align: center;
}

.coupon-recovery-code {
  margin: 0;
  font-size: .85rem;
  color: var(--cpn-text-muted);
  letter-spacing: .04em;
  overflow-wrap: anywhere;
}

/* CTA secondaria (ghost) usata negli stati notice/errore. */
.coupon-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.6rem 1.5rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--cpn-accent);
  background: transparent;
  border: 1px solid var(--cpn-accent);
  border-radius: var(--alu-radius-pill);
  transition: background-color 0.15s ease;
}
.coupon-btn-ghost:hover {
  background: var(--cpn-dash-bg);
}
.coupon-btn-ghost:focus-visible {
  outline: 3px solid var(--alu-accent);
  outline-offset: 2px;
}

/* ============================================================
   FE.2 — Stato ENTRY (form inserimento codice)
   ============================================================ */
.coupon-entry {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--alu-space-6);
  background: var(--cpn-surface);
  border: 1px solid var(--cpn-border);
  border-radius: var(--alu-radius-xl);
  box-shadow: var(--alu-shadow-2);
  text-align: center;
  color: var(--cpn-text);
}
@media (min-width: 768px) {
  .coupon-entry {
    padding: var(--alu-space-8);
  }
}

.coupon-entry-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cpn-accent);
  margin-bottom: var(--alu-space-2);
}
.coupon-entry-title {
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--cpn-text);
  margin: 0 0 var(--alu-space-3);
}
.coupon-entry-lead {
  color: var(--cpn-text-muted);
  margin: 0 auto var(--alu-space-6);
  max-width: 46ch;
}

.coupon-form {
  margin: 0;
}
.coupon-form-label {
  display: block;
  max-width: 520px;
  margin: 0 auto var(--alu-space-2);
  text-align: left;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--cpn-text);
}
.coupon-dash {
  max-width: 520px;
  margin: 0 auto;
  padding: var(--alu-space-6) var(--alu-space-5);
  border: 3px dashed var(--cpn-dash-border);
  border-radius: var(--alu-radius-lg);
  background: var(--cpn-dash-bg);
}
.coupon-input {
  width: 100%;
  text-align: center;
  font-size: clamp(1.4rem, 5vw, 2.1rem);
  font-family: "Courier New", Courier, monospace;
  border: none;
  background: transparent;
  outline: none;
  color: var(--cpn-text);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.coupon-input::placeholder {
  color: var(--cpn-text-muted);
  opacity: 0.6;
  letter-spacing: 0.12em;
}
.coupon-form-hint {
  max-width: 520px;
  margin: var(--alu-space-2) auto 0;
  text-align: left;
  font-size: 0.8rem;
  color: var(--cpn-text-muted);
}
.coupon-form-error {
  max-width: 520px;
  margin: var(--alu-space-3) auto 0;
  padding: var(--alu-space-3) var(--alu-space-4);
  border-radius: var(--alu-radius-md);
  background: var(--cpn-danger-bg);
  border: 1px solid var(--cpn-danger-border);
  color: var(--cpn-danger);
  font-size: 0.9rem;
  text-align: left;
}
.coupon-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--alu-space-6);
  min-width: 220px;
  min-height: 48px;
  padding: 0.75rem 2rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--alu-text-on-gold);
  background: var(--alu-grad-gold);
  border: none;
  border-radius: var(--alu-radius-pill);
  box-shadow: var(--alu-shadow-1);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.coupon-submit:hover {
  transform: translateY(-1px);
  box-shadow: var(--alu-shadow-2);
}
.coupon-submit:focus-visible {
  outline: 3px solid var(--alu-accent);
  outline-offset: 2px;
}
.coupon-entry-support {
  margin: var(--alu-space-6) 0 0;
  font-size: 0.85rem;
  color: var(--cpn-text-muted);
}
.coupon-entry-support a {
  color: var(--cpn-accent);
}

@media (prefers-reduced-motion: reduce) {
  .coupon-submit {
    transition: none;
  }
  .coupon-submit:hover {
    transform: none;
  }
}

/* ============================================================
   FE.3 — REDEEM (coupon attivato + countdown + griglia offerte)
   ============================================================ */
.coupon-redeem {
  max-width: 1040px;
  margin: 0 auto;
  padding: var(--alu-space-6);
  background: var(--cpn-surface);
  border: 1px solid var(--cpn-border);
  border-radius: var(--alu-radius-xl);
  box-shadow: var(--alu-shadow-2);
  color: var(--cpn-text);
}
@media (min-width: 768px) {
  .coupon-redeem {
    padding: var(--alu-space-8);
  }
}
.coupon-redeem-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--alu-space-2);
  margin-bottom: var(--alu-space-6);
}
.coupon-redeem-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0f7b4f;
  background: rgba(16, 185, 129, 0.15);
  padding: 0.25rem 0.7rem;
  border-radius: var(--alu-radius-pill);
}
.coupon-redeem-benefit {
  font-size: clamp(1.5rem, 6vw, 2.4rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: var(--alu-space-1) 0 0;
  max-width: 20ch;
  color: var(--cpn-text);
}
.coupon-redeem-lead {
  margin: 0;
  color: var(--cpn-text-muted);
}
.coupon-code-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin-top: var(--alu-space-2);
  padding: var(--alu-space-2) var(--alu-space-5);
  border-radius: var(--alu-radius-md);
  background: var(--cpn-dash-bg);
  border: 1px solid var(--cpn-dash-border);
}
.coupon-code-chip-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cpn-text-muted);
}
.coupon-code-chip-value {
  font-family: "Courier New", Courier, monospace;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--cpn-accent);
}

.coupon-countdown {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--alu-space-1);
  margin-bottom: var(--alu-space-6);
  padding: var(--alu-space-5) var(--alu-space-6);
  border-radius: var(--alu-radius-md);
  background: var(--cpn-countdown-bg);
  border: 1px solid var(--cpn-countdown-border);
  text-align: center;
}
.coupon-countdown-label {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--alu-gold-deep);
}
.coupon-countdown-timer {
  font-size: clamp(2rem, 8vw, 2.75rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--cpn-text);
}
.coupon-countdown-note {
  font-size: 0.85rem;
  color: var(--cpn-text-muted);
}

.coupon-offer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--alu-space-5);
}
@media (min-width: 576px) {
  .coupon-offer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 992px) {
  .coupon-offer-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.coupon-offer-cell {
  display: flex;
}
.coupon-offer-cell > * {
  width: 100%;
}

/* ============================================================
   FE.5 — Social brand (follow) + sezione banner (entry/errore)
   ============================================================ */
.coupon-extras {
  max-width: 720px;
}
.social-follow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--alu-space-2);
  margin: var(--alu-space-6) auto var(--alu-space-4);
}
.social-follow__label {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cpn-text-muted);
}
.social-follow__links {
  display: flex;
  gap: var(--alu-space-3);
}
.social-follow__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--alu-radius-pill);
  color: var(--cpn-text);
  background: var(--cpn-dash-bg);
  border: 1px solid var(--cpn-border);
  transition: transform 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.social-follow__link:hover {
  color: var(--cpn-accent);
  border-color: var(--cpn-accent);
  transform: translateY(-1px);
}
.social-follow__link:focus-visible {
  outline: 3px solid var(--alu-accent);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .social-follow__link {
    transition: none;
  }
  .social-follow__link:hover {
    transform: none;
  }
}

/* Source: customer-account.css */
/* /css/sub/customer-account.css */
.alu-account{width:min(920px,100%);margin:0 auto;padding:1.25rem 1rem 2.5rem;color:var(--alu-text,#231235)}
.alu-account__card{background:var(--alu-surface,#fff);border:1px solid var(--alu-border,rgba(46,29,84,.16));border-radius:18px;box-shadow:0 18px 50px rgba(34,18,57,.08);padding:clamp(1.1rem,4vw,1.7rem);scroll-margin-top:5rem}
.alu-account__card h2{margin:0 0 .7rem;font-size:clamp(1.35rem,4.5vw,1.9rem);line-height:1.15;color:var(--alu-text-strong,var(--alu-text,#1d1430))}
.alu-account__card h3{margin:.2rem 0 .35rem;font-size:1.05rem}
.alu-account__hint{color:var(--alu-text-muted,rgba(35,18,53,.76));line-height:1.6;margin:.2rem 0 1.2rem}
.alu-account__form{display:grid;gap:.9rem}
.alu-account__form label{display:grid;gap:.38rem;font-weight:750;color:var(--alu-text,#231235)}
.alu-account__form input,.alu-account__form select{width:100%;min-height:48px;border:1px solid var(--alu-border,rgba(46,29,84,.18));border-radius:13px;background:var(--alu-surface-soft,#fffaf2);padding:.78rem .9rem;color:var(--alu-text,#231235);font:inherit}
.alu-account__form input:focus,.alu-account__form select:focus{outline:2px solid var(--alu-accent,#b8860b);outline-offset:2px}
.alu-account__date-select{display:grid;grid-template-columns:1fr 1.4fr 1.2fr;gap:.5rem}
.alu-account__date-select select{width:100%}
.alu-account__hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important}
.alu-account__submit,.alu-account__button{border:0;border-radius:999px;background:var(--alu-grad-gold,linear-gradient(135deg,#fbbf24,#f59e0b));color:var(--alu-text-on-gold,#2a1b4a);min-height:48px;padding:.8rem 1.15rem;font-weight:850;text-align:center;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.alu-account__submit:disabled{opacity:.62;cursor:wait}
.alu-account__button.is-ghost{background:transparent;border:1px solid var(--alu-border,rgba(46,29,84,.24));color:var(--alu-text,#231235)}
.alu-account__card--danger{border-color:rgba(163,58,58,.35)}
.alu-account__danger-details{margin-top:.9rem}
.alu-account__danger-details summary{list-style:none;user-select:none}
.alu-account__danger-details summary::-webkit-details-marker{display:none}
.alu-account__danger-details[open] summary{margin-bottom:.9rem}
.alu-account__checkbox-label{display:flex!important;flex-direction:row;align-items:flex-start;gap:.55rem;font-weight:600!important;line-height:1.4}
.alu-account__checkbox-label input{width:auto;min-height:0;flex:0 0 auto;margin-top:.2rem}
.alu-account__submit.is-danger{background:linear-gradient(135deg,#c0524f,#a33a3a);color:#fff}
.alu-account__msg{min-height:1.35rem;margin:.1rem 0 0;font-weight:720}
.alu-account__msg.is-ok,.alu-account__card.is-ok p{color:#207245}
.alu-account__msg.is-error,.alu-account__card.is-error p{color:#a33a3a}
.alu-account__switch,.alu-account__links{margin:1rem 0 0;display:flex;flex-wrap:wrap;gap:.8rem;color:var(--alu-text-muted,rgba(35,18,53,.76))}
.alu-account a{color:var(--alu-accent,#b8860b);font-weight:800}
.alu-account__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.9rem;margin:1rem 0}
.alu-account__grid>div{border:1px solid var(--alu-border,rgba(46,29,84,.14));border-radius:14px;background:var(--alu-surface-soft,rgba(184,134,11,.05));padding:1rem}
.alu-account-history{margin:.9rem 0 0;border:1px solid var(--alu-border,rgba(46,29,84,.18));border-radius:14px;background:var(--alu-surface-soft,rgba(184,134,11,.05));overflow:hidden}
.alu-account-history__toggle{display:flex;align-items:center;justify-content:space-between;gap:.75rem;width:100%;min-height:48px;border:0;background:transparent;padding:.55rem .6rem .55rem 1rem;font:inherit;font-weight:800;color:var(--alu-text,#231235);text-align:left;cursor:pointer}
.alu-account-history__toggle span{font-weight:900}
.alu-account-history__toggle:hover{background:var(--alu-surface,#fff)}
.alu-account-history__icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:999px;background:var(--alu-grad-gold,linear-gradient(135deg,#fbbf24,#f59e0b));color:var(--alu-text-on-gold,#2a1b4a);font-style:normal;font-weight:950;font-size:1.15rem;line-height:1}
.alu-account-history__body{padding:.75rem 1rem 1rem;border-top:1px solid var(--alu-border,rgba(46,29,84,.14))}
.alu-account__empty{border:1px dashed var(--alu-border,rgba(46,29,84,.2));border-radius:14px;background:var(--alu-surface-soft,rgba(184,134,11,.05));padding:1rem;color:var(--alu-text-muted,rgba(35,18,53,.76));line-height:1.55}
.alu-account__consult-list{display:grid;gap:.85rem}
.alu-account__consult-list:empty{display:none}
.alu-account__consults-more{display:block;width:100%;margin-top:.85rem;min-height:44px;border:1px dashed var(--alu-border,rgba(46,29,84,.24));border-radius:14px;background:transparent;color:var(--alu-text,#231235);font:inherit;font-weight:800;cursor:pointer}
.alu-account__consults-more:hover{background:var(--alu-surface-soft,rgba(184,134,11,.06))}
.alu-account__consults-status{margin:.85rem 0 0;color:var(--alu-text-muted,rgba(35,18,53,.72));font-size:.9rem;text-align:center}
.alu-account-consult{border:1px solid var(--alu-border,rgba(46,29,84,.16));border-radius:16px;background:var(--alu-surface-soft,#fffaf2);overflow:hidden}
.alu-account-consult summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:.6rem .75rem;min-height:54px;padding:.85rem 1rem;cursor:pointer;font-weight:850;list-style:none}
.alu-account-consult summary>span:first-of-type{min-width:0;line-height:1.35}
.alu-account-consult summary::-webkit-details-marker{display:none}
.alu-account-consult summary::before{content:'+';flex:0 0 auto;display:grid;place-items:center;width:30px;height:30px;border-radius:999px;border:1px solid var(--alu-border,rgba(46,29,84,.2));color:var(--alu-accent,#b8860b);font-weight:900}
.alu-account-consult[open] summary::before{content:'-'}
.alu-account-consult__status{flex:0 0 auto;border-radius:999px;padding:.28rem .62rem;font-size:.78rem;font-weight:900;letter-spacing:.02em;background:rgba(117,117,117,.15);color:var(--alu-text,#231235)}
.alu-account-consult__status.is-risposto{background:rgba(32,114,69,.14);color:#207245}
.alu-account-consult__status.is-ricevuto{background:rgba(184,134,11,.16);color:#7a5306}
.alu-account-consult__status.is-in_lavorazione{background:rgba(93,69,158,.14);color:#5d459e}
.alu-account-consult__body{border-top:1px solid var(--alu-border,rgba(46,29,84,.14));padding:1rem;display:grid;gap:1rem}
.alu-account-consult__section{border:1px solid var(--alu-border,rgba(46,29,84,.14));border-radius:14px;background:var(--alu-surface,#fff);padding:1rem}
.alu-account-consult__section.is-answer{border-left:4px solid var(--alu-accent,#b8860b)}
.alu-account-consult__section h4{margin:0 0 .55rem;font-size:.84rem;text-transform:uppercase;letter-spacing:.1em;color:var(--alu-accent,#b8860b)}
.alu-account-consult__section p{margin:0;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere}
.alu-account-consult__richtext{line-height:1.68;overflow-wrap:anywhere}
.alu-account-consult__richtext>*:first-child{margin-top:0}
.alu-account-consult__richtext>*:last-child{margin-bottom:0}
.alu-account-consult__richtext p{margin:.65rem 0;white-space:normal}
.alu-account-consult__richtext ul,.alu-account-consult__richtext ol{margin:.7rem 0 .7rem 1.25rem;padding:0}
.alu-account-consult__richtext li{margin:.25rem 0}
.alu-account-consult__richtext blockquote{margin:.8rem 0;padding:.8rem 1rem;border-left:4px solid var(--alu-accent,#b8860b);border-radius:10px;background:var(--alu-surface-soft,rgba(184,134,11,.06))}
.alu-account-consult__richtext a{word-break:break-word}
@media(max-width:640px){.alu-account{padding-inline:.85rem}.alu-account__card{border-radius:16px}.alu-account__links{display:grid}.alu-account-consult summary{grid-template-columns:auto minmax(0,1fr) auto;align-items:start}.alu-account-consult__status{grid-column:2;justify-self:start}.alu-account-consult__delete,.alu-account-consult__typing-badge{grid-row:1;grid-column:3}.alu-account-consult__body{padding:.85rem}}

.alu-account-pending{margin-bottom:1.4rem;display:grid;gap:.9rem}
.alu-account-pending__title{margin:0;font-size:1.05rem;font-weight:900;color:var(--alu-text,#231235)}
.alu-account-consult--pending{background:rgba(184,134,11,.08);border-color:rgba(184,134,11,.3)}
html:is(.theme-dark,[data-bs-theme='dark']) .alu-account-consult--pending{background:rgba(184,134,11,.14);border-color:rgba(184,134,11,.4)}

.alu-typing-dots{display:inline-flex;align-items:center;gap:.26rem;flex:0 0 auto}
.alu-typing-dots span{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.35;animation:alu-typing-bounce 1.2s infinite ease-in-out}
.alu-typing-dots span:nth-child(2){animation-delay:.15s}
.alu-typing-dots span:nth-child(3){animation-delay:.3s}
@keyframes alu-typing-bounce{0%,60%,100%{transform:translateY(0);opacity:.35}30%{transform:translateY(-4px);opacity:1}}
@media(prefers-reduced-motion:reduce){.alu-typing-dots span{animation:none;opacity:.7}}

.alu-account-consult__typing-badge{color:var(--alu-accent,#b8860b)}
.alu-account-consult__pending-answer{border-left:4px solid var(--alu-accent,#b8860b)}
.alu-account-consult__typing-line{display:flex;align-items:center;gap:.6rem;color:var(--alu-text,#231235);font-style:italic}
.alu-account-consult__deadline{margin-top:.6rem!important;font-size:.9rem;color:var(--alu-text-muted,rgba(35,18,53,.72))}
.alu-account-consult__deadline strong{color:var(--alu-accent,#b8860b);font-variant-numeric:tabular-nums}

.alu-account-consult__attachments{display:grid;gap:.85rem}
.alu-account-consult__image-preview{margin:0;border:1px solid var(--alu-border,rgba(46,29,84,.14));border-radius:14px;background:var(--alu-surface-soft,rgba(184,134,11,.05));padding:.7rem}
.alu-account-consult__image-preview img{display:block;width:100%;max-height:440px;object-fit:contain;border-radius:10px;background:rgba(255,255,255,.5)}
.alu-account-consult__image-preview figcaption{margin:.55rem 0 0;color:var(--alu-text-muted,rgba(35,18,53,.72));font-size:.9rem;line-height:1.35}
.alu-account-consult__attachment-button{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;width:max-content;max-width:100%;min-height:44px;border-radius:999px;padding:.72rem 1rem;background:var(--alu-grad-gold,linear-gradient(135deg,#fbbf24,#f59e0b));color:#20122f!important;text-decoration:none!important;font-weight:900;box-shadow:0 12px 24px rgba(184,134,11,.18)}
.alu-account-consult__attachment-button:hover{filter:saturate(1.05) brightness(1.02);transform:translateY(-1px)}
.alu-account-consult__attachment-icon{display:inline-grid;place-items:center;line-height:0}
.alu-account-consult__delete{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:34px;height:34px;border:none;border-radius:999px;background:#c0392b;color:#fff;cursor:pointer;box-shadow:0 8px 18px rgba(192,57,43,.28)}
.alu-account-consult__delete:hover{background:#a93226;transform:translateY(-1px)}
.alu-account-consult__delete:disabled{opacity:.65;cursor:not-allowed;transform:none}
@media(max-width:640px){.alu-account-consult__attachment-button{width:100%}.alu-account-consult__image-preview img{max-height:320px}}


.alu-account__section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin:0 0 1rem}
.alu-account__eyebrow{margin:0 0 .25rem;color:var(--alu-accent,#b8860b);font-size:.78rem;font-weight:900;text-transform:uppercase;letter-spacing:.14em}
.alu-account__badge{display:inline-grid;place-items:center;min-width:2.2rem;height:2.2rem;border-radius:999px;background:var(--alu-grad-gold,linear-gradient(135deg,#fbbf24,#f59e0b));color:var(--alu-text-on-gold,#2a1b4a);font-weight:950;box-shadow:0 10px 24px rgba(184,134,11,.18)}
.alu-account-dashboard{display:grid;gap:1rem}
.alu-account-welcome{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;padding:.1rem 0 .3rem}
.alu-account-welcome>div{min-width:0}
.alu-account-welcome__actions{flex:0 0 auto;display:flex;align-items:center;gap:.5rem}
.alu-account-welcome__logout{flex:0 0 auto}
.alu-account-welcome h2{margin:0 0 .15rem;font-size:clamp(1.65rem,7vw,2.4rem);line-height:1.05;color:var(--alu-text-strong,var(--alu-text,#1d1430))}
.alu-account-welcome p{margin:0;color:var(--alu-text-muted,rgba(35,18,53,.66));font-size:.92rem}
.alu-account-welcome__logout{display:inline-flex;align-items:center;justify-content:center;min-height:40px;border:1px solid var(--alu-border,rgba(46,29,84,.2));border-radius:999px;padding:.55rem .85rem;text-decoration:none!important;color:var(--alu-text,#231235)!important;font-weight:900;background:var(--alu-surface-soft,rgba(184,134,11,.05))}
.alu-account-welcome__settings{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;background:var(--alu-grad-gold,linear-gradient(135deg,#fbbf24,#f59e0b));color:var(--alu-text-on-gold,#2a1b4a)!important;text-decoration:none!important}
.alu-account-welcome__settings:hover{filter:brightness(1.05)}
.alu-account-welcome__settings .icon{width:1.15em;height:1.15em}
.alu-account-ticker{position:relative;display:flex;align-items:center;gap:.6rem;width:100%;min-height:44px;border:1px solid color-mix(in srgb,var(--alu-accent,#b8860b) 42%,var(--alu-border,rgba(46,29,84,.18)));border-radius:999px;background:radial-gradient(circle at 92% 0%,rgba(251,191,36,.22),transparent 60%),linear-gradient(135deg,rgba(251,191,36,.16),var(--alu-surface,#fff));box-shadow:0 10px 26px rgba(184,134,11,.13);padding:.5rem .4rem .5rem 1.1rem;text-decoration:none!important;color:var(--alu-text-strong,var(--alu-text,#1d1430))!important;overflow:hidden;font:inherit;font-weight:800;text-align:left;cursor:pointer}
button.alu-account-ticker{border-style:solid}
.alu-account-ticker__viewport{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.alu-account-ticker__track{display:inline-flex;gap:3rem;white-space:nowrap}
.alu-account-ticker__track.is-scrolling{animation:alu-ticker-scroll var(--ticker-duration,16s) linear infinite}
.alu-account-ticker__text{font-size:.96rem;line-height:1.2}
.alu-account-ticker__arrow{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;border-radius:999px;background:var(--alu-grad-gold,linear-gradient(135deg,#fbbf24,#f59e0b));color:var(--alu-text-on-gold,#2a1b4a);font-style:normal;font-weight:950}
@keyframes alu-ticker-scroll{from{transform:translateX(0)}to{transform:translateX(var(--ticker-distance,-300px))}}
@media(prefers-reduced-motion:reduce){.alu-account-ticker__track.is-scrolling{animation:none}}
.alu-account-horoscope{position:relative;margin:.85rem 0 0;padding:1.6rem .9rem .8rem;border-radius:18px;text-align:center;background-image:linear-gradient(rgba(255,251,240,.87),rgba(250,242,225,.92)),url('/immagini/zodiac.jpg');background-size:cover;background-position:center;color:var(--alu-text-on-light,#2e1d4a);border:1px solid var(--alu-border,rgba(46,29,84,.18));box-shadow:0 10px 26px rgba(184,134,11,.13)}
.alu-account-horoscope__pill{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;border-radius:999px;padding:.32rem .8rem;font-size:.68rem;font-weight:900;letter-spacing:.03em;text-transform:uppercase;background:var(--alu-grad-gold,linear-gradient(135deg,#fbbf24,#f59e0b));color:var(--alu-text-on-gold,#2a1b4a);white-space:nowrap;box-shadow:0 6px 14px rgba(184,134,11,.35)}
.alu-account-horoscope__empty,.alu-account-horoscope__filled{display:none}
.alu-account-horoscope.is-empty .alu-account-horoscope__empty,.alu-account-horoscope.is-set .alu-account-horoscope__filled{display:block}
.alu-account-horoscope__empty p{margin:.35rem 0 0;font-size:.83rem;line-height:1.5}
.alu-account-horoscope__empty a{font-weight:800;text-decoration:underline}
.alu-account-horoscope__sign{margin:.4rem 0 .3rem;font-size:1.02rem;font-weight:850;letter-spacing:.02em}
.alu-account-horoscope__text{margin:0;font-size:.92rem;line-height:1.55}
/* Sfondo (immagini/zodiac.jpg) sempre presente, ma overlay chiaro/scuro e
   testo invertiti in base al tema — non piu' fisso scuro: su tema chiaro
   risultava troppo scuro/stonato rispetto al resto della pagina, segnalato
   dall'utente su staging (390px). Niente overflow:hidden sul box: il
   border-radius clippa gia' da solo lo sfondo (spec CSS), e serve lasciare
   la pill libera di sporgere sul bordo superiore senza essere tagliata. */
html:is(.theme-dark,[data-bs-theme='dark']) .alu-account-horoscope{background-image:linear-gradient(rgba(20,10,40,.74),rgba(12,8,26,.84)),url('/immagini/zodiac.jpg');color:var(--alu-text-on-dark,#f5f3ff)}
/* Il link eredita altrove il colore accento da .alu-account a, ma quella
   regola (0,1,1) non sopravvive al reset dark-mode sopra citato (0,1,2):
   riasserito qui con la stessa compound-specificity, valore invariato
   (var(--alu-accent) risolve gia' da solo il lilla di tema scuro). */
html:is(.theme-dark,[data-bs-theme='dark']) .alu-account-horoscope__empty a{color:var(--alu-accent,#d0b5ff)}
@media(max-width:640px){.alu-account-horoscope{padding:1.4rem .75rem .7rem}.alu-account-horoscope__text{font-size:.88rem}.alu-account-horoscope__empty p{font-size:.76rem}}
.alu-account-overview{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.9rem;margin:1rem 0 1.25rem}
.alu-account-overview__tile{position:relative;display:grid;gap:.25rem;min-height:122px;border:1px solid var(--alu-border,rgba(46,29,84,.14));border-radius:16px;background:linear-gradient(145deg,var(--alu-surface-soft,rgba(184,134,11,.06)),var(--alu-surface,#fff));padding:1rem;text-decoration:none!important;color:var(--alu-text,#231235)!important;overflow:hidden;text-align:center}
.alu-account-overview__title{position:relative;display:block;min-height:1.3em;font-weight:900}
.alu-account-overview__title em{position:absolute;left:0;top:0;font-style:normal;line-height:1.3}
.alu-account-overview__title b{position:absolute;left:50%;top:0;transform:translateX(-50%);white-space:nowrap;font-weight:900}
.alu-account-overview__tile strong{font-size:clamp(1.8rem,7vw,2.7rem);line-height:1;color:var(--alu-accent,#b8860b)}
.alu-account-overview__tile small{color:var(--alu-text-muted,rgba(35,18,53,.72));line-height:1.35}.alu-account-overview__tile:focus-visible,.alu-account-entitlement:focus-visible{outline:2px solid var(--alu-accent,#b8860b);outline-offset:3px}
.alu-account-overview__progress{display:block;height:.52rem;border-radius:999px;background:rgba(127,116,92,.18);overflow:hidden;margin-top:.35rem}
.alu-account-overview__progress b{display:block;width:var(--progress,0%);height:100%;border-radius:inherit;background:var(--alu-grad-gold,linear-gradient(135deg,#fbbf24,#f59e0b))}
.alu-account-points__value{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:var(--alu-grad-gold,linear-gradient(135deg,#fbbf24,#f59e0b));color:var(--alu-text-on-gold,#2a1b4a);padding:.65rem 1rem;font-size:1.35rem;box-shadow:0 14px 30px rgba(184,134,11,.16)}
.alu-account-progress{border:1px solid var(--alu-border,rgba(46,29,84,.14));border-radius:16px;background:var(--alu-surface-soft,rgba(184,134,11,.06));padding:1rem;margin:1rem 0}.alu-account-progress__bar{height:.8rem;border-radius:999px;background:rgba(127,116,92,.18);overflow:hidden}.alu-account-progress__bar span{display:block;width:var(--progress,0%);height:100%;border-radius:inherit;background:var(--alu-grad-gold,linear-gradient(135deg,#fbbf24,#f59e0b));transition:width .35s ease}.alu-account-progress p{margin:.65rem 0 0;color:var(--alu-text-muted,rgba(35,18,53,.72));line-height:1.45}
.alu-account-service-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:.95rem;margin:1rem 0}.alu-account-service-card{display:grid;grid-template-columns:86px minmax(0,1fr);gap:.9rem;align-items:center;border:1px solid var(--alu-border,rgba(46,29,84,.14));border-radius:16px;background:var(--alu-surface-soft,#fffaf2);padding:.8rem}.alu-account-service-card img{width:86px;aspect-ratio:1;border-radius:13px;object-fit:cover;background:rgba(255,255,255,.5)}.alu-account-service-card h3{margin:0 0 .25rem;font-size:1rem}.alu-account-service-card p{margin:0 0 .65rem;color:var(--alu-text-muted,rgba(35,18,53,.72));line-height:1.35}.alu-account-service-card__missing{display:inline-flex;border:1px solid var(--alu-border,rgba(46,29,84,.18));border-radius:999px;padding:.5rem .75rem;color:var(--alu-text-muted,rgba(35,18,53,.72));font-weight:850;font-size:.88rem}.alu-account-redeem{min-height:40px;padding:.62rem .9rem;font-size:.9rem}
.alu-account-modal{border:0;border-radius:18px;padding:0;width:min(360px,92vw);max-width:92vw;background:var(--alu-surface,#fff);box-shadow:0 24px 60px rgba(34,18,57,.28)}
.alu-account-modal::backdrop{background:rgba(20,10,35,.55)}
.alu-account-modal__panel{padding:2rem 1.5rem 1.6rem;text-align:center;display:grid;gap:.85rem;justify-items:center}
.alu-account-modal__icon{margin:0;font-size:2.5rem;line-height:1}
.alu-account-modal h2{margin:0;font-size:1.3rem;color:var(--alu-text-strong,var(--alu-text,#1d1430))}
.alu-account-modal .alu-account__submit{width:100%;margin-top:.3rem}
.alu-account-modal__close{position:absolute;top:.6rem;right:.6rem;width:32px;height:32px;border:0;border-radius:999px;background:var(--alu-surface-soft,rgba(184,134,11,.08));color:var(--alu-text,#231235);font-size:1.3rem;line-height:1;cursor:pointer}
.alu-account-modal__close:hover{background:var(--alu-surface-soft,rgba(184,134,11,.16))}
.alu-account-entitlement-list{display:grid;gap:.8rem}.alu-account-entitlement{display:grid;grid-template-columns:82px minmax(0,1fr) auto;align-items:center;gap:.85rem;border:1px solid var(--alu-border,rgba(46,29,84,.14));border-radius:17px;background:var(--alu-surface-soft,#fffaf2);padding:.75rem;text-decoration:none!important;color:var(--alu-text,#231235)!important;box-shadow:0 12px 34px rgba(34,18,57,.06)}.alu-account-entitlement img{width:82px;aspect-ratio:1;border-radius:14px;object-fit:cover;background:rgba(255,255,255,.5)}.alu-account-entitlement__body{display:grid;gap:.35rem;min-width:0}.alu-account-entitlement__title{font-size:1rem;line-height:1.25}.alu-account-entitlement__reader{color:var(--alu-text-muted,rgba(35,18,53,.72));font-size:.9rem;font-style:italic}.alu-account-entitlement__pills{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin-top:.1rem}.alu-account-entitlement__source,.alu-account-entitlement__expiry{display:inline-flex;align-items:center;border-radius:999px;padding:.28rem .58rem;font-size:.76rem;font-weight:900}.alu-account-entitlement__source{background:rgba(117,117,117,.14);color:var(--alu-text,#231235)}.alu-account-entitlement__source.is-paid{background:rgba(217,119,6,.14);color:#b45309}.alu-account-entitlement__source.is-free{background:rgba(32,114,69,.14);color:#207245}.alu-account-entitlement__source.is-promo{background:rgba(217,119,6,.14);color:#b45309}.alu-account-entitlement__source.is-coupon{background:rgba(184,134,11,.16);color:#8a6508}.alu-account-entitlement__source.is-loyalty_redeem{background:rgba(32,114,69,.14);color:#207245}.alu-account-entitlement__expiry:empty{display:none}.alu-account-entitlement__expiry.is-neutral{background:rgba(117,117,117,.14);color:#4b5563}.alu-account-entitlement__expiry.is-warn{background:rgba(202,138,4,.16);color:#a16207}.alu-account-entitlement__expiry.is-alert{background:rgba(217,119,6,.16);color:#b45309}.alu-account-entitlement__expiry.is-danger{background:rgba(220,38,38,.14);color:#b91c1c}.alu-account-entitlement__cta{display:inline-flex;align-items:center;justify-content:center;min-height:40px;border-radius:999px;background:var(--alu-grad-gold,linear-gradient(135deg,#fbbf24,#f59e0b));color:var(--alu-text-on-gold,#2a1b4a);font-weight:950;padding:.55rem .85rem}
/* Vantaggi registrazione — card "registrati"/"accedi" per utenti non
   iscritti (VIEW/customer_account.php). Riusa i token e il pattern a card
   gia' esistenti in questo file, nessun colore nuovo. */
.alu-account-hero .alu-account__hint{margin-bottom:1rem}
/* CTA immediata sopra la piega su mobile: la card vantaggi (4 tile) spinge
   il form fuori dal primo schermo, quindi qui serve un pulsante visibile
   subito che salti al form (#formiscrizione, vedi customer-account.js
   bindAnchorScroll). Larghezza piena solo qui: fuori da un .alu-account__form
   (display:grid) il pulsante di default e' inline-flex e si stringe al
   contenuto — va forzato esplicitamente. */
.alu-account-hero__cta{display:flex;width:100%;margin:0 0 1.6rem}
.alu-account-benefits{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.9rem}
.alu-account-benefits__item{display:grid;gap:.4rem;align-content:start;border:1px solid var(--alu-border,rgba(46,29,84,.14));border-radius:16px;background:linear-gradient(145deg,var(--alu-surface-soft,rgba(184,134,11,.06)),var(--alu-surface,#fff));padding:1rem}
.alu-account-benefits__icon{font-size:1.6rem;line-height:1}
.alu-account-benefits__item h3{margin:0;font-size:1rem;line-height:1.3;color:var(--alu-text-strong,var(--alu-text,#1d1430))}
.alu-account-benefits__item p{margin:0;color:var(--alu-text-muted,rgba(35,18,53,.72));line-height:1.5;font-size:.92rem}
/* ACCOUNT.COPY.SIGNUP.1 (2026-08-18): su "accedi" i vantaggi erano
   ripetuti due volte (hint prosa + card nudge sotto il form, rimossa).
   Un solo minicard compatto, righe di chip invece di una card intera con
   eyebrow/h2/hint/bottone: pochi px in piu' prima del form, non un'intera
   sezione. */
.alu-account__hint--tight{margin-bottom:.6rem}
.alu-account-minicard{display:flex;flex-wrap:wrap;gap:.45rem;list-style:none;margin:0 0 1.1rem;padding:0}
.alu-account-minicard__item{display:inline-flex;align-items:center;gap:.32rem;border:1px solid var(--alu-border,rgba(46,29,84,.16));border-radius:999px;background:var(--alu-surface-soft,rgba(184,134,11,.06));padding:.38rem .7rem;font-size:.8rem;font-weight:800;line-height:1.2;color:var(--alu-text,#231235);white-space:nowrap}

/* Badge fonte: i colori sopra sono tarati per sfondi chiari. Senza queste
   regole, in dark mode il testo (verde/viola/oro/rosa scuri) diventava
   quasi illeggibile sullo sfondo scuro della card (segnalato dall'utente su
   staging). Stessa convenzione di selettore dark-mode del resto del sito
   (css/sub/dark.css): html:is(.theme-dark,[data-bs-theme='dark']). */
html:is(.theme-dark,[data-bs-theme='dark']) .alu-account-entitlement__source.is-paid{background:rgba(251,191,36,.22);color:#fcd34d}
html:is(.theme-dark,[data-bs-theme='dark']) .alu-account-entitlement__source.is-free{background:rgba(52,211,153,.2);color:#6ee7b0}
html:is(.theme-dark,[data-bs-theme='dark']) .alu-account-entitlement__source.is-promo{background:rgba(251,191,36,.22);color:#fcd34d}
html:is(.theme-dark,[data-bs-theme='dark']) .alu-account-entitlement__source.is-coupon{background:rgba(251,191,36,.22);color:#fde68a}
html:is(.theme-dark,[data-bs-theme='dark']) .alu-account-entitlement__source.is-loyalty_redeem{background:rgba(52,211,153,.2);color:#6ee7b0}
html:is(.theme-dark,[data-bs-theme='dark']) .alu-account-entitlement__expiry.is-neutral{background:rgba(148,163,184,.22);color:#cbd5e1}
html:is(.theme-dark,[data-bs-theme='dark']) .alu-account-entitlement__expiry.is-warn{background:rgba(250,204,21,.22);color:#fde047}
html:is(.theme-dark,[data-bs-theme='dark']) .alu-account-entitlement__expiry.is-alert{background:rgba(251,191,36,.22);color:#fcd34d}
html:is(.theme-dark,[data-bs-theme='dark']) .alu-account-entitlement__expiry.is-danger{background:rgba(248,113,113,.22);color:#fca5a5}
/* Stessa correzione per gli altri due punti della pagina con colori di stato
   fissi (verde/oro/viola/rosso scuri, pensati solo per sfondo chiaro):
   messaggi di esito form e badge di stato "I miei consulti". */
html:is(.theme-dark,[data-bs-theme='dark']) .alu-account__msg.is-ok,
html:is(.theme-dark,[data-bs-theme='dark']) .alu-account__card.is-ok p{color:#6ee7b0}
html:is(.theme-dark,[data-bs-theme='dark']) .alu-account__msg.is-error,
html:is(.theme-dark,[data-bs-theme='dark']) .alu-account__card.is-error p{color:#fca5a5}
html:is(.theme-dark,[data-bs-theme='dark']) .alu-account-consult__status.is-risposto{background:rgba(52,211,153,.2);color:#6ee7b0}
html:is(.theme-dark,[data-bs-theme='dark']) .alu-account-consult__status.is-ricevuto{background:rgba(120,90,20,.4);color:#ffe9b3}
html:is(.theme-dark,[data-bs-theme='dark']) .alu-account-consult__status.is-in_lavorazione{background:rgba(167,139,250,.22);color:#d8c9ff}
/* Pulsanti/badge a sfondo oro: la regola generale del sito
   html:is(.theme-dark,...) body * { color: inherit } (css/sub/dark.css) ha
   specificita' piu' alta di una singola classe (html+body contano come
   selettori elemento anche se il terzo e' *), quindi in dark mode forzava
   "inherit" (quasi bianco) su testo che deve restare sempre scuro perche' lo
   sfondo oro non cambia con il tema — risultato: pulsanti "Usa ora"/
   "Utilizza"/badge conteggio illeggibili, segnalato dall'utente su
   staging/iPhone. Fix: riasserire lo stesso colore con specificita' pari
   (classe dentro allo stesso :is() di tema), non un colore diverso. */
html:is(.theme-dark,[data-bs-theme='dark']) .alu-account__submit,
html:is(.theme-dark,[data-bs-theme='dark']) .alu-account__button:not(.is-ghost),
html:is(.theme-dark,[data-bs-theme='dark']) .alu-account__badge,
html:is(.theme-dark,[data-bs-theme='dark']) .alu-account-ticker__arrow,
html:is(.theme-dark,[data-bs-theme='dark']) .alu-account-history__icon,
html:is(.theme-dark,[data-bs-theme='dark']) .alu-account-welcome__settings,
html:is(.theme-dark,[data-bs-theme='dark']) .alu-account-points__value,
html:is(.theme-dark,[data-bs-theme='dark']) .alu-account-entitlement__cta,
html:is(.theme-dark,[data-bs-theme='dark']) .alu-account-horoscope__pill{color:var(--alu-text-on-gold,#2a1b4a)}
@media(max-width:640px){.alu-account__section-head{align-items:flex-start}.alu-account-overview{grid-template-columns:1fr 1fr;gap:.6rem;margin:.1rem 0 .6rem}.alu-account-overview__tile{min-height:104px;padding:.75rem}.alu-account-overview__tile span{display:block;font-size:.86rem;line-height:1.2}.alu-account-overview__tile strong{font-size:clamp(1.5rem,9vw,2rem)}.alu-account-entitlement{grid-template-columns:70px minmax(0,1fr);align-items:start}.alu-account-entitlement img{width:70px}.alu-account-entitlement__cta{grid-column:1 / -1;width:100%}.alu-account-service-card{grid-template-columns:72px minmax(0,1fr)}.alu-account-service-card img{width:72px}.alu-account-points__value{font-size:1.05rem;padding:.55rem .75rem}}
/* REFERRAL.1 — sezione inviti e richiamo in dashboard.
   Nota di specificita': le regole sul pulsante WhatsApp usano due classi
   (.alu-account__button.alu-account-referral__whatsapp, 0,2,0) invece di
   affidarsi all'ordine nel file, cosi' restano valide anche se un domani
   .alu-account__button venisse ridefinito piu' in basso. */
.alu-account-referral__lead{font-size:1.02rem;line-height:1.6;margin:.2rem 0 1.1rem;color:var(--alu-text,#1d1430)}
.alu-account-referral__link{display:flex;gap:.6rem;align-items:stretch;flex-wrap:wrap;margin-bottom:.5rem}
.alu-account-referral__link input{flex:1 1 15rem;min-width:0;min-height:48px;padding:.7rem .9rem;border:1px solid var(--alu-border,rgba(46,29,84,.18));border-radius:12px;background:var(--alu-surface-muted,rgba(46,29,84,.04));color:var(--alu-text,#1d1430);font:inherit;font-weight:700;text-overflow:ellipsis}
.alu-account-referral__link .alu-account__submit{flex:0 0 auto}
.alu-account__button.alu-account-referral__whatsapp{background:#25d366;color:#08301b;width:100%;margin:.35rem 0 1rem}
.alu-account-referral__status{margin:.2rem 0 1rem;padding:.7rem .9rem;border-radius:12px;background:color-mix(in srgb,var(--alu-accent,#b8860b) 10%,transparent);color:var(--alu-text,#1d1430);line-height:1.55}
.alu-account-referral-teaser{display:flex;align-items:center;gap:.8rem;width:100%;margin:.1rem 0 .9rem;padding:.85rem 1rem;border:1px solid color-mix(in srgb,var(--alu-accent,#b8860b) 42%,var(--alu-border,rgba(46,29,84,.18)));border-radius:16px;background:linear-gradient(135deg,rgba(251,191,36,.16),var(--alu-surface,#fff));box-shadow:0 10px 26px rgba(184,134,11,.13);text-decoration:none!important;color:var(--alu-text-strong,var(--alu-text,#1d1430))!important}
.alu-account-referral-teaser__icon{flex:0 0 auto;font-size:1.5rem;line-height:1}
.alu-account-referral-teaser__text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:.15rem}
.alu-account-referral-teaser__text b{font-weight:850;line-height:1.25}
.alu-account-referral-teaser__text small{font-size:.86rem;line-height:1.4;color:var(--alu-text-muted,rgba(35,18,53,.76))}
.alu-account-referral-teaser__arrow{flex:0 0 auto;font-style:normal;font-weight:850}
html:is(.theme-dark,[data-bs-theme='dark']) .alu-account__button.alu-account-referral__whatsapp{color:#08301b}
html:is(.theme-dark,[data-bs-theme='dark']) .alu-account-referral-teaser__text small{color:var(--alu-text-muted,rgba(238,230,255,.72))}
@media(max-width:640px){.alu-account-referral__link .alu-account__submit{width:100%}.alu-account-referral__lead{font-size:.98rem}}
.alu-account-referral .alu-account__msg:empty{display:none;margin:0}
/* PAY.VAULT.1 (2026-10-08): carte salvate */
.alu-account-cards__list{list-style:none;margin:0 0 .9rem;padding:0;display:grid;gap:.6rem}
.alu-account-cards__item{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .9rem;padding:.75rem .9rem;border:1px solid rgba(124,92,214,.25);border-radius:14px}
.alu-account-cards__name{font-weight:800;font-variant-numeric:tabular-nums}
.alu-account-cards__exp{opacity:.75;font-size:.92rem}
.alu-account-cards__remove{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:.25rem}
.alu-account__submit--ghost{background:transparent;border:1px solid currentColor;min-height:38px;padding:.45rem .9rem;font-weight:700;color:inherit}
.alu-account-cards__info summary{cursor:pointer;font-weight:700}
.alu-account-cards__info p{margin:.55rem 0 0;line-height:1.55}

/* Source: consulto-quick.css */
/* ─────────────────────────────────────────────────────────────────────────
   consulto-quick — form "scrivi la domanda e paga" (CONSULTO.QUICK.1)

   Usato inline sulla landing e dentro il <dialog> del CTA riusabile: le
   regole sono le stesse, cambia solo il contenitore. Niente selettori legati
   alla landing, altrimenti il componente funzionerebbe solo li'.

   Solo token --alu-* (design-system §2.0). I token sono ridefiniti per il
   tema scuro in fondo al file, mai i singoli colori sui componenti: cosi'
   ogni elemento resta coerente con la superficie su cui sta.
   ───────────────────────────────────────────────────────────────────────── */

.cq {
  --cq-surface: var(--alu-surface, #fff);
  --cq-surface-2: var(--alu-surface-section, rgba(124, 92, 196, 0.06));
  --cq-border: var(--alu-border, rgba(46, 29, 84, 0.16));
  --cq-border-strong: var(--alu-border-strong, rgba(46, 29, 84, 0.34));
  --cq-text: var(--alu-text, #231235);
  --cq-muted: var(--alu-text-muted, #4b3d63);
  --cq-accent: var(--alu-accent-strong, #4e2786);
  --cq-danger: var(--alu-danger, #b3261e);
  --cq-radius: 14px;

  display: block;
  width: 100%;
  text-align: left;
  color: var(--cq-text);
}

/* ── Avviso "nessuno online" ─────────────────────────────────────────── */

.cq__notice {
  margin: 0;
  padding: 0.9rem 1rem;
  background: var(--cq-surface-2);
  border: 1px solid var(--cq-border);
  border-radius: var(--cq-radius);
  font-size: clamp(0.92rem, 2.4vw, 1rem);
  line-height: 1.55;
  color: var(--cq-text);
  text-align: center;
}

/* E' un <button> perche' apre un pannello, non naviga. Va pero' fatto
   sembrare un'azione testuale: un pulsante pieno qui competerebbe con quello
   di acquisto che compare subito sotto una volta aperto il form. */
.cq__notice-cta {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  color: var(--cq-accent);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
}

.cq__notice-cta:hover { text-decoration-thickness: 2px; }

.cq__notice-cta:focus-visible {
  outline: 3px solid var(--alu-gold-a45, rgba(251, 191, 36, 0.45));
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Corpo del form ──────────────────────────────────────────────────── */

.cq__body {
  margin-top: 0.9rem;
  padding: clamp(1rem, 3.5vw, 1.4rem);
  background: var(--cq-surface);
  border: 1px solid var(--cq-border);
  border-radius: 18px;
  box-shadow: var(--alu-shadow-1, 0 4px 12px rgba(20, 12, 40, 0.10));
}

.cq--fallback .cq__body { margin-top: 0.75rem; }

.cq__title {
  margin: 0 0 1rem;
  font-size: clamp(1.05rem, 3vw, 1.25rem);
  font-weight: 800;
  line-height: 1.25;
  color: var(--cq-text);
}

/* Il gap sul contenitore invece dei margini sui figli: i margini fra campi
   collassano in modo diverso a seconda di quali elementi opzionali (hint,
   errore) sono presenti, e la spaziatura diventa irregolare. */
.cq__form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cq__field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.cq__label {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--cq-text);
  padding: 0;
}

/* La stessa classe sta su <label> e su <legend>, ma <legend> parte da default
   molto diversi: dentro un fieldset in flex si restringe al contenuto e
   raccoglie bordo e fondo da una regola globale del progetto. Misurato: la
   legend usciva larga 118px, centrata, con bordo 1px e fondo bianco, mentre le
   label sorelle erano larghe 277 e piatte. Qui la si riporta a una label
   normale: senza questo blocco "Scegli il cartomante" sembra un elemento di un
   altro form. */
legend.cq__label {
  width: 100%;
  max-width: 100%;
  float: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  line-height: inherit;
}

.cq__hint {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--cq-muted);
}

.cq__input,
.cq__textarea {
  width: 100%;
  /* 16px pieni: sotto questa soglia iOS zooma al focus e sposta il layout. */
  font-size: 16px;
  font-family: inherit;
  line-height: 1.45;
  color: var(--cq-text);
  background: var(--cq-surface);
  border: 1.5px solid var(--cq-border-strong);
  border-radius: 10px;
  padding: 0.7rem 0.8rem;
  min-height: 48px;
}

.cq__textarea {
  min-height: 130px;
  resize: vertical;
}

.cq__input:focus-visible,
.cq__textarea:focus-visible {
  outline: 3px solid var(--alu-gold-a45, rgba(251, 191, 36, 0.45));
  outline-offset: 2px;
  border-color: var(--cq-accent);
}

.cq__counter {
  margin: 0;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  color: var(--cq-muted);
  text-align: right;
}

.cq__counter.is-over {
  color: var(--cq-danger);
  font-weight: 700;
}

/* ── Scelta del cartomante ───────────────────────────────────────────── */

/* Griglia a colonne fluide invece di media query: il componente vive sia a
   tutta larghezza sulla landing sia dentro un modal stretto, e non puo'
   dipendere dalla larghezza della finestra. */
.cq__operators {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 0.6rem;
  max-height: 268px;
  overflow-y: auto;
  padding: 0.15rem;
}

.cq__op { margin: 0; cursor: pointer; }

/* Il radio nativo resta nel DOM e resta focusabile: nasconderlo con
   display:none lo toglierebbe alla navigazione da tastiera. */
.cq__op-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.cq__op-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  height: 100%;
  padding: 0.6rem 0.4rem;
  background: var(--cq-surface-2);
  border: 2px solid transparent;
  border-radius: 12px;
  text-align: center;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.cq__op-img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}

.cq__op-name {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--cq-text);
  line-height: 1.2;
}

.cq__op-sign {
  font-size: 0.74rem;
  color: var(--cq-muted);
  line-height: 1.2;
}

.cq__op-input:checked + .cq__op-card {
  border-color: var(--cq-accent);
  background: var(--alu-gold-a18, rgba(251, 191, 36, 0.16));
}

.cq__op-input:focus-visible + .cq__op-card {
  outline: 3px solid var(--alu-gold-a45, rgba(251, 191, 36, 0.45));
  outline-offset: 2px;
}

.cq__empty {
  margin: 0;
  font-size: 0.9rem;
  color: var(--cq-muted);
}

/* ── Azione ──────────────────────────────────────────────────────────── */

.cq__submit {
  width: 100%;
  min-height: 54px;
  padding: 0.85rem 1.1rem;
  border: 0;
  border-radius: var(--alu-radius-pill, 999px);
  background: var(--alu-grad-gold, linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%));
  color: var(--alu-text-on-gold, #2a1b4a);
  font-size: clamp(0.95rem, 2.6vw, 1.05rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.25;
  cursor: pointer;
  box-shadow: var(--alu-shadow-1, 0 4px 12px rgba(20, 12, 40, 0.18));
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.cq__submit:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--alu-glow-gold-soft, 0 6px 18px rgba(251, 191, 36, 0.38));
}

.cq__submit:disabled {
  opacity: 0.65;
  cursor: progress;
  transform: none;
}

.cq__submit:focus-visible {
  outline: 3px solid var(--alu-gold-a45, rgba(251, 191, 36, 0.45));
  outline-offset: 3px;
}

.cq__promise {
  margin: 0;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--cq-text);
}

.cq__legal {
  margin: 0;
  text-align: center;
  font-size: 0.8rem;
  color: var(--cq-muted);
}

.cq__error {
  margin: 0;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--cq-danger);
}

.cq__error--form {
  padding: 0.6rem 0.75rem;
  background: var(--alu-danger-soft, rgba(179, 38, 30, 0.08));
  border-radius: 10px;
}

/* ── CTA + modal riusabili ───────────────────────────────────────────── */

.cq-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.75rem 1.3rem;
  border: 0;
  border-radius: var(--alu-radius-pill, 999px);
  background: var(--alu-grad-gold, linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%));
  color: var(--alu-text-on-gold, #2a1b4a);
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: var(--alu-shadow-1, 0 4px 12px rgba(20, 12, 40, 0.18));
}

/* CTA.COPPIA.1 — variante a piena larghezza per la card a offerta singola
   negli articoli. Sta qui e non in `conversion-funnel.css` perche' quel file
   viene PRIMA nel manifest: la `padding` di `.cq-cta` avrebbe vinto sulla
   `padding-inline` del modificatore, a parita' di specificita'. */
.cq-cta--wide {
  width: 100%;
  text-align: center;
  line-height: 1.25;
}

@media (min-width: 600px) {
  .cq-cta--wide {
    width: auto;
    min-width: 22rem;
    padding-inline: 2rem;
  }
}

.cq-cta:focus-visible {
  outline: 3px solid var(--alu-gold-a45, rgba(251, 191, 36, 0.45));
  outline-offset: 3px;
}

.cq-modal {
  width: min(560px, calc(100vw - 1.5rem));
  max-height: min(88vh, 900px);
  padding: 0;
  border: 1px solid var(--alu-border, rgba(46, 29, 84, 0.16));
  border-radius: 18px;
  background: var(--alu-surface, #fff);
  color: var(--alu-text, #231235);
  overflow: hidden;
}

.cq-modal::backdrop {
  background: rgba(12, 8, 26, 0.62);
}

.cq-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--alu-border, rgba(46, 29, 84, 0.16));
}

.cq-modal__title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 800;
}

.cq-modal__close {
  min-width: 44px;
  min-height: 44px;
  border: 0;
  background: none;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--alu-text-muted, #4b3d63);
  cursor: pointer;
  border-radius: 10px;
}

.cq-modal__close:focus-visible {
  outline: 3px solid var(--alu-gold-a45, rgba(251, 191, 36, 0.45));
  outline-offset: 2px;
}

/* Solo il corpo scorre: l'intestazione con la chiusura resta sempre
   raggiungibile anche con la tastiera aperta su mobile. */
.cq-modal__body {
  max-height: calc(88vh - 64px);
  overflow-y: auto;
  padding: 1rem;
}

.cq-modal .cq__body {
  margin-top: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: none;
}

@media (prefers-reduced-motion: reduce) {
  .cq__op-card,
  .cq__submit {
    transition: none;
  }
  .cq__submit:hover:not(:disabled) { transform: none; }
}

/* ── Tema scuro ──────────────────────────────────────────────────────────
   Si ridefiniscono i TOKEN del componente, non i colori dei singoli
   elementi: ogni parte resta cosi' coerente con la superficie che ha sotto.
   Il selettore ripete `.cq` due volte sul pulsante-link per superare la
   regola broad `html:is(...) a` di dark.css (0,2,1), che altrimenti
   porterebbe la lavanda dei link su una superficie non verificata. */
html:is(.theme-dark, [data-bs-theme='dark']) .cq {
  --cq-surface: #191430;
  --cq-surface-2: rgba(124, 92, 196, 0.16);
  --cq-border: rgba(208, 181, 255, 0.24);
  --cq-border-strong: rgba(208, 181, 255, 0.42);
  --cq-text: #f5f3ff;
  --cq-muted: rgba(245, 243, 255, 0.74);
  --cq-accent: #d0b5ff;
  --cq-danger: #ff9b93;
}

html:is(.theme-dark, [data-bs-theme='dark']) .cq .cq__notice-cta {
  color: var(--cq-accent);
}

html:is(.theme-dark, [data-bs-theme='dark']) .cq-modal {
  background: #191430;
  color: #f5f3ff;
  border-color: rgba(208, 181, 255, 0.24);
}

html:is(.theme-dark, [data-bs-theme='dark']) .cq-modal__head {
  border-bottom-color: rgba(208, 181, 255, 0.24);
}

html:is(.theme-dark, [data-bs-theme='dark']) .cq-modal__close {
  color: rgba(245, 243, 255, 0.74);
}

/* ── Tema scuro: recupero dei colori propri ──────────────────────────────
   `dark.css` applica `html:is(.theme-dark,…) body * { color: inherit }` con
   specificity 0,2,2. Batte qualunque `.classe` (0,1,0), quindi in tema scuro
   TUTTI i colori dichiarati sopra vengono sostituiti dal colore di testo
   della pagina. Per la maggior parte del testo va benissimo — e' chiaro su
   fondo scuro — ma su tre cose no:

     - il pulsante d'acquisto ha il fondo ORO: ereditando il testo chiaro
       diventava bianco su oro, contrasto ~1,5 (misurato);
     - gli errori perderebbero il rosso e sarebbero indistinguibili dal
       testo normale, cioe' non sarebbero piu' errori;
     - il contatore oltre il limite idem.

   Il file e' caricato PRIMA di dark.css nel manifest, quindi a parita' di
   specificity vincerebbe dark.css: serve arrivare a 0,3,x. La classe
   ripetuta su `.cq-cta` e `.cq-modal__close` serve solo a questo, non e' un
   refuso. */
html:is(.theme-dark, [data-bs-theme='dark']) .cq .cq__submit,
html:is(.theme-dark, [data-bs-theme='dark']) .cq-cta.cq-cta {
  color: var(--alu-text-on-gold, #2a1b4a);
}

html:is(.theme-dark, [data-bs-theme='dark']) .cq .cq__error,
html:is(.theme-dark, [data-bs-theme='dark']) .cq .cq__counter.is-over {
  color: var(--cq-danger);
}

html:is(.theme-dark, [data-bs-theme='dark']) .cq .cq__hint,
html:is(.theme-dark, [data-bs-theme='dark']) .cq .cq__legal,
html:is(.theme-dark, [data-bs-theme='dark']) .cq .cq__op-sign,
html:is(.theme-dark, [data-bs-theme='dark']) .cq .cq__counter {
  color: var(--cq-muted);
}

html:is(.theme-dark, [data-bs-theme='dark']) .cq-modal__close.cq-modal__close {
  color: rgba(245, 243, 255, 0.74);
}

/* Source: alert.css */
/* ============================================================================
   Alert di esito (ALERT.REDESIGN.1, 2026-09-03)

   Usato da `HtmlElement::alert()` → `VIEW/TEMPLATES/alert.htm`, quindi da tutte
   le pagine che comunicano l'esito di un'azione: consulto gratuito, invio
   privato, download store, disiscrizione.

   COSA C'ERA PRIMA. Due `div.alert` Bootstrap annidati, con il titolo in
   `display-6` (2,5rem su telefono) e il corpo in `alert-dark`: un riquadro
   grigio dentro un altro riquadro grigio, spaziature enormi, e il tipo
   (`alert-critical`, `alert-success`) che in Bootstrap NON esiste — quindi
   nessun colore, nessuna gerarchia, nessun segnale di che cosa fosse successo.

   Mobile-first e compatto: su telefono l'intero blocco deve stare in una
   schermata, perche' chi legge un errore vuole sapere subito cosa fare.
   ========================================================================= */

.alu-alert {
    --alu-alert-accent: var(--alu-accent, #6b3aa0);
    --alu-alert-tint: rgba(107, 58, 160, 0.10);
    max-width: 42rem;
    margin: 1rem auto 1.5rem;
    padding: 1.1rem 1.05rem 1.25rem;
    border: 1px solid var(--alu-border, rgba(46, 29, 84, 0.16));
    border-radius: var(--alu-radius-xl, 20px);
    background: var(--alu-surface, #fff);
    box-shadow: var(--alu-card-shadow, 0 14px 34px rgba(18, 28, 60, 0.2));
    color: var(--alu-text, #2e1d4a);
    text-align: left;
}

/* Il tipo si vede da un segno, non da un riquadro colorato: il colore pieno
   su tutto il blocco rendeva illeggibile il testo in dark. */
.alu-alert__head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.55rem;
}

.alu-alert__icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 999px;
    background: var(--alu-alert-tint);
    color: var(--alu-alert-accent);
    font-size: 1.05rem;
    line-height: 1;
}

.alu-alert__title {
    margin: 0;
    font-size: clamp(1.15rem, 4.6vw, 1.5rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--alu-text, #2e1d4a);
    text-wrap: balance;
}

.alu-alert__body {
    font-size: clamp(0.95rem, 2.6vw, 1rem);
    line-height: 1.55;
    color: var(--alu-text-muted, rgba(24, 32, 51, 0.76));
}

/* Il contenuto arriva da chi chiama: si normalizzano solo i margini, cosi'
   un <p> in piu' non allarga il blocco di mezzo centimetro. */
.alu-alert__body > :first-child { margin-top: 0; }
.alu-alert__body > :last-child { margin-bottom: 0; }
.alu-alert__body p { margin: 0 0 0.6rem; }
.alu-alert__body ul { margin: 0 0 0.6rem; padding-left: 1.15rem; }
.alu-alert__body li + li { margin-top: 0.3rem; }
.alu-alert__body strong { color: var(--alu-text, #2e1d4a); }

.alu-alert--success { --alu-alert-accent: #15803d; --alu-alert-tint: rgba(21, 128, 61, 0.12); }
.alu-alert--warning { --alu-alert-accent: #b45309; --alu-alert-tint: rgba(180, 83, 9, 0.12); }
.alu-alert--critical { --alu-alert-accent: #b91c1c; --alu-alert-tint: rgba(185, 28, 28, 0.12); }
.alu-alert--info { --alu-alert-accent: #1d4ed8; --alu-alert-tint: rgba(29, 78, 216, 0.12); }

/* In dark le tinte piatte sopra spariscono nel fondo: si alzano luminosita' e
   opacita' del solo pastiglione dell'icona, il testo resta sui token tema. */
html:is(.theme-dark, [data-bs-theme='dark']) .alu-alert--success { --alu-alert-accent: #4ade80; --alu-alert-tint: rgba(74, 222, 128, 0.16); }
html:is(.theme-dark, [data-bs-theme='dark']) .alu-alert--warning { --alu-alert-accent: #fbbf24; --alu-alert-tint: rgba(251, 191, 36, 0.18); }
html:is(.theme-dark, [data-bs-theme='dark']) .alu-alert--critical { --alu-alert-accent: #fca5a5; --alu-alert-tint: rgba(252, 165, 165, 0.16); }
html:is(.theme-dark, [data-bs-theme='dark']) .alu-alert--info { --alu-alert-accent: #93c5fd; --alu-alert-tint: rgba(147, 197, 253, 0.16); }

@media (min-width: 576px) {
    .alu-alert {
        padding: 1.35rem 1.5rem 1.5rem;
        margin-top: 1.5rem;
    }
}

/* ── Errori del consulto gratuito (FREE.GATE.COPY.1) ─────────────────────
   Il blocco vive dentro `.alu-alert__body`: qui si aggiungono solo il titolo
   di riga, l'elenco degli errori secondari e il riquadro dell'offerta. */
.alu-alert__lead {
    margin: 0 0 0.35rem;
    font-size: clamp(1rem, 3.2vw, 1.08rem);
    color: var(--alu-text, #2e1d4a);
}

.alu-alert__more {
    margin: 0.5rem 0 0;
    padding-left: 1.15rem;
    font-size: 0.92em;
}

/* L'alternativa a pagamento e' separata da una linea, non da un colore: deve
   leggersi come "in piu'", non come un secondo errore. */
.alu-alert__offer {
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--alu-border, rgba(46, 29, 84, 0.16));
}

.alu-alert__offer-title {
    margin: 0 0 0.3rem;
    font-weight: 800;
    font-size: clamp(1rem, 3.2vw, 1.1rem);
    color: var(--alu-text, #2e1d4a);
}

.alu-alert__offer-text {
    margin: 0 0 0.85rem;
    font-size: clamp(0.9rem, 2.5vw, 0.98rem);
    line-height: 1.5;
}

.alu-alert__offer-note {
    margin: 0.6rem 0 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--alu-text-muted, rgba(24, 32, 51, 0.76));
}

/* Il riquadro del consulto bloccato e' un'alternativa gratuita: stesso
   trattamento dell'offerta, senza il bordo che lo farebbe sembrare un
   secondo blocco. */
.consulto-gratis-blocked {
    margin-top: 1.1rem;
    padding: 0.95rem 1rem 1.05rem;
    border: 1px solid var(--alu-gold-a32, rgba(251, 191, 36, 0.32));
    border-radius: var(--alu-radius-lg, 14px);
    background: var(--alu-gold-a18, rgba(251, 191, 36, 0.18));
}

.consulto-gratis-blocked__lead {
    margin: 0 0 0.35rem;
    font-weight: 800;
    font-size: clamp(1rem, 3.2vw, 1.1rem);
    color: var(--alu-text, #2e1d4a);
}

.consulto-gratis-blocked__text {
    margin: 0 0 0.9rem;
    font-size: clamp(0.9rem, 2.5vw, 0.98rem);
    line-height: 1.5;
    color: var(--alu-text-muted, rgba(24, 32, 51, 0.76));
}

/* Il pulsante era `btn btn-primary`: blu Bootstrap, fuori da qualunque token
   del sito. Ora e' l'oro del design system, come ogni azione primaria. */
.consulto-gratis-blocked__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 46px;
    padding: 0.7rem 1.25rem;
    border: 0;
    border-radius: var(--alu-radius-pill, 999px);
    background: var(--alu-grad-gold, linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%));
    color: var(--alu-text-on-gold, #2a1b4a);
    font-weight: 800;
    text-decoration: none;
    box-shadow: var(--alu-shadow-1, 0 4px 12px rgba(20, 12, 40, 0.18));
}

.consulto-gratis-blocked__cta:hover,
.consulto-gratis-blocked__cta:focus {
    color: var(--alu-text-on-gold, #2a1b4a);
    text-decoration: none;
}

@media (min-width: 576px) {
    .consulto-gratis-blocked__cta { width: auto; min-width: 16rem; }
}

/* Il suggerimento del gate (es. «forse intendevi @gmail.com?») e' l'unica
   informazione che risolve il problema: si distingue dal testo, non si nasconde. */
.alu-alert__hint {
    margin: 0 0 0.6rem;
    padding: 0.5rem 0.7rem;
    border-left: 3px solid var(--alu-alert-accent);
    border-radius: 0 var(--alu-radius-sm, 8px) var(--alu-radius-sm, 8px) 0;
    background: var(--alu-alert-tint);
    font-size: 0.92em;
    color: var(--alu-text, #2e1d4a);
}

/* Source: top-banner.css */
/* TOPBANNER.2 (2026-10-13) — banner promozionale in cima al sito (VIEW/COMP/top-banner.php).
   Brand moment sottile (§3.0 design system): stesse superfici in light e dark, una sola riga su
   desktop, al massimo tre righe su telefono. Nel flusso del documento, PRIMA di #fixedHeader:
   non e' sticky, non copre la navbar e scorre via con la pagina. z-index di base: drawer, menu,
   modali, toast e loader (tutti fixed con z-index alti) gli passano sopra senza eccezioni.
   Chiusura: righe della griglia 1fr -> 0fr, nessun salto di layout brusco. */

/* Grassetto vero: il sito carica Assistant solo a peso 300 e Safari su iPhone non simula il grassetto dei font
   web, quindi <strong> e il pulsante uscivano sottili (segnalazione dell'utente 2026-10-13). Famiglia
   dedicata, file servito dal sito (11,6 KB, OFL), scaricato solo quando il banner usa il grassetto. */
@font-face {
  font-family: 'ALU Assistant Bold';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/css/fonts/assistant-latin-800.woff2') format('woff2');
  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;
}

.alu-topbanner {
  --tb-bold: 'ALU Assistant Bold', var(--bs-font-sans-serif, 'Assistant'), system-ui, sans-serif;
  --tb-bg: var(--alu-grad-gold);
  --tb-base: #f59e0b;
  --tb-text: var(--alu-text-on-gold);
  --tb-cta-bg: var(--alu-purple-deep);
  --tb-cta-text: #fff;
  --tb-close-hover: rgba(42, 27, 74, 0.12);
  --tb-ring: rgba(42, 27, 74, 0.6);
  --tb-shine: rgba(255, 255, 255, 0.45);
  position: relative;
  z-index: var(--alu-z-base);
  display: grid;
  grid-template-rows: 1fr;
  background: var(--tb-bg), var(--tb-base);
  color: var(--tb-text);
  isolation: isolate;
  overflow: hidden;
  transition: grid-template-rows var(--alu-dur-mid) var(--alu-ease-out), opacity var(--alu-dur-mid) var(--alu-ease-out);
}

.alu-topbanner--aurora {
  --tb-bg: var(--alu-grad-hero);
  --tb-base: #2e1d54;
  --tb-text: var(--alu-text-on-dark);
  --tb-cta-bg: var(--alu-grad-gold);
  --tb-cta-text: var(--alu-text-on-gold);
  --tb-close-hover: rgba(255, 255, 255, 0.14);
  --tb-ring: var(--alu-gold-a45);
  --tb-shine: rgba(253, 230, 138, 0.22);
}

.alu-topbanner--night {
  --tb-bg: var(--alu-grad-navbar);
  --tb-base: #111a40;
  --tb-text: var(--alu-text-on-dark);
  --tb-cta-bg: var(--alu-grad-gold);
  --tb-cta-text: var(--alu-text-on-gold);
  --tb-close-hover: rgba(255, 255, 255, 0.14);
  --tb-ring: var(--alu-gold-a45);
  --tb-shine: rgba(255, 255, 255, 0.16);
}

.alu-topbanner.is-closing {
  grid-template-rows: 0fr;
  opacity: 0;
}

.alu-topbanner__clip {
  min-height: 0;
  overflow: hidden;
}

.alu-topbanner__inner {
  display: flex;
  align-items: center;
  gap: var(--alu-space-1);
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--alu-space-1) max(var(--alu-space-1), env(safe-area-inset-right, 0px)) var(--alu-space-1) max(var(--alu-space-3), env(safe-area-inset-left, 0px));
  animation: alu-topbanner-in 480ms var(--alu-ease-out) both;
}

.alu-topbanner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 35%, var(--tb-shine) 50%, transparent 65%);
  transform: translateX(-100%);
  animation: alu-topbanner-shine 1.6s 0.6s var(--alu-ease-out) 1 both;
  pointer-events: none;
}

.alu-topbanner .alu-topbanner__link {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--alu-space-1) var(--alu-space-3);
  padding: var(--alu-space-1) var(--alu-space-1);
  border-radius: var(--alu-radius-md);
  color: var(--tb-text);
  text-decoration: none;
  text-align: center;
  font-size: clamp(0.86rem, 2.6vw, 0.98rem);
  line-height: 1.3;
  -webkit-tap-highlight-color: transparent;
}

.alu-topbanner__spark {
  display: none;
  font-size: 0.8em;
  opacity: 0.8;
}

.alu-topbanner__text {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.alu-topbanner__text strong {
  font-family: var(--tb-bold);
  font-weight: 800;
}

/* Allineamento scelto nell'editor (MarketingTopBanner::ALIGNS). Centro = default. */
.alu-topbanner--align-left .alu-topbanner__link {
  justify-content: flex-start;
  text-align: left;
}

.alu-topbanner--align-right .alu-topbanner__link {
  justify-content: flex-end;
  text-align: right;
}

.alu-topbanner .alu-topbanner__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  min-height: 30px;
  padding: 0.25rem 0.7rem 0.25rem 0.85rem;
  border-radius: var(--alu-radius-pill);
  background: var(--tb-cta-bg);
  color: var(--tb-cta-text);
  font-family: var(--tb-bold);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: var(--alu-shadow-1);
  transition: transform var(--alu-dur-fast) var(--alu-ease), box-shadow var(--alu-dur-fast) var(--alu-ease);
}

.alu-topbanner__arrow {
  flex: 0 0 auto;
  transition: transform var(--alu-dur-fast) var(--alu-ease);
}

.alu-topbanner .alu-topbanner__close {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--alu-radius-pill);
  background: transparent;
  color: var(--tb-text);
  opacity: 0.85;
  cursor: pointer;
  transition: background-color var(--alu-dur-fast) var(--alu-ease), opacity var(--alu-dur-fast) var(--alu-ease), transform var(--alu-dur-fast) var(--alu-ease);
}

.alu-topbanner .alu-topbanner__link:focus-visible,
.alu-topbanner .alu-topbanner__close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--tb-ring);
}

@media (hover: hover) {
  .alu-topbanner .alu-topbanner__link:hover .alu-topbanner__cta {
    transform: translateY(-1px);
    box-shadow: var(--alu-shadow-2);
  }
  .alu-topbanner .alu-topbanner__link:hover .alu-topbanner__arrow {
    transform: translateX(3px);
  }
  .alu-topbanner .alu-topbanner__close:hover {
    background: var(--tb-close-hover);
    opacity: 1;
  }
}

.alu-topbanner .alu-topbanner__close:active {
  transform: scale(0.92);
}

@media (min-width: 720px) {
  .alu-topbanner__spark {
    display: inline;
  }
  .alu-topbanner__text {
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
}

/* Anteprima MNGR: stesso componente, inerte e senza animazione d'ingresso ripetuta a ogni battitura. */
.alu-topbanner[data-preview] .alu-topbanner__link,
.alu-topbanner[data-preview] .alu-topbanner__close {
  pointer-events: none;
}

.alu-topbanner[data-preview] .alu-topbanner__inner {
  animation: none;
}

/* dark.css: "html.theme-dark body * { color: inherit }" ha specificita' (0,1,2) e batte i colori a una
   classe; qui si riafferma a (0,2,1) lo stesso colore dello stile scelto, perche' il banner e' un brand
   moment identico nei due temi (trappola documentata in design-system §3.5). */
html:is(.theme-dark, [data-bs-theme='dark']) .alu-topbanner,
html:is(.theme-dark, [data-bs-theme='dark']) .alu-topbanner .alu-topbanner__link,
html:is(.theme-dark, [data-bs-theme='dark']) .alu-topbanner .alu-topbanner__close {
  color: var(--tb-text);
}

html:is(.theme-dark, [data-bs-theme='dark']) .alu-topbanner .alu-topbanner__cta {
  color: var(--tb-cta-text);
}

@keyframes alu-topbanner-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

@keyframes alu-topbanner-shine {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .alu-topbanner,
  .alu-topbanner .alu-topbanner__cta,
  .alu-topbanner__arrow,
  .alu-topbanner .alu-topbanner__close {
    transition: none;
  }
  .alu-topbanner__inner,
  .alu-topbanner::after {
    animation: none;
  }
  .alu-topbanner::after {
    display: none;
  }
}

/* Source: dark.css */
/*
 * Dark theme overrides for the public frontend.
 * The light palette remains untouched while we remap key surfaces
 * when the root element switches to the dark theme.
 */

html:is(.theme-dark,[data-bs-theme='dark']) {
  color-scheme: dark;
  --alu-surface: rgba(24, 28, 54, 0.88);
  --alu-surface-soft: rgba(29, 33, 64, 0.78);
  --alu-surface-strong: rgba(16, 19, 36, 0.92);
  --alu-border: rgba(166, 141, 255, 0.35);
  --alu-border-strong: rgba(208, 181, 255, 0.55);
  --alu-text: #f0f4ff;
  --alu-text-muted: rgba(198, 202, 230, 0.75);
  --alu-accent: #d0b5ff;
  --alu-accent-strong: #f8edff;
  --alu-nav-bg: rgba(10, 13, 31, 0.85);
  --alu-nav-item-bg: rgba(94, 104, 207, 0.18);
  --alu-nav-item-active-bg: rgba(166, 141, 255, 0.32);
  --alu-nav-menu-bg: rgba(6, 8, 20, 0.95);
  --alu-card-shadow: 0 14px 35px rgba(4, 7, 26, 0.55);
  --consulto-free-panel-bg: rgba(18, 24, 46, 0.92);
  --consulto-free-panel-border: var(--alu-border);
  --consulto-free-panel-text: var(--alu-text);
  --consulto-free-note-bg: rgba(24, 32, 58, 0.78);
  --consulto-free-note-border: var(--alu-border);
  --consulto-free-toggle-bg: rgba(26, 36, 64, 0.85);
  --consulto-free-toggle-border: var(--alu-border);
  --consulto-free-toggle-text: var(--alu-text);
  --consulto-free-toggle-hover-bg: rgba(34, 46, 78, 0.88);
  --consulto-free-cta-bg: linear-gradient(140deg, rgba(102, 132, 255, 0.82), rgba(74, 191, 187, 0.7));
  --consulto-free-cta-text: var(--alu-text);
  --consulto-free-cta-shadow: 0 28px 48px rgba(10, 14, 34, 0.45);
  --consulto-free-fieldset-bg: rgba(18, 26, 50, 0.88);
  --consulto-free-fieldset-border: var(--alu-border);
  --consulto-free-input-bg: rgba(12, 20, 44, 0.95);
  --consulto-free-input-border: var(--alu-border);
  --consulto-free-input-text: var(--alu-text);
  --consulto-free-focus-shadow: rgba(114, 168, 255, 0.35);
  --consulto-free-hint-bg: rgba(16, 24, 46, 0.95);
  --consulto-free-hint-border: var(--alu-border);
  --consulto-free-hint-text: var(--alu-text);
  --consulto-free-disclaimer-bg: rgba(16, 24, 46, 0.9);
  --consulto-free-disclaimer-border: var(--alu-border);
  --consulto-free-disclaimer-text: var(--alu-text);
  --consulto-free-icon: var(--alu-accent);
}

html:is(.theme-dark,[data-bs-theme='dark']) body {
  color: var(--alu-text);
  background-color: #0c1020;
  /* FEA.LIGHT.1: stesso gradient di prima, ora via coppia adattiva
     --alu-page-bg (valore dark definito in tokens.css). */
  background-image: var(--alu-page-bg);
}

html:is(.theme-dark,[data-bs-theme='dark']) body * {
  color: inherit;
}

/* ECCEZIONE a `body *` (CONTRAST.DARK.1, 2026-09-06).
   Quella regola forza ogni discendente a ereditare il colore della pagina, e in
   tema scuro il colore della pagina e' chiaro. Va bene finche' l'elemento sta
   sul fondo scuro: ma un elemento che **si porta dietro un fondo chiaro** —
   i pulsanti Bootstrap warning/light/info, i badge `text-bg-*` — riceve
   inchiostro chiaro sopra un fondo chiaro e diventa illeggibile, mentre in tema
   chiaro Bootstrap gli darebbe testo nero.
   Misurato sulla pagina del consulto: «Sblocca ora (€ 2,99)», che e' l'azione
   principale della pagina, stava a **1.48:1** su oro; «Approfondisci questo
   consulto» a **1.70:1** su bianco. Non e' un caso isolato di quella pagina: e'
   ovunque compaia uno di questi pulsanti in tema scuro.
   Qui l'inchiostro torna scuro. Non si tocca `body *`: e' una regola vecchia e
   larghissima, e cambiarla significherebbe rimettere in discussione il colore di
   ogni testo del sito. */
html:is(.theme-dark,[data-bs-theme='dark']) body :is(
  .btn-warning, .btn-light, .btn-info, .btn-success,
  .text-bg-warning, .text-bg-light, .text-bg-info, .text-bg-success
),
html:is(.theme-dark,[data-bs-theme='dark']) body :is(
  .btn-warning, .btn-light, .btn-info, .btn-success,
  .text-bg-warning, .text-bg-light, .text-bg-info, .text-bg-success
) * {
  color: var(--alu-text-on-gold);
}

html:is(.theme-dark,[data-bs-theme='dark']) a {
  color: var(--alu-accent);
}

html:is(.theme-dark,[data-bs-theme='dark']) a:hover,
html:is(.theme-dark,[data-bs-theme='dark']) a:focus {
  color: var(--alu-accent-strong);
}

html:is(.theme-dark,[data-bs-theme='dark']) #TESTATA {
  background: linear-gradient(180deg, rgba(31, 36, 70, 0.92), rgba(49, 56, 102, 0.96) 62%);
  box-shadow: 0 8px 24px rgba(4, 7, 26, 0.55);
}

html:is(.theme-dark,[data-bs-theme='dark']) .navbar {
  --nav-surface: linear-gradient(140deg, rgba(8, 12, 28, 0.94), rgba(19, 25, 55, 0.92));
  --nav-border: rgba(166, 141, 255, 0.36);
  --nav-link-bg: rgba(94, 104, 207, 0.2);
  --nav-link-bg-hover: rgba(128, 146, 244, 0.26);
  --nav-link-bg-active: rgba(166, 141, 255, 0.35);
}

/* Navbar keeps default backdrop to avoid covering the logo on mobile layouts. */
html:is(.theme-dark,[data-bs-theme='dark']) .nav-item {
  background-color: var(--alu-nav-item-bg);
  /* border: 1px solid transparent; */
  color: var(--alu-text);
}

html:is(.theme-dark,[data-bs-theme='dark']) .nav-item.active {
  background-color: var(--alu-nav-item-active-bg);
  border-color: var(--alu-border);
}

html:is(.theme-dark,[data-bs-theme='dark']) .nav-link {
  color: var(--alu-text);
}

html:is(.theme-dark,[data-bs-theme='dark']) .nav-link:hover,
html:is(.theme-dark,[data-bs-theme='dark']) .nav-link:focus {
  color: var(--alu-accent-strong);
}

html:is(.theme-dark,[data-bs-theme='dark']) .navbar-cart-mobile {
  background: rgba(26, 34, 63, 0.92);
  border-color: var(--alu-border);
  color: var(--alu-text);
}

html:is(.theme-dark,[data-bs-theme='dark']) .nav-link--cart {
  color: var(--alu-text);
}

html:is(.theme-dark,[data-bs-theme='dark']) .bar {
  background: var(--alu-text);
}

html:is(.theme-dark,[data-bs-theme='dark']) .theme-toggle {
  --toggle-bg: rgba(41, 48, 88, 0.55);
  --toggle-border: rgba(208, 181, 255, 0.55);
  --toggle-sky: rgba(4, 7, 26, 0.9);
  --toggle-moon: #e8f0ff;
  box-shadow: none;
}

html:is(.theme-dark,[data-bs-theme='dark']) .theme-toggle:focus-visible {
  box-shadow: 0 0 0 3px rgba(208, 181, 255, 0.45);
}

@media (max-width: 760px) {
  html:is(.theme-dark,[data-bs-theme='dark']) .nav-menu {
    background: var(--alu-nav-menu-bg);
  }

  html:is(.theme-dark,[data-bs-theme='dark']) .nav-item {
    border-color: var(--alu-border);
  }

  html:is(.theme-dark,[data-bs-theme='dark']) .nav-link {
    color: var(--alu-text);
  }
}

html:is(.theme-dark,[data-bs-theme='dark']) #PAGINAZIONE {
  background-color: rgba(27, 31, 58, 0.78);
  color: var(--alu-text);
  border: 1px solid var(--alu-border);
  box-shadow: var(--alu-card-shadow);
}

html:is(.theme-dark,[data-bs-theme='dark']) #SUPPORT {
  background-color: rgba(22, 25, 44, 0.92);
  color: var(--alu-text);
  border-color: var(--alu-border);
  box-shadow: var(--alu-card-shadow);
}

html:is(.theme-dark,[data-bs-theme='dark']) #spot,
html:is(.theme-dark,[data-bs-theme='dark']) .whitearea,
html:is(.theme-dark,[data-bs-theme='dark']) .bgdark,
html:is(.theme-dark,[data-bs-theme='dark']) .coupon,
html:is(.theme-dark,[data-bs-theme='dark']) .mission,
html:is(.theme-dark,[data-bs-theme='dark']) .report {
  background: var(--alu-surface);
  color: var(--alu-text);
  border: 1px solid var(--alu-border);
  box-shadow: var(--alu-card-shadow);
}

html:is(.theme-dark,[data-bs-theme='dark']) .bgwhite75 {
  background-color: rgba(20, 28, 52, 0.82);
  color: var(--alu-text);
  border: 1px solid var(--alu-border);
  box-shadow: var(--alu-card-shadow);
}

html:is(.theme-dark,[data-bs-theme='dark']) #spot {
  background-image: linear-gradient(200deg, rgba(166, 141, 255, 0.16) 0%, rgba(104, 116, 206, 0.22) 100%);
}

html:is(.theme-dark,[data-bs-theme='dark']) #infoandsearchbox .home-free-consults-card {
  background:
    radial-gradient(circle at 18% 18%, rgba(251, 191, 36, 0.18), transparent 34%),
    radial-gradient(circle at 85% 10%, rgba(208, 181, 255, 0.14), transparent 30%),
    var(--alu-surface-section);
  border-color: var(--alu-border);
  color: var(--alu-text);
  box-shadow: var(--alu-card-shadow);
}

html:is(.theme-dark,[data-bs-theme='dark']) #infoandsearchbox .home-free-consults-card__counter-wrap {
  background: rgba(14, 18, 40, 0.92);
  border-color: var(--alu-border-strong);
  color: var(--alu-accent-strong);
  box-shadow: 0 16px 30px rgba(4, 7, 26, 0.6);
}

html:is(.theme-dark,[data-bs-theme='dark']) #infoandsearchbox .cta-card,
html:is(.theme-dark,[data-bs-theme='dark']) .cta-card {
  background: var(--alu-surface-section);
  border-color: var(--alu-border);
  color: var(--alu-text);
  box-shadow: var(--alu-card-shadow);
}

html:is(.theme-dark,[data-bs-theme='dark']) .cartomante-card {
  border-color: var(--alu-border);
  box-shadow: var(--alu-card-shadow);
}

html:is(.theme-dark,[data-bs-theme='dark']) .cartomante-card:not(.promobg):not(.litegreenbg) {
  background: var(--alu-surface);
  color: var(--alu-text);
}

html:is(.theme-dark,[data-bs-theme='dark']) .cartomante-card:not(.promobg):not(.litegreenbg) .cartomante-name:hover,
html:is(.theme-dark,[data-bs-theme='dark']) .cartomante-card:not(.promobg):not(.litegreenbg) .cartomante-name:focus {
  color: var(--alu-accent-strong);
}

html:is(.theme-dark,[data-bs-theme='dark'])
  .cartomante-card:is(.promobg, .litegreenbg) .cartomante-name:hover,
html:is(.theme-dark,[data-bs-theme='dark'])
  .cartomante-card:is(.promobg, .litegreenbg) .cartomante-name {
  color: #000;
}


html:is(.theme-dark,[data-bs-theme='dark']) .cartomante-card.promobg,
html:is(.theme-dark,[data-bs-theme='dark']) .cartomante-card.litegreenbg {
  color: #0b1230;
  border-color: rgba(12, 16, 40, 0.45);
}

html:is(.theme-dark,[data-bs-theme='dark']) .cartomante-card.promobg,
html:is(.theme-dark,[data-bs-theme='dark']) .cartomante-tile.promobg {
  background-color: rgba(176, 163, 255, 0.85);
  background-image: linear-gradient(141deg, rgba(251, 89, 255, 0.82), rgba(195, 195, 255, 0.82));
}

html:is(.theme-dark,[data-bs-theme='dark']) .cartomante-card.litegreenbg,
html:is(.theme-dark,[data-bs-theme='dark']) .cartomante-tile.litegreenbg {
  background-color: rgba(164, 241, 136, 0.85);
  background-image: linear-gradient(141deg, rgba(207, 255, 207, 0.82), rgba(141, 208, 83, 0.82));
}

html:is(.theme-dark,[data-bs-theme='dark']) .cartomante-card:not(.promobg):not(.litegreenbg) .cartomante-meta {
  color: var(--alu-text-muted);
}

html:is(.theme-dark,[data-bs-theme='dark']) .cartomante-card:not(.promobg):not(.litegreenbg) .like-button .like-count {
  color: var(--alu-text-muted);
}

html:is(.theme-dark,[data-bs-theme='dark']) .cartomante-card.promobg .cartomante-meta,
html:is(.theme-dark,[data-bs-theme='dark']) .cartomante-card.litegreenbg .cartomante-meta,
html:is(.theme-dark,[data-bs-theme='dark']) .cartomante-card.promobg .like-button .like-count,
html:is(.theme-dark,[data-bs-theme='dark']) .cartomante-card.litegreenbg .like-button .like-count {
  color: rgba(11, 18, 48, 0.82);
}

html:is(.theme-dark,[data-bs-theme='dark']) .cartomante-tile {
  border-color: var(--alu-border);
  box-shadow: var(--alu-card-shadow);
}

html:is(.theme-dark,[data-bs-theme='dark']) .cartomante-tile:not(.promobg):not(.litegreenbg) {
  background: rgba(18, 26, 52, 0.88);
  color: var(--alu-text);
}

html:is(.theme-dark,[data-bs-theme='dark']) .cartomante-tile:not(.promobg):not(.litegreenbg) .cartomante-name:hover,
html:is(.theme-dark,[data-bs-theme='dark']) .cartomante-tile:not(.promobg):not(.litegreenbg) .cartomante-name:focus {
  color: var(--alu-accent-strong);
}

html:is(.theme-dark,[data-bs-theme='dark']) .cartomante-tile:not(.promobg):not(.litegreenbg) .zodiac,
html:is(.theme-dark,[data-bs-theme='dark']) .cartomante-tile:not(.promobg):not(.litegreenbg) .small-like,
html:is(.theme-dark,[data-bs-theme='dark']) .cartomante-tile:not(.promobg):not(.litegreenbg) .small-like .like-count {
  color: var(--alu-text-muted) !important;
}

html:is(.theme-dark,[data-bs-theme='dark']) .cartomante-tile.promobg,
html:is(.theme-dark,[data-bs-theme='dark']) .cartomante-tile.litegreenbg {
  color: #0b1230;
  border-color: rgba(12, 16, 40, 0.45);
}

html:is(.theme-dark,[data-bs-theme='dark']) .cartomante-tile.promobg .zodiac,
html:is(.theme-dark,[data-bs-theme='dark']) .cartomante-tile.litegreenbg .zodiac,
html:is(.theme-dark,[data-bs-theme='dark']) .cartomante-tile.promobg .small-like,
html:is(.theme-dark,[data-bs-theme='dark']) .cartomante-tile.litegreenbg .small-like,
html:is(.theme-dark,[data-bs-theme='dark']) .cartomante-tile.promobg .small-like .like-count,
html:is(.theme-dark,[data-bs-theme='dark']) .cartomante-tile.litegreenbg .small-like .like-count {
  color: rgba(11, 18, 48, 0.82) !important;
}

html:is(.theme-dark,[data-bs-theme='dark']) .cartomante-tile:hover {
  box-shadow: var(--alu-card-shadow);
}

html:is(.theme-dark,[data-bs-theme='dark']) .cartomanti-search {
  background: rgba(18, 26, 52, 0.88);
  border-color: var(--alu-border);
  box-shadow: var(--alu-card-shadow);
}

html:is(.theme-dark,[data-bs-theme='dark']) .cartomanti-search .text-muted {
  color: var(--alu-text-muted) !important;
}

html:is(.theme-dark,[data-bs-theme='dark']) .cartomanti-search-input {
  color: var(--alu-text);
}

html:is(.theme-dark,[data-bs-theme='dark']) .cartomanti-search-input::placeholder {
  color: var(--alu-text-muted);
}

html:is(.theme-dark,[data-bs-theme='dark']) .cartomanti-select {
  background: rgba(20, 30, 56, 0.9);
  border-color: var(--alu-border);
  color: var(--alu-text);
  box-shadow: var(--alu-card-shadow);
}

html:is(.theme-dark,[data-bs-theme='dark']) .cartomanti-select:focus {
  border-color: var(--alu-border-strong);
  box-shadow: 0 0 0 0.2rem rgba(166, 141, 255, 0.25);
}

html:is(.theme-dark,[data-bs-theme='dark']) .cartomanti-select option {
  background-color: #141b33;
  color: var(--alu-text);
}

html:is(.theme-dark,[data-bs-theme='dark']) .onlinepill {
  color: #0b1230;
  text-shadow: none;
}

html:is(.theme-dark,[data-bs-theme='dark']) #infoandsearchbox .cta-card.premium,
html:is(.theme-dark,[data-bs-theme='dark']) .cta-card.premium {
  background:
    radial-gradient(circle at 12% 10%, var(--alu-gold-a22), transparent 32%),
    var(--alu-surface-section);
  border-color: var(--alu-gold-a45);
  color: var(--alu-text);
  box-shadow: var(--alu-card-shadow);
}

html:is(.theme-dark,[data-bs-theme='dark']) #infoandsearchbox .cta-card .cta-title {
  color: var(--alu-accent-strong);
}

html:is(.theme-dark,[data-bs-theme='dark']) #infoandsearchbox .cta-card .cta-lead {
  color: var(--alu-text-muted);
}

html:is(.theme-dark,[data-bs-theme='dark']) #infoandsearchbox .cta-card .cta-eyebrow {
  background: var(--alu-gold-a18);
  border-color: var(--alu-gold-a32);
  color: var(--alu-accent-strong);
  box-shadow: none;
}

html:is(.theme-dark,[data-bs-theme='dark']) #infoandsearchbox .cta-card .cta-benefits li {
  background: var(--alu-surface);
  border-color: var(--alu-gold-a32);
  color: var(--alu-text);
  box-shadow: var(--alu-shadow-1);
}

html:is(.theme-dark,[data-bs-theme='dark']) #infoandsearchbox .cta-card .cta-benefits li .emoji {
  color: var(--alu-accent-strong);
}

html:is(.theme-dark,[data-bs-theme='dark']) #infoandsearchbox .cta-card .cta-benefits--compact li {
  box-shadow: none;
}

html:is(.theme-dark,[data-bs-theme='dark']) div.miniatura {
  background-color: var(--alu-surface-soft);
  border: 1px solid var(--alu-border);
  color: var(--alu-text);
  box-shadow: var(--alu-card-shadow);
}

html:is(.theme-dark,[data-bs-theme='dark']) .home-info-toggle {
  color: var(--alu-accent);
}

html:is(.theme-dark,[data-bs-theme='dark']) .home-info-toggle:hover,
html:is(.theme-dark,[data-bs-theme='dark']) .home-info-toggle:focus {
  color: var(--alu-accent-strong);
}

html:is(.theme-dark,[data-bs-theme='dark']) .home-info-toggle-icon {
  background: rgba(208, 181, 255, 0.25);
}

html:is(.theme-dark,[data-bs-theme='dark']) .home-info-panel {
  background: var(--alu-surface-strong);
  border-color: var(--alu-border);
  box-shadow: var(--alu-card-shadow);
  color: var(--alu-text);
}

html:is(.theme-dark,[data-bs-theme='dark']) .home-info-panel a {
  color: var(--alu-accent);
  text-decoration-color: rgba(208, 181, 255, 0.65);
}

html:is(.theme-dark,[data-bs-theme='dark']) .home-info-panel a:hover,
html:is(.theme-dark,[data-bs-theme='dark']) .home-info-panel a:focus {
  color: var(--alu-accent-strong);
  text-decoration-color: rgba(208, 181, 255, 0.85);
}

html:is(.theme-dark,[data-bs-theme='dark']) .home-info-close {
  border-color: var(--alu-border-strong);
  background: rgba(94, 104, 207, 0.22);
  color: var(--alu-accent-strong);
  box-shadow: 0 16px 32px rgba(4, 7, 26, 0.45);
}

html:is(.theme-dark,[data-bs-theme='dark']) .home-info-close:hover,
html:is(.theme-dark,[data-bs-theme='dark']) .home-info-close:focus {
  background: rgba(208, 181, 255, 0.18);
  color: var(--alu-accent);
}

/* CBLOCK.STRIP.1 — tema scuro della striscia consulti bloccati.
   Il tema chiaro lavora quasi tutto sui token, quindi qui restano solo i punti
   dove il contrasto va rimesso a mano: i fondi delle superfici e l'oro dei
   numeri, che sul viola scuro deve schiarire per restare leggibile. */

html:is(.theme-dark,[data-bs-theme='dark']) #consultibloccati .cbx-shell {
  background: linear-gradient(170deg, rgba(16, 19, 36, 0.95) 0%, rgba(27, 30, 58, 0.92) 100%);
  border-color: var(--alu-border);
  box-shadow: var(--alu-card-shadow);
  color: var(--alu-text);
}

html:is(.theme-dark,[data-bs-theme='dark']) #consultibloccati .cbx-card {
  background: rgba(25, 28, 54, 0.94);
  border-color: var(--alu-border);
  color: var(--alu-text);
  box-shadow: 0 10px 22px rgba(4, 7, 26, 0.55);
}

html:is(.theme-dark,[data-bs-theme='dark']) #consultibloccati .cbx-card:hover,
html:is(.theme-dark,[data-bs-theme='dark']) #consultibloccati .cbx-card:focus-visible {
  box-shadow: 0 18px 36px rgba(4, 7, 26, 0.7);
  border-color: var(--alu-gold-a45);
}

/* Sul fondo scuro il giallo pieno del tema chiaro perde stacco: si passa al
   dorato chiaro, che e' anche quello usato dagli altri accenti in scuro. */
html:is(.theme-dark,[data-bs-theme='dark']) #consultibloccati.cbx {
  /* Su fondo scuro l'ambra profondo del tema chiaro sparisce: qui l'inchiostro
     dorato torna chiaro. Un token solo, ridefinito per tema, invece di due
     regole separate per numeri e chip. */
  --cbx-ink-gold: var(--alu-gold);
}

html:is(.theme-dark,[data-bs-theme='dark']) #consultibloccati .cbx-lock-chip {
  background: var(--alu-gold-a18);
  border-color: var(--alu-gold-a32);
  color: var(--alu-gold-soft);
  /* Il chip in scuro usa il dorato chiaro: piu' luminoso dell'inchiostro dei
     numeri, perche' vive su una pastiglia gia' velata d'oro. */
}

/* In scuro --alu-accent e --alu-accent-strong sono due viola CHIARI: il pallino
   dell'iniziale diventa quasi bianco e l'iniziale bianca sopra sparisce. Qui
   l'inchiostro torna scuro, che e' l'unico modo di tenerlo leggibile senza
   rifare il pallino. */
html:is(.theme-dark,[data-bs-theme='dark']) #consultibloccati .cbx-avatar {
  color: var(--alu-purple-deep);
}

html:is(.theme-dark,[data-bs-theme='dark']) #consultibloccati .cbx-cta {
  color: var(--alu-accent);
}

html:is(.theme-dark,[data-bs-theme='dark']) #consultibloccati .cbx-progress,
html:is(.theme-dark,[data-bs-theme='dark']) #consultibloccati .cbx-rail {
  background: rgba(166, 141, 255, 0.22);
}

html:is(.theme-dark,[data-bs-theme='dark']) #consultibloccati .cbx-timer {
  border-top-color: var(--alu-border);
}

html:is(.theme-dark,[data-bs-theme='dark']) .home-info-eyebrow {
  color: var(--alu-accent);
}

html:is(.theme-dark,[data-bs-theme='dark']) .home-info-title {
  color: var(--alu-accent-strong);
}

html:is(.theme-dark,[data-bs-theme='dark']) .home-info-subtitle,
html:is(.theme-dark,[data-bs-theme='dark']) .home-info-description,
html:is(.theme-dark,[data-bs-theme='dark']) .home-info-body p,
html:is(.theme-dark,[data-bs-theme='dark']) .home-info-footer p {
  color: var(--alu-text);
}

html:is(.theme-dark,[data-bs-theme='dark']) .home-info-section-title {
  color: var(--alu-accent-strong);
}

html:is(.theme-dark,[data-bs-theme='dark']) .home-info-list-item {
  background: rgba(16, 19, 36, 0.88);
  border-color: rgba(208, 181, 255, 0.28);
  box-shadow: 0 28px 48px rgba(4, 7, 26, 0.6);
  color: var(--alu-text);
}

html:is(.theme-dark,[data-bs-theme='dark']) .home-info-bullet {
  background: linear-gradient(145deg, rgba(208, 181, 255, 0.38), rgba(118, 101, 216, 0.58));
  color: var(--alu-accent-strong);
  box-shadow: 0 16px 28px rgba(4, 7, 26, 0.5);
}

html:is(.theme-dark,[data-bs-theme='dark']) .home-info-item-title,
html:is(.theme-dark,[data-bs-theme='dark']) .home-info-callout {
  color: var(--alu-accent-strong);
}

html:is(.theme-dark,[data-bs-theme='dark']) .home-info-callout {
  border-left-color: var(--alu-border-strong);
}

html:is(.theme-dark,[data-bs-theme='dark']) .home-info-separator {
  background: linear-gradient(90deg, rgba(208, 181, 255, 0), rgba(208, 181, 255, 0.45), rgba(208, 181, 255, 0));
}

html:is(.theme-dark,[data-bs-theme='dark']) fieldset {
  background-color: var(--alu-surface) !important;
  border-color: var(--alu-border) !important;
  color: var(--alu-text) !important;
}

html:is(.theme-dark,[data-bs-theme='dark']) legend {
  background-color: var(--alu-surface-strong) !important;
  border-color: var(--alu-border-strong) !important;
  color: var(--alu-text) !important;
}

html:is(.theme-dark,[data-bs-theme='dark']) hr {
  color: transparent;
}

html:is(.theme-dark,[data-bs-theme='dark']) hr:before {
  background: linear-gradient(to right, transparent, var(--alu-border-strong), transparent);
}

html:is(.theme-dark,[data-bs-theme='dark']) hr:after {
  color: var(--alu-accent);
  background-color: transparent;
}

html:is(.theme-dark,[data-bs-theme='dark']) #clockdiv {
  color: var(--alu-text);
}

html:is(.theme-dark,[data-bs-theme='dark']) #clockdiv > div {
  background-color: var(--alu-surface);
  box-shadow: var(--alu-card-shadow);
}

html:is(.theme-dark,[data-bs-theme='dark']) #clockdiv div > span {
  background-color: var(--alu-surface-strong);
  color: var(--alu-text);
}

html:is(.theme-dark,[data-bs-theme='dark']) #clockdiv div > div {
  color: var(--alu-text-muted);
}

html:is(.theme-dark,[data-bs-theme='dark']) .flatbtn,
html:is(.theme-dark,[data-bs-theme='dark']) .greybtn,
html:is(.theme-dark,[data-bs-theme='dark']) .navbtn,
html:is(.theme-dark,[data-bs-theme='dark']) .tab,
html:is(.theme-dark,[data-bs-theme='dark']) .tabactive {
  background-color: var(--alu-surface);
  border-color: var(--alu-border);
  color: var(--alu-text);
  box-shadow: none;
}

html:is(.theme-dark,[data-bs-theme='dark']) .popup,
html:is(.theme-dark,[data-bs-theme='dark']) .popup p {
  background: var(--alu-surface);
  color: var(--alu-text);
  border-color: var(--alu-border);
}

html:is(.theme-dark,[data-bs-theme='dark']) .modal-content,
html:is(.theme-dark,[data-bs-theme='dark']) .card,
html:is(.theme-dark,[data-bs-theme='dark']) .accordion-item,
html:is(.theme-dark,[data-bs-theme='dark']) .accordion-button,
html:is(.theme-dark,[data-bs-theme='dark']) .list-group-item,
html:is(.theme-dark,[data-bs-theme='dark']) .dropdown-menu,
html:is(.theme-dark,[data-bs-theme='dark']) .toast,
html:is(.theme-dark,[data-bs-theme='dark']) .offcanvas,
html:is(.theme-dark,[data-bs-theme='dark']) .alert {
  background-color: var(--alu-surface);
  color: var(--alu-text);
  border-color: var(--alu-border);
  box-shadow: var(--alu-card-shadow);
}

html:is(.theme-dark,[data-bs-theme='dark']) .accordion-button:not(.collapsed) {
  background-color: var(--alu-surface-strong);
}

html:is(.theme-dark,[data-bs-theme='dark']) .list-group-item + .list-group-item {
  border-top-color: var(--alu-border);
}

html:is(.theme-dark,[data-bs-theme='dark']) table,
html:is(.theme-dark,[data-bs-theme='dark']) tbody,
html:is(.theme-dark,[data-bs-theme='dark']) thead,
html:is(.theme-dark,[data-bs-theme='dark']) tr,
html:is(.theme-dark,[data-bs-theme='dark']) td,
html:is(.theme-dark,[data-bs-theme='dark']) th {
  background-color: transparent;
  color: var(--alu-text);
  border-color: var(--alu-border);
}

html:is(.theme-dark,[data-bs-theme='dark']) input,
html:is(.theme-dark,[data-bs-theme='dark']) textarea,
html:is(.theme-dark,[data-bs-theme='dark']) select,
html:is(.theme-dark,[data-bs-theme='dark']) option {
  background-color: var(--alu-surface-strong);
  color: var(--alu-text);
  border: 1px solid var(--alu-border);
}

html:is(.theme-dark,[data-bs-theme='dark']) ::placeholder {
  color: var(--alu-text-muted);
}

html:is(.theme-dark,[data-bs-theme='dark']) .btn-primary,
html:is(.theme-dark,[data-bs-theme='dark']) .btn-secondary,
html:is(.theme-dark,[data-bs-theme='dark']) .btn-outline-primary,
html:is(.theme-dark,[data-bs-theme='dark']) .btn-outline-secondary {
  border-color: var(--alu-border-strong);
  color: var(--alu-text);
  background-color: rgba(99, 108, 205, 0.45);
}

html:is(.theme-dark,[data-bs-theme='dark']) .btn-primary:hover,
html:is(.theme-dark,[data-bs-theme='dark']) .btn-secondary:hover,
html:is(.theme-dark,[data-bs-theme='dark']) .btn-outline-primary:hover,
html:is(.theme-dark,[data-bs-theme='dark']) .btn-outline-secondary:hover {
  background-color: rgba(136, 118, 228, 0.6);
  color: var(--alu-text);
}

html:is(.theme-dark,[data-bs-theme='dark']) .badge,
html:is(.theme-dark,[data-bs-theme='dark']) .tag,
html:is(.theme-dark,[data-bs-theme='dark']) .pill {
  background-color: rgba(166, 141, 255, 0.3);
  color: var(--alu-text);
  border-color: var(--alu-border);
}

html:is(.theme-dark,[data-bs-theme='dark']) .text-muted,
html:is(.theme-dark,[data-bs-theme='dark']) .muted,
html:is(.theme-dark,[data-bs-theme='dark']) .small {
  color: var(--alu-text-muted) !important;
}

html:is(.theme-dark,[data-bs-theme='dark']) .blacktxt {
  color: var(--alu-text);
}

html:is(.theme-dark,[data-bs-theme='dark']) .whitetxt {
  color: var(--alu-text);
}

html:is(.theme-dark,[data-bs-theme='dark']) .econ {
  color: var(--alu-text) !important;
  background-color: var(--alu-surface-soft);
  border-color: var(--alu-border);
  box-shadow: inset 0 0 0 1px rgba(208, 181, 255, 0.18);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

html:is(.theme-dark,[data-bs-theme='dark']) .econ:not(.darkyellow) .tinytxt {
  color: var(--alu-text-muted) !important;
}

html:is(.theme-dark,[data-bs-theme='dark']) .econ:not(.darkyellow):hover,
html:is(.theme-dark,[data-bs-theme='dark']) .econ:not(.darkyellow):focus-visible {
  background-color: var(--alu-surface-strong);
  border-color: var(--alu-border-strong);
  color: var(--alu-accent-strong) !important;
  text-decoration: none;
}

html:is(.theme-dark,[data-bs-theme='dark']) .econ.darkyellow {
  color: #1f1400 !important;
}

html:is(.theme-dark,[data-bs-theme='dark']) .econ.darkyellow .tinytxt {
  color: #3a2a00 !important;
}

html:is(.theme-dark,[data-bs-theme='dark']) .bg-dark,
html:is(.theme-dark,[data-bs-theme='dark']) .bg-light {
  background-color: var(--alu-surface) !important;
  color: var(--alu-text) !important;
}

html:is(.theme-dark,[data-bs-theme='dark']) .breadcrumb,
html:is(.theme-dark,[data-bs-theme='dark']) .breadcrumb-item,
html:is(.theme-dark,[data-bs-theme='dark']) .breadcrumb-item a {
  color: var(--alu-text-muted);
}

html:is(.theme-dark,[data-bs-theme='dark']) .breadcrumb-item.active {
  color: var(--alu-text);
}

/* Dark theme refinements for content sections */
html:is(.theme-dark,[data-bs-theme='dark']) .text-dark,
html:is(.theme-dark,[data-bs-theme='dark']) a.text-dark,
html:is(.theme-dark,[data-bs-theme='dark']) .text-body {
  color: var(--alu-text) !important;
}

html:is(.theme-dark,[data-bs-theme='dark']) .text-secondary,
html:is(.theme-dark,[data-bs-theme='dark']) .tinytxt.text-secondary,
html:is(.theme-dark,[data-bs-theme='dark']) .text-white-50 {
  color: var(--alu-text-muted) !important;
}

html:is(.theme-dark,[data-bs-theme='dark']) .badge.text-bg-light,
html:is(.theme-dark,[data-bs-theme='dark']) .badge.bg-light {
  background: rgba(166, 141, 255, 0.22);
  color: var(--alu-text);
  border: 1px solid var(--alu-border);
}

html:is(.theme-dark,[data-bs-theme='dark']) .bgwhite75,
html:is(.theme-dark,[data-bs-theme='dark']) .bgwhite50,
html:is(.theme-dark,[data-bs-theme='dark']) .bgwhite25 {
  background-color: var(--alu-surface) !important;
  color: var(--alu-text);
  border: 1px solid var(--alu-border);
  box-shadow: var(--alu-card-shadow);
}

html:is(.theme-dark,[data-bs-theme='dark']) .CONTAINERMESSAGGIO {
  background: var(--alu-surface);
  color: var(--alu-text);
  border-color: var(--alu-border);
  box-shadow: var(--alu-card-shadow);
}

html:is(.theme-dark,[data-bs-theme='dark']) .HeaderMessaggio,
html:is(.theme-dark,[data-bs-theme='dark']) .HeaderBlogPost {
  background: var(--alu-surface-strong);
  color: var(--alu-text);
  border-bottom: 1px solid var(--alu-border);
  box-shadow: inset 0 -1px 0 rgba(8, 11, 28, 0.55);
}

html:is(.theme-dark,[data-bs-theme='dark']) .TitoloMessaggio h1,
html:is(.theme-dark,[data-bs-theme='dark']) .TitoloMessaggio h2,
html:is(.theme-dark,[data-bs-theme='dark']) .TitoloMessaggio h3,
html:is(.theme-dark,[data-bs-theme='dark']) .HeaderBlogPost h1 {
  color: var(--alu-text) !important;
  text-shadow: none;
}

html:is(.theme-dark,[data-bs-theme='dark']) .CorpoMessaggio,
html:is(.theme-dark,[data-bs-theme='dark']) .CorpoMessaggio_Richiesta,
html:is(.theme-dark,[data-bs-theme='dark']) .CorpoMessaggio_Risposta,
html:is(.theme-dark,[data-bs-theme='dark']) .Frasedelgiorno,
html:is(.theme-dark,[data-bs-theme='dark']) .Autore {
  color: var(--alu-text) !important;
}

html:is(.theme-dark,[data-bs-theme='dark']) .Frasedelgiorno:first-letter {
  color: #d7c4ff;
}

html:is(.theme-dark,[data-bs-theme='dark']) .spot {
  background: var(--alu-surface-strong) !important;
  color: var(--alu-text);
  border: 1px solid var(--alu-border);
  box-shadow: var(--alu-card-shadow);
}

html:is(.theme-dark,[data-bs-theme='dark']) .goldenbg {
  background: linear-gradient(160deg, rgba(166, 141, 255, 0.22), rgba(255, 214, 143, 0.18));
  color: var(--alu-text);
}

html:is(.theme-dark,[data-bs-theme='dark']) .litegreenbg,
html:is(.theme-dark,[data-bs-theme='dark']) .greenbg {
  background: linear-gradient(150deg, rgba(92, 201, 167, 0.25), rgba(74, 148, 222, 0.22));
  color: var(--alu-text);
}

html:is(.theme-dark,[data-bs-theme='dark']) .DESCRIZIONE {
  color: var(--alu-text);
}

html:is(.theme-dark,[data-bs-theme='dark']) .DESCRIZIONE h1,
html:is(.theme-dark,[data-bs-theme='dark']) .DESCRIZIONE h2,
html:is(.theme-dark,[data-bs-theme='dark']) .DESCRIZIONE h3,
html:is(.theme-dark,[data-bs-theme='dark']) .DESCRIZIONE p {
  color: var(--alu-text) !important;
  text-shadow: none !important;
}

html:is(.theme-dark,[data-bs-theme='dark']) .DESCRIZIONE .center,
html:is(.theme-dark,[data-bs-theme='dark']) .DESCRIZIONE .greenbg,
html:is(.theme-dark,[data-bs-theme='dark']) .DESCRIZIONE .alert-info {
  background: rgba(0, 0, 0, 0.25) !important;
  color: var(--alu-text) !important;
  border: 1px solid var(--alu-border);
  box-shadow: var(--alu-card-shadow);
}

html:is(.theme-dark,[data-bs-theme='dark']) .consulto-gratis-panel,
html:is(.theme-dark,[data-bs-theme='dark']) .consulto-gratis-note,
html:is(.theme-dark,[data-bs-theme='dark']) .consulto-gratis-toggle,
html:is(.theme-dark,[data-bs-theme='dark']) .consulto-gratis-fieldset,
html:is(.theme-dark,[data-bs-theme='dark']) .consulto-gratis-hint,
html:is(.theme-dark,[data-bs-theme='dark']) .consulto-gratis-disclaimer,
html:is(.theme-dark,[data-bs-theme='dark']) .consulto-gratis-submit {
  box-shadow: var(--alu-card-shadow);
}

html:is(.theme-dark,[data-bs-theme='dark']) .consulto-gratis-cta {
  box-shadow: var(--consulto-free-cta-shadow);
  border-color: var(--alu-border);
}

html:is(.theme-dark,[data-bs-theme='dark']) .consulto-gratis-cta:hover,
html:is(.theme-dark,[data-bs-theme='dark']) .consulto-gratis-cta:focus {
  box-shadow: 0 32px 56px rgba(8, 12, 32, 0.6);
}

html:is(.theme-dark,[data-bs-theme='dark']) .consulto-gratis-hint--warning {
  color: #ff9a9a;
}

html:is(.theme-dark,[data-bs-theme='dark']) .consulto-gratis-helper {
  background: rgba(20, 26, 48, 0.65);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--alu-text);
}
html:is(.theme-dark,[data-bs-theme='dark']) .consulto-gratis-helper--info {
  color: #6ee2a4;
  border-color: rgba(110, 226, 164, 0.25);
}
html:is(.theme-dark,[data-bs-theme='dark']) .consulto-gratis-helper--warning {
  color: #ff9a9a;
  border-color: rgba(255, 154, 154, 0.3);
  background: rgba(60, 18, 18, 0.55);
}
html:is(.theme-dark,[data-bs-theme='dark']) .consulto-gratis-helper--warning.is-active {
  background: rgba(120, 28, 28, 0.85);
  border-color: rgba(255, 154, 154, 0.6);
}

html:is(.theme-dark,[data-bs-theme='dark']) .consulto-gratis-consent {
  background: rgba(20, 26, 48, 0.7);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--alu-text);
}
html:is(.theme-dark,[data-bs-theme='dark']) .consulto-gratis-status--error {
  background: rgba(120, 28, 28, 0.65);
  color: #ffd6d6;
  border-color: rgba(255, 154, 154, 0.45);
}
html:is(.theme-dark,[data-bs-theme='dark']) .consulto-gratis-status--success {
  background: rgba(20, 70, 40, 0.6);
  color: #b6efcb;
  border-color: rgba(110, 226, 164, 0.4);
}
html:is(.theme-dark,[data-bs-theme='dark']) .consulto-gratis-field .consulto-gratis-input.is-invalid,
html:is(.theme-dark,[data-bs-theme='dark']) .consulto-gratis-field .consulto-gratis-textarea.is-invalid {
  border-color: #ff8a7a !important;
  box-shadow: 0 0 0 3px rgba(255, 138, 122, 0.22);
}

html:is(.theme-dark,[data-bs-theme='dark']) .consulto-gratis-tip {
  background: rgba(60, 18, 18, 0.95);
  color: #ffd6d6;
  border-color: rgba(255, 154, 154, 0.45);
}
html:is(.theme-dark,[data-bs-theme='dark']) .consulto-gratis-tip::after {
  border-top-color: rgba(60, 18, 18, 0.95);
}
html:is(.theme-dark,[data-bs-theme='dark']) .consulto-gratis-tip.is-active {
  background: rgba(120, 28, 28, 0.95);
  color: #ffe5e5;
  border-color: rgba(255, 154, 154, 0.7);
}
html:is(.theme-dark,[data-bs-theme='dark']) .consulto-gratis-tip.is-active::after {
  border-top-color: rgba(120, 28, 28, 0.95);
}

html:is(.theme-dark,[data-bs-theme='dark']) .disclaimer {
  background: rgba(16, 22, 44, 0.88);
  color: var(--alu-text);
  border: 1px solid var(--alu-border);
  box-shadow: var(--alu-card-shadow);
}

html:is(.theme-dark,[data-bs-theme='dark']) #alertinputmail,
html:is(.theme-dark,[data-bs-theme='dark']) #alertinputnomidate,
html:is(.theme-dark,[data-bs-theme='dark']) #alertoggetto,
html:is(.theme-dark,[data-bs-theme='dark']) #alertrichiesta,
html:is(.theme-dark,[data-bs-theme='dark']) #alertForm,
html:is(.theme-dark,[data-bs-theme='dark']) #noResultsMsg {
  background: rgba(20, 26, 52, 0.92) !important;
  color: var(--alu-text) !important;
  border: 1px solid var(--alu-border);
  box-shadow: var(--alu-card-shadow);
}

html:is(.theme-dark,[data-bs-theme='dark']) .alert-light,
html:is(.theme-dark,[data-bs-theme='dark']) .alert-info {
  background: rgba(24, 30, 58, 0.92);
  color: var(--alu-text);
  border: 1px solid var(--alu-border);
  box-shadow: var(--alu-card-shadow);
}

html:is(.theme-dark,[data-bs-theme='dark']) .favorite-toggle {
  background-color: rgba(18, 22, 45, 0.92);
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--alu-accent);
  box-shadow: 0 8px 22px rgba(10, 14, 30, 0.55);
}

html:is(.theme-dark,[data-bs-theme='dark']) .favorite-toggle:hover,
html:is(.theme-dark,[data-bs-theme='dark']) .favorite-toggle:focus-visible {
  background-color: rgba(28, 33, 62, 0.98);
  box-shadow: 0 12px 28px rgba(10, 14, 30, 0.6);
}

html:is(.theme-dark,[data-bs-theme='dark']) .favorite-toggle:focus-visible {
  outline: 2px solid rgba(208, 181, 255, 0.35);
  outline-offset: 2px;
}

html:is(.theme-dark,[data-bs-theme='dark']) .favorite-toggle.is-active {
  background-color: rgba(242, 176, 30, 0.22);
  color: #f2b01e;
  border-color: #f2b01e;
  box-shadow: 0 10px 26px rgba(242, 176, 30, 0.4);
}

html:is(.theme-dark,[data-bs-theme='dark']) .oroscopo-caratteristiche__intro,
html:is(.theme-dark,[data-bs-theme='dark']) .oroscopo-rating__item {
  background: var(--alu-surface);
  color: var(--alu-text);
  border: 1px solid var(--alu-border);
  box-shadow: var(--alu-card-shadow);
}

html:is(.theme-dark,[data-bs-theme='dark']) .oroscopo-caratteristiche__card {
  background: var(--alu-surface-soft);
  border: 1px solid var(--alu-border);
  box-shadow: var(--alu-card-shadow);
}

html:is(.theme-dark,[data-bs-theme='dark']) .oroscopo-caratteristiche__value {
  color: var(--alu-text);
}

html:is(.theme-dark,[data-bs-theme='dark']) .polaroid {
  background: linear-gradient(160deg, rgba(28, 34, 62, 0.92), rgba(18, 22, 44, 0.9));
  color: var(--alu-text);
  box-shadow: var(--alu-card-shadow);
  border: 1px solid var(--alu-border);
}

html:is(.theme-dark,[data-bs-theme='dark']) .polaroid .caption,
html:is(.theme-dark,[data-bs-theme='dark']) .polaroid .tinytxt {
  color: var(--alu-text-muted);
}

html:is(.theme-dark,[data-bs-theme='dark']) .cartcarousel,
html:is(.theme-dark,[data-bs-theme='dark']) .flex-container,
html:is(.theme-dark,[data-bs-theme='dark']) .flexbox {
  color: var(--alu-text);
}

html:is(.theme-dark,[data-bs-theme='dark']) #sceltacartomante.cartcarousel {
  background: var(--alu-surface);
  border: 1px solid var(--alu-border);
  box-shadow: var(--alu-card-shadow);
}

html:is(.theme-dark,[data-bs-theme='dark']) #sceltacartomante.cartcarousel > div:first-child {
  color: var(--alu-accent-strong);
  letter-spacing: 0.08em;
}

html:is(.theme-dark,[data-bs-theme='dark']) #sceltacartomante .cartomante-container {
  gap: 0.5rem;
  scrollbar-color: var(--alu-border) transparent;
}

html:is(.theme-dark,[data-bs-theme='dark']) #sceltacartomante .cartomante-container::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.06);
}

html:is(.theme-dark,[data-bs-theme='dark']) #sceltacartomante .cartomante-container::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, rgba(122, 168, 255, 0.72), rgba(208, 181, 255, 0.52));
  border-color: rgba(14, 12, 32, 0.65);
}

html:is(.theme-dark,[data-bs-theme='dark']) #sceltacartomante .cartcarousel-hint {
  color: var(--alu-text-muted);
}

html:is(.theme-dark,[data-bs-theme='dark']) #sceltacartomante .card-content {
  background: var(--alu-surface-strong);
  border: 1px solid transparent;
  border-radius: 1.25rem;
  padding: 1rem 0.85rem 1.15rem;
  transition: background-color 0.2s ease, border-color 0.2s ease,
    box-shadow 0.2s ease;
}

html:is(.theme-dark,[data-bs-theme='dark']) #sceltacartomante .cartomante-card {
  color: var(--alu-text);
}

html:is(.theme-dark,[data-bs-theme='dark']) #sceltacartomante .cartomante-name {
  color: var(--alu-text);
  min-height: 2.45rem;
}

html:is(.theme-dark,[data-bs-theme='dark']) #sceltacartomante .cartomante-sign {
  color: var(--alu-text-muted);
  background: rgba(255, 255, 255, 0.08);
  min-height: 1.7rem;
}

html:is(.theme-dark,[data-bs-theme='dark']) #sceltacartomante .miniaturacart {
  opacity: 0.7;
  border: 2px solid transparent;
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease,
    transform 0.2s ease;
}

html:is(.theme-dark,[data-bs-theme='dark']) #sceltacartomante .card-content:hover,
html:is(.theme-dark,[data-bs-theme='dark']) #sceltacartomante .cartomante-card input:checked + .card-content,
html:is(.theme-dark,[data-bs-theme='dark']) #sceltacartomante .cartomante-card input:focus-visible + .card-content {
  border-color: var(--alu-border-strong);
  box-shadow: 0 14px 32px rgba(4, 7, 26, 0.55);
}

html:is(.theme-dark,[data-bs-theme='dark']) #sceltacartomante .card-content:hover {
  background: var(--alu-nav-item-bg);
}

html:is(.theme-dark,[data-bs-theme='dark']) #sceltacartomante .cartomante-card input:checked + .card-content,
html:is(.theme-dark,[data-bs-theme='dark']) #sceltacartomante .cartomante-card input:focus-visible + .card-content {
  background: linear-gradient(180deg, rgba(255, 244, 150, 0.98), rgba(244, 220, 95, 0.94));
  border-color: rgba(255, 225, 118, 0.78);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.42), inset 0 0 0 1px rgba(255, 249, 212, 0.4);
}

html:is(.theme-dark,[data-bs-theme='dark']) #sceltacartomante .cartomante-card input:checked + .card-content .miniaturacart,
html:is(.theme-dark,[data-bs-theme='dark']) #sceltacartomante .card-content:hover .miniaturacart {
  opacity: 1;
  border-color: var(--alu-accent);
  box-shadow: 0 0 0 2px rgba(208, 181, 255, 0.45);
}

html:is(.theme-dark,[data-bs-theme='dark']) #sceltacartomante .cartomante-card input:checked + .card-content .cartomante-name {
  color: #4f3600;
}

html:is(.theme-dark,[data-bs-theme='dark']) #sceltacartomante .cartomante-card input:checked + .card-content .cartomante-sign {
  color: #5c4300;
  background: rgba(255, 255, 255, 0.38);
}

html:is(.theme-dark,[data-bs-theme='dark']) #sceltacartomante .scroll-btn {
  --scroll-btn-bg-top: rgba(86, 72, 123, 0.94);
  --scroll-btn-bg-bottom: rgba(58, 46, 92, 0.98);
  --scroll-btn-border: rgba(255, 255, 255, 0.22);
  --scroll-btn-shadow: 0 14px 26px rgba(0, 0, 0, 0.42);
  --scroll-btn-highlight: rgba(255, 255, 255, 0.2);
  --scroll-btn-ink: var(--alu-text);
}

html:is(.theme-dark,[data-bs-theme='dark']) #sceltacartomante .scroll-btn:disabled,
html:is(.theme-dark,[data-bs-theme='dark']) #sceltacartomante .scroll-btn[disabled],
html:is(.theme-dark,[data-bs-theme='dark']) #sceltacartomante .scroll-btn[aria-disabled='true'] {
  color: var(--alu-text-muted);
  box-shadow: none;
}

html:is(.theme-dark,[data-bs-theme='dark']) .scroll-btn,
html:is(.theme-dark,[data-bs-theme='dark']) .scrollblog-btn {
  --scroll-btn-bg-top: rgba(86, 72, 123, 0.94);
  --scroll-btn-bg-bottom: rgba(58, 46, 92, 0.98);
  --scroll-btn-border: rgba(255, 255, 255, 0.22);
  --scroll-btn-shadow: 0 14px 26px rgba(0, 0, 0, 0.42);
  --scroll-btn-highlight: rgba(255, 255, 255, 0.2);
  --scroll-btn-ink: var(--alu-text);
}

html:is(.theme-dark,[data-bs-theme='dark']) .scroll-btn:focus-visible,
html:is(.theme-dark,[data-bs-theme='dark']) .scrollblog-btn:focus-visible {
  outline-color: rgba(140, 132, 255, 0.8);
}

html:is(.theme-dark,[data-bs-theme='dark']) .searchbox {
  background-color: var(--alu-surface-strong);
  border-color: var(--alu-border);
  color: var(--alu-text);
}

html:is(.theme-dark,[data-bs-theme='dark']) .searchbox::placeholder {
  color: var(--alu-text-muted);
}

html:is(.theme-dark,[data-bs-theme='dark']) .card .card-text.small,
html:is(.theme-dark,[data-bs-theme='dark']) .card .card-title,
html:is(.theme-dark,[data-bs-theme='dark']) .card .btn {
  color: var(--alu-text);
}