/* Correção de responsividade — os 3 blocos abaixo (cabeçalho, barra
   "Excellent/Trustpilot" e barra "produtos/APR") só ficavam em linha
   no mobile (@media max-width:767px). No desktop/tablet caiam para
   --flex-direction:column, empilhando logo/ícones/selos verticalmente.
   Aqui replicamos o mesmo layout em linha para telas >= 768px. */

@media (min-width: 768px) {
  .elementor-11 .elementor-element.elementor-element-cf58daf {
    --flex-direction: row;
    --container-widget-width: calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );
    --container-widget-height: 100%;
    --container-widget-flex-grow: 1;
    --container-widget-align-self: stretch;
    --flex-wrap: wrap;
    --justify-content: space-between;
    --align-items: center;
    --gap: 16px 32px;
    --row-gap: 16px;
    --column-gap: 32px;
  }

  .elementor-11 .elementor-element.elementor-element-946da79 {
    --flex-direction: row;
    --container-widget-width: calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );
    --container-widget-height: 100%;
    --container-widget-flex-grow: 1;
    --container-widget-align-self: stretch;
    --flex-wrap: wrap;
    --justify-content: center;
    --align-items: center;
    --gap: 12px 24px;
    --row-gap: 12px;
    --column-gap: 24px;
  }

  .elementor-11 .elementor-element.elementor-element-1827cad {
    --flex-direction: row;
    --container-widget-width: initial;
    --container-widget-height: 100%;
    --container-widget-flex-grow: 1;
    --container-widget-align-self: stretch;
    --flex-wrap: wrap;
    --justify-content: space-between;
    --align-items: center;
  }
}

/* Segurança geral: nada deve criar rolagem horizontal em nenhuma largura */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
img, svg, video {
  max-width: 100%;
  height: auto;
}

/* Largura de leitura mais confortável no desktop.
   Por padrão o Elementor limita o conteúdo de cada seção a 1140px
   (--content-width: min(100%, var(--container-max-width, 1140px))),
   o que deixa o parágrafo da Descrição com linhas enormes numa tela
   larga. Reduzimos o teto global e devolvemos 100% só nos blocos do
   "hero" (galeria + caixa de preço), que passam a ocupar sua própria
   coluna no grid abaixo. */
@media (min-width: 1025px) {
  :root {
    --container-max-width: 1000px;
  }

  .elementor-11 .elementor-element.elementor-element-fc859cb,
  .elementor-11 .elementor-element.elementor-element-f004ad0,
  .elementor-11 .elementor-element.elementor-element-1827cad {
    --content-width: 100%;
  }

  /* Hero em 2 colunas: galeria de imagens à esquerda, título + caixa
     de preço/CTA à direita — layout clássico de página de produto,
     em vez de tudo empilhado ocupando a tela inteira em altura. */
  .elementor-11 {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
    column-gap: 48px;
    align-items: start;
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: 40px;
  }

  .elementor-11 > .elementor-element-cf58daf { grid-column: 1 / -1; grid-row: 1; }
  .elementor-11 > .elementor-element-f3c9c79 { grid-column: 1 / -1; grid-row: 2; }
  .elementor-11 > .elementor-element-022747e { grid-column: 1 / -1; grid-row: 3; }

  .elementor-11 > .elementor-element-fc859cb { grid-column: 1; grid-row: 4 / 6; }
  .elementor-11 > .elementor-element-f004ad0 { grid-column: 2; grid-row: 4; }
  .elementor-11 > .elementor-element-1827cad { grid-column: 2; grid-row: 5; align-self: start; }

  .elementor-11 > .elementor-element-270e791 { grid-column: 1 / -1; grid-row: 6; }
  .elementor-11 > .elementor-element-1c87a6f { grid-column: 1 / -1; grid-row: 7; }
  .elementor-11 > .elementor-element-3f86548 { grid-column: 1 / -1; grid-row: 8; }
  .elementor-11 > .elementor-element-7375e74 { grid-column: 1 / -1; grid-row: 9; }
}