@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); /* sobscrição da font para utilizar 800,900 */
/* Font VAG Rundscrhift */
@font-face {
    font-family: 'VAG';
    src: url('../fonts/vag-rundschrift-d.woff2') format('woff2'),
         url('../fonts/vag-rundschrift-d.woff2.ttf') format('truetype');
    
    font-weight: normal;
    font-style: normal;
    font-display: swap; 
}

.card {
  box-shadow: 0px 6px 15px #00000027;
  border-radius: 10px;
  border: none;
}


header .menu li.participar.logado {
  background: none;
}
header .menu li.participar:after {
  display: none !important;
}
header .menu li.participar {
  background-color: var(--primary) !important;
}
/* .socials li a {
  color: #fff;
}
header {
  background: #fff;
} */
#faq .btn-link.collapsed[aria-expanded="false"],
#faq .btn-link.collapsed[aria-expanded="true"],
#faq .btn-link[aria-expanded="true"] {
  background-color: #ffffff;
  text-decoration: none;
}
/* Cor de seleção de acordo com a cor primária setada no admin */
::selection {
  background-color: var(--primary);
}

/* Para fazer a transição de ancoragem - Homepage */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 130px;
}

/* Problema do footer ficar voando em algumas páginas */
/* calc(Altura da tela inteira - Altura do header - Altura do footer) */
.scene-form {
  height: 100%;
  min-height: calc(100vh - 80px - 200px);
  margin-top: 50px;
}

/* No FAQ o elemento já vem com expanded=true */
#faq .btn-link {
  min-height: 75px;
  font-weight: 500;
  border-radius: 30px;
}
#faq .card {
  border-radius: 30px !important;
}

#faq .btn-link.collapsed[aria-expanded="true"] {
  background-color: #fff;
  text-decoration: none;
  color: var(--secondary) !important;
}

#faq .btn-link.collapsed[aria-expanded="false"] {
  background-color: #fff;
  text-decoration: none;
}

#faq .btn-link[aria-expanded="true"] {
  color: #61270e !important;
}
footer p,
footer p a,
footer a {
  color: #000 !important;
}
/* .special-title {
  color: #000 !important;
} */
.special-title:after {
  background: var(--primary);
  margin: 10px auto 0;
  border-radius: 25px;
}
.btn-primary {
  font-family: Poppins;
  color: #fff;
  /* border-radius: 50vw; */
  box-shadow: 0 4px 10px #0000004d;
}
.btn-secondary {
  /* border-radius: 50vw; */
  color: #fff !important;
  box-shadow: 0 4px 10px #0000004d;
}
footer .footer_line {
  border: none;
}
li.participar {
  background-color: transparent !important;
}

/* footer {
  background-color: #fff !important;
  min-height: 200px;
}
.footer_menu li a {
  color: #fff !important;
} */

header .abrirMenu div {
  background-color: var(--secondary) !important;
}
.cadastreSe {
  max-width: 289px;
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30px;
  margin-bottom: 30px;
  font-weight: 700;
}

@media (max-width: 991px) {
  header .menu li {
    padding: 0;
  }
}

@media (max-width: 767px) {
  .comoParticipar .boxStep {
    margin-bottom: 30px;
  }
  .comoParticipar .description,
  .comoParticipar .description a {
    min-height: auto;
  }
  /* header {
    background-color: #fff;
  } */
  header .menu li:nth-last-child(n + 2) a {
    display: block;
    padding: 15px 0;
  }

  header .menu li.participar {
    border: 1px var(--white) solid;
    padding: 0;
    max-width: 220px;
  }

  header .menu li.participar a {
    line-height: normal;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

/* lavateria 2026  */
.lavateria {
  header .menu {
    align-items: center;

    li {
      font-size: 13px;
      align-items: center;
      a { 
        position:relative;
        font-size: 13px;
        line-height: 38px;
        &::after {
          position: absolute;
          content: " ";
          width: 70%;
          bottom: -4px;
          height: 6px;
          left: 50%;
          background: #0035FF;
          border-radius: 6px;
          transform: translateX(-50%);
          opacity: 0;
          transition: all .3s ease;
        }
        &:hover, &:focus{ 
          box-shadow: none;
          color: inherit;
          border: 0;
          

          &::after {
            bottom: 0;
            opacity: 1;
          }
        }
      }
    }
  }

  li.cadastre-se { 
    background-image: linear-gradient(to bottom,#0F193F, #1F3AA2);
    line-height: 12px;
    height: auto;
    padding: 6px 8px;
    border-radius: 51px;

    a { 
      color: #fff;
      font-family: VAG, 'sans-serif';
      font-size: 17px !important;

      &::after {
        display: none;
      }
    }
  }

  /* hero */
  .hero {
    position:relative;
    background: url(../images/lavateriainterno-1200x900.png) center right no-repeat;
    background-size: contain;
    height: auto;
    overflow: hidden;
    padding: 2rem 2rem 6rem 2rem;

    .logo-hero {
      display: block;
      margin: 2rem 0;
    }
    .container { 
      position:relative;

      .text-juridico {
        position: absolute;
        right: 0;
        width: 42%;

        span {
          font-size: 13px;
          line-height: 19px;
          opacity: 0.65;
          text-align: right;
        }
      }

      .bolhas { 
        position: absolute;
        top: -15%;

        &.left { 
          left: -82%;
        }
        &.right {
          right: -75%;
        }
      }
    }

    &::before {
      position: absolute;
      top: 0;
      left: 0;
      content: " ";
      width: 100%;
      height: 100%;
      background-image: linear-gradient(to right, #101B43, #0E33B9);
      z-index: -1;
    }

    .img-maquina { 
      position:relative;
      img { 
        position: absolute;
        bottom: -19%;
        right: -19%;
      }
    }

    h3 {
      font-size: 40px;
      line-height: 44px;
      color: #fff;
    }

    span {
      font-size: 20px;
      line-height: 24px;
      color: #fff;
      display: block;
      margin-bottom: 20px;
    }
    h1 {
      font-size: 36px;
      color: #fff;
      font-weight: 700;
      margin: 20px 0;
      display: inline;
      background: #5479ff;
    }
    .last {
      margin: 2rem 0;
      font-size: 20px;
      line-height: 28px;
      color: #fff;

      strong {
        display: inline;
        background: #5479ff;
        color: #fff;
        padding: 0 8px;
      }
    }

    .button-cta {
      color: #fff;
      font-size: 18px;
      border: 1px solid #fff;
      padding: 12px 43px;
      display: flex;
      width: fit-content;
      border-radius: 10px;
      font-weight: 700;

      &:hover {
        background-image: linear-gradient(to right, #0054D2, #00B9FF);
        text-decoration: none;
      }
    }
    &::after { 
      content: url(../images/wave-white.svg);
      position: absolute;
      bottom: -462px;
      left: 50%;
      width: 100%;
      height: auto;
      transform: translateX(-50%);
    }
  }

  /* como participar */
  .como-participar {
    padding: 6rem 0 10rem 0;
    position:relative;
    overflow: hidden;

    .container {
      position:relative;

      &::before, &::after {
        width: 100%;
        height: auto;
        position: absolute;
        transform: translateY(-50%);
        top: 50%;
        z-index: -1;
      }
      &::before { 
        content: url(../images/bolha-left-comoparticipar.png);
        left: -73%;

      }
      &::after { 
        content: url(../images/bolha-right-comoparticipar.png);
        right: -70%;
        top: 80%;
      }
    }
    p.title {
      font-size: 48px;
      font-weight: 600;
      color: #000B34;
      text-align: center;
      position:relative;
      margin-bottom: 2rem;

      strong {
        color: #2242B1;
        font-weight: inherit;
      }

      &::after {
        content: "";
        position:absolute;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
        width: 176px;
        height: 6px;
        background-image: linear-gradient(to right, #102879, #5479FF);
      }
    }

    span {
      font-size: 18px;
      color: #787878;
      text-align: center;
      display: block;
        margin: 0 auto;
        max-width: 60%
    }

    .box-como-participar {
      padding: 6rem 2rem 2rem 2rem;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      column-gap: 16px;
      max-width: 100%;
      margin: 0 auto;
      counter-reset: card-counter;
      row-gap: 65px;

      .box {
        flex: 0 1 calc(33.333% - 11px); 
        /* Estilização apenas para visualização */
        background-image: linear-gradient(to bottom, #5479FF, #1435A9);
        color: #fff;
        padding: 40px 27px;
        text-align: center;
        border-radius: 8px;
        position: relative;
        border-radius: 45px;
        counter-increment: card-counter;
        text-align: center;

        .float-number {
          position: absolute;
          top: -44px;
          width: 100px;
          height: 100px;
          background: #5479FF;
          border-radius: 51px;
          left: 50%;
          transform: translateX(-50%);
          z-index: -1;

          span {
            color: #fff;
            font-size: 35px;
            font-weight: 600;
          }
        }

        &::before {
          content: " ";
          width: 90%;
          border-radius: 33px;
          height: 85%;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          background: #fff;
        }

        

        .box-title {
          color: #262626;
          font-size: 22px;
          line-height: 28px;
          font-weight: 600;
          position: relative;
        }

        .text {
          color: #787878;
          font-size: 18px;
          position:relative;

          strong {
            color: #787878;
          }
        }
      }
    }
    
    .small-text {
      color: #000;
      font-size: 14px;
      line-height: 20px;
    }

    .button_cta_in {
      background: #00145E;
      color: #fff;
      text-transform: uppercase;
      border-radius: 22px;
      border: 2px solid #fff;
      box-shadow: 0px 0px 1px rgba(3, 7, 18, 0.01), 0px 1px 3px rgba(3, 7, 18, 0.01), 0px 3px 6px rgba(3, 7, 18, 0.01), 0px 6px 11px rgba(3, 7, 18, 0.02), 0px 9px 17px rgba(3, 7, 18, 0.03), 0px 13px 24px rgba(3, 7, 18, 0.03);
      padding: 9px 39px;
      font-size: 30px;
      font-family: VAG, 'sans-serif';
      margin: 2rem auto;
      width: fit-content;
      display: block;
      transition: all .7s ease;
      text-align: center;
      line-height: 38px;

      &:hover {
        text-decoration: none;
        /* https://smoothshadows.com/#djEsMSw2LDAuMDksNDEsMjksMCwjMDMwNzEyLCNmM2Y0ZjYsI2ZmZmZmZiwy */
        box-shadow: 0px 1px 1px rgba(3, 7, 18, 0.01),
          0px 3px 5px rgba(3, 7, 18, 0.03),
          0px 7px 10px rgba(3, 7, 18, 0.04),
          0px 13px 18px rgba(3, 7, 18, 0.06),
          0px 20px 28px rgba(3, 7, 18, 0.07),
          0px 29px 41px rgba(3, 7, 18, 0.09);

      }

    }

    &::after {
      content: url(../images/bg-wave-blue.svg);
      width: 100%;
      position: absolute;
      bottom: -440px;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  .as-melhores-respostas {
    padding: 6rem 0;
    background-image: linear-gradient(to top, #000E34, #001c67);
    overflow: hidden;
    .container {
      position: relative;

      &::before {
        content: url(../images/bolha-left-asmelhoresrespostas.png);
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: -85%;
      }
    }

    p.title {
      color: #fff;
      font-size: 48px;
      text-align: center;
      position: relative;
      margin-bottom: 3rem;
      font-weight: 600;

      &::after {
        content: "";
        position: absolute;
        bottom: -1rem;
        left: 50%;
        transform: translateX(-50%);
        height: 6px;
        border-radius: 4px;
        background: #fff;
        width: 176px;
      }
    }

    span {
      font-size: 18px;
      color: #fff;
      text-align: center;
      max-width: 80%;
      margin: 0 auto;
      display: block;
    }

    .cards {
      display: flex;
      flex-direction: column;
      gap: 12px;

      .card {

        flex: 1;
        background-image: linear-gradient(to right, #002FDB, #5479FF);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2px 12px;
        position:relative;
        border-radius: 54px;
        position:relative; 
        
        &:first-child {
          margin-bottom: 1rem;
        }

        &:nth-child(2)::after { 
          content: url(../images/plus.png);
          position: absolute;
          left: -54px;
          top: 30px;
        }

        .card-title {
          margin: 0;
          display: flex;
          gap: 16px;
          align-items: center;
          font-size: 48px;
          color: #fff;
          font-family: VAG, 'sans-serif';
        }

        &::before { 
          content: url(../images/asset-card.svg);
          position: absolute;
          top: 54%;
          left: -16px;
          transform: translateY(-50%)
        }
      }
    }

    .card-span {
      margin: 2rem 0;
      text-align: left;
      max-width: 100%;
      font-size: 16px;
    }
    .button-cta-white {
      font-family: VAG, 'sans-serif';
      background: #fff;
      color: #102266;
      border-radius: 16px;
      padding: 11px 40px;
      font-size: 30px;
      margin-top: 1rem;
      width: fit-content;
      text-align: center;
      line-height: 38px;
      border: 2px solid #5276FA;

      &:hover {
        text-decoration: none;
      }
    }
    .custom-align {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
  }

  .grid-melhores-respostas {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 12px;
    padding: 2rem 0;

    .grid-box {
        flex: 0 1 calc(33.333% - 11px); 
        /* Estilização apenas para visualização */
        background-image: linear-gradient(to bottom, #5479FF, #1435A9);
        color: #fff;
        padding: 40px 27px;
        text-align: center;
        border-radius: 8px;
        position: relative;
        border-radius: 45px;
        counter-increment: card-counter;
        text-align: center;
        z-index: 1;
        .float-number {
          position: absolute;
          top: -44px;
          width: 100px;
          height: 100px;
          background: #5479FF;
          border-radius: 51px;
          left: 50%;
          transform: translateX(-50%);
          z-index: -1;

          span {
            color: #fff;
            font-size: 35px;
            font-weight: 600;
          }
        }

        &::before {
          content: " ";
          width: 90%;
          border-radius: 33px;
          height: 92%;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          background: #fff;
        }



        .box-title {
          color: #262626;
          font-size: 22px;
          line-height: 28px;
          font-weight: 600;
          position: relative;
        }

        .text {
          color: #787878;
          font-size: 16px;
          position:relative;
        }
    }
  }

  .periodo {

    position:relative;
    margin-top: 3rem;
    padding-top: 3rem;

    &::before {
      width: 1907px;
      position: absolute;
      content: " ";
      left: 50%;
      transform: translateX(-50%);
      top: 0;
      height: 2px;
      background: #fff;
    }

    span.date {
      font-size: 26px;
      font-weight: 700;
      background: #5479FF;
      display: block;
      margin: 1rem auto;
      width: fit-content;
      padding: 4px 16px;
    }
  }

  .regulamento {
    background: #fff;
    padding: 8rem 0 6rem 0;
    position:relative;
    overflow: hidden;

    &::before {
      content: "";
      position: absolute;
      top: -40px;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      background: url(../images/bg_wave_regulamento.svg) top center no-repeat;
      height: 157px;
      background-size: 100%;
    }

    &::after {
      content: url(../images/bolha-right-regulamento.png);
      position: absolute;
      right: -34%;
      top: 50%;
      transform: translateY(-50%) scale(.5);
    }

    p.title {
      color: #000B33;
      font-size: 45px;
      font-weight: 700;
      text-align: center;
      position: relative;
      margin-bottom: 2rem;
      font-weight: 600;

      &::after {
        content: "";
        position:absolute;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
        width: 176px;
        height: 6px;
        background-image: linear-gradient(to right, #102879, #5479FF);
      }

    }
    p.text {
      
      color: #787878;
      font-size: 18px;
      text-align: center;
    }
    .button_cta_in {
      background: #00145E;
      color: #fff;
      text-transform: uppercase;
      border-radius: 22px;
      border: 2px solid #fff;
      box-shadow: 0px 0px 1px rgba(3, 7, 18, 0.01), 0px 1px 3px rgba(3, 7, 18, 0.01), 0px 3px 6px rgba(3, 7, 18, 0.01), 0px 6px 11px rgba(3, 7, 18, 0.02), 0px 9px 17px rgba(3, 7, 18, 0.03), 0px 13px 24px rgba(3, 7, 18, 0.03);
      padding: 9px 39px;
      font-size: 30px;
      font-family: VAG, 'sans-serif';
      margin: 2rem auto;
      width: fit-content;
      display: block;
      transition: all .7s ease;
      text-align: center;
      line-height: 38px;
      &:hover {
        text-decoration: none;
      }
    }
  }

  footer {
    background: #001C67;
    .logo_footer {
      filter: brightness(100);
    }
    p, a {
      color: #fff !important;
    }

    ul.footer_menu {
      display: flex ;
      flex-direction: column ;
    }

    .footer_final {
      background: #000F36;
    }
    .heart_icon {
      margin: auto 10px;
    }
  }
}
@media (min-width: 1920px) {
  .lavateria .hero::after {
    left: 31%;
  }
  .lavateria .regulamento::after {
    right: -18%;
  }
}
@media (max-width: 768px) {
  .lavateria .hero {
    background-position: center center;
    background-size: cover;
  }
  .lavateria .hero .text-juridico  {
    display: none;
  }
  .lavateria .logo-hero {
    max-width: 100%;
  }
  .lavateria header .menu {
    background: #1F3AA2;
  }
  .lavateria header .menu li.cadastre-se {
    width: fit-content;
    margin: 2rem auto;
  }
  .lavateria .bolhas,
  .lavateria .como-participar .container::after,
  .lavateria .como-participar .container::before,
  .lavateria .as-melhores-respostas .container::before,
  .lavateria .regulamento::after { 
    display: none; 
  }
  .lavateria .button-cta { 
    margin: 0 auto;
  }

  .lavateria p.title { 
    font-size: 30px !important;
    line-height: 38px;
  }
  .lavateria .button_cta_in, .lavateria .button-cta-white {
    font-size: 20px !important;
    margin: 0 auto;
  }
  .lavateria .card-title {
    font-size: 30px !important;
  }

  .lavateria .regulamento {
    &::before { 
      top: -3px;
    }
  }
  .lavateria .como-participar .box-como-participar {
    .box {
        flex: 0 1 100%;
    }
  }
  .lavateria .as-melhores-respostas  {
    span {
      max-width: 100%;
      font-size: 16px;
      line-height: 20px;
      margin-bottom: 2rem;
    }
    .ar {
      margin-bottom: 0;
    }
    .cards {
      margin-top: 2rem;
    }
  }
  .lavateria .como-participar .small-text {
    max-width: 100%
  }
  .lavateria .como-participar .box-como-participar .box .float-number span {
    top: 2px !important;
  }
  .lavateria .como-participar span {
    max-width: 100%;
  }
  .lavateria .float-number span {
    margin-bottom: 0!important;
    position: relative;
    top: 15px;
  }
  .lavateria .grid-melhores-respostas {
    grid-template-columns: 1fr;
    margin-top: 5rem;
    gap: 60px;

    
    .grid-box {
        flex: 0 1 100%;

        &::before { 
          width: 94%;
        }
    }

  }
  .lavateria .periodo .date {
    line-height: 32px;
  }
  .lavateria .as-melhores-respostas .cards .card:nth-child(2)::after {
    left: 50%;
    top: -67px;
    transform: translateX(-50%) scale(.7);
  }
}