/* =====================================================================
   sergiopeluso.it — strato "Apple" sopra il tema Novo/Elementor.
   Caricato per ultimo: sovrascrive per selettore, non tocca i CSS del tema.

   I riferimenti §n rimandano ai principi della skill apple-design:
   §1 risposta immediata · §3 interrompibilità · §4 molle · §7 coerenza
   spaziale · §12 materiali e profondità · §14 motion ridotto · §15
   tipografia · §16 fondamenti (gerarchia, feedback, wayfinding, craft).
   ===================================================================== */

:root {
  /* palette del marchio, ripresa dal sito (non inventata) */
  --ap-rosso: #760c0c;
  --ap-rosso-chiaro: #9a1414;
  --ap-nero: #17171a;
  --ap-grigio-fondo: #c9c9c9;
  --ap-inchiostro: #1d1d1f;
  --ap-inchiostro-tenue: #4b4b50;
  --ap-linea: rgba(0, 0, 0, .12);
  --ap-ok: #1a7f3c;
  --ap-errore: #b3261e;

  /* materiali §12: superfici traslucide, non barre opache */
  --ap-vetro-chiaro: rgba(255, 255, 255, .72);
  --ap-vetro-scuro: rgba(23, 23, 26, .62);
  --ap-vetro-bordo: rgba(255, 255, 255, .5);

  /* ombre: più grande la superficie, più spessa legge §12 */
  --ap-ombra-s: 0 1px 2px rgba(0, 0, 0, .06), 0 2px 8px rgba(0, 0, 0, .06);
  --ap-ombra-m: 0 2px 6px rgba(0, 0, 0, .07), 0 12px 32px rgba(0, 0, 0, .10);
  --ap-ombra-l: 0 4px 12px rgba(0, 0, 0, .08), 0 28px 64px rgba(0, 0, 0, .16);

  /* raggi coerenti: il raggio cresce con la superficie */
  --ap-r-s: 10px;
  --ap-r-m: 14px;
  --ap-r-l: 22px;

  /* spaziatura in rem §15: scala col testo dell'utente */
  --ap-sp-1: .25rem;
  --ap-sp-2: .5rem;
  --ap-sp-3: .75rem;
  --ap-sp-4: 1rem;
  --ap-sp-5: 1.5rem;
  --ap-sp-6: 2rem;
  --ap-sp-7: 3rem;

  /* curve: le micro-interazioni non gestuali restano in CSS.
     Tutto ciò che si può afferrare passa dalle molle in apple.js §4 */
  --ap-out: cubic-bezier(.32, .72, 0, 1);      /* uscita morbida, tipo iOS */
  --ap-in: cubic-bezier(1, 0, .68, .28);       /* inversa: ritorno speculare §7 */
  --ap-rapido: 140ms;
  --ap-medio: 260ms;
  --ap-lento: 420ms;
}

/* ---------------------------------------------------------------- §15 tipografia
   Il tracking non può essere un valore unico: si stringe quando il testo
   cresce, resta a zero sul corpo. Il leading si muove all'inverso. */

.elementor-widget-yprm_heading .h,
.elementor-heading-title,
h1, h2, h3 {
  font-optical-sizing: auto;
  text-wrap: balance;
}

h1, .banner .h, .elementor-widget-yprm_banner .h {
  letter-spacing: -.022em;
  line-height: 1.06;
}

h2, .elementor-widget-yprm_heading .h {
  letter-spacing: -.018em;
  line-height: 1.12;
}

h3 {
  letter-spacing: -.012em;
  line-height: 1.2;
}

p, li, .elementor-widget-text-editor {
  letter-spacing: 0;
}

/* testo piccolo: tracking leggermente positivo, o si impasta */
.ap-minuscolo,
.forminator-description,
.ap-aiuto {
  font-size: .8125rem;
  letter-spacing: .01em;
  line-height: 1.45;
}

/* ---------------------------------------------------------------- §1 risposta
   Il feedback vive sulla pressione, non sul rilascio. La classe .ap-press la
   mette apple.js su pointerdown, così vale anche su touch. */

.ap-pressabile {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.ap-press {
  transform: scale(.97);
  transition: transform 100ms var(--ap-out);
}

.ap-pressabile:not(.ap-press) {
  transition: transform var(--ap-medio) var(--ap-out),
              box-shadow var(--ap-medio) var(--ap-out),
              background-color var(--ap-medio) var(--ap-out),
              color var(--ap-medio) var(--ap-out);
}

/* focus visibile e coerente su tutto §16 craft */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ap-rosso);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------------------------------------------------------------- §12 header
   Barra traslucida con il contenuto che scorre sotto, e un bordo di luce
   sul lato in cui la superficie incontra la pagina. Nessun divisore da 1px:
   il distacco lo fa il materiale. */

.site-header .header-main-block {
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  transition: background-color var(--ap-lento) var(--ap-out),
              box-shadow var(--ap-lento) var(--ap-out);
}

.site-header.fixed .header-main-block {
  background-color: rgba(23, 23, 26, .72) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08), 0 8px 30px rgba(0, 0, 0, .28);
}

.site-header.fixed .header-main-block::after {
  /* scroll edge effect: sfumatura là dove la barra copre il contenuto */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -18px;
  height: 18px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(23, 23, 26, .28), transparent);
}

/* le voci di menu reagiscono, senza spostare il layout */
.site-header .menu-item > a {
  position: relative;
  transition: color var(--ap-medio) var(--ap-out);
}

.site-header .menu-item > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--ap-medio) var(--ap-out);
}

.site-header .menu-item > a:hover::after,
.site-header .menu-item > a:focus-visible::after {
  transform: scaleX(1);
}

/* ---------------------------------------------------------------- bottoni
   Un solo linguaggio per tutte le chiamate all'azione del sito. */

.elementor-button,
.button-style1,
.ap-btn {
  border-radius: 999px;
  letter-spacing: .01em;
  will-change: transform;
}

.elementor-button:hover,
.button-style1:hover {
  transform: translateY(-1px);
  box-shadow: var(--ap-ombra-m);
}

/* ---------------------------------------------------------------- card dei casi
   Profondità coerente: l'ombra cresce col sollevamento, l'immagine respira. */

.elementor-widget-yprm_categories .item,
.elementor-widget-yprm_categories .category-item {
  border-radius: var(--ap-r-m);
  overflow: hidden;
  transition: transform var(--ap-lento) var(--ap-out),
              box-shadow var(--ap-lento) var(--ap-out);
}

.elementor-widget-yprm_categories .item:hover {
  transform: translateY(-3px);
  box-shadow: var(--ap-ombra-l);
}

.elementor-widget-yprm_categories img {
  transition: transform 600ms var(--ap-out);
}

.elementor-widget-yprm_categories .item:hover img {
  transform: scale(1.03);
}

/* ---------------------------------------------------------------- FAQ
   L'apertura la anima apple.js con una molla (altezza reale, interrompibile).
   Qui restano solo i segni: icona che ruota e riga che si accende. */

.accordion-items .item {
  border-radius: var(--ap-r-s);
  transition: background-color var(--ap-medio) var(--ap-out);
}

.accordion-items .item > .top {
  cursor: pointer;
  transition: color var(--ap-medio) var(--ap-out);
}

.accordion-items .elementor-accordion-icon i {
  display: inline-block;
  transition: transform var(--ap-medio) var(--ap-out),
              opacity var(--ap-rapido) linear;
}

.accordion-items .item.active .elementor-accordion-icon-closed i {
  transform: rotate(45deg);
}

.ap-collassabile {
  overflow: hidden;
  will-change: height;
}

/* ---------------------------------------------------------------- tab servizi
   Indicatore che scorre da una tab all'altra: la scia dice da dove viene. */

.elementor-tabs .elementor-tabs-wrapper {
  position: relative;
}

.ap-tab-indicatore {
  /* ancorato in alto: la posizione verticale la calcola apple.js con
     translate, perché l'indicatore vive nel contenitore delle tab */
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--ap-rosso);
  pointer-events: none;
  will-change: transform, width;
}

.elementor-tabs .elementor-tab-title {
  transition: color var(--ap-medio) var(--ap-out),
              opacity var(--ap-medio) var(--ap-out);
}

/* ---------------------------------------------------------------- slider prima/dopo
   La logica resta quella del widget: qui si aggiunge la maniglia, perché
   una cosa trascinabile deve sembrare trascinabile §16 familiarità. */

.image-comparison-slider {
  cursor: ew-resize;
  border-radius: var(--ap-r-m);
}

.image-comparison-slider .line {
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .25), 0 0 12px rgba(0, 0, 0, .35);
}

.image-comparison-slider .line::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  border-radius: 50%;
  background: var(--ap-vetro-chiaro);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid var(--ap-vetro-bordo);
  box-shadow: var(--ap-ombra-s);
}

/* =====================================================================
   MODULO A PASSI
   ===================================================================== */

.ap-form-guscio {
  --ap-campo-h: 3.25rem;
  max-width: 40rem;
  margin: 0 auto;
  text-align: left;
  color: var(--ap-inchiostro);
  font-family: Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.ap-card {
  position: relative;
  padding: var(--ap-sp-6);
  border-radius: var(--ap-r-l);
  background: var(--ap-vetro-chiaro);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid var(--ap-vetro-bordo);
  box-shadow: var(--ap-ombra-l);
  overflow: hidden;
}

/* su fondo bianco il vetro chiaro sparisce: lì la superficie diventa piena e
   il distacco lo fanno bordo e ombra, non la trasparenza §12 */
.ap-card--piena {
  background: #f6f6f8;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-color: rgba(0, 0, 0, .08);
  box-shadow: var(--ap-ombra-m);
}

/* la card su fondo nero usa il materiale scuro:
   mai un vetro chiaro su un altro vetro chiaro §12 */
.ap-card--scura {
  background: var(--ap-vetro-scuro);
  border-color: rgba(255, 255, 255, .14);
  color: #f5f5f7;
}

.ap-card--scura .ap-campo input,
.ap-card--scura .ap-campo select {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .18);
  color: #fff;
}

.ap-card--scura .ap-etichetta,
.ap-card--scura .ap-passo-titolo {
  color: #f5f5f7;
}

.ap-card--scura .ap-passo-sotto,
.ap-card--scura .ap-aiuto {
  color: rgba(245, 245, 247, .72);
}

/* ------------------------------------------------- wayfinding §16
   Dove sono, quanto manca, come torno indietro. */

.ap-testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ap-sp-4);
  margin-bottom: var(--ap-sp-5);
}

.ap-conta {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ap-inchiostro-tenue);
}

.ap-card--scura .ap-conta { color: rgba(245, 245, 247, .7); }

.ap-barra {
  display: flex;
  gap: 6px;
  flex: 1;
  max-width: 12rem;
}

.ap-barra span {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .14);
  overflow: hidden;
}

.ap-card--scura .ap-barra span { background: rgba(255, 255, 255, .18); }

.ap-barra span i {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: var(--ap-rosso);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--ap-lento) var(--ap-out);
}

.ap-card--scura .ap-barra span i { background: #ff5f57; }

.ap-barra span.fatto i,
.ap-barra span.corrente i { transform: scaleX(1); }

/* ------------------------------------------------- pista dei passi
   I passi vivono su una pista: avanti entra da destra, indietro esce a
   destra — stessa strada nei due sensi §7. */

.ap-pista {
  position: relative;
  will-change: height;
}

/* i passi si sovrappongono, ma NON con inset:0: l'altezza deve restare
   quella del contenuto, altrimenti misurarla darebbe l'altezza della pista */
.ap-passo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--ap-sp-4);
  will-change: transform, opacity;
}

.ap-passo[hidden] { display: none; }

.ap-passo-titolo {
  margin: 0;
  font-size: clamp(1.35rem, 1rem + 1.4vw, 1.85rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.018em;
}

.ap-passo-sotto {
  margin: -.35rem 0 0;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--ap-inchiostro-tenue);
}

.ap-riga {
  display: grid;
  gap: var(--ap-sp-4);
}

@media (min-width: 34rem) {
  .ap-riga--due { grid-template-columns: 1fr 1fr; }
}

/* ------------------------------------------------- campi */

.ap-campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.ap-etichetta {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ap-inchiostro);
}

.ap-etichetta em {
  font-style: normal;
  color: var(--ap-rosso);
  margin-left: 2px;
}

.ap-card--scura .ap-etichetta em { color: #ff8a84; }

.ap-campo input,
.ap-campo select,
.ap-campo textarea {
  width: 100%;
  height: var(--ap-campo-h);
  padding: 0 var(--ap-sp-4);
  font: inherit;
  font-size: 1rem;
  color: inherit;
  background: rgba(255, 255, 255, .78);
  border: 1px solid var(--ap-linea);
  border-radius: var(--ap-r-s);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .04);
  transition: border-color var(--ap-rapido) var(--ap-out),
              box-shadow var(--ap-rapido) var(--ap-out),
              background-color var(--ap-rapido) var(--ap-out);
  -webkit-appearance: none;
  appearance: none;
}

.ap-campo textarea {
  height: auto;
  min-height: 6.5rem;
  padding: var(--ap-sp-3) var(--ap-sp-4);
  line-height: 1.5;
  resize: vertical;
}

.ap-campo input::placeholder,
.ap-campo textarea::placeholder {
  color: rgba(29, 29, 31, .42);
}

.ap-card--scura .ap-campo input::placeholder {
  color: rgba(255, 255, 255, .45);
}

.ap-campo input:focus,
.ap-campo select:focus,
.ap-campo textarea:focus {
  outline: none;
  border-color: var(--ap-rosso);
  box-shadow: 0 0 0 4px rgba(118, 12, 12, .14);
  background: #fff;
}

.ap-card--scura .ap-campo input:focus {
  border-color: #ff8a84;
  box-shadow: 0 0 0 4px rgba(255, 138, 132, .18);
  background: rgba(255, 255, 255, .12);
}

/* stato di errore: validazione inline, mai all'invio §16 feedback */
.ap-campo[data-stato="errore"] input,
.ap-campo[data-stato="errore"] select {
  border-color: var(--ap-errore);
  box-shadow: 0 0 0 4px rgba(179, 38, 30, .12);
}

.ap-campo[data-stato="ok"] input {
  border-color: rgba(26, 127, 60, .5);
}

.ap-errore {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 1.15rem;
  font-size: .8125rem;
  line-height: 1.2;
  color: var(--ap-errore);
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity var(--ap-rapido) var(--ap-out),
              transform var(--ap-rapido) var(--ap-out);
}

.ap-card--scura .ap-errore { color: #ff9f99; }

.ap-campo[data-stato="errore"] .ap-errore {
  opacity: 1;
  transform: none;
}

/* prefisso telefono: il controllo sta accanto a ciò che governa §16 */
.ap-tel {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--ap-sp-2);
}

.ap-tel .ap-prefisso {
  display: inline-flex;
  align-items: center;
  height: var(--ap-campo-h);
  padding: 0 var(--ap-sp-3);
  border: 1px solid var(--ap-linea);
  border-radius: var(--ap-r-s);
  background: rgba(255, 255, 255, .5);
  font-size: .9375rem;
  color: var(--ap-inchiostro-tenue);
  white-space: nowrap;
}

.ap-card--scura .ap-tel .ap-prefisso {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .18);
  color: rgba(245, 245, 247, .8);
}

/* ------------------------------------------------- controllo segmentato
   Due sole scelte: due bottoni visibili battono una tendina §16 semplicità */

.ap-segmenti {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .07);
}

.ap-card--scura .ap-segmenti { background: rgba(255, 255, 255, .1); }

.ap-segmenti button {
  position: relative;
  z-index: 1;
  height: 2.75rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--ap-inchiostro-tenue);
  cursor: pointer;
  transition: color var(--ap-medio) var(--ap-out);
}

.ap-card--scura .ap-segmenti button { color: rgba(245, 245, 247, .75); }

.ap-segmenti button[aria-pressed="true"] { color: #fff; }

.ap-segmenti-pillola {
  position: absolute;
  top: 4px;
  left: 4px;
  height: calc(100% - 8px);
  border-radius: 999px;
  background: var(--ap-rosso);
  box-shadow: var(--ap-ombra-s);
  will-change: transform, width;
  z-index: 0;
}

/* ------------------------------------------------- consenso */

.ap-consenso {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--ap-sp-3);
  align-items: start;
  padding: var(--ap-sp-4);
  border-radius: var(--ap-r-m);
  background: rgba(255, 255, 255, .5);
  border: 1px solid var(--ap-linea);
}

.ap-card--scura .ap-consenso {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .16);
}

.ap-consenso input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.5rem;
  height: 1.5rem;
  margin: 1px 0 0;
  border: 1.5px solid rgba(0, 0, 0, .3);
  border-radius: 7px;
  background: #fff;
  cursor: pointer;
  transition: background-color var(--ap-rapido) var(--ap-out),
              border-color var(--ap-rapido) var(--ap-out),
              transform var(--ap-rapido) var(--ap-out);
}

.ap-card--scura .ap-consenso input[type="checkbox"] {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .35);
}

.ap-consenso input[type="checkbox"]:checked {
  background: var(--ap-rosso) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center / 68% no-repeat;
  border-color: var(--ap-rosso);
}

.ap-consenso label {
  font-size: .875rem;
  line-height: 1.5;
  color: var(--ap-inchiostro-tenue);
  cursor: pointer;
}

.ap-card--scura .ap-consenso label { color: rgba(245, 245, 247, .82); }

.ap-campo[data-stato="errore"] .ap-consenso {
  border-color: var(--ap-errore);
}

/* ------------------------------------------------- riepilogo */

.ap-riepilogo {
  display: grid;
  gap: var(--ap-sp-2);
  padding: var(--ap-sp-4);
  border-radius: var(--ap-r-m);
  background: rgba(255, 255, 255, .45);
  border: 1px solid var(--ap-linea);
  font-size: .9375rem;
}

.ap-card--scura .ap-riepilogo {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .14);
}

.ap-riepilogo div {
  display: flex;
  justify-content: space-between;
  gap: var(--ap-sp-4);
}

.ap-riepilogo dt,
.ap-riepilogo span:first-child {
  color: var(--ap-inchiostro-tenue);
}

.ap-riepilogo span:last-child {
  font-weight: 600;
  text-align: right;
  overflow-wrap: anywhere;
}

.ap-card--scura .ap-riepilogo span:first-child { color: rgba(245, 245, 247, .7); }

/* ------------------------------------------------- comandi */

.ap-comandi {
  display: flex;
  align-items: center;
  gap: var(--ap-sp-3);
  margin-top: var(--ap-sp-5);
}

.ap-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ap-sp-2);
  height: 3.25rem;
  padding: 0 var(--ap-sp-6);
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  white-space: nowrap;
}

.ap-btn--primario {
  flex: 1;
  color: #fff;
  background: var(--ap-rosso);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 8px 20px rgba(118, 12, 12, .25);
}

.ap-btn--primario:hover { background: var(--ap-rosso-chiaro); }

.ap-btn--secondario {
  color: var(--ap-inchiostro);
  background: rgba(255, 255, 255, .7);
  border: 1px solid var(--ap-linea);
}

.ap-card--scura .ap-btn--secondario {
  color: #f5f5f7;
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .2);
}

.ap-btn[disabled] {
  opacity: .55;
  cursor: default;
}

/* [hidden] è una regola dell'user agent: display:inline-flex la batterebbe */
.ap-btn[hidden] { display: none; }

.ap-btn .ap-freccia {
  transition: transform var(--ap-medio) var(--ap-out);
}

.ap-btn:hover .ap-freccia { transform: translateX(3px); }

.ap-btn--secondario:hover .ap-freccia { transform: translateX(-3px); }

/* rotellina d'attesa: stato in corso, non un blocco §16 feedback */
.ap-spinner {
  width: 1.1rem;
  height: 1.1rem;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ap-gira 700ms linear infinite;
}

@keyframes ap-gira { to { transform: rotate(360deg); } }

/* ------------------------------------------------- esito */

.ap-esito {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ap-sp-4);
  text-align: center;
  padding: var(--ap-sp-4) 0;
}

.ap-spunta {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: rgba(26, 127, 60, .12);
  display: grid;
  place-items: center;
}

.ap-spunta svg { width: 2.4rem; height: 2.4rem; }

.ap-spunta path {
  stroke: var(--ap-ok);
  stroke-width: 2.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: ap-traccia 520ms var(--ap-out) 60ms forwards;
}

@keyframes ap-traccia { to { stroke-dashoffset: 0; } }

.ap-esito h3 {
  margin: 0;
  font-size: 1.4rem;
  letter-spacing: -.015em;
}

.ap-esito p {
  margin: 0;
  max-width: 30rem;
  color: var(--ap-inchiostro-tenue);
  line-height: 1.55;
}

.ap-avviso {
  display: flex;
  gap: var(--ap-sp-3);
  align-items: flex-start;
  margin-top: var(--ap-sp-4);
  padding: var(--ap-sp-3) var(--ap-sp-4);
  border-radius: var(--ap-r-m);
  background: rgba(179, 38, 30, .08);
  border: 1px solid rgba(179, 38, 30, .25);
  color: #7f1c16;
  font-size: .875rem;
  line-height: 1.5;
}

.ap-card--scura .ap-avviso {
  background: rgba(255, 138, 132, .12);
  border-color: rgba(255, 138, 132, .35);
  color: #ffc9c5;
}

.ap-avviso[hidden] { display: none; }

/* campo trappola per i bot: fuori dal flusso, invisibile, non focalizzabile */
.ap-trappola {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ------------------------------------------------- schermi piccoli */

@media (max-width: 33.99rem) {
  .ap-card { padding: var(--ap-sp-5) var(--ap-sp-4); border-radius: var(--ap-r-m); }
  .ap-comandi { flex-direction: column-reverse; align-items: stretch; }
  .ap-btn { width: 100%; }
  .ap-testa { flex-wrap: wrap; }
}

/* =====================================================================
   §14 preferenze di sistema: meno moto, meno trasparenza, più contrasto
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 140ms !important;
  }
  .ap-passo { transition: opacity 160ms linear !important; }
  .ap-press { transform: none; }
  .elementor-button:hover,
  .button-style1:hover,
  .elementor-widget-yprm_categories .item:hover { transform: none; }
  .ap-spunta path { animation: none; stroke-dashoffset: 0; }
}

@media (prefers-reduced-transparency: reduce) {
  .ap-card {
    background: #f4f4f6;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .ap-card--scura { background: #1d1d20; }
  .site-header .header-main-block {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .site-header.fixed .header-main-block { background-color: #17171a !important; }
  .image-comparison-slider .line::after {
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  :root {
    --ap-linea: rgba(0, 0, 0, .55);
    --ap-inchiostro-tenue: #2b2b2f;
  }
  .ap-card {
    background: #fff;
    border: 2px solid #1d1d1f;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .ap-card--scura { background: #000; border-color: #fff; }
  .ap-campo input,
  .ap-campo select { border-width: 2px; }
}

/* =====================================================================
   Pagine legali (privacy, cookie, termini) §15 §16
   Il tema non ha un template per un documento lungo: la leggibilità la
   dà questo blocco. Misura di riga corta, gerarchia netta, tabelle che
   scorrono da sole invece di sfondare la pagina.
   ===================================================================== */

.ap-doc {
  --ap-doc-fondo: #fff;
  max-width: 50rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 3.25rem);
  background: var(--ap-doc-fondo);
  border-radius: var(--ap-r-l);
  box-shadow: var(--ap-ombra-l);
  color: var(--ap-inchiostro);
  font-size: 1.0625rem;
  line-height: 1.62;
  letter-spacing: 0;
  text-align: left;
}

.ap-doc-intestazione { margin-bottom: var(--ap-sp-6); }

.ap-doc h1 {
  margin: 0 0 var(--ap-sp-2);
  font-size: clamp(1.9rem, 4.4vw, 2.6rem);
  letter-spacing: -.022em;
  line-height: 1.06;
  color: var(--ap-nero);
}

.ap-doc-occhiello {
  display: block;
  margin: 0 0 var(--ap-sp-3);
  font-size: .8125rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ap-rosso);
}

.ap-doc-sottotitolo {
  margin: 0;
  font-size: 1.1875rem;
  line-height: 1.42;
  letter-spacing: -.006em;
  color: var(--ap-inchiostro-tenue);
}

.ap-doc h2 {
  margin: var(--ap-sp-7) 0 var(--ap-sp-3);
  padding-top: var(--ap-sp-5);
  border-top: 1px solid var(--ap-linea);
  font-size: 1.35rem;
  letter-spacing: -.014em;
  line-height: 1.24;
  color: var(--ap-nero);
}

.ap-doc h3 {
  margin: var(--ap-sp-5) 0 var(--ap-sp-2);
  font-size: 1.0625rem;
  letter-spacing: -.008em;
  color: var(--ap-nero);
}

.ap-doc p { margin: 0 0 var(--ap-sp-4); }
.ap-doc ul { margin: 0 0 var(--ap-sp-4); padding-left: 1.35rem; }
.ap-doc li { margin-bottom: var(--ap-sp-2); }
.ap-doc strong { color: var(--ap-nero); }

.ap-doc a {
  color: var(--ap-rosso);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  transition: color var(--ap-rapido) var(--ap-out);
}

.ap-doc a:hover { color: var(--ap-rosso-chiaro); }

.ap-doc code {
  padding: .1em .35em;
  border-radius: 6px;
  background: rgba(0, 0, 0, .05);
  font-size: .9em;
}

.ap-doc-guida {
  padding: var(--ap-sp-4) var(--ap-sp-5);
  border-left: 3px solid var(--ap-rosso);
  border-radius: var(--ap-r-s);
  background: rgba(118, 12, 12, .045);
  font-size: 1.0625rem;
}

.ap-doc-titolare {
  margin: 0 0 var(--ap-sp-5);
  padding: var(--ap-sp-4) var(--ap-sp-5);
  border: 1px solid var(--ap-linea);
  border-radius: var(--ap-r-m);
  background: #fafafc;
}

.ap-doc-titolare p { margin: 0 0 var(--ap-sp-1); font-size: .9375rem; }
.ap-doc-titolare p:last-child { margin-bottom: 0; }

.ap-doc-data {
  font-size: .875rem;
  color: var(--ap-inchiostro-tenue);
}

.ap-doc-min { font-size: .8125rem; color: var(--ap-inchiostro-tenue); }

/* i dati che il cliente deve ancora mandare: visibili, non nascosti §16 */
.ap-manca {
  padding: .1em .4em;
  border-radius: 6px;
  background: #fff2a8;
  color: #6b5300;
  font-size: .9em;
  font-weight: 600;
}

/* le tabelle dei cookie scorrono dentro il loro riquadro, non sfondano */
.ap-doc-tabella {
  margin: 0 0 var(--ap-sp-5);
  overflow-x: auto;
  border: 1px solid var(--ap-linea);
  border-radius: var(--ap-r-m);
  -webkit-overflow-scrolling: touch;
}

.ap-doc-tabella table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: .875rem;
}

.ap-doc-tabella th,
.ap-doc-tabella td {
  padding: var(--ap-sp-3) var(--ap-sp-4);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--ap-linea);
}

.ap-doc-tabella thead th {
  background: #f5f5f7;
  font-size: .8125rem;
  letter-spacing: .01em;
  color: var(--ap-inchiostro-tenue);
  white-space: nowrap;
}

.ap-doc-tabella tbody tr:last-child td { border-bottom: 0; }

.ap-doc-bottone {
  display: inline-block;
  margin: 0;
  padding: .5em 1em;
  border: 1px solid var(--ap-rosso);
  border-radius: 999px;
  background: transparent;
  color: var(--ap-rosso);
  font: inherit;
  font-size: .9375rem;
  cursor: pointer;
  transition: background var(--ap-rapido) var(--ap-out), color var(--ap-rapido) var(--ap-out);
}

.ap-doc-bottone:hover { background: var(--ap-rosso); color: #fff; }

.ap-doc-altri {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ap-sp-3);
  margin-top: var(--ap-sp-7);
  padding-top: var(--ap-sp-5);
  border-top: 1px solid var(--ap-linea);
  font-size: .9375rem;
}

/* il tema disabilita la selezione del testo: su un documento legale no */
.ap-doc,
.ap-doc * {
  -webkit-user-select: text !important;
  user-select: text !important;
}

/* =====================================================================
   Barra legale in fondo a ogni pagina
   ===================================================================== */

.ap-legale {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--ap-sp-2) var(--ap-sp-4);
  /* la bolla WhatsApp è fissa in basso a destra e la barra è l'ultima cosa
     della pagina: lo spazio in fondo le evita di coprirne i link */
  padding: var(--ap-sp-5) var(--ap-sp-4) calc(var(--ap-sp-5) + 5.5rem);
  background: #101012;
  color: rgba(255, 255, 255, .62);
  font-size: .8125rem;
  letter-spacing: .01em;
  text-align: center;
}

.ap-legale a,
.ap-legale button {
  color: rgba(255, 255, 255, .82);
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--ap-rapido) var(--ap-out);
}

.ap-legale a:hover,
.ap-legale button:hover { color: #fff; text-decoration: underline; }

.ap-legale .ap-legale-sep { opacity: .35; }

/* =====================================================================
   Consenso ai cookie §12 materiale · §7 percorsi simmetrici · §16 feedback
   Foglio in basso, non un muro davanti alla pagina: accettare e rifiutare
   hanno lo stesso peso visivo, come chiede il Garante.
   ===================================================================== */

.ap-cc {
  position: fixed;
  z-index: 99999;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  padding: clamp(.5rem, 2vw, 1.25rem);
  pointer-events: none;
}

.ap-cc-vetro {
  pointer-events: auto;
  width: 100%;
  max-width: 34rem;
  padding: var(--ap-sp-5);
  border: 1px solid var(--ap-vetro-bordo);
  border-radius: var(--ap-r-l);
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  box-shadow: var(--ap-ombra-l);
  color: var(--ap-inchiostro);
  text-align: left;
  opacity: 0;
  transform: translate3d(0, 130%, 0);
  will-change: transform, opacity;
}

.ap-cc-titolo {
  margin: 0 0 var(--ap-sp-2);
  font-size: 1.125rem;
  letter-spacing: -.012em;
  line-height: 1.24;
  font-weight: 600;
  color: var(--ap-nero);
}

.ap-cc-testa p:not(.ap-cc-titolo) {
  margin: 0;
  font-size: .875rem;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--ap-inchiostro-tenue);
}

.ap-cc-testa a { color: var(--ap-rosso); text-decoration: underline; }

.ap-cc-pista { height: 0; overflow: hidden; }

.ap-cc-scelte { padding-top: var(--ap-sp-4); }

.ap-cc-riga {
  display: flex;
  align-items: flex-start;
  gap: var(--ap-sp-4);
  padding: var(--ap-sp-3) 0;
  border-top: 1px solid var(--ap-linea);
}

.ap-cc-riga-testo { flex: 1; }

.ap-cc-riga-titolo {
  display: block;
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: -.006em;
  color: var(--ap-nero);
}

.ap-cc-riga-nota {
  display: block;
  margin-top: 2px;
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--ap-inchiostro-tenue);
}

/* interruttore: la pallina scorre, non lampeggia §4 */
.ap-cc-int {
  flex: 0 0 auto;
  position: relative;
  width: 46px;
  height: 28px;
  margin-top: 2px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, .18);
  cursor: pointer;
  transition: background var(--ap-medio) var(--ap-out);
}

.ap-cc-int.attivo { background: var(--ap-ok); }
.ap-cc-int.bloccato { background: rgba(0, 0, 0, .3); cursor: default; opacity: .6; }

.ap-cc-int-pallina {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  transition: transform var(--ap-medio) var(--ap-out);
}

.ap-cc-int.attivo .ap-cc-int-pallina { transform: translateX(18px); }

.ap-cc-azioni {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ap-sp-2);
  margin-top: var(--ap-sp-4);
}

.ap-cc-btn {
  flex: 1 1 8rem;
  min-height: 44px;
  padding: .7em 1.1em;
  border: 1px solid var(--ap-nero);
  border-radius: 999px;
  background: transparent;
  color: var(--ap-nero);
  font: inherit;
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: -.006em;
  cursor: pointer;
  transition: background var(--ap-rapido) var(--ap-out),
              color var(--ap-rapido) var(--ap-out),
              transform 100ms var(--ap-out);
}

.ap-cc-btn:hover { background: rgba(0, 0, 0, .06); }

.ap-cc-btn--primario {
  border-color: var(--ap-rosso);
  background: var(--ap-rosso);
  color: #fff;
}

.ap-cc-btn--primario:hover { background: var(--ap-rosso-chiaro); }

.ap-cc-btn--quieto {
  flex: 0 1 auto;
  border-color: transparent;
  color: var(--ap-inchiostro-tenue);
  font-weight: 500;
  text-decoration: underline;
}

.ap-cc-btn.ap-press { transform: scale(.97); }

/* In colonna l'ordine si sceglie a mano: azione principale in alto, rifiuto
   subito sotto con lo stesso ingombro, personalizzazione in fondo. */
@media (max-width: 30rem) {
  .ap-cc-azioni { flex-direction: column; }
  .ap-cc-btn { flex: 1 1 auto; width: 100%; }
  .ap-cc-btn--primario { order: 1; }
  .ap-cc-btn[data-cc="necessari"] { order: 2; }
  .ap-cc-btn--quieto { order: 3; }
}

/* la bolla WhatsApp del tema sta in basso a destra con z-index 9999999:
   mentre il foglio è a schermo la si solleva sopra di lui, invece di
   litigare sui livelli */
html.ap-cc-attivo .qlwapp__container {
  transform: translate3d(0, calc(-1 * var(--ap-cc-h, 0px)), 0);
}

/* =====================================================================
   §14 preferenze di sistema, per i pezzi nuovi
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
  .ap-cc-vetro { transition: none; }
  html.ap-cc-attivo .qlwapp__container { transition: none; }
  .ap-cc-int-pallina { transition: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .ap-cc-vetro {
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  .ap-cc-vetro { background: #fff; border: 2px solid #1d1d1f; }
  .ap-cc-btn { border-width: 2px; }
  .ap-cc-int { background: #6b6b70; }
  .ap-doc { border: 2px solid #1d1d1f; }
  .ap-doc-tabella th,
  .ap-doc-tabella td { border-bottom-color: rgba(0, 0, 0, .5); }
  .ap-legale { background: #000; color: #fff; }
  .ap-legale a,
  .ap-legale button { color: #fff; text-decoration: underline; }
}

@media print {
  .ap-cc, .ap-legale, .site-header, .qlwapp, .footer-social-button { display: none !important; }
  .ap-doc { box-shadow: none; max-width: none; padding: 0; }
}