/* ==========================================================================
   DUE - Fasce e widget vestiti

   Qui stanno i motivi ricorrenti di una pagina: testo con immagine, richiamo
   all'azione, accordion, schede. A differenza di blocks.css (la libreria
   ereditata da UNO, con markup proprio) queste classi si appoggiano ai
   contenitori e ai widget nativi di Elementor: si applicano dal campo
   "Classi CSS" e restano modificabili nell'editor.

   Come blocks.css, non imposto colori nei widget ma qui: cosi' le fasce
   seguono la combinazione scelta nel Customizer invece di restare fissate.
   Questo foglio si carica dopo i CSS di Elementor.
   ========================================================================== */

/* ==========================================================================
   1. Fascia testo + immagine
   Contenitore Elementor a due colonne: su una il testo, sull'altra
   l'immagine. Con --reverse si scambiano di posto da desktop, ma nel
   codice il testo resta primo: su mobile si legge prima cosa si dice,
   poi si vede la figura.
   ========================================================================== */

.due-split {
  padding-top: 80px;
  padding-bottom: 80px;
}

@media (max-width: 768px) {
  .due-split {
    padding-top: 48px;
    padding-bottom: 48px;
  }
}

/* Colonne che si dividono lo spazio in parti uguali, qualunque sia il loro
   numero. Serve perche' con le percentuali (48% + 48% + 50px di gap) si
   sfora di pochi pixel e l'ultima colonna va a capo: qui il gap lo sottrae
   il flex, senza aritmetica da rifare a ogni cambio di larghezza.
   Si applica a qualsiasi riga di contenitori, non solo alle fasce. */
.due-cols > .e-con-inner > .e-con,
.due-cols.e-con-full > .e-con {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}

/* Sulla direzione, Elementor scrive .e-con.e-flex > .e-con-inner: tre classi.
   Per stare sopra devo agganciarmi anche io alle sue, altrimenti la mia
   regola perde a parita' di importanza e l'inversione non avviene. */
.due-split--reverse.e-con.e-flex > .e-con-inner,
.due-split--reverse.e-con-full.e-flex {
  flex-direction: row-reverse;
}

@media (max-width: 767px) {
  /* Su mobile si impila sempre nell'ordine del codice: nelle fasce il testo
     viene prima dell'immagine, anche quando a schermo largo era a destra. */
  .due-cols.e-con.e-flex > .e-con-inner,
  .due-cols.e-con-full.e-flex {
    flex-direction: column;
  }

  .due-cols > .e-con-inner > .e-con,
  .due-cols.e-con-full > .e-con {
    flex-basis: auto;
    width: 100%;
  }
}

/* Occhiello sopra il titolo, come nei blocchi di UNO. */
.due-split__eyebrow .elementor-heading-title,
.due-eyebrow .elementor-heading-title {
  font-family: var(--font-body, 'Open Sans', sans-serif);
  font-weight: 400;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--color-primary, #E20714);
  margin: 0 0 12px 0;
}

.due-split__media img {
  display: block;
  width: 100%;
  height: auto;
}

/* Filetto primario sotto il titolo della fascia. */
.due-split__title .elementor-heading-title::after {
  content: "";
  display: block;
  width: 60px;
  height: 4px;
  margin-top: 16px;
  background-color: var(--color-primary, #E20714);
}

/* ==========================================================================
   2. Fascia richiamo all'azione
   ========================================================================== */

.due-cta {
  background-color: var(--color-primary, #E20714);
  padding-top: 70px;
  padding-bottom: 70px;
  text-align: center;
}

.due-cta--scuro {
  background-color: var(--color-text, #1D1D1B);
}

.due-cta .elementor-heading-title {
  color: #ffffff;
}

.due-cta p {
  color: rgba(255, 255, 255, 0.85);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* Sul fondo pieno il pulsante va in negativo. */
.due-cta .elementor-button {
  background-color: transparent;
  border: 2px solid #ffffff;
  color: #ffffff;
}

.due-cta .elementor-button:hover {
  background-color: #ffffff;
  color: var(--color-text, #1D1D1B);
}

/* ==========================================================================
   3. Accordion
   Vestito in entrambe le versioni: quella classica e quella "nested" che
   Elementor propone di default da quando l'esperimento e' attivo.
   ========================================================================== */

/* --- versione classica --- */

.elementor-widget-accordion .elementor-accordion .elementor-accordion-item {
  border: 0;
  border-bottom: 1px solid var(--color-bg-2, #E8E8E8);
}

.elementor-widget-accordion .elementor-accordion .elementor-tab-title {
  font-family: var(--font-headings, 'Poppins', sans-serif);
  font-weight: var(--weight-headings, 700);
  font-size: 1.05rem;
  padding: 22px 0;
  border: 0;
  background: transparent;
  transition: color 0.25s ease;
}

.elementor-widget-accordion .elementor-accordion .elementor-tab-title.elementor-active,
.elementor-widget-accordion .elementor-accordion .elementor-tab-title:hover {
  color: var(--color-primary, #E20714);
}

.elementor-widget-accordion .elementor-accordion .elementor-accordion-icon {
  color: var(--color-primary, #E20714);
}

.elementor-widget-accordion .elementor-accordion .elementor-tab-content {
  border: 0;
  padding: 0 0 24px 0;
  font-size: 1rem;
  line-height: 1.7;
}

/* --- versione nested (details/summary) --- */

.elementor-widget-nested-accordion .e-n-accordion .e-n-accordion-item {
  border-bottom: 1px solid var(--color-bg-2, #E8E8E8);
}

.elementor-widget-nested-accordion .e-n-accordion .e-n-accordion-item-title {
  font-family: var(--font-headings, 'Poppins', sans-serif);
  font-weight: var(--weight-headings, 700);
  font-size: 1.05rem;
  padding: 22px 0;
  background: transparent;
  transition: color 0.25s ease;
}

.elementor-widget-nested-accordion .e-n-accordion .e-n-accordion-item-title:hover,
.elementor-widget-nested-accordion .e-n-accordion .e-n-accordion-item[open] .e-n-accordion-item-title {
  color: var(--color-primary, #E20714);
}

.elementor-widget-nested-accordion .e-n-accordion .e-n-accordion-item-title-icon {
  color: var(--color-primary, #E20714);
}

/* ==========================================================================
   4. Schede
   ========================================================================== */

/* --- versione classica --- */

.elementor-widget-tabs .elementor-tabs .elementor-tabs-wrapper {
  border: 0;
  border-bottom: 2px solid var(--color-bg-2, #E8E8E8);
}

.elementor-widget-tabs .elementor-tabs .elementor-tab-title {
  font-family: var(--font-headings, 'Poppins', sans-serif);
  font-weight: var(--weight-headings, 700);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 16px 24px;
  border: 0;
  background: transparent;
  color: var(--color-text, #1D1D1B);
  transition: color 0.25s ease, box-shadow 0.25s ease;
}

.elementor-widget-tabs .elementor-tabs .elementor-tab-title:hover {
  color: var(--color-primary, #E20714);
}

/* La scheda attiva porta il filetto primario, non uno sfondo pieno:
   resta leggibile con qualsiasi combinazione di colori. */
.elementor-widget-tabs .elementor-tabs .elementor-tab-title.elementor-active {
  color: var(--color-primary, #E20714);
  background: transparent;
  box-shadow: inset 0 -3px 0 0 var(--color-primary, #E20714);
}

.elementor-widget-tabs .elementor-tabs .elementor-tab-content {
  border: 0;
  padding: 28px 0;
  font-size: 1rem;
  line-height: 1.7;
}

/* --- versione nested --- */

.elementor-widget-nested-tabs .e-n-tabs .e-n-tabs-heading {
  border-bottom: 2px solid var(--color-bg-2, #E8E8E8);
  gap: 0;
}

.elementor-widget-nested-tabs .e-n-tabs .e-n-tab-title {
  font-family: var(--font-headings, 'Poppins', sans-serif);
  font-weight: var(--weight-headings, 700);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 16px 24px;
  background: transparent;
  border-radius: 0;
  transition: color 0.25s ease, box-shadow 0.25s ease;
}

.elementor-widget-nested-tabs .e-n-tabs .e-n-tab-title:hover {
  color: var(--color-primary, #E20714);
}

.elementor-widget-nested-tabs .e-n-tabs .e-n-tab-title[aria-selected="true"] {
  color: var(--color-primary, #E20714);
  box-shadow: inset 0 -3px 0 0 var(--color-primary, #E20714);
}

/* ==========================================================================
   5. Pagina di stile
   Servono solo alla pagina dimostrativa: scala tipografica e campioni
   della combinazione di colori attiva.
   ========================================================================== */

.due-typo__row {
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--color-bg-2, #E8E8E8);
}

.due-typo__label {
  flex: 0 0 110px;
  font-family: var(--font-body, 'Open Sans', sans-serif);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-primary, #E20714);
  opacity: 0.9;
}

.due-typo__sample {
  flex: 1 1 auto;
  min-width: 0;
}

.due-typo__sample > * {
  margin: 0;
}

@media (max-width: 600px) {
  .due-typo__row {
    display: block;
  }
  .due-typo__label {
    margin-bottom: 6px;
  }
}

.due-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
}

.due-swatch {
  padding: 28px 16px 16px;
  font-family: var(--font-body, 'Open Sans', sans-serif);
  font-size: 0.75rem;
  line-height: 1.5;
}

.due-swatch strong {
  display: block;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.due-swatch--primary   { background-color: var(--color-primary, #E20714); color: #ffffff; }
.due-swatch--secondary { background-color: var(--color-secondary, #bc111b); color: #ffffff; }
.due-swatch--text      { background-color: var(--color-text, #1D1D1B); color: #ffffff; }
.due-swatch--bg        { background-color: var(--color-bg, #ffffff); color: var(--color-text, #1D1D1B); border: 1px solid var(--color-bg-2, #E8E8E8); }
.due-swatch--bg2       { background-color: var(--color-bg-2, #E8E8E8); color: var(--color-text, #1D1D1B); }

/* ==========================================================================
   6. Slider e carosello

   Sono i widget nativi (Slides ed Elementor Image Carousel) vestiti col
   tema: niente libreria in piu' da caricare, e restano modificabili
   nell'editor. Come per accordion e schede, le regole si agganciano anche
   alla classe del widget, perche' Elementor genera per ogni pagina un CSS
   che a pari specificita' vincerebbe.
   ========================================================================== */

/* ------------------------------------------------------- Slider (Slides) */

.due-slider .elementor-slide-heading {
  font-family: var(--font-headings, 'Poppins', sans-serif);
  font-weight: var(--weight-headings, 700);
  line-height: 1.05;
  margin-bottom: 1rem;
}

.due-slider .elementor-slide-description {
  font-family: var(--font-body, 'Open Sans', sans-serif);
  font-size: var(--p-size, 1.05rem);
  line-height: 1.55;
  margin-bottom: 1.5rem;
  opacity: 0.95;
}

/* Pulsante in negativo, come nell'hero: sta sopra a un'immagine. */
.elementor-widget-slides .due-slider .elementor-slide-button {
  border: 2px solid #ffffff;
  border-radius: 0;
  background: transparent;
  color: #ffffff;
  font-family: var(--font-body, 'Open Sans', sans-serif);
  font-size: 0.75rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 1rem 2.4rem;
  transition: all 0.25s ease;
}

.elementor-widget-slides .due-slider .elementor-slide-button:hover {
  background: var(--color-primary, #E20714);
  border-color: var(--color-primary, #E20714);
  color: #ffffff;
}

/* Hero: titolo alla scala dell'h1 del tema. */
.due-slider--hero .elementor-slide-heading {
  font-size: var(--h1-size, clamp(2.2rem, 5vw, 4rem));
}

/* Versione per le pagine interne: piu' bassa e col titolo alla scala h2,
   cosi' non compete con la testata della pagina. */
.due-slider--interno .elementor-slide-heading {
  font-size: var(--h2-size, clamp(1.3rem, 2.6vw, 2rem));
}

/* --------------------------------------------- Frecce e punti, comuni */

/* Quadrati pieni nel colore primario: la stessa firma delle frecce dei
   caroselli e della paginazione del blog.
   Entrambi i widget rendono le frecce come .elementor-swiper-button, non
   con le classi di Swiper: quelle restano elencate per i temi di Swiper
   usati altrove. */
.due-slider .elementor-swiper-button,
.due-carousel .elementor-swiper-button,
.due-slider .swiper-button-next,
.due-slider .swiper-button-prev,
.due-carousel .swiper-button-next,
.due-carousel .swiper-button-prev {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  background-color: var(--color-primary, #E20714);
  color: #ffffff;
  transition: background-color 0.25s ease;
}

.due-slider .elementor-swiper-button:hover,
.due-carousel .elementor-swiper-button:hover,
.due-slider .swiper-button-next:hover,
.due-slider .swiper-button-prev:hover,
.due-carousel .swiper-button-next:hover,
.due-carousel .swiper-button-prev:hover {
  background-color: var(--color-secondary, #bc111b);
}

.due-slider .swiper-pagination-bullet,
.due-carousel .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  border-radius: 0;
  background-color: #ffffff;
  opacity: 0.5;
  transition: opacity 0.25s ease, background-color 0.25s ease;
}

.due-slider .swiper-pagination-bullet-active,
.due-carousel .swiper-pagination-bullet-active {
  opacity: 1;
  background-color: var(--color-primary, #E20714);
}

/* Nel carosello i punti stanno sotto le immagini, su fondo chiaro. */
.due-carousel .swiper-pagination-bullet {
  background-color: var(--color-text, #1D1D1B);
  opacity: 0.25;
}

.due-carousel .swiper-pagination-bullet-active {
  background-color: var(--color-primary, #E20714);
  opacity: 1;
}

/* ==========================================================================
   7. Timeline orizzontale

   Per la storia aziendale: le tappe scorrono in orizzontale, con aggancio
   allo scatto. Funziona senza JavaScript — trackpad, dito, barra di
   scorrimento — e theme.js aggiunge le frecce e il trascinamento col mouse,
   che altrimenti sul desktop sarebbe scomodo.
   ========================================================================== */

.due-timeline {
  position: relative;
  padding: 20px 0 10px;
}

.due-timeline__track {
  /* La meccanica di scorrimento arriva da .due-scroller__track. */
  gap: 0;
  /* La linea della storia, dietro alle tappe. */
  background-image: linear-gradient(to right, var(--color-bg-2, #E8E8E8), var(--color-bg-2, #E8E8E8));
  background-size: 100% 3px;
  background-position: 0 66px;
  background-repeat: no-repeat;
  cursor: grab;
}

.due-timeline__step {
  scroll-snap-align: start;
  flex: 0 0 280px;
  padding: 0 28px 0 0;
  box-sizing: border-box;
}

.due-timeline__year {
  font-family: var(--font-headings, 'Poppins', sans-serif);
  font-weight: var(--weight-headings, 700);
  font-size: 2.2rem;
  line-height: 1;
  color: var(--color-primary, #E20714);
  margin: 0 0 18px 0;
}

/* Il punto sulla linea. */
.due-timeline__dot {
  position: relative;
  height: 20px;
  margin-bottom: 22px;
}

.due-timeline__dot::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 14px;
  height: 14px;
  background-color: var(--color-primary, #E20714);
}

.due-timeline__title {
  font-family: var(--font-headings, 'Poppins', sans-serif);
  font-weight: var(--weight-headings, 700);
  font-size: 1.1rem;
  line-height: 1.3;
  margin: 0 0 8px 0;
}

.due-timeline__text {
  font-family: var(--font-body, 'Open Sans', sans-serif);
  font-size: 0.95rem;
  line-height: 1.6;
  opacity: 0.8;
  margin: 0;
}

@media (max-width: 600px) {
  .due-timeline__step {
    flex-basis: 240px;
  }
}

/* ==========================================================================
   8. Scorrevoli: meccanica comune

   La usano la timeline e il carosello di schede. Sono entrambi liste che
   scorrono di lato con aggancio allo scatto: il movimento e' del browser,
   theme.js aggiunge solo frecce e trascinamento col mouse.
   ========================================================================== */

.due-scroller {
  position: relative;
}

.due-scroller__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  margin: 0;
  padding: 0 0 24px 0;
  list-style: none;
  cursor: grab;
}

.due-scroller__track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
}

.due-scroller__track::-webkit-scrollbar {
  height: 6px;
}

.due-scroller__track::-webkit-scrollbar-thumb {
  background-color: var(--color-primary, #E20714);
}

.due-scroller__track::-webkit-scrollbar-track {
  background-color: var(--color-bg-2, #E8E8E8);
}

/* Le frecce compaiono solo quando theme.js le ha collegate. */
.due-scroller__nav {
  display: none;
  gap: 8px;
  margin-top: 8px;
}

.due-scroller__nav.is-attiva {
  display: flex;
}

.due-scroller__button {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 0;
  background-color: var(--color-primary, #E20714);
  color: #ffffff;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.25s ease, opacity 0.25s ease;
}

.due-scroller__button:hover:not(:disabled) {
  background-color: var(--color-secondary, #bc111b);
}

.due-scroller__button:disabled {
  opacity: 0.35;
  cursor: default;
}

/* ==========================================================================
   9. Carosello di schede

   Ogni scheda ha immagine, sottotitolo, titolo e link. E' la stessa
   grammatica delle schede del blog: velo sull'immagine, zoom all'hover,
   occhiello maiuscolo nel primario, filetto in basso.
   ========================================================================== */

.due-carosello__track {
  gap: 30px;
}

.due-carosello__item {
  scroll-snap-align: start;
  /* Tre per volta, col gap sottratto: niente percentuali da ricalcolare. */
  flex: 0 0 calc((100% - 60px) / 3);
  min-width: 0;
}

@media (max-width: 1024px) {
  .due-carosello__item {
    flex-basis: calc((100% - 30px) / 2);
  }
}

@media (max-width: 767px) {
  .due-carosello__track {
    gap: 20px;
  }

  .due-carosello__item {
    flex-basis: 85%;
  }
}

.due-carosello__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--color-bg, #ffffff);
  border-bottom: 4px solid var(--color-primary, #E20714);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.10);
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.due-carosello__card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.16);
}

.due-carosello__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
}

.due-carosello__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 60%);
  pointer-events: none;
}

/* L'immagine sta nel flusso e riempie il riquadro: come nei blocchi, con
   position assoluta perderebbe l'altezza dentro le colonne flex. */
.due-carosello__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.due-carosello__card:hover .due-carosello__media img {
  transform: scale(1.08);
}

.due-carosello__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 24px 24px 28px;
}

.due-carosello__eyebrow {
  font-family: var(--font-body, 'Open Sans', sans-serif);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-primary, #E20714);
  margin: 0 0 10px 0;
}

.due-carosello__title {
  font-family: var(--font-headings, 'Poppins', sans-serif);
  font-weight: var(--weight-headings, 700);
  font-size: 1.35rem;
  line-height: 1.25;
  color: var(--color-text, #1D1D1B);
  margin: 0 0 12px 0;
  transition: color 0.25s ease;
}

.due-carosello__card:hover .due-carosello__title {
  color: var(--color-primary, #E20714);
}

.due-carosello__text {
  font-family: var(--font-body, 'Open Sans', sans-serif);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text, #1D1D1B);
  opacity: 0.75;
  margin: 0 0 16px 0;
}

/* Spinge il richiamo in fondo: le schede restano allineate anche con
   testi di lunghezza diversa. */
.due-carosello__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font-family: var(--font-body, 'Open Sans', sans-serif);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--color-primary, #E20714);
}

.due-carosello__more::after {
  content: "\2192";
  font-size: 1rem;
  line-height: 1;
  transition: transform 0.3s ease;
}

.due-carosello__card:hover .due-carosello__more::after {
  transform: translateX(5px);
}

/* ==========================================================================
   10. Carosello di articoli (widget nativo)

   Il widget Loop Carousel disegna le schede con un modello dinamico, quindi
   qui si veste quello che il widget produce: le frecce e i punti di Swiper e
   gli elementi della scheda (.due-loop-card*).

   Il foglio del plugin colora le frecce e i punti con variabili proprie e
   selettori a due o tre classi: per non dipendere dall'ordine di caricamento
   le regole qui sotto scrivono le stesse variabili e usano una classe in
   piu'. Non e' pignoleria: gli stili dei widget vengono accodati durante il
   rendering, cioe' dopo i fogli del tema.
   ========================================================================== */

.elementor-widget.elementor-widget-loop-carousel.due-loop {
  --arrow-normal-color: #ffffff;
  --arrow-hover-color: #ffffff;
  --arrow-size: 18px;
  --swiper-pagination-size: 10px;
  --swiper-pagination-spacing: 18px;
}

.elementor-widget-loop-carousel.due-loop .elementor-swiper-button.elementor-swiper-button-prev,
.elementor-widget-loop-carousel.due-loop .elementor-swiper-button.elementor-swiper-button-next {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  background-color: var(--color-primary, #E20714);
  transition: background-color 0.25s ease;
}

.elementor-widget-loop-carousel.due-loop .elementor-swiper-button.elementor-swiper-button-prev:hover,
.elementor-widget-loop-carousel.due-loop .elementor-swiper-button.elementor-swiper-button-next:hover {
  background-color: var(--color-secondary, #bc111b);
}

.elementor-widget-loop-carousel.due-loop .swiper-pagination-bullet {
  border-radius: 0;
  background-color: var(--color-text, #1D1D1B);
  opacity: 0.25;
  transition: opacity 0.25s ease, background-color 0.25s ease;
}

.elementor-widget-loop-carousel.due-loop .swiper-pagination-bullet-active {
  background-color: var(--color-primary, #E20714);
  opacity: 1;
}

/* --------------------------------------------------------- La scheda */

/* Il contenitore e' un <a>: tutta la scheda e' cliccabile e dentro non ci
   sono altri collegamenti. */
.due-loop-card.e-con,
a.due-loop-card {
  height: 100%;
  background-color: var(--color-bg, #ffffff);
  border-bottom: 4px solid var(--color-primary, #E20714);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.10);
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.due-loop-card.e-con:hover,
a.due-loop-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.16);
}

/* Riquadro dell'immagine: il rapporto lo tiene aspect-ratio, cosi'
   l'altezza automatica di Elementor non da' fastidio. */
.due-loop-card .due-loop-card__media img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.due-loop-card .due-loop-card__media {
  overflow: hidden;
  line-height: 0;
}

.due-loop-card:hover .due-loop-card__media img {
  transform: scale(1.08);
}

/* Il corpo cresce e spinge il richiamo in fondo: schede allineate anche con
   abstract di lunghezza diversa. */
.due-loop-card .due-loop-card__body {
  flex-grow: 1;
}

.due-loop-card .due-loop-card__eyebrow .elementor-heading-title {
  font-family: var(--font-body, 'Open Sans', sans-serif);
  font-weight: 400;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-primary, #E20714);
  margin: 0 0 10px 0;
}

.due-loop-card .due-loop-card__title .elementor-heading-title {
  font-family: var(--font-headings, 'Poppins', sans-serif);
  font-weight: var(--weight-headings, 700);
  font-size: 1.35rem;
  line-height: 1.25;
  color: var(--color-text, #1D1D1B);
  margin: 0 0 12px 0;
  transition: color 0.25s ease;
}

.due-loop-card:hover .due-loop-card__title .elementor-heading-title {
  color: var(--color-primary, #E20714);
}

.due-loop-card .due-loop-card__text {
  font-family: var(--font-body, 'Open Sans', sans-serif);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text, #1D1D1B);
  opacity: 0.75;
  margin-bottom: 16px;
}

.due-loop-card .due-loop-card__text p {
  margin: 0;
}

.due-loop-card .due-loop-card__more {
  margin-top: auto;
}

.due-loop-card .due-loop-card__more .elementor-heading-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body, 'Open Sans', sans-serif);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--color-primary, #E20714);
  margin: 0;
}

.due-loop-card .due-loop-card__more .elementor-heading-title::after {
  content: "\2192";
  font-size: 1rem;
  line-height: 1;
  transition: transform 0.3s ease;
}

.due-loop-card:hover .due-loop-card__more .elementor-heading-title::after {
  transform: translateX(5px);
}

/* ==========================================================================
   11. Fasce sui widget nativi

   Da qui in giu' non c'e' markup del tema: sono widget di Elementor, e il
   foglio di stile serve a farli parlare la lingua del sito. La regola e'
   sempre la stessa — spigoli vivi, primario per gli accenti, occhielli
   maiuscoli — e i valori arrivano dalle variabili della combinazione, cosi'
   cambiando palette cambia tutto insieme.
   ========================================================================== */

/* ------------------------------------------------- Servizi con icona */

.due-iconbox .elementor-icon-box-wrapper {
  text-align: left;
}

.due-iconbox .elementor-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0;
  background-color: var(--color-primary, #E20714);
  color: #ffffff;
  font-size: 26px;
  transition: background-color 0.25s ease;
}

.due-iconbox:hover .elementor-icon {
  background-color: var(--color-secondary, #bc111b);
}

.due-iconbox .elementor-icon-box-icon {
  margin-bottom: 20px;
}

.due-iconbox .elementor-icon-box-title {
  font-family: var(--font-headings, 'Poppins', sans-serif);
  font-weight: var(--weight-headings, 700);
  font-size: 1.35rem;
  line-height: 1.25;
  color: var(--color-text, #1D1D1B);
  margin: 0 0 12px 0;
}

.due-iconbox .elementor-icon-box-title a {
  color: inherit;
  text-decoration: none;
}

.due-iconbox:hover .elementor-icon-box-title a {
  color: var(--color-primary, #E20714);
}

.due-iconbox .elementor-icon-box-description {
  font-family: var(--font-body, 'Open Sans', sans-serif);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text, #1D1D1B);
  opacity: 0.75;
  margin: 0;
}

/* Filetto sotto la scheda: la stessa firma delle card. */
.due-iconbox {
  padding-bottom: 24px;
  border-bottom: 4px solid var(--color-bg-2, #E8E8E8);
  transition: border-color 0.25s ease;
}

.due-iconbox:hover {
  border-bottom-color: var(--color-primary, #E20714);
}

/* ------------------------------------------------- Elenco di vantaggi */

.due-iconlist .elementor-icon-list-item {
  padding: 12px 0;
  border-bottom: 1px solid var(--color-bg-2, #E8E8E8);
}

.due-iconlist .elementor-icon-list-item:last-child {
  border-bottom: 0;
}

.due-iconlist .elementor-icon-list-icon {
  width: 22px;
}

.due-iconlist .elementor-icon-list-icon svg,
.due-iconlist .elementor-icon-list-icon i {
  color: var(--color-primary, #E20714);
  fill: var(--color-primary, #E20714);
  font-size: 14px;
}

.due-iconlist .elementor-icon-list-text {
  font-family: var(--font-body, 'Open Sans', sans-serif);
  font-size: 1rem;
  color: var(--color-text, #1D1D1B);
  padding-inline-start: 12px;
}

.due-iconlist .elementor-icon-list-item > a:hover .elementor-icon-list-text {
  color: var(--color-primary, #E20714);
}

/* -------------------------------------------------------- Le persone */

.due-persona {
  background-color: var(--color-bg, #ffffff);
  border-bottom: 4px solid var(--color-primary, #E20714);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.10);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.due-persona:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.16);
}

.due-persona .elementor-image-box-img {
  width: 100% !important;
  margin: 0 !important;
  overflow: hidden;
}

.due-persona .elementor-image-box-img img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 0;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.due-persona:hover .elementor-image-box-img img {
  transform: scale(1.06);
}

.due-persona .elementor-image-box-content {
  padding: 22px 24px 26px;
  text-align: left;
}

.due-persona .elementor-image-box-title {
  font-family: var(--font-headings, 'Poppins', sans-serif);
  font-weight: var(--weight-headings, 700);
  font-size: 1.25rem;
  color: var(--color-text, #1D1D1B);
  margin: 0 0 6px 0;
}

.due-persona .elementor-image-box-title a {
  color: inherit;
  text-decoration: none;
}

.due-persona .elementor-image-box-description {
  font-family: var(--font-body, 'Open Sans', sans-serif);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-primary, #E20714);
  margin: 0;
}

/* ------------------------------------------------ Numeri col contatore */

.due-contatori {
  text-align: center;
}

.due-contatore .elementor-counter-number-wrapper {
  font-family: var(--font-headings, 'Poppins', sans-serif);
  font-weight: var(--weight-headings, 700);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1;
  color: var(--color-primary, #E20714);
  justify-content: center;
}

.due-contatore .elementor-counter-title {
  font-family: var(--font-body, 'Open Sans', sans-serif);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-text, #1D1D1B);
  opacity: 0.7;
  margin-top: 14px;
  text-align: center;
}

/* Filetto sopra l'etichetta: separa senza aggiungere una riga di testo. */
.due-contatore .elementor-counter-title::before {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  margin: 0 auto 14px auto;
  background-color: var(--color-primary, #E20714);
}

/* ------------------------------------------------ Video con copertina */

.due-video .elementor-custom-embed-image-overlay img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.due-video .elementor-custom-embed-image-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.25);
  transition: background-color 0.3s ease;
}

.due-video .elementor-custom-embed-image-overlay:hover::after {
  background-color: rgba(0, 0, 0, 0.4);
}

/* Il triangolo di serie e' tondo e bianco: qui diventa il quadrato pieno
   nel primario, come le frecce dei caroselli. */
.due-video .elementor-custom-embed-play {
  width: 76px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary, #E20714);
  z-index: 2;
  transition: background-color 0.25s ease, transform 0.25s ease;
}

.due-video .elementor-custom-embed-play i,
.due-video .elementor-custom-embed-play svg {
  color: #ffffff;
  fill: #ffffff;
  font-size: 26px;
  text-shadow: none;
  opacity: 1;
}

.due-video .elementor-custom-embed-image-overlay:hover .elementor-custom-embed-play {
  background-color: var(--color-secondary, #bc111b);
  transform: translate(-50%, -50%) scale(1.06);
}

/* ---------------------------------------------------- Galleria a filtri */

.due-galleria .elementor-gallery__titles-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 26px;
}

.due-galleria .elementor-gallery-title {
  font-family: var(--font-body, 'Open Sans', sans-serif);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-text, #1D1D1B);
  padding: 10px 18px;
  border: 1px solid var(--color-bg-2, #E8E8E8);
  border-radius: 0;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.due-galleria .elementor-gallery-title:hover {
  border-color: var(--color-primary, #E20714);
  color: var(--color-primary, #E20714);
}

.due-galleria .elementor-gallery-title--active {
  background-color: var(--color-primary, #E20714);
  border-color: var(--color-primary, #E20714);
  color: #ffffff;
}

/* Il puntatore di serie sotto la voce attiva non serve: il colore pieno
   dice gia' quale filtro e' acceso. */
.due-galleria .elementor-gallery-title::after {
  display: none;
}

.due-galleria .elementor-gallery-item__overlay {
  background-color: rgba(0, 0, 0, 0.55);
}

.due-galleria .elementor-gallery-item__title {
  font-family: var(--font-headings, 'Poppins', sans-serif);
  font-weight: var(--weight-headings, 700);
  font-size: 1.1rem;
  color: #ffffff;
}

/* ------------------------------------------------ Immagine interattiva */

/* Il widget disegna punto e fumetto con le proprie variabili, e i suoi
   selettori pesano piu' di una classe sola: per questo qui si scrivono le
   variabili invece delle proprieta'. */
.elementor-widget.due-hotspot {
  --hotspot-box-color: var(--color-primary, #E20714);
  --hotspot-color: #ffffff;
  --hotspot-border-radius: 0;
  --hotspot-min-width: 34px;
  --hotspot-min-height: 34px;
  --hotspot-padding: 6px;
  --tooltip-color: var(--color-text, #1D1D1B);
  --tooltip-text-color: #ffffff;
  --tooltip-border-radius: 0;
  --tooltip-padding: 14px 16px;
  --tooltip-max-width: 260px;
  --white-space: normal;
}

.due-hotspot .e-hotspot__button {
  align-items: center;
  font-family: var(--font-headings, 'Poppins', sans-serif);
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.due-hotspot .e-hotspot__tooltip {
  font-family: var(--font-body, 'Open Sans', sans-serif);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* ---------------------------------------------------- Mappa e recapiti */

.due-mappa__mappa iframe {
  display: block;
  width: 100%;
  min-height: 380px;
  filter: grayscale(1);
  transition: filter 0.4s ease;
}

.due-mappa__mappa:hover iframe {
  filter: grayscale(0);
}

/* --------------------------------------------------------- I loghi */

.due-loghi img {
  filter: grayscale(1);
  opacity: 0.55;
  transition: filter 0.3s ease, opacity 0.3s ease;
}

.due-loghi .swiper-slide:hover img {
  filter: grayscale(0);
  opacity: 1;
}

/* --------------------------------------------------- Titolo animato */

.due-animato {
  text-align: center;
}

.due-animato__titolo .elementor-headline {
  font-family: var(--font-headings, 'Poppins', sans-serif);
  font-weight: var(--weight-headings, 700);
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.15;
  color: var(--color-text, #1D1D1B);
}

.due-animato__titolo .elementor-headline-dynamic-text {
  color: var(--color-primary, #E20714);
}

.due-animato__testo {
  max-width: 640px;
  margin: 18px auto 0 auto;
  text-align: center;
  font-family: var(--font-body, 'Open Sans', sans-serif);
  color: var(--color-text, #1D1D1B);
  opacity: 0.75;
}

/* ----------------------------------------------------- Testimonianze */

.due-testimonianze .elementor-testimonial__content {
  background-color: transparent;
  padding: 0;
}

.due-testimonianze .elementor-testimonial__text {
  font-family: var(--font-headings, 'Poppins', sans-serif);
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  line-height: 1.5;
  color: var(--color-text, #1D1D1B);
  max-width: 780px;
  margin: 0 auto 26px auto;
}

/* Le virgolette aperte prima della citazione: un segno, non un'immagine. */
.due-testimonianze .elementor-testimonial__text::before {
  content: "\201C";
  display: block;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 4rem;
  line-height: 0.6;
  color: var(--color-primary, #E20714);
  margin-bottom: 18px;
}

.due-testimonianze .elementor-testimonial__image img {
  width: 76px;
  height: 76px;
  object-fit: cover;
  border-radius: 0;
}

.due-testimonianze .elementor-testimonial__name {
  font-family: var(--font-headings, 'Poppins', sans-serif);
  font-weight: var(--weight-headings, 700);
  font-size: 1.05rem;
  color: var(--color-text, #1D1D1B);
}

.due-testimonianze .elementor-testimonial__title {
  font-family: var(--font-body, 'Open Sans', sans-serif);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-primary, #E20714);
}

/* -------------------------------------------------- Piani a confronto */

.due-piano .elementor-price-table {
  background-color: var(--color-bg, #ffffff);
  border-bottom: 4px solid var(--color-bg-2, #E8E8E8);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.10);
  height: 100%;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.25s ease;
}

.due-piano:hover .elementor-price-table {
  transform: translateY(-8px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.16);
  border-bottom-color: var(--color-primary, #E20714);
}

.due-piano--evidenza .elementor-price-table {
  border-bottom-color: var(--color-primary, #E20714);
}

.due-piano .elementor-price-table__header {
  background-color: var(--color-text, #1D1D1B);
  padding: 26px 20px;
}

.due-piano .elementor-price-table__heading {
  font-family: var(--font-headings, 'Poppins', sans-serif);
  font-weight: var(--weight-headings, 700);
  font-size: 1.4rem;
  color: #ffffff;
  margin: 0;
}

.due-piano .elementor-price-table__subheading {
  font-family: var(--font-body, 'Open Sans', sans-serif);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #ffffff;
  opacity: 0.7;
}

.due-piano .elementor-price-table__price {
  color: var(--color-primary, #E20714);
  font-family: var(--font-headings, 'Poppins', sans-serif);
  font-weight: var(--weight-headings, 700);
  padding: 26px 0 10px 0;
}

.due-piano .elementor-price-table__period {
  font-family: var(--font-body, 'Open Sans', sans-serif);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-text, #1D1D1B);
  opacity: 0.6;
}

.due-piano .elementor-price-table__features-list {
  padding: 20px 26px 10px 26px;
  font-family: var(--font-body, 'Open Sans', sans-serif);
  font-size: 0.95rem;
  color: var(--color-text, #1D1D1B);
}

.due-piano .elementor-price-table__features-list li .elementor-price-table__feature-inner {
  justify-content: center;
}

.due-piano .elementor-price-table__features-list i,
.due-piano .elementor-price-table__features-list svg {
  color: var(--color-primary, #E20714);
  fill: var(--color-primary, #E20714);
}

.due-piano .elementor-price-table__button {
  background-color: var(--color-primary, #E20714);
  border-radius: 0;
  font-family: var(--font-body, 'Open Sans', sans-serif);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 16px 32px;
  transition: background-color 0.25s ease;
}

.due-piano .elementor-price-table__button:hover {
  background-color: var(--color-secondary, #bc111b);
}

.due-piano .elementor-price-table__ribbon-inner {
  background-color: var(--color-primary, #E20714);
  font-family: var(--font-body, 'Open Sans', sans-serif);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* -------------------------------------------------------- Il listino */

.due-listino .elementor-price-list-item {
  padding: 18px 0;
  border-bottom: 1px solid var(--color-bg-2, #E8E8E8);
}

.due-listino .elementor-price-list-image img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 0;
}

.due-listino .elementor-price-list-title {
  font-family: var(--font-headings, 'Poppins', sans-serif);
  font-weight: var(--weight-headings, 700);
  font-size: 1.1rem;
  color: var(--color-text, #1D1D1B);
}

.due-listino .elementor-price-list-price {
  font-family: var(--font-headings, 'Poppins', sans-serif);
  font-weight: var(--weight-headings, 700);
  font-size: 1.1rem;
  color: var(--color-primary, #E20714);
}

.due-listino .elementor-price-list-separator {
  border-bottom-style: dotted;
  border-bottom-color: var(--color-bg-2, #E8E8E8);
}

.due-listino .elementor-price-list-description {
  font-family: var(--font-body, 'Open Sans', sans-serif);
  font-size: 0.95rem;
  color: var(--color-text, #1D1D1B);
  opacity: 0.75;
}

/* ------------------------------------------------ Conto alla rovescia */

.due-countdown {
  text-align: center;
}

.due-countdown__titolo .elementor-heading-title {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  margin: 0 0 12px 0;
}

.due-countdown__testo {
  max-width: 620px;
  margin: 0 auto 30px auto;
  opacity: 0.75;
}

.due-countdown__conto .elementor-countdown-item {
  background-color: var(--color-text, #1D1D1B);
  padding: 22px 10px;
}

.due-countdown__conto .elementor-countdown-digits {
  font-family: var(--font-headings, 'Poppins', sans-serif);
  font-weight: var(--weight-headings, 700);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  color: #ffffff;
}

.due-countdown__conto .elementor-countdown-label {
  font-family: var(--font-body, 'Open Sans', sans-serif);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-primary, #E20714);
  margin-top: 8px;
}

/* --------------------------------------- Filtri e griglia di articoli */

.due-filtri .e-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.due-filtri .e-filter-item {
  font-family: var(--font-body, 'Open Sans', sans-serif);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-text, #1D1D1B);
  background-color: transparent;
  border: 1px solid var(--color-bg-2, #E8E8E8);
  border-radius: 0;
  padding: 10px 18px;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.due-filtri .e-filter-item:hover {
  border-color: var(--color-primary, #E20714);
  color: var(--color-primary, #E20714);
}

/* Il widget stampa la voce "Tutti" per ultima: nella barra deve stare in
   testa, e con flex basta l'ordine. */
.due-filtri .e-filter-item[data-filter="__all"] {
  order: -1;
}

/* Il widget marca la voce accesa con aria-pressed, non con una classe. */
.due-filtri .e-filter-item[aria-pressed="true"] {
  background-color: var(--color-primary, #E20714);
  border-color: var(--color-primary, #E20714);
  color: #ffffff;
}

.due-loop--griglia .elementor-grid {
  gap: 30px;
}

.due-loop--griglia .elementor-pagination .page-numbers {
  font-family: var(--font-body, 'Open Sans', sans-serif);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-text, #1D1D1B);
  padding: 8px 14px;
  border-radius: 0;
}

.due-loop--griglia .elementor-pagination .page-numbers.current {
  background-color: var(--color-primary, #E20714);
  color: #ffffff;
}

/* ------------------------------------------------------- La ricerca */

.due-ricerca .elementor-search-form__container {
  border-radius: 0;
  border: 1px solid var(--color-bg-2, #E8E8E8);
  background-color: var(--color-bg, #ffffff);
  overflow: hidden;
}

.due-ricerca .elementor-search-form__input {
  font-family: var(--font-body, 'Open Sans', sans-serif);
  font-size: 1rem;
  color: var(--color-text, #1D1D1B);
  padding: 16px 20px;
}

.due-ricerca .elementor-search-form__submit {
  background-color: var(--color-primary, #E20714);
  color: #ffffff;
  border-radius: 0;
  font-family: var(--font-body, 'Open Sans', sans-serif);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 0 28px;
  transition: background-color 0.25s ease;
}

.due-ricerca .elementor-search-form__submit:hover {
  background-color: var(--color-secondary, #bc111b);
}

/* --------------------------------------------------- Mappa del sito */

.due-sitemap .elementor-sitemap-section {
  margin-bottom: 34px;
}

.due-sitemap .elementor-sitemap-title {
  font-family: var(--font-headings, 'Poppins', sans-serif);
  font-weight: var(--weight-headings, 700);
  font-size: 1.2rem;
  color: var(--color-text, #1D1D1B);
  padding-bottom: 10px;
  border-bottom: 3px solid var(--color-primary, #E20714);
  margin-bottom: 14px;
}

.due-sitemap .elementor-sitemap-item {
  font-family: var(--font-body, 'Open Sans', sans-serif);
  font-size: 0.95rem;
  padding: 4px 0;
}

.due-sitemap .elementor-sitemap-item a {
  color: var(--color-text, #1D1D1B);
  text-decoration: none;
}

.due-sitemap .elementor-sitemap-item a:hover {
  color: var(--color-primary, #E20714);
}

/* ------------------------------------------------- Pannello laterale */

.due-pannello .e-off-canvas__content {
  background-color: var(--color-bg, #ffffff);
  border-radius: 0;
}

.due-pannello .e-off-canvas__close-button {
  color: var(--color-text, #1D1D1B);
}

.due-pannello__titolo .elementor-heading-title {
  font-size: 1.5rem;
  margin: 0 0 14px 0;
}

.due-pannello__menu .elementor-nav-menu a {
  font-family: var(--font-body, 'Open Sans', sans-serif);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-text, #1D1D1B);
  padding: 12px 0;
  border-bottom: 1px solid var(--color-bg-2, #E8E8E8);
}

.due-pannello__menu .elementor-nav-menu a:hover {
  color: var(--color-primary, #E20714);
  background-color: transparent;
}

/* -------------------------------- Annuncio e pulsanti di contatto */

/* Questi due sono elementi fluttuanti: il tema si limita a togliere gli
   angoli tondi, il resto lo decide chi li inserisce. */
.due-annuncio .e-floating-bars__cta-button,
.due-contatti-flottanti .e-contact-buttons__send-button {
  border-radius: 0;
}

/* ==========================================================================
   12. Il corredo dell'articolo

   Barra di lettura, indice, condivisione, autore, precedente e successivo:
   stanno nel template dell'articolo, non fra le fasce, perche' leggono il
   post corrente.
   ========================================================================== */

.due-barra-lettura {
  background-color: transparent;
}

/* Il widget rende la barra come .elementor-scrolling-tracker, non con un
   nome che contenga "progress": la riga piena dentro e' .current-progress. */
.due-progresso .elementor-scrolling-tracker {
  height: 5px;
  border-radius: 0;
  background-color: var(--color-bg-2, #E8E8E8);
  overflow: hidden;
}

.due-progresso .current-progress {
  height: 5px;
  border-radius: 0;
  background-color: var(--color-primary, #E20714);
}

/* ------------------------------------------------------------ Indice */

.due-indice {
  margin-bottom: 34px;
}

.due-indice .elementor-toc__header {
  background-color: var(--color-bg-2, #E8E8E8);
  border: 0;
  padding: 14px 18px;
}

.due-indice .elementor-toc__header-title {
  font-family: var(--font-body, 'Open Sans', sans-serif);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-text, #1D1D1B);
}

.due-indice .elementor-toc__body {
  border: 1px solid var(--color-bg-2, #E8E8E8);
  border-top: 0;
  padding: 16px 18px;
}

.due-indice .elementor-toc__list-item {
  font-family: var(--font-body, 'Open Sans', sans-serif);
  font-size: 0.95rem;
  padding: 4px 0;
}

.due-indice .elementor-toc__list-item-text {
  color: var(--color-text, #1D1D1B);
  text-decoration: none;
}

.due-indice .elementor-toc__list-item-text:hover,
.due-indice .elementor-toc__list-item-text.elementor-item-active {
  color: var(--color-primary, #E20714);
}

/* ------------------------------------------------------ Condivisione */

/* Con il colore "personalizzato" il widget prende bordo e icona da due sue
   variabili: scriverle qui vale piu' che rincorrere i selettori dei singoli
   social, che pesano tre classi l'uno. */
.elementor-widget.due-condivisione {
  --e-share-buttons-primary-color: var(--color-primary, #E20714);
  --e-share-buttons-secondary-color: #ffffff;
}

.elementor-widget.due-condivisione .elementor-share-btn {
  border-radius: 0;
  border-width: 2px;
  transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}

.elementor-widget.due-condivisione .elementor-share-btn:hover {
  background-color: var(--color-primary, #E20714);
}

.elementor-widget.due-condivisione .elementor-share-btn:hover .elementor-share-btn__icon {
  color: #ffffff;
}

/* --------------------------------------------------------- L'autore */

.due-autore .elementor-author-box {
  background-color: var(--color-bg-2, #E8E8E8);
  padding: 26px;
}

.due-autore .elementor-author-box__avatar img {
  border-radius: 0;
}

.due-autore .elementor-author-box__name {
  font-family: var(--font-headings, 'Poppins', sans-serif);
  font-weight: var(--weight-headings, 700);
  font-size: 1.15rem;
  color: var(--color-text, #1D1D1B);
  margin: 0 0 8px 0;
}

.due-autore .elementor-author-box__bio {
  font-family: var(--font-body, 'Open Sans', sans-serif);
  font-size: 0.95rem;
  color: var(--color-text, #1D1D1B);
  opacity: 0.8;
}

.due-autore .elementor-author-box__button {
  font-family: var(--font-body, 'Open Sans', sans-serif);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-primary, #E20714);
  border: 0;
  padding: 0;
  margin-top: 10px;
}

/* --------------------------------------- Precedente e successivo */

.due-navigazione .elementor-post-navigation {
  border-top: 1px solid var(--color-bg-2, #E8E8E8);
  border-bottom: 1px solid var(--color-bg-2, #E8E8E8);
  padding: 22px 0;
}

/* Il foglio del kit colora le etichette con un selettore che comprende
   anche il tag: qui ne serve uno altrettanto pesante. */
.elementor-widget.due-navigazione span.post-navigation__prev--label,
.elementor-widget.due-navigazione span.post-navigation__next--label {
  font-family: var(--font-body, 'Open Sans', sans-serif);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-primary, #E20714);
}

.elementor-widget.due-navigazione span.post-navigation__prev--title,
.elementor-widget.due-navigazione span.post-navigation__next--title {
  font-family: var(--font-headings, 'Poppins', sans-serif);
  font-weight: var(--weight-headings, 700);
  font-size: 1rem;
  line-height: 1.3;
  color: var(--color-text, #1D1D1B);
}

.elementor-widget.due-navigazione a:hover span.post-navigation__prev--title,
.elementor-widget.due-navigazione a:hover span.post-navigation__next--title {
  color: var(--color-primary, #E20714);
}

.due-navigazione .elementor-post-navigation__separator {
  background-color: var(--color-bg-2, #E8E8E8);
}

/* ==========================================================================
   13. La scena inchiodata

   La sezione e' alta quattro schermate, il contenuto resta fermo (sticky) e
   l'avanzamento dentro la sezione fa da tempo alle animazioni. E' la cosa
   che Elementor da solo non fa: i suoi effetti si calcolano sulla posizione
   dell'elemento nella finestra, e un elemento inchiodato nella finestra sta
   fermo — quindi o il pin o lo scrub, mai i due insieme.

   Il tempo lo scandisce theme.js, che scrive un solo numero — --p, da 0 a 1
   — e lascia al CSS qui sotto tutto il resto. Le regole di base disegnano una
   scena ferma e composta: il pin e il movimento si accendono con la classe
   due-scena--pronta, che il copione aggiunge quando entra in servizio. Senza
   JavaScript la scena resta impaginata, non rotta.

   Le misure di Elementor passano dalle sue variabili (--min-height,
   --position, --height, --overflow): scriverle e' piu' sicuro che scavalcare
   le proprieta', perche' il contenitore le rilegge da li'.
   ========================================================================== */

.due-scena {
  position: relative;
}

.due-scena__pin {
  --min-height: 100vh;
  --overflow: hidden;
  background-color: var(--color-text, #1D1D1B);
  isolation: isolate;
}

/* Lo sfondo e' un'immagine, non uno sfondo del contenitore: deve potersi
   muovere per conto suo. */
.due-scena__fondo {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  transform-origin: center center;
}

.due-scena .due-scena__fondo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Il velo: senza, i testi bianchi non si leggono su una fotografia. */
.due-scena__pin::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.7) 100%);
  pointer-events: none;
}

.due-scena__oggetto {
  position: absolute;
  z-index: 3;
  margin: 0;
  pointer-events: none;
  transform-origin: center center;
}

.due-scena .due-scena__oggetto img {
  display: block;
  width: 100%;
  height: auto;
}

/* Tre grandezze e tre posizioni: la profondita' si legge prima dal disegno
   e poi dal movimento. */
.due-scena__oggetto--disco {
  width: 52vmin;
  left: -10vmin;
  bottom: -12vmin;
  opacity: 0.85;
}

.due-scena__oggetto--anello {
  width: 26vmin;
  right: 8vw;
  top: 10vh;
  opacity: 0.9;
}

.due-scena__oggetto--quadrato {
  width: 13vmin;
  left: 20vw;
  top: 62vh;
  opacity: 0.9;
}

.due-scena__testo {
  position: relative;
  z-index: 4;
  width: 100%;
  padding-block: 12vh 4vh;
  text-align: center;
}

.due-scena__occhiello .elementor-heading-title {
  font-family: var(--font-body, 'Open Sans', sans-serif);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #ffffff;
  opacity: 0.8;
  margin: 0 0 18px 0;
}

.due-scena__titolo .elementor-heading-title {
  font-family: var(--font-headings, 'Poppins', sans-serif);
  font-weight: var(--weight-headings, 700);
  font-size: clamp(2.2rem, 6vw, 4.6rem);
  line-height: 1.05;
  color: #ffffff;
  margin: 0;
}

.due-scena__sottotitolo {
  max-width: 620px;
  margin: 20px auto 0 auto;
  font-family: var(--font-body, 'Open Sans', sans-serif);
  font-size: 1.05rem;
  line-height: 1.6;
  color: #ffffff;
  opacity: 0.85;
}

/* --------------------- Il pin e il movimento, accesi da theme.js --- */

/* Tutto il movimento e' funzione di --p, l'avanzamento dentro la scena da 0
   a 1 che theme.js scrive a ogni scorrimento. Le velocita' stanno qui e da
   nessun'altra parte: sono questi i numeri da toccare.

   Prima l'avanzamento lo scandiva il browser da solo, con animation-timeline
   e una view-timeline sulla sezione: elegante, zero JavaScript, e invisibile
   su Firefox, che quelle regole non le conosce ancora. Meglio venti righe di
   conto che una pagina che non fa niente per meta' delle persone. */

.due-scena {
  --p: 0;
}

.due-scena--pronta {
  --min-height: 400vh;
}

.due-scena--pronta .due-scena__pin {
  --position: sticky;
  --height: 100vh;
  top: 0;
}

.due-scena--pronta .due-scena__testo {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-block: 0;
  padding-inline: 20px;
}

.due-scena--pronta .due-scena__fondo,
.due-scena--pronta .due-scena__oggetto,
.due-scena--pronta .due-scena__testo {
  will-change: transform, opacity;
}

.due-scena--pronta .due-scena__fondo {
  transform: scale(calc(1.04 + var(--p) * 0.22));
}

/* Tre velocita': il disco grande si sposta di trenta centesimi di schermata,
   l'anello di novanta ruotando, il quadratino attraversa tutto e gira al
   contrario. La profondita' nasce da questa differenza, non dal disegno. */
.due-scena--pronta .due-scena__oggetto--disco {
  transform: translate3d(0, calc(14vh - var(--p) * 30vh), 0) scale(calc(1 + var(--p) * 0.12));
}

.due-scena--pronta .due-scena__oggetto--anello {
  transform: translate3d(0, calc(45vh - var(--p) * 90vh), 0) rotate(calc(var(--p) * 70deg));
}

.due-scena--pronta .due-scena__oggetto--quadrato {
  transform: translate3d(calc(var(--p) * -8vw), calc(70vh - var(--p) * 145vh), 0) rotate(calc(var(--p) * -160deg));
}

/* I testi si danno il cambio: il primo esce entro il 38% della corsa, il
   secondo entra dal 62%. clamp() fa da interruttore morbido, senza curve. */
.due-scena--pronta .due-scena__testo--apertura {
  opacity: clamp(0, calc((0.38 - var(--p)) / 0.2), 1);
  transform: translate3d(0, calc(var(--p) * -14vh), 0);
}

.due-scena--pronta .due-scena__testo--chiusura {
  opacity: clamp(0, calc((var(--p) - 0.62) / 0.2), 1);
  transform: translate3d(0, calc((1 - var(--p)) * 8vh), 0);
}

/* Su schermo piccolo la scena dura meno e un oggetto sparisce: tre schermate
   di scorrimento col pollice sono gia' tante. */
@media (max-width: 767px) {
  .due-scena--pronta {
    --min-height: 300vh;
  }

  .due-scena--pronta .due-scena__oggetto--quadrato {
    display: none;
  }
}

/* Chi ha chiesto meno animazioni riceve la scena ferma: theme.js non la
   accende nemmeno, e queste regole sono la cintura di sicurezza. */
@media (prefers-reduced-motion: reduce) {
  .due-scena--pronta {
    --min-height: 100vh;
  }

  .due-scena--pronta .due-scena__pin {
    --position: relative;
    --height: auto;
  }

  .due-scena--pronta .due-scena__testo {
    position: relative;
    inset: auto;
    padding-block: 12vh 4vh;
  }

  .due-scena--pronta .due-scena__fondo,
  .due-scena--pronta .due-scena__oggetto,
  .due-scena--pronta .due-scena__testo {
    transform: none;
    opacity: 1;
    will-change: auto;
  }
}