/* Comportamentos e correções locais por seção. Cascata na mesma ordem dos links WordPress originais. */

/* O hero posiciona imagens decorativas (wp-image-988272/988664) além da viewport; isso criava largura rolável
   à direita. A contenção fica na própria seção do hero, sem recortar o body. */
.elementor-19 .elementor-element.elementor-element-f1dea62 {
  overflow-x: clip;
}

@media (min-width: 1025px) {
  header[data-elementor-id="151"] {
    width: 100%;
    max-width: 100vw;
  }
}

/* Header em 1025-1280 px: o container interno tem largura fixa de 1280px (--width) e estourava a viewport,
   cortando logo e botão "Solicitar demonstração". Limita à largura disponível; em >=1280 nada muda. */
@media (min-width: 1025px) and (max-width: 1280px) {
  .elementor-151 .elementor-element.elementor-element-b14f08b {
    --width: 100%;
    max-width: 100%;
  }
}

/* Origem: /css/behaviors.css */
/* Complementos de interação da cópia estática. Regras visuais do original ficam intactas. */
[data-menu][hidden] {
  display: none !important;
}

[data-menu]:not([hidden]) {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  left: var(--menu-left, 0) !important;
  top: 100% !important;
  width: var(--menu-width, 100%) !important;
  --menu-height: 100vh;
}

@media (max-width: 1024px) {
  header[data-elementor-id="151"] {
    position: sticky;
    top: 0;
    z-index: 9999;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-19 .elementor-element.elementor-element-2e30490 > .elementor-container {
    width: 100% !important;
    max-width: calc(100vw - 60px) !important;
  }

  .elementor-19 .elementor-element.elementor-element-6b2fc09 .elementor-tabs {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .elementor-19 .elementor-element.elementor-element-6b2fc09 .elementor-tabs-wrapper {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background-color: #000 !important;
  }

  .elementor-19 .elementor-element.elementor-element-6b2fc09 .elementor-tab-desktop-title {
    margin-bottom: 0 !important;
    padding-left: 25px !important;
  }

  .elementor-19 .elementor-element.elementor-element-6b2fc09 .elementor-tab-content.elementor-active {
    height: calc(100% + 20px) !important;
    padding-top: 0 !important;
    padding-left: 62px !important;
    margin-bottom: -10px !important;
  }

  .elementor-19 .elementor-element.elementor-element-6b2fc09 .elementor-tab-content.elementor-active > p:first-of-type img {
    transform: translateX(-6px);
  }

  .elementor-19 .elementor-element.elementor-element-6b2fc09 .elementor-tab-content.elementor-active > p:nth-of-type(2) {
    transform: translateX(-3px);
  }
}

@media (min-width: 1025px) {
  .elementor-19 .elementor-element.elementor-element-3a6da72 .elementor-element-d4221bb .elementor-tabs-content-wrapper {
    min-height: 407px !important;
  }
}


/* Origem: /css/fix-s12.css */
/* s12: reproduz os espaçamentos desktop da referência de 1440px.
   O CSS responsivo do tema reduzia o padding das abas e do painel. */
@media (min-width: 1025px) {
  .elementor-19 .elementor-element.elementor-element-3a6da72 .elementor-element-d4221bb .elementor-tab-desktop-title {
    text-align: center !important;
    padding: 30px 20px 49px;
  }

  .elementor-19 .elementor-element.elementor-element-3a6da72 .elementor-element-d4221bb .elementor-tab-content {
    padding: 20px 40px 40px;
  }

}


/* Origem: /css/fix-s04.css */
/* s04: a referência desktop capturou o fadeIn em opacidade 0.73.
 * Preserva essa composição no recorte de QA sem mudar geometria ou mobile.
 * Mantido neste arquivo dedicado para a consolidação do integrador.
 */
/* QA 2026-10-05: removido o opacity 0.73 forçado (fadeIn congelado da captura) — a seção a723aaa (CTA "Solicitar uma demonstração") agora renderiza com opacidade 1. */


/* Origem: /css/fix-1440-rodape.css */
/* Sem overrides: o CSS original do Elementor já reproduz o rodapé em 1440px. */


/* Seção s11 — faixa tablet Elementor (768–1024px). */
/* Origem consolidada: /css/fix-768-s11.css */
@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-19 .elementor-element.elementor-element-6b2fc09 .elementor-tab-content.elementor-active {
    padding-left: 55.359375px !important;
    padding-right: 40.265625px !important;
    border-radius: 50px !important;
  }

  .elementor-19 .elementor-element.elementor-element-6b2fc09 .elementor-tab-content.elementor-active > p:first-of-type img {
    transform: none !important;
  }

  .elementor-19 .elementor-element.elementor-element-6b2fc09 #elementor-tab-content-1121 img {
    height: 177.734375px;
  }

  .elementor-19 .elementor-element.elementor-element-6b2fc09 .elementor-tab-content.elementor-active > p:nth-of-type(2) {
    transform: none !important;
  }
}


/* Origem: SPEC-HARDENING etapa 4.1 — skip link (acessibilidade), invisível até receber foco por teclado. */
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100000;
  padding: 10px 16px;
  background: #fff;
  color: #000;
  font: 600 16px/1.2 "Poppins";
  border-radius: 4px;
  transform: translateY(-200%);
}
.skip-link:focus {
  transform: none;
  outline: 2px solid #000;
}

/* Origem: SPEC-HARDENING etapa 4 — foco visível só por teclado (:focus-visible não aparece em clique). */
.elementor-tab-title:focus-visible,
.elementor-toggle-title:focus-visible,
.elementor-menu-toggle:focus-visible,
#main:focus-visible {
  outline: 2px solid #1a73e8;
  outline-offset: 2px;
}
#main:focus { outline: none; }


/* Foco visível por teclado nos campos dos formulários e botões de envio (o tema remove o outline). */
.elementor-field:focus,
.elementor-field:focus-visible,
.elementor-form .elementor-button:focus-visible,
.elementor-nav-menu--dropdown a:focus-visible,
.elementor-nav-menu a:focus-visible,
.elementor-widget-testimonial-carousel .swiper:focus-visible {
  outline: 2px solid #1a73e8 !important;
  outline-offset: 2px;
}

/* Aviso de estado do formulário estático: fica em largura total, abaixo do botão, e nunca é recortado. */
.elementor-form [data-form-status] {
  display: block;
  clear: both;
  width: 100%;
  box-sizing: border-box;
  margin: 12px 0 0;
  padding: 10px 14px;
  border-radius: 8px;
  background: #fff3cd;
  color: #3d2f00;
  font: 500 14px/1.4 "Poppins", sans-serif;
}
.elementor-form [data-form-status][hidden] { display: none; }

/* Carrossel de depoimentos: arrastar/deslizar como no original (Swiper com cursor grab). */
.elementor-widget-testimonial-carousel .swiper { touch-action: pan-y; }
.elementor-widget-testimonial-carousel .swiper-wrapper { user-select: none; }

/* ===== QA 2026-10-05 — correções de UI/UX (ver docs/lp-extracao/qa-2026-10-05/RELATORIO.md) ===== */

/* Header tablet/landscape (768-1024 px): o padding-top era 0 e o logo ficava colado no topo, com o círculo
   cortado e desalinhado do botão de menu. Mesmo padding-top do header mobile (10px). */
@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-151 .elementor-element.elementor-element-8eb08ae {
    padding-top: 5px;
  }

  .elementor-151 .elementor-element.elementor-element-8eb08ae > .elementor-container > .elementor-column > .elementor-widget-wrap {
    align-content: center;
    align-items: center;
  }

  .elementor-151 .elementor-element.elementor-element-4064a2d .elementor-menu-toggle {
    transform: translateY(-8px);
  }
}

/* Header desktop estreito (1025-1280 px): sem respiro lateral, o logo encostava/cortava na borda esquerda e o
   botão "Solicitar demo" na direita. Padding lateral de 30px e botão sem quebra de linha. */
@media (min-width: 1025px) and (max-width: 1280px) {
  .elementor-151 .elementor-element.elementor-element-b14f08b {
    padding-inline: 30px;
  }

  .elementor-151 .elementor-element.elementor-element-0d0062e {
    --width: auto;
    flex: 0 0 auto;
  }

  .elementor-151 .elementor-element.elementor-element-0d0062e .elementor-button {
    white-space: nowrap;
  }

  .elementor-151 .elementor-element.elementor-element-0d0062e .vamtam-btn-text {
    white-space: nowrap;
  }
}

/* Mobile: letter-spacing de -2px em títulos de 26-28px fazia as palavras colarem ("Nósatendemos o seu").
   Reduz o aperto e devolve um respiro entre palavras, sem mudar tamanho nem texto. */
@media (max-width: 767px) {
  main h2.elementor-heading-title {
    letter-spacing: -0.02em;
    word-spacing: 0.06em;
  }

  /* Placeholder do WhatsApp era cortado ("WhatsApp (00) 00000-00") em 360-390 px. */
  .elementor-form .elementor-field-textual::placeholder {
    font-size: 14px;
  }
}

/* Alvos de toque: caixas de seleção de "Pedidos por dia" e links do rodapé ficavam com 13px / 26-29px. */
.elementor-field-type-checkbox .elementor-field-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
}

.elementor-field-type-checkbox .elementor-field-option input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0;
}

.elementor-field-type-checkbox .elementor-field-option label {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
}

a[href^="mailto:"] {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

a.elementor-button[href^="https://api.whatsapp.com"] {
  min-height: 44px;
}

/* QA header-fix-2: the desktop capture has a fixed section with auto width.
   Give every capture the same viewport-wide mobile header after resize. */
@media (max-width: 1024px) {
  header[data-elementor-id="151"],
  .elementor-151 .elementor-element.elementor-element-842aeea {
    width: 100%;
    max-width: 100%;
  }
}

/* Preserve the complete phone hint in narrow forms without changing its text. */
@media (max-width: 416px) {
  .elementor-form .elementor-field-textual {
    padding-inline: 8px !important;
  }
  .elementor-form .elementor-field-textual::placeholder {
    font-size: 12px;
  }
  .elementor-19 .elementor-element.elementor-element-b323039 > .elementor-widget-container {
    padding-inline: 0 !important;
  }
}

@media (max-width: 320px) {
  .elementor-form input[placeholder^="    Seu WhatsApp"] {
    padding-inline: 0 !important;
  }
  .elementor-form input[placeholder^="    Seu WhatsApp"]::placeholder {
    font-size: 11px;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-form .elementor-field-textual::placeholder {
    font-size: 14px;
  }
}

/* GEO A5 (2026-10-05): árvore de headings semântica. Cards, subtítulo e CTA deixaram de ser h5/h4 com
   aria-level="3" e viraram h3 reais; contador e título do formulário deixaram de ser h3 (agora div).
   As regras abaixo repetem, com a mesma especificidade do tema (0,1,1), os estilos que o kit aplicava a
   h5/h4/h3 para que o visual fique idêntico. */
.elementor-kit-10 h3:where(.geo-h5){color:var(--e-global-color-vamtam_accent_6);font-family:var(--e-global-typography-vamtam_h5-font-family),Sans-serif;font-size:var(--e-global-typography-vamtam_h5-font-size);font-weight:var(--e-global-typography-vamtam_h5-font-weight);text-transform:var(--e-global-typography-vamtam_h5-text-transform);font-style:var(--e-global-typography-vamtam_h5-font-style);line-height:var(--e-global-typography-vamtam_h5-line-height);letter-spacing:var(--e-global-typography-vamtam_h5-letter-spacing)}
.elementor-kit-10 h3:where(.geo-h4){color:var(--e-global-color-vamtam_accent_6);font-family:var(--e-global-typography-vamtam_h4-font-family),Sans-serif;font-size:var(--e-global-typography-vamtam_h4-font-size);font-weight:var(--e-global-typography-vamtam_h4-font-weight);text-transform:var(--e-global-typography-vamtam_h4-text-transform);line-height:var(--e-global-typography-vamtam_h4-line-height);letter-spacing:var(--e-global-typography-vamtam_h4-letter-spacing)}
.elementor-kit-10 div:where(.geo-h3){color:var(--e-global-color-vamtam_accent_6);font-family:var(--e-global-typography-vamtam_h3-font-family),Sans-serif;font-size:var(--e-global-typography-vamtam_h3-font-size);font-weight:var(--e-global-typography-vamtam_h3-font-weight);text-transform:var(--e-global-typography-vamtam_h3-text-transform);font-style:var(--e-global-typography-vamtam_h3-font-style);line-height:var(--e-global-typography-vamtam_h3-line-height);letter-spacing:var(--e-global-typography-vamtam_h3-letter-spacing)}

/* GEO A4: bloco citável (definição, para quem é, diferenciais) na seção #sobre */
.geo-definicao ul{list-style:disc;margin:0 0 0 1.2em;padding:0}
.geo-definicao li{margin:0 0 .4em}
.geo-definicao p{margin:0 0 .8em}
.elementor-19 .elementor-element.geo-definicao{margin-top:16px;text-align:start;font-family:"Poppins",Sans-serif;font-size:16px;font-weight:400;text-transform:none;line-height:1.5em}
/* FAQ: link para a página de perguntas frequentes, abaixo dos 4 itens da home */
.faq-ver-todas{margin:28px 0 0;text-align:center;font-family:"Poppins",Sans-serif;font-size:16px;font-weight:600}
.faq-ver-todas a{color:#600E8F;text-underline-offset:4px}
.faq-ver-todas a:hover,.faq-ver-todas a:focus-visible{color:#430E61}