@font-face {
  font-family: "Buffalo";
  src: url("/fonts/buffalo.ttf") format("truetype");
  font-display: swap;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 100;
  padding: 12px 20px;
  border-radius: 999px;
  background: hsl(209 99% 40%);
  color: #fff;
  font-family: "Instrument Sans", sans-serif;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 16px;
}

.camelot a:focus-visible,
.camelot button:focus-visible,
.camelot [tabindex]:focus-visible {
  outline: 3px solid hsl(213 14% 21%);
  outline-offset: 3px;
  border-radius: 6px;
}

.camelot :target {
  scroll-margin-top: 90px;
}

/* ---- Camelot landing: adattamento tablet / mobile ---- */
.camelot img,
.camelot svg {
  max-width: 100%;
}

@media (max-width: 1180px) {
  .camelot [style*="grid-template-columns"] {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important;
  }
  .camelot [style*="position:sticky"],
  .camelot [style*="position: sticky"] {
    position: static !important;
  }
}

@media (max-width: 760px) {
  .camelot [style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .camelot [style*="white-space:nowrap"],
  .camelot [style*="white-space: nowrap"] {
    white-space: normal !important;
  }
}

@media (max-width: 1180px) {
  .camelot [style*="min-height"] {
    min-height: 0 !important;
  }
  /* barra di navigazione: scorrimento orizzontale */
  .camelot [style*="height:64px"][style*="display:flex"],
  .camelot [style*="height: 64px"][style*="display: flex"] {
    height: auto !important;
    justify-content: flex-start !important;
    overflow-x: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    scrollbar-width: none;
  }
  .camelot [style*="height:64px"][style*="display:flex"]::-webkit-scrollbar,
  .camelot [style*="height: 64px"][style*="display: flex"]::-webkit-scrollbar {
    display: none;
  }
  .camelot [style*="height:64px"][style*="display:flex"] > *,
  .camelot [style*="height: 64px"][style*="display: flex"] > * {
    flex: none;
  }
}

@media (max-width: 760px) {
  .camelot [style*="height:96px"][style*="display:flex"],
  .camelot [style*="height: 96px"][style*="display: flex"] {
    height: auto !important;
    flex-wrap: wrap;
    padding-top: 16px;
    padding-bottom: 16px;
  }
  .camelot [style*="display:flex"][style*="justify-content:space-between"],
  .camelot [style*="display: flex"][style*="justify-content: space-between"] {
    flex-wrap: wrap;
  }
}

/* mockup dei dispositivi: da assoluti a flusso, in scala */
@media (max-width: 1180px) {
  .camelot [style*="zoom:"],
  .camelot [style*="position:absolute"][style*="filter:drop-shadow"],
  .camelot [style*="position: absolute"][style*="filter: drop-shadow"] {
    position: static !important;
    inset: auto !important;
    zoom: 0.6;
    margin: 0 auto !important;
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
  }
}

@media (max-width: 760px) {
  .camelot [style*="zoom:"],
  .camelot [style*="position:absolute"][style*="filter:drop-shadow"],
  .camelot [style*="position: absolute"][style*="filter: drop-shadow"] {
    zoom: 0.45;
  }
}

/* ---- Rifiniture mobile richieste ---- */
@media (max-width: 760px) {
  /* header: niente CTA sopra alle icone */
  .camelot .hdr-cta { display: none !important; }

  /* menu: solo i nomi delle pagine */
  .camelot .nav-ico { display: none !important; }

  /* hero: niente elementi grafici */
  .camelot .hero-visual { display: none !important; }

  /* iPhone "voto registrato" nella sezione Perché Camelot: più piccolo */
  .camelot .fv-perche { zoom: 0.38 !important; }

  /* mockup tra Le garanzie e I documenti */
  .camelot .mock-garanzie { display: none !important; }

  /* navigatore piani: leggibile e senza taglio */
  .camelot .tabnav {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: 100%;
    gap: 4px;
    padding: 4px !important;
    border-radius: 16px !important;
    box-sizing: border-box;
  }
  .camelot .tabnav > button {
    width: 100%;
    min-width: 0;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    justify-content: center;
    padding: 11px 12px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
  }

  /* etichette "3 anni / 5 anni" nelle tabelle prezzi */
  .camelot [style*="align-items:center"]:has(> [style*="letter-spacing:.04em"]),
  .camelot [style*="align-items: center"]:has(> [style*="letter-spacing: 0.04em"]) {
    flex-wrap: wrap !important;
    justify-content: flex-start;
    row-gap: 6px;
  }

  /* sezione pubblica amministrazione: più respiro e logo MePA più piccolo */
  .camelot .pa-sezione { padding: 28px 0 8px !important; }
  .camelot .mepa-card {
    padding: 24px 20px !important;
    gap: 14px !important;
  }
  .camelot .mepa-card img { height: 64px !important; }
}

/* ---- Vista tablet / iPad ---- */
@media (min-width: 761px) and (max-width: 1180px) {
  /* Hero: testo sopra, un solo elemento grafico sotto */
  .camelot .hero-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .camelot .hero-visual {
    position: static !important;
    height: auto !important;
    display: flex !important;
    justify-content: center;
    padding: 0 24px 40px;
  }
  .camelot .hero-visual .p2,
  .camelot .hero-visual .p3 { display: none !important; }
  .camelot .hero-visual .p1 { zoom: 0.62 !important; }

  /* Perché Camelot: testo a piena larghezza, iPhone tagliato sotto la card */
  .camelot .perche-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 28px !important;
    padding-top: 48px !important;
    padding-bottom: 44px !important;
  }
  .camelot .perche-grid > div { max-width: 100%; }
  .camelot .perche-grid > div > span { max-width: 100% !important; }
  .camelot .perche-visual {
    position: static !important;
    display: flex !important;
    justify-content: center;
    height: auto !important;
    max-height: 430px;
    overflow: hidden;
  }
  .camelot .fv-perche {
    position: static !important;
    zoom: 0.62 !important;
    filter: none !important;
  }

  /* Fascia certificazioni: loghi su una riga compatta */
  .camelot .cert-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 22px !important;
  }
  .camelot .cert-logos {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  .camelot .cert-logos > div { padding: 0 10px !important; }
  .camelot .cert-logos img { height: 42px !important; }
  .camelot .cert-logos span[style*="height:72px"] { height: 52px !important; }
  .camelot .cert-logos span[style*="margin-top:16px"],
  .camelot .cert-logos span[style*="margin-top: 16px"] {
    margin-top: 10px !important;
    font-size: 11.5px !important;
  }

  /* etichette "3 anni / 5 anni" nelle tabelle prezzi: mai tagliate */
  .camelot [style*="align-items:center"]:has(> [style*="letter-spacing:.04em"]),
  .camelot [style*="align-items: center"]:has(> [style*="letter-spacing: 0.04em"]) {
    flex-wrap: wrap !important;
    justify-content: flex-start;
    row-gap: 6px;
  }

  /* Garanzie: niente mockup del telefono + respiro sopra al titolo */
  .camelot .garanzie-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    padding-top: 56px !important;
  }
  .camelot .mock-garanzie { display: none !important; }

  /* Soluzioni: due colonne */
  .camelot .soluzioni-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px !important;
  }

  /* MePA: testi non tagliati sopra e sotto */
  .camelot .pa-sezione { padding: 8px 0 !important; }
  .camelot .pa-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 32px !important;
    padding-top: 48px !important;
    padding-bottom: 56px !important;
  }
  .camelot .mepa-card {
    max-width: 420px;
    margin: 0 auto;
    padding: 30px 28px !important;
  }
  .camelot .mepa-card img { height: 80px !important; }

  /* Webinar e form: impilati e leggibili */
  .camelot .webinar-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 26px !important;
    padding: 44px clamp(20px, 5vw, 72px) !important;
  }
  .camelot .webinar-grid > div:last-child { justify-self: start; }
  .camelot .form-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 32px !important;
    padding: 48px clamp(20px, 5vw, 72px) !important;
  }
  .camelot .form-grid > div:last-child { padding: 32px 28px !important; }

  /* Banner formazione e assistenza: testo sopra, illustrazione sotto */
  .camelot .banner-formazione {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px !important;
  }
  .camelot .banner-formazione img { max-height: 260px !important; justify-self: center; }
}

/* Fascia certificazioni su mobile: loghi a coppie e più piccoli */
@media (max-width: 760px) {
  .camelot .cert-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 18px !important; }
  .camelot .cert-logos {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px 8px !important;
  }
  .camelot .cert-logos > div {
    padding: 12px 8px !important;
    border: 0 !important;
  }
  .camelot .cert-logos img { height: 38px !important; }
  .camelot .cert-logos span[style*="height:72px"] { height: 44px !important; }
  .camelot .cert-logos span[style*="margin-top:16px"],
  .camelot .cert-logos span[style*="margin-top: 16px"] {
    margin-top: 8px !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
  }
}

/* Soluzioni: mockup più piccoli su mobile */
@media (max-width: 760px) {
  .camelot .soluzioni-grid [style*="zoom:"] { zoom: 0.3 !important; }
}

/* iPad: menu solo testuale, tutte le voci visibili */
@media (min-width: 761px) and (max-width: 1180px) {
  .camelot .nav-ico { display: none !important; }
  .camelot nav {
    flex-wrap: wrap !important;
    gap: 10px 14px !important;
    row-gap: 8px !important;
  }
  .camelot nav a { font-size: 14px !important; white-space: nowrap; }
}

/* Rifiniture mobile: spaziature menu e sezioni */
@media (max-width: 760px) {
  .camelot [style*="height:64px"][style*="display:flex"],
  .camelot [style*="height: 64px"][style*="display: flex"] {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    row-gap: 0 !important;
    gap: 0 14px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }
  .camelot [style*="height:64px"][style*="display:flex"] > a { padding: 5px 2px !important; }

  /* Perché Camelot: più blu sopra al mockup e spazio sotto l'ultima riga */
  .camelot .perche-grid {
    padding-top: 34px !important;
    padding-bottom: 34px !important;
  }
  .camelot .perche-visual { padding-top: 18px !important; }

  /* Le garanzie di Camelot: stesso respiro degli altri titoli */
  .camelot .garanzie-grid { padding-top: 48px !important; }
}

/* Form richiesta info: input reali coerenti col design della pagina */
.camelot .form-card input,
.camelot .form-card select,
.camelot .form-card textarea {
  font-family: 'Instrument Sans', sans-serif;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.camelot .form-card input[type="checkbox"] {
  -webkit-appearance: auto;
  appearance: auto;
}
.camelot .form-card input::placeholder,
.camelot .form-card textarea::placeholder { color: hsl(215 14% 62%); }
.camelot .form-card input:focus,
.camelot .form-card select:focus,
.camelot .form-card textarea:focus {
  outline: none;
  border-color: hsl(209 99% 50%);
  box-shadow: 0 0 0 3px hsl(209 99% 92%);
}
.camelot .form-card [aria-invalid="true"] { border-color: hsl(0 72% 55%); }
.camelot .form-card button[type="submit"]:hover:not(:disabled) { filter: brightness(1.05); }

/* Sezione video di presentazione */
@media (max-width: 1180px) {
  .camelot .video-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .camelot .video-grid > div:first-child {
    max-width: 100% !important;
  }
}

/* Riga dei badge sconto nelle tabelle prezzi: su mobile va a capo invece di tagliare */
@media (max-width: 760px) {
  .camelot [style*="gap:7px"],
  .camelot [style*="gap: 7px"] {
    flex-wrap: wrap !important;
  }
}