/* REDES SOCIALES */

    .redes{
   margin-top:25px;
   display:flex;
   justify-content:center;
   gap:20px;
    }

    .redes a{
   color:#444;
   font-size:28px;
   transition:0.2s;
    }

    .redes a:hover{
    color:#000;
     transform:scale(1.1);
    }

    .footer{
     width:100%;
     text-align:center;
     padding:20px 10px;
     font-size:12px;
     color:#888;
      background:#f0f0f0;
     border-top:1px solid #ddd;
    }
    *{
      margin:0;
      padding:0;
      box-sizing:border-box;
      font-family: Arial, sans-serif;
    }

    body{
      background:#f4f4f4;
      color:#222;
    }

    .contenedor{
      display:flex;
      min-height:100vh;
    }

    .sidebar{
      width:80px;
      background:#222;
      display:flex;
      flex-direction:column;
      align-items:center;
      padding:20px 10px;
      gap:20px;
    }

.icono{
  width:50px;
  height:50px;
  border:2px solid white;
  border-radius:10px;

  display:flex;
  align-items:center;
  justify-content:center;

  color:white;
  text-decoration:none;
  font-size:24px;

  transition:0.2s;
}

.icono:hover{
  background:white;
  color:#222;
  transform:scale(1.05);
}

    .contenido{
      flex:1;
      padding:30px;
      display:flex;
      justify-content:center;
      align-items:flex-start;
    }

    .caja{
      width:100%;
      max-width:700px;
      background:white;
      border-radius:20px;
      padding:30px;
      box-shadow:0 4px 10px rgba(0,0,0,0.1);
      text-align:center;
    }

    .logo{
      width:220px;
      max-width:100%;
      margin-bottom:20px;
    }

    .titulo{
      font-size:28px;
      margin-bottom:25px;
    }

    /* ENLACES */
    .enlaces{
      display:flex;
      flex-direction:column;
      gap:15px;
      margin-top:20px;
    }

    .enlaces a{
      text-decoration:none;
      background:#e8e8e8;
      padding:15px;
      border-radius:10px;
      color:#222;
      transition:0.2s;
    }

    .enlaces a:hover{
      background:#d6d6d6;
    }

    /* TEXTO ABAJO */
    .extra{
      margin-top:30px;
      font-size:14px;
      color:#555;
    }

    @media (max-width: 700px){

      .contenedor{
        flex-direction:column;
      }

      .sidebar{
        width:100%;
        flex-direction:row;
        justify-content:center;
      }

      .contenido{
        padding:15px;
      }

      .titulo{
        font-size:22px;
      }
    }

    /* CONTACTO */

.contacto{
  margin-top:35px;
  padding-top:25px;

  border-top:1px solid #ddd;

  text-align:center;
}

.contacto h3{
  margin-bottom:15px;
  font-size:22px;
  color:#222;
}

.contacto p{
  margin:10px 0;
  font-size:16px;
  color:#555;

  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
}

.contacto i{
  color:#222;
  font-size:18px;
}