/* ===== MOBILE RESPONSIVE CSS ===== */
/* File CSS con tutte le regole per rendere la landing page mobile friendly */

/* ===== BREAKPOINTS ===== */
/* 
  - xs: < 576px (smartphone verticale)
  - sm: >= 576px (smartphone orizzontale)
  - md: >= 768px (tablet)
  - lg: >= 992px (desktop piccolo)
  - xl: >= 1200px (desktop grande)
*/

/* ===== REGOLE GLOBALI ===== */
@media (max-width: 1200px) {
  h1 {
    font-size: 60px;
  }
  
  h2 {
    font-size: 48px;
  }
  
  h4 {
    font-size: 20px;
  }
  
  /* Padding */
  .p-32 { padding: 64px; }
  
  /* Padding orizzontale */
  .px-32 { padding-left: 64px; padding-right: 64px; }
  .px-64 { padding-left: 48px; padding-right: 48px; }
  
  /* Padding verticale */
  .py-32 { padding-top: 64px; padding-bottom: 64px; }
  .py-64 { padding-top: 48px; padding-bottom: 48px; }
  
  /* Padding singoli lati */
  .pt-32 { padding-top: 64px; }
  .pr-32 { padding-right: 64px; }
  .pb-32 { padding-bottom: 64px; }
  .pl-32 { padding-left: 64px; }
  
  /* Margin */
  .m-32 { margin: 64px; }
  
  /* Margin orizzontale */
  .mx-32 { margin-left: 64px; margin-right: 64px; }
  
  /* Margin verticale */
  .my-32 { margin-top: 64px; margin-bottom: 64px; }
  
  /* Margin singoli lati */
  .mt-32 { margin-top: 64px; }
  .mr-32 { margin-right: 64px; }
  .mb-32 { margin-bottom: 64px; }
  .ml-32 { margin-left: 64px; }
}

@media (max-width: 992px) {
  h1 {
    font-size: 48px;
  }
  
  h2 {
    font-size: 36px;
  }
  
  h3 {
    font-size: 18px;
  }
  
  h4 {
    font-size: 18px;
  }
  
  .fs-80 {
    font-size: 60px;
  }
  
  /* Padding */
  .p-32 { padding: 32px; }
  .p-16 { padding: 24px; }
  
  /* Padding orizzontale */
  .px-32 { padding-left: 32px; padding-right: 32px; }
  .px-64 { padding-left: 32px; padding-right: 32px; }
  .px-16 { padding-left: 24px; padding-right: 24px; }
  
  /* Padding verticale */
  .py-32 { padding-top: 32px; padding-bottom: 32px; }
  .py-64 { padding-top: 32px; padding-bottom: 32px; }
  .py-16 { padding-top: 24px; padding-bottom: 24px; }
  
  /* Padding singoli lati */
  .pt-32 { padding-top: 32px; }
  .pr-32 { padding-right: 32px; }
  .pb-32 { padding-bottom: 32px; }
  .pl-32 { padding-left: 32px; }
  .pt-16 { padding-top: 24px; }
  .pr-16 { padding-right: 24px; }
  .pb-16 { padding-bottom: 24px; }
  .pl-16 { padding-left: 24px; }
  
  /* Margin */
  .m-32 { margin: 32px; }
  .m-16 { margin: 24px; }
  
  /* Margin orizzontale */
  .mx-32 { margin-left: 32px; margin-right: 32px; }
  .mx-16 { margin-left: 24px; margin-right: 24px; }
  
  /* Margin verticale */
  .my-32 { margin-top: 32px; margin-bottom: 32px; }
  .my-16 { margin-top: 24px; margin-bottom: 24px; }
  
  /* Margin singoli lati */
  .mt-32 { margin-top: 32px; }
  .mr-32 { margin-right: 32px; }
  .mb-32 { margin-bottom: 32px; }
  .ml-32 { margin-left: 32px; }
  .mt-16 { margin-top: 24px; }
  .mr-16 { margin-right: 24px; }
  .mb-16 { margin-bottom: 24px; }
  .ml-16 { margin-left: 24px; }

}

@media (max-width: 768px) {
  h1 {
    font-size: 36px;
  }
  
  h2 {
    font-size: 28px;
  }
  
  h3 {
    font-size: 16px;
  }
  
  h4 {
    font-size: 18px;
  }
  
  .fs-80 {
    font-size: 48px;
  }
  
  .fs-20 {
    font-size: 16px;
  }
  
  /* Padding */
  .p-32 { padding: 24px; }
  .p-16 { padding: 16px; }
  .p-8 { padding: 12px; }
  
  /* Padding orizzontale */
  .px-32 { padding-left: 24px; padding-right: 24px; }
  .px-64 { padding-left: 24px; padding-right: 24px; }
  .px-16 { padding-left: 16px; padding-right: 16px; }
  .px-8 { padding-left: 12px; padding-right: 12px; }
  
  /* Padding verticale */
  .py-32 { padding-top: 24px; padding-bottom: 24px; }
  .py-64 { padding-top: 24px; padding-bottom: 24px; }
  .py-16 { padding-top: 16px; padding-bottom: 16px; }
  .py-8 { padding-top: 12px; padding-bottom: 12px; }
  
  /* Padding singoli lati */
  .pt-32 { padding-top: 24px; }
  .pr-32 { padding-right: 24px; }
  .pb-32 { padding-bottom: 24px; }
  .pl-32 { padding-left: 24px; }
  .pt-16 { padding-top: 16px; }
  .pr-16 { padding-right: 16px; }
  .pb-16 { padding-bottom: 16px; }
  .pl-16 { padding-left: 16px; }
  .pt-8 { padding-top: 12px; }
  .pr-8 { padding-right: 12px; }
  .pb-8 { padding-bottom: 12px; }
  .pl-8 { padding-left: 12px; }
  
  /* Margin */
  .m-32 { margin: 24px; }
  .m-16 { margin: 16px; }
  .m-8 { margin: 12px; }
  
  /* Margin orizzontale */
  .mx-32 { margin-left: 24px; margin-right: 24px; }
  .mx-16 { margin-left: 16px; margin-right: 16px; }
  .mx-8 { margin-left: 12px; margin-right: 12px; }
  
  /* Margin verticale */
  .my-32 { margin-top: 24px; margin-bottom: 24px; }
  .my-16 { margin-top: 16px; margin-bottom: 16px; }
  .my-8 { margin-top: 12px; margin-bottom: 12px; }
  
  /* Margin singoli lati */
  .mt-32 { margin-top: 24px; }
  .mr-32 { margin-right: 24px; }
  .mb-32 { margin-bottom: 24px; }
  .ml-32 { margin-left: 24px; }
  .mt-16 { margin-top: 16px; }
  .mr-16 { margin-right: 16px; }
  .mb-16 { margin-bottom: 16px; }
  .ml-16 { margin-left: 16px; }
  .mt-8 { margin-top: 12px; }
  .mr-8 { margin-right: 12px; }
  .mb-8 { margin-bottom: 12px; }
  .ml-8 { margin-left: 12px; }

  .p-mobile {padding: 32px 16px!important;}
}

@media (max-width: 576px) {
  h1 {
    font-size: 32px;
  }
  
  h2 {
    font-size: 24px;
  }
  
  h3 {
    font-size: 16px;
  }
  
  h4 {
    font-size: 16px;
  }
  
  .fs-80 {
    font-size: 36px;
  }
  
  /* Padding */
.p-32 { padding: 16px; }
.p-16 { padding: 12px; }
.p-8 { padding: 8px; }
.p-6 { padding: 6px; }

/* Padding orizzontale */
.px-32 { padding-left: 16px; padding-right: 16px; }
.px-64 { padding-left: 16px; padding-right: 16px; }
.px-16 { padding-left: 12px; padding-right: 12px; }
.px-8 { padding-left: 8px; padding-right: 8px; }
.px-6 { padding-left: 6px; padding-right: 6px; }

/* Padding verticale */
.py-32 { padding-top: 16px; padding-bottom: 16px; }
.py-64 { padding-top: 16px; padding-bottom: 16px; }
.py-16 { padding-top: 12px; padding-bottom: 12px; }
.py-8 { padding-top: 8px; padding-bottom: 8px; }
.py-6 { padding-top: 6px; padding-bottom: 6px; }

/* Padding singoli lati */
.pt-32 { padding-top: 16px; }
.pr-32 { padding-right: 16px; }
.pb-32 { padding-bottom: 16px; }
.pl-32 { padding-left: 16px; }
.pt-16 { padding-top: 12px; }
.pr-16 { padding-right: 12px; }
.pb-16 { padding-bottom: 12px; }
.pl-16 { padding-left: 12px; }
.pt-8 { padding-top: 8px; }
.pr-8 { padding-right: 8px; }
.pb-8 { padding-bottom: 8px; }
.pl-8 { padding-left: 8px; }
.pt-6 { padding-top: 6px; }
.pr-6 { padding-right: 6px; }
.pb-6 { padding-bottom: 6px; }
.pl-6 { padding-left: 6px; }

/* Margin */
.m-32 { margin: 16px; }
.m-16 { margin: 12px; }
.m-8 { margin: 8px; }
.m-6 { margin: 6px; }

/* Margin orizzontale */
.mx-32 { margin-left: 16px; margin-right: 16px; }
.mx-16 { margin-left: 12px; margin-right: 12px; }
.mx-8 { margin-left: 8px; margin-right: 8px; }
.mx-6 { margin-left: 6px; margin-right: 6px; }

/* Margin verticale */
.my-32 { margin-top: 16px; margin-bottom: 16px; }
.my-16 { margin-top: 12px; margin-bottom: 12px; }
.my-8 { margin-top: 8px; margin-bottom: 8px; }
.my-6 { margin-top: 6px; margin-bottom: 6px; }

/* Margin singoli lati */
.mt-32 { margin-top: 16px; }
.mr-32 { margin-right: 16px; }
.mb-32 { margin-bottom: 16px; }
.ml-32 { margin-left: 16px; }
.mt-16 { margin-top: 12px; }
.mr-16 { margin-right: 12px; }
.mb-16 { margin-bottom: 12px; }
.ml-16 { margin-left: 12px; }
.mt-8 { margin-top: 8px; }
.mr-8 { margin-right: 8px; }
.mb-8 { margin-bottom: 8px; }
.ml-8 { margin-left: 8px; }
.mt-6 { margin-top: 6px; }
.mr-6 { margin-right: 6px; }
.mb-6 { margin-bottom: 6px; }
.ml-6 { margin-left: 6px; }

  /* Cambio flex-direction per elementi impilati su mobile */
  .flex {
    flex-direction: column;
  }

  .flex.justify-between {
    gap: 24px;
  }
}

/* ===== HEADER ===== */
@media (max-width: 992px) {
  .header {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
  
  .header-menu-list {
    display: none;
  }
}

@media (max-width: 768px) {
  .header {
    padding-left: 24px !important;
    padding-right: 24px !important;
    height: 80px;
  }
  
  .header-logo img {
    width: 120px;
  }
  
  .header-menu-list {
    display: none;
  }
  
  .header-menu-list-item {
    font-size: 14px;
  }
}

@media (max-width: 576px) {
  .header {
    padding-left: 16px !important;
    padding-right: 16px !important;
    flex-direction: column;
    height: auto;
    padding-top: 16px;
    padding-bottom: 16px;
  }
  
  .header-logo {
    width: 100%;
    margin-bottom: 16px;
    text-align: center;
  }
  
  .header-menu {
    width: 100%;
  }
  
  .header-menu-list {
    display: none;
  }
  
  .header-menu-list-item {
    font-size: 12px;
  }
  
  .null {
    display: none;
  }
}

/* ===== HERO ===== */
@media (max-width: 992px) {
  .hero-background {
    min-height: 80vh;
    justify-content: center;
    background-position: center;
  }
  
  .hero-background .w-half {
    width: 70%;
  }
}

@media (max-width: 768px) {
  .hero-background {
    min-height: 70vh;
  }
  
  .hero-background .w-half {
    width: 90%;
  }
  
  .hero-background .flex {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .hero-background .btn {
    margin-bottom: 16px;
  }
}

@media (max-width: 576px) {
  .hero-background {
    min-height: 60vh;
    text-align: center;
  }
  
  .hero-background .w-half {
    width: 100%;
  }

  .hero-background .flex {
    align-items: center;
  }
  
  .hero-background .btn {
    width: 100%;
    margin-right: 0;
  }
  
  .hero-bonus {
    text-align: center;
  }
}

/* ===== SLIDER PARTNER ===== */
@media (max-width: 768px) {
  .slider-container {
    padding: 48px 0;
  }
  
  .logo-slide {
    height: 60px;
    margin: 0 20px;
  }
}

@media (max-width: 576px) {
  .slider-container {
    padding: 32px 0;
  }
  
  .logo-slide {
    height: 40px;
    margin: 0 15px;
  }
}

/* ===== YOUTUBE ===== */
@media (max-width: 992px) {
  .youtube-container iframe {
    height: 450px;
  }
}

@media (max-width: 768px) {
  .youtube-container iframe {
    height: 350px;
  }
}

@media (max-width: 576px) {
  .youtube-container iframe {
    height: 250px;
  }
}

/* ===== VANTAGGI ===== */
@media (max-width: 992px) {
  .vantaggi-container .flex {
    flex-direction: column;
  }
  
  .vantaggi-item {
    width: 100% !important;
    margin-bottom: 32px;
  }

  .number-container-left,
  .number-container-center,
  .number-container-right {
    width: 100%;
    border: none;
    margin-bottom: 24px;
  }
}

@media (max-width: 768px) {
  .vantaggi-item .flex {
    flex-direction: row;
  }
}

@media (max-width: 576px) {
  .vantaggi-circle {
    padding: 12px;
  }
  
  .vantaggi-icon {
    font-size: 24px;
  }
}

/* ===== TAB COSA IMPARERAI ===== */
@media (max-width: 992px) {
  .tab-content-inner {
    flex-direction: column;
  }
  
  .tab-media, .tab-info {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .tab-features {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 576px) {
  .tab-navigation {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
  }
  
  .tab-button {
    min-width: 100px;
    flex: 0 0 auto;
    padding: 12px 8px;
  }
  
  .tab-icon {
    width: 30px;
    height: 30px;
  }
  
  .feature-item {
    padding: 10px;
  }
  
  .feature-number {
    width: 32px;
    height: 32px;
  }
}

/* ===== PERSONALE / TESTIMONIANZE ===== */

@media (max-width: 768px) {
  
  .testimonial-youtube-video .flex {
    flex-direction: column;
  }
  
  .testimonial-1, .testimonial-2, .testimonial-3, .testimonial-4 {
    width: 100% !important;
    margin-bottom: 16px;
  }
  
  .testimonial-youtube-video iframe {
    height: 250px !important;
  }
}

@media (max-width: 576px) {
  
  .testimonial-youtube-video iframe {
    height: 200px !important;
  }
}

/* ===== BONUS ===== */
@media (max-width: 992px) {
  .bonus-1 {
    margin: 16px;
    padding: 32px 16px;
  }
}

@media (max-width: 768px) {
  .bonus-1 {
    flex: 1 0 100%;
    margin: 12px 0;
  }
}

/* ===== PRICE ===== */
@media (max-width: 992px) {
  .price-container-number {
    padding: 32px;
    width: 70%;
  }
}

@media (max-width: 768px) {
  .price-container-number {
    width: 90%;
    margin-top: 12px;
  }
}

@media (max-width: 576px) {
  .price-container-number {
    width: 100%;
    padding: 24px;
  }
}

/* ===== FORM ===== */
@media (max-width: 992px) {
  .form-container {
    padding: 0 16px;
  }
  
  .tab-form-vantaggi {
    margin: 0 16px;
  }
}

@media (max-width: 768px) {
  .form-container {
    margin-bottom: 24px;
  }
  
  .tab-form-vantaggi {
    margin: 0;
    width: 100%;
  }
}

/* ===== FAQ ===== */
@media (max-width: 992px) {
  .faq-container {
    gap: 24px;
  }
}

@media (max-width: 768px) {
  .faq-container {
    flex-direction: column;
  }
  
  .faq-column {
    max-width: 100%;
  }
}

@media (max-width: 576px) {
  .faq-question {
    padding: 15px;
  }
  
  .faq-item.active .faq-answer {
    padding: 15px;
  }
  
  .faq-question h3 {
    font-size: 16px;
  }
}

/* ===== FOOTER ===== */
@media (max-width: 992px) {
  .footer-main {
    flex-wrap: wrap;
  }
  
  .footer-col {
    flex: 1 0 50%;
    margin-bottom: 40px;
  }
  
  .footer-brand {
    flex: 1 0 100%;
    max-width: 100%;
    margin-bottom: 40px;
  }
}

@media (max-width: 768px) {
  .footer {
    padding: 60px 0 30px;
  }

  .testimonial-nav {
    display: none;
  }
  
  .footer-col {
    flex: 1 0 100%;
    padding-right: 0;
  }
  
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .footer-copyright {
    margin-bottom: 20px;
  }
  
  .footer-policies {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .footer-separator {
    display: none;
  }
}

@media (max-width: 576px) {
  .footer {
    padding: 40px 0 20px;
  }
  
  .footer-title {
    font-size: 16px;
    margin-bottom: 15px;
  }
  
  .footer-description,
  .footer-links a,
  .footer-contact li,
  .footer-copyright,
  .footer-policies a {
    font-size: 12px;
  }
  
  .footer-social {
    gap: 10px;
  }
  
  .social-icon {
    width: 30px;
    height: 30px;
  }
}

/* ===== COUNTER ===== */
@media (max-width: 992px) {
  .counter-container {
    gap: 15px;
  }
  
  .counter-item {
    min-width: 80px;
    padding: 15px 5px;
  }
  
  .counter-number {
    font-size: 50px;
  }
}

@media (max-width: 768px) {
  .counter-container {
    gap: 10px;
    padding: 20px 10px;
  }
  
  .counter-item {
    min-width: 70px;
    padding: 10px 5px;
  }
  
  .counter-number {
    font-size: 40px;
    margin-bottom: 5px;
  }
  
  .counter-label {
    font-size: 12px;
  }
}

@media (max-width: 576px) {
  .counter-container {
    flex-wrap: wrap;
  }
  
  .counter-item {
    min-width: 120px;
    flex: 1 0 40%;
    margin-bottom: 10px;
  }
}

/* ===== UTILITY RESPONSIVE ===== */
/* Classi helper per gestire elementi specifici su mobile */

@media (max-width: 768px) {
  .mobile-stack {
    flex-direction: column !important;
  }
  
  .mobile-full-width {
    width: 100% !important;
  }
  
  .mobile-hidden {
    display: none !important;
  }
  
  .mobile-centered {
    text-align: center !important;
  }
  
  .mobile-padding {
    padding: 16px !important;
  }
  
  .mobile-margin-bottom {
    margin-bottom: 24px !important;
  }
  
  .mobile-no-padding {
    padding: 0 !important;
  }
  
  .mobile-no-margin {
    margin: 0 !important;
  }
}

@media (max-width: 576px) {
  .xs-stack {
    flex-direction: column !important;
  }
  
  .xs-full-width {
    width: 100% !important;
  }
  
  .xs-hidden {
    display: none !important;
  }
  
  .xs-centered {
    text-align: center !important;
  }
  
  .xs-padding {
    padding: 8px !important;
  }
  
  .xs-margin-bottom {
    margin-bottom: 16px !important;
  }
}

/* ===== TESTO RESPONSIVE ===== */
@media (max-width: 768px) {
  .text-md-center {
    text-align: center !important;
  }
  
  .text-md-left {
    text-align: left !important;
  }
  
  .text-md-right {
    text-align: right !important;
  }
}

@media (max-width: 576px) {
  .text-xs-center {
    text-align: center !important;
  }
  
  .text-xs-left {
    text-align: left !important;
  }
  
  .text-xs-right {
    text-align: right !important;
  }
}

/* ===== AGGIUNTE PER NUOVA HERO ===== */
/* Aggiungi queste regole al file mobile.css esistente */

/* NUOVA HERO RESPONSIVE */
@media (max-width: 992px) {
  .event-title {
      font-size: 26px !important;
  }
  
  .event-date,
  .event-location {
      font-size: 18px !important;
  }
  
  .hero-main-text {
      font-size: 22px !important;
  }
  
  .webinar-btn {
      font-size: 15px !important;
      padding: 11px 22px !important;
  }
  
  .new-hero-section {
      align-items: flex-end !important;
      padding: 40px 20px 30px 20px !important;
  }
}

@media (max-width: 768px) {
  .top-black-bar {
      padding: 12px 0 !important;
  }
  
  .primary-color-bar {
      padding: 18px !important;
  }
  
  .event-title {
      font-size: 24px !important;
      margin-bottom: 10px !important;
      letter-spacing: 0.5px !important;
  }
  
  .event-date,
  .event-location {
      font-size: 16px !important;
  }
  
  .hero-main-text {
      font-size: 19px !important;
      margin-bottom: 25px !important;
      line-height: 1.3 !important;
  }
  
  .google-rating {
      margin-bottom: 25px !important;
      gap: 8px !important;
  }
  
  .google-logo {
      height: 20px !important;
  }
  
  .rating-number {
      font-size: 16px !important;
  }
  
  .stars i {
      font-size: 15px !important;
  }
  
  .webinar-btn {
      font-size: 15px !important;
      padding: 12px 24px !important;
      gap: 8px !important;
      min-width: 280px !important;
  }
  
  .webinar-btn i {
      font-size: 13px !important;
      padding: 4px !important;
  }
  
  .new-hero-section {
      padding: 30px 15px 30px 15px !important;
      min-height: 60vh !important;
      align-items: flex-end !important;
  }
}

@media (max-width: 576px) {
  .primary-color-bar {
      padding: 15px 10px !important;
  }
  
  .event-info {
      padding: 0 10px !important;
  }
  
  .event-title {
      font-size: 20px !important;
      line-height: 1.2 !important;
      margin-bottom: 8px !important;
  }
  
  .event-date,
  .event-location {
      font-size: 14px !important;
  }
  
  .hero-main-text {
      font-size: 16px !important;
      margin-bottom: 20px !important;
      line-height: 1.2 !important;
  }
  
  .hero-content {
      padding: 0 10px !important;
  }
  
  .google-rating {
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 6px !important;
      margin: 0 auto 20px !important;
      max-width: 280px !important;
  }
  
  .google-logo {
      height: 18px !important;
  }
  
  .rating-number {
      font-size: 14px !important;
  }
  
  .stars i {
      font-size: 13px !important;
  }
  
  .webinar-btn {
      width: 90% !important;
      max-width: 300px !important;
      justify-content: center !important;
      text-align: center !important;
      font-size: 14px !important;
      padding: 10px 20px !important;
      gap: 6px !important;
      margin: 0 auto !important;
  }
  
  .webinar-btn span {
      flex: 1 !important;
      text-align: center !important;
  }
  
  .webinar-btn i {
      font-size: 12px !important;
      padding: 3px !important;
  }
  
  .new-hero-section {
      padding: 25px 10px 25px 10px !important;
      min-height: 55vh !important;
  }
}

/* ===== PRICE SECTION MOBILE ===== */
/* Aggiungi al file mobile.css esistente */

@media (max-width: 992px) {
  .price-info-card {
      max-width: 500px;
      padding: 35px 30px;
  }
  
  .event-big-date,
  .event-year {
      font-size: 40px;
  }
}

@media (max-width: 768px) {
  .price-container.p-mobile {
      padding: 32px 16px !important;
  }
  
  .price-info-card {
      margin: 0 auto;
  }
  
  .price-guarantee-section {
      margin-bottom: 25px;
  }
}

@media (max-width: 576px) {
  .price-container.p-mobile {
      padding: 24px 12px !important;
  }
  
  .price-card-header {
      margin-bottom: 25px;
  }
  
  .price-card-date {
      margin-bottom: 25px;
      padding-bottom: 20px;
  }
  
  .price-benefits-list {
      margin-bottom: 25px;
  }
}