/* Questo CSS serve per il riquadro di presentazione app RK-APP e crea immagine telefono con pulsanti */
    .rk-app { --rk-orange: #ff9800; background: #181a1e; color: #f4f4f4; padding: 32px 20px; }
    .rk-app .rk-wrap { max-width: 1140px; margin: auto; }
    .rk-app .rk-title { color: var(--rk-orange); font-size: clamp(28px, 4vw, 40px); font-weight: 650; letter-spacing: -.03em; }
    .rk-app .rk-phone { width: min(260px, 100%); margin: auto; padding: 9px; border-radius: 37px; background: #383b40; box-shadow: 0 18px 35px #0006; }
    .rk-app .rk-screen { border-radius: 28px; overflow: hidden; background: #fff; }
    .rk-app .carousel-inner { aspect-ratio: var(--rk-screen-ratio, 9 / 19); }
    .rk-app .carousel-item { height: 100%; }
    .rk-app .carousel-item img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center top; background: #fff; }
    /* Pulsanti HTML trasparenti: sullo sfondo si vedono soltanto le icone. */
    .rk-app .carousel-indicators { position: static; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 330px; margin: 20px auto 0; padding: 0; }
    .rk-app .carousel-indicators [data-target] { box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: 100%; height: auto; min-width: 44px; min-height: 44px; aspect-ratio: 1; margin: 0; padding: 5px; text-indent: 0; border: 0; border-radius: 6px; background: transparent; box-shadow: none; opacity: 1; cursor: pointer; }
    .rk-app .carousel-indicators [data-target] img { display: block; width: 100%; height: 100%; object-fit: contain; opacity: .78; transition: filter .2s, opacity .2s, transform .2s; }
    .rk-app .carousel-indicators [data-target].active { background: transparent; box-shadow: none; }
    /* Il filtro colora solo i pixel visibili: trasparenza e scritte restano intatte. */
    .rk-app .carousel-indicators [data-target].active img { opacity: 1; filter: brightness(0) saturate(100%) invert(65%) sepia(94%) saturate(2382%) hue-rotate(359deg) brightness(102%) contrast(106%) drop-shadow(0 0 7px #ff980066); transform: scale(1.04); }
    .rk-app .carousel-indicators [data-target]:hover img { opacity: 1; }
    .rk-app .carousel-indicators [data-target]:focus-visible { outline: 2px solid var(--rk-orange); outline-offset: 3px; }
    @media (max-width: 767.98px) {
      .rk-app { padding: 20px 16px; }
      .rk-app .rk-title { font-size: 27px; margin-bottom: 16px !important; }
      .rk-app .rk-phone { width: 176px; padding: 6px; border-radius: 25px; }
      .rk-app .rk-screen { border-radius: 19px; }
      .rk-app .carousel-indicators { max-width: 224px; gap: 8px; margin-top: 18px; }
      .rk-app .carousel-indicators [data-target] { padding: 3px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .rk-app .carousel-item, .rk-app .carousel-indicators [data-target] img { transition: none !important; }
      .rk-app .carousel-indicators [data-target].active img { transform: none; }
    }

/* Testi indipendenti: una descrizione alla volta, senza spostare le altre colonne. */
.rk-app .rk-descrizioni {
  height: 18rem;
  overflow-y: auto;
  padding: 0 20px 0 0;
  color: #fff;
  text-align: left;
  font-size: 1.1rem;
  line-height: 1.6;
}
.rk-app .rk-descrizione h3 {
  color: #fff;
  font-size: 1.65rem;
  margin: 0 0 1rem;
}
.rk-app .rk-descrizione p { margin: 0 0 1rem; }
.rk-app .rk-descrizione[hidden] { display: none !important; }
.rk-app .rk-descrizione a { color: var(--rk-orange); }
@media (min-width: 768px) {
  .rk-app .carousel-indicators { margin-top: 0; }
}