:root {
  --hunyadi-yellow: rgb(248, 183, 76);
  --black-bean: rgb(66, 26, 18);
  --russet: rgb(136, 63, 19);
  --cocoa-brown: rgb(205, 100, 19);
  --sandy-brown: rgb(253, 164, 98);
  --peach: rgb(240, 182, 148);

  --text-color: var(--black-bean);
  --secondary-text-color: var(--cocoa-brown);

  --button-color: var(--sandy-brown);
  --hover-button-color: var(--cocoa-brown);

  --link-color: var(--black-bean);
  --link-hover-color: var(--cocoa-brown);

  --cor-white: #fff;
  --fundo-geral: var(--cor-white); 

  --cor-font-extra: #ff7f00;
  --cor-principal: blueviolet;
  --cor-principal-secundaria: #c6aeed;
  --cor-h: #2e2c2c;
  --cor-texto: #4b4848;
  --color-red: #e63636;
  --fundo-login: #dcf7e8;
  --texto-botao: #004aad;
  --texto-rosa: #ef0189;
  --texto-menu: #585c5e;
  --texto-artigo: #1b3c60;
  --texto-cadastre: #545454;
}

@import url(_reset_patterns.css);

html {
	font-size: 62.5%;
}

.container.planos{
  background: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 700px;
}

.h1-planos {
  padding: 2rem;
  /* margin-bottom: 1rem; */
}
.planos-container {
  margin-top: 2rem;
  display: flex;
  gap: 30px;
}


.icon-svg {
  margin-top: 1rem;
  width: 80px;
  height: 80px;
}

.planos h1 {
  font-family: "Poppins", sans-serif;
  font-size: 2.2rem;
  padding: 1rem;
  
}

.planos {
  width: 320px;
  height: 450px;
  background: white;
  border-radius: 5px;
  text-align: center;
}

.planos-preco {
  font-size: 4rem;
  color: orange;
  padding: 1rem;
}

.ul-planos {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 1rem;
  font-weight: bold;
}

.ul-planos li {
  font-size: 10px;
}

.ul-planos li::before {
  content: "🟊";
  color: orange;
}

.button {
  color: aliceblue;
  padding: 1rem 2rem;
  background: orange;
  border: 2px orange;
  border-radius: 5px;
  display: flex;
  margin-top: 3rem;
  justify-content: center;
  box-sizing: border-box;
}

.button:hover {
  outline: 2px solid var(--cor-texto);
}

.button:focus {
  background-color: orangered;
}


@media (max-width: 324px) {
  .planos-container {
    width: 324px;
    display: flex;
    flex-direction: column;
    position: relative;
  }
  .planos {
    text-align: center;
  }
  .planos-preco {
    font-size: 3rem;
  }
  .button {
    width: 170px;
    margin-top: 0rem;
    text-decoration: none;
  }

  .div-button {
    display: grid;
    justify-content: center;
  }

  .footer-x {
    display: none;
  }


}