/* ========================================
   MOBILE FIRST OVERLAY
   
   Este arquivo complementa o styles.css mantendo
   o design desktop intacto e otimizando para mobile.
   
   IMPORTANTE: Carregar DEPOIS de styles.css no HTML:
   <link rel="stylesheet" href="css/styles.css">
   <link rel="stylesheet" href="css/styles_mobile_first.css">
======================================== */

/* ========================================
   OTIMIZAÇÕES MOBILE (≤480px)
======================================== */

@media (max-width: 480px) {
  /* Base: Fonte confortável 16px */
  body {
    font-size: 16px !important;
    line-height: 1.6;
  }

  /* Container: Padding reduzido */
  .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  section {
    padding: 48px 0 !important;
  }

  /* ====================================
     TIPOGRAFIA MOBILE
  ==================================== */

  .section-title {
    font-size: 1.75rem !important; /* 28px */
    line-height: 1.3 !important;
    margin-bottom: 24px !important;
  }

  .section-description {
    font-size: 1.125rem !important; /* 18px */
    line-height: 1.5 !important;
    margin-bottom: 32px !important;
  }

  /* ====================================
     BOTÕES: Touch Friendly (48px)
  ==================================== */

  .cta-button,
  .cta-button-small,
  .cta-button-large,
  .btn-primario,
  .btn-secundario {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px !important;
    padding: 16px 24px !important;
    font-size: 1.0625rem !important; /* 17px */
    margin: 24px auto !important;
  }

  /* ====================================
     HERO SECTION
  ==================================== */

  .hero-title {
    font-size: 1.5rem !important; /* 24px */
    line-height: 1.4 !important;
    margin-bottom: 32px !important;
  }

  .hero-badges {
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .badge {
    width: 100% !important;
    min-height: 48px !important;
    padding: 12px 20px !important;
  }

  .badge-text {
    font-size: 0.9375rem !important; /* 15px */
  }

  .promo-text {
    font-size: 0.875rem !important; /* 14px */
  }

  .promo-subtext {
    font-size: 0.75rem !important; /* 12px */
  }

  /* ====================================
     CARROSSEL
  ==================================== */

  .carousel-slide {
    min-width: 100% !important;
  }

  .carousel-slide img {
    height: 350px !important;
  }

  .carousel-btn {
    display: none !important;
  }

  .dot {
    width: 10px !important;
    height: 10px !important;
    min-height: 10px !important;
    min-width: 10px !important;
  }

  .dot.active {
    width: 24px !important;
  }

  /* ====================================
     COPY SECTION
  ==================================== */

  .copy-section {
    padding: 48px 20px !important;
  }

  .copy-headline {
    font-size: 1.75rem !important; /* 28px */
    line-height: 1.3 !important;
    margin-bottom: 32px !important;
  }

  .copy-text-short {
    font-size: 1.125rem !important; /* 18px */
  }

  .copy-text {
    font-size: 1.125rem !important; /* 18px */
    line-height: 1.6 !important;
    margin-bottom: 16px !important;
  }

  .copy-text-emphasis {
    font-size: 1.0625rem !important; /* 17px */
  }

  .copy-text-big {
    font-size: 1.25rem !important; /* 20px */
    line-height: 1.4 !important;
  }

  .copy-statement {
    font-size: 1.5rem !important; /* 24px */
    line-height: 1.3 !important;
    margin-bottom: 16px !important;
  }

  .copy-subtitle {
    font-size: 1.25rem !important; /* 20px */
  }

  .copy-list li {
    font-size: 1.0625rem !important; /* 17px */
    line-height: 1.5 !important;
    margin-bottom: 12px !important;
  }

  .copy-list-clean li {
    font-size: 1.0625rem !important; /* 17px */
    text-align: center !important;
  }

  .copy-confronto {
    margin: 48px 0 !important;
    padding-left: 16px !important;
  }

  .copy-solucao {
    padding: 32px !important;
    margin: 48px 0 !important;
  }

  .copy-title-destaque {
    font-size: 1.75rem !important; /* 28px */
    margin-bottom: 24px !important;
  }

  .copy-posicionamento {
    padding: 32px 20px !important;
    margin: 48px 0 !important;
  }

  .copy-question {
    font-size: 1.25rem !important; /* 20px */
    line-height: 1.4 !important;
  }

  .copy-microtexto {
    font-size: 0.875rem !important; /* 14px */
  }

  /* Value Breakdown Mobile */
  .value-breakdown {
    padding: 32px 20px !important;
    margin: 32px auto !important;
    width: 100% !important;
  }

  .value-title {
    font-size: 1.25rem !important; /* 20px */
    line-height: 1.3 !important;
    margin-bottom: 32px !important;
  }

  .value-items {
    gap: 12px !important;
    margin-bottom: 24px !important;
  }

  .value-item {
    flex-direction: column !important;
    gap: 12px !important;
    padding: 16px !important;
  }

  .value-name {
    font-size: 1.0625rem !important; /* 17px */
  }

  .value-desc {
    font-size: 0.875rem !important; /* 14px */
  }

  .value-price {
    font-size: 1.0625rem !important; /* 17px */
  }

  .value-total {
    flex-direction: column !important;
    gap: 8px !important;
    padding: 16px !important;
    margin-bottom: 24px !important;
  }

  .value-total-label {
    font-size: 1.0625rem !important; /* 17px */
  }

  .value-total-amount {
    font-size: 2rem !important; /* 32px */
  }

  .value-offer {
    padding: 24px !important;
    margin-bottom: 24px !important;
  }

  .value-offer-label {
    font-size: 0.875rem !important; /* 14px */
  }

  .value-offer-price {
    font-size: 3rem !important; /* 48px */
  }

  .value-offer-installments {
    font-size: 1.0625rem !important; /* 17px */
  }

  /* ====================================
     PROMISE ANCHOR
  ==================================== */

  .promise-text {
    font-size: 1.125rem !important; /* 18px */
    line-height: 1.4 !important;
  }

  .promise-text-highlight {
    font-size: 1.25rem !important; /* 20px */
    line-height: 1.3 !important;
  }

  .promise-points {
    flex-direction: column !important;
    gap: 12px !important;
  }

  .promise-points p {
    font-size: 1.0625rem !important; /* 17px */
  }

  /* ====================================
     MÓDULOS
  ==================================== */

  .modules-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .module-card {
    padding: 24px !important;
  }

  .module-icon {
    height: 100px !important;
    padding: 12px !important;
    margin-bottom: 16px !important;
  }

  .module-title {
    font-size: 1.125rem !important; /* 18px */
    line-height: 1.3 !important;
    margin-bottom: 12px !important;
  }

  .module-description {
    font-size: 0.9375rem !important; /* 15px */
    line-height: 1.5 !important;
  }

  /* ====================================
     BÔNUS
  ==================================== */

  .bonus-title {
    font-size: 1.75rem !important; /* 28px */
    margin-bottom: 12px !important;
  }

  .bonus-subtitle {
    font-size: 1.0625rem !important; /* 17px */
    margin-bottom: 32px !important;
  }

  .bonus-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .bonus-card {
    padding: 32px 24px !important;
  }

  .bonus-badge {
    right: 24px !important;
    font-size: 0.6875rem !important; /* 11px */
  }

  .bonus-icon {
    height: 100px !important;
    padding: 12px !important;
    margin-bottom: 24px !important;
  }

  .bonus-card-title {
    font-size: 1.125rem !important; /* 18px */
    line-height: 1.3 !important;
  }

  .bonus-card-description {
    font-size: 0.9375rem !important; /* 15px */
    line-height: 1.5 !important;
  }

  /* ====================================
     PROMOÇÃO
  ==================================== */

  .promo-title {
    font-size: 1.75rem !important; /* 28px */
  }

  .promo-subtitle {
    font-size: 1.0625rem !important; /* 17px */
  }

  .promo-block-title {
    font-size: 1.5rem !important; /* 24px */
  }

  .promo-block-subtitle {
    font-size: 1.0625rem !important; /* 17px */
    line-height: 1.5 !important;
  }

  /* Faixas empilhadas no mobile */
  .promo-strip,
  .promo-strip-right {
    flex-direction: column !important;
    margin-bottom: 24px !important;
  }

  .promo-strip-visual {
    order: -1 !important;
    padding: 32px !important;
  }

  .promo-strip-number {
    font-size: 4rem !important; /* 64px */
  }

  .promo-strip-content {
    padding: 32px 20px !important;
  }

  .promo-strip-title {
    font-size: 1.25rem !important; /* 20px */
    line-height: 1.3 !important;
  }

  .promo-strip-description {
    font-size: 1.0625rem !important; /* 17px */
    line-height: 1.5 !important;
  }

  .promo-strip-list li {
    font-size: 0.9375rem !important; /* 15px */
    line-height: 1.5 !important;
  }

  .promo-block-footer {
    font-size: 1.0625rem !important; /* 17px */
    margin-top: 32px !important;
    padding-top: 24px !important;
  }

  /* Certificado */
  .promo-certificate {
    padding: 32px !important;
  }

  .certificate-icon {
    padding: 16px !important;
    margin-bottom: 24px !important;
  }

  .certificate-title {
    font-size: 1.5rem !important; /* 24px */
  }

  .certificate-description {
    font-size: 1.0625rem !important; /* 17px */
    line-height: 1.5 !important;
  }

  /* ====================================
     BENEFÍCIOS
  ==================================== */

  .benefits-list {
    flex-direction: column !important;
    gap: 24px !important;
  }

  .benefit-item {
    flex-direction: column !important;
    padding: 24px !important;
  }

  .benefit-number {
    font-size: 2.5rem !important; /* 40px */
    margin-bottom: 12px !important;
  }

  .benefit-content h3 {
    font-size: 1.25rem !important; /* 20px */
    margin-bottom: 8px !important;
  }

  .benefit-content p {
    font-size: 1.0625rem !important; /* 17px */
    line-height: 1.5 !important;
  }

  /* ====================================
     CTA FINAL
  ==================================== */

  .cta-subtitle {
    font-size: 1.0625rem !important; /* 17px */
    line-height: 1.5 !important;
  }

  .price-box {
    padding: 24px !important;
    margin: 24px auto !important;
  }

  .price-before {
    font-size: 1.0625rem !important; /* 17px */
  }

  .price-current {
    font-size: 2rem !important; /* 32px */
  }

  .price-installments {
    font-size: 1.0625rem !important; /* 17px */
  }

  .security-badges {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .security-badges p {
    font-size: 0.9375rem !important; /* 15px */
  }

  /* ====================================
     GARANTIA
  ==================================== */

  .guarantee-seal {
    max-width: 120px !important;
  }

  .guarantee-content h2 {
    font-size: 1.5rem !important; /* 24px */
    line-height: 1.3 !important;
  }

  .guarantee-content p {
    font-size: 1.0625rem !important; /* 17px */
    line-height: 1.5 !important;
  }

  /* ====================================
     QUEM SOU EU
  ==================================== */

  .about-me-content {
    flex-direction: column !important;
    gap: 32px !important;
  }

  .about-me-image {
    position: static !important;
  }

  .about-me-image img {
    max-width: 350px !important;
    margin: 0 auto !important;
  }

  .about-me-name {
    font-size: 1.75rem !important; /* 28px */
  }

  .about-me-subtitle {
    font-size: 0.9375rem !important; /* 15px */
  }

  .about-me-greeting {
    font-size: 1.125rem !important; /* 18px */
  }

  .about-me-story,
  .about-me-cta-text,
  .about-me-credentials li {
    font-size: 1.0625rem !important; /* 17px */
    line-height: 1.6 !important;
  }

  .about-me-cta-box {
    padding: 16px !important;
  }

  .about-me-credentials {
    padding: 24px !important;
  }

  /* ====================================
     FAQ
  ==================================== */

  .faq-subtitle {
    font-size: 1.0625rem !important; /* 17px */
    line-height: 1.5 !important;
  }

  .faq-question {
    padding: 16px !important;
    font-size: 1.0625rem !important; /* 17px */
    min-height: 48px !important;
    line-height: 1.4 !important;
  }

  .faq-answer p {
    font-size: 0.9375rem !important; /* 15px */
    line-height: 1.6 !important;
  }

  .faq-icon {
    font-size: 1.5rem !important;
    width: 32px !important;
    height: 32px !important;
  }

  /* ====================================
     DEPOIMENTOS
  ==================================== */

  .testimonials-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .testimonial-card {
    padding: 24px !important;
  }

  .testimonial-text {
    font-size: 1.0625rem !important; /* 17px */
    line-height: 1.6 !important;
  }

  .testimonial-author {
    font-size: 0.9375rem !important; /* 15px */
  }

  /* ====================================
     FOOTER
  ==================================== */

  .footer {
    padding: 32px 0 !important;
  }

  .footer p {
    font-size: 0.9375rem !important; /* 15px */
    margin-bottom: 12px !important;
  }

  .footer-links {
    flex-direction: column !important;
    gap: 12px !important;
  }

  .footer-links a {
    font-size: 0.9375rem !important; /* 15px */
    min-height: 48px !important;
    padding: 8px !important;
  }
}