:root {
    --gris:#9DA1A2;
    --gris2:#F7F7F3;
    --naranja:#F1D50A;
    --blanco:#FFFFFF;
    --azul:#1873E8;
    --negro:#0B0B0C;
    --azul2:#0673F5;
    --naranja2:#EDAB3F;
}

.linea{
      width:100%;
      height:5px;
      background-color: var(--azul2); 
}

html {
    box-sizing: border-box;
  }
  
  *,
  *:after,
  *:before {
    box-sizing: inherit;
  }

  html, body{
    height:100%;
    margin:0;
  }

  body {
       height:100%;
       display:flex;
       flex-grow:1;
  }

  .contenido{
         display:flex;
         flex-direction:column;
         width:100%;
  }

  header {
          background-color:var(--gris2); 
          height:20%;
          display:flex;
          justify-content:center;
          align-items:center;
          flex: 0 0 10%;
  }

  header h4 {
          font-style:italic;
  }

  .contenido-body{
          display:flex;
          flex-direction:column;  
          flex:0 0 80%; 
          background-color: var(--gris);
          overflow:scroll;
          align-items:center;
  }

  .recuadro_acceso{
         margin-top:1rem;
         position:relative;
         width:60%;
         height:100%x;
         background-color: var(--blanco);
         border-bottom: .25rem solid var(--naranja2);
         border-top: .25rem solid var(--naranja2);
  }

  .titulo {
          align-self:center;
          display:flex;
          flex: 0 0 20%;
          justify-content:center;
          background-color:var(--gris2);
          padding-bottom:1rem;
  }
  .titulo .logo {
           max-width:40%;
           width:20%;
  }

  .informacion {
          align-self:center;
          display:flex;
          flex-direction:column; 
          flex: 0 0 40%;
  }

  .acciones {
          align-self:left;
          display:flex;
          flex-direction:column; 
          flex: 0 0 30%;
          margin-top:1rem;
  }

  footer{
    background-color:var(--gris);
    display:flex;  
    flex:0 0 10%; 
    flex-direction:column;
    align-items:center;
}

 footer p{
    margin-top:1rem;
    font-size:.80rem;
    color:var(--blanco);
    font-weight:bold;
 } 


  .acciones .link{
            align-self:center;
            margin-top:.5rem;
  }

  .acciones .link:last-of-type{
             align-self:center;
             margin-bottom:1rem;
  }

  .acciones button{
         margin-left: 2rem;
         margin-right: 2rem;
         border-radius:30px;
  }