/*
 * Kliveer+ — tema della pagina /plus-program/ (si appoggia a kv-site-1.css e kv-site-2.css).
 * Ridefinisce i token kv- sull'accento corallo e aggiunge i componenti kp-.
 */

body.kv-plus {
    --kv-teal: #f2635f;
    --kv-teal-d: #d8463f;
    --kv-teal-l: #fff0ee;
    --kv-i2: rgba(242, 99, 95, .18);
    --kp-dark: #12142b;
    --kp-dark2: #1b1f45;
    --kp-glow: #ff8f7a;
    background: #fff;
}
.kv-plus .kv-btn--primary { box-shadow: 0 10px 24px -10px rgba(242, 99, 95, .8); }
.kv-plus .kv-btn--primary:hover { box-shadow: 0 16px 30px -12px rgba(242, 99, 95, .9); }
.kv-plus .kv-section--navy { background: var(--kp-dark); }
.kv-plus .kv-section--navy .kv-eyebrow { color: var(--kp-glow); }
.kv-plus .kv-flow__line::before { background: linear-gradient(90deg, var(--kv-teal), var(--kp-glow)); }
.kv-plus .kv-flow__pulse { background: var(--kp-glow); box-shadow: 0 0 0 6px rgba(255, 143, 122, .18), 0 0 18px var(--kp-glow); }
.kv-plus .kv-flow__step .kv-tile { background: #24284f; color: var(--kp-glow); --kv-i2: rgba(255, 143, 122, .14); }
.kv-plus .kv-cta { background: radial-gradient(600px 300px at 90% 0%, rgba(255, 143, 122, .35), transparent 60%), linear-gradient(120deg, #12142b 0%, #2a2350 55%, #b8433d 100%); }
.kv-plus .kv-hl-u { background: linear-gradient(transparent 62%, rgba(242, 99, 95, .22) 62%); }

/* ---------- header ---------- */
.kp-header .site-main-menu > li > a { font-size: 16px; }
.kp-header .nav-right { display: flex; align-items: center; gap: 14px; }
.kp-header .kp-nav-cta { background: var(--kv-teal) !important; color: #fff !important; border: 0 !important; border-radius: 10px !important; padding: 9px 20px !important; font-weight: 600; }
/* header bianco dopo lo scroll: il template aggiunge pix-header-fixed, il CSS lingue si aspettava header-fixed */
.kp-header.pix-header-fixed .lang-dropdown-btn { color: var(--kv-navy) !important; border-color: var(--kv-line) !important; background: #fff !important; }

/* ---------- hero ---------- */
.kp-hero {
    position: relative; overflow: hidden; padding: 180px 0 120px; color: #c6c9e4;
    background:
        radial-gradient(800px 480px at 80% 20%, rgba(242, 99, 95, .22), transparent 60%),
        radial-gradient(700px 420px at 5% 100%, rgba(109, 93, 252, .22), transparent 60%),
        linear-gradient(180deg, var(--kp-dark) 0%, var(--kp-dark2) 100%);
}
.kp-hero::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000 15%, transparent 70%);
    mask-image: radial-gradient(ellipse at 70% 40%, #000 15%, transparent 70%);
}
.kp-hero .container { position: relative; }
.kp-hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.kp-hero__grid > *, .kp-split > * { min-width: 0; }
.kp-hero .kv-h1 { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
.kp-hero .kv-btn { padding: 14px 22px; }
.kp-hero .kv-eyebrow { color: var(--kp-glow); }
.kp-hero .kv-h1 { color: #fff; }
.kp-hero .kv-h1 span { background: linear-gradient(90deg, #ff8f7a, #f2635f 60%, #c86bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kp-hero .kv-lead { color: #b9bddb; margin-bottom: 32px; max-width: 560px; }
.kp-hero .kv-btn--ghost { background: transparent; color: #fff !important; border-color: rgba(255, 255, 255, .25); }
.kp-hero .kv-btn--ghost:hover { border-color: #fff; color: #fff !important; }
.kp-hero .kv-checks li { color: #d5d8ee; }
.kp-hero .kv-checks .kv-i { color: var(--kp-glow); }

/* mappa delle integrazioni */
.kp-hub { position: relative; width: 100%; max-width: 520px; margin-left: auto; aspect-ratio: 520 / 460; }
.kp-hub > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.kp-hub .ln { fill: none; stroke: rgba(255, 255, 255, .16); stroke-width: 1.5; stroke-dasharray: 4 6; animation: kv-dash 1.4s linear infinite; }
.kp-hub .pk { fill: var(--kp-glow); filter: drop-shadow(0 0 6px var(--kp-glow)); }
.kp-hub .pk2 { fill: #8fd8ff; filter: drop-shadow(0 0 6px #8fd8ff); }
.kp-hub .orbit { fill: none; stroke: rgba(255, 255, 255, .07); stroke-width: 1; }
.kp-core {
    position: absolute; left: 50%; top: 50%; width: 132px; height: 132px; margin: -66px 0 0 -66px; border-radius: 50%;
    background: radial-gradient(circle at 30% 25%, #ff9d88, #f2635f 45%, #a83a5e 100%); display: grid; place-items: center; text-align: center;
    color: #fff; box-shadow: 0 0 0 10px rgba(242, 99, 95, .12), 0 0 0 22px rgba(242, 99, 95, .06), 0 30px 60px -20px rgba(242, 99, 95, .8); z-index: 2;
}
.kp-core b { display: block; font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.kp-core small { display: block; font-size: 12px; opacity: .9; margin-top: 2px; }
.kp-core::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid rgba(255, 143, 122, .6); animation: kv-ring 2.6s ease-out infinite; }
/* il contenitore posiziona (ancorato verso il centro), l'interno galleggia: due transform separati */
.kp-node { position: absolute; z-index: 2; transform: translate(-100%, -50%); }
.kp-node--r { transform: translate(0, -50%); }
.kp-node__in {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 13px 9px 9px; border-radius: 14px; white-space: nowrap; font-size: 13px; font-weight: 500; color: #fff;
    background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    animation: kv-float 7s ease-in-out infinite; animation-delay: var(--fd, 0s);
}
.kp-node .kv-tile { width: 32px; height: 32px; border-radius: 9px; background: rgba(255, 143, 122, .16); color: var(--kp-glow); --kv-i2: rgba(255, 143, 122, .18); }
.kp-node .kv-tile .kv-i { width: 17px; height: 17px; }

/* ---------- protocolli ---------- */
.kp-protocols { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; }
.kp-protocols span { font-family: "SFMono-Regular", Consolas, "Courier New", monospace; font-size: 13px; padding: 6px 12px; border-radius: 8px; background: var(--kv-soft); border: 1px solid var(--kv-line); color: var(--kv-ink); }

/* finestra codice che "scrive" un webhook */
.kp-code { background: #0f1126; border-radius: 18px; box-shadow: var(--kv-shadow-lg); overflow: hidden; color: #cfd3f0; font-family: "SFMono-Regular", Consolas, "Courier New", monospace; font-size: 13px; }
.kp-code__bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; background: #171a36; }
.kp-code__bar i { width: 10px; height: 10px; border-radius: 50%; background: #3a3f6b; }
.kp-code__bar i:nth-child(1) { background: #ff8a7a; }
.kp-code__bar i:nth-child(2) { background: #ffcc5c; }
.kp-code__bar i:nth-child(3) { background: #5fd38d; }
.kp-code__bar span { margin-left: 10px; color: #8e93bd; font-size: 12px; font-family: "Poppins", sans-serif; }
.kp-code pre { margin: 0; padding: 20px 22px 8px; background: none; border: 0; color: inherit; font: inherit; line-height: 1.75; white-space: pre; overflow: hidden; }
.kp-code pre > span { display: block; opacity: 0; animation: kp-line 10s infinite; animation-delay: calc(var(--i) * .32s); }
@keyframes kp-line { 0% { opacity: 0; transform: translateX(-6px); } 3%, 78% { opacity: 1; transform: none; } 84%, 100% { opacity: 0; } }
.kp-code .k { color: #ff9d88; }
.kp-code .s { color: #9be3b4; }
.kp-code .n { color: #8fd8ff; }
.kp-code .m { color: #c9a6ff; }
.kp-code__ok { display: flex; align-items: center; gap: 10px; margin: 6px 22px 20px; padding: 10px 14px; border-radius: 10px; background: rgba(22, 177, 121, .14); color: #7fe0b5; font-family: "Poppins", sans-serif; font-size: 13px; font-weight: 500; opacity: 0; animation: kp-ok 10s infinite; }
.kp-code__ok .kv-i { width: 18px; height: 18px; stroke-width: 2.4; }
@keyframes kp-ok { 0%, 40% { opacity: 0; transform: translateY(6px); } 44%, 80% { opacity: 1; transform: none; } 86%, 100% { opacity: 0; } }
.kp-split { display: grid; grid-template-columns: 1fr 1.05fr; gap: 60px; align-items: center; }

/* ---------- uno a uno ---------- */
.kp-person { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--kv-line); }
.kp-person__av { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #ff9d88, #f2635f); color: #fff; display: grid; place-items: center; flex: none; }
.kp-person__av .kv-i { width: 20px; height: 20px; }
.kp-person b { display: block; color: var(--kv-navy); font-size: 13.5px; }
.kp-person small { color: var(--kv-muted); font-size: 11.5px; }
.kp-person em { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 600; color: #0f9466; display: flex; align-items: center; gap: 5px; }
.kp-person em::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #16b179; box-shadow: 0 0 0 3px rgba(22, 177, 121, .2); }
.kp-msg { margin: 4px 16px 16px; padding: 11px 14px; border-radius: 14px 14px 14px 4px; background: var(--kv-teal-l); color: var(--kv-ink); font-size: 12.5px; line-height: 1.5; opacity: 0; animation: kp-ok 10s infinite; animation-delay: 1.2s; }

/* ---------- esempi ---------- */
.kp-cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.kp-case { position: relative; background: #fff; border: 1px solid var(--kv-line); border-radius: 20px; padding: 26px 24px; transition: transform .3s, box-shadow .3s; display: flex; flex-direction: column; }
.kp-case:hover { transform: translateY(-5px); box-shadow: var(--kv-shadow); }
.kp-case__tag { position: absolute; top: 22px; right: 22px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--kv-muted); }
.kp-case .kv-tile { margin-bottom: 18px; }
.kp-case b { display: block; color: var(--kv-navy); font-size: 17px; font-weight: 600; margin-bottom: 8px; }
.kp-case p { color: var(--kv-muted); font-size: 14.5px; line-height: 1.6; margin: 0 0 18px; }
.kp-link { margin-top: auto; display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; }
.kp-link span { padding: 5px 10px; border-radius: 8px; background: var(--kv-soft); color: var(--kv-ink); }
.kp-link span:last-child { background: var(--kv-teal-l); color: var(--kv-teal-d); }
.kp-link i { flex: 1; height: 2px; min-width: 24px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--kv-teal) 0 6px, transparent 6px 11px); background-size: 22px 2px; animation: kp-flow 1s linear infinite; }
@keyframes kp-flow { to { background-position: 22px 0; } }

/* ---------- FAQ ---------- */
.kp-faq { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.kp-faq details { background: #fff; border: 1px solid var(--kv-line); border-radius: 16px; padding: 0 22px; transition: border-color .2s, box-shadow .2s; }
.kp-faq details[open] { border-color: rgba(242, 99, 95, .4); box-shadow: 0 10px 26px -18px rgba(242, 99, 95, .7); }
.kp-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; font-weight: 600; font-size: 16.5px; color: var(--kv-navy); }
.kp-faq summary::-webkit-details-marker { display: none; }
.kp-faq summary::after { content: "+"; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--kv-teal-l); color: var(--kv-teal-d); display: grid; place-items: center; font-size: 18px; font-weight: 500; transition: transform .25s; }
.kp-faq details[open] summary::after { transform: rotate(45deg); }
.kp-faq p { color: var(--kv-muted); font-size: 15.5px; line-height: 1.7; margin: 0 0 20px; }

/* ---------- footer ---------- */
.kv-plus #footer.footer-hosting { border-top: 1px solid var(--kv-line); }
.kv-plus #footer .kp-foot-claim { color: var(--kv-muted); font-size: 14px; line-height: 1.6; margin: 10px 0 16px; max-width: 280px; }

/* ---------- responsive ---------- */
@media (max-width: 991px) {
    .kp-hero { padding: 130px 0 80px; }
    .kp-hero__grid, .kp-split { grid-template-columns: 1fr; }
    .kp-hub { margin: 10px auto 0; }
    .kp-cases { grid-template-columns: repeat(2, 1fr); }
    .kp-header .nav-right { flex-wrap: wrap; }
}
@media (max-width: 767px) {
    .kp-cases { grid-template-columns: 1fr; }
    /* su smartphone la mappa diventa una griglia: niente linee, nucleo in alto, servizi su due colonne */
    .kp-hub { aspect-ratio: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-width: none; }
    .kp-hub > svg { display: none; }
    .kp-hub .kp-core { position: relative; left: auto; top: auto; margin: 0 auto 14px; grid-column: 1 / -1; }
    .kp-node, .kp-node--r { position: static; transform: none; }
    .kp-node__in { font-size: 12px; padding: 7px 9px 7px 7px; gap: 7px; white-space: normal; line-height: 1.25; height: 100%; }
    .kp-node .kv-tile { width: 24px; height: 24px; }
    .kp-node .kv-tile .kv-i { width: 13px; height: 13px; }
    .kp-core { width: 110px; height: 110px; margin: -55px 0 0 -55px; }
    .kp-core b { font-size: 18px; }
    .kp-code { font-size: 11.5px; }
    .kp-code pre { padding: 16px 14px 6px; }
}
@media (prefers-reduced-motion: reduce) {
    .kp-hub .ln, .kp-core::after, .kp-node__in, .kp-code pre > span, .kp-code__ok, .kp-msg, .kp-link i { animation: none !important; }
    .kp-code pre > span, .kp-code__ok, .kp-msg { opacity: 1; }
    .kp-hub .pk, .kp-hub .pk2 { display: none; }
}