/* ================================================
   MOBILE OPTIMIZATIONS - 320px to 768px ONLY
   Desktop layout remains UNCHANGED
   
   Requirements:
   - Buttons: min-height 44px
   - Text: min 16px (1rem)
   - Touch-friendly spacing
   - Vertically stacked elements
   ================================================ */

/* ===== GLOBAL MOBILE TOUCH TARGETS ===== */
@media (max-width: 768px) {
  /* Ensure all interactive elements have proper touch targets */
  button,
  [role="button"],
  a.btn,
  .touch-target {
    min-height: 44px !important;
  }
  
  /* Base text readability */
  p, li, span, label {
    font-size: 1rem !important;
  }
}

/* ===== HERO ===== */
@media (max-width: 768px) {
  .hero-mobile {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  .hero-mobile h1 {
    font-size: 1.75rem !important;
    line-height: 1.2 !important;
    margin-bottom: 1rem !important;
  }
  
  .hero-mobile .subtitle-primary {
    font-size: 1.125rem !important;
    line-height: 1.4 !important;
    margin-bottom: 0.75rem !important;
  }
  
  .hero-mobile .subtitle-secondary {
    font-size: 1rem !important;
    line-height: 1.5 !important;
    margin-bottom: 1.5rem !important;
  }
  
  .hero-mobile .logo-mobile {
    height: 3.5rem !important;
    margin-bottom: 1.5rem !important;
  }
  
  /* Hero Form Optimizations */
  .hero-mobile .form-card {
    padding: 1.5rem !important;
    margin-top: 2rem !important;
  }
  
  .hero-mobile .form-card h3 {
    font-size: 1.25rem !important;
    margin-bottom: 1rem !important;
  }
  
  .hero-mobile .form-card label {
    font-size: 1rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  .hero-mobile .form-card input,
  .hero-mobile .form-card select,
  .hero-mobile .form-card [role="combobox"] {
    min-height: 48px !important;
    height: 48px !important;
    font-size: 1rem !important;
    padding: 0.75rem 1rem !important;
  }
  
  .hero-mobile .form-card button[type="submit"],
  .hero-mobile .cta-button {
    min-height: 52px !important;
    font-size: 1rem !important;
    padding: 0.875rem 1.5rem !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    text-align: center !important;
  }
  
  .hero-mobile .form-card > div {
    margin-bottom: 1rem !important;
  }
  
  /* Benefits list in hero */
  .hero-mobile .benefits-list li {
    font-size: 1rem !important;
    padding: 0.5rem 0 !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
  }
  
  /* Guarantee badge */
  .hero-mobile .guarantee-badge {
    padding: 0.75rem 1rem !important;
    font-size: 0.875rem !important;
    min-height: 44px !important;
  }
}

/* Extra small devices (320px) */
@media (max-width: 380px) {
  .hero-mobile h1 {
    font-size: 1.5rem !important;
  }
  
  .hero-mobile .form-card {
    padding: 1rem !important;
  }
}

/* ===== TRUSTBAR ===== */
@media (max-width: 768px) {
  .trustbar-mobile {
    padding: 2rem 1rem !important;
  }
  
  .trustbar-mobile .grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.25rem !important;
  }
  
  .trustbar-mobile .stat-item {
    padding: 1rem !important;
    min-height: 80px !important;
  }
  
  .trustbar-mobile .stat-number {
    font-size: 1.5rem !important;
    margin-bottom: 0.25rem !important;
  }
  
  .trustbar-mobile .stat-label {
    font-size: 1rem !important;
    line-height: 1.3 !important;
  }
}

/* ===== PAINPOINTS ===== */
@media (max-width: 768px) {
  .pain-points-mobile {
    padding: 3rem 1rem !important;
  }
  
  .pain-points-mobile h2 {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.75rem !important;
  }
  
  .pain-points-mobile .subtitle {
    font-size: 1rem !important;
    margin-bottom: 2rem !important;
  }
  
  .pain-points-mobile .grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }
  
  .pain-points-mobile .problem-card {
    padding: 1.5rem !important;
  }
  
  .pain-points-mobile .problem-card .icon-wrapper {
    width: 3.5rem !important;
    height: 3.5rem !important;
    margin-bottom: 1rem !important;
  }
  
  .pain-points-mobile .problem-card svg {
    height: 1.5rem !important;
    width: 1.5rem !important;
  }
  
  .pain-points-mobile .problem-card .stat-number {
    font-size: 2rem !important;
  }
  
  .pain-points-mobile .problem-card h3 {
    font-size: 1.125rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  .pain-points-mobile .problem-card p {
    font-size: 1rem !important;
    line-height: 1.5 !important;
  }
  
  .pain-points-mobile .cta-button {
    min-height: 52px !important;
    font-size: 1rem !important;
    padding: 1rem 2rem !important;
    margin-top: 2rem !important;
  }
}

/* ===== SOLUTION ===== */
@media (max-width: 768px) {
  .solution-mobile {
    padding: 3rem 1rem !important;
  }
  
  .solution-mobile h2 {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.75rem !important;
  }
  
  .solution-mobile .subtitle {
    font-size: 1rem !important;
    margin-bottom: 2rem !important;
  }
  
  /* Flow diagram */
  .solution-mobile .flow-diagram {
    flex-direction: column !important;
    gap: 0.75rem !important;
    padding: 1.5rem !important;
    margin-bottom: 2rem !important;
  }
  
  .solution-mobile .flow-item {
    padding: 1rem !important;
    min-height: 60px !important;
    width: 100% !important;
  }
  
  .solution-mobile .flow-item span {
    font-size: 1rem !important;
  }
  
  .solution-mobile .flow-arrow {
    transform: rotate(90deg) !important;
    margin: 0.5rem 0 !important;
  }
  
  /* Feature cards grid */
  .solution-mobile .features-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  .solution-mobile .feature-card {
    padding: 1.25rem !important;
    min-height: 80px !important;
  }
  
  .solution-mobile .feature-card .icon-wrapper {
    width: 3rem !important;
    height: 3rem !important;
    margin-right: 1rem !important;
  }
  
  .solution-mobile .feature-card svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
  }
  
  .solution-mobile .feature-card h3 {
    font-size: 1rem !important;
    margin-bottom: 0.25rem !important;
  }
  
  .solution-mobile .feature-card p {
    font-size: 1rem !important;
    line-height: 1.4 !important;
  }
  
  .solution-mobile .cta-button {
    min-height: 52px !important;
    font-size: 1rem !important;
    padding: 1rem 1.5rem !important;
    margin-top: 2rem !important;
  }
}

/* Extra small: 2 columns for feature cards */
@media (min-width: 481px) and (max-width: 768px) {
  .solution-mobile .features-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ===== TESTIMONIALS ===== */
@media (max-width: 768px) {
  .testimonials-mobile {
    padding: 3rem 1rem !important;
  }
  
  .testimonials-mobile h2 {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
    margin-bottom: 2rem !important;
  }
  
  .testimonials-mobile .grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  
  .testimonials-mobile .testimonial-card {
    padding: 1.5rem !important;
  }
  
  .testimonials-mobile .logo-container {
    height: 3.5rem !important;
    margin-bottom: 1rem !important;
  }
  
  .testimonials-mobile .logo-container img {
    max-height: 2.5rem !important;
  }
  
  .testimonials-mobile .quote-icon {
    height: 1.5rem !important;
    width: 1.5rem !important;
    margin-bottom: 0.75rem !important;
  }
  
  .testimonials-mobile .testimonial-card p {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    margin-bottom: 1rem !important;
  }
  
  .testimonials-mobile .author-name {
    font-size: 1rem !important;
  }
  
  .testimonials-mobile .author-company {
    font-size: 0.875rem !important;
  }
  
  .testimonials-mobile .stars {
    margin-bottom: 0.75rem !important;
  }
  
  .testimonials-mobile .stars svg {
    width: 1rem !important;
    height: 1rem !important;
  }
}

/* ===== PRICING ===== */
@media (max-width: 768px) {
  .pricing-mobile {
    padding: 3rem 1rem !important;
  }
  
  .pricing-mobile h2 {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.75rem !important;
  }
  
  .pricing-mobile .subtitle {
    font-size: 1rem !important;
    margin-bottom: 2rem !important;
  }
  
  .pricing-mobile .grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  
  .pricing-mobile .pricing-card {
    padding: 1.5rem !important;
  }
  
  .pricing-mobile .plan-badge {
    font-size: 0.875rem !important;
    padding: 0.375rem 0.75rem !important;
    margin-bottom: 1rem !important;
  }
  
  .pricing-mobile .price {
    font-size: 2.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  .pricing-mobile .price-period {
    font-size: 1rem !important;
  }
  
  .pricing-mobile .features-list {
    margin-bottom: 1.5rem !important;
  }
  
  .pricing-mobile .features-list li {
    font-size: 1rem !important;
    line-height: 1.5 !important;
    padding: 0.625rem 0 !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
  }
  
  .pricing-mobile .features-list svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
    margin-right: 0.75rem !important;
    flex-shrink: 0 !important;
  }
  
  .pricing-mobile .cta-button {
    min-height: 52px !important;
    font-size: 1rem !important;
    padding: 1rem !important;
    width: 100% !important;
  }
  
  /* Featured card testimonial */
  .pricing-mobile .featured-testimonial {
    font-size: 1rem !important;
    padding: 1rem !important;
    margin-top: 1.5rem !important;
  }
}

/* ===== HOWITWORKS ===== */
@media (max-width: 768px) {
  .how-it-works-mobile {
    padding: 3rem 1rem !important;
  }
  
  .how-it-works-mobile h2 {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.75rem !important;
  }
  
  .how-it-works-mobile .subtitle {
    font-size: 1rem !important;
    margin-bottom: 2rem !important;
  }
  
  .how-it-works-mobile .grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }
  
  /* Hide arrows between cards on mobile */
  .how-it-works-mobile .step-arrow {
    display: none !important;
  }
  
  /* Hide horizontal timeline on mobile */
  .how-it-works-mobile .timeline-horizontal {
    display: none !important;
  }
  
  .how-it-works-mobile .step-card {
    padding: 1.5rem !important;
  }
  
  .how-it-works-mobile .step-number {
    width: 2rem !important;
    height: 2rem !important;
    font-size: 0.875rem !important;
    margin-bottom: 1rem !important;
  }
  
  .how-it-works-mobile .step-card .icon-wrapper {
    width: 3.5rem !important;
    height: 3.5rem !important;
    margin-bottom: 1rem !important;
  }
  
  .how-it-works-mobile .step-card svg {
    height: 1.5rem !important;
    width: 1.5rem !important;
  }
  
  .how-it-works-mobile .step-card h3 {
    font-size: 1.125rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  .how-it-works-mobile .step-card p {
    font-size: 1rem !important;
    line-height: 1.5 !important;
  }
  
  .how-it-works-mobile .timeline-badge {
    font-size: 0.875rem !important;
    padding: 0.5rem 1rem !important;
    min-height: 36px !important;
    margin-top: 1rem !important;
  }
  
  .how-it-works-mobile .cta-button {
    min-height: 52px !important;
    font-size: 1rem !important;
    padding: 1rem 1.5rem !important;
    margin-top: 2rem !important;
  }
}

/* Tablet: 2 columns */
@media (min-width: 481px) and (max-width: 768px) {
  .how-it-works-mobile .grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ===== LGPD COMPLIANCE ===== */
@media (max-width: 768px) {
  .lgpd-mobile {
    padding: 3rem 1rem !important;
  }
  
  .lgpd-mobile h2 {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.75rem !important;
  }
  
  .lgpd-mobile .fine-stat {
    font-size: 2.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  .lgpd-mobile .fine-label {
    font-size: 1rem !important;
    margin-bottom: 2rem !important;
  }
  
  .lgpd-mobile .cards-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  .lgpd-mobile .compliance-card {
    padding: 1.25rem !important;
    min-height: 80px !important;
  }
  
  .lgpd-mobile .compliance-card .icon-wrapper {
    width: 2.5rem !important;
    height: 2.5rem !important;
    margin-right: 1rem !important;
  }
  
  .lgpd-mobile .compliance-card svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
  }
  
  .lgpd-mobile .compliance-card h3 {
    font-size: 1rem !important;
  }
  
  .lgpd-mobile .compliance-card p {
    font-size: 1rem !important;
  }
  
  /* Conformity badge */
  .lgpd-mobile .conformity-badge {
    padding: 1.25rem !important;
    margin: 2rem 0 !important;
  }
  
  .lgpd-mobile .conformity-badge span {
    font-size: 1rem !important;
  }
  
  /* Sector badges */
  .lgpd-mobile .sectors-container {
    gap: 0.75rem !important;
    margin-bottom: 2rem !important;
  }
  
  .lgpd-mobile .sector-badge {
    min-height: 44px !important;
    padding: 0.625rem 1rem !important;
    font-size: 1rem !important;
  }
  
  .lgpd-mobile .cta-button {
    min-height: 52px !important;
    font-size: 1rem !important;
    padding: 1rem 1.5rem !important;
  }
}

/* Tablet: 2 columns for cards */
@media (min-width: 481px) and (max-width: 768px) {
  .lgpd-mobile .cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Extra small */
@media (max-width: 380px) {
  .lgpd-mobile .fine-stat {
    font-size: 2rem !important;
  }
}

/* ===== FAQ ===== */
@media (max-width: 768px) {
  .faq-mobile {
    padding: 3rem 1rem !important;
  }
  
  .faq-mobile h2 {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.75rem !important;
  }
  
  .faq-mobile .subtitle {
    font-size: 1rem !important;
    margin-bottom: 2rem !important;
  }
  
  .faq-mobile .accordion-item {
    margin-bottom: 0.75rem !important;
  }
  
  .faq-mobile .accordion-trigger {
    min-height: 56px !important;
    font-size: 1rem !important;
    padding: 1rem !important;
    text-align: left !important;
    gap: 0.75rem !important;
  }
  
  .faq-mobile .accordion-trigger .number {
    width: 2rem !important;
    height: 2rem !important;
    font-size: 0.875rem !important;
    flex-shrink: 0 !important;
  }
  
  .faq-mobile .accordion-content {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    padding: 1rem !important;
  }
  
  .faq-mobile .accordion-content p,
  .faq-mobile .accordion-content li {
    font-size: 1rem !important;
    line-height: 1.6 !important;
  }
}

/* ===== FINALCTA ===== */
@media (max-width: 768px) {
  .final-cta-mobile {
    padding: 3rem 1rem !important;
  }
  
  .final-cta-mobile .shield-icon {
    width: 4rem !important;
    height: 4rem !important;
    margin-bottom: 1.5rem !important;
  }
  
  .final-cta-mobile h2 {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
    margin-bottom: 1rem !important;
  }
  
  .final-cta-mobile .main-text {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    margin-bottom: 2rem !important;
  }
  
  .final-cta-mobile .cta-button {
    min-height: 56px !important;
    font-size: 1rem !important;
    padding: 1rem 2rem !important;
    margin-bottom: 2rem !important;
  }
  
  .final-cta-mobile .benefits-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }
  
  .final-cta-mobile .benefit-card {
    min-height: 52px !important;
    padding: 1rem 1.25rem !important;
    font-size: 1rem !important;
    display: flex !important;
    align-items: center !important;
  }
  
  .final-cta-mobile .benefit-card svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
    margin-right: 0.75rem !important;
    flex-shrink: 0 !important;
  }
}

/* ===== FOOTER ===== */
@media (max-width: 768px) {
  .footer-mobile {
    padding: 2.5rem 1rem !important;
  }
  
  .footer-mobile .address {
    font-size: 1rem !important;
    line-height: 1.5 !important;
    padding: 0.5rem 0 !important;
  }
  
  .footer-mobile .address svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
    margin-right: 0.5rem !important;
    flex-shrink: 0 !important;
  }
  
  .footer-mobile .separator {
    margin: 1.5rem 0 !important;
  }
  
  .footer-mobile .copyright {
    font-size: 0.875rem !important;
  }
}

/* ===== INCLUDEDSERVICES (Legacy support) ===== */
@media (max-width: 768px) {
  .included-services-mobile {
    padding: 3rem 1rem !important;
  }
  
  .included-services-mobile h2 {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
  }
  
  .included-services-mobile .grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  .included-services-mobile .service-item {
    padding: 1rem !important;
    min-height: 56px !important;
  }
  
  .included-services-mobile .service-item svg {
    height: 1.5rem !important;
    width: 1.5rem !important;
    margin-right: 0.75rem !important;
  }
  
  .included-services-mobile .service-item p {
    font-size: 1rem !important;
  }
  
  .included-services-mobile .final-message {
    font-size: 1.125rem !important;
    padding: 1.5rem !important;
    min-height: 60px !important;
  }
}

/* ===== STATS (Legacy support) ===== */
@media (max-width: 768px) {
  .stats-mobile {
    padding: 3rem 1rem !important;
  }
  
  .stats-mobile h2 {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
  }
  
  .stats-mobile .grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }
  
  .stats-mobile .stat-card {
    padding: 1.25rem 1rem !important;
  }
  
  .stats-mobile .stat-card .number {
    font-size: 1.75rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  .stats-mobile .stat-card .label {
    font-size: 1rem !important;
  }
}

/* ===== CONTACTFORM (Legacy support) ===== */
@media (max-width: 768px) {
  .contact-form-mobile {
    padding: 3rem 1rem !important;
  }
  
  .contact-form-mobile h2 {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
  }
  
  .contact-form-mobile .subtitle {
    font-size: 1rem !important;
  }
  
  .contact-form-mobile input,
  .contact-form-mobile select,
  .contact-form-mobile [role="combobox"] {
    min-height: 48px !important;
    font-size: 1rem !important;
  }
  
  .contact-form-mobile label {
    font-size: 1rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  .contact-form-mobile .submit-button {
    min-height: 52px !important;
    font-size: 1rem !important;
    padding: 1rem !important;
  }
  
  .contact-form-mobile .ps-box {
    font-size: 1rem !important;
    padding: 1rem !important;
  }
  
  .contact-form-mobile form > div {
    margin-bottom: 1.25rem !important;
  }
}