/* ==========================================================================
   layout.css - sistema de largura e margens laterais
   Dash Digital, 15/08/2026. Fase 1 do PLANO-DESKTOP-UX.

   O PROBLEMA. O tema definia .container { max-width: 1518px; padding: 0 15px }.
   O unico espaco lateral que existia era a SOBRA do max-width: acima de 1518px
   sobrava e o conteudo centrava-se; abaixo de 1518px nao sobrava nada e ficavam
   so 15px. Num portatil a 1521px de viewport a margem media era de 15 a 21px.

   A CAUSA. O Figma (DUALINFOR-WEBSITE, node 530:9396) desenhou uma tela de
   1518px com 95px de margem de cada lado, ou seja 1328px de conteudo. Quem
   construiu o tema tomou o 1518 da TELA como largura do CONTEUDO.

   A SOLUCAO. O gutter passa a ser proporcional ao ecra (6.25vw = 95/1518, a
   proporcao exacta do desenho) e o max-width passa a envolver conteudo+gutter.
   1328 + 2x95 = 1518, por isso em monitor grande o resultado e o mesmo de
   antes; o que muda e o portatil, que passa de 15px para 95px de margem.

   ESTE FICHEIRO E CARREGADO EM ULTIMO (prioridade 100 no functions.php), tal
   como o botoes.css. E por isso que vence as folhas de seccao sem precisar de
   !important. Nao apagar CSS antigo enquanto a Fase 2 nao o substituir.

   ABAIXO DE 1024px NAO MUDA NADA: o --gutter volta aos 15px de hoje. O
   telemovel e a Fase 7 e nao e tocado aqui.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Os contentores de conteudo. Lista tirada do inventario do CSS e depois
      confirmada no browser, elemento a elemento, em 9 paginas.
      Nenhum destes tem fundo proprio (verificado), por isso reduzir-lhes a
      largura nao encolhe nenhuma faixa de cor.
   -------------------------------------------------------------------------- */
.container,
.header-container,
.section-container,
.container-principal,
.section-complementary-container,
.section-doubt-container,
.section-doubt-faq-container,
.section-hero-consultadoria-container,
.section-solution-container,
.section-solutions-consultadoria__container,
.section-cards-container,
.section-carrosel-empresas-container,
.section-dark-content,
.se-consultadoria-solutions-carousel__container,
.marketing-container,
.unibind-container,
.error-404-container,
.hero__container,
.contactos-wrapper,
.section-testimonials,
.products-features-section,
.professional-content,
.form-wrapper,
.form-wrapper-contacto {
  width: 100%;
  max-width: calc(var(--conteudo-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   2. As excepcoes: seccoes a largura toda, de proposito.
      Estas TEM fundo proprio (cor ou imagem) e continuam a ocupar o ecra todo.
      So se corrige o espaco interno, para o conteudo nao ficar desalinhado do
      resto da pagina.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {

  /* Ja tem um contentor la dentro com o gutter. O padding proprio somava-se ao
     gutter e empurrava o conteudo para dentro (ex.: 32 + 95 = 127px). */
  .marketing-section,
  .dualinfor-footer,
  .section-hero-consultadoria,
  .se-consultadoria-solutions-carousel,
  .solutions-lexmark-section,
  .equipment-section,
  .services-section,
  .unibind-hero {
    padding-left: 0;
    padding-right: 0;
  }

  /* O hero roxo da assistencia tecnica NAO tem contentor la dentro, por isso e
     ele proprio que tem de trazer o gutter. Sem max-width: a imagem de fundo
     tem de continuar a ocupar o ecra todo. */
  .dualinfor-site {
    padding-inline: max(var(--gutter), (100% - var(--conteudo-max)) / 2);
  }
}

/* --------------------------------------------------------------------------
   3. As grelhas de duas colunas
      Quatro grelhas do tema sao "grid-template-columns: 1fr 1fr". Um item de
      grelha tem min-width:auto por omissao, ou seja NAO encolhe abaixo da
      largura minima do seu conteudo. Com 1518px de conteudo sobrava espaco e
      as colunas ficavam iguais; com 1328px o minimo passou a mandar e as
      colunas ficaram desiguais (na homepage, 600 e 664 em vez de 632 e 632).
      O min-width:0 devolve ao 1fr o poder de encolher.
      Afecta: / (parceiros), /servicos-e-solucoes/ (hero), 8 paginas de
      solucoes, e os formularios de /videovigilancia/ e /digitalizadores/.
   -------------------------------------------------------------------------- */
.partners-content > *,
.final-cta-content > *,
.section-container-solutions > *,
.hero-text-section > *,
.cards-grid > *,
.form-wrapper > *,
.form-wrapper-contacto > * {
  min-width: 0;
}

/* Os logotipos de parceiro tinham max-width:200px fixo. Tres numa linha, mais
   dois intervalos de 32px, davam 664px de largura minima: mais do que a coluna
   passou a ter. Passam a acompanhar a largura da coluna, ate ao mesmo maximo
   de 200px, para nunca ficarem maiores do que estao hoje. */
/* Os cartoes de parceiro passam a grelha regular de 3 colunas.
   Eram tres linhas em flex: as de 3 cartoes davam 189px cada, a de 2 cartoes
   dava 200px cada e desalinhava a segunda coluna em 10px. Com o grid a mandar
   nas tres linhas ao mesmo tempo, os 8 cartoes ficam com a mesma largura e
   nas mesmas 3 colunas, em qualquer ecra. O display:contents faz as .partner-row
   deixarem de contar como caixa, sem mexer no HTML da pagina. */
.partner-logos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.partner-row { display: contents; }
.partner-logo-link { width: 100%; max-width: none; min-width: 0; }
.partner-logos-grid .partner-logo-link img { width: 100%; max-width: 100%; height: auto; display: block; }

/* --------------------------------------------------------------------------
   4. Os dois formularios sao faixas com gradiente
      O .form-wrapper (19 paginas) e o .form-wrapper-contacto (2) tem fundo
      proprio, um gradiente magenta-azul. Sao os UNICOS de toda a lista da
      regra 1 que tem fundo, verificado nas 26 paginas. Por isso voltam a
      ocupar o ecra todo, como antes, e o que se alinha e o conteudo la dentro:
      o max() poe-no no mesmo eixo do resto da pagina, seja qual for o ecra.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .form-wrapper,
  .form-wrapper-contacto {
    max-width: none;
    padding-inline: max(var(--gutter), (100% - var(--conteudo-max)) / 2);
  }
}

/* --------------------------------------------------------------------------
   5. Rede de seguranca das imagens dentro das grelhas da regra 3
      Uma imagem com largura fixa cabia numa coluna de 656px e deixou de caber
      numa de 585px. Passam todas a acompanhar a caixa, mantendo a proporcao.
      O .partners-left img fica de fora: tem width:113% de proposito.
   -------------------------------------------------------------------------- */
.final-cta-image img,
.section-container-solutions img,
.hero-text-section img,
.cards-grid img,
.partners-right img {
  max-width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   6. A pagina /servicos-de-marketing/ tem CSS dentro do proprio PHP
      O pagina-servicos-de-marketing.php traz um bloco <style> no corpo da
      pagina com ".marketing-container { max-width:1518px; padding:0 22px }" e
      mais nove variantes ".mk-* .marketing-container". Um <style> no corpo vem
      DEPOIS de todas as folhas do <head>, por isso ganhava ao layout.css e a
      pagina ficava com 169px de margem em vez de 242px.
      Resolve-se com especificidade, sem tocar no ficheiro da pagina.

      NOTA para quem vier a seguir: as paginas com <style> no PHP sao seis --
      assistenciatecnica, canaldenuncia, contactos, politica-privacidade,
      servicos-de-marketing e single-post. Se uma regra do layout.css nao
      pegar numa pagina, e o primeiro sitio a ir ver.
   -------------------------------------------------------------------------- */
body .marketing-container,
body [class*="mk-"] .marketing-container {
  max-width: calc(var(--conteudo-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
  box-sizing: border-box;
}

/* A /privacidade/ tambem tem CSS no PHP: ".cookies-page .container" com
   max-width de 1120px. NAO se mexe de proposito: uma linha mais curta e o
   correcto para texto legal, e isso e uma decisao de legibilidade, nao um
   erro de implementacao. */

/* ==========================================================================
   7. A ESCALA TIPOGRAFICA -- Fase 3, Dash Digital, 16/08/2026
   --------------------------------------------------------------------------
   O PORQUE. O tema tinha 58 valores distintos de font-size, 8 espacamentos
   entre letras e uma hierarquia invertida: o maior H2 do site tinha 70px
   (.form-left h2, o formulario que aparece em 19 paginas) e os H1 tinham 50.
   Ou seja, em quase todo o site o subtitulo era maior do que o titulo.

   O QUE ISTO FAZ. Manda cada tamanho para um dos sete degraus do :root do
   header.css. Regra unica: H1 >= H2 >= H3, sempre.

   DUAS DECISOES QUE EXPLICAM O RESTO:
   1. So a partir de 1024px. Abaixo disso nao se toca em nada, porque o
      telemovel e a Fase 7 e as media queries do tema continuam a mandar la.
   2. So para baixo. Nenhum titulo fica MAIOR do que era. Aumentar um titulo
      dentro de uma grelha e a maneira mais facil de o fazer transbordar, e a
      Fase 1 ja mostrou que essas grelhas sao fragilissimas.

   ONDE ISTO PODE NAO PEGAR: nas seis paginas com <style> dentro do PHP. Ver
   o ponto 7.8, que trata a /servicos-de-marketing/ com especificidade.
   ========================================================================== */

@media (min-width: 1024px) {

  /* ------------------------------------------------------------------------
     7.1  TITULO DE PAGINA (H1) -> 50px. Era 46 a 54.
     ------------------------------------------------------------------------ */
  .hero h1,
  .hero-content-sobre h1,
  .hero-content-noticias h1,
  .hero-left h1,
  .text-content h1,
  h1.card-title,
  .dualinfor-hero-title,
  .section-hero-consultadoria-title,
  .h1-main,
  .error-404 .page-title {
    font-size: var(--txt-4xl);
    letter-spacing: var(--letra-titulo);
  }

  /* ------------------------------------------------------------------------
     7.2  TITULO DE SECCAO (H2) -> 40px. Era 40, 44.8, 45, 48, 50, 54 e 70.
          O .form-left h2 e o principal: resolve a inversao em 19 paginas.
     ------------------------------------------------------------------------ */
  .form-left h2,
  .recent-articles h2,
  .all-articles h2,
  .solutions-header h2,
  .excellence-text h2,
  .partnerships-text h2,
  .contact-left h2,
  .solutions-intro-right h2,
  .sectors-text h2,
  .why-choose-section h2,
  .cybersecurity-solutions h2,
  .business-header h2,
  .professional-content h2,
  .about-text h2,
  .solutions-text h2,
  .partnership-text h2,
  .blog-header h2,
  .section-header-home h2,
  .solutions-intro h2,
  .section-main-title,
  .partners-right h3,
  .companies-left h3,
  .hero-secundario-text h2,
  .services-header h2,
  .final-cta-text h2,
  .support-text h2,
  .equipment-text h2,
  .process-header h2,
  .why-choose-text h2,
  .dualinfor-hero-subtitle,
  .section-solution-title,
  .section-title,
  .section-testimonials-title,
  .section-two-testimonials-title,
  .section-doubt-title,
  .section-complementary-title,
  .section-carrosel-empresas-title,
  .section-solutions-consultadoria__title,
  .se-consultadoria-solutions-carousel__title,
  .section-heading,
  .bottom-stat h3,
  .h1-sub {
    font-size: var(--txt-3xl);
    letter-spacing: var(--letra-titulo);
  }

  /* ------------------------------------------------------------------------
     7.3  SUB-TITULO E TITULO DE CARTAO (H3) -> 28px. Era 28 a 36.
          Os tres H2 que estao aqui (.innovation-text, .testimonial-left,
          .hero-left h2) sao titulos de sub-seccao, ja estavam a 32 e ficam
          a 28: continuam abaixo do H1 e do H2 de seccao, como deve ser.
     ------------------------------------------------------------------------ */
  .solution-content h3,
  .business-card h3,
  .mvv-content-text h3,
  .innovation-text h2,
  .testimonial-left h2,
  .hero-left h2,
  .text-content h2,
  .section-doubt-faq-question,
  h3.card-title,
  .section-solution-card-title,
  .card-title-solutions,
  .se-consultadoria-solutions-carousel__card-title,
  .equipment-card h3,
  .process-step h3,
  .benefit-item h3,
  .step-item h3,
  .cta-content h3,
  .section-cta-title,
  .section-card-number {
    font-size: var(--txt-2xl);
    letter-spacing: var(--letra-titulo);
  }

  /* ------------------------------------------------------------------------
     7.4  TEXTO DE DESTAQUE (o paragrafo que acompanha um titulo) -> 22px.
          Era 22, 24, 25 e 26. Fluido: a 1366 fica a 20, que e o correcto
          num ecra mais estreito.
     ------------------------------------------------------------------------ */
  .hero p,
  .hero-content-sobre p,
  .hero-description p,
  .hero-secundario-text p,
  .solutions-intro p,
  .solutions-intro-right p,
  .solutions-header p,
  .innovation-text p,
  .blog-header p,
  .blog-link,
  .about-text p,
  .partnership-text p,
  .solutions-text > p,
  .stat-subtext,
  .text-content p,
  .professional-content p,
  .form-left p,
  .card-description,
  .section-description,
  .services-header p,
  .support-text p,
  .dualinfor-hero-description,
  .dualinfor-hero-subtitle + p,
  .section-hero-consultadoria-subtitle,
  .section-solutions-consultadoria__service-title,
  .section-complementary-service-title,
  .section-complementary-cta-text,
  .section-testimonials-author,
  .section-testimonials-quote,
  .section-two-testimonials-author,
  .section-table-header,
  .solution-card h3,
  .solution-item h3,
  .service-card h3,
  .overlay-card h2,
  .article-card h3,
  .feature-content {
    font-size: var(--txt-xl);
  }

  /* ------------------------------------------------------------------------
     7.5  TEXTO SECUNDARIO -> 18px. Era 17, 17.6, 19.2 e 20.
     ------------------------------------------------------------------------ */
  .section-header-home p,
  .section-solution-subtitle,
  .section-subtitle,
  .section-description-features,
  .section-text,
  .section-card-title,
  .section-testimonials-subtitle,
  .bottom-stat p,
  .partnerships-text p,
  .excellence-text p,
  .mvv-content-text p,
  .business-card p,
  .business-header p,
  .card-footer p,
  .blog-content h3,
  .articles-grid-all .article-card h3,
  .se-consultadoria-solutions-carousel__description,
  .final-cta-text p,
  .equipment-text p,
  .process-header p,
  .stat-text,
  .marketing-card__title {
    font-size: var(--txt-lg);
  }

  /* ------------------------------------------------------------------------
     7.6  TEXTO CORRENTE -> 16px. Era 15 e 15.2.
     ------------------------------------------------------------------------ */
  .marketing-card__text,
  .section-solutions-consultadoria__service-description {
    font-size: var(--txt-base);
  }

  /* ------------------------------------------------------------------------
     7.7  TEXTO PEQUENO -> 14px. Era 12, 13 e 14.4.
     ------------------------------------------------------------------------ */
  .solution-content p,
  .sector-card p,
  .copyright,
  .prr-text,
  .location .note {
    font-size: var(--txt-sm);
  }

  /* ------------------------------------------------------------------------
     7.8  A /servicos-de-marketing/, que tem 77 declaracoes de font-size
          dentro do <style> do proprio PHP, com 8 clamp() proprios e seis
          tectos diferentes (38, 43, 46, 52, 54, 55, 56 e 70px). Tem a mesma
          inversao do resto do site: o H1 (.mk-title) chega a 46 e os H2
          chegam a 54. Um <style> no corpo vence o layout.css, por isso
          leva "body" a frente, como na Fase 1.
     ------------------------------------------------------------------------ */
  body .mk-title {
    font-size: var(--txt-4xl);
    letter-spacing: var(--letra-titulo);
  }

  body .mk-service h2,
  body .mk-packs h2,
  body .mk-approach h2,
  body .mk-websites h2,
  body .mk-graphic h2,
  body .mk-social h2,
  body .mk-seo h2,
  body .mk-ads h2,
  body .mk-email h2,
  body .mk-form-content h2 {
    font-size: var(--txt-3xl);
    letter-spacing: var(--letra-titulo);
  }

  body .mk-pack-card h3 {
    font-size: var(--txt-2xl);
    letter-spacing: var(--letra-titulo);
  }

  body .mk-subtitle,
  body .mk-websites-list span,
  body .mk-graphic-list span,
  body .mk-social-list span,
  body .mk-seo-list span,
  body .mk-ads-list span,
  body .mk-email-list span {
    font-size: var(--txt-xl);
  }
}

/* --------------------------------------------------------------------------
   7.9  O REMATE -- os que escaparam a primeira passagem, apanhados a medir
        as 26 paginas e nao a olhar para o CSS. Tres grupos:

        a) Seccoes escritas em sessoes anteriores e que estao no home.css
           mas fora do inventario (.marketing-title, .section-card-text).
        b) O bloco "helpdesk" da /assistencia-tecnica/ e as seccoes da
           /contactos/, que vivem dentro do <style> do proprio PHP. Levam
           "body" a frente, senao perdem para o layout.css.
        c) A /noticias/ e a /contactos/ tinham a inversao mais grave que
           restava: o H1 verdadeiro da pagina a 32px por baixo de H2 a 40.
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {

  /* Titulo de pagina: a /noticias/ e a /contactos/ tinham o H1 a 32px */
  .noticias-titulo-pagina,
  body .contactos-intro h1 {
    font-size: var(--txt-4xl);
    letter-spacing: var(--letra-titulo);
  }

  /* Titulo de seccao */
  .marketing-title,
  body .helpdesk-header h2,
  body .contactos-delegacoes h2 {
    font-size: var(--txt-3xl);
    letter-spacing: var(--letra-titulo);
  }

  /* Sub-titulo */
  body .helpdesk-downloads-title h3 {
    font-size: var(--txt-2xl);
    letter-spacing: var(--letra-titulo);
  }

  /* Texto de destaque */
  .hero-content-noticias h2,
  body .helpdesk-download-card h4,
  body .mk-text {
    font-size: var(--txt-xl);
  }

  /* Texto secundario */
  .location h3,
  body .contactos-intro p,
  body .contactos-canais .canal h2,
  body .delegacao h3,
  body .mk-packs-intro {
    font-size: var(--txt-lg);
  }

  /* Texto pequeno */
  .section-card-text,
  .btn-arrow,
  body .helpdesk-eyebrow,
  body .helpdesk-label,
  body .contactos-nota,
  body .mk-pack-card p {
    font-size: var(--txt-sm);
  }
}

/* --------------------------------------------------------------------------
   7.10  Os ultimos da /servicos-de-marketing/. O ".mk-text" precisou de
         "body .mk-hero .mk-text" porque a pagina ja o define com duas
         classes (".mk-hero .mk-text"), que ganha a "body .mk-text".
         Lembrete: nesta pagina a especificidade conta-se sempre, porque o
         <style> dela esta no corpo e vem depois do layout.css.
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {

  body .mk-hero .mk-text,
  body .mk-graphic-lead {
    font-size: var(--txt-xl);
  }

  body .mk-websites-intro,
  body .mk-seo-lead,
  body .mk-seo-text {
    font-size: var(--txt-lg);
  }
}

/* --------------------------------------------------------------------------
   7.11  O ENTRELINHAMENTO PRESO EM PIXEIS

   Isto so se viu na fotografia, os numeros nao o apanharam. O ".form-left h2"
   tinha "line-height: 80px", escrito a pensar numa letra de 70px. Ao descer a
   letra para 40px o entrelinhamento ficou igual, e o titulo passou a ter um
   buraco de 40px entre as duas linhas: "Peca assistencia tecnica" em cima e
   "agora" muito la em baixo. Aparecia nas 19 paginas com formulario.

   Procurados todos os "line-height" em pixeis acima de 40 em todo o tema e
   nos <style> dos PHP: sao exactamente dois, ambos aqui. Passam a proporcao,
   que acompanha o tamanho da letra em vez de ficar preso a um numero.

   LICAO: mudar o tamanho da letra sem olhar para o entrelinhamento e meio
   trabalho. Um "line-height" em pixeis e sempre um valor escrito para UM
   tamanho de letra so.
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {

  .form-left h2 { line-height: 1.2; }

  .section-doubt-faq-question { line-height: 1.3; }
}

/* ==========================================================================
   8. O RITMO VERTICAL -- Fase 4, Dash Digital, 16/08/2026
   --------------------------------------------------------------------------
   O PORQUE. Medidas as 26 paginas a 1521px, os blocos de primeiro nivel
   usavam 22 valores distintos de espaco vertical: 0, 16, 20, 30, 40, 42, 50,
   60, 64, 70, 72, 78, 80, 82, 86, 90, 92, 94, 96, 100, 128 e 192px. E por
   isso que umas seccoes parecem coladas e outras parecem soltas. Na mesma
   pagina de produto havia cinco valores diferentes: 20, 40, 50, 60 e 80.

   O QUE ISTO FAZ. Manda cada seccao para um de dois degraus:
     --esp-lg (56px)  a seccao normal
     --esp-xl (80px)  a seccao de destaque, e as que ja la estavam
   O 80 e a ancora porque era ja o valor mais usado. Assim as seccoes
   grandes ficam como estavam e sao as desalinhadas que vem ter com elas.

   TRES REGRAS QUE EXPLICAM O RESTO:
   1. So a partir de 1024px, como na Fase 3. O telemovel e a Fase 7.
   2. Os heros nao se tocam. O espaco vertical de um hero define a altura da
      fotografia de fundo; mexer-lhe muda a proporcao da imagem, que e outra
      conversa. Ficam de fora: .hero, .hero-section, .hero-banner,
      .mk-hero, .section-hero-consultadoria, .unibind-hero, .dualinfor-site.
   3. As seccoes a zero ficam a zero. Sao as que estao coladas de proposito
      a seccao anterior, e a vizinha ja da o espaco pelos dois.
   ========================================================================== */

@media (min-width: 1024px) {

  /* ------------------------------------------------------------------------
     8.1  Os <br> usados como espacador

     A homepage tem SEIS <br> soltos dentro do <main>, aos pares, a servir de
     espaco entre seccoes: davam 45px de vao que nao vinha de regra nenhuma e
     que ninguem conseguia ajustar sem editar o PHP. Escondem-se aqui, e o
     espaco passa a vir do proprio degrau da seccao.
     ------------------------------------------------------------------------ */
  main > br { display: none; }

  /* ------------------------------------------------------------------------
     8.2  Seccao de destaque -> 80px. Era 78, 80, 82, 86, 90, 92, 94, 96 e 100.
          Os oito valores entre 78 e 94 vinham dos clamp() proprios da
          /servicos-de-marketing/, um por seccao, todos ligeiramente
          diferentes uns dos outros.
     ------------------------------------------------------------------------ */
  .form-wrapper,
  .form-wrapper-contacto,
  .marketing-section,
  .section-statistics,
  .statistics-section,
  .companies-section,
  .blog-section,
  .helpdesk-support-section,
  .process-section,
  .technical-support-section,
  .services-section,
  .why-choose-section-assistencia-tecnica,
  .final-cta-section,
  .section-hero-secundario,
  .section-solutions-consultadoria,
  .section-dark-wrapper,
  .excellence-section,
  .innovation-section,
  .mvv-section,
  .professional-identity,
  .solutions-intro-section,
  .solutions-section,
  .business-solutions,
  body .mk-approach,
  body .mk-websites,
  body .mk-graphic,
  body .mk-social,
  body .mk-seo,
  body .mk-ads,
  body .mk-email,
  body .mk-form-section {
    padding-block: var(--esp-xl);
  }

  /* ------------------------------------------------------------------------
     8.3  Seccao normal -> 56px. Era 16, 20, 40, 50, 60 e 64.
          As de 20px eram as mais apertadas do site: duas seccoes seguidas a
          20px davam 40px entre os dois conteudos, num ecra com 1328px de
          largura util.
     ------------------------------------------------------------------------ */
  .card-section,
  .content-section,
  .section-full-bg,
  .products-features-section,
  .section-testimonials,
  .section-solution-container,
  .section-complementary-container,
  .section-doubt-container,
  .equipment-section,
  .se-consultadoria-solutions-carousel,
  .solutions-lexmark-section,
  .about-lexmark-section,
  .partnership-section,
  .features-section,
  .statistics-lexmark-section,
  .solutions-grid-section,
  body .contactos-wrapper {
    padding-block: var(--esp-lg);
  }

  /* ------------------------------------------------------------------------
     8.4  Do titulo de seccao para o conteudo -> 40px. Era 40, 50, 56 e 60.
          O 40 ja era o mais usado; sobem-se os outros tres para ele.
     ------------------------------------------------------------------------ */
  .section-header,
  .section-two-testimonials-title,
  .section-hero-consultadoria-content,
  .marketing-title {
    margin-bottom: var(--esp-md);
  }

  .section-header-home p { margin-top: var(--esp-md); }
}

/* --------------------------------------------------------------------------
   8.5  O REMATE, apanhado a medir e nao a ler CSS

   - O ".helpdesk-support-section" (100/100) vive dentro do <style> do
     pagina-assistenciatecnica.php e por isso ganhava ao layout.css. Leva
     "body" a frente, a mesma solucao da Fase 1 e da Fase 3.
   - O ".mk-packs" e o ".mk-service" tinham ficado fora da lista.
   - Dois casos em que so UM dos lados estava fora da escala. Mexe-se so
     nesse lado, para nao alterar a altura do hero nem a colagem a seccao
     de cima:
       .dualinfor-site  80/96  ->  80/80
       .solutions-intro  0/64  ->   0/56
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {

  body .helpdesk-support-section,
  body .mk-packs,
  body .mk-service {
    padding-block: var(--esp-xl);
  }

  .dualinfor-site { padding-bottom: var(--esp-xl); }

  .solutions-intro { padding-bottom: var(--esp-lg); }
}

/* ==========================================================================
   BLOCO 9 - TELEMOVEL: BARRA FIXA DE ACAO (Ligar e Pedir orcamento)
   Escrito a 16/08/2026. Primeiro bloco desta folha para telemovel.

   Porque existe, medido a 375 px nas 26 paginas:
   - Os unicos links de telefone do site estao no rodape, a cerca de 12 200 px
     do topo, ou seja catorze ecras, e cada um tem 123 x 16 px de area de toque.
   - A distancia mediana do topo ao formulario e de 8 428 px, e em 11 das 22
     paginas com formulario passa dos 8 000 px, mais de nove ecras.
   Resultado: quem entra pelo telemovel nao consegue ligar nem pedir orcamento
   sem rolar o site quase todo. Esta barra poe as duas accoes a um toque.

   Tudo o que esta aqui vive dentro de @media (max-width: 1023px). Acima disso
   a barra nao existe, e nada do trabalho de computador e tocado.
   ========================================================================== */

/* Por defeito escondida. So o media query de telemovel a mostra, por isso em
   computador nunca aparece, mesmo que o CSS de telemovel falhe a carregar. */
.dual-barra { display: none; }

@media (max-width: 1023px) {

  /* ------------------------------------------------------------------------
     O TEXTO CENTRADO QUE NAO DEVIA ESTAR

     O ficheiro servicos-solucoes.css tem isto:
         @media (max-width: 768px) { h2, p { text-align: center; } }
     Um seletor global, sem classe nenhuma. Como as 29 folhas do tema sao
     carregadas em todas as paginas sem condicao, esta regra centra todos os
     H2 e todos os paragrafos do site inteiro em telemovel.

     Medido a 16/08 comparando telemovel com computador, na mesma pagina:
       /contactos/        30 de 46 elementos centrados so em telemovel
       /ciberseguranca/   20 de 48
       /                  18 de 55
     Nenhum deles esta centrado em computador. Nao e desenho, e um acidente.
     E texto corrido centrado e das coisas que mais custa a ler num ecra
     estreito, porque cada linha comeca num sitio diferente.

     A correccao e text-align: inherit e nao left, de proposito:
       - onde o pai esta centrado (os heros), continua centrado, como no
         computador;
       - onde ha uma regra de componente com classe, essa tem mais
         especificidade e continua a mandar;
       - nos restantes, volta ao alinhamento natural, que e o do computador.
     Ou seja, isto nao decide alinhamentos: devolve a cada bloco o que o
     desenho aprovado ja lhe dava.
     ------------------------------------------------------------------------ */
  h2, p {
    text-align: inherit;
  }

  .dual-barra {
    display: grid;
    /* O Ligar e mais curto que o Pedir orcamento: 38% chega para o rotulo e
       deixa o resto ao botao comprido, e ambos ficam bem acima dos 44 px. */
    grid-template-columns: 38% 1fr;
    gap: 8px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* env(safe-area-inset-bottom) e a faixa dos iPhone com barra de gestos.
       Sem isto o botao fica por baixo dela e nao se consegue tocar. */
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid rgba(41, 57, 146, 0.12);
    box-shadow: 0 -4px 16px rgba(16, 20, 45, 0.12);
    /* Um abaixo do botao do plugin de acessibilidade, que usa o valor maximo. */
    z-index: 2147483646;
    transition: bottom 0.25s ease;
  }

  /* Quando a pessoa esta a preencher o formulario, a barra desce e sai da
     frente, senao tapa o botao de submeter. Quem poe e tira a classe e o
     barra-acao.js, ao foco entrar e sair do formulario.

     Aviso para quem for medir isto: dentro do iframe de auditoria as
     transicoes CSS nao progridem, e o valor computado fica preso no inicial.
     Custou tres explicacoes erradas a 16/08, incluindo um !important
     inexistente. Para verificar, desligar primeiro a transicao:
       barra.style.setProperty('transition', 'none', 'important'); */
  .dual-barra.dual-barra--oculta {
    bottom: -120px;
  }

  .dual-barra__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 52px;          /* folga confortavel acima do minimo de 44 px */
    padding: 0 10px;
    border-radius: 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
    letter-spacing: -0.16px;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
  }

  /* Ligar: contorno azul da marca sobre branco. Fica distinto do botao de
     orcamento sem lhe roubar destaque, e le-se bem. */
  .dual-barra__btn--ligar {
    color: #293992;
    background: #fff;
    border: 2px solid #293992;
  }

  .dual-barra__btn--ligar:active { background: rgba(41, 57, 146, 0.08); }

  /* Pedir orcamento: o gradiente oficial da marca, igual aos CTA do resto
     do site (#293992 azul para #9A2686 magenta). */
  .dual-barra__btn--orcamento {
    color: #fff;
    background: linear-gradient(90deg, #293992 0%, #9A2686 100%);
    border: 2px solid transparent;
  }

  .dual-barra__btn--orcamento:active { opacity: 0.9; }

  .dual-barra__btn:focus-visible {
    outline: 3px solid #9A2686;
    outline-offset: 2px;
  }

  .dual-barra__icone {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
    fill: currentColor;
  }

  /* A barra e fixa, por isso tapa o fim da pagina. Este espaco devolve o que
     ela ocupa, senao os ultimos links do rodape ficam por baixo dela. */
  body {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }

  /* ------------------------------------------------------------------------
     O RODAPE: alvos de toque a 44 px

     Porque comeca aqui e nao noutro sitio: medido a 375 px, 33 dos cerca de 46
     alvos pequenos de cada pagina estao no rodape, e o rodape e o mesmo nas 26
     paginas. Uma correccao num sitio so vale 33 vezes 26.

       telefones das delegacoes   123 x 16 px   os piores, e os que mais valem
       links de navegacao         132 x 26 px   passo de 34 px entre eles
       links legais               285 x 20 px

     Os icones sociais ja estao a 44 x 44 e nao se lhes toca.
     ------------------------------------------------------------------------ */

  /* Os cinco telefones. Em B2B local a chamada e a conversao, e ate agora eram
     o alvo mais dificil de acertar do site inteiro: 16 px de altura, que nem o
     minimo de 24 px do criterio AA cumpriam. */
  .dualinfor-footer .location p a[href^="tel:"] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Navegacao do rodape. O flex faz o link ocupar a largura toda da coluna, o
     que leva a area de toque de 132 x 26 para 285 x 44: com o gap de 4 px, o
     passo entre links passa de 34 para 48, e nao dos 34 para 78 que daria
     esticar cada um sem mexer no espacamento que ja la estava. */
  .dualinfor-footer .nav-section ul { gap: 4px; }

  .dualinfor-footer .nav-section li a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding-block: 0;
  }

  /* Livro de Reclamacoes, privacidade e restantes. */
  .dualinfor-footer .legal-links { gap: 4px; }

  .dualinfor-footer .legal-links a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  /* ------------------------------------------------------------------------
     OS ALVOS DE TOQUE QUE SOBRAM, FORA DO RODAPE
     Depois de arrumado o rodape restavam 13 por pagina, todos identificados a
     16/08. Nenhum destes muda cores nem rotulos: so a area onde se pode tocar.
     ------------------------------------------------------------------------ */

  /* O botao do menu tinha 40x40. E a porta de entrada para a navegacao toda
     em telemovel, e falhava o minimo por 4 px. */
  .menu-toggle {
    width: 44px;
    height: 44px;
  }

  .logo-link {
    min-height: 44px;
    align-items: center;
  }

  /* Botoes e links de accao do corpo: 42 e 31 px de altura. */
  .btn-primary,
  .blog-link {
    min-height: 44px;
    align-items: center;
  }

  /* O consentimento do RGPD. A caixa fica com os 24 px, que e o tamanho certo
     para uma caixa de marcar: quem manda na area de toque e o rotulo ligado
     por for=, que ja tinha 313 px de largura e so lhe faltavam 5 px de altura.
     Tocar no texto marca a caixa, e agora com folga.

     Aqui NAO se toca no display, e a razao esta registada: pos-se display:flex
     a 16/08 e o rotulo partiu-se em duas colunas, com "Li e aceito a" de um
     lado, "Politica de Privacidade e Cookies" do outro e o ponto final solto.
     Os nos de texto de um rotulo viram itens de flex. So a fotografia mostrou.
     O min-height sozinho da a area de toque sem mexer no fluxo do texto. */
  label[for="aceito_privacidade"] {
    min-height: 44px;
  }

  /* Telefones e e-mails fora do rodape. Isto escapou a primeira ronda e e o
     pior caso do site: na propria /contactos/, que e a pagina onde as pessoas
     vao mesmo para ligar, os cinco numeros das delegacoes tinham 22 px de
     altura, e os e-mails 19. */
  a.tel,
  .delegacao a[href^="tel:"],
  a[href^="mailto:"] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Ler mais das noticias, paginacao e botao secundario. */
  .read-more,
  .pagination-number,
  .btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
  }

  /* O "Peca um Orcamento" das paginas de produto e um <button> dentro de um
     <a>, e tinha 43 px de altura. Falhava o minimo por um pixel, e e o CTA
     principal dessas paginas. */
  a > button {
    min-height: 44px;
  }

  /* Os icones de servico da seccao de solucoes complementares: links de 19 px
     de altura, nas paginas de consultadoria, ciberseguranca e afins. */
  .section-solutions-consultadoria__service-icon a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Os icones redondos que ligam as paginas de produto, na /sobre-nos/. O
     circulo tem 50 px mas o link la dentro tinha so 25 x 30: tocavel era o
     icone, nao o circulo. Passa a valer o circulo todo, sem mudar o desenho. */
  .icon-circle a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 44px;
  }

  /* Os logotipos do PRR, da Republica Portuguesa e da Uniao Europeia. */
  .prr-logos a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* O botao do plugin de acessibilidade esta fixo no canto inferior direito,
     com margin-bottom de 15 px, exatamente onde a barra passa a estar. Sobe o
     necessario para os dois coexistirem. Nao altera o plugin, so a posicao.

     O seletor tem de ser este e nao apenas .onetap-toggle: o plugin escreve
     .onetap-container-toggle .onetap-toggle com !important, e um !important so
     e vencido por outro !important com mais especificidade. O body a frente da
     ao nosso 0,2,1 contra os 0,2,0 dele. Verificado a 16/08. */
  body .onetap-container-toggle .onetap-toggle {
    margin-bottom: 84px !important;
  }

}


/* ==========================================================================
   BLOCO 10 - TELEMOVEL: TRES ERROS VISIVEIS
   Escrito a 17/08/2026. Tudo dentro de @media (max-width: 1023px), como o
   bloco 9. O computador nao e tocado.

   Os tres foram apanhados pelo Luis no telemovel dele a 16/08 a noite e
   reproduzidos a 375 px nas 26 paginas antes de se escrever uma linha.
   ========================================================================== */

@media (max-width: 1023px) {

  /* ------------------------------------------------------------------------
     A. O TEXTO QUE SAI PELAS MARGENS

     Um item de grelha ou de flex tem min-width: auto por omissao, e isso
     significa "nunca encolhas abaixo da largura do teu conteudo". Quando o
     conteudo e mais largo do que a coluna, o item recusa encolher e passa por
     cima da margem. E exactamente a armadilha da Fase 1 (ponto 15 do registo)
     e a correccao e a mesma: min-width: 0.

     Medido a 375 px a 17/08, largura do item / largura do pai:

       .unibind-left-column            447 / 343   /encadernacao/       103 px
       .unibind-right-column           447 / 343   /encadernacao/
       .solutions-intro-left/right     403 / 345   /servicos-e-solucoes/
       .stats-left/right               400 / 345   /sobre-nos/
       .hero-secundario-text           396 / 375   /ciberseguranca/      11 px
       .hero-secundario-text           390 / 375   /videovigilancia/      8 px
       .hero-secundario-text           378 / 375   /consultadoria/        2 px
       .section-solutions-...__left    360 / 345   6 paginas

     Nota: so a /encadernacao/, a /ciberseguranca/, a /videovigilancia/ e a
     /consultadoria/ faziam o body transbordar. Nas outras o corte estava
     escondido por um overflow: hidden de um antepassado, ou seja o texto era
     cortado sem dar sinal nenhum na medicao do transbordo. Foi por isso que
     se mediu tambem "filho mais largo do que o pai", e nao so o transbordo.

     O max-width: 100% e o cinto de seguranca: garante que o item nunca passa
     da caixa mesmo que algo la dentro traga largura propria.
     ------------------------------------------------------------------------ */
  .unibind-left-column,
  .unibind-right-column,
  .solutions-intro-left,
  .solutions-intro-right,
  .stats-left,
  .stats-right,
  .hero-secundario-text,
  .section-solutions-consultadoria__left,
  .section-solutions-consultadoria__right {
    min-width: 0;
    max-width: 100%;
  }

  /* Dentro destes blocos ha titulos e botoes que trazem largura propria.
     O max-width prende-os a largura da coluna.

     O overflow-wrap e a ultima rede: parte uma palavra que nao caiba de todo
     na caixa, em vez de a deixar sair pela margem. Com o H2 a 50 px partia
     "cibersegurança" em "ciberse / gura / nça", sem hifen nenhum. Com os
     26 px do bloco 11 a palavra cabe e isto deixou de disparar.

     Nao levar hyphens: auto. Foi tentado a 17/08 e o resultado esta
     fotografado: o hyphens parte palavras que JA CABIAM, porque o seu criterio
     e equilibrar as linhas e nao evitar transbordo. Deu "Soluções de
     ciberse-gurança", "Videovigilância que ga-rante" e "efi-ciência" em
     titulos onde nada faltava. Foi retirado. */
  .unibind-left-column > *,
  .unibind-right-column > *,
  .hero-secundario-text > * {
    max-width: 100%;
    overflow-wrap: break-word;
  }

  /* ------------------------------------------------------------------------
     A2. OS BOTOES DA ASSISTENCIA REMOTA, QUE SAIAM DO CARTAO

     Apanhado pelo Luis no telemovel a 17/08, na /assistencia-tecnica/. Os dois
     botoes "Inserir codigo de assistencia" e "Transferir programa de
     assistencia" saiam do cartao roxo pela direita e ficavam cortados a meio.

     A causa NAO e o min-width: auto desta vez, e foi preciso medir para o
     perceber. Com min-width: 0 aplicado, o valor computado de width ficava em
     291,6 px e o offsetWidth continuava em 336. A diferenca sao 44 px, que e
     exactamente o padding de 22 px de cada lado:

         box-sizing: content-box  ->  291,6 de conteudo + 44 de padding = 336
         box-sizing: border-box   ->  291,6 no total

     Ou seja a largura estava certa e o que saia era o padding, somado por
     fora. Estes botoes sao os unicos do site com content-box e padding
     lateral: um detetor que varreu as 26 paginas a procura do mesmo padrao
     nao encontrou mais nenhum caso.

     Leva "body" a frente porque a /assistencia-tecnica/ e uma das seis paginas
     com <style> dentro do proprio PHP.
     ------------------------------------------------------------------------ */
  body .helpdesk-buttons > a,
  body .helpdesk-buttons > button {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
  }

  /* ------------------------------------------------------------------------
     B. O MENU HAMBURGUER BRANCO EM TODAS AS PAGINAS

     A causa nao era o header.css. O header.css faz a coisa certa:
         .menu-toggle__line { background-color: var(--text-primary); }
     e --text-primary e #333333 em todas as paginas, confirmado a subir a
     arvore desde a propria linha do hamburguer ate ao <html>.

     Quem pinta de branco e o home.css:
         .menu-toggle__line { background-color: #fff; }
     sem media query e sem classe de pagina nenhuma. Foi escrita para o hero
     escuro da homepage, mas como as 29 folhas do tema sao carregadas em todas
     as paginas sem condicao, e como o home.css vem depois do header.css na
     cascata com a mesma especificidade (0,1,0), ganha nas 26.

     Medido a 17/08: rgb(255,255,255) nas 26 paginas, sobre um fundo de
     rgb(242,242,242) nas que nao tem hero escuro. Fotografado na /faturacao/.

     O layout.css e carregado depois do home.css, por isso esta regra ganha
     pela ordem, com a mesma especificidade e sem precisar de !important.

     Nao mexe nas paginas de hero escuro: a regra
         body.header-white-top .site-header:not(.is-scrolled) .menu-toggle__line
     do header.css tem 0,4,1 e continua a ganhar sobre estes 0,1,0. Ou seja a
     homepage mantem o hamburguer branco sobre o hero, e passa a escuro assim
     que o cabecalho fica branco com o scroll, que ja era o comportamento certo.
     ------------------------------------------------------------------------ */
  .menu-toggle__line {
    background-color: var(--text-primary);
  }

  /* ------------------------------------------------------------------------
     C. O LOGOTIPO INVISIVEL NA /assistencia-tecnica/

     O cabecalho tem dois <img> no HTML, o escuro (logo--default, para fundos
     claros) e o claro (logo--alt, para fundos escuros), e o CSS esconde um.
     Mostra o claro nas paginas com a classe header-white-top no <body>, que o
     functions.php poe em tres: home, assistencia-tecnica e sobre-nos.

     Na home e na /sobre-nos/ esta certo, porque o cabecalho fica por cima de
     um hero escuro. Fotografado, as duas leem-se bem.

     Na /assistencia-tecnica/ nao ha hero por baixo do cabecalho: ha a
     breadcrumb, que e clara. Resultado: a palavra "dualinfor" a branco sobre
     rgb(242,242,242). Fotografado a 375 px.

     A causa raiz era a pagina estar nessa lista do functions.php, e o Luis
     aprovou corrigi-la na raiz a 17/08: a entrada 'assistencia-tecnica' foi
     retirada da lista, o que corrige o telemovel e o computador de uma vez.

     Estas tres regras ficam como rede de seguranca, para o caso de a classe
     voltar a ser posta nesta pagina. Sem a classe no <body> nao fazem nada.

     Especificidade 0,4,1, igual a da regra do header.css, e o layout.css vem
     depois: ganha pela ordem. Os !important sao precisos porque as regras do
     header.css tambem os tem, e um !important so e vencido por outro.
     ------------------------------------------------------------------------ */
  body.page-id-44 .site-header:not(.is-scrolled) .logo--alt {
    display: none !important;
  }
  body.page-id-44 .site-header:not(.is-scrolled) .logo--default {
    display: inline-block !important;
  }
  body.page-id-44 .site-header:not(.is-scrolled) .menu-toggle__line {
    background-color: var(--text-primary);
  }

  /* ------------------------------------------------------------------------
     D. O X DE FECHAR O MENU, BRANCO SOBRE O PAINEL CLARO

     Apanhado a 17/08 ao abrir o menu com um clique verdadeiro do rato na
     homepage, depois de corrigido o B. O botao fechado ja se via, mas aberto
     nao: quando o menu abre, o painel entra por cima e e claro, e nas paginas
     com hero escuro as linhas continuavam brancas.

     Medido com elementsFromPoint(337, 35) na homepage, com o menu aberto:
       BUTTON.menu-toggle.is-active   fundo rgb(241, 241, 241)
       DIV.mobile-menu-image          fundo rgb(242, 242, 242)
     e as linhas a rgb(255, 255, 255). Catorze pontos de luminancia, ou seja
     invisivel. E a saida do menu: quem nao ve o X fica la dentro.

     A regra do header.css que pinta de branco tem 0,4,1. Esta tem 0,5,1 e
     ganha, e so aplica com o menu aberto. As duas classes, is-active e active,
     porque o JS do tema poe as duas.
     ------------------------------------------------------------------------ */
  .menu-toggle.is-active .menu-toggle__line,
  .menu-toggle.active .menu-toggle__line,
  body.header-white-top .site-header:not(.is-scrolled) .menu-toggle.is-active .menu-toggle__line,
  body.header-white-top .site-header:not(.is-scrolled) .menu-toggle.active .menu-toggle__line {
    background-color: var(--text-primary);
  }

}

/* ==========================================================================
   BLOCO 11 - TELEMOVEL: A ESCALA TIPOGRAFICA
   Dash Digital, 17/08/2026. Tudo em @media (max-width: 1023px). O computador
   nao e tocado: a Fase 3 vive toda em @media (min-width: 1024px).

   O PORQUE, medido a 375 px nas 26 paginas a 17/08.

     Hierarquia invertida (o H1 mais pequeno que um H2 ou um H3): 22 das 26.
     Paginas com um H2 de 50 px ou mais: 19 das 26. O maior era 54.
     Tamanhos de letra distintos por pagina: 8 a 20, media 15,7.
     Titulos com 4 ou mais linhas: 125 no total.

   O caso que se ve melhor e a /ciberseguranca/. O H2 "Solucoes de
   ciberseguranca que garantem tranquilidade e confianca" ocupava, a 50 px,
   SETE linhas e 413 px de altura, mais do que um ecra inteiro so para um
   titulo, e a palavra "ciberseguranca" era partida a meio. A 26 px ocupa
   quatro linhas e 123 px, e o titulo, o paragrafo e o inicio da imagem
   passam a caber no mesmo ecra. Esta fotografado antes e depois.

   O QUE ISTO FAZ. Manda cada titulo para um de tres degraus:

     26 px   H2, titulo de seccao
     22 px   H3, titulo de cartao
     19 px   H3 pequeno, o titulo dentro de um cartao de lista

   Os H1 nao se tocam, e e de proposito. Estao entre 28 e 35,2 px, ou seja ja
   estao todos ACIMA dos 26 px dos H2. A inversao corrige-se baixando os H2,
   nunca subindo os H1, porque subir um titulo dentro de uma grelha e a
   maneira mais facil de o fazer transbordar, e o bloco 10 acabou de mostrar
   como essas grelhas sao fragilissimas. A unica excepcao e o
   .hero-content-sobre h1, que estava a 35,2 e desce para 32, o mesmo valor
   dos outros H1 do site.

   DE ONDE VEM ESTA LISTA. Nao foi escrita de novo: sao as listas da Fase 3
   (pontos 7.2, 7.3, 7.8 e 7.9 deste ficheiro), que ja classificaram cada
   titulo do site como titulo de seccao ou titulo de cartao e ja foram
   validadas em computador. Reaproveita-las garante que o mesmo titulo tem o
   mesmo papel nas duas larguras, e poupa o trabalho de o classificar outra
   vez. Aos poucos seletores que faltavam chegou-se medindo os 94 pares de
   seletor e tamanho que existem nas 26 paginas, e nao lendo CSS.

   A REGRA DE OURO, e como foi verificada. Nenhum titulo fica MAIOR do que
   era. Isto nao se garante a ler o codigo, garante-se a medir: correu-se um
   verificador que guarda o font-size de cada H1, H2 e H3 das 26 paginas
   antes e depois de aplicar esta escala e reporta qualquer um que suba.
   Resultado: ZERO subidas em 26 paginas.

   O "body" a frente de tudo nao e decoracao. Seis paginas tem um <style>
   dentro do proprio PHP, e um <style> no corpo vem depois do layout.css na
   cascata, por isso ganha com a mesma especificidade. Sem o "body", a
   /servicos-de-marketing/ nao mexia um pixel: media-se 16 tamanhos distintos
   antes e 16 depois, e a altura da pagina nao baixava nada. Com o "body",
   passa a 14 tamanhos, deixa de estar invertida e perde 583 px.

   O QUE ISTO NAO RESOLVE. O objectivo de 5 a 7 tamanhos distintos por pagina
   nao se atinge so com titulos: a media desce de 15,7 para 12,9. O que sobra
   sao paragrafos, botoes, etiquetas e numeros, que sao o passo seguinte.
   ========================================================================== */

@media (max-width: 1023px) {

  /* ------------------------------------------------------------------------
     11.1  TITULO DE SECCAO (H2) -> 26 px
           Era 25,6 / 28 / 28,8 / 30 / 30,4 / 32 / 34 / 35,2 / 36 / 36,8 /
           38,4 / 40 / 44 / 50 / 54. Quinze valores para o mesmo papel.

           O .hero-secundario-text h2 e o principal: e o titulo das paginas de
           produto e estava a 50 px em 8 paginas. O .section-title estava a
           38,4 em 25 sitios e o .form-left h2 a 28 em 21, que e o formulario
           que aparece em quase todas as paginas.

           Os tres H3 que estao aqui (.partners-right, .companies-left,
           .bottom-stat) sao titulos de seccao apesar da etiqueta, e foi assim
           que a Fase 3 os classificou. Estavam a 35 e 40 px.
     ------------------------------------------------------------------------ */
  body .form-left h2,
  body .recent-articles h2,
  body .all-articles h2,
  body .solutions-header h2,
  body .excellence-text h2,
  body .partnerships-text h2,
  body .contact-left h2,
  body .solutions-intro-right h2,
  body .sectors-text h2,
  body .why-choose-section h2,
  body .cybersecurity-solutions h2,
  body .business-header h2,
  body .professional-content h2,
  body .about-text h2,
  body .solutions-text h2,
  body .partnership-text h2,
  body .blog-header h2,
  body .section-header-home h2,
  body .solutions-intro h2,
  body .section-main-title,
  body .partners-right h3,
  body .companies-left h3,
  body .hero-secundario-text h2,
  body .services-header h2,
  body .final-cta-text h2,
  body .support-text h2,
  body .equipment-text h2,
  body .process-header h2,
  body .why-choose-text h2,
  body .dualinfor-hero-subtitle,
  body .section-solution-title,
  body .section-title,
  body .section-testimonials-title,
  body .section-two-testimonials-title,
  body .section-doubt-title,
  body .section-complementary-title,
  body .section-carrosel-empresas-title,
  body .section-solutions-consultadoria__title,
  body .se-consultadoria-solutions-carousel__title,
  body .section-heading,
  body .bottom-stat h3,
  body .h1-sub,
  body .marketing-title,
  body .helpdesk-header h2,
  body .contactos-delegacoes h2,
  body .features-impressora-main-title,
  body .container > h2,

  /* O apanha-tudo dos H2 que nao tem classe nenhuma, nem eles nem o pai.
     Eram seis, todos a 34 px. Tem especificidade 0,0,3 de proposito: perde
     para qualquer H2 que tenha regra propria, e por isso NAO sobe os H2
     pequenos que existem no site, como o .overlay-card h2 a 17,6 e o
     .canal h2 a 16,8. Verificado: zero subidas. */
  body div > h2,

  /* A /servicos-de-marketing/ tem folha propria dentro do PHP, com 76
     declaracoes de font-size e oito clamp(). A 375 px estes cinco davam
     28, 30, 34, 34 e 36 px. Sao os mesmos seletores do ponto 7.8. */
  body .mk-service h2,
  body .mk-packs h2,
  body .mk-approach h2,
  body .mk-websites h2,
  body .mk-graphic h2,
  body .mk-social h2,
  body .mk-seo h2,
  body .mk-ads h2,
  body .mk-email h2,
  body .mk-form-content h2 {
    font-size: 1.625rem;   /* 26px */
  }

  /* ------------------------------------------------------------------------
     11.2  TITULO DE CARTAO (H3) -> 22 px
           Era 24 / 25 / 28 / 28,8 / 32. O .card-title-solutions aparece 32
           vezes e estava a 28.

           Os quatro H2 desta lista (.innovation-text, .testimonial-left,
           .hero-left, .text-content) sao titulos de sub-seccao e ficam
           abaixo dos 26 px do H2 de seccao, que e o que se quer.
     ------------------------------------------------------------------------ */
  body .solution-content h3,
  body .business-card h3,
  body .mvv-content-text h3,
  body .innovation-text h2,
  body .testimonial-left h2,
  body .hero-left h2,
  body .text-content h2,
  body h3.card-title,
  body .card-title-solutions,
  body .se-consultadoria-solutions-carousel__card-title,
  body .step-item h3,
  body .cta-content h3,
  body .section-cta-title,
  body .section-card-number,
  body .helpdesk-downloads-title h3,
  body .helpdesk-info-card h3,
  body .helpdesk-action-content h3,
  body .features-impressora-sector-card h3,
  body .mk-pack-card h3 {
    font-size: 1.375rem;   /* 22px */
  }

  /* ------------------------------------------------------------------------
     11.3  TITULO DENTRO DE CARTAO DE LISTA (H3) -> 19 px
           Era 19,2 e 20. O .section-card-title aparece 117 vezes no site.
     ------------------------------------------------------------------------ */
  body .section-card-title,
  body .solution-item h3,
  body .container > h3,
  body .section-complementary-service-title {
    font-size: 1.1875rem;  /* 19px */
  }

  /* ------------------------------------------------------------------------
     11.4  O UNICO H1 QUE SE TOCA
           O .hero-content-sobre h1 da /sobre-nos/ estava a 35,2 px, o maior
           H1 do site. Desce para 32, que e o valor dos H1 da /faturacao/, da
           /noticias/, da /contactos/ e de mais oito paginas. Continua a ser
           o maior texto da pagina, agora com os H2 a 26.
     ------------------------------------------------------------------------ */
  body .hero-content-sobre h1 {
    font-size: 2rem;       /* 32px */
  }

}

/* ==========================================================================
   BLOCO 12 - TELEMOVEL: O RODAPE EM ACORDEAO
   Dash Digital, 17/08/2026. O JavaScript esta no fim do barra-acao.js.

   O PORQUE, medido a 375 px nas 26 paginas:

     O rodape tem 2 868 px e e IGUAL EM TODAS AS 26 PAGINAS, ou seja 20 a 22 %
     da altura de cada uma. Tres ecras e meio. E maior do que qualquer seccao
     de conteudo do site, e maior do que o hero, a prova social e o formulario
     somados.

       1 318 px  navegacao, que sao 23 links a 44 px
         911 px  as cinco delegacoes, 147 px cada
         236 px  links legais
         162 px  logotipo e redes sociais

     Antes de se olhar para aqui, mediu-se o espaco entre seccoes, que era o
     passo previsto. Nao valia a pena: os 15 valores distintos de padding
     somam 942 px numa pagina de 13 551, ou seja 7 % da altura, e arruma-los
     em tres degraus rendia 132 px por pagina. O rodape rende dez vezes mais.

   PORQUE NAO SE ENCOLHEM OS LINKS. Os 44 px de cada link vieram do trabalho
   de alvos de toque e sao a norma WCAG 2.5.8. Reverte-los poupava altura e
   estragava o que se acabou de fazer. O acordeao resolve sem lhes tocar.

   O COMPUTADOR NAO E TOCADO. Acima de 1024 px nada disto existe: o painel
   fica visivel e o botao deixa de responder ao clique. O JavaScript monta a
   estrutura nas duas larguras, e e o CSS que decide o comportamento, o que
   evita depender de matchMedia e de o utilizador rodar o telemovel.
   ========================================================================== */

@media (max-width: 1023px) {

  /* Fechado por omissao. Quem chega ao rodape ve uma lista de nomes, e nao
     2 229 px de listas abertas. */
  .rodape-painel { display: none; }
  .rodape-painel.aberto { display: block; }

  /* O <h3> perde a margem, que agora pertence ao botao: senao o alvo de toque
     ficava mais pequeno do que a area que parece clicavel. */
  .dualinfor-footer .location h3,
  .dualinfor-footer .nav-section h3 {
    margin: 0;
  }

  /* O botao ocupa a largura toda e tem 44 px de altura, o mesmo alvo de toque
     dos links que abre. Herda a cor e o tipo de letra do <h3> para o rodape
     continuar a ter o aspeto que tinha. */
  .dualinfor-footer .rodape-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 44px;
    padding: 0;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
  }

  /* A seta que diz se esta aberto ou fechado. Desenhada em CSS para nao
     trazer mais um icone do FontAwesome, que ja pesa 102 KB. */
  .dualinfor-footer .rodape-toggle::after {
    content: "";
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin-left: 12px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.2s ease;
  }

  .dualinfor-footer .rodape-toggle[aria-expanded="true"]::after {
    transform: rotate(-135deg) translate(-2px, -2px);
  }

  /* Um risco a separar cada bloco, para se perceber onde acaba um e comeca o
     seguinte agora que estao todos fechados e colados. */
  .dualinfor-footer .location,
  .dualinfor-footer .nav-section {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding-bottom: 4px;
  }

  /* Os gaps de 32 e 28 px foram feitos para blocos de 147 e 416 px de altura.
     Com os blocos fechados a 44 px, esse espaco passa a ser maior do que o
     proprio bloco. */
  .dualinfor-footer .locations-grid { gap: 0; }
  .dualinfor-footer .nav-sections { gap: 0; }

  /* Ao abrir, o conteudo precisa de respirar outra vez. */
  .rodape-painel.aberto {
    padding-top: 4px;
    padding-bottom: 12px;
  }
}

/* --------------------------------------------------------------------------
   Computador: tudo aberto e o botao a desaparecer da caixa.

   O display: contents no botao nao e detalhe. Com display:inline ou
   inline-block, cada <h3> do rodape passava de 25 para 35 px de altura, e o
   rodape de computador de 971 para 991. Vinte pixeis num sitio que esta
   fechado e aprovado.

   Medido a desfazer a estrutura dentro do proprio iframe e a comparar:

     sem acordeao nenhum        rodape 971 px, h3 25 px
     botao display:inline       rodape 991 px, h3 35 px
     botao display:inline-block rodape 991 px, h3 35 px
     botao display:contents     rodape 971 px, h3 25 px   <- repoe ao pixel

   O display:contents faz a caixa do botao desaparecer e devolve o texto ao
   <h3> como se o botao nao existisse, que e exactamente o que se quer aqui.
   Nao ha perda nenhuma: em computador o botao ja esta inerte e o conteudo
   todo visivel. O <h3> continua a ser <h3> para quem usa leitor de ecra.

   Foram tentados antes, e nao resolveram, o display:contents no painel e o
   line-height: inherit no botao. O problema nunca esteve nas margens nem no
   line-height, estava na caixa do proprio botao.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .rodape-painel { display: block; }
  .dualinfor-footer .rodape-toggle {
    display: contents;
    cursor: default;
    pointer-events: none;
  }
  .dualinfor-footer .rodape-toggle::after { content: none; }
}

/* ==========================================================================
   BLOCO 13 - TELEMOVEL: O AVISO DE CONSENTIMENTO E A BARRA DE ACCAO
   Dash Digital, 17/08/2026. Corrige um erro introduzido por nos no dia 16.

   O PROBLEMA, apanhado pelo Luis no telemovel dele a 17/08.

   A barra de accao do bloco 9 esta em position: fixed, bottom: 0, com
   z-index 2147483646. O aviso de consentimento do plugin Moove GDPR esta
   tambem em fixed, bottom: 0, com z-index 9900. Os dois ocupam o mesmo sitio
   e a barra ganha.

   Medido a 375 px, com o consentimento apagado para o aviso voltar a aparecer:

     o aviso ocupa 227 px, ou seja 32 % do ecra
     "Aceitar todos"   tapado pela barra
     "Rejeitar todos"  tapado pela barra
     "Definicoes"      tapado pela barra

   Nenhum dos tres era clicavel. Quem entrava pelo telemovel NAO CONSEGUIA dar
   nem recusar consentimento, e o aviso nunca desaparecia.

   Isto nao e so um defeito de UX. O RGPD exige que recusar seja tao facil
   como aceitar, e aqui nao era possivel fazer nem uma coisa nem a outra. O
   erro e nosso: a barra foi instalada a 16/08 sem se testar com o aviso a
   vista, porque o perfil de teste ja tinha consentimento dado. So apareceu
   depois de se apagar a chave moove_gdpr_popup e recarregar.

   A DECISAO, do Luis: enquanto o aviso estiver a vista, a barra nao aparece.
   Assim que a pessoa aceita ou recusa, o plugin poe a classe
   moove-gdpr-info-bar-hidden no aviso e a barra entra sozinha. E o mesmo
   principio que a barra ja usava para se esconder quando o formulario esta a
   vista: uma coisa de cada vez no fundo do ecra.

   Porque nao se empilharam os dois: juntos ocupavam 45 % do ecra ate a pessoa
   decidir, e a decisao demora segundos.

   O :has() e o que torna isto possivel so com CSS, sem JavaScript nenhum, e
   reage sozinho quando o plugin muda a classe. Se um browser antigo nao o
   suportar, a regra e ignorada e fica-se como se estava, ou seja nao piora.
   ========================================================================== */

@media (max-width: 1023px) {

  /* Enquanto o aviso estiver visivel, a barra sai da frente. */
  body:has(#moove_gdpr_cookie_info_bar:not(.moove-gdpr-info-bar-hidden)) .dual-barra {
    display: none !important;
  }

  /* Os botoes do aviso tinham 30 px de altura, e o "Definicoes" de cima 18.
     A norma WCAG 2.5.8 pede 44, que foi o que se aplicou aos 46 alvos por
     pagina no trabalho de 16/08. Nao ha razao para o aviso de consentimento
     ser a excepcao, ainda por cima sendo obrigatorio por lei. */
  #moove_gdpr_cookie_info_bar .mgbutton,
  #moove_gdpr_cookie_info_bar button {
    min-height: 44px !important;
  }

}

/* ==========================================================================
   BLOCO 14 - TELEMOVEL: A PAGINA QUE SE ARRASTAVA PARA O LADO
   Dash Digital, 17/08/2026. Apanhado pelo Luis no telemovel dele, com
   fotografias: a pagina aparecia "estendida", com uma barra fina em baixo,
   e ao deslizar o dedo para o lado via-se o resto do cabecalho e um painel
   branco fora do ecra a direita.

   A CAUSA. O plugin de acessibilidade (accessibility-onetap) esconde o seu
   painel de definicoes pendurando-o fora do ecra a direita:

       nav.onetap-accessibility { right: -580px; }        fechado
       nav.onetap-accessibility.onetap-toggle-open { right: 0; }   aberto

   Um elemento position: fixed pendurado para la da margem direita faz o
   Chrome do Android alargar o "layout viewport" para o conter: numa viewport
   de 375 px o layout passava para 535 (media-se window.innerWidth 535 contra
   clientWidth 375). O resultado e o que as fotografias mostram: o site
   desenhado a 535 px, o ecra a mostrar so uma fatia, o hamburguer empurrado
   para fora, e arrasto lateral ate um painel branco. O overflow-x: hidden do
   html e do body nao trava isto, porque um elemento fixed nao e cortado por
   overflow de antepassados.

   E por isto que o erro nunca apareceu nas medicoes: o iframe de medicao
   forca a largura e nao tem este comportamento do Android. So se reproduziu
   com emulacao movel verdadeira (user agent Android + touch), onde os numeros
   bateram certo com as fotografias do Luis.

   A CORRECCAO. O proprio menu do site esconde-se da maneira certa, com
   transform: translateX(-100%), e nunca causou arrasto: um transform nao
   estica o layout, so muda onde o elemento se desenha. Aplica-se a mesma
   tecnica ao painel do plugin: fica sempre com right: 0 (dentro do layout) e
   sai do ecra por transform. A classe onetap-toggle-open, que o plugin poe e
   tira ao tocar no boneco azul, continua a mandar: com ela o painel entra,
   sem ela sai.

   O plugin NAO e desativado nem alterado: isto e so a tecnica de esconder,
   por cima, no nosso CSS. E a segunda intervencao no plugin, depois da subida
   de 84 px do botao flutuante, e tal como essa fica documentada aqui.

   Os !important sao necessarios porque as regras do plugin vivem num <style>
   inline que vem depois do layout.css na cascata. O "body" a frente da
   0,3,2 contra os 0,2,1 do plugin, para ganhar tambem a eventuais !important
   futuros do lado dele.

   So em telemovel: em computador nao ha arrasto lateral nenhum (nao ha
   gesto de pan) e o comportamento aprovado nao se toca.
   ========================================================================== */

@media (max-width: 1023px) {

  /* ------------------------------------------------------------------------
     14.1  O CULPADO PRINCIPAL: o halo decorativo da /assistencia-tecnica/

     O <style> do pagina-assistenciatecnica.php tem isto:

         .helpdesk-support-section {
             / * ...
             position: relative; * /     <- COMENTADO
             overflow: hidden;
         }
         .helpdesk-support-section::before {
             position: absolute;
             top: -160px; right: -160px;
             width: 420px; height: 420px;
             background: radial-gradient(...);
         }

     O halo foi desenhado para ficar preso ao canto da seccao e cortado pelo
     overflow: hidden dela. Quando o position: relative foi comentado, o halo
     passou a posicionar-se contra a pagina inteira (o initial containing
     block), escapou ao corte, e ficou pendurado 160 px para la da margem
     direita. E dai o numero: 375 + 160 = 535, e no telemovel do Luis
     412 + 160 = a pagina "estendida" das fotografias.

     Provado por busca binaria na emulacao movel: escondendo elemento a
     elemento, o scrollWidth so caiu de 535 para 375 ao esconder este
     ::before. O circulo do cartao roxo (right: -70px) nao tem culpa: o
     cartao dele tem position: relative e overflow: hidden, como deve ser.

     A correccao repoe o position: relative que o proprio ficheiro mostra ter
     existido. O halo volta ao canto da seccao, cortado, como foi desenhado.
     ------------------------------------------------------------------------ */
  body .helpdesk-support-section {
    position: relative;
  }

  /* ------------------------------------------------------------------------
     14.2  O SEGUNDO PENDURADO: o painel do plugin de acessibilidade

     Fechado: dentro do layout (right: 0), fora do ecra pelo transform.
     O calc(100% + 40px) e a largura do proprio painel mais uma folga para a
     sombra nao ficar a espreitar na margem. */
  body nav.onetap-accessibility.onetap-plugin-onetap {
    left: auto !important;
    right: 0 !important;
    transform: translateX(calc(100% + 40px)) !important;
    transition: transform 0.3s ease !important;
  }

  /* Aberto: o transform anula-se e o painel desliza para dentro, como antes. */
  body nav.onetap-accessibility.onetap-plugin-onetap.onetap-toggle-open {
    transform: translateX(0) !important;
  }

}

/* ==========================================================================
   BLOCO 15 - VELOCIDADE: a letra do aviso de consentimento
   Dash Digital, 18/08/2026

   O plugin de consentimento traz a sua propria letra, a Nunito, e usava-a em
   duas regras: o painel de definicoes e a barra de aviso. Por causa dessas
   duas linhas, todas as 26 paginas descarregavam dois ficheiros de fonte,
   38 KB, para uma caixa que a maioria das pessoas ve uma vez na vida.

   Passa a usar a Montserrat, que ja esta carregada para o resto do site. Fica
   com a letra da marca e deixa de haver descarregamento. Se nenhuma regra usa
   a familia Nunito, o browser nao vai buscar o ficheiro.

   Porque tem "body" a frente: o gdpr-main.css carrega DEPOIS do layout.css,
   por isso com a mesma especificidade venceria ele. O "body" da mais um grau
   e evita ter de usar !important.
   ========================================================================== */

body #moove_gdpr_cookie_modal,
body #moove_gdpr_cookie_info_bar {
  font-family: 'Open Sans', system-ui, -apple-system, sans-serif;
}

/* A Open Sans e mais larga do que a Nunito, e com ela os tres botoes do aviso
   deixavam de caber numa linha. O aviso crescia uma linha inteira e passava a
   tapar o botao "Fale com um Especialista" do hero, que e onde as campanhas
   pagas aterram. Aperta-se o espaco lateral e o tamanho do rotulo, NUNCA a
   altura: os 44 px do bloco 13 mantem-se, porque sao a norma WCAG 2.5.8 e
   porque recusar tem de ser tao facil como aceitar. */
@media (max-width: 1023px) {

  body #moove_gdpr_cookie_info_bar .mgbutton {
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: 13px !important;
    white-space: nowrap;
  }

}

/* ============================================================================
   BLOCO 16   (2026-08-18, Dash Digital)
   Duas decisoes aprovadas pelo Luis:
     1. Os cartoes de numeros da /sobre-nos/ passam a uma coluna em telemovel.
     2. Cai o unico italico do site, que obrigava a descarregar uma segunda
        versao da Open Sans, 44,8 KB, em 20 das 26 paginas.
   ============================================================================ */


/* --- 2. O UNICO ITALICO DO SITE ---------------------------------------------
   A nota "*Chamada para a rede fixa nacional" do rodape era o unico texto
   inclinado do site (footer.css:119). Por causa dessa linha o browser pedia um
   segundo ficheiro da Open Sans, o italico, com 44,8 KB.

   Medido nos 26 relatorios do PageSpeed: 87,6 KB de Open Sans nas 20 paginas
   que mostram a nota, contra 42,8 KB nas outras seis. Ou seja, o italico e
   exatamente essa diferenca.

   O blockquote em italico da sobrenos.css:829 nao existe no HTML e nao ha um
   unico <em> nas paginas, por isso esta linha chega para o ficheiro deixar de
   ser pedido.

   Fica FORA da media query de propósito: o ficheiro tambem e descarregado em
   computador, e o objectivo e que deixe de ser pedido nas duas larguras.

   O "body" a frente e a regra da casa: seis paginas tem <style> dentro do PHP e
   sem ele a regra nao pegaria la. Aqui da 0,2,1 contra os 0,2,0 do footer.css,
   por isso ganha sem precisar de !important.
   -------------------------------------------------------------------------- */
body .location .note {
  font-style: normal;
}

/* A nota do rodape NAO era o unico italico, ao contrario do que dizia o dossie.
   Havia um segundo, e era esse que mantinha o ficheiro a ser descarregado: a
   linha de tranquilizacao do formulario, "Garantimos total privacidade e uma
   resposta no prazo maximo de 24 horas uteis", que vem dentro de um <em> em 19
   paginas de produto (template-parts/formulario-section.php, linha 76).

   Com o rodape ja direito, a /bilhetica/ continuava a carregar a Open Sans
   italica so por causa desta linha. Medido com document.fonts na pagina viva.

   O alcance e de proposito estreito, .form-left em, para nao apanhar dois
   casos legitimos: os <em> editoriais da /privacidade/ ("Ultima atualizacao:
   28 de julho de 2026") e o italico dos 111 artigos do blogue, onde a inclinacao
   e escolha de quem escreveu. */
body .form-left em {
  font-style: normal;
}


@media (max-width: 1023px) {

  /* --- 1. CARTOES DE NUMEROS DA /sobre-nos/ ---------------------------------
     Medido a 375 px: o bloco tem 345 px de largura e as duas colunas pediam
     416, por isso o cartao "+12.000" saia 71 px pela margem direita. E o unico
     defeito que se via de longe no telemovel.

     A causa NAO era uma coluna fixa de 200 px, como estava escrito no dossie.
     O CSS diz "1fr 1fr". Os 200 px sao o valor ja resolvido pelo browser, e o
     que o impede de encolher e o minimo do proprio cartao: o numero "+12.000"
     ocupa 121 px em Montserrat de 32 px, mais 32 px de folga de cada lado, dao
     185 px. Foi por isso que o min-width: 0 do bloco 10 nao resolveu nada: o
     limite esta no cartao e nao no contentor.

     Com uma coluna os cartoes ficam com os 345 px, "+27 Anos" cabe numa linha
     e o texto de baixo tambem. O bloco passa de 204 para 416 px de altura, ou
     seja 212 px a mais numa pagina de 12 300.

     A /sobre-nos/ e a unica pagina com .stats-left no HTML (a home.css tem
     regras para a classe mas a homepage nao tem o elemento), por isso esta
     regra nao toca em mais nenhuma pagina.
     ------------------------------------------------------------------------ */
  .stats-left {
    grid-template-columns: 1fr;
  }

}


/* ==========================================================================
   BLOCO 17   (2026-08-17, Dash Digital)
   O botao de acessibilidade tapava uma linha do aviso de consentimento.

   O QUE SE VIA. No aviso de cookies, em telemovel, a linha
       "Saiba mais na nossa Politica de Privacidade e Cookies"
   aparecia cortada a meio: o botao azul redondo do plugin
   accessibility-onetap ficava por cima da palavra "nossa". Fotografado a
   17/08/2026 num iframe de 390 px.

   A GEOMETRIA, medida. O botao esta fixo ao fundo com bottom: 0 e o
   margin-bottom: 84px que o bloco 9 lhe deu para nao colidir com a barra de
   accao. Ocupa portanto dos 84 aos 135 px acima do fundo do ecra. O aviso de
   consentimento ocupa dos 0 aos 252 px (320 px em ecras de 345 px de largura).
   Os dois vivem no mesmo espaco, e a faixa dos 84 aos 135 px calha em cima de
   uma linha de texto.

   PORQUE NAO SE MEXEU NO AVISO. A alternativa era dar padding-right ao texto
   do aviso. Rejeitada por duas razoes: encurtava o texto legal em 20% da
   largura, fazendo-o crescer duas linhas, e obrigava a mexer no bloco do
   consentimento, que e a ultima coisa que se quer tocar num site com RGPD.

   A CORRECCAO. Enquanto o aviso esta visivel, o botao sobe para cima dele.
   Assim que a pessoa aceita ou rejeita, volta sozinho aos 84 px. Ninguem perde
   o botao de acessibilidade, que e precisamente quem mais precisa de ler o
   aviso, e o texto legal fica inteiro.

   Os 335 px sao a altura maxima medida do aviso (320) mais folga. O seletor
   :has() ja e usado no bloco 13 para esconder a barra de accao neste mesmo
   estado, por isso nao acrescenta dependencia nova.
   ========================================================================== */

@media (max-width: 1023px) {

  body:has(#moove_gdpr_cookie_info_bar:not(.moove-gdpr-info-bar-hidden))
  .onetap-container-toggle .onetap-toggle {
    margin-bottom: 335px !important;
  }

}

/* ==========================================================================
   BLOCO 18 - A LETRA DOS CAMPOS E DOS BOTOES
   17/08/2026, Dash Digital, com decisao do Luis Fonseca.

   O PORQUE: o style.css do tema base (herdado do _s) declara
       body, button, input, select, optgroup, textarea
   com a pilha de letras do sistema (-apple-system, Segoe UI, Roboto...).
   O "body" acabou tapado pelo card.css, que vem depois e poe Montserrat, mas
   os CAMPOS e os BOTOES nunca foram tapados por ninguem. Resultado medido a
   17/08: 28 elementos com texto visivel fora da marca so na homepage, entre
   eles os 9 campos do formulario de contacto, o menu de seleccao, a caixa de
   mensagem e o botao de enviar. Ou seja, o formulario, que e a razao de ser
   deste site.

   A EXCEPCAO .secondary-button: e o botao "Assistencia Tecnica" do cabecalho.
   Esta no limite do espaco que tem, e em Open Sans passa de uma linha (136x22)
   para duas (86x38) nas 26 paginas. Fica de fora de proposito. Se algum dia se
   lhe der mais espaco, tira-se o :not() e ganha a letra da marca.

   O fit-content: o .button-form-contacto tem width 30%, que dao 190px, e o
   texto "Solicitar Orcamento" em Open Sans nao cabia la dentro - partia em
   duas linhas em 14 paginas de produto. Com fit-content o botao passa a 192px
   e fica numa linha. O min-width 30% garante que nunca fica mais pequeno do
   que estava.

   O @media min-width 769: abaixo dos 768px estes botoes tem width 100% de
   proposito, do formulario.css. Sem este @media, o fit-content anulava esse
   100% e o botao de enviar encolhia de 360px para 108px em telemovel.

   MEDIDO NAS 26 PAGINAS, a 390px e a 1521px, antes de instalar: zero quebras
   de linha, zero transbordos horizontais, alturas de pagina identicas ao pixel.
   So mudam larguras de botoes, que passam a acompanhar o texto.
   ========================================================================== */

button:not(.secondary-button),
input,
select,
optgroup,
textarea {
  font-family: 'Open Sans', sans-serif;
}

@media (min-width: 769px) {
  .button-form-contacto,
  .button-form-contacto-azul {
    width: fit-content;
    min-width: 30%;
  }
}

/* ==========================================================================
   BLOCO 19 - AS LARGURAS DO MEIO: TABLET E PORTATIL PEQUENO
   17/08/2026, Dash Digital, com decisao do Luis Fonseca.

   O PORQUE. A verificacao final das 26 paginas, feita a QUATRO larguras em vez
   das duas do costume, mostrou que 390 px e 1521 px estavam impecaveis e que a
   faixa do meio nunca tinha sido desenhada. O mobile-first vive em
   @media (max-width: 1023px) e o computador em @media (min-width: 1024px), e
   entre os 1024 e os 1222 o layout de computador simplesmente nao cabe.

   Dois defeitos, os dois anteriores a esta sessao (medidos com o bloco 18
   ligado e desligado: numeros identicos ao pixel).

   1. O TESTEMUNHO CORTADO, 18 paginas. O .section-testimonials e um flex com
      o cabecalho de 350px mais o cartao de 600px mais 100px de gap: 1050px
      rigidos com flex-wrap nowrap. Abaixo dos 768 ha um bloco que empilha
      tudo, mas entre 769 e cerca de 1035 nao ha nada, e o texto do testemunho
      ficava cortado a meio de cada linha. Fotografado a 768 px: o titulo saia
      "m os clientes" e a citacao acabava em "Com as solucoes Unibin".
      Aqui o cabecalho passa para cima, o cartao ocupa a largura toda e o
      avatar desce de 250 para 220px.

   2. O CABECALHO CORTADO, 26 paginas. Entre 1024 e cerca de 1207 de area util,
      o menu horizontal corta em "Notic..." e o botao "Assistencia Tecnica"
      fica 172px fora do ecra a 1024. Aqui o cabecalho volta ao hamburguer,
      que e o desenho que ja existe e esta aprovado, ate haver espaco a serio.

   OS 15 PIXEIS QUE FALTAVAM. As media queries medem a janela COM a barra de
   rolagem, e o clientWidth mede sem ela. Sao cerca de 15px de diferenca no
   Windows. Por isso os limites aqui sao 1080 e 1222, e nao 1035 e 1207: os
   segundos sao area util e os primeiros sao o que o CSS ve. Um limite de 1207
   deixava o botao a espreitar em janelas de 1200 de area util, que foi
   exactamente o que aconteceu ao medir.

   AS REGRAS DE COR DO HAMBURGUER estao repetidas aqui de proposito. As
   originais, dos pontos B e D do bloco 10, vivem dentro de
   @media (max-width: 1023px) e nao alcancam esta faixa nova. Sem elas o
   home.css volta a pintar o hamburguer de branco sobre fundo claro, que foi o
   defeito das 26 paginas de 17/08. Apanhado por fotografia, nao por medicao.

   MEDIDO a 768, 900, 1024, 1080, 1100, 1200, 1207, 1210, 1250 e 1521:
   zero transbordos em todas depois desta correccao, contra 21 a 1024 antes.
   ========================================================================== */

@media (min-width: 769px) and (max-width: 1080px) {
  body .section-testimonials { flex-direction: column; gap: 30px; align-items: center; padding: 40px 30px; }
  body .section-testimonials-header { flex: none; max-width: 100%; text-align: center; }
  body .section-testimonials-content { max-width: 100%; width: 100%; }
  body .section-testimonials-carousel { width: 100%; max-width: 100%; }
  body .section-testimonials-cards { width: 100%; max-width: 100%; }
  body .section-testimonials-card { width: 100%; max-width: 100%; height: auto; padding-right: 25px; box-sizing: border-box; }
  body .section-testimonials-text { min-width: 0; }
  body .section-testimonials-avatar { width: 220px; height: auto; flex-shrink: 0; }
  body .section-testimonials-avatar img { height: 100%; min-height: 320px; }
}

@media (min-width: 1024px) and (max-width: 1222px) {
  body .menu-toggle { display: flex; }
  body .header-container .secondary-button { display: none !important; }
  body .nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #00000027;
    transform: translateX(-100%);
    overflow-y: auto;
    z-index: 999;
  }
  body .nav__container { height: 400px; margin-top: -16px; background: #f2f2f2; }
  body .years-badge { display: none; }
  body .mobile-menu-image { display: block; }
  body .section-columns-wrapper { overflow-x: auto; }

  /* As cores do hamburguer, repetidas do bloco 10 porque as originais estao
     dentro de @media (max-width: 1023px) e nao chegam aqui. */
  body .menu-toggle__line { background-color: var(--text-primary); }
  body .menu-toggle.is-active .menu-toggle__line,
  body .menu-toggle.active .menu-toggle__line,
  body.header-white-top .site-header:not(.is-scrolled) .menu-toggle.is-active .menu-toggle__line,
  body.header-white-top .site-header:not(.is-scrolled) .menu-toggle.active .menu-toggle__line { background-color: var(--text-primary); }
}

/* ==========================================================================
   BLOCO 20 - AS IMAGENS DE LARGURA FIXA DA /parceria-lexmark/
   17/08/2026, Dash Digital.

   Foi a unica das 26 que sobrou com transbordo depois do bloco 19, porque tem
   folha propria (parcerias.css) e tres contentores de imagem em pixeis fixos:
   .top-image-container 1200px, .about-image dentro de uma coluna de grelha de
   800px fixos, e .right-image-container 713px.

   O caso do .about-image e o mais interessante e explica porque um
   max-width 100% nao chegava: a imagem esta dentro de
       .about-content { display: grid; grid-template-columns: 1fr 800px; }
   e 100% de uma coluna de 800px continua a ser 800px. So mudar a coluna para
   minmax(0, 800px) e que a deixa encolher.

   O parcerias.css ja tinha um @media (max-width: 1024px), mas as media queries
   medem a janela COM barra de rolagem: numa janela de 1039 com 1024 de area
   util esse bloco nao chega a aplicar-se. Dai o limite aqui ser 1222.

   MEDIDO a 768, 900, 1024, 1100, 1200 e 1521: de 4 transbordos a 1024 para
   zero em todas, com o 1521 intocado ao pixel (altura 7337 antes e depois).
   ========================================================================== */

@media (max-width: 1222px) {
  body .top-image-container,
  body .right-image-container,
  body .about-image,
  body .about-content { max-width: 100%; min-width: 0; }
  body .about-content { grid-template-columns: 1fr minmax(0, 800px); }
  body .top-image-container img,
  body .right-image-container img,
  body .about-image img { max-width: 100%; height: auto; }
}

/* ------------------------------------------------------------------
   TESTEMUNHOS: o cartao tinha altura fixa e apertava o texto.
   Dash Digital, 25/08/2026.

   O que estava mal:
   - .section-testimonials-card tinha height:400px fixo
   - .section-testimonials-avatar tinha height:426px, ou seja a foto
     ultrapassava o cartao em 26px (13 em cima, 13 em baixo)
   - o texto nao tinha espaco nenhum em cima nem em baixo
   A 1100px, o cartao do Pedro Oliveira (212 caracteres) ficava com
   23px entre o cargo e o fundo do cartao. Uma citacao um pouco maior
   e o cargo era cortado.

   O que passa a ser:
   - o cartao cresce com o texto, com 400px de minimo
   - a foto acompanha a altura do cartao em vez de a ultrapassar
   - o texto fica centrado na vertical, com 32px a respirar

   Porque esta dentro de @media (min-width:1081px):
   abaixo de 1081 ja existem regras proprias (as de telemovel ate 768
   e o remendo de 769 a 1080), e uma regra sem @media no fim do
   ficheiro mataria as regras moveis. Ja aconteceu duas vezes neste
   projeto e no do multimac.
   ------------------------------------------------------------------ */
@media (min-width: 1081px) {
  body .section-testimonials-card {
    height: auto;
    min-height: 400px;
    align-items: stretch;
  }
  body .section-testimonials-avatar {
    height: auto;
    align-self: stretch;
  }
  body .section-testimonials-avatar img {
    height: 100%;
    object-fit: cover;
  }
  body .section-testimonials-text {
    align-self: center;
    padding: 32px 0;
  }
}