/* ====================================================================
 * CSS mobile — Córtex Level
 * Correções específicas para breakpoints ≤1024px / ≤767px
 * ==================================================================== */

/* ── 1. HEADER MOBILE ─────────────────────────────────────────────── */
@media (max-width: 1024px) {

  /* Esconde o header Elementor (ID + classe para garantir) */
  #pxl-header-elementor,
  .pxl-header-elementor,
  .pxl-header-elementor-sticky { display: none !important; }

  /* Remove o max-width e padding do container Bootstrap dentro do header mobile */
  #pxl-header-main > .container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  #pxl-header-main .container > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }

  /* Barra mobile: full-width, altura consistente */
  .pxl-header-mobile-default {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 0 16px !important;
    height: 64px !important;
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.08) !important;
    box-sizing: border-box !important;
  }

  #pxl-header-mobile { position: relative !important; z-index: 9999 !important; }
  #pxl-header-main   { padding: 0 !important; margin: 0 !important; }

  /* Dropdown de idioma no mobile */
  .pxl-header-mobile-default .cortex-lang-wrap    { position: relative !important; }
  .pxl-header-mobile-default .cortex-lang-dropdown {
    right: 0 !important; left: auto !important;
    top: calc(100% + 6px) !important; z-index: 99999 !important;
  }
}


/* ── 2. HERO — desativa animação ani3 que duplica o texto no mobile ── */
@media (max-width: 767px) {
  /* A classe ani3 usa ::before/::after para o efeito hover;
     no mobile isso fica "presa" mostrando ambos os estados */
  .pxl-icon-box.ani3 .pxl-item--title::before,
  .pxl-icon-box.ani3 .pxl-item--title::after,
  .pxl-icon-box.ani3 .pxl-item--meta::before,
  .pxl-icon-box.ani3 .pxl-item--meta::after,
  .pxl-icon-box.ani3 .pxl-item--inner::before,
  .pxl-icon-box.ani3 .pxl-item--inner::after {
    display: none !important;
    content: none !important;
  }
  .pxl-icon-box.ani3 {
    transform: none !important;
    animation: none !important;
  }
}

/* ── 3. SEÇÃO "POR QUE ESCOLHER" — esconde gráfico no mobile ──────── */
@media (max-width: 767px) {
  .elementor-element-b941349 { display: none !important; }
}


/* ── 3. SETAS DE NAVEGAÇÃO — acima do carrossel (serviços e equipe) ── */
@media (max-width: 767px) {

  /* Espaço no topo de cada slider para as setas */
  .pxl-service-carousel,
  .pxl-team-carousel1 {
    position: relative !important;
    padding-top: 56px !important;
  }

  /* Arrow-wrap: centralizado horizontalmente no espaço acima do carrossel */
  .pxl-service-carousel .pxl-swiper-arrow-wrap,
  .pxl-team-carousel1  .pxl-swiper-arrow-wrap {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    position: absolute !important;
    top: 8px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    transform: none !important;
  }

  /* Botões circulares — cor navy #121C27 */
  .pxl-service-carousel .pxl-swiper-arrow,
  .pxl-team-carousel1  .pxl-swiper-arrow {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    border: 1.5px solid #121C27 !important;
    background: transparent !important;
    cursor: pointer !important;
    opacity: 1 !important;
    visibility: visible !important;
    flex-shrink: 0 !important;
    transition: background .2s !important;
  }

  .pxl-service-carousel .pxl-swiper-arrow:active,
  .pxl-team-carousel1  .pxl-swiper-arrow:active {
    background: rgba(18,28,39,.08) !important;
  }

  /* Stroke das setas na cor navy */
  .pxl-service-carousel .pxl-swiper-arrow svg path,
  .pxl-team-carousel1  .pxl-swiper-arrow svg path {
    stroke: #121C27 !important;
  }

  /* Seta "anterior" aponta para a esquerda — o SVG já é um chevron ← */
  .pxl-service-carousel .pxl-swiper-arrow-prev svg,
  .pxl-team-carousel1  .pxl-swiper-arrow-prev svg {
    transform: none !important;
    display: block !important;
  }

  /* Seta "próximo" vira o SVG horizontalmente → */
  .pxl-service-carousel .pxl-swiper-arrow-next svg,
  .pxl-team-carousel1  .pxl-swiper-arrow-next svg {
    transform: scaleX(-1) !important;
    display: block !important;
  }

  /* SVG menor dentro dos botões */
  .pxl-service-carousel .pxl-swiper-arrow svg,
  .pxl-team-carousel1  .pxl-swiper-arrow svg {
    width: 12px !important;
    height: 24px !important;
  }

  /* Botão desabilitado — mais transparente */
  .pxl-service-carousel .pxl-swiper-arrow.swiper-button-disabled,
  .pxl-team-carousel1  .pxl-swiper-arrow.swiper-button-disabled {
    opacity: 0.25 !important;
    cursor: default !important;
  }
}


/* ── 4. EQUIPE — 1 card por vez, horizontal, imagem proporcional ───── */
@media (max-width: 767px) {

  .pxl-team-carousel1 .pxl-swiper-slide {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
  }

  .pxl-team-carousel1 .pxl-item--inner {
    max-width: 280px !important;
    margin: 0 auto !important;
    width: 100% !important;
  }

  .pxl-team-carousel1 .pxl-item--image img {
    width: 100% !important;
    height: auto !important;
  }
}