/* =====================================================================
   PLENIMAX HOLDING — MOBILE.CSS
   Folha de estilo exclusiva para ecrãs até 900px.
   Não altera nada do desktop — só entra em ação dentro do media query.
   Reconstrói do zero: cabeçalho/menu, hero, grids e secções problemáticas.
   ===================================================================== */

@media screen and (max-width: 900px) {

  /* ---------- rede de segurança contra scroll horizontal ---------- */
  html, body{
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
  }
  * { min-width: 0; }
  .container{
    padding: 0 20px !important;
    max-width: 100% !important;
  }

  /* ---------- CULPADO DO SCROLL HORIZONTAL ----------
     .about-visual tinha width:500px / height:500px fixos.
     Em qualquer ecrã com menos de ~540px isto empurrava a página
     para o lado, criando a barra de scroll horizontal. */
  .about-visual{
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4/5 !important;
    max-width: 100% !important;
  }

  /* qualquer decoração de fundo (chamas SVG) não pode ultrapassar o ecrã */
  .hero-flame-bg,
  .services-flame-mark,
  .contact-flame-bg{
    max-width: 60vw !important;
    width: 60vw !important;
  }

  img, svg{ max-width: 100%; height: auto; }

  /* =====================================================
     CABEÇALHO + MENU MOBILE (reconstruído do zero)
     Mantém os IDs/classes usados pelo JS: #menuToggle, #navMenu,
     nav-menu.active — só muda a aparência.
     ===================================================== */
  .site-header{
    height: 72px;
  }
  .header-inner{
    height: 72px;
    gap: 12px;
  }
  .brand img{ width: 34px; height: 34px; }
  .brand-word{ font-size: 1.05rem; }
  .brand-word small{ font-size: 0.5rem; }

  .header-actions .header-phone{ display: none !important; }
  .header-actions .btn-gold{ display: none !important; }

  .menu-toggle{
    display: flex !important;
    position: static !important;
    margin: 0 !important;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    margin-left: auto !important;
  }

  /* painel deslizante a partir da direita */
  .nav-menu{
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: 0 !important;
    width: min(82vw, 340px) !important;
    height: 100vh !important;
    margin: 0 !important;
    background: var(--ink) !important;
    border-left: 1px solid var(--hairline);
    border-bottom: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    padding: 96px 28px 28px !important;
    gap: 0 !important;
    box-shadow: -18px 0 40px -12px rgba(0,0,0,0.55);
    transform: translateX(100%) !important;
    opacity: 1 !important;
    pointer-events: none;
    transition: transform .32s var(--ease) !important;
    z-index: 150;
  }
  /* nota: não usamos ::before para o fundo escurecido porque
     .nav-menu tem "transform", o que criaria um novo containing
     block e quebraria um filho position:fixed. Compensa-se com
     uma sombra ampla (box-shadow) que escurece visualmente toda
     a área à volta do painel quando está aberto. */
  .nav-menu.active{
    transform: translateX(0) !important;
    pointer-events: auto;
    box-shadow: -100vw 0 0 100vw rgba(0,0,0,0.55);
  }

  .nav-link{
    width: 100% !important;
    padding: 16px 0 !important;
    font-size: 1rem !important;
    border-bottom: 1px solid var(--hairline-soft) !important;
  }
  .nav-cta-mobile{
    display: inline-flex !important;
    width: 100% !important;
    margin-top: 20px !important;
    justify-content: center;
  }

  /* =====================================================
     HERO
     ===================================================== */
  .hero{
    padding: 108px 0 64px !important;
  }
  .hero-inner{
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .hero h1{
    font-size: 2.05rem !important;
    max-width: 100% !important;
    margin-bottom: 18px !important;
  }
  .hero p.lede{
    font-size: 1rem !important;
    max-width: 100% !important;
    margin-bottom: 28px !important;
  }
  .hero-ctas{
    flex-direction: column !important;
    gap: 12px !important;
    margin-bottom: 36px !important;
  }
  .hero-ctas .btn{ width: 100%; }
  .hero-stats{
    flex-wrap: wrap !important;
    gap: 24px !important;
  }
  .hero-stat{ width: 100%; }
  .hero-stat .label{ max-width: 100% !important; }

  /* o cartão lateral tinha um transform inline que o empurrava
     para fora do ecrã em mobile — anulamos com !important */
  .hero-panel{
    transform: none !important;
    margin-top: 0 !important;
    max-width: 100% !important;
    padding: 28px 24px !important;
  }
  .hero-panel h3{ font-size: 1.2rem !important; }

  /* =====================================================
     MARQUEE
     ===================================================== */
  .marquee-item{ font-size: 0.72rem !important; gap: 8px !important; }

  /* =====================================================
     ABOUT
     ===================================================== */
  .about{ padding: 72px 0 !important; }
  .about-grid{
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    margin: 0 !important;
  }
  .about-body p{ max-width: 100% !important; }
  .pillars-row{
    grid-template-columns: 1fr !important;
    margin-top: 28px !important;
  }
  .pillar-cell{ padding: 20px 18px !important; }

  /* =====================================================
     SERVICES
     ===================================================== */
  .services{ padding: 72px 0 !important; }
  .services-head{
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 36px !important;
  }
  .service-row{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 28px 0 !important;
  }
  .service-index{ display: none !important; }
  .service-heading h3{ font-size: 1.3rem !important; }
  .service-body p{ max-width: 100% !important; }

  /* =====================================================
     PROCESS
     ===================================================== */
  .process{ padding: 72px 0 !important; }
  .process-grid{
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    margin-top: 36px !important;
  }
  .process-step{ padding: 0 !important; }
  .process-step::after,
  .process-step:not(:last-child)::after{ display: none !important; }

  /* =====================================================
     DIFFERENTIATORS
     ===================================================== */
  .diff{ padding: 72px 0 !important; }
  .diff-grid{
    grid-template-columns: 1fr !important;
    margin-top: 36px !important;
  }
  .diff-cell{ padding: 26px 22px !important; }

  /* =====================================================
     NUMBERS BAND
     ===================================================== */
  .numbers{ padding: 48px 0 !important; }
  .numbers-grid{
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
  }
  .number-item{ padding-left: 16px !important; }
  .number-item .big{ font-size: 2rem !important; }
  .number-item .cap{ max-width: 100% !important; }

  /* =====================================================
     TESTIMONIALS
     ===================================================== */
  .testimonials{ padding: 72px 0 !important; }
  .testi-grid{
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    margin-top: 36px !important;
  }
  .testi-card{ padding: 26px 22px !important; }

  /* =====================================================
     FAQ
     ===================================================== */
  .faq{ padding: 72px 0 !important; }
  .faq-layout{
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .faq-answer-inner{ max-width: 100% !important; }
  .faq-question{ font-size: 0.96rem !important; padding: 18px 0 !important; }

  /* =====================================================
     CONTACT
     ===================================================== */
  .contact{ padding: 72px 0 !important; }
  .contact-grid{
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .contact-info-col h2{ font-size: 1.85rem !important; }
  .contact-info-col p.lede{ max-width: 100% !important; margin-bottom: 28px !important; }
  .contact-form-card{ padding: 26px 20px !important; }
  .form-row{
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  /* =====================================================
     FOOTER
     ===================================================== */
  .footer{ padding: 48px 0 20px !important; }
  .footer-top{
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding-bottom: 32px !important;
  }
  .footer-brand p{ max-width: 100% !important; }
  .footer-bottom{
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  .footer-legal{ flex-wrap: wrap; gap: 16px !important; }

  /* =====================================================
     BOTÃO VOLTAR AO TOPO
     ===================================================== */
  .back-top{
    bottom: 18px !important;
    right: 18px !important;
    width: 44px !important;
    height: 44px !important;
  }

  /* =====================================================
     SECTION HEAD genérico
     ===================================================== */
  .section-head{ max-width: 100% !important; margin-bottom: 40px !important; }
  .section-title{ font-size: 1.65rem !important; }
  .section-lede{ max-width: 100% !important; }
}

/* Telemóveis muito estreitos (≤ 380px) — ajustes finos extra */
@media screen and (max-width: 380px){
  .hero h1{ font-size: 1.75rem !important; }
  .container{ padding: 0 16px !important; }
  .nav-menu{ width: 88vw !important; padding: 88px 20px 24px !important; }
}