/* ==========================================================================
   SCIA Digital Studio — Typography Override v2
   ==========================================================================
   Scaling +25% rispetto alle specs UiCore originali per leggibilità moderna.
   Aggiunge override su navbar e footer custom scia per ingrandirli.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&display=swap');

@font-face {
  font-family: 'Inter Local';
  src: url('/wp-content/plugins/scia-hero-plugin-81-15-3/assets/fonts/InterVariable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

:root {
  --scia-font-primary: 'Inter Tight', 'Inter Local', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --scia-font-secondary: 'Inter Local', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --scia-color-text: #000000;
  --scia-color-link: #8540F0;
  --scia-color-link-hover: #BFFF3A;

  /* Size allineate alla scala della homepage:
     biggest element = H2 64px. H1 segue stessa scala (allineato a H2). */
  --scia-fs-h1: 64px;
  --scia-fs-h2: 64px;
  --scia-fs-h3: 32px;
  --scia-fs-h4: 28px;
  --scia-fs-h5: 24px;
  --scia-fs-h6: 20px;
  --scia-fs-body: 22px;

  /* Size navbar/footer custom */
  --scia-fs-nav: 22px;
  --scia-fs-footer-link: 22px;
  --scia-fs-footer-small: 20px;
}

/* ==========================================================================
   HEADINGS — solo widget standard Elementor/UiCore
   ========================================================================== */

.elementor-widget-heading h1.elementor-heading-title,
.entry-content h1:not(.stk-card-title):not([class*="sh-"]):not([class*="ss-"]):not([class*="pf-"]),
.entry-title,
.uicore-heading h1 {
  font-family: var(--scia-font-primary) !important;
  font-weight: 600 !important;
  font-size: var(--scia-fs-h1) !important;
  line-height: 1 !important;
  letter-spacing: -0.05em !important;
  text-transform: lowercase !important;
}

.elementor-widget-heading h2.elementor-heading-title,
.entry-content h2:not(.stk-card-title):not([class*="sh-"]):not([class*="ss-"]):not([class*="pf-"]),
.uicore-heading h2 {
  font-family: var(--scia-font-primary) !important;
  font-weight: 600 !important;
  font-size: var(--scia-fs-h2) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.05em !important;
  text-transform: lowercase !important;
}

.elementor-widget-heading h3.elementor-heading-title,
.entry-content h3:not(.stk-card-title):not([class*="sh-"]):not([class*="ss-"]):not([class*="pf-"]),
.uicore-heading h3 {
  font-family: var(--scia-font-secondary) !important;
  font-weight: 600 !important;
  font-size: var(--scia-fs-h3) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.04em !important;
  text-transform: lowercase !important;
}

/* ==========================================================================
   SENTENCE CASE — solo prima lettera maiuscola sui titoli H1/H2/H3
   ========================================================================== */
.elementor-widget-heading h1.elementor-heading-title::first-letter,
.entry-content h1:not(.stk-card-title):not([class*="sh-"]):not([class*="ss-"]):not([class*="pf-"])::first-letter,
.entry-title::first-letter,
.uicore-heading h1::first-letter,
.elementor-widget-heading h2.elementor-heading-title::first-letter,
.entry-content h2:not(.stk-card-title):not([class*="sh-"]):not([class*="ss-"]):not([class*="pf-"])::first-letter,
.uicore-heading h2::first-letter,
.elementor-widget-heading h3.elementor-heading-title::first-letter,
.entry-content h3:not(.stk-card-title):not([class*="sh-"]):not([class*="ss-"]):not([class*="pf-"])::first-letter,
.uicore-heading h3::first-letter,
.hero-boost__title::first-letter,
[class*="-title"]:not(.stk-card-title):not([class*="sh-"]):not([class*="ss-"]):not([class*="pf-"])::first-letter {
  text-transform: uppercase !important;
}

/* I custom widget delle pagine interne hanno class -title senza essere figli di .entry-content: forziamo lowercase + first-letter uppercase anche su di loro */
.hero-boost__title,
.stw-title,
.ssc-title,
.ssc-panel__title,
.bento-sec__title,
.journey-title,
.mks-title,
.mkm-title,
.spl-title,
.smm-sec__title,
.smm-card__title,
.dss-title,
.dsm-title,
.dsd-title,
.ais-title,
.aim-title,
.asc-title,
.ppn-title,
.vds-title,
.phm-title,
.phs-title,
.cqz-title,
.rev-section__title,
.ui-e-title,
.ui-e--highlighted-text {
  text-transform: lowercase !important;
}

.elementor-widget-heading h4.elementor-heading-title,
.entry-content h4:not(.stk-card-title):not([class*="sh-"]):not([class*="ss-"]):not([class*="pf-"]),
.uicore-heading h4 {
  font-family: var(--scia-font-primary) !important;
  font-weight: 600 !important;
  font-size: var(--scia-fs-h4) !important;
  line-height: 1.3 !important;
  letter-spacing: -0.03em !important;
  text-transform: none !important;
}

.elementor-widget-heading h5.elementor-heading-title,
.entry-content h5:not(.stk-card-title):not([class*="sh-"]):not([class*="ss-"]):not([class*="pf-"]),
.uicore-heading h5 {
  font-family: var(--scia-font-primary) !important;
  font-weight: 600 !important;
  font-size: var(--scia-fs-h5) !important;
  line-height: 1.3 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
}

.elementor-widget-heading h6.elementor-heading-title,
.entry-content h6:not(.stk-card-title):not([class*="sh-"]):not([class*="ss-"]):not([class*="pf-"]),
.uicore-heading h6 {
  font-family: var(--scia-font-primary) !important;
  font-weight: 600 !important;
  font-size: var(--scia-fs-h6) !important;
  line-height: 1.3 !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase !important;
}

/* ==========================================================================
   BODY TEXT — limitato a widget text-editor e contenuti blog
   ========================================================================== */
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-text-editor li,
.entry-content p:not([class*="sh-"]):not([class*="ss-"]):not([class*="pf-"]):not([class*="stk-"]),
.entry-content li:not([class*="sh-"]):not([class*="ss-"]):not([class*="pf-"]):not([class*="stk-"]),
[data-widget_type="text-editor.default"] p,
[data-widget_type="text-editor.default"] li {
  font-family: var(--scia-font-secondary) !important;
  font-weight: 400 !important;
  font-size: var(--scia-fs-body) !important;
  line-height: 1.6 !important;
  letter-spacing: -0.02em !important;
}

body {
  font-family: var(--scia-font-secondary);
}

/* ==========================================================================
   NAVBAR HEADER SCIA (ingrandita)
   ========================================================================== */
.ss-header-nav-link,
nav.ss-header-nav a,
.ss-header-nav a {
  font-family: var(--scia-font-secondary) !important;
  font-size: var(--scia-fs-nav) !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.4 !important;
}

/* Pulsante CTA nell'header (es. "Richiedi preventivo") */
.ss-header .ss-header-cta,
.ss-header [class*="cta"],
.ss-header-cta-link {
  font-family: var(--scia-font-secondary) !important;
  font-size: var(--scia-fs-nav) !important;
  font-weight: 500 !important;
}

/* ==========================================================================
   FOOTER SCIA (ingrandito)
   ========================================================================== */
.ss-footer-nav-link,
.ss-footer-nav a {
  font-family: var(--scia-font-secondary) !important;
  font-size: var(--scia-fs-footer-link) !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.6 !important;
}

.ss-footer-copyright,
.ss-footer-separator,
.ss-footer-bottom-link,
.ss-footer-legal,
.ss-footer-bottom span,
.ss-footer-bottom a {
  font-family: var(--scia-font-secondary) !important;
  font-size: var(--scia-fs-footer-small) !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
}

/* Header title del footer (es. categorie tipo "Servizi") se presente */
.ss-footer-nav-col-title,
.ss-footer h5,
.ss-footer h6 {
  font-family: var(--scia-font-primary) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* ==========================================================================
   LINKS nei contenuti blog/text-editor
   ========================================================================== */
.entry-content a:not(.elementor-button):not([class*="sh-"]):not([class*="ss-"]):not([class*="pf-"]):not([class*="stk-"]),
.elementor-widget-text-editor a {
  color: var(--scia-color-link);
  transition: color 0.2s ease;
}

.entry-content a:not(.elementor-button):not([class*="sh-"]):not([class*="ss-"]):not([class*="pf-"]):not([class*="stk-"]):hover,
.elementor-widget-text-editor a:hover {
  color: var(--scia-color-link-hover);
}

/* ==========================================================================
   ECCEZIONI — Widget custom mantengono il loro styling
   ========================================================================== */

/* Sticky scroll cards */
.stk-card-title,
.stk-card-text,
.stk-card-subtitle,
.stk-card-eyebrow,
[class^="stk-"] {
  font-family: inherit;
  text-transform: none;
  letter-spacing: inherit;
}

/* Portfolio custom widget */
.pf-title,
.pf-subtitle,
.pf-tag,
.pf-card__title,
.pf-card__subtitle,
.pf-card__category,
.pf-filter,
[class^="pf-"] {
  font-family: inherit;
  text-transform: none;
  letter-spacing: inherit;
}

/* Scia hero plugin */
.sh-hero-service-text,
.sh-hero-title,
.sh-hero-subtitle,
[class^="sh-hero-"] {
  font-family: inherit;
  text-transform: none;
  letter-spacing: inherit;
}

/* Pulsanti Elementor */
.elementor-button,
.elementor-button-link,
.elementor-button-text,
button {
  font-family: inherit;
  text-transform: none;
  letter-spacing: inherit;
}

/* Font icon */
i[class*="icon-"],
i[class*="ui-icon"],
i[class*="elementor-icon"],
i[class*="fa-"],
.eicon,
[class*="lucide-"],
[class*="themify-"],
[class*="iconic-"],
.elementor-icon,
.elementor-icon i,
.elementor-icon svg {
  font-family: inherit !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  line-height: 1 !important;
}

/* ==========================================================================
   MOBILE — scaling proporzionale
   ========================================================================== */
@media (max-width: 1024px) {
  :root {
    --scia-fs-h1: 52px;
    --scia-fs-h2: 52px;
    --scia-fs-h3: 28px;
    --scia-fs-h4: 26px;
    --scia-fs-body: 21px;
    --scia-fs-nav: 20px;
  }
}

@media (max-width: 767px) {
  :root {
    --scia-fs-h1: 40px;
    --scia-fs-h2: 40px;
    --scia-fs-h3: 24px;
    --scia-fs-h4: 24px;
    --scia-fs-h5: 22px;
    --scia-fs-body: 20px;
    --scia-fs-nav: 18px;
    --scia-fs-footer-link: 20px;
  }
}

@media (max-width: 480px) {
  :root {
    --scia-fs-h1: 32px;
    --scia-fs-h2: 32px;
  }
}

/* ==========================================================================
   FIX BOTTONI HERO ELEMENTOR
   Default: testo bianco su sfondo viola
   Hover: testo nero su sfondo verde lime
   ========================================================================== */
.elementor-button,
.elementor-button-link,
a.elementor-button,
.elementor-widget-button .elementor-button {
  background-color: var(--scia-color-link) !important;
  color: #FFFFFF !important;
  border-color: var(--scia-color-link) !important;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.15s ease !important;
}

.elementor-button .elementor-button-text,
.elementor-button .ui-e-text,
.elementor-button span,
a.elementor-button span {
  color: #FFFFFF !important;
}

.elementor-button:hover,
.elementor-button-link:hover,
a.elementor-button:hover,
.elementor-widget-button .elementor-button:hover {
  background-color: var(--scia-color-link-hover) !important;
  color: #000000 !important;
  border-color: var(--scia-color-link-hover) !important;
}

.elementor-button:hover .elementor-button-text,
.elementor-button:hover .ui-e-text,
.elementor-button:hover span,
a.elementor-button:hover span {
  color: #000000 !important;
}

/* SVG icon (frecce) dentro i bottoni: stesso colore del testo */
.elementor-button svg,
.elementor-button .elementor-button-icon svg {
  stroke: currentColor !important;
  fill: currentColor !important;
}


/* Migliora visibilità testo bottone (era 14px, troppo piccolo) */
.elementor-button,
a.elementor-button {
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  padding: 14px 28px !important;
  min-width: auto !important;
  line-height: 1.4 !important;
}

.elementor-button .elementor-button-text,
.elementor-button .ui-e-text {
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

/* ==========================================================================
   FIX FORM CONTATTI — layout a colonna singola full-width
   ========================================================================== 

/* Wrapper dei campi: colonna singola con gap */
.scia-contact-form .ui-e-fields-wrp,
form.scia-contact-form > div,
.ui-e-form .ui-e-fields-wrp {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  width: 100% !important;
  max-width: 100% !important;
  flex-wrap: nowrap !important;
}

/* Ogni field group: full width, label sopra input */
.scia-contact-form .ui-e-field-group,
.ui-e-form .ui-e-field-group {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 8px !important;
}

/* Label sopra all'input */
.scia-contact-form .ui-e-label,
.ui-e-form .ui-e-label,
.scia-contact-form label,
.ui-e-form label {
  display: block !important;
  text-align: left !important;
  margin: 0 0 6px 0 !important;
  width: auto !important;
  font-family: var(--scia-font-secondary) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: #000 !important;
}

/* Bottone invia: anche lui full width (era col-40) */
.scia-contact-form .ui-e-field-type-submit,
.ui-e-form .ui-e-field-type-submit {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
  margin-top: 12px !important;
}

.scia-contact-form .ui-e-field-type-submit .elementor-button,
.ui-e-form .ui-e-field-type-submit .elementor-button {
  width: 100% !important;
  justify-content: center !important;
}

/* Field acceptance (checkbox Privacy): label inline accanto al checkbox */
.scia-contact-form .ui-e-field-type-acceptance,
.ui-e-form .ui-e-field-type-acceptance {
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 10px !important;
}

.scia-contact-form .ui-e-field-type-acceptance input[type="checkbox"],
.ui-e-form .ui-e-field-type-acceptance input[type="checkbox"] {
  width: auto !important;
  min-width: auto !important;
  margin-top: 4px !important;
  flex-shrink: 0 !important;
}

.scia-contact-form .ui-e-field-type-acceptance label,
.scia-contact-form .ui-e-field-type-acceptance .ui-e-acceptance-label,
.ui-e-form .ui-e-field-type-acceptance label {
  display: inline !important;
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

/* Per il checkbox: la "label" interna (testo accanto al box) */
.scia-contact-form .ui-e-field-type-acceptance > label,
.ui-e-form .ui-e-field-type-acceptance > label {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 10px !important;
  cursor: pointer !important;
}


.ui-e-form input.ui-e-field,
.ui-e-form textarea.ui-e-field,
.ui-e-form select.ui-e-field,
.scia-contact-form input,
.scia-contact-form textarea,
.scia-contact-form select,
.elementor-widget-uicore-contact-form input[type="text"],
.elementor-widget-uicore-contact-form input[type="email"],
.elementor-widget-uicore-contact-form input[type="tel"],
.elementor-widget-uicore-contact-form textarea,
.elementor-widget-uicore-contact-form select {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  font-size: 16px !important;
  padding: 12px 18px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0,0,0,0.1) !important;
  background-color: #FFFFFF !important;
  font-family: var(--scia-font-secondary) !important;
  line-height: 1.4 !important;
}

.elementor-widget-uicore-contact-form textarea,
.scia-contact-form textarea,
.ui-e-form textarea {
  border-radius: 20px !important;
  min-height: 120px !important;
  resize: vertical !important;
}

/* Label dei field sopra agli input */
.ui-e-form .ui-e-label,
.elementor-widget-uicore-contact-form label {
  font-family: var(--scia-font-secondary) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  margin-bottom: 8px !important;
  display: block !important;
}

/* ==========================================================================
   NASCONDI form duplicato rotto in /contatti/
   ========================================================================== */
.elementor-element-dc8252f {
  display: none !important;
}

/* ==========================================================================
   NAVBAR — link visibili su desktop, hamburger su mobile/tablet
   ========================================================================== */
/* Desktop: mostra i link inline */
@media (min-width: 1025px) {
  .ss-header-nav,
  nav.ss-header-nav {
    display: flex !important;
    align-items: center;
    gap: 4px;
  }
  /* nasconde l'hamburger su desktop */
  .ss-header-menu-trigger {
    display: none !important;
  }
}
/* Mobile/tablet: nasconde i link inline, mostra hamburger */
@media (max-width: 1024px) {
  .ss-header-nav,
  nav.ss-header-nav {
    display: none !important;
  }
  .ss-header-menu-trigger {
    display: flex !important;
  }
}

/* ==========================================================================
   FIX BOTTONI CUSTOM HERO (widget non-Elementor delle landing servizi)
   Copre: .hero-boost__cta-btn, .cta-btn, .ssc-mock__hero-btn, .journey-cta
   Default: viola + testo bianco
   Hover: verde lime + testo nero
   ========================================================================== */
.hero-boost__cta-btn,
.cta-btn,
.ssc-mock__hero-btn,
.journey-cta,
a.hero-boost__cta-btn,
a.cta-btn,
a.ssc-mock__hero-btn,
a.journey-cta {
  background-color: var(--scia-color-link) !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border-color: var(--scia-color-link) !important;
  font-family: var(--scia-font-secondary) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  text-decoration: none !important;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.15s ease !important;
}

/* Forza testo + figli a bianco */
.hero-boost__cta-btn,
.hero-boost__cta-btn *,
.cta-btn,
.cta-btn *,
.ssc-mock__hero-btn,
.ssc-mock__hero-btn *,
.journey-cta,
.journey-cta * {
  color: #FFFFFF !important;
}

.hero-boost__cta-btn svg,
.cta-btn svg,
.ssc-mock__hero-btn svg,
.journey-cta svg {
  stroke: #FFFFFF !important;
  fill: transparent !important;
}

/* Hover */
.hero-boost__cta-btn:hover,
.cta-btn:hover,
.ssc-mock__hero-btn:hover,
.journey-cta:hover,
a.hero-boost__cta-btn:hover,
a.cta-btn:hover,
a.ssc-mock__hero-btn:hover,
a.journey-cta:hover {
  background-color: var(--scia-color-link-hover) !important;
  color: #000000 !important;
  border-color: var(--scia-color-link-hover) !important;
}

.hero-boost__cta-btn:hover,
.hero-boost__cta-btn:hover *,
.cta-btn:hover,
.cta-btn:hover *,
.ssc-mock__hero-btn:hover,
.ssc-mock__hero-btn:hover *,
.journey-cta:hover,
.journey-cta:hover * {
  color: #000000 !important;
}

.hero-boost__cta-btn:hover svg,
.cta-btn:hover svg,
.ssc-mock__hero-btn:hover svg,
.journey-cta:hover svg {
  stroke: #000000 !important;
}

/* ==========================================================================
   FIX SPAZIO NAVBAR / CONTAINER PAGINE
   La navbar è position fixed o sticky e il primo container delle pagine
   inizia troppo vicino all'header. Aggiungo padding-top per dare respiro.
   ========================================================================== */

/* Margin-top sul primo container colorato/full-width della pagina (dimezzato) */
.uicore-content #primary article > main .elementor > .elementor-element.e-parent:first-child,
.uicore-content #primary article > main .elementor > .elementor-element.e-parent:first-of-type {
  margin-top: 40px !important;
}

/* Caso specifico container viola di /contatti/ */
.elementor-element-9ae6a38,
.elementor-element-9ae6a38.e-parent {
  margin-top: 30px !important;
}

/* Generic: il primo .e-parent dopo il <main> di una pagina */
main.entry-content > .elementor > .elementor-element.e-parent:first-child,
main.entry-content > [data-elementor-type="wp-page"] > .elementor-element.e-parent:first-child {
  margin-top: 30px !important;
}

/* Dimezza anche il padding-top interno della hero-boost (sopra al badge) */
.hero-boost {
  padding-top: 32px !important;
}

/* Mobile: meno spazio */
@media (max-width: 767px) {
  .elementor-element-9ae6a38,
  main.entry-content > .elementor > .elementor-element.e-parent:first-child,
  .uicore-content #primary article > main .elementor > .elementor-element.e-parent:first-child {
    margin-top: 16px !important;
  }
  .hero-boost {
    padding-top: 24px !important;
  }
}

/* ==========================================================================
   FIX /chi-siamo/ — titolo "Come trasformiamo..." era schiacciato a 500px
   ========================================================================== */
.elementor-element.elementor-element-b564cfc {
  width: 100% !important;
  max-width: 100% !important;
  --container-widget-width: 100% !important;
}

/* ==========================================================================
   RECENSIONI — nascondi avatar tondo e ruolo (es. "X recensioni"),
   lascia visibili solo nome + stelle + testo recensione
   ========================================================================== */
.rev-card .rev-avatar,
.rev-card-header .rev-avatar,
.rev-card .rev-role,
.rev-card-header .rev-role {
  display: none !important;
}

/* ==========================================================================
   PAGINE SERVIZIO — nascondi descrizione della 2a section sotto l'hero
   su tablet e mobile (≤1024px). Widget condiviso su tutte le pagine
   servizio (siti-web, social-media, grafica, marketing, servizi-ai,
   videomaking-e-fotografia).
   ========================================================================== */
@media (max-width: 1024px) {
  .elementor-element.elementor-element-1fde5c9d {
    display: none !important;
  }
}

/* ==========================================================================
   HOMEPAGE — hero a piena larghezza
   Il container hero (2426f43c) è e-con-boxed (max 75%). Lo allarghiamo.
   ========================================================================== */
.elementor-element.elementor-element-2426f43c > .e-con-inner {
  max-width: 100% !important;
  width: 100% !important;
}
.elementor-element.elementor-element-2426f43c {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* ==========================================================================
   HOMEPAGE — riduzione margini/padding verticali tra le sezioni
   ========================================================================== */
.elementor-element-98ce848,
.elementor-element-b8e3694,
.elementor-element-4ee836e {
  padding-top: 56px !important;
  padding-bottom: 56px !important;
}
.elementor-element-07bbaa4 {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}
.elementor-element-13bd03df {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

/* ==========================================================================
   HOMEPAGE — hero su mobile: si adatta al contenuto (no vuoto, no testo tagliato)
   ========================================================================== */
@media (max-width: 1024px) {
  /* La hero NON è forzata a 100vh: prende l'altezza del contenuto */
  .scia-hero-section {
    min-height: auto !important;
    height: auto !important;
  }
  /* container boxed edge-to-edge senza padding extra */
  .elementor-element.elementor-element-2426f43c {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .elementor-element.elementor-element-2426f43c > .e-con-inner {
    padding: 0 !important;
  }
  /* gap minimo tra hero e prima sezione: Elementor mette
     --margin-top:120px su questa sezione → lo azzeriamo su mobile */
  .elementor-element-98ce848 {
    --margin-top: 8px !important;
    margin-top: 8px !important;
    margin-block-start: 8px !important;
    padding-top: 4px !important;
  }
  .elementor-element-98ce848 > .e-con-inner {
    padding-top: 0 !important;
  }
}

/* Desktop/tablet: riduci il margine eccessivo (120px → 24px, dimezzato ancora) */
@media (min-width: 1025px) {
  .elementor-element-98ce848 {
    --margin-top: 24px !important;
    margin-top: 24px !important;
    margin-block-start: 24px !important;
  }
}

/* ==========================================================================
   GLOBAL — blocca SOLO lo scroll orizzontale (verticale resta attivo)
   ========================================================================== */
html, body {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

/* ==========================================================================
   CARD PROGETTI (/lavori/) — hover viola fisso (overlay sempre visibile)
   ========================================================================== */
.pf-card .pf-card__overlay {
  opacity: 1 !important;
}
.pf-card .pf-card__content {
  transform: translateY(0) !important;
}
.pf-card .pf-card__category {
  opacity: 1 !important;
}

/* ==========================================================================
   CHI-SIAMO — ripristina lo spazio "Siamo tre" (whitespace span collassata)
   ========================================================================== */
.ui-e-headline .whitespace,
.ui-e-headline-text + .whitespace,
span.whitespace {
  display: inline-block !important;
  width: 0.32em !important;
  white-space: pre !important;
}

/* ==========================================================================
   MOBILE — normalizza i margini/padding sproporzionati su tutto il sito
   ========================================================================== */
@media (max-width: 767px) {
  /* Padding orizzontale uniforme dei container boxed */
  .e-con-boxed > .e-con-inner {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  /* Riduci il padding verticale gonfiato delle sezioni home */
  .elementor-element-b8e3694,
  .elementor-element-4ee836e,
  .elementor-element-957728c {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }
  /* 98ce848 (prima sezione sotto hero): gap minimo */
  .elementor-element-98ce848 {
    padding-top: 8px !important;
    padding-bottom: 36px !important;
  }
  /* tightening del blocco divisore in cima alla sezione */
  .elementor-element-98ce848 .ss-padding-global.ss-is-tiny {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  .elementor-element-07bbaa4,
  .elementor-element-13bd03df {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }
  /* Spaziatori Elementor troppo alti su mobile */
  .elementor-widget-spacer .elementor-spacer-inner {
    height: auto !important;
    max-height: 40px !important;
  }
  /* hero-boost: padding laterale più contenuto */
  .hero-boost {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* sezioni servizio: riduci padding verticale generale */
  .ss-padding-section-medium,
  .ss-spacer-xlarge {
    padding-top: 28px !important;
    padding-bottom: 0 !important;
    height: auto !important;
  }
}

/* ==========================================================================
   PROGETTI CORRELATI — gallery "Altri progetti" in fondo alle pagine /lavori/
   ========================================================================== */
.prjrel{background:#F8F7F3;padding:64px 24px;}
.prjrel__inner{max-width:1200px;margin:0 auto;}
.prjrel__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:32px;flex-wrap:wrap;}
.prjrel__heading{font-family:'Inter Tight',sans-serif;font-size:clamp(28px,4vw,44px);font-weight:600;letter-spacing:-.03em;color:#1a1a1a;margin:0;text-transform:none;}
.prjrel__heading::first-letter{text-transform:uppercase;}
.prjrel__all{font-family:'Inter Tight',sans-serif;font-size:16px;font-weight:600;color:#8540F0;text-decoration:none;white-space:nowrap;}
.prjrel__all:hover{color:#000;}
.prjrel__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.prjrel__card{display:flex;flex-direction:column;background:#fff;border-radius:14px;overflow:hidden;text-decoration:none;box-shadow:0 2px 12px rgba(0,0,0,.05);transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s;}
.prjrel__card:hover{transform:translateY(-6px);box-shadow:0 12px 32px rgba(133,64,240,.18);}
.prjrel__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:#0a0a0a;}
.prjrel__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.16,1,.3,1);}
.prjrel__card:hover .prjrel__media img{transform:scale(1.06);}
.prjrel__info{padding:16px 18px 20px;display:flex;flex-direction:column;gap:4px;}
.prjrel__title{font-family:'Inter Tight',sans-serif;font-size:18px;font-weight:600;letter-spacing:-.02em;color:#1a1a1a;}
.prjrel__svc{font-family:'Inter Tight',sans-serif;font-size:13px;font-weight:500;color:#8540F0;letter-spacing:-.01em;}
@media (max-width:1024px){.prjrel__grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:767px){
  .prjrel{padding:40px 16px;}
  .prjrel__grid{grid-template-columns:repeat(2,1fr);gap:12px;}
  .prjrel__info{padding:12px 14px 16px;}
  .prjrel__title{font-size:15px;}
  .prjrel__svc{font-size:11px;}
}

/* ==========================================================================
   "AI" SEMPRE MAIUSCOLO — i titoli sono in lowercase ma la sigla AI no.
   Lo span .kw-ai forza l'uppercase solo su quelle due lettere.
   ========================================================================== */
.kw-ai {
  text-transform: uppercase !important;
}

/* ==========================================================================
   HOMEPAGE CATEGORIE — hover viola/scuro FISSO sulle card progetti
   (il testo "Scopri di più" + overlay devono essere sempre visibili,
    non solo al passaggio del mouse)
   ========================================================================== */
/* il sotto-titolo "Scopri di più" sempre visibile su tutte le 6 card */
.elementor-element-3cd3031e .elementor-icon-box-title,
.elementor-element-5736100b .elementor-icon-box-title,
.elementor-element-511a5a9b .elementor-icon-box-title,
.elementor-element-a50e631 .elementor-icon-box-title,
.elementor-element-b939d66 .elementor-icon-box-title,
.elementor-element-c106287 .elementor-icon-box-title {
  opacity: 1 !important;
  transform: translateY(0) !important;
}
/* overlay scuro fisso sulle card categoria per leggibilità del testo bianco */
#categories a.e-child::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(10,6,24,0.78) 0%, rgba(10,6,24,0.35) 45%, rgba(10,6,24,0.12) 100%);
  border-radius: inherit;
}
/* testo e contenuti sopra l'overlay */
#categories a.e-child > .elementor-element,
#categories a.e-child .elementor-widget-container {
  position: relative;
  z-index: 2;
}

/* ==========================================================================
   "RICHIEDI UN PREVENTIVO" — overlay scuro fisso per leggibilità (tutti i bp)
   ========================================================================== */
.ss-grid-pricing {
  position: relative;
}
.ss-grid-pricing .ss-grid-video-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(10,6,24,0.72) 0%, rgba(10,6,24,0.45) 50%, rgba(10,6,24,0.30) 100%);
}
.ss-grid-pricing .ss-grid-pricing-title,
.ss-grid-pricing .ss-btn {
  position: relative;
  z-index: 2;
}

/* ==========================================================================
   HERO MOBILE — testo in basso a sinistra, sovrapposto al video
   ========================================================================== */
@media (max-width: 1024px) {
  .scia-hero-section {
    position: relative !important;
  }
  /* il video definisce l'altezza della hero */
  .scia-hero-section .sh-hero-video {
    position: relative !important;
  }
  /* blocco testo ancorato in basso a sinistra sopra al video */
  .scia-hero-section .sh-hero-bottom {
    position: absolute !important;
    left: 20px !important;
    right: auto !important;
    bottom: 22px !important;
    width: auto !important;
    max-width: 88% !important;
    text-align: left !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    z-index: 4 !important;
  }
  .scia-hero-section .sh-hero-subheading,
  .scia-hero-section .sh-hero-label,
  .scia-hero-section .sh-hero-subhead,
  .scia-hero-section .sh-hero-words-wrap,
  .scia-hero-section .sh-hero-words {
    text-align: left !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }
  /* leggibilità testo: ombra sotto */
  .scia-hero-section .sh-hero-bottom .sh-hero-label,
  .scia-hero-section .sh-hero-bottom .sh-hero-subhead {
    text-shadow: 0 2px 12px rgba(0,0,0,0.45) !important;
  }
}

/* ==========================================================================
   HERO MOBILE — rifinitura: niente overflow del blocco parole rotanti
   ========================================================================== */
@media (max-width: 1024px) {
  /* la hero ritaglia ciò che esce (parole rotanti) */
  .scia-hero-section .sh-hero-video,
  .elementor-element.elementor-element-2426f43c {
    overflow: hidden !important;
  }
  /* compatta il blocco testo: meno gap tra sottotitolo e parole */
  .scia-hero-section .sh-hero-subheading {
    gap: 2px !important;
  }
  /* parole rotanti: altezza di una riga, niente sbordo */
  .scia-hero-section .sh-hero-words-wrap {
    overflow: hidden !important;
  }
}