/* =====================================================================
   Brand Verlo (oro + verde) e sezioni riprese dal vecchio sito
   ===================================================================== */
.logo-img { height: 40px; width: auto; display: block; filter: drop-shadow(0 2px 6px rgba(240, 177, 29, .3)); transition: transform .5s var(--ease-spring); }
.logo:hover .logo-img { transform: rotate(-8deg) scale(1.08); }
.logo-text { font-family: "Space Grotesk", Inter, sans-serif; font-weight: 700; letter-spacing: .12em; }
.nav a.active { color: var(--accent); background: #fff8e6; }

/* Badge numero di PC sulla scatola */
.face-pc { position: absolute; top: 9%; right: 9%; z-index: 1; font-weight: 800; font-size: calc(var(--w) * .1); padding: 3% 7%; border-radius: 6px; background: #fff; color: color-mix(in srgb, var(--c) 80%, #000); box-shadow: 0 4px 10px rgba(0, 0, 0, .2); letter-spacing: .02em; }

/* Famiglie in home */
.family-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 28px; }
.family-jump a { padding: 7px 16px; border-radius: 99px; border: 1px solid var(--border); background: #fff; color: var(--text); font-weight: 600; font-size: .9rem; transition: background .25s, border-color .25s, transform .25s; }
.family-jump a:hover { text-decoration: none; border-color: var(--primary); background: #fff8e6; transform: translateY(-2px); }
.family-jump-dark a { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); color: #fff; }
.family-jump-dark a:hover { background: rgba(240, 177, 29, .2); }
.family { margin-bottom: 56px; scroll-margin-top: 90px; }
.family-head { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }
.family-head h3 { margin: 0; font-family: "Space Grotesk", Inter, sans-serif; font-size: clamp(1.3rem, 2.4vw, 1.75rem); white-space: nowrap; }
.family-line { flex: 1; height: 2px; background: linear-gradient(90deg, var(--primary), transparent); transform-origin: left; }
.js .family-head .family-line { transform: scaleX(0); transition: transform 1.2s var(--ease-out) .3s; }
.js .family-head.in .family-line { transform: scaleX(1); }
.family-pill { flex-shrink: 0; background: var(--primary); color: #1a1405; font-weight: 700; font-size: .8rem; padding: 5px 14px; border-radius: 99px; text-transform: uppercase; letter-spacing: .04em; }

/* Selettore varianti (1/2/3/5 PC) */
.variant-pick { margin: 18px 0 6px; }
.variant-label { display: block; font-size: .85rem; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
.variant-list { display: flex; flex-wrap: wrap; gap: 10px; }
.variant { display: grid; text-align: center; min-width: 92px; padding: 10px 14px; border-radius: 14px; border: 2px solid var(--border); background: #fff; color: var(--text); transition: border-color .25s, transform .25s var(--ease-spring), box-shadow .25s; }
.variant b { font-size: 1.05rem; }
.variant small { color: var(--muted); font-weight: 600; }
.variant:hover { text-decoration: none; border-color: var(--primary); transform: translateY(-3px); }
.variant.active { border-color: var(--primary); background: #fff8e6; box-shadow: 0 8px 22px -8px rgba(240, 177, 29, .6); }

/* Office 365 in evidenza */
.feature-365 { position: relative; overflow: hidden; background: var(--ink); color: #fff; isolation: isolate; }
.feature-365::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 70% at 25% 50%, color-mix(in srgb, var(--c) 45%, transparent), transparent 70%); }
.blob-365 { width: 400px; height: 400px; background: var(--primary); opacity: .15; right: -100px; top: -100px; }
.feature-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; }
.feature-stage { position: relative; display: grid; place-items: center; min-height: 460px; }
.feature-stage .drag-hint { background: rgba(255, 255, 255, .1); color: #e2e8f0; }
.feature-info .lead { color: #cbd5e1; }
.feature-info .features li { color: #e2e8f0; }
.feature-info .price-box s { color: #94a3b8; }
.feature-365 .kicker { color: var(--primary); }

/* Hero pagine interne */
.page-hero { position: relative; overflow: hidden; background: var(--ink); color: #fff; padding: 72px 0 64px; isolation: isolate; }
.page-hero .blob { opacity: .3; }
.page-hero .lead { color: #cbd5e1; max-width: 620px; }
.page-hero .kicker { color: var(--primary); }

/* Guida */
.guide { scroll-margin-top: 90px; }
.guide-steps { list-style: none; counter-reset: s; padding: 0; margin: 20px 0 24px; display: grid; gap: 18px; }
.guide-steps li { counter-increment: s; display: flex; gap: 16px; }
.guide-steps li::before { content: counter(s); flex-shrink: 0; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: #fff8e6; color: var(--accent); font-weight: 800; border: 1px solid #f5d98a; }
.guide-steps h3 { font-size: 1rem; margin: 6px 0 2px; }
.guide-steps p { margin: 0; color: var(--muted); }
.help-box { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: linear-gradient(135deg, #fff8e6, #fff); border-color: #f5d98a; }
.help-box h3 { margin: 0 0 4px; }
.help-box p { margin: 0; }

/* Contatti */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 28px; align-items: start; }
.contact-cards { display: grid; gap: 16px; }
.contact-card { display: flex; gap: 18px; align-items: center; margin: 0; color: var(--text); text-decoration: none !important;
    transform: perspective(1000px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); }
.contact-card small { display: block; color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; }
.contact-card b { display: block; font-size: 1.15rem; }
.contact-icon { display: grid; place-items: center; width: 56px; height: 56px; flex-shrink: 0; border-radius: 16px; background: #fff8e6; font-size: 1.6rem; }
.contact-icon.wa { background: #dcfce7; }
.js .contact-card[data-reveal] { transition: transform .5s var(--ease-out), opacity .9s var(--ease-out) var(--d, 0s), translate .9s var(--ease-out) var(--d, 0s), filter .9s var(--ease-out) var(--d, 0s); }

/* WhatsApp */
.btn-whatsapp { background: #25d366; color: #fff; box-shadow: 0 8px 24px rgba(37, 211, 102, .35); }
.btn-whatsapp:hover { background: #1ebe5b; }
.wa-float { position: fixed; left: 20px; bottom: 20px; z-index: 95; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: #25d366; color: #fff; box-shadow: 0 10px 30px rgba(37, 211, 102, .45); transition: transform .3s var(--ease-spring); animation: waPulse 2.5s infinite; }
.wa-float svg { width: 30px; height: 30px; }
.wa-float:hover { transform: scale(1.1) rotate(-8deg); }
@keyframes waPulse {
    0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .55), 0 10px 30px rgba(37, 211, 102, .45); }
    70% { box-shadow: 0 0 0 18px rgba(37, 211, 102, 0), 0 10px 30px rgba(37, 211, 102, .45); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0), 0 10px 30px rgba(37, 211, 102, .45); }
}

/* Footer: vantaggi + pagamenti */
.site-footer { background: var(--ink); }
.site-footer h4 { color: var(--primary); }
.footer-perks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding-bottom: 36px; margin-bottom: 36px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.site-footer .footer-perks > * { display: flex; gap: 14px; align-items: center; color: #fff; margin: 0; text-decoration: none; }
.footer-perks small { display: block; color: #94a3b8; text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; }
.footer-perks b { font-size: 1.02rem; line-height: 1.35; }
.perk-icon { display: grid; place-items: center; width: 50px; height: 50px; flex-shrink: 0; border-radius: 14px; background: rgba(240, 177, 29, .14); border: 1px solid rgba(240, 177, 29, .3); font-size: 1.4rem; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; border-top-color: rgba(255, 255, 255, .08) !important; }
.pay-logos { display: flex; gap: 8px; align-items: center; }
.pay { display: inline-grid; place-items: center; height: 32px; min-width: 54px; padding: 0 10px; border-radius: 6px; background: #fff; font-weight: 900; font-size: .85rem; }
.pay-visa { color: #1a1f71; font-style: italic; letter-spacing: .02em; }
.pay-mc { grid-auto-flow: column; }
.pay-mc i { width: 20px; height: 20px; border-radius: 50%; background: #eb001b; }
.pay-mc i + i { background: #f79e1b; margin-left: -8px; mix-blend-mode: multiply; }
.pay-pp { color: #179bd7; font-style: italic; }
.pay-pp b { color: #253b80; }

@media (max-width: 1000px) {
    .feature-grid, .contact-grid { grid-template-columns: 1fr; }
    .footer-perks { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .family-head { flex-wrap: wrap; }
    .family-line { display: none; }
    .wa-float { width: 52px; height: 52px; left: 14px; bottom: 14px; }
    .feature-stage { min-height: 400px; }
}

/* Foto prodotto caricata dal pannello (al posto della scatola 3D) */
.product-photo { display: block; object-fit: contain; filter: drop-shadow(0 18px 24px rgba(15, 23, 42, .28)); position: relative; z-index: 1; }
.product-photo-sm { width: 72%; max-height: 190px; }
.product-photo-md { width: 230px; max-height: 300px; }
.product-photo-lg { width: 78%; max-width: 380px; max-height: 420px; }
.product-card:hover .product-photo { animation: floatY 2.4s ease-in-out infinite; }
/* Logo caricato da Admin → Header del sito */
.logo-img-custom { height: 44px; max-width: 200px; object-fit: contain; filter: none; }
.logo:hover .logo-img-custom { transform: none; }

/* Pagamento: Apple Pay, Google Pay, PayPal */
.pay-title { font-size: 1.15rem; margin: 22px 0 12px; }
.pay-wallets { display: grid; gap: 10px; margin-bottom: 10px; }
.pay-wallet:empty { display: none; }
.pay-wallet:not(:empty) { height: 48px; }
apple-pay-button { display: block; --apple-pay-button-width: 100%; --apple-pay-button-height: 48px; --apple-pay-button-border-radius: 24px; --apple-pay-button-padding: 0; --apple-pay-button-box-sizing: border-box; }
.pay-paypal { min-height: 10px; }
.pay-secure { margin-top: 10px; text-align: center; }