/* ========================================
   TEMA ETHOS — camada de integração com o Elementor

   Duas funções:
   1. tirar do caminho o que o Elementor põe em volta dos nossos widgets
   2. vestir o formulário do Elementor Pro com o design system do tema,
      já que o markup do formulário é dele e as classes não são as nossas
   ======================================== */

/* ── Wrapper dos widgets do tema ──
   As seções já trazem o próprio espaçamento; qualquer caixa em volta
   quebraria o fundo de largura total. */
[class*="elementor-widget-ethos-"] > .elementor-widget-container {
  padding: 0;
  margin: 0;
}

/* Um container com padding desloca o cálculo do .ethos-full.
   Esta regra devolve o alinhamento quando o padding é pequeno. */
.elementor-element > .elementor-widget-container > .ethos-full {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* No editor o Elementor redesenha as seções depois que o script de entrada
   já rodou: sem isto, tudo que tem animação de entrada fica invisível. */
body.elementor-editor-active .fade-in,
body.elementor-editor-active .fade-in-left,
body.elementor-editor-active .fade-in-right,
body.elementor-editor-active .fade-in-up,
body.elementor-editor-active .cta-spin { opacity: 1 !important; transform: none !important; }
body.elementor-editor-active .timeline::before,
body.elementor-editor-active .timeline-item::before { transform: none !important; }

/* Dentro de um container de largura total (é assim que as páginas são
   montadas), a seção já ocupa a tela: usa 100% do container em vez de
   100vw. No Windows, 100vw inclui a barra de rolagem e empurrava o
   conteúdo 7px para baixo dela. O escape por 100vw fica só como reserva
   para quando o widget cai num container encaixotado. */
.e-con-full > .elementor-element > .ethos-full,
.e-con-full > .elementor-element > .elementor-widget-container > .ethos-full,
/* No editor, a seção de largura total precisa caber na área de trabalho. */
body.elementor-editor-active .ethos-full,
body.elementor-editor-preview .ethos-full {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* ════════════════════════════════════════
   FORMULÁRIO
   O formulário é um modelo do Elementor (Elementor → Modelos) e traz o
   próprio visual: card, título, campos e botão são ajustados lá, nos
   controles de estilo e no CSS personalizado do modelo. O tema não
   força nada aqui de propósito: assim, editar o modelo muda o
   formulário em todas as páginas.
   ════════════════════════════════════════ */
.ethos-form { min-width: 0; }
/* A seta do botão vem do CSS do modelo (::after com a fonte Phosphor, que
   chega depois do primeiro paint). Com a caixa fixa em 1em, o texto do botão
   não anda quando a fonte carrega. */
.ethos-form .elementor-button-content-wrapper::after,
.elementor-element-orcwrap .elementor-button-content-wrapper::after { width: 1em; flex: none; }
.ethos-form > .ethos-form-titulo { font-size: 1.5rem; line-height: 1.2; color: var(--primary); margin: 0 0 8px; }
.ethos-form > .ethos-form-texto { color: var(--text-secondary); font-size: 15px; line-height: 1.7; margin: 0 0 26px; }

/* ════════════════════════════════════════
   BLINDAGEM CONTRA O CSS GLOBAL DO ELEMENTOR

   O Elementor tem ".elementor img { height:auto; max-width:100%;
   border-radius:0 }" — especificidade maior que ".about-photo" e igual
   a ".product-card-media img". Resultado: foto que não preenche a caixa,
   CTA quadrado, miniatura cortada. E o Kit global pode estilizar TODO
   <button> (raio, padding, cor), o que desmonta galeria, FAQ e menu.
   As regras abaixo têm especificidade suficiente para vencer os dois.
   ════════════════════════════════════════ */

/* ── Imagens que precisam preencher a caixa ── */
.elementor .about-photo,
.elementor .feature-photo,
.elementor .product-card-media img,
.elementor .pd-gallery-main img,
.elementor .pd-thumb img,
.elementor .cta-image-circle img {
  width: 100%;
  height: 100%;
  max-width: none;
}
.elementor .cta-image-circle img { border-radius: 50%; object-fit: cover; }

/* ── Botões dos componentes: nunca herdam o estilo global de botão ── */
body button.pd-thumb,
body button.faq-question,
body button.hamburger,
body button.mobile-close,
body button.mobile-group-toggle {
  border-radius: 0;
  box-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  min-height: 0;
  line-height: normal;
}
body button.pd-thumb {
  padding: 0;
  background: var(--bg-light);
  border: 2px solid var(--border);
  border-radius: 3px;
  width: 100%;
}
body button.pd-thumb:hover,
body button.pd-thumb.active { border-color: var(--accent); background: var(--bg-light); }
body button.faq-question {
  padding: 22px 28px;
  background: var(--white);
  color: var(--text);
  border: none;
  font-size: 17px;
  font-weight: 600;
}
body button.faq-question:hover,
body button.faq-question:focus { background: var(--white); color: var(--primary); }
body button.hamburger { background: none; border: none; padding: 8px; }
body button.mobile-close {
  padding: 0;
  border: none;
  background: var(--bg-light);
  border-radius: var(--radius-sm);
  color: var(--text);
}
body button.mobile-close:hover { background: var(--primary-lighter); color: var(--primary); }
body button.mobile-group-toggle { background: none; border: none; padding: 14px 16px; color: var(--text); }
@media (max-width: 768px) {
  body button.faq-question { padding: 18px 20px; font-size: 15px; }
}