/********* Variables *********/
:root {
   --color-primario: #009C5D;
   --color-blanco-1: #Fff;
   --color-blanco-2: #Fbfbfb;
}

/********* Body *********/
body {
   margin-top: 10px;
   position: relative;
   height: 100vh;
}

body::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background:
      linear-gradient(135deg, var(--color-primario) 25%, transparent 25%) -50px 0,
      linear-gradient(225deg, #ddd 25%, transparent 25%) -50px 0,
      linear-gradient(315deg, var(--color-primario) 25%, transparent 25%),
      linear-gradient(45deg, #ddd 25%, transparent 25%);
   background-size: 100px 100px;
   background-color: transparent;
   opacity: .02;
   z-index: -1;
}

/********* clases genericas *********/

.c-primario {
   color: var(--color-primario);
}

.btn-primary {
   background-color: var(--color-primario);
   border-color: var(--color-primario);
}

.btn-primary:hover {
   background-color: #fff;
   color: var(--color-primario);
   border-color: var(--color-primario);
}

/********* Logo *********/

.logo-trabaja-con-nosotros {
   font-size: 2rem;
   font-weight: 600;
   background-color: var(--color-primario);
   width: 22rem;
   margin: auto;
   padding: 1rem;
   border-radius: 1rem;
   color: var(--color-blanco-1);
}

.logo-trabaja-con-nosotros i {
   font-size: 6rem;
   display: block;
}

.logo-trabaja-con-nosotros strong {
   text-transform: uppercase;
   font-size: 1.5rem;
}

/********* Titulo y Parrafo *********/

.titulo {
   font-weight: 600;
   font-size: 2.5rem;
}

.parrafo {
   font-size: 1.6rem;
}

/********* Formulario *********/

.stepwizard-container {
   background-color: var(--color-blanco-2);
   display: flex;
   justify-content: center;
   margin: auto;
   box-shadow: 0 0 1rem #ddd;
   border-radius: 1rem;
   overflow: hidden;
   max-width: 70rem;
   margin-top: 2rem;
   margin-bottom: 6rem;
}

.stepwizard-container .stepwizard {
   box-shadow: 0 0 1rem #ddd;
   width: 12rem;
   display: flex;
}


.stepwizard-container .setup-panel {
   width: 14rem;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 1rem;
}

.stepwizard-step a {
   height: 8.5rem;
   width: 10rem;
   padding: 0rem !important;
   margin: 0rem !important;

   display: flex;
   flex-direction: column;
   justify-content: center !important;
   align-items: center !important;
   align-content: center;
   text-align: center;
}

.stepwizard-step i {
   font-size: 3rem;
}

.stepwizard-step span {
   text-transform: uppercase;
   font-size: 1rem;
   margin-top: .5rem;
   width: 7.3rem;
   text-wrap: wrap;
   font-weight: 600;
}

.stepwizard-container form {
   padding: 2rem;
   flex-grow: 1;
}

/* Dispositivos Extra Pequeños (teléfonos) */
@media (max-width: 575px) {

   .stepwizard-container {
      flex-wrap: wrap;
   }

   .stepwizard-container .setup-panel {
      flex-direction: row;
      margin: auto;
   }

   .stepwizard-container .stepwizard {
      width: 40rem;
      margin: auto;
      flex-grow: 1;
      text-align: center;
      padding: .8rem;
   }
}