/* =============================================
   REDESIGN — sezioni storiche del sito ridisegnate nello stile delle Guide
   Caricato per ultimo (dopo site-v2.css) su tutte le pagine. SOLO aspetto:
   testi, numeri, foto, configuratori e moduli restano invariati.
   Linguaggio comune: card bianche r.20 + ombra morbida · icone in quadratini
   gialli ruotati · numeri in riquadri gialli · card "vetro" sui fondi blu ·
   riga gialla in cima ai riquadri importanti. Creato il 30/09/2026.
   ============================================= */
:root {
  --rd-radius: 20px;
  --rd-tile: 48px;
  --rd-card-shadow: 0 6px 24px rgba(27,47,94,.09);
  --rd-card-shadow-hover: 0 18px 44px rgba(27,47,94,.16);
}

/* ---------- Intestazioni di sezione: niente più trattino sotto il titolo, spazio uniforme ---------- */
.v-divider { display: none !important; }
.section-header, .servizi-hd, .settori-hd, .tecniche-hd, .storia-hd, .stock-hd, .faq-hd, .svc-section-hd, .cfg-hd { margin-bottom: clamp(28px, 3vw, 44px) !important; }
.section-sub, .svc-section-hd p { max-width: 640px; margin-left: auto; margin-right: auto; }

/* Quadratino-icona comune */
.rd-tile, .svc-ico, .sost-icon, .feat-ico, .cont-ico, .grafica-card-ico, .step-icon, .tec-card-ico {
  border-radius: 14px !important;
}

/* ---------- Come scegliere (card a elenco) ---------- */
.svc-list-card {
  border: 1px solid rgba(27,47,94,.06) !important; border-radius: var(--rd-radius) !important;
  box-shadow: var(--rd-card-shadow); padding: 24px 22px !important; position: relative; overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition) !important;
}
.svc-list-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--sand), #ffe766); opacity: 0; transition: opacity var(--transition); }
.svc-list-card h4 { flex-direction: column; align-items: flex-start !important; gap: 12px !important; font-size: 16px !important; line-height: 1.3; }
.svc-ico { width: var(--rd-tile) !important; height: var(--rd-tile) !important; min-width: var(--rd-tile); background: var(--sand) !important; transform: rotate(-6deg); box-shadow: 0 8px 18px rgba(255,209,0,.35); display: grid !important; place-items: center; }
.svc-ico i { font-size: 1.05rem !important; color: var(--navy-dark) !important; animation: none !important; }
@media (hover: hover) {
  .svc-list-card:hover { transform: translateY(-6px); box-shadow: var(--rd-card-shadow-hover); }
  .svc-list-card:hover::before { opacity: 1; }
  .svc-list-card:hover .svc-ico { transform: rotate(0) scale(1.06); }
}

/* ---------- Come funziona: da cerchi su una linea a 3 card numerate ---------- */
.steps-grid { gap: clamp(16px, 2vw, 24px) !important; }
.steps-grid::before { display: none !important; }
.step-card {
  background: #fff; border-radius: var(--rd-radius); box-shadow: var(--rd-card-shadow);
  padding: 28px 26px 26px !important; text-align: left !important; border: 1px solid rgba(27,47,94,.05);
  display: flex; flex-direction: column; align-items: flex-start;
  transition: transform var(--transition), box-shadow var(--transition);
}
.step-number {
  width: 52px !important; height: 52px !important; border-radius: 16px !important; margin: 0 0 18px !important;
  background: var(--sand) !important; color: var(--navy-dark) !important; font-size: 1.35rem !important;
  transform: rotate(-6deg); box-shadow: 0 8px 20px rgba(255,209,0,.38) !important;
}
.step-number::before { display: none !important; }
.step-icon { position: absolute; top: 28px; right: 26px; width: 40px !important; height: 40px !important; margin: 0 !important; background: var(--off-white) !important; color: var(--navy) !important; font-size: 1rem !important; }
.step-title { font-size: 18px !important; margin-bottom: 8px !important; }
@media (hover: hover) { .step-card:hover { transform: translateY(-6px); box-shadow: var(--rd-card-shadow-hover); } .step-card:hover .step-number { transform: rotate(0) scale(1.06); } }

/* ---------- Settori (fondo blu): card vetro allineate a sinistra, come gli strumenti delle guide ---------- */
.settore { text-align: left !important; padding: 26px 22px !important; display: flex; flex-direction: column; align-items: flex-start; }
.settore i { width: var(--rd-tile) !important; height: var(--rd-tile) !important; font-size: 1.15rem !important; display: grid !important; place-items: center; margin: 0 0 16px !important; transform: rotate(-6deg); box-shadow: 0 8px 18px rgba(255,209,0,.25); }
.settore h3 { font-family: inherit !important; font-style: normal !important; font-weight: 700; font-size: 16px !important; }
@media (hover: hover) { .settore:hover i { transform: rotate(0) scale(1.08) !important; } }

/* ---------- Sostenibilità ---------- */
.sost-card {
  background: #fff !important; border-radius: var(--rd-radius) !important; box-shadow: var(--rd-card-shadow) !important;
  border: 1px solid rgba(27,47,94,.05) !important; padding: 22px !important; transition: transform var(--transition), box-shadow var(--transition);
}
.sost-icon { width: 44px !important; height: 44px !important; background: var(--navy) !important; color: var(--sand) !important; display: grid !important; place-items: center; margin-bottom: 14px !important; }
.sost-card h4 { font-size: 16px !important; }
@media (hover: hover) { .sost-card:hover { transform: translateY(-5px); box-shadow: var(--rd-card-shadow-hover) !important; } }

/* ---------- FAQ: domande come card, icona gialla ---------- */
.faq-list { gap: 12px !important; }
.faq-item { border-radius: 16px !important; border: 1px solid rgba(27,47,94,.07) !important; box-shadow: var(--rd-card-shadow) !important; }
.faq-q { color: var(--navy) !important; font-weight: 700 !important; }
.faq-q .faq-icon { width: 32px !important; height: 32px !important; border-radius: 10px !important; background: var(--sand-light) !important; }
.faq-item.open { background: #fff !important; box-shadow: inset 4px 0 0 var(--sand), var(--rd-card-shadow-hover) !important; }
.faq-item.open .faq-q .faq-icon { background: var(--sand) !important; }

/* ---------- Contatti (fondo blu) ---------- */
.cont-ico { width: 48px !important; height: 48px !important; min-width: 48px !important; background: var(--sand) !important; color: var(--navy-dark) !important; border: 0 !important; transform: rotate(-6deg); }
.cont-txt span { color: #fff; }
.orari-box { border-radius: var(--rd-radius) !important; backdrop-filter: blur(6px); }
.cbtn { border-radius: 100px !important; }
#contatti .cont-form input, #contatti .cont-form textarea, #contatti .cont-form select { border-radius: 12px !important; }
.cont-map, .cont-map iframe { border-radius: var(--rd-radius); overflow: hidden; }

/* ---------- Recensioni ---------- */
.rev-form-wrap { border-radius: 26px !important; overflow: hidden; }
.rev-trust-item i { width: 36px; height: 36px; border-radius: 11px; background: var(--sand-light); color: var(--navy); display: inline-grid; place-items: center; }

/* ---------- Numeri ---------- */
.numero-val { color: var(--sand) !important; }
.numero-label { color: rgba(255,255,255,.8) !important; letter-spacing: .08em; }

/* =============================================
   HOME
   ============================================= */
/* Servizi (griglia di foto): testi leggibili (erano 10–13px), overlay più deciso sotto il testo */
.serv-card { border-radius: var(--rd-radius) !important; }
.sc-overlay { opacity: 1 !important; background: linear-gradient(to top, rgba(8,15,38,.94) 0%, rgba(8,15,38,.55) 42%, rgba(8,15,38,.05) 75%) !important; }
.sc-body > i { width: 40px !important; height: 40px !important; border-radius: 12px !important; background: var(--sand) !important; color: var(--navy-dark) !important; border: 0 !important; transform: rotate(-6deg); }
.sc-body h3 { font-size: 16px !important; line-height: 1.25; }
.serv-card.featured .sc-body h3 { font-size: 22px !important; }
.sc-desc { font-size: 14px !important; line-height: 1.5 !important; color: rgba(255,255,255,.88) !important; }

/* Perché sceglierci */
.feat { flex-direction: column; gap: 12px !important; background: #fff; border-radius: 16px; padding: 18px; box-shadow: var(--rd-card-shadow); transition: transform var(--transition), box-shadow var(--transition); }
.feat-ico { width: 46px !important; height: 46px !important; min-width: 46px !important; background: var(--sand) !important; border: 0 !important; transform: rotate(-6deg); box-shadow: 0 8px 18px rgba(255,209,0,.3) !important; }
.feat-ico i { color: var(--navy-dark) !important; }
.feat h4 { font-size: 16px !important; }
.perche-badge { border-radius: 18px; }
.perche-badge .since { font-size: 12px !important; letter-spacing: .12em; }
@media (hover: hover) { .feat:hover { transform: translateY(-4px); box-shadow: var(--rd-card-shadow-hover); } }

/* Tecniche (carosello su fondo blu): testo della card attiva ben leggibile, puntini più grandi */
.tec-card { border-radius: var(--rd-radius) !important; }
.tec-card.is-active { background: rgba(255,255,255,.12) !important; }
.tec-card p { color: rgba(255,255,255,.85) !important; font-size: 15px !important; }
.tec-card h4 { font-size: 18px !important; }
.tec-card-ico { background: var(--sand) !important; color: var(--navy-dark) !important; transform: rotate(-6deg); }
.tec-category, .tec-tag { font-size: 12px !important; }
.tec-dot { width: 10px !important; height: 10px !important; padding: 7px !important; background-clip: content-box !important; box-sizing: content-box !important; }

/* Grafica */
.grafica-card-num { color: var(--sand) !important; opacity: 1 !important; }
.grafica-card-ico { background: var(--sand) !important; color: var(--navy-dark) !important; border: 0 !important; transform: rotate(-6deg); }

/* Storia: anni come pillole gialle, card bianche arrotondate */
.tl-card { border-radius: var(--rd-radius) !important; box-shadow: var(--rd-card-shadow) !important; border: 1px solid rgba(27,47,94,.06) !important; }
.tl-year { font-size: 12px !important; letter-spacing: .12em !important; background: var(--sand); color: var(--navy-dark) !important; padding: 5px 12px; border-radius: 100px; }
.tl-card h3 { font-size: 18px !important; }

/* Pronta consegna e catalogo */
.stock-note { font-size: 13px !important; max-width: 60em; }
.cat-section-count, .card-visual-badge { font-size: 12px !important; }
.cat-section-btn { border-radius: 16px !important; }
.product-card { border-radius: var(--rd-radius) !important; overflow: hidden; }

/* ---------- Telefono ---------- */
@media (max-width: 760px) {
  .step-card { padding: 22px 20px !important; }
  .settore { padding: 20px 16px !important; }
  .serv-card.featured .sc-body h3 { font-size: 19px !important; }
  .feat { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-list-card, .step-card, .sost-card, .feat { transition: none !important; }
}

/* Numeri dei passi come nelle guide: grassetto dritto, non corsivo */
.step-number { font-family: inherit !important; font-style: normal !important; font-weight: 800 !important; font-size: 1.2rem !important; }
/* Perché sceglierci: immagine in alto e ferma mentre scorrono le card (non più sospesa a metà) */
@media (min-width: 901px) {
  .perche-inner { align-items: start !important; }
  .perche-visual { position: sticky; top: calc(var(--header-h) + 40px); margin-top: 40px; }
}

/* ---------- Correzioni dal controllo di precisione (30/09) ---------- */
.badge-fast { background: #15803d !important; }                        /* verde più scuro: bianco su verde era 2,3:1, ora 5:1 */
.orario-row span { color: rgba(255,255,255,.78) !important; }           /* era 4,45:1 */
.hero-review-link { color: rgba(255,255,255,.92) !important; }
.cat-section-btn.open .cat-section-count { background: rgba(255,255,255,.1) !important; }
#stock-toggle-label { font-size: 13px !important; }
/* Catalogo su telefono: una card per riga (a due colonne erano larghe 170px: descrizione troncata e badge su 2 righe) */
@media (max-width: 560px) {
  .product-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; }
  .product-card .card-illustration { height: 132px !important; min-height: 0 !important; }
  .card-visual-badge { white-space: nowrap; }
  .card-desc { -webkit-line-clamp: 4 !important; line-clamp: 4; }
}
@media (max-width: 760px), (pointer: coarse) { .tec-dot { padding: 12px !important; } }