:root {
  --bg-gray: #FFFFFF;
  --color-white: #FFFFFF;
  --text-black: #1D1D1D;
  --blue: #1073C4;
  --blue-hover: #0D5FA3;
  --divider: #DFE4EB;
  --color-orange: #FBB009;
  --color-orange-bg-light: #FFFAE9;
  --font-primary: 'DM Sans', sans-serif;
  --font-script: 'Segoe Script', 'Brush Script MT', cursive;
  --font-secondary: 'Inter', sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 800;
  --radius-md: 12px;
  --radius-lg: 16px;
  --transition-fast: 0.2s ease;
  --site-max-width: 1440px;
  --site-min-width: 320px;
  --card-red-text: #EF4444;
  --card-red-bg: #F8D7DA;
  --card-green-text: #5EA977;
  --card-green-bg: #D4EDDA;
  --card-yellow-text: #AB7600;
  --card-yellow-bg: #FFF3CD;
  --color-accent-gold: #F5A623;
  --funz-orange: #F7941D;
  --funz-title-color: #1A1A1A;
  --funz-text-color: #4A4A4A;
  --color-bg: #FAFAFA;
  --color-accent: #FB9F33;
  --color-text: #3C3C3C;
  --color-annotation: #2C5B8A;
  --planner-orange: var(--color-accent);
  --planner-blue: var(--blue);
  --planner-bg: var(--color-bg);
  --planner-text: #2E2E2E;
  --arancio: var(--color-accent);
  --blu: var(--blue);
  --bg: var(--color-bg);
  --title-color: var(--color-accent);
  --caption-color: var(--blue);
  --bg-color: var(--color-bg);
  --text-color: #2E2E2E;
  --section-title-color: var(--color-accent);
  --section-caption-color: var(--blue);
  --section-bg-color: var(--color-bg);
  --section-text-color: #2E2E2E;
  --section-spacing: 96px;
  --section-spacing-mobile: 72px;
  --shadow-card: 0 18px 40px rgba(15, 23, 42, 0.16);
  --shadow-soft: 0 18px 45px rgb(20 30 50 / .12);
}

* {
  box-sizing: border-box
}

body {
  font-family: var(--font-primary);
  color: var(--text-black);
  min-width: var(--site-min-width);
  margin: 0;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: inherit
}

ul {
  list-style: none;
  padding: 0;
  margin: 0
}

.belix-container {
  max-width: var(--site-max-width);
  min-width: calc(var(--site-min-width) - 48px);
  margin: 0 auto;
  padding: 0 48px
}

.section-title-script,
.planner-title,
.liste-consumazioni .titolo,
.tabelle-section .section-title,
.config-title {
  font-family: var(--font-script);
  font-weight: var(--fw-regular);
  line-height: 1.1;
}

.section-text-base,
.planner-desc,
.liste-consumazioni .testo,
.tabelle-section .section-text p,
.config-text {
  font-family: var(--font-primary);
  font-weight: var(--fw-regular);
  font-size: 15px;
  line-height: 1.6;
  color: var(--section-text-color);
}

.intro-list li,
.liste-consumazioni .testo ul li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 12px;
  font-family: var(--font-primary);
  font-weight: var(--fw-regular);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text);
}

.intro-list li::before,
.liste-consumazioni .testo ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-text);
}

/*= HEADER =*/

.belix-header {
  background-color: var(--bg-gray);
  position: relative;
  z-index: 1000
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 96px;
  gap: 24px
}

.header-logo img {
  height: 55px;
  width: auto;
  display: block
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 40px;
  margin: 0 auto
}

.nav-link-belix {
  font-family: var(--font-primary);
  font-weight: var(--fw-medium);
  font-size: 20px;
  color: var(--text-black);
  transition: color var(--transition-fast)
}

.nav-link-belix:hover {
  color: var(--blue)
}

.nav-link-belix.active {
  color: var(--blue)
}

.btn-demo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--blue);
  color: var(--color-white);
  font-family: var(--font-primary);
  font-weight: var(--fw-regular);
  font-size: 16px;
  border-radius: var(--radius-md);
  padding: 12px 24px;
  white-space: nowrap;
  transition: opacity var(--transition-fast)
}

.btn-demo:hover {
  opacity: .88;
  color: #fff
}

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 1001
}

.hamburger span {
  display: block;
  width: 26px;
  height: 2px;
  background-color: var(--text-black);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease
}

.hamburger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg)
}

.hamburger.open span:nth-child(2) {
  opacity: 0
}

.hamburger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg)
}

.mobile-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: var(--bg-gray);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  box-shadow: 0 8px 16px rgb(0 0 0 / .06)
}

.mobile-menu.open {
  max-height: 400px
}

.mobile-menu-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 48px 32px;
  gap: 24px;
  text-align: center
}

.btn-demo-mobile {
  margin-top: 8px
}

body.menu-open {
  overflow: hidden
}

@media (max-width:991.98px) {
  .hamburger {
    display: flex
  }
}

/*= HERO =*/

/* La foto era un PNG 24 bit da 3,7 MB: è l'elemento LCP della homepage.
   In JPEG q78 pesa 463 KB a parità di resa (nessuna trasparenza da preservare).
   La variante -960 serve ai viewport stretti, dove la 1920 è sprecata. */
.hero-belix {
  position: relative;
  overflow: visible;
  background-image: url(../img/spiaggia/spiaggia.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 730px;
  display: flex;
  align-items: center
}

@media (max-width: 768px) {
  .hero-belix {
    background-image: url(../img/spiaggia/spiaggia-960.jpg);
  }
}

.hero-belix__inner {
  position: relative;
  padding-top: 140px;
  padding-bottom: 140px
}

.hero-belix__content {
  max-width: 780px;
  margin: 0 auto;
  text-align: center
}

.hero-belix__headline {
  margin: 0 0 24px 0;
  line-height: 1.15
}

.hero-belix__headline-script,
.hero-belix__headline-main {
  display: block;
  font-size: clamp(38px, 5.2vw, 72px)
}

/* Riga descrittiva sopra il claim: rende l'H1 comprensibile fuori contesto
   senza sacrificare il payoff. Visibile, non nascosta. */
.hero-belix__headline-eyebrow {
  display: block;
  font-family: var(--font-primary);
  font-weight: var(--fw-medium);
  font-size: clamp(15px, 1.3vw, 19px);
  letter-spacing: .02em;
  color: var(--color-accent-gold);
  margin-bottom: 14px
}

.hero-belix__headline-script {
  font-family: var(--font-script);
  font-weight: var(--fw-regular);
  color: var(--color-orange)
}

.hero-belix__headline-main {
  font-family: var(--font-primary);
  font-weight: var(--fw-regular);
  color: var(--color-white)
}

.hero-belix__desc {
  font-family: var(--font-primary);
  font-weight: var(--fw-medium);
  font-size: clamp(18px, 1.6vw, 26px);
  color: var(--color-white);
  line-height: 1.5;
  max-width: 700px;
  margin: 0 auto 40px auto
}

.belix-wrap {
  position: relative;
  display: inline-block;
  border: 4px solid var(--color-orange);
  border-radius: 70% 50% 70%;
  padding: 5px
}

.hero-belix__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.btn-belix-primary,
.btn-belix-outline {
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 16px;
  padding: 14px 28px;
  border-radius: 12px;
  line-height: 1;
  color: var(--bg-gray);
  white-space: nowrap;
  text-decoration: none;
  display: inline-block;
  transition: opacity 0.2s ease-in-out;
}

/* Bottone principale */
.btn-belix-primary {
  background-color: #1073C4;
  border: none;
  color: #FFFFFF;
}

.btn-belix-primary:hover {
  color: #FFFFFF;
  background-color: rgba(16, 115, 196, 0.9);
  opacity: 0.9;
}

/* Bottone secondario */
.btn-belix-outline {
  background-color: #FBB009;
  border: none;
  color: #FFFFFF;
}

.btn-belix-outline:hover {
  color: #FFFFFF;
  background-color: rgba(251, 176, 9, 0.9); /* #FBB009 al 90% */
  opacity: 0.9;
}

.hero-belix__arrow {
  position: absolute;
  left: 18%;
  top: calc(140px + 220px);
  width: 100px;
  height: 480px;
  bottom: -140px;
  top: auto
}

.below-space {
  min-height: 300px;
  background-color: var(--color-white)
}

@media (max-width:1240px) {
  .hero-belix__arrow {
    display: none !important
  }
}

@media (max-width:991.98px) {
  .hero-belix__inner {
    padding-top: 90px;
    padding-bottom: 90px
  }
}

@media (max-width:575.98px) {
  .hero-belix__buttons {
    flex-direction: column;
    align-items: center;
  }

  .btn-belix-primary,
  .btn-belix-outline {
    text-align: center
  }
}

/*= INTRODUZIONE =*/

.belix-section {
  padding: 90px 0;
  overflow: hidden
}

.belix-title {
  font-size: 55px;
  font-weight: var(--fw-regular);
  line-height: 1.1;
  margin-bottom: 28px
}

.belix-title .word-cose {
  font-family: var(--font-primary);
  font-weight: var(--fw-regular);
  color: var(--text-black)
}

.belix-title .word-belix {
  font-family: var(--font-script);
  font-weight: var(--fw-regular);
  color: var(--color-accent-gold);
  margin-left: 12px
}

.belix-text {
  max-width: 520px
}

.belix-text p {
  font-family: var(--font-primary);
  font-weight: var(--fw-regular);
  font-size: 15px;
  line-height: 1.6;
  color: #2b2b2b;
  margin-bottom: 22px
}

.belix-text p.belix-summary {
  font-family: var(--font-primary);
  font-weight: var(--fw-bold);
  font-style: italic;
  margin-bottom: 0
}

.belix-media {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin-left: auto
}

.belix-app-shot {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 40px rgb(0 0 0 / .12)
}

.belix-card {
  position: absolute;
  border-radius: var(--radius-lg);
  text-align: center;
  padding: 12px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 20%;
  aspect-ratio: 1 / 1
}

.belix-card .number {
  font-family: var(--font-primary);
  font-weight: var(--fw-semibold);
  font-size: clamp(20px, 4.2vw, 40px);
  line-height: 1;
  margin-bottom: 6px
}

.belix-card .label {
  font-family: var(--font-primary);
  font-weight: var(--fw-regular);
  font-size: clamp(11px, 2vw, 20px);
  line-height: 1.2
}

.belix-card.card-red {
  color: var(--card-red-text);
  background: var(--card-red-bg);
  left: -8%;
  bottom: -12%
}

.belix-card.card-red .number {
  color: var(--card-red-text)
}

.belix-card.card-green {
  color: var(--card-green-text);
  background: var(--card-green-bg);
  right: -8%;
  bottom: -12%
}

.belix-card.card-green .number {
  color: var(--card-green-text)
}

.belix-card.card-yellow {
  color: var(--card-yellow-text);
  background: var(--card-yellow-bg);
  right: -7%;
  top: 20%;
  width: 16%
}

.belix-card.card-yellow .number {
  color: var(--card-yellow-text)
}

@media (max-width:991.98px) {
  .belix-title {
    font-size: 52px
  }

  .belix-media {
    margin: 0 auto;
    max-width: 480px
  }

  .belix-section {
    padding: 60px 0
  }
}

@media (max-width:767.98px) {
  .belix-title {
    font-size: 42px;
    text-align: center
  }

  .belix-title .word-belix {
    display: block;
    margin-left: 0
  }

  .belix-text {
    text-align: center
  }

  .belix-media {
    max-width: 380px;
    margin-top: 56px
  }
}

@media (max-width:420px) {
  .belix-media {
    max-width: 300px
  }

  .belix-card {
    padding: 10px 6px
  }
}

/*= FUNZIONAMENTO =*/

.funzionamento {
  padding: 5rem 1.5rem
}

.funzionamento__flow {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  row-gap: 2.5rem
}

.funzionamento__card {
  flex: 0 0 auto;
  width: 300px;
  text-align: center;
  padding: 0 1rem
}

.funzionamento__icon {
  width: 56px;
  height: 56px;
  object-fit: contain;
  margin-bottom: 1.25rem
}

.funzionamento__title {
  font-family: var(--font-secondary);
  font-weight: var(--fw-medium);
  font-size: 22px;
  color: var(--funz-title-color);
  margin-bottom: .75rem
}

.funzionamento__text {
  font-family: var(--font-primary);
  font-weight: var(--fw-regular);
  font-size: 15px;
  color: var(--funz-text-color);
  line-height: 1.6;
  margin: 0
}

.funzionamento__arrow-wrap {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  margin-top: 0;
  padding: 0 .5rem
}

.funzionamento__arrow {
  width: 64px;
  height: auto;
  display: block
}

@media (max-width:991.98px) {
  .funzionamento__arrow-wrap {
    display: none
  }
}

@media (max-width:575.98px) {
  .funzionamento {
    padding: 3rem 1rem
  }
}

.chi-puo-usare {
  padding: 0 1.5rem 5rem;
}

.chi-puo-usare__content {
  max-width: 960px;
  margin: 0 auto;
  background: var(--color-orange-bg-light);
  border: 1px solid #f4ddaa;
  border-radius: var(--radius-lg);
  padding: 2.25rem 2rem;
  box-shadow: var(--shadow-soft);
}

.chi-puo-usare__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.chi-puo-usare__list li {
  position: relative;
  padding-left: 1.2rem;
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.6;
  color: var(--funz-text-color);
}

.chi-puo-usare__list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-accent);
  font-weight: 700;
}

@media (max-width: 575.98px) {
  .chi-puo-usare {
    padding: 0 1rem 4rem;
  }

  .chi-puo-usare__content {
    padding: 1.5rem 1.1rem;
  }

  .chi-puo-usare__list {
    grid-template-columns: 1fr;
  }
}

.confronto-section {
  padding: 0 1.5rem 5rem;
  background-color: #FAFAFA;
}

.confronto-card {
  max-width: 960px;
  margin: 0 auto;
  background: var(--color-white);
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-soft);
}


.confronto-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-primary);
  font-size: 16px;
}

.confronto-table th,
.confronto-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--divider);
  text-align: left;
  vertical-align: top;
}

.confronto-table thead th {
  background: var(--color-orange-bg-light);
  color: var(--text-black);
  font-weight: var(--fw-semibold);
}

.confronto-table tbody tr:last-child td {
  border-bottom: 0;
}

@media (max-width: 575.98px) {
  .confronto-section {
    padding: 0 1rem 4rem;
  }

  .confronto-card {
    padding: 1.25rem;
  }

  .confronto-table th,
  .confronto-table td {
    padding: 12px 10px;
    font-size: 15px;
  }
}

.faq-section {
  padding: 0 1.5rem 5rem;
}

.faq-list {
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  gap: 0.75rem;
}

.faq-item {
  border: 1px solid var(--divider);
  border-radius: var(--radius-md);
  background: var(--color-white);
  padding: 0 1rem;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem 0;
  font-family: var(--font-primary);
  font-size: 17px;
  color: var(--text-black);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-answer {
  padding: 0 0 1rem;
  font-family: var(--font-primary);
  font-size: 15px;
  line-height: 1.7;
  color: var(--funz-text-color);
}

.faq-answer p {
  margin: 0;
}

@media (max-width: 575.98px) {
  .faq-section {
    padding: 0 1rem 4rem;
  }

  .faq-item summary {
    font-size: 16px;
  }
}

/*===================================================
  MAPPA INTERATTIVA
=====================================================*/

.intro-section {
    padding: var(--section-spacing);
    background-color: var(--color-bg);
    padding-bottom: 75px; /*add*/
    padding-left: 0; /*add*/
    padding-right: 0; /*add*/

}

.intro-title {
  font-family: var(--font-script);
  font-weight: var(--fw-regular);
  font-size: 50px;
  color: var(--color-accent);
  line-height: 1.1;
  margin-bottom: 28px
}

.intro-text {
  font-family: var(--font-primary);
  font-weight: var(--fw-regular);
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text);
  margin-bottom: 18px
}

.intro-list {
  list-style: none;
  padding-left: 0;
  margin-top: 28px
}

.intro-list li {
  font-family: var(--font-primary);
  font-weight: var(--fw-regular);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text);
  position: relative;
  padding-left: 26px;
  margin-bottom: 12px
}

.intro-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-text)
}

.image-col {
  padding-top: 110px;
  padding-bottom: 110px
}

.map-wrapper {
  position: relative;
  width: 100%;
  container-type: inline-size;
  container-name: mapwrap;
}

.map-img {
  width: 100%;
  /* height:auto è obbligatorio quando l'<img> ha gli attributi width/height:
     quegli attributi diventano presentational hint CSS, e senza questa riga
     resterebbe in piedi l'hint height:969px, deformando l'immagine e
     sballando le .annotation posizionate in percentuale sul contenitore. */
  height: auto;
  display: block;
  border-radius: 16px;
    margin: 0 auto;
  object-fit: contain;
}

.annotation {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 4;
  pointer-events: none
}

.annotation-text {
  font-family: var(--font-script);
  font-weight: var(--fw-regular);
  font-size: clamp(16px, 2.2vw, 22px);
  line-height: 1.25;
  color: var(--blue);
  text-align: center;
  white-space: nowrap
}

.annotation .arrow-svg {
  display: block;
  overflow: visible
}

.arrow-svg path {
  fill: none;
  stroke: var(--blue);
  stroke-width: 3;
  stroke-linecap: round
}

.arrow-svg polygon {
  fill: var(--blue)
}

.annotation--1 {
  top: -45%;
  left: -5%;
  width: 42cqi
}

.annotation--1 .arrow-svg {
  width: 16cqi;
  top: 105%;
  height: auto;
  margin-top: 4px
}

.annotation--2 {
  top: -35%;
  right: 30%;
  width: 34cqi
}

.annotation--2 .arrow-svg {
  width: 16cqi;
  bottom: -150%;
  left: 10%;
  height: auto;
  margin-top: 4px;
}

.annotation--3 {
  bottom: -35%;
  left: 0%;
  width: 28cqi;
  flex-direction: column-reverse
}

.annotation--3 .arrow-svg {
  width: 14cqi;
  height: auto;
  top: -140%;
  left: 10%;
  margin-bottom: 4px;
  transform: rotate(270deg)
}

@media (max-width:991.98px) {
  .intro-title {
    font-size: 44px
  }

  .intro-section {
    padding: 50px 0;
  }

  .image-col {
    padding-top: 90px;
    padding-bottom: 90px
  }
}

@media (max-width:575.98px) {
  .intro-title {
    font-size: 36px
  }

  .annotation--1 {
    width: 55cqi;
    left: -7%;
  }

  .annotation--2 {
    width: 46cqi;
    left: 37%;
    top: -40%;
  }

  .annotation--3 {
    width: 40cqi
  }
}

  /* =========================================================
     PLANNER PRENOTAZIONI
  ========================================================= */

  .planner-section{
    background-color: var(--planner-bg);
    padding: 75px 0;
    overflow: hidden;
  }

  .planner-title{
    font-size: clamp(2.4rem, 5vw, 50px);
    color: var(--planner-orange);
    margin-bottom: 1.75rem;
    text-align: left;
  }

  .planner-desc{
    color: var(--planner-text);
    margin-bottom: 1.25rem;
    text-align: left;
  }

  .planner-desc:last-child{
    margin-bottom: 0;
  }

  .planner-visual{
    display: flex;
    justify-content: center;
  }

  .planner-scene{
    position: relative;
    width: 100%;
    max-width: 620px;
    aspect-ratio: 29 / 21;
  }

  /* ---------- Immagini ---------- */
  .scene-img{
    position: absolute;
    border-radius: 16px;
    width: auto;
    /* Vedi la nota su .map-img: senza height:auto gli attributi width/height
       dell'<img> imporrebbero l'altezza in pixel e le .scene-caption non
       sarebbero più allineate alle immagini. */
    height: auto;
    display: block;
	object-fit:contain;
  }

  .img-card{
    left: 0%;
    top: 9%;
    width: 60%;
    z-index: 1;
  }

  .img-calendar{
    right: 10%;
    top: 32%;
    width: 34%;
    z-index: 2;
  }

  /* ---------- Didascalie ---------- */
  .planner-section .scene-caption{
    position: absolute;
    font-family: "Segoe Script", cursive;
    font-weight: 400;
    font-size: clamp(16px, 2.2vw, 22px);
    color: var(--planner-blue);
    line-height: 1.25;
    margin: 0;
    z-index: 3;
    white-space: normal;
  }

  .planner-section .caption-1{
    top: -14%;
    left: 40%;
    width: 42%;
    text-align: left;
  }

  .planner-section .caption-2{
    bottom: 80%;
    right: -20%;
    width: 40%;
    text-align: left;
  }

  /* ---------- Frecce ---------- */
  .planner-section .scene-arrow{
    position: absolute;
    z-index: 3;
    display: block;
    overflow: visible;
  }

  .planner-section .scene-arrow path{
    fill: none;
    stroke: var(--planner-blue);
    stroke-width: 3;
    stroke-linecap: round;
  }

  .planner-section .scene-arrow polygon{
    fill: var(--planner-blue);
  }

  .planner-scene .scene-arrow.arrow-1{
    top: 5%;
    right: 40%;
    width: 15%;
    height: auto;
    transform: scaleX(-1) rotate(2deg);
  }

  .planner-scene .scene-arrow.arrow-2{
    bottom: 60%;
    right: 2%;
    width: 17%;
    height: auto;
    transform: scaleX(-1) rotate(8deg);
  }

  /* = RESPONSIVE =*/

  @media (max-width: 991.98px){
    .planner-section{
      padding: 50px 0;
      text-align: center;
    }
    .planner-visual{
      margin-top: 3.5rem;
    }
    .planner-scene{
      max-width: 480px;
    }
  }

  @media (max-width: 575.98px){
    .planner-scene{
      max-width: 360px;
    }
    .planner-section .caption-1{
      right: 2%;
      width: 46%;
    }
    .planner-section .caption-2{
      right: -15%;
      width: 44%;
    }
  }

  /* =========================================================
     LISTE E CONSUMAZIONI
  ========================================================= */

  .liste-consumazioni{
    background: var(--bg);
    padding: 75px 0;
    overflow: hidden;
  }

  /* ---------- TESTI ---------- */
  .liste-consumazioni .titolo{
    color: var(--arancio);
    font-size: clamp(34px, 5vw, 60px);
    margin-bottom: 1.25rem;
  }

  .liste-consumazioni .testo{
    color: #2b2b2b;
  }

  .liste-consumazioni .testo p{
    margin-bottom: 1.25rem;
  }

.liste-consumazioni .testo ul{
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}


  /* ---------- IMMAGINI ---------- */
  .images-wrapper{
    position: relative;
    width: 100%;
    aspect-ratio: 950 / 720;
    max-width: 560px;
    margin: 0 auto;
  }

  .img-item{
    position: absolute;
    border-radius: 16px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
    object-fit: cover;
    width: 100%;
    height: 100%;
  }

  .img-1{ left: 8.5%; top: 11.1%; width: 30%; height: 45%; }
  .img-2{ left: 38%; top: 22.2%; width: 60%; height: 80%; }
  .img-3{ left: 13.7%; top: 75.7%; width: 29.5%; height: 25%; }

  /* ---------- DIDASCALIE ---------- */
  .liste-consumazioni .caption{
    position: absolute;
    font-family: 'Segoe Script', cursive;
    font-weight: 400;
    color: var(--blu);
    font-size: clamp(16px, 2.2vw, 22px);
    line-height: 1.2;
    text-align: left;
  }

  .liste-consumazioni .caption-1{
    left: 26%;
    top: 0%;
    width: 42%;
  }

  .liste-consumazioni .caption-2{
    left: 66%;
    top: 112%;
    width: 34%;
    text-align: left;
  }

  .liste-consumazioni .caption-3{
    left: 15%;
    top: 60%;
    width: 30%;
    text-align: left;
  }

  /* ---------- FRECCE ---------- */
  .liste-consumazioni .arrow-svg{
    position: absolute;
    fill: none;
    overflow: visible;
  }

  .liste-consumazioni .arrow-svg path{
    fill: none;
    stroke: var(--blu);
    stroke-width: 2.4;
    stroke-linecap: round;
  }

  .liste-consumazioni .arrow-svg polygon{
    fill: var(--blu);
  }

  .liste-consumazioni .arrow-1{
    left: 18%;
    top: 7%;
    width: clamp(50px, 8vw, 90px);
    height: clamp(40px, 6.5vw, 68px);
    transform: scaleX(-1);
  }

  .liste-consumazioni .arrow-2{
    left: 65%;
    top: 96%;
    width: clamp(55px, 9vw, 100px);
    height: clamp(42px, 7vw, 75px);
    transform: rotate(200deg);
  }

  .liste-consumazioni .arrow-3{
    left: 21%;
    top: 70%;
    width: clamp(45px, 7vw, 80px);
    height: clamp(35px, 5.5vw, 60px);
    transform: rotate(-10deg) scaleX(-1);
  }

  @media (max-width: 991.98px){
    .liste-consumazioni{
      padding: 50px 0;
    }

    .images-wrapper{
      max-width: 460px;
      margin-bottom: 3rem;
    }

      .liste-consumazioni .caption-2{
        left: 66%;
        top: 105%;
        width: 34%;
        text-align: left;
      }

      .liste-consumazioni .arrow-2{
        left: 65%;
        top: 92%;
        width: clamp(55px, 9vw, 100px);
        height: clamp(42px, 7vw, 75px);
        transform: rotate(200deg);
      }
  }

  @media (max-width: 575.98px){
    .images-wrapper{
      max-width: 100%;
    }

      .img-1{ left: -16%}
      .img-2{ left: 10%}
      .img-3{ left: -13.7%}

      .liste-consumazioni .caption-1{
        left: 2%;
        top: -5%;
      }

      .liste-consumazioni .arrow-1{
        left: -2%;
      }

      .liste-consumazioni .caption-2{
        left: 44%;
      }

      .liste-consumazioni .arrow-2{
        left: 55%;
      }

      .liste-consumazioni .caption-3{
        left: -8%;
      }

      .liste-consumazioni .arrow-3{
        left: -12%;
      }
  }

  /* =========================================================
     TABELLE PERSONALIZZABILI
  ========================================================= */

  .tabelle-section{
    background-color: var(--bg-color);
    padding: 75px 0;
    overflow: hidden;
  }

  /* ---------------- TESTI ---------------- */

  .tabelle-section .section-title{
    font-size: 50px;
    line-height: 1.05;
    color: var(--title-color);
    margin-bottom: 32px;
    text-align: left;
  }

  .tabelle-section .section-text p{
    line-height: 1.7;
    color: var(--text-color);
    margin-bottom: 22px;
    text-align: left;
  }

  .tabelle-section .section-text p:last-child{
    margin-bottom: 0;
  }

  @media (max-width: 1199.98px){
    .intro-section .row,
    .tabelle-section .row,
    .config-section .row{
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 1.5rem;
    }

    .intro-section .row > [class*="col-"],
    .tabelle-section .row > [class*="col-"],
    .config-section .row > [class*="col-"]{
      flex: 0 0 100%;
      width: 100%;
      max-width: 100%;
    }

    .intro-section .image-col,
    .tabelle-section .image-col,
    .config-section .image-col{
      order: 2;
    }

    .intro-section .row > .col-lg-5,
    .tabelle-section .text-col,
    .config-section .text-col{
      order: 1;
    }
  }

  @media (max-width: 991.98px){
    
    .tabelle-section .row,
    .config-section .row{
      display: flex;
      flex-direction: column;
    }

    .tabelle-section .image-col,
    .config-section .image-col{
      order: 1;
    }

    .tabelle-section .text-col,
    .config-section .text-col{
      order: 2;
    }
  }

  /* ---------------- IMMAGINE + ANNOTAZIONI ---------------- */

  .image-col{
    /* spazio extra per non far "clippare" le didascalie/frecce
       che sporgono sopra e sotto lo screenshot */
    padding-top: 70px;
    padding-bottom: 90px;
  }

  .image-wrapper{
    position: relative;
    max-width: 640px;
    margin: 0 auto;
    /* Mantiene le percentuali di ancoraggio coerenti in ogni
       breakpoint: adattare il valore al reale rapporto
       larghezza/altezza dello screenshot definitivo. */
    aspect-ratio: 700 / 480;
  }

  .screenshot-img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(20, 30, 60, 0.14);
  }

  /* Blocchi didascalia + freccia, ancorati in % rispetto al
     wrapper: restano "puntati" sullo stesso punto dell'immagine
     a ogni dimensione dello schermo. */
  .tabelle-section .annotation{
    position: absolute;
    display: flex;
    flex-direction: column;
    z-index: 2;
  }

  .tabelle-section .annotation .caption{
    font-family: var(--font-script);
    font-weight: 400;
    font-size: clamp(16px, 2.2vw, 22px);
    line-height: 1.25;
    color: var(--caption-color);
    white-space: nowrap;
  }

  .tabelle-section .arrow-svg{
    color: var(--caption-color);
    overflow: visible;
  }

  .tabelle-section .arrow-svg path{
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
  }

  .tabelle-section .arrow-svg polygon{
    fill: currentColor;
  }

  /* --- Annotazione 1: in alto a destra ---
     "Righe e colonne in base alla tua attività"
     punta verso l'angolo superiore-sinistro dello screenshot */
  .tabelle-section .annotation-top{
    top: -17%;
    right: 44%;
    align-items: flex-end;
    text-align: right;
  }

  .tabelle-section .annotation-top .caption{
    margin-bottom: 2px;
  }

  .tabelle-section .annotation-top .arrow-svg{
    width: clamp(50px, 8vw, 90px);
    height: clamp(38px, 6vw, 68px);
    top: 13%;
    left: -40%;
    transform: scaleX(-1); /* freccia rivolta verso sinistra/basso */
  }

  /* --- Annotazione 2: in basso a destra ---
     "Ordine delle postazioni modificabile"
     punta verso l'area della griglia, in basso a sinistra */
  .tabelle-section .annotation-bottom{
    bottom: -15%;
    right: 28%;
    align-items: flex-end;
    text-align: right;
  }

  .tabelle-section .annotation-bottom .arrow-svg{
    width: clamp(50px, 8vw, 90px);
    height: clamp(38px, 6vw, 68px);
    transform: scaleX(-1) scaleY(-1); /* freccia rivolta verso sinistra/alto */
    margin-bottom: 2px;
  }

  /* ---------------- RESPONSIVE ---------------- */

  @media (max-width: 991.98px){
    .tabelle-section{
      padding: 50px 0;
      text-align: left;
    }
    .tabelle-section .section-title{
      font-size: 44px;
    }
    .image-col{
      padding-top: 60px;
      padding-bottom: 80px;
    }
  }

  @media (max-width: 575.98px){
    .tabelle-section .section-title{
      font-size: 32px;
    }
    .tabelle-section .annotation-top{
      top: -16%;
      right: 0;
    }
    .tabelle-section .annotation-bottom{
      bottom: -18%;
      right: 2%;
    }
  }

  @media (max-width: 991.98px){
    .config-section{
      padding: 50px 0;
    }
  }

  /* =========================================================
     CONFIGURAZIONE
  ========================================================= */

  .config-section{
    background-color: var(--bg-color);
    padding: 5px 0 10px;
    overflow: hidden;
  }

  /* ===================== TESTI ===================== */
  .config-title{
    color: var(--title-color);
    font-size: clamp(32px, 5.2vw, 50px);
    margin-bottom: 1.75rem;
  }

  .config-text{
    font-size: clamp(14px, 1.5vw, 15px);
    line-height: 1.7;
    color: #333333;
    margin-bottom: 1.25rem;
  }

  .config-text:last-child{
    margin-bottom: 0;
  }

  /* ===================== IMMAGINI ===================== */
  .images-wrapper{
    position: relative;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    aspect-ratio: 640 / 560;
  }

  .img-box{
    position: absolute;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(0,0,0,0.10), 0 3px 8px rgba(0,0,0,0.06);
    background: #fff;
  }

  .img-box img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
  }

  /* Immagine 1 - Lista dei prodotti */
  .img-box-1{
    left: -10%;
    top: 8%;
    width: 65%;
    height: 60%;
    z-index: 1;
  }

  /* Immagine 2 - Divisioni in categorie */
  .img-box-2{
    right: 25%;
    top: 44%;
    height: 40%;
    z-index: 2;
  }

  /* ===================== DIDASCALIE ===================== */
  .config-section .annotation{
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 3;
  }

  .config-section .annotation .caption{
    position: relative;
    font-family: 'Segoe Script', cursive;
    font-weight: 400;
    color: var(--caption-color);
    font-size: clamp(16px, 2.2vw, 22px);
    line-height: 1.2;
    white-space: nowrap;
  }

  .config-section .caption-1{
    top: -10%;
    left: 20%;
    align-items: flex-start;
  }

  .config-section .caption-2{
    top: 26%;
    left: 60%;
    align-items: flex-end;
  }

  .config-section .caption-2 .caption{
    order: 1;
    text-align: right;
  }

  .config-section .caption-2 .arrow-svg{
    order: 2;
  }

  /* ===================== FRECCE ===================== */
  .config-section .arrow-svg{
    position: relative;
    display: block;
    width: clamp(48px, 8vw, 92px);
    height: clamp(36px, 6vw, 68px);
    color: var(--caption-color);
    stroke: currentColor;
    fill: none;
    stroke-width: 2.2;
    overflow: visible;
    z-index: 3;
  }

  .config-section .arrow-svg path{
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
  }

  .config-section .arrow-svg polygon{
    fill: currentColor;
    stroke: none;
  }

  .config-section .caption-1 .arrow-svg{
    transform: scaleX(-1);
  }

  .config-section .caption-2 .arrow-svg{
    transform: scaleX(-1);
  }

  /* ===================== RESPONSIVE ===================== */
  @media (max-width: 991.98px){
    .images-wrapper{
      max-width: 480px;
    }
  }

  @media (max-width: 575.98px){
    .images-wrapper{
      max-width: 380px;
      left: 20%;
    }
    .config-section .caption{
      white-space: normal;
      max-width: 45%;
    }

    .config-section .caption-2{
      left: 42%;
    }
  }

  /* =========================================================
     PERCHE' SCEGLIERCI
  ========================================================= */

  .section-title {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400; /* Regular */
    font-size: 50px;
    color: #1D1D1D;
    text-align: center;
  }

  .cards-wrapper {
    display: flex;
    justify-content: center;
    padding-bottom: 0;
  }

  .cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 370px);
    gap: 24px;
  }

  @media (max-width: 1259px) {
    .cards-grid {
      grid-template-columns: repeat(2, 370px);
    }
  }

  @media (max-width: 839px) {
    .cards-grid {
      grid-template-columns: 370px;
    }

    .section-title{
      font-size: 32px;
    }
  }

  .feature-card {
    width: 370px;
    min-height: 150px;
    background-color: #FFF6DC;
    border: 1px solid #FBB009;
    border-radius: 16px;
    padding: 32px 24px;
    text-align: center;
  }

  .feature-card .card-title-custom {
    font-family: 'DM Sans', sans-serif;
    font-weight: 500; /* Medium */
    font-size: 20px;
    color: #1D1D1D;
    margin-bottom: 12px;
  }

  .feature-card .card-text-custom {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400; /* Regular */
    font-size: 14px;
    color: #1D1D1D;
    margin: 0;
    line-height: 1.5;
  }

  /* =========================================================
     CTA
  ========================================================= */
  /* Come la hero: era un PNG da 1,5 MB, in JPEG q78 pesa 139 KB. */
  .cta-section {
    position: relative;
    margin-top: 60px;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    overflow-x: hidden;
    background-image: url('../img/spiaggia/bar.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 460px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 15px;
  }

  @media (max-width: 768px) {
    .cta-section {
      background-image: url('../img/spiaggia/bar-960.jpg');
    }
  }

  .cta-title {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 50px;
    color: #FFFFFF;
    text-align: center;
    line-height: 1.2;
    margin-bottom: 40px;
  }

  .cta-title .brand-belix {
    font-family: 'Segoe Script', cursive;
    font-weight: 400;
    color: #FBB009;
  }

  .cta-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
  }

  .cta-btn {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #FFFFFF;
    border: none;
    border-radius: 12px;
    padding: 14px 28px;
    white-space: nowrap;
    text-decoration: none;
    display: inline-block;
    transition: opacity 0.2s ease-in-out;
  }

  .cta-btn:hover {
    color: #FFFFFF;
    opacity: 0.9;
  }

  .cta-btn-primary {
    background-color: #1073C4;
  }

  .cta-btn-secondary {
    background-color: #FBB009;
  }

  /* Responsive */
  @media (max-width: 768px) {
    .cta-title {
      font-size: 42px;
    }
  }

  @media (max-width: 480px) {
    .cta-title {
      font-size: 32px;
    }
    .cta-buttons {
      flex-direction: column;
      align-items: center;
      width: 100%;
    }
    .cta-btn {
      width: 100%;
      max-width: 320px;
      text-align: center;
    }
  }

  /* =========================================================
     FOOTER
  ========================================================= */

.belix-footer {
  background-color: var(--bg-gray);
  padding: 72px 0 32px
}

.footer-top {
  margin-bottom: 48px
}

.footer-logo img {
  height: 34px;
  width: auto;
  display: block;
  margin-bottom: 20px
}

.footer-payoff {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 16px;
  color: var(--text-black);
  margin-bottom: 20px;
  max-width: 260px
}

.social-row {
  display: flex;
  align-items: center;
  gap: 14px
}

.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  text-decoration: none
}

.social-icon i {
  font-size: 18px;
  line-height: 1
}

.social-icon:hover {
  color: var(--blue)
}

.social-sep {
  width: 1px;
  height: 18px;
  background-color: var(--divider);
  display: inline-block
}

.footer-title {
  font-family: var(--font-primary);
  font-weight: var(--fw-medium);
  font-size: 20px;
  color: var(--text-black);
  margin-bottom: 20px
}

.footer-list {
  display: flex;
  flex-direction: column;
  gap: 12px
}

.footer-list li,
.footer-list a {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 16px;
  color: var(--text-black);
  line-height: 1.5
}

.footer-list a:hover {
  color: var(--blue)
}

.footer-hours {
  padding-top: 4px
}

.footer-divider {
  border: none;
  border-top: 1px solid var(--divider);
  margin: 0 0 24px;
  opacity: 1
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center
}

.footer-legal {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 14px;
  color: var(--text-black);
  margin: 0
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 32px
}

.footer-links a {
  font-family: var(--font-primary);
  font-weight: var(--fw-regular);
  font-size: 14px;
  color: var(--text-black);
  transition: color var(--transition-fast)
}

.footer-links a:hover {
  color: var(--blue)
}

/* "Impostazione cookie" è un <button> perché riapre il pannello del CMP,
   ma deve leggersi come gli altri link del footer. */
.footer-cookie-settings {
  font-family: var(--font-primary);
  font-weight: var(--fw-regular);
  font-size: 14px;
  color: var(--text-black);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: color var(--transition-fast)
}

.footer-cookie-settings:hover {
  color: var(--blue)
}

@media (max-width:767.98px) {
  .belix-container {
    padding: 0 24px
  }

  .mobile-menu-nav {
    padding: 8px 24px 32px
  }

  .header-inner {
    min-height: 80px
  }

  .belix-footer {
    padding: 56px 0 24px
  }

  .footer-top {
    margin-bottom: 32px
  }
}
/* =========================================================================
   PAGINE INTERNE
   Stili condivisi da /funzionalita/, /prezzi/, /contatti/, /faq/, 404...
   Riusano le custom properties del tema definite in :root.
   ========================================================================= */

.page-hero {
  background: var(--color-orange-bg-light);
  padding: 56px 0 48px;
  border-bottom: 1px solid var(--divider)
}

.breadcrumb-belix {
  margin-bottom: 20px
}

.breadcrumb-belix ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
  color: var(--funz-text-color)
}

.breadcrumb-belix li + li::before {
  content: "/";
  margin-right: 10px;
  color: var(--divider)
}

.breadcrumb-belix a {
  color: var(--funz-text-color);
  text-decoration: none;
  transition: color var(--transition-fast)
}

.breadcrumb-belix a:hover {
  color: var(--blue);
  text-decoration: underline
}

.breadcrumb-belix [aria-current="page"] {
  color: var(--text-black);
  font-weight: var(--fw-medium)
}

.page-title {
  font-family: var(--font-primary);
  font-weight: var(--fw-regular);
  font-size: clamp(34px, 4.4vw, 55px);
  line-height: 1.12;
  color: var(--text-black);
  margin: 0 0 18px
}

.page-lead {
  font-family: var(--font-primary);
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.55;
  color: var(--funz-text-color);
  max-width: 62ch;
  margin: 0
}

.page-section {
  padding: 56px 0
}

.page-section + .page-section {
  border-top: 1px solid var(--divider)
}

.page-section h2 {
  font-family: var(--font-primary);
  font-weight: var(--fw-medium);
  font-size: clamp(26px, 2.6vw, 36px);
  color: var(--text-black);
  margin: 0 0 20px
}

.page-section h3 {
  font-family: var(--font-primary);
  font-weight: var(--fw-medium);
  font-size: clamp(19px, 1.7vw, 23px);
  color: var(--text-black);
  margin: 32px 0 10px
}

.prose {
  max-width: 72ch
}

.prose--wide {
  max-width: none;
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

.contact-grid__col h2 {
  margin-top: 0;
}

/* Sotto una certa larghezza torna a impilarsi */
@media (max-width: 780px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

.prose p,
.prose li {
  font-family: var(--font-primary);
  font-size: 17px;
  line-height: 1.68;
  color: var(--funz-text-color)
}

.prose p {
  margin: 0 0 16px
}

.prose ul {
  margin: 0 0 16px;
  padding-left: 22px
}

.prose li {
  margin-bottom: 8px
}

.prose a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px
}

.prose a:hover {
  color: var(--blue-hover)
}

.prose strong {
  color: var(--text-black);
  font-weight: var(--fw-medium)
}

/* Tabella "funzione / utilità / destinatario" e simili */
.table-wrap {
  margin: 0 0 24px
}

.belix-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-family: var(--font-primary);
  font-size: 16px
}

.belix-table th,
.belix-table td {
  text-align: left;
  vertical-align: top;
  padding: 14px 16px;
  border-bottom: 1px solid var(--divider);
  line-height: 1.55;
  color: var(--funz-text-color)
}

.belix-table th {
  background: var(--color-orange-bg-light);
  color: var(--text-black);
  font-weight: var(--fw-medium);
  white-space: nowrap
}

/* Riquadro per dichiarare esplicitamente cosa NON è confermato/incluso */
.nota-box {
  background: var(--color-orange-bg-light);
  border-left: 4px solid var(--color-orange);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  margin: 0 0 24px
}

.nota-box p:last-child {
  margin-bottom: 0
}

/* FAQ: <details> nativo, funziona senza JavaScript */
.faq-item {
  border-bottom: 1px solid var(--divider)
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 40px 18px 0;
  position: relative;
  font-family: var(--font-primary);
  font-weight: var(--fw-medium);
  font-size: 18px;
  color: var(--text-black)
}

.faq-item summary::-webkit-details-marker {
  display: none
}

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  line-height: 1;
  color: var(--color-orange)
}

.faq-item[open] summary::after {
  content: "\2013"
}

.faq-item summary:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px
}

.faq-item .faq-answer {
  padding: 0 0 20px
}

.faq-item .faq-answer p:last-child {
  margin-bottom: 0
}

/* Blocco CTA di fine pagina */
.cta-inline {
  background: var(--color-orange-bg-light);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  text-align: center
}

.cta-inline h2 {
  margin-bottom: 12px
}

.cta-inline p {
  max-width: 56ch;
  margin: 0 auto 24px
}

.cta-inline .cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center
}

.page-meta {
  font-family: var(--font-primary);
  font-size: 14px;
  color: var(--funz-text-color);
  margin-top: 40px
}

@media (max-width:767.98px) {
  .page-hero {
    padding: 36px 0 32px
  }

  .page-section {
    padding: 40px 0
  }

  .cta-inline {
    padding: 28px 20px
  }
}