/* ================================================================
   Polvo Criativo — Sistema Responsivo v4
   
   Tema (main.css) define nativamente:
     base:   type-01/02 = 220×266px | type-03 = 300×200px
     768px:  type-01 = 280×337px    | type-03 = 360×237px
     1200px: type-01 = 280×340px    | type-02 = 500×640px | type-03 = 440×290px
     1600px: type-01 = 400×480px    | type-02 = 760×940px | type-03 = 620×420px

   Estratégia:
     ≥ 1600px : escalar ACIMA dos valores nativos com vw
     1200–1599: deixar tema actuar — não sobrescrever
     1025–1199: afinar zona de transição
     ≤ 1024px : controlo total — tablet/mobile
     ≤ 768px  : mobile — 2 imagens lado a lado em cada row
   ================================================================ */

html, body   { max-width: 100vw; overflow-x: hidden; }
img          { max-width: 100%; height: auto; }
.mxd-container { box-sizing: border-box; }

/* ================================================================
   IMAGENS HERO — ESCALAR ACIMA DOS VALORES NATIVOS EM DESKTOP
   ================================================================ */

/* 2K / Ultra-wide ≥ 1920px — escalar bastante acima do 1600px do tema */
@media (min-width: 1920px) {
  .mxd-hero-02-image__inner.type-01 { width: clamp(520px, 27vw, 700px)  !important; height: clamp(640px, 34vw, 860px)  !important; }
  .mxd-hero-02-image__inner.type-02 { width: clamp(900px, 48vw, 1200px) !important; height: clamp(1100px, 60vw, 1500px) !important; }
  .mxd-hero-02-image__inner.type-03 { width: clamp(720px, 38vw, 960px)  !important; height: clamp(480px, 26vw, 640px)  !important; }
}

/* Desktop largo 1600–1919px — escalar um pouco acima do tema (tema = 400/760/620px) */
@media (min-width: 1600px) and (max-width: 1919px) {
  .mxd-hero-02-image__inner.type-01 { width: clamp(460px, 26vw, 560px)  !important; height: clamp(560px, 32vw, 680px)  !important; }
  .mxd-hero-02-image__inner.type-02 { width: clamp(820px, 46vw, 960px)  !important; height: clamp(1020px, 57vw, 1200px) !important; }
  .mxd-hero-02-image__inner.type-03 { width: clamp(680px, 38vw, 800px)  !important; height: clamp(460px, 26vw, 540px)  !important; }
}

/* Desktop 1200–1599px — escalar acima do tema (tema = 280/500/440px) */
@media (min-width: 1200px) and (max-width: 1599px) {
  .mxd-hero-02-image__inner.type-01 { width: clamp(340px, 24vw, 440px)  !important; height: clamp(420px, 30vw, 540px)  !important; }
  .mxd-hero-02-image__inner.type-02 { width: clamp(560px, 40vw, 720px)  !important; height: clamp(720px, 52vw, 920px)  !important; }
  .mxd-hero-02-image__inner.type-03 { width: clamp(480px, 34vw, 600px)  !important; height: clamp(320px, 23vw, 400px)  !important; }
}

/* Transição 1025–1199px */
@media (min-width: 1025px) and (max-width: 1199px) {
  .mxd-hero-02-image__inner.type-01 { width: clamp(240px, 20vw, 300px)  !important; height: clamp(290px, 25vw, 370px)  !important; }
  .mxd-hero-02-image__inner.type-02 { width: clamp(420px, 36vw, 520px)  !important; height: clamp(540px, 46vw, 660px)  !important; }
  .mxd-hero-02-image__inner.type-03 { width: clamp(360px, 31vw, 460px)  !important; height: clamp(240px, 21vw, 310px)  !important; }
}

/* Tablet 769–1024px */
@media (min-width: 769px) and (max-width: 1024px) {
  .mxd-hero-02-image__inner.type-01 { width: clamp(180px, 22vw, 240px)  !important; height: clamp(220px, 28vw, 300px)  !important; }
  .mxd-hero-02-image__inner.type-02 { width: clamp(320px, 38vw, 420px)  !important; height: clamp(410px, 48vw, 540px)  !important; }
  .mxd-hero-02-image__inner.type-03 { width: clamp(280px, 33vw, 380px)  !important; height: clamp(190px, 22vw, 260px)  !important; }
}

/* ================================================================
   MOBILE — HERO IMAGENS: SEGUIR ESTILO DESKTOP (FLUXO NATURAL)
   2 imagens lado a lado dentro de cada row, como no desktop
   ================================================================ */

@media (max-width: 768px) {
  /* Row: flex wrap — 2 imagens por linha, 3ª vai para baixo centrada */
  .mxd-hero-02-images__row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 0.7rem !important;
    align-items: flex-start !important;
    justify-content: center !important;
  }

  /* Cada imagem: metade da largura menos metade do gap */
  .mxd-hero-02-image__portrait,
  .mxd-hero-02-image__landscape {
    flex: 0 0 calc(50% - 0.35rem) !important;
    width: calc(50% - 0.35rem) !important;
    max-width: calc(50% - 0.35rem) !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* O inner preenche a largura do contentor */
  .mxd-hero-02-image__inner {
    width: 100% !important;
    border-radius: var(--_radius-m) !important;
    overflow: hidden !important;
  }

  /* Alturas proporcionais — portrait mais alto, landscape mais baixo */
  .mxd-hero-02-image__inner.type-01 { height: 56vw !important; max-height: 260px !important; }
  .mxd-hero-02-image__inner.type-02 { height: 70vw !important; max-height: 320px !important; }
  .mxd-hero-02-image__inner.type-03 { height: 42vw !important; max-height: 200px !important; }

  /* Espaço de scroll — 3 rows × mais imagens por row */
  .mxd-hero-02-scroll__wrap { padding: 0 1rem !important; padding-bottom: 420vh !important; }
  .mxd-hero-02-scroll__images { gap: 1.2rem !important; }
}

/* Mobile pequeno ≤ 480px */
@media (max-width: 480px) {
  .mxd-hero-02-images__row { gap: 0.5rem !important; }
  .mxd-hero-02-image__portrait,
  .mxd-hero-02-image__landscape {
    flex: 0 0 calc(50% - 0.25rem) !important;
    width: calc(50% - 0.25rem) !important;
    max-width: calc(50% - 0.25rem) !important;
  }
  .mxd-hero-02-image__inner.type-01 { height: 58vw !important; max-height: 230px !important; }
  .mxd-hero-02-image__inner.type-02 { height: 72vw !important; max-height: 280px !important; }
  .mxd-hero-02-image__inner.type-03 { height: 44vw !important; max-height: 180px !important; }
  .mxd-hero-02-scroll__wrap { padding: 0 0.8rem !important; padding-bottom: 400vh !important; }
}

/* ================================================================
   IMAGENS VALORES (about-us) — mxd-values__image
   ================================================================ */

@media (min-width: 1920px) {
  .mxd-values__image                     { height: clamp(700px, 38vw, 900px) !important; }
  .mxd-values__image.image-large-desktop { height: clamp(800px, 44vw, 1100px) !important; }
}
@media (min-width: 1600px) and (max-width: 1919px) {
  .mxd-values__image                     { height: clamp(600px, 36vw, 780px) !important; }
  .mxd-values__image.image-large-desktop { height: clamp(700px, 44vw, 1000px) !important; }
}
@media (min-width: 1200px) and (max-width: 1599px) {
  .mxd-values__image.image-large-desktop { height: clamp(700px, 54vw, 940px) !important; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .mxd-values__image                     { height: clamp(320px, 42vw, 460px) !important; }
  .mxd-values__image.image-large-desktop { height: clamp(400px, 52vw, 560px) !important; }
}
@media (min-width: 481px) and (max-width: 768px) {
  .mxd-values__image                     { height: clamp(240px, 48vw, 360px) !important; border-radius: var(--_radius-m) !important; }
  .mxd-values__image.image-large-desktop { height: clamp(300px, 58vw, 440px) !important; }
}
@media (max-width: 480px) {
  .mxd-values__image                     { height: clamp(200px, 55vw, 300px) !important; border-radius: var(--_radius-m) !important; }
  .mxd-values__image.image-large-desktop { height: clamp(240px, 65vw, 360px) !important; }
}

/* ================================================================
   BANNERS DIVISORES — mxd-divider__image
   ================================================================ */

@media (min-width: 1920px)                         { .mxd-divider__image { height: clamp(700px, 40vw, 1000px) !important; } }
@media (min-width: 1600px) and (max-width: 1919px) { .mxd-divider__image { height: clamp(600px, 40vw, 800px)  !important; } }
@media (min-width: 1200px) and (max-width: 1599px) { .mxd-divider__image { height: clamp(500px, 40vw, 700px)  !important; } }
@media (min-width: 769px) and (max-width: 1024px)  { .mxd-divider__image { height: clamp(280px, 38vw, 400px)  !important; } }
@media (min-width: 481px) and (max-width: 768px)   { .mxd-divider__image { height: clamp(200px, 40vw, 300px)  !important; } }
@media (max-width: 480px)                          { .mxd-divider__image { height: clamp(160px, 44vw, 220px)  !important; } }

/* ================================================================
   PADDING VERTICAL — SECÇÕES
   ================================================================ */

@media (min-width: 1920px) {
  .mxd-section.padding-default   { padding-bottom: 14rem !important; }
  .mxd-section.padding-pre-title { padding-bottom: 10rem !important; }
  .mxd-section.padding-mtext     { padding-bottom: 10rem !important; }
}
@media (min-width: 1025px) and (max-width: 1279px) {
  .mxd-section.padding-default        { padding-bottom: 9rem !important; }
  .mxd-section.padding-pre-title      { padding-bottom: 7rem !important; }
  .mxd-section.padding-mtext          { padding-bottom: 6rem !important; }
  .mxd-section.padding-grid-pre-mtext { padding-bottom: 5rem !important; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .mxd-section.padding-default        { padding-top: 6rem  !important; padding-bottom: 6rem !important; }
  .mxd-section.padding-pre-title      { padding-top: 0     !important; padding-bottom: 0    !important; }
  .mxd-section.padding-mtext          { padding-top: 3rem  !important; padding-bottom: 3rem !important; }
  .mxd-section.padding-grid-pre-mtext { padding-top: 0     !important; padding-bottom: 3rem !important; }
  .mxd-section-inner-headline         { padding-top: 1.6rem !important; padding-bottom: 0   !important; }
}
@media (min-width: 481px) and (max-width: 768px) {
  .mxd-section                        { padding-top: 4.8rem !important; padding-bottom: 4.8rem !important; }
  .mxd-section-inner-headline         { padding-top: 1.6rem !important; padding-bottom: 0    !important; }
  .mxd-section.padding-default        { padding-top: 4rem   !important; padding-bottom: 4rem  !important; }
  .mxd-section.padding-pre-title      { padding-top: 0      !important; padding-bottom: 0     !important; }
  .mxd-section.padding-mtext          { padding-top: 2rem   !important; padding-bottom: 2rem  !important; }
  .mxd-section.padding-grid-pre-mtext { padding-top: 0      !important; padding-bottom: 2rem  !important; }
}
@media (max-width: 480px) {
  .mxd-section                        { padding-top: 3.2rem !important; padding-bottom: 3.2rem !important; }
  .mxd-section-inner-headline         { padding-top: 1.2rem !important; padding-bottom: 0      !important; }
  .mxd-section.padding-default        { padding-top: 2.8rem !important; padding-bottom: 2.8rem !important; }
  .mxd-section.padding-pre-title      { padding-top: 0      !important; padding-bottom: 0      !important; }
  .mxd-section.padding-mtext          { padding-top: 1.6rem !important; padding-bottom: 1.6rem !important; }
  .mxd-section.padding-grid-pre-mtext { padding-top: 0      !important; padding-bottom: 1.6rem !important; }
}

/* ================================================================
   CONTENTOR — padding lateral
   ================================================================ */
@media (max-width: 480px)                          { .mxd-container { padding: 0 1.6rem !important; } }
@media (min-width: 481px) and (max-width: 768px)   { .mxd-container { padding: 0 2.4rem !important; } }
@media (min-width: 769px) and (max-width: 1024px)  { .mxd-container { padding: 0 3rem   !important; } }
@media (min-width: 1025px) and (max-width: 1279px) { .mxd-container { padding: 0 4rem   !important; } }
@media (min-width: 1920px)                         { .mxd-container { padding: 0 10rem  !important; max-width: 1920px !important; margin: 0 auto !important; } }

/* ================================================================
   CTA SPLIT (laranja + foto)
   ================================================================ */
@media (min-width: 769px) and (max-width: 1024px) {
  .mxd-cta-split-row  { flex-direction: row !important; min-height: 360px !important; border-radius: var(--_radius-m) !important; }
  .mxd-cta-split-left { flex: 0 0 55% !important; padding: 4rem 3rem !important; }
  .mxd-cta-split-left p { font-size: clamp(2.6rem, 3.5vw, 4rem) !important; margin-bottom: 2.4rem !important; }
  .mxd-cta-split-right { flex: 0 0 45% !important; }
}
@media (min-width: 481px) and (max-width: 768px) {
  .mxd-cta-split-row  { flex-direction: column !important; border-radius: var(--_radius-m) !important; }
  .mxd-cta-split-left { flex: 0 0 100% !important; width: 100% !important; padding: 3.2rem 2.8rem !important; }
  .mxd-cta-split-left p { font-size: clamp(2.4rem, 5.5vw, 3.4rem) !important; margin-bottom: 2.4rem !important; }
  .mxd-cta-split-right { flex: 0 0 100% !important; width: 100% !important; min-height: 240px !important; }
}
@media (max-width: 480px) {
  .mxd-cta-split-row  { flex-direction: column !important; border-radius: var(--_radius-s) !important; }
  .mxd-cta-split-left { flex: 0 0 100% !important; width: 100% !important; padding: 2.8rem 2rem !important; }
  .mxd-cta-split-left p { font-size: clamp(2rem, 7vw, 2.8rem) !important; margin-bottom: 2rem !important; }
  .mxd-cta-split-right { flex: 0 0 100% !important; width: 100% !important; min-height: 200px !important; }
}

/* ================================================================
   LAYOUT GERAL — footer, ícones, works, carrossel
   ================================================================ */
@media (min-width: 769px) and (max-width: 1024px) { .footer-3col { grid-template-columns: 1fr 1fr !important; gap: 2.4rem !important; } }
@media (max-width: 768px)                          { .footer-3col { grid-template-columns: 1fr     !important; gap: 2.8rem !important; } }

@media (min-width: 769px)                          { .icons-grid { grid-template-columns: 1fr 1fr 1fr !important; } }
@media (min-width: 481px) and (max-width: 768px)   { .icons-grid { grid-template-columns: 1fr 1fr   !important; gap: 2rem !important; } }
@media (max-width: 480px)                          { .icons-grid { grid-template-columns: 1fr       !important; gap: 1.6rem !important; } }

@media (max-width: 768px) {
  .mxd-works-list .col-sm-6,
  .mxd-works-list .col-md-4,
  .mxd-works-list .col-lg-4 { width: 100% !important; max-width: 100% !important; }
  .row { margin-left: 0 !important; margin-right: 0 !important; }
  h1, h2, h3 { word-break: break-word; hyphens: auto; }
}

@media (max-width: 480px)                          { .proj-slide img { max-height: 220px !important; } }
@media (min-width: 481px) and (max-width: 768px)   { .proj-slide img { max-height: 320px !important; } }
@media (min-width: 769px) and (max-width: 1024px)  { .proj-slide img { max-height: 480px !important; } }

@media (max-width: 480px)                          { .inner-headline__title { font-size: clamp(2.8rem, 9vw, 4rem) !important; word-break: break-word; hyphens: auto; } }
@media (min-width: 481px) and (max-width: 768px)   { .inner-headline__title { font-size: clamp(3.2rem, 8vw, 5rem) !important; } }

/* ================================================================
   SECÇÃO MARCAS — 2 colunas no mobile
   (overrides adicionais ao bloco inline do index.html)
   ================================================================ */

/* ================================================================
   LOGO E HEADER — PÁGINAS INTERNAS (fundo claro)
   Nas páginas internas o header tem fundo claro; o logo e o botão
   de idioma devem usar cores escuras para ter contraste.
   ================================================================ */

/* Páginas internas: logo sempre visível (escuro) */
body.inner-page .mxd-logo__image,
.inner-page-content ~ * .mxd-logo__image,
.mxd-header .mxd-logo__image {
  /* O tema pode tentar tornar o logo branco com filtros; forçar sem filtro */
  filter: none !important;
}

/* Botão PT|EN: nas páginas internas (não home, não projecto) forçar cor escura */
.inner-page-content #lang-switcher,
body:not(.home-page) .mxd-header__controls #lang-switcher {
  color: #1a1a1a !important;
}

/* ================================================================
   BOTÃO WHATSAPP
   ================================================================ */
@media (max-width: 480px)                          { a[href*="wa.me"] { bottom: 1.2rem !important; right: 1.2rem !important; width: 4.4rem !important; height: 4.4rem !important; } }
@media (min-width: 481px) and (max-width: 768px)   { a[href*="wa.me"] { bottom: 1.6rem !important; right: 1.6rem !important; width: 4.8rem !important; height: 4.8rem !important; } }