/* ==========================================================================
   GlicoCure — substitui os widgets JS do Elementor que a cópia não trouxe.
   Carrossel: scroll-snap nativo.  FAQ: <details> nativo.  Vídeo: <video>.
   Zero dependência externa.
   ========================================================================== */

/* --------------------------------------------------- carrossel de sintomas */
.elementor-image-carousel-wrapper.swiper {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.elementor-image-carousel-wrapper.swiper::-webkit-scrollbar { display: none; }

.elementor-image-carousel.swiper-wrapper {
  display: flex;
  gap: 8px;
  transform: none !important;   /* mata o translate que o swiper deixaria */
  width: auto !important;
  /* o Elementor deixa center aqui, e aí cada card fica com uma altura */
  align-items: stretch !important;
}
.elementor-image-carousel .swiper-slide {
  flex: 0 0 calc(25% - 6px);
  width: auto !important;
  margin: 0 !important;
  scroll-snap-align: start;
}
@media (max-width: 1024px) { .elementor-image-carousel .swiper-slide { flex-basis: calc(50% - 4px); } }
@media (max-width: 767px)  { .elementor-image-carousel .swiper-slide { flex-basis: 86%; } }

/* No celular as setas comiam 60px de cada lado, e o card sobrava com 188px numa
   tela de 375. Some com elas: no toque o certo é arrastar, e o card vai a 288px. */
@media (max-width: 767px) {
  .elementor-swiper-button { display: none !important; }
  .elementor-element-463e5f0a,
  .elementor-image-carousel-wrapper.swiper { width: 100% !important; max-width: 100% !important; }
}

.elementor-image-carousel .swiper-slide img { width: 100%; height: auto; display: block; }

/* --------------------------------------------------- cards de sintoma */
/* Antes o texto vinha chapado dentro do .webp: trocar uma palavra exigia
   refazer a arte. Agora é HTML, e o ícone é SVG próprio (sem licença de
   banco de imagem). Editar = mexer no <h3>/<p> do index.html. */
/* Os slides precisam esticar, senão cada card fica com uma altura diferente.
   O CSS do swiper fixa a altura de cada slide no conteúdo dele, então não basta
   o stretch do wrapper: é preciso zerar essa altura e mandar o card ocupar 100%. */
.elementor-image-carousel .swiper-slide {
  display: flex;
  align-items: stretch;
  align-self: stretch !important;
  height: auto !important;
}

.gc-sintoma {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 26px 22px 28px;
  width: 100%;
  height: 100%;
  background: #FFFFFF;
  border: 1px solid #DCF2E3;
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(0, 70, 25, .07);
  transition: transform .2s ease, box-shadow .2s ease;
  /* o Elementor centraliza texto em alguns slides; aqui é sempre à esquerda */
  text-align: left !important;
}
.gc-sintoma * { text-align: left !important; }
.gc-sintoma:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(0, 70, 25, .13);
}
.gc-sintoma-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: #E9FBF0;
  color: #00A83C;            /* o SVG usa currentColor */
  flex: 0 0 auto;
}
.gc-sintoma-ico svg { width: 28px; height: 28px; }

.gc-sintoma-titulo {
  margin: 2px 0 0;
  font-family: "Sora", sans-serif;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.22;
  color: #143220;
}
.gc-sintoma-desc {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: #4A5C50;
}

@media (max-width: 767px) {
  .gc-sintoma { padding: 22px 18px 24px; }
  .gc-sintoma-titulo { font-size: 18px; }
}

/* setas */
.elementor-swiper-button {
  cursor: pointer;
  user-select: none;
  transition: opacity .2s ease;
}
.elementor-swiper-button[aria-disabled="true"] { opacity: .25; pointer-events: none; }

/* pontinhos */
.swiper-pagination { display: flex; justify-content: center; gap: 7px; margin-top: 14px; }
.swiper-pagination-bullet {
  width: 9px; height: 9px; border-radius: 50%;
  background: #c9d3cc; border: 0; padding: 0; cursor: pointer;
  transition: background .2s ease, width .2s ease;
}
.swiper-pagination-bullet-active { background: #00a83c; width: 22px; border-radius: 5px; }

/* --------------------------------------------------------------- FAQ */
/* o markup ja e <details>/<summary> nativo: so precisa de cursor e do giro do icone */
.e-n-accordion-item > summary { cursor: pointer; list-style: none; }
.e-n-accordion-item > summary::-webkit-details-marker { display: none; }
.e-n-accordion-item .e-opened { display: none; }
.e-n-accordion-item .e-closed { display: inline-flex; }
.e-n-accordion-item[open] .e-opened { display: inline-flex; }
.e-n-accordion-item[open] .e-closed { display: none; }

/* ------------------------------------------------------------------ hero */
/* O fundo virou gradiente verde (no post-1004.css) e o produto entrou como
   <img> de verdade, em vez de estar chapado dentro da imagem de fundo. Ganho:
   o produto acompanha o layout, e o texto nunca cai em cima dele. */
/* A coluna 6361d8a já existia vazia: era o espaço do produto na imagem de fundo,
   e é nela que os 2 badges ficam posicionados em absolute. A figure entrou lá
   dentro, então os badges continuam caindo sobre o produto como antes.
   O layout de colunas continua sendo o do Elementor: não mexemos nele. */
.elementor-element-6361d8a {
  position: relative;
  display: flex;
  align-items: center;      /* centra o produto na altura do hero */
  justify-content: center;
}

.gc-hero-produto {
  margin: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gc-hero-produto img {
  /* passa da largura da coluna de propósito: a imagem tem ar em volta e,
     no tamanho exato, o produto ficava pequeno perto do título */
  width: 116%;
  max-width: none;
  height: auto;
  object-fit: contain;
  /* sombra suave pro produto descolar do gradiente */
  filter: drop-shadow(0 22px 40px rgba(0, 60, 20, .26));
}

/* Os 2 badges estavam em px, mirando o produto da imagem de fundo antiga.
   Agora vão em %, sobre o produto novo, sem cobrir a marca nem o selo de 90 dias. */
.elementor-element-6361d8a > .elementor-element-3a038f28,   /* "resultados rápidos" */
.elementor-element-6361d8a > .elementor-element-66317027 {  /* "liberdade para viver" */
  position: absolute !important;
  z-index: 3;
}
.elementor-element-6361d8a > .elementor-element-3a038f28 {
  left: -6% !important; right: auto !important;
  top: 52% !important; bottom: auto !important;
}
.elementor-element-6361d8a > .elementor-element-66317027 {
  left: auto !important; right: 2% !important;
  top: 72% !important; bottom: auto !important;
}

@media (max-width: 767px) {
  .gc-hero-produto img { max-width: 88%; max-height: none; margin: 0 auto; }
  .elementor-element-6361d8a > .elementor-element-3a038f28 { left: 0 !important; top: 42% !important; }
  .elementor-element-6361d8a > .elementor-element-66317027 { right: 0 !important; top: 72% !important; }

  /* A FAIXA VERDE VAZIA embaixo do hero no celular.
     O template deixa min-height:902px neste container — altura herdada do
     desenho de desktop, onde o produto vinha chapado dentro da imagem de
     fundo e ocupava a tela toda. No celular o conteúdo termina em 691px,
     então sobravam 211px de verde sem nada, e a dobra parecia quebrada.
     Encolher aqui é seguro porque o fundo é linear-gradient, não foto: não
     existe enquadramento pra estragar, o degradê só repinta mais curto. */
  .elementor-element-396c4545 {
    min-height: 0 !important;
    padding-bottom: 32px !important;   /* respiro; sem isso o pote encosta na borda */
  }
}

/* ------------------------------------------ ícones dos 4 ativos da fórmula */
/* Eram PNGs de cúrcuma, Q10, colágeno e MSM — ativos do produto antigo. */
.gc-ativo-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 67px;
  height: 67px;
  border-radius: 16px;
  background: #E9FBF0;
  color: #00A83C;
  flex: 0 0 auto;
}
.gc-ativo-ico svg { width: 34px; height: 34px; }

/* Foto do ingrediente no lugar do ícone. Redonda porque o recorte é quadrado e
   as três fotos têm enquadramentos diferentes: o círculo uniformiza. */
/* o !important é necessário: o template tem `.elementor img { border-radius: 0 }`,
   que vence por especificidade e deixaria a foto quadrada */
img.gc-ativo-foto {
  width: 76px !important;
  height: 76px !important;
  border-radius: 50% !important;
  object-fit: cover;
  flex: 0 0 auto;
  border: 3px solid #E9FBF0 !important;
  box-shadow: 0 3px 10px rgba(0, 70, 25, .12);
  display: block;
  max-width: none;
}

/* --------------------------------- painel no lugar das 2 fotos de dor */
/* As fotos eram "dor no joelho" e "dor nas costas", em cards que falam de
   glicose e de fome. Até chegar foto do nicho, entra um painel da marca. */
.gc-painel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: 12px;
  background: linear-gradient(135deg, #22D662 0%, #00A83C 100%);
  color: #FFFFFF;
}
.gc-painel svg { width: 68px; height: 68px; opacity: .95; }

/* ------------------------------------------------- blob de fundo do template */
/* Era uma forma do site original (glicocure-blob.svg) sobreposta ao verde.
   Removida a pedido: as duas seções ficam com o verde limpo. Para trazer de
   volta, apagar este bloco. */
.elementor-element-2bf675a5::before,
.elementor-element-7db4b7a6::before {
  background-image: none !important;
}

/* -------------------------------------------------- ícones ✓ das listas */
/* Vinham no azul padrão do Elementor (#6EC1E4), que some sobre o verde.
   Sobre fundo verde ficam brancos; sobre fundo claro, no verde da marca.
   As listas do bloco "antes / depois" NÃO entram aqui: lá o ✓ verde e o ✗
   vermelho carregam significado. */
.elementor-element-42edc574 .elementor-icon-list-icon svg,   /* lista de sintomas */
.elementor-element-375b8522 .elementor-icon-list-icon svg,
.elementor-element-4e1517f0 .elementor-icon-list-icon svg,
.elementor-element-64ef4c75 .elementor-icon-list-icon svg,   /* badge kit 3 meses */
.elementor-element-695bebeb .elementor-icon-list-icon svg {  /* badge kit 6 meses */
  fill: #FFFFFF !important;
}

.elementor-element-1c790e12 .elementor-icon-list-icon svg,
.elementor-element-30e312f3 .elementor-icon-list-icon svg,
.elementor-element-592af0d6 .elementor-icon-list-icon svg,
.elementor-element-63fca4a  .elementor-icon-list-icon svg,
.elementor-element-6b533668 .elementor-icon-list-icon svg,
.elementor-element-6e21acc7 .elementor-icon-list-icon svg {
  fill: #00A83C !important;
}

/* Os ✓ também crescem: no tamanho original sumiam ao lado do texto. O Elementor
   controla isso por variável, então mexer só no width do svg não adianta. */
.elementor-element-42edc574 { --e-icon-list-icon-size: 21px !important; }
.elementor-element-42edc574 .elementor-icon-list-icon { align-self: flex-start; }

/* No "depois de algumas semanas" o ✓ é verde sobre card verde claro: dava 1,67.
   Escurece só o ícone (o verde ali significa "positivo", em par com o ✗ vermelho
   do card ao lado, então a cor não pode virar outra coisa). */
.elementor-element-69540952 .elementor-icon-list-icon svg { fill: #008A32 !important; }

/* ---------------------------------------------------- imagens dos 2 kits */
/* O Elementor dava larguras diferentes para cada card (420px x 532px), então o
   mesmo pote aparecia em tamanhos diferentes nos dois kits. Aqui os dois usam a
   mesma caixa, e as imagens já vêm com conteúdo do mesmo tamanho e canvas igual
   (1024x760), então o pote sai idêntico nos dois. */
img.gc-kit-img {
  width: 100% !important;
  max-width: 440px !important;
  height: auto !important;
  margin: 0 auto !important;
  display: block;
}
/* não basta a imagem: os containers dela também vinham com larguras próprias
   (no celular um card tinha 30px de padding lateral e o outro zero, e os
   wrappers internos herdavam larguras diferentes) */
.elementor-element-465a393,
.elementor-element-8d3bfe1 {
  padding-left: 26px !important;
  padding-right: 26px !important;
}
.elementor-element-348de6ff,
.elementor-element-8575940 {
  width: 100% !important;
  max-width: 100% !important;
}

/* os badges "KIT 6 MESES" / "KIT 3 MESES" ficavam em alturas diferentes porque
   cada card empurrava o seu; a altura mínima igual alinha os dois */
/* A causa real do desalinhamento: o template dava margin-top -37px ao badge de
   um kit e -92px ao do outro. Como o badge é o primeiro filho do card, esses
   55px de diferença empurravam TODO o conteúdo abaixo (potes, preço, botão).
   Mesmo valor nos dois, e o badge fica montado na borda do card. */
.elementor-element-20ac8ace,
.elementor-element-635b7788 {
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  margin-top: -18px !important;
  /* o template também dava margin-bottom 88px num e 45px no outro, o que
     deslocava potes, preço e botão em 43px entre os dois cards */
  margin-bottom: 56px !important;
}

/* O container dos 2 kits vinha com align-items:center, então cada card flutuava
   na própria altura: um começava 45px abaixo do outro e era 89px mais alto.
   Com stretch os dois passam a ter o mesmo topo e a mesma altura. */
.elementor-element-aa64026 { align-items: stretch !important; }
.elementor-element-465a393,
.elementor-element-8d3bfe1 { justify-content: flex-start !important; }

/* ------------------------------------------------------------ botões CTA */
/* O hero virou verde, e o botão verde sumia nele (contraste 1,09).
   Branco com texto verde resolve. A BORDA é obrigatória: sem ela, o mesmo
   botão sumiria nos blocos de fundo claro. Assim funciona nos dois fundos. */
.elementor-button,
.elementor-button-link,
a.elementor-button {
  background-color: #FFFFFF !important;
  background-image: none !important;
  color: #046B28 !important;
  border: 2px solid #00A83C !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .14) !important;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.elementor-button .elementor-button-text,
.elementor-button .elementor-button-content-wrapper,
.elementor-button span,
.elementor-button i,
.elementor-button svg { color: #046B28 !important; fill: #046B28 !important; }

.elementor-button:hover,
a.elementor-button:hover {
  background-color: #046B28 !important;
  color: #FFFFFF !important;
  transform: translateY(-1px);
}
.elementor-button:hover .elementor-button-text,
.elementor-button:hover span,
.elementor-button:hover i,
.elementor-button:hover svg { color: #FFFFFF !important; fill: #FFFFFF !important; }

/* ------------------------------------------------- botões de CHECKOUT */
/* Os botões acima são brancos porque 11 dos 12 são âncora (#oferta) e
   WhatsApp — navegação. Os que vão para o checkout são a ação que fatura, e
   ficam verdes SÓLIDOS para não competerem visualmente com os outros nove.

   CASA PELA CLASSE .gc-checkout, e isso é cicatriz de bug:
   a primeira versão casava pelo href (`[href*="pay.pagonpay.com"]`). Em
   09/08 o checkout mudou de PagON para Payt, o domínio saiu do href e os
   três botões voltariam a BRANCO sozinhos — sem erro, sem aviso, só a cor
   certa virando errada. Regra de estilo não pode depender de URL, que é
   justamente a parte que mais muda. A classe está nos 3 widgets no HTML.

   POR QUE O TEXTO SOBE PARA 19px, e não é capricho:
   branco sobre #00A83C dá contraste 3,15. A WCAG só aceita 3,0 quando o
   texto é "grande" — a partir de 14pt bold, ou seja 18,67px. Nos 15px do
   desktop (e nos 13px do mobile!) o mínimo exigido é 4,5 e o botão
   reprovava. A 19px bold o teto passa a ser 3,0 e os 3,15 passam.

   A outra saída seria fechar o verde para #046B28 (contraste 6,69), e ela
   foi DESCARTADA: o Pedro já reprovou escurecer a paleta uma vez. E não
   adianta trocar por outro verde aprovado — #00A83C já é o de maior
   contraste dos cinco (#02BB14 2,59 · #00C24A 2,38 · #31C73F 2,24 ·
   #5AD466 1,90). Dentro da paleta, aumentar o texto é o único caminho.
   Para um público diabético, com risco de retinopatia e perda de
   sensibilidade a contraste, texto MAIOR ajuda mais que verde mais fechado. */
.gc-checkout a.elementor-button {
  background-color: #00A83C !important;
  /* mesma cor da borda antiga só que preenchida: a caixa não muda de tamanho */
  border-color: #00A83C !important;
  color: #FFFFFF !important;
  font-size: 19px !important;
  font-weight: 700 !important;
}
.gc-checkout a.elementor-button .elementor-button-text,
.gc-checkout a.elementor-button .elementor-button-content-wrapper,
.gc-checkout a.elementor-button span,
.gc-checkout a.elementor-button i,
.gc-checkout a.elementor-button svg {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
  font-size: 19px !important;
}
/* hover fecha o verde. Aqui escurecer é permitido: é estado transitório, só
   existe no desktop, e SOBE o contraste do texto branco (3,15 → 6,69). */
.gc-checkout a.elementor-button:hover {
  background-color: #046B28 !important;
  border-color: #046B28 !important;
  color: #FFFFFF !important;
}

/* No mobile os dois botões de checkout nasciam com larguras diferentes —
   241px num card e 295px no outro — porque cada widget encolhia para o
   próprio conteúdo. Com 15px brancos ninguém percebia; preenchidos de
   verde, viram dois blocos irmãos visivelmente tortos. Além disso os 37px
   de padding lateral do template sobravam num card de 330px e empurravam o
   texto de 19px para 4 linhas num botão e 2 no outro.
   Largura travada em 100% do card + padding menor = os dois idênticos. */
@media (max-width: 767px) {
  .gc-checkout {
    width: 100% !important;
    max-width: 100% !important;
  }
  .gc-checkout a.elementor-button {
    display: block !important;
    width: 100% !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* --------------------------------------- botão do WhatsApp: INATIVO */
/* Pedido do Pedro em 09/08: "deixa ele do jeito que está, tudo bonitinho, só
   que quando clicar não acontece nada". O que desliga é a AUSÊNCIA de href
   no HTML — href="#" não serviria, pularia a página para o topo.
   Sem href o <a> perde o cursor de link, então ele volta aqui: a aparência
   e o hover ficam idênticos, exatamente como ele pediu. */
.gc-btn-inativo { cursor: pointer; }

/* ------------------------------------- bloco da garantia (Desafio 90 Dias) */
/* No celular o texto subia PARA DENTRO da foto: o badge "DESAFIO 90 DIAS" e a
   primeira linha de "Controle sua glicose ou não pague" caíam em cima da caixa
   dos Correios, e o resto sobrava no branco. Ficava sujo e ilegível.

   A causa são três coisas do template que só se combinam mal no celular:
     1. o container tem min-height:686px, altura pensada pro desktop;
     2. a foto é background-size:contain e a imagem é QUADRADA (900x900),
        então numa coluna de 350px ela desenha só 350px de altura — sobram
        336px de container sem foto nenhuma;
     3. o texto é filho desse container e está preso em justify-content:flex-end.
   Resultado: o texto encosta no rodapé dos 686px, ou seja, começa a 294px —
   56px ACIMA de onde a foto termina. Ninguém "posicionou" ele por cima; ele
   foi empurrado pra lá pela altura fixa.

   A correção é tirar a altura fixa e reservar, no topo, exatamente o espaço da
   foto. Como a imagem é 1:1 e o contain é limitado pela largura, esse espaço é
   igual à largura do container — daí o padding-top:100%, que em porcentagem se
   resolve sobre a largura. Os 18px extras são o respiro entre foto e badge.
   O CORTE VAI ATÉ 1024px, e não até 767px, de propósito: o Pedro reportou no
   celular, mas medindo os breakpoints o TABLET estava pior — em 768px e em
   1024px o bloco vira uma coluna só de 676px e o texto inteiro cai em cima da
   foto, ilegível do começo ao fim (o celular só perdia 56px). Mesmo defeito,
   mesma causa, só muda o tamanho do estrago. A partir de 1025px o layout vira
   duas colunas de verdade — foto à esquerda, texto à direita — e aí está certo,
   por isso a regra para aqui.

   COMO O ESPAÇO DA FOTO É RESERVADO, e por que não é `padding-top: 100%`:
   tentei isso primeiro e furou no tablet. Padding em porcentagem se resolve
   sobre a largura do CONTAINING BLOCK, que aqui é o pai (768px), não sobre a
   largura do próprio container (676px) — deu 786px de padding pra uma foto de
   676px. Além disso o template usa `background-position: 50% 50%` a partir de
   768px (no celular é 50% 0%), então a foto ainda descia pro meio e abria um
   vão branco no topo do card.
   A solução que fecha nos dois: um ::before com `aspect-ratio: 1` — a foto é
   quadrada (900x900) — que ocupa exatamente a caixa de conteúdo, mais
   `background-origin: content-box`, que faz o `contain` medir por essa MESMA
   caixa. Aí o espaço reservado e a foto desenhada têm sempre o mesmo tamanho,
   em qualquer largura, sem número mágico.
   ⚠️ Se trocarem gc-garantia-entrega.jpg por uma imagem que não seja quadrada,
   o `aspect-ratio: 1` vira `largura / altura` da nova imagem. */
@media (max-width: 1024px) {
  .elementor-element-a0c4033 {
    min-height: 0 !important;
    justify-content: flex-start !important;
    background-origin: content-box !important;
    background-position: 50% 0% !important;
  }
  .elementor-element-a0c4033::before {
    content: "";
    display: block;
    /* o template usa .e-con::before como overlay de fundo, com
       position:absolute e inset negativo. Absoluto NÃO ocupa espaço no fluxo,
       então sem devolver pra static o espaçador não empurraria nada e o texto
       continuaria colado no topo da foto. */
    position: static !important;
    inset: auto !important;
    width: 100%;
    aspect-ratio: 1 / 1;
    flex: none;              /* item de flex não pode ser espremido */
    margin-bottom: 18px;     /* respiro entre a foto e o badge */
  }
}

/* --------------------------------------------------- depoimentos em vídeo */
/* São 5 vídeos do YouTube do Pedro. NÃO entram como iframe direto: cinco
   players do YouTube custam alguns MB e dezenas de requisições, e esta página
   vive de tráfego pago — o custo cai em cima da taxa de rejeição.
   Entra uma CAPA local (images/gc-depoimento-N.jpg, já recortada em 9:16) e o
   player só nasce no clique. Enquanto ninguém clica, a página continua sem
   falar com o YouTube, que era a propriedade que a LP tinha antes. */
.gc-video-capa {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  padding: 0;
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #0d1a12;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.gc-video-capa img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .3s ease, filter .3s ease;
}
.gc-video-capa:hover img,
.gc-video-capa:focus-visible img { transform: scale(1.04); filter: brightness(.82); }
.gc-video-capa:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; }

.gc-video-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;   /* o clique é do botão, não do ícone */
}
.gc-video-play svg {
  width: 58px;
  height: 58px;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .5));
  transition: transform .2s ease;
}
.gc-video-capa:hover .gc-video-play svg { transform: scale(1.09); }

/* o iframe que substitui a capa no clique */
.gc-video {
  width: 100%;
  aspect-ratio: 9 / 16;
  display: block;
  border: 0;
  border-radius: 14px;
  background: #0d1a12;
}

/* ------------------------------- e-mail de suporte: escondido por enquanto */
/* O Pedro ainda não definiu o e-mail e quis publicar já. Deixar
   "TROCAR-EMAIL-SUPORTE@glicocure.com.br" visível numa página de tráfego pago
   é pior que não ter linha nenhuma, então o <li> inteiro (com o ícone) sai.
   PRA VOLTAR: trocar o placeholder pelo e-mail real no index.html e apagar
   esta regra. São os 2 <li> com a classe gc-email-pendente — bloco da
   garantia e rodapé. */
.gc-email-pendente { display: none !important; }

/* ================================================================ */
/*  CELULAR: piso de legibilidade                                    */
/* ================================================================ */
/* O template foi desenhado pra desktop e o Elementor guarda um tamanho
   de fonte POR BREAKPOINT. No celular vários blocos caíram para 8–12px,
   e o mesmo texto aparece em tamanhos diferentes dependendo de onde está:
   "Fórmula 100% natural e aprovado pela anvisa" existe em 10px, 11px e
   12px em pontos distintos da página. Não é escolha de design, é sobra
   da conversão automática.

   Isso pesa mais aqui do que pesaria em outra LP: o público é diabético,
   com risco alto de retinopatia. Texto de 8px não é "pequeno", é ilegível.
   Não dá pra resolver com uma regra só: CSS não tem "font-size mínimo", e
   uma regra ampla ENCOLHERIA o que já está bom. Então vai por widget, com
   os IDs que a varredura apontou. */
@media (max-width: 767px) {

  /* --- corpo de texto que ficou em 12–14px --------------------- */
  .elementor-element-37d3334a p,      /* garantia: parágrafo principal   */
  .elementor-element-3255d9fc p,      /* "É simples: ou sua glicose..."  */
  .elementor-element-160228b8 p,      /* "A fórmula exclusiva atua em..."*/
  .elementor-element-59a2e1ca p,      /* "Se alguma dessas situações..." */
  .elementor-element-45cd82eb p,      /* resposta da FAQ                 */
  .elementor-element-6e6dbf6f p,      /* "Tire todas as suas dúvidas..." */
  .elementor-element-4fed4a22 .elementor-icon-list-text,   /* lista ANTES */
  .elementor-element-69540952 .elementor-icon-list-text {  /* lista DEPOIS*/
    font-size: 15.5px !important;
    line-height: 1.55 !important;
  }

  /* --- a linha do preço à vista: é preço, tem que ler ---------- */
  .elementor-element-27c0dd00 p,
  .elementor-element-11d8536 p {
    font-size: 15.5px !important;
  }

  /* --- selo "Fórmula 100% natural": 6 lugares, 5 tamanhos ------ */
  .elementor-element-63fca4a  .elementor-icon-list-text,
  .elementor-element-592af0d6 .elementor-icon-list-text,
  .elementor-element-375b8522 .elementor-icon-list-text,
  .elementor-element-4e1517f0 .elementor-icon-list-text,
  .elementor-element-6e21acc7 .elementor-icon-list-text,
  .elementor-element-1c790e12 .elementor-icon-list-text {
    font-size: 13.5px !important;
    line-height: 1.4 !important;
  }

  /* --- o pior caso: o selo da garantia estava em 8px ----------- */
  .elementor-element-66179af4 p {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  /* --- botões -------------------------------------------------- */
  /* Os de âncora estavam em 14px e o do WhatsApp em 10px. Ficam em 16px:
     legíveis, e ainda ABAIXO dos 19px dos botões de checkout, que é o
     degrau de hierarquia que separa "navegar" de "comprar". */
  .elementor-element-24e54d65 .elementor-button-text,
  .elementor-element-7ca807ed .elementor-button-text,
  .elementor-element-7e7255e  .elementor-button-text {
    font-size: 16px !important;
  }

  /* --- descrição dos cards de sintoma -------------------------- */
  .gc-sintoma-desc { font-size: 15px; line-height: 1.5; }
}

/* ---------------------------------- CELULAR: uma margem só pra tudo */
/* O template guarda largura e margem POR WIDGET, e no celular cada bloco
   herdou um recuo diferente. No hero o título começa em x=20 e a legenda
   em x=28; noutra seção a diferença entre irmãos chega a 31px. Como quase
   tudo é texto centralizado, o olho não vê "recuo": vê o texto quebrando
   em pontos que não conversam entre si, e a coluna parecendo torta.
   Aqui todo widget de texto ocupa a largura do container, e quem manda no
   respiro lateral passa a ser o padding da seção — um valor só.

   Ficam de fora os widgets de IMAGEM: os dois badges do hero ("resultados
   rápidos" / "liberdade para viver") são imagens posicionadas em absolute
   sobre o pote, e esticar eles para 100% jogaria os dois fora do lugar. */
@media (max-width: 767px) {
  .elementor-widget-text-editor,
  .elementor-widget-heading,
  .elementor-widget-icon-list,
  .elementor-widget-button {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* -------------------- CELULAR: dois blocos que ficaram tortos */
/* 1) "Como você está hoje" / "Depois de algumas semanas de uso".
   Os dois containers vêm do template com padding-left:30px e
   padding-right:0. Como a seção já dá 20px de cada lado, o texto acabava
   com 50px à esquerda e 20px à direita — 30px de diferença, e a coluna
   inteira parecendo empurrada pra direita. Zerado: quem define o respiro
   passa a ser só o padding da seção. */
@media (max-width: 767px) {
  .elementor-element-15f4a835,
  .elementor-element-17b712ae {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* 2) Os 4 cards de ativo (berberina, ácido alfa-lipoico, cromo, Q10).
   O primeiro nascia com 308px e os outros três com 292,6px: quatro irmãos
   empilhados, um deles 16px mais largo. Empilhados um sobre o outro, essa
   diferença é justamente a que o olho pega.
   Todos passam a ocupar a largura do container, então ficam idênticos em
   qualquer tela — e de quebra ganham os ~58px que estavam sobrando de
   recuo, o que ajuda no texto do ativo. */
@media (max-width: 767px) {
  .elementor-element-7e8bbcd1 .elementor-widget-image-box {
    width: 100% !important;
    max-width: 100% !important;
  }
}