/* ================= MOBILE OVERRIDE & LAYOUT ================= */
@media (max-width: 700px) {

  /* === RESET & BODY === */
  html, body {
    font-size: 15px;
    padding: 0 !important;
    margin: 0 !important;
    width: 100vw !important;
    overflow-x: hidden !important;
    background: #f5f0fc;
  }

  /* === SEZIONI GENERALI === */
  .section, .page-content {
    box-sizing: border-box;
    padding-top: 54px !important;
    padding-bottom: 26px !important;
  }

  .page-content {
    padding-top: 85px !important; /* navbar 70px + aria */
    padding-bottom: 26px !important;
  }

  h1, h2, h3 {
    scroll-margin-top: 85px;
  }

  .container {
    padding: 0 6px !important;
    max-width: 98vw !important;
  }

  /* ================= HERO ================= */
  #header {
    height: 75vh !important; /* Aumentiamo un po' l'altezza della hero su mobile */
    padding: 0 !important;
    background-attachment: scroll;
    background-size: cover;
    background-position: center center;
  }

  #header .container {
    top: auto; /* Rimuovi l'ancoraggio in alto */
    bottom: 0; /* Ancoralo in basso */
    left: 0;   /* Manteniamo l'allineamento a sinistra */
    max-width: 100vw; /* Occupare tutta la larghezza */
    padding: 0 10px 20px 10px; /* Padding dal basso e laterale */
    justify-content: flex-end; /* Allinea il testo in basso */
  }

  #header .main-title {
    font-size: 1.8rem !important;
    margin-bottom: 14px !important;
    line-height: 1.1 !important;
    display: block !important; /* Assicura che il main-title sia visibile */
  }
  #header .main-text.desktop-text {
    display: none !important; /* Nascondi il testo desktop per mobile */
  }
  #header .main-text.mobile-text {
    display: block !important; /* Mostra il testo mobile */
    font-size: 1.25rem !important;
    margin-top: 0 !important;
    padding: 4px 5px !important;
    max-width: 97vw !important;
  }

  /* Regola l'altezza della hero per mobile */
  #header {
    padding-bottom: 0 !important; /* Rimuoviamo il padding-bottom basato sull'aspect ratio */
  }

  /* ================= CONTATTI BADGES (CARD UGUALI) ================= */
  .contact-badges {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: stretch;
    width: 100%;
    margin-bottom: 18px;
    padding: 0 10px; /* margini dx/sx identici */
    box-sizing: border-box;
  }
  .contact-badge {
    width: 100%;
    min-width: 0;
    margin: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 22px 10px 17px 10px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 18px rgba(108,60,197,0.07);
    text-align: center;
    height: 100%;
    transition: none;
  }
  .contact-badge i {
    font-size: 2.1rem;
    color: #701c91 !important;
    margin-bottom: 10px;
    transition: none;
  }
  .contact-badge-title {
    font-weight: 700;
    font-size: 1.03rem;
    margin-bottom: 5px;
  }
  .contact-badge-desc {
    font-size: 0.97rem;
    color: #444;
  }
  /* Disabilita effetto hover su mobile */
  .contact-badge:hover,
  .contact-badge:active,
  .contact-badge:focus {
    box-shadow: 0 2px 18px rgba(108,60,197,0.07) !important;
    transform: none !important;
  }
  .contact-badge:hover i,
  .contact-badge:active i,
  .contact-badge:focus i {
    color: #701c91 !important;
  }

  /* ================= COLONNE & CARDS ================= */
  .services-flex,
  .whyme-cards,
  .about-cards-row,
  .target-timeline {
    flex-direction: column !important;
    gap: 14px !important;
    align-items: stretch !important;
    margin: 0 auto !important;
    max-width: 100vw !important;
  }
  .service-card,
  .whyme-card,
  .about-card,
  .target-step {
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  /* ================= PORTFOLIO ================= */
  .portfolio-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 0 !important;
  }
  .portfolio-section {
    padding: 14px 0 6px 0 !important;
  }
  .portfolio-card img {
    aspect-ratio: 16/11 !important;
    min-height: 110px;
  }

  /* ================= TIPOGRAFIA ================= */
  .section-title, .big-title {
    font-size: 1.19rem !important;
    font-weight: 800;
    margin-bottom: 13px !important;
    letter-spacing: -0.5px;
    text-align: center;
  }

  .section-subtitle, .big-subtitle {
    font-size: 1.04rem !important;
    margin-bottom: 17px !important;
    color: #46287a;
    font-weight: 600;
    line-height: 1.42;
    text-align: center;
  }

  .section-text {
    font-size: 1.01rem !important;
    color: #46287a;
    padding: 0 4px !important;
    max-width: 99vw !important;
    line-height: 1.67;
    text-align: center;
  }

  /* ================= BOTTONI ================= */
  .btn, .cta-btn, .btn.cta-wow, .cta-btn.cta-wow {
    font-size: 1.01rem !important;
    padding: 10px 13px !important;
    min-width: 0 !important;
    border-radius: 8px !important;
    margin-top: 13px !important;
    margin-bottom: 0 !important;
  }

  /* ================= FORM CONTATTO ================= */
  .contact-hero-form {
    padding: 23px 8px 22px 8px !important;
    border-radius: 13px !important;
    margin: 36px auto 0 auto !important;
    max-width: 99vw !important;
  }
  .input-row {
    flex-direction: column !important;
    gap: 12px !important;
    margin-bottom: 10px !important;
  }
  .input-icon-group input, .input-icon-group textarea {
    font-size: 1rem !important;
    padding: 13px 6px 13px 0 !important;
  }
  .input-icon-group textarea {
    min-height: 60px !important;
  }

  /* ================= FOOTER ================= */
  .footer-inner {
    flex-direction: column !important;
    gap: 20px !important;
    padding: 19px 5px 9px 5px !important;
  }
  .footer-info,
  .footer-map {
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 14px 8px 14px 8px !important;
    border-radius: 11px !important;
  }
  .footer-title {
    font-size: 1.05rem !important;
    margin-bottom: 8px !important;
  }
  .footer-details p {
    font-size: 0.97rem !important;
    margin: 5px 0 0 0 !important;
  }
  .footer-copyright {
    font-size: 0.92rem !important;
    padding-bottom: 6px !important;
  }

  #custom-map-mobile {
    width: 90vw !important;
    min-width: 90vw !important;
    max-width: 98vw !important;
    height: 340px !important;
    min-height: 200px !important;
    max-height: 400px !important;
    display: block !important;
    position: relative !important;
    z-index: 2 !important;
    background: #f8f8ff !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 18px 0 rgba(108,60,197,0.10);
    margin: 18px auto 8px auto !important;
    border: 1.5px solid #ece0ff;
    transition: box-shadow .22s, border .18s;
  }

  .with-map-inline .inline-map {
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
  }
  #custom-map-mobile {
    width: 80px !important;
    height: 80px !important;
    border-radius: 12px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    box-shadow: 0 1px 6px rgba(112,28,145,0.09);
    margin-top: -5px;
  }

  /* ==================== CHI SONO ==================== */
  .about-flex {
    flex-direction: column;
    gap: 32px;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 28px;
  }
  .about-left, .about-right {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    align-items: center !important;
    justify-content: center !important;
  }
  .about-avatar {
    margin: 0 auto 14px auto;
    width: 108px;
    height: 108px;
  }
  .about-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 3px 16px rgba(108,60,197,0.10);
  }
  .about-highlight-box {
    margin: 0 auto 12px auto;
    padding: 9px 16px;
    font-size: 1.05em;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(108,60,197,0.05);
  }
  .about-title {
    font-size: 1.5rem !important;
    text-align: center;
    margin-bottom: 15px;
  }
  .about-desc {
    font-size: 1.04rem !important;
    padding: 14px 10px;
    text-align: center;
    margin-bottom: 18px;
    line-height: 1.7;
  }
  .about-cards-row {
    flex-direction: column;
    gap: 17px;
    align-items: stretch;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 0;
  }
  .about-card {
    min-width: unset;
    max-width: 100%;
    width: 98%;
    margin: 0 auto;
    padding: 19px 10px 15px 10px;
    border-radius: 13px;
    box-shadow: 0 2px 14px rgba(108,60,197,0.08);
  }
  .about-card-icon { font-size: 1.8rem; margin-bottom: 7px; }
  .about-card-title {
    font-size: 1.05rem;
    margin-bottom: 4px;
    color: #701c91;
    font-weight: 700;
    text-align: center;
  }
  .about-card-desc {
    font-size: 0.97rem;
    text-align: center;
    color: #46287a;
    line-height: 1.5;
  }

  /* --- TIMELINE / TARGET SECTION --- */
  .about-target-section {
    padding: 36px 0 22px 0 !important;
    margin-top: 10px;
  }
  .target-timeline {
    flex-direction: column;
    gap: 18px;
    max-width: 480px;
    margin: 0 auto;
  }

  @media (max-width: 700px) {
    .target-timeline {
      flex-direction: column !important;
      gap: 13px !important;
      max-width: 98vw !important;
      margin: 0 auto !important;
    }
    .target-step {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important; /* <--- centratura verticale */
      width: 98% !important;
      min-height: 0 !important;            /* elimina forzature */
      margin: 0 auto 0 auto !important;
      padding: 13px 8px 12px 8px !important; /* meno spazio sopra/sotto */
      border-radius: 13px !important;
      box-shadow: 0 1px 7px rgba(108,60,197,0.05) !important;
      background: #faf6ff !important;
      border: 1.5px solid #e6dfff !important;
      font-size: 1.01rem !important;
      text-align: center !important;
      line-height: 1.45 !important;
      /* rimuovi margin-bottom globale se lo avevi */
    }
    .target-title {
      font-size: 1.03rem !important;
      font-weight: 700 !important;
      margin-bottom: 3px !important;
      color: #6c3cc5 !important;
    }
    .target-icon { font-size: 1.5rem !important; margin-bottom: 7px !important; }
    .target-desc { font-size: 0.95rem !important; color: #46287a !important; }
  }

  /* --- MICRO-BREAKPOINTS --- */
  @media (max-width: 600px) {
    .target-step, .about-card { font-size: 0.96rem; }
    .target-title, .about-card-title { font-size: 1.01rem; }
    .target-icon, .about-card-icon { font-size: 1.1rem; }
  }

  @media (max-width: 520px) {
    .about-left, .about-right, .about-cards-row, .about-desc {
      max-width: 99vw !important;
      width: 100% !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
    .about-avatar { width: 70px; height: 70px; }
  }

  /* --- OPTIONAL: migliora aria tra sezioni --- */
  .about-target-section { padding-top: 24px; }
  #about-main.section { padding-top: 70px; padding-bottom: 20px; }
}

@media (max-width: 700px) {
  .about-mobile-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 430px;
    margin: 0 auto;
    gap: 0;
    padding: 0;
  }
  .about-avatar { margin: 0 auto 8px auto; }
  .about-highlight-box { margin-bottom: 11px; }
  .about-title { margin-top: 2px; margin-bottom: 11px !important; }
  .about-desc { margin-bottom: 10px; }
}


/* ===== PRIVACY PAGE MOBILE ===== */
@media (max-width: 700px) {
  .privacy-wrapper {
    max-width: 98vw;
    margin: 24px auto 12px auto;
    padding: 13px 3vw 16px 3vw;
    border-radius: 11px;
    box-shadow: 0 1px 9px rgba(112,28,145,0.11);
    background: #fff;
  }
  .privacy-title {
    font-size: 1.19rem;
    margin-bottom: 13px;
    font-weight: 800;
    text-align: left;
  }
  .privacy-intro {
    font-size: 1em;
    margin-bottom: 16px;
  }
  .privacy-subtitle {
    font-size: 1.02rem;
    margin-bottom: 7px;
    font-weight: 700;
  }
  .privacy-list {
    font-size: 0.98em;
    padding-left: 15px;
    margin-bottom: 11px;
  }
  .privacy-paragraph {
    font-size: 0.96em;
    margin-bottom: 8px;
  }
  .privacy-update {
    font-size: 0.94em;
    margin-top: 6px;
  }
}