@charset 'UTF-8';
@import url("https://fonts.googleapis.com/css2?family=Lilita+One&family=Passion+One:wght@400;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bungee&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Chango&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Rammetto+One&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Playpen+Sans:wght@100..800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Titan+One&display=swap");
@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap");
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Julius+Sans+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&display=swap');


:root {
  --Lilita: "Lilita One", sans-serif;
  --Passion: "Passion One", sans-serif;
  --Bungee: "Bungee", sans-serif;
  --chango: "Chango", sans-serif;
  --Rammeto: "Rammetto One", sans-serif;
  --playpen: "Playpen Sans", cursive;
  --titan: "Titan One", sans-serif;
  --sans: "DM Serif Display", serif;
  --Jet: "JetBrains Mono", monospace;
  --julius: "Julius Sans One", sans-serif;
  --bodoni: "Bodoni Moda", serif; 
}

body {
  color: white;
  background-color: white;
  padding: 0;
  margin: 0;

  background:
        /* linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)),
        url("images/backtest3.png"); */ url("../images/backtest2.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;

  transition: background-image 0.2s ease-in-out;
}

.logo {
  width: 550px;
  height: 330px;
  background: url("../logo/logo3.svg");
  background-size: cover;

  position: absolute;
  right: 1524px;
  top: -105px;
}

.main {
  position: absolute;
  width: 650px;
  height: 1050px;
  left: 65.4%;
  margin-top: 14px;

  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 43px 0px 43px 43px;

  background-color: rgba(0, 0, 0, 0.174);
  backdrop-filter: blur(4.6px);

  box-shadow: 0px 0px 7px 3px rgba(0, 0, 0, 0.307);
}

h1 {
  position: absolute;
  left: 60px;
  top: 95px;

  font-size: 52px;
  font-family: var(--sans);

  margin: 0;
  display: flex;
  align-items: center;
}

.sub {
  position: absolute;
  left: 185px;
  top: 166px;

  font-size: 31px;
  font-family: var(--sans);
  font-weight: 200;

  margin: 0;
  display: flex;
  align-items: center;
}

input {
  font-size: 15px;
}

#dname,
#dpass,
#dmail {
  width: 400px;
  height: 41px;
  border-radius: 10px;
  border: 2px solid transparent;
  background-color: #f8fafc;
  padding-left: 3rem;
  width: 355px;

  position: absolute;
}

input:focus,
input:hover {
  outline: none;
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(0, 26, 255, 0.151);
}

#dname::placeholder,
#dpass::placeholder,
#dmail::placeholder {
  color: #c8d6e9; /*#94a3b8*/
  font-family: Arial, Helvetica, sans-serif;
}

.dnam,
.dpass,
.mail {
  position: absolute;
}

.dnam {
  top: 335px;
  left: 110px;
  font-family: var(--playpen);
  font-weight: 200px;
}

#dname {
  top: 365px;
  left: 120px;
}

.dpass {
  top: 595px;
  left: 110px;
  font-family: var(--playpen);
}

#dpass {
  top: 625px;
  left: 120px;
  border-radius: 10px;
  border: 2px solid transparent;
  background-color: #f8fafc;
  padding-left: 3rem;
  width: 355px;
  transition: 0.25s;
}

#dpass.locked {
  background-color: #fff2f2;
  border-color: #bdff8b;
  color: #666;
  cursor: not-allowed;
}

.person {
  height: 23px;
  width: 23px;

  background: url("../icons/person.svg");
  background-repeat: no-repeat;
  background-size: cover;

  position: absolute;
  top: 377px;
  left: 133px;
}

.gmail {
  height: 19px;
  width: 19px;

  background: url("../icons/mail.svg");
  background-repeat: no-repeat;
  background-size: cover;

  position: absolute;
  top: 509px;
  left: 135px;
}

.lock {
  height: 19px;
  width: 19px;

  background: url("../icons/lockopen.svg");
  background-repeat: no-repeat;
  background-size: cover;

  position: absolute;
  top: 640px;
  left: 135px;
  cursor: pointer;
}

.passw {
  position: absolute;
  top: 662px;
  left: 122px;
  color: #ffffff;
  font-family: var(--Lilita);
  font-size: 13px;
}

input::placeholder {
  color: #94a3b8;
}

.mail {
  font-family: var(--playpen);
  top: 465px;
  left: 110px;
}

#dmail {
  top: 495px; /*525px*/
  left: 120px;
}

#dname:hover::placeholder,
#dpass:hover::placeholder,
#dmail:hover::placeholder {
  color: rgb(63, 63, 63);
  transition: color 0.15s ease-in-out;
}

.tacc {
  position: absolute;
  width: 300px;
  top: 6px;
  left: 35px;
  font-family: var(--Lilita);
  cursor: pointer;
  font-size: 17px;
}

.container {
  cursor: pointer;
  position: absolute;
  top: 830px;
  left: 130px;
}

.container input {
  position: absolute;
  opacity: 0;
  width: 20px;  
  height: 20px;
  z-index: -1;
}

.container svg {
  overflow: visible;
}

.path {
  fill: none;
  stroke: white;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition:
    stroke-dasharray 0.5s ease,
    stroke-dashoffset 0.5s ease;
  stroke-dasharray: 241 9999999;
  stroke-dashoffset: 0;
}

.container input:checked ~ svg .path {
  stroke-dasharray: 70.5096664428711 9999999;
  stroke-dashoffset: -262.2723388671875;
}

a {
  text-decoration: none;
  color: #bdff8b;
}

a:hover {
  text-decoration: underline;
}

/* label:has(input:checked) .tacc {
    text-decoration: underline;
} */

.submit {
  position: absolute;
  width: 110px;
  height: 110px;
  top: 924px;
  left: 520px;
  border-radius: 50%;
  background: url("../images/angle-small-right\ \(1\).png");
  background-size: cover;
}

.submit:hover {
  transform: scale(1.05);
  transition: transform 0.1s ease-in-out;
}


/* -------------------------------------------------------------------------------------------------- */


.d1, .d2, .d3, .d4, .d5 {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.26);
  opacity: 87%;
  border-radius: 23px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.1s ease, border 0.1s ease, opacity 0.2s ease;
}



.d1 {
  width: 398px;
  height: 237px;

  background: url('../images/backtest5.png');
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 100%;
  border: 2px solid white;

  top: 780px ;
  right: 1070px;
  z-index: 2;
  
}

.d2 {
  width: 304px;
  height: 225px;

  background: url('../images/backtest4.png');
  background-size: cover;
  background-repeat: no-repeat;

  top: 816px ;
  right: 860px;
  z-index: 1;
}

.d3 {
  width: 304px;
  height: 225px;

  background: url('../images/backtest3.png');
  background-size: cover;
  background-repeat: no-repeat;

  top: 816px ;
  right: 1370px;
  z-index: 1;
}

.d4 {
  width: 282px;
  height: 209px;

  background: url('../images/backtest6.png');
  background-size: cover;
  background-repeat: no-repeat;

  top: 839px ;
  right: 690px;
  z-index: 0;
}

.d5 {
  width: 282px;
  height: 209px;

  background: url('../images/backtest7.png');
  background-size: cover;
  background-repeat: no-repeat;

  top: 839px ;
  right: 1587px;
  z-index: 0;
}

.d1:hover {
  box-shadow: 0px 0px 0px 4px rgba(255, 255, 255, 0.436);
  transform: scale(1.03) translateY(-12px);
  transition: box-shadow 0.1s ease, transform 0.2s ease;
}

.d2:hover, .d3:hover, .d4:hover, .d5:hover {
  border: 2px solid white;
  transform: scale(1.01) translateY(-12px);
  opacity: 100%;

  transition: border 0.1s ease, transform 0.2s ease;
}

/* --- ESTILO DO TIMER DO CARROSSEL --- */
#carousel-timer {
  background-color: rgba(0, 0, 0, 0.162);
  border-radius: 12px;
  position: absolute;
  bottom: 9px;
  left: 12px;
  color: white;
  font-family: var(--Jet); /* Usando a fonte que você já importou */
  font-size: 15px;
  font-weight: bold;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
  z-index: 10;
}



.title {
  width: 420px;
  height: 190px;

  background: url('../images/logotest2.png');
  background-repeat: no-repeat;
  background-size: cover;

  position: absolute;
  top: 412px;
  left: -830px;
}

.price {
  font-family: var(--bodoni);
  font-weight: bold;
  font-size: 17px;
  color: rgb(255, 255, 255);

  position: absolute;
  top: 598px;
  left: -538px;
  z-index: 2;
}

.placaprice {
  width: 190px;
  height: 100px;

  background: url('../icons/placaprice.svg');
  background-size: cover;
  
  
  position: absolute;
  top: 584px;
  left: -610px;
  z-index: 1;
}






p {
  position: absolute;
  font-size: 14px;
}

.p1 {
  font-family: var(--Jet);
  top: 1024px;
  left: -706px;
}

.profile {
  width: 25px;
  height: 25px;

  border: 1px solid transparent;
  border-radius: 6px;

  background: url('../images/profile.png');
  background-repeat: no-repeat;
  background-size: cover;

  position: absolute;
  top: 1034px;
  left: -640px;

  cursor: pointer;
}

.profile:hover {
  border: 1px solid white;
}

.p2 {
  font-family: var(--Jet);
  top: 1024px;
  left: -604px;
  cursor: pointer;
  text-decoration: underline;
}