/* =====================================================
   TVS MARKETING — RESPONSIVO
   Arquivo: css/responsive.css
   Ajustes para tablet, celular e desktop pequeno.
   ===================================================== */

/* ============================================
   DESKTOP MENOR (até 1180px)
   ============================================ */
@media (max-width: 1180px) {
  .nav-list { gap: 20px; }
  .nav-list a { font-size: 12.5px; }

  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .services-grid .service-card:first-child { grid-column: span 1; }

  .plans-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .plan-card--featured { transform: translateY(0); }
  .plan-card--featured:hover { transform: translateY(-8px); }

  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }

  .footer-grid > :nth-child(4) {
    grid-column: 1 / -1;
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid var(--color-navy-line);
  }
}

/* ============================================
   TABLET (até 960px)
   ============================================ */
@media (max-width: 960px) {
  :root {
    --header-h: 80px;
    --header-h-sm: 64px;
  }

  /* Esconde menu desktop, exibe toggle */
  .nav { display: none; }
  .header-cta { display: none; }
  .menu-toggle { display: inline-block; }

  /* HERO em coluna única */
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .hero-visual {
    aspect-ratio: 16 / 11;
    max-width: 600px;
  }

  .hero-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
  }

  .hero-stat:nth-child(3)::before { display: none; }
  .hero-stat:nth-child(3) {
    border-top: 1px solid var(--color-line);
    padding-top: 30px;
    margin-top: 10px;
  }
  .hero-stat:nth-child(4) {
    border-top: 1px solid var(--color-line);
    padding-top: 30px;
    margin-top: 10px;
  }

  /* Seções gerais */
  .section-head {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .problems-grid,
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* SOBRE — no celular/tablet: 1 coluna, esconde a foto lateral e usa a
     assinatura compacta (foto + logo, nome embaixo, brilho no canto). */
  .about-grid { grid-template-columns: 1fr; }
  .about-image-col { display: none; }
  .about-figure { display: flex; }

  .featured-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .process-step {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .process-step__num { font-size: 80px; }

  .plans-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-inline: auto;
  }

  .compare-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .compare-vs { display: none; }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-block:nth-child(3)::before,
  .stat-block:nth-child(4)::before { display: none; }

  .stat-block:nth-child(3),
  .stat-block:nth-child(4) {
    border-top: 1px solid var(--color-line);
  }

  .testimonials-grid {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin-inline: auto;
  }

  .blog-grid {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin-inline: auto;
  }

  .faq-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .footer-cta {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .footer-cta__action { justify-content: flex-start; }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-grid > :nth-child(4) {
    grid-column: 1 / -1;
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid var(--color-navy-line);
  }
}

/* ============================================
   CELULAR (até 640px)
   ============================================ */
@media (max-width: 640px) {
  .problems-grid,
  .services-grid,
  .portfolio-grid {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: auto;
    padding-block: calc(var(--header-h) + 40px) 60px;
  }

  /* SOBRE — texto + assinatura (foto pequena + logo ao lado) no celular */
  .about-content .section-title { font-size: clamp(24px, 6.5vw, 32px); margin-bottom: 20px; }
  .about-body p { font-size: 15px; line-height: 1.6; }
  .about-meta { margin-top: 26px; padding-top: 22px; gap: 16px; }
  .about-meta__value { font-size: 15px; }
  .about-body--editorial .drop-cap { font-size: 44px; padding-right: 6px; }
  .about-figure__row { gap: 22px; }
  .about-figure__photo { width: clamp(120px, 34vw, 150px); }
  .about-figure__logo { height: clamp(54px, 15vw, 70px); }

  .hero-title { line-height: 1; }

  .hero-stats {
    grid-template-columns: 1fr 1fr;
  }

  .hero-stat:nth-child(2)::before,
  .hero-stat:nth-child(4)::before { display: none; }

  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .footer-bottom__links { gap: 18px; }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .stat-block:not(:first-child)::before { display: none; }

  .stat-block:not(:first-child) {
    border-top: 1px solid var(--color-line);
  }

  /* Chatbot ocupa quase tela inteira no mobile */
  .chatbot-window {
    right: 12px;
    left: 12px;
    width: auto;
    bottom: 96px;
    height: 70vh;
  }

  .float-whatsapp {
    right: 16px;
    bottom: 16px;
  }

  .float-whatsapp__btn {
    width: 56px;
    height: 56px;
  }

  .float-whatsapp__btn svg { width: 26px; height: 26px; }

  .chatbot-toggle {
    width: 48px;
    height: 48px;
  }

  /* Botões mobile: full-width quando empilhados */
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { justify-content: center; }

  .featured-ctas { flex-direction: column; align-items: stretch; }
  .featured-ctas .btn { justify-content: center; }

  .form-submit { flex-direction: column; }
  .form-submit .btn { justify-content: center; }

  .thankyou__ctas { flex-direction: column; align-items: stretch; max-width: 320px; margin-inline: auto; }
  .thankyou__ctas .btn { justify-content: center; }

  /* Reduzir paddings em seções */
  .portfolio-modal { padding: 14px; }
  .portfolio-modal__inner { max-height: 90vh; }

  /* Logo simplificado */
  .logo-word { display: none; }
  .logo-divider { display: none; }
}

/* ============================================
   CELULAR PEQUENO (até 400px)
   ============================================ */
@media (max-width: 400px) {
  :root {
    --container-pad: 20px;
  }

  .hero-eyebrow::before { width: 28px; }
  .hero-monogram { font-size: 280px; right: -8vw; }

  .section-title { letter-spacing: -0.01em; }

  .problem-card,
  .service-card,
  .plan-card,
  .testimonial { padding: 32px 24px; }

  .stat-block { padding: 30px 18px; }

  .footer-monogram { font-size: 260px; }
}

/* ============================================
   TELAS GRANDES (acima de 1600px)
   ============================================ */
@media (min-width: 1600px) {
  :root {
    --fs-hero: 134px;
  }

  .hero-monogram { font-size: 620px; }
}

/* ============================================
   PRINT (impressão básica)
   ============================================ */
@media print {
  .site-header,
  .float-whatsapp,
  .chatbot-window,
  .chatbot-toggle,
  .mobile-menu,
  .portfolio-filters,
  .preloader,
  .cookie,
  .scroll-progress,
  .scroll-top,
  .custom-cursor,
  .marquee { display: none !important; }

  body { background: white; color: black; }
  .section--dark,
  .section--darker { background: white !important; color: black !important; }
}

/* =====================================================
   V2 — RESPONSIVO PARA NOVOS COMPONENTES
   ===================================================== */

@media (max-width: 1180px) {
  /* Stats V2 — colapsa parcialmente */
  .stats-v2 { grid-template-columns: repeat(6, 1fr); }
  .stat-v2--lg { grid-column: span 6; }
  .stat-v2--md { grid-column: span 3; }
  .stat-v2--sm { grid-column: span 3; }

  /* Floater do hero — encolhe */
  .hero-floater { padding: 14px 16px; }
  .hero-floater__title { font-size: 13px; }

  /* Testimonial featured */
  .testimonial-feature {
    grid-template-columns: 60px 1fr;
    text-align: left;
  }
  .testimonial-feature__author {
    grid-column: 1 / -1;
    border-left: 0;
    border-top: 1px solid var(--color-line-dark);
    padding-left: 0;
    padding-top: 24px;
    text-align: left;
  }
  .section--dark .testimonial-feature__author,
  .section--darker .testimonial-feature__author { border-top-color: var(--color-navy-line); }
}

@media (max-width: 960px) {
  /* Marquee fica menor */
  .marquee__item { font-size: clamp(24px, 5vw, 36px); gap: clamp(28px, 4vw, 50px); }
  .marquee { padding: 18px 0; }

  /* Princípios viram 1 coluna (cards) */
  .principles { grid-template-columns: 1fr; gap: 16px; }

  /* Hero floater absolute pode atrapalhar */
  .hero-floater {
    position: relative;
    right: auto;
    bottom: auto;
    margin-top: 18px;
    animation: none;
  }

  /* Stats V2 */
  .stats-v2 { grid-template-columns: 1fr 1fr; }
  .stat-v2--lg,
  .stat-v2--md,
  .stat-v2--sm { grid-column: span 1; }

  /* Newsletter footer */
  .footer-newsletter { flex-direction: column; align-items: stretch; }
  .footer-newsletter__form { flex: 1 1 auto; }

  /* Cookie banner */
  .cookie { right: 16px; left: 16px; bottom: 16px; padding: 22px 22px 20px; }

  /* Scroll cue */
  .hero-scroll-cue { display: none; }
}

@media (max-width: 640px) {
  /* Stats V2 — full width */
  .stats-v2 { grid-template-columns: 1fr; gap: 16px; }

  /* Drop cap menor */
  .about-body--editorial .drop-cap { font-size: 64px; padding-right: 10px; }

  /* Newsletter form */
  .footer-newsletter__form { flex-direction: column; }
  .footer-newsletter__form button { width: 100%; }

  /* Cookie actions */
  .cookie__actions { flex-direction: column; }
  .cookie__btn { width: 100%; text-align: center; }

  /* Hero browser */
  .hero-browser__metrics { grid-template-columns: 1fr 1fr; }
  .hero-browser__metrics .hero-browser__metric:nth-child(3) { display: none; }

  /* Featured testimonial */
  .testimonial-feature {
    grid-template-columns: 1fr;
    padding: 36px 28px;
  }
  .testimonial-feature__mark { font-size: 80px; }

  /* Scroll top — fica ao lado do whatsapp */
  .scroll-top {
    left: auto;
    right: 16px;
    bottom: 90px;
    width: 42px;
    height: 42px;
  }
}

/* Reduce motion: marquee e floater param de animar */
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .hero-floater { animation: none; }
  .preloader__mark span { transform: translateY(0); animation: none; }
  .preloader__line { animation: none; width: 220px; }
  .preloader__sub { animation: none; opacity: 1; }
}

/* =====================================================
   RESPONSIVO — NOVOS BLOCOS (convergência com o documento)
   ===================================================== */
@media (max-width: 1180px) {
  .budget-grid { grid-template-columns: repeat(3, 1fr); }
  .warranty-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 960px) {
  .gmn-grid { grid-template-columns: 1fr; }

  .ownership-card {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 36px;
  }
  .ownership-card__lede { margin-inline: auto; }
  .ownership-card__list {
    display: inline-grid;
    text-align: left;
    justify-self: center;
  }
  .ownership-card__seal { order: -1; }

  .budget-grid { grid-template-columns: repeat(3, 1fr); }
  .warranty-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .budget-grid { grid-template-columns: 1fr 1fr; }

  .warranty-grid {
    grid-template-columns: 1fr;
    max-width: 460px;
    margin-inline: auto;
  }

  .plan-card__term { gap: 10px; }
}

@media (max-width: 400px) {
  .budget-grid { grid-template-columns: 1fr; }
}