:root {
  --red: hsl(0, 78%, 62%);
  --cyan: hsl(180, 62%, 55%);
  --orange: hsl(34, 97%, 64%);
  --blue: hsl(212, 86%, 64%);
  --varyDarkBlue: hsl(234, 12%, 34%);
  --grayishBlue: hsl(229, 6%, 66%);
  --veryLightGray: hsl(0, 0%, 98%);
  --weight1: 200;
  --weight2: 400;
  --weight3: 600;
  --pan: #0367a6;
  --pri: #038c33;
  --prd: #f2b705;
  --pvem: #91bf2c;
  --pt: #d9303e;
  --mc: #f27507;
  --morena: #bf5454;
  --mas: #0fbfbf;
  --cxqroo: #3791a6;
  --fxmqroo: #f266b3;
  --ci: #8c8c8c;
  --co1: #84b8d9;
  --co2: #d6f272;
}
body {
  font-size: 15px;
  font-family: "Poppins", sans-serif;
  background-color: var(--veryLightGray);
}
.attribution {
  font-size: 11px;
  text-align: center;
}
.attribution a {
  color: hsl(228, 45%, 44%);
}
h1:first-of-type {
  font-weight: var(--weight1);
  color: var(--varyDarkBlue);
}
h1:last-of-type {
  color: var(--varyDarkBlue);
}
@media (max-width: 400px) {
  h1 {
    font-size: 1.5rem;
  }
}
.header {
  text-align: center;
  line-height: 0.8;
  margin-bottom: 50px;
  margin-top: 48px;
}
.header p {
  margin: 0 auto;
  line-height: 2;
  color: var(--grayishBlue);
}
.box p {
  color: var(--grayishBlue);
}
.box p span {
  color: var(--varyDarkBlue);
  font-weight: bold;
}
.box {
  border-radius: 5px;
  box-shadow: 0px 30px 40px -20px var(--grayishBlue);
  padding: 30px;
  margin: 20px;
  display: none;
  
}
.show {
  display: block;
}
.box img {
  width: 48px;
  float: right;
}
@media (max-width: 450px) {
  .box {
    height: fit-content;
  }
}
@media (max-width: 950px) and (min-width: 450px) {
  .box {
    text-align: center;
    height: fit-content;
  }
}
.cyan {
  border-top: 3px solid var(--cyan);
}
.red {
  border-top: 3px solid var(--red);
}
.blue {
  border-top: 3px solid var(--blue);
}
.orange {
  border-top: 3px solid var(--orange);
}
.pan {
  border-top: 3px solid var(--pan);
}
.pri {
  border-top: 3px solid var(--pri);
}
.prd {
  border-top: 3px solid var(--prd);
}
.pvem {
  border-top: 3px solid var(--pvem);
}
.pt {
  border-top: 3px solid var(--pt);
}
.mc {
  border-top: 3px solid var(--mc);
}
.morena {
  border-top: 3px solid var(--morena);
}
.mas {
  border-top: 3px solid var(--mas);
}
.cxqroo {
  border-top: 3px solid var(--cxqroo);
}
.fxmqroo {
  border-top: 3px solid var(--fxmqroo);
}
.ci {
  border-top: 3px solid var(--ci);
}
.co1 {
  border-top: 3px solid var(--co1);
}
.co2 {
  border-top: 3px solid var(--co2);
}
h2 {
  color: var(--varyDarkBlue);
  font-weight: var(--weight2);
  font-size: 1em;
}
@media (min-width: 950px) {
  .scrolling-wrapper-flexbox {
   
    display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  
  
  }
  .scrolling-wrapper-flexbox .box {
    flex: 0 0 auto;
    margin-right: 3px;
  }
  
  .header p {
    width: 50%;
  }
}
.seccion {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: lightgrey;
}
.seccion h1 {
  font-size: 1.5rem;
  margin: 20px;
}
@media (max-width: 450px) {
  .seccion {
    display: grid;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-bottom: 40px;
    padding-bottom: 20px;
    text-align: center;
  }
}

/* Style the buttons */
.btn {
  border: none;
  outline: none;
  padding: 12px;
  margin: 5px 0;
  background-color: #f1f1f1;
  cursor: pointer;
}
.btn:hover {
  background-color: #ddd;
}
.btn.active {
  background-color: #666;
  color: white;
}

.pincode-input:not(:last-child) {
  margin-right: 2px;
}

.img-credencial {
  width: 280px;
}