/* Pelle nuova del sito Eleva Medica (giovedì 29 ottobre 2026).
   Si carica dopo gli stili di ogni pagina: porta vetro, luci che si muovono, pillole e card arrotondate.
   Colori e caratteri restano quelli di Eleva (blu notte #1a2e3d, turchese #0ea5d4, DM Serif Display e DM Sans).
   Contenuti, moduli Netlify, pixel Meta e SEO non cambiano: qui c'è solo l'aspetto. */
:root {
  --raggio: 21px; --raggio-s: 13px;
  --vetro: linear-gradient(160deg, rgba(255,255,255,.86), rgba(255,255,255,.42));
  --vetro-bordo: rgba(255,255,255,.92);
  --vetro-ombra: inset 0 1px 0 #fff, 0 34px 55px -34px rgba(26,46,61,.32);
  --vetro-scuro: linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.03) 55%), rgba(15,31,43,.35);
  --sfoca: blur(26px) saturate(180%);
  --molla: cubic-bezier(.2, .8, .2, 1);
  --tq-grad: linear-gradient(160deg, #2bb6e3, #0ea5d4);
}
html body { background: #f4f7fa; }
#app, main { position: relative; z-index: 1; }
/* sezioni chiare: lo sfondo diventa trasparente e si vedono le luci (pelle.js aggiunge .pelle-chiara) */
.pelle-chiara { background-color: transparent !important; background-image: none !important; }

/* ── luci che si muovono dietro il vetro (le aggiunge pelle.js) ── */
.pelle-luci { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.pelle-luci::before { content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(26,46,61,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(26,46,61,.05) 1px, transparent 1px);
  background-size: 55px 55px; -webkit-mask: radial-gradient(70% 60% at 50% 30%, #000, transparent); mask: radial-gradient(70% 60% at 50% 30%, #000, transparent); }
.pelle-luci i { position: absolute; width: 42vw; height: 42vw; max-width: 610px; max-height: 610px; border-radius: 50%; filter: blur(55px); animation: pelle-vaga 26s ease-in-out infinite alternate; }
.pelle-luci i:nth-child(1) { background: radial-gradient(circle, rgba(79,195,247,.5), transparent 65%); left: -6%; top: -4%; }
.pelle-luci i:nth-child(2) { background: radial-gradient(circle, rgba(14,165,212,.36), transparent 65%); right: -6%; top: 12%; animation-duration: 31s; animation-delay: -9s; }
.pelle-luci i:nth-child(3) { background: radial-gradient(circle, rgba(26,46,61,.14), transparent 65%); left: 38%; bottom: -10%; animation-duration: 35s; animation-delay: -15s; }
@keyframes pelle-vaga { 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(8vw,-5vw,0) scale(1.15); } 100% { transform: translate3d(-6vw,6vw,0) scale(.9); } }

/* ── barra in alto: pillola di vetro che galleggia ── */
nav { top: 13px !important; left: 50% !important; transform: translateX(-50%); width: min(1280px, calc(100% - 26px)) !important; height: 60px !important;
  border-radius: 999px; background: rgba(255,255,255,.62) !important; border: 1px solid rgba(255,255,255,.95) !important;
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  box-shadow: inset 0 1px 0 #fff, 0 21px 44px -26px rgba(26,46,61,.35); padding: 0 10px 0 26px !important; }
.nav-links a { border-radius: 999px; padding: 7px 11px; transition: background .3s, color .3s; }
.nav-links a:hover { background: rgba(255,255,255,.8); }
.nav-cta, .mobile-cta { border-radius: 999px !important; background: var(--tq-grad) !important; color: #06202e !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 13px 30px -12px rgba(14,165,212,.7); transition: transform .35s var(--molla), opacity .2s !important; }
.nav-cta:hover { transform: translateY(-2px); opacity: 1 !important; }
.mobile-menu { background: rgba(244,247,250,.88) !important; -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); }

/* ── pulsanti ── */
.btn-dark { background: linear-gradient(160deg, #24435a, #1a2e3d) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 16px 34px -14px rgba(26,46,61,.6); transition: transform .35s var(--molla), opacity .2s !important; }
.btn-light { background: rgba(255,255,255,.6) !important; border: 1px solid rgba(255,255,255,.95) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: transform .35s var(--molla), background .3s !important; }
.btn-dark:hover, .btn-light:hover { transform: translateY(-2px); opacity: 1 !important; }
.plan-cta, .submit-btn, button[type="submit"] { border-radius: 999px !important; transition: transform .35s var(--molla) !important; }
.plan-cta:hover, .submit-btn:hover, button[type="submit"]:hover { transform: translateY(-2px); }

/* ── card di vetro ── */
:is(.hero-card, .service-card, .plan, .team-card, .diff-card, .case-card, .bcard, .form-wrap, .promise-box, .promo-box, .process-visual, .faq-item, .faq-cta, .contact-item, .ba-item, .ai-feat, .fase, .step, .strumenti, .titolare-box, .post-sommario, .errore-card, .result-box, .testimonial-card) {
  background: var(--vetro) !important; border: 1px solid var(--vetro-bordo) !important; box-shadow: var(--vetro-ombra) !important;
  -webkit-backdrop-filter: var(--sfoca); backdrop-filter: var(--sfoca); border-radius: var(--raggio) !important;
  position: relative; isolation: isolate; transition: transform .6s var(--molla), box-shadow .6s, border-color .4s; }
.hero-card { border-top: 1px solid var(--vetro-bordo) !important; background-color: transparent !important; gap: 0 !important; overflow: hidden; }
.hero-stat { background: transparent !important; }
.hero-stat + .hero-stat { border-left: 1px solid rgba(26,46,61,.08); }
.faq-item { margin-bottom: 13px; overflow: hidden; }
@media (hover: hover) and (pointer: fine) {
  :is(.service-card, .plan, .team-card, .diff-card, .case-card, .bcard, .ba-item, .ai-feat, .fase, .step, .contact-item, .result-box):hover {
    transform: translateY(-8px); box-shadow: inset 0 1px 0 #fff, 0 55px 89px -40px rgba(14,165,212,.38) !important; }
}
/* riflesso che segue il mouse (pelle.js scrive --mx e --my) */
.pelle-riflesso::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; opacity: 0; transition: opacity .4s;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(79,195,247,.22), transparent 60%); }
.pelle-riflesso:hover::after { opacity: 1; }

/* sezioni scure (pelle.js aggiunge .pelle-scura): il vetro diventa scuro */
.pelle-scura { position: relative; }
.pelle-scura :is(.service-card, .plan, .team-card, .diff-card, .case-card, .ba-item, .ai-feat, .fase, .step, .result-box, .faq-cta, .promise-box, .testimonial-card) {
  background: var(--vetro-scuro) !important; border-color: rgba(255,255,255,.14) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 34px 60px -34px rgba(0,0,0,.7) !important; }
.pelle-scura .ba-item.good { background: linear-gradient(160deg, rgba(79,195,247,.3), rgba(14,165,212,.12)) !important; border-color: rgba(79,195,247,.5) !important; }
.pelle-scura .pelle-riflesso::after { background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(79,195,247,.18), transparent 60%); }
/* sezione degli agenti: fondo blu notte e vetro scuro */
.ai-section { background: radial-gradient(80% 60% at 15% 0%, #24435a 0%, #1a2e3d 45%, #0f1f2b 100%) !important; color: #fff; position: relative; overflow: hidden; }
.ai-section .ai-feat { background: var(--vetro-scuro) !important; border-color: rgba(255,255,255,.14) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 34px 60px -34px rgba(0,0,0,.7) !important; }
.ai-section .pelle-riflesso::after { background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(79,195,247,.18), transparent 60%); }

/* ── moduli ── */
.fgroup input, .fgroup select, .fgroup textarea, .form-row input, .form-row select { border-radius: var(--raggio-s) !important; background-color: rgba(255,255,255,.7) !important; transition: border-color .25s, box-shadow .25s; }
.fgroup input:focus, .fgroup select:focus, .fgroup textarea:focus { outline: none; border-color: #0ea5d4 !important; box-shadow: 0 0 0 4px rgba(14,165,212,.16); }

/* ── pillole ed etichette ── */
.section-label, .about-kicker, .eyebrow, .bcard-cat, .team-tag, .case-tag, .ai-teaser-badge { border-radius: 999px !important; }
.ai-teaser-strip { background: rgba(255,255,255,.55) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid rgba(26,46,61,.06); border-bottom: 1px solid rgba(26,46,61,.06); position: relative; z-index: 1; }

/* ── scritta che scorre (la aggiunge pelle.js sotto l'apertura della home) ── */
.pelle-scorre { position: relative; z-index: 1; overflow: hidden; padding: 21px 0; border-top: 1px solid rgba(26,46,61,.08); border-bottom: 1px solid rgba(26,46,61,.08); background: rgba(255,255,255,.5); }
.pelle-scorre div { display: flex; gap: 55px; width: max-content; font-family: 'DM Serif Display', serif; font-size: clamp(24px, 2.6vw, 34px); color: #1a2e3d; white-space: nowrap; animation: pelle-scorre 38s linear infinite; }
.pelle-scorre div:hover { animation-play-state: paused; }
.pelle-scorre em { color: #0a7fa6; }
@keyframes pelle-scorre { to { transform: translateX(-50%); } }

/* ── entrate più morbide ── */
.reveal { transition: opacity 1s cubic-bezier(.23,1,.32,1), transform 1s var(--molla), filter 1s !important; filter: blur(6px); }
.reveal.on { filter: none; }

/* ── barra WhatsApp in vetro ── */
.wa-float { -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :is(.hero-card, .service-card, .plan, .team-card, .diff-card, .case-card, .bcard, .form-wrap, .promise-box, .faq-item, .contact-item, .ba-item, .ai-feat, .fase, .step) { background: #fff !important; }
  nav { background: rgba(255,255,255,.96) !important; }
}
@media (max-width: 900px) {
  nav { top: 8px !important; width: calc(100% - 16px) !important; height: 56px !important; padding: 0 6px 0 18px !important; }
  .hero-stat + .hero-stat { border-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pelle-luci i, .pelle-scorre div { animation: none; }
  .reveal { filter: none; }
}

/* piano in evidenza: resta blu notte, in vetro scuro */
.plan.featured { background: linear-gradient(160deg, #24435a, #1a2e3d 60%, #0f1f2b) !important; border-color: rgba(255,255,255,.12) !important; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 40px 70px -34px rgba(26,46,61,.75) !important; }
.plan.featured.pelle-riflesso::after { background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(79,195,247,.2), transparent 60%); }

/* ── spazi interni dei blocchi che prima non erano riquadri (venerdì 30 ottobre 2026) ── */
/* percorso della home: ogni fase è una card con aria dentro e distanza dalla successiva */
.fase { padding: 26px 34px 34px !important; margin-bottom: 21px; }
.fase:last-child { margin-bottom: 0; }
.fase-nodo { margin-top: 26px; }
/* metodo: i quattro passi */
.step { padding: 34px !important; margin-bottom: 13px; border-bottom: 1px solid var(--vetro-bordo) !important; gap: 21px !important; }
.step:last-child { margin-bottom: 0; }
/* assistente AI: le quattro funzioni */
.ai-feat { padding: 16px 21px !important; }
/* contatti: email e telefono */
.contact-item { padding: 16px 21px !important; align-items: center !important; }
/* FAQ: domanda e risposta staccate dal bordo */
.faq-q { padding-left: 26px !important; padding-right: 26px !important; }
.faq-a-inner { padding-left: 26px !important; padding-right: 26px !important; }
/* risultati e problema su telefono */
.result-box { padding: 16px 21px !important; }
@media (max-width: 900px) {
  .fase { padding: 21px 21px 26px !important; }
  .fase-nodo { margin-top: 21px; }
  .step { padding: 21px !important; }
  .ba-item { padding: 21px !important; }
}