/**
 * CSS Master bontiamo Theme
 * Questo file contiene tutte le classi personalizzate e verrà processato da Tailwind CSS
 */

/* ==========================================================================
   COMPONENT IMPORTS
   ========================================================================== */

/* Hero Container - Fixed heights with custom breakpoints */

.hero-container {
  position: relative;
  height: 80vh;
  width: 100%;
  overflow: hidden;
}

.hero-slides-track {
  display: flex;
  flex-direction: column;
  transition-property: transform;
  transition-duration: 700ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  /*@apply min-h-[calc(6*354px)] sm:min-h-[calc(6*520px)]*/
  will-change: transform;
}

.hero-slide {
  width: 100%;
  flex-shrink: 0;
  /* Altezza minima mobile per prevenire CLS, aspect-ratio per desktop */
  min-height: 354px;
}

.hero-picture {
  display: block;
  height: 100%;
  width: 100%;
}

.hero-image {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* Controlli slider orizzontali */

.hero-slider-controls {
  position: absolute;
  right: 1.5rem;
  bottom: 1.75rem;
  z-index: 20;
}

@media not all and (min-width: 768px) {
  .hero-slider-controls {
    right: 0.5rem;
  }
}

.hero-slider-controls {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.hero-slider-controls > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(1rem * var(--tw-space-x-reverse));
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}

@media not all and (min-width: 768px) {
  .hero-slider-controls > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
  }
}

/* Stili per il pulsante play/pause */

.hero-control-playpause {
  height: 2.5rem;
  width: 2.5rem;
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1));
  padding-left: 2px;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.hero-control-playpause:focus-visible {
  outline: 2px solid #1E2B50;
  outline-offset: 2px;
}

.hero-control-playpause:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}

/* Stili per il blocco contenuto hero */

.hero-content-box {
  padding: 1.5rem;
  text-align: center;
}

@media (min-width: 1024px) {
  .hero-content-box {
    padding: 2.5rem;
  }
}

/* Stili per il titolo hero */

.hero-title {
  width: 100%;
  text-align: center;
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
  margin-bottom: 1.5rem;
  font-family: "Fira Sans", sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 43px;
}

@media (min-width: 1024px) {
  .hero-title {
    margin-bottom: 2rem;
    font-size: 48px;
    line-height: 58px;
  }
}

/* Stili per il CTA hero */

.hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 209 0 / var(--tw-bg-opacity, 1));
  text-align: center;
  font-family: Roboto, sans-serif;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  padding-left: 32px;
  padding-right: 32px;
  padding-top: 10px;
  padding-bottom: 10px;
}

@media (min-width: 1024px) {
  .hero-cta {
    padding-top: 14px;
    padding-bottom: 14px;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}

.hero-cta {
  font-size: 14px;
  line-height: 16px;
}

@media (min-width: 1024px) {
  .hero-cta {
    font-size: 16px;
    line-height: 19px;
  }
}

.hero-cta:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 26px;
  padding-right: 26px;
}

/* CSS per barre pause - perfettamente centrate */

.hero-pause-bars {
  position: relative;
  background-color: transparent;
}

.hero-pause-bars::before,
.hero-pause-bars::after {
  content: '';
  position: absolute;
  border-radius: 0.125rem;
  --tw-bg-opacity: 1;
  background-color: rgb(23 37 84 / var(--tw-bg-opacity, 1));
  height: 16px;
  width: 3px;
  /* Altezza aumentata da 12px a 16px per barre più alte || */
  top: 50%;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hero-pause-bars::before {
  /* Prima barretta: centrata con offset sinistro */
  left: 50%;
  --tw-translate-x: -150%;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hero-pause-bars::after {
  /* Seconda barretta: centrata con offset destro */
  left: 50%;
  --tw-translate-x: 50%;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* CSS per triangolo play - perfettamente centrato */

.hero-play-triangle {
  position: relative;
  background-color: transparent;
}

.hero-play-triangle::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  --tw-translate-x: -40%;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  height: 0px;
  width: 0px;
  border-left-width: 8px;
  --tw-border-opacity: 1;
  border-left-color: rgb(23 37 84 / var(--tw-border-opacity, 1));
  border-top-width: 6px;
  border-bottom-width: 6px;
  border-top-color: transparent;
  border-bottom-color: transparent;
}

/* Indicatori slider con effetto riempimento */

.hero-slide-indicator {
  position: relative;
  height: 0.5rem;
  width: 2.25rem;
  overflow: hidden;
  border-radius: 72px;
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}

@media not all and (min-width: 768px) {
  .hero-slide-indicator {
    height: 1.5rem;
  }
}

.hero-slide-indicator {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.hero-slide-indicator::before {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  border-radius: 72px;
  --tw-bg-opacity: 1;
  background-color: rgb(30 43 80 / var(--tw-bg-opacity, 1));
  width: 0px;
  transition-property: width;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-slide-indicator.active::before {
  width: 100%;
}

.hero-slide-overlay {
  position: absolute;
  inset: 0px;
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(30 43 80 / 0.4) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(30 43 80 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(45 41 38 / 0.3) var(--tw-gradient-to-position);
}

.hero-slide-content {
  position: relative;
  z-index: 10;
  margin-left: auto;
  margin-right: auto;
  max-width: 56rem;
  padding-left: 1rem;
  padding-right: 1rem;
  text-align: center;
}

.hero-slide-title {
  margin-bottom: 1.5rem;
  font-size: 2.25rem;
  line-height: 2.5rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

@media not all and (min-width: 768px) {
  .hero-slide-title {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
}

@media (min-width: 768px) {
  .hero-slide-title {
    font-size: 3rem;
    line-height: 1;
  }
}

@media (min-width: 1024px) {
  .hero-slide-title {
    font-size: 3.75rem;
    line-height: 1;
  }
}

.hero-slide-title {
  --tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.hero-slide-subtitle {
  margin-bottom: 2rem;
  font-size: 1.25rem;
  line-height: 1.75rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

@media not all and (min-width: 768px) {
  .hero-slide-subtitle {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 768px) {
  .hero-slide-subtitle {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}

.hero-slide-subtitle {
  --tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

/* Controller laterale - RIMOSSO: sostituito da versione orizzontale */

/* Button play/pause con bordo sempre presente */

.hero-control-playpause {
  border-radius: 0.5rem;
  border-width: 4px;
  --tw-border-opacity: 1;
  border-color: rgb(250 250 250 / var(--tw-border-opacity, 1));
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.hero-control-playpause:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.hero-control-playpause {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hero-control-playpause:not(.active):hover {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
  /* Stesso colore del background hover quando non attivo */
}

.hero-control-playpause:focus {
  --tw-border-opacity: 1;
  border-color: rgb(30 43 80 / var(--tw-border-opacity, 1));
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  /* Bordo blu per focus */
}

.hero-control-playpause.active {
  --tw-border-opacity: 1;
  border-color: rgb(30 43 80 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1));
}

.hero-control-playpause:not(.active) {
  --tw-border-opacity: 1;
  border-color: rgb(250 250 250 / var(--tw-border-opacity, 1));
  /* Forza bordo trasparente quando non attivo */
}

/* Quando un elemento con queste classi ha la classe .hidden, nascondi anche i suoi pseudo-elementi */

.hero-pause-bars.hidden::before,
.hero-pause-bars.hidden::after,
.hero-play-triangle.hidden::before {
  display: none;
}

.hero-controls {
  position: absolute;
  bottom: 5%;
  z-index: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.hero-controls > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(1rem * var(--tw-space-x-reverse));
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}

@media (min-width: 1024px) {
  .hero-controls {
    bottom: 3rem;
  }
}

.hero-controls {
  right: 5%;
  left: calc(50% - 90px);
}

@media (min-width: 1024px) {
  .hero-controls {
    right: 0px;
    right: 1.5rem;
    --tw-translate-x: -50%;
    --tw-translate-x: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
}

.hero-onda {
  position: absolute;
  bottom: -1px;
  /* rotate: none; */
  transform: rotate(180deg);
  width: 100%;
  display: block;
  /*svg {
    filter: brightness(0) saturate(100%) invert(101%) sepia(10%) saturate(7470%) hue-rotate(
  273deg) brightness(122%) contrast(98%);
  }*/
}

.hero-slide img {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: right bottom;
     object-position: right bottom;
  /* Ancora a basso/destra per mostrare le mucche */
}

@media (min-width: 768px) {
  .hero-slider-section {
    max-height: 80vh;
    overflow: hidden;
  }

  .hero-container {
    max-height: 80vh;
  }

  .page-section--hero_layout img {
    -o-object-position: top;
       object-position: top;
  }
}

/* ==========================================================================
   CARATTERISTICHE PRODOTTO LAYOUT
   ========================================================================== */

/* Text Container Layout - Sezione con titolo e descrizione centrati */

.text-container-section {
  position: relative;
  width: 100%;
  --tw-bg-opacity: 1;
  background-color: rgb(253 253 253 / var(--tw-bg-opacity, 1));
  padding: 24px;
}

@media (min-width: 768px) {
  .text-container-section {
    padding: 80px;
  }
}

.text-container-wrapper {
  width: 100%;
}

@media (min-width: 390px) {
  .text-container-wrapper {
    max-width: 390px;
  }
}

@media (min-width: 768px) {
  .text-container-wrapper {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .text-container-wrapper {
    max-width: 1024px;
  }
}

@media (min-width: 1440px) {
  .text-container-wrapper {
    max-width: 1440px;
  }
}

.text-container-wrapper {
  margin-left: auto;
  margin-right: auto;
  max-width: 56rem;
  text-align: center;
}

.text-container-title {
  /* Mobile + Desktop responsive */
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
}

@media (min-width: 390px) {
  .text-container-title {
    --tw-text-opacity: 1;
    color: rgb(30 43 80 / var(--tw-text-opacity, 1));
  }
}

.text-container-title {
  text-align: center;
  font-family: "Fira Sans", sans-serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 36px;
}

@media (min-width: 1024px) {
  .text-container-title {
    font-size: 48px;
    line-height: 58px;
  }
}

.text-container-title {
  /* 30px mobile, 36px desktop */
  margin-bottom: 24px;
}

@media (min-width: 1024px) {
  .text-container-title {
    margin-bottom: 1.5rem;
  }
}

.text-container-description {
  /* Mobile: blue-800, Desktop: blue-500 */
  --tw-text-opacity: 1;
  color: rgb(12 17 32 / var(--tw-text-opacity, 1));
}

@media (min-width: 390px) {
  .text-container-description {
    --tw-text-opacity: 1;
    color: rgb(30 43 80 / var(--tw-text-opacity, 1));
  }
}

.text-container-description {
  text-align: center;
  font-family: Roboto, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 21px;
  /* 18px per entrambi */
  margin-left: auto;
  margin-right: auto;
  max-width: 48rem;
}

.text-container-divisore {
  /* Larghezza e margin responsive con utility bontiamo */
}

@media (min-width: 390px) {
  .text-container-divisore {
    margin-left: -2.5rem;
  }
}

@media (min-width: 1024px) {
  .text-container-divisore {
    margin-left: -5rem;
    width: calc(100% + 9.5rem);
  }
}

.text-container-divisore {
  /* Altezza e padding */
  height: calc(82px + 40px);
  padding-bottom: 2.5rem;
  /* Trasformazione e opacity */
  --tw-rotate: -0.482deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  opacity: 0.1;
  /* Background con SVG ripetuto */
  background-image: url('../images/separatore-b.svg');
  background-size: 73px 82px;
  background-position: left top;
  background-repeat: repeat-x;
}

.page-section page-section--caratteristiche_prodotto_layout {
  position: relative;
  width: 100%;
  --tw-bg-opacity: 1;
  background-color: rgb(253 253 253 / var(--tw-bg-opacity, 1));
}

@media (min-width: 390px) {
  .page-section page-section--caratteristiche_prodotto_layout {
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
  }
}

@media (min-width: 768px) {
  .page-section page-section--caratteristiche_prodotto_layout {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
    padding-left: 0px;
    padding-right: 0px;
  }
}

@media (min-width: 1024px) {
  .page-section page-section--caratteristiche_prodotto_layout {
    padding-top: 5rem;
    padding-bottom: 5rem;
    padding-left: 5rem;
    padding-right: 5rem;
  }
}

@media (min-width: 1440px) {
  .page-section page-section--caratteristiche_prodotto_layout {
    padding-top: 5rem;
    padding-bottom: 5rem;
    padding-left: 5rem;
    padding-right: 5rem;
  }
}

.page-section page-section--caratteristiche_prodotto_layout {
  /* py-10 px-0 */
  overflow-x: hidden;
  /* Previene scroll orizzontale del divisore */
  /* 390px: 40/0, 900px: 40/0, 1440px: 80/80, 1920px: 80/80 */
}

/* Rimuove padding sotto il divisore - nessun spazio extra */

.caratteristiche-prodotto-container {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

@media (min-width: 1024px) {
  .caratteristiche-prodotto-container {
    max-width: 1440px;
  }
}

.caratteristiche-prodotto-container {
  /* Da 1440px in su: massimo 1440px e centrato */
  padding-top: 40px;
  padding-bottom: 40px;
  padding-left: 24px;
  padding-right: 24px;
}

@media (min-width: 1024px) {
  .caratteristiche-prodotto-container {
    padding-top: 40px;
    padding-bottom: 40px;
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* Titolo caratteristiche prodotto */

.carpro-titolo {
  text-align: center;
  font-family: "Fira Sans", sans-serif;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
  font-size: 30px;
  line-height: 36px;
  /* Padding-bottom responsive */
  padding-top: 0px;
}

@media (min-width: 390px) {
  .carpro-titolo {
    padding-top: 0px;
  }
}

@media (min-width: 768px) {
  .carpro-titolo {
    padding-top: 0px;
  }
}

@media (min-width: 1024px) {
  .carpro-titolo {
    padding-top: 5rem;
  }
}

@media (min-width: 1440px) {
  .carpro-titolo {
    padding-top: 5rem;
  }
}

.carpro-titolo {
  /* Padding-top: 0 per 390px/900px, 80px per 1440px+ */
}

.carpro-testo {
  text-align: center;
  font-family: Roboto, sans-serif;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
  font-size: 18px;
  line-height: 21px;
  padding-top: 1rem;
  /* Padding-top: 0 per 390px/900px, 80px per 1440px+ */
}

/* Sezione slideshow */

.caratteristiche-slideshow-section {
  /* Mobile: layout stack verticale con gap */
  margin-top: 80px;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

@media (min-width: 1024px) {
  .caratteristiche-slideshow-section {
    gap: 5rem;
  }
}

.caratteristiche-slideshow-section {
  /* 40px gap tra sezioni */
  /* Tablet + Desktop: layout orizzontale a 3 colonne */
}

@media (min-width: 1024px) {
  .caratteristiche-slideshow-section {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0px;
  }
}

.caratteristiche-slideshow-section {
  width: 100%;
}

@media (min-width: 1440px) {
  .caratteristiche-slideshow-section {
    width: 1060px;
  }
}

.caratteristiche-slideshow-section {
  margin-left: auto;
  margin-right: auto;
}

/* Colonne badge laterali */

.caratteristiche-badges-left,
.caratteristiche-badges-right {
  display: block;
  width: 100%;
  gap: 1rem;
}

@media (min-width: 1024px) {
  .caratteristiche-badges-left,
.caratteristiche-badges-right {
    gap: 5rem;
  }
}

.caratteristiche-badges-left,
.caratteristiche-badges-right {
  /* Mobile: layout orizzontale se più elementi */
  display: flex;
  flex-direction: row;
  justify-content: center;
  /* Tablet + Desktop: larghezza fissa 200px, layout verticale */
}

@media (min-width: 768px) {
  .caratteristiche-badges-left,
.caratteristiche-badges-right {
    width: 200px;
    flex-shrink: 0;
    flex-direction: column;
  }
}

.caratteristiche-badges-left {
  /* Mobile: order 2 (dopo slideshow) */
  order: 2;
  /* Tablet + Desktop: order 1 (prima) + padding */
}

@media (min-width: 768px) {
  .caratteristiche-badges-left {
    order: 1;
  }
}

.caratteristiche-badges-left {
  align-items: flex-end;
}

.caratteristiche-badges-right {
  /* Mobile: order 3 (ultimo) */
  order: 3;
  /* Tablet + Desktop: order 3 (ultimo) + padding */
}

@media (min-width: 768px) {
  .caratteristiche-badges-right {
    order: 3;
  }
}

/* Slideshow centrale */

.caratteristiche-slideshow-center {
  /* Mobile: order 1 (primo), occupa tutto lo spazio */
  order: 1;
  width: 100%;
  /* Padding orizzontale: 40px mobile, 80px desktop */
  padding-left: 0px;
  padding-right: 0px;
}

@media (min-width: 1024px) {
  .caratteristiche-slideshow-center {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}

.caratteristiche-slideshow-center {
  /* Tablet + Desktop: order 2 (centro), si espande tra le colonne laterali */
}

@media (min-width: 1024px) {
  .caratteristiche-slideshow-center {
    order: 2;
    max-width: none;
    flex: 1 1 0%;
  }
}

/* Container slideshow con controlli */

.carpro-slideshow-container {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: -moz-fit-content;
  max-width: fit-content;
}

.carpro-slideshow-track {
  position: relative;
  height: 100%;
  width: 100%;
}

.slideauto_slide_item.carpro-slide {
  opacity: 0;
  display: none;
}

.slideauto-pause-bars.carpro-slide::before,
  .slideauto-pause-bars.carpro-slide::after,
  .slideauto-play-triangle.carpro-slide::before {
  display: none;
}

.carpro-slide {
  display: none;
}

.hero-pause-bars.carpro-slide::before,
.hero-pause-bars.carpro-slide::after,
.hero-play-triangle.carpro-slide::before {
  display: none;
}

.carpro-pause-bars.carpro-slide::before,
.carpro-pause-bars.carpro-slide::after,
.carpro-play-triangle.carpro-slide::before {
  display: none;
}

.sliart-pause-bars.carpro-slide::before,
.sliart-pause-bars.carpro-slide::after,
.sliart-play-triangle.carpro-slide::before {
  display: none;
}

.cta-modal.carpro-slide {
  pointer-events: none;
  opacity: 0;
}

.cta-modal:not(.carpro-slide) {
  opacity: 1;
}

.tracciamento-modal.carpro-slide {
  pointer-events: none;
  opacity: 0;
}

.carpro-slide.active {
  display: block;
}

.carpro-slide-picture {
  display: block;
  height: 100%;
  width: 100%;
}

.carpro-slide-image {
  height: 342px;
  width: 342px;
  border-radius: 24px;
  -o-object-fit: cover;
     object-fit: cover;
}

@media (min-width: 768px) {
  .carpro-slide-image {
    height: 500px;
    width: 500px;
  }
}

/* Controlli navigazione posizionati sopra l'immagine */

.carpro-nav-btn {
  position: absolute;
  top: 50%;
  z-index: 10;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  cursor: pointer;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.carpro-nav-prev {
  left: 1.5rem;
  /* 24px dal bordo sinistro */
}

.carpro-nav-next {
  right: 1.5rem;
  /* 24px dal bordo destro */
}

/* Box controlli: 32x32px, padding 4px, border-radius 6px */

.carpro-nav-box {
  height: 2rem;
  width: 2rem;
  border-radius: 0.375rem;
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1));
  padding: 0.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.carpro-nav-box:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}

/* Frecce SVG */

.carpro-nav-arrow {
  height: 0.75rem;
  width: 0.5rem;
  /* 8x12px come nel SVG */
}

/* Rotazione 180° per freccia sinistra */

.carpro-nav-arrow-left {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* Controlli slideshow sotto le immagini */

.carpro-controls {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.carpro-controls > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(1rem * var(--tw-space-x-reverse));
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}

.carpro-controls {
  margin-top: 24px;
}

@media (min-width: 1024px) {
  .carpro-controls {
    margin-top: 2.5rem;
  }
}

.carpro-controls {
  /* 40px gap dalle immagini */
}

/* Pulsante play/pause caratteristiche prodotto */

.carpro-control-playpause {
  height: 2.5rem;
  width: 2.5rem;
  border-radius: 0.5rem;
  --tw-border-opacity: 1;
  border-color: rgb(30 43 80 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(30 43 80 / var(--tw-bg-opacity, 1));
  padding-left: 2px;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.carpro-control-playpause:focus-visible {
  outline: 2px solid #1E2B50;
  outline-offset: 2px;
}

.carpro-control-playpause:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(76 85 115 / var(--tw-bg-opacity, 1));
}

.carpro-control-playpause {
  border-radius: 0.5rem;
  border-width: 4px;
  --tw-border-opacity: 1;
  border-color: rgb(250 250 250 / var(--tw-border-opacity, 1));
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.carpro-control-playpause:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.carpro-control-playpause {
  /*@apply transition-border-color transition-background-color duration-[250ms] ease-in-out;*/
  /*bg-neutral-50*/
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.carpro-control-playpause:not(.active):hover {
  --tw-bg-opacity: 1;
  background-color: rgb(76 85 115 / var(--tw-bg-opacity, 1));
  /* Stesso colore del background hover quando non attivo */
}

.carpro-control-playpause:focus {
  --tw-border-opacity: 1;
  border-color: rgb(30 43 80 / var(--tw-border-opacity, 1));
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  /* Bordo blu per focus */
}

.carpro-control-playpause.active {
  --tw-border-opacity: 1;
  border-color: rgb(30 43 80 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1));
}

.carpro-control-playpause.active:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(76 85 115 / var(--tw-bg-opacity, 1));
  .carpro-play-triangle::before {
    --tw-border-opacity: 1;
    border-left-color: rgb(250 250 250 / var(--tw-border-opacity, 1));
  }
}

.carpro-control-playpause:not(.active) {
  --tw-border-opacity: 1;
  border-color: rgb(250 250 250 / var(--tw-border-opacity, 1));
  /* Forza bordo trasparente quando non attivo */
}

/* CSS per barre pause caratteristiche prodotto */

.carpro-pause-bars {
  position: relative;
  background-color: transparent;
}

.carpro-pause-bars::before,
.carpro-pause-bars::after {
  content: '';
  position: absolute;
  border-radius: 0.125rem;
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1));
  height: 16px;
  width: 3px;
  /* Altezza aumentata da 12px a 16px per coerenza */
  top: 50%;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.carpro-pause-bars::before {
  left: 50%;
  --tw-translate-x: -150%;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.carpro-pause-bars::after {
  left: 50%;
  --tw-translate-x: 50%;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* CSS per triangolo play caratteristiche prodotto */

.carpro-play-triangle {
  position: relative;
  background-color: transparent;
}

/* Nasconde pseudo-elementi quando hidden */

.carpro-play-triangle::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  --tw-translate-x: -40%;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  height: 0px;
  width: 0px;
  border-top-width: 6px;
  border-bottom-width: 6px;
  border-left-width: 8px;
  --tw-border-opacity: 1;
  border-left-color: rgb(23 37 84 / var(--tw-border-opacity, 1));
  border-top-color: transparent;
  border-bottom-color: transparent;
}

.carpro-pause-bars.hidden::before,
.carpro-pause-bars.hidden::after,
.carpro-play-triangle.hidden::before {
  display: none;
}

/* Container indicatori */

.carpro-indicators {
  display: flex;
  flex-direction: row;
}

.carpro-indicators > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

/* Indicatori slide caratteristiche prodotto */

.carpro-slide-indicator {
  position: relative;
  height: 0.5rem;
  width: 2.25rem;
  overflow: hidden;
  border-radius: 72px;
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
  cursor: pointer;
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.carpro-slide-indicator::before {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  border-radius: 72px;
  --tw-bg-opacity: 1;
  background-color: rgb(30 43 80 / var(--tw-bg-opacity, 1));
  width: 0px;
  transition-property: width;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.carpro-slide-indicator.active::before {
  width: 100%;
}

/* Badge items nelle colonne laterali */

.carpro-badge-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* Mobile: no margin bottom (gap gestito dal parent) */
  margin-bottom: 0px;
}

@media (min-width: 390px) {
  .carpro-badge-item {
    width: 50%;
  }
}

.carpro-badge-image {
  margin-bottom: 0.5rem;
  /* 8px spazio verso il testo */
}

.carpro-badge-image img,
.carpro-badge-img {
  height: 5rem;
  width: 5rem;
  -o-object-fit: contain;
     object-fit: contain;
  /* 80px x 80px mantenendo proporzioni */
}

.carpro-badge-text {
  text-align: center;
  font-family: Roboto, sans-serif;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
  font-size: 18px;
  line-height: 21px;
  /* Bold mobile, Normal desktop */
  align-self: stretch;
}

/* Decorazione SVG banner - responsive sizing */

.banner-decoration {
  /* Posizionamento e styling base */
  pointer-events: none;
  position: absolute;
  bottom: 0px;
  right: 0px;
  /* Mobile: dimensioni ridotte (~60% delle originali) */
  height: 138px;
  width: 120px;
  /* Desktop: dimensioni originali proporzionali (~80% delle originali) */
}

@media (min-width: 1024px) {
  .banner-decoration {
    height: 181px;
    width: 157px;
  }
}

.banner-decoration svg {
  height: 100%;
  width: 100%;
}

.caratteristiche-slideshow-center .banner-decoration {
  bottom: 26px;
}

/* Sezione principale slideshow articoli */

.slideshow-articoli-section {
  position: relative;
  width: 100%;
  overflow: hidden;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-top: 40px;
  padding-bottom: 40px;
  padding-left: 24px;
  padding-right: 24px;
}

@media (min-width: 1024px) {
  .slideshow-articoli-section {
    padding-top: 40px;
    padding-bottom: 40px;
    padding-left: 24px;
    padding-right: 24px;
  }
}

.slideshow-articoli-section {
  /* Padding: 40px/24px mobile, 80px desktop */
}

.slideshow-articoli-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  /* Gap: 40px tra sezioni */
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  /* Centrato */
}

/* Header sezione con titolo e sottotitolo */

.slideshow-articoli-header {
  display: flex;
  width: 100%;
  max-width: 800px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1.5rem;
  /* 800px max-width, gap 24px */
}

.slideshow-articoli-title {
  width: 100%;
  text-align: center;
  font-family: "Fira Sans", sans-serif;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
  font-size: 30px;
}

@media (min-width: 768px) {
  .slideshow-articoli-title {
    font-size: 36px;
  }
}

.slideshow-articoli-title {
  /* 30px mobile, 36px desktop */
  line-height: normal;
}

.slideshow-articoli-subtitle {
  width: 100%;
  text-align: center;
  font-family: Roboto, sans-serif;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(12 17 32 / var(--tw-text-opacity, 1));
  font-size: 18px;
}

@media (min-width: 768px) {
  .slideshow-articoli-subtitle {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

.slideshow-articoli-subtitle {
  /* Mobile: 18px, Desktop: text-lg */
  line-height: normal;
}

/* Filtri categorie orizzontali */

.slideshow-articoli-filters {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  overflow: scroll;
}

@media (min-width: 1024px) {
  .slideshow-articoli-filters {
    justify-content: center;
    gap: 1.5rem;
    overflow: hidden;
  }
}

.slideshow-articoli-filters {
  /* Gap: 24px tra filtri */
  -ms-overflow-style: none;
  /* Internet Explorer 10+ */
  scrollbar-width: none;
  /* Firefox, Safari 18.2+, Chromium 121+ */
}

.slideshow-articoli-filters::-webkit-scrollbar {
  display: none;
  /* Older Safari and Chromium */
}

.slideshow-articoli-filter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  border-radius: 90px;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  cursor: pointer;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  border-width: 1px;
  border-color: transparent;
  /* Border trasparente di default */
}

.slideshow-articoli-filter[data-state="Selected"] {
  --tw-bg-opacity: 1;
  background-color: rgb(254 240 138 / var(--tw-bg-opacity, 1));
  /* Background giallo per stato selezionato */
}

.slideshow-articoli-filter[data-state="Default"] {
  background-color: transparent;
  /* Background trasparente per default */
}

/* Hover state per i filtri */

.slideshow-articoli-filter:hover {
  --tw-border-opacity: 1;
  border-color: rgb(30 43 80 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 246 204 / var(--tw-bg-opacity, 1));
  /* Border blu + background giallo 100 */
}

/* Focus state per i filtri (solo navigazione tastiera) */

.slideshow-articoli-filter:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  /* Rimuovi outline di default */
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(30 43 80 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(165 170 185 / var(--tw-bg-opacity, 1));
  /* Border 2px blu + background blu 200 */
}

/* Mantieni lo stato Selected anche in hover */

.slideshow-articoli-filter[data-state="Selected"]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 240 138 / var(--tw-bg-opacity, 1));
  /* Mantieni background originale quando già selezionato */
}

/* Mantieni lo stato Selected anche in focus */

.slideshow-articoli-filter[data-state="Selected"]:focus-visible {
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(30 43 80 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(165 170 185 / var(--tw-bg-opacity, 1));
  /* Stesso focus per tutti */
}

.slideshow-articoli-filter-text {
  font-family: Roboto, sans-serif;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
  /* Roboto Bold */
}

.slideshow-articoli-filter[data-state="Selected"] .slideshow-articoli-filter-text {
  --tw-text-opacity: 1;
  color: rgb(23 37 84 / var(--tw-text-opacity, 1));
  /* Testo blu scuro quando selezionato */
}

.slideshow-articoli-filter[data-state="Default"] .slideshow-articoli-filter-text {
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
  /* Testo grigio quando default */
}

/* Container slideshow principale */

.slideshow-articoli-slideshow {
  border-radius: 1.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
  padding: 1rem;
}

@media (min-width: 1024px) {
  .slideshow-articoli-slideshow {
    padding: 1.5rem;
  }
}

/* Container per le slide multiple */

.slideshow-articoli-slides-container {
  position: relative;
  width: 100%;
}

/* Singola slide (nascosta di default) */

.slideauto_slide_item.slideshow-articoli-slide {
  opacity: 0;
  display: none;
}

.slideauto-pause-bars.slideshow-articoli-slide::before,
  .slideauto-pause-bars.slideshow-articoli-slide::after,
  .slideauto-play-triangle.slideshow-articoli-slide::before {
  display: none;
}

.slideshow-articoli-slide {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.hero-pause-bars.slideshow-articoli-slide::before,
.hero-pause-bars.slideshow-articoli-slide::after,
.hero-play-triangle.slideshow-articoli-slide::before {
  display: none;
}

.carpro-pause-bars.slideshow-articoli-slide::before,
.carpro-pause-bars.slideshow-articoli-slide::after,
.carpro-play-triangle.slideshow-articoli-slide::before {
  display: none;
}

.sliart-pause-bars.slideshow-articoli-slide::before,
.sliart-pause-bars.slideshow-articoli-slide::after,
.sliart-play-triangle.slideshow-articoli-slide::before {
  display: none;
}

.cta-modal.slideshow-articoli-slide {
  pointer-events: none;
  opacity: 0;
}

.cta-modal:not(.slideshow-articoli-slide) {
  opacity: 1;
}

.tracciamento-modal.slideshow-articoli-slide {
  pointer-events: none;
  opacity: 0;
}

.slideshow-articoli-slide {
  /* Mobile: verticale, gap 24px */
}

@media (min-width: 768px) {
  .slideshow-articoli-slide {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
  }
}

.slideshow-articoli-slide {
  /* Desktop: orizzontale, gap 40px */
  opacity: 0;
  /* Inizialmente trasparente */
  transition-property: opacity;
  transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  /* Transizione fade 500ms */
}

.slideshow-articoli-slide.active {
  display: flex;
  opacity: 1;
  /* Mostra con fade-in */
}

/* Picture element responsive */

.slideshow-articoli-picture {
  display: block;
  width: 100%;
}

@media (min-width: 768px) {
  .slideshow-articoli-picture {
    width: 600px;
    max-width: 600px;
  }
}

/* Immagine slideshow */

.slideshow-articoli-image {
  position: relative;
  border-radius: 1rem;
}

@media (min-width: 1024px) {
  .slideshow-articoli-image {
    width: 600px;
  }
}

.slideshow-articoli-image {
  /* 600px x 320px, bordi arrotondati */
}

/* Contenuto testo slideshow */

.slideshow-articoli-content {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 2.5rem;
}

@media (min-width: 1440px) {
  .slideshow-articoli-content {
    width: 450px;
  }
}

.slideshow-articoli-content {
  /* Width: 384px, gap: 40px */
}

.slideshow-articoli-text-section {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1.5rem;
  /* Gap: 24px */
}

.slideshow-articoli-text-wrapper {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1rem;
  /* Gap: 16px */
}

.slideshow-articoli-article-title {
  width: 100%;
  font-family: "Fira Sans", sans-serif;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(23 37 84 / var(--tw-text-opacity, 1));
  /* Fira Sans Bold 30px */
  font-size: 24px;
  line-height: 29px;
}

@media (min-width: 1024px) {
  .slideshow-articoli-article-title {
    font-size: 30px;
    line-height: 36px;
  }
}

.slideshow-articoli-article-description {
  width: 100%;
  font-family: Roboto, sans-serif;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(23 37 84 / var(--tw-text-opacity, 1));
}

@media (min-width: 1024px) {
  .slideshow-articoli-article-description {
    width: auto;
  }
}

.slideshow-articoli-article-description {
  /* Roboto Normal 18px */
  font-size: 18px;
  line-height: 21px;
  align-self: stretch;
}

/* CTA Button */

.slideshow-articoli-cta-wrapper {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.625rem;
}

@media (min-width: 1024px) {
  .slideshow-articoli-cta-wrapper {
    width: auto;
  }
}

.slideshow-articoli-cta-wrapper {
  /* Width: auto - adatta al contenuto */
}

.slideshow-articoli-cta {
  position: relative;
  width: 100%;
  border-radius: 0.5rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

@media (min-width: 1024px) {
  .slideshow-articoli-cta {
    width: auto;
  }
}

.slideshow-articoli-cta {
  /* Width: auto - adatta al contenuto */
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(23 37 84 / var(--tw-border-opacity, 1));
  /* Outline blu scuro */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  text-align: center;
  font-family: Roboto, sans-serif;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
  font-size: 14px;
  line-height: 16px;
}

@media (min-width: 1024px) {
  .slideshow-articoli-cta {
    line-height: 21px;
    font-size: 19px;
  }
}

.slideshow-articoli-cta {
  cursor: pointer;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

/* Hover state per CTA */

.slideshow-articoli-cta:hover {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.625rem;
  /* flex-direction: column, align-items: flex-start, gap: 10px */
  width: auto;
  /* width: auto (adatta al contenuto) */
  /* Padding ridotto compensato da margin per mantenere l'ingombro visivo */
  padding-left: 27px;
  padding-right: 27px;
  padding-top: 10px;
  padding-bottom: 10px;
  /* px: 40-13=27px, py: 14-4=10px */
  margin-left: 13px;
  margin-right: 13px;
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
  /* Margin per compensare: mx: 13px, my: 4px */
  --tw-bg-opacity: 1;
  background-color: rgb(165 170 185 / var(--tw-bg-opacity, 1));
  /* fill: var(--Blu-100, #D2D5DC) */
}

.slideshow-articoli-cta-ghost {
  position: absolute;
  left: 94px;
  top: -1px;
  height: 3rem;
  width: 3rem;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
  opacity: 0;
}

/* Controlli slideshow in basso */

.slideshow-articoli-controls {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
  /* Gap: 12px */
}

/* Indicatori + Play/Pause */

.slideshow-articoli-indicators {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  /* Gap: 8px tra indicatori */
}

.slideshow-articoli-indicator {
  position: relative;
  height: 0.5rem;
  width: 2.25rem;
  /* 36px x 8px */
}

.slideshow-articoli-indicator-track {
  position: absolute;
  left: 0px;
  top: 0px;
  height: 0.5rem;
  width: 2.25rem;
  border-radius: 72px;
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1.25rem;
}

.slideshow-articoli-indicator-fill {
  height: 0.5rem;
  border-radius: 72px;
  --tw-bg-opacity: 1;
  background-color: rgb(23 37 84 / var(--tw-bg-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.slideshow-articoli-indicator[data-active="true"] .slideshow-articoli-indicator-fill {
  width: 100%;
  /* 100% width quando attivo - riempie tutto l'indicatore */
}

.slideshow-articoli-indicator[data-active="false"] .slideshow-articoli-indicator-fill {
  width: 0px;
  /* 0% width quando inattivo */
}

/* Pulsante Play/Pause - identico al caratteristiche prodotto */

.slideshow-articoli-playpause {
  height: 2.5rem;
  width: 2.5rem;
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(30 43 80 / var(--tw-bg-opacity, 1));
  padding-left: 2px;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.slideshow-articoli-playpause:focus-visible {
  outline: 2px solid #1E2B50;
  outline-offset: 2px;
}

.slideshow-articoli-playpause:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}

.slideshow-articoli-playpause {
  border-radius: 0.5rem;
  border-width: 4px;
  --tw-border-opacity: 1;
  border-color: rgb(250 250 250 / var(--tw-border-opacity, 1));
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.slideshow-articoli-playpause:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.slideshow-articoli-playpause {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.slideshow-articoli-playpause:not(.active):hover {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
  /* Stesso colore del background hover quando non attivo */
}

.slideshow-articoli-playpause:focus {
  --tw-border-opacity: 1;
  border-color: rgb(30 43 80 / var(--tw-border-opacity, 1));
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  /* Bordo blu per focus */
}

.slideshow-articoli-playpause.active {
  --tw-border-opacity: 1;
  border-color: rgb(30 43 80 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(30 43 80 / var(--tw-bg-opacity, 1));
}

.slideshow-articoli-playpause:not(.active) {
  --tw-border-opacity: 1;
  border-color: rgb(250 250 250 / var(--tw-border-opacity, 1));
  /* Forza bordo trasparente quando non attivo */
}

/* CSS per barre pause slideshow articoli */

.sliart-pause-bars {
  position: relative;
  background-color: transparent;
}

.sliart-pause-bars::before,
.sliart-pause-bars::after {
  content: '';
  position: absolute;
  border-radius: 0.125rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  height: 16px;
  width: 3px;
  /* Stesse dimensioni del carpro */
  top: 50%;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.sliart-pause-bars::before {
  left: 50%;
  --tw-translate-x: -150%;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.sliart-pause-bars::after {
  left: 50%;
  --tw-translate-x: 50%;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* CSS per triangolo play slideshow articoli */

.sliart-play-triangle {
  position: relative;
  background-color: transparent;
}

.sliart-play-triangle::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  --tw-translate-x: -40%;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  height: 0px;
  width: 0px;
  border-left-width: 8px;
  --tw-border-opacity: 1;
  border-left-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
  border-top-width: 6px;
  border-bottom-width: 6px;
  border-top-color: transparent;
  border-bottom-color: transparent;
}

/* Nasconde pseudo-elementi quando hidden */

.sliart-pause-bars.hidden::before,
.sliart-pause-bars.hidden::after,
.sliart-play-triangle.hidden::before {
  display: none;
}

body {
  --tw-bg-opacity: 1;
  background-color: rgb(253 253 253 / var(--tw-bg-opacity, 1));
}

.site-header {
  position: fixed;
  z-index: 30;
  height: 90px;
  width: 100%;
}

@media (min-width: 1024px) {
  .site-header {
    height: 127px;
    background-image: url('../images/banda-blu-header.svg');
  }
}

.site-header {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.site-header-contenitore {
  position: relative;
  height: 100%;
  width: 100%;
  color: white;
}

.site-header-menus {
  margin-left: auto;
  margin-right: auto;
  display: grid;
  height: 81px;
  width: 100%;
  max-width: 1440px;
  grid-template-columns: 40% 60%;
  align-items: center;
  padding: 24px;
}

@media (min-width: 768px) {
  .site-header-menus {
    padding: 0px;
  }
}

.slideauto_slide_item.site-header-contenitore-sx {
  opacity: 0;
  display: none;
}

.slideauto-pause-bars.site-header-contenitore-sx::before,
  .slideauto-pause-bars.site-header-contenitore-sx::after,
  .slideauto-play-triangle.site-header-contenitore-sx::before {
  display: none;
}

.site-header-contenitore-sx {
  display: none;
  height: 81px;
  align-items: center;
  justify-content: flex-start;
}

.hero-pause-bars.site-header-contenitore-sx::before,
.hero-pause-bars.site-header-contenitore-sx::after,
.hero-play-triangle.site-header-contenitore-sx::before {
  display: none;
}

.carpro-pause-bars.site-header-contenitore-sx::before,
.carpro-pause-bars.site-header-contenitore-sx::after,
.carpro-play-triangle.site-header-contenitore-sx::before {
  display: none;
}

.sliart-pause-bars.site-header-contenitore-sx::before,
.sliart-pause-bars.site-header-contenitore-sx::after,
.sliart-play-triangle.site-header-contenitore-sx::before {
  display: none;
}

.cta-modal.site-header-contenitore-sx {
  pointer-events: none;
  opacity: 0;
}

.cta-modal:not(.site-header-contenitore-sx) {
  opacity: 1;
}

.tracciamento-modal.site-header-contenitore-sx {
  pointer-events: none;
  opacity: 0;
}

@media (min-width: 1024px) {
  .site-header-contenitore-sx {
    display: flex;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1440px) {
  .site-header-contenitore-sx {
    padding-left: 80px;
  }
}

.site-header-contenitore-cx {
  z-index: 20;
  padding-left: 3rem;
}

@media (min-width: 1024px) {
  .site-header-contenitore-cx {
    position: absolute;
    left: 50%;
    top: 50%;
    --tw-translate-x: -50%;
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    padding-left: 0px;
  }
}

.site-header-contenitore-cx {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 156px
}

@media (min-width: 1024px) {
  .site-header-contenitore-cx {
    width: auto;
  }
}

.site-header-contenitore-cx {
  svg {
    height: 40px;
  }
  svg {
    width: 156px;
  }
  @media (min-width: 1024px) {
    svg {
      height: 62px;
    }
  }
  @media (min-width: 1024px) {
    svg {
      width: 240px;
    }
  }
}

.slideauto_slide_item.site-header-contenitore-dx {
  opacity: 0;
  display: none;
}

.slideauto-pause-bars.site-header-contenitore-dx::before,
  .slideauto-pause-bars.site-header-contenitore-dx::after,
  .slideauto-play-triangle.site-header-contenitore-dx::before {
  display: none;
}

.site-header-contenitore-dx {
  display: none;
  height: 81px;
  align-items: center;
  justify-content: flex-end;
}

.hero-pause-bars.site-header-contenitore-dx::before,
.hero-pause-bars.site-header-contenitore-dx::after,
.hero-play-triangle.site-header-contenitore-dx::before {
  display: none;
}

.carpro-pause-bars.site-header-contenitore-dx::before,
.carpro-pause-bars.site-header-contenitore-dx::after,
.carpro-play-triangle.site-header-contenitore-dx::before {
  display: none;
}

.sliart-pause-bars.site-header-contenitore-dx::before,
.sliart-pause-bars.site-header-contenitore-dx::after,
.sliart-play-triangle.site-header-contenitore-dx::before {
  display: none;
}

.cta-modal.site-header-contenitore-dx {
  pointer-events: none;
  opacity: 0;
}

.cta-modal:not(.site-header-contenitore-dx) {
  opacity: 1;
}

.tracciamento-modal.site-header-contenitore-dx {
  pointer-events: none;
  opacity: 0;
}

@media (min-width: 1024px) {
  .site-header-contenitore-dx {
    display: flex;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1440px) {
  .site-header-contenitore-dx {
    padding-right: 80px;
  }
}

.header-dx-menu,
.header-sx-menu {
  display: flex;
  align-items: center;
  gap: 32px;
}

.header-dx-menu li a,
.header-sx-menu li a {
  font-family: Roboto, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 21px;
  --tw-text-opacity: 1;
  color: rgb(255 250 229 / var(--tw-text-opacity, 1));
}

.site-header-barra-blu {
  height: 81px;
  width: 100%;
  --tw-bg-opacity: 1;
  background-color: rgb(30 43 80 / var(--tw-bg-opacity, 1));
}

.site-header-contenitore {
  margin-top: -80px;
}

/* ================================
   HAMBURGER MENU MOBILE
   ================================ */

/* Hamburger Button - Visible only on mobile */

.hamburger-menu-button {
  position: absolute;
  right: 1.5rem;
  z-index: 30;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hamburger-menu-toggle {
  display: flex;
  height: 3rem;
  width: 3rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-style: none;
  background-color: transparent;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.hamburger-menu-toggle:hover {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hamburger-menu-toggle:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: rgb(255 209 0 / var(--tw-ring-opacity, 1));
  --tw-ring-opacity: 0.5;
}

.hamburger-menu-toggle:hover {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hamburger-menu-toggle svg {
  width: 1.5rem;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

/* Toggle icon states - mostra hamburger quando menu è chiuso */

.hamburger-menu-toggle .hamburger-icon {
  opacity: 1;
}

.hamburger-menu-toggle .close-icon {
  position: absolute;
  opacity: 0;
}

/* Toggle icon states - mostra X quando menu è aperto */

.hamburger-menu-toggle.menu-open .hamburger-icon {
  opacity: 0;
}

.hamburger-menu-toggle.menu-open .close-icon {
  opacity: 1;
}

/* Mobile Menu Overlay - Full Screen */

.mobile-menu-overlay {
  position: fixed;
  inset: 0px;
  z-index: 9999;
  height: 100%;
  width: 100%;
  transition-property: transform;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hidden State - Slide out to right */

.mobile-menu-hidden {
  pointer-events: none;
  --tw-translate-x: 100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* Visible State - Slide in from right */

.mobile-menu-visible {
  pointer-events: auto;
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* Mobile Menu Content - Full Height Container */

.mobile-menu-content {
  gap: 1.5rem;
  font-size: 24px;
  line-height: 29px;
}

/* Top Section - Replica Header Layout */

.mobile-menu-section-top {
  position: relative;
  height: 50%;
  background-image: url('../images/banda-blu-header-mobile.svg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* Bottom Section - Blue Background for Menu Destra */

.mobile-menu-section-bottom {
  display: flex;
  height: 50%;
  align-items: center;
  justify-content: center;
  --tw-bg-opacity: 1;
  background-color: rgb(210 213 220 / var(--tw-bg-opacity, 1));
}

/* Section Content Container */

.mobile-menu-section-content {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* Mobile Menu Top Section - Header Replica Layout */

.mobile-menu-section-top .mobile-menu-section-content {
  position: relative;
  height: 100%;
  width: 100%;
  padding: 0px;
  color: white;
}

/* Hide the menu navigation in top section, show only logo and close button */

.slideauto_slide_item.mobile-menu-section-top .mobile-menu-nav-container {
  opacity: 0;
  display: none;
}

.slideauto-pause-bars.mobile-menu-section-top .mobile-menu-nav-container::before,
  .slideauto-pause-bars.mobile-menu-section-top .mobile-menu-nav-container::after,
  .slideauto-play-triangle.mobile-menu-section-top .mobile-menu-nav-container::before {
  display: none;
}

.mobile-menu-section-top .mobile-menu-nav-container {
  display: none;
}

.hero-pause-bars.mobile-menu-section-top .mobile-menu-nav-container::before,
.hero-pause-bars.mobile-menu-section-top .mobile-menu-nav-container::after,
.hero-play-triangle.mobile-menu-section-top .mobile-menu-nav-container::before {
  display: none;
}

.carpro-pause-bars.mobile-menu-section-top .mobile-menu-nav-container::before,
.carpro-pause-bars.mobile-menu-section-top .mobile-menu-nav-container::after,
.carpro-play-triangle.mobile-menu-section-top .mobile-menu-nav-container::before {
  display: none;
}

.sliart-pause-bars.mobile-menu-section-top .mobile-menu-nav-container::before,
.sliart-pause-bars.mobile-menu-section-top .mobile-menu-nav-container::after,
.sliart-play-triangle.mobile-menu-section-top .mobile-menu-nav-container::before {
  display: none;
}

.cta-modal.mobile-menu-section-top .mobile-menu-nav-container {
  pointer-events: none;
  opacity: 0;
}

.cta-modal:not(.mobile-menu-section-top .mobile-menu-nav-container) {
  opacity: 1;
}

.tracciamento-modal.mobile-menu-section-top .mobile-menu-nav-container {
  pointer-events: none;
  opacity: 0;
}

/* Navigation Container */

.mobile-menu-nav-container {
  width: 100%;
  .mobile-menu-nav-sx {
    padding-bottom: 2rem;
  }
}

/* Mobile Menu Navigation Lists */

.mobile-menu-nav {
  margin: 0px;
  display: flex;
  list-style-type: none;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 2rem;
  padding: 0px;
}

/* Mobile Menu Items - Typography Specifications */

.mobile-menu-nav li {
  text-align: center;
}

.mobile-menu-nav li a {
  display: block;
  font-family: "Fira Sans", sans-serif;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
  font-size: 24px;
  line-height: 29px;
}

/*
.mobile-menu-nav li a:hover,
.mobile-menu-nav li a:focus {
  @apply text-bontiamo-blue-600 underline;
}

.mobile-menu-nav li a:focus {
  @apply outline-none ring-2 ring-bontiamo-blue-500 ring-opacity-50 rounded-sm;
}
*/

.slideauto_slide_item#mobile-menu-overlay {
  opacity: 0;
  display: none;
}

.slideauto-pause-bars#mobile-menu-overlay::before,
  .slideauto-pause-bars#mobile-menu-overlay::after,
  .slideauto-play-triangle#mobile-menu-overlay::before {
  display: none;
}

#mobile-menu-overlay {
  display: none;
}

.hero-pause-bars#mobile-menu-overlay::before,
.hero-pause-bars#mobile-menu-overlay::after,
.hero-play-triangle#mobile-menu-overlay::before {
  display: none;
}

.carpro-pause-bars#mobile-menu-overlay::before,
.carpro-pause-bars#mobile-menu-overlay::after,
.carpro-play-triangle#mobile-menu-overlay::before {
  display: none;
}

.sliart-pause-bars#mobile-menu-overlay::before,
.sliart-pause-bars#mobile-menu-overlay::after,
.sliart-play-triangle#mobile-menu-overlay::before {
  display: none;
}

.cta-modal#mobile-menu-overlay {
  pointer-events: none;
  opacity: 0;
}

.cta-modal:not(#mobile-menu-overlay) {
  opacity: 1;
}

.tracciamento-modal#mobile-menu-overlay {
  pointer-events: none;
  opacity: 0;
}

#mobile-menu-overlay {
  margin-top: 81px;
  display: flex;
  width: 100%;
  flex-direction: column;
  --tw-bg-opacity: 1;
  background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  height: calc(100% - 90px);
}

/**
 * Breadcrumb Navigation Component Styles
 *
 * Styling for breadcrumb navigation component following bontiamo design system.
 * Uses Tailwind CSS classes with @apply directive.
 */

.breadcrumb-navigation {
}

.breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
  font-family: Roboto, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumb-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.breadcrumb-link {
  --tw-text-opacity: 1;
  color: rgb(25 34 64 / var(--tw-text-opacity, 1));
}

.breadcrumb-link:hover {
  --tw-text-opacity: 1;
  color: rgb(12 17 32 / var(--tw-text-opacity, 1));
}

.breadcrumb-link {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  text-underline-offset: 2px;
}

.breadcrumb-link:hover {
  text-decoration-line: underline;
}

.breadcrumb-link {
  text-decoration: none;
}

.breadcrumb-link:focus {
  outline-width: 2px;
  outline-offset: 2px;
  outline-color: #1E2B50;
  border-radius: 0.125rem;
}

.breadcrumb-text {
  text-align: center;
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
  font-family: Roboto, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
}

.breadcrumb-current .breadcrumb-text {
  text-align: center;
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
  font-family: Roboto, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 16px;
}

.breadcrumb-separator {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  --tw-text-opacity: 1;
  color: rgb(76 85 115 / var(--tw-text-opacity, 1));
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}

/* Responsive adjustments */

@media (max-width: 640px) {
  .breadcrumb-list {
    gap: 0.25rem;
    font-size: 0.75rem;
    line-height: 1rem;
  }

  .breadcrumb-separator {
    margin-left: 0.125rem;
    margin-right: 0.125rem;
  }
}

/* Print styles */

@media print {
  .slideauto_slide_item.breadcrumb-navigation {
    opacity: 0;
    display: none;
  }

  .slideauto-pause-bars.breadcrumb-navigation::before,
  .slideauto-pause-bars.breadcrumb-navigation::after,
  .slideauto-play-triangle.breadcrumb-navigation::before {
    display: none;
  }

  .breadcrumb-navigation {
    display: none;
  }

  .hero-pause-bars.breadcrumb-navigation::before,
.hero-pause-bars.breadcrumb-navigation::after,
.hero-play-triangle.breadcrumb-navigation::before {
    display: none;
  }

  .carpro-pause-bars.breadcrumb-navigation::before,
.carpro-pause-bars.breadcrumb-navigation::after,
.carpro-play-triangle.breadcrumb-navigation::before {
    display: none;
  }

  .sliart-pause-bars.breadcrumb-navigation::before,
.sliart-pause-bars.breadcrumb-navigation::after,
.sliart-play-triangle.breadcrumb-navigation::before {
    display: none;
  }

  .cta-modal.breadcrumb-navigation {
    pointer-events: none;
    opacity: 0;
  }

  .cta-modal:not(.breadcrumb-navigation) {
    opacity: 1;
  }

  .tracciamento-modal.breadcrumb-navigation {
    pointer-events: none;
    opacity: 0;
  }
}

/* High contrast mode support */

@media (prefers-contrast: high) {
  .breadcrumb-link {
    --tw-text-opacity: 1;
    color: rgb(6 9 16 / var(--tw-text-opacity, 1));
  }

  .breadcrumb-text {
    --tw-text-opacity: 1;
    color: rgb(45 41 38 / var(--tw-text-opacity, 1));
  }

  .breadcrumb-separator {
    --tw-text-opacity: 1;
    color: rgb(19 26 48 / var(--tw-text-opacity, 1));
  }
}

/* ==========================================================================
   SLIDESHOW AUTOMATICO COMPONENTS
   ========================================================================== */

.slider-scopri-anche-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 40px;
  padding-bottom: 40px;
  padding-left: 24px;
  padding-right: 24px;
}

@media (min-width: 1024px) {
  .slider-scopri-anche-container {
    padding-top: 40px;
    padding-bottom: 40px;
    padding-left: 24px;
    padding-right: 24px;
  }
}

.slider-scopri-anche-container {
  width: 100%;
  max-width: 1440px;
  margin: auto;
  gap: 80px;
}

.slider-scopri-anche-titolo {
  text-align: center;
  font-family: "Fira Sans", sans-serif;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 700;
  line-height: 43px;
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
}

.slider-scopri-anche-prodotti {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) {
  .slider-scopri-anche-prodotti {
    flex-direction: row;
  }
}

@media (min-width: 1024px) {
  .slider-scopri-anche-prodotti {
    justify-content: flex-start;
  }
}

.slider-scopri-anche-prodotti {
  gap: 40px;
  overflow: hidden;
  /*@apply overflow-x-auto overflow-y-hidden;
  @apply scroll-smooth;
  */
  /* Hide scrollbar for Webkit browsers */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE and Edge */
  @media (min-width: 768px) {
    &.nr-prodotti-1 {
      justify-content: center;
    }
  }
  @media (min-width: 768px) {
    &.nr-prodotti-2 {
      justify-content: center;
    }
  }
  @media (min-width: 1024px) {
    &.nr-prodotti-3 {
      justify-content: center;
    }
  }
}

.slideauto_slide_item.slider-scopri-anche-prodotti::-webkit-scrollbar {
  opacity: 0;
  display: none;
}

.slideauto-pause-bars.slider-scopri-anche-prodotti::-webkit-scrollbar::before,
  .slideauto-pause-bars.slider-scopri-anche-prodotti::-webkit-scrollbar::after,
  .slideauto-play-triangle.slider-scopri-anche-prodotti::-webkit-scrollbar::before {
  display: none;
}

.slider-scopri-anche-prodotti::-webkit-scrollbar {
  display: none;
}

.hero-pause-bars.slider-scopri-anche-prodotti::-webkit-scrollbar::before,
.hero-pause-bars.slider-scopri-anche-prodotti::-webkit-scrollbar::after,
.hero-play-triangle.slider-scopri-anche-prodotti::-webkit-scrollbar::before {
  display: none;
}

.carpro-pause-bars.slider-scopri-anche-prodotti::-webkit-scrollbar::before,
.carpro-pause-bars.slider-scopri-anche-prodotti::-webkit-scrollbar::after,
.carpro-play-triangle.slider-scopri-anche-prodotti::-webkit-scrollbar::before {
  display: none;
}

.sliart-pause-bars.slider-scopri-anche-prodotti::-webkit-scrollbar::before,
.sliart-pause-bars.slider-scopri-anche-prodotti::-webkit-scrollbar::after,
.sliart-play-triangle.slider-scopri-anche-prodotti::-webkit-scrollbar::before {
  display: none;
}

.cta-modal.slider-scopri-anche-prodotti::-webkit-scrollbar {
  pointer-events: none;
  opacity: 0;
}

.cta-modal:not(.slider-scopri-anche-prodotti)::-webkit-scrollbar {
  opacity: 1;
}

.tracciamento-modal.slider-scopri-anche-prodotti::-webkit-scrollbar {
  pointer-events: none;
  opacity: 0;
}

.slider-scopri-anche-cards-wrapper {
  display: flex;
  gap: 40px;
}

@media not all and (min-width: 768px) {
  .slider-scopri-anche-cards-wrapper {
    width: 100%;
  }
}

.slider-scopri-anche-prd-card {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.5rem;
  border-radius: 24px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 246 204 / var(--tw-bg-opacity, 1));
  flex-shrink: 0;
}

@media not all and (min-width: 768px) {
  .slider-scopri-anche-prd-card {
    width: 100%;
  }
}

@media (min-width: 768px) {
  .slider-scopri-anche-prd-card {
    width: 380px;
  }
}

.slider-scopri-anche-prd-card-titolo {
  text-align: center;
  font-family: "Fira Sans", sans-serif;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(25 34 64 / var(--tw-text-opacity, 1));
  font-size: 24px;
  line-height: 29px;
}

/* Override per mantenere dimensioni native delle immagini */

.slider-scopri-anche-prd-card-img {
  margin: auto;
  display: flex;
  height: 200px;
  width: 300px;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 1.5rem;
  .slider-card-image {
    height: auto;
  }
  .slider-card-image {
    width: auto;
  }
  .slider-card-image {
    -o-object-fit: cover;
       object-fit: cover;
  }
  .slider-card-image {
    /* Rimuove w-full, mantiene dimensioni native */
    /* Centra l'immagine nel container se più piccola */
  }
  .slider-card-image {
    margin-left: auto;
    margin-right: auto;
  }
  .slider-card-image {
    display: block;
  }
}

/* ==========================================================================
     DESKTOP ENHANCEMENTS - Mouse Drag & Focus States
     ========================================================================== */

/* Focus styling for accessibility */

.slider-scopri-anche-container:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.slider-scopri-anche-container:focus-visible {
  outline-width: 2px;
  outline-color: #1E2B50;
  outline-offset: 2px;
}

/* Card focus states for keyboard navigation */

.slider-scopri-anche-prd-card {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  position: relative;
}

.slider-scopri-anche-prd-card:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.slider-scopri-anche-prd-card:focus-visible,
  .slider-scopri-anche-prd-card.slider-card-focused {
  outline-width: 2px;
  outline-color: #1E2B50;
  outline-offset: 4px;
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transform: translateY(-2px);
}

/* Hover effects for desktop */

@media (hover: hover) {
  .slider-scopri-anche-prd-card:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(255 237 152 / var(--tw-bg-opacity, 1));
    /*@apply shadow-md;
      transform: translateY(-1px);
       */
  }
}

/* High contrast mode support */

@media (prefers-contrast: high) {
  .slider-scopri-anche-prd-card.slider-card-focused {
    outline-width: 4px;
    outline-color: ButtonText;
  }
}

/* Reduced motion support */

@media (prefers-reduced-motion: reduce) {
  .slider-scopri-anche-prd-card {
    transition: none;
  }

  .slider-scopri-anche-prodotti {
    scroll-behavior: auto;
  }
}

/* Screen reader only announcements */

.sr-only-announcement {
  border-width: 0;
  padding: 0;
  margin: -1px;
  padding: 0px;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.slider-scopri-anche-container {
  .nal-controls {
    margin-top: -40px;
  }
  /* ==========================================================================
       NAVIGAZIONE SLIDER - Indicatori Tab e Pulsanti Frecce
       ========================================================================== */
  /* Indicatori tab */
  .nal-slide-indicator {
    --tw-bg-opacity: 1;
    background-color: rgb(164 167 174 / var(--tw-bg-opacity, 1));
  }
  .nal-slide-indicator {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
  .nal-slide-indicator {
    transition-duration: 300ms;
  }
  .nal-slide-indicator.active {
    --tw-bg-opacity: 1;
    background-color: rgb(30 43 80 / var(--tw-bg-opacity, 1));
  }
  .nal-slide-indicator:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(30 43 80 / var(--tw-bg-opacity, 1));
  }
  /* Pulsanti frecce - stato normale */
  .nal-arrow-left::before {
    --tw-border-opacity: 1;
    border-right-color: rgb(253 253 253 / var(--tw-border-opacity, 1));
  }
  .nal-arrow-right::before {
    --tw-border-opacity: 1;
    border-left-color: rgb(253 253 253 / var(--tw-border-opacity, 1));
  }
  .nal-control-prev,
    .nal-control-next {
    --tw-border-opacity: 1;
    border-left-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
  }
  .nal-control-prev,
    .nal-control-next {
    --tw-bg-opacity: 1;
    background-color: rgb(30 43 80 / var(--tw-bg-opacity, 1));
  }
  .nal-control-prev,
    .nal-control-next {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
  .nal-control-prev,
    .nal-control-next {
    transition-duration: 300ms;
  }
  .nal-control-left::before,
    .nal-control-right::before {
    border-right-color: white;
  }
  /* Pulsanti frecce - stato hover */
  .nal-control-prev:hover,
    .nal-control-next:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(76 85 115 / var(--tw-bg-opacity, 1));
  }
}

.schede_oriz_container {
  padding-top: 40px;
  padding-bottom: 40px;
  padding-left: 24px;
  padding-right: 24px;
}

@media (min-width: 1024px) {
  .schede_oriz_container {
    padding-top: 40px;
    padding-bottom: 40px;
    padding-left: 24px;
    padding-right: 24px;
  }
}

.schede_oriz_container {
  max-width: 1440px;
  gap: 48px;
  margin: auto;
  display: flex;
  width: 100%;
  flex-direction: column;
}

.schede_oriz_container_titolo {
  font-family: "Fira Sans", sans-serif;
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 700;
  line-height: 43px;
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
}

.schede_oriz_container_cards {
  display: flex;
  flex-direction: column;
  gap: 48px;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .schede_oriz_container_cards {
    flex-direction: row;
  }
}

.schede_oriz_container_cards_wrapper {
  display: flex;
  gap: 24px;
}

@media (min-width: 1024px) {
  .schede_oriz_container_cards_wrapper {
    gap: 48px;
  }
}

.schede_oriz_container_cards_wrapper {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  flex-wrap: nowrap;
  transition-property: easy;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

@media not all and (min-width: 1024px) {
  .schede_oriz_container_cards_wrapper {
    width: 100%;
  }
}

@media (min-width: 1024px) {
  .schede_oriz_container_cards_wrapper {
    flex-wrap: wrap;
  }
}

@media not all and (min-width: 1024px) {
  .schede_oriz_container_cards_wrapper .schede_oriz_container_card {
    height: 395px;
    width: 300px;
    flex-shrink: 0;
  }
}

.schede_oriz_container_card {
  width: 100%;
  border-radius: 1rem;
  --tw-bg-opacity: 1;
  background-color: rgb(30 43 80 / var(--tw-bg-opacity, 1));
}

@media (min-width: 1024px) {
  .schede_oriz_container_card {
    width: 616px;
  }
}

.schede_oriz_container_card {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .schede_oriz_container_card {
    flex-direction: row;
  }
}

.schede_oriz_container_card {
  position: relative;
  height: auto;
}

@media (min-width: 1024px) {
  .schede_oriz_container_card {
    height: 261px;
  }
}

.schede_oriz_container_image {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
}

@media (min-width: 1024px) {
  .schede_oriz_container_image {
    width: 261px;
    min-width: 261px;
  }
}

.schede_oriz_container_image {
  padding-top: 20px;
  padding-left: 14px;
  padding-right: 26px;
  padding-bottom: 20px;
  background-image: url('../images/card-rectangle-mobile-yellow.svg');
}

@media (min-width: 1024px) {
  .schede_oriz_container_image {
    background-image: url('../images/card-rectangle.svg');
  }
}

.schede_oriz_container_image {
  .img {
    img {
      height: 221px;
    }
    img {
      width: 221px;
    }
    img {
      -o-object-fit: contain;
         object-fit: contain;
    }
  }
}

.schede_oriz_container_testo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
  padding-right: 1.5rem;
  padding-left: 1.5rem;
  padding-top: 0px;
  padding-bottom: 1.5rem;
}

@media (min-width: 1024px) {
  .schede_oriz_container_testo {
    padding-left: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-right: 2rem;
  }
}

.schede_oriz_container_testo_titolo {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  line-height: 32px;
  --tw-text-opacity: 1;
  color: rgb(253 253 253 / var(--tw-text-opacity, 1));
  font-size: 24px;
}

.schede_oriz_container_testo_testo {
  font-family: Roboto, sans-serif;
  line-height: 1rem;
  font-weight: 400;
  line-height: 19px;
  --tw-text-opacity: 1;
  color: rgb(253 253 253 / var(--tw-text-opacity, 1));
  font-size: 1rem;
}

.scheda_oriz_container_icona {
  align-items: center;
  right: 17px;
  top: 16px;
  border-width: 1px;
  position: absolute;
  display: flex;
  height: 2rem;
  width: 2rem;
  justify-content: center;
  gap: 10px;
  border-radius: 6px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(250 250 250 / var(--tw-border-opacity, 1));
  padding: 0.25rem;
  --tw-text-opacity: 1;
  color: rgb(250 250 250 / var(--tw-text-opacity, 1));
}

.scheda_oriz_container_icona:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
}

.scheda_oriz_container_icona svg{
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.scheda_oriz_container_icona svg:hover {
  fill: #1E2B50;
  cursor: pointer;
  filter: brightness(0) saturate(100%) invert(18%) sepia(33%) saturate(904%) hue-rotate(184deg) brightness(89%) contrast(100%);
}

/* Modale schede orizzontali - Sistema completo */

.slideauto_slide_item.schede_oriz_modale {
  opacity: 0;
  display: none;
}

.slideauto-pause-bars.schede_oriz_modale::before,
  .slideauto-pause-bars.schede_oriz_modale::after,
  .slideauto-play-triangle.schede_oriz_modale::before {
  display: none;
}

.schede_oriz_modale {
  position: fixed;
  inset: 0px;
  z-index: 50;
  display: none;
}

.hero-pause-bars.schede_oriz_modale::before,
.hero-pause-bars.schede_oriz_modale::after,
.hero-play-triangle.schede_oriz_modale::before {
  display: none;
}

.carpro-pause-bars.schede_oriz_modale::before,
.carpro-pause-bars.schede_oriz_modale::after,
.carpro-play-triangle.schede_oriz_modale::before {
  display: none;
}

.sliart-pause-bars.schede_oriz_modale::before,
.sliart-pause-bars.schede_oriz_modale::after,
.sliart-play-triangle.schede_oriz_modale::before {
  display: none;
}

.cta-modal.schede_oriz_modale {
  pointer-events: none;
  opacity: 0;
}

.cta-modal:not(.schede_oriz_modale) {
  opacity: 1;
}

.tracciamento-modal.schede_oriz_modale {
  pointer-events: none;
  opacity: 0;
}

.schede_oriz_modale {
  opacity: 0;
  transition: opacity 300ms ease-in-out;
}

.schede_oriz_modale.active {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
}

.schede_oriz_modale_backdrop {
  position: absolute;
  inset: 0px;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
  --tw-bg-opacity: 0.5;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

.schede_oriz_modale_content {
  position: relative;
  border-radius: 1rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  max-height: 90vh;
  width: 100%;
  max-width: 100%;
  overflow-y: auto;
}

@media (min-width: 1024px) {
  .schede_oriz_modale_content {
    max-width: 800px;
  }
}

.schede_oriz_modale_content {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  animation: fade-in-scale 300ms ease-out;
}

@media (min-width: 1024px) {
  .schede_oriz_modale_content {
    margin-left: 1rem;
    margin-right: 1rem;
  }
}

.schede_oriz_modale_content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (min-width: 1024px) {
  .schede_oriz_modale_content {
    gap: 40px;
  }
}

.schede_oriz_modale_content {
  padding: 24px;
}

@media (min-width: 768px) {
  .schede_oriz_modale_content {
    padding: 40px;
  }
}

.schede_oriz_modale_content {
  transform: scale(0.95);
  transition: transform 300ms ease-out;
}

.schede_oriz_modale.active .schede_oriz_modale_content {
  transform: scale(1);
}

.schede_oriz_modale_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.schede_oriz_modale_titolo {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
}

@media (min-width: 1024px) {
  .schede_oriz_modale_titolo {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}

.schede_oriz_modale_titolo {
  font-family: "Fira Sans", sans-serif;
  line-height: 1.25;
}

.schede_oriz_modale_pattern {
  height: 294px;
  width: 100%;
  padding-top: 17px;
  padding-bottom: 17px;
}

@media (min-width: 1024px) {
  .schede_oriz_modale_pattern {
    height: 405px;
  }
}

.schede_oriz_modale_pattern {
  background-image: url('../images/pattern-yellow.png');
  background-position: center;
  background-repeat: repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  aspect-ratio: 16/9;
  border-radius: 2rem;
}

.schede_oriz_modale_pattern img {
  max-height: 100%;
  max-width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.schede_oriz_modale_campo_titolo {
  font-family: "Fira Sans", sans-serif;
  font-size: 30px;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
  line-height: 1.5;
}

.schede_oriz_modale_campo_sottotitolo {
  font-family: Roboto, sans-serif;
  font-size: 18px;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
  line-height: 1.5;
}

.schede_oriz_modale_campo_sottotitolo p {
  margin-top: 24px;
}

.schede_oriz_modale_campo_sottotitolo p:first-child {
  margin-top: 0px;
}

.schede_oriz_modale_campo_sottotitolo h1,
.schede_oriz_modale_campo_sottotitolo h2,
.schede_oriz_modale_campo_sottotitolo h3,
.schede_oriz_modale_campo_sottotitolo h4,
.schede_oriz_modale_campo_sottotitolo h5,
.schede_oriz_modale_campo_sottotitolo h6 {
  margin-top: 40px;
  margin-bottom: 24px;
}

.schede_oriz_modale_box_grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 16px;
}

@media (min-width: 1024px) {
  .schede_oriz_modale_box_grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.schede_oriz_modale_box_item {
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  border-radius: 24px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 246 204 / var(--tw-bg-opacity, 1));
}

.schede_oriz_modale_box_titolo {
  color: #101323;
  font-family: Roboto, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
}

.schede_oriz_modale_box_testo {
  color: #101323;
  font-family: Roboto, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
}

.schede_oriz_modale_chiusura {
  font-family: Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
  line-height: 1.625;
}

.schede_oriz_modale_chiusura p {
  margin-top: 24px;
}

.schede_oriz_modale_chiusura p:first-child {
  margin-top: 0px;
}

.schede_oriz_modale_chiusura h1,
.schede_oriz_modale_chiusura h2,
.schede_oriz_modale_chiusura h3,
.schede_oriz_modale_chiusura h4,
.schede_oriz_modale_chiusura h5,
.schede_oriz_modale_chiusura h6 {
  margin-top: 40px;
  margin-bottom: 24px;
}

.schede_oriz_modale_chiusura ul {
  margin-top: 24px;
  list-style-type: disc;
  padding-left: 1.5rem;
}

.schede_oriz_modale_chiusura ul:first-child {
  margin-top: 0px;
}

.schede_oriz_modale_chiusura ol {
  margin-top: 24px;
  list-style-type: decimal;
  padding-left: 1.5rem;
}

.schede_oriz_modale_chiusura ol:first-child {
  margin-top: 0px;
}

.schede_oriz_modale_chiusura li {
  margin-bottom: 0.5rem;
}

.schede_oriz_modale_close {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  padding: 5px;
  gap: 12.5px;
  border-radius: 7.5px;
  border-width: 1.25px;
  --tw-border-opacity: 1;
  border-color: rgb(30 43 80 / var(--tw-border-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.schede_oriz_modale_close:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1));
}

.schede_oriz_modale_close:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(30 43 80 / var(--tw-ring-opacity, 1));
}

.schede_oriz_modale_close svg {
  height: 30px;
  width: 30px;
  flex-shrink: 0;
}

.schede_oriz_modale_close:hover svg {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.schede_oriz_modale_body {
  overflow-y: auto;
  padding-left: 24px;
  padding-right: 24px;
  padding-bottom: 24px;
  padding-top: 0px;
}

@media (min-width: 1024px) {
  .schede_oriz_modale_body {
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 40px;
  }
}

.schede_oriz_modale_body {
  font-family: Roboto, sans-serif;
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
}

.schede_oriz_modale_body p {
  margin-bottom: 1rem;
  line-height: 1.625;
}

.schede_oriz_modale_body span {
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(255 209 0 / var(--tw-text-opacity, 1));
}

/* Animazioni */

@keyframes fade-in-scale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-fade-in-scale {
  animation: fade-in-scale 300ms ease-out;
}

/* Focus trap per accessibilità */

.schede_oriz_modale.active {
  scroll-behavior: smooth;
}

.schede_oriz_modale_cta {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 60px;
  /* Altezza minima per contenitore anche quando elementi sono nascosti */
}

.schede_oriz_modale_cta_titolo {
  font-family: Roboto, sans-serif;
  font-size: 18px;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
  text-align: left;
  line-height: 1.5;
}

.schede_oriz_modale_cta_sottotitolo {
  font-family: Roboto, sans-serif;
  font-size: 16px;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
  text-align: left;
  line-height: 1.5;
}

.schede_oriz_modale_cta_bottone_wrapper {
  width: 100%;
}

.schede_oriz_modale_cta_bottone {
  /* Specifiche CSS dal design */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  display: inline-flex;
  padding: 14px 40px;
  /* Background e bordi */
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(30 43 80 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  border-radius: 8px;
  /* Stati hover e focus per accessibilità */
}

.schede_oriz_modale_cta_bottone:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(30 43 80 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.schede_oriz_modale_cta_bottone:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(30 43 80 / var(--tw-ring-opacity, 1));
  --tw-ring-offset-width: 2px;
}

.schede_oriz_modale_cta_bottone {
  transition-property: all;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  /* Cursor pointer per UX */
  cursor: pointer;
  /* Rimuovi underline default dei link */
  text-decoration-line: none;
}

.schede_oriz_modale_cta_bottone:hover {
  text-decoration: none;
}

.schede_oriz_modale_cta_bottone_testo {
  /* Specifiche testo CTA dal design */
  text-align: center;
  font-family: Roboto, sans-serif;
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
  /* Ereditare colore dal parent in hover */
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.schede_oriz_modale_cta_bottone:hover .schede_oriz_modale_cta_bottone_testo {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

/* Classe per screen reader only */

.sr-only {
  position: absolute;
  margin: -1px;
  height: 1px;
  width: 1px;
  overflow: hidden;
  padding: 0px;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Stati focus per keyboard navigation */

.schede_oriz_modale_cta_bottone:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(30 43 80 / var(--tw-ring-opacity, 1));
  --tw-ring-offset-width: 2px;
  outline: 2px solid transparent;
  outline-offset: 2px;
}

/* Responsive mobile adjustments */

@media (max-width: 640px) {
  .schede_oriz_modale_cta_bottone {
    padding: 12px 24px;
    font-size: 14px;
  }

  .schede_oriz_modale_cta_bottone_testo {
    font-size: 14px;
  }
}

/* ==========================================================================
   NAVIGAZIONE SLIDER - Indicatori Tab e Pulsanti Frecce
   ========================================================================== */

.schede_oriz_container {
  /* Indicatori tab */
  .nal-slide-indicator {
    --tw-bg-opacity: 1;
    background-color: rgb(164 167 174 / var(--tw-bg-opacity, 1));
  }
  .nal-slide-indicator {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
  .nal-slide-indicator {
    transition-duration: 300ms;
  }
  .nal-slide-indicator.active {
    --tw-bg-opacity: 1;
    background-color: rgb(30 43 80 / var(--tw-bg-opacity, 1));
  }
  .nal-slide-indicator:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(30 43 80 / var(--tw-bg-opacity, 1));
  }
  /* Pulsanti frecce - stato normale */
  .nal-control-prev,
  .nal-control-next {
    --tw-border-opacity: 1;
    border-left-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
  }
  .nal-control-prev,
  .nal-control-next {
    --tw-bg-opacity: 1;
    background-color: rgb(30 43 80 / var(--tw-bg-opacity, 1));
  }
  .nal-control-prev,
  .nal-control-next {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
  .nal-control-prev,
  .nal-control-next {
    transition-duration: 300ms;
  }
  /* Pulsanti frecce - stato hover */
  .nal-control-prev:hover,
  .nal-control-next:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(165 170 185 / var(--tw-bg-opacity, 1));
  }
  .nal-arrow-left::before {
    --tw-border-opacity: 1;
    border-right-color: rgb(253 253 253 / var(--tw-border-opacity, 1));
  }
  .nal-arrow-right::before {
    --tw-border-opacity: 1;
    border-left-color: rgb(253 253 253 / var(--tw-border-opacity, 1));
  }
  .nal-controls {
    margin-top: -24px;
  }
  .nal-controls {
    display: flex !important;
  }
  @media (min-width: 1024px) {
    .nal-controls.slideauto_slide_item {
      opacity: 0;
    }
  }
  @media (min-width: 1024px) {
    .nal-controls.slideauto_slide_item {
      display: none !important;
    }
  }
  @media (min-width: 1024px) {
    .nal-controls.slideauto-pause-bars::before,.nal-controls
  .slideauto-pause-bars::after,.nal-controls
  .slideauto-play-triangle::before {
      display: none !important;
    }
  }
  @media (min-width: 1024px) {
    .nal-controls.slideauto-pause-bars::before,.nal-controls
  .slideauto-pause-bars::after,.nal-controls
  .slideauto-play-triangle::before {
      display: none !important;
    }
  }
  @media (min-width: 1024px) {
    .nal-controls.slideauto-pause-bars::before,.nal-controls
  .slideauto-pause-bars::after,.nal-controls
  .slideauto-play-triangle::before {
      display: none !important;
    }
  }
  @media (min-width: 1024px) {
    .nal-controls {
      display: none !important;
    }
  }
}

.schede_vert_container {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding-top: 40px;
  padding-bottom: 40px;
  padding-left: 24px;
  padding-right: 24px;
}

@media (min-width: 1024px) {
  .schede_vert_container {
    padding-top: 40px;
    padding-bottom: 40px;
    padding-left: 24px;
    padding-right: 24px;
  }
}

.schede_vert_container {
  width: 100%;
  max-width: 1440px;
  margin: auto;
}

@media (min-width: 768px) {
  .schede_vert_container {
    padding-left: 80px;
    padding-right: 80px;
  }
}

.schede_vert_container {
  padding-bottom: 0;
  /* NO overflow, padding-bottom 0 - spostato su wrapper */
}

.schede_vert_titolo {
  display: flex;
  justify-content: center;
  font-family: "Fira Sans", sans-serif;
  font-size: 1.5rem;
  line-height: 2rem;
  font-size: 36px;
  font-weight: 700;
  line-height: 43px;
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
  align-self: stretch;
}

.schede_vert_scroll-wrapper {
  width: 100%;
  overflow-x: auto;
}

@media (min-width: 1024px) {
  .schede_vert_scroll-wrapper {
    overflow: hidden;
  }
}

.schede_vert_scroll-wrapper {
  padding-bottom: 40px;
  /* Wrapper scroll con padding-bottom: scrollbar staccata */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.schede_vert_cards {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.schede_vert_card {
  width: 300px;
  height: 400px;
  flex-shrink: 0;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.schede_vert_card_even {
  background-image: url("../images/verticale_giallo.png");
  img {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px
  }
}

.schede_vert_card_odd {
  background-image: url("../images/verticale_blu.png");
  img {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px
  }
}

.schede_vert_card_titolo {
  height: 150px;
  width: 100%;
  text-align: center;
  font-size: 24px;
  font-weight: 500;
  line-height: 29px;
  display: flex;
  align-content: center;
  flex-wrap: wrap;
}

.schede_vert_card_img {
  height: 250px;
  width: 100%;
}

.schede_vert_card_img img {
  height: 100%;
}

.schede_vert_card_even .schede_vert_card_titolo {
  order: 1;
  padding-left: 29px;
  padding-right: 29px;
  padding-top: 44px;
  font-family: "Fira Sans", sans-serif;
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
  align-content: start;
}

.schede_vert_card_odd .schede_vert_card_titolo {
  order: 2;
  padding-left: 29px;
  padding-right: 29px;
  padding-bottom: 32px;
  font-family: "Fira Sans", sans-serif;
  --tw-text-opacity: 1;
  color: rgb(253 253 253 / var(--tw-text-opacity, 1));
  align-content: end;
}

.schede_vert_card_even .schede_vert_card_img {
  order: 2;
}

.schede_vert_card_odd .schede_vert_card_img {
  order: 1;
  position: relative;
  overflow: hidden;
  clip-path: ellipse(100% 100% at 50% 0%);
}

.schede_vert_card_even .schede_vert_card_img {
  position: relative;
  overflow: hidden;
  clip-path: ellipse(100% 100% at 50% 100%);
}

.schede_vert_card_img img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  /* Rimuovi clip-path da qui */
}

.page-section--schede_verticali_layout {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 48px;
  padding-top: 24px;
  padding-bottom: 24px;
}

@media (min-width: 768px) {
  .page-section--schede_verticali_layout {
    padding-bottom: 40px;
  }
}

@media (min-width: 1024px) {
  .page-section--schede_verticali_layout {
    padding-top: 40px;
  }
}

.page-section--schede_verticali_layout:has(.section-yellow) {
  --tw-bg-opacity: 1;
  background-color: rgb(255 250 229 / var(--tw-bg-opacity, 1));
}

.schede_vert_cards {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  .schede_vert_cards {
    justify-content: space-between;
  }
}

.schede_vert_cards {
  flex-wrap: nowrap;
  /* gap-6, justify-start mobile per scroll completo, justify-between desktop */
}

.percorso-contenitore {
  padding-top: 40px;
  padding-bottom: 40px;
  padding-left: 24px;
  padding-right: 24px;
}

@media (min-width: 1024px) {
  .percorso-contenitore {
    padding-top: 40px;
    padding-bottom: 40px;
    padding-left: 24px;
    padding-right: 24px;
  }
}

.percorso-contenitore {
  width: 100%;
  max-width: 1440px;
  margin: auto;
}

.percorso-titolo {
  padding-bottom: 24px;
  text-align: center;
  font-family: "Fira Sans", sans-serif;
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 700;
  line-height: 43px;
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
  align-self: stretch;
}

.percorso-sottotitolo {
  padding-bottom: 40px;
  text-align: center;
  font-family: Roboto, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 21px;
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
}

.percorso-immagine {
  width: 100%;
  padding-bottom: 120px;
}

.percorso-immagine img {
  border-radius: 16px;
}

.percorso-passi {
  margin: auto;
  width: 100%;
}

@media (min-width: 1024px) {
  .percorso-passi {
    width: 600px;
  }
}

.percorso-passo-odd {
  text-align: end;
}

.percorso-passo-even {
  text-align: start;
}

.percorso-passo-even .marker-pieno,
.percorso-passo-even .marker-pieno-finale {
  order: 1;
}

.percorso-passo-even .passo-contenitore {
  order: 2;
  width: 100%;
}

.percorso-passo-odd .marker-pieno,
.percorso-passo-odd .marker-pieno-finale{
  order: 2;
}

.percorso-passo-odd .passo-contenitore {
  order: 1;
  width:100%;
  text-align: end;
}

.percorso-passo {
  display: flex;
  flex-direction: row;
  gap: 24px;
}

.percorso-passo-odd .passo-luogo {
  justify-content: flex-end;
}

.percorso-passo-even .passo-luogo {
  justify-content: flex-start;
}

.passo-luogo {
  display: flex;
  flex-direction: row;
  gap: 8px;
}

.passo-luogo svg {
  width: 24px;
  height: 24px;
  aspect-ratio: 1/1;
}

.luogo-titolo {
  font-family: Roboto, sans-serif;
  font-size: 18px;
  line-height: 21px;
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
  text-decoration-line: underline;
  text-decoration-style: solid;
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

.marker-pieno {
  --tw-bg-opacity: 1;
  background-color: rgb(30 43 80 / var(--tw-bg-opacity, 1));
  display: flex;
  padding: 15.429px;
  flex-direction: column;
  align-items: flex-start;
  gap: 6.429px;
  max-width: 70px;
  max-height: 70px;
  border-radius: 578.571px;
}

.marker-pieno-finale {
  display: flex;
  flex-direction: row;
  --tw-bg-opacity: 1;
  background-color: rgb(255 209 0 / var(--tw-bg-opacity, 1));
  justify-content: center;
  padding: 15.429px;
  gap: 6.429px;
  width:80px;
  max-width: 80px;
  max-height: 70px;
  border-radius: 578.571px;
}

.passo-titolo {
  font-family: Roboto, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 21px;
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
}

.passo-testo {
  font-family: Roboto, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 21px;
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
}

.vettore-odd {
  margin-left: 24px;
  margin-right: 24px;
  margin-top: -2rem;
}

@media (min-width: 1024px) {
  .vettore-odd {
    margin-right: 2rem;
    margin-left: 33px;
    margin-top: -1rem;
  }
}

.vettore-even {
  margin-left: 24px;
  margin-right: 24px;
  margin-top: -2rem;
}

@media (min-width: 1024px) {
  .vettore-even {
    margin-right: 2rem;
    margin-left: 33px;
    margin-top: -1rem;
  }
}

.nal-container {
  position: relative;
  gap: 40px;
  padding-top: 40px;
  padding-bottom: 40px;
  padding-left: 24px;
  padding-right: 24px;
}

@media (min-width: 1024px) {
  .nal-container {
    padding-top: 40px;
    padding-bottom: 40px;
    padding-left: 24px;
    padding-right: 24px;
  }
}

.nal-container {
  margin: auto;
  max-width: 1440px;
  display: flex;
  flex-direction: column;
  .schede {
    display: flex;
  }
  .schede {
    gap: 40px;
  }
  .schede {
    overflow-x: hidden;
  }
  .schede {
    scroll-behavior: smooth;
  }
  .schede {
    width: 100%;
  }
  .schede {
    /* Usa tutta la larghezza disponibile del container */
    .scheda {
      width: 300px;
    }
    .scheda {
      max-width: 300px;
    }
    .scheda {
      gap: 24px;
    }
    .scheda {
      display: flex;
    }
    .scheda {
      flex-direction: column;
    }
    .scheda {
      flex-shrink: 0;
    }
    .scheda {
      /* Impedisce ridimensionamento schede */
      .scheda-immagine {
        display: flex;
        height: 300px;
        justify-content: flex-end;
        align-items: flex-start;
        gap: 10px;
        align-self: stretch;
        img {
          width: 300px;
          height: 300px;
          border-radius: 16px;
        }
      }
      .scheda-titolo {
        padding-bottom: 1rem;
      }
      .scheda-titolo {
        font-family: Roboto, sans-serif;
      }
      .scheda-titolo {
        font-size: 18px;
      }
      .scheda-titolo {
        font-weight: 700;
      }
      .scheda-titolo {
        line-height: 21px;
      }
      .scheda-titolo {
        --tw-text-opacity: 1;
        color: rgb(30 43 80 / var(--tw-text-opacity, 1));
      }
      .scheda-intro {
        font-family: Roboto, sans-serif;
      }
      .scheda-intro {
        font-size: 1rem;
        line-height: 1.5rem;
      }
      .scheda-intro {
        font-weight: 400;
      }
      .scheda-intro {
        line-height: 19px;
      }
      .scheda-intro {
        --tw-text-opacity: 1;
        color: rgb(30 43 80 / var(--tw-text-opacity, 1));
      }
      .scheda-cta {
        padding-left: 40px;
        padding-right: 40px;
      }
      .scheda-cta {
        padding-top: 14px;
        padding-bottom: 14px;
      }
      .scheda-cta {
        --tw-text-opacity: 1;
        color: rgb(30 43 80 / var(--tw-text-opacity, 1));
      }
      .scheda-cta:hover {
        --tw-bg-opacity: 1;
        background-color: rgb(30 43 80 / var(--tw-bg-opacity, 1));
      }
      .scheda-cta:hover {
        --tw-text-opacity: 1;
        color: rgb(250 250 250 / var(--tw-text-opacity, 1));
      }
      .scheda-cta {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        align-self: stretch;
        border-radius: 8px;
        border: 1px solid #1E2B50;
        .cta-titolo {
          font-family: Roboto, sans-serif;
        }
        .cta-titolo {
          font-size: 16px;
        }
        .cta-titolo {
          font-weight: 700;
        }
        .cta-titolo {
          line-height: 19px;
        }
      }
    }
  }
}

.nal-titolo {
  color: #1E2B50;
  font-family: Fira Sans;
  font-size: 36px;
  line-height: 43px;
  font-weight: 700;
  font-style: normal;
  width: 800px;
}

@media (min-width: 390px) {
  .nal-titolo {
    width: 100%;
  }
}

/* Controlli slider - posizionamento nel flusso normale */

.nal-controls {
  z-index: 20;
  margin-top: 40px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.nal-controls > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(1rem * var(--tw-space-x-reverse));
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}

@media not all and (min-width: 768px) {
  .nal-controls > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
  }
}

/* Pulsanti navigazione seguendo pattern hero */

.nal-control-prev,
.nal-control-next {
  height: 2.5rem;
  width: 2.5rem;
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.nal-control-prev:focus-visible,
.nal-control-next:focus-visible {
  outline: 2px solid #1E2B50;
  outline-offset: 2px;
}

.nal-control-prev:hover,
.nal-control-next:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(30 43 80 / var(--tw-bg-opacity, 1));
}

.nal-control-prev,
.nal-control-next {
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.nal-control-prev.disabled,
.nal-control-next.disabled {
  cursor: default;
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

/* Frecce con pseudo-elementi seguendo pattern hero */

.nal-arrow-left {
  position: relative;
  background-color: transparent;
}

.nal-arrow-left::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  --tw-translate-x: -50%;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  height: 0px;
  width: 0px;
  border-right-width: 8px;
  --tw-border-opacity: 1;
  border-right-color: rgb(23 37 84 / var(--tw-border-opacity, 1));
  border-top-width: 6px;
  border-bottom-width: 6px;
  border-top-color: transparent;
  border-bottom-color: transparent;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.nal-control-prev:hover .nal-arrow-left::before {
  --tw-border-opacity: 1;
  border-right-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}

.nal-arrow-right {
  position: relative;
  background-color: transparent;
}

.nal-arrow-right::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  --tw-translate-x: -20%;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  height: 0px;
  width: 0px;
  border-left-width: 8px;
  --tw-border-opacity: 1;
  border-left-color: rgb(23 37 84 / var(--tw-border-opacity, 1));
  border-top-width: 6px;
  border-bottom-width: 6px;
  border-top-color: transparent;
  border-bottom-color: transparent;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.nal-control-next:hover .nal-arrow-right::before {
  --tw-border-opacity: 1;
  border-left-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}

/* Nascondi frecce quando controlli disabilitati */

.nal-control-prev.disabled .nal-arrow-left::before,
.nal-control-next.disabled .nal-arrow-right::before {
  border-left-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
  --tw-border-opacity: 1;
  border-right-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
}

/* Indicatori slide seguendo pattern hero */

.nal-slide-indicator {
  position: relative;
  height: 0.5rem;
  width: 2.25rem;
  overflow: hidden;
  border-radius: 72px;
}

@media not all and (min-width: 768px) {
  .nal-slide-indicator {
    height: 1.5rem;
  }
}

.nal-slide-indicator {
  outline: 2px solid transparent;
  outline-offset: 2px;
  /* Stato normale (non attivo) */
  --tw-bg-opacity: 1;
  background-color: rgb(164 167 174 / var(--tw-bg-opacity, 1));
}

.nal-slide-indicator.active {
  /* Stato attivo */
  --tw-bg-opacity: 1;
  background-color: rgb(253 253 253 / var(--tw-bg-opacity, 1));
}

.nal-slide-indicator::before {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  border-radius: 72px;
  --tw-bg-opacity: 1;
  background-color: rgb(30 43 80 / var(--tw-bg-opacity, 1));
  width: 0px;
  transition-property: width;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.nal-slide-indicator.active::before {
  width: 100%;
}

.cta-modal {
  position: fixed;
  inset: 0px;
  z-index: 9999;
  transition: opacity 0.3s ease;
}

.cta-modal.hidden {
  pointer-events: none;
  opacity: 0;
}

.cta-modal:not(.hidden) {
  opacity: 1;
}

.cta-modal-overlay {
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
  background: rgba(233, 234, 235, 0.50);
}

.cta-modal-container {
  display: flex;
  height: 90%;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  max-width: 800px;
  border-radius: 0px;
  padding: 1.5rem;
}

@media (min-width: 1024px) {
  .cta-modal-container {
    border-radius: 40px;
    padding: 40px;
  }
}

.cta-modal-container {
  background: #FDFDFD;
  box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.25);
}

.cta-modal-content {
  width: 100%;
  overflow-y: auto;
  /*md:overflow-hidden;*/
}

.cta-modal-close {
  display: flex;
  align-items: center;
  width: 40px;
  height: 40px;
  padding: 5px;
  gap: 12.5px;
  border-radius: 7.5px;
  border: 1.25px solid #1E2B50;
  background: none;
  cursor: pointer;
}

.cta-modal-title {
  color: #1E2B50;
  font-family: "Fira Sans";
  font-size: 36px;
  font-style: normal;
  font-weight: 700;
  line-height: 43px;
}

.cta-modal-title-row {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}

.cta-modal-subtitle {
  color: #252B37;
  font-family: Roboto;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 21px;
  margin-top: 40px;
}

.cta-modal-body {
  margin-top: 40px;
}

.cta-modal-body label {
  color: #1E2B50;
  font-family: Roboto;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.cta-modal-body input[type="text"],
.cta-modal-body input[type="email"],
.cta-modal-body input[type="tel"],
.cta-modal-body textarea {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 16px 24px;
  gap: 16px;
  align-self: stretch;
  border-radius: 16px;
  background: #F5F5F5;
  border: none;
  margin-bottom: 24px;
  width: 100%;
}

.cta-modal-body input[type="submit"],
.cta-modal-body button[type="submit"] {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 115px;
  height: 47px;
  border-radius: 8px;
  background: #FFD100;
  color: #1E2B50;
  text-align: center;
  font-family: Roboto;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 19px;
  border: none;
  cursor: pointer;
}

.evento_promo_content_container {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 40px;
  padding-top: 40px;
  padding-bottom: 40px;
  padding-left: 24px;
  padding-right: 24px;
}

@media (min-width: 1024px) {
  .evento_promo_content_container {
    padding-top: 40px;
    padding-bottom: 40px;
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (min-width: 768px) {
  .evento_promo_content_container {
    margin: auto;
    max-width: 800px;
  }
}

.evento_promo_content_container {
  .evento_promo_content_sezione {
    display: flex;
  }
  .evento_promo_content_sezione {
    flex-direction: column;
  }
  .evento_promo_content_sezione {
    gap: 40px;
  }
  .evento_promo_content_sezione {
    .evento_promo_content_titolo {
      font-family: Roboto, sans-serif;
    }
    .evento_promo_content_titolo {
      font-size: 30px;
    }
    .evento_promo_content_titolo {
      font-weight: 700;
    }
    .evento_promo_content_titolo {
      line-height: 36px;
    }
    .evento_promo_content_titolo {
      --tw-text-opacity: 1;
      color: rgb(30 43 80 / var(--tw-text-opacity, 1));
    }
    .evento_promo_content_testo {
      font-family: Roboto, sans-serif;
    }
    .evento_promo_content_testo {
      font-size: 18px;
    }
    .evento_promo_content_testo {
      font-weight: 400;
    }
    .evento_promo_content_testo {
      line-height: 21px;
    }
    .evento_promo_content_testo {
      --tw-text-opacity: 1;
      color: rgb(30 43 80 / var(--tw-text-opacity, 1));
    }
    .evento_promo_content_immagine img {
      align-self: stretch;
      aspect-ratio: 16/9;
      border-radius: 40px;
    }
  }
}

.eventi-promozioni-listing-container {
  .evprli-tax {
    margin-left: auto;
    margin-right: auto;
  }
  .evprli-tax {
    max-width: 1440px;
  }
  .evprli-tax {
    padding-left: 80px;
    padding-right: 80px;
  }
  .evprli-tax {
    .taxonomy-filter-nav {
      width: 100%;
    }
    .taxonomy-filter-nav {
      .taxonomy-filter-list {
        margin: 0px;
      }
      .taxonomy-filter-list {
        display: flex;
      }
      .taxonomy-filter-list {
        list-style-type: none;
      }
      .taxonomy-filter-list {
        flex-wrap: wrap;
      }
      .taxonomy-filter-list {
        gap: 1rem;
      }
      .taxonomy-filter-list {
        padding: 0px;
      }
      .taxonomy-filter-list {
        .taxonomy-filter-item {
          margin: 0px;
        }
        .taxonomy-filter-item {
          .taxonomy-filter-link {
            display: inline-block;
          }
          .taxonomy-filter-link {
            border-radius: 0.5rem;
          }
          .taxonomy-filter-link {
            --tw-bg-opacity: 1;
            background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
          }
          .taxonomy-filter-link {
            padding-left: 1rem;
            padding-right: 1rem;
          }
          .taxonomy-filter-link {
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
          }
          .taxonomy-filter-link {
            --tw-text-opacity: 1;
            color: rgb(30 43 80 / var(--tw-text-opacity, 1));
          }
          .taxonomy-filter-link {
            text-decoration-line: none;
          }
          .taxonomy-filter-link {
            transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
            transition-duration: 150ms;
          }
          .taxonomy-filter-link {
            transition-duration: 200ms;
          }
          .taxonomy-filter-link {
            &:hover,
            &:focus {
              --tw-bg-opacity: 1;
              background-color: rgb(210 213 220 / var(--tw-bg-opacity, 1));
            }
            &:hover,
            &:focus {
              --tw-text-opacity: 1;
              color: rgb(19 26 48 / var(--tw-text-opacity, 1));
            }
            &.active {
              --tw-bg-opacity: 1;
              background-color: rgb(30 43 80 / var(--tw-bg-opacity, 1));
            }
            &.active {
              font-weight: 500;
            }
            &.active {
              --tw-text-opacity: 1;
              color: rgb(255 255 255 / var(--tw-text-opacity, 1));
            }
            .taxonomy-filter-count {
              margin-left: 0.25rem;
            }
            .taxonomy-filter-count {
              font-size: 0.875rem;
              line-height: 1.25rem;
            }
            .taxonomy-filter-count {
              opacity: 0.75;
            }
          }
        }
      }
      .no-taxonomy-message {
        margin: 0px;
      }
      .no-taxonomy-message {
        font-style: italic;
      }
      .no-taxonomy-message {
        --tw-text-opacity: 1;
        color: rgb(30 43 80 / var(--tw-text-opacity, 1));
      }
    }
  }
}

/**
 * Evento Promo Correlati Categoria - Sezione "Leggi anche..."
 * Layout per 2 card orizzontali con sfondo blue scuro
 */

.evento-promo-correlati-section {
  width: 100%;
  --tw-bg-opacity: 1;
  background-color: rgb(30 43 80 / var(--tw-bg-opacity, 1));
}

.evento-promo-correlati-container {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  max-width: 1440px;
  flex-direction: column;
  gap: 48px;
  padding-top: 40px;
  padding-bottom: 40px;
  padding-left: 24px;
  padding-right: 24px;
}

@media (min-width: 1024px) {
  .evento-promo-correlati-container {
    padding-top: 40px;
    padding-bottom: 40px;
    padding-left: 24px;
    padding-right: 24px;
  }
}

.evento-promo-correlati-title {
  font-family: "Fira Sans", sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 43px;
  --tw-text-opacity: 1;
  color: rgb(255 250 229 / var(--tw-text-opacity, 1));
}

.evento-promo-correlati-slider-wrapper {
  position: relative;
}

.evento-promo-correlati-slider-container {
  width: 100%;
  overflow: hidden;
}

.evento-promo-correlati-slider-track {
  display: flex;
  gap: 80px;
  transition: transform 0.3s ease;
}

.evento-promo-correlati-card {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  gap: 24px;
  width: 600px;
  /* Larghezza fissa 600px per ogni card */
}

.card-date {
  font-family: Roboto, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  --tw-text-opacity: 1;
  color: rgb(255 250 229 / var(--tw-text-opacity, 1));
}

.card-title {
  font-family: Roboto, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 21px;
  --tw-text-opacity: 1;
  color: rgb(255 250 229 / var(--tw-text-opacity, 1));
}

.card-subtitle {
  font-family: Roboto, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  --tw-text-opacity: 1;
  color: rgb(255 250 229 / var(--tw-text-opacity, 1));
}

.card-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.card-image img,
.card-image picture img {
  border-radius: 40px;
}

/* Controlli navigazione basati su hero layout */

.evento-promo-correlati-controls {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.evento-promo-correlati-controls > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(1rem * var(--tw-space-x-reverse));
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}

.evento-promo-correlati-controls {
  button {
    cursor: pointer;
  }
}

.correlati-nav-prev,
.correlati-nav-next {
  display: flex;
  height: 40px;
  width: 40px;
  align-items: center;
  justify-content: center;
  padding: 5px;
  border-radius: 7.5px;
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.correlati-nav-prev:hover,
.correlati-nav-next:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(233 234 235 / var(--tw-bg-opacity, 1));
}

.correlati-nav-prev,
.correlati-nav-next {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.correlati-nav-prev:focus-visible,
.correlati-nav-next:focus-visible {
  outline: 2px solid #1E2B50;
  outline-offset: 2px;
}

.correlati-nav-prev,
.correlati-nav-next {
  gap: 12.5px;
}

/* Bottoni disabilitati quando non navigabili */

.correlati-nav-prev:disabled,
.correlati-nav-next:disabled {
  cursor: not-allowed;
  --tw-bg-opacity: 1;
  background-color: rgb(164 167 174 / var(--tw-bg-opacity, 1));
}

.correlati-nav-prev:disabled:hover,
.correlati-nav-next:disabled:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(164 167 174 / var(--tw-bg-opacity, 1));
}

.correlati-nav-prev svg,
.correlati-nav-next svg {
  height: 1.25rem;
  width: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
}

.correlati-indicators {
  display: flex;
  flex-direction: row;
}

.correlati-indicators > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.correlati-indicator {
  display: flex;
  height: 8px;
  width: 36px;
  flex-shrink: 0;
  cursor: pointer;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  border-radius: 72px;
  --tw-bg-opacity: 1;
  background-color: rgb(113 118 128 / var(--tw-bg-opacity, 1));
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.correlati-indicator.active {
  display: flex;
  height: 8px;
  width: 36px;
  flex-shrink: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  border-radius: 72px;
  --tw-bg-opacity: 1;
  background-color: rgb(253 253 253 / var(--tw-bg-opacity, 1));
}

/*.correlati-indicator::before {
  content: '';
  @apply absolute top-0 left-0 h-full bg-bontiamo-yellow-500 rounded-[72px];
  @apply w-0 transition-[width] duration-300 ease-in-out;
}

.correlati-indicator.active::before {
  @apply w-full;
}
 */

.t3c_container {
  padding-top: 40px;
  padding-bottom: 40px;
  padding-left: 24px;
  padding-right: 24px;
}

@media (min-width: 1024px) {
  .t3c_container {
    padding-top: 40px;
    padding-bottom: 40px;
    padding-left: 24px;
    padding-right: 24px;
  }
}

.t3c_container {
  width: 100%;
  max-width: 1440px;
  margin: auto;
  .t3c_titolo {
    padding-bottom: 24px;
  }
  .t3c_titolo {
    font-family: "Fira Sans", sans-serif;
  }
  .t3c_titolo {
    font-size: 36px;
  }
  .t3c_titolo {
    font-weight: 700;
  }
  .t3c_titolo {
    line-height: 43px;
  }
  .t3c_titolo {
    --tw-text-opacity: 1;
    color: rgb(30 43 80 / var(--tw-text-opacity, 1));
  }
  .t3c_testo {
    padding-bottom: 40px;
  }
  .t3c_testo {
    font-family: Roboto, sans-serif;
  }
  .t3c_testo {
    font-size: 18px;
  }
  .t3c_testo {
    font-weight: 400;
  }
  .t3c_testo {
    line-height: 21px;
  }
  .t3c_testo {
    --tw-text-opacity: 1;
    color: rgb(30 43 80 / var(--tw-text-opacity, 1));
  }
  .t3c_cards {
    display: grid;
  }
  .t3c_cards {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .t3c_cards {
    gap: 40px;
  }
  @media (min-width: 1024px) {
    .t3c_cards {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .t3c_cards {
    .t3c_card {
      display: flex;
    }
    .t3c_card {
      flex-direction: column;
    }
    .t3c_card {
      .t3c_card_immagine {
        padding-bottom: 24px;
      }
      .t3c_card_immagine {
        img {
          border-radius: 16px;
        }
      }
      .t3c_card_titolo {
        font-family: Roboto, sans-serif;
      }
      .t3c_card_titolo {
        font-size: 21px;
      }
      .t3c_card_titolo {
        font-weight: 700;
      }
      .t3c_card_titolo {
        line-height: 18px;
      }
      .t3c_card_titolo {
        --tw-text-opacity: 1;
        color: rgb(30 43 80 / var(--tw-text-opacity, 1));
      }
      .t3c_card_titolo {
        padding-bottom: 16px;
      }
      .t3c_card_testo {
        font-family: Roboto, sans-serif;
      }
      .t3c_card_testo {
        font-size: 16px;
      }
      .t3c_card_testo {
        font-weight: 400;
      }
      .t3c_card_testo {
        line-height: 19px;
      }
      .t3c_card_testo {
        --tw-text-opacity: 1;
        color: rgb(30 43 80 / var(--tw-text-opacity, 1));
      }
    }
  }
}

.intro_text_container {
  height: auto;
  padding-top: 40px;
  padding-bottom: 40px;
  padding-left: 24px;
  padding-right: 24px;
}

@media (min-width: 1024px) {
  .intro_text_container {
    padding-top: 40px;
    padding-bottom: 40px;
    padding-left: 24px;
    padding-right: 24px;
    height: 550px;
  }
}

.intro_text_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  .intro_text_titolo {
    text-align: center;
  }
  .intro_text_titolo {
    --tw-text-opacity: 1;
    color: rgb(30 43 80 / var(--tw-text-opacity, 1));
  }
  .intro_text_titolo {
    font-family: "Fira Sans", sans-serif;
  }
  .intro_text_titolo {
    font-size: 48px;
  }
  .intro_text_titolo {
    font-weight: 700;
  }
  .intro_text_titolo {
    line-height: 58px;
  }
  .intro_text_sottotitolo {
    text-align: center;
  }
  .intro_text_sottotitolo {
    --tw-text-opacity: 1;
    color: rgb(30 43 80 / var(--tw-text-opacity, 1));
  }
  .intro_text_sottotitolo {
    font-family: Roboto, sans-serif;
  }
  .intro_text_sottotitolo {
    font-size: 18px;
  }
  .intro_text_sottotitolo {
    font-weight: 400;
  }
  .intro_text_sottotitolo {
    line-height: 21px;
  }
}

/**
 * Accordion Layout Component Styles
 *
 * Styling for accordion section with expandable items.
 * Uses Tailwind CSS classes with @apply directive.
 *
 * @package bontiamo
 * @since 1.8.0
 */

/* ==========================================================================
   ACCORDION LAYOUT
   ========================================================================== */

/* Sezione principale accordion */

.accordion-section {
  position: relative;
  width: 100%;
  overflow: hidden;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  /* Padding sezione: 0px mobile/tablet, 80px sopra/sotto + 120px sinistra/destra desktop */
  padding: 0px;
}

@media (min-width: 1024px) {
  .accordion-section {
    padding-top: 5rem;
    padding-bottom: 5rem;
    padding-left: 120px;
    padding-right: 120px;
  }
}

.accordion-container {
  /* Gap: 32px mobile, 40px desktop tra sezioni */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

@media (min-width: 768px) {
  .accordion-container {
    gap: 2.5rem;
  }
}

.accordion-container {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  /* Container padding: 40px/24px mobile/tablet, 0px desktop + max-width */
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

@media (min-width: 390px) {
  .accordion-container {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 768px) {
  .accordion-container {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .accordion-container {
    max-width: 1440px;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
  }
}

/* Header sezione con titolo e sottotitolo */

.accordion-header {
  display: flex;
  width: 100%;
  max-width: 800px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  /* 800px max-width, gap 24px */
}

.accordion-title {
  width: 100%;
  text-align: center;
  font-family: "Fira Sans", sans-serif;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
  font-size: 30px;
}

@media (min-width: 768px) {
  .accordion-title {
    font-size: 36px;
  }
}

.accordion-title {
  /* 30px mobile, 36px desktop */
  line-height: normal;
}

.accordion-subtitle {
  width: 100%;
  text-align: center;
  font-family: Roboto, sans-serif;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(12 17 32 / var(--tw-text-opacity, 1));
  font-size: 18px;
}

@media (min-width: 768px) {
  .accordion-subtitle {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

.accordion-subtitle {
  /* Mobile: 18px, Desktop: text-lg */
  line-height: normal;
}

/* Filtri categorie accordion */

.accordion-category-filters {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  /* Gap: 24px tra filtri */
  width: 100%;
  max-width: 800px;
  /* Nessun margin - distanza regolata dal container gap */
}

.accordion-category-filter {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 90px;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  cursor: pointer;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  border-style: none;
  outline: 2px solid transparent;
  outline-offset: 2px;
  /* Nessun border di default */
  background-color: transparent;
  /* Background trasparente di default */
}

.accordion-category-filter[data-state="Selected"] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 237 153 / var(--tw-bg-opacity, 1));
  /* Background giallo #FFED99 per stato selezionato */
  border-radius: 90px;
}

.accordion-category-filter[data-state="Default"] {
  background-color: transparent;
  /* Background trasparente per default */
}

/* Hover state per i filtri */

.accordion-category-filter:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 246 204 / var(--tw-bg-opacity, 1));
  /* Background giallo chiaro all'hover */
  border-radius: 90px;
  border: 1px solid #1E2B50;
}

/* Focus state per i filtri (solo navigazione tastiera) */

.accordion-category-filter:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  /* Rimuovi outline di default */
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(30 43 80 / var(--tw-ring-opacity, 1));
  /* Ring blu per focus */
}

/* Mantieni lo stato Selected anche in hover */

.accordion-category-filter[data-state="Selected"]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 237 153 / var(--tw-bg-opacity, 1));
  /* Mantieni background originale quando già selezionato */
}

/* Mantieni lo stato Selected anche in focus */

.accordion-category-filter[data-state="Selected"]:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(30 43 80 / var(--tw-ring-opacity, 1));
  /* Ring blu per focus */
}

.accordion-category-filter-text {
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
  /* Colore blu #1E2B50 per tutti */
  font-family: Roboto, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 21px;
  /* 18px, Roboto Bold, line-height 21px */
}

/* Mantieni stesso colore testo per stato selezionato */

.accordion-category-filter[data-state="Selected"] .accordion-category-filter-text {
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
  /* Stesso colore blu per tutti */
}

.accordion-category-filter[data-state="Default"] .accordion-category-filter-text {
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
  /* Stesso colore blu per tutti */
}

/* Container items accordion */

.accordion-items {
  display: flex;
  width: 100%;
  max-width: 800px;
  flex-direction: column;
  /* 800px max-width */
}

/* Sezione categoria */

.accordion-category-section {
  width: 100%;
  transition-property: all;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Sezione categoria nascosta durante il filtro */

.slideauto_slide_item.accordion-category-section[data-visible="false"] {
  opacity: 0;
  display: none;
}

.slideauto-pause-bars.accordion-category-section[data-visible="false"]::before,
  .slideauto-pause-bars.accordion-category-section[data-visible="false"]::after,
  .slideauto-play-triangle.accordion-category-section[data-visible="false"]::before {
  display: none;
}

.accordion-category-section[data-visible="false"] {
  display: none;
}

.hero-pause-bars.accordion-category-section[data-visible="false"]::before,
.hero-pause-bars.accordion-category-section[data-visible="false"]::after,
.hero-play-triangle.accordion-category-section[data-visible="false"]::before {
  display: none;
}

.carpro-pause-bars.accordion-category-section[data-visible="false"]::before,
.carpro-pause-bars.accordion-category-section[data-visible="false"]::after,
.carpro-play-triangle.accordion-category-section[data-visible="false"]::before {
  display: none;
}

.sliart-pause-bars.accordion-category-section[data-visible="false"]::before,
.sliart-pause-bars.accordion-category-section[data-visible="false"]::after,
.sliart-play-triangle.accordion-category-section[data-visible="false"]::before {
  display: none;
}

.cta-modal.accordion-category-section[data-visible="false"] {
  pointer-events: none;
  opacity: 0;
}

.cta-modal:not(.accordion-category-section[data-visible="false"]) {
  opacity: 1;
}

.tracciamento-modal.accordion-category-section[data-visible="false"] {
  pointer-events: none;
  opacity: 0;
}

/* Sezione categoria visibile durante il filtro */

.accordion-category-section[data-visible="true"] {
  display: block;
}

/* Header categoria */

.accordion-category-header {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  /* Padding: 24px sopra/sotto */
}

.accordion-category-title {
  text-align: center;
  font-family: "Fira Sans", sans-serif;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
  font-size: 20px;
}

@media (min-width: 768px) {
  .accordion-category-title {
    font-size: 22px;
  }
}

.accordion-category-title {
  /* 20px mobile, 22px desktop */
  line-height: normal;
}

/* Container items della categoria */

.accordion-category-items {
  display: flex;
  width: 100%;
  flex-direction: column;
}

/* Singolo item accordion */

.accordion-item {
  width: 100%;
}

/* Separatore 1px */

.accordion-separator {
  height: 1px;
  width: 100%;
  --tw-bg-opacity: 1;
  background-color: rgb(165 170 185 / var(--tw-bg-opacity, 1));
  /* Linea 1px blu */
}

/* Header item accordion (titolo + icona) */

.accordion-item-header {
  display: flex;
  width: 100%;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  cursor: pointer;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  /* Padding: 24px sopra/sotto */
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.accordion-item-header:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.accordion-item-header {
  /* Nessun bordo al click/focus */
  border-color: #1e2b50;
  .accordion-item-faq {
    width: calc(100% - 56px);
  }
}

/*.accordion-item-header:hover {
  @apply bg-bontiamo-blue-100;
}
*/

.accordion-item-title {
  margin-bottom: 0.5rem;
  flex: 1 1 0%;
  font-family: "Fira Sans", sans-serif;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
  font-size: 18px;
  line-height: 21px;
  /* 18px mobile, 20px desktop */
}

/* Icona accordion */

.accordion-item-icon {
  display: flex;
  height: 2rem;
  width: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(30 43 80 / var(--tw-border-opacity, 1));
  /* Bordo rettangolare stondato (4px) */
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
}

.accordion-item-header[aria-expanded="true"] .accordion-item-icon {
  /* Icona cambia da plus a minus tramite JavaScript */
}

.accordion-plus-icon {
  height: 1rem;
  width: 1rem;
  /* 16x16px */
}

/* Contenuto accordion item */

.accordion-item-content {
  width: 100%;
  overflow: hidden;
  transition-property: all;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  max-height: 0;
  opacity: 0;
}

.accordion-item-content.open {
  max-height: 1000px !important;
  /* Altezza massima quando aperto */
  opacity: 1;
}

.accordion-item-text {
  width: 100%;
  font-family: Roboto, sans-serif;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(12 17 32 / var(--tw-text-opacity, 1));
  font-size: 16px;
  line-height: 19px;
  padding-bottom: 1.5rem;
  /* Padding bottom: 24px */
  line-height: 1.5;
}

/* CTA finale accordion */

.accordion-cta-wrapper {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  /* Gap: 32px mobile, 40px desktop (stesso del container) */
}

.accordion-cta {
  /* Mobile: full width, Desktop: width auto (spazio necessario) */
  width: 100%;
}

@media (min-width: 768px) {
  .accordion-cta {
    width: auto;
  }
}

.accordion-cta {
  border-radius: 0.5rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(30 43 80 / var(--tw-border-opacity, 1));
  font-family: Roboto, sans-serif;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
  font-size: 14px;
}

@media (min-width: 768px) {
  .accordion-cta {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

.accordion-cta {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.accordion-cta:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(30 43 80 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.accordion-cta {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.accordion-cta:focus-visible {
  outline: 2px solid #1E2B50;
  outline-offset: 2px;
}

.accordion-cta:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(30 43 80 / var(--tw-ring-opacity, 1));
}

.accordion-cta {
  text-align: center;
  /* Centrato su mobile */
}

/**
 * Z Pattern Layout Component Styles
 *
 * Styling for Z pattern layout with text + image horizontal layout.
 * Uses Tailwind CSS classes with @apply directive.
 *
 * @package bontiamo
 * @since 1.8.0
 */

/* ==========================================================================
   Z PATTERN LAYOUT
   ========================================================================== */

/* Z Pattern Layout - Sezione con contenuto testo + immagine layout orizzontale */

.z-pattern-section {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

@media (min-width: 768px) {
  .z-pattern-section {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}

.z-pattern-section {
  /* Padding verticale responsive: mobile 40px, desktop 80px - FULL WIDTH */
}

/* Classi colore sfondo dinamico */

.z-pattern-bg-inherit {
  background-color: transparent;
}

.z-pattern-bg-blue {
  --tw-bg-opacity: 1;
  background-color: rgb(30 43 80 / var(--tw-bg-opacity, 1));
  .z-pattern-title {
    --tw-text-opacity: 1;
    color: rgb(255 250 229 / var(--tw-text-opacity, 1));
  }
}

.z-pattern-container {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

@media (min-width: 1024px) {
  .z-pattern-container {
    max-width: 1440px;
  }
}

.z-pattern-container {
  /* Da 1440px in su: massimo 1440px e centrato */
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

@media (min-width: 768px) {
  .z-pattern-container {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}

.z-pattern-container {
  /* Padding interno: 24px mobile, 80px desktop */
}

@media (min-width: 1280px) {
  .z-pattern-container {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}

.z-pattern-container {
  /* +1280px: padding 80px */
  display: flex;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .z-pattern-container {
    flex-direction: row;
  }
}

.z-pattern-container {
  /* Mobile: stack, Desktop: orizzontale */
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  /* Gap responsive: 40px mobile, 80px desktop */
}

/* Content Area - Sinistra */

.z-pattern-content {
  flex: 1 1 0%;
  /* Prende spazio flessibile disponibile */
}

@media (min-width: 1280px) {
  .z-pattern-content {
    width: 700px;
    flex-shrink: 0;
  }
}

.z-pattern-content {
  /* +1280px: larghezza fissa 700px */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  order: 2;
}

@media (min-width: 1024px) {
  .z-pattern-content {
    order: 1;
  }
}

.z-pattern-content {
  /* Sempre primo elemento in ordine */
}

.z-pattern-content.z-pattern-content-image-s {
  order: 1;
}

@media (min-width: 1024px) {
  .z-pattern-content.z-pattern-content-image-s {
    order: 3;
  }
}

.z-pattern-text-area {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1.5rem;
  /* 24px gap tra titolo e descrizione */
  margin-bottom: 1.5rem;
}

@media (min-width: 1024px) {
  .z-pattern-text-area {
    margin-bottom: 2.5rem;
  }
}

.z-pattern-text-area {
  /* 40px spacing prima del CTA */
}

.z-pattern-title {
  font-family: "Fira Sans", sans-serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 36px;
}

@media (min-width: 1024px) {
  .z-pattern-title {
    font-size: 36px;
    line-height: 43px;
  }
}

.z-pattern-title {
  /* 30px mobile → 36px desktop */
  text-align: left;
  width: 100%;
  /* Full width per text wrapping */
  line-height: normal;
}

/* Colori titolo condizionali */

.z-pattern-bg-blue .z-pattern-title {
  --tw-text-opacity: 1;
  color: rgb(255 250 229 / var(--tw-text-opacity, 1));
}

.z-pattern-bg-inherit .z-pattern-title {
  --tw-text-opacity: 1;
  color: rgb(6 9 16 / var(--tw-text-opacity, 1));
}

.z-pattern-description {
  font-family: Roboto, sans-serif;
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.75rem;
  /* 18px per entrambi mobile/desktop */
  text-align: left;
  line-height: 1.625;
  width: 100%;
  /* Full width per text wrapping */
  line-height: normal;
}

/* Spacing tra paragrafi nella descrizione */

.z-pattern-description p + p {
  margin-top: 1rem;
}

@media (min-width: 768px) {
  .z-pattern-description p + p {
    margin-top: 1.5rem;
  }
}

.z-pattern-description p + p {
  /* 16px mobile, 24px desktop */
}

/* Colori descrizione condizionali */

.z-pattern-bg-blue .z-pattern-description {
  --tw-text-opacity: 1;
  color: rgb(255 250 229 / var(--tw-text-opacity, 1));
}

.z-pattern-bg-inherit .z-pattern-description {
  --tw-text-opacity: 1;
  color: rgb(6 9 16 / var(--tw-text-opacity, 1));
}

/* CTA Button Area */

.z-pattern-cta-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
}

@media (min-width: 1024px) {
  .z-pattern-cta-wrapper {
    width: auto;
  }
}

.z-pattern-bg-inherith  .z-pattern-cta {
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(30 43 80 / var(--tw-border-opacity, 1));
}

.z-pattern-bg-inherith  .z-pattern-cta:hover {
  --tw-border-opacity: 1;
  border-color: rgb(255 209 0 / var(--tw-border-opacity, 1));
}

.z-pattern-bg-inherith  .z-pattern-cta {
  /* Outline giallo */
  font-family: Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
}

.z-pattern-bg-inherith  .z-pattern-cta:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 250 229 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
}

.z-pattern-bg-inherith  .z-pattern-cta:focus {
  --tw-bg-opacity: 1;
  background-color: rgb(255 250 229 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
  outline-width: 2px;
  outline-color: #FFF6CC;
}

.z-pattern-bg-blue .z-pattern-cta {
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(255 250 229 / var(--tw-border-opacity, 1));
  /* Outline giallo */
  font-family: Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(255 250 229 / var(--tw-text-opacity, 1));
}

.z-pattern-bg-blue .z-pattern-cta:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 250 229 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
}

.z-pattern-bg-blue .z-pattern-cta:focus {
  --tw-bg-opacity: 1;
  background-color: rgb(255 250 229 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
  outline-width: 2px;
  outline-color: #FFF6CC;
}

.z-pattern-cta {
  width: 100%;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
  /* Padding interno: 40px/14px */
  position: relative;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  /* Hover effects */
}

/* Image Area - Destra */

.z-pattern-image-area {
  position: relative;
  /* Per posizionamento elemento decorativo */
  height: 300px;
  width: 100%;
}

@media (min-width: 768px) {
  .z-pattern-image-area {
    height: 500px;
    width: 500px;
  }
}

.z-pattern-image-area {
  /* Dimensioni responsive */
}

@media (min-width: 1280px) {
  .z-pattern-image-area {
    height: 500px;
    width: 500px;
  }
}

.z-pattern-image-area {
  /* +1280px: dimensioni fisse 500px */
  flex-shrink: 0;
  /* Non si riduce nel flex container */
  order: 1;
}

@media (min-width: 1024px) {
  .z-pattern-image-area {
    order: 2;
  }
}

.z-pattern-image-area {
  /* Sempre secondo elemento in ordine */
}

.z-pattern-image-area.z-pattern-image-area-image-s {
  order: 1;
}

.z-pattern-image {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  /* Riempie container mantenendo proporzioni */
  border-radius: 1.5rem;
  padding: 0px;
}

@media (min-width: 768px) {
  .z-pattern-image {
    padding: 0.5rem;
  }
}

.z-pattern-image {
  /* Bordi arrotondati + padding interno come da design */
  position: absolute;
  top: 0px;
  left: 0px;
  /* Posizionamento assoluto nel container */
}

/* Rimuovi padding quando sfondo non è settato */

.z-pattern-bg-inherit .z-pattern-image {
  padding: 0px;
}

/* Elemento Decorativo (bordo giallo) */

.z-pattern-decoration {
  position: absolute;
  /* Posizionamento assoluto rispetto al parent */
  /* Posizionamento responsive */
  right: 0px;
  bottom: 0px;
}

@media (min-width: 1024px) {
  .z-pattern-decoration {
    right: 6px;
    bottom: 0.25rem;
  }
}

.z-pattern-decoration {
  /* Mobile: in basso a destra, Desktop: offset specifico */
  z-index: 2;
  /* Sopra l'immagine */
  stroke: #FFFAE5;
  transform: rotate(-0.482deg);
  flex-shrink: 0;
}

.z-pattern-decoration svg {
  height: 8rem;
  width: 7rem;
}

@media (min-width: 1024px) {
  .z-pattern-decoration svg {
    height: 14rem;
    width: 12rem;
  }
}

.z-pattern-decoration svg {
  /* 192x224px come da design originale */
}

.page-section--z_pattern_layout .banner-decoration {
  right: 8px;
  bottom: 8px;
}

/**
 * Z Pattern Grande Layout Component Styles
 *
 * Styling for Z pattern grande layout with larger dimensions and enhanced styling.
 * Uses Tailwind CSS classes with @apply directive.
 *
 * @package bontiamo
 * @since 1.8.0
 */

/* ==========================================================================
   Z PATTERN GRANDE LAYOUT
   ========================================================================== */

/* Z Pattern Grande Layout - Div esterno con colore sfondo */

.z-pattern-grande-section {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Classi colore sfondo dinamico per grande */

.z-pattern-grande-bg-inherit {
  background-color: transparent;
}

.z-pattern-grande-bg-blu {
  --tw-bg-opacity: 1;
  background-color: rgb(30 43 80 / var(--tw-bg-opacity, 1));
}

.z-pattern-grande-container {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

@media (min-width: 1024px) {
  .z-pattern-grande-container {
    max-width: 1440px;
  }
}

.z-pattern-grande-container {
  /* Da 1440px in su: massimo 1440px e centrato */
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .z-pattern-grande-container {
    flex-direction: row;
  }
}

.z-pattern-grande-container {
  /* Mobile: stack, Desktop: orizzontale */
  align-items: center;
  justify-content: space-between;
}

@media (min-width: 768px) {
  .z-pattern-grande-container {
    gap: 80px;
  }
}

.z-pattern-grande-container {
  /* Gap mobile 48px, desktop 0 (no gap, dimensioni fisse) */
}

/* Content Area - Sinistra - versione grande */

.z-pattern-grande-content {
  flex: 1 1 0%;
  /* Prende spazio flessibile disponibile */
}

@media (min-width: 1280px) {
  .z-pattern-grande-content {
    width: 400px;
    flex-shrink: 0;
  }
}

.z-pattern-grande-content {
  /* +1280px: larghezza fissa 400px */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  order: 3;
}

@media (min-width: 768px) {
  .z-pattern-grande-content {
    order: 1;
  }
}

.z-pattern-grande-content {
  /* Sempre primo elemento in ordine */
}

.z-pattern-grande-content.z-pattern-grande-content-image-s {
  order: 3;
}

/* Container sezioni multiple */

.z-pattern-grande-sections {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2.5rem;
  /* 40px gap tra sezioni diverse */
  margin-bottom: 3rem;
  /* 48px spacing prima del CTA (più grande) */
}

/* Singola sezione con titolo e testo */

.z-pattern-grande-section-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1.5rem;
  /* 24px gap tra titolo e testo */
}

/* Titolo di sezione */

.z-pattern-grande-section-title {
  font-family: "Fira Sans", sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 29px;
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
}

/* Testo di sezione */

.z-pattern-grande-section-text {
  font-family: Roboto, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 21px;
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
}

/* Spacing tra paragrafi nel testo di sezione */

.z-pattern-grande-section-text p + p {
  margin-top: 1.5rem;
}

@media (min-width: 768px) {
  .z-pattern-grande-section-text p + p {
    margin-top: 2rem;
  }
}

.z-pattern-grande-section-text p + p {
  /* 24px mobile, 32px desktop (più grande) */
}

/* Colori condizionali per titoli sezione */

.z-pattern-grande-bg-blu .z-pattern-grande-section-title {
  --tw-text-opacity: 1;
  color: rgb(255 250 229 / var(--tw-text-opacity, 1));
}

.z-pattern-grande-bg-inherit .z-pattern-grande-section-title {
  --tw-text-opacity: 1;
  color: rgb(6 9 16 / var(--tw-text-opacity, 1));
}

/* Colori condizionali per testi sezione */

.z-pattern-grande-bg-blu .z-pattern-grande-section-text {
  --tw-text-opacity: 1;
  color: rgb(255 250 229 / var(--tw-text-opacity, 1));
}

.z-pattern-grande-bg-inherit .z-pattern-grande-section-text {
  --tw-text-opacity: 1;
  color: rgb(6 9 16 / var(--tw-text-opacity, 1));
}

.z-pattern-grande-title {
  font-family: "Fira Sans", sans-serif;
  font-weight: 700;
  font-size: 2.25rem;
  line-height: 2.5rem;
}

@media (min-width: 768px) {
  .z-pattern-grande-title {
    font-size: 3rem;
    line-height: 1;
  }
}

.z-pattern-grande-title {
  /* 36px mobile → 48px desktop (più grande) */
  text-align: left;
  line-height: 1.5;
  width: 100%;
  /* Full width per text wrapping */
  line-height: normal;
}

/* Colori titolo condizionali per grande */

.z-pattern-grande-bg-blu .z-pattern-grande-title {
  --tw-text-opacity: 1;
  color: rgb(255 250 229 / var(--tw-text-opacity, 1));
}

.z-pattern-grande-bg-inherit .z-pattern-grande-title {
  --tw-text-opacity: 1;
  color: rgb(6 9 16 / var(--tw-text-opacity, 1));
}

.z-pattern-grande-description {
  font-family: Roboto, sans-serif;
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.75rem;
  /* 20px per entrambi mobile/desktop (più grande) */
  text-align: left;
  line-height: 1.625;
  width: 100%;
  /* Full width per text wrapping */
  line-height: normal;
}

/* Spacing tra paragrafi nella descrizione - versione grande */

.z-pattern-grande-description p + p {
  margin-top: 1.5rem;
}

@media (min-width: 768px) {
  .z-pattern-grande-description p + p {
    margin-top: 2rem;
  }
}

.z-pattern-grande-description p + p {
  /* 24px mobile, 32px desktop (più grande) */
}

/* Colori descrizione condizionali per grande */

.z-pattern-grande-bg-blu .z-pattern-grande-description {
  --tw-text-opacity: 1;
  color: rgb(255 250 229 / var(--tw-text-opacity, 1));
}

.z-pattern-grande-bg-inherit .z-pattern-grande-description {
  --tw-text-opacity: 1;
  color: rgb(6 9 16 / var(--tw-text-opacity, 1));
}

/* CTA Button Area - versione grande */

.z-pattern-grande-cta-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
}

@media (min-width: 1024px) {
  .z-pattern-grande-cta-wrapper {
    width: auto;
  }
}

.z-pattern-grande-cta {
  width: 100%;
  padding-left: 3rem;
  padding-right: 3rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  /* Padding interno più grande: 48px/16px */
  position: relative;
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(255 250 229 / var(--tw-border-opacity, 1));
  /* Outline giallo */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Roboto, sans-serif;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(255 250 229 / var(--tw-text-opacity, 1));
  /* Testo più grande */
  text-align: center;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  /* Hover effects */
}

.z-pattern-grande-cta:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 250 229 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
}

.z-pattern-grande-cta:focus {
  --tw-bg-opacity: 1;
  background-color: rgb(255 250 229 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
  outline-width: 2px;
  outline-color: #FFF6CC;
}

/* Image Area - Destra - versione grande */

.z-pattern-grande-image-area {
  position: relative;
  /* Per posizionamento elemento decorativo */
  height: 400px;
  width: 100%;
}

@media (min-width: 768px) {
  .z-pattern-grande-image-area {
    height: 500px;
    width: 100%;
  }
}

.z-pattern-grande-image-area {
  /* Mobile: full width, Desktop: altezza 500px */
}

@media (min-width: 1280px) {
  .z-pattern-grande-image-area {
    height: 500px;
    width: 800px;
    flex-shrink: 0;
  }
}

.z-pattern-grande-image-area {
  /* +1280px: larghezza fissa 800px */
  order: 2;
}

@media (min-width: 768px) {
  .z-pattern-grande-image-area {
    order: 2;
  }
}

.z-pattern-grande-image-area {
  /* Sempre secondo elemento in ordine */
}

.z-pattern-grande-image-area.z-pattern-grande-image-area-image-s {
  order: 1;
}

.z-pattern-grande-image {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  /* Riempie container mantenendo proporzioni */
  border-radius: 1.5rem;
  padding: 0.5rem;
  /* Bordi arrotondati + padding interno come da design */
  position: absolute;
  top: 0px;
  left: 0px;
  /* Posizionamento assoluto nel container */
}

/* Rimuovi padding quando sfondo non è settato - versione grande */

.z-pattern-grande-bg-inherit .z-pattern-grande-image {
  padding: 0px;
}

/* Elemento Decorativo (bordo giallo) - versione grande */

.z-pattern-grande-decoration {
  position: absolute;
  /* Posizionamento assoluto rispetto al parent */
  /* Posizionamento responsive */
  right: 0px;
  bottom: 0px;
}

@media (min-width: 1024px) {
  .z-pattern-grande-decoration {
    right: 6px;
    bottom: 0.25rem;
  }
}

.z-pattern-grande-decoration {
  /* Mobile: in basso a destra, Desktop: offset specifico */
  z-index: 10;
  /* Sopra l'immagine */
  stroke: #FFFAE5;
  transform: rotate(-0.482deg);
  flex-shrink: 0;
}

.z-pattern-grande-decoration svg {
  height: 9rem;
  width: 8rem;
}

@media (min-width: 1024px) {
  .z-pattern-grande-decoration svg {
    height: 16rem;
    width: 14rem;
  }
}

.z-pattern-grande-decoration svg {
  /* Decorazione più grande: 224x256px */
}

.area_informativa_container {
  .area_info_titolo {
    justify-content: center;
  }
  .area_info_titolo {
    padding-bottom: 24px;
  }
  .area_info_titolo {
    text-align: center;
  }
  .area_info_titolo {
    font-family: "Fira Sans", sans-serif;
  }
  .area_info_titolo {
    font-size: 36px;
  }
  .area_info_titolo {
    font-weight: 700;
  }
  .area_info_titolo {
    line-height: 43px;
  }
  .area_info_testo {
    text-align: center;
  }
  .area_info_testo {
    font-family: Roboto, sans-serif;
  }
  .area_info_testo {
    font-size: 18px;
  }
  .area_info_testo {
    font-weight: 400;
  }
  .area_info_testo {
    line-height: 21px;
  }
  .area_info_cta {
    margin-top: 24px;
  }
  .area_info_cta {
    height: 48px;
  }
  .area_info_cta {
    text-align: center;
  }
  .area_info_chiusura {
    margin: auto;
  }
  .area_info_chiusura {
    margin-top: 40px;
  }
  .area_info_chiusura {
    width: 100%;
  }
  .area_info_chiusura {
    text-align: center;
  }
  @media (min-width: 768px) {
    .area_info_chiusura {
      width: 800px;
    }
  }
  @media (min-width: 768px) {
    .area_info_chiusura {
      max-width: 800px;
    }
  }
  .area_info_chiusura {
    display: flex;
  }
  .area_info_chiusura {
    flex-direction: column;
  }
  .area_info_chiusura {
    align-items: flex-start;
  }
  .area_info_chiusura {
    gap: 1rem;
  }
  .area_info_chiusura {
    border-radius: 40px;
  }
  .area_info_chiusura {
    border-width: 1px;
  }
  .area_info_chiusura {
    border-style: solid;
  }
  .area_info_chiusura {
    --tw-border-opacity: 1;
    border-color: rgb(30 43 80 / var(--tw-border-opacity, 1));
  }
  .area_info_chiusura {
    padding: 40px;
  }
  .area_info_chiusura {
    font-family: Roboto, sans-serif;
  }
  .area_info_chiusura {
    font-weight: 400;
  }
  .area_info_chiusura {
    --tw-text-opacity: 1;
    color: rgb(30 43 80 / var(--tw-text-opacity, 1));
  }
  .area_info_chiusura {
    font-size: 16px;
    line-height: 19px;
  }
  .area_info_chiusura {
    text-align: left;
    p {
      text-align: left;
    }
    li {
      list-style-type: disc;
    }
    li {
      font-size: 16px;
      line-height: 24px;
    }
    @media (min-width: 1024px) {
      li {
        list-style-type: none;
      }
    }
  }
  .area_info_boxs {
    margin: auto;
  }
  .area_info_boxs {
    margin-top: 40px;
  }
  .area_info_boxs {
    width: 100%;
  }
  .area_info_boxs {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  @media (min-width: 768px) {
    .area_info_boxs {
      width: 800px;
    }
  }
  @media (min-width: 768px) {
    .area_info_boxs {
      max-width: 800px;
    }
  }
  @media (min-width: 1024px) {
    .area_info_boxs {
      display: grid;
    }
  }
  @media (min-width: 1024px) {
    .area_info_boxs {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .area_info_boxs {
    -moz-column-gap: 16px;
         column-gap: 16px;
    .area_info_boxs_single {
      margin-bottom: 1.5rem;
    }
    .area_info_boxs_single {
      display: flex;
    }
    .area_info_boxs_single {
      flex-direction: column;
    }
    .area_info_boxs_single {
      justify-content: flex-start;
    }
    .area_info_boxs_single {
      gap: 1.5rem;
    }
    .area_info_boxs_single {
      border-radius: 24px;
    }
    .area_info_boxs_single {
      padding: 1.5rem;
    }
    @media (min-width: 1024px) {
      .area_info_boxs_single {
        margin-bottom: 0px;
      }
    }
    .area_info_boxs_single {
      /*display: flex;
      padding: 24px;
      flex-direction: column;
      justify-content: start;
      gap: 24px;
      flex: 1 0 0;
      border-radius: 24px;
       */
    }
    .area_info_boxs_single {
      --tw-bg-opacity: 1;
      background-color: rgb(255 246 204 / var(--tw-bg-opacity, 1));
    }
    .area_info_boxs_single {
      .area_info_boxs_single_title {
        --tw-text-opacity: 1;
        color: rgb(6 9 16 / var(--tw-text-opacity, 1));
      }
      .area_info_boxs_single_title {
        /* Desktop/Body large */
        font-family: Roboto;
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
      }
      .area_info_boxs_single_testo {
        font-family: Roboto, sans-serif;
      }
      .area_info_boxs_single_testo {
        font-weight: 400;
      }
      .area_info_boxs_single_testo {
        --tw-text-opacity: 1;
        color: rgb(6 9 16 / var(--tw-text-opacity, 1));
      }
      .area_info_boxs_single_testo {
        font-size: 16px;
        line-height: 19px;
      }
    }
  }
}

/* ==========================================================================
   SCROLL SLIDER COMPONENT - APPROCCIO SEMPLIFICATO
   ========================================================================== */

/* Container principale - altezza fissa viewport */

.scroll-slider-section {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.scroll-slider-container {
  position: relative;
  height: 100%;
  width: 100%;
}

/* Wrapper immagini - Tutte stacked con position absolute */

.scroll-slider-image-wrapper {
  position: absolute;
  height: 100%;
  width: 100%;
  inset: 0;
  /* Tutte le immagini nascoste sotto di default */
  transform: translateY(100%);
  /* NESSUNA transizione CSS - tutto controllato da JS */
  will-change: transform;
}

.scroll-slider-picture {
  display: block;
  height: 100%;
  width: 100%;
  /* Piena copertura per stacking system */
}

.scroll-slider-image {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  /* Piena copertura mantenendo aspect ratio */
  will-change: transform;
  /* Performance optimization */
}

/* CTA Overlay System - Sovrapposta alle immagini */

.scroll-slider-cta {
  position: absolute;
  /* Position absolute per overlay */
  bottom: 2.5rem;
  left: 1rem;
  right: 1rem;
  /* Posizionamento: 40px dal bottom, 16px dai lati */
  z-index: 10;
  /* Z-index alto per rimanere sopra tutte le immagini */
  display: flex;
  justify-content: center;
  /* Centratura orizzontale del contenuto */
}

.scroll-slider-cta-content {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 2rem;
  padding-right: 0.5rem;
  /* 8px vertical, 32px sinistra, 8px destra */
  gap: 1rem;
  /* 16px gap */
  border-radius: 1rem;
  /* border-radius: 16px */
  --tw-bg-opacity: 1;
  background-color: rgb(253 253 253 / var(--tw-bg-opacity, 1));
  /* #FDFDFD */
  box-shadow: 0 0 19.017px 0 rgba(0, 0, 0, 0.25);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  position: relative;
  overflow: hidden;
  /* Il box si adatta al contenuto, senza dimensioni fisse */
}

/* Effetto hover: background giallo dal centro verso l'esterno */

.scroll-slider-cta-content::before {
  content: '';
  position: absolute;
  inset: 0px;
  border-radius: 1rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 209 0 / var(--tw-bg-opacity, 1));
  --tw-scale-x: 0;
  --tw-scale-y: 0;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  opacity: 0;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  transform-origin: center;
}

.scroll-slider-cta-content-container:hover .scroll-slider-cta-content::before {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  opacity: 1;
}

/* Contenuto CTA - posizionamento normale */

.scroll-slider-cta-text-wrapper,
.scroll-slider-cta-arrow {
  position: relative;
}

.scroll-slider-cta-text-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  /* 8px gap tra titolo e sottotitolo */
}

.scroll-slider-cta-text {
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
  font-family: "Fira Sans", sans-serif;
  /* Mobile: 20px, Desktop: 24px */
  font-size: 20px;
  line-height: 24px;
}

@media (min-width: 1024px) {
  .scroll-slider-cta-text {
    font-size: 30px;
    line-height: 36px;
  }
}

.scroll-slider-cta-text {
  font-weight: 600;
  /* font-weight: 600 */
  font-style: normal;
  line-height: normal;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.scroll-slider-cta-subtitle {
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(6 9 16 / var(--tw-text-opacity, 1));
  text-align: center;
  font-family: Roboto, sans-serif;
  font-size: 16px;
  line-height: 19px;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.scroll-slider-cta-arrow {
  height: 2rem;
  width: 2rem;
  /* Box 32px x 32px */
  padding: 0.5rem;
  /* Padding 8px */
  flex-shrink: 0;
  /* SVG come background - icona 8x14 centrata */
  background-image: url('../images/freccia-dx.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 8px 14px;
  /* Dimensioni esatte dell'icona */
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

/* Hover states per titolo, sottotitolo e freccia - SOLO DESKTOP */

@media (min-width: 390px) {
  .scroll-slider-cta-content-container:hover .scroll-slider-cta-content .scroll-slider-cta-text {
    --tw-text-opacity: 1;
    color: rgb(30 43 80 / var(--tw-text-opacity, 1));
    /* Stesso colore */
    font-family: "Fira Sans", sans-serif;
    /* Hover: font-size ridotto e weight aumentato */
    font-size: 18.377px;
    /* font-size: 18.377px */
    font-weight: 700;
    /* font-weight: 700 */
  }

  .scroll-slider-cta-content-container:hover .scroll-slider-cta-content .scroll-slider-cta-subtitle {
    color: #101323;
    /* Stesso colore */
    text-align: center;
    font-family: Roboto, sans-serif;
    font-weight: 400;
    /* Hover: font-size ridotto */
    font-size: 12.252px;
    /* font-size: 12.252px */
  }

  .scroll-slider-cta-content-container:hover .scroll-slider-cta-content .scroll-slider-cta-arrow {
    /* Hover: icona più piccola 6x12 */
    background-size: 6px 12px;
  }
}

.intro {
  height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
}

.intro h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

/* Container scroll - altezza dinamica */

.scroll-container {
  position: relative;
  background: transparent;
  img {
    border-radius: 24px;
  }
  margin-bottom: 24px;
  padding: 24px
}

@media (min-width: 1024px) {
  .scroll-container {
    margin-bottom: 80px;
    padding: 0px;
  }
}

/* Wrapper sticky */

.images-wrapper {
  position: sticky;
  top: 0;
  /* Verrà settato via JavaScript */
  width: 100%;
  height: 66vh;
}

@media (min-width: 1024px) {
  .images-wrapper {
    height: 100vh;
  }
}

.images-wrapper {
  overflow: hidden;
}

/* Slide singola */

.image-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 66vh;
}

@media (min-width: 1024px) {
  .image-slide {
    height: 100vh;
  }
}

.image-slide {
  transition: transform 0.1s ease-out;
  transform: translateY(100%);
  /* Default: nascosta sotto */
}

/* Prima slide sempre visibile */

.image-slide:first-child {
  transform: translateY(0%);
}

/* IMMAGINE COME TAG IMG */

.slide-img {
  width: 100vw;
  height: 66vh;
}

@media (min-width: 1024px) {
  .slide-img {
    height: 100vh;
  }
}

.slide-img {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  display: block;
}

/* Overlay */

.slide-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  z-index: 2;
}

/* Contenuto */

.slide-content {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  width: calc(100% - 48px);
}

@media (min-width: 1024px) {
  .slide-content {
    bottom: 256px;
    left: 50%;
    width: auto;
    --tw-translate-x: -50%;
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
}

.slide-content {
  /*left: 50%;
  transform: translate(-50%, -50%);*/
  text-align: center;
  color: white;
  z-index: 3;
  display: flex;
  height: 79px;
  align-items: center;
  justify-content: center;
}

.slide-content h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
}

.slide-content p {
  font-size: 1.2rem;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
}

/* Contatore */

.slide-counter {
  position: absolute;
  top: 30px;
  right: 30px;
  background: rgba(255,255,255,0.2);
  color: white;
  padding: 10px 20px;
  border-radius: 25px;
  font-weight: bold;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.3);
  z-index: 10;
}

/* Progress bar */

.progress-bar {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 4px;
  background: rgba(255,255,255,0.3);
  border-radius: 2px;
  overflow: hidden;
  z-index: 10;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1);
  width: 0%;
  transition: width 0.1s ease-out;
}

.final {
  height: 100vh;
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
}

/* Debug info */

.debug-info {
  position: fixed;
  top: 10px;
  left: 10px;
  background: rgba(0,0,0,0.8);
  color: white;
  padding: 10px;
  border-radius: 5px;
  font-family: monospace;
  font-size: 0.8rem;
  z-index: 1000;
  display: none;
  /* Nascosto di default */
}

.debug-info.show {
  display: block;
}

@media (max-width: 768px) {
  .slide-content h1 {
    font-size: 2rem;
  }

  .slide-counter {
    top: 20px;
    right: 20px;
    padding: 8px 16px;
    font-size: 0.9rem;
  }
}

.first img {
  width: 50%;
  text-align: center;
  margin: auto;
}

.footer-onda {
  width: 100%;
}

.footer-container {
  margin-top: -1px;
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  --tw-bg-opacity: 1;
  background-color: rgb(30 43 80 / var(--tw-bg-opacity, 1));
  padding: 1.5rem
}

@media (min-width: 1024px) {
  .footer-container {
    padding-left: 80px;
    padding-right: 80px;
    padding-bottom: 40px;
    padding-top: 1px;
  }
}

.footer-container {
  font-family: Roboto, sans-serif;
  font-size: 18px;
  line-height: 21px;
  --tw-text-opacity: 1;
  color: rgb(253 253 253 / var(--tw-text-opacity, 1));
  nav li a {
    font-family: Roboto, sans-serif;
  }
  nav li a {
    font-size: 18px;
  }
  nav li a {
    line-height: 21px;
  }
  nav li a {
    --tw-text-opacity: 1;
    color: rgb(253 253 253 / var(--tw-text-opacity, 1));
  }
  .footer-policies a {
    font-size: 16px;
  }
  .footer-policies a {
    line-height: 19px;
  }
  .footer-copyright {
    font-size: 16px;
  }
  .footer-copyright {
    line-height: 19px;
  }
  .footer-social {
    display: flex;
  }
  .footer-social {
    align-items: center;
  }
  .footer-social {
    justify-content: center;
  }
  .footer-social {
    gap: 2rem;
  }
}

.svg-container {
  width: 100%;
}

.svg-container svg {
  width: 100%;
  height: auto;
  display: block;
}

#menu-footer-riga-1, #menu-footer-riga-2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

@media (min-width: 1024px) {
  #menu-footer-riga-1, #menu-footer-riga-2 {
    flex-direction: row;
  }
}

.tracciamento_sez_container {
  a {
    text-decoration: underline;
  }
  .tracciamento_sez_titolo {
    padding-left: 89px;
  }
  .tracciamento_sez_titolo {
    padding-top: 80px;
  }
  .tracciamento_sez_titolo {
    padding-right: 80px;
  }
  .tracciamento_sez_titolo {
    padding-bottom: 24px;
  }
  .tracciamento_sez_titolo {
    width: 100%;
    max-width: 1440px;
    margin: auto;
  }
  .tracciamento_sez_titolo {
    font-family: "Fira Sans", sans-serif;
  }
  .tracciamento_sez_titolo {
    font-size: 36px;
  }
  .tracciamento_sez_titolo {
    font-weight: 700;
  }
  .tracciamento_sez_titolo {
    line-height: 43px;
  }
  .tracciamento_sez_titolo {
    --tw-text-opacity: 1;
    color: rgb(30 43 80 / var(--tw-text-opacity, 1));
  }
  .dati {
    display: flex;
  }
  .dati {
    flex-direction: column;
  }
  .dati {
    gap: 24px;
  }
  .dati {
    .riga {
    }
  }
  .tracciamento_sez_caseificio {
    display: flex;
  }
  .tracciamento_sez_caseificio {
    flex-direction: row;
  }
  .tracciamento_sez_caseificio {
    gap: 80px;
  }
  .tracciamento_sez_caseificio {
    --tw-text-opacity: 1;
    color: rgb(30 43 80 / var(--tw-text-opacity, 1));
  }
  .tracciamento_sez_caseificio {
    padding-top: 40px;
    padding-bottom: 40px;
    padding-left: 24px;
    padding-right: 24px;
  }
  @media (min-width: 1024px) {
    .tracciamento_sez_caseificio {
      padding-top: 40px;
      padding-bottom: 40px;
      padding-left: 24px;
      padding-right: 24px;
    }
  }
  .tracciamento_sez_caseificio {
    .titolo {
      padding-bottom: 24px;
    }
    .titolo {
      font-family: "Fira Sans", sans-serif;
    }
    .titolo {
      font-size: 24px;
    }
    .titolo {
      font-weight: 700;
    }
    .titolo {
      font-weight: 600;
    }
    .titolo {
      line-height: 29px;
    }
    .sottotitolo {
      padding-bottom: 40px;
    }
    .sottotitolo {
      font-family: Roboto, sans-serif;
    }
    .sottotitolo {
      font-size: 18px;
    }
    .sottotitolo {
      font-weight: 400;
    }
    .sottotitolo {
      line-height: 21px;
    }
  }
  .tracciamento_sez_azienda {
    display: flex;
  }
  .tracciamento_sez_azienda {
    flex-direction: row;
  }
  .tracciamento_sez_azienda {
    gap: 80px;
  }
  .tracciamento_sez_azienda {
    padding-top: 40px;
    padding-bottom: 40px;
    padding-left: 24px;
    padding-right: 24px;
  }
  @media (min-width: 1024px) {
    .tracciamento_sez_azienda {
      padding-top: 40px;
      padding-bottom: 40px;
      padding-left: 24px;
      padding-right: 24px;
    }
  }
  .tracciamento_sez_mucca {
    display: flex;
  }
  .tracciamento_sez_mucca {
    flex-direction: row;
  }
  .tracciamento_sez_mucca {
    gap: 80px;
  }
  .tracciamento_sez_mucca {
    padding-top: 40px;
    padding-bottom: 40px;
    padding-left: 24px;
    padding-right: 24px;
  }
  @media (min-width: 1024px) {
    .tracciamento_sez_mucca {
      padding-top: 40px;
      padding-bottom: 40px;
      padding-left: 24px;
      padding-right: 24px;
    }
  }
  .box-dati {
    width: 100%;
  }
  @media (min-width: 768px) {
    .box-dati {
      width: 400px;
    }
  }
  .box-img {
    width: 100%;
  }
  @media (min-width: 768px) {
    .box-img {
      width: 800px;
    }
  }
  .box-img {
    img {
      border-radius: 24px;
    }
  }
  .riga {
    display: flex;
  }
  .riga {
    gap: 0.5rem;
  }
  .caseificio_titolo {
    font-family: "Fira Sans", sans-serif;
  }
  .caseificio_titolo {
    font-size: 24px;
  }
  .caseificio_titolo {
    font-weight: 600;
  }
  .caseificio_titolo {
    line-height: 29px;
  }
  .caseificio_titolo {
    --tw-text-opacity: 1;
    color: rgb(30 43 80 / var(--tw-text-opacity, 1));
  }
}

.tracciabilita-mappa {
  display: flex;
  flex-direction: row;
  gap: 40px;
  padding-top: 40px;
  padding-bottom: 40px;
  padding-left: 24px;
  padding-right: 24px;
}

@media (min-width: 1024px) {
  .tracciabilita-mappa {
    padding-top: 40px;
    padding-bottom: 40px;
    padding-left: 24px;
    padding-right: 24px;
  }
}

.tracciabilita-mappa {
  width: 100%;
  max-width: 1440px;
  margin: auto;
  .tracciabilita-mappa-mappa {
    width: 100%;
  }
  @media (min-width: 768px) {
    .tracciabilita-mappa-mappa {
      width: 600px;
    }
  }
  .tracciabilita-mappa-boxs {
    display: flex;
  }
  .tracciabilita-mappa-boxs {
    width: 100%;
  }
  .tracciabilita-mappa-boxs {
    flex-direction: column;
  }
  .tracciabilita-mappa-boxs {
    gap: 1rem;
  }
  @media (min-width: 768px) {
    .tracciabilita-mappa-boxs {
      width: 400px;
    }
  }
  .tracciabilita-mappa-box {
    display: flex;
  }
  .tracciabilita-mappa-box {
    flex-direction: column;
  }
  .tracciabilita-mappa-box {
    gap: 16px;
  }
  .tracciabilita-mappa-box {
    padding: 24px;
  }
  .tracciabilita-mappa-box {
    .riga {
      display: flex;
    }
    .riga {
      gap: 0.5rem;
    }
  }
}

.tracciabilita-mappa-box {
  .dati a {
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .nome {
    --tw-text-opacity: 1;
    color: rgb(30 43 80 / var(--tw-text-opacity, 1));
  }
  .nome {
    /* Desktop/H4 */
    font-family: "Fira Sans";
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
  }
  .box-dati {
    display: none;
  }
  --tw-bg-opacity: 1;
  background-color: rgb(255 237 153 / var(--tw-bg-opacity, 1));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
  border-radius: 16px;
  &.active {
    --tw-bg-opacity: 1;
    background-color: rgb(255 209 0 / var(--tw-bg-opacity, 1));
  }
  &.active {
    .box-dati {
      display: block;
    }
  }
}

/* ==========================================================================
     Tracciamento LAYOUT
     ========================================================================== */

.tracciamento-container {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

@media (min-width: 1024px) {
  .tracciamento-container {
    max-width: 1440px;
  }
}

.tracciamento-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  text-align: center;
  padding: 24px;
}

@media (min-width: 768px) {
  .tracciamento-container {
    padding: 80px;
  }
}

@media (min-width: 1024px) {
  .tracciamento-container {
    padding: 80px;
  }
}

.tracciamento-titolo {
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
  font-family: "Fira Sans", sans-serif;
  font-size: 1.25rem;
  line-height: 1.75rem;
}

@media (min-width: 768px) {
  .tracciamento-titolo {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}

.tracciamento-titolo {
  line-height: 29px;
}

.tracciamento-sottotitolo {
  font-family: Roboto, sans-serif;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
  line-height: 21px;
}

.tracciamento-icona {
  display: flex;
  align-items: center;
  justify-content: center;
}

.tracciamento-icona-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 250 229 / var(--tw-bg-opacity, 1));
  height: 4rem;
  width: 4rem;
  /* Dimensioni fisse per cerchio perfetto */
}

.tracciamento-sfondo-yellow {
  --tw-bg-opacity: 1;
  background-color: rgb(255 209 0 / var(--tw-bg-opacity, 1));
}

/* CTA Tracciamento - Stile bottone specifico */

.cta-tracciamento {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding-top: 14px;
  padding-bottom: 14px;
  padding-left: 40px;
  padding-right: 40px;
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(30 43 80 / var(--tw-border-opacity, 1));
  text-align: center;
  font-family: Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  line-height: normal;
}

.cta-tracciamento:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
  text-align: center;
  font-family: Roboto, sans-serif;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
  font-size: 12px;
  padding-top: 7px;
  padding-bottom: 7px;
  padding-left: 20px;
  padding-right: 20px;
  line-height: normal;
}

.cta-tracciamento:focus,
.cta-tracciamento:focus-visible {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 32px;
  padding-right: 32px;
  border-radius: 0.5rem;
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(30 43 80 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 209 0 / var(--tw-bg-opacity, 1));
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: none !important;
  outline: none !important;
}

.tracciamento-cta {
  padding-top: 14px;
  padding-bottom: 14px;
  padding-left: 40px;
  padding-right: 40px;
  text-align: center;
  font-family: Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
  line-height: 19px;
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
  display: flex;
  padding: 14px 40px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  align-self: center;
  border-radius: 8px;
  border: 1px solid #1E2B50;
  width: auto;
}

/* ==========================================================================
   Tracciamento MODALE STYLES
   ========================================================================== */

/* Container principale modale */

.tracciamento-modal {
  position: fixed;
  inset: 0px;
  z-index: 9999;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.tracciamento-modal.hidden {
  pointer-events: none;
  opacity: 0;
}

/* Overlay scuro full-screen */

.tracciamento-modal-overlay {
  position: fixed;
  inset: 0px;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
  --tw-bg-opacity: 0.5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

/* Container per centrare la modale */

.tracciamento-modal-container {
  position: relative;
}

/* Contenuto della modale */

.tracciamento-modal-content {
  width: 800px;
  max-width: 100%;
}

@media not all and (min-width: 768px) {
  .tracciamento-modal-content {
    width: 100%;
    max-width: 90vw;
  }
}

.tracciamento-modal-content {
  --tw-bg-opacity: 1;
  background-color: rgb(253 253 253 / var(--tw-bg-opacity, 1));
  border-radius: 40px;
}

@media not all and (min-width: 768px) {
  .tracciamento-modal-content {
    border-radius: 20px;
  }
}

.tracciamento-modal-content {
  padding: 24px;
}

@media (min-width: 768px) {
  .tracciamento-modal-content {
    padding: 40px;
  }
}

.tracciamento-modal-content {
  position: relative;
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* Pulsante chiusura */

.tracciamento-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  height: 2rem;
  width: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
}

.tracciamento-modal-close:hover {
  --tw-text-opacity: 1;
  color: rgb(19 26 48 / var(--tw-text-opacity, 1));
}

.tracciamento-modal-close {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  cursor: pointer;
}

/* Layout interno modale con gap 40px */

.tracciamento-modal-content {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Header modale */

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-title {
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
  font-family: "Fira Sans", sans-serif;
  font-size: 1.25rem;
  line-height: 1.75rem;
}

/* Testo descrittivo */

.modal-testo {
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
  font-family: Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  line-height: 1.5;
}

/* Form container */

.modal-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.modal-form .label {
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
  font-family: Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
}

.modal-form .input input {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  align-self: stretch;
  border-radius: 1rem;
  --tw-bg-opacity: 1;
  background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
  font-family: Roboto, sans-serif;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 400;
  line-height: 21px;
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
}

.modal-form .input input:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(30 43 80 / var(--tw-ring-opacity, 1));
}

.modal-form .input input::-moz-placeholder {
  font-family: Roboto, sans-serif;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 400;
  line-height: 21px;
  --tw-text-opacity: 1;
  color: rgb(165 170 185 / var(--tw-text-opacity, 1));
  align-self: stretch;
}

.modal-form .input input::placeholder {
  font-family: Roboto, sans-serif;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 400;
  line-height: 21px;
  --tw-text-opacity: 1;
  color: rgb(165 170 185 / var(--tw-text-opacity, 1));
  align-self: stretch;
}

/* Pulsante Prosegui con specifiche CSS in Tailwind */

.modal-form .button {
  align-self: flex-end;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding-top: 14px;
  padding-bottom: 14px;
  padding-left: 40px;
  padding-right: 40px;
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 209 0 / var(--tw-bg-opacity, 1));
  cursor: pointer;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.modal-form .button:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(204 167 0 / var(--tw-bg-opacity, 1));
}

.modal-form .button {
  text-align: center;
  font-family: Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
  line-height: 19px;
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
}

/* Stato disabled del pulsante */

.modal-form .button.disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(233 234 235 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(164 167 174 / var(--tw-text-opacity, 1));
  cursor: not-allowed;
}

.modal-form .button.disabled:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(233 234 235 / var(--tw-bg-opacity, 1));
}

/* ==========================================================================
     Banner LAYOUT
     ========================================================================== */

/* BAnner Layout - Sezione con contenuto testo + immagine layout orizzontale */

.banner-section {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 40px;
  padding-bottom: 40px;
  padding-left: 24px;
  padding-right: 24px;
}

@media (min-width: 1024px) {
  .banner-section {
    padding-top: 40px;
    padding-bottom: 40px;
    padding-left: 24px;
    padding-right: 24px;
  }
}

.banner-section {
  border-radius: 1rem;
}

@media (min-width: 768px) {
  .banner-section {
    border-radius: 1.5rem;
  }
}

.banner-section {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Classi colore sfondo dinamico */
  .banner-bg-inherit {
    background-color: transparent;
  }
  .banner-bg-blu {
    --tw-bg-opacity: 1;
    background-color: rgb(30 43 80 / var(--tw-bg-opacity, 1));
  }
  .banner-container {
    width: 100%;
  }
  @media (min-width: 1024px) {
    .banner-container {
      width: 1200px;
    }
  }
  .banner-container {
    padding: 24px;
  }
  @media (min-width: 390px) {
    .banner-container {
      padding: 1rem;
    }
  }
  @media (min-width: 768px) {
    .banner-container {
      padding: 40px;
    }
  }
  .banner-container {
    /*@apply p-[24px] sm:p-[40px];*/
  }
  .banner-container {
    display: flex;
  }
  .banner-container {
    flex-direction: column;
  }
  @media (min-width: 1024px) {
    .banner-container {
      flex-direction: row;
    }
  }
  .banner-container {
    /* Mobile: stack, Desktop: orizzontale */
  }
  .banner-container {
    align-items: center;
  }
  .banner-container {
    justify-content: space-between;
  }
  @media (min-width: 1024px) {
    .banner-container {
      align-items: flex-start;
    }
  }
  .banner-container {
    gap: 1.5rem;
  }
  @media (min-width: 768px) {
    .banner-container {
      gap: 2.5rem;
    }
  }
  .banner-container {
    border-radius: 1rem;
  }
  @media (min-width: 1024px) {
    .banner-container {
      border-radius: 1.5rem;
    }
  }
  /* Content Area - Sinistra */
  .banner-content {
    flex: 1 1 0%;
  }
  .banner-content {
    /* Prende spazio flessibile disponibile */
  }
  .banner-content {
    display: flex;
  }
  .banner-content {
    flex-direction: column;
  }
  .banner-content {
    align-items: flex-start;
  }
  .banner-content {
    justify-content: center;
  }
  .banner-content {
    order: 3;
  }
  .banner-content {
    width: 100%;
  }
  @media (min-width: 768px) {
    .banner-content {
      order: 1;
    }
  }
  @media (min-width: 1024px) {
    .banner-content {
      margin: auto;
    }
  }
  @media (min-width: 1024px) {
    .banner-content {
      width: auto;
    }
  }
  .banner-content {
    /* Sempre primo elemento in ordine */
    &.banner-content-image-s {
      order: 3;
    }
    &.banner-content-image-d {
    }
    a {
      --tw-text-opacity: 1;
      color: rgb(255 250 229 / var(--tw-text-opacity, 1));
    }
    a {
      text-decoration-line: underline;
    }
    .banner-cta-wrapper a {
      text-decoration-line: none;
    }
  }
  .banner-text-area {
    display: flex;
  }
  .banner-text-area {
    flex-direction: column;
  }
  .banner-text-area {
    align-items: flex-start;
  }
  .banner-text-area {
    justify-content: center;
  }
  .banner-text-area {
    gap: 1.5rem;
  }
  .banner-text-area {
    /* 24px gap tra titolo e descrizione */
  }
  .banner-text-area {
    margin-bottom: 2.5rem;
  }
  .banner-text-area {
    /* 40px spacing prima del CTA */
  }
  .banner-title {
    font-family: "Fira Sans", sans-serif;
  }
  .banner-title {
    font-weight: 700;
  }
  .banner-title {
    --tw-text-opacity: 1;
    color: rgb(255 250 229 / var(--tw-text-opacity, 1));
  }
  .banner-title {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
  @media (min-width: 768px) {
    .banner-title {
      font-size: 2.25rem;
      line-height: 2.5rem;
    }
  }
  .banner-title {
    /* 30px mobile → 36px desktop */
  }
  .banner-title {
    text-align: left;
  }
  .banner-title {
    line-height: 1.5;
  }
  .banner-title {
    width: 100%;
  }
  .banner-title {
    /* Full width per text wrapping */
    line-height: normal;
  }
  .banner-description {
    font-family: Roboto, sans-serif;
  }
  .banner-description {
    font-weight: 400;
  }
  .banner-description {
    --tw-text-opacity: 1;
    color: rgb(255 250 229 / var(--tw-text-opacity, 1));
  }
  .banner-description {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
  .banner-description {
    /* 18px per entrambi mobile/desktop */
  }
  .banner-description {
    text-align: left;
  }
  .banner-description {
    line-height: 1.625;
  }
  .banner-description {
    width: 100%;
  }
  .banner-description {
    /* Full width per text wrapping */
    line-height: normal;
  }
  /* CTA Button Area */
  .banner-cta-wrapper {
    display: flex;
  }
  .banner-cta-wrapper {
    flex-direction: column;
  }
  .banner-cta-wrapper {
    align-items: flex-start;
  }
  .banner-cta-wrapper {
    justify-content: flex-start;
  }
  .banner-cta-wrapper {
    width: 100%;
  }
  @media (min-width: 1024px) {
    .banner-cta-wrapper {
      width: auto;
    }
  }
  .banner-cta {
    width: 100%;
  }
  .banner-cta {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
  .banner-cta {
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
  }
  .banner-cta {
    /* Padding interno: 40px/14px */
  }
  .banner-cta {
    position: relative;
  }
  .banner-cta {
    border-radius: 0.5rem;
  }
  .banner-cta {
    border-width: 1px;
  }
  .banner-cta {
    --tw-border-opacity: 1;
    border-color: rgb(255 250 229 / var(--tw-border-opacity, 1));
  }
  .banner-cta {
    /* Outline giallo */
  }
  .banner-cta {
    display: flex;
  }
  .banner-cta {
    align-items: center;
  }
  .banner-cta {
    justify-content: center;
  }
  .banner-cta {
    font-family: Roboto, sans-serif;
  }
  .banner-cta {
    font-size: 1rem;
    line-height: 1.5rem;
  }
  .banner-cta {
    font-weight: 700;
  }
  .banner-cta {
    --tw-text-opacity: 1;
    color: rgb(255 250 229 / var(--tw-text-opacity, 1));
  }
  .banner-cta {
    text-align: center;
  }
  .banner-cta {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
  .banner-cta {
    transition-duration: 300ms;
  }
  .banner-cta {
    /* Hover effects */
  }
  .banner-cta:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(255 250 229 / var(--tw-bg-opacity, 1));
  }
  .banner-cta:hover {
    --tw-text-opacity: 1;
    color: rgb(30 43 80 / var(--tw-text-opacity, 1));
  }
  .banner-cta:focus {
    --tw-bg-opacity: 1;
    background-color: rgb(255 250 229 / var(--tw-bg-opacity, 1));
  }
  .banner-cta:focus {
    --tw-text-opacity: 1;
    color: rgb(30 43 80 / var(--tw-text-opacity, 1));
  }
  .banner-cta:focus {
    outline-width: 2px;
  }
  .banner-cta:focus {
    outline-color: #FFF6CC;
  }
  /* Image Area - Destra */
  .banner-image-area {
    position: relative;
  }
  .banner-image-area {
    /* Per posizionamento elemento decorativo */
  }
  .banner-image-area {
    flex-shrink: 0;
  }
  .banner-image-area {
    /* Non si riduce nel flex container */
  }
  .banner-image-area {
    order: 2;
  }
  @media (min-width: 768px) {
    .banner-image-area {
      order: 2;
    }
  }
  .banner-image-area {
    /* Sempre secondo elemento in ordine */
    &.banner-image-area-image-s {
      order: 1;
    }
    &.banner-image-area-image-s {
      img {
        border-radius: 1rem;
      }
    }
    &.banner-image-area-image-d {
      img {
        border-radius: 1rem;
      }
    }
  }
  .banner-image {
    height: 100%;
  }
  .banner-image {
    width: 100%;
  }
  .banner-image {
    -o-object-fit: cover;
       object-fit: cover;
  }
  .banner-image {
    /* Riempie container mantenendo proporzioni */
  }
  .banner-image {
    border-radius: 1.5rem;
  }
  .banner-image {
    padding: 0.5rem;
  }
  .banner-image {
    /* Bordi arrotondati + padding interno come da design */
  }
  .banner-image {
    position: absolute;
  }
  .banner-image {
    top: 0px;
  }
  .banner-image {
    left: 0px;
  }
  .banner-image {
    /* Posizionamento assoluto nel container */
  }
  /* Elemento Decorativo (bordo giallo) */
  .banner-decoration svg {
    /*@apply w-28 h-32 md:w-48 md:h-56;*/
    /* 192x224px come da design originale */
  }
}

.banner-decoration {
  position: absolute;
  /* Posizionamento assoluto rispetto al parent */
  /* Posizionamento responsive */
  right: 0px;
  bottom: 0px;
  /* Mobile: in basso a destra, Desktop: offset specifico */
  z-index: 2;
  /* Sopra l'immagine */
  stroke: #fffae5;
  transform: rotate(-0.482deg);
  flex-shrink: 0;
}

.banner-row {
  display: flex;
  gap: 0.5rem;
}

.banner-testo {
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(255 250 229 / var(--tw-text-opacity, 1));
  font-size: 18px;
  line-height: 21px;
}

.banner-icon svg {
  height: 1.5rem;
  width: 1.5rem;
}

.mappa-divisore {
  margin-top: 24px;
  margin-bottom: 24px;
}

@media (min-width: 1024px) {
  .mappa-divisore {
    margin-top: 80px;
    margin-bottom: 40px;
  }
}

.mappa-container.mappa-divisore-0 {
  padding-bottom: 40px;
}

@media (min-width: 1024px) {
  .mappa-container.mappa-divisore-0 {
    padding-bottom: 80px;
  }
}

.mappa-intro {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 40px;
  padding-left: 24px;
  padding-right: 24px;
}

@media (min-width: 1024px) {
  .mappa-intro {
    padding-bottom: 80px;
    padding-left: 80px;
    padding-right: 80px;
  }
}

.mappa-intro {
  div {
    width: 100%;
  }
  div {
    text-align: center;
  }
  .mappa-titolo {
    text-align: center;
  }
  .mappa-titolo {
    font-family: "Fira Sans", sans-serif;
  }
  .mappa-titolo {
    font-weight: 700;
  }
  .mappa-titolo {
    --tw-text-opacity: 1;
    color: rgb(30 43 80 / var(--tw-text-opacity, 1));
  }
  .mappa-titolo {
    font-size: 30px;
    line-height: 36px;
  }
  @media (min-width: 1024px) {
    .mappa-titolo {
      font-size: 36px;
      line-height: 43px;
    }
  }
  .mappa-descrizione {
    text-align: center;
  }
  .mappa-descrizione {
    font-family: Roboto, sans-serif;
  }
  .mappa-descrizione {
    font-weight: 400;
  }
  .mappa-descrizione {
    --tw-text-opacity: 1;
    color: rgb(12 17 32 / var(--tw-text-opacity, 1));
  }
}

.mappa-boxes {
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  text-align: center;
  padding-top: 40px;
  padding-bottom: 40px;
  padding-left: 24px;
  padding-right: 24px;
}

@media (min-width: 1024px) {
  .mappa-boxes {
    padding-top: 40px;
    padding-bottom: 40px;
    padding-left: 24px;
    padding-right: 24px;
    flex-direction: row;
  }
}

.mappa-box-mappa {
  width: 100%;
}

@media (min-width: 1024px) {
  .mappa-box-mappa {
    width: 600px;
    max-width: 600px;
  }
}

.mappa-box-mappa {
  img {
    height: auto;
  }
  img {
    width: 100%;
  }
  img {
    border-radius: 24px;
  }
  img {
    -o-object-fit: cover;
       object-fit: cover;
  }
}

.mappa-box-list {
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 237 153 / var(--tw-bg-opacity, 1));
  padding: 24px;
  &.active {
    --tw-bg-opacity: 1;
    background-color: rgb(255 209 0 / var(--tw-bg-opacity, 1));
  }
  &.active {
    .nome {
      margin-bottom: 24px;
    }
    .box-dati {
      display: block;
    }
    .box-dati {
      a {
        text-decoration: underline;
      }
    }
  }
  .slideauto_slide_item.box-dati {
    opacity: 0;
  }
  .slideauto_slide_item.box-dati {
    display: none;
  }
  .slideauto-pause-bars.box-dati::before,
  .slideauto-pause-bars.box-dati::after,
  .slideauto-play-triangle.box-dati::before {
    display: none;
  }
  .slideauto-pause-bars.box-dati::before,
  .slideauto-pause-bars.box-dati::after,
  .slideauto-play-triangle.box-dati::before {
    display: none;
  }
  .slideauto-pause-bars.box-dati::before,
  .slideauto-pause-bars.box-dati::after,
  .slideauto-play-triangle.box-dati::before {
    display: none;
  }
  .box-dati {
    display: none;
  }
  .hero-pause-bars.box-dati::before,
.hero-pause-bars.box-dati::after,
.hero-play-triangle.box-dati::before {
    display: none;
  }
  .hero-pause-bars.box-dati::before,
.hero-pause-bars.box-dati::after,
.hero-play-triangle.box-dati::before {
    display: none;
  }
  .hero-pause-bars.box-dati::before,
.hero-pause-bars.box-dati::after,
.hero-play-triangle.box-dati::before {
    display: none;
  }
  .carpro-pause-bars.box-dati::before,
.carpro-pause-bars.box-dati::after,
.carpro-play-triangle.box-dati::before {
    display: none;
  }
  .carpro-pause-bars.box-dati::before,
.carpro-pause-bars.box-dati::after,
.carpro-play-triangle.box-dati::before {
    display: none;
  }
  .carpro-pause-bars.box-dati::before,
.carpro-pause-bars.box-dati::after,
.carpro-play-triangle.box-dati::before {
    display: none;
  }
  .sliart-pause-bars.box-dati::before,
.sliart-pause-bars.box-dati::after,
.sliart-play-triangle.box-dati::before {
    display: none;
  }
  .sliart-pause-bars.box-dati::before,
.sliart-pause-bars.box-dati::after,
.sliart-play-triangle.box-dati::before {
    display: none;
  }
  .sliart-pause-bars.box-dati::before,
.sliart-pause-bars.box-dati::after,
.sliart-play-triangle.box-dati::before {
    display: none;
  }
  .cta-modal.box-dati {
    pointer-events: none;
  }
  .cta-modal.box-dati {
    opacity: 0;
  }
  .cta-modal:not(.box-dati) {
    opacity: 1;
  }
  .tracciamento-modal.box-dati {
    pointer-events: none;
  }
  .tracciamento-modal.box-dati {
    opacity: 0;
  }
  .nome {
    text-align: start;
  }
  .nome {
    font-family: "Fira Sans", sans-serif;
  }
  .nome {
    font-weight: 700;
  }
  .nome {
    font-size: 24px;
    line-height: 29px;
  }
  .nome {
    cursor:pointer;
  }
}

.mappa_riga {
  display: flex;
  flex-direction: row;
  gap: 8px;
  text-align: start;
}

.mappa-boxes-list {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 24px;
}

@media (min-width: 1024px) {
  .mappa-boxes-list {
    width: 400px;
  }
}

/* ==========================================================================
   SLIDER INTERATTIVO LAYOUT
   ========================================================================== */

/* ==========================================================================
   Slider Modal - Loading & Error States
   ========================================================================== */

.modal-image {
  border-radius: 32px;
  height: 405px;
  align-self: stretch;
  aspect-ratio: 16/9;
  background-color: #FFF;
  background-position: 50%;
  background-size: cover;
  background-repeat: no-repeat;
  /* Fallback colore quando immagine non carica */
  background-color: lightgray;
}

.modal-loading,
.modal-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
  text-align: center;
  min-height: 200px;
}

.modal-loading p {
  font-family: Roboto, sans-serif;
  font-size: 1.125rem;
  line-height: 1.75rem;
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}

.modal-loading p {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.modal-error p {
  margin-bottom: 1rem;
  font-family: Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}

.modal-error .slider-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(30 43 80 / var(--tw-bg-opacity, 1));
  font-family: Roboto, sans-serif;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.modal-error .slider-modal-close:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(25 34 64 / var(--tw-bg-opacity, 1));
}

/* ==========================================================================
   SLIDER PERSONE BONTIAMO LAYOUT
   ========================================================================== */

/* fira-sans-regular - latin */

@font-face {
  font-display: swap;

  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */

  font-family: 'Fira Sans';

  font-style: normal;

  font-weight: 400;

  src: url('../fonts/fira-sans-v18-latin-regular.woff2') format('woff2');

  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* fira-sans-500 - latin */

@font-face {
  font-display: swap;

  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */

  font-family: 'Fira Sans';

  font-style: normal;

  font-weight: 500;

  src: url('../fonts/fira-sans-v18-latin-500.woff2') format('woff2');

  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* fira-sans-600 - latin */

@font-face {
  font-display: swap;

  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */

  font-family: 'Fira Sans';

  font-style: normal;

  font-weight: 600;

  src: url('../fonts/fira-sans-v18-latin-600.woff2') format('woff2');

  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* fira-sans-700 - latin */

@font-face {
  font-display: swap;

  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */

  font-family: 'Fira Sans';

  font-style: normal;

  font-weight: 700;

  src: url('../fonts/fira-sans-v18-latin-700.woff2') format('woff2');

  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-regular - latin */

@font-face {
  font-display: swap;

  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */

  font-family: 'Roboto';

  font-style: normal;

  font-weight: 400;

  src: url('../fonts/roboto-v49-latin-regular.woff2') format('woff2');

  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-500 - latin */

@font-face {
  font-display: swap;

  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */

  font-family: 'Roboto';

  font-style: normal;

  font-weight: 500;

  src: url('../fonts/roboto-v49-latin-500.woff2') format('woff2');

  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-600 - latin */

@font-face {
  font-display: swap;

  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */

  font-family: 'Roboto';

  font-style: normal;

  font-weight: 600;

  src: url('../fonts/roboto-v49-latin-600.woff2') format('woff2');

  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-700 - latin */

@font-face {
  font-display: swap;

  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */

  font-family: 'Roboto';

  font-style: normal;

  font-weight: 700;

  src: url('../fonts/roboto-v49-latin-700.woff2') format('woff2');

  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com
 */

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

[type='text'],input:where(:not([type])),[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  border-radius: 0px;
  padding-top: 0.5rem;
  padding-right: 0.75rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-shadow: 0 0 #0000;
}

[type='text']:focus, input:where(:not([type])):focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  border-color: #2563eb;
}

input::-moz-placeholder, textarea::-moz-placeholder {
  color: #6b7280;
  opacity: 1;
}

input::placeholder,textarea::placeholder {
  color: #6b7280;
  opacity: 1;
}

::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}

::-webkit-date-and-time-value {
  min-height: 1.5em;
  text-align: inherit;
}

::-webkit-datetime-edit {
  display: inline-flex;
}

::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field {
  padding-top: 0;
  padding-bottom: 0;
}

select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
  -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
}

[multiple],[size]:where(select:not([size="1"])) {
  background-image: initial;
  background-position: initial;
  background-repeat: unset;
  background-size: initial;
  padding-right: 0.75rem;
  -webkit-print-color-adjust: unset;
          print-color-adjust: unset;
}

[type='checkbox'],[type='radio'] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding: 0;
  -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
  display: inline-block;
  vertical-align: middle;
  background-origin: border-box;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  flex-shrink: 0;
  height: 1rem;
  width: 1rem;
  color: #2563eb;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  --tw-shadow: 0 0 #0000;
}

[type='checkbox'] {
  border-radius: 0px;
}

[type='radio'] {
  border-radius: 100%;
}

[type='checkbox']:focus,[type='radio']:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

[type='checkbox']:checked,[type='radio']:checked {
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

[type='checkbox']:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}

@media (forced-colors: active)  {
  [type='checkbox']:checked {
    -webkit-appearance: auto;
       -moz-appearance: auto;
            appearance: auto;
  }
}

[type='radio']:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}

@media (forced-colors: active)  {
  [type='radio']:checked {
    -webkit-appearance: auto;
       -moz-appearance: auto;
            appearance: auto;
  }
}

[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus {
  border-color: transparent;
  background-color: currentColor;
}

[type='checkbox']:indeterminate {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

@media (forced-colors: active)  {
  [type='checkbox']:indeterminate {
    -webkit-appearance: auto;
       -moz-appearance: auto;
            appearance: auto;
  }
}

[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus {
  border-color: transparent;
  background-color: currentColor;
}

[type='file'] {
  background: unset;
  border-color: inherit;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-size: unset;
  line-height: inherit;
}

[type='file']:focus {
  outline: 1px solid ButtonText;
  outline: 1px auto -webkit-focus-ring-color;
}

/* Typography */

html {
  scroll-behavior: smooth;
}

body {
  --tw-bg-opacity: 1;
  background-color: rgb(253 253 253 / var(--tw-bg-opacity, 1));
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
  line-height: 1.625;
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
  font-feature-settings: "liga" 1, "kern" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings */

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
  font-weight: 700;
  line-height: 1.25;
}

h1 {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

@media (min-width: 768px) {
  h1 {
    font-size: 3rem;
    line-height: 1;
  }
}

@media (min-width: 1024px) {
  h1 {
    font-size: 3.75rem;
    line-height: 1;
  }
}

h2 {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

@media (min-width: 768px) {
  h2 {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
}

@media (min-width: 1024px) {
  h2 {
    font-size: 3rem;
    line-height: 1;
  }
}

h3 {
  font-size: 1.5rem;
  line-height: 2rem;
}

@media (min-width: 768px) {
  h3 {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
}

@media (min-width: 1024px) {
  h3 {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
}

h4 {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

@media (min-width: 768px) {
  h4 {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}

@media (min-width: 1024px) {
  h4 {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
}

h5 {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

@media (min-width: 768px) {
  h5 {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px) {
  h5 {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}

h6 {
  font-size: 1rem;
  line-height: 1.5rem;
}

@media (min-width: 768px) {
  h6 {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px) {
  h6 {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}

/* Links */

a {
  --tw-text-opacity: 1;
  color: rgb(25 34 64 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

a:hover {
  --tw-text-opacity: 1;
  color: rgb(19 26 48 / var(--tw-text-opacity, 1));
}

/* Forms */

input:focus, textarea:focus, select:focus {
  --tw-border-opacity: 1;
  border-color: rgb(30 43 80 / var(--tw-border-opacity, 1));
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(30 43 80 / var(--tw-ring-opacity, 1));
}

/* Focus management */

*:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

*:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(30 43 80 / var(--tw-ring-opacity, 1));
  --tw-ring-offset-width: 2px;
}

.container {
  width: 100%;
}

@media (min-width: 390px) {
  .container {
    max-width: 390px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1440px) {
  .container {
    max-width: 1440px;
  }
}

.prose {
  color: var(--tw-prose-body);
  max-width: 65ch;
}

.prose :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

.prose :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-lead);
  font-size: 1.25em;
  line-height: 1.6;
  margin-top: 1.2em;
  margin-bottom: 1.2em;
}

.prose :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-links);
  text-decoration: underline;
  font-weight: 500;
}

.prose :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-bold);
  font-weight: 600;
}

.prose :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: decimal;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-inline-start: 1.625em;
}

.prose :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-alpha;
}

.prose :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-alpha;
}

.prose :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-alpha;
}

.prose :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-alpha;
}

.prose :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-roman;
}

.prose :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-roman;
}

.prose :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-roman;
}

.prose :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-roman;
}

.prose :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: decimal;
}

.prose :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: disc;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-inline-start: 1.625em;
}

.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
  font-weight: 400;
  color: var(--tw-prose-counters);
}

.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
  color: var(--tw-prose-bullets);
}

.prose :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.25em;
}

.prose :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-color: var(--tw-prose-hr);
  border-top-width: 1px;
  margin-top: 3em;
  margin-bottom: 3em;
}

.prose :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 500;
  font-style: italic;
  color: var(--tw-prose-quotes);
  border-inline-start-width: 0.25rem;
  border-inline-start-color: var(--tw-prose-quote-borders);
  quotes: "\201C""\201D""\2018""\2019";
  margin-top: 1.6em;
  margin-bottom: 1.6em;
  padding-inline-start: 1em;
}

.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: open-quote;
}

.prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: close-quote;
}

.prose :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 800;
  font-size: 2.25em;
  margin-top: 0;
  margin-bottom: 0.8888889em;
  line-height: 1.1111111;
}

.prose :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 900;
  color: inherit;
}

.prose :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 700;
  font-size: 1.5em;
  margin-top: 2em;
  margin-bottom: 1em;
  line-height: 1.3333333;
}

.prose :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 800;
  color: inherit;
}

.prose :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  font-size: 1.25em;
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  line-height: 1.6;
}

.prose :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 700;
  color: inherit;
}

.prose :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  line-height: 1.5;
}

.prose :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 700;
  color: inherit;
}

.prose :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}

.prose :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  display: block;
  margin-top: 2em;
  margin-bottom: 2em;
}

.prose :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}

.prose :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 500;
  font-family: inherit;
  color: var(--tw-prose-kbd);
  box-shadow: 0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%);
  font-size: 0.875em;
  border-radius: 0.3125rem;
  padding-top: 0.1875em;
  padding-inline-end: 0.375em;
  padding-bottom: 0.1875em;
  padding-inline-start: 0.375em;
}

.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-code);
  font-weight: 600;
  font-size: 0.875em;
}

.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: "`";
}

.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: "`";
}

.prose :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
  font-size: 0.875em;
}

.prose :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
  font-size: 0.9em;
}

.prose :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-pre-code);
  background-color: var(--tw-prose-pre-bg);
  overflow-x: auto;
  font-weight: 400;
  font-size: 0.875em;
  line-height: 1.7142857;
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
  border-radius: 0.375rem;
  padding-top: 0.8571429em;
  padding-inline-end: 1.1428571em;
  padding-bottom: 0.8571429em;
  padding-inline-start: 1.1428571em;
}

.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  background-color: transparent;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-weight: inherit;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}

.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: none;
}

.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: none;
}

.prose :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  width: 100%;
  table-layout: auto;
  margin-top: 2em;
  margin-bottom: 2em;
  font-size: 0.875em;
  line-height: 1.7142857;
}

.prose :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-th-borders);
}

.prose :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  vertical-align: bottom;
  padding-inline-end: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-inline-start: 0.5714286em;
}

.prose :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-td-borders);
}

.prose :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 0;
}

.prose :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  vertical-align: baseline;
}

.prose :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-top-width: 1px;
  border-top-color: var(--tw-prose-th-borders);
}

.prose :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  vertical-align: top;
}

.prose :where(th, td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  text-align: start;
}

.prose :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}

.prose :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-captions);
  font-size: 0.875em;
  line-height: 1.4285714;
  margin-top: 0.8571429em;
}

.prose {
  --tw-prose-body: #374151;
  --tw-prose-headings: #111827;
  --tw-prose-lead: #4b5563;
  --tw-prose-links: #111827;
  --tw-prose-bold: #111827;
  --tw-prose-counters: #6b7280;
  --tw-prose-bullets: #d1d5db;
  --tw-prose-hr: #e5e7eb;
  --tw-prose-quotes: #111827;
  --tw-prose-quote-borders: #e5e7eb;
  --tw-prose-captions: #6b7280;
  --tw-prose-kbd: #111827;
  --tw-prose-kbd-shadows: 17 24 39;
  --tw-prose-code: #111827;
  --tw-prose-pre-code: #e5e7eb;
  --tw-prose-pre-bg: #1f2937;
  --tw-prose-th-borders: #d1d5db;
  --tw-prose-td-borders: #e5e7eb;
  --tw-prose-invert-body: #d1d5db;
  --tw-prose-invert-headings: #fff;
  --tw-prose-invert-lead: #9ca3af;
  --tw-prose-invert-links: #fff;
  --tw-prose-invert-bold: #fff;
  --tw-prose-invert-counters: #9ca3af;
  --tw-prose-invert-bullets: #4b5563;
  --tw-prose-invert-hr: #374151;
  --tw-prose-invert-quotes: #f3f4f6;
  --tw-prose-invert-quote-borders: #374151;
  --tw-prose-invert-captions: #9ca3af;
  --tw-prose-invert-kbd: #fff;
  --tw-prose-invert-kbd-shadows: 255 255 255;
  --tw-prose-invert-code: #fff;
  --tw-prose-invert-pre-code: #d1d5db;
  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
  --tw-prose-invert-th-borders: #4b5563;
  --tw-prose-invert-td-borders: #374151;
  font-size: 1rem;
  line-height: 1.75;
}

.prose :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}

.prose :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0.375em;
}

.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0.375em;
}

.prose :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

.prose :where(.prose > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
}

.prose :where(.prose > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.25em;
}

.prose :where(.prose > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
}

.prose :where(.prose > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.25em;
}

.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

.prose :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

.prose :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5em;
  padding-inline-start: 1.625em;
}

.prose :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0;
}

.prose :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 0;
}

.prose :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-top: 0.5714286em;
  padding-inline-end: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-inline-start: 0.5714286em;
}

.prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0;
}

.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 0;
}

.prose :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}

.prose :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 0;
}

.prose-lg {
  font-size: 1.125rem;
  line-height: 1.7777778;
}

.prose-lg :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.3333333em;
  margin-bottom: 1.3333333em;
}

.prose-lg :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 1.2222222em;
  line-height: 1.4545455;
  margin-top: 1.0909091em;
  margin-bottom: 1.0909091em;
}

.prose-lg :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.6666667em;
  margin-bottom: 1.6666667em;
  padding-inline-start: 1em;
}

.prose-lg :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 2.6666667em;
  margin-top: 0;
  margin-bottom: 0.8333333em;
  line-height: 1;
}

.prose-lg :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 1.6666667em;
  margin-top: 1.8666667em;
  margin-bottom: 1.0666667em;
  line-height: 1.3333333;
}

.prose-lg :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 1.3333333em;
  margin-top: 1.6666667em;
  margin-bottom: 0.6666667em;
  line-height: 1.5;
}

.prose-lg :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.7777778em;
  margin-bottom: 0.4444444em;
  line-height: 1.5555556;
}

.prose-lg :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.7777778em;
  margin-bottom: 1.7777778em;
}

.prose-lg :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.7777778em;
  margin-bottom: 1.7777778em;
}

.prose-lg :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}

.prose-lg :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.7777778em;
  margin-bottom: 1.7777778em;
}

.prose-lg :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.8888889em;
  border-radius: 0.3125rem;
  padding-top: 0.2222222em;
  padding-inline-end: 0.4444444em;
  padding-bottom: 0.2222222em;
  padding-inline-start: 0.4444444em;
}

.prose-lg :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.8888889em;
}

.prose-lg :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.8666667em;
}

.prose-lg :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.875em;
}

.prose-lg :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.8888889em;
  line-height: 1.75;
  margin-top: 2em;
  margin-bottom: 2em;
  border-radius: 0.375rem;
  padding-top: 1em;
  padding-inline-end: 1.5em;
  padding-bottom: 1em;
  padding-inline-start: 1.5em;
}

.prose-lg :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.3333333em;
  margin-bottom: 1.3333333em;
  padding-inline-start: 1.5555556em;
}

.prose-lg :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.3333333em;
  margin-bottom: 1.3333333em;
  padding-inline-start: 1.5555556em;
}

.prose-lg :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.6666667em;
  margin-bottom: 0.6666667em;
}

.prose-lg :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0.4444444em;
}

.prose-lg :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0.4444444em;
}

.prose-lg :where(.prose-lg > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.8888889em;
  margin-bottom: 0.8888889em;
}

.prose-lg :where(.prose-lg > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.3333333em;
}

.prose-lg :where(.prose-lg > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.3333333em;
}

.prose-lg :where(.prose-lg > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.3333333em;
}

.prose-lg :where(.prose-lg > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.3333333em;
}

.prose-lg :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.8888889em;
  margin-bottom: 0.8888889em;
}

.prose-lg :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.3333333em;
  margin-bottom: 1.3333333em;
}

.prose-lg :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.3333333em;
}

.prose-lg :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.6666667em;
  padding-inline-start: 1.5555556em;
}

.prose-lg :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 3.1111111em;
  margin-bottom: 3.1111111em;
}

.prose-lg :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose-lg :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose-lg :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose-lg :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose-lg :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.8888889em;
  line-height: 1.5;
}

.prose-lg :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 0.75em;
  padding-bottom: 0.75em;
  padding-inline-start: 0.75em;
}

.prose-lg :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0;
}

.prose-lg :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 0;
}

.prose-lg :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-top: 0.75em;
  padding-inline-end: 0.75em;
  padding-bottom: 0.75em;
  padding-inline-start: 0.75em;
}

.prose-lg :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0;
}

.prose-lg :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 0;
}

.prose-lg :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.7777778em;
  margin-bottom: 1.7777778em;
}

.prose-lg :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}

.prose-lg :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.8888889em;
  line-height: 1.5;
  margin-top: 1em;
}

.prose-lg :where(.prose-lg > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose-lg :where(.prose-lg > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-weight: 500;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.lazy-img {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.lazy-loading {
  opacity: 0;
}

.lazy-loading::after {
  content: "";
  position: absolute;
  inset: 0px;
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}

.lazy-loading::after {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  border-radius: 0.25rem;
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}

.lazy-loaded {
  opacity: 1;
}

.lazy-error {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
  opacity: 0.5;
}

.lazy-error::after {
  content: "⚠";
  position: absolute;
  inset: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  line-height: 2rem;
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}

.lazy-placeholder {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}

.lazy-bg-loading {
  position: relative;
  overflow: hidden;
}

.lazy-bg-loading::before {
  content: "";
  position: absolute;
  inset: 0px;
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}

.lazy-bg-loading::before {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}

/* Divisore SVG riutilizzabile per tutte le sezioni */

.section-divisore {
  /* Larghezza e margin responsive */
  width: calc(100% + 47px);
}

@media (min-width: 390px) {
  .section-divisore {
    width: calc(100% + 79px);
  }
}

.section-divisore {
  width: 100%;
  /* Solo altezza, nessun padding bottom */
  height: 82px;
  /* Trasformazione e opacity -rotate-[0.482deg] */
  opacity: 0.1;
  /* Background con SVG ripetuto */
  background-image: url('../images/separatore-b.svg');
  background-size: 73px 82px;
  background-position: left top;
  background-repeat: repeat-x;
}

/* Intro Layout - Sezione introduttiva con breadcrumb, titolo e sottotitolo */

.intro-section {
  position: relative;
  width: 100%;
  --tw-bg-opacity: 1;
  background-color: rgb(253 253 253 / var(--tw-bg-opacity, 1));
  overflow-x: hidden;
  .intro-image-area {
    position: relative;
  }
  .intro-image-area {
    height: 354px;
  }
  @media (min-width: 768px) {
    .intro-image-area {
      height: 425px;
    }
  }
  @media (min-width: 1024px) {
    .intro-image-area {
      height: 60vh;
    }
  }
  .intro-image-area {
    /* Altezza fissa per prevenire CLS (rimosso aspect-ratio che limitava larghezza) */
  }
  .intro-image-area {
    min-height: 354px;
  }
  .intro-image-area {
    width: 100%;
  }
  .intro-picture {
    height: 100%;
  }
  .intro-picture {
    width: 100%;
  }
  .hero-image {
    width: 100%;
  }
  .hero-image {
    -o-object-fit: cover;
       object-fit: cover;
  }
}

.intro-container {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

@media (min-width: 1024px) {
  .intro-container {
    max-width: 1440px;
  }
}

.intro-container {
  /*@apply xs:py-10 xs:px-6;
    @apply sm:py-10 sm:px-20;
    @apply md:py-6 md:px-10;
     */
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.5rem;
  text-align: center;
}

.intro-title {
  font-family: "Fira Sans", sans-serif;
  font-size: 2.25rem;
  line-height: 2.5rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
}

@media (min-width: 768px) {
  .intro-title {
    font-size: 3rem;
    line-height: 1;
  }
}

.intro-sottotitolo {
  font-family: Roboto, sans-serif;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
}

.intro-breadcrumb {
  font-family: Roboto, sans-serif;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
}

.intro-onda {
  position: absolute;
  bottom: -1px;
  /* rotate: none; */
  transform: rotate(180deg);
  width: 100%;
  /*svg {
      filter: brightness(0) saturate(100%) invert(101%) sepia(10%) saturate(7470%) hue-rotate(
        273deg) brightness(122%) contrast(98%);
    }
     */
}

/* Contenitore flex principale */

.slideauto_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

@media (min-width: 390px) {
  .slideauto_container {
    gap: 40px;
  }
}

/* Stili titolo */

.slideauto_title {
  text-align: center;
  --tw-text-opacity: 1;
  color: rgb(255 250 229 / var(--tw-text-opacity, 1));
  font-family: "Fira Sans", sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 36px;
}

@media (min-width: 390px) {
  .slideauto_title {
    font-size: 36px;
    line-height: 43px;
  }
}

/* Stili sottotitolo */

.slideauto_subtitle {
  font-family: Roboto, sans-serif;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(255 250 229 / var(--tw-text-opacity, 1));
  font-size: 1.125rem;
  line-height: 1.75rem;
}

@media (min-width: 390px) {
  .slideauto_subtitle {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}

.slideauto_subtitle {
  text-align: center;
}

/* Container per le cards */

.slideauto_cards_wrapper {
  display: flex;
  flex-direction: column;
}

/* ==========================================================================
     LAYOUT 3 COLONNE - RESPONSIVE
     ========================================================================== */

/* Container principale 3 colonne */

.slideauto_columns_container {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .slideauto_columns_container {
    flex-direction: row;
  }
}

.slideauto_columns_container {
  gap: 40px;
  /* Mobile: gap 40px come desktop */
}

@media (min-width: 390px) {
  .slideauto_columns_container {
    align-items: center;
  }
}

/* Colonna 2: Immagine + Paginatore (500px desktop) */

.slideauto_column_media {
  order: 1;
  width: 100%;
}

@media (min-width: 768px) {
  .slideauto_column_media {
    order: 2;
    width: 500px;
  }
}

.slideauto_column_media {
  /* Mobile: primo posto */
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  /* gap-6 = 24px tra immagini e barra */
}

/* Contenitore per sole immagini - altezza fissa */

.slideauto_images_container {
  position: relative;
  height: 410px;
}

@media (min-width: 768px) {
  .slideauto_images_container {
    height: 600px;
  }
}

.slideauto_images_container {
  /* Altezza fissa per contenitore immagini */
}

/* Colonna 3: Titolo Principale + Descrizione (320px desktop) */

.slideauto_column_content {
  order: 3;
  width: 100%;
  /* Mobile: terzo posto */
}

@media (min-width: 768px) {
  .slideauto_column_content {
    order: 3;
    width: 320px;
  }
}

.slideauto_column_content {
  /* Desktop: mantieni terzo */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
     TYPOGRAPHY SPECIFICHE FIGMA
     ========================================================================== */

/* Colonna 1: Titoli Cards Navigation (200px desktop) */

.slideauto_column_titles {
  order: 2;
  width: 300px;
}

@media (min-width: 1024px) {
  .slideauto_column_titles {
    order: 1;
  }
}

.slideauto_column_titles {
  /* Mobile: larghezza fissa 300px */
}

@media (min-width: 1024px) {
  .slideauto_column_titles {
    width: 200px;
  }
}

.slideauto_column_titles {
  /* Desktop: primo posto */
  /* Mobile: layout orizzontale con scroll */
  display: flex;
  flex-direction: row;
  gap: 24px;
  overflow-x: scroll;
}

@media (min-width: 768px) {
  .slideauto_column_titles {
    flex-direction: column;
    overflow-x: auto;
  }
}

.slideauto_column_titles {
  align-items: flex-start;
  justify-content: flex-start;
  /* Mobile: no wrap per scroll orizzontale */
  white-space: nowrap;
}

@media (min-width: 768px) {
  .slideauto_column_titles {
    white-space: normal;
  }
}

.slideauto_column_titles {
  /* Nascondere scrollbar per mobile mantenendo scroll funzionante */
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* Internet Explorer 10+ */
  /* Smooth scroll per UX mobile */
  scroll-behavior: smooth;
}

/* Nascondere scrollbar per webkit browsers (Chrome, Safari, Edge) */

.slideauto_column_titles::-webkit-scrollbar {
  display: none;
}

.slideauto_card_title_nav {
  font-family: "Fira Sans", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
}

@media (min-width: 768px) {
  .slideauto_card_title_nav {
    font-size: 24px;
    line-height: 1.5;
  }
}

.slideauto_card_title_nav {
  color: rgba(255, 250, 229, 0.24);
  /* Mobile: flex item per scroll orizzontale, Desktop: blocco normale */
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .slideauto_card_title_nav {
    flex-shrink: 1;
  }
}

/* Titoli Card Navigation (Colonna 1) */

.slideauto_card_title_nav.active {
  --tw-text-opacity: 1;
  color: rgb(255 250 229 / var(--tw-text-opacity, 1));
}

/* Titolo Card Principale (Colonna 3) */

.slideauto_card_title_main {
  --tw-text-opacity: 1;
  color: rgb(255 250 229 / var(--tw-text-opacity, 1));
  font-family: "Fira Sans", sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.5;
}

/* Testo Descrizione (Colonna 3) */

.slideauto_slide_item p {
  --tw-text-opacity: 1;
  color: rgb(255 250 229 / var(--tw-text-opacity, 1));
  font-family: Roboto, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 21px;
}

/* ==========================================================================
     STATI SLIDESHOW - ROTAZIONE SINCRONIZZATA
     ========================================================================== */

/* Stato base per elementi slideshow */

.slideauto_slide_item {
  transition-property: opacity;
  transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Elemento attivo - visibile */

.slideauto_slide_item.active {
  display: block;
  opacity: 1;
}

/* Elemento nascosto - invisibile */

.slideauto_slide_item.hidden {
  opacity: 0;
  display: none;
}

/* Stato attivo per titoli navigation (Colonna 1) */

.slideauto_card_title_nav.active {
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(255 250 229 / var(--tw-text-opacity, 1));
}

/* Hover per titoli navigation */

.slideauto_card_title_nav:hover {
  cursor: pointer;
  --tw-text-opacity: 1;
  color: rgb(255 250 229 / var(--tw-text-opacity, 1));
}

/* Slides immagini - posizionamento assoluto per sovrapposizione */

.slideauto_image_slide {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
}

/* Stili immagini slideshow - border radius 40px */

.slideauto-image {
  height: 100%;
  width: 100%;
  border-radius: 40px;
  -o-object-fit: cover;
     object-fit: cover;
}

/* ==========================================================================
     BARRA PROGRESSO SLIDESHOW AUTOMATICO
     ========================================================================== */

/* Container pagination: altezza 45px, layout flex per barra + bottone */

.slideauto_pagination {
  display: flex;
  height: 45px;
  align-items: center;
  gap: 1.5rem;
  /* gap-6 = 24px */
}

/* Barra progresso: prende tutto lo spazio disponibile */

.slideauto_progress_container {
  flex: 1 1 0%;
  /* prende tutto lo spazio disponibile */
}

/* Barra progresso interna: altezza esatta 4px */

.slideauto_progress_bar {
  position: relative;
  height: 4px;
  --tw-bg-opacity: 1;
  background-color: rgb(113 118 128 / var(--tw-bg-opacity, 1));
}

.slideauto_progress_bar::before {
  position: absolute;
  left: 0px;
  top: 0px;
  height: 100%;
  --tw-bg-opacity: 1;
  background-color: rgb(253 253 253 / var(--tw-bg-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  --tw-content: '';
  content: var(--tw-content);
  width: var(--progress-width, 0%);
  /* Utilizza CSS custom property */
}

/* ==========================================================================
     BOTTONE PLAY/PAUSE SLIDESHOW AUTOMATICO (COPIATO DA HERO)
     ========================================================================== */

/* Bottone principale play/pause */

.slideauto-control-playpause {
  height: 2.5rem;
  width: 2.5rem;
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1));
  padding-left: 2px;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.slideauto-control-playpause:focus-visible {
  outline: 2px solid #1E2B50;
  outline-offset: 2px;
}

.slideauto-control-playpause:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}

.slideauto-control-playpause {
  border-radius: 0.5rem;
  border-width: 4px;
  --tw-border-opacity: 1;
  border-color: rgb(250 250 250 / var(--tw-border-opacity, 1));
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.slideauto-control-playpause:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.slideauto-control-playpause {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.slideauto-control-playpause:not(.active):hover {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}

.slideauto-control-playpause:focus {
  --tw-border-opacity: 1;
  border-color: rgb(30 43 80 / var(--tw-border-opacity, 1));
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.slideauto-control-playpause.active {
  --tw-border-opacity: 1;
  border-color: rgb(30 43 80 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1));
}

.slideauto-control-playpause:not(.active) {
  --tw-border-opacity: 1;
  border-color: rgb(250 250 250 / var(--tw-border-opacity, 1));
}

/* Icone pause bars */

.slideauto-pause-bars {
  position: relative;
  background-color: transparent;
}

.slideauto-pause-bars::before,
  .slideauto-pause-bars::after {
  content: '';
  position: absolute;
  border-radius: 0.125rem;
  --tw-bg-opacity: 1;
  background-color: rgb(23 37 84 / var(--tw-bg-opacity, 1));
  height: 16px;
  width: 3px;
  top: 50%;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.slideauto-pause-bars::before {
  left: 50%;
  --tw-translate-x: -150%;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.slideauto-pause-bars::after {
  left: 50%;
  --tw-translate-x: 50%;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* Icona play triangle */

.slideauto-play-triangle {
  position: relative;
  background-color: transparent;
}

.slideauto-play-triangle::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  --tw-translate-x: -40%;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  height: 0px;
  width: 0px;
  border-left-width: 8px;
  --tw-border-opacity: 1;
  border-left-color: rgb(23 37 84 / var(--tw-border-opacity, 1));
  border-top-width: 6px;
  border-bottom-width: 6px;
  border-top-color: transparent;
  border-bottom-color: transparent;
}

/* Nascondi pseudo-elementi quando classe hidden */

.slideauto-pause-bars.hidden::before,
  .slideauto-pause-bars.hidden::after,
  .slideauto-play-triangle.hidden::before {
  display: none;
}

.slider-interattivo-section {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.slider-interattivo-container {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1440px;
  padding-top: 40px;
  padding-bottom: 40px;
  padding-left: 24px;
  padding-right: 24px;
  /* Mobile: 40px/24px */
}

@media (min-width: 768px) {
  .slider-interattivo-container {
    padding-top: 5rem;
    padding-bottom: 5rem;
    padding-left: 120px;
    padding-right: 120px;
  }
}

.slider-interattivo-container {
  /* Desktop: 80px/120px */
  overflow: hidden;
  gap: 0px;
}

@media (min-width: 390px) {
  .slider-interattivo-container {
    display: flex;
    flex-direction: column;
    gap: 48px;
  }
}

.slider-interattivo-titolo {
  font-family: "Fira Sans", sans-serif;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
  font-size: 36px;
  line-height: 43px;
}

.slider-interattivo-wrapper {
  position: relative;
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
}

.slider-interattivo-cards {
  position: relative;
  display: flex;
  width: 100%;
  align-items: flex-start;
  justify-content: center;
  height: 424px;
  /* 400px card + 24px gap */
  margin-bottom: 0;
  /* Desktop: griglia 3 colonne */
}

@media (min-width: 1024px) {
  .slider-interattivo-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-items: center;
    gap: 48px;
    height: auto;
  }
}

.slider-interattivo-cards {
  /* Altezza automatica su desktop */
}

.slider-card {
  position: absolute;
  transition-property: all;
  transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0.24;
}

@media (min-width: 390px) {
  .slider-card {
    margin-left: -20px;
  }
}

.slider-card {
  /* Desktop: posizione statica in griglia, sempre visibile */
}

@media (min-width: 1024px) {
  .slider-card {
    position: relative;
    margin-left: 0px;
    opacity: 1;
    top: auto;
    left: auto;
    transform: none;
  }
}

.slider-card {
  cursor: pointer;
  /*&.position-active {
      @apply  cursor-pointer;
    }
    */
}

/* Card attiva con opacity piena */

.slider-card.position-active {
  opacity: 1;
}

/* Posizione card attiva: sopra i bottoni, centrata - SOLO MOBILE */

.slider-card.position-active {
  z-index: 20;
}

@media not all and (min-width: 390px) {
  .slider-card.position-active {
    left: calc(50% - 150px);
    top: 0px;
  }
}

@media (min-width: 1024px) {
  .slider-card.position-active {
    top: auto;
    left: auto;
    z-index: auto;
  }
}

/* Posizione scalino 1: a destra della card attiva - SOLO MOBILE */

.slider-card.position-step1 {
  z-index: 10;
}

@media not all and (min-width: 390px) {
  .slider-card.position-step1 {
    top: 2.25rem;
    left: calc(50% + 150px + 48px);
  }
}

.slider-card.position-step1 {
  /* Desktop: reset posizionamento */
}

@media (min-width: 1024px) {
  .slider-card.position-step1 {
    top: auto;
    left: auto;
    z-index: auto;
  }
}

/* Posizione scalino 2: più in basso e 48px a destra della card 2 - SOLO MOBILE */

.slider-card.position-step2 {
  z-index: 10;
}

@media not all and (min-width: 390px) {
  .slider-card.position-step2 {
    top: 4.5rem;
    left: calc(50% + 150px + 48px + 300px + 48px);
  }
}

.slider-card.position-step2 {
  /* Desktop: reset posizionamento */
}

@media (min-width: 1024px) {
  .slider-card.position-step2 {
    top: auto;
    left: auto;
    z-index: auto;
  }
}

/* Posizione scalino 3: ancora più in basso - SOLO MOBILE */

.slider-card.position-step3 {
  z-index: 10;
}

@media not all and (min-width: 390px) {
  .slider-card.position-step3 {
    top: 108px;
    left: calc(50% + 150px + 48px + 300px + 48px + 300px + 48px);
  }
}

.slider-card.position-step3 {
  /* Desktop: reset posizionamento */
}

@media (min-width: 1024px) {
  .slider-card.position-step3 {
    top: auto;
    left: auto;
    z-index: auto;
  }
}

/* Posizione a sinistra: quando tornano indietro - SOLO MOBILE */

.slider-card.position-left {
  z-index: 10;
}

@media not all and (min-width: 390px) {
  .slider-card.position-left {
    top: 2.25rem;
    left: calc(50% - 150px - 48px);
  }
}

.slider-card.position-left {
  /* Desktop: reset posizionamento */
}

@media (min-width: 1024px) {
  .slider-card.position-left {
    top: auto;
    left: auto;
    z-index: auto;
  }
}

/* Posizioni a destra: stack di cards già viste - SOLO MOBILE */

.slider-card.position-right1 {
  z-index: 10;
}

@media not all and (min-width: 390px) {
  .slider-card.position-right1 {
    top: 2.25rem;
    left: calc(50% - 150px - 48px - 300px);
  }
}

.slider-card.position-right1 {
  /* Desktop: reset posizionamento */
}

@media (min-width: 1024px) {
  .slider-card.position-right1 {
    top: auto;
    left: auto;
    z-index: auto;
  }
}

.slider-card.position-right2 {
  z-index: 10;
}

@media not all and (min-width: 390px) {
  .slider-card.position-right2 {
    top: 4.5rem;
    left: calc(50% - 150px - 48px - 300px - 48px - 300px);
  }
}

.slider-card.position-right2 {
  /* Desktop: reset posizionamento */
}

@media (min-width: 1024px) {
  .slider-card.position-right2 {
    top: auto;
    left: auto;
    z-index: auto;
  }
}

.slider-card.position-right3 {
  z-index: 10;
}

@media not all and (min-width: 390px) {
  .slider-card.position-right3 {
    top: 108px;
    left: calc(50% - 150px - 48px - 300px - 48px - 300px - 48px - 300px);
  }
}

.slider-card.position-right3 {
  /* Desktop: reset posizionamento */
}

@media (min-width: 1024px) {
  .slider-card.position-right3 {
    top: auto;
    left: auto;
    z-index: auto;
  }
}

/* Contenuto card: 300px x 400px */

.slider-card-content {
  display: flex;
  flex-direction: column;
  border-radius: 1rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(30 43 80 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  width: 300px;
  height: 400px;
}

/* Sezione superiore card: 261px (era ~65% - Golden Ratio maggiore) */

.slider-card-top {
  position: relative;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 261px;
}

.slider-card-top-inside {
  background-image: url('../images/bontiamo-b-schede.svg');
  height: 261px;
  width: 300px;
}

/* Icona plus nella sezione superiore - posizionata in alto a destra */

.slider-card-plus-icon {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
  width: 2rem;
  padding: 0.25rem;
  border-radius: 0.375rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(30 43 80 / var(--tw-border-opacity, 1));
  /* Mostra la manina al hover */
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  /* Transizione smooth per hover */
  gap: 10px;
  flex-shrink: 0;
}

/* Hover state per l'icona plus */

/*.position-active .slider-card-plus-icon:hover {*/

.slider-card-plus-icon:hover {
  background-color: rgb(30 43 80 / var(--tw-bg-opacity, 1));
  --tw-bg-opacity: 0.2;
  /* Background leggero al hover */
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  cursor: pointer;
  /* Leggero ingrandimento al hover */
}

.slider-card-plus-icon img {
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

/* Container immagine card - posizionato sotto l'icona plus */

.slider-card-image-container {
  position: absolute;
  top: 64px;
  left: 0.75rem;
  right: 0.75rem;
  /* top-[64px] = 16px (top icona) + 32px (altezza icona) + 16px (gap) */
  /* left-3 right-3 = 12px bordi laterali */
}

.slider-card-picture {
  display: block;
  height: 152px;
  width: 100%;
}

.slider-card-image {
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

/* SVG bordo inferiore della sezione alta */

.slider-card-bottom-border {
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  margin-bottom: -1px;
  pointer-events: none;
  /* Non interferisce con i click */
  /*@apply bg-bontiamo-blue-500;*/
  /*transform: rotate(180deg);*/
  /* DIV con sfondo blu Bontiamo */
  overflow: hidden;
  /* Impedisce all'SVG di uscire dai bordi */
  /*
    svg {
      filter: brightness(0) saturate(100%) invert(14%) sepia(32%) saturate(1514%) hue-rotate(192deg) brightness(84%) contrast(92%);
    }
     */
}

.slider-card-bottom-border img {
  height: auto;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* SVG riempito con giallo Bontiamo */

.slider-card-bottom-border svg {
  height: auto;
  width: 100%;
  /* SVG si adatta mantenendo proporzioni */
}

.slider-card-bottom-border svg path {
  fill: #ffd100;
  /* Giallo Bontiamo (bontiamo-yellow-500) */
}

/* Sezione inferiore card: 139px (era ~35% - Golden Ratio minore) */

.slider-card-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom-right-radius: 1rem;
  border-bottom-left-radius: 1rem;
  --tw-bg-opacity: 1;
  background-color: rgb(30 43 80 / var(--tw-bg-opacity, 1));
  padding: 25px;
  height: 139px;
}

/* Container testo con gap 8px */

.slider-card-bottom-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Titolo card */

.slider-card-title {
  text-align: center;
  font-family: "Fira Sans", sans-serif;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(253 253 253 / var(--tw-text-opacity, 1));
  font-style: normal;
  line-height: normal;
}

/* Sottotitolo card */

.slider-card-subtitle {
  text-align: center;
  font-family: Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(253 253 253 / var(--tw-text-opacity, 1));
  font-style: normal;
  line-height: normal;
}

/* Navigation Buttons: sempre in basso con gap di 24px dalla card attiva */

.slider-navigation {
  position: relative;
  display: flex;
  width: 100%;
  justify-content: center;
  gap: 1rem;
  z-index: 30;
  /* Sopra tutto */
  margin-top: 0;
  /* Nessun margin extra, lo spazio è gestito dal container cards */
}

@media (min-width: 390px) {
  .slider-navigation {
    margin-left: -20px;
  }
}

.slider-btn {
  height: 3rem;
  width: 3rem;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(30 43 80 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.slider-btn:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(25 34 64 / var(--tw-bg-opacity, 1));
}

/* ==========================================================================
     MODALE SLIDER INTERATTIVO - FULL SCREEN
     ========================================================================== */

/* Overlay che copre tutto lo schermo - OPACO */

.slider-modal-overlay {
  position: fixed;
  inset: 0px;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

@media (min-width: 768px) {
  .slider-modal-overlay {
    padding: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .slider-modal-overlay {
    padding: 2rem;
  }
}

.slider-modal-overlay {
  visibility: hidden;
  opacity: 0;
  transition-property: all;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  /* Posizionamento assoluto rispetto al viewport, non ai breakpoint */
  width: 100vw !important;
  height: 100vh !important;
  left: 0 !important;
  top: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  background: rgba(233, 234, 235, 0.50);
  /* Background grigio semi-trasparente */
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  /* Sfocatura del background */
}

/* Modale visibile */

.slider-modal-overlay.active {
  visibility: visible;
  opacity: 1;
}

/* Container della modale - NON OPACO */

.slider-modal-container {
  position: relative;
  width: 100%;
  max-width: 56rem;
}

@media (min-width: 390px) {
  .slider-modal-container {
    max-width: 100%;
  }
}

.slider-modal-container {
  /* Reset opacity - contenuto completamente visibile */
  opacity: 1 !important;
  /* Il centraggio è già gestito da .slider-modal-overlay con flex items-center justify-center */
}

/* Contenuto della modale - NON OPACO */

.slider-modal-content {
  position: relative;
  border-radius: 1rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  overflow-y: auto;
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  /* Specifiche CSS fornite */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  padding: 24px;
}

@media (min-width: 768px) {
  .slider-modal-content {
    margin: auto;
    width: 800px;
    padding: 40px;
  }
}

.slider-modal-content {
  gap: 24px;
}

@media (min-width: 768px) {
  .slider-modal-content {
    gap: 40px;
  }
}

.slider-modal-content {
  /* Reset opacity - contenuto completamente visibile */
  opacity: 1 !important;
  /* Altezza modale: 60% dello spazio disponibile con max-height per sicurezza */
  height: 60vh;
  max-height: 60vh;
}

@media (min-width: 390px) {
  .slider-modal-content {
    height: 80vh;
    max-height: 80vh;
  }
}

.slider-modal-overlay.active .slider-modal-content {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* Pulsante chiusura - ora nell'header */

.slider-modal-close {
  position: relative;
  /* Non più absolute */
  height: 2.5rem;
  width: 2.5rem;
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(30 43 80 / var(--tw-border-opacity, 1));
  background-color: transparent;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
}

.slider-modal-close:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(210 213 220 / var(--tw-bg-opacity, 1));
}

.slider-modal-close {
  cursor: pointer;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  margin-left: 1rem;
  /* Spazio dal titolo */
}

.slider-modal-close:hover {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* Header modale - Titolo e X sulla stessa riga */

.modal-header {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}

.modal-title {
  flex: 1 1 0%;
  font-family: "Fira Sans", sans-serif;
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
  margin: 0px;
  /* Rimuove margin e prende spazio disponibile */
  font-size: 36px;
  font-style: normal;
  font-weight: 700;
  line-height: 43px;
}

/* Container immagine modale */

.modal-image-container {
  width: 100%;
}

.modal-image {
  height: auto;
  width: 100%;
  border-radius: 1rem;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 32px;
  height: 405px;
  align-self: stretch;
  aspect-ratio: 16/9;
  background-color: #fff;
  background-position: 50%;
  background-size: cover;
  background-repeat: no-repeat;
  /* Fallback colore quando immagine non carica */
  background-color: lightgray;
}

/* Titolo prodotto */

.modal-product-title {
  width: 100%;
  font-family: "Fira Sans", sans-serif;
  font-size: 30px;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
}

@media (min-width: 390px) {
  .modal-product-title {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

.modal-product-title {
  line-height: 2.25rem;
}

@media (min-width: 390px) {
  .modal-product-title {
    line-height: 29px;
  }
}

.modal-product-title {
  /* Mobile/H3 */
}

.modal-product-title h3 {
  font-family: "Fira Sans", sans-serif;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
  margin: 0px;
  /* Rimuove margin di default */
}

/* Descrizione prodotto */

.modal-description {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 20px;
  /* Gap tra paragrafi della descrizione */
  font-family: Roboto, sans-serif;
  font-size: 18px;
  line-height: 21px;
}

.modal-description p {
  font-family: Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
  margin: 0px;
  line-height: 1.625;
  /* Rimuove margin e migliora line-height */
}

.modal-description ul {
  padding-left: 24px;
}

@media (min-width: 768px) {
  .modal-description ul {
    padding-left: 40px;
  }
}

.modal-description ul li {
  list-style-type: disc;
  font-family: Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
}

/* Sezioni espandibili */

.modal-sections {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 0;
  /* Nessun gap tra sezioni per avere linee continue */
}

.modal-section {
  width: 100%;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(30 43 80 / var(--tw-border-opacity, 1));
}

.modal-section:last-child {
  border-bottom-width: 0px;
  /* Rimuove border dall'ultima sezione */
}

/* Header delle sezioni espandibili */

.modal-section-header {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  padding-left: 0px;
  padding-right: 0px;
  /* Padding verticale per area cliccabile */
  cursor: pointer;
  border-style: none;
  background-color: transparent;
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.modal-section-header:hover {
  background-color: rgb(210 213 220 / var(--tw-bg-opacity, 1));
  --tw-bg-opacity: 0.2;
}

.modal-section-title {
  font-family: Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.modal-section-arrow {
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  flex-shrink: 0;
}

.modal-section-header[aria-expanded="true"] .modal-section-arrow {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* Contenuto delle sezioni espandibili */

.modal-section-content {
  overflow: hidden;
  transition-property: all;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
  max-height: 0;
  padding-bottom: 0px;
}

.modal-section-content.expanded {
  opacity: 1;
  max-height: 500px;
  /* Altezza massima per l'animazione */
  padding-bottom: 1.5rem;
}

.modal-section-content p {
  font-family: Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
  margin: 0px;
  line-height: 1.625;
}

/* Blocca scroll del body quando modale è aperta */

body.modal-open {
  overflow: hidden;
}

/* Loading & Error States */

.modal-loading,
  .modal-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
  text-align: center;
  min-height: 200px;
}

.modal-loading p {
  font-family: Roboto, sans-serif;
  font-size: 1.125rem;
  line-height: 1.75rem;
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}

.modal-loading p {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.modal-error p {
  margin-bottom: 1rem;
  font-family: Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}

.modal-error .slider-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(30 43 80 / var(--tw-bg-opacity, 1));
  font-family: Roboto, sans-serif;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.modal-error .slider-modal-close:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(25 34 64 / var(--tw-bg-opacity, 1));
}

/* ==========================================================================
     CONTROLLI NAVIGAZIONE SLIDER INTERATTIVO
     ========================================================================== */

/* Controlli navigazione slider interattivo */

.interattivo-nal-controls {
  z-index: 20;
  margin-top: 40px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.interattivo-nal-controls > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(1rem * var(--tw-space-x-reverse));
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}

@media not all and (min-width: 768px) {
  .interattivo-nal-controls > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
  }
}

.interattivo-nal-controls {
  /* Desktop: nasconde i controlli */
}

@media (min-width: 1024px) {
  .interattivo-nal-controls.slideauto_slide_item {
    opacity: 0;
    display: none;
  }

  .interattivo-nal-controls.slideauto-pause-bars::before,.interattivo-nal-controls
  .slideauto-pause-bars::after,.interattivo-nal-controls
  .slideauto-play-triangle::before {
    display: none;
  }

  .interattivo-nal-controls {
    display: none;
  }
}

.interattivo-nal-controls {
  /* Pulsanti frecce */
  .nal-control-prev,
    .nal-control-next {
    height: 2.5rem;
  }
  .nal-control-prev,
    .nal-control-next {
    width: 2.5rem;
  }
  .nal-control-prev,
    .nal-control-next {
    border-radius: 0.5rem;
  }
  .nal-control-prev,
    .nal-control-next {
    --tw-bg-opacity: 1;
    background-color: rgb(30 43 80 / var(--tw-bg-opacity, 1));
  }
  .nal-control-prev,
    .nal-control-next {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
  .nal-control-prev,
    .nal-control-next {
    transition-duration: 300ms;
  }
  .nal-control-prev,
    .nal-control-next {
    display: flex;
  }
  .nal-control-prev,
    .nal-control-next {
    cursor: pointer;
  }
  .nal-control-prev,
    .nal-control-next {
    align-items: center;
  }
  .nal-control-prev,
    .nal-control-next {
    justify-content: center;
  }
  .nal-control-prev,
    .nal-control-next {
    outline: 2px solid transparent;
    outline-offset: 2px;
  }
  /* Stato disabilitato pulsanti frecce */
  .nal-control-prev.disabled,
    .nal-control-next.disabled {
    cursor: not-allowed;
  }
  .nal-control-prev.disabled,
    .nal-control-next.disabled {
    opacity: 0.3;
  }
  .nal-control-prev.disabled,
    .nal-control-next.disabled {
    --tw-bg-opacity: 1;
    background-color: rgb(12 17 32 / var(--tw-bg-opacity, 1));
  }
  .nal-control-prev.disabled,
    .nal-control-next.disabled {
    pointer-events: none;
  }
  /* Frecce */
  .nal-arrow-left,
    .nal-arrow-right {
    position: relative;
  }
  .nal-arrow-left,
    .nal-arrow-right {
    background-color: transparent;
  }
  .nal-arrow-left::before {
    content: '';
  }
  .nal-arrow-left::before {
    position: absolute;
  }
  .nal-arrow-left::before {
    left: 50%;
  }
  .nal-arrow-left::before {
    top: 50%;
  }
  .nal-arrow-left::before {
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
  .nal-arrow-left::before {
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
  .nal-arrow-left::before {
    height: 0px;
  }
  .nal-arrow-left::before {
    width: 0px;
  }
  .nal-arrow-left::before {
    border-right-width: 8px;
  }
  .nal-arrow-left::before {
    --tw-border-opacity: 1;
    border-right-color: rgb(253 253 253 / var(--tw-border-opacity, 1));
  }
  .nal-arrow-left::before {
    border-top-width: 6px;
  }
  .nal-arrow-left::before {
    border-bottom-width: 6px;
  }
  .nal-arrow-left::before {
    border-top-color: transparent;
  }
  .nal-arrow-left::before {
    border-bottom-color: transparent;
  }
  .nal-arrow-left::before {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
  .nal-arrow-left::before {
    transition-duration: 300ms;
  }
  .nal-arrow-right::before {
    content: '';
  }
  .nal-arrow-right::before {
    position: absolute;
  }
  .nal-arrow-right::before {
    left: 50%;
  }
  .nal-arrow-right::before {
    top: 50%;
  }
  .nal-arrow-right::before {
    --tw-translate-x: -20%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
  .nal-arrow-right::before {
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
  .nal-arrow-right::before {
    height: 0px;
  }
  .nal-arrow-right::before {
    width: 0px;
  }
  .nal-arrow-right::before {
    border-left-width: 8px;
  }
  .nal-arrow-right::before {
    --tw-border-opacity: 1;
    border-left-color: rgb(253 253 253 / var(--tw-border-opacity, 1));
  }
  .nal-arrow-right::before {
    border-top-width: 6px;
  }
  .nal-arrow-right::before {
    border-bottom-width: 6px;
  }
  .nal-arrow-right::before {
    border-top-color: transparent;
  }
  .nal-arrow-right::before {
    border-bottom-color: transparent;
  }
  .nal-arrow-right::before {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
  .nal-arrow-right::before {
    transition-duration: 300ms;
  }
  /* Frecce in stato disabilitato */
  .nal-control-prev.disabled .nal-arrow-left::before,
    .nal-control-next.disabled .nal-arrow-right::before {
    opacity: 0.5;
  }
  /* Indicatori slide */
  .nal-slide-indicator {
    position: relative;
  }
  .nal-slide-indicator {
    height: 0.5rem;
  }
  .nal-slide-indicator {
    width: 2.25rem;
  }
  .nal-slide-indicator {
    overflow: hidden;
  }
  .nal-slide-indicator {
    border-radius: 72px;
  }
  .nal-slide-indicator {
    outline: 2px solid transparent;
    outline-offset: 2px;
  }
  .nal-slide-indicator {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
  .nal-slide-indicator {
    transition-duration: 300ms;
  }
  .nal-slide-indicator {
    --tw-bg-opacity: 1;
    background-color: rgb(164 167 174 / var(--tw-bg-opacity, 1));
  }
  .nal-slide-indicator.active {
    --tw-bg-opacity: 1;
    background-color: rgb(30 43 80 / var(--tw-bg-opacity, 1));
  }
}

/* Stati hover/active/focus SOLO per dispositivi desktop (non-touch) */

@media (hover: hover) and (pointer: fine) {
  .interattivo-nal-controls {
    .nal-control-prev:hover,
      .nal-control-next:hover {
      --tw-bg-opacity: 1;
      background-color: rgb(76 85 115 / var(--tw-bg-opacity, 1));
    }
    .nal-control-prev:focus-visible,
      .nal-control-next:focus-visible {
      --tw-bg-opacity: 1;
      background-color: rgb(76 85 115 / var(--tw-bg-opacity, 1));
    }
    /* Rimuove hover effect quando disabled */
    .nal-control-prev.disabled:hover,
      .nal-control-next.disabled:hover {
      --tw-bg-opacity: 1;
      background-color: rgb(12 17 32 / var(--tw-bg-opacity, 1));
    }
    .nal-control-prev.disabled:focus-visible,
      .nal-control-next.disabled:focus-visible {
      --tw-bg-opacity: 1;
      background-color: rgb(12 17 32 / var(--tw-bg-opacity, 1));
    }
    .nal-control-prev:hover .nal-arrow-left::before,
      .nal-control-prev:focus-visible .nal-arrow-left::before {
      --tw-border-opacity: 1;
      border-right-color: rgb(253 253 253 / var(--tw-border-opacity, 1));
    }
    .nal-control-next:hover .nal-arrow-right::before,
      .nal-control-next:focus-visible .nal-arrow-right::before {
      --tw-border-opacity: 1;
      border-left-color: rgb(253 253 253 / var(--tw-border-opacity, 1));
    }
    .nal-slide-indicator:hover {
      --tw-bg-opacity: 1;
      background-color: rgb(30 43 80 / var(--tw-bg-opacity, 1));
    }
    .nal-slide-indicator.active:hover {
      --tw-bg-opacity: 1;
      background-color: rgb(30 43 80 / var(--tw-bg-opacity, 1));
    }
  }
}

.slider-persone-bontiamo-section {
  .slider-card {
    &.position-active {
      cursor: default;
    }
  }
  .slider-persone-bontiamo-section {
    position: relative;
  }
  .slider-persone-bontiamo-section {
    width: 100%;
  }
  .slider-persone-bontiamo-section {
    overflow: hidden;
  }
  .slider-persone-bontiamo-container {
    margin-left: auto;
    margin-right: auto;
  }
  .slider-persone-bontiamo-container {
    width: 100%;
  }
  .slider-persone-bontiamo-container {
    max-width: 1440px;
  }
  .slider-persone-bontiamo-container {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .slider-persone-bontiamo-container {
    padding-left: 24px;
    padding-right: 24px;
  }
  .slider-persone-bontiamo-container {
    /* Mobile: 40px/24px */
  }
  @media (min-width: 768px) {
    .slider-persone-bontiamo-container {
      padding-top: 5rem;
      padding-bottom: 5rem;
    }
  }
  @media (min-width: 768px) {
    .slider-persone-bontiamo-container {
      padding-left: 120px;
      padding-right: 120px;
    }
  }
  .slider-persone-bontiamo-container {
    /* Desktop: 80px/120px */
  }
  .slider-persone-bontiamo-container {
    overflow: hidden;
  }
  .slider-persone-bontiamo-container {
    display: flex;
  }
  .slider-persone-bontiamo-container {
    flex-direction: column;
  }
  .slider-persone-bontiamo-container {
    gap: 24px;
  }
  .slider-persone-bontiamo-titolo {
    font-family: "Fira Sans", sans-serif;
  }
  .slider-persone-bontiamo-titolo {
    font-weight: 700;
  }
  .slider-persone-bontiamo-titolo {
    --tw-text-opacity: 1;
    color: rgb(255 250 229 / var(--tw-text-opacity, 1));
  }
  .slider-persone-bontiamo-titolo {
    font-size: 36px;
  }
  .slider-persone-bontiamo-titolo {
    line-height: 43px;
  }
  .slider-persone-bontiamo-wrapper {
    position: relative;
  }
  .slider-persone-bontiamo-wrapper {
    display: flex;
  }
  .slider-persone-bontiamo-wrapper {
    width: 100%;
  }
  .slider-persone-bontiamo-wrapper {
    flex-direction: column;
  }
  .slider-persone-bontiamo-wrapper {
    align-items: center;
  }
  .slider-persone-bontiamo-cards {
    position: relative;
  }
  .slider-persone-bontiamo-cards {
    display: flex;
  }
  .slider-persone-bontiamo-cards {
    width: 100%;
  }
  .slider-persone-bontiamo-cards {
    align-items: flex-start;
  }
  .slider-persone-bontiamo-cards {
    justify-content: center;
  }
  .slider-persone-bontiamo-cards {
    height: 424px;
    /* 400px card + 24px gap */
    margin-bottom: 0;
  }
  .slider-card {
    position: absolute;
  }
  .slider-card {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
  .slider-card {
    transition-duration: 500ms;
  }
  .slider-card {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  .slider-card {
    opacity: 0.24;
  }
  @media (min-width: 390px) {
    .slider-card {
      margin-left: -20px;
    }
  }
  /* Card attiva con opacity piena */
  .slider-card.position-active {
    opacity: 1;
  }
  /* Posizione card attiva: sopra i bottoni, centrata */
  .slider-card.position-active {
    z-index: 20;
  }
  .slider-card.position-active {
    top: 0;
    left: calc(50% - 150px);
    /*transform: translateX(-50%);*/
  }
  /* Posizione scalino 1: a destra della card attiva */
  .slider-card.position-step1 {
    z-index: 10;
  }
  .slider-card.position-step1 {
    top: 36px;
    left: calc(50% + 150px + 48px);
    /* 50% + metà card (150px) + gap 48px */
  }
  /* Posizione scalino 2: più in basso e 48px a destra della card 2 */
  .slider-card.position-step2 {
    z-index: 10;
  }
  .slider-card.position-step2 {
    top: 72px;
    left: calc(50% + 150px + 48px + 300px + 48px);
    /* Posizione card 2 + larghezza card + 48px gap */
  }
  /* Posizione scalino 3: ancora più in basso */
  .slider-card.position-step3 {
    z-index: 10;
  }
  .slider-card.position-step3 {
    top: 108px;
    left: calc(50% + 150px + 48px + 300px + 48px + 300px + 48px);
  }
  /* Posizione a sinistra: quando tornano indietro */
  .slider-card.position-left {
    z-index: 10;
  }
  .slider-card.position-left {
    top: 36px;
    /* Stessa altezza di step1 */
    left: calc(50% - 150px - 48px);
    /* Specchiata a sinistra: 50% - metà card - gap */
  }
  /* Posizioni a destra: stack di cards già viste */
  .slider-card.position-right1 {
    z-index: 10;
  }
  .slider-card.position-right1 {
    top: 36px;
    left: calc(50% - 150px - 48px - 300px);
  }
  .slider-card.position-right2 {
    z-index: 10;
  }
  .slider-card.position-right2 {
    top: 72px;
    left: calc(50% - 150px - 48px - 300px - 48px - 300px);
  }
  .slider-card.position-right3 {
    z-index: 10;
  }
  .slider-card.position-right3 {
    top: 108px;
    left: calc(50% - 150px - 48px - 300px - 48px - 300px - 48px - 300px);
  }
  /* Contenuto card: 300px x 400px */
  .slider-card-content {
    display: flex;
  }
  .slider-card-content {
    flex-direction: column;
  }
  .slider-card-content {
    border-radius: 1rem;
  }
  .slider-card-content {
    font-weight: 700;
  }
  .slider-card-content {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }
  .slider-card-content {
    --tw-bg-opacity: 1;
    background-color: rgb(30 43 80 / var(--tw-bg-opacity, 1));
  }
  .slider-card-content {
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
  .slider-card-content {
    width: 300px;
    height: 400px;
  }
  /* Sezione superiore card: 261px (era ~65% - Golden Ratio maggiore) */
  .slider-card-top {
    position: relative;
  }
  .slider-card-top {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
  }
  .slider-card-top {
    background-size: cover;
  }
  .slider-card-top {
    background-position: center;
  }
  .slider-card-top {
    background-repeat: no-repeat;
  }
  .slider-card-top {
    --tw-bg-opacity: 1;
    background-color: rgb(253 253 253 / var(--tw-bg-opacity, 1));
  }
  .slider-card-top {
    background-image: none !important;
    height: 261px;
  }
  /* Icona plus nella sezione superiore - posizionata in alto a destra */
  .slider-card-plus-icon {
    position: absolute;
  }
  .slider-card-plus-icon {
    top: 1rem;
  }
  .slider-card-plus-icon {
    right: 1rem;
  }
  .slider-card-plus-icon {
    display: flex;
  }
  .slider-card-plus-icon {
    align-items: center;
  }
  .slider-card-plus-icon {
    justify-content: center;
  }
  .slider-card-plus-icon {
    height: 2rem;
  }
  .slider-card-plus-icon {
    width: 2rem;
  }
  .slider-card-plus-icon {
    padding: 0.25rem;
  }
  .slider-card-plus-icon {
    border-radius: 0.375rem;
  }
  .slider-card-plus-icon {
    cursor: pointer;
  }
  .slider-card-plus-icon {
    /* Mostra la manina al hover */
  }
  .slider-card-plus-icon {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
  .slider-card-plus-icon {
    transition-duration: 200ms;
  }
  .slider-card-plus-icon {
    /* Transizione smooth per hover */
    gap: 10px;
    flex-shrink: 0;
  }
  /* Hover state per l'icona plus */
  .slider-card-plus-icon:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(30 43 80 / var(--tw-bg-opacity, 1));
  }
  .slider-card-plus-icon:hover {
    --tw-bg-opacity: 0.2;
  }
  .slider-card-plus-icon:hover {
    /* Background leggero al hover */
  }
  .slider-card-plus-icon:hover {
    --tw-scale-x: 1.1;
    --tw-scale-y: 1.1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
  .slider-card-plus-icon:hover {
    /* Leggero ingrandimento al hover */
  }
  .slider-card-plus-icon img {
    height: 100%;
  }
  .slider-card-plus-icon img {
    width: 100%;
  }
  .slider-card-plus-icon img {
    -o-object-fit: contain;
       object-fit: contain;
  }
  /* Container immagine card - posizionato sotto l'icona plus */
  .slider-card-image-container {
    position: absolute;
  }
  .slider-card-image-container {
    top: 32px;
  }
  .slider-card-image-container {
    left: 0.75rem;
  }
  .slider-card-image-container {
    right: 0.75rem;
  }
  .slider-card-image-container {
    /* top-[64px] = 16px (top icona) + 32px (altezza icona) + 16px (gap) */
    /* left-3 right-3 = 12px bordi laterali */
  }
  .slider-card-picture {
    display: block;
  }
  .slider-card-picture {
    height: 276px;
  }
  .slider-card-picture {
    width: 100%;
  }
  .slider-card-image {
    height: 100%;
  }
  .slider-card-image {
    width: 100%;
  }
  .slider-card-image {
    -o-object-fit: contain;
       object-fit: contain;
  }
  /* SVG bordo inferiore della sezione alta */
  .slider-card-bottom-border {
    position: absolute;
  }
  .slider-card-bottom-border {
    bottom: 0px;
  }
  .slider-card-bottom-border {
    left: 0px;
  }
  .slider-card-bottom-border {
    right: 0px;
  }
  .slider-card-bottom-border {
    pointer-events: none;
  }
  .slider-card-bottom-border {
    /* Non interferisce con i click */
    /* DIV con sfondo blu Bontiamo */
  }
  .slider-card-bottom-border {
    overflow: hidden;
  }
  .slider-card-bottom-border {
    /* Impedisce all'SVG di uscire dai bordi */
  }
  .slider-card-bottom-border img {
    height: auto;
  }
  .slider-card-bottom-border img {
    width: 100%;
  }
  .slider-card-bottom-border img {
    -o-object-fit: cover;
       object-fit: cover;
  }
  /* SVG riempito con giallo Bontiamo */
  .slider-card-bottom-border svg {
    height: auto;
  }
  .slider-card-bottom-border svg {
    width: 100%;
  }
  .slider-card-bottom-border svg {
    /* SVG si adatta mantenendo proporzioni */
  }
  .slider-card-bottom-border svg path {
    fill: #ffd100;
    /* Giallo Bontiamo (bontiamo-yellow-500) */
  }
  /* Sezione inferiore card: 139px (era ~35% - Golden Ratio minore) */
  .slider-card-bottom {
    display: flex;
  }
  .slider-card-bottom {
    align-items: center;
  }
  .slider-card-bottom {
    justify-content: center;
  }
  .slider-card-bottom {
    border-bottom-right-radius: 1rem;
    border-bottom-left-radius: 1rem;
  }
  .slider-card-bottom {
    --tw-bg-opacity: 1;
    background-color: rgb(253 253 253 / var(--tw-bg-opacity, 1));
  }
  .slider-card-bottom {
    padding: 25px;
  }
  .slider-card-bottom {
    height: 139px;
  }
  /* Container testo con gap 8px */
  .slider-card-bottom-container {
    display: flex;
  }
  .slider-card-bottom-container {
    flex-direction: column;
  }
  .slider-card-bottom-container {
    gap: 0.5rem;
  }
  /* Titolo card */
  .slider-card-title {
    text-align: center;
  }
  .slider-card-title {
    font-family: "Fira Sans", sans-serif;
  }
  .slider-card-title {
    font-size: 1.5rem;
    line-height: 2rem;
  }
  .slider-card-title {
    font-weight: 600;
  }
  .slider-card-title {
    --tw-text-opacity: 1;
    color: rgb(253 253 253 / var(--tw-text-opacity, 1));
  }
  .slider-card-title {
    font-style: normal;
    line-height: normal;
  }
  /* Sottotitolo card */
  .slider-card-subtitle {
    text-align: center;
  }
  .slider-card-subtitle {
    font-family: Roboto, sans-serif;
  }
  .slider-card-subtitle {
    font-size: 1rem;
    line-height: 1.5rem;
  }
  .slider-card-subtitle {
    font-weight: 400;
  }
  .slider-card-subtitle {
    --tw-text-opacity: 1;
    color: rgb(253 253 253 / var(--tw-text-opacity, 1));
  }
  .slider-card-subtitle {
    font-style: normal;
    line-height: normal;
  }
  /* Navigation Buttons: sempre in basso con gap di 24px dalla card attiva */
  .slider-persone-bontiamo-navigation {
    position: relative;
  }
  .slider-persone-bontiamo-navigation {
    display: flex;
  }
  .slider-persone-bontiamo-navigation {
    width: 100%;
  }
  .slider-persone-bontiamo-navigation {
    justify-content: center;
  }
  .slider-persone-bontiamo-navigation {
    gap: 1rem;
  }
  .slider-persone-bontiamo-navigation {
    z-index: 30;
  }
  .slider-persone-bontiamo-navigation {
    /* Sopra tutto */
    margin-top: 0;
    /* Nessun margin extra, lo spazio è gestito dal container cards */
  }
  @media (min-width: 390px) {
    .slider-persone-bontiamo-navigation {
      margin-left: -20px;
    }
  }
  .slider-persone-bontiamo-btn {
    height: 3rem;
  }
  .slider-persone-bontiamo-btn {
    width: 3rem;
  }
  .slider-persone-bontiamo-btn {
    border-radius: 9999px;
  }
  .slider-persone-bontiamo-btn {
    --tw-bg-opacity: 1;
    background-color: rgb(30 43 80 / var(--tw-bg-opacity, 1));
  }
  .slider-persone-bontiamo-btn {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }
  .slider-persone-bontiamo-btn {
    display: flex;
  }
  .slider-persone-bontiamo-btn {
    cursor: pointer;
  }
  .slider-persone-bontiamo-btn {
    align-items: center;
  }
  .slider-persone-bontiamo-btn {
    justify-content: center;
  }
  .slider-persone-bontiamo-btn {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
  .slider-persone-bontiamo-btn:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(25 34 64 / var(--tw-bg-opacity, 1));
  }
  /* ==========================================================================
       MODALE SLIDER PERSONE BONTIAMO - FULL SCREEN
       ========================================================================== */
  /* Overlay che copre tutto lo schermo - OPACO */
  .slider-persone-bontiamo-modal-overlay {
    position: fixed;
  }
  .slider-persone-bontiamo-modal-overlay {
    inset: 0px;
  }
  .slider-persone-bontiamo-modal-overlay {
    z-index: 9999;
  }
  .slider-persone-bontiamo-modal-overlay {
    display: flex;
  }
  .slider-persone-bontiamo-modal-overlay {
    align-items: center;
  }
  .slider-persone-bontiamo-modal-overlay {
    justify-content: center;
  }
  .slider-persone-bontiamo-modal-overlay {
    padding: 1rem;
  }
  @media (min-width: 768px) {
    .slider-persone-bontiamo-modal-overlay {
      padding: 1.5rem;
    }
  }
  @media (min-width: 1024px) {
    .slider-persone-bontiamo-modal-overlay {
      padding: 2rem;
    }
  }
  .slider-persone-bontiamo-modal-overlay {
    visibility: hidden;
  }
  .slider-persone-bontiamo-modal-overlay {
    opacity: 0;
  }
  .slider-persone-bontiamo-modal-overlay {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
  .slider-persone-bontiamo-modal-overlay {
    transition-duration: 300ms;
  }
  .slider-persone-bontiamo-modal-overlay {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  .slider-persone-bontiamo-modal-overlay {
    /* Posizionamento assoluto rispetto al viewport, non ai breakpoint */
    width: 100vw !important;
    height: 100vh !important;
    left: 0 !important;
    top: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    background: rgba(233, 234, 235, 0.50);
    /* Background grigio semi-trasparente */
    -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
    /* Sfocatura del background */
  }
  /* Modale visibile */
  .slider-persone-bontiamo-modal-overlay.active {
    visibility: visible;
  }
  .slider-persone-bontiamo-modal-overlay.active {
    opacity: 1;
  }
  /* Container della modale - NON OPACO */
  .slider-persone-bontiamo-modal-container {
    position: relative;
  }
  .slider-persone-bontiamo-modal-container {
    width: 100%;
  }
  .slider-persone-bontiamo-modal-container {
    max-width: 56rem;
  }
  @media (min-width: 390px) {
    .slider-persone-bontiamo-modal-container {
      max-width: 100%;
    }
  }
  .slider-persone-bontiamo-modal-container {
    /* Reset opacity - contenuto completamente visibile */
    opacity: 1 !important;
    /* Il centraggio è già gestito da .slider-persone-bontiamo-modal-overlay con flex items-center justify-center */
  }
  /* Contenuto della modale - NON OPACO */
  .slider-persone-bontiamo-modal-content {
    position: relative;
  }
  .slider-persone-bontiamo-modal-content {
    border-radius: 1rem;
  }
  .slider-persone-bontiamo-modal-content {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  }
  .slider-persone-bontiamo-modal-content {
    --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
  .slider-persone-bontiamo-modal-content {
    overflow-y: auto;
  }
  .slider-persone-bontiamo-modal-content {
    --tw-scale-x: .95;
    --tw-scale-y: .95;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
  .slider-persone-bontiamo-modal-content {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
  .slider-persone-bontiamo-modal-content {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
  .slider-persone-bontiamo-modal-content {
    transition-duration: 300ms;
  }
  .slider-persone-bontiamo-modal-content {
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
  .slider-persone-bontiamo-modal-content {
    /* Specifiche CSS fornite */
  }
  .slider-persone-bontiamo-modal-content {
    display: flex;
  }
  .slider-persone-bontiamo-modal-content {
    flex-direction: column;
  }
  .slider-persone-bontiamo-modal-content {
    align-items: flex-start;
  }
  .slider-persone-bontiamo-modal-content {
    justify-content: flex-start;
  }
  .slider-persone-bontiamo-modal-content {
    width: 100%;
  }
  .slider-persone-bontiamo-modal-content {
    padding: 24px;
  }
  @media (min-width: 768px) {
    .slider-persone-bontiamo-modal-content {
      margin: auto;
    }
  }
  @media (min-width: 768px) {
    .slider-persone-bontiamo-modal-content {
      width: 800px;
    }
  }
  @media (min-width: 768px) {
    .slider-persone-bontiamo-modal-content {
      padding: 40px;
    }
  }
  .slider-persone-bontiamo-modal-content {
    gap: 24px;
  }
  @media (min-width: 768px) {
    .slider-persone-bontiamo-modal-content {
      gap: 40px;
    }
  }
  .slider-persone-bontiamo-modal-content {
    /* Reset opacity - contenuto completamente visibile */
    opacity: 1 !important;
    /* Altezza modale: 60% dello spazio disponibile con max-height per sicurezza */
  }
  .slider-persone-bontiamo-modal-content {
    height: 60vh;
  }
  .slider-persone-bontiamo-modal-content {
    max-height: 60vh;
  }
  @media (min-width: 390px) {
    .slider-persone-bontiamo-modal-content {
      height: 80vh;
    }
  }
  @media (min-width: 390px) {
    .slider-persone-bontiamo-modal-content {
      max-height: 80vh;
    }
  }
  .slider-persone-bontiamo-modal-overlay.active .slider-persone-bontiamo-modal-content {
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
  /* Pulsante chiusura - ora nell'header */
  .slider-persone-bontiamo-modal-close {
    position: relative;
  }
  .slider-persone-bontiamo-modal-close {
    /* Non più absolute */
  }
  .slider-persone-bontiamo-modal-close {
    height: 2.5rem;
  }
  .slider-persone-bontiamo-modal-close {
    width: 2.5rem;
  }
  .slider-persone-bontiamo-modal-close {
    border-radius: 0.5rem;
  }
  .slider-persone-bontiamo-modal-close {
    border-width: 1px;
  }
  .slider-persone-bontiamo-modal-close {
    --tw-border-opacity: 1;
    border-color: rgb(30 43 80 / var(--tw-border-opacity, 1));
  }
  .slider-persone-bontiamo-modal-close {
    background-color: transparent;
  }
  .slider-persone-bontiamo-modal-close {
    display: flex;
  }
  .slider-persone-bontiamo-modal-close {
    flex-shrink: 0;
  }
  .slider-persone-bontiamo-modal-close {
    align-items: center;
  }
  .slider-persone-bontiamo-modal-close {
    justify-content: center;
  }
  .slider-persone-bontiamo-modal-close {
    --tw-text-opacity: 1;
    color: rgb(30 43 80 / var(--tw-text-opacity, 1));
  }
  .slider-persone-bontiamo-modal-close:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(210 213 220 / var(--tw-bg-opacity, 1));
  }
  .slider-persone-bontiamo-modal-close {
    cursor: pointer;
  }
  .slider-persone-bontiamo-modal-close {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
  .slider-persone-bontiamo-modal-close {
    transition-duration: 200ms;
  }
  .slider-persone-bontiamo-modal-close {
    margin-left: 1rem;
  }
  .slider-persone-bontiamo-modal-close {
    /* Spazio dal titolo */
  }
  .slider-persone-bontiamo-modal-close:hover {
    --tw-scale-x: 1.1;
    --tw-scale-y: 1.1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
  .slider-persone-bontiamo-sottotitolo {
    font-family: Roboto, sans-serif;
  }
  .slider-persone-bontiamo-sottotitolo {
    font-weight: 400;
  }
  .slider-persone-bontiamo-sottotitolo {
    --tw-text-opacity: 1;
    color: rgb(255 250 229 / var(--tw-text-opacity, 1));
  }
  .slider-persone-bontiamo-sottotitolo {
    font-size: 18px;
    line-height: 21px;
  }
  .slider-card-title {
    --tw-text-opacity: 1;
    color: rgb(30 43 80 / var(--tw-text-opacity, 1));
  }
  .persone-nal-controls {
    .nal-control-prev:hover, .nal-control-next:hover {
      --tw-bg-opacity: 1;
      background-color: rgb(164 167 174 / var(--tw-bg-opacity, 1));
    }
    .nal-slide-indicator {
      --tw-bg-opacity: 1;
      background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1));
    }
    .nal-slide-indicator:hover {
      --tw-border-opacity: 1;
      border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
    }
    .nal-slide-indicator {
      &.active {
        &&::before {
        }
      }
    }
    .nal-slide-indicator {
      --tw-bg-opacity: 1;
      background-color: rgb(164 167 174 / var(--tw-bg-opacity, 1));
    }
    .nal-slide-indicator.active {
      &:hover {
        &::before {
          --tw-bg-opacity: 1;
          background-color: rgb(164 167 174 / var(--tw-bg-opacity, 1));
        }
      }
      &::before {
        --tw-bg-opacity: 1;
        background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1));
      }
    }
    button.nal-slide-indicator:hover {
      --tw-bg-opacity: 1;
      background-color: rgb(164 167 174 / var(--tw-bg-opacity, 1));
    }
  }
}

/* Navigation */

.nav-link {
  border-radius: 0.375rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.nav-link:focus-visible {
  outline: 2px solid #1E2B50;
  outline-offset: 2px;
}

.nav-link:hover {
  --tw-text-opacity: 1;
  color: rgb(25 34 64 / var(--tw-text-opacity, 1));
}

.nav-link--active {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(25 34 64 / var(--tw-text-opacity, 1));
}

/* Buttons */

.btn-lg {
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.btn-sm {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.btn-neutral {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-weight: 500;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.hero-slide[aria-hidden="false"] .btn-neutral {
  animation: slideInUp 0.8s ease-out 0.6s both;
}

@media (prefers-reduced-motion: reduce) {
  
    .hero-slide[aria-hidden="false"] .btn-neutral {
    transform: none;
    animation: none;
    opacity: 1;
  }
}

@media print {
  .btn-neutral {
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
    background-color: transparent;
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity, 1));
  }
}

.btn-neutral {
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(213 215 218 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(45 41 38 / var(--tw-text-opacity, 1));
}

.btn-neutral:focus-visible {
  outline: 2px solid #1E2B50;
  outline-offset: 2px;
}

.btn-neutral:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1));
}

.btn-neutral-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-weight: 500;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.hero-slide[aria-hidden="false"] .btn-neutral-dark {
  animation: slideInUp 0.8s ease-out 0.6s both;
}

@media (prefers-reduced-motion: reduce) {
  
    .hero-slide[aria-hidden="false"] .btn-neutral-dark {
    transform: none;
    animation: none;
    opacity: 1;
  }
}

@media print {
  .btn-neutral-dark {
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
    background-color: transparent;
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity, 1));
  }
}

.btn-neutral-dark {
  --tw-bg-opacity: 1;
  background-color: rgb(45 41 38 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.btn-neutral-dark:focus-visible {
  outline: 2px solid #1E2B50;
  outline-offset: 2px;
}

.btn-neutral-dark:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(37 43 55 / var(--tw-bg-opacity, 1));
}

/* Cards */

.card {
  overflow: hidden;
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(253 253 253 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.card-hover {
  overflow: hidden;
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(253 253 253 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.card-hover:hover {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.card-neutral {
  overflow: hidden;
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(233 234 235 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.card-dark {
  overflow: hidden;
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(45 41 38 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.card-header {
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.card-body {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.card-footer {
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* Layout Sections */

.section {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

@media (min-width: 768px) {
  .section {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}

@media (min-width: 1024px) {
  .section {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

.section-sm {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

@media (min-width: 768px) {
  .section-sm {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

@media (min-width: 1024px) {
  .section-sm {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}

.section-lg {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

@media (min-width: 768px) {
  .section-lg {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
}

@media (min-width: 1024px) {
  .section-lg {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
}

/* Content wrappers */

.prose-custom {
  color: var(--tw-prose-body);
  max-width: 65ch;
}

.prose-custom :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

.prose-custom :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-lead);
  font-size: 1.25em;
  line-height: 1.6;
  margin-top: 1.2em;
  margin-bottom: 1.2em;
}

.prose-custom :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-links);
  text-decoration: underline;
  font-weight: 500;
}

.prose-custom :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-bold);
  font-weight: 600;
}

.prose-custom :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose-custom :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose-custom :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose-custom :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: decimal;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-inline-start: 1.625em;
}

.prose-custom :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-alpha;
}

.prose-custom :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-alpha;
}

.prose-custom :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-alpha;
}

.prose-custom :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-alpha;
}

.prose-custom :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-roman;
}

.prose-custom :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-roman;
}

.prose-custom :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-roman;
}

.prose-custom :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-roman;
}

.prose-custom :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: decimal;
}

.prose-custom :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: disc;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-inline-start: 1.625em;
}

.prose-custom :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
  font-weight: 400;
  color: var(--tw-prose-counters);
}

.prose-custom :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
  color: var(--tw-prose-bullets);
}

.prose-custom :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.25em;
}

.prose-custom :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-color: var(--tw-prose-hr);
  border-top-width: 1px;
  margin-top: 3em;
  margin-bottom: 3em;
}

.prose-custom :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 500;
  font-style: italic;
  color: var(--tw-prose-quotes);
  border-inline-start-width: 0.25rem;
  border-inline-start-color: var(--tw-prose-quote-borders);
  quotes: "\201C""\201D""\2018""\2019";
  margin-top: 1.6em;
  margin-bottom: 1.6em;
  padding-inline-start: 1em;
}

.prose-custom :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: open-quote;
}

.prose-custom :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: close-quote;
}

.prose-custom :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 800;
  font-size: 2.25em;
  margin-top: 0;
  margin-bottom: 0.8888889em;
  line-height: 1.1111111;
}

.prose-custom :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 900;
  color: inherit;
}

.prose-custom :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 700;
  font-size: 1.5em;
  margin-top: 2em;
  margin-bottom: 1em;
  line-height: 1.3333333;
}

.prose-custom :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 800;
  color: inherit;
}

.prose-custom :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  font-size: 1.25em;
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  line-height: 1.6;
}

.prose-custom :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 700;
  color: inherit;
}

.prose-custom :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  line-height: 1.5;
}

.prose-custom :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 700;
  color: inherit;
}

.prose-custom :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}

.prose-custom :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  display: block;
  margin-top: 2em;
  margin-bottom: 2em;
}

.prose-custom :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}

.prose-custom :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 500;
  font-family: inherit;
  color: var(--tw-prose-kbd);
  box-shadow: 0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%);
  font-size: 0.875em;
  border-radius: 0.3125rem;
  padding-top: 0.1875em;
  padding-inline-end: 0.375em;
  padding-bottom: 0.1875em;
  padding-inline-start: 0.375em;
}

.prose-custom :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-code);
  font-weight: 600;
  font-size: 0.875em;
}

.prose-custom :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: "`";
}

.prose-custom :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: "`";
}

.prose-custom :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose-custom :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose-custom :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
  font-size: 0.875em;
}

.prose-custom :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
  font-size: 0.9em;
}

.prose-custom :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose-custom :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose-custom :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose-custom :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-pre-code);
  background-color: var(--tw-prose-pre-bg);
  overflow-x: auto;
  font-weight: 400;
  font-size: 0.875em;
  line-height: 1.7142857;
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
  border-radius: 0.375rem;
  padding-top: 0.8571429em;
  padding-inline-end: 1.1428571em;
  padding-bottom: 0.8571429em;
  padding-inline-start: 1.1428571em;
}

.prose-custom :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  background-color: transparent;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-weight: inherit;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}

.prose-custom :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: none;
}

.prose-custom :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: none;
}

.prose-custom :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  width: 100%;
  table-layout: auto;
  margin-top: 2em;
  margin-bottom: 2em;
  font-size: 0.875em;
  line-height: 1.7142857;
}

.prose-custom :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-th-borders);
}

.prose-custom :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  vertical-align: bottom;
  padding-inline-end: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-inline-start: 0.5714286em;
}

.prose-custom :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-td-borders);
}

.prose-custom :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 0;
}

.prose-custom :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  vertical-align: baseline;
}

.prose-custom :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-top-width: 1px;
  border-top-color: var(--tw-prose-th-borders);
}

.prose-custom :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  vertical-align: top;
}

.prose-custom :where(th, td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  text-align: start;
}

.prose-custom :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}

.prose-custom :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-captions);
  font-size: 0.875em;
  line-height: 1.4285714;
  margin-top: 0.8571429em;
}

.prose-custom {
  --tw-prose-body: #374151;
  --tw-prose-headings: #111827;
  --tw-prose-lead: #4b5563;
  --tw-prose-links: #111827;
  --tw-prose-bold: #111827;
  --tw-prose-counters: #6b7280;
  --tw-prose-bullets: #d1d5db;
  --tw-prose-hr: #e5e7eb;
  --tw-prose-quotes: #111827;
  --tw-prose-quote-borders: #e5e7eb;
  --tw-prose-captions: #6b7280;
  --tw-prose-kbd: #111827;
  --tw-prose-kbd-shadows: 17 24 39;
  --tw-prose-code: #111827;
  --tw-prose-pre-code: #e5e7eb;
  --tw-prose-pre-bg: #1f2937;
  --tw-prose-th-borders: #d1d5db;
  --tw-prose-td-borders: #e5e7eb;
  --tw-prose-invert-body: #d1d5db;
  --tw-prose-invert-headings: #fff;
  --tw-prose-invert-lead: #9ca3af;
  --tw-prose-invert-links: #fff;
  --tw-prose-invert-bold: #fff;
  --tw-prose-invert-counters: #9ca3af;
  --tw-prose-invert-bullets: #4b5563;
  --tw-prose-invert-hr: #374151;
  --tw-prose-invert-quotes: #f3f4f6;
  --tw-prose-invert-quote-borders: #374151;
  --tw-prose-invert-captions: #9ca3af;
  --tw-prose-invert-kbd: #fff;
  --tw-prose-invert-kbd-shadows: 255 255 255;
  --tw-prose-invert-code: #fff;
  --tw-prose-invert-pre-code: #d1d5db;
  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
  --tw-prose-invert-th-borders: #4b5563;
  --tw-prose-invert-td-borders: #374151;
  font-size: 1rem;
  line-height: 1.75;
}

.prose-custom :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}

.prose-custom :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.prose-custom :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0.375em;
}

.prose-custom :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0.375em;
}

.prose-custom :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

.prose-custom :where(.prose > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
}

.prose-custom :where(.prose > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.25em;
}

.prose-custom :where(.prose > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
}

.prose-custom :where(.prose > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.25em;
}

.prose-custom :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

.prose-custom :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

.prose-custom :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5em;
  padding-inline-start: 1.625em;
}

.prose-custom :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose-custom :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose-custom :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose-custom :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose-custom :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0;
}

.prose-custom :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 0;
}

.prose-custom :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-top: 0.5714286em;
  padding-inline-end: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-inline-start: 0.5714286em;
}

.prose-custom :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0;
}

.prose-custom :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 0;
}

.prose-custom :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}

.prose-custom :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose-custom :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 0;
}

.prose-custom {
  font-size: 1.125rem;
  line-height: 1.7777778;
}

.prose-custom :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.3333333em;
  margin-bottom: 1.3333333em;
}

.prose-custom :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 1.2222222em;
  line-height: 1.4545455;
  margin-top: 1.0909091em;
  margin-bottom: 1.0909091em;
}

.prose-custom :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.6666667em;
  margin-bottom: 1.6666667em;
  padding-inline-start: 1em;
}

.prose-custom :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 2.6666667em;
  margin-top: 0;
  margin-bottom: 0.8333333em;
  line-height: 1;
}

.prose-custom :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 1.6666667em;
  margin-top: 1.8666667em;
  margin-bottom: 1.0666667em;
  line-height: 1.3333333;
}

.prose-custom :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 1.3333333em;
  margin-top: 1.6666667em;
  margin-bottom: 0.6666667em;
  line-height: 1.5;
}

.prose-custom :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.7777778em;
  margin-bottom: 0.4444444em;
  line-height: 1.5555556;
}

.prose-custom :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.7777778em;
  margin-bottom: 1.7777778em;
}

.prose-custom :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.7777778em;
  margin-bottom: 1.7777778em;
}

.prose-custom :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}

.prose-custom :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.7777778em;
  margin-bottom: 1.7777778em;
}

.prose-custom :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.8888889em;
  border-radius: 0.3125rem;
  padding-top: 0.2222222em;
  padding-inline-end: 0.4444444em;
  padding-bottom: 0.2222222em;
  padding-inline-start: 0.4444444em;
}

.prose-custom :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.8888889em;
}

.prose-custom :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.8666667em;
}

.prose-custom :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.875em;
}

.prose-custom :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.8888889em;
  line-height: 1.75;
  margin-top: 2em;
  margin-bottom: 2em;
  border-radius: 0.375rem;
  padding-top: 1em;
  padding-inline-end: 1.5em;
  padding-bottom: 1em;
  padding-inline-start: 1.5em;
}

.prose-custom :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.3333333em;
  margin-bottom: 1.3333333em;
  padding-inline-start: 1.5555556em;
}

.prose-custom :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.3333333em;
  margin-bottom: 1.3333333em;
  padding-inline-start: 1.5555556em;
}

.prose-custom :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.6666667em;
  margin-bottom: 0.6666667em;
}

.prose-custom :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0.4444444em;
}

.prose-custom :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0.4444444em;
}

.prose-custom :where(.prose-lg > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.8888889em;
  margin-bottom: 0.8888889em;
}

.prose-custom :where(.prose-lg > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.3333333em;
}

.prose-custom :where(.prose-lg > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.3333333em;
}

.prose-custom :where(.prose-lg > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.3333333em;
}

.prose-custom :where(.prose-lg > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.3333333em;
}

.prose-custom :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.8888889em;
  margin-bottom: 0.8888889em;
}

.prose-custom :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.3333333em;
  margin-bottom: 1.3333333em;
}

.prose-custom :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.3333333em;
}

.prose-custom :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.6666667em;
  padding-inline-start: 1.5555556em;
}

.prose-custom :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 3.1111111em;
  margin-bottom: 3.1111111em;
}

.prose-custom :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose-custom :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose-custom :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose-custom :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose-custom :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.8888889em;
  line-height: 1.5;
}

.prose-custom :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 0.75em;
  padding-bottom: 0.75em;
  padding-inline-start: 0.75em;
}

.prose-custom :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0;
}

.prose-custom :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 0;
}

.prose-custom :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-top: 0.75em;
  padding-inline-end: 0.75em;
  padding-bottom: 0.75em;
  padding-inline-start: 0.75em;
}

.prose-custom :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0;
}

.prose-custom :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 0;
}

.prose-custom :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.7777778em;
  margin-bottom: 1.7777778em;
}

.prose-custom :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}

.prose-custom :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.8888889em;
  line-height: 1.5;
  margin-top: 1em;
}

.prose-custom :where(.prose-lg > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose-custom :where(.prose-lg > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 0;
}

.prose-custom {
  max-width: none;
}

.prose-custom :is(h1, h2, h3, h4, h5, h6) {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

.prose-custom a {
  --tw-text-opacity: 1;
  color: rgb(25 34 64 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
}

.prose-custom a:hover {
  --tw-text-opacity: 1;
  color: rgb(19 26 48 / var(--tw-text-opacity, 1));
}

.prose-custom strong {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

/* WordPress specific */

.wp-block-group > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

.wp-block-columns {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .wp-block-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .wp-block-columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ACF Layout Components */

.acf-section {
  position: relative;
}

.acf-section--full-width {
  width: 100%;
}

.acf-section--contained {
  width: 100%;
}

@media (min-width: 390px) {
  .acf-section--contained {
    max-width: 390px;
  }
}

@media (min-width: 768px) {
  .acf-section--contained {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .acf-section--contained {
    max-width: 1024px;
  }
}

@media (min-width: 1440px) {
  .acf-section--contained {
    max-width: 1440px;
  }
}

.acf-section--contained {
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 768px) {
  .acf-section--contained {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .acf-section--contained {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* Layout Error */

.layout-error {
  margin-top: 2rem;
  margin-bottom: 2rem;
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
  padding: 1.5rem;
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}

.layout-error::before {
  content: "⚠️ ";
  margin-right: 0.5rem;
}

/* Skip Links */

.skip-link {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 50;
  --tw-translate-y: -100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-bg-opacity: 1;
  background-color: rgb(6 9 16 / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.skip-link:focus {
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* Mobile Menu */

.mobile-menu-overlay {
  position: fixed;
  z-index: 40;
}

.mobile-menu-panel {
  position: fixed;
  top: 0px;
  right: 0px;
  z-index: 50;
  height: 100%;
  width: 20rem;
  --tw-translate-x: 100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.mobile-menu-panel--open {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* Loading States */

@keyframes pulse {
  50% {
    opacity: .5;
  }
}

.loading {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  border-radius: 0.25rem;
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.spinner {
  animation: spin 1s linear infinite;
  border-radius: 9999px;
  border-width: 2px;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
  --tw-border-opacity: 1;
  border-top-color: rgb(25 34 64 / var(--tw-border-opacity, 1));
}

/* Lazy Loading Styles */

.lazy-img {
  transition-property: opacity;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.lazy-loading {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
  opacity: 0;
  position: relative;
}

.lazy-loading::before {
  content: '';
  position: absolute;
  inset: 0px;
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}

.lazy-loading::before {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  border-radius: 0.25rem;
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}

.lazy-loaded {
  opacity: 1;
}

.slideauto_slide_item.lazy-loaded::before {
  opacity: 0;
  display: none;
}

.slideauto-pause-bars.lazy-loaded::before::before,
  .slideauto-pause-bars.lazy-loaded::before::after,
  .slideauto-play-triangle.lazy-loaded::before::before {
  display: none;
}

.lazy-loaded::before {
  display: none;
}

.hero-pause-bars.lazy-loaded::before::before,
.hero-pause-bars.lazy-loaded::before::after,
.hero-play-triangle.lazy-loaded::before::before {
  display: none;
}

.carpro-pause-bars.lazy-loaded::before::before,
.carpro-pause-bars.lazy-loaded::before::after,
.carpro-play-triangle.lazy-loaded::before::before {
  display: none;
}

.sliart-pause-bars.lazy-loaded::before::before,
.sliart-pause-bars.lazy-loaded::before::after,
.sliart-play-triangle.lazy-loaded::before::before {
  display: none;
}

.cta-modal.lazy-loaded::before {
  pointer-events: none;
  opacity: 0;
}

.cta-modal:not(.lazy-loaded)::before {
  opacity: 1;
}

.tracciamento-modal.lazy-loaded::before {
  pointer-events: none;
  opacity: 0;
}

.lazy-error {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
  opacity: 0.75;
  position: relative;
}

.lazy-error::after {
  content: '⚠';
  position: absolute;
  inset: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  line-height: 2rem;
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.lazy-placeholder {
  display: flex;
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}

.lazy-placeholder {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  align-items: center;
  justify-content: center;
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

/* Background Image Lazy Loading */

.lazy-bg-loading {
  overflow: hidden;
  position: relative;
}

.lazy-bg-loading::before {
  content: '';
  position: absolute;
  inset: 0px;
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}

.lazy-bg-loading::before {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}

/* No-JS Fallback */

.no-js .lazy-loading {
  opacity: 1;
}

.slideauto_slide_item.no-js .lazy-loading::before {
  opacity: 0;
  display: none;
}

.slideauto-pause-bars.no-js .lazy-loading::before::before,
  .slideauto-pause-bars.no-js .lazy-loading::before::after,
  .slideauto-play-triangle.no-js .lazy-loading::before::before {
  display: none;
}

.no-js .lazy-loading::before {
  display: none;
}

.hero-pause-bars.no-js .lazy-loading::before::before,
.hero-pause-bars.no-js .lazy-loading::before::after,
.hero-play-triangle.no-js .lazy-loading::before::before {
  display: none;
}

.carpro-pause-bars.no-js .lazy-loading::before::before,
.carpro-pause-bars.no-js .lazy-loading::before::after,
.carpro-play-triangle.no-js .lazy-loading::before::before {
  display: none;
}

.sliart-pause-bars.no-js .lazy-loading::before::before,
.sliart-pause-bars.no-js .lazy-loading::before::after,
.sliart-play-triangle.no-js .lazy-loading::before::before {
  display: none;
}

.cta-modal.no-js .lazy-loading::before {
  pointer-events: none;
  opacity: 0;
}

.cta-modal:not(.no-js .lazy-loading)::before {
  opacity: 1;
}

.tracciamento-modal.no-js .lazy-loading::before {
  pointer-events: none;
  opacity: 0;
}

/* Immagini che non devono essere lazy loaded */

.no-lazy {
  opacity: 1;
}

/* hero-slide-indicators - DEFINIZIONE UNIFICATA SOPRA */

/* .hero-slide-indicator.active - RIMOSSO: ora gestito via JavaScript con cambio colore dinamico */

/* Animazioni slides */

.hero-slide[aria-hidden="false"] .hero-slide-title {
  animation: slideInUp 0.8s ease-out 0.2s both;
}

.hero-slide[aria-hidden="false"] .hero-slide-subtitle {
  animation: slideInUp 0.8s ease-out 0.4s both;
}

.hero-slide[aria-hidden="false"] .btn {
  animation: slideInUp 0.8s ease-out 0.6s both;
}

@keyframes slideInUp {
  from {
    --tw-translate-y: 30px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    opacity: 0;
  }

  to {
    --tw-translate-y: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    opacity: 1;
  }
}

/* Responsive Design - Convertito a classi Tailwind */

/* Accessibilità - riduzione movimento */

@media (prefers-reduced-motion: reduce) {
  .hero-slides-track {
    transition-property: none;
  }

  .hero-slide[aria-hidden="false"] .hero-slide-title,
    .hero-slide[aria-hidden="false"] .hero-slide-subtitle,
    .hero-slide[aria-hidden="false"] .btn {
    transform: none;
    animation: none;
    opacity: 1;
  }
}

/* ==========================================================================
     PRINT STYLES
     ========================================================================== */

@media print {
  .slideauto_slide_item.no-print {
    opacity: 0;
    display: none;
  }

  .slideauto-pause-bars.no-print::before,
  .slideauto-pause-bars.no-print::after,
  .slideauto-play-triangle.no-print::before {
    display: none;
  }

  .no-print {
    display: none;
  }

  .hero-pause-bars.no-print::before,
.hero-pause-bars.no-print::after,
.hero-play-triangle.no-print::before {
    display: none;
  }

  .carpro-pause-bars.no-print::before,
.carpro-pause-bars.no-print::after,
.carpro-play-triangle.no-print::before {
    display: none;
  }

  .sliart-pause-bars.no-print::before,
.sliart-pause-bars.no-print::after,
.sliart-play-triangle.no-print::before {
    display: none;
  }

  .cta-modal.no-print {
    pointer-events: none;
    opacity: 0;
  }

  .cta-modal:not(.no-print) {
    opacity: 1;
  }

  .tracciamento-modal.no-print {
    pointer-events: none;
    opacity: 0;
  }

  body {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity, 1));
  }

  a {
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity, 1));
    text-decoration-line: none;
  }

  .btn {
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
    background-color: transparent;
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity, 1));
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.inset-0 {
  inset: 0px;
}

.bottom-0 {
  bottom: 0px;
}

.bottom-10 {
  bottom: 2.5rem;
}

.bottom-6 {
  bottom: 1.5rem;
}

.bottom-7 {
  bottom: 1.75rem;
}

.bottom-\[1\%\] {
  bottom: 1%;
}

.bottom-\[26px\] {
  bottom: 26px;
}

.bottom-\[5\%\] {
  bottom: 5%;
}

.bottom-\[8px\] {
  bottom: 8px;
}

.left-0 {
  left: 0px;
}

.left-1\/2 {
  left: 50%;
}

.left-3 {
  left: 0.75rem;
}

.left-4 {
  left: 1rem;
}

.left-6 {
  left: 1.5rem;
}

.left-\[94px\] {
  left: 94px;
}

.left-\[calc\(50\%-90px\)\] {
  left: calc(50% - 90px);
}

.right-0 {
  right: 0px;
}

.right-3 {
  right: 0.75rem;
}

.right-6 {
  right: 1.5rem;
}

.right-\[5\%\] {
  right: 5%;
}

.right-\[8px\] {
  right: 8px;
}

.top-0 {
  top: 0px;
}

.top-1\/2 {
  top: 50%;
}

.top-4 {
  top: 1rem;
}

.top-\[-1px\] {
  top: -1px;
}

.top-\[32px\] {
  top: 32px;
}

.top-\[64px\] {
  top: 64px;
}

.isolate {
  isolation: isolate;
}

.z-10 {
  z-index: 10;
}

.z-20 {
  z-index: 20;
}

.z-30 {
  z-index: 30;
}

.z-50 {
  z-index: 50;
}

.z-\[1\] {
  z-index: 1;
}

.z-\[2\] {
  z-index: 2;
}

.z-\[9999\] {
  z-index: 9999;
}

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.order-3 {
  order: 3;
}

.-m-px {
  margin: -1px;
}

.m-0 {
  margin: 0px;
}

.m-auto {
  margin: auto;
}

.-mx-2 {
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}

.-my-1\.5 {
  margin-top: -0.375rem;
  margin-bottom: -0.375rem;
}

.mx-0 {
  margin-left: 0px;
  margin-right: 0px;
}

.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.mx-\[13px\] {
  margin-left: 13px;
  margin-right: 13px;
}

.mx-\[24px\] {
  margin-left: 24px;
  margin-right: 24px;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.-mb-\[1px\] {
  margin-bottom: -1px;
}

.-mr-1 {
  margin-right: -0.25rem;
}

.-mt-8 {
  margin-top: -2rem;
}

.-mt-\[24px\] {
  margin-top: -24px;
}

.-mt-\[40px\] {
  margin-top: -40px;
}

.-mt-\[80px\] {
  margin-top: -80px;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.mb-\[24px\] {
  margin-bottom: 24px;
}

.ml-1 {
  margin-left: 0.25rem;
}

.ml-2 {
  margin-left: 0.5rem;
}

.ml-3 {
  margin-left: 0.75rem;
}

.mr-1\.5 {
  margin-right: 0.375rem;
}

.mr-3 {
  margin-right: 0.75rem;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-12 {
  margin-top: 3rem;
}

.mt-16 {
  margin-top: 4rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mt-8 {
  margin-top: 2rem;
}

.mt-\[24px\] {
  margin-top: 24px;
}

.mt-\[40px\] {
  margin-top: 40px;
}

.mt-\[80px\] {
  margin-top: 80px;
}

.mt-\[81px\] {
  margin-top: 81px;
}

.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.inline {
  display: inline;
}

.\!flex {
  display: flex !important;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.grid {
  display: grid;
}

.hidden {
  display: none;
}

.h-1\/2 {
  height: 50%;
}

.h-10 {
  height: 2.5rem;
}

.h-12 {
  height: 3rem;
}

.h-2 {
  height: 0.5rem;
}

.h-20 {
  height: 5rem;
}

.h-3 {
  height: 0.75rem;
}

.h-32 {
  height: 8rem;
}

.h-36 {
  height: 9rem;
}

.h-4 {
  height: 1rem;
}

.h-48 {
  height: 12rem;
}

.h-5 {
  height: 1.25rem;
}

.h-6 {
  height: 1.5rem;
}

.h-7 {
  height: 1.75rem;
}

.h-8 {
  height: 2rem;
}

.h-\[138px\] {
  height: 138px;
}

.h-\[150px\] {
  height: 150px;
}

.h-\[152px\] {
  height: 152px;
}

.h-\[16px\] {
  height: 16px;
}

.h-\[200px\] {
  height: 200px;
}

.h-\[221px\] {
  height: 221px;
}

.h-\[250px\] {
  height: 250px;
}

.h-\[276px\] {
  height: 276px;
}

.h-\[294px\] {
  height: 294px;
}

.h-\[300px\] {
  height: 300px;
}

.h-\[30px\] {
  height: 30px;
}

.h-\[342px\] {
  height: 342px;
}

.h-\[354px\] {
  height: 354px;
}

.h-\[400px\] {
  height: 400px;
}

.h-\[40px\] {
  height: 40px;
}

.h-\[410px\] {
  height: 410px;
}

.h-\[45px\] {
  height: 45px;
}

.h-\[48px\] {
  height: 48px;
}

.h-\[4px\] {
  height: 4px;
}

.h-\[60vh\] {
  height: 60vh;
}

.h-\[66vh\] {
  height: 66vh;
}

.h-\[79px\] {
  height: 79px;
}

.h-\[81px\] {
  height: 81px;
}

.h-\[82px\] {
  height: 82px;
}

.h-\[8px\] {
  height: 8px;
}

.h-\[90\%\] {
  height: 90%;
}

.h-\[90px\] {
  height: 90px;
}

.h-\[calc\(82px\+40px\)\] {
  height: calc(82px + 40px);
}

.h-auto {
  height: auto;
}

.h-full {
  height: 100%;
}

.h-hero-default {
  height: 80vh;
}

.h-hero-xs {
  height: 354px;
}

.h-px {
  height: 1px;
}

.max-h-\[60vh\] {
  max-height: 60vh;
}

.max-h-\[90vh\] {
  max-height: 90vh;
}

.max-h-full {
  max-height: 100%;
}

.min-h-\[200px\] {
  min-height: 200px;
}

.min-h-\[354px\] {
  min-height: 354px;
}

.min-h-\[calc\(6\*354px\)\] {
  min-height: calc(6 * 354px);
}

.min-h-screen {
  min-height: 100vh;
}

.w-0 {
  width: 0px;
}

.w-10 {
  width: 2.5rem;
}

.w-12 {
  width: 3rem;
}

.w-16 {
  width: 4rem;
}

.w-2 {
  width: 0.5rem;
}

.w-20 {
  width: 5rem;
}

.w-28 {
  width: 7rem;
}

.w-3 {
  width: 0.75rem;
}

.w-3\.5 {
  width: 0.875rem;
}

.w-32 {
  width: 8rem;
}

.w-4 {
  width: 1rem;
}

.w-5 {
  width: 1.25rem;
}

.w-6 {
  width: 1.5rem;
}

.w-7 {
  width: 1.75rem;
}

.w-8 {
  width: 2rem;
}

.w-80 {
  width: 20rem;
}

.w-9 {
  width: 2.25rem;
}

.w-\[120px\] {
  width: 120px;
}

.w-\[156px\] {
  width: 156px;
}

.w-\[221px\] {
  width: 221px;
}

.w-\[300px\] {
  width: 300px;
}

.w-\[30px\] {
  width: 30px;
}

.w-\[342px\] {
  width: 342px;
}

.w-\[36px\] {
  width: 36px;
}

.w-\[3px\] {
  width: 3px;
}

.w-\[40px\] {
  width: 40px;
}

.w-\[800px\] {
  width: 800px;
}

.w-\[calc\(100\%\+47px\)\] {
  width: calc(100% + 47px);
}

.w-\[calc\(100\%-48px\)\] {
  width: calc(100% - 48px);
}

.w-auto {
  width: auto;
}

.w-full {
  width: 100%;
}

.w-px {
  width: 1px;
}

.min-w-0 {
  min-width: 0px;
}

.max-w-3xl {
  max-width: 48rem;
}

.max-w-4xl {
  max-width: 56rem;
}

.max-w-\[1440px\] {
  max-width: 1440px;
}

.max-w-\[300px\] {
  max-width: 300px;
}

.max-w-\[800px\] {
  max-width: 800px;
}

.max-w-fit {
  max-width: -moz-fit-content;
  max-width: fit-content;
}

.max-w-full {
  max-width: 100%;
}

.max-w-none {
  max-width: none;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-shrink {
  flex-shrink: 1;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.flex-grow {
  flex-grow: 1;
}

.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-x-\[150\%\] {
  --tw-translate-x: -150%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-x-\[20\%\] {
  --tw-translate-x: -20%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-x-\[40\%\] {
  --tw-translate-x: -40%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-y-full {
  --tw-translate-y: -100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-0 {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-1\/2 {
  --tw-translate-x: 50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-full {
  --tw-translate-x: 100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-\[30px\] {
  --tw-translate-y: 30px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-rotate-\[0\.482deg\] {
  --tw-rotate: -0.482deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-0 {
  --tw-scale-x: 0;
  --tw-scale-y: 0;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-100 {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.animate-\[slideInUp_0\.8s_ease-out_0\.2s_both\] {
  animation: slideInUp 0.8s ease-out 0.2s both;
}

.animate-\[slideInUp_0\.8s_ease-out_0\.4s_both\] {
  animation: slideInUp 0.8s ease-out 0.4s both;
}

.animate-\[slideInUp_0\.8s_ease-out_0\.6s_both\] {
  animation: slideInUp 0.8s ease-out 0.6s both;
}

.animate-none {
  animation: none;
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

.cursor-pointer {
  cursor: pointer;
}

.list-decimal {
  list-style-type: decimal;
}

.list-disc {
  list-style-type: disc;
}

.list-none {
  list-style-type: none;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-\[40\%_60\%\] {
  grid-template-columns: 40% 60%;
}

.flex-row {
  flex-direction: row;
}

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.items-start {
  align-items: flex-start;
}

.items-center {
  align-items: center;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-0 {
  gap: 0px;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-10 {
  gap: 2.5rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-2\.5 {
  gap: 0.625rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-8 {
  gap: 2rem;
}

.gap-\[10px\] {
  gap: 10px;
}

.gap-\[12\.5px\] {
  gap: 12.5px;
}

.gap-\[16px\] {
  gap: 16px;
}

.gap-\[1rem\] {
  gap: 1rem;
}

.gap-\[20px\] {
  gap: 20px;
}

.gap-\[24px\] {
  gap: 24px;
}

.gap-\[32px\] {
  gap: 32px;
}

.gap-\[40px\] {
  gap: 40px;
}

.gap-\[48px\] {
  gap: 48px;
}

.gap-\[80px\] {
  gap: 80px;
}

.gap-\[8px\] {
  gap: 8px;
}

.-space-x-px > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(-1px * var(--tw-space-x-reverse));
  margin-left: calc(-1px * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(1rem * var(--tw-space-x-reverse));
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(2rem * var(--tw-space-x-reverse));
  margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}

.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

.space-y-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-scroll {
  overflow: scroll;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.overflow-x-scroll {
  overflow-x: scroll;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.rounded {
  border-radius: 0.25rem;
}

.rounded-2xl {
  border-radius: 1rem;
}

.rounded-3xl {
  border-radius: 1.5rem;
}

.rounded-\[24px\] {
  border-radius: 24px;
}

.rounded-\[32px\] {
  border-radius: 32px;
}

.rounded-\[40px\] {
  border-radius: 40px;
}

.rounded-\[6px\] {
  border-radius: 6px;
}

.rounded-\[7\.5px\] {
  border-radius: 7.5px;
}

.rounded-\[72px\] {
  border-radius: 72px;
}

.rounded-\[8px\] {
  border-radius: 8px;
}

.rounded-\[90px\] {
  border-radius: 90px;
}

.rounded-full {
  border-radius: 9999px;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-md {
  border-radius: 0.375rem;
}

.rounded-none {
  border-radius: 0px;
}

.rounded-b-2xl {
  border-bottom-right-radius: 1rem;
  border-bottom-left-radius: 1rem;
}

.rounded-l-md {
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}

.rounded-r-md {
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}

.border {
  border-width: 1px;
}

.border-2 {
  border-width: 2px;
}

.border-4 {
  border-width: 4px;
}

.border-\[1\.25px\] {
  border-width: 1.25px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-b-\[6px\] {
  border-bottom-width: 6px;
}

.border-l-\[8px\] {
  border-left-width: 8px;
}

.border-r-\[8px\] {
  border-right-width: 8px;
}

.border-t {
  border-top-width: 1px;
}

.border-t-\[6px\] {
  border-top-width: 6px;
}

.border-solid {
  border-style: solid;
}

.border-none {
  border-style: none;
}

.border-black {
  --tw-border-opacity: 1;
  border-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
}

.border-bontiamo-blue-500 {
  --tw-border-opacity: 1;
  border-color: rgb(30 43 80 / var(--tw-border-opacity, 1));
}

.border-bontiamo-white-300 {
  --tw-border-opacity: 1;
  border-color: rgb(213 215 218 / var(--tw-border-opacity, 1));
}

.border-bontiamo-white-50 {
  --tw-border-opacity: 1;
  border-color: rgb(250 250 250 / var(--tw-border-opacity, 1));
}

.border-gray-200 {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}

.border-gray-300 {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}

.border-orange-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 215 170 / var(--tw-border-opacity, 1));
}

.border-red-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
}

.border-yellow-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 240 138 / var(--tw-border-opacity, 1));
}

.border-l-gray-400 {
  --tw-border-opacity: 1;
  border-left-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
}

.border-l-white {
  --tw-border-opacity: 1;
  border-left-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}

.border-t-transparent {
  border-top-color: transparent;
}

.bg-\[\#717680\] {
  --tw-bg-opacity: 1;
  background-color: rgb(113 118 128 / var(--tw-bg-opacity, 1));
}

.bg-\[\#A5AAB9\] {
  --tw-bg-opacity: 1;
  background-color: rgb(165 170 185 / var(--tw-bg-opacity, 1));
}

.bg-\[\#FFED98\] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 237 152 / var(--tw-bg-opacity, 1));
}

.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}

.bg-blue-950 {
  --tw-bg-opacity: 1;
  background-color: rgb(23 37 84 / var(--tw-bg-opacity, 1));
}

.bg-bontiamo-blue-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(210 213 220 / var(--tw-bg-opacity, 1));
}

.bg-bontiamo-blue-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(76 85 115 / var(--tw-bg-opacity, 1));
}

.bg-bontiamo-blue-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(30 43 80 / var(--tw-bg-opacity, 1));
}

.bg-bontiamo-neutral-black {
  --tw-bg-opacity: 1;
  background-color: rgb(45 41 38 / var(--tw-bg-opacity, 1));
}

.bg-bontiamo-neutral-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.bg-bontiamo-white-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
}

.bg-bontiamo-white-25 {
  --tw-bg-opacity: 1;
  background-color: rgb(253 253 253 / var(--tw-bg-opacity, 1));
}

.bg-bontiamo-white-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(164 167 174 / var(--tw-bg-opacity, 1));
}

.bg-bontiamo-white-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1));
}

.bg-bontiamo-white-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(113 118 128 / var(--tw-bg-opacity, 1));
}

.bg-bontiamo-yellow-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 237 153 / var(--tw-bg-opacity, 1));
}

.bg-bontiamo-yellow-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 250 229 / var(--tw-bg-opacity, 1));
}

.bg-bontiamo-yellow-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 209 0 / var(--tw-bg-opacity, 1));
}

.bg-gray-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.bg-gray-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}

.bg-gray-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
}

.bg-neutral-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1));
}

.bg-orange-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 237 213 / var(--tw-bg-opacity, 1));
}

.bg-orange-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 247 237 / var(--tw-bg-opacity, 1));
}

.bg-primary-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}

.bg-primary-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(25 34 64 / var(--tw-bg-opacity, 1));
}

.bg-primary-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(6 9 16 / var(--tw-bg-opacity, 1));
}

.bg-red-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}

.bg-transparent {
  background-color: transparent;
}

.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.bg-yellow-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 252 232 / var(--tw-bg-opacity, 1));
}

.bg-\[url\(\'\.\.\/images\/banda-blu-header-mobile\.svg\'\)\] {
  background-image: url('../images/banda-blu-header-mobile.svg');
}

.bg-\[url\(\'\.\.\/images\/card-rectangle-mobile-yellow\.svg\'\)\] {
  background-image: url('../images/card-rectangle-mobile-yellow.svg');
}

.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.from-bontiamo-blue-500\/40 {
  --tw-gradient-from: rgb(30 43 80 / 0.4) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(30 43 80 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.bg-\[length\:73px_82px\] {
  background-size: 73px 82px;
}

.bg-cover {
  background-size: cover;
}

.bg-center {
  background-position: center;
}

.bg-left-top {
  background-position: left top;
}

.bg-repeat {
  background-repeat: repeat;
}

.bg-no-repeat {
  background-repeat: no-repeat;
}

.bg-repeat-x {
  background-repeat: repeat-x;
}

.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}

.p-0 {
  padding: 0px;
}

.p-1 {
  padding: 0.25rem;
}

.p-10 {
  padding: 2.5rem;
}

.p-2 {
  padding: 0.5rem;
}

.p-3 {
  padding: 0.75rem;
}

.p-4 {
  padding: 1rem;
}

.p-6 {
  padding: 1.5rem;
}

.p-\[24px\] {
  padding: 24px;
}

.p-\[25px\] {
  padding: 25px;
}

.p-\[40px\] {
  padding: 40px;
}

.p-\[5px\] {
  padding: 5px;
}

.px-0 {
  padding-left: 0px;
  padding-right: 0px;
}

.px-10 {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

.px-12 {
  padding-left: 3rem;
  padding-right: 3rem;
}

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}

.px-\[20px\] {
  padding-left: 20px;
  padding-right: 20px;
}

.px-\[24px\] {
  padding-left: 24px;
  padding-right: 24px;
}

.px-\[26px\] {
  padding-left: 26px;
  padding-right: 26px;
}

.px-\[27px\] {
  padding-left: 27px;
  padding-right: 27px;
}

.px-\[29px\] {
  padding-left: 29px;
  padding-right: 29px;
}

.px-\[32px\] {
  padding-left: 32px;
  padding-right: 32px;
}

.px-\[40px\] {
  padding-left: 40px;
  padding-right: 40px;
}

.px-\[80px\] {
  padding-left: 80px;
  padding-right: 80px;
}

.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.py-\[10px\] {
  padding-top: 10px;
  padding-bottom: 10px;
}

.py-\[14px\] {
  padding-top: 14px;
  padding-bottom: 14px;
}

.py-\[17px\] {
  padding-top: 17px;
  padding-bottom: 17px;
}

.py-\[40px\] {
  padding-top: 40px;
  padding-bottom: 40px;
}

.py-\[7px\] {
  padding-top: 7px;
  padding-bottom: 7px;
}

.py-\[8px\] {
  padding-top: 8px;
  padding-bottom: 8px;
}

.pb-6 {
  padding-bottom: 1.5rem;
}

.pb-\[120px\] {
  padding-bottom: 120px;
}

.pb-\[16px\] {
  padding-bottom: 16px;
}

.pb-\[20px\] {
  padding-bottom: 20px;
}

.pb-\[24px\] {
  padding-bottom: 24px;
}

.pb-\[32px\] {
  padding-bottom: 32px;
}

.pb-\[40px\] {
  padding-bottom: 40px;
}

.pl-12 {
  padding-left: 3rem;
}

.pl-6 {
  padding-left: 1.5rem;
}

.pl-8 {
  padding-left: 2rem;
}

.pl-\[14px\] {
  padding-left: 14px;
}

.pl-\[24px\] {
  padding-left: 24px;
}

.pl-\[2px\] {
  padding-left: 2px;
}

.pl-\[89px\] {
  padding-left: 89px;
}

.pr-6 {
  padding-right: 1.5rem;
}

.pr-\[24px\] {
  padding-right: 24px;
}

.pr-\[26px\] {
  padding-right: 26px;
}

.pr-\[80px\] {
  padding-right: 80px;
}

.pt-0 {
  padding-top: 0px;
}

.pt-6 {
  padding-top: 1.5rem;
}

.pt-\[20px\] {
  padding-top: 20px;
}

.pt-\[24px\] {
  padding-top: 24px;
}

.pt-\[44px\] {
  padding-top: 44px;
}

.pt-\[80px\] {
  padding-top: 80px;
}

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

.text-right {
  text-align: right;
}

.text-start {
  text-align: start;
}

.font-fira {
  font-family: "Fira Sans", sans-serif;
}

.font-roboto {
  font-family: Roboto, sans-serif;
}

.font-sans {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.text-\[12\.252px\] {
  font-size: 12.252px;
}

.text-\[12px\] {
  font-size: 12px;
}

.text-\[14px\] {
  font-size: 14px;
}

.text-\[16px\] {
  font-size: 16px;
}

.text-\[18\.377px\] {
  font-size: 18.377px;
}

.text-\[18px\] {
  font-size: 18px;
}

.text-\[20px\] {
  font-size: 20px;
}

.text-\[21px\] {
  font-size: 21px;
}

.text-\[24px\] {
  font-size: 24px;
}

.text-\[30px\] {
  font-size: 30px;
}

.text-\[36px\] {
  font-size: 36px;
}

.text-\[48px\] {
  font-size: 48px;
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.font-bold {
  font-weight: 700;
}

.font-medium {
  font-weight: 500;
}

.font-normal {
  font-weight: 400;
}

.font-semibold {
  font-weight: 600;
}

.uppercase {
  text-transform: uppercase;
}

.italic {
  font-style: italic;
}

.leading-\[16px\] {
  line-height: 16px;
}

.leading-\[18px\] {
  line-height: 18px;
}

.leading-\[19px\] {
  line-height: 19px;
}

.leading-\[21px\] {
  line-height: 21px;
}

.leading-\[24px\] {
  line-height: 24px;
}

.leading-\[29px\] {
  line-height: 29px;
}

.leading-\[32px\] {
  line-height: 32px;
}

.leading-\[36px\] {
  line-height: 36px;
}

.leading-\[43px\] {
  line-height: 43px;
}

.leading-\[58px\] {
  line-height: 58px;
}

.leading-normal {
  line-height: 1.5;
}

.leading-relaxed {
  line-height: 1.625;
}

.leading-tight {
  line-height: 1.25;
}

.text-\[\#192240\] {
  --tw-text-opacity: 1;
  color: rgb(25 34 64 / var(--tw-text-opacity, 1));
}

.text-\[\#FFFAE5\] {
  --tw-text-opacity: 1;
  color: rgb(255 250 229 / var(--tw-text-opacity, 1));
}

.text-black {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}

.text-blue-950 {
  --tw-text-opacity: 1;
  color: rgb(23 37 84 / var(--tw-text-opacity, 1));
}

.text-bontiamo-blue-200 {
  --tw-text-opacity: 1;
  color: rgb(165 170 185 / var(--tw-text-opacity, 1));
}

.text-bontiamo-blue-400 {
  --tw-text-opacity: 1;
  color: rgb(76 85 115 / var(--tw-text-opacity, 1));
}

.text-bontiamo-blue-500 {
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
}

.text-bontiamo-blue-600 {
  --tw-text-opacity: 1;
  color: rgb(25 34 64 / var(--tw-text-opacity, 1));
}

.text-bontiamo-blue-800 {
  --tw-text-opacity: 1;
  color: rgb(12 17 32 / var(--tw-text-opacity, 1));
}

.text-bontiamo-blue-900 {
  --tw-text-opacity: 1;
  color: rgb(6 9 16 / var(--tw-text-opacity, 1));
}

.text-bontiamo-neutral-black {
  --tw-text-opacity: 1;
  color: rgb(45 41 38 / var(--tw-text-opacity, 1));
}

.text-bontiamo-neutral-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.text-bontiamo-white-25 {
  --tw-text-opacity: 1;
  color: rgb(253 253 253 / var(--tw-text-opacity, 1));
}

.text-bontiamo-yellow-50 {
  --tw-text-opacity: 1;
  color: rgb(255 250 229 / var(--tw-text-opacity, 1));
}

.text-gray-300 {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}

.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.text-gray-500 {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

.text-gray-600 {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.text-gray-700 {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

.text-gray-800 {
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}

.text-gray-900 {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

.text-orange-400 {
  --tw-text-opacity: 1;
  color: rgb(251 146 60 / var(--tw-text-opacity, 1));
}

.text-orange-700 {
  --tw-text-opacity: 1;
  color: rgb(194 65 12 / var(--tw-text-opacity, 1));
}

.text-orange-800 {
  --tw-text-opacity: 1;
  color: rgb(154 52 18 / var(--tw-text-opacity, 1));
}

.text-orange-900 {
  --tw-text-opacity: 1;
  color: rgb(124 45 18 / var(--tw-text-opacity, 1));
}

.text-primary-600 {
  --tw-text-opacity: 1;
  color: rgb(25 34 64 / var(--tw-text-opacity, 1));
}

.text-red-400 {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}

.text-red-600 {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}

.text-red-700 {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}

.text-red-800 {
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.text-yellow-400 {
  --tw-text-opacity: 1;
  color: rgb(250 204 21 / var(--tw-text-opacity, 1));
}

.text-yellow-700 {
  --tw-text-opacity: 1;
  color: rgb(161 98 7 / var(--tw-text-opacity, 1));
}

.text-yellow-800 {
  --tw-text-opacity: 1;
  color: rgb(133 77 14 / var(--tw-text-opacity, 1));
}

.underline {
  text-decoration-line: underline;
}

.no-underline {
  text-decoration-line: none;
}

.underline-offset-2 {
  text-underline-offset: 2px;
}

.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.opacity-0 {
  opacity: 0;
}

.opacity-100 {
  opacity: 1;
}

.opacity-30 {
  opacity: 0.3;
}

.opacity-75 {
  opacity: 0.75;
}

.opacity-\[0\.1\] {
  opacity: 0.1;
}

.opacity-\[0\.24\] {
  opacity: 0.24;
}

.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.outline {
  outline-style: solid;
}

.outline-2 {
  outline-width: 2px;
}

.outline-offset-2 {
  outline-offset: 2px;
}

.ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-bontiamo-blue-500 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(30 43 80 / var(--tw-ring-opacity, 1));
}

.ring-primary-500 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(30 43 80 / var(--tw-ring-opacity, 1));
}

.ring-opacity-50 {
  --tw-ring-opacity: 0.5;
}

.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.grayscale {
  --tw-grayscale: grayscale(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.invert {
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.sepia {
  --tw-sepia: sepia(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.backdrop-filter {
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-\[border-color\2c background-color\] {
  transition-property: border-color,background-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-\[easy\] {
  transition-property: easy;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-\[width\] {
  transition-property: width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-shadow {
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-200 {
  transition-duration: 200ms;
}

.duration-300 {
  transition-duration: 300ms;
}

.duration-500 {
  transition-duration: 500ms;
}

.duration-700 {
  transition-duration: 700ms;
}

.duration-\[250ms\] {
  transition-duration: 250ms;
}

.duration-\[300ms\] {
  transition-duration: 300ms;
}

.content-\[\'\'\] {
  --tw-content: '';
  content: var(--tw-content);
}

.p-bontiamo {
  padding: 24px;
}

@media (min-width: 768px) {
  .p-bontiamo {
    padding: 80px;
  }
}

.text-14-16 {
  font-size: 14px;
  line-height: 16px;
}

.text-16-19 {
  font-size: 16px;
  line-height: 19px;
}

.text-16-24 {
  font-size: 16px;
  line-height: 24px;
}

.text-18-21 {
  font-size: 18px;
  line-height: 21px;
}

.text-20-24 {
  font-size: 20px;
  line-height: 24px;
}

.text-24-29 {
  font-size: 24px;
  line-height: 29px;
}

.text-30-36 {
  font-size: 30px;
  line-height: 36px;
}

.p-standard {
  padding-top: 40px;
  padding-bottom: 40px;
  padding-left: 24px;
  padding-right: 24px;
}

@media (min-width: 1024px) {
  .p-standard {
    padding-top: 40px;
    padding-bottom: 40px;
    padding-left: 24px;
    padding-right: 24px;
  }
}

.bontiamo-box-standard {
  width: 100%;
  max-width: 1440px;
  margin: auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.focus-visible:focus-visible {
  outline: 2px solid #1E2B50;
  outline-offset: 2px;
}

/* Spacing utilities */

.space-y-section > * + * {
  margin-top: 4rem;
}

@media (min-width: 768px) {
  .space-y-section > * + * {
    margin-top: 5rem;
  }
}

@media (min-width: 1024px) {
  .space-y-section > * + * {
    margin-top: 6rem;
  }
}

/* Text utilities */

.text-shadow {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.text-shadow-lg {
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.text-shadow-neutral {
  text-shadow: 0 2px 4px rgba(45, 41, 38, 0.1);
}

.text-contrast-neutral {
  --tw-text-opacity: 1;
  color: rgb(45 41 38 / var(--tw-text-opacity, 1));
}

.text-contrast-neutral-inverse {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

/* Background utilities */

.bg-gradient-primary {
  background: linear-gradient(135deg, #1E2B50, #192240);
}

.bg-gradient-blue {
  background: linear-gradient(135deg, #1E2B50, #192240);
}

.bg-gradient-yellow {
  background: linear-gradient(135deg, #FFD100, #CCA700);
}

.bg-gradient-blue-yellow {
  background: linear-gradient(135deg, #1E2B50, #FFD100);
}

.bg-gradient-neutral {
  background: linear-gradient(135deg, #FFFFFF, #F5F5F5);
}

.bg-gradient-neutral-dark {
  background: linear-gradient(135deg, #252B37, #2D2926);
}

/* Animation utilities */

@keyframes slideUp {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.animate-fade-in-up {
  animation: slideUp 0.3s ease-out;
}

/* Responsive utilities */

.aspect-video-custom {
  aspect-ratio: 16 / 9;
}

.aspect-square-custom {
  aspect-ratio: 1 / 1;
}

/* ==========================================================================
   SLIDER INTERATTIVO LAYOUT
   ========================================================================== */

.bontiamo-sfondo-yellow {
  --tw-bg-opacity: 1;
  background-color: rgb(255 209 0 / var(--tw-bg-opacity, 1));
}

.bontiamo-sfondo-blu,
.bontiamo-sfondo-blue {
  --tw-bg-opacity: 1;
  background-color: rgb(30 43 80 / var(--tw-bg-opacity, 1));
}

.site-content {
  margin-top: 81px;
}

@media (min-width: 1024px) {
  .site-content {
    margin-top: -46px;
  }
}

/* ==========================================================================
   BASE STYLES
   ========================================================================== */

/* ==========================================================================
   COMPONENTS
   ========================================================================== */

/* ==========================================================================
   UTILITIES
   ========================================================================== */

/* ==========================================================================
   WORDPRESS ADMIN BAR FIX
   ========================================================================== */

.admin-bar .skip-link:focus {
  top: 2rem;
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

/* ==========================================================================
   SLIDESHOW ARTICOLI LAYOUT
   ========================================================================== */

.bontiamo-container {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1440px;
  padding-top: 40px;
  padding-bottom: 40px;
  padding-left: 24px;
  padding-right: 24px;
}

@media (min-width: 1024px) {
  .bontiamo-container {
    padding-top: 40px;
    padding-bottom: 40px;
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (min-width: 768px) {
  .sm\:hidden.slideauto_slide_item {
    opacity: 0;
    display: none;
  }

  .sm\:hidden.slideauto-pause-bars::before,.sm\:hidden
  .slideauto-pause-bars::after,.sm\:hidden
  .slideauto-play-triangle::before {
    display: none;
  }
}

@media (min-width: 1024px) {
  .md\:\!hidden.slideauto_slide_item {
    opacity: 0;
  }

  .md\:hidden.slideauto_slide_item {
    opacity: 0;
  }

  .md\:\!hidden.slideauto_slide_item {
    display: none !important;
  }

  .md\:hidden.slideauto_slide_item {
    display: none;
  }

  .md\:\!hidden.slideauto-pause-bars::before,.md\:\!hidden
  .slideauto-pause-bars::after,.md\:\!hidden
  .slideauto-play-triangle::before {
    display: none !important;
  }

  .md\:hidden.slideauto-pause-bars::before,.md\:hidden
  .slideauto-pause-bars::after,.md\:hidden
  .slideauto-play-triangle::before {
    display: none;
  }

  .md\:\!hidden.slideauto-pause-bars::before,.md\:\!hidden
  .slideauto-pause-bars::after,.md\:\!hidden
  .slideauto-play-triangle::before {
    display: none !important;
  }

  .md\:hidden.slideauto-pause-bars::before,.md\:hidden
  .slideauto-pause-bars::after,.md\:hidden
  .slideauto-play-triangle::before {
    display: none;
  }

  .md\:\!hidden.slideauto-pause-bars::before,.md\:\!hidden
  .slideauto-pause-bars::after,.md\:\!hidden
  .slideauto-play-triangle::before {
    display: none !important;
  }

  .md\:hidden.slideauto-pause-bars::before,.md\:hidden
  .slideauto-pause-bars::after,.md\:hidden
  .slideauto-play-triangle::before {
    display: none;
  }
}

.\*\:focus-visible > *:focus-visible {
  outline: 2px solid #1E2B50;
  outline-offset: 2px;
}

.hover\:scale-105:hover {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:border-primary-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(121 128 150 / var(--tw-border-opacity, 1));
}

.hover\:bg-blue-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}

.hover\:bg-bontiamo-blue-400:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(76 85 115 / var(--tw-bg-opacity, 1));
}

.hover\:bg-bontiamo-blue-500:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(30 43 80 / var(--tw-bg-opacity, 1));
}

.hover\:bg-bontiamo-blue-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(25 34 64 / var(--tw-bg-opacity, 1));
}

.hover\:bg-bontiamo-blue-800:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(12 17 32 / var(--tw-bg-opacity, 1));
}

.hover\:bg-bontiamo-white-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(233 234 235 / var(--tw-bg-opacity, 1));
}

.hover\:bg-bontiamo-white-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1));
}

.hover\:bg-bontiamo-white-800:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(37 43 55 / var(--tw-bg-opacity, 1));
}

.hover\:bg-bontiamo-yellow-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 250 229 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.hover\:bg-primary-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(210 213 220 / var(--tw-bg-opacity, 1));
}

.hover\:bg-primary-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}

.hover\:bg-primary-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(19 26 48 / var(--tw-bg-opacity, 1));
}

.hover\:bg-yellow-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 249 195 / var(--tw-bg-opacity, 1));
}

.hover\:text-blue-500:hover {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}

.hover\:text-blue-600:hover {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}

.hover\:text-blue-700:hover {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}

.hover\:text-bontiamo-blue-500:hover {
  --tw-text-opacity: 1;
  color: rgb(30 43 80 / var(--tw-text-opacity, 1));
}

.hover\:text-bontiamo-white-50:hover {
  --tw-text-opacity: 1;
  color: rgb(250 250 250 / var(--tw-text-opacity, 1));
}

.hover\:text-orange-700:hover {
  --tw-text-opacity: 1;
  color: rgb(194 65 12 / var(--tw-text-opacity, 1));
}

.hover\:text-primary-600:hover {
  --tw-text-opacity: 1;
  color: rgb(25 34 64 / var(--tw-text-opacity, 1));
}

.hover\:text-primary-700:hover {
  --tw-text-opacity: 1;
  color: rgb(19 26 48 / var(--tw-text-opacity, 1));
}

.hover\:text-primary-800:hover {
  --tw-text-opacity: 1;
  color: rgb(12 17 32 / var(--tw-text-opacity, 1));
}

.hover\:underline:hover {
  text-decoration-line: underline;
}

.hover\:shadow-lg:hover {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.focus\:not-sr-only:focus {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

.focus\:absolute:focus {
  position: absolute;
}

.focus\:left-2:focus {
  left: 0.5rem;
}

.focus\:top-2:focus {
  top: 0.5rem;
}

.focus\:z-20:focus {
  z-index: 20;
}

.focus\:z-50:focus {
  z-index: 50;
}

.focus\:translate-y-0:focus {
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.focus\:rounded:focus {
  border-radius: 0.25rem;
}

.focus\:bg-black:focus {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}

.focus\:bg-bontiamo-yellow-50:focus {
  --tw-bg-opacity: 1;
  background-color: rgb(255 250 229 / var(--tw-bg-opacity, 1));
}

.focus\:bg-primary-700:focus {
  --tw-bg-opacity: 1;
  background-color: rgb(19 26 48 / var(--tw-bg-opacity, 1));
}

.focus\:px-4:focus {
  padding-left: 1rem;
  padding-right: 1rem;
}

.focus\:py-2:focus {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.focus\:text-white:focus {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus\:outline-2:focus {
  outline-width: 2px;
}

.focus\:outline-offset-0:focus {
  outline-offset: 0px;
}

.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-bontiamo-blue-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(30 43 80 / var(--tw-ring-opacity, 1));
}

.focus\:ring-bontiamo-yellow-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(255 209 0 / var(--tw-ring-opacity, 1));
}

.focus\:ring-primary-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(30 43 80 / var(--tw-ring-opacity, 1));
}

.focus\:ring-yellow-600:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(202 138 4 / var(--tw-ring-opacity, 1));
}

.focus\:ring-offset-2:focus {
  --tw-ring-offset-width: 2px;
}

.focus\:not-sr-only:focus {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

.group:hover .group-hover\:text-gray-900 {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-primary-600 {
  --tw-text-opacity: 1;
  color: rgb(25 34 64 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-primary-700 {
  --tw-text-opacity: 1;
  color: rgb(19 26 48 / var(--tw-text-opacity, 1));
}

@media not all and (min-width: 1024px) {
  .max-md\:h-\[395px\] {
    height: 395px;
  }

  .max-md\:w-\[300px\] {
    width: 300px;
  }

  .max-md\:w-full {
    width: 100%;
  }

  .max-md\:flex-shrink-0 {
    flex-shrink: 0;
  }
}

@media not all and (min-width: 768px) {
  .max-sm\:w-full {
    width: 100%;
  }

  .max-sm\:max-w-\[90vw\] {
    max-width: 90vw;
  }

  .max-sm\:rounded-\[20px\] {
    border-radius: 20px;
  }
}

@media not all and (min-width: 390px) {
  .max-xs\:left-\[calc\(50\%\+150px\+48px\)\] {
    left: calc(50% + 150px + 48px);
  }

  .max-xs\:left-\[calc\(50\%\+150px\+48px\+300px\+48px\)\] {
    left: calc(50% + 150px + 48px + 300px + 48px);
  }

  .max-xs\:left-\[calc\(50\%\+150px\+48px\+300px\+48px\+300px\+48px\)\] {
    left: calc(50% + 150px + 48px + 300px + 48px + 300px + 48px);
  }

  .max-xs\:left-\[calc\(50\%-150px\)\] {
    left: calc(50% - 150px);
  }

  .max-xs\:left-\[calc\(50\%-150px-48px\)\] {
    left: calc(50% - 150px - 48px);
  }

  .max-xs\:left-\[calc\(50\%-150px-48px-300px\)\] {
    left: calc(50% - 150px - 48px - 300px);
  }

  .max-xs\:left-\[calc\(50\%-150px-48px-300px-48px-300px\)\] {
    left: calc(50% - 150px - 48px - 300px - 48px - 300px);
  }

  .max-xs\:left-\[calc\(50\%-150px-48px-300px-48px-300px-48px-300px\)\] {
    left: calc(50% - 150px - 48px - 300px - 48px - 300px - 48px - 300px);
  }

  .max-xs\:top-18 {
    top: 4.5rem;
  }

  .max-xs\:top-9 {
    top: 2.25rem;
  }

  .max-xs\:top-\[108px\] {
    top: 108px;
  }
}

@media (min-width: 390px) {
  .xs\:ml-\[-20px\] {
    margin-left: -20px;
  }

  .xs\:flex {
    display: flex;
  }

  .xs\:h-\[80vh\] {
    height: 80vh;
  }

  .xs\:max-h-\[80vh\] {
    max-height: 80vh;
  }

  .xs\:w-\[calc\(100\%\+79px\)\] {
    width: calc(100% + 79px);
  }

  .xs\:w-full {
    width: 100%;
  }

  .xs\:max-w-full {
    max-width: 100%;
  }

  .xs\:gap-\[40px\] {
    gap: 40px;
  }

  .xs\:gap-\[48px\] {
    gap: 48px;
  }

  .xs\:p-4 {
    padding: 1rem;
  }

  .xs\:px-0 {
    padding-left: 0px;
    padding-right: 0px;
  }

  .xs\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .xs\:py-0 {
    padding-top: 0px;
    padding-bottom: 0px;
  }

  .xs\:py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .xs\:pt-0 {
    padding-top: 0px;
  }

  .xs\:text-\[24px\] {
    font-size: 24px;
  }

  .xs\:text-\[36px\] {
    font-size: 36px;
  }

  .xs\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .xs\:leading-\[29px\] {
    line-height: 29px;
  }

  .xs\:leading-\[43px\] {
    line-height: 43px;
  }
}

@media (min-width: 768px) {
  .sm\:order-1 {
    order: 1;
  }

  .sm\:m-auto {
    margin: auto;
  }

  .sm\:mt-20 {
    margin-top: 5rem;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:hidden {
    display: none;
  }

  .sm\:h-\[425px\] {
    height: 425px;
  }

  .sm\:h-\[500px\] {
    height: 500px;
  }

  .sm\:h-\[600px\] {
    height: 600px;
  }

  .sm\:h-hero-default {
    height: 80vh;
  }

  .sm\:min-h-0 {
    min-height: 0px;
  }

  .sm\:min-h-\[calc\(6\*520px\)\] {
    min-height: calc(6 * 520px);
  }

  .sm\:w-\[200px\] {
    width: 200px;
  }

  .sm\:w-\[320px\] {
    width: 320px;
  }

  .sm\:w-\[380px\] {
    width: 380px;
  }

  .sm\:w-\[400px\] {
    width: 400px;
  }

  .sm\:w-\[500px\] {
    width: 500px;
  }

  .sm\:w-\[600px\] {
    width: 600px;
  }

  .sm\:w-\[800px\] {
    width: 800px;
  }

  .sm\:w-full {
    width: 100%;
  }

  .sm\:max-w-\[600px\] {
    max-width: 600px;
  }

  .sm\:max-w-\[800px\] {
    max-width: 800px;
  }

  .sm\:flex-1 {
    flex: 1 1 0%;
  }

  .sm\:flex-shrink-0 {
    flex-shrink: 0;
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:flex-col {
    flex-direction: column;
  }

  .sm\:items-center {
    align-items: center;
  }

  .sm\:justify-center {
    justify-content: center;
  }

  .sm\:justify-between {
    justify-content: space-between;
  }

  .sm\:gap-\[40px\] {
    gap: 40px;
  }

  .sm\:gap-\[80px\] {
    gap: 80px;
  }

  .sm\:p-6 {
    padding: 1.5rem;
  }

  .sm\:p-\[40px\] {
    padding: 40px;
  }

  .sm\:px-0 {
    padding-left: 0px;
    padding-right: 0px;
  }

  .sm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .sm\:px-\[120px\] {
    padding-left: 120px;
    padding-right: 120px;
  }

  .sm\:px-\[80px\] {
    padding-left: 80px;
    padding-right: 80px;
  }

  .sm\:py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .sm\:py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .sm\:py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .sm\:py-28 {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }

  .sm\:pb-\[40px\] {
    padding-bottom: 40px;
  }

  .sm\:pl-\[40px\] {
    padding-left: 40px;
  }

  .sm\:pt-0 {
    padding-top: 0px;
  }

  .sm\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .sm\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .sm\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .sm\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }

  .sm\:text-\[22px\] {
    font-size: 22px;
  }

  .sm\:text-\[24px\] {
    font-size: 24px;
  }

  .sm\:text-\[36px\] {
    font-size: 36px;
  }

  .sm\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .sm\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .md\:absolute {
    position: absolute;
  }

  .md\:relative {
    position: relative;
  }

  .md\:bottom-12 {
    bottom: 3rem;
  }

  .md\:bottom-\[256px\] {
    bottom: 256px;
  }

  .md\:left-1\/2 {
    left: 50%;
  }

  .md\:left-\[50\%\] {
    left: 50%;
  }

  .md\:left-auto {
    left: auto;
  }

  .md\:right-0 {
    right: 0px;
  }

  .md\:right-6 {
    right: 1.5rem;
  }

  .md\:right-\[6px\] {
    right: 6px;
  }

  .md\:top-1\/2 {
    top: 50%;
  }

  .md\:top-auto {
    top: auto;
  }

  .md\:z-auto {
    z-index: auto;
  }

  .md\:order-2 {
    order: 2;
  }

  .md\:m-auto {
    margin: auto;
  }

  .md\:mx-4 {
    margin-left: 1rem;
    margin-right: 1rem;
  }

  .md\:-ml-20 {
    margin-left: -5rem;
  }

  .md\:-mt-\[46px\] {
    margin-top: -46px;
  }

  .md\:mb-0 {
    margin-bottom: 0px;
  }

  .md\:mb-\[40px\] {
    margin-bottom: 40px;
  }

  .md\:mb-\[80px\] {
    margin-bottom: 80px;
  }

  .md\:ml-\[33px\] {
    margin-left: 33px;
  }

  .md\:mr-8 {
    margin-right: 2rem;
  }

  .md\:mt-\[80px\] {
    margin-top: 80px;
  }

  .md\:flex {
    display: flex;
  }

  .md\:grid {
    display: grid;
  }

  .md\:\!hidden {
    display: none !important;
  }

  .md\:hidden {
    display: none;
  }

  .md\:h-\[100vh\] {
    height: 100vh;
  }

  .md\:h-\[127px\] {
    height: 127px;
  }

  .md\:h-\[181px\] {
    height: 181px;
  }

  .md\:h-\[261px\] {
    height: 261px;
  }

  .md\:h-\[405px\] {
    height: 405px;
  }

  .md\:h-\[550px\] {
    height: 550px;
  }

  .md\:h-\[60vh\] {
    height: 60vh;
  }

  .md\:h-\[62px\] {
    height: 62px;
  }

  .md\:w-48 {
    width: 12rem;
  }

  .md\:w-56 {
    width: 14rem;
  }

  .md\:w-\[1060px\] {
    width: 1060px;
  }

  .md\:w-\[1200px\] {
    width: 1200px;
  }

  .md\:w-\[157px\] {
    width: 157px;
  }

  .md\:w-\[200px\] {
    width: 200px;
  }

  .md\:w-\[240px\] {
    width: 240px;
  }

  .md\:w-\[261px\] {
    width: 261px;
  }

  .md\:w-\[400px\] {
    width: 400px;
  }

  .md\:w-\[600px\] {
    width: 600px;
  }

  .md\:w-\[616px\] {
    width: 616px;
  }

  .md\:w-\[calc\(100\%\+9\.5rem\)\] {
    width: calc(100% + 9.5rem);
  }

  .md\:w-auto {
    width: auto;
  }

  .md\:min-w-\[261px\] {
    min-width: 261px;
  }

  .md\:max-w-\[1440px\] {
    max-width: 1440px;
  }

  .md\:max-w-\[600px\] {
    max-width: 600px;
  }

  .md\:max-w-\[800px\] {
    max-width: 800px;
  }

  .md\:flex-1 {
    flex: 1 1 0%;
  }

  .md\:-translate-x-1\/2 {
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .md\:-translate-y-1\/2 {
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .md\:translate-x-\[-50\%\] {
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .md\:translate-y-\[-50\%\] {
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .md\:transform {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:flex-row {
    flex-direction: row;
  }

  .md\:flex-wrap {
    flex-wrap: wrap;
  }

  .md\:items-start {
    align-items: flex-start;
  }

  .md\:items-center {
    align-items: center;
  }

  .md\:justify-center {
    justify-content: center;
  }

  .md\:gap-20 {
    gap: 5rem;
  }

  .md\:gap-6 {
    gap: 1.5rem;
  }

  .md\:gap-\[40px\] {
    gap: 40px;
  }

  .md\:gap-\[48px\] {
    gap: 48px;
  }

  .md\:rounded-\[40px\] {
    border-radius: 40px;
  }

  .md\:bg-\[url\(\'\.\.\/images\/banda-blu-header\.svg\'\)\] {
    background-image: url('../images/banda-blu-header.svg');
  }

  .md\:bg-\[url\(\'\.\.\/images\/card-rectangle\.svg\'\)\] {
    background-image: url('../images/card-rectangle.svg');
  }

  .md\:p-0 {
    padding: 0px;
  }

  .md\:p-10 {
    padding: 2.5rem;
  }

  .md\:p-6 {
    padding: 1.5rem;
  }

  .md\:p-\[40px\] {
    padding: 40px;
  }

  .md\:p-\[80px\] {
    padding: 80px;
  }

  .md\:px-0 {
    padding-left: 0px;
    padding-right: 0px;
  }

  .md\:px-20 {
    padding-left: 5rem;
    padding-right: 5rem;
  }

  .md\:px-\[120px\] {
    padding-left: 120px;
    padding-right: 120px;
  }

  .md\:px-\[40px\] {
    padding-left: 40px;
    padding-right: 40px;
  }

  .md\:px-\[80px\] {
    padding-left: 80px;
    padding-right: 80px;
  }

  .md\:py-0 {
    padding-top: 0px;
    padding-bottom: 0px;
  }

  .md\:py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .md\:py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .md\:py-\[14px\] {
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .md\:pb-0 {
    padding-bottom: 0px;
  }

  .md\:pb-\[40px\] {
    padding-bottom: 40px;
  }

  .md\:pb-\[80px\] {
    padding-bottom: 80px;
  }

  .md\:pl-0 {
    padding-left: 0px;
  }

  .md\:pl-6 {
    padding-left: 1.5rem;
  }

  .md\:pl-\[80px\] {
    padding-left: 80px;
  }

  .md\:pr-6 {
    padding-right: 1.5rem;
  }

  .md\:pr-\[80px\] {
    padding-right: 80px;
  }

  .md\:pt-0 {
    padding-top: 0px;
  }

  .md\:pt-20 {
    padding-top: 5rem;
  }

  .md\:pt-\[1px\] {
    padding-top: 1px;
  }

  .md\:pt-\[40px\] {
    padding-top: 40px;
  }

  .md\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .md\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }

  .md\:text-\[48px\] {
    font-size: 48px;
  }

  .md\:leading-\[58px\] {
    line-height: 58px;
  }

  .md\:opacity-100 {
    opacity: 1;
  }

  .md\:text-19-21 {
    line-height: 21px;
    font-size: 19px;
  }

  .md\:text-36-43 {
    font-size: 36px;
    line-height: 43px;
  }
}

@media (min-width: 1280px) {
  .min-\[1280px\]\:h-\[500px\] {
    height: 500px;
  }

  .min-\[1280px\]\:w-\[400px\] {
    width: 400px;
  }

  .min-\[1280px\]\:w-\[500px\] {
    width: 500px;
  }

  .min-\[1280px\]\:w-\[700px\] {
    width: 700px;
  }

  .min-\[1280px\]\:w-\[800px\] {
    width: 800px;
  }
}

@media (min-width: 1440px) {
  .lg\:w-\[1060px\] {
    width: 1060px;
  }

  .lg\:w-\[450px\] {
    width: 450px;
  }

  .lg\:py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .lg\:pl-\[80px\] {
    padding-left: 80px;
  }

  .lg\:pr-\[80px\] {
    padding-right: 80px;
  }
}