/* Contenitore principale dello shortcode */
.shortcode-process-container { display: flex; justify-content: center; width: 100%; max-width: 820px; margin: 0 auto; gap: 10px; }

/* Il singolo blocco (190px per il massimo respiro del testo) */
.s-block { display: flex; flex-direction: column; align-items: flex-start; width: 190px; flex-shrink: 0; position: relative; }

/* Il Cerchio (Allineato a sinistra, si alza in modo fluido e indipendente) */
.s-circle { width: 120px; height: 120px; border-radius: 50%; background: #fff; border: 5px solid rgba(115, 189, 200, 0.15); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); }

/* Icone */
.s-circle .fa, .s-circle .et-pb-icon { font-size: 36px; color: #73BDC8; line-height: 1; display: inline-block; }
.s-circle .et-pb-icon { font-family: 'ETmodules' !important; }

/* EFFETTO HOVER PERFETTO (Il cerchio si alza, la freccia NON si muove) */
.s-block:hover .s-circle { transform: translateY(-6px); }

/* LA FRECCIA (Spostata millimetricamente a destra a 125px per centrarla nello spazio tra i cerchi) */
.s-block:not(:last-child)::after { content: ''; position: absolute; left: calc(125px + 1rem); top: 60px; transform: translateY(-50%); width: 30px; border-top: 2px dashed #73BDC8; pointer-events: none; z-index: 1; }
.s-block:not(:last-child)::before { content: ''; position: absolute; left: calc(125px + 1rem + 23px); top: 60px; transform: translateY(-50%) rotate(45deg); width: 6px; height: 6px; border-top: 2px solid #73BDC8; border-right: 2px solid #73BDC8; z-index: 2; }

/* CONTENUTO TESTUALE (Titolo 16px, Descrizione 15px) */
.s-content { text-align: left; width: 100%; }
.s-content h4 { font-size: 16px; font-weight: 700; margin: 0 0 5px 0; color: #1a1a1a; line-height: 1.25; white-space: nowrap; }
.s-content p { font-size: 15px; color: #555; line-height: 1.4; margin: 0; }
.text-nowrap { white-space: nowrap; }

/* RESPONSIVE SMARTPHONE (Configurato a 2 Colonne / Griglia 2x2) */
@media (max-width: 767px) {
    .shortcode-process-container { flex-wrap: wrap; justify-content: space-around; gap: 30px 10px; }
    .s-block { width: 45%; max-width: 180px; align-items: center; }
    .s-content { text-align: center; }
    .s-content h4 { white-space: normal; font-size: 15px; }
    .s-content p .text-nowrap { white-space: normal; }
    .s-block::after, .s-block::before { display: none !important; }
}