/* ==========================================================================
   CAMPANHA SINAL AMARELO
   "Desacelerar também é cuidar"

   01. Reset e configurações
   02. Mobile / Desktop
   03. Blocos da campanha
   04. Menu fixo
   05. Modal do menu
   06. Conteúdo institucional
   07. Modal de registro
   08. Formulário
   09. Responsividade
   10. Acessibilidade
   ========================================================================== */



/* ==========================================================================
   01. RESET E CONFIGURAÇÕES GLOBAIS
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}


html {
  margin: 0;
  padding: 0;

  color: #21170d;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: 16px;
  line-height: 1.4;

  -webkit-text-size-adjust: 100%;
}


body {
  width: 100%;

  margin: 0;
  padding: 0;

  background: #ffe463;

  overflow-x: hidden;
}


.conteudo-campanha {
  display: block;

  width: 100%;

  margin: 0;
  padding: 0;
}


img {
  display: block;

  max-width: 100%;

  height: auto;

  margin: 0;
  padding: 0;

  border: 0;
}


button,
select,
input {
  font: inherit;
}


button {
  -webkit-tap-highlight-color: transparent;
}


a {
  -webkit-tap-highlight-color: transparent;
}


[hidden] {
  display: none !important;
}



/* ==========================================================================
   02. MOBILE / DESKTOP

   A partir de 800px:
   desktop aparece.

   Até 799px:
   mobile aparece.

   No desktop, o conteúdo visual fica centralizado
   e nunca ultrapassa 1950px de largura.
   ========================================================================== */

.mobile {
  display: none !important;
}


.desktop {
  display: block !important;
}



/* ==========================================================================
   03. BLOCOS DA CAMPANHA
   ========================================================================== */

.bloco-campanha {
  position: relative;

  display: block;

  width: 100%;

  height: auto;

  margin: 0;
  padding: 0;

  line-height: 0;
}


.bloco-campanha img {
  width: 100%;

  height: auto;

  margin: 0;
  padding: 0;
}

/* Reserva espaço para o menu em pixels da tela. O título
   começa aproximadamente em y=225 no desktop (1499px) e y=385 no mobile (800px).
   Descontamos o espaço que já existe na própria arte após a redução. */
.abertura-campanha {
  background: #ffe65b;
  padding-top: max(0px, calc(180px - min(100vw, 950px) * 225 / 1499));
}

@media only screen and (max-width: 799px) {
  .abertura-campanha {
    padding-top: max(0px, calc(150px - 48.125vw));
  }
}


.cursor {
  cursor: pointer;
}



/* --------------------------------------------------------------------------
   Sinais clicáveis
   -------------------------------------------------------------------------- */

.sinal-trigger {
  outline: none;

  cursor: pointer;

  -webkit-tap-highlight-color: transparent;
}


.sinal-trigger:focus-visible {
  outline: 3px solid #0874e7;

  outline-offset: -3px;
}



/* --------------------------------------------------------------------------
   Telefones de emergência
   -------------------------------------------------------------------------- */

.telefone-emergencia {
  display: block;

  width: 100%;

  margin: 0;
  padding: 0;

  color: inherit;

  text-decoration: none;

  cursor: pointer;

  line-height: 0;
}


.telefone-emergencia img {
  width: 100%;
}



/* ==========================================================================
   04. MENU FIXO SUPERIOR

   Marca Grupo Jorlan + menu hambúrguer:
   - visível em mobile, tablet e desktop;
   - sempre centralizado horizontalmente;
   - largura máxima de 380px;
   - em telas estreitas, respeita margens laterais de 10px.
   ========================================================================== */

.menu-fixo-topo {
  position: fixed;

  top: 20px;
  left: 50%;

  width: calc(100% - 20px);
  max-width: 380px;

  margin: 0;
  padding: 0;

  transform: translateX(-50%);

  z-index: 1000;

  pointer-events: none;
}


.menu-fixo-botao {
  display: block;

  width: 100%;
  max-width: 380px;

  margin: 0 auto;
  padding: 0;

  border: 0;

  background: transparent;

  cursor: pointer;

  pointer-events: auto;

  -webkit-tap-highlight-color: transparent;
}


.menu-fixo-botao img {
  display: block;

  width: 100%;
  max-width: 380px;

  height: auto;

  margin: 0 auto;
  padding: 0;
}





/* --------------------------------------------------------------------------
   MENU FIXO — AJUSTE RESPONSIVO
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 399px) {

  .menu-fixo-topo {
    width: calc(100% - 16px);
  }

}


@media only screen and (min-width: 400px) {

  .menu-fixo-topo {
    width: 380px;
  }

}


/* ==========================================================================
   05. MODAL DO MENU
   ========================================================================== */

.menu-overlay {
  position: fixed;

  inset: 0;

  width: 100%;

  height: 100%;
  height: 100dvh;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 20px;

  background: rgba(0, 0, 0, 0.48);

  z-index: 100000;

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transition:
    opacity 0.22s ease,
    visibility 0.22s ease;
}


.menu-overlay.ativo {
  opacity: 1;

  visibility: visible;

  pointer-events: auto;
}



/* --------------------------------------------------------------------------
   Caixa do menu
   -------------------------------------------------------------------------- */

.dialog-box {
  position: relative;

  width: 100%;

  max-width: 750px;

  max-height: calc(100dvh - 80px);

  overflow-x: hidden;
  overflow-y: auto;

  margin: 0;

  padding: 25px 32px;

  background: #ffffff;

  border-radius: 28px;

  box-shadow:
    0 18px 55px rgba(0, 0, 0, 0.22);

  transform:
    translateY(15px)
    scale(0.98);

  transition:
    transform 0.22s ease;

  -webkit-overflow-scrolling: touch;
}


.menu-overlay.ativo .dialog-box {
  transform:
    translateY(0)
    scale(1);
}



/* --------------------------------------------------------------------------
   Itens do menu
   -------------------------------------------------------------------------- */

.menu-item {
  appearance: none;
  -webkit-appearance: none;

  width: 100%;

  min-height: 72px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  margin: 0;

  padding: 0 8px;

  border: 0;

  border-bottom:
    1px
    solid
    #d4d4d4;

  background: transparent;

  color: #21170d;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: 22px;

  font-weight: 400;

  text-align: left;

  cursor: pointer;

  transition:
    background-color 0.15s ease;
}


.menu-item:last-child {
  border-bottom: 0;
}


.menu-item:hover,
.menu-item:focus-visible {
  background: #f6f6f6;
}


.menu-seta {
  flex: 0 0 auto;

  margin-left: 20px;

  color: #b8b8b8;

  font-size: 40px;

  font-weight: 200;

  line-height: 1;
}



/* --------------------------------------------------------------------------
   Botão fechar do menu
   -------------------------------------------------------------------------- */

.dialog-fechar {
  position: absolute;

  top: -48px;
  right: 4px;

  width: 40px;
  height: 40px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin: 0;
  padding: 0;

  border: 0;

  border-radius: 50%;

  background: #ffffff;

  color: #222222;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: 29px;

  line-height: 1;

  cursor: pointer;

  box-shadow:
    0 4px 15px rgba(0, 0, 0, 0.18);
}



/* ==========================================================================
   06. CONTEÚDO INSTITUCIONAL
   ========================================================================== */

.dialog-conteudo h2 {
  margin: 20px 0 18px;

  padding: 0;

  color: #21170d;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: 28px;

  font-weight: 700;

  line-height: 1.15;
}


.dialog-texto {
  color: #3e3731;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: 17px;

  line-height: 1.55;
}


.dialog-texto p {
  margin: 0 0 18px;
}


.dialog-texto p:last-child {
  margin-bottom: 0;
}


.dialog-texto strong {
  color: #21170d;
}



/* --------------------------------------------------------------------------
   Botão voltar
   -------------------------------------------------------------------------- */

.dialog-voltar {
  appearance: none;
  -webkit-appearance: none;

  margin: 0;

  padding: 0;

  border: 0;

  background: transparent;

  color: #777777;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: 15px;

  cursor: pointer;
}


.dialog-voltar:hover {
  color: #21170d;
}



/* --------------------------------------------------------------------------
   Canais de apoio
   -------------------------------------------------------------------------- */

.apoio-item {
  display: flex;

  flex-direction: column;

  gap: 4px;

  margin: 0 0 10px;

  padding: 14px 15px;

  background: #f6f6f6;

  border-radius: 12px;
}


.apoio-item strong {
  color: #21170d;

  font-size: 16px;
}


.apoio-item span {
  color: #686868;

  font-size: 14px;
}


.dialog-aviso {
  margin-top: 20px !important;

  color: #777777;

  font-size: 14px;
}



/* ==========================================================================
   07. MODAL DE REGISTRO DO SINAL
   ========================================================================== */

.sinal-overlay {
  position: fixed;

  inset: 0;

  width: 100%;

  height: 100%;
  height: 100dvh;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 20px 15px;

  background: rgba(0, 0, 0, 0.52);

  z-index: 200000;

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transition:
    opacity 0.22s ease,
    visibility 0.22s ease;
}


.sinal-overlay.ativo {
  opacity: 1;

  visibility: visible;

  pointer-events: auto;
}



/* --------------------------------------------------------------------------
   Caixa principal
   -------------------------------------------------------------------------- */

.sinal-dialog {
  position: relative;

  width: 100%;

  max-width: 355px;

  margin: 0;

  background: #ffffff;

  border-radius: 27px;

  box-shadow:
    0 20px 55px rgba(0, 0, 0, 0.25);

  transform:
    translateY(18px)
    scale(0.98);

  transition:
    transform 0.22s ease;
}


.sinal-overlay.ativo .sinal-dialog {
  transform:
    translateY(0)
    scale(1);
}



/* --------------------------------------------------------------------------
   Área interna com scroll
   -------------------------------------------------------------------------- */

.sinal-dialog-scroll {
  width: 100%;

  max-height:
    calc(100dvh - 40px);

  overflow-x: hidden;

  overflow-y: auto;

  padding:
    40px
    28px
    30px;

  border-radius: 27px;

  -webkit-overflow-scrolling: touch;
}



/* --------------------------------------------------------------------------
   Botão fechar
   -------------------------------------------------------------------------- */

.sinal-fechar {
  position: absolute;

  top: -29px;

  left: -14px;

  z-index: 10;

  width: 59px;

  height: 59px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin: 0;

  padding: 0;

  border:
    5px
    solid
    #8b3041;

  border-radius: 50%;

  background: #ffffff;

  color: #8b3041;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: 38px;

  font-weight: 400;

  line-height: 1;

  cursor: pointer;

  box-shadow:
    0 0 0 3px #ffffff,
    0 5px 12px rgba(0, 0, 0, 0.20);

  transition:
    transform 0.12s ease;
}


.sinal-fechar:hover {
  transform: scale(1.04);
}


.sinal-fechar:active {
  transform: scale(0.96);
}



/* ==========================================================================
   08. FORMULÁRIO
   ========================================================================== */

/* --------------------------------------------------------------------------
   Cabeçalho
   -------------------------------------------------------------------------- */

.sinal-cabecalho {
  width: 100%;

  margin: 0 0 19px;

  padding: 0;
}


.sinal-cabecalho h2 {
  margin: 0 0 12px !important;

  padding: 0;

  color: #21170d;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: 24px;

  font-weight: 800;

  line-height: 0.98;

  letter-spacing: -0.3px;
}


.sinal-cabecalho p {
  margin: 0;

  padding: 0;

  color: #3c342d;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: 15px;

  font-weight: 400;

  line-height: 1.27;

  letter-spacing: 0.2px;
}



/* --------------------------------------------------------------------------
   Campo
   -------------------------------------------------------------------------- */

.sinal-campo {
  width: 100%;

  margin: 0 0 20px;

  padding: 0;
}


.sinal-label {
  display: block !important;

  position: static !important;

  width: 100%;

  margin: 0 0 8px !important;

  padding: 0;

  color: #2f261f !important;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: 17px !important;

  font-weight: 400;

  line-height: 1.2;

  transform: none !important;

  cursor: default;
}



/* --------------------------------------------------------------------------
   Select
   -------------------------------------------------------------------------- */

.sinal-select-wrapper {
  position: relative;

  width: 100%;
}


.sinal-select-wrapper::after {
  content: "";

  position: absolute;

  top: 50%;

  right: 18px;

  width: 15px;

  height: 15px;

  border-right:
    3px
    solid
    #43380d;

  border-bottom:
    3px
    solid
    #43380d;

  transform:
    translateY(-68%)
    rotate(45deg);

  pointer-events: none;
}


.sinal-select,
.sinal-select.browser-default {
  display: block !important;

  position: relative;

  width: 100% !important;

  height: 53px !important;

  margin: 0 !important;

  padding:
    0
    48px
    0
    16px !important;

  border: 0 !important;

  border-radius: 15px !important;

  outline: 0;

  background: #ffbd00 !important;

  color: #2c2616 !important;

  font-family:
    Arial,
    Helvetica,
    sans-serif !important;

  font-size: 15px !important;

  font-weight: 600 !important;

  line-height: 53px !important;

  cursor: pointer;

  appearance: none !important;

  -webkit-appearance: none !important;

  -moz-appearance: none !important;

  box-shadow: none !important;
}


.sinal-select:focus {
  outline:
    3px
    solid
    rgba(8, 116, 231, 0.22) !important;

  outline-offset: 2px;
}


.sinal-select option {
  background: #ffffff;

  color: #222222;
}



/* --------------------------------------------------------------------------
   Botão registrar
   -------------------------------------------------------------------------- */

.sinal-botao-area {
  width: 100%;

  display: flex;

  justify-content: center;

  margin: 24px 0 0;
}


.sinal-submit {
  appearance: none;

  -webkit-appearance: none;

  width: 100%;

  max-width: 248px;

  min-height: 61px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  margin: 0 !important;

  padding:
    0
    25px !important;

  border: 0 !important;

  border-radius: 999px !important;

  background: #0874e7 !important;

  color: #ffffff !important;

  font-family:
    Arial,
    Helvetica,
    sans-serif !important;

  font-size: 18px !important;

  font-weight: 700 !important;

  line-height: 1 !important;

  letter-spacing: 0.2px;

  text-transform: none !important;

  cursor: pointer;

  box-shadow: none !important;

  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}


.sinal-submit:hover {
  opacity: 0.93;
}


.sinal-submit:active {
  transform: scale(0.97);
}



/* --------------------------------------------------------------------------
   Feedback
   -------------------------------------------------------------------------- */

.sinal-feedback {
  width: 100%;

  min-height: 0;

  margin-top: 12px;

  color: #16763c;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: 14px;

  font-weight: 600;

  text-align: center;
}



/* ==========================================================================
   BODY COM MODAL ABERTO
   ========================================================================== */

body.modal-aberto {
  overflow: hidden;
}

.arredonda{border-radius: 40px 40px 0px 0px; overflow: hidden;}

/* ==========================================================================
   09. RESPONSIVIDADE
   ========================================================================== */


/* --------------------------------------------------------------------------
   DESKTOP / TELAS A PARTIR DE 800PX

   - O conteúdo fica centralizado.
   - As imagens crescem até no máximo 1950px.
   - Em telas maiores, aparecem margens laterais com o fundo do body.
   -------------------------------------------------------------------------- */

@media only screen and (min-width: 800px) {

  .conteudo-campanha {
    width: 100%;
    max-width: 950px;

    margin-left: auto;
    margin-right: auto;
  }


  .bloco-campanha,
  .telefone-emergencia {
    width: 100%;
    max-width: 950px;

    margin-left: auto;
    margin-right: auto;
  }

}

/* --------------------------------------------------------------------------
   MOBILE
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 799px) {

  .desktop {
    display: none !important;
  }


  .mobile {
    display: block !important;
  }



  /* ------------------------------------------------------------------------
     Menu institucional
     ------------------------------------------------------------------------ */

  .dialog-box {
    width: 100%;

    max-width: 300px;

    padding:
      18px
      25px;

    border-radius: 24px;
  }


  .menu-item {
    min-height: 54px;

    padding: 0 2px;

    font-size: 17px;
  }


  .menu-seta {
    font-size: 30px;
  }


  .dialog-conteudo h2 {
    margin:
      18px
      0
      15px;

    font-size: 22px;
  }


  .dialog-texto {
    font-size: 15px;

    line-height: 1.5;
  }


  .dialog-texto p {
    margin-bottom: 15px;
  }


  .dialog-voltar {
    font-size: 14px;
  }


  .dialog-fechar {
    top: -45px;

    width: 38px;

    height: 38px;

    font-size: 27px;
  }



  /* ------------------------------------------------------------------------
     Formulário
     ------------------------------------------------------------------------ */

  .sinal-dialog {
    width: calc(100% - 10px);

    max-width: 355px;

    border-radius: 26px;
  }


  .sinal-dialog-scroll {
    padding:
      40px
      27px
      28px;

    border-radius: 26px;
  }


  .sinal-cabecalho h2 {
    font-size: 23px;
  }


  .sinal-cabecalho p {
    font-size: 15px;
  }


  .sinal-label {
    font-size: 17px !important;
  }


  .sinal-select,
  .sinal-select.browser-default {
    height: 53px !important;

    font-size: 14px !important;

    line-height: 53px !important;
  }


  .sinal-submit {
    font-size: 17px !important;
  }

}



/* --------------------------------------------------------------------------
   CELULARES MUITO ESTREITOS
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 350px) {

  .sinal-dialog-scroll {
    padding-left: 21px;

    padding-right: 21px;
  }


  .sinal-fechar {
    left: -8px;
  }


  .sinal-cabecalho h2 {
    font-size: 21px;
  }

}



/* ==========================================================================
   10. ACESSIBILIDADE
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;

    transition-duration: 0.01ms !important;

    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;
  }

}
/* ========================================================================== 
   11. DASHBOARD NO MENU + BOX DE CONFIRMAÇÃO
   ========================================================================== */

.menu-item-link {
  text-decoration: none;
}

.menu-item-link:visited {
  color: #21170d;
}

.sinal-submit:disabled {
  opacity: 0.62 !important;
  cursor: wait;
  transform: none !important;
}

.sinal-feedback.erro {
  color: #b51f1f;
}

.status-overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.52);
  z-index: 300000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}

.status-overlay.ativo {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.status-dialog {
  width: min(100%, 430px);
  padding: 38px 32px 32px;
  border-radius: 28px;
  background: #ffffff;
  color: #21170d;
  text-align: center;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.25);
  transform: translateY(14px) scale(0.98);
  transition: transform 0.22s ease;
}

.status-overlay.ativo .status-dialog {
  transform: translateY(0) scale(1);
}

.status-icone {
  width: 70px;
  height: 70px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #e8f6e4;
  color: #318529;
  font-size: 38px;
  font-weight: 800;
  line-height: 1;
}

.status-aviso .status-icone {
  background: #fff2bf;
  color: #866500;
}

.status-dialog h2 {
  margin: 0 0 12px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 28px;
  line-height: 1.08;
  letter-spacing: -0.5px;
}

.status-dialog p {
  margin: 0 auto;
  max-width: 340px;
  color: #5e5a55;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.55;
}

.status-botao {
  min-width: 190px;
  min-height: 52px;
  margin-top: 26px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: #0874e7;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.status-botao:hover {
  opacity: 0.93;
}

.status-botao:focus-visible {
  outline: 3px solid rgba(8, 116, 231, 0.35);
  outline-offset: 3px;
}

@media only screen and (max-width: 480px) {
  .status-dialog {
    padding: 32px 24px 26px;
    border-radius: 24px;
  }

  .status-dialog h2 {
    font-size: 24px;
  }

  .status-dialog p {
    font-size: 15px;
  }
}

/* Botão de imagem que abre as orientações de atendimento. */
.botao-apoio {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0 auto;
  box-shadow: none;
  outline: none;
  background: transparent;
  line-height: 0;
}
.botao-apoio:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}
.botao-apoio:focus-visible {
  outline: 3px solid #21170d;
  outline-offset: -3px;
}