/* ==========================================================
   CALCULADORA DE PRECIFICAÇÃO - MERCADO LIVRE
   CSS COMPLETO
========================================================== */


/* ==========================================================
   1. VARIÁVEIS
========================================================== */

:root {

  --amarelo: #ffe600;
  --amarelo-claro: #fff176;
  --amarelo-hover: #ffd600;

  --verde: #00c853;
  --verde-hover: #00e676;

  --vermelho: #ff3d3d;

  --preto: #101010;
  --preto-2: #171717;
  --preto-3: #202020;

  --cinza: #bdbdbd;
  --cinza-claro: #eeeeee;

  --branco: #ffffff;

  --fonte:
    Inter,
    Arial,
    Helvetica,
    sans-serif;

}


/* ==========================================================
   2. RESET
========================================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {

  background:
    radial-gradient(
      circle at top,
      #292300 0%,
      #151300 18%,
      #0d0d0d 48%,
      #080808 100%
    );

  color: var(--branco);

  font-family: var(--fonte);

  line-height: 1.6;

  padding:
    1rem
    1rem
    110px;

  text-align: center;

  min-height: 100vh;

  overflow-x: hidden;

}


/* ==========================================================
   3. SELEÇÃO DE TEXTO
========================================================== */

::selection {
  background: var(--amarelo);
  color: #111111;
}


/* ==========================================================
   4. TOPO / HERO
========================================================== */

.topo {

  width: 100%;

  max-width: 950px;

  margin:
    1rem
    auto
    2.5rem;

  padding:
    1rem
    1rem
    0;

}


.logo {

  display: block;

  max-width: 90%;

  width: auto;

  height: auto;

  max-height: 220px;

  margin:
    0
    auto
    1.5rem;

  object-fit: contain;

}


.topo h1 {

  max-width: 950px;

  margin: 0 auto;

  font-size:
    clamp(
      2rem,
      5vw,
      3.8rem
    );

  line-height: 1.08;

  font-weight: 900;

  letter-spacing: -1.5px;

  color: var(--branco);

  text-shadow:
    0 3px 20px
    rgba(0,0,0,.7);

}


.topo h1 strong {

  color: var(--amarelo);

  text-shadow:
    0 0 25px
    rgba(255,230,0,.25);

}


.subtitulo {

  max-width: 760px;

  margin:
    1.8rem
    auto
    0;

  font-size:
    clamp(
      1.05rem,
      2vw,
      1.35rem
    );

  line-height: 1.55;

  color: var(--cinza-claro);

  font-weight: 600;

}


/* ==========================================================
   5. BLOCOS PRINCIPAIS
========================================================== */

.item {

  position: relative;

  width: 100%;

  max-width: 720px;

  margin:
    2rem
    auto;

  padding:
    2rem;

  border-radius: 22px;

  background:
    linear-gradient(
      145deg,
      #1c1c1c,
      #121212
    );

  border:
    1px solid
    rgba(255,230,0,.28);

  box-shadow:
    0 12px 35px
    rgba(0,0,0,.35),
    0 0 20px
    rgba(255,230,0,.04);

  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;

}


.item:hover {

  transform:
    translateY(-3px);

  border-color:
    rgba(255,230,0,.55);

  box-shadow:
    0 16px 45px
    rgba(0,0,0,.45),
    0 0 25px
    rgba(255,230,0,.08);

}


/* ==========================================================
   6. TÍTULOS
========================================================== */

.item h2 {

  color: var(--amarelo);

  font-size:
    clamp(
      1.55rem,
      4vw,
      2.15rem
    );

  line-height: 1.2;

  font-weight: 900;

  margin-bottom: 1.4rem;

}


.item p {

  font-size: 1.05rem;

  line-height: 1.7;

  margin:
    .8rem
    0;

  color: #f1f1f1;

}


.item strong {

  color: var(--branco);

  font-weight: 800;

}


/* ==========================================================
   7. VÍDEO
========================================================== */

.video-container {

  padding: 1rem;

  background: #090909;

  overflow: hidden;

}


.video-container iframe {

  display: block;

  width: 100%;

  max-width: 390px;

  height: 693px;

  margin: 0 auto;

  border: none;

  border-radius: 18px;

  background: #000;

  box-shadow:
    0 15px 40px
    rgba(0,0,0,.6);

}


/* ==========================================================
   8. BENEFÍCIOS
========================================================== */

.beneficios {

  text-align: left;

}


.beneficios h2 {

  text-align: center;

}


.beneficios > p {

  text-align: center;

}


.beneficios ul {

  list-style: none;

  padding: 0;

  margin:
    1.6rem
    0;

}


.beneficios li {

  position: relative;

  background:
    rgba(255,255,255,.045);

  border:
    1px solid
    rgba(255,255,255,.07);

  padding:
    1rem
    1.1rem;

  margin:
    .75rem
    0;

  border-radius: 12px;

  color: #f5f5f5;

  font-size: 1.04rem;

  line-height: 1.5;

  transition:
    transform .25s ease,
    background .25s ease,
    border-color .25s ease;

}


.beneficios li:hover {

  transform:
    translateX(4px);

  background:
    rgba(255,230,0,.07);

  border-color:
    rgba(255,230,0,.25);

}


/* ==========================================================
   9. TEXTO DE DESTAQUE
========================================================== */

.detalhe {

  margin-top:
    1.5rem !important;

  padding:
    1.1rem
    1.2rem;

  background:
    rgba(255,230,0,.08);

  border-left:
    4px solid
    var(--amarelo);

  border-radius:
    8px;

  color:
    var(--branco) !important;

  text-align: left;

}


.detalhe strong {

  color:
    var(--amarelo);

}


/* ==========================================================
   10. BLOCOS DE ARGUMENTAÇÃO
========================================================== */

.mais-info {

  position: relative;

  overflow: hidden;

}


.mais-info::before {

  content: "";

  position: absolute;

  width: 180px;

  height: 180px;

  top: -100px;

  right: -100px;

  background:
    var(--amarelo);

  filter:
    blur(100px);

  opacity: .12;

  pointer-events: none;

}


.mais-info p {

  max-width: 620px;

  margin:
    1rem
    auto;

}


.transparencia {

  margin-top:
    1.6rem !important;

  padding:
    1.2rem;

  border-radius:
    12px;

  background:
    linear-gradient(
      135deg,
      rgba(255,230,0,.13),
      rgba(255,230,0,.03)
    );

  border:
    1px solid
    rgba(255,230,0,.25);

}


.transparencia strong {

  color:
    var(--amarelo);

}


/* ==========================================================
   11. OFERTA / CHAMADA
========================================================== */

.chamada {

  position: relative;

  overflow: hidden;

  border:
    2px solid
    rgba(255,230,0,.55);

  background:
    linear-gradient(
      145deg,
      #211f0d,
      #141414 50%,
      #0f0f0f
    );

  box-shadow:
    0 15px 45px
    rgba(0,0,0,.45),
    0 0 30px
    rgba(255,230,0,.10);

}


.chamada::after {

  content: "";

  position: absolute;

  width: 250px;

  height: 250px;

  bottom: -180px;

  left: 50%;

  transform:
    translateX(-50%);

  background:
    var(--amarelo);

  filter:
    blur(120px);

  opacity: .13;

  pointer-events: none;

}


.chamada h2 {

  color:
    var(--branco);

}


.preco {

  position: relative;

  z-index: 2;

  font-size:
    clamp(
      2.7rem,
      8vw,
      4.2rem
    ) !important;

  line-height: 1.05 !important;

  color:
    var(--amarelo) !important;

  font-weight: 950 !important;

  margin:
    1.4rem
    0
    .6rem !important;

  letter-spacing:
    -2px;

  text-shadow:
    0 0 30px
    rgba(255,230,0,.18);

  animation:
    pulsePreco
    2.5s
    infinite;

}


@keyframes pulsePreco {

  0%,
  100% {

    transform:
      scale(1);

  }

  50% {

    transform:
      scale(1.035);

  }

}


.garantia {

  font-size:
    1.12rem !important;

  color:
    #d9d9d9 !important;

  margin-bottom:
    1.3rem !important;

}


.garantia strong {

  color:
    var(--amarelo);

}


/* ==========================================================
   12. BOTÕES PRINCIPAIS
========================================================== */

.botao,
.action-button {

  position: relative;

  z-index: 3;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    auto;

  max-width:
    100%;

  min-height:
    58px;

  padding:
    1rem
    1.8rem;

  margin:
    1.1rem
    auto;

  border:
    none;

  border-radius:
    14px;

  background:
    linear-gradient(
      180deg,
      #ffe928,
      #ffd600
    );

  color:
    #111111;

  font-family:
    var(--fonte);

  font-size:
    1.1rem;

  line-height:
    1.25;

  font-weight:
    900;

  text-transform:
    uppercase;

  text-align:
    center;

  text-decoration:
    none;

  cursor:
    pointer;

  box-shadow:
    0 7px 0
    #bfa800,
    0 14px 25px
    rgba(0,0,0,.35),
    0 0 20px
    rgba(255,230,0,.15);

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background .2s ease;

}


.botao:hover,
.action-button:hover {

  background:
    linear-gradient(
      180deg,
      #fff36a,
      #ffe000
    );

  transform:
    translateY(-2px);

  box-shadow:
    0 9px 0
    #bfa800,
    0 18px 30px
    rgba(0,0,0,.4),
    0 0 30px
    rgba(255,230,0,.25);

}


.botao:active,
.action-button:active {

  transform:
    translateY(4px);

  box-shadow:
    0 3px 0
    #bfa800,
    0 8px 15px
    rgba(0,0,0,.35);

}


/* ==========================================================
   13. FAQ
========================================================== */

#duvidas {

  text-align:
    left;

}


.container-item {

  display:
    flex;

  flex-direction:
    column;

  gap:
    1rem;

}


.description {

  width:
    100%;

  text-align:
    left;

}


.destaque11 {

  display:
    block;

  text-align:
    center;

  font-size:
    clamp(
      1.6rem,
      4vw,
      2.1rem
    );

  line-height:
    1.2;

  font-weight:
    900;

  color:
    var(--amarelo);

}


.faq-item {

  overflow:
    hidden;

  margin:
    .8rem
    0;

  padding:
    0;

  background:
    #202020;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius:
    12px;

  transition:
    border-color .25s ease,
    background .25s ease;

}


.faq-item:hover {

  background:
    #252525;

  border-color:
    rgba(255,230,0,.3);

}


.faq-question {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    1rem;

  width:
    100%;

  padding:
    1.15rem;

  cursor:
    pointer;

  user-select:
    none;

}


.destaque4 {

  color:
    var(--branco);

  font-size:
    1rem;

  line-height:
    1.4;

  font-weight:
    750;

}


.toggle-icon {

  flex-shrink:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    34px;

  height:
    34px;

  border-radius:
    50%;

  background:
    var(--amarelo);

  color:
    #111;

  font-size:
    .9rem;

  transition:
    transform .3s ease;

}


.faq-question:hover
.toggle-icon {

  transform:
    scale(1.08);

}


.faq-answer {

  display:
    none;

  padding:
    0
    1.15rem
    1.2rem;

  color:
    #cccccc;

  font-size:
    .98rem;

  line-height:
    1.65;

}


/* ==========================================================
   14. QUEM SOU EU
========================================================== */

#quemsoueu {

  text-align:
    center;

}


#quemsoueu
.container-item {

  align-items:
    center;

}


.foto2 {

  display:
    block;

  width:
    100%;

  max-width:
    320px;

  height:
    auto;

  margin:
    0
    auto
    1.5rem;

  border-radius:
    18px;

  border:
    3px solid
    rgba(255,230,0,.7);

  box-shadow:
    0 15px 40px
    rgba(0,0,0,.5),
    0 0 25px
    rgba(255,230,0,.10);

}


.destaque2 {

  margin-bottom:
    1.2rem;

  color:
    var(--amarelo);

  font-size:
    clamp(
      1.7rem,
      4vw,
      2.2rem
    );

  line-height:
    1.2;

  font-weight:
    900;

  text-align:
    center;

}


#quemsoueu
.description p {

  text-align:
    left;

  color:
    #eeeeee;

}


/* ==========================================================
   15. RODAPÉ
========================================================== */

.rodape {

  margin-bottom:
    2rem;

  background:
    #111111;

}


.aviso {

  margin-top:
    .8rem !important;

  color:
    #aaaaaa !important;

  font-size:
    .9rem !important;

}


/* ==========================================================
   16. BOTÃO FIXO
========================================================== */

.fixed-bottom-btn {

  position:
    fixed;

  bottom:
    18px;

  left:
    50%;

  transform:
    translateX(-50%);

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    calc(100% - 30px);

  max-width:
    520px;

  min-height:
    60px;

  padding:
    .95rem
    1.5rem;

  border:
    2px solid
    rgba(255,255,255,.2);

  border-radius:
    50px;

  background:
    linear-gradient(
      180deg,
      #ffe928,
      #ffd600
    );

  color:
    #111111;

  font-size:
    1rem;

  line-height:
    1.2;

  font-weight:
    950;

  text-align:
    center;

  text-decoration:
    none;

  text-transform:
    uppercase;

  z-index:
    9999;

  box-shadow:
    0 10px 35px
    rgba(0,0,0,.55),
    0 0 25px
    rgba(255,230,0,.25);

  animation:
    botaoFlutuante
    2s
    infinite;

  transition:
    background .2s ease;

}


.fixed-bottom-btn:hover {

  background:
    linear-gradient(
      180deg,
      #fff56d,
      #ffe100
    );

}


@keyframes botaoFlutuante {

  0%,
  100% {

    transform:
      translateX(-50%)
      translateY(0);

  }

  50% {

    transform:
      translateX(-50%)
      translateY(-6px);

  }

}


/* ==========================================================
   17. SCROLLBAR
========================================================== */

::-webkit-scrollbar {

  width:
    10px;

}


::-webkit-scrollbar-track {

  background:
    #0d0d0d;

}


::-webkit-scrollbar-thumb {

  background:
    #4a4500;

  border-radius:
    10px;

}


::-webkit-scrollbar-thumb:hover {

  background:
    #756c00;

}


/* ==========================================================
   18. LINKS
========================================================== */

a {

  -webkit-tap-highlight-color:
    transparent;

}


/* ==========================================================
   19. RESPONSIVIDADE - TABLET
========================================================== */

@media
(max-width: 768px) {

  body {

    padding:
      .8rem
      .8rem
      105px;

  }


  .topo {

    margin-top:
      .5rem;

    padding:
      .5rem;

  }


  .logo {

    max-height:
      180px;

  }


  .topo h1 {

    letter-spacing:
      -.8px;

  }


  .subtitulo {

    margin-top:
      1.3rem;

  }


  .item {

    margin:
      1.4rem
      auto;

    padding:
      1.5rem;

    border-radius:
      18px;

  }


  .video-container {

    padding:
      .7rem;

  }


  .video-container iframe {

    width:
      100%;

    max-width:
      370px;

    height:
      658px;

  }


  .beneficios li {

    padding:
      .9rem;

  }


  .botao,
  .action-button {

    width:
      100%;

    padding:
      1rem;

    font-size:
      1rem;

  }

}


/* ==========================================================
   20. RESPONSIVIDADE - CELULAR
========================================================== */

@media
(max-width: 480px) {

  body {

    padding:
      .55rem
      .55rem
      100px;

  }


  .topo {

    margin-bottom:
      1.5rem;

  }


  .logo {

    max-height:
      150px;

    margin-bottom:
      1rem;

  }


  .topo h1 {

    font-size:
      2rem;

    line-height:
      1.1;

    letter-spacing:
      -.6px;

  }


  .subtitulo {

    font-size:
      1rem;

    line-height:
      1.5;

  }


  .item {

    margin:
      1rem
      auto;

    padding:
      1.2rem;

    border-radius:
      15px;

  }


  .item h2 {

    font-size:
      1.45rem;

  }


  .item p {

    font-size:
      .98rem;

  }


  .video-container {

    padding:
      .4rem;

  }


  .video-container iframe {

    width:
      100%;

    height:
      610px;

    border-radius:
      12px;

  }


  .beneficios li {

    font-size:
      .96rem;

    padding:
      .85rem;

  }


  .preco {

    font-size:
      2.7rem !important;

    letter-spacing:
      -1px;

  }


  .botao,
  .action-button {

    width:
      100%;

    min-height:
      56px;

    padding:
      .95rem
      .8rem;

    font-size:
      .95rem;

    border-radius:
      11px;

  }


  .faq-question {

    padding:
      1rem
      .9rem;

  }


  .destaque4 {

    font-size:
      .93rem;

  }


  .faq-answer {

    padding:
      0
      .9rem
      1rem;

    font-size:
      .92rem;

  }


  .toggle-icon {

    width:
      30px;

    height:
      30px;

    font-size:
      .8rem;

  }


  .foto2 {

    max-width:
      260px;

  }


  .fixed-bottom-btn {

    bottom:
      12px;

    width:
      calc(100% - 20px);

    min-height:
      56px;

    padding:
      .85rem
      1rem;

    font-size:
      .88rem;

  }

}


/* ==========================================================
   21. TELAS MUITO PEQUENAS
========================================================== */

@media
(max-width: 360px) {

  .topo h1 {

    font-size:
      1.75rem;

  }


  .item {

    padding:
      1rem;

  }


  .video-container iframe {

    height:
      560px;

  }


  .preco {

    font-size:
      2.35rem !important;

  }


  .fixed-bottom-btn {

    font-size:
      .8rem;

  }

}