/* ==========================================================================
   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);
  }
}