:root {
      --mp-blue: #7894CC;
      /* colore principale */
      --mp-blue-deep: #4C66A0;
      /* variante scura per gradienti */
      --mp-navy: #1F2A44;
      /* inchiostro / titoli */
      --mp-navy-soft: #2B3A5C;
      --mp-sky: #EEF2FA;
      /* fondi chiari */
      --mp-sand: #F8F9FC;
      --ink: #243049;
      --muted: #5D6B85;
      --line: #E3E8F2;
      --radius: 18px;
      --grad: linear-gradient(135deg, #7894CC 0%, #4C66A0 100%);
      --grad-soft: linear-gradient(135deg, rgba(120, 148, 204, .14), rgba(76, 102, 160, .10));
      --shadow-sm: 0 4px 14px rgba(31, 42, 68, .07);
      --shadow-md: 0 14px 40px rgba(31, 42, 68, .13);
      --shadow-lg: 0 26px 60px rgba(31, 42, 68, .20);
    }

    * {
      -webkit-font-smoothing: antialiased;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: 'Inter', system-ui, sans-serif;
      color: var(--ink);
      background: #fff;
      overflow-x: hidden;
    }

    h1,
    h2,
    h3,
    .display-font {
      font-family: 'Fraunces', Georgia, serif;
      letter-spacing: -.01em;
    }

    h2.section-title {
      font-weight: 600;
      font-size: clamp(1.8rem, 3.4vw, 2.7rem);
      color: var(--mp-navy);
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      font-size: .78rem;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--mp-blue-deep);
    }

    .eyebrow::before {
      content: "";
      width: 26px;
      height: 2px;
      background: var(--mp-blue);
      border-radius: 2px;
    }

    .lead-muted {
      color: var(--muted);
      font-size: 1.05rem;
    }

    section {
      scroll-margin-top: 88px;
    }

    a {
      text-decoration: none;
    }

    /* ---------- Bottoni ---------- */
    .btn-mp {
      background: var(--grad);
      color: #fff;
      border: none;
      font-weight: 600;
      border-radius: 999px;
      padding: .74rem 1.8rem;
      transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
      box-shadow: 0 10px 24px rgba(76, 102, 160, .32);
    }

    .btn-mp:hover {
      color: #fff;
      transform: translateY(-2px);
      filter: brightness(1.06);
      box-shadow: 0 14px 32px rgba(76, 102, 160, .42);
    }

    .btn-mp-outline {
      background: transparent;
      color: var(--mp-blue-deep);
      border: 2px solid var(--mp-blue);
      font-weight: 600;
      border-radius: 999px;
      padding: .68rem 1.7rem;
      transition: all .18s ease;
    }

    .btn-mp-outline:hover {
      background: var(--mp-blue);
      color: #fff;
      transform: translateY(-2px);
    }

    .btn-ghost-white {
      background: rgba(255, 255, 255, .12);
      color: #fff;
      border: 1.5px solid rgba(255, 255, 255, .55);
      font-weight: 600;
      border-radius: 999px;
      padding: .68rem 1.7rem;
      transition: all .18s ease;
    }

    .btn-ghost-white:hover {
      background: #fff;
      color: var(--mp-blue-deep);
    }

    /* ---------- Header ---------- */
    .site-header {
      background: rgba(255, 255, 255, .72);
      backdrop-filter: saturate(160%) blur(10px);
      border-bottom: 1px solid var(--line);
      transition: box-shadow .25s ease;
    }

    .site-header.scrolled {
      box-shadow: var(--shadow-sm);
    }

    .brand-logo {
      height: 44px;
      width: auto;
    }

    .brand-name {
      font-family: 'Fraunces', serif;
      font-weight: 600;
      font-size: 1.25rem;
      color: var(--mp-navy);
    }

    .brand-name small {
      display: block;
      font-family: 'Inter', sans-serif;
      font-size: .68rem;
      font-weight: 600;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--mp-blue-deep);
    }

    .nav-link.anchor {
      color: var(--ink);
      font-weight: 600;
      position: relative;
    }

    .nav-link.anchor::after {
      content: "";
      position: absolute;
      left: .8rem;
      right: .8rem;
      bottom: .3rem;
      height: 2px;
      background: var(--mp-blue);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .2s ease;
    }

    .nav-link.anchor:hover::after,
    .nav-link.anchor.active::after {
      transform: scaleX(1);
    }

    /* ---------- Hero ---------- */
    .hero {
      position: relative;
      color: #fff;
      overflow: hidden;
      background: linear-gradient(140deg, #2B3A5C 0%, #3D5388 45%, #4C66A0 100%);
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(640px 640px at 88% -12%, rgba(120, 148, 204, .55), transparent 62%),
        radial-gradient(480px 480px at 6% 118%, rgba(31, 42, 68, .65), transparent 62%);
    }

    .hero-inner {
      position: relative;
      z-index: 2;
    }

    .hero h1 {
      font-weight: 600;
      font-size: clamp(2.2rem, 4.8vw, 3.6rem);
      line-height: 1.08;
    }

    .hero h1 em {
      font-style: italic;
      color: #C9D7F2;
    }

    .hero-sub {
      color: #DCE5F7;
      font-size: 1.12rem;
      max-width: 540px;
    }

    .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      background: rgba(255, 255, 255, .12);
      border: 1px solid rgba(255, 255, 255, .3);
      padding: .38rem .95rem;
      border-radius: 999px;
      font-size: .82rem;
      font-weight: 600;
      letter-spacing: .02em;
    }

    .hero-photo-wrap {
      position: relative;
    }

    .hero-photo {
      width: 100%;
      height: auto;
      border-radius: 24px;
      display: block;
      box-shadow: var(--shadow-lg);
      object-fit: cover;
      border: 1px solid rgba(255, 255, 255, .22);
    }

    .avail-card {
      position: absolute;
      left: -100px;
      bottom: 26px;
      z-index: 3;
      background: #fff;
      color: var(--ink);
      border-radius: 16px;
      padding: 1rem 1.25rem;
      box-shadow: var(--shadow-lg);
      min-width: 220px;
    }

    .avail-card .lbl {
      font-size: .74rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--mp-blue-deep);
    }

    .avail-card .days {
      font-family: 'Fraunces', serif;
      font-weight: 600;
      font-size: 1.15rem;
      color: var(--mp-navy);
    }

    .hero-stat {
      font-family: 'Fraunces', serif;
      font-weight: 600;
      font-size: 1.7rem;
      color: #fff;
      line-height: 1.1;
    }

    .hero-stat small {
      display: block;
      font-family: 'Inter', sans-serif;
      font-weight: 400;
      font-size: .8rem;
      color: #C6D3EE;
      margin-top: .2rem;
    }

    /* linea "ecografica" decorativa — firma della pagina */
    .pulse-line {
      display: block;
      width: 100%;
      height: 38px;
    }

    .pulse-line path {
      fill: none;
      stroke: var(--mp-blue);
      stroke-width: 2;
      stroke-linecap: round;
      stroke-dasharray: 640;
      stroke-dashoffset: 640;
      opacity: .85;
    }

    .pulse-line.in path {
      animation: drawPulse 1.6s ease forwards;
    }

    @keyframes drawPulse {
      to {
        stroke-dashoffset: 0;
      }
    }

    .hero .pulse-line path {
      stroke: #AFC3EA;
    }

    /* ---------- Banner citazione ---------- */
    .quote-band {
      background: var(--mp-sand);
    }

    .quote-card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 24px;
      box-shadow: var(--shadow-md);
      overflow: hidden;
    }

    .quote-left {
      position: relative;
    }

    .quote-left::before {
      content: "“";
      position: absolute;
      top: -1px;
      left: 4px;

      font-family: "Fraunces", serif;
      font-size: 20rem;
      font-weight: 700;

      color: var(--mp-blue);
      opacity: .13;
      line-height: 1;
      pointer-events: none;
    }

    .quote-left::after {
      content: "”";
      position: absolute;
      right: 20px;
      top: 100px;

      font-family: "Fraunces", serif;
      font-size: 20rem;
      font-weight: 700;

      color: var(--mp-blue);
      opacity: .13;
      line-height: 1;
      pointer-events: none;
    }

    .quote-text {
      font-family: 'Fraunces', serif;
      font-weight: 500;
      font-style: italic;
      font-size: clamp(1.2rem, 2.2vw, 1.55rem);
      color: var(--mp-navy);
      line-height: 1.45;
    }

    .quote-text .mark-q {
      color: var(--mp-blue);
      font-size: 2.4rem;
      line-height: 0;
      vertical-align: -0.35em;
      margin-right: .2rem;
    }

    .quote-cta {
      background: var(--grad);
      color: #fff;
      position: relative;
      overflow: hidden;
    }

    .quote-cta::after {
      content: "\f76e";
      font-family: "bootstrap-icons";
      position: absolute;
      right: -14px;
      bottom: -22px;
      font-size: 9rem;
      opacity: .1;
    }

    /* ---------- Aree di esperienza ---------- */
    .exp-card {
      background: #F8F9FC;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 2rem 1.7rem;
      height: 100%;
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    }

    .exp-card:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow-md);
      border-color: transparent;
    }

    .exp-ico {
      width: 62px;
      height: 62px;
      border-radius: 18px;
      display: grid;
      place-items: center;
      background: var(--grad-soft);
      margin-bottom: 1.1rem;
    }

    .exp-ico img {
      width: 50px;
      height: 50px;
    }

    .exp-card h3 {
      font-size: 1.25rem;
      font-weight: 600;
      color: var(--mp-navy);
    }

    .exp-card p {
      color: var(--muted);
      font-size: .95rem;
      margin: 0;
    }

    /* ---------- Chi sono & pagina Eventi---------- */
    .about-photo-wrap {
      position: relative;
    }

    .about-photo {
      width: 100%;
      border-radius: 24px;
      box-shadow: var(--shadow-md);
      display: block;
    }

    .about-photo-wrap::before {
      content: "";
      position: absolute;
      inset: auto -16px -16px auto;
      width: 58%;
      height: 58%;
      border-radius: 24px;
      background: var(--grad);
      opacity: .16;
      z-index: -1;
      transform: translate(0, 0);
    }

    .about-badge {
      position: absolute;
      right: -54px;
      top: 22px;
      background: #fff;
      border-radius: 16px;
      box-shadow: var(--shadow-md);
      padding: .85rem 1.15rem;
      text-align: center;
    }

    .about-badge b {
      font-family: 'Fraunces', serif;
      font-size: 1.5rem;
      color: var(--mp-blue-deep);
      display: block;
      line-height: 1;
    }

    .about-badge span {
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--muted);
    }

    .about-point {
      display: flex;
      gap: .85rem;
      align-items: flex-start;
    }

    .about-point i {
      color: var(--mp-blue-deep);
      font-size: 1.2rem;
      margin-top: .15rem;
    }

    .link-more {
      color: var(--mp-blue-deep);
      font-weight: 600;
    }

    .link-more:hover {
      color: var(--mp-navy);
    }

    .link-more i {
      transition: transform .18s ease;
    }

    .link-more:hover i {
      transform: translateX(4px);
    }

    /* ---------- Patologie trattate ---------- */
    .patologie {
      position: relative;
      color: #fff;
      overflow: hidden;
      background: linear-gradient(140deg, #26334F 0%, #3C4F7E 100%);
    }

    .patologie::before {
      content: "";
      position: absolute;
      inset: 0;
      background: url('images/studio-peroni.webp') center/cover no-repeat;
      opacity: .35;
      mix-blend-mode: overlay;
    }

    .patologie .container {
      position: relative;
      z-index: 2;
    }

    .pat-card {
      background: rgba(255, 255, 255, .07);
      border: 1px solid rgba(255, 255, 255, .18);
      border-radius: var(--radius);
      padding: 1.9rem 1.6rem;
      height: 100%;
      text-align: center;
      backdrop-filter: blur(4px);
      transition: background .2s ease, transform .2s ease;
    }

    .pat-card:hover {
      background: rgba(255, 255, 255, .13);
      transform: translateY(-4px);
    }

    .pat-img-wrap {
      width: 72px;
      height: 72px;
      margin: 0 auto 1rem;
      border-radius: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .pat-img {
      width: 44px;
      height: 44px;
      object-fit: contain;
    }

    .pat-card h3 {
      font-size: 1.15rem;
      font-weight: 600;
      color: #fff;
      margin-top: .7rem;
      margin-bottom: 0;
    }

    /* ---------- Metodo ---------- */
    .method-card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      overflow: hidden;
      height: 100%;
      transition: transform .2s ease, box-shadow .2s ease;
      display: flex;
      flex-direction: column;
    }

    .method-card:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow-md);
    }

    .method-card img {
      width: 100%;
      height: 210px;
      object-fit: cover;
    }

    .method-card .body {
      padding: 1.5rem 1.5rem 1.7rem;
    }

    .method-card h3 {
      font-size: 1.15rem;
      font-weight: 600;
      color: var(--mp-navy);
    }

    .method-card p {
      color: var(--muted);
      font-size: .93rem;
      margin: 0;
    }

    .method-step {
      font-size: .74rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--mp-blue-deep);
      display: inline-block;
      margin-bottom: .4rem;
    }

    /* ---------- Recensioni ---------- */
    .reviews {
      background: var(--mp-sky);
    }

    .review-card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 22px;
      padding: 2rem;
      box-shadow: var(--shadow-sm);
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    .review-card .ico {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: var(--grad-soft);
      color: var(--mp-blue-deep);
      font-size: 1.25rem;
      margin-bottom: 1rem;
    }

    .review-card p {
      color: #37456A;
      font-size: .98rem;
      font-style: italic;
      flex: 1;
    }

    .review-who {
      display: flex;
      align-items: center;
      gap: .75rem;
      margin-top: 1rem;
    }

    .review-avatar {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: var(--grad);
      color: #fff;
      display: grid;
      place-items: center;
      font-weight: 700;
    }

    .review-who small {
      color: var(--muted);
    }

    .rev-dots {
      display: flex;
      justify-content: center;
      gap: .5rem;
      margin-top: 1.8rem;
    }

    .rev-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      border: none;
      padding: 0;
      background: #C6D2EA;
      transition: all .2s ease;
    }

    .rev-dot.active {
      background: var(--mp-blue-deep);
      width: 26px;
      border-radius: 999px;
    }

    .rev-track {
      transition: opacity .25s ease;
    }

    .rev-track.fade {
      opacity: 0;
    }

    /* ---------- Banner Contattami ---------- */
    .cta-band {
      position: relative;
      color: #fff;
      overflow: hidden;
      border-radius: 26px;
      background: var(--grad);
      box-shadow: var(--shadow-lg);
    }

    .cta-band::before {
      content: "";
      position: absolute;
      inset: 0;
      background: url('images/studio-peroni-2.webp') center/cover no-repeat;
      opacity: .22;
      mix-blend-mode: overlay;
    }

    .cta-band .inner {
      position: relative;
      z-index: 2;
    }

    .cta-band h2 {
      font-weight: 600;
      color: #fff;
    }

    .btn-white {
      background: #fff;
      color: var(--mp-blue-deep);
      border: none;
      font-weight: 700;
      border-radius: 999px;
      padding: .74rem 1.9rem;
      transition: transform .18s ease, box-shadow .18s ease;
      box-shadow: 0 10px 26px rgba(0, 0, 0, .18);
    }

    .btn-white:hover {
      color: #ffffff;
      transform: translateY(-2px);
      box-shadow: 0 14px 34px rgba(0, 0, 0, .24);
    }

    /* ---------- FAQ ---------- */
    .accordion-item {
      border: 1px solid var(--line);
      border-radius: 14px !important;
      overflow: hidden;
      margin-bottom: .85rem;
      background: #fff;
    }

    .accordion-button {
      font-weight: 600;
      color: var(--mp-navy);
      padding: 1.1rem 1.3rem;
      background: #fff;
    }

    .accordion-button:not(.collapsed) {
      background: var(--mp-sky);
      color: var(--mp-blue-deep);
      box-shadow: none;
    }

    .accordion-button:focus {
      box-shadow: 0 0 0 .2rem rgba(120, 148, 204, .25);
    }

    .accordion-body {
      color: var(--muted);
      font-size: .95rem;
    }

    .accordion-body ul {
      margin: 0;
      padding-left: 1.2rem;
    }

    .accordion-body li {
      padding: .15rem 0;
    }

    /* ---------- Contatti ---------- */
    .contact-wrap {
      background: linear-gradient(140deg, #26334F 0%, #3D5388 100%);
      border-radius: 26px;
      color: #fff;
      overflow: hidden;
      box-shadow: var(--shadow-lg);
    }

    .contact-item {
      display: flex;
      gap: .8rem;
      align-items: flex-start;
      color: #DCE5F7;
    }

    .contact-item i {
      color: #AFC3EA;
      font-size: 1.15rem;
      margin-top: .15rem;
    }

    .contact-item a {
      color: #fff;
    }

    .studio-tabs .btn {
      border-radius: 999px;
      font-weight: 600;
      font-size: .88rem;
      padding: .5rem 1.3rem;
      background: rgba(255, 255, 255, .1);
      color: #DCE5F7;
      border: 1.5px solid rgba(255, 255, 255, .3);
      transition: all .18s ease;
    }

    .studio-tabs .btn.active {
      background: #fff;
      color: var(--mp-blue-deep);
      border-color: #fff;
    }

    .map-frame {
      border: 0;
      border-radius: 16px;
      width: 100%;
      height: 240px;
      background: #fff;
    }

    .contact-form-card {
      background: #fff;
      color: var(--ink);
      border-radius: 22px;
      padding: 2rem;
    }

    .contact-form-card .form-label {
      font-weight: 600;
      font-size: .9rem;
    }

    .contact-form-card .form-control {
      border-radius: 12px;
      padding: .72rem .9rem;
      border: 1.5px solid var(--line);
    }

    .contact-form-card .form-control:focus {
      border-color: var(--mp-blue);
      box-shadow: 0 0 0 .2rem rgba(120, 148, 204, .22);
    }

    .form-success {
      display: none;
    }


    /* ---------- Aree esperienza-Servizi ---------- */

    .experience-card {
      display: flex;
      align-items: stretch;
      gap: 2rem;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 24px;
      overflow: hidden;
      margin-bottom: 2rem;
      box-shadow: var(--shadow-sm);
      transition:
        transform .25s ease,
        box-shadow .25s ease;
    }

    .experience-card:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow-md);
    }

    .experience-image {
      flex: 0 0 330px;
      display: flex;
      overflow: hidden;
    }

    .experience-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .experience-content {
      padding: 2rem 2rem 2rem 0;
      flex: 1;
    }

    .experience-tag {
      display: inline-block;
      margin-bottom: .8rem;
      padding: .35rem .9rem;
      border-radius: 999px;
      background: var(--grad-soft);
      color: var(--mp-blue-deep);
      font-size: .78rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .08em;
    }

    .experience-content h3 {
      color: var(--mp-navy);
      font-size: 1.6rem;
      margin-bottom: 1rem;
      font-family: 'Fraunces', serif;
    }

    .experience-content p {
      color: var(--muted);
      font-size: 1rem;
      line-height: 1.8;
      margin: 0;
    }

    /* ---------- Footer ---------- */
    .site-footer {
      background: #1A2338;
      color: #A9B6D2;
      font-size: .92rem;
    }

    .site-footer a {
      color: #CDD9F0;
      transition: color .15s ease;
    }

    .site-footer a:hover {
      color: #fff;
    }

    .site-footer h6 {
      color: #fff;
      font-weight: 700;
      letter-spacing: .02em;
    }

    .footer-brand {
      font-family: 'Fraunces', serif;
      font-weight: 600;
      font-size: 1.2rem;
      color: #fff;
    }

    .legal {
      font-size: .78rem;
      color: #7E8DAD;
    }

    /* ---------- Reveal ---------- */
    .reveal {
      opacity: 0;
      transform: translateY(26px);
      transition: opacity .6s ease, transform .6s ease;
    }

    .reveal.in {
      opacity: 1;
      transform: none;
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }

      .reveal {
        opacity: 1;
        transform: none;
        transition: none;
      }

      .pulse-line path {
        stroke-dashoffset: 0;
        animation: none;
      }

      .btn-mp:hover,
      .exp-card:hover,
      .method-card:hover,
      .pat-card:hover {
        transform: none;
      }
    }

    @media (max-width: 991.98px) {
      .avail-card {
        left: 12px;
        bottom: 12px;
      }

      .about-badge {
        right: 6px;
      }
    }

    /* ------ Mobile Servizi ------- */

    @media (max-width:992px) {

      .experience-card {

        flex-direction: column;

        align-items: stretch;
      }

      .experience-image {

        flex: none;

        width: 100%;

        height: 240px;
      }

      .experience-content {

        padding: 2rem;
      }

    }

/* ------------- CAROSELLO LOCANDINE ----------------- */

.locandine-section {
  background: #fff;
  overflow: hidden;
}

.poster-carousel {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.poster-viewport {
  width: 100%;
  overflow: hidden;
}

.poster-track {
  display: flex;
  gap: 24px;
  will-change: transform;
  transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}

/*
  Largezza e altezza del contenitore delle locandine
*/
.poster-slide {
  flex: 0 0 calc((100% - 48px) / 3);
  height: 430px;

  padding: 0;
  margin: 0;

  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;

  overflow: hidden;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow: var(--shadow-sm);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.poster-slide:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

/*
  Per mentenere le proporzioni originali delle immagini
*/
.poster-slide img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;

  background: #f8f9fc;
}


/* ---------- FRECCE ---------- */

.poster-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  z-index: 5;

  width: 46px;
  height: 46px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: none;
  border-radius: 50%;

  background: var(--mp-blue);
  color: #fff;

  font-size: 1.2rem;

  cursor: pointer;

  box-shadow: var(--shadow-md);

  transition:
    transform .2s ease,
    background .2s ease;
}

.poster-arrow:hover {
  transform: translateY(-50%) scale(1.08);
  background: var(--mp-blue-deep);
}

.poster-arrow-prev {
  left: -23px;
}

.poster-arrow-next {
  right: -23px;
}


/* ---------- LIGHTBOX ---------- */

.poster-lightbox {
  position: fixed;
  inset: 0;

  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 30px;

  background: rgba(20, 28, 45, .88);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity .25s ease,
    visibility .25s ease;
}

.poster-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.poster-lightbox img {
  display: block;

  max-width: 90vw;
  max-height: 90vh;

  width: auto;
  height: auto;

  object-fit: contain;

  border-radius: 10px;

  box-shadow: var(--shadow-lg);

  transform: scale(.95);

  transition: transform .25s ease;
}

.poster-lightbox.is-open img {
  transform: scale(1);
}

.poster-lightbox-close {
  position: absolute;

  top: 20px;
  right: 25px;

  width: 46px;
  height: 46px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(255,255,255,.3);
  border-radius: 50%;

  background: rgba(255,255,255,.1);
  color: #fff;

  font-size: 1rem;

  cursor: pointer;

  transition:
    background .2s ease,
    transform .2s ease;
}

.poster-lightbox-close:hover {
  background: rgba(255,255,255,.2);
  transform: scale(1.05);
}

body.poster-lightbox-open {
  overflow: hidden;
}


/* ---------- RESPONSIVE CAROSELLO LOCANDINE -------------*/

@media (max-width: 991.98px) {

  .poster-slide {
    flex: 0 0 calc((100% - 48px) / 3);
    height: 400px;
  }

  .poster-arrow-prev {
    left: 5px;
  }

  .poster-arrow-next {
    right: 5px;
  }
}


@media (max-width: 765px) {

  .poster-track {
    gap: 16px;
  }

  .poster-slide {
    flex: 0 0 calc((100% - 16px) / 2);
    height: 360px;
  }

  .poster-arrow {
    width: 40px;
    height: 40px;
  }
}


@media (max-width: 579px) {

  .poster-slide {
    flex: 0 0 100%;
    height: 430px;
  }

  .poster-arrow {
    width: 38px;
    height: 38px;
  }
}