/* Pelle nuova del sito CASTE Strategy (giovedì 29 ottobre 2026).
   Si carica dopo style.css (e blog.css) su tutte le pagine tranne la home, che ha home.css.
   Porta lo stile della home nuova: vetro, luci di fondo, pillole, card arrotondate, giallo come luce.
   I contenuti e il funzionamento delle pagine restano quelli di style.css e script.js. */
:root {
  --raggio: 22px; --raggio-s: 14px;
  --vetro: linear-gradient(160deg, rgba(255,255,255,.11), rgba(255,255,255,.03) 55%), rgba(20,20,20,.25);
  --vetro-bordo: rgba(255,255,255,.16);
  --vetro-ombra: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(255,255,255,.04), 0 30px 60px -32px rgba(0,0,0,.85);
  --vetro-chiaro: linear-gradient(160deg, rgba(255,255,255,.9), rgba(255,255,255,.45));
  --vetro-chiaro-ombra: inset 0 1px 0 #fff, 0 24px 60px -28px rgba(11,11,11,.28);
  --vetro-giallo: linear-gradient(160deg, rgba(232,255,60,.96), rgba(223,255,0,.82));
  --sfoca: blur(26px) saturate(190%);
  --molla: cubic-bezier(.2, .8, .2, 1);
}

/* ── luci che si muovono dietro il vetro (le aggiunge pelle.js) ── */
.pelle-luci { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.pelle-luci::before { content: none; }
.pelle-luci i { position: absolute; width: 38vw; height: 38vw; max-width: 560px; max-height: 560px; border-radius: 50%; filter: blur(46px); opacity: .5; animation: pelle-vaga 22s ease-in-out infinite alternate; }
.pelle-luci i:nth-child(1) { background: radial-gradient(circle, rgba(223,255,0,.5), transparent 65%); left: 6%; top: 18%; }
.pelle-luci i:nth-child(2) { background: radial-gradient(circle, rgba(241,240,233,.22), transparent 65%); right: 4%; top: 4%; animation-duration: 27s; animation-delay: -8s; }
.pelle-luci i:nth-child(3) { background: radial-gradient(circle, rgba(223,255,0,.32), transparent 65%); left: 42%; bottom: -6%; animation-duration: 31s; animation-delay: -14s; }
@keyframes pelle-vaga { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(7vw, -4vw, 0) scale(1.15); } 100% { transform: translate3d(-5vw, 5vw, 0) scale(.9); } }
body { background: #0b0b0b; }

/* ── barra in alto e menu ── */
.topbar, .topbar.is-scrolled { background: rgba(14,14,14,.55); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); border-bottom: 1px solid rgba(255,255,255,.08); }
.topbar.pelle-chiara { background: rgba(255,255,255,.62); border-bottom-color: rgba(11,11,11,.08); color: #0b0b0b; }
.topbar.pelle-chiara a { color: #0b0b0b; }
.nav-cta { border-radius: 999px; background: var(--vetro-giallo) !important; color: #0b0b0b !important; border: 0 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 10px 26px -10px rgba(223,255,0,.6); padding: 9px 16px !important; font-weight: 700; }
.nav-cta span { color: #0b0b0b !important; }
.lang-switch a, .lang-switch span { border-radius: 999px; }
.menu-button { border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); }
.mobile-menu.is-open { background: rgba(14,14,14,.86) !important; -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); }
.scroll-progress i { background: #dfff00; }
.mobile-menu.is-open a { color: #f1f0e9 !important; }
.topbar.pelle-chiara .menu-button { color: #0b0b0b; border-color: rgba(11,11,11,.16); background: rgba(255,255,255,.6); }
.topbar.pelle-chiara .menu-button span { color: #0b0b0b; }

/* ── card di vetro: tutti i riquadri delle pagine ── */
:is(.wcard, .servizio, .system, .capability, .method__step, .signal-box, .anatomy__panel, .canale, .dopo__step, .model__grid > *, .percorso, .agent, .cta-inline, .contact-form, .blog-callout, .post-cta) {
  border-radius: var(--raggio) !important; background: var(--vetro); border: 1px solid var(--vetro-bordo) !important; box-shadow: var(--vetro-ombra);
  -webkit-backdrop-filter: var(--sfoca); backdrop-filter: var(--sfoca); position: relative; overflow: hidden; isolation: isolate;
  transition: transform .6s var(--molla), border-color .4s, box-shadow .6s;
}
:is(.wcard, .servizio, .system, .capability, .method__step, .anatomy__panel, .canale, .dopo__step, .agent, .cta-inline, .model__grid > *, .percorso) { padding: clamp(20px, 2.2vw, 30px) !important; }
@media (hover: hover) and (pointer: fine) { :is(.wcard, .servizio, .system, .capability, .method__step, .anatomy__panel, .canale, .agent):hover { transform: translateY(-6px); border-color: rgba(255,255,255,.26) !important; } }
/* riflesso che segue il mouse (pelle.js scrive --mx e --my) */
.pelle-riflesso::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; opacity: 0; transition: opacity .4s;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.14), transparent 60%); }
.pelle-riflesso:hover::before { opacity: 1; }
.pelle-riflesso > * { position: relative; z-index: 1; }
/* card gialle e chiare */
.wcard--signal, .signal-box { background: var(--vetro-giallo) !important; color: #0b0b0b !important; border-color: rgba(255,255,255,.55) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 30px 80px -24px rgba(223,255,0,.45) !important; }
.wcard--light { background: var(--vetro-chiaro) !important; color: #0b0b0b; border-color: rgba(255,255,255,.9) !important; box-shadow: var(--vetro-chiaro-ombra) !important; }
/* sezioni su carta (pelle.js le riconosce dal colore): il vetro diventa chiaro */
.pelle-carta :is(.wcard:not(.wcard--signal), .servizio, .system, .capability, .method__step, .anatomy__panel, .canale, .dopo__step, .model__grid > *, .percorso, .agent, .cta-inline) {
  background: var(--vetro-chiaro); border-color: rgba(255,255,255,.9) !important; box-shadow: var(--vetro-chiaro-ombra); color: #0b0b0b; }
.pelle-carta .pelle-riflesso::before { background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 0%), rgba(223,255,0,.28), transparent 60%); }

/* ── liste: righe del blog, FAQ e casi dei progetti diventano card separate ── */
.post-list { display: grid; gap: 12px; border: 0 !important; }
.post-row { border-radius: var(--raggio); border: 1px solid var(--vetro-bordo) !important; background: var(--vetro); box-shadow: var(--vetro-ombra); -webkit-backdrop-filter: var(--sfoca); backdrop-filter: var(--sfoca); padding: 22px 26px !important; transition: transform .5s var(--molla), border-color .3s; }
.post-row:hover { transform: translateY(-4px); border-color: rgba(223,255,0,.45) !important; }
.pelle-carta .post-row { background: var(--vetro-chiaro); border-color: rgba(255,255,255,.9) !important; box-shadow: var(--vetro-chiaro-ombra); }
.post-row__arrow { width: 44px; height: 44px; display: inline-grid; place-items: center; border-radius: 50%; background: rgba(127,127,127,.12); transition: transform .4s var(--molla), background .3s; }
.post-row:hover .post-row__arrow { transform: rotate(45deg); background: #dfff00; color: #0b0b0b; }
:is(.faq-item, .caso) { border: 1px solid var(--vetro-bordo) !important; border-radius: var(--raggio); background: var(--vetro); box-shadow: var(--vetro-ombra); -webkit-backdrop-filter: var(--sfoca); backdrop-filter: var(--sfoca); margin-bottom: 12px; overflow: hidden; }
:is(.faq-item, .caso) summary { padding-left: 24px !important; padding-right: 24px !important; }
:is(.faq-item, .caso) > :not(summary) { padding-left: 24px; padding-right: 24px; }
.pelle-carta :is(.faq-item, .caso) { background: var(--vetro-chiaro); border-color: rgba(255,255,255,.9) !important; box-shadow: var(--vetro-chiaro-ombra); }
.faq-item__mark, .caso__mark { width: 32px; height: 32px; display: inline-grid; place-items: center; border-radius: 50%; background: rgba(127,127,127,.14); transition: transform .4s var(--molla), background .3s, color .3s; }
:is(.faq-item, .caso)[open] :is(.faq-item__mark, .caso__mark) { background: #dfff00; color: #0b0b0b; }

/* ── pulsanti e link a pillola ── */
.btn-primary, .submit-btn { border-radius: 999px !important; background: var(--vetro-giallo) !important; color: #0b0b0b !important; border: 0 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 16px 40px -14px rgba(223,255,0,.6) !important; transition: transform .3s var(--molla) !important; }
.btn-primary:hover, .submit-btn:hover { transform: translateY(-2px); }
.text-link { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); text-decoration: none; }
.pelle-carta .text-link { border-color: rgba(11,11,11,.14); background: rgba(255,255,255,.65); }
.kicker { display: inline-flex; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); white-space: nowrap; width: max-content; max-width: 100%; }
.pelle-carta .kicker { border-color: rgba(11,11,11,.16); background: rgba(255,255,255,.6); }

/* ── moduli ── */
.field input, .field select, .field textarea { border-radius: var(--raggio-s) !important; background-color: rgba(255,255,255,.05) !important; border: 1px solid rgba(255,255,255,.14) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); padding: 14px 16px !important; transition: border-color .25s, box-shadow .25s; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: rgba(223,255,0,.6) !important; box-shadow: 0 0 0 4px rgba(223,255,0,.12); }
.contact-form { padding: clamp(22px, 3vw, 40px) !important; }

/* ── barra WhatsApp: vetro, solo ombra gialla ── */
.wa-bar { border-radius: 999px !important; background: linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.04) 60%), rgba(14,14,14,.5) !important; border: 1px solid rgba(255,255,255,.16) !important;
  -webkit-backdrop-filter: blur(28px) saturate(200%) !important; backdrop-filter: blur(28px) saturate(200%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 20px 50px -14px rgba(0,0,0,.65), 0 12px 40px -8px rgba(223,255,0,.5) !important; }
.wa-bar__btn { border-radius: 999px !important; }

/* ── banner dei cookie in vetro ── */
.cookie-bar { border-radius: var(--raggio) !important; background: rgba(14,14,14,.78) !important; border: 1px solid rgba(255,255,255,.14) !important; -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); box-shadow: var(--vetro-ombra) !important; }
.cookie-bar button { border-radius: 999px !important; }

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

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :is(.wcard, .servizio, .system, .capability, .method__step, .anatomy__panel, .canale, .dopo__step, .agent, .post-row, .faq-item, .caso) { background: #151515; }
  .pelle-carta :is(.wcard, .servizio, .system, .capability, .method__step, .anatomy__panel, .canale, .dopo__step, .agent, .post-row, .faq-item, .caso) { background: #fff; }
}
@media (prefers-reduced-motion: reduce) { .pelle-luci i { animation: none; } :is(.wcard, .servizio, .system, .post-row) { transition: none !important; } }

/* 30/10/2026: riquadri staccati, con respiro e icona */
.servizi-grid, .servizi-grid--tre { gap: 21px !important; border-top: 0 !important; margin-top: 34px; }
.servizi-grid > .servizio { border-left: 1px solid var(--vetro-bordo) !important; }
.capability-list { gap: 21px; border-top: 0 !important; }
.capability-list > .capability { border-bottom: 0; }
.servizio { padding: clamp(26px, 2.6vw, 38px) !important; }
.servizio h2 { font-size: clamp(26px, 2.4vw, 34px) !important; }
.servizio__claim { margin-top: 10px !important; }
.servizio__icona { display: inline-grid; place-items: center; width: 52px; height: 52px; margin-bottom: 21px; border-radius: 16px; color: var(--signal, #dfff00);
  background: linear-gradient(160deg, rgba(223,255,0,.16), rgba(223,255,0,.04)); border: 1px solid rgba(223,255,0,.28); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.servizio__icona svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.servizio__icona svg .pieno { fill: currentColor; stroke: none; }
.pelle-carta .servizio__icona { color: #0b0b0b; background: var(--signal, #dfff00); border-color: transparent; }
@media (max-width: 900px) { .servizi-grid, .servizi-grid--tre { gap: 13px !important; } .servizio__icona { width: 44px; height: 44px; margin-bottom: 13px; } }

/* 30/10/2026 Contatti: a sinistra i recapiti piccoli, a destra il form, visibile subito */
.contatti__griglia { display: grid; grid-template-columns: minmax(0, 38.2fr) minmax(0, 61.8fr); gap: 34px; align-items: start; margin-top: 55px; }
.contatti__lato .canali { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0 !important; }
.contatti__lato .canale { padding: 16px 20px !important; }
.contatti__lato .canale__label { font-size: 11px !important; }
.contatti__lato .canale__valore { font-size: clamp(17px, 1.4vw, 21px) !important; letter-spacing: -.02em; margin-top: 4px; display: inline-block; }
.contatti__lato .canale__nota { font-size: 13px !important; margin-top: 4px !important; }
.contatti__lato .dopo { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 21px 0 0 !important; }
.contatti__lato .dopo__step { padding: 14px 20px !important; display: grid; grid-template-columns: 28px 1fr; column-gap: 10px; align-items: baseline; }
.contatti__lato .dopo__step span { grid-row: span 2; color: var(--signal, #dfff00); font-family: var(--mono, monospace); font-size: 12px; }
.contatti__lato .dopo__step h2 { font-size: 16px !important; margin: 0 !important; letter-spacing: -.01em; }
.contatti__lato .dopo__step p { font-size: 13px !important; margin: 4px 0 0 !important; }
.contatti__griglia .contact-form { margin: 0 !important; position: sticky; top: 96px; }
@media (max-width: 900px) {
  .contatti__griglia { grid-template-columns: 1fr; gap: 21px; margin-top: 34px; }
  .contatti__griglia .contact-form { order: -1; position: static; }
}
.contatti .contatti__title { font-size: clamp(52px, 6.4vw, 104px) !important; line-height: .95; }
.contatti .contatti__intro { margin-top: 21px !important; }
.contatti__lato .canale__valore { margin-top: 2px; }