/* Ajustes manuais do site institucional.
   Carregado DEPOIS do export do Webflow e mantido fora de /site/workeeapp.webflow/
   de proposito: ao reexportar do Webflow aquela pasta e sobrescrita inteira, e uma
   correcao escrita la dentro se perderia sem aviso. */

/* Faixa "Try 1 month for Free" (section-2 / div-block-16).
   O export nao traz nenhuma regra responsiva para essa faixa: .container-6 fica em
   max-width: 60% em qualquer largura e o miolo continua sendo um flex em linha com
   gap de 50px e CTA de 40%. Num celular de 390px isso dava um container de 234px, o
   titulo espremido em 79px (uma palavra por linha) e o border-radius de 100px virando
   um ovo azul de 312px de altura. */

/* Tablet em retrato: mantem a faixa em linha, mas da largura suficiente para o titulo
   caber numa linha so. Medido: com CTA em 40% e os 110px de padding+gap, o titulo so
   cabe (225px) a partir de ~73% da largura da tela em 768px. O teto de 768px e a
   largura que a faixa ja tem no desktop (60% de 1280) — sem ele, alargar a porcentagem
   deixaria a faixa MAIOR no tablet do que no monitor. */
@media screen and (max-width: 991px) {
  .container-6 {
    max-width: min(85%, 768px);
  }
}

/* Celular: empilha. Em linha nao ha largura que salve. */
@media screen and (max-width: 767px) {
  .container-6 {
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }

  .div-block-16 {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    text-align: center;
    border-radius: 28px;
    flex-direction: column;
    margin-bottom: 24px;
    padding: 28px 24px;
  }

  .div-block-17 {
    width: 100%;
  }

  .title-3mf-hero {
    margin-bottom: 8px;
    font-size: 1.5rem;
    line-height: 1.25;
  }

  .text-block-8 {
    font-size: .95rem;
    line-height: 1.4;
  }

  .bt-cta-3mf {
    width: 100%;
    max-width: 320px;
    padding-top: 16px;
    padding-bottom: 16px;
  }
}