/* Ajustes exclusivos da pagina inicial em telas pequenas. */
@media (min-width: 1200px) {
  .indexpage #swiper-blog .conheca__container__swiper__wrapper__slide {
    width: 33.333333% !important;
  }
}

@media (min-width: 1200px) {
  .indexpage #swiper-paineus .painel-pedidos__swiper__wrapper__slide {
    width: calc((100% - 40px) / 3) !important;
    transform: none !important;
    opacity: 1;
  }

  .indexpage #swiper-paineus .painel-pedidos__swiper__wrapper__slide.swiper-slide-active {
    transform: none !important;
  }
}

/* Painel de pedidos abaixo de 1200px: UM print por vez, ocupando a tela.
   Sao capturas de tela do painel - dividida em 3 (ou espiando as vizinhas) nao
   da para ler nada nesse tamanho. O slide ativo tinha transform: scale(1.3),
   mas o Swiper poe overflow:hidden no container e o slide era cortado nas
   bordas; aqui nada e escalado, o slide simplesmente ocupa 100% da largura. */
@media (max-width: 1199.98px) {
  .indexpage #swiper-paineus.painel-pedidos__swiper {
    width: 100%;
    margin: 0;
  }

  .indexpage #swiper-paineus .painel-pedidos__swiper__wrapper {
    align-items: center;
  }

  /* Nem largura nem transform aqui: quem dimensiona o slide e o Swiper
     (slidesPerView: 1), e e essa medida que ele usa para montar o snapGrid do
     centeredSlides - mexer nela desalinha o carrossel. O limite visual vai na
     imagem, que nao entra nessa conta. */
  .indexpage #swiper-paineus .painel-pedidos__swiper__wrapper__slide {
    height: auto;
    min-height: 0;
    /* padding vertical = folga para a sombra nao ser cortada pelo overflow */
    padding: 16px 15px;
    opacity: 1;
    transform: none !important;
  }

  .indexpage #swiper-paineus .painel-pedidos__swiper__wrapper__slide img {
    display: block;
    width: min(100%, 700px);
    height: auto;
    margin: 0 auto;
    aspect-ratio: 750 / 421;
    object-fit: cover;
    border-radius: 14px;
    opacity: 1;
    transform: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .16);
  }
}

@media (max-width: 767.98px) {
  .indexpage .painel-pedidos {
    padding: 28px 0 34px;
  }

  .indexpage .painel-pedidos__titulo {
    padding: 10px 18px 22px;
    font-size: clamp(25px, 7.2vw, 33px);
    line-height: 1.12;
    text-wrap: balance;
  }
}

@media (max-width: 640px) {
  .aumente-vendas.aumente-vendas--conversao { padding: 52px 0 64px; }
  .aumente-vendas.aumente-vendas--conversao .aumente-vendas__container { width: calc(100% - 32px); gap: 34px; }
  .aumente-vendas.aumente-vendas--conversao .aumente-vendas__container__right { width: 100%; text-align: left; }
  .aumente-vendas.aumente-vendas--conversao .aumente-vendas__container__right__cabecalho__titulo { font-size: clamp(34px, 10vw, 42px); line-height: 1; }
  .aumente-vendas.aumente-vendas--conversao .aumente-vendas__container__right__cabecalho__subtitulo { margin-top: 16px; font-size: 17px; line-height: 1.42; }
  .aumente-vendas.aumente-vendas--conversao .aumente-vendas__container__right__lista { width: 100%; max-width: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 28px; align-items: stretch; }
  .aumente-vendas.aumente-vendas--conversao .aumente-vendas__container__right__lista .card-venda { width: auto !important; min-width: 0 !important; min-height: 118px; height: 118px; margin: 0 !important; padding: 13px 8px; border-radius: 14px; }
  .aumente-vendas.aumente-vendas--conversao .aumente-vendas__container__right__lista .card-venda:nth-child(1),
  .aumente-vendas.aumente-vendas--conversao .aumente-vendas__container__right__lista .card-venda:nth-child(2),
  .aumente-vendas.aumente-vendas--conversao .aumente-vendas__container__right__lista .card-venda:nth-child(3) { margin: 0 !important; }
  .aumente-vendas.aumente-vendas--conversao .aumente-vendas__container__right__lista .card-venda__image { width: 28px; height: 28px; margin-bottom: 9px; }
  .aumente-vendas.aumente-vendas--conversao .aumente-vendas__container__right__lista .card-venda__titulo { font-size: 22px; }
  .aumente-vendas.aumente-vendas--conversao .aumente-vendas__container__right__lista .card-venda__subtitulo { margin-top: 5px; font-size: 10px; line-height: 1.2; }
  .aumente-vendas.aumente-vendas--conversao .aumente-vendas__container__left { width: 100%; max-width: none; }
  .aumente-vendas.aumente-vendas--conversao .aumente-vendas__container__left .form-custom-contato-vendas { width: 100%; padding: 25px 18px; border-radius: 18px; }

  .conheca__container__titulo { padding: 14px 0 20px; font-size: clamp(28px, 8vw, 34px); line-height: 1.08; }
}

/* Blog "Conheca mais do pedizap" abaixo de 1200px.
   Os cards do desktop usam transform/margin negativa para o efeito inclinado -
   com 1 ou 2 colunas isso jogava a imagem e o texto para fora do .conheca
   (que e overflow:hidden) e as setas caiam por cima dos cards. Aqui o card
   vira um retangulo simples e as setas vao para baixo do carrossel. */
@media (max-width: 1199.98px) {
  .conheca__container { padding-right: 16px !important; padding-left: 16px !important; }
  .conheca__container__swiper { position: relative; padding: 12px 0 82px; }
  .conheca__container__swiper__wrapper { align-items: stretch; }
  .conheca__container__swiper__wrapper__slide { height: auto; padding: 0; }
  .conheca__container__swiper__wrapper__slide .card-conheca { height: 100%; transform: none; }
  .conheca__container__swiper__wrapper__slide .card-conheca__container-image img { width: 100%; margin-left: 0; transform: none; }
  .conheca__container__swiper__wrapper__slide .card-conheca__texto { gap: 16px; padding: 27px 25px; margin-top: 0; }
  .conheca__container__swiper__wrapper__slide .card-conheca__texto__titulo,
  .conheca__container__swiper__wrapper__slide .card-conheca__texto__description,
  .conheca__container__swiper__wrapper__slide .card-conheca__texto__name-data { min-height: 0; margin-left: 0; transform: none; }
  .conheca__container__swiper .swiper-button-prev-blog,
  .conheca__container__swiper .swiper-button-next-blog { position: absolute !important; z-index: 20; top: auto !important; bottom: 10px !important; width: 50px; height: 50px; margin: 0; cursor: pointer; pointer-events: auto !important; touch-action: manipulation; }
  .conheca__container__swiper .swiper-button-prev-blog { left: calc(50% - 61px) !important; }
  .conheca__container__swiper .swiper-button-next-blog { right: calc(50% - 61px) !important; }
}

/* EDIT CARDAPIO - as bolhas decorativas devem ficar atras do numero (01/02/03).
   Elas sao posicionadas em pixels fixos, medidos no layout de desktop, entao
   nos tamanhos menores escorregavam para cima do texto do card. */
@media (min-width: 769px) and (max-width: 1199.98px) {
  .indexpage .edit-cardapio__container__right__lista .card-edicao {
    gap: 22px;
  }

  .indexpage .edit-cardapio__container__right__lista .card-edicao__img-absolute {
    width: 92px;
  }

  .indexpage .edit-cardapio__container__right__lista .card-edicao:nth-child(1) .card-edicao__img-absolute,
  .indexpage .edit-cardapio__container__right__lista .card-edicao:nth-child(3) .card-edicao__img-absolute {
    left: 10px;
  }

  .indexpage .edit-cardapio__container__right__lista .card-edicao:nth-child(2) .card-edicao__img-absolute {
    left: 0;
  }
}

/* No celular os cards viram coluna e a bolha do terceiro caia na linha do
   titulo - os outros dois ja sobem, este ficou para tras. */
@media (max-width: 768px) {
  .indexpage .edit-cardapio__container__right__lista .card-edicao:nth-child(3) .card-edicao__img-absolute {
    top: -46px;
  }
}

/* DESAFIOS - o PNG do fundo e esticado (object-fit: cover) para a altura
   inteira da secao. Como no tablet/celular a secao fica muito mais alta, a onda
   do topo crescia na mesma proporcao e passava por cima do titulo. Aqui a
   imagem volta a altura natural - a onda fica proporcional a largura, colada no
   topo - e o roxo segue ate o fim da secao pelo background, com a mesma
   gradacao da base do PNG. */
@media (max-width: 992px) {
  .indexpage .desafios {
    background: linear-gradient(90deg, #6300C0 0%, #7001DA 10%, #8201FC 25%, #8201FC 100%);
  }

  .indexpage .desafios__img-absolute {
    height: auto;
    -o-object-fit: fill;
    object-fit: fill;
  }
}

/* Hero: o PNG roxo do fundo tem altura natural (width:100% e so). A partir de
   968px o .teste-gratis__container vira column-reverse e a secao cresce, entao
   o texto branco caia abaixo do roxo, sobre o fundo claro - ilegivel. */
@media (max-width: 968px) {
  .indexpage .teste-gratis__img-absolute {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center top;
    object-position: center top;
  }
}