:root{
  --text-color:#474747;
}
*{
  box-sizing:border-box;
}
body{
  font-family:system-ui;
  background-color:black;
}
.wraper{
  max-width:1200px;
  margin:auto;
}
.header{

  align-items:center;
  line-height:1.5;
  background-color:#F7F2EF;
  border-radius:0.5rem;
  display:flex;
  justify-content:space-between;
  padding: 1rem 1.3rem;
}
.navbar,.menu{
  display:flex;
  align-items:center;
}
.navbar{
  gap:1rem;
}
.menu{
  font-weight:500;
  display:none;
  gap:0.5rem;
  font-size:15px;
}

.contact-btn{
  background-color:#FFED4F;
  padding:0.2rem 1rem;
  border-radius:1rem;
  border:1px solid black;
  box-shadow: 2px 2px 0px 0px black;
  font-weight:500;
  transition: transform 0.25s;
  &:hover{
   transform:scale(1.1);
    cursor:pointer;
  }
}



.font-w-500{
  font-weight:500;
}
.logo{
  font-weight:500;
  display:flex;
  align-items:center;
  gap:0.2rem;
}

section{
  margin-top:0.5rem;
}
.icon-burger{
  display:block;
}
.section-img{
  position:relative;
  overflow:hidden;
  column-gap:2rem;
  border-radius:0.5rem;
  background-color:#f5f4f3;
  padding:clamp(1rem,3vw,3rem) clamp(2rem,5vw,5rem);
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(400px,100%),1fr));
}

img{

  height:auto;
  width:100%;
  object-fit:cover;
  clip-path: polygon(0 44%, 15% 15%, 37% 34%, 61% 9%, 89% 11%, 100% 31%, 100% 85%, 80% 89%, 63% 98%, 38% 84%, 7% 95%, 0% 85%);
}

.image{
  filter:drop-shadow(6px 12px 0px black) drop-shadow(-1px -1px 0px black)  drop-shadow(1px 2px 0px black);
  DISPLAY:grid;
  place-items:center;
  position:relative;

}

h1{
  font-size:clamp(20px,5vw + 10px,50px);
  line-height: 1;
  margin-bottom:0.5rem;
}
p{
  color: var(--text-color);
}

.texto{
  display:grid;
  align-items:center;
  JUSTIFY-ITEMS:START;
  GAP:1REM;
}


svg{
  height:20px;
  width:20px;
}

.icon-card{
  height:30px;
  width:30px;
}
.title-card{
  font-weight:600;
  font-size:20px;
}
.p-card{
  font-size:15px;
  color:var(--text-color);
}
.reset-section{
  grid-template-columns:auto;
  gap:1rem;
}
.yellow{
  background-color:#FFED4F;
}
.green{
  background-color:#0DFFA8;
}
.violet{
  background-color:#FFD9FE;
}

.section-img > * {
  z-index: 3;
}
.section-img::after{
  /*content:'';
  height:10rem;
  width:10rem;
  background-color:#c099ff;
  border-radius:50%;
  filter:blur(80px);
  position:absolute;
  left:70%;
  top:40%;
  z-index:0; */
}

.section-img::before{

  content:'';
  height:10rem;
  width:10rem;
  background-color:#f6cd6d;
  border-radius:50%;
  filter:blur(80px);
  position:absolute;
  right:3%;
  top:50%;
  z-index:0;
}

.card{

  border-radius:0.5rem;
  padding:1rem 1rem;
  display:grid;
  gap:1rem;
  justify-items:start;
}
.section-tres-columnas{
  gap:0.5rem;
  display:grid;
  grid-template-columns:repeat(1,1fr);
}

.btn-card{
  display:flex;
  align-items:center;
  gap: 1rem;
  padding: 0.2rem 0.5rem;
  border-radius:1rem;
  background-color:black;
  color:white;
  border:none;
  transition:filter 0.2s;
  cursor:pointer;
  padding: 0.3rem 1rem;
}
.btn-card:hover{
  filter:drop-shadow(2px 2px 0px lightgrey);
}

.btn-card svg{
  fill:white;
}

.clip-path-square{
 clip-path: polygon(0 45%, 40% 0, 82% 6%, 100% 25%, 100% 57%, 89% 68%, 100% 85%, 100% 97%, 85% 100%, 27% 100%, 12% 89%, 0% 85%);
}

.brutal-btn{
  COLOR:BLACK;
  FONT-WEIGHT:700;
  PADDING:0.5REM 2REM;
  BORDER-RADIUS:2REM;
  BACKGROUND-COLOR:TRANSPARENT;
  BORDER:1PX SOLID BLACK;
  BOX-SHADOW:2PX 4PX 0PX 0PX BLACK;
  transition: transform 0.25s;
  &:hover{
   transform:scale(1.1);
    cursor:pointer;
  }
}
.centrado{
  place-items:Center;
}

.blanco{
  background-color:white;
}
.menu>div:hover{
      text-decoration: underline;
    text-underline-offset: 0.3rem;
  cursor:pointer;
      text-decoration-thickness: 0.2rem;
}


.borde-negro{
  border-radius:1rem;
  border:3px solid black;
  clip-path:none;
}
@media (min-width: 750px){
  .menu{
    display:flex;
  }
  .section-tres-columnas{
     grid-template-columns:repeat(3,1fr);
  }
  .icon-burger{
    display:none;
  }
}







.container {
  position: relative;
  width: 100%;
  background-color: #FFED4F;
  min-height: 70vh;
  overflow: hidden;
}

.forms-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.signin-signup {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 50%;
  width: 50%;
  transition: 1s 0.7s ease-in-out;
  display: grid;
  grid-template-columns: 1fr;
  z-index: 5;
}

form {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0rem 5rem;
  transition: all 0.2s 0.7s;
  overflow: hidden;
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

form.sign-up-form {
  opacity: 0;
  z-index: 1;
}

form.sign-in-form {
  z-index: 2;
}

.title {
  font-size: 2.2rem;
  color: #444;
  margin-bottom: 10px;
}

.input-field {
  max-width: 380px;
  width: 100%;
  background-color: #f0f0f0;
  margin: 10px 0;
  height: 55px;
  border-radius: 55px;
  display: grid;
  grid-template-columns: 15% 85%;
  padding: 0 0.4rem;
  position: relative;
}

.input-field i {
  text-align: center;
  line-height: 55px;
  color: #acacac;
  transition: 0.5s;
  font-size: 1.1rem;
}

.input-field input {
  background: none;
  outline: none;
  border: none;
  line-height: 1;
  font-weight: 600;
  font-size: 1.1rem;
  color: #333;
}

.input-field input::placeholder {
  color: #aaa;
  font-weight: 500;
}