/* 
Theme Name:   Arweb
Theme URI:    https://arweb.it/
Description:  Arweb child theme of Hello Elementor
Author:       Arweb
Author URI:   https://arweb.it/
Template:     hello-elementor
Version:      3.0.0
Text Domain:  arweb-child
License:      GNU General Public License v3 or later.
License URI:  https://www.gnu.org/licenses/gpl-3.0.html
Tags:         flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* ================================================================================================ */
/* VARIABILI DARK THEME ARWEB                                                                       */
/* ================================================================================================ */

:root {
    --aw-bg:           #08142C;
    --aw-bg-2:         #0c1a36;
    --aw-bg-card:      rgba(255, 255, 255, 0.04);
    --aw-bg-card-hover:rgba(255, 255, 255, 0.07);
    --aw-border:       rgba(255, 255, 255, 0.08);
    --aw-border-hover: rgba(0, 191, 255, 0.4);

    --aw-cyan:         #00BFFFFC;
    --aw-cyan-dark:    #00b8d4;
    --aw-cyan-glow:    rgba(0, 191, 255, 0.15);

    --aw-text:         #ffffff;
    --aw-white:        #ffffff; /* alias di --aw-text, usato in vari blocchi CSS */
    --aw-text-muted:   rgba(255, 255, 255, 0.6);
    --aw-text-faint:   rgba(255, 255, 255, 0.35);

    --aw-radius:       12px;
    --aw-radius-sm:    8px;
    --aw-transition:   0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    /* Mapping variabili Elementor */
    --e-global-color-primary:   #00BFFFFC;
    --e-global-color-secondary: #00b8d4;
    --e-global-color-text:      #ffffff;
    --e-global-color-accent:    #00BFFFFC;
}

/* ================================================================================================ */
/* RESET BASE                                                                                       */
/* ================================================================================================ */

body {
    background-color: var(--aw-bg);
    color: var(--aw-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ================================================================================================ */
/* FONT INTER — applicato globalmente con specificità alta per battere Elementor/Hello Elementor    */
/* ================================================================================================ */

html body,
html body input,
html body button,
html body select,
html body textarea,
html body p,
html body span,
html body div,
html body a,
html body li,
html body label,
html body h1, html body h2, html body h3,
html body h4, html body h5, html body h6,
html body .elementor-heading-title,
html body .elementor-widget-heading .elementor-heading-title,
html body .elementor-button,
html body .elementor-widget-text-editor,
html body .elementor-widget-text-editor *,
html body .elementor-widget-button .elementor-button,
html body .elementor-icon-list-text,
html body .elementor-tab-title,
html body .elementor-tab-content {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif !important;
}

html body h1, html body h2, html body h3,
html body h4, html body h5, html body h6,
html body .elementor-heading-title {
    letter-spacing: -0.02em;
}

/* ================================================================================================ */
/* TIPOGRAFIA LINK                                                                                  */
/* ================================================================================================ */

p a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 0;
    line-height: 1;
    transition: color .25s;
    color: var(--aw-cyan);
}

p a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--aw-cyan);
    transition: background-color .25s ease-in-out, width .36s cubic-bezier(.51,.5,.07,.99);
    backface-visibility: hidden;
}

p a:hover {
    color: var(--aw-cyan-dark);
}

p a:hover::after {
    animation: animate-underline-from-left .7s cubic-bezier(.45,.29,0,.82) forwards;
    width: 100%;
}

/* ================================================================================================ */
/* BREADCRUMBS                                                                                      */
/* ================================================================================================ */

#breadcrumbs span.separator {
    width: 4px;
    height: 7px;
    margin: 0 5px;
}

#breadcrumbs span.separator svg path {
    stroke: rgba(255, 255, 255, 0.35);
}

#breadcrumbs a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 0;
    line-height: 1;
    transition: color .25s;
    color: var(--aw-text-muted);
}

#breadcrumbs a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.2);
    transition: background-color .25s ease-in-out, width .36s cubic-bezier(.51,.5,.07,.99);
    backface-visibility: hidden;
}

#breadcrumbs a:hover {
    color: var(--aw-cyan);
}

#breadcrumbs a:hover::after {
    animation: animate-underline-from-left .7s cubic-bezier(.45,.29,0,.82) forwards;
    width: 100%;
    background-color: var(--aw-cyan);
}

/* ================================================================================================ */
/* ANIMAZIONI                                                                                       */
/* ================================================================================================ */

@keyframes animate-underline-from-left {
    0%   { transform: scaleX(1);  transform-origin: right; }
    37%  { transform: scaleX(0);  transform-origin: right; }
    38%  { transform: scaleX(0);  transform-origin: left;  }
    100% { transform: scaleX(1);  transform-origin: left;  }
}

@keyframes glow-pulse {
    0%, 100% { box-shadow: 0 0 20px var(--aw-cyan-glow); }
    50%       { box-shadow: 0 0 40px rgba(0, 191, 255, 0.3); }
}

/* ================================================================================================ */
/* HEADER                                                                                           */
/* ================================================================================================ */

#arweb-navigation .elementor-widget-container {
    background: rgba(255, 255, 255, 0.2);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
}

.text-gradient {
    color: #00D4FF;
    background-image: linear-gradient(45deg, #00D4FF , #FFFFFF 70%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.text-glow,
.text-glow .elementor-widget-container {
    overflow: visible !important;
}

.text-glow::before {
    content: '';
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 60%;
    left: 50%;
    top: 40%;
    transform: translateX(-50%);
    background: radial-gradient(
        ellipse 50% 50% at 50% 50%,
        rgba(0, 180, 220, 0.30) 0%,
        rgba(0, 100, 180, 0.12) 50%,
        transparent 100%
    );
    pointer-events: none;
}

/* ================================================================================================ */
/* BOTTONI                                                                                          */
/* ================================================================================================ */

/* Bottone principale cyan */
.btn-primary-aw .elementor-button {
    background: var(--aw-cyan) !important;
    color: #030d1a !important;
    font-weight: 700;
    border-radius: 6px;
    border: none !important;
    transition: all var(--aw-transition);
}

.btn-primary-aw .elementor-button:hover {
    background: var(--aw-cyan-dark) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--aw-cyan-glow);
}

/* Bottone outline */
.btn-outline-aw .elementor-button {
    background: transparent !important;
    color: var(--aw-cyan) !important;
    border: 1px solid var(--aw-cyan) !important;
    border-radius: 6px;
    transition: all var(--aw-transition);
}

.btn-outline-aw .elementor-button:hover {
    background: var(--aw-cyan-glow) !important;
    box-shadow: 0 0 20px var(--aw-cyan-glow);
}

/* Bottone freccia (btn-more) */
.btn-more .elementor-button-icon {
    transition: transform 0.3s;
}

.btn-more:hover .elementor-button-icon {
    transform: translateX(5px);
}

/* Bottone underline */
.button-underline .elementor-button {
    position: relative;
    border-radius: 0;
    background: transparent !important;
    color: var(--aw-text) !important;
}

.button-underline .elementor-button .elementor-button-text {
    transition: color .25s;
}

.button-underline .elementor-button::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--aw-border);
    transition: background-color .25s ease-in-out, width .36s cubic-bezier(.51,.5,.07,.99);
    backface-visibility: hidden;
}

.button-underline .elementor-button:hover {
    color: var(--aw-cyan) !important;
}

.button-underline .elementor-button:hover::after {
    animation: animate-underline-from-left .7s cubic-bezier(.45,.29,0,.82) forwards;
    background-color: var(--aw-cyan);
    width: 100%;
}

.bg-glass {
    background: rgba(6, 14, 37, 0.8);
    -webkit-backdrop-filter: blur(10px) saturate(80%);
    backdrop-filter: blur(10px) saturate(80%);
}


/* ================================================================================================ */
/* CARD / BOX                                                                                       */
/* ================================================================================================ */

.box-card-dark {
    background: var(--aw-bg-card);
    border: 1px solid var(--aw-border);
    border-radius: var(--aw-radius);
    transition: all var(--aw-transition);
}

.box-card-dark:hover {
    background: var(--aw-bg-card-hover);
    border-color: var(--aw-border-hover);
    box-shadow: 0 0 30px var(--aw-cyan-glow);
}

/* Box invertito (su sfondo chiaro) */
.box-inverted p a {
    color: #030d1a;
}

.box-inverted p a::after {
    background-color: #030d1a;
}

/* ================================================================================================ */
/* UTILITY LAYOUT                                                                                   */
/* ================================================================================================ */

.hero-full-height {
    min-height: 100vh !important;
}

@media (max-width: 900px) {
    .hero-full-height {
        min-height: 0 !important;
    }
}

.wrapper-container {
    padding-left: 30px !important;
    padding-right: 30px !important;
}

@media (min-width: 768px) and (max-width: 1024px) {
    .wrapper-container {
        padding-left: 25px !important;
        padding-right: 25px !important;
    }
}

@media (max-width: 767px) {
    .wrapper-container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

.dialog-close-button,
.dialog-lightbox-close-button {
    position: fixed !important;
    top: 30px !important;
    right: 30px !important;
}

/* ================================================================================================ */
/* TABS ELEMENTOR                                                                                   */
/* ================================================================================================ */

.e-n-tabs-heading {
    z-index: 1;
}

.elementor-widget-n-tabs .e-n-tabs-content {
    transform: translateY(-1px);
}

/* ================================================================================================ */
/* HOTSPOT                                                                                          */
/* ================================================================================================ */

.e-hotspot__icon svg g {
    transform: scale(0.9);
    transform-origin: center;
}

/* ================================================================================================ */
/* COUNTER                                                                                          */
/* ================================================================================================ */

.elementor-counter-title {
    text-align: center;
    display: block;
}

/* ================================================================================================ */
/* FORM CF7 — DARK THEME                                                                            */
/* ================================================================================================ */

.wpcf7-response-output {
    border: 1px solid var(--aw-border) !important;
    padding: 15px 20px !important;
    font-size: 16px;
    color: var(--aw-text-muted);
    margin: 20px 0 0 0 !important;
    border-radius: var(--aw-radius-sm);
}

/* Grid layout form */
.wpcf7-form .form-wrapper-1-col,
.wpcf7-form .form-wrapper-2-col,
.wpcf7-form .form-wrapper-3-col,
.wpcf7-form .form-wrapper-4-col {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0 -12px;
}

.wpcf7-form .form-wrapper-1-col .form-item  { width: 100%;   padding: 0 12px; margin: 0 0 24px 0; position: relative; }
.wpcf7-form .form-wrapper-2-col .form-item  { width: 50%;    padding: 0 12px; margin: 0 0 24px 0; position: relative; }
.wpcf7-form .form-wrapper-3-col .form-item  { width: 33.33%; padding: 0 12px; margin: 0 0 20px 0; position: relative; }
.wpcf7-form .form-wrapper-4-col .form-item  { width: 25%;    padding: 0 12px; margin: 0 0 20px 0; position: relative; }

.wpcf7-form .form-wrapper-1-col .form-item p,
.wpcf7-form .form-wrapper-2-col .form-item p,
.wpcf7-form .form-wrapper-3-col .form-item p,
.wpcf7-form .form-wrapper-4-col .form-item p { margin: 0; }

@media (max-width: 767px) {
    .wpcf7-form .form-wrapper-2-col .form-item,
    .wpcf7-form .form-wrapper-3-col .form-item,
    .wpcf7-form .form-wrapper-4-col .form-item { width: 100%; }
}

/* Label dark */
.wpcf7-form .form-wrapper-1-col .form-item label,
.wpcf7-form .form-wrapper-2-col .form-item label,
.wpcf7-form .form-wrapper-3-col .form-item label,
.wpcf7-form .form-wrapper-4-col .form-item label {
    color: var(--aw-text-muted);
    font-size: 13px;
    margin-bottom: 8px;
    display: block;
    line-height: 1;
    font-weight: 500;
    pointer-events: none;
    transition: all 0.2s ease;
}

.wpcf7-form .form-wrapper-1-col .form-item label::after,
.wpcf7-form .form-wrapper-2-col .form-item label::after,
.wpcf7-form .form-wrapper-3-col .form-item label::after,
.wpcf7-form .form-wrapper-4-col .form-item label::after { display: none !important; }

/* Input dark */
.wpcf7-form .form-wrapper-1-col .form-item input,
.wpcf7-form .form-wrapper-2-col .form-item input,
.wpcf7-form .form-wrapper-3-col .form-item input,
.wpcf7-form .form-wrapper-4-col .form-item input {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--aw-border) !important;
    border-radius: var(--aw-radius-sm);
    padding: 0 16px !important;
    width: 100%;
    font-size: 15px;
    height: 50px;
    line-height: 50px;
    color: var(--aw-text) !important;
    outline: none;
    box-shadow: none;
    transition: all 0.3s ease;
}

.wpcf7-form .form-wrapper-1-col .form-item input:focus,
.wpcf7-form .form-wrapper-2-col .form-item input:focus,
.wpcf7-form .form-wrapper-3-col .form-item input:focus,
.wpcf7-form .form-wrapper-4-col .form-item input:focus {
    border-color: var(--aw-cyan) !important;
    background: rgba(0, 191, 255, 0.05) !important;
    box-shadow: 0 0 0 3px var(--aw-cyan-glow);
}

.wpcf7-form .form-wrapper-1-col .form-item input::placeholder,
.wpcf7-form .form-wrapper-2-col .form-item input::placeholder,
.wpcf7-form .form-wrapper-3-col .form-item input::placeholder,
.wpcf7-form .form-wrapper-4-col .form-item input::placeholder {
    color: var(--aw-text-faint);
}

.wpcf7-form .form-wrapper-1-col .form-item input.error,
.wpcf7-form .form-wrapper-2-col .form-item input.error,
.wpcf7-form .form-wrapper-3-col .form-item input.error,
.wpcf7-form .form-wrapper-4-col .form-item input.error {
    border-color: #ff4d4d !important;
}

/* Full width override */
.wpcf7-form .form-wrapper-1-col.form-wrap-fields-full .form-item,
.wpcf7-form .form-wrapper-2-col.form-wrap-fields-full .form-item,
.wpcf7-form .form-wrapper-3-col.form-wrap-fields-full .form-item,
.wpcf7-form .form-wrapper-4-col.form-wrap-fields-full .form-item { width: 100%; }

/* -------------------------------- Textarea ----------------------------------- */

.wpcf7-form .form-item-textarea {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
}

.wpcf7-form .form-item-textarea label {
    position: absolute;
    color: var(--aw-text-faint);
    font-size: 15px;
    top: 16px;
    left: 0;
    pointer-events: none;
    transition: all 0.2s ease;
}

.wpcf7-form .form-item-textarea label::after { display: none !important; }

.wpcf7-form .form-item-textarea textarea {
    background: rgba(255, 255, 255, 0.05) !important;
    border: none;
    border-bottom: 1px solid var(--aw-border);
    padding: 16px 0 !important;
    width: 100%;
    font-size: 15px;
    color: var(--aw-text) !important;
    outline: none;
    box-shadow: none;
    resize: vertical;
    transition: all 0.3s ease;
    border-radius: 0;
    min-height: 120px;
}

.wpcf7-form .form-item-textarea textarea:focus,
.wpcf7-form .form-item-textarea textarea:not(:placeholder-shown) {
    border-color: var(--aw-cyan);
    box-shadow: none;
}

.wpcf7-form .form-item-textarea textarea:focus ~ label,
.wpcf7-form .form-item-textarea textarea:not(:placeholder-shown) ~ label {
    transform: translateY(-22px);
    font-size: 11px;
    color: var(--aw-cyan);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* -------------------------------- Select ----------------------------------- */

.wpcf7-form .select-holder {
    position: relative;
    margin: 0 0 28px 0;
}

.wpcf7-form .select-holder label {
    color: var(--aw-text-muted);
    font-size: 13px;
    margin-bottom: 8px;
    display: block;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-weight: 500;
}

.wpcf7-form .select-holder label::after { display: none !important; }

.wpcf7-form .select-holder .select-inner {
    position: relative;
}

.wpcf7-form .select-holder .select-inner select {
    appearance: none;
    -webkit-appearance: none;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--aw-border);
    border-radius: var(--aw-radius-sm);
    padding: 0 50px 0 16px !important;
    width: 100%;
    font-size: 15px;
    height: 50px;
    line-height: 50px;
    color: var(--aw-text) !important;
    cursor: pointer;
    outline: none;
    box-shadow: none;
    transition: all 0.3s ease;
}

.wpcf7-form .select-holder .select-inner select:focus {
    border-color: var(--aw-cyan);
    box-shadow: 0 0 0 3px var(--aw-cyan-glow);
    outline: 0;
}

.wpcf7-form .select-holder .select-inner select option {
    background-color: var(--aw-bg-2);
    color: var(--aw-text);
    padding: 10px;
    font-size: 15px;
}

.wpcf7-form .select-holder .select-inner::after {
    content: "";
    position: absolute;
    pointer-events: none;
    right: 0;
    top: 0;
    height: 50px;
    width: 50px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="11.828" height="6.914" viewBox="0 0 11.828 6.914"><path d="M0,0,4.5,4.5,0,9" transform="translate(10.414 1.414) rotate(90)" fill="none" stroke="%2300BFFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></svg>');
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.wpcf7-form .select-holder .select-inner select.error {
    border-color: #ff4d4d;
}

/* -------------------------------- Checkbox dark ----------------------------------- */

@supports (-webkit-appearance: none) {
    .wpcf7-form input[type="checkbox"],
    .wpcf7-form input[type="radio"] {
        appearance: none;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.25);
        display: inline-block;
        height: 18px !important;
        width: 18px !important;
        margin-right: 0;
        outline: none;
        padding: 0;
        position: relative;
        top: 0;
        border-radius: 3px;
        transition: all 0.2s ease;
        flex-shrink: 0;
    }

    .wpcf7-form input[type="radio"] {
        border-radius: 50%;
    }

    .wpcf7-form input[type="checkbox"]:hover,
    .wpcf7-form input[type="radio"]:hover {
        border-color: var(--aw-cyan);
        cursor: pointer;
    }

    .wpcf7-form input[type="checkbox"]:checked,
    .wpcf7-form input[type="radio"]:checked {
        background-color: var(--aw-cyan);
        border-color: var(--aw-cyan);
        background-size: 60% auto !important;
        background-position: 50% 50% !important;
        background-repeat: no-repeat;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' viewBox='0 0 12 9'%3E%3Cpath fill='none' stroke='%23030d1a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 4l3.5 3.5L11 1'/%3E%3C/svg%3E");
    }

    .wpcf7-form input[type="checkbox"]:disabled,
    .wpcf7-form input[type="radio"]:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }
}

/* -------------------------------- Privacy / consent ----------------------------------- */

.wpcf7-form .form-consent {
    margin-bottom: 20px;
}

.wpcf7-form .form-consent .wpcf7-list-item {
    margin: 0;
    padding: 0;
}

.wpcf7-form .form-consent label {
    font-size: 14px;
    color: var(--aw-text-muted);
    display: flex;
    gap: 10px;
    align-items: flex-start;
    cursor: pointer;
}

.wpcf7-form .form-consent label span {
    flex: 1;
}

.wpcf7-form .form-consent label a {
    color: var(--aw-cyan);
    text-decoration: underline;
}

.wpcf7-form .privacy {
    margin: 0 0 20px 0;
    font-size: 14px;
    color: var(--aw-text-muted);
}

.wpcf7-form .privacy a {
    color: var(--aw-cyan);
    text-decoration: underline;
}

/* -------------------------------- Box container form ----------------------------------- */

.wpcf7-form .fields-custom {
    padding: 40px;
    background: var(--aw-bg-card);
    border-radius: var(--aw-radius);
    border: 1px solid var(--aw-border);
}

@media (max-width: 1023px) {
    .wpcf7-form .fields-custom { padding: 28px; }
}

@media (max-width: 767px) {
    .wpcf7-form .fields-custom { padding: 20px; }
}

/* -------------------------------- Upload file ----------------------------------- */

.wpcf7-form input[type=file]::file-selector-button {
    border: 1px solid var(--aw-border);
    padding: 5px 12px !important;
    height: auto !important;
    border-radius: 4px;
    color: var(--aw-text);
    background-color: var(--aw-bg-card);
    transition: 0.3s;
    font-size: 13px;
    margin-right: 10px;
    cursor: pointer;
}

.wpcf7-form input[type=file]::file-selector-button:hover {
    background-color: var(--aw-cyan-glow);
    border-color: var(--aw-cyan);
}

.wpcf7-form .file-holder {
    position: relative;
}

.wpcf7-form .file-holder::after {
    content: "";
    height: 50px;
    line-height: 50px;
    position: absolute;
    pointer-events: none;
    right: 0;
    top: 0;
    width: 50px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="19.5" height="19.811" viewBox="0 0 19.5 19.811"><path d="M3,16.5v2.25A2.25,2.25,0,0,0,5.25,21h13.5A2.25,2.25,0,0,0,21,18.75V16.5M7.5,7.5,12,3m0,0,4.5,4.5M12,3V16.5" transform="translate(-2.25 -1.939)" fill="none" stroke="%2300BFFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></svg>');
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

/* ================================================================================================ */
/* WOOCOMMERCE (base)                                                                               */
/* ================================================================================================ */

.add_to_cart_button {
    display: none !important;
}

.woocommerce-Price-amount {
    color: var(--aw-cyan);
}

.woocommerce-breadcrumb a {
    font-weight: 600;
    color: var(--aw-cyan);
}


/* === ARWEB SERVIZIO PACK START === */

/* ============================================================
   ARWEB - SINGLE SERVIZIO (e pattern riusabili)
   ============================================================ */


/* ============================================================
   1. HERO SERVIZIO
   ============================================================ */
/* Wrapper boxed di default per tutte le .container del single-servizio
   (le sezioni con grid override mantengono il grid, ma ereditano il max-width) */
.aw-single-servizio .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.aw-serv-hero {
    position: relative;
    padding: 200px 0 10px;
    overflow-x: clip;
}
.aw-serv-hero .container {
    display: flex;
    justify-content: space-between;
    gap: 60px;
    align-items: center;
}

@media (max-width: 767px) {
    .aw-serv-hero {
        padding: 120px 0 20px;
    }
    .aw-serv-hero .container {
        flex-direction: column;
        gap: 40px;
    }
}

.divider-bottom {
    position: relative;
}

.divider-bottom::before {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 1px;
    background: url('./imgs/service-divider.svg') no-repeat center center;
    opacity: 0.5;
    pointer-events: none;
}
.divider-top {
    position: relative;
}

.divider-top::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 1px;
    background: url('./imgs/service-divider.svg') no-repeat center center;
    opacity: 0.5;
    pointer-events: none;
}
.divider-top-bottom {
    position: relative;
}
.divider-top-bottom::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 1px;
    background: url('./imgs/service-divider.svg') no-repeat center center;
    opacity: 0.5;
    pointer-events: none;
}
.divider-top-bottom::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 1px;
    background: url('./imgs/service-divider.svg') no-repeat center center;
    opacity: 0.5;
    pointer-events: none;
}

.aw-serv-hero__content {
    max-width: 700px;
}
.aw-serv-hero__eyebow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--aw-cyan);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 40px;
}
.aw-serv-hero__eyebow::before {
    content: '';
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--aw-cyan);
}
.aw-serv-hero__logo {
    margin-bottom: 28px;
    line-height: 0;
}
.aw-serv-hero__logo img {
    max-width: 700px;
    width: auto;
    height: 90px;
    display: block;
}

.aw-serv-hero__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--aw-cyan);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 24px;
}
.aw-serv-hero__label::before {
    content: '';
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--aw-cyan);
}
.aw-serv-hero__title {
    font-size: clamp(36px, 5vw, 64px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--aw-white);
    margin: 0 0 24px;
}
.aw-serv-hero__title span { color: var(--aw-cyan); display: block; }
.aw-serv-hero__subtitle {
    font-size: 30px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--aw-white);
}
.aw-serv-hero__subtitle span { color: var(--aw-cyan); }
.aw-serv-hero__illustration img {
    width: 100%;
    height: auto;
    max-width: 520px;
    margin-left: auto;
    display: block;
}
@media (max-width: 900px) {
    .aw-serv-hero .container { grid-template-columns: 1fr; gap: 32px; }
    .aw-serv-hero__illustration img { max-width: 320px; margin: 0 auto; }
}

@media (max-width: 767px) {
    .aw-serv-hero__logo img {
        height: 50px;
        max-width: 100%;
    }
    .aw-serv-hero__subtitle {
        font-size: 20px;
    };
}


/* ============================================================
   2. INTRO 2 COLONNE (immagine + testo)
   ============================================================ */
.aw-serv-intro { padding: 90px 0; }
.aw-serv-intro .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
    align-items: center;
}
.aw-serv-intro__image {
    border: 1px solid #70707070;
    border-radius: 24px;
    overflow: hidden;
}
.aw-serv-intro__image img {
    width: 100%;
    height: auto;
    display: block;
}
.aw-serv-intro__title {
    font-size: clamp(28px, 3vw, 36px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--aw-white);
    margin: 0 0 35px;
    position: relative;
}
.aw-serv-intro__title span { color: var(--aw-cyan); }
.aw-serv-intro__text {
    color: var(--aw-text);
    font-size: 16px;
    line-height: 1.7;
}
.aw-serv-intro__text p { margin-bottom: 14px; }
@media (max-width: 900px) {
    .aw-serv-intro .container { grid-template-columns: 1fr; gap: 32px; }
}

/* ============================================================
   3. PROBLEMA
   ============================================================ */
.aw-serv-problem { padding: 60px 0; }
.aw-serv-problem .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
    align-items: center;
}

@media (max-width: 900px) {
    .aw-serv-problem .container { grid-template-columns: 1fr; gap: 32px; }
}

.aw-serv-problem-title {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--aw-white);
    margin: 0 0 24px;
    position: relative;
}
.aw-serv-problem-title span { color: var(--aw-cyan); }
.aw-serv-problem-text {
    color: var(--aw-text);
    font-size: 16px;
    line-height: 1.7;
}
.aw-serv-problem-text p { margin-bottom: 14px; }
.aw-serv-problem-text p strong {
    color: var(--aw-cyan);
    font-weight: 600;
}

.aw-serv-problem-text ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.aw-serv-problem-text ul li {
    position: relative;
    padding-left: 0;
    margin-bottom: 16px;
    color: var(--aw-text);
    font-size: 17px;
    line-height: 1.6;
    font-weight: 400;
};                                 



/* ============================================================
   3. SOLUZIONE
   ============================================================ */

.elementor-kit-12 h3 {
  text-decoration: none !important;
}
.aw-serv-solution { padding: 60px 0; }
.aw-serv-block-title {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--aw-white);
    margin: 0 0 24px;
    position: relative;
}
.aw-serv-block-title span { color: var(--aw-cyan); }
.aw-serv-block-text {
    color: var(--aw-text);
    font-size: 16px;
    line-height: 1.7;
}
.aw-serv-block-text p { margin-bottom: 14px; }
.aw-serv-cols-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
    margin-top: 48px;
}
@media (max-width: 900px) {
    .aw-serv-cols-2 { grid-template-columns: 1fr; gap: 32px; }
}

.elementor-kit-12 h3 {
    text-decoration: none !important;
}

.aw-serv-block-text ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.aw-serv-block-text ul li {
    position: relative;
    padding-left: 32px;
    margin-bottom: 16px;
    color: var(--aw-text);
    font-size: 17px;
    line-height: 1.6;
    font-weight: 400;
}

.aw-serv-block-text ul li:before {
    content: '';
    position: absolute;
    left: 0; top: 4px;
    width: 18px; height: 18px;
    background: var(--aw-cyan);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z' fill='black'/></svg>") center/contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z' fill='black'/></svg>") center/contain no-repeat;
}


/* ============================================================
   4. LISTA "COSA PUOI INCLUDERE"
   ============================================================ */
.aw-serv-includes { list-style: none; margin: 0; padding: 0; }
.aw-serv-includes li {
    position: relative;
    padding-left: 32px;
    margin-bottom: 16px;
    color: var(--aw-text);
    font-size: 15px;
    line-height: 1.6;
    font-weight: 400;
}
.aw-serv-includes li::before {
    content: '';
    position: absolute;
    left: 0; top: 4px;
    width: 18px; height: 18px;
    background: var(--aw-cyan);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z' fill='black'/></svg>") center/contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z' fill='black'/></svg>") center/contain no-repeat;
}
.aw-serv-includes strong {
    color: var(--aw-white);
    font-weight: 600;
    display: block;
    margin-bottom: 2px;
}


/* ============================================================
   5. BANNER CTA CENTRALE
   ============================================================ */
.aw-serv-banner { padding: 40px 0; }
.aw-serv-banner__inner {
    background: linear-gradient(135deg, rgba(0,191,255,0.08), rgba(0,191,255,0.02));
    border: 1px solid var(--aw-border);
    border-radius: var(--aw-radius, 16px);
    padding: 40px 48px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 32px;
    position: relative;
    overflow: hidden;
}
.aw-serv-banner__title {
    font-size: 22px;
    font-weight: 700;
    color: var(--aw-white);
    margin: 0 0 6px;
}
.aw-serv-banner__text {
    color: var(--aw-text);
    font-size: 15px;
    margin: 0;
}
.aw-serv-banner__cta .btn {
    background: var(--aw-cyan);
    color: var(--aw-bg);
    padding: 14px 28px;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform .2s ease, box-shadow .2s ease;
}
.aw-serv-banner__cta .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0,191,255,0.25);
}
@media (max-width: 700px) {
    .aw-serv-banner__inner::after {
        display: none;
    }
    .aw-serv-banner__inner { grid-template-columns: 1fr; text-align: center; padding: 28px; }

    .aw-serv-banner__inner > * {
        padding-right: 0 !important;
    }
}

h3 {
    text-decoration: none !important;
}

/* ============================================================
   6. RISULTATO - 4 COLONNE
   ============================================================ */
.aw-serv-risultato { padding: 60px 0; }
.aw-serv-risultato__cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    margin-top: 48px;
}
@media (min-width: 1101px) {
    .aw-serv-risultato__cols:has(.aw-serv-risultato__col:only-child) {
        grid-template-columns: 1fr;
    }
    .aw-serv-risultato__cols:has(.aw-serv-risultato__col:nth-child(2):last-child) {
        grid-template-columns: repeat(2, 1fr);
    }
    .aw-serv-risultato__cols:has(.aw-serv-risultato__col:nth-child(3):last-child) {
        grid-template-columns: repeat(3, 1fr);
    }
}
.aw-serv-risultato__col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    gap: 30px;
    width: 100%;
    flex-wrap: wrap;
}
.aw-serv-risultato__col li {
    position: relative;
    padding-left: 50px;
    margin-bottom: 0;
    color: var(--aw-text);
    font-size: 17px;
    line-height: 1.5;
    flex: 0 0 calc(50% - 15px);
    max-width: calc(50% - 15px);
}
@media (max-width: 700px) {
    .aw-serv-risultato__col li {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.aw-serv-risultato__col li .emoji {
    position: absolute;
    left: 0;
    top: 2px;
    width: 30px !important;
    height: 30px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

@media (max-width: 1100px) {
    .aw-serv-risultato__cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .aw-serv-risultato__cols { grid-template-columns: 1fr; }
}


/* ============================================================
   7. CARDS (PATTERN RIUSABILE OVUNQUE)
   ============================================================ */
.aw-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 40px;
}
.aw-card {
    background: var(--aw-bg-card);
    border: 1px solid var(--aw-border);
    border-radius: var(--aw-radius, 12px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .25s ease, border-color .25s ease;
    text-decoration: none;
}
.aw-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0,191,255,0.4);
}
.aw-card__image {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    position: relative;
}
.aw-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}
.aw-card:hover .aw-card__image img { transform: scale(1.05); }
.aw-card__body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.aw-card__tag {
    display: inline-flex;
    align-self: flex-start;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(0,191,255,0.1);
    color: var(--aw-cyan);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
}
.aw-card__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--aw-white);
    line-height: 1.3;
    margin: 0 0 12px;
}
.aw-card__excerpt {
    color: var(--aw-text-muted);
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 20px;
    flex: 1;
}
.aw-card__link {
    color: var(--aw-cyan);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap .2s ease;
}
.aw-card__link:hover { gap: 10px; }
@media (max-width: 900px) {
    .aw-cards-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   8. FAQ ACCORDION
   ============================================================ */
.aw-faq { margin-top: 40px; }

/* Item chiuso: separatore sottile sotto. L'ultima FAQ non lo prende. */
.aw-faq__item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    transition: background .3s ease, border-color .3s ease;
}
.aw-faq__item:last-child {
    border-bottom: none;
}

/* Layout grid: num sopra a q (colonna sx), icon a destra (centrata sull'altezza) */
.aw-faq__head {
    width: 100%;
    background: none;
    border: none;
    padding: 32px 28px;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "num  icon"
        "q    icon";
    column-gap: 28px;
    row-gap: 10px;
    cursor: pointer;
    color: var(--aw-white);
    text-align: left;
}

/* Numero "01." cyan, più grande (era 12px) */
.aw-faq__num {
    grid-area: num;
    color: var(--aw-cyan);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1;
}

.aw-faq__q {
    grid-area: q;
    font-size: clamp(16px, 1.4vw, 18px);
    font-weight: 700;
    line-height: 1.4;
    transition: color .25s ease;
}

/* Icona: cerchio con SVG dentro, centrata verticalmente sull'intera area num+q */
.aw-faq__icon {
    grid-area: icon;
    align-self: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background-color: transparent;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='17.498' height='14.996' viewBox='0 0 17.498 14.996'><path d='M17.316,7.939a.627.627,0,0,0,0-.883L10.441.182a.624.624,0,0,0-.883.883l5.809,5.809H.625a.625.625,0,0,0,0,1.25H15.367L9.559,13.932a.624.624,0,0,0,.883.883l6.875-6.875Z' fill='%233d578e'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px auto;
    flex-shrink: 0;
    transition: background-color .25s ease, border-color .25s ease;
}

/* Hover: numero/domanda virano leggermente cyan */
.aw-faq__head:hover .aw-faq__q { color: var(--aw-cyan); }
.aw-faq__head:hover .aw-faq__icon { border-color: var(--aw-cyan); }

/* ============================================================
   Stato APERTO — card scura, numero/domanda cyan, freccia ↓
   ============================================================ */
.aw-faq__item.is-open {
    background: var(--aw-bg-2);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 24px;
    margin: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.aw-faq__item.is-open .aw-faq__q {
    color: var(--aw-cyan);
}
.aw-faq__item.is-open .aw-faq__icon {
    border-color: rgba(0, 191, 255, 0.4);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14.996' height='17.498' viewBox='0 0 14.996 17.498'><path d='M7.057,17.316a.627.627,0,0,0,.883,0l6.875-6.875a.624.624,0,0,0-.883-.883L8.123,15.367V.625a.625.625,0,1,0-1.25,0V15.367L1.064,9.559a.624.624,0,0,0-.883.883l6.875,6.875Z' fill='%230ff0fc'/></svg>");
    background-size: 12px auto;
}

/* Body collassabile */
.aw-faq__body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
}
.aw-faq__body-inner {
    padding: 0 28px 32px 28px;
    color: var(--aw-text);
    font-size: 17px;
    line-height: 1.7;
}
/* max-height gestita dinamicamente via JS (main.js) */

@media (max-width: 700px) {
    .aw-faq__head { padding: 24px 20px; column-gap: 16px; }
    .aw-faq__body-inner { padding: 0 20px 24px 20px; }
}


/* ============================================================
   9. SECTION TITLE (riusabile)
   ============================================================ */
.aw-section-title {
    text-align: center;
    font-size: clamp(28px, 3.5vw, 42px);
    font-weight: 700;
    color: var(--aw-white);
    margin: 0 0 16px;
}
.aw-section-subtitle {
    text-align: center;
    color: var(--aw-text-muted);
    max-width: 640px;
    margin: 0 auto 24px;
    line-height: 1.6;
}

.aw-faq-section .aw-section-title {
    margin-top: 70px;
    padding: 0 150px;
    &::before {
        top: 40%;
        height: 100%;
    }
}

@media (max-width: 900px) {
    .aw-faq-section .aw-section-title {
        margin-top: 30px;
        padding: 0 !important;
    }
}

/* === ARWEB START: design fidelity fixes 2026-05-12 === */

/* 1. Banner CTA — wave decoration cyan (mockup Servizio.jpg, lato destro)
   Inline SVG via data URI: 3 curve sovrapposte con glow filter.
   Niente asset esterni da gestire. */
.aw-serv-banner__inner {
    position: relative;
    overflow: visible !important;
}
.aw-serv-banner__inner::after {
    content: "";
  position: absolute;
  top: -62px;
  right: 50px;
  width: 187px;
  height: 187px;
  background: url("assets/aw-sidebar-swoosh.webp") no-repeat center / contain;
  pointer-events: none;
  z-index: 0;
  filter: drop-shadow(0 0 18px rgba(0, 191, 255, 0.4));
}
.aw-serv-banner__inner > * {
    position: relative;
    padding-right: 200px;
    z-index: 1;
}
@media (max-width: 700px) {
    .aw-serv-banner__inner::after { width: 100%; opacity: 0.35; }
}

/* 2. FAQ — override stili globali (Elementor kit / Hello Elementor) per
   tornare al look mockup. NB: usiamo background-color: transparent (non
   "background: transparent") per non cancellare il background-image SVG
   che disegna la freccia nell'icona. */
.aw-faq__head,
button.aw-faq__head {
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--aw-white) !important;
    text-transform: none !important;
}
.aw-faq__head:hover,
.aw-faq__head:focus,
.aw-faq__head:focus-visible,
.aw-faq__head:active {
    background-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

/* 3. .aw-section-title — abilita text-glow (richiede position:relative).
   width: fit-content + auto margins fa sì che il glow ::before (width:100%)
   sia largo quanto il TESTO, non quanto tutto il container. */
.aw-section-title {
    position: relative;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* 4. Link cyan nei rich text di intro/problema/agisci-evita (wp_kses_post)
   Senza questo i link <a> ereditano il colore default del browser. */
.aw-serv-intro__text a,
.aw-serv-problem-text a,
.aw-serv-block-text a {
    color: var(--aw-cyan);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color .2s ease;
}
.aw-serv-intro__text a:hover,
.aw-serv-problem-text a:hover,
.aw-serv-block-text a:hover {
    color: var(--aw-cyan-dark);
}
.aw-serv-block-text a strong,
.aw-serv-block-text strong a {
    color: inherit;
    font-weight: 700;
}

/* 5. CTA centrato dopo "Il risultato" (riusa pattern banner btn) */
.aw-serv-risultato__cta {
    text-align: center;
    margin-top: 48px;
}
.aw-serv-risultato__cta .btn {
    background: var(--aw-cyan);
    color: var(--aw-bg);
    padding: 14px 28px;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform .2s ease, box-shadow .2s ease;
}
.aw-serv-risultato__cta .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 191, 255, 0.25);
}

/* 6. Padding uniforme tra sezioni del secondo tempo (match prima parte ~90-100px) */
.aw-serv-problem-solution { padding: 90px 0; }
.aw-serv-risultato { padding: 90px 0; }
.aw-serv-related { padding: 90px 0; }
.aw-serv-faq { padding: 90px 0; }

/* === ARWEB END === */


/* === ARWEB SERVIZIO PACK END === */


/* === ARWEB ARTICOLO PACK START === */

/* ============================================================
   ARWEB - SINGLE NEWS / ARTICOLO
   ============================================================ */


/* ============================================================
   1. ARTICLE HERO
   ============================================================ */

.aw-article-hero {
    padding: 200px 0 32px;
}
.aw-article-hero .container {
    max-width: 920px;
    margin: 0 auto;
}
.aw-article-hero__meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.aw-article-hero__category {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--aw-cyan);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
}
.aw-article-hero__category::before {
    content: '';
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--aw-cyan);
}
.aw-article-hero__date {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--aw-cyan);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.aw-article-hero__date::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--aw-cyan);
    box-shadow: 0 0 12px rgba(0, 191, 255, 0.6);
}
.aw-article-hero__reading {
    color: var(--aw-text-muted);
    font-size: 13px;
}
.aw-article-hero__reading::before {
    content: '·';
    margin-right: 16px;
    color: var(--aw-border);
}
.aw-article-hero__title {
    font-size: clamp(32px, 4.5vw, 52px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--aw-white);
    margin: 0 0 20px;
}
.aw-article-hero__subtitle {
    font-size: 18px;
    line-height: 1.6;
    color: var(--aw-text-muted);
    margin: 0;
}


/* ============================================================
   2. FEATURED IMAGE FULL-WIDTH (ma con max e radius)
   ============================================================ */

.aw-article-featured {
    padding: 24px 0 40px;
}
.aw-article-featured .container {
    max-width: 1080px;
    margin: 0 auto;
}
.aw-article-featured img {
    width: 100%;
    height: auto;
    border-radius: var(--aw-radius, 12px);
    display: block;
}


/* ============================================================
   3. CONTENT TYPOGRAPHY (post editor output)
   ============================================================ */

.aw-article-content {
    //max-width: 720px;
    margin: 0 auto;
    padding: 24px 0 60px;
    color: var(--aw-white);
    font-size: 17px;
    line-height: 1.75;
}
.aw-article-content p { color: var(--aw-white); }
.aw-article-content li { color: var(--aw-white); }

.aw-article-content > * { margin-top: 0; margin-bottom: 24px; }
.aw-article-content > *:last-child { margin-bottom: 0; }

html body .aw-article-content h2,
html body .aw-article-content h2 a,
html body .aw-article-content h2 strong {
    font-size: clamp(28px, 3vw, 36px);
    font-weight: 800;
    line-height: 1.2;
    color: var(--aw-cyan) !important;
    margin: 0 0 24px;
}
.aw-article-content h3 {
    color: var(--aw-cyan);
    font-size: 22px;
    font-weight: 700;
    margin-top: 36px;
    margin-bottom: 12px;
}
.aw-article-content h4 {
    color: var(--aw-white);
    font-size: 18px;
    font-weight: 700;
    margin-top: 32px;
    margin-bottom: 12px;
}

.aw-article-content p { margin-bottom: 24px; }

.aw-article-content a {
    color: var(--aw-cyan);
    text-decoration: none;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color .2s ease;
}
.aw-article-content a:hover { color: var(--aw-white); }

.aw-article-content strong { color: var(--aw-white); font-weight: 600; }
.aw-article-content em { font-style: italic; }

/* Liste */
.aw-article-content ul,
.aw-article-content ol {
    padding-left: 24px;
    margin-bottom: 24px;
}
.aw-article-content ul { list-style: disc; }
.aw-article-content ol { list-style: decimal; }
.aw-article-content li { margin-bottom: 8px; padding-left: 4px; }
.aw-article-content li::marker { color: var(--aw-cyan); }

/* Immagini inline */
.aw-article-content img {
    width: 100%;
    height: auto;
    border-radius: var(--aw-radius, 12px);
    margin: 32px 0;
    display: block;
}

/* Blockquote — design XD: ❝ icona cyan in alto, citazione centrata */
.aw-article-content blockquote,
.aw-article-blockquote {
    position: relative;
    padding: 36px 24px 24px;
    margin: 40px 0;
    color: var(--aw-white);
    font-size: 17px;
    line-height: 1.6;
    text-align: center;
    font-style: normal;
    border: none;
}
.aw-article-content blockquote::before,
.aw-article-blockquote::before {
    content: '\201C'; /* " unicode */
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 56px;
    line-height: 1;
    font-family: Georgia, 'Times New Roman', serif;
    color: var(--aw-cyan);
}
.aw-article-content blockquote cite,
.aw-article-blockquote__author {
    display: block;
    margin-top: 18px;
    font-style: normal;
    font-size: 12px;
    color: var(--aw-text-muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.aw-article-blockquote__author strong { color: var(--aw-white); }

/* Code */
.aw-article-content code {
    background: var(--aw-bg-card);
    padding: 2px 8px;
    border-radius: 4px;
    font-family: 'SF Mono', Monaco, Consolas, monospace;
    font-size: 0.9em;
    color: var(--aw-cyan);
}
.aw-article-content pre {
    background: var(--aw-bg-card);
    padding: 24px;
    border-radius: var(--aw-radius, 12px);
    overflow-x: auto;
    margin: 32px 0;
    border: 1px solid var(--aw-border);
}
.aw-article-content pre code {
    background: none;
    padding: 0;
    color: var(--aw-white);
}

/* === ARWEB START: Article typography polish (2026-06-18) ===
   Riempie i buchi della sezione 3 senza modificare le regole esistenti.
   Copre: h2 margin-top, h5/h6, liste annidate, figure/figcaption, hr,
   table, mark/sub/sup/small/kbd/dl. Tutto scope `.aw-article-content`. */

/* h2 — aggiunge margin-top simmetrico con h3/h4 (manteneva solo margin-bottom) */
html body .aw-article-content h2 {
    margin-top: clamp(40px, 5vw, 56px);
}
html body .aw-article-content > h2:first-child,
html body .aw-article-content h2:first-child {
    margin-top: 0;
}

/* h5 — sub-step sotto h4: bianco, weight 700, leggero uppercase */
.aw-article-content h5 {
    color: var(--aw-white);
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 28px;
    margin-bottom: 10px;
    line-height: 1.3;
}

/* h6 — eyebrow style: micro, muted, caps spaziato (coerente con .aw-section-label) */
.aw-article-content h6 {
    color: var(--aw-text-muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-top: 24px;
    margin-bottom: 8px;
    line-height: 1.3;
}

/* Liste annidate — compatte, niente margin-bottom 24 ereditato */
.aw-article-content li > ul,
.aw-article-content li > ol {
    margin-top: 8px;
    margin-bottom: 0;
    padding-left: 22px;
}
.aw-article-content ul ul { list-style: circle; }
.aw-article-content ul ul ul { list-style: square; }
.aw-article-content ol ol { list-style: lower-alpha; }
.aw-article-content ol ol ol { list-style: lower-roman; }

/* figure (Gutenberg wrappa le img) — evita doppi margin tra figure e img interna */
.aw-article-content figure {
    margin: 32px 0;
}
.aw-article-content figure img {
    margin: 0;
}
.aw-article-content figcaption,
.aw-article-content .wp-caption-text {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--aw-text-muted);
    text-align: center;
    font-style: italic;
}

/* hr — divisore cyan attenuato */
.aw-article-content hr {
    border: 0;
    height: 1px;
    background: var(--aw-border);
    margin: 40px auto;
    max-width: 480px;
}

/* Table — leggibile su dark bg, header cyan */
.aw-article-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 32px 0;
    font-size: 15px;
    line-height: 1.55;
    background: var(--aw-bg-card);
    border: 1px solid var(--aw-border);
    border-radius: var(--aw-radius, 12px);
    overflow: hidden;
}
.aw-article-content thead {
    background: var(--aw-bg-2);
}
.aw-article-content th {
    padding: 14px 18px;
    text-align: left;
    font-weight: 700;
    color: var(--aw-cyan);
    border-bottom: 1px solid var(--aw-border);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.aw-article-content td {
    padding: 14px 18px;
    color: var(--aw-white);
    border-bottom: 1px solid var(--aw-border);
    vertical-align: top;
}
.aw-article-content tbody tr:last-child td {
    border-bottom: none;
}
.aw-article-content tbody tr:hover {
    background: rgba(0, 191, 255, 0.04);
}

/* Inline semantici */
.aw-article-content mark {
    background: rgba(0, 191, 255, 0.18);
    color: var(--aw-white);
    padding: 1px 6px;
    border-radius: 3px;
}
.aw-article-content sub,
.aw-article-content sup {
    font-size: 0.72em;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
.aw-article-content sup { top: -0.5em; }
.aw-article-content sub { bottom: -0.25em; }
.aw-article-content small {
    font-size: 0.85em;
    color: var(--aw-text-muted);
}
.aw-article-content kbd {
    background: var(--aw-bg-card);
    border: 1px solid var(--aw-border);
    border-bottom-width: 2px;
    border-radius: 4px;
    padding: 2px 8px;
    font-family: 'SF Mono', Monaco, Consolas, monospace;
    font-size: 0.85em;
    color: var(--aw-white);
}
.aw-article-content del { color: var(--aw-text-muted); text-decoration: line-through; }
.aw-article-content ins { color: var(--aw-cyan); text-decoration: none; border-bottom: 1px dashed var(--aw-cyan); }

/* Description list */
.aw-article-content dl {
    margin-bottom: 24px;
}
.aw-article-content dt {
    color: var(--aw-cyan);
    font-weight: 700;
    margin-top: 16px;
    margin-bottom: 4px;
}
.aw-article-content dt:first-child { margin-top: 0; }
.aw-article-content dd {
    margin: 0 0 12px 0;
    padding-left: 18px;
    color: var(--aw-white);
}

/* Filter SELECT labels — stessa dimensione visiva effettiva del titolo pillole
   ".aw-blog__filter-label" (h3). Il CSS del filter-label è dichiarato 30px/800
   ma nel render reale gli h3 vengono spesso ridotti dai default Elementor,
   quindi qui usiamo un valore intermedio che matcha il rendering effettivo
   del titolo "Filtra in base alle nostre soluzioni". */
html body .aw-blog__select-label {
    color: var(--aw-white);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    text-transform: none;
    letter-spacing: -0.01em;
    margin: 0 0 12px;
}

/* Body weight 300 (Inter Light) — cliente vuole testo più leggero.
   Strong/b restano 700 → contrast 300↔700 = massimo distinguibile.
   Esplicito su tutti i tipi text per evitare Elementor/Hello che override. */
html body .aw-article-content,
html body .aw-article-content p,
html body .aw-article-content li,
html body .aw-article-content dd {
    font-weight: 300;
}
html body .aw-article-content strong,
html body .aw-article-content b {
    color: var(--aw-white);
    font-weight: 700;
}
/* Link bold sempre cyan — gestisce sia <a><strong>x</strong></a> che
   <strong><a>x</a></strong>. Esplicito al posto di `inherit` per coprire
   anche il secondo caso (dove inherit prendeva il bianco dello strong). */
html body .aw-article-content a strong,
html body .aw-article-content a b,
html body .aw-article-content strong a,
html body .aw-article-content b a {
    color: var(--aw-cyan);
    /* Padding orizzontale per dare respiro visivo quando il cliente
       inserisce link con bold attaccato al testo (es. </strong>per
       senza spazio nel markup). */
    padding: 0 4px;
}
html body .aw-article-content a:hover strong,
html body .aw-article-content a:hover b,
html body .aw-article-content strong a:hover,
html body .aw-article-content b a:hover {
    color: var(--aw-white);
}

/* Mobile tune-up */
@media (max-width: 700px) {
    .aw-article-content table {
        font-size: 14px;
    }
    .aw-article-content th,
    .aw-article-content td {
        padding: 10px 12px;
    }
    .aw-article-content h5 { font-size: 14px; }
}
/* === ARWEB END: Article typography polish === */


/* === ARWEB START: Filter selects polish (Chrome dark mode) ===
   Su Chrome i <select> con bg rgba alpha trasparente sembrano sparire
   (si fondono col container) e le <option> del dropdown ignorano l'RGBA
   con alpha mostrando bianco su bianco. Fix: bg solido, border visibile,
   color-scheme: dark per forzare i controlli nativi al tema scuro. */
html body .aw-blog__select {
    color-scheme: dark;
    background-color: #0c1a36; /* solido = --aw-bg-2 senza alpha */
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--aw-white);
}
html body .aw-blog__select:hover {
    background-color: #102544;
    border-color: var(--aw-cyan);
}
html body .aw-blog__select:focus {
    background-color: #102544;
    border-color: var(--aw-cyan);
    box-shadow: 0 0 0 3px rgba(0, 191, 255, 0.18);
}
html body .aw-blog__select option {
    background-color: #0c1a36;
    color: #ffffff;
    padding: 8px 12px;
}
html body .aw-blog__select option:checked,
html body .aw-blog__select option:hover {
    background-color: #00BFFF;
    color: #08142c;
}
/* === ARWEB END: Filter selects polish === */


/* === ARWEB START: Blockquote card style (2026-06-19) ===
   Sostituisce il vecchio pattern "virgoletta enorme centrata" con uno
   stile card moderno: contorno sottile, angoli smussati, barra cyan a
   sinistra come accent. Copre sia <blockquote> nativo che il blocco
   Gutenberg .wp-block-quote (entrambi finiscono dentro .aw-article-content). */
html body .aw-article-content blockquote,
html body .aw-article-content .wp-block-quote {
    position: relative;
    margin: 32px 0;
    padding: 24px 28px;
    background: rgba(0, 191, 255, 0.04);
    border: 1px solid var(--aw-border);
    border-left: 4px solid var(--aw-cyan);
    border-radius: 16px;
    color: var(--aw-white);
    font-size: 17px;
    line-height: 1.6;
    text-align: left;
    font-style: normal;
}
/* Nasconde la virgolette grandi del vecchio pattern (gestite via ::before).
   Anche se la regola esistente le centrava, qui le togliamo del tutto. */
html body .aw-article-content blockquote::before,
html body .aw-article-content .wp-block-quote::before {
    content: none;
}
/* Primo paragrafo: niente margin top per allinearsi al padding del box */
html body .aw-article-content blockquote > p:first-child,
html body .aw-article-content .wp-block-quote > p:first-child {
    margin-top: 0;
}
html body .aw-article-content blockquote > p:last-child,
html body .aw-article-content .wp-block-quote > p:last-child {
    margin-bottom: 0;
}
/* Cite e <footer> del Gutenberg quote: testo muted, allineato a sinistra,
   piccolo separator dash. */
html body .aw-article-content blockquote cite,
html body .aw-article-content .wp-block-quote cite,
html body .aw-article-content .wp-block-quote__citation {
    display: block;
    margin-top: 14px;
    font-style: normal;
    font-size: 13px;
    color: var(--aw-text-muted);
    letter-spacing: 0.04em;
    text-align: left;
    text-transform: none;
}
html body .aw-article-content blockquote cite::before,
html body .aw-article-content .wp-block-quote cite::before,
html body .aw-article-content .wp-block-quote__citation::before {
    content: '— ';
    color: var(--aw-cyan);
}

/* Variante Gutenberg "Large" — più scenografica: padding maggiore,
   font leggermente più grande. */
html body .aw-article-content .wp-block-quote.is-style-large,
html body .aw-article-content .wp-block-quote.is-large {
    padding: 32px 36px;
    font-size: 19px;
    line-height: 1.55;
}
/* === ARWEB END: Blockquote card style === */


/* === ARWEB START: Caption Gutenberg bianca, allineata a sinistra ===
   La regola figcaption nel polish tipografico le rendeva muted+center.
   Override esplicito: tutte le caption (figcaption, .wp-caption-text,
   .wp-element-caption) → bianche, allineate a sinistra. */
html body .aw-article-content .wp-element-caption,
html body .aw-article-content figcaption,
html body .aw-article-content .wp-caption-text {
    color: var(--aw-white);
    text-align: left;
}
/* === ARWEB END: Caption Gutenberg bianca, allineata a sinistra === */


/* === ARWEB START: H3 colore allineato a H2 (2026-06-19) ===
   La regola H3 originale (.aw-article-content h3) imposta cyan ma viene
   sovrascritta da Elementor/Hello su alcuni post. Allineiamo la specificità
   alla regola H2 (html body + !important) per garantire coerenza. */
html body .aw-article-content h3,
html body .aw-article-content h3 a,
html body .aw-article-content h3 strong {
    color: var(--aw-cyan) !important;
}
/* === ARWEB END: H3 colore allineato a H2 === */


/* === ARWEB START: Uniformità cyan + hover bottoni (2026-06-19) ===
   1) Allinea .text-gradient (era #00D4FF, una variante più chiara) al cyan
      ufficiale --aw-cyan, così tutti gli accent del sito hanno la stessa
      tonalità.
   2) Uniforma l'hover dei 3 bottoni "tutti cyan" (banner servizio, CTA
      risultato, CTA section globale) al pattern del btn-primary-aw:
      background diventa --aw-cyan-dark, translate(-2px), box-shadow glow.
      Prima cambiavano solo box-shadow/translate senza toccare il
      background, percezione visiva incoerente con gli altri bottoni. */

/* (1) .text-gradient → cyan ufficiale */
.text-gradient {
    color: var(--aw-cyan);
    background-image: linear-gradient(45deg, var(--aw-cyan), #FFFFFF 70%);
}

/* (2) Hover bottoni "cyan pieno" — uniforme: translate + glow, niente
   cambio background. (--aw-cyan-dark è troppo "petrolio" e su hover
   appariva spento.) */
html body .aw-serv-banner__cta .btn:hover,
html body .aw-serv-risultato__cta .btn:hover,
html body .aw-cta-section__btn:hover,
html body .aw-prog-sidebar__cta:hover {
    background: var(--aw-cyan) !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px var(--aw-cyan-glow) !important;
}
/* === ARWEB END: Uniformità cyan + hover bottoni === */


/* === ARWEB START: Body font size bump (+2px) ===
   Cliente ha chiesto un body text leggermente più grande nei post.
   Da 17px → 19px (override sul wrapper). I heading restano dimensionati
   in proporzione perché usano clamp(). */
html body .aw-article-content {
    font-size: 19px;
}
/* === ARWEB END: Body font size bump === */

/* ============================================================
   3.b TOC — Rank Math Table of Contents
   ============================================================ */

.aw-article-content .wp-block-rank-math-toc-block {
    background: var(--aw-bg-card);
    border: 1px solid var(--aw-border);
    border-left: 3px solid var(--aw-cyan);
    border-radius: var(--aw-radius, 12px);
    padding: 28px 32px;
    margin: 32px 0 40px;
    counter-reset: aw-toc;
}

/* "Indice" heading — override default article h2 cyan styling */
html body .aw-article-content .wp-block-rank-math-toc-block > h2,
html body .aw-article-content .wp-block-rank-math-toc-block > h2 a,
html body .aw-article-content .wp-block-rank-math-toc-block > h2 strong {
    font-size: 12px !important;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--aw-text-muted) !important;
    margin: 0 0 18px;
    line-height: 1.2;
}

/* Reset list styling inherited from article content */
.aw-article-content .wp-block-rank-math-toc-block nav,
.aw-article-content .wp-block-rank-math-toc-block ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Top-level items — numbered counter */
.aw-article-content .wp-block-rank-math-toc-block > nav > ul > li {
    counter-increment: aw-toc;
    position: relative;
    padding: 10px 0 10px 44px;
    margin: 0;
    border-top: 1px solid var(--aw-border);
    list-style: none;
}
.aw-article-content .wp-block-rank-math-toc-block > nav > ul > li:first-child {
    border-top: none;
}
.aw-article-content .wp-block-rank-math-toc-block > nav > ul > li::before {
    content: counter(aw-toc, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--aw-cyan);
    font-variant-numeric: tabular-nums;
}

/* Nested items (sub-sections) */
.aw-article-content .wp-block-rank-math-toc-block ul ul {
    margin: 8px 0 4px;
    padding: 0;
}
.aw-article-content .wp-block-rank-math-toc-block ul ul li {
    position: relative;
    padding: 6px 0 6px 18px;
    margin: 0;
    border: none;
    list-style: none;
}
.aw-article-content .wp-block-rank-math-toc-block ul ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20px;
    width: 10px;
    height: 1px;
    background: var(--aw-text-muted);
    opacity: 0.5;
}

/* Links — override default article anchor underline */
.aw-article-content .wp-block-rank-math-toc-block a {
    color: var(--aw-white);
    text-decoration: none;
    font-size: 16px;
    line-height: 1.5;
    transition: color .2s ease, transform .2s ease;
    display: inline-block;
}
.aw-article-content .wp-block-rank-math-toc-block a:hover {
    color: var(--aw-cyan);
    transform: translateX(3px);
}
.aw-article-content .wp-block-rank-math-toc-block ul ul a {
    font-size: 15px;
    color: var(--aw-white);
}
.aw-article-content .wp-block-rank-math-toc-block ul ul a:hover {
    color: var(--aw-cyan);
}

/* Hide empty nested ul (cleans up TOC HTML with stray <ul></ul>) */
.aw-article-content .wp-block-rank-math-toc-block ul:empty {
    display: none;
}

/* Accordion: chevron toggle per voci con sotto-voci */
.aw-article-content .wp-block-rank-math-toc-block .aw-toc-toggle {
    position: absolute;
    right: 0;
    top: 8px;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--aw-border);
    border-radius: 50%;
    color: var(--aw-cyan);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .25s ease, background .2s ease, border-color .2s ease;
}
.aw-article-content .wp-block-rank-math-toc-block .aw-toc-toggle:hover {
    background: rgba(0, 191, 255, 0.08);
    border-color: var(--aw-cyan);
}
.aw-article-content .wp-block-rank-math-toc-block .aw-toc-toggle svg {
    transition: transform .25s ease;
}
.aw-article-content .wp-block-rank-math-toc-block li.is-expanded > .aw-toc-toggle svg {
    transform: rotate(180deg);
}

/* Voci con sotto-voci: padding-right per non far toccare il testo al chevron */
.aw-article-content .wp-block-rank-math-toc-block > nav > ul > li.has-sub,
.aw-article-content .wp-block-rank-math-toc-block > ul > li.has-sub {
    padding-right: 44px;
}

/* FIX: Rank Math TOC ha 3 varianti di markup viste nel codice prodotto:
    1) <div><nav><ul><li>          (standard atteso)
    2) <div><ul><li>               (senza nav)
    3) <div><nav><unordered><li>   (tag HTML INVENTATO da Rank Math, bug noto)
       e il caso <div><unordered><li> (raro ma possibile)
   Le regole originali (riga ~1906) coprono solo il caso 1. Aggiungiamo
   qui i selettori per gli altri 3 markup, così i numerini, le linee
   divisorie e il padding-counter scattano comunque. */
.aw-article-content .wp-block-rank-math-toc-block > ul > li,
.aw-article-content .wp-block-rank-math-toc-block > nav > unordered > li,
.aw-article-content .wp-block-rank-math-toc-block > unordered > li {
    counter-increment: aw-toc;
    position: relative;
    padding: 10px 0 10px 44px;
    margin: 0;
    border-top: 1px solid var(--aw-border);
    list-style: none;
}
.aw-article-content .wp-block-rank-math-toc-block > ul > li:first-child,
.aw-article-content .wp-block-rank-math-toc-block > nav > unordered > li:first-child,
.aw-article-content .wp-block-rank-math-toc-block > unordered > li:first-child {
    border-top: none;
}
.aw-article-content .wp-block-rank-math-toc-block > ul > li::before,
.aw-article-content .wp-block-rank-math-toc-block > nav > unordered > li::before,
.aw-article-content .wp-block-rank-math-toc-block > unordered > li::before {
    content: counter(aw-toc, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--aw-cyan);
    font-variant-numeric: tabular-nums;
}

/* L'<unordered> vuoto interno (es. <li><a>...</a><unordered></unordered></li>)
   non deve disturbare il layout: nascondiamolo se è realmente vuoto. */
.aw-article-content .wp-block-rank-math-toc-block unordered:empty {
    display: none;
}

/* Voci con sotto-voci: collapsed di default, smooth open */
.aw-article-content .wp-block-rank-math-toc-block li.has-sub > ul {
    max-height: 0;
    overflow: hidden;
    margin: 0;
    transition: max-height .35s ease, margin .25s ease;
}
.aw-article-content .wp-block-rank-math-toc-block li.is-expanded > ul {
    max-height: 800px;
    margin: 8px 0 4px;
}

@media (max-width: 700px) {
    .aw-article-content .wp-block-rank-math-toc-block {
        padding: 22px 20px;
    }
    .aw-article-content .wp-block-rank-math-toc-block > nav > ul > li {
        padding-left: 36px;
    }
    .aw-article-content .wp-block-rank-math-toc-block a {
        font-size: 15px;
    }
}


/* ============================================================
   4. POST NAVIGATION (Previous / Next)
   ============================================================ */

.aw-article-nav {
    max-width: 1080px;
    margin: 24px auto 80px;
    padding: 40px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.aw-article-nav__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}
.aw-article-nav__link,
a.aw-article-nav__link {
    display: inline-flex !important;
    align-items: center;
    gap: 12px;
    padding: 14px 28px !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    border-radius: 999px !important;
    color: var(--aw-white) !important;
    background: transparent !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: all .25s ease !important;
}
.aw-article-nav__link:hover,
a.aw-article-nav__link:hover {
    border-color: var(--aw-cyan) !important;
    color: var(--aw-cyan) !important;
    background: rgba(0, 191, 255, 0.06) !important;
}
.aw-article-nav__arrow {
    width: 16px;
    height: 13px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: transform .25s ease;
}
.aw-article-nav__arrow--left {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='17.498' height='14.996' viewBox='0 0 17.498 14.996'><path d='M.182,7.939a.627.627,0,0,1,0-.883L7.057.182a.624.624,0,0,1,.883.883L2.131,6.874H16.873a.625.625,0,0,1,0,1.25H2.131L7.94,13.932a.624.624,0,0,1-.883.883L.182,7.939Z' fill='%2300BFFF'/></svg>");
}
.aw-article-nav__arrow--right {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='17.498' height='14.996' viewBox='0 0 17.498 14.996'><path d='M17.316,7.939a.627.627,0,0,0,0-.883L10.441.182a.624.624,0,0,0-.883.883l5.809,5.809H.625a.625.625,0,0,0,0,1.25H15.367L9.559,13.932a.624.624,0,0,0,.883.883l6.875-6.875Z' fill='%2300BFFF'/></svg>");
}
.aw-article-nav__link--prev:hover .aw-article-nav__arrow--left { transform: translateX(-3px); }
.aw-article-nav__link--next:hover .aw-article-nav__arrow--right { transform: translateX(3px); }

@media (max-width: 600px) {
    .aw-article-nav__inner { flex-direction: column; align-items: stretch; }
    .aw-article-nav__link { justify-content: center; }
}


/* ============================================================
   4.b AUTHOR BOX (sotto gli articoli del blog)
   ============================================================ */

.aw-author-box {
    width: 100%;
    margin: 48px 0;
    padding: 28px 32px;
    background: var(--aw-bg-card);
    border: 1px solid var(--aw-border);
    border-radius: var(--aw-radius, 12px);
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.aw-author-box__photo {
    flex: 0 0 96px;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--aw-bg-2);
    border: 2px solid var(--aw-border);
}
.aw-author-box__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.aw-author-box__body { flex: 1 1 auto; min-width: 0; }

.aw-author-box__title {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 700;
    color: var(--aw-cyan);
    line-height: 1.3;
}
.aw-author-box__title span { color: var(--aw-cyan); }

.aw-author-box__bio {
    color: var(--aw-white);
    font-size: 16px;
    line-height: 1.6;
    margin: 0 0 18px;
}
.aw-author-box__bio p { margin: 0 0 12px; }
.aw-author-box__bio p:last-child { margin-bottom: 0; }
.aw-author-box__bio a {
    color: var(--aw-cyan);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.aw-author-box__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 22px;
    background: var(--aw-cyan);
    color: var(--aw-bg) !important;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-decoration: none !important;
    transition: background .2s ease, transform .2s ease;
}
.aw-author-box__cta:hover {
    background: var(--aw-cyan-dark);
    transform: translateX(2px);
}
.aw-author-box__cta-arrow {
    width: 14px;
    height: 14px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 5l7 7-7 7'/%3E%3C/svg%3E");
}

@media (max-width: 600px) {
    .aw-author-box {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 24px 20px;
        gap: 16px;
    }
    .aw-author-box__photo {
        flex: 0 0 80px;
        width: 80px;
        height: 80px;
    }
}


/* ============================================================
   5. COMMENT FORM
   ============================================================ */

.aw-comments-section {
    max-width: 720px;
    margin: 60px auto;
    padding: 0 16px;
}

.aw-comments-section__title {
    color: var(--aw-white);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 24px;
}

.aw-comments-section .comment-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
.aw-comments-section .comment-form-comment,
.aw-comments-section .comment-form-cookies-consent,
.aw-comments-section .form-submit {
    grid-column: 1 / -1;
}
.aw-comments-section .comment-form label {
    display: block;
    color: var(--aw-text-muted);
    font-size: 12px;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.aw-comments-section .comment-form input[type="text"],
.aw-comments-section .comment-form input[type="email"],
.aw-comments-section .comment-form input[type="url"],
.aw-comments-section .comment-form textarea {
    width: 100%;
    background: var(--aw-bg-card);
    border: 1px solid var(--aw-border);
    border-radius: 8px;
    padding: 12px 16px;
    color: var(--aw-white);
    font-size: 15px;
    font-family: inherit;
    transition: border-color .2s ease;
}
.aw-comments-section .comment-form input:focus,
.aw-comments-section .comment-form textarea:focus {
    outline: none;
    border-color: var(--aw-cyan);
}
.aw-comments-section .comment-form textarea {
    min-height: 140px;
    resize: vertical;
}
.aw-comments-section .form-submit input[type="submit"],
.aw-comments-section .submit {
    background: var(--aw-cyan);
    color: var(--aw-bg);
    border: none;
    padding: 14px 32px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.aw-comments-section .form-submit input[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0,191,255,0.25);
}


/* ============================================================
   6. COMMENTS LIST
   ============================================================ */

.aw-comments-list {
    list-style: none;
    margin: 32px 0 0;
    padding: 0;
}
.aw-comments-list .comment {
    padding: 24px 0;
    border-top: 1px solid var(--aw-border);
}
.aw-comments-list .comment:first-child { border-top: none; }

.aw-comments-list .comment-body {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 16px;
}
.aw-comments-list .comment-author {
    grid-row: 1 / 3;
}
.aw-comments-list .comment-author .avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: block;
}
.aw-comments-list .comment-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
}
.aw-comments-list .comment-meta .fn,
.aw-comments-list .comment-author cite {
    font-style: normal;
    color: var(--aw-white);
    font-weight: 600;
    font-size: 14px;
}
.aw-comments-list .comment-metadata {
    color: var(--aw-text-muted);
    font-size: 12px;
}
.aw-comments-list .comment-content {
    color: var(--aw-text-muted);
    font-size: 15px;
    line-height: 1.7;
}
.aw-comments-list .reply {
    margin-top: 8px;
}
.aw-comments-list .comment-reply-link {
    color: var(--aw-cyan);
    font-size: 13px;
    text-decoration: none;
    font-weight: 600;
}
.aw-comments-list .comment-reply-link:hover { text-decoration: underline; }

/* Replies indentation */
.aw-comments-list .children {
    list-style: none;
    margin: 24px 0 0;
    padding: 0 0 0 64px;
    border-left: 1px solid var(--aw-border);
}


/* ============================================================
   7. ARTICOLI CORRELATI (riusa .aw-card)
   ============================================================ */

.aw-related-posts {
    padding: 60px 0;
}
.aw-related-posts .container {
    max-width: 1400px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}
.aw-related-posts__title {
    text-align: center;
    color: var(--aw-white);
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 700;
    margin: 0 0 32px;
}

/* === ARWEB ARTICOLO PACK END === */


/* === ARWEB PROGETTO PACK START === */

/* ============================================================
   ARWEB - SINGLE PROGETTO / CASE STUDY
   ============================================================ */


/* ============================================================
   1. PROGETTO HERO
   ============================================================ */

.aw-prog-hero {
    padding: 200px 30px 60px 30px;
}
.aw-prog-hero .container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 48px;
    align-items: center;
}
.aw-prog-hero__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--aw-cyan);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.aw-prog-hero__label::before {
    content: '';
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--aw-cyan);
}
.aw-prog-hero__title {
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--aw-white);
    margin: 0;
}
.aw-prog-hero__brand {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
    color: var(--aw-text-muted);
    font-size: 14px;
}
.aw-prog-hero__brand strong { color: var(--aw-white); }
.aw-prog-hero__brand-sep {
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--aw-border);
}
.aw-prog-hero__image img {
    width: 100%;
    height: auto;
    border-radius: var(--aw-radius, 12px);
    display: block;
}

@media (max-width: 900px) {
    .aw-prog-hero {
        padding: 150px 20px 40px 20px;
    }
    .aw-prog-hero .container {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}


/* ============================================================
   2. SEZIONE "LA SFIDA" CON SIDEBAR STICKY
   ============================================================ */

.aw-prog-section {
    padding: 25px 0;
}
.aw-prog-section:first-child { padding-top: 0; }
.aw-prog-section__title {
    font-size: clamp(28px, 3vw, 36px);
    font-weight: 800;
    line-height: 1.2;
    color: var(--aw-cyan);
    margin: 0 0 24px;
}
.aw-prog-section__text {
    color: var(--aw-white);
    font-size: 16px;
    line-height: 1.75;
}
.aw-prog-section__text p { color: var(--aw-white); margin-bottom: 18px; }
.aw-prog-section__text li { color: var(--aw-white); }
.aw-prog-section__text strong { color: var(--aw-white); }
.aw-prog-section__text a {
    color: var(--aw-cyan);
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* ============================================================
   LAYOUT BODY 2-col: main content (sfida/soluzione/...) + sidebar sticky
   ============================================================ */

.aw-prog-body {
    padding: 60px 0;
}
.aw-prog-body__container {
    max-width: 1460px;
    margin: 0 auto;
    padding: 0 30px;
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 60px;
    align-items: start;
}
.aw-prog-body--no-sidebar .aw-prog-body__container {
    grid-template-columns: 1fr;
    max-width: 920px;
}
.aw-prog-body__main {
    min-width: 0;
}

@media (max-width: 900px) {
    .aw-prog-body__container {
        padding: 0 20px;
    }
}

/* ============================================================
   SIDEBAR STICKY — Card "Ti interessa una soluzione simile?"
   Dati da ACF Options Page (ARweb → Sidebar Progetto)
   ============================================================ */

.aw-prog-sidebar {
    position: sticky;
    top: 30vh;
    align-self: start;
}
.aw-prog-sidebar__inner {
    background: linear-gradient(160deg, rgba(12, 26, 54, 0.95) 0%, rgba(8, 20, 44, 0.92) 100%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 28px;
    padding: 40px 32px;
    text-align: left;
    box-shadow:
        0 0 60px rgba(0, 191, 255, 0.10),
        0 4px 24px rgba(0, 0, 0, 0.25);
    position: relative;
    overflow: visible; /* permette al swoosh decorativo di uscire dalla card */
}
.aw-prog-sidebar__inner::before {
    /* Swoosh neon cyan decorativo in offset top-right */
    content: "";
    position: absolute;
    top: -62px;
    right: -76px;
    width: 187px;
    height: 187px;
    background: url("assets/aw-sidebar-swoosh.webp") no-repeat center / contain;
    pointer-events: none;
    z-index: 2;
    filter: drop-shadow(0 0 18px rgba(0, 191, 255, 0.4));
}
.aw-prog-sidebar__inner > * {
    position: relative;
    z-index: 1;
}

.aw-prog-sidebar__title {
    color: var(--aw-white) !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    margin: 0 0 28px !important;
    padding-right: 20px;
    letter-spacing: -0.01em;
}

/* Riga: immagine + testo affiancati */
.aw-prog-sidebar__row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
}
.aw-prog-sidebar__image {
    flex: 1 1 50%;
    max-width: 50%;
    text-align: center;
}
.aw-prog-sidebar__image img {
    width: 100%;
    max-width: 140px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.aw-prog-sidebar__text {
    flex: 1 1 50%;
    color: var(--aw-cyan) !important;
    font-size: 19px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    text-align: left;
}

.aw-prog-sidebar__cta {
    display: inline-flex !important;
    align-items: center;
    gap: 14px;
    background: var(--aw-cyan) !important;
    color: #08142c !important;
    padding: 14px 24px;
    border-radius: 20px;
    border: 2px solid var(--aw-cyan);
    font-weight: 700;
    font-size: 13px;
    line-height: 1.3;
    text-decoration: none !important;
    box-shadow: 0 0 32px rgba(0, 191, 255, 0.40);
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
}
.aw-prog-sidebar__cta:hover {
    background: var(--aw-cyan-dark) !important;
    border-color: var(--aw-cyan-dark);
    transform: translateY(-2px);
    box-shadow: 0 0 48px rgba(0, 191, 255, 0.60);
}
.aw-prog-sidebar__cta-arrow {
    flex-shrink: 0;
    width: 14px;
    height: 12px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='17.498' height='14.996' viewBox='0 0 17.498 14.996'><path d='M17.316,7.939a.627.627,0,0,0,0-.883L10.441.182a.624.624,0,0,0-.883.883l5.809,5.809H.625a.625.625,0,0,0,0,1.25H15.367L9.559,13.932a.624.624,0,0,0,.883.883l6.875-6.875Z' fill='%2308142c'/></svg>") no-repeat center / contain;
    transition: transform .25s ease;
}
.aw-prog-sidebar__cta:hover .aw-prog-sidebar__cta-arrow {
    transform: translateX(3px);
}

@media (max-width: 1024px) {
    .aw-prog-body__container {
        grid-template-columns: 1fr;
    }
    .aw-prog-sidebar {
        position: static;
        max-width: 480px;
        margin: 0 auto;
        width: 100%;
    }
}


/* ============================================================
   3. VIDEO EMBED (responsive con play overlay opzionale)
   ============================================================ */

.aw-prog-video {
    margin: 32px 0;
    border-radius: var(--aw-radius, 12px);
    overflow: hidden;
    background: var(--aw-bg-card);
    aspect-ratio: 16 / 9;
    position: relative;
}
.aw-prog-video iframe,
.aw-prog-video video {
    width: 100%;
    height: 100%;
    display: block;
    border: none;
}


/* ============================================================
   4. STATS NEL HERO
   ============================================================ */

.aw-prog-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--aw-border);
}
.aw-prog-stat__value {
    font-size: clamp(22px, 2.5vw, 32px);
    font-weight: 800;
    color: var(--aw-cyan);
    line-height: 1;
    margin: 0 0 6px;
}
.aw-prog-stat__label {
    color: var(--aw-text-muted);
    font-size: 12px;
    line-height: 1.4;
    margin: 0;
}


/* ============================================================
   5. UTILITY: ridotto — il container max-width è gestito da .aw-prog-body__container
   ============================================================ */


/* === ARWEB START: progetto related-posts + section polish 2026-05-12 === */

/* 1. Related posts section (3 card "Altri casi di successo") */
.aw-related-posts {
    padding: 90px 0;
}
.aw-related-posts .aw-section-title {
    margin-bottom: 40px;
}

/* === ARWEB END === */


/* === ARWEB PROGETTO PACK END === */


/* === ARWEB GLOBAL ATMOSPHERE START === */

/* ============================================================
   GLOW RADIALE TOP-RIGHT (firma visiva di tutti i mockup)
   - Posizionato in alto a destra dietro all'illustrazione hero
   - position: absolute = scorre via con la pagina (non fixed)
   - pointer-events: none = non blocca click/hover
   - z-index: 0 = sta dietro al contenuto
   ============================================================ */

body {
    position: relative;
}

body::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 900px;
    background:
        radial-gradient(
            ellipse 55% 70% at 50% 5%,
            rgba(0, 191, 255, 0.10),
            rgba(0, 191, 255, 0.03) 35%,
            transparent 65%
        );
    pointer-events: none;
    z-index: 0;
}

/* Assicura che il contenuto stia sopra al glow */
.site-header,
.site-content,
main,
#main {
    position: relative;
    z-index: 1;
}

/* === ARWEB GLOBAL ATMOSPHERE END === */


/* === ARWEB START: saved sections (CTA + Newsletter) 2026-05-12 === */

/* ============================================================
   CTA SECTION — "Pronto a portare la tua comunicazione..."
   Riusabile a fondo di tutte le pagine (single, archive, statiche).
   Due varianti: --button (CTA con bottone) e default (con form CF7).
   ============================================================ */

.aw-cta-section {
    padding: 90px 0;
    position: relative;
}
.aw-cta-section__inner {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 60px;
    align-items: center;
    position: relative;
}
.aw-cta-section__title {
    font-size: clamp(28px, 3.2vw, 42px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--aw-white);
    margin: 0 0 20px;
}
.aw-cta-section__title span { color: var(--aw-cyan); }
.aw-cta-section__title br + span,
.aw-cta-section__title span { display: inline; }
.aw-cta-section__subtitle {
    color: var(--aw-text);
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
    max-width: 420px;
}

/* Form CF7 dentro al box CTA */
.aw-cta-section__form {
    background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
    border: 1px solid var(--aw-border);
    border-radius: var(--aw-radius, 12px);
    padding: 36px;
}
.aw-cta-section__form .wpcf7-form p { margin: 0 0 16px; }
.aw-cta-section__form label {
    display: block;
    color: var(--aw-text);
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 6px;
}
.aw-cta-section__form input[type="text"],
.aw-cta-section__form input[type="email"],
.aw-cta-section__form input[type="tel"],
.aw-cta-section__form input[type="url"],
.aw-cta-section__form textarea {
    width: 100%;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--aw-border);
    border-radius: 8px;
    color: var(--aw-white);
    font: inherit;
    font-size: 14px;
    padding: 12px 14px;
    transition: border-color .2s ease, background .2s ease;
}
.aw-cta-section__form input:focus,
.aw-cta-section__form textarea:focus {
    outline: none;
    border-color: var(--aw-cyan);
    background: rgba(0, 191, 255, 0.04);
}
.aw-cta-section__form textarea { min-height: 90px; resize: vertical; }
.aw-cta-section__form input[type="submit"],
.aw-cta-section__form .wpcf7-submit {
    width: auto;
    background: var(--aw-cyan);
    color: var(--aw-bg);
    border: none;
    border-radius: 999px;
    padding: 14px 28px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}
.aw-cta-section__form input[type="submit"]:hover,
.aw-cta-section__form .wpcf7-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 191, 255, 0.25);
}
.aw-cta-section__placeholder {
    color: var(--aw-text);
    font-size: 13px;
}
.aw-cta-section__placeholder code {
    background: rgba(0, 191, 255, 0.1);
    color: var(--aw-cyan);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
}

/* Variante con bottone (no form) */
.aw-cta-section--button .aw-cta-section__inner {
    grid-template-columns: 1fr auto;
}
.aw-cta-section__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--aw-cyan);
    color: var(--aw-bg);
    padding: 16px 32px;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}
.aw-cta-section__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 191, 255, 0.25);
}

@media (max-width: 900px) {
    .aw-cta-section__inner,
    .aw-cta-section--button .aw-cta-section__inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .aw-cta-section__form { padding: 24px; }
}


/* ============================================================
   NEWSLETTER SECTION — riga compatta prima del footer
   ============================================================ */

.aw-newsletter {
    padding: 60px 0;
}
.aw-newsletter__inner {
    background: linear-gradient(135deg, rgba(0,191,255,0.08), rgba(0,191,255,0.02));
    border: 1px solid var(--aw-border);
    border-radius: var(--aw-radius, 16px);
    padding: 32px 40px;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 40px;
    align-items: center;
}
.aw-newsletter__title {
    font-size: 22px;
    font-weight: 700;
    color: var(--aw-white);
    margin: 0 0 8px;
}
.aw-newsletter__text {
    color: var(--aw-text-muted);
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
}
.aw-newsletter__form .wpcf7-form p {
    display: flex;
    gap: 8px;
    margin: 0;
}
.aw-newsletter__form input[type="email"] {
    flex: 1;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--aw-border);
    border-radius: 999px;
    color: var(--aw-white);
    font: inherit;
    font-size: 14px;
    padding: 12px 18px;
}
.aw-newsletter__form input[type="submit"],
.aw-newsletter__form .wpcf7-submit {
    background: var(--aw-cyan);
    color: var(--aw-bg);
    border: none;
    border-radius: 999px;
    padding: 12px 24px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
}
.aw-newsletter__placeholder {
    color: var(--aw-text-muted);
    font-size: 13px;
}
@media (max-width: 700px) {
    .aw-newsletter__inner {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 24px;
    }
}

/* === ARWEB END === */


/* === ARWEB LISTING PACK START === */

/* ============================================================
   ARWEB - LISTING PAGES (Blog, Casi di successo, Servizi)
   ============================================================ */


/* ============================================================
   1. HERO LISTING (riusabile per Blog/Casi/Servizi)
   ============================================================ */

.aw-listing-hero {
    padding: 200px 0 90px 0;
    overflow-x: clip;
}
.aw-listing-hero .container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
}
.aw-listing-hero__eyebow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--aw-cyan);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.aw-listing-hero__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--aw-cyan);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.aw-listing-hero__label::before {
    content: '';
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--aw-cyan);
}
.aw-listing-hero__title {
    font-size: clamp(36px, 4.5vw, 56px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--aw-white);
    margin: 0 0 20px;
}
.aw-listing-hero__title span { color: var(--aw-cyan); }
.aw-listing-hero__subtitle {
    font-size: 17px;
    line-height: 1.6;
    color: var(--aw-text-muted);
    max-width: 520px;
}
.aw-listing-hero__illustration {
    margin-right: calc((100vw - 1400px) / -2);
    align-self: center;
}
.aw-listing-hero__illustration img {
    width: 100%;
    height: auto;
    display: block;
}
@media (max-width: 1440px) {
    .aw-listing-hero__illustration {
        margin-right: 0;
    }
}
@media (max-width: 900px) {
    padding: 200px 0 40px 0;
    .aw-listing-hero .container { display: flex !important; flex-direction: column; gap: 32px; }
    .aw-listing-hero__illustration img { max-width: 320px; margin: 0 auto; }
}

/* Override mirato: /casi-di-successo/ — illustrazione dentro al wrapper
   (no bleed destro) e dimensione ridotta per evitare il pixelation del
   wireframe a densità sparsa. Servizi e Blog conservano il bleed default. */
.aw-archive-progetto .aw-listing-hero__illustration {
    margin-right: 0;
}
.aw-archive-progetto .aw-listing-hero__illustration img {
    max-width: 650px;
    margin-left: auto;
}


/* ============================================================
   2. STATS OVERALL (Image 5 - Casi di successo)
   ============================================================ */

.aw-stats-overall {
    padding: 24px 0 40px;
}
.aw-stats-overall .container {
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    text-align: center;
}
.aw-stat-overall__value {
    font-size: clamp(32px, 4vw, 56px);
    font-weight: 800;
    line-height: 1;
    color: var(--aw-cyan);
    margin: 0 0 8px;
    letter-spacing: -0.02em;
}
.aw-stat-overall__label {
    color: var(--aw-text-muted);
    font-size: 14px;
    line-height: 1.4;
    margin: 0;
}
@media (max-width: 900px) {
    .aw-stats-overall .container { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 480px) {
    .aw-stats-overall .container { grid-template-columns: 1fr; }
}


/* ============================================================
   3. FILTER CHIPS (riusabile per tutti i listing)
   ============================================================ */

.aw-filter-section {
    padding: 30px 0 20px;
    text-align: center;
}
.aw-filter-section__label {
    color: var(--aw-white);
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 16px;
}
.aw-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}
.aw-filter-chip {
    display: inline-flex;
    align-items: center;
    padding: 8px 20px;
    background: transparent;
    border: 1px solid var(--aw-border);
    border-radius: 999px;
    color: var(--aw-text-muted);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all .2s ease;
}
.aw-filter-chip:hover {
    border-color: var(--aw-cyan);
    color: var(--aw-white);
}
.aw-filter-chip.is-active,
.aw-filter-chip[aria-pressed="true"] {
    background: var(--aw-cyan);
    border-color: var(--aw-cyan);
    color: var(--aw-bg);
    font-weight: 600;
}


/* ============================================================
   4. CARD HERO LISTING (Image 5 - Primo case study evidenziato)
   ============================================================ */

.aw-card-hero {
    background: var(--aw-bg-card);
    border: 1px solid var(--aw-border);
    border-radius: var(--aw-radius, 16px);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 0;
    margin: 32px auto 40px;
    max-width: 1180px;
    transition: border-color .25s ease;
}
.aw-card-hero:hover { border-color: rgba(0,191,255,0.4); }

.aw-card-hero__image {
    position: relative;
    overflow: hidden;
}
.aw-card-hero__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    min-height: 380px;
}
.aw-card-hero__body {
    padding: 40px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.aw-card-hero__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}
.aw-card-hero__tag {
    display: inline-flex;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(0,191,255,0.1);
    color: var(--aw-cyan);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.aw-card-hero__title {
    font-size: clamp(22px, 2.5vw, 28px);
    font-weight: 700;
    color: var(--aw-white);
    line-height: 1.25;
    margin: 0 0 12px;
}
.aw-card-hero__brand {
    display: flex;
    gap: 12px;
    color: var(--aw-text-muted);
    font-size: 13px;
    margin-bottom: 16px;
}
.aw-card-hero__brand strong { color: var(--aw-white); }
.aw-card-hero__excerpt {
    color: var(--aw-text-muted);
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 24px;
}
.aw-card-hero__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 20px 0;
    margin-bottom: 24px;
    border-top: 1px solid var(--aw-border);
    border-bottom: 1px solid var(--aw-border);
}
.aw-card-hero__stat-value {
    font-size: 22px;
    font-weight: 800;
    color: var(--aw-cyan);
    line-height: 1;
    margin: 0 0 4px;
}
.aw-card-hero__stat-label {
    color: var(--aw-text-muted);
    font-size: 11px;
    line-height: 1.3;
}
.aw-card-hero__cta {
    align-self: flex-start;
    background: var(--aw-cyan);
    color: var(--aw-bg);
    padding: 12px 24px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}
.aw-card-hero__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0,191,255,0.25);
}
@media (max-width: 900px) {
    .aw-card-hero { grid-template-columns: 1fr; }
    .aw-card-hero__image img { min-height: 260px; }
    .aw-card-hero__body { padding: 32px 24px; }
}


/* ============================================================
   4b. CENTERED STATEMENT (sezione intro centrata)
   Riusabile per Servizi/Casi/Tecnologia/ecc.
   ============================================================ */

.aw-centered-statement {
    padding: 60px 20px 50px;
    text-align: center;
    max-width: 880px;
    margin: 0 auto;
}
.aw-centered-statement__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--aw-cyan);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.aw-centered-statement__label::before {
    content: '';
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--aw-cyan);
}
.aw-centered-statement__title,
.aw-centered-statement__title .elementor-heading-title,
.aw-centered-statement .elementor-heading-title.aw-centered-statement__title {
    font-size: 45px !important;
    font-weight: 800 !important;
    line-height: 1.2em !important;
    color: var(--aw-white);
    margin: 0 0 18px;
}
.aw-centered-statement__title span,
.aw-centered-statement__title .elementor-heading-title span { color: var(--aw-cyan); }
.aw-centered-statement__text {
    color: var(--aw-text);
    font-size: 18px;
    line-height: 1.65;
    max-width: 680px;
    margin: 0 auto;
}


/* ============================================================
   5. CARD SERVICE ALTERNATA (Image 6 - Pagina Servizi)
   ============================================================ */

.aw-card-service {
    background: linear-gradient(0deg, #102847 0%, #08142C 80%);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 20px;
    padding: 30px 48px;
    margin-bottom: 50px;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 48px;
    align-items: center;
    transition: border-color .25s ease, transform .25s ease;
}
.aw-card-service:hover {
    border-color: rgba(0,191,255,0.35);
    transform: translateY(-2px);
}

.aw-card-service__logo {
    margin-bottom: 30px;
    line-height: 0;
}
.aw-card-service__logo img {
    width: auto;
    height: 80px;
    display: block;
}
.aw-card-service__title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 700;
    color: var(--aw-white);
    margin: 0 0 16px;
}
.aw-card-service__icon {
    width: 32px;
    height: 32px;
    color: var(--aw-cyan);
    flex-shrink: 0;
}
.aw-card-service__features {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    list-style: none;
    padding: 0;
}
.aw-card-service__feature {
    display: inline-flex;
    padding: 10px 20px;
    border-radius: 999px;
    background: rgba(0,191,255,0.18);
    border: 1px solid rgba(0,191,255,0.45);
    color: var(--aw-cyan);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.03em;
}
/* Tagline bold bianca (1 frase incisiva) */
.aw-card-service__tagline {
    color: var(--aw-white);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 14px;
}

/* Descrizione muted (paragrafo descrittivo) */
.aw-card-service__desc {
    color: var(--aw-white);
    opacity: 0.85;
    font-size: 16px;
    line-height: 1.65;
    margin: 0 0 22px;
}

/* Excerpt legacy (per archive-servizio.php template che usa ancora questa class) */
.aw-card-service__excerpt {
    color: var(--aw-text-muted);
    font-size: 15px;
    line-height: 1.65;
    margin: 0 0 22px;
}

/* CTA con freccia SVG (no più carattere "→") */
.aw-card-service__cta {
    margin-top: 15px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: transparent;
    color: var(--aw-cyan) !important;
    border: 1px solid var(--aw-cyan);
    padding: 18px 28px;
    max-width: 400px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    box-shadow: 0 0 24px rgba(0,191,255,0.30);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.aw-card-service__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 36px rgba(0,191,255,0.55);
}
.aw-card-service__cta-arrow {
    flex-shrink: 0;
    display: inline-block;
    width: 18px;
    height: 14px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='17.498' height='14.996' viewBox='0 0 17.498 14.996'><path d='M17.316,7.939a.627.627,0,0,0,0-.883L10.441.182a.624.624,0,0,0-.883.883l5.809,5.809H.625a.625.625,0,0,0,0,1.25H15.367L9.559,13.932a.624.624,0,0,0,.883.883l6.875-6.875Z' fill='%2300BFFFFC'/></svg>") no-repeat center / contain;
    transition: transform .25s ease;
}
.aw-card-service__cta:hover .aw-card-service__cta-arrow {
    transform: translateX(4px);
}
.aw-card-service__image {
    position: relative;
    aspect-ratio: 4 / 3;
}
.aw-card-service__image img {
    transform: translateY(-90px);
    position: absolute;
    width: 100%;
    height: auto;
    display: block;
}
@media (max-width: 900px) {
    .aw-card-service,
    .aw-card-service:nth-child(even) {
        grid-template-columns: 1fr;
        padding: 32px 24px;
        gap: 24px;
    }
    .aw-card-service:nth-child(even) .aw-card-service__image {
        order: 0;
    }
}


/* ============================================================
   6. PAGINAZIONE NUMERATA
   ============================================================ */

.aw-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 40px 0 60px;
}
.aw-pagination .page-numbers,
.aw-pagination__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--aw-border);
    border-radius: 8px;
    color: var(--aw-text-muted);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all .2s ease;
}
.aw-pagination .page-numbers:hover,
.aw-pagination__item:hover {
    border-color: var(--aw-cyan);
    color: var(--aw-white);
}
.aw-pagination .page-numbers.current,
.aw-pagination__item.is-current {
    background: var(--aw-cyan);
    border-color: var(--aw-cyan);
    color: var(--aw-bg);
    font-weight: 700;
}


/* ============================================================
   7. SECTION TITLE LISTING (centrale, riusabile)
   ============================================================ */

.aw-listing-section-title {
    text-align: center;
    color: var(--aw-white);
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 700;
    margin: 32px 0 16px;
}
.aw-listing-section-subtitle {
    text-align: center;
    color: var(--aw-text-muted);
    max-width: 720px;
    margin: 0 auto 32px;
    line-height: 1.6;
    font-size: 15px;
}

/* === ARWEB LISTING PACK END === */


/* === ARWEB STATIC PACK START === */

/* ============================================================
   ARWEB - STATIC PAGES (Contatti, Chi Siamo, Tecnologia)
   Pattern: hero, form contatti, sidebar info, principi numerati,
   quote large, team grid, clients grid, tech block alternato.
   ============================================================ */


/* 1. STATIC HERO (riusabile per Contatti/Chi/Tech) */

.aw-static-hero {
    padding: 110px 0 90px;
    overflow-x: clip;
}
.aw-static-hero .container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
}
.aw-static-hero__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--aw-cyan);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.aw-static-hero__label::before {
    content: '';
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--aw-cyan);
}
.aw-static-hero__title {
    font-size: clamp(36px, 4.5vw, 58px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--aw-white);
    margin: 0 0 20px;
}
.aw-static-hero__title span { color: var(--aw-cyan); }
.aw-static-hero__subtitle {
    font-size: 17px;
    line-height: 1.6;
    color: var(--aw-text-muted);
    max-width: 540px;
}
.aw-static-hero__illustration {
    margin-right: calc((100vw - 1400px) / -2);
    align-self: center;
}
.aw-static-hero__illustration img {
    width: 100%;
    height: auto;
    display: block;
}
@media (max-width: 1240px) {
    .aw-static-hero__illustration { margin-right: 0; }
}
@media (max-width: 900px) {
    .aw-static-hero .container { grid-template-columns: 1fr; gap: 32px; }
    .aw-static-hero__illustration img { max-width: 320px; margin: 0 auto; }
}


/* 2. CONTATTI - Form layout */

.aw-contact-section { padding: 60px 0; }
.aw-contact-section .container {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 60px;
    align-items: start;
}
.aw-contact-form-card {
    background: var(--aw-bg-card);
    border: 1px solid var(--aw-border);
    border-radius: var(--aw-radius, 16px);
    padding: 36px 36px;
}
.aw-contact-form-card__title {
    color: var(--aw-white);
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 8px;
}
.aw-contact-form-card__intro {
    color: var(--aw-text-muted);
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 28px;
}
.aw-form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.aw-form-grid-2 .aw-form-row-full { grid-column: 1 / -1; }
@media (max-width: 600px) {
    .aw-form-grid-2 { grid-template-columns: 1fr; }
}


/* 3. CONTATTI - Sidebar info */

.aw-contact-info {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding-top: 16px;
}
.aw-contact-info__item {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 16px;
    align-items: start;
}
.aw-contact-info__icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0,191,255,0.1);
    color: var(--aw-cyan);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.aw-contact-info__icon svg { width: 20px; height: 20px; }
.aw-contact-info__label {
    color: var(--aw-text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 4px;
}
.aw-contact-info__value {
    color: var(--aw-white);
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    text-decoration: none;
    transition: color .2s ease;
}
a.aw-contact-info__value:hover { color: var(--aw-cyan); }

.aw-social-strip {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}
.aw-social-strip a {
    width: 40px;
    height: 40px;
    border: 1px solid var(--aw-border);
    border-radius: 50%;
    color: var(--aw-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all .2s ease;
}
.aw-social-strip a:hover {
    border-color: var(--aw-cyan);
    color: var(--aw-cyan);
    transform: translateY(-2px);
}
.aw-social-strip a svg { width: 16px; height: 16px; }

@media (max-width: 900px) {
    .aw-contact-section .container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}


/* 4. CHI SIAMO - Principi numerati 3x2 */

.aw-principles-section { padding: 60px 0; }
.aw-principles-section .container {
    max-width: 1180px;
    margin: 0 auto;
}
.aw-principles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 40px;
}
.aw-principle {
    background: var(--aw-bg-card);
    border: 1px solid var(--aw-border);
    border-radius: var(--aw-radius, 12px);
    padding: 32px 28px;
    transition: border-color .25s ease, transform .25s ease;
}
.aw-principle:hover {
    border-color: rgba(0,191,255,0.4);
    transform: translateY(-4px);
}
.aw-principle__number {
    color: var(--aw-cyan);
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
    margin: 0 0 16px;
    letter-spacing: -0.02em;
}
.aw-principle__title {
    color: var(--aw-white);
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 12px;
}
.aw-principle__desc {
    color: var(--aw-text-muted);
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}
@media (max-width: 900px) {
    .aw-principles-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .aw-principles-grid { grid-template-columns: 1fr; }
}


/* 5. CHI SIAMO - Quote large */

.aw-quote-large {
    padding: 60px 0;
    text-align: center;
    max-width: 920px;
    margin: 0 auto;
}
.aw-quote-large__icon {
    color: var(--aw-cyan);
    font-size: 48px;
    line-height: 1;
    margin: 0 0 24px;
    opacity: 0.6;
}
.aw-quote-large__text {
    color: var(--aw-white);
    font-size: clamp(20px, 2.5vw, 28px);
    font-weight: 500;
    line-height: 1.4;
    font-style: italic;
    margin: 0 0 32px;
    letter-spacing: -0.01em;
}
.aw-quote-large__attribution {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--aw-text-muted);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}


/* 6. CHI SIAMO - Team grid 4 colonne */

.aw-team-section { padding: 60px 0; }
.aw-team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 40px;
}
.aw-team-member { text-align: center; }
.aw-team-member__photo {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: var(--aw-radius, 12px);
    margin-bottom: 16px;
    background: var(--aw-bg-card);
}
.aw-team-member__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}
.aw-team-member:hover .aw-team-member__photo img {
    transform: scale(1.05);
}
.aw-team-member__name {
    color: var(--aw-white);
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 4px;
}
.aw-team-member__role {
    color: var(--aw-text-muted);
    font-size: 13px;
    margin: 0;
}
@media (max-width: 900px) {
    .aw-team-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
    .aw-team-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}


/* 7. CHI SIAMO - Logo clients grid */

.aw-clients-section { padding: 60px 0; }
.aw-clients-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 32px 48px;
    margin-top: 40px;
    align-items: center;
}
.aw-client-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
}
.aw-client-logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    filter: brightness(0) invert(1) opacity(0.7);
    transition: filter .25s ease, transform .25s ease;
}
.aw-client-logo:hover img {
    filter: brightness(0) invert(1) opacity(1);
    transform: scale(1.05);
}
@media (max-width: 900px) {
    .aw-clients-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}
@media (max-width: 600px) {
    .aw-clients-grid { grid-template-columns: repeat(2, 1fr); }
}


/* 8. TECNOLOGIA - Block alternato */

.aw-tech-section { padding: 60px 0; }
.aw-tech-block {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 60px;
    align-items: center;
    padding: 40px 0;
}
.aw-tech-block:nth-child(even) {
    grid-template-columns: 1.1fr 1fr;
}
.aw-tech-block:nth-child(even) .aw-tech-block__image {
    order: -1;
}
.aw-tech-block__image img {
    width: 100%;
    height: auto;
    border-radius: var(--aw-radius, 12px);
    display: block;
}
.aw-tech-block__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--aw-cyan);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 16px;
}
.aw-tech-block__label::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--aw-cyan);
}
.aw-tech-block__title {
    color: var(--aw-white);
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 16px;
}
.aw-tech-block__title span { color: var(--aw-cyan); }
.aw-tech-block__text {
    color: var(--aw-text-muted);
    font-size: 16px;
    line-height: 1.7;
}
.aw-tech-block__text p { margin-bottom: 14px; }
.aw-tech-block__text strong { color: var(--aw-white); }

@media (max-width: 900px) {
    .aw-tech-block,
    .aw-tech-block:nth-child(even) {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .aw-tech-block:nth-child(even) .aw-tech-block__image {
        order: 0;
    }
}

/* === ARWEB STATIC PACK END === */


/* === ARWEB HOME PACK START === */

/* ============================================================
   ARWEB — FRONT PAGE (home) — pattern specifici per le sezioni
   ACF Flexible Content registrate in inc/acf-home.php.
   Riusa: aw-listing-hero (hero), aw-serv-intro (intro split),
   aw-card-hero + aw-cards-grid (cases), aw-principles (why_us),
   aw-clients-grid (clients), aw-faq (faq).
   ============================================================ */

/* HOME HERO — wrapper riusa .aw-listing-hero ma aggiunge il body sotto al titolo */
.aw-home-hero .container { padding-top: 60px; padding-bottom: 60px; }

/* INTRO SPLIT con immagine a destra */
.aw-serv-intro--rev .container { grid-template-columns: 1fr 1fr; }
.aw-serv-intro--rev .aw-serv-intro__image { order: 2; }


/* ============================================================
   1. FEATURE GRID 4 col (Testi / Foto / Video / 3D / AI)
   ============================================================ */

.aw-home-features { padding: 90px 0; }
.aw-home-features .container { max-width: 1400px; margin: 0 auto; padding: 0 20px; }
.aw-home-features .aw-section-title { text-align: center; margin-bottom: 48px; }
.aw-home-features__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.aw-home-feature {
    background: var(--aw-bg-card);
    border: 1px solid var(--aw-border);
    border-radius: var(--aw-radius, 12px);
    padding: 28px 24px;
    text-align: left;
}
.aw-home-feature__icon {
    width: 40px; height: 40px;
    margin-bottom: 18px;
}
.aw-home-feature__icon img {
    width: 100%; height: 100%;
    object-fit: contain;
}
.aw-home-feature__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--aw-white);
    margin: 0 0 8px;
}
.aw-home-feature__desc {
    color: var(--aw-text-muted);
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}
@media (max-width: 900px) {
    .aw-home-features__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .aw-home-features__grid { grid-template-columns: 1fr; }
}


/* ============================================================
   2. SERVIZI GRID — 4 colonne, card con logo/titolo/tagline/excerpt/CTA
   Usato dalla home (e ovunque tramite shortcode [aw_servizi_grid])
   ============================================================ */

.aw-home-services { padding: 90px 0; }
.aw-home-services .container { max-width: 1400px; margin: 0 auto; padding: 0 20px; }

.aw-home-services__head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 56px;
}
.aw-home-services__eyebrow {
    display: inline-block;
    color: var(--aw-cyan);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 16px;
}
.aw-home-services__head .aw-section-subtitle { margin-top: 16px; }

.aw-home-services__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.aw-home-service-card {
    background: var(--aw-bg-card);
    border: 1px solid var(--aw-border);
    border-radius: 20px;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.aw-home-service-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 191, 255, 0.4);
    background: var(--aw-bg-2);
}

/* Logo del servizio (SVG con nome incluso nella grafica). No titolo testuale,
   il nome del servizio è già nel SVG + alt + aria-label. */
.aw-home-service-card__logo {
    line-height: 0;
    margin-bottom: 22px;
}
.aw-home-service-card__logo img {
    max-width: 100%;
    max-height: 60px;
    height: auto;
    width: auto;
}
/* Titolo card — !important per battere CSS Elementor su h3 */
.aw-home-service-card h3.aw-home-service-card__title,
.aw-home-service-card .aw-home-service-card__title {
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    color: var(--aw-white) !important;
    margin: 0 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* Tagline bold bianca (1 frase incisiva) */
.aw-home-service-card p.aw-home-service-card__tagline,
.aw-home-service-card .aw-home-service-card__tagline {
    color: var(--aw-white) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    margin: 0 0 16px !important;
}

/* Excerpt bianco (paragrafo descrittivo) */
.aw-home-service-card p.aw-home-service-card__excerpt,
.aw-home-service-card .aw-home-service-card__excerpt {
    color: var(--aw-white) !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    margin: 0 0 24px !important;
    flex: 1;
}

/* CTA con freccia SVG */
.aw-home-service-card .aw-home-service-card__link {
    display: flex !important;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    color: var(--aw-cyan) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.5;
    margin-top: auto;
    text-decoration: none !important;
}
.aw-home-service-card__link-arrow {
    flex-shrink: 0;
    width: 18px;
    height: 14px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='17.498' height='14.996' viewBox='0 0 17.498 14.996'><path d='M17.316,7.939a.627.627,0,0,0,0-.883L10.441.182a.624.624,0,0,0-.883.883l5.809,5.809H.625a.625.625,0,0,0,0,1.25H15.367L9.559,13.932a.624.624,0,0,0,.883.883l6.875-6.875Z' fill='%2300BFFF'/></svg>") no-repeat center / contain;
    transition: transform .25s ease;
}
.aw-home-service-card:hover .aw-home-service-card__link-arrow {
    transform: translateX(4px);
}

@media (max-width: 1100px) {
    .aw-home-services__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
    .aw-home-services__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .aw-home-services__grid { grid-template-columns: 1fr; }
}


/* ============================================================
   3. CASES SECTION HEAD (featured + grid)
   ============================================================ */

.aw-home-cases { padding: 90px 0; }
.aw-home-cases .container { max-width: 1400px; margin: 0 auto; padding: 0 20px; }
.aw-home-cases__head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 40px;
}
.aw-home-cases__head .aw-centered-statement__label {
    display: inline-flex;
    margin-bottom: 16px;
}


/* ============================================================
   CASI DI SUCCESSO GRID — righe 2-col (immagine + body)
   Usata dalla home tramite shortcode [aw_casi_grid]
   ============================================================ */

/* Contenitore home case study: eredita il grid layout da .aw-blog__grid
   (stesso pattern della pagina Casi). Aggiungiamo solo padding laterale. */
.aw-home-casi {
    padding-left: 20px;
    padding-right: 20px;
}

.aw-home-caso {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) 2fr;
    gap: 24px;
    align-items: stretch;
    min-height: 300px;
}

/* MEDIA: immagine con tag overlay. Niente aspect-ratio: il media si stretcha
   in altezza per riempire la riga (la grid ha align-items: stretch). */
.aw-home-caso__media {
    position: relative;
    display: block;
    border-radius: 20px;
    overflow: hidden;
    background: var(--aw-bg-card);
}
.aw-home-caso__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}
.aw-home-caso:hover .aw-home-caso__media img {
    transform: scale(1.04);
}

/* Tag/badge in overlay sull'immagine */
.aw-home-caso__tag {
    position: absolute;
    left: 16px;
    bottom: 16px;
    background: var(--aw-cyan);
    color: #08142c;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 999px;
    letter-spacing: 0.02em;
}

/* BODY card — effetto vetro blu (glassmorphism) */
.aw-home-caso__body {
    background: rgba(12, 26, 54, 0.85); /* blu navy semi-trasparente (--aw-bg-2 a 55%) */
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 36px 40px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.aw-home-caso:hover .aw-home-caso__body {
    background: rgba(12, 26, 54, 0.95);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.35);
}

.aw-home-caso__date {
    color: var(--aw-cyan) !important;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 14px;
}

.wp-element-caption {
    color: var(--aw-white) !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    margin-top: 8px !important;
    text-align: left !important;
}

.aw-home-caso h3.aw-home-caso__title,
.aw-home-caso .aw-home-caso__title {
    font-size: clamp(20px, 1.8vw, 26px) !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    color: var(--aw-white) !important;
    margin: 0 0 18px !important;
}
.aw-home-caso__title a {
    color: inherit !important;
    text-decoration: none !important;
    transition: color .2s ease;
}
.aw-home-caso__title a:hover { color: var(--aw-cyan) !important; }

.aw-home-caso p.aw-home-caso__excerpt,
.aw-home-caso .aw-home-caso__excerpt {
    color: var(--aw-white) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin: 0 0 24px !important;
    flex: 1;
}

/* Link "Leggi l'articolo" con freccia (stessa freccia delle service card) */
.aw-home-caso__link {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    color: var(--aw-cyan) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    margin-top: auto;
    align-self: flex-start;
    transition: gap .2s ease;
}
.aw-home-caso__link-arrow {
    width: 18px;
    height: 14px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='17.498' height='14.996' viewBox='0 0 17.498 14.996'><path d='M17.316,7.939a.627.627,0,0,0,0-.883L10.441.182a.624.624,0,0,0-.883.883l5.809,5.809H.625a.625.625,0,0,0,0,1.25H15.367L9.559,13.932a.624.624,0,0,0,.883.883l6.875-6.875Z' fill='%2300BFFF'/></svg>") no-repeat center / contain;
    transition: transform .25s ease;
}
.aw-home-caso__link:hover { gap: 16px; }
.aw-home-caso__link:hover .aw-home-caso__link-arrow { transform: translateX(4px); }

@media (max-width: 900px) {
    .aw-home-caso {
        grid-template-columns: 1fr;
    }
    .aw-home-caso__body {
        padding: 28px 24px;
    }
}


/* ============================================================
   BLOG GRID — 3 col verticali con filtri pill e paginazione
   Usata tramite shortcode [aw_blog_grid]
   ============================================================ */

.aw-blog {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* Filtri categoria */
.aw-blog__filters {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 50px;
    align-items: center;
}

/* Gruppo per tassonomia */
.aw-blog__filter-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    align-items: center;
}
.aw-blog__filter-label {
    color: var(--aw-white);
    font-size: 30px;
    font-weight: 800;
    line-height: 1.2em;
    text-align: center;
    margin: 0;
    letter-spacing: -0.01em;
}
.aw-blog__filter-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
.aw-blog .aw-blog__filter,
a.aw-blog__filter {
    display: inline-flex !important;
    padding: 14px 28px;
    border-radius: 999px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--aw-white) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    letter-spacing: 0.02em;
    transition: all .25s ease;
}
.aw-blog .aw-blog__filter:hover,
a.aw-blog__filter:hover {
    border-color: var(--aw-cyan);
    color: var(--aw-cyan) !important;
}
.aw-blog .aw-blog__filter.is-active,
a.aw-blog__filter.is-active {
    background: var(--aw-cyan);
    border-color: var(--aw-cyan);
    color: #08142c !important;
}

/* Dropdown filtri (Settore / Tecnologia / Risultato) */
.aw-blog__selects {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    margin: 32px auto 28px;
    width: 100%;
    max-width: 900px;
}
.aw-blog__select-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 220px;
    min-width: 200px;
}
.aw-blog__select-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--aw-text-muted);
}
.aw-blog__select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    padding: 12px 40px 12px 16px;
    background-color: var(--aw-bg-card);
    border: 1px solid var(--aw-border);
    border-radius: 10px;
    color: var(--aw-white);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
    /* Chevron SVG cyan */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='14' height='14' fill='none' stroke='%2300BFFF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px 14px;
}
.aw-blog__select:hover {
    border-color: var(--aw-cyan);
}
.aw-blog__select:focus {
    outline: none;
    border-color: var(--aw-cyan);
    box-shadow: 0 0 0 3px rgba(0, 191, 255, 0.15);
}
.aw-blog__select option {
    background: var(--aw-bg-card);
    color: var(--aw-white);
}

@media (max-width: 700px) {
    .aw-blog__selects {
        flex-direction: column;
        gap: 12px;
    }
    .aw-blog__select-wrap {
        flex: 1 1 100%;
        min-width: 0;
    }
}

/* Grid card */
.aw-blog__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.aw-blog-card {
    display: flex;
    flex-direction: column;
    background: rgba(12, 26, 54, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    overflow: hidden;
    transition: transform .25s ease, border-color .25s ease;
}
.aw-blog-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 191, 255, 0.35);
}

/* Media (immagine top) */
.aw-blog-card__media {
    position: relative;
    display: block;
    aspect-ratio: 2 / 1;
    overflow: hidden;
    background: var(--aw-bg-card);
}
.aw-blog-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}
.aw-blog-card:hover .aw-blog-card__media img {
    transform: scale(1.05);
}
.aw-blog-card__tag {
    position: absolute;
    left: 16px;
    bottom: 16px;
    background: var(--aw-cyan);
    color: #08142c;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 999px;
    letter-spacing: 0.02em;
}

/* Body */
.aw-blog-card__body {
    padding: 24px 24px 28px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.aw-blog-card__date {
    color: var(--aw-cyan);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}
.aw-blog-card h3.aw-blog-card__title,
.aw-blog-card .aw-blog-card__title {
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: var(--aw-white) !important;
    margin: 0 0 12px !important;
}
.aw-blog-card__title a {
    color: inherit !important;
    text-decoration: none !important;
    transition: color .2s ease;
}
.aw-blog-card__title a:hover { color: var(--aw-cyan) !important; }

.aw-blog-card p.aw-blog-card__excerpt,
.aw-blog-card .aw-blog-card__excerpt {
    color: var(--aw-white) !important;
    opacity: 0.85;
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin: 0 0 20px !important;
    flex: 1;
    /* Limita a 3 righe con ellipsis */
    display: -webkit-box !important;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.aw-blog-card__link {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    color: var(--aw-cyan) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    margin-top: auto;
    align-self: flex-start;
    transition: gap .2s ease;
}
.aw-blog-card__link-arrow {
    width: 16px;
    height: 13px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='17.498' height='14.996' viewBox='0 0 17.498 14.996'><path d='M17.316,7.939a.627.627,0,0,0,0-.883L10.441.182a.624.624,0,0,0-.883.883l5.809,5.809H.625a.625.625,0,0,0,0,1.25H15.367L9.559,13.932a.624.624,0,0,0,.883.883l6.875-6.875Z' fill='%2300BFFF'/></svg>") no-repeat center / contain;
    transition: transform .25s ease;
}
.aw-blog-card__link:hover { gap: 14px; }
.aw-blog-card__link:hover .aw-blog-card__link-arrow { transform: translateX(3px); }

/* Paginazione */
.aw-blog__pagination {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}
.aw-blog__pagination .page-numbers,
.aw-blog__pagination ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
}
.aw-blog__pagination .page-numbers a,
.aw-blog__pagination .page-numbers span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: transparent;
    color: var(--aw-white);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all .25s ease;
}
.aw-blog__pagination .page-numbers a:hover {
    border-color: var(--aw-cyan);
    color: var(--aw-cyan);
}
.aw-blog__pagination .page-numbers.current {
    background: var(--aw-cyan);
    border-color: var(--aw-cyan);
    color: #08142c;
}
.aw-blog__pagination .page-numbers.dots {
    border: none;
}

/* Empty state */
.aw-blog__empty {
    text-align: center;
    color: var(--aw-text-muted);
    padding: 60px 20px;
    font-size: 15px;
}

/* Loading state durante fetch AJAX */
.aw-blog__results {
    transition: opacity .25s ease;
}
.aw-blog.is-loading .aw-blog__results {
    opacity: 0.4;
    pointer-events: none;
}
.aw-blog.is-loading {
    position: relative;
}
.aw-blog.is-loading::after {
    content: "";
    position: absolute;
    top: 120px;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255, 255, 255, 0.15);
    border-top-color: var(--aw-cyan);
    border-radius: 50%;
    animation: aw-blog-spin .8s linear infinite;
    z-index: 10;
}
@keyframes aw-blog-spin {
    to { transform: translateX(-50%) rotate(360deg); }
}

@media (max-width: 1100px) {
    .aw-blog__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
    .aw-blog__grid { grid-template-columns: 1fr; }
    .aw-blog__filters { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 8px; }
    .aw-blog__filter { white-space: nowrap; flex-shrink: 0; }
}


/* ============================================================
   PARTNER GRID — loghi clienti/partner
   Usata dalla home tramite shortcode [aw_partner_grid]
   ============================================================ */

.aw-home-partners {
    display: grid;
    grid-template-columns: repeat(var(--aw-partners-cols, 5), 1fr);
    gap: 32px 20px;
    align-items: center;
    justify-items: center;
}

.aw-home-partner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 78px;
    text-decoration: none;
}

.aw-home-partner img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    opacity: 1;
    transition: opacity .25s ease, transform .25s ease;
}

a.aw-home-partner:hover img {
    opacity: 1;
    transform: scale(1.05);
}

@media (max-width: 900px) {
    .aw-home-partners { grid-template-columns: repeat(3, 1fr); gap: 24px 16px; }
}
@media (max-width: 600px) {
    .aw-home-partners { grid-template-columns: repeat(2, 1fr); gap: 20px 14px; }
}

/* === ARWEB HOME PACK END === */


/* === ARWEB START: bg watermark "A" + cyan glow (utility) 2026-05-16 === */

/* Classe utility da applicare a un Container Elementor (o <section>) per
   ottenere lo sfondo: watermark "A" outline + glow cyan radiale sotto.
   Layering: ::before = glow (sotto), ::after = A outline (sopra).
   Contenuto del container resta sopra a tutto via z-index. */

/* Contenitore: position relative + overflow hidden per ancorare e clippare i pseudo */
.aw-bg-a-glow,
.e-con.aw-bg-a-glow {
    position: relative !important;
    overflow: hidden !important;
}

/* Pseudo-elements comuni. Selettore .e-con.aw-bg-a-glow per specificità >
   regole Elementor su .e-con::before del background overlay. */
.aw-bg-a-glow::before,
.aw-bg-a-glow::after,
.e-con.aw-bg-a-glow::before,
.e-con.aw-bg-a-glow::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
    display: block !important;
    width: min(820px, 60vw) !important;
    height: auto !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}

.section-intro {
    position: relative;
    z-index: 1;
    overflow: visible !important;
}

.section-intro::before {
    content: "" !important;
    position: absolute !important;
    top: 20%;
    left: auto !important;
    right: 5% !important;
    transform: translateY(-50%);
    width: 45% !important;
    aspect-ratio: 1 / 1 !important;
    background: radial-gradient(
        ellipse 50% 50% at 50% 50%,
        rgba(0, 180, 220, 0.30) 0%,
        rgba(0, 100, 180, 0.12) 50%,
        transparent 100%
    );
}

.image-square-container {
    position: relative;
    aspect-ratio: 1 / 1 !important;
    overflow: visible !important;
}

.image-square-container img {
    position: absolute;
    top: 55%;
    transform: translateY(-50%);
    right: -7vw;
    width: 100% !important;
    min-width: 900px !important;
    height: auto !important;
    object-fit: contain;
}

@media (max-width: 900px) {
    .image-square-container {
        aspect-ratio: auto !important;
        height: auto !important;
        overflow: visible !important;
    }
    .image-square-container img {
        position: static !important;
        top: auto !important;
        right: auto !important;
        transform: none !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 480px;
        height: auto !important;
        margin: 0 auto;
        display: block;
    }
}

/* GLOW cyan radiale (sotto) — ancorato a destra */
.aw-bg-a-glow::before,
.e-con.aw-bg-a-glow::before {
    right: -8% !important;
    left: auto !important;
    aspect-ratio: 1 / 1 !important;
    background-image: url("assets/aw-cyan-glow.svg") !important;
    z-index: 0 !important;
}

/* A outline (sopra al glow) — ancorato a destra */
.aw-bg-a-glow::after,
.e-con.aw-bg-a-glow::after {
    right: -8% !important;
    left: auto !important;
    aspect-ratio: 808 / 646 !important;
    background-image: url("assets/aw-logo-watermark-outline.svg") !important;
    z-index: 1 !important;
}

/* Contenuto sempre sopra ai pseudo-elements */
.aw-bg-a-glow > *,
.aw-bg-a-glow > .container,
.aw-bg-a-glow > .e-con-inner {
    position: relative;
    z-index: 2;
}

/* Modificatore: ancoraggio a sinistra invece che destra */
.aw-bg-a-glow--left::before,
.e-con.aw-bg-a-glow--left::before {
    right: auto !important;
    left: -8% !important;
}
.aw-bg-a-glow--left::after,
.e-con.aw-bg-a-glow--left::after {
    right: auto !important;
    left: -8% !important;
}


/* ============================================================
   aw-bg-glow — Classe utility per SOLO bagliore cyan (senza A).
   Modificatori: --center (default), --left, --right
   Da applicare a un Container Elementor.
   ============================================================ */

.aw-bg-glow,
.e-con.aw-bg-glow {
    position: relative !important;
    overflow: hidden;
}
.aw-bg-glow-big {
    position: relative !important;
}

.aw-bg-glow-big::before {
    content: "" !important;
    position: absolute !important;
    top: -10% !important;
    right: 0 !important;
    left: auto !important;
    width: min(1500px, 100vw) !important;
    aspect-ratio: 1 / 1 !important;
    background-image: url("assets/aw-cyan-glow.svg") !important;
    background-repeat: no-repeat !important;
    background-position: top right !important;
    background-size: contain !important;
    pointer-events: none !important;
    display: block !important;
    z-index: 0 !important;
}

.aw-bg-glow::before,
.e-con.aw-bg-glow::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: min(900px, 70vw) !important;
    aspect-ratio: 1 / 1 !important;
    background-image: url("assets/aw-cyan-glow.svg") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    pointer-events: none !important;
    display: block !important;
    z-index: 0 !important;
}

/* Contenuto sopra al bagliore */
.aw-bg-glow > *,
.aw-bg-glow > .container,
.aw-bg-glow > .e-con-inner {
    position: relative;
    z-index: 1;
}

/* Modificatori posizione */
.aw-bg-glow--left::before,
.e-con.aw-bg-glow--left::before {
    left: -8% !important;
    transform: translateY(-50%) !important;
}
.aw-bg-glow--right::before,
.e-con.aw-bg-glow--right::before {
    left: auto !important;
    right: -8% !important;
    transform: translateY(-50%) !important;
}

/* === ARWEB END === */


/* === ARWEB START: design fidelity (CTA + Newsletter) 2026-05-15 === */

/* ============================================================
   CTA "Pronto a portare..." — fedeltà al mockup
   Scope: .aw-cta-section (funziona sia con il fallback PHP che
   con il rendering Elementor Container — basta che la sezione
   abbia la class .aw-cta-section).
   ============================================================ */

/* Watermark logo Arweb sullo sfondo + glow cyan dietro */
.aw-cta-section { overflow: hidden; position: relative; }

/* ::before = GLOW cyan radiale (livello più in basso) */
.aw-cta-section::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -10%;
    transform: translateY(-50%);
    width: min(820px, 60vw);
    aspect-ratio: 1 / 1;
    background: url("assets/aw-cyan-glow.svg") center/contain no-repeat;
    pointer-events: none;
    z-index: 0;
}

/* ::after = logo "A" watermark (sopra al glow) */
.aw-cta-section::after {
    content: "";
    position: absolute;
    top: 50%;
    left: -8%;
    transform: translateY(-50%);
    width: min(820px, 60vw);
    aspect-ratio: 808 / 645;
    background: url("assets/aw-logo-watermark.svg") center/contain no-repeat;
    opacity: 0.06;
    pointer-events: none;
    z-index: 1;
}

/* Contenuto sempre sopra al watermark e al glow */
.aw-cta-section > *,
.aw-cta-section .container,
.aw-cta-section__inner { position: relative; z-index: 2; }

/* --- Widget Heading di Elementor: titolo grande con span cyan ---
   !important per battere CSS iniettato da Elementor sul widget. */
.aw-cta-section .elementor-widget-heading .elementor-heading-title,
.aw-cta-section .elementor-widget-heading h2.elementor-heading-title,
.aw-cta-section .elementor-widget-heading h3.elementor-heading-title,
.aw-cta-section h2.aw-cta-section__title {
    font-size: clamp(28px, 3.2vw, 42px) !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.01em !important;
    color: var(--aw-white) !important;
    margin: 0 0 20px !important;
}
.aw-cta-section .elementor-heading-title span,
.aw-cta-section__title span { color: var(--aw-cyan) !important; }
.aw-newsletter .elementor-heading-title span,
.aw-newsletter__title span { color: var(--aw-cyan) !important; }

/* --- Widget Text Editor di Elementor: sottotitolo muted --- */
.aw-cta-section .elementor-widget-text-editor,
.aw-cta-section .elementor-widget-text-editor p,
.aw-cta-section p.aw-cta-section__subtitle {
    color: var(--aw-text);
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
    max-width: 420px;
}

/* --- Form CF7: label cyan, non uppercase ---
   Anche il selettore .aw-form-block per styling del form fuori dal CTA section
   (es. pagina Contatti) — stessa identica grafica del form CTA. */
.aw-cta-section .wpcf7-form .form-wrapper-1-col .form-item label,
.aw-cta-section .wpcf7-form .form-wrapper-2-col .form-item label,
.aw-cta-section .wpcf7-form .form-item-textarea label,
.aw-form-block .wpcf7-form .form-wrapper-1-col .form-item label,
.aw-form-block .wpcf7-form .form-wrapper-2-col .form-item label,
.aw-form-block .wpcf7-form .form-item-textarea label,
.aw-form-block .wpcf7-form .select-holder label {
    position: static;
    transform: none;
    color: var(--aw-cyan);
    text-transform: none;
    letter-spacing: 0;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
}

/* --- Form CF7: textarea con bordo box (no floating label) --- */
.aw-cta-section .wpcf7-form .form-item-textarea,
.aw-form-block .wpcf7-form .form-item-textarea {
    margin-top: 4px;
    margin-bottom: 24px;
}
.aw-cta-section .wpcf7-form .form-item-textarea textarea,
.aw-form-block .wpcf7-form .form-item-textarea textarea {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--aw-border) !important;
    border-bottom: 1px solid var(--aw-border) !important;
    border-radius: var(--aw-radius-sm, 8px) !important;
    padding: 14px 16px !important;
    min-height: 120px;
}
.aw-cta-section .wpcf7-form .form-item-textarea textarea:focus,
.aw-form-block .wpcf7-form .form-item-textarea textarea:focus {
    border-color: var(--aw-cyan) !important;
    background: rgba(0, 191, 255, 0.04) !important;
    box-shadow: 0 0 0 3px var(--aw-cyan-glow, rgba(0,191,255,0.15));
}

/* --- Form footer .aw-form-block: stessa logica del CTA (privacy full + bottone dx) --- */
.aw-form-block .wpcf7-form .form-footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    margin-top: 8px;
}
.aw-form-block .wpcf7-form .form-consent {
    margin: 0;
}
.aw-form-block .wpcf7-form .form-footer .form-button {
    position: relative;
    display: inline-block;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    margin: 0;
    overflow: visible;
    align-self: flex-end;
}
.aw-form-block .wpcf7-form .form-footer .form-button::after {
    content: "";
    display: block;
    position: absolute;
    right: 28px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 14px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='13.72' viewBox='0 0 16 13.72'><g transform='translate(0 13.72) rotate(-90)'><path d='M6.053,15.665a1.145,1.145,0,0,0,1.618,0l5.715-5.715a1.144,1.144,0,0,0-1.618-1.618L8,12.1V1.143a1.143,1.143,0,1,0-2.286,0V12.1L1.953,8.336A1.144,1.144,0,0,0,.335,9.954l5.715,5.715Z' fill='%2308142c'/></g></svg>");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 2;
    transition: transform .25s ease;
}
.aw-form-block .wpcf7-form .form-footer .form-button:hover::after {
    transform: translate(4px, -50%);
}
.aw-form-block .wpcf7-form .form-footer .form-button .wpcf7-submit {
    background: var(--aw-cyan) !important;
    color: #08142c;
    border: none !important;
    border-radius: 999px;
    padding: 16px 60px 16px 36px;
    min-width: 220px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-align: left;
    cursor: pointer;
    transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
    box-shadow: 0 0 28px rgba(0, 191, 255, 0.35);
}
.aw-form-block .wpcf7-form .form-footer .form-button .wpcf7-submit:hover {
    background: var(--aw-cyan-dark) !important;
    box-shadow: 0 0 42px rgba(0, 191, 255, 0.6);
    transform: translateY(-1px);
}
.aw-form-block .wpcf7-form .form-footer .form-button .wpcf7-submit:active {
    transform: translateY(0);
}
.aw-form-block .wpcf7-form .form-footer .form-button .wpcf7-spinner {
    position: absolute;
    left: 100%;
    top: 50%;
    margin: 0 0 0 12px;
    transform: translateY(-50%);
}

/* --- Form footer CTA: privacy full-width sopra, bottone a destra sotto --- */
.aw-cta-section .wpcf7-form .form-footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    margin-top: 8px;
}
.aw-cta-section .wpcf7-form .form-consent {
    margin: 0;
}
.aw-cta-section .wpcf7-form .form-footer .form-button {
    align-self: flex-end;
}

/* Wrapper neutro: posizione relativa per ancorare la freccia */
.aw-cta-section .wpcf7-form .form-footer .form-button {
    position: relative;
    display: inline-block;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    margin: 0;
    overflow: visible;
}

/* Freccia SVG (::after del wrapper, non del submit — gli <input> non hanno pseudo).
   SVG inline come data URI così non dipende da file esterno. */
.aw-cta-section .wpcf7-form .form-footer .form-button::after {
    content: "";
    display: block;
    position: absolute;
    right: 28px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 14px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='13.72' viewBox='0 0 16 13.72'><g transform='translate(0 13.72) rotate(-90)'><path d='M6.053,15.665a1.145,1.145,0,0,0,1.618,0l5.715-5.715a1.144,1.144,0,0,0-1.618-1.618L8,12.1V1.143a1.143,1.143,0,1,0-2.286,0V12.1L1.953,8.336A1.144,1.144,0,0,0,.335,9.954l5.715,5.715Z' fill='%2308142c'/></g></svg>");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 2;
    transition: transform .25s ease;
}
.aw-cta-section .wpcf7-form .form-footer .form-button:hover::after {
    transform: translate(4px, -50%);
}

/* Submit: padding-right maggiorato per far spazio alla freccia */
.aw-cta-section .wpcf7-form .form-footer .form-button .wpcf7-submit {
    background: var(--aw-cyan) !important;
    color: #08142c;
    border: none !important;
    border-radius: 999px;
    padding: 16px 60px 16px 36px;
    min-width: 280px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-align: left;
    cursor: pointer;
    transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
    box-shadow: 0 0 28px rgba(0, 191, 255, 0.35);
}
.aw-cta-section .wpcf7-form .form-footer .form-button .wpcf7-submit:hover {
    background: var(--aw-cyan-dark) !important;
    box-shadow: 0 0 42px rgba(0, 191, 255, 0.6);
    transform: translateY(-1px);
}
.aw-cta-section .wpcf7-form .form-footer .form-button .wpcf7-submit:active {
    transform: translateY(0);
}
/* Spinner CF7: fuori dal flusso del wrapper (così non spinge la freccia) */
.aw-cta-section .wpcf7-form .form-footer .form-button .wpcf7-spinner {
    position: absolute;
    left: 100%;
    top: 50%;
    margin: 0 0 0 12px;
    transform: translateY(-50%);
}

/* --- Solo fallback HTML: rimuove box decorativo intorno al form --- */
.aw-cta-section__form {
    background: transparent;
    border: none;
    padding: 0;
}


/* ============================================================
   NEWSLETTER — fedeltà al mockup
   Scope: .aw-newsletter (funziona con fallback PHP e con
   Container Elementor che ha quella class).
   ============================================================ */

/* --- Widget Heading: titolo con span cyan (stessa scala del CTA) ---
   Note: Elementor inietta CSS con specificità >.aw-newsletter — quindi
   !important è necessario per garantire il design. */
.aw-newsletter .elementor-widget-heading .elementor-heading-title,
.aw-newsletter .elementor-widget-heading h2.elementor-heading-title,
.aw-newsletter .elementor-widget-heading h3.elementor-heading-title,
.aw-newsletter .elementor-widget-heading h4.elementor-heading-title,
.aw-newsletter h3.aw-newsletter__title {
    font-size: clamp(28px, 3.2vw, 42px) !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.01em !important;
    color: var(--aw-white) !important;
    margin: 0 !important;
}
.aw-newsletter .elementor-heading-title span,
.aw-newsletter__title span { color: var(--aw-cyan); }

/* --- Solo fallback HTML: container piatto, no box --- */
.aw-newsletter__inner {
    background: transparent;
    border: none;
    padding: 0;
}

/* --- Form CF7: email a tutta larghezza --- */
.aw-newsletter .wpcf7-form .form-wrapper-1-col { margin: 0; }
.aw-newsletter .wpcf7-form .form-wrapper-1-col .form-item {
    padding: 0;
    margin: 0 0 16px;
    width: 100%;
}
.aw-newsletter .wpcf7-form .form-wrapper-1-col .form-item label {
    color: var(--aw-cyan) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
}
.aw-newsletter .wpcf7-form .form-wrapper-1-col .form-item input {
    border-radius: var(--aw-radius-sm, 8px) !important;
    background: var(--aw-bg-card) !important;
    border: 1px solid var(--aw-border) !important;
    height: 56px;
    line-height: 56px;
}

/* --- Footer: privacy sx, bottone dx --- */
.aw-newsletter .wpcf7-form .form-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    gap: 24px;
    margin-top: 0;
    flex-wrap: wrap;
}
.aw-newsletter .wpcf7-form .form-consent {
    flex: 1 1 auto;
    margin: 0;
}
.aw-newsletter .wpcf7-form .form-footer .form-button {
    /* wrapper neutro */
    display: inline-block;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    margin: 0;
    overflow: visible;
}
.aw-newsletter .wpcf7-form .form-footer .form-button .wpcf7-submit {
    background: var(--aw-cyan) !important;
    color: #030d1a;
    border: none !important;
    border-radius: 999px;
    padding: 14px 32px;
    min-width: 140px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
    box-shadow: 0 0 24px rgba(0, 191, 255, 0.35);
}
.aw-newsletter .wpcf7-form .form-footer .form-button .wpcf7-submit:hover {
    background: var(--aw-cyan-dark) !important;
    box-shadow: 0 0 32px rgba(0, 191, 255, 0.55);
    transform: translateY(-1px);
}
.aw-newsletter .wpcf7-form .form-footer .form-button .wpcf7-submit:active {
    transform: translateY(0);
}
/* Spinner CF7: fuori dal flusso del wrapper */
.aw-newsletter .wpcf7-form .form-footer .form-button .wpcf7-spinner {
    position: absolute;
    left: 100%;
    top: 50%;
    margin: 0 0 0 12px;
    transform: translateY(-50%);
}

.transform-y {
    transform: translateY(-50%) !important;
}

@media (max-width: 700px) {
    .aw-newsletter .wpcf7-form .form-footer {
        flex-direction: column;
        align-items: stretch;
    }
    .aw-newsletter .wpcf7-form .form-footer .form-button .wpcf7-submit {
        width: 100%;
    }
    .transform-y {
        transform: none !important;
    }
}



/* === ARWEB END === */

/* === ARWEB START: reveal animations === */
/* Animazioni in entrata on-scroll. Aggiungi .aw-reveal al widget Elementor
   (Avanzato > CSS Classes). Varianti: --up | --down | --left | --right | --fade | --zoom.
   Stagger: .aw-reveal-stagger sul contenitore (figli con delay incrementale 80ms).
   Threshold custom per-elemento via data-reveal-threshold="0.3" (default 0.15).
   Rispetta prefers-reduced-motion. */

.aw-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 1200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 1200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition-delay: calc(var(--aw-reveal-index, 0) * 120ms);
    will-change: opacity, transform;
}

.aw-reveal.aw-reveal--up    { transform: translateY(24px); }
.aw-reveal.aw-reveal--down  { transform: translateY(-24px); }
.aw-reveal.aw-reveal--left  { transform: translateX(24px); }
.aw-reveal.aw-reveal--right { transform: translateX(-24px); }
.aw-reveal.aw-reveal--fade  { transform: none; }
.aw-reveal.aw-reveal--zoom  { transform: scale(0.94); }

.aw-reveal.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .aw-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* Disattiva reveal nell'editor Elementor: gli elementi devono essere subito
   visibili per poter modificare testi/contenuti senza scrollare per attivarli. */
body.elementor-editor-active .aw-reveal,
.elementor-editor-active .aw-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}
/* === ARWEB END: reveal animations === */

/* === ARWEB START: elementor menu toggle === */
/* Stilizza il bottone hamburger di Elementor Nav Menu coerentemente al design system.
   Override del default (quadrato nero con bordo bianco grosso). */

.elementor-menu-toggle {
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    background: var(--aw-bg-card) !important;
    border: 1px solid var(--aw-border) !important;
    border-radius: var(--aw-radius-sm) !important;
    color: var(--aw-text) !important;
    transition: var(--aw-transition) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.elementor-menu-toggle:hover,
.elementor-menu-toggle:focus-visible {
    background: var(--aw-bg-card-hover) !important;
    border-color: var(--aw-border-hover) !important;
    color: var(--aw-cyan) !important;
}

.elementor-menu-toggle.elementor-active {
    background: var(--aw-cyan-glow) !important;
    border-color: var(--aw-cyan) !important;
    color: var(--aw-cyan) !important;
}

.elementor-menu-toggle i,
.elementor-menu-toggle svg {
    font-size: 20px !important;
    width: 20px !important;
    height: 20px !important;
}

/* Dropdown menu mobile — pannello che si apre al tap dell'hamburger */
.elementor-nav-menu--dropdown,
nav.elementor-nav-menu--dropdown {
    background: var(--aw-bg-2) !important;
    border: 1px solid var(--aw-border) !important;
    border-radius: var(--aw-radius) !important;
    margin-top: 70px !important;
    padding: 8px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4) !important;
    overflow: hidden;
}

.elementor-nav-menu--dropdown .elementor-nav-menu,
.elementor-nav-menu--dropdown ul {
    background: transparent !important;
}

.elementor-nav-menu--dropdown li.menu-item {
    border: 0 !important;
}

.elementor-nav-menu--dropdown li.menu-item + li.menu-item {
    border-top: 1px solid var(--aw-border) !important;
}

.elementor-nav-menu--dropdown a.elementor-item,
.elementor-nav-menu--dropdown a.elementor-sub-item {
    color: var(--aw-text) !important;
    padding: 14px 16px !important;
    font-weight: 500 !important;
    font-size: 15px !important;
    letter-spacing: -0.01em;
    border-radius: var(--aw-radius-sm) !important;
    transition: var(--aw-transition) !important;
    border: 0 !important;
}

.elementor-nav-menu--dropdown a.elementor-item:hover,
.elementor-nav-menu--dropdown a.elementor-item:focus,
.elementor-nav-menu--dropdown a.elementor-item.elementor-item-active,
.elementor-nav-menu--dropdown a.elementor-item.highlighted,
.elementor-nav-menu--dropdown a.elementor-sub-item:hover,
.elementor-nav-menu--dropdown a.elementor-sub-item:focus,
.elementor-nav-menu--dropdown a.elementor-sub-item.elementor-item-active {
    color: var(--aw-cyan) !important;
    background: var(--aw-cyan-glow) !important;
}

/* Submenu annidati */
.elementor-nav-menu--dropdown .sub-arrow {
    color: var(--aw-text-muted) !important;
    transition: var(--aw-transition);
}

.elementor-nav-menu--dropdown a:hover .sub-arrow,
.elementor-nav-menu--dropdown a.highlighted .sub-arrow {
    color: var(--aw-cyan) !important;
}

.elementor-nav-menu--dropdown .elementor-sub-item {
    padding-left: 32px !important;
    font-size: 14px !important;
    color: var(--aw-text-muted) !important;
}

/* Container .navigazione su mobile/tablet: assoluto, senza sfondo/bordi/padding.
   Si attiva sotto i 1024px (Elementor tablet breakpoint, quando appare l'hamburger). */
@media (max-width: 1024px) {
    #arweb-navigation, .navigazione  {
        top: 0 !important;
        right: 0 !important;
        position: absolute !important;
    }
    #arweb-navigation > div {
        border: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        backdrop-filter: none !important;
    }

    .elementor-menu-toggle {
        top: 20px !important;
        right: 20px !important;
        position: absolute !important;
    }
    .elementor-nav-menu--dropdown {
        margin-right: 20px !important;
        margin-top: 60px !important;
    }
}
/* === ARWEB END: elementor menu toggle === */

/* === ARWEB START: laptop-compact scaling === */
/* Why: cliente su laptop FullHD con scaling OS alto (viewport ~1500x686) vede tutto troppo grande.
   zoom mantiene proporzioni di font, padding e asset Elementor senza rompere il layout.
   Range: da 1100px (sopra il breakpoint mobile/tablet del tema) a 1600px. Sotto resta naturale. */
@media (min-width: 1100px) and (max-width: 1600px) {
    body { zoom: 0.88; }
    /* Compensa il zoom su altezze viewport: 100vh diventerebbe 88vh percepiti. */
    .hero-full-height { min-height: calc(100vh / 0.88) !important; }
}
/* === ARWEB END: laptop-compact scaling === */

/* === ARWEB START: faq mobile fixes === */
/* Su mobile/tablet il titolo .aw-faq-section ha padding: 0 150px (style.css:1394)
   che spreme il testo a meno di 100px utili. Azzeriamo sotto 900px. */
@media (max-width: 900px) {
    .aw-faq-section .aw-section-title {
        padding: 0 !important;
    }
}

/* Permette al testo della domanda di andare a capo dentro la grid 1fr.
   Triplo fix: min-width:0 sbloccha il grid item dal min-content, display:block
   forza lo span come blocco, white-space:normal sul button neutralizza l'eventuale
   nowrap ereditato da reset Hello Elementor / Elementor button styles. */
.aw-faq__head,
button.aw-faq__head {
    white-space: normal !important;
}
.aw-faq__num,
.aw-faq__q {
    min-width: 0;
    display: block;
    overflow-wrap: anywhere;
    white-space: normal;
}

/* Icona accordion più compatta su smartphone (<600px) per dare spazio alla domanda. */
@media (max-width: 600px) {
    .aw-faq__icon {
        width: 32px;
        height: 32px;
        background-size: 11px auto;
    }
    .aw-faq__head { column-gap: 12px; }
}

/* Margine laterale sul body della risposta su mobile/tablet. */
@media (max-width: 900px) {
    .aw-faq__body {
        margin-left: 20px;
        margin-right: 20px;
    }
}
/* === ARWEB END: faq mobile fixes === */

/* === ARWEB START: serv-extra block === */
/* Blocco opzionale tra banner CTA e sezione "Agisci ora" (ACF: extra_title + extra_text).
   Stile centered-statement light, riusa pattern del tema. */
.aw-serv-extra { padding: 90px 0; text-align: center; }
.aw-serv-extra__title {
    font-size: clamp(28px, 3.5vw, 42px);
    font-weight: 800;
    line-height: 1.2;
    color: var(--aw-white);
    margin: 0 auto 18px;
    max-width: 900px;
}
.aw-serv-extra__title span { color: var(--aw-cyan); }
.aw-serv-extra__text {
    color: var(--aw-text);
    font-size: 17px;
    line-height: 1.65;
    max-width: 720px;
    margin: 0 auto;
}
.aw-serv-extra__text p { margin: 0 0 12px; }
.aw-serv-extra__text p:last-child { margin-bottom: 0; }
/* === ARWEB END: serv-extra block === */

/* === ARWEB START: card-service image mobile === */
/* L'immagine ha translateY(-90px) per effetto bleed verso l'alto.
   Su mobile lo annulliamo, l'immagine torna in posizione naturale. */
@media (max-width: 900px) {
    .aw-card-service__image img {
        transform: translateY(0) !important;
    }
}
/* === ARWEB END: card-service image mobile === */

/* === ARWEB START: centered-statement mobile === */
/* Il titolo ha font-size: 45px !important fisso → su mobile fa wrap rotti.
   Scala a clamp responsivo e riduce padding su smartphone. */
@media (max-width: 900px) {
    .aw-centered-statement__title,
    .aw-centered-statement__title .elementor-heading-title,
    .aw-centered-statement .elementor-heading-title.aw-centered-statement__title {
        font-size: clamp(28px, 6vw, 36px) !important;
        line-height: 1.25em !important;
    }
    .aw-centered-statement__text {
        font-size: 16px;
    }
}
@media (max-width: 600px) {
    .aw-centered-statement {
        padding: 40px 20px 32px;
    }
}
/* === ARWEB END: centered-statement mobile === */

/* === ARWEB START: listing hero mobile === */
/* .aw-listing-hero default ha padding: 200px 0 90px (top alto per header sticky,
   zero orizzontale). Su mobile 200px di top sprecano mezzo viewport,
   e l'assenza di padding-x attacca il contenuto ai bordi. */
@media (max-width: 900px) {
    .aw-listing-hero {
        padding: 110px 20px 48px !important;
        min-height: 0 !important;
        height: auto !important;
    }
}
/* === ARWEB END: listing hero mobile === */

/* === ARWEB START: newsletter mobile === */
/* La sezione .aw-newsletter ha padding: 60px 0 (zero orizzontale) → su mobile
   i contenuti finiscono attaccati al bordo viewport. Aggiungiamo rientro 20px. */
@media (max-width: 900px) {
    .aw-newsletter {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}
/* Padding interno card più compatto su smartphone (<600px). */
@media (max-width: 600px) {
    .aw-newsletter__inner {
        padding: 20px !important;
    }
}
/* === ARWEB END: newsletter mobile === */

/* === ARWEB START: form submit wrap === */
/* Permette ai bottoni di submit dei form di andare a capo quando il testo è
   lungo (es. CTA tradotte, label multilingua). Default browser su <button> e
   <input type=submit> tiene il testo su una riga sola. */
.wpcf7-submit,
button.wpcf7-submit,
input[type="submit"],
button[type="submit"] {
    white-space: normal !important;
    height: auto !important;
    line-height: 1.3;
}
/* === ARWEB END: form submit wrap === */

/* === ARWEB START: mobile section padding === */
/* Riduzione globale padding verticale sezioni su mobile (<900px) a 48px.
   Escluse le *-hero perché hanno padding-top alto per compensare l'header
   sticky — toccarle porterebbe contenuto sotto la barra. Se serve anche
   hero, va fatto separatamente con un padding-top dedicato. */
@media (max-width: 900px) {
    section[class*="aw-"]:not([class*="-hero"]),
    [class*="aw-"][class*="-section"]:not([class*="-hero"]),
    .aw-newsletter,
    .aw-related-posts,
    .aw-prog-section,
    .aw-prog-body,
    .aw-home-features,
    .aw-serv-intro,
    .aw-serv-problem,
    .aw-serv-solution,
    .aw-serv-banner,
    .aw-serv-risultato,
    .aw-serv-problem-solution,
    .aw-serv-related,
    .aw-serv-faq,
    .aw-stats-overall,
    .aw-principles-section,
    .aw-contact-section,
    .aw-home-services,
    .aw-home-casi-section,
    .aw-home-partners-section {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }
}
/* === ARWEB END: mobile section padding === */

/* === ARWEB START: no horizontal overflow === */
/* Safety net globale: impedisce lo scroll orizzontale causato da elementi
   decorativi (glow, swoosh, margin negativi, 100vw vs scrollbar).
   `clip` invece di `hidden` per non rompere position: sticky dell'header.
   Il background pieno su html+body chiude la banda bianca in zoom-out. */
html,
body {
    overflow-x: clip;
    max-width: 100%;
    background-color: var(--aw-bg);
}
/* === ARWEB END: no horizontal overflow === */

/* === ARWEB START: fix causale overflow — form contatti + footer inline list (2026-07-23) ===
   FIX 2 mobile check. Il clip su html/body maschera l'overflow a viewport
   mobile ma in zoom-out riappare la banda vuota. Cause identificate:

     A) .form-wrapper-2-col ha gutter negativo margin-left/right:-12px, ma
        il <form.wpcf7-form> genitore ha overflow-x: visible e nessun padding
        compensativo → sfora di 12px per lato.
     B) ul.elementor-icon-list-items.elementor-inline-items (link footer
        Privacy/Cookie/Termini) ha margin: 0 -15px dentro un container più
        stretto → sfora di 15px per lato.

   Fix causale (non aumento del clip): compensiamo il gutter negativo con
   padding sul genitore del form, e azzeriamo il margine negativo del list
   footer con flex-wrap per mantenere l'allineamento. */

/* A) Form contatti: compensa il gutter negativo con padding sul genitore. */
.wpcf7-form {
    padding-left: 12px;
    padding-right: 12px;
}

/* B) Link footer inline: evita lo sforamento. */
ul.elementor-icon-list-items.elementor-inline-items {
    margin-left: 0 !important;
    margin-right: 0 !important;
    flex-wrap: wrap;
}
/* === ARWEB END: fix causale overflow === */


/* === ARWEB START: Servizio - immagini blocchi Problema e Soluzione (2026-06-19) ===
   Aggiunge supporto immagine laterale ai due blocchi PROBLEMA e SOLUZIONE
   del template single-servizio.php. Riusa il pattern visivo già in uso per
   .aw-serv-intro__image (border + radius). Il grid 2-col è già nei selettori
   esistenti (.aw-serv-problem .container e .aw-serv-cols-2); aggiungiamo
   solo lo styling delle immagini e il fallback 1-col quando l'immagine
   non è caricata. */

.aw-serv-problem__image,
.aw-serv-solution__image {
    border: 1px solid #70707070;
    border-radius: 24px;
    overflow: hidden;
    align-self: center;
}
.aw-serv-problem__image img,
.aw-serv-solution__image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Il blocco soluzione: ora i testi (titolo soluzione + paragrafo + Cosa puoi
   includere) sono tutti in un singolo __text a sinistra. Mantengo spazio tra
   il fine del paragrafo e il titolo "Cosa puoi includere". */
.aw-serv-solution__includes-title {
    margin-top: 36px;
}

/* Fallback: se l'immagine non è ancora caricata, il container torna a 1 col
   per evitare che il testo occupi solo metà dello spazio con vuoto a destra. */
.aw-serv-problem--no-image .container {
    grid-template-columns: 1fr;
}
.aw-serv-solution--no-image .aw-serv-cols-2 {
    grid-template-columns: 1fr;
}

/* Sezione "La nostra soluzione": in desktop immagine a SINISTRA, testo a destra.
   Il markup nel template resta testo -> immagine (ordine semantico), ma via CSS
   invertiamo l'ordine visivo. Su mobile (<=900px) il grid diventa 1 colonna e
   ripristiniamo l'ordine naturale: prima testo, poi immagine (più leggibile). */
.aw-serv-solution .aw-serv-solution__image { order: 1; }
.aw-serv-solution .aw-serv-solution__text  { order: 2; }
@media (max-width: 900px) {
    .aw-serv-solution .aw-serv-solution__image,
    .aw-serv-solution .aw-serv-solution__text { order: initial; }
}
/* === ARWEB END: Servizio - immagini blocchi Problema e Soluzione === */

/* === ARWEB START: Servizio - sezione "Cosa puoi includere" (grid di card numerate) === */
.aw-serv-includes-section { padding: 90px 0; }
/* Titolo sezione: stesso stile di .aw-faq-section .aw-section-title
   (glow spostato in basso). Padding laterale rimosso 2026-07-24 su richiesta. */
.aw-serv-includes-section .aw-section-title {
    text-align: center;
    margin: 70px auto 48px;
    &::before {
        top: 40%;
        height: 100%;
    }
}

.aw-includes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
@media (max-width: 900px) {
    .aw-includes-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .aw-includes-grid { grid-template-columns: 1fr; }
}

.aw-include-card {
    position: relative;
    background: var(--aw-bg-card);
    border: 1px solid var(--aw-border);
    border-radius: 20px;
    padding: 40px 32px 36px;
    overflow: hidden;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.aw-include-card::before {
    /* Decorazione "onde" azzurre in alto a destra della card (SVG inline). */
    content: '';
    position: absolute;
    top: 20px;
    right: -30px;
    width: 220px;
    height: 90px;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 100' fill='none'%3E%3Cpath d='M0 50 Q75 15 150 50 T300 50' stroke='%2300BFFF' stroke-width='1.2' opacity='0.55'/%3E%3Cpath d='M0 62 Q75 30 150 62 T300 62' stroke='%2300BFFF' stroke-width='1' opacity='0.35'/%3E%3Cpath d='M0 38 Q75 8 150 38 T300 38' stroke='%2300BFFF' stroke-width='1' opacity='0.4'/%3E%3Cpath d='M0 74 Q75 45 150 74 T300 74' stroke='%2300BFFF' stroke-width='1' opacity='0.25'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    filter: blur(0.3px);
    opacity: 0.9;
}
.aw-include-card:hover {
    border-color: rgba(0, 191, 255, 0.35);
    box-shadow: 0 0 0 1px rgba(0, 191, 255, 0.15), 0 20px 40px -20px rgba(0, 191, 255, 0.25);
    transform: translateY(-2px);
}

.aw-include-card__num {
    position: relative;
    display: inline-block;
    font-size: clamp(44px, 4.5vw, 56px);
    font-weight: 400;
    line-height: 1;
    color: var(--aw-cyan);
    letter-spacing: -0.02em;
    text-shadow: 0 0 24px rgba(0, 191, 255, 0.45);
    margin-bottom: 56px;
}
.aw-include-card__num-tail {
    color: var(--aw-cyan);
    opacity: 0.9;
    margin-left: 2px;
}
.aw-include-card__title {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--aw-white);
    margin: 0 0 12px;
}
.aw-include-card__desc {
    font-size: 15px;
    line-height: 1.65;
    color: var(--aw-white);
    margin: 0;
}

@media (max-width: 700px) {
    .aw-include-card { padding: 32px 24px 28px; }
    .aw-include-card__num { margin-bottom: 40px; }
}
/* === ARWEB END: Servizio - sezione "Cosa puoi includere" === */

/* === ARWEB START: Servizio - variante "Gli step per collaborare con noi" ===
   Riusa il markup della sezione includes ma con estetica differenziata:
   - Grid 4 col su desktop (invece di 3)
   - Card più compatte, sfondo con gradient verticale
   - Numero in stile "outline" (contorno cyan, testo trasparente) + mini underline
   - Nessuna decorazione onde in cima (quella resta caratteristica di "Cosa puoi includere") */
/* Grid step: 3 card per riga con wrap. Uso flex invece di grid per centrare
   il blocco quando il numero di step è < 3 (o non multiplo di 3). Se in
   futuro gli step diventano più di 3, vanno a capo su nuova riga sempre a
   file di 3. */
.aw-serv-includes-section--steps .aw-includes-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}
.aw-serv-includes-section--steps .aw-include-card {
    flex: 0 1 calc((100% - 20px * 2) / 3); /* 3 card per riga, gap incluso */
    max-width: calc((100% - 20px * 2) / 3);
}
@media (max-width: 1100px) {
    .aw-serv-includes-section--steps .aw-include-card {
        flex-basis: calc((100% - 20px) / 2);
        max-width: calc((100% - 20px) / 2);
    }
}
@media (max-width: 600px) {
    .aw-serv-includes-section--steps .aw-include-card {
        flex-basis: 100%;
        max-width: 100%;
    }
}

.aw-serv-includes-section--steps .aw-include-card {
    background: linear-gradient(180deg, var(--aw-bg-2) 0%, var(--aw-bg-card) 100%);
    border: 1px solid rgba(0, 191, 255, 0.14);
    border-radius: 16px;
    padding: 28px 24px 26px;
}
.aw-serv-includes-section--steps .aw-include-card::before {
    display: none; /* niente onde per gli step */
}
.aw-serv-includes-section--steps .aw-include-card:hover {
    border-color: rgba(0, 191, 255, 0.45);
    box-shadow: 0 0 0 1px rgba(0, 191, 255, 0.2), 0 16px 32px -16px rgba(0, 191, 255, 0.3);
}

.aw-serv-includes-section--steps .aw-include-card__num {
    font-size: clamp(44px, 4vw, 60px);
    font-weight: 700;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--aw-cyan);
    text-shadow: none;
    margin-bottom: 40px;
    position: relative;
    padding-bottom: 12px;
}
.aw-serv-includes-section--steps .aw-include-card__num::after {
    content: '';
    position: absolute;
    left: 4px;
    bottom: 0;
    width: 32px;
    height: 2px;
    background: var(--aw-cyan);
    border-radius: 2px;
}
.aw-serv-includes-section--steps .aw-include-card__num-tail {
    display: none; /* rimuove "_" per look più pulito */
}

.aw-serv-includes-section--steps .aw-include-card__title {
    font-size: 18px;
    line-height: 1.3;
}
.aw-serv-includes-section--steps .aw-include-card__desc {
    font-size: 14px;
    line-height: 1.6;
}

@media (max-width: 700px) {
    .aw-serv-includes-section--steps .aw-include-card { padding: 26px 20px 24px; }
    .aw-serv-includes-section--steps .aw-include-card__num { margin-bottom: 32px; }
}
/* === ARWEB END: Servizio - variante Step === */

/* === ARWEB START: Servizio - testo sezioni a 18px (richiesta cliente A5) === */
/* Il cliente ha chiesto di portare il testo delle sezioni delle landing
   servizio da 16px a 18px per migliorare leggibilità. Scopiamo la regola
   a `.aw-single-servizio` per non toccare altri contesti del sito. */
.aw-single-servizio .aw-serv-intro__text,
.aw-single-servizio .aw-serv-problem-text,
.aw-single-servizio .aw-serv-block-text {
    font-size: 18px;
}
/* === ARWEB END: Servizio - testo sezioni a 18px === */

/* === ARWEB START: Servizio - H1 SEO nella hero (richiesta cliente A1) === */
/* H1 sottotitolo SEO-optimized inserito tra logo e subtitle. Stile discreto
   per non rubare scena al logo (immagine principale della hero), ma abbastanza
   visibile da essere valorizzato dai motori. Il testo lo compila il cliente
   nel campo ACF `h1_seo` di ogni landing servizio. */
.aw-serv-hero__h1 {
    font-size: clamp(20px, 2vw, 24px);
    font-weight: 400;
    line-height: 1.35;
    color: var(--aw-cyan);
    margin: 0 0 20px;
    max-width: 700px;
    letter-spacing: 0;
}
@media (max-width: 767px) {
    .aw-serv-hero__h1 {
        font-size: 18px;
        margin-bottom: 16px;
    }
}
/* === ARWEB END: Servizio - H1 SEO nella hero === */

/* === ARWEB START: header sticky background (2026-07-23) ===
   FIX 1 mobile check. L'header sticky di Elementor Pro applica autonomamente
   la classe `.elementor-sticky--active` durante lo scroll. Su MOBILE diamo
   sfondo solido + blur + ombra così logo/hamburger restano leggibili sopra
   il contenuto. Su desktop l'header resta trasparente come da design.
   z-index applicato a tutti i viewport (utile ovunque). */
header.elementor-element-b696051 {
    z-index: 999 !important;
}
@media (max-width: 767px) {
    header.elementor-element-b696051.elementor-sticky--active {
        background-color: rgba(8, 20, 44, 0.95) !important;
        box-shadow: 0 2px 14px rgba(0, 0, 0, 0.28) !important;
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
        transition: background-color .3s ease, box-shadow .3s ease;
    }
}
/* === ARWEB END: header sticky background === */

/* === ARWEB FIX 3 + 3b RIMOSSI 2026-07-24 (creavano problemi ovunque, non solo sui blocchi target) === */

/* === ARWEB START: FIX pagina Tecnologia — img overflow (2026-07-24) ===
   Blocco elementor-element-e8ffa48 (Tecnologia): l'immagine interna
   sfora ~4px oltre il bordo destro. Fix conservativo: max-width 100%. */
.elementor-element-e8ffa48 img {
    max-width: 100% !important;
    height: auto;
}
/* === ARWEB END: FIX pagina Tecnologia — img overflow === */

/* === ARWEB START: FIX 5 mobile — touch target checkbox/radio form (2026-07-23) ===
   CF7 checkbox/radio di default sono 18x18px, sotto la soglia touch di ~44px.
   Su mobile ingrandiamo il controllo e diamo min-height 44px alla label
   in flex per far diventare tutta l'area cliccabile un target adeguato. */
@media (max-width: 767px) {
    /* !important necessario: Elementor Pro + CF7 hanno regole a specificità
       alta su input[type=checkbox/radio] che sovrascriverebbero questo blocco. */
    html body .wpcf7-form input[type="checkbox"],
    html body .wpcf7-form input[type="radio"] {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        min-height: 22px !important;
    }
    html body .wpcf7-list-item label {
        display: flex !important;
        align-items: center;
        gap: 8px;
        min-height: 44px;
    }
}
/* === ARWEB END: FIX 5 mobile — touch target checkbox/radio form === */

/* === ARWEB START: pills feature card servizio - font-size mobile (2026-07-24) === */
@media (max-width: 767px) {
    .aw-card-service__feature {
        font-size: 14px;
        padding: 8px 16px;
    }
}
/* === ARWEB END: pills feature card servizio - font-size mobile === */

/* === ARWEB START: single-servizio mobile <900px (2026-07-24) ===
   1) .aw-serv-hero__eyebow: 20px → 18px per non affollare la hero.
   2) HERO: illustration in cima al content (immagine sopra il testo).
      Forziamo flex-direction: column anche su 767-900 (non solo <767).
   3) Blocchi PROBLEMA e SOLUZIONE: nel DOM l'immagine viene DOPO il testo
      (per SEO/reading order). Su desktop la SOLUZIONE ha già image a sinistra
      via `order: 1/2`. Su mobile grid diventa 1-col: vogliamo IMMAGINE →
      TITOLO → TESTO (immagine in cima). INTRO ha già l'immagine sopra nel
      DOM, quindi non serve toccarlo.
   Selettori mirati alle classi del template single-servizio.php, quindi
   nessun effetto collaterale su altri layout Elementor. */
@media (max-width: 900px) {
    .aw-serv-hero__eyebow {
        font-size: 18px;
    }

    /* HERO: illustration sopra al content */
    .aw-serv-hero .container {
        flex-direction: column;
    }
    .aw-serv-hero__illustration {
        order: -1;
    }

    /* PROBLEMA: immagine sopra al testo */
    .aw-serv-problem__image {
        order: -1;
    }

    /* SOLUZIONE: override della regola precedente che ripristinava
       `order: initial` su mobile (che teneva l'immagine sotto). */
    .aw-serv-solution .aw-serv-solution__image {
        order: -1 !important;
    }
    .aw-serv-solution .aw-serv-solution__text {
        order: initial !important;
    }
}
/* === ARWEB END: single-servizio mobile <900px === */

/* === ARWEB START: article body -2px su mobile (2026-07-24) ===
   Blog + case study (entrambi usano single-post.php con .aw-article-content).
   Desktop: 19px (bump precedente). Mobile <767px: 17px. */
@media (max-width: 767px) {
    html body .aw-article-content {
        font-size: 17px;
    }
}
/* === ARWEB END: article body -2px su mobile === */

/* === ARWEB START: Home problema→soluzione spacing mobile (2026-07-24) — feedback 3.1 ===
   Su mobile i due blocchi "IL PROBLEMA" e "LA SOLUZIONE" si fondevano perché
   l'etichetta LA SOLUZIONE stava attaccata al testo del blocco precedente.
   Aggiungiamo margin-top al container Elementor che apre la sezione
   Soluzione (ID 93c838a), solo su mobile. */
@media (max-width: 767px) {
    .elementor-element-93c838a {
        margin-top: 48px !important;
    }
}
/* === ARWEB END: Home problema→soluzione spacing mobile === */

/* === ARWEB START: Home CTA card 8 divisioni + grande mobile (2026-07-24) — feedback 3.2 ===
   Il link/CTA in fondo alla card (es. "Scopri come far vivere il tuo museo...")
   era 13px, troppo piccolo per il touch. Su mobile portiamo a 16px per
   coerenza col tagline/excerpt della stessa card. Resto della card intatto. */
@media (max-width: 767px) {
    .aw-home-service-card .aw-home-service-card__link {
        font-size: 16px !important;
        line-height: 1.4 !important;
    }
    .aw-home-service-card__link-arrow {
        width: 20px;
        height: 16px;
    }
}
/* === ARWEB END: Home CTA card 8 divisioni + grande mobile === */

/* === ARWEB START: Home / Chi siamo / Tecnologia — testi descrizione più grandi (2026-07-24) — feedback 3.4 ===
   Su queste 3 pagine i widget text-editor Elementor hanno font-size troppo
   piccolo (18px desktop, 14-15px mobile). Cliente vuole coerenza con le
   pagine servizio: corpo leggibile ~18px anche su mobile.

   Applichiamo con selettore body class specifico per non contaminare altre
   pagine (Servizi/Contatti/Blog che hanno le loro dimensioni).

   Page ID:
     Home:        35   (body.home / body.page-id-35)
     Chi siamo:   41   (body.page-id-41)
     Tecnologia:  10120 (body.page-id-10120)

   !important perché il post CSS di Elementor generato dai valori widget
   ha specificità alta (.elementor-XX .elementor-element-YY). */
body.page-id-35 .elementor-widget-text-editor,
body.page-id-35 .elementor-widget-text-editor p,
body.page-id-41 .elementor-widget-text-editor,
body.page-id-41 .elementor-widget-text-editor p,
body.page-id-10120 .elementor-widget-text-editor,
body.page-id-10120 .elementor-widget-text-editor p {
    font-size: 18px !important;
    line-height: 1.6 !important;
}
@media (max-width: 767px) {
    body.page-id-35 .elementor-widget-text-editor,
    body.page-id-35 .elementor-widget-text-editor p,
    body.page-id-41 .elementor-widget-text-editor,
    body.page-id-41 .elementor-widget-text-editor p,
    body.page-id-10120 .elementor-widget-text-editor,
    body.page-id-10120 .elementor-widget-text-editor p {
        font-size: 17px !important;
    }
}
/* === ARWEB END: Home / Chi siamo / Tecnologia — testi descrizione più grandi === */

/* === ARWEB START: Home case study card — bg più opaco (2026-07-28) ===
   Nella home le card poggiano su un container Elementor con background image,
   quindi il default rgba(12,26,54,0.55) di .aw-blog-card lascia trasparire
   l'immagine e il testo perde contrasto. Aumentiamo l'alpha SOLO qui. */
.aw-home-casi .aw-blog-card {
    background: rgba(12, 26, 54, 0.85);
}
/* === ARWEB END: Home case study card — bg più opaco === */